/* Maket layout utilities — CSP style-src 'self' (no unsafe-inline) */

/* --- stacks (flex column + gap) --- */
.stack,
.stack-2 { display: flex; flex-direction: column; gap: 2px; }
.stack-4 { display: flex; flex-direction: column; gap: 4px; }
.stack-6 { display: flex; flex-direction: column; gap: 6px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-18 { display: flex; flex-direction: column; gap: 18px; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.stack-64 { display: flex; flex-direction: column; gap: 64px; }
.stack-72 { display: flex; flex-direction: column; gap: 72px; }

.stack-6-lh { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.stack-8-lh { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.stack-8-14 { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.stack-10-lh { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.stack-12-lh { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }

/* --- page / content padding --- */
.content-pad,
.content-pad-hero {
  padding: 80px 64px 64px;
  box-sizing: border-box;
}
.content-pad-72 {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 80px 64px 64px;
  box-sizing: border-box;
}
.content-pad-64 {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 80px 64px 64px;
  box-sizing: border-box;
}

.page-pad,
.phone-pad {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 20px;
}
.page-pad-18 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 20px;
}
.page-pad-kabinet {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 20px;
}
.page-pad-done {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 20px;
}
.page-pad-22 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 20px 32px;
}
.page-pad-24 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 20px 32px;
}

/* --- grids (base; maket.css collapses on narrow screens) --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.grid-2-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.grid-2-hero-start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* --- rows --- */
.row,
.row-12 { display: flex; gap: 12px; }
.row-14 { display: flex; gap: 14px; }
.row-14-wrap { display: flex; gap: 14px; flex-wrap: wrap; }
.row-16,
.row-16-wrap { display: flex; gap: 16px; font-size: 14px; flex-wrap: wrap; }
.row-20,
.row-20-wrap { display: flex; gap: 20px; font-size: 15px; flex-wrap: wrap; }
.row-center-12 { display: flex; align-items: center; gap: 12px; }
.row-baseline-14 { display: flex; align-items: baseline; gap: 14px; }
.between,
.row-between { display: flex; justify-content: space-between; }
.row-between-start { display: flex; justify-content: space-between; align-items: flex-start; }
.row-between-start-12 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.row-between-base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.label-value {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.label-value-wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- typography --- */
.hero-h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.12;
  font-weight: 600;
}
.hero-h1-sm {
  margin: 0;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 600;
}
.phone-h1,
.h1-phone {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.h1-phone-22 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}
.h1-phone-26 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
}
.h1-phone-28 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}
.section-h2,
.h2-desk {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  max-width: 760px;
}
.lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.lead-13 {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.lead-14 {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.lead-14-mt {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.lead-16 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.lead-16-mw {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 760px;
}
.lead-17 {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}
.lead-18 {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  max-width: 520px;
}
.lead-mw {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  max-width: 760px;
}
.m-0-15 { margin: 0; font-size: 15px; }

.text-12 { font-size: 12px; line-height: 1.5; }
.text-13 { font-size: 13px; }
.text-13-lh { font-size: 13px; line-height: 1.5; }
.text-14 { font-size: 14px; }
.text-14-lh { font-size: 14px; line-height: 1.45; }
.text-14-lh15 { font-size: 14px; line-height: 1.5; }
.text-14-lh16 { font-size: 14px; line-height: 1.6; }
.text-15 { font-size: 15px; }
.text-15-lh { font-size: 15px; line-height: 1.45; }
.text-15-lh15 { font-size: 15px; line-height: 1.5; }
.text-15-m,
.fw-500.text-15 { font-size: 15px; font-weight: 500; }
.text-16-m { font-size: 16px; font-weight: 500; }
.text-17-m { font-size: 17px; font-weight: 500; }
.text-18 { font-size: 18px; }
.text-18-m { font-size: 18px; font-weight: 500; }
.text-22 { font-size: 22px; }
.text-28 { font-size: 28px; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.lh-12 { line-height: 1.12; }
.lh-145 { line-height: 1.45; }
.lh-15 { line-height: 1.5; }
.lh-155 { line-height: 1.55; }

.max-w-520 { max-width: 520px; }
.max-w-760 { max-width: 760px; }

.label-upper,
.section-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-label-sm {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.link-muted,
.link-back { font-size: 15px; color: #5F6672; }
.link-home { font-size: 14px; color: #5F6672; }
.link-15 { font-size: 15px; }
.link-15-center { text-align: center; font-size: 15px; }
.link-14 { font-size: 14px; }
.logo-nav { font-size: 22px; }
.nav-tagline { font-size: 13px; }
.step-idx { color: #1B4DE4; font-weight: 600; }
.mono-14 { font-size: 14px; }
.class-letter-lg { font-size: 28px; }

/* --- cards / panels --- */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
}
.card-stack-10 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}
.card-stack-12 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-stack-12-pad {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}
.card-stack-14-tint {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: #F7F8FA;
}
.card-pad-22 { padding: 22px; }
.panel-soft,
.panel-tint {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: #F7F8FA;
  border-radius: 10px;
}
.pad-x-24 { padding: 0 24px; }

/* --- badges / icons --- */
.class-square-sm,
.class-badge {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #1B4DE4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Unbounded, sans-serif;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}
.class-square,
.class-badge-lg {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #1B4DE4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Unbounded, sans-serif;
  font-weight: 600;
  font-size: 26px;
  flex-shrink: 0;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: #1B4DE4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #E9EEFC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1B4DE4;
  font-weight: 600;
  flex-shrink: 0;
}
.platform-icon-soon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #F0F2F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5F6672;
  font-weight: 600;
  flex-shrink: 0;
}
.platform-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  color: #0f1115;
}
.platform-row-soon {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  color: #0f1115;
  opacity: 0.72;
}
.ok-icon {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: #E6F4EA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verify-ok-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #E6F4EA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- forms --- */
.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-stack-10 { display: flex; flex-direction: column; gap: 10px; }
.form-stack-14 { display: flex; flex-direction: column; gap: 14px; }
.form-stack-20 { display: flex; flex-direction: column; gap: 20px; }
.form-inline { display: inline; margin: 0; padding: 0; }
.link-btn,
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: #1B4DE4;
  font: inherit;
  cursor: pointer;
}
.field-code {
  font-size: 24px;
  letter-spacing: 0.2em;
  text-align: center;
}
.field-phone { font-size: 18px; }

/* --- passport page wrappers (injected; no inline styles under CSP) --- */
.oska-conformity {
  max-width: 920px;
  margin: 1rem auto;
  padding: 1rem 1.25rem;
  border: 1px solid #E1E4EA;
  font-family: Onest, sans-serif;
  background: #F5F7FB;
}
.oska-note {
  color: #5F6672;
  font-size: 14px;
}
.oska-actions {
  max-width: 920px;
  margin: 1rem auto;
  padding: 1rem 1.25rem;
  font-family: Onest, sans-serif;
}
.oska-banner-replace {
  max-width: 920px;
  margin: 1rem auto 0;
  padding: 0.85rem 1.25rem;
  border: 1px solid #E1E4EA;
  border-radius: 8px;
  font-family: Onest, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: #FBF3D9;
  color: #0f1115;
}
.oska-banner-replace a {
  color: #1B4DE4;
}