/* Adem landing page.
   Fluid sizes use cqw (1% of the page's own width) and breakpoints use container queries, so the page lays out
   by its own width rather than the window's. figma-export.html relies on that to render several frame widths at once. */

:root {
  --ink: #09090B;
  --ink-hover: #2A2A2E;
  --ink-active: #3F3F46;
  --text-2: #52525B;
  --text-3: #71717A;
  --text-4: #A1A1AA;
  --rule: #E8E7E8;
  --rule-soft: #EFEFF0;
  --rule-faint: #F0F0F1;
  --paper: #F8F8F8;
  --white: #FFFFFF;
  --fill: #F4F4F5;
  --no-fill: #EDEDEE;
  --gold: #C58A1B;
  --gold-text: #8C5A0B;
  --gold-wash: #F5EDE0;
  --cream: #FBF7F0;
  --danger: #C0392B;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
body { color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); }
a:hover { color: var(--gold-text); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--gold-wash); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Page root and per-language type settings ---------- */

.page {
  container: page / inline-size;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fnt);

  --gutter: clamp(20px, 11.4cqw - 44px, 120px);
  --fnt: 'Roboto Flex', 'Cairo', system-ui, sans-serif;
  --dvs: "opsz" 144, "wdth" 84;
  --hvs: "opsz" 96, "wdth" 90;
  --tvs: "opsz" 32, "wdth" 96;
  --dlh: 1.04;
  --hlh: 1.08;
  --tlh: 1.25;
  --blh: 1.5;
  --dls: -0.025em;
  --hls: -0.015em;
  --lls: 0.08em;
  --ltt: uppercase;
  --lsz: 12px;
  --nfw: 250;
  --dk: 1;
  --bk: 1;
  --flip: 1;
}

.page[lang="ar"] {
  --fnt: 'Cairo', 'Roboto Flex', system-ui, sans-serif;
  --dvs: normal;
  --hvs: normal;
  --tvs: normal;
  --dlh: 1.32;
  --hlh: 1.38;
  --tlh: 1.5;
  --blh: 1.75;
  --dls: 0;
  --hls: 0;
  --lls: 0;
  --ltt: none;
  --lsz: 14px;
  --nfw: 500;
  --dk: 0.9;
  --bk: 1.06;
  --flip: -1;
}

/* Turns transitions off while the page re-renders (language switch), so restored state doesn't animate in. */
.page.is-rendering *, .page.is-rendering *::before, .page.is-rendering *::after { transition: none !important; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Shared type ---------- */

.label {
  margin: 0;
  font-size: var(--lsz);
  font-weight: 700;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  color: var(--text-2);
}

.h2 {
  margin: 16px 0 0;
  font-size: calc(clamp(32px, 23px + 2cqw, 52px) * var(--dk));
  font-weight: 800;
  font-variation-settings: var(--hvs);
  line-height: var(--hlh);
  letter-spacing: var(--hls);
  text-wrap: balance;
}

.display {
  font-weight: 800;
  font-variation-settings: var(--dvs);
  line-height: var(--dlh);
  letter-spacing: var(--dls);
  text-wrap: balance;
}

.lead {
  font-size: calc(clamp(16px, 15.25px + 0.19cqw, 18px) * var(--bk));
  line-height: var(--blh);
  color: var(--text-2);
  text-wrap: pretty;
}

.body-text {
  font-size: calc(16px * var(--bk));
  line-height: var(--blh);
  color: var(--text-2);
}

.title {
  font-weight: 700;
  font-variation-settings: var(--tvs);
  line-height: var(--tlh);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease-out, transform 160ms ease-out, translate 240ms var(--ease), box-shadow 240ms ease-out;
}
.btn:hover { background: var(--ink-hover); color: var(--white); }
.btn:active { background: var(--ink-active); transform: translateY(1px); }
/* Buttons lift slightly under a mouse and settle back when pressed; touch screens keep the flat button. */
@media (hover: hover) {
  .btn:hover, .nf-submit:not(:disabled):hover { translate: 0 -1px; box-shadow: 0 10px 20px -12px rgba(9, 9, 11, 0.6); }
  .btn:active, .nf-submit:not(:disabled):active { translate: none; box-shadow: none; }
  .link-arrow:hover svg { translate: 0 3px; }
}
.btn--sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: calc(15px * var(--bk)); }
.btn--lg { min-height: 56px; padding: 0 28px; border-radius: 14px; font-size: calc(17px * var(--bk)); }

.brand-mark { display: block; flex: none; }

/* Criteria Match marks: met, not met, unknown. */
.mark { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.mark--sm { width: 24px; height: 24px; }
.mark--lg { width: 36px; height: 36px; }
.mark--met { background: var(--gold); color: var(--white); }
.mark--no { background: var(--no-fill); color: var(--ink-active); }
.mark--unk { border: 1.5px solid var(--text-3); }
.mark--unk.mark--lg { border-width: 2px; }

/* ---------- Reveals ----------
   With motion on (.has-motion), [data-reveal] elements stay hidden until main.js adds .is-in as they scroll into view,
   then fade and rise into place after their --rv-d delay. .is-shown marks ones revealed before a re-render. */

.page.has-motion [data-reveal]:not(.is-in, .is-shown) { opacity: 0; }
.page.has-motion [data-reveal].is-in {
  animation: rv-fade 600ms ease-out var(--rv-d, 0ms) backwards, rv-rise 800ms var(--ease) var(--rv-d, 0ms) backwards;
}
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-rise { from { translate: 0 var(--rv-y, 16px); } }

/* Headline lines rise out of their own clipped line box (.hero-line). */
.page.has-motion [data-reveal="line"].is-in {
  animation: rv-fade 500ms ease-out var(--rv-d, 0ms) backwards, rv-line 1000ms var(--ease) var(--rv-d, 0ms) backwards;
}
@keyframes rv-line { from { translate: 0 110%; } }

.page.has-motion [data-reveal="phone"] { --rv-y: 56px; }
.page.has-motion [data-reveal="phone"].is-in { animation-duration: 900ms, 1300ms; }

/* How it works steps stay in place: the top line grows across each step from its --sd, the dot appears as the line
   reaches it, then the number, title, text and screen follow. */
.page.has-motion [data-reveal="step"]:not(.is-in, .is-shown) { opacity: 1; }
.page.has-motion [data-reveal="step"].is-in { animation: none; }
.page.has-motion .step:not(.is-in, .is-shown)::before { scale: 0 1; }
.page.has-motion .step:not(.is-in, .is-shown) > * { opacity: 0; }
.page.has-motion .step.is-in::before { animation: step-line 360ms linear var(--sd) backwards; }
.page.has-motion .step.is-in > .step-dot { animation: step-dot 420ms var(--ease) var(--sd) backwards; }
.page.has-motion .step.is-in > :not(.step-dot) {
  animation: rv-fade 600ms ease-out var(--cd) backwards, rv-rise 800ms var(--ease) var(--cd) backwards;
}
.step > .step-n { --cd: calc(var(--sd) + 60ms); }
.step > h3 { --cd: calc(var(--sd) + 120ms); }
.step > p { --cd: calc(var(--sd) + 180ms); }
.step > .step-shot { --cd: calc(var(--sd) + 260ms); }
@keyframes step-line { from { scale: 0 1; } }
@keyframes step-dot { from { scale: 0; } }

@media print {
  .page.has-motion [data-reveal] { opacity: 1 !important; animation: none !important; }
}

/* The language switch's crossfade (main.js setLang). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease-out; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 248, 248, 0);
  border-bottom: 1px solid rgba(232, 231, 232, 0);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.site-header.is-scrolled { background: var(--paper); border-bottom-color: var(--rule); }
.page.is-embedded .site-header { position: relative; }

.site-header-bar {
  height: clamp(64px, 5cqw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 8px; }
.brand, .brand:hover { color: var(--ink); }
.brand-name {
  font-size: calc(23px * var(--bk));
  font-weight: 800;
  font-variation-settings: var(--hvs);
  letter-spacing: var(--hls);
  line-height: 1;
}

.header-actions { display: flex; align-items: center; gap: clamp(8px, 1.6cqw, 24px); }
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-btn {
  height: 40px;
  min-width: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.lang-btn[lang="ar"] { font-family: 'Cairo', system-ui, sans-serif; font-size: 16px; }
.lang-btn[aria-pressed="true"] { font-weight: 750; color: var(--ink); }
.lang-btn:hover { background: var(--rule-soft); color: var(--ink); }
.lang-sep { width: 1px; height: 16px; background: #D4D4D8; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 3;
  background: var(--paper);
  padding: clamp(40px, 6cqw, 88px) 0 40px;
}
.hero-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 48px; }
.hero-copy { flex: 1 1 480px; max-width: 780px; min-width: 0; padding-top: clamp(8px, 2cqw, 32px); }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold-text);
  font-size: var(--lsz);
  font-weight: 750;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  white-space: nowrap;
}

.hero-title { margin: 28px 0 0; font-size: calc(clamp(44px, 30px + 3.6cqw, 84px) * var(--dk)); }
.hero-title span { display: block; }
/* Extended on every side so the clip doesn't cut overhanging glyphs, descenders or Arabic marks. The flex column
   stops those negative margins collapsing, so each line keeps its place. */
.hero-title { display: flex; flex-direction: column; }
.hero-line { overflow: clip; padding: 0.08em 0.1em 0.12em; margin: -0.08em -0.1em -0.12em; }
.page[lang="ar"] .hero-line { padding: 0.2em 0.1em 0.3em; margin: -0.2em -0.1em -0.3em; }
.hero-sub {
  margin: 28px 0 0;
  max-width: 34em;
  font-size: calc(clamp(17px, 15.6px + 0.36cqw, 20px) * var(--bk));
  line-height: var(--blh);
  color: var(--text-2);
  text-wrap: pretty;
}
.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: calc(17px * var(--bk));
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease-out;
}
.link-arrow:hover { color: var(--gold-text); }
.link-arrow span { white-space: nowrap; }
.link-arrow svg { transition: translate 240ms var(--ease); }

.hero-phone { flex: 0 1 340px; margin-inline-start: auto; margin-top: 160px; margin-bottom: -200px; }

/* ---------- How it works ---------- */

.how {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 10cqw, 144px) 0 clamp(48px, 6cqw, 96px);
}
.how-head { max-width: min(640px, calc(100% - 380px)); }

.steps {
  list-style: none;
  margin: clamp(48px, 6cqw, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.step {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-content: start;
  border-top: 1px solid transparent;
  padding-top: 28px;
  padding-inline-end: 28px;
  padding-bottom: 48px;
  --sd: calc(var(--i, 0) * 360ms); /* when this step's part of the line starts drawing: steps in one row draw in turn */
}
/* The step's top line, drawn over its transparent border so it can grow in. */
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
.page[lang="ar"] .step::before { transform-origin: right; }
.step-dot {
  position: absolute;
  top: -5px;
  inset-inline-start: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ink);
}
.step-n {
  font-size: clamp(64px, 6cqw, 88px);
  font-weight: var(--nfw);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin: 20px 0 0; font-size: calc(clamp(19px, 17px + 0.4cqw, 22px) * var(--bk)); }
.step p { margin: 8px 0 0; max-width: 32ch; text-wrap: pretty; }
.step-shot {
  margin-top: 24px;
  align-self: start;
  border-radius: 24px;
  background: var(--paper);
  overflow: hidden;
  border: 1px solid var(--rule-faint);
}

/* ---------- Criteria Match ---------- */

.cm {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: clamp(88px, 12cqw, 176px) 0;
}
.cm-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px clamp(48px, 6cqw, 96px); }
.cm-copy { flex: 1 1 340px; max-width: 440px; min-width: 0; padding-top: 24px; }
.cm-copy > .lead { margin: 24px 0 0; }

.legend { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.legend li { display: flex; gap: 14px; align-items: flex-start; }
.legend .mark { margin-top: 1px; }
.legend p { margin: 0; }
.legend strong { font-weight: 700; color: var(--ink); }

.cm-note { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ink); }
.cm-note-title {
  margin: 0;
  font-size: calc(clamp(24px, 20px + 0.8cqw, 30px) * var(--dk));
  font-weight: 800;
  font-variation-settings: var(--hvs);
  line-height: var(--hlh);
  letter-spacing: var(--hls);
}
.cm-note .lead { margin: 12px 0 0; }

.cm-card {
  order: -1;
  flex: 1 1 520px;
  max-width: 700px;
  min-width: 0;
  background: var(--white);
  border-radius: 32px;
  padding: clamp(20px, 3.2cqw, 44px);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 28px 56px -36px rgba(9, 9, 11, 0.22);
}
.cm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cm-card-id { min-width: 0; }
.cm-card-title {
  margin: 0;
  font-size: calc(clamp(24px, 20px + 0.9cqw, 32px) * var(--dk));
  font-weight: 800;
  font-variation-settings: var(--hvs);
  letter-spacing: var(--hls);
  line-height: var(--hlh);
}
.cm-card-sub { margin: 8px 0 0; font-size: calc(16px * var(--bk)); line-height: 1.45; color: var(--text-3); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: var(--lsz);
  font-weight: 750;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--white); }

.cm-card-bar {
  margin-top: clamp(24px, 3cqw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}
.cm-card-heading { margin: 0; font-size: calc(clamp(18px, 16px + 0.4cqw, 21px) * var(--bk)); font-weight: 750; }
.cm-summary {
  margin: 0;
  font-size: calc(15px * var(--bk));
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.cm-summary.is-on { opacity: 1; }
.cm-count.is-new { animation: cm-count 900ms ease-out; }
@keyframes cm-count { from { opacity: 0; color: var(--gold-text); } 30% { opacity: 1; color: var(--gold-text); } }

/* Each row starts as a grey "Checking" placeholder and resolves to its mark when .is-on is added. */
.cm-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: clamp(12px, 1.4cqw, 18px);
  padding: clamp(16px, 1.8cqw, 22px) 0;
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.cm-mark { display: grid; width: 36px; height: 36px; }
.cm-pending, .cm-final { grid-area: 1 / 1; }
.cm-pending { width: 36px; height: 36px; border-radius: 999px; background: var(--rule-faint); transition: opacity 240ms ease-out; }
.cm-final {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 240ms ease-out, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cm-row-body { min-width: 0; padding-top: 5px; }
.cm-row-title { margin: 0; font-size: calc(clamp(17px, 15.6px + 0.3cqw, 19px) * var(--bk)); font-weight: 650; line-height: var(--tlh); }
.cm-detail { display: grid; margin-top: 4px; }
.cm-detail p { grid-area: 1 / 1; margin: 0; transition: opacity 240ms ease-out; }
.cm-detail-text { opacity: 0; }
.cm-checking { color: var(--text-3); }
.cm-action {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--fill);
  font-size: calc(15px * var(--bk));
  font-weight: 650;
}
.cm-status {
  padding-top: 9px;
  font-size: var(--lsz);
  font-weight: 750;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  color: var(--ink-active);
  text-align: end;
}
.cm-action, .cm-status { opacity: 0; transition: opacity 240ms ease-out; }
.cm-row.is-on .cm-pending, .cm-row.is-on .cm-checking { opacity: 0; }
.cm-row.is-on .cm-final { opacity: 1; transform: scale(1); }
/* With motion on, the check and cross draw themselves once the mark has grown in. Each path is one dash of a pattern
   three path-lengths long, so offset 1.2 hides it with no round cap left at either end. Without motion the strokes
   stay plain, since dashed paths change how the browser anti-aliases the rest of the page. */
.page.has-motion .cm-final path { stroke-dasharray: 1 2; stroke-dashoffset: 1.2; transition: stroke-dashoffset 420ms ease-out 120ms; }
.page.has-motion .cm-final path + path { transition-delay: 260ms; }
.cm-row.is-on .cm-final path { stroke-dashoffset: 0; }
.cm-row.is-on .cm-detail-text, .cm-row.is-on .cm-action, .cm-row.is-on .cm-status { opacity: 1; }

.cm-foot {
  margin-top: 8px;
  background: var(--paper);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.cm-foot svg { flex: none; }
.cm-foot p { margin: 0; font-size: calc(16px * var(--bk)); font-weight: 650; line-height: 1.45; }

/* Hovering a legend item dims the other legend items and the card rows in other states. */
@media (hover: hover) {
  .legend li, .cm-row { transition: opacity 240ms ease-out; }
  .cm-wrap:has(.legend li:hover) .legend li:not(:hover) { opacity: 0.45; }
  .cm-wrap:has(.legend [data-state="met"]:hover) .cm-row:not([data-state="met"]),
  .cm-wrap:has(.legend [data-state="no"]:hover) .cm-row:not([data-state="no"]),
  .cm-wrap:has(.legend [data-state="unk"]:hover) .cm-row:not([data-state="unk"]) { opacity: 0.3; }
}

/* ---------- Clear fees ---------- */

.fees {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 10cqw, 144px) 0 144px;
}
.fees-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px clamp(40px, 5cqw, 72px); }
.fees-copy { flex: 1 1 300px; max-width: 380px; min-width: 0; }
.fees-copy > .lead { margin: 24px 0 0; }
.fees-phone { flex: 0 0 340px; margin-inline: auto; }

.fee-notes {
  flex: 1 1 260px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 236px 0 0;
  border-bottom: 1px solid var(--rule);
}
.fee-notes li { position: relative; display: flex; gap: 16px; padding: 20px 0 22px; border-top: 1px solid var(--rule); cursor: default; }
.fee-n {
  flex: none;
  width: 20px;
  font-size: calc(15px * var(--bk));
  font-weight: 700;
  line-height: var(--tlh);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease-out;
}
/* A lit note (.is-lit, set by main.js on hover, tap or the first-view tour) gets a gold line drawn over its rule. */
.fee-notes li::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 2px;
  background: var(--gold);
  scale: 0 1;
  transform-origin: left;
  transition: scale 360ms var(--ease);
}
.page[lang="ar"] .fee-notes li::before { transform-origin: right; }
.fee-notes li.is-lit::before { scale: 1 1; }
.fee-notes li.is-lit .fee-n { color: var(--gold-text); }
.fee-notes div { min-width: 0; }
.fee-notes h3 { margin: 0; font-size: calc(18px * var(--bk)); }
.fee-notes p { margin: 4px 0 0; }

/* ---------- More features ---------- */

.more {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 10cqw, 144px) 0;
}
.more .h2 { margin: 0; max-width: 720px; }
.more-list { margin-top: clamp(40px, 5cqw, 64px); border-bottom: 1px solid var(--rule); }
.more-item { display: flex; flex-wrap: wrap; gap: 8px 48px; padding: 28px 0; border-top: 1px solid var(--rule); }
.more-item h3 { flex: 1 1 280px; max-width: 420px; margin: 0; font-size: calc(clamp(19px, 17px + 0.4cqw, 22px) * var(--bk)); }
.more-item > p { flex: 2 1 420px; max-width: 62ch; margin: 0; }
.more-item--curricula { gap: 16px 48px; padding: 28px 0 36px; }
.more-curricula { flex: 2 1 420px; min-width: 0; }
.curricula {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: calc(clamp(24px, 19px + 1.2cqw, 36px) * var(--dk));
  font-weight: 750;
  font-variation-settings: var(--hvs);
  line-height: var(--tlh);
  letter-spacing: var(--hls);
}
.curricula span { white-space: nowrap; }
/* The separator trails its name, so a wrapped line can end with one but never starts with one. */
.curricula .sep { margin-inline-start: 14px; color: var(--text-4); font-weight: 400; }
.more-curricula .lead { margin: 14px 0 0; }

/* ---------- Universities in discussion ---------- */

.unis {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 10cqw, 144px) 0;
}
.unis-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px 64px; }
.unis-copy { flex: 1 1 300px; max-width: 420px; min-width: 0; }
.unis-copy .h2 { font-size: calc(clamp(26px, 20px + 1.3cqw, 36px) * var(--dk)); }
.unis-copy .body-text { margin: 20px 0 0; text-wrap: pretty; }

.logos {
  flex: 2 1 520px;
  min-width: 0;
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-inline-start: 1px solid var(--rule);
}
.logos li {
  height: 136px;
  padding: 28px;
  border-bottom: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
  overflow: hidden;
}
/* Logos stay blurred until agreements are in place. To show them, set filter: none and opacity: 1. */
.logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) blur(4.5px);
  opacity: 0.8;
  transition: filter 200ms ease-out;
}
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-wordmark {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 80;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- For parents ---------- */

.parents { background: var(--ink); color: var(--white); padding: clamp(88px, 11cqw, 160px) 0; }
.parents-head { max-width: 820px; }
.parents .label { color: var(--text-4); }
.parents-title { margin: 16px 0 0; font-size: calc(clamp(36px, 24px + 2.8cqw, 64px) * var(--dk)); }
.parents-head .lead { margin: 24px 0 0; max-width: 36em; color: #D4D4D8; text-wrap: wrap; }
.parents-grid {
  margin-top: clamp(48px, 6cqw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  column-gap: 64px;
}
.parents-item { border-top: 1px solid var(--ink-active); padding: 28px 0 40px; }
.parents-item h3 { margin: 0; font-size: calc(clamp(20px, 17px + 0.5cqw, 24px) * var(--bk)); color: var(--white); }
.parents-item .lead { margin: 8px 0 0; max-width: 40ch; color: #E4E4E7; text-wrap: wrap; }

/* ---------- Notify me ---------- */

.notify { background: var(--cream); padding: clamp(88px, 11cqw, 160px) 0; }
.notify-inner { max-width: 680px; }
.notify-title { margin: 0; font-size: calc(clamp(36px, 24px + 2.6cqw, 60px) * var(--dk)); }
.notify-line {
  margin: 20px 0 0;
  font-size: calc(clamp(17px, 15.6px + 0.36cqw, 20px) * var(--bk));
  line-height: var(--blh);
  color: var(--text-2);
}
.notify-form { margin-top: 40px; }

/* Sign-up form. State classes on .nf: is-submitting, is-done (success or already), is-settled (form removed after done). */
.nf { position: relative; width: 100%; max-width: 640px; }
.nf-stack { display: grid; }
.nf-form { grid-area: 1 / 1; transition: opacity 200ms ease-out; }
.nf-label { display: block; font-size: calc(15px * var(--bk)); font-weight: 650; line-height: 1.4; margin-bottom: 8px; }
.nf-row { display: flex; flex-wrap: wrap; gap: 12px; }

.nf-input {
  flex: 999 1 260px;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--text-3);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  background: var(--white);
  color: var(--ink);
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 17px;
  text-align: left;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.nf-input, .nf-input:focus-visible { outline: none; }
.page[lang="ar"] .nf-input { text-align: right; }
.nf-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(197, 138, 27, 0.30); }
.nf-input[aria-invalid="true"] { border-color: var(--danger); }
.nf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.16); }
.nf-input:disabled { background: var(--fill); color: var(--text-3); }

.nf-submit {
  flex: 1 0 auto;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--fnt);
  font-size: calc(17px * var(--bk));
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms ease-out, translate 240ms var(--ease), box-shadow 240ms ease-out;
}
.nf-submit:hover { background: var(--ink-hover); }
.nf-submit:active { background: var(--ink-active); transform: translateY(1px); }
.nf.is-submitting .nf-submit { background: var(--ink-active); }
.nf-submit-text { white-space: nowrap; }
.nf-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  animation: nf-spin 0.8s linear infinite;
}
.nf:not(.is-submitting) .nf-spinner, .nf:not(.is-submitting) .nf-sending { display: none; }
@keyframes nf-spin { to { transform: rotate(360deg); } }

.nf-error {
  margin: 10px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--danger);
  font-size: calc(15px * var(--bk));
  line-height: 1.45;
  font-weight: 550;
}
.nf-error svg { flex: none; margin-top: 1px; }
.nf-error[hidden] { display: none; }
.nf-error--consent { margin: 0 0 4px; padding-inline-start: 36px; }

.nf-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 10px 0;
  min-height: 44px;
  cursor: pointer;
}
.nf-box { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; }
.nf-box input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--text-3);
  background: var(--white);
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.nf-box input:checked { background: var(--ink); border-color: var(--ink); }
.nf-box input[aria-invalid="true"] { border-color: var(--danger); }
.nf-box svg { position: absolute; inset: 0; pointer-events: none; color: var(--white); opacity: 0; transition: opacity 160ms ease-out; }
.nf-box input:checked + svg { opacity: 1; }
.nf-consent-text { font-size: calc(16px * var(--bk)); line-height: var(--blh); color: var(--ink); }

.nf-note {
  margin: 4px 0 0;
  padding-inline-start: 36px;
  font-size: calc(14px * var(--bk));
  line-height: var(--blh);
  color: var(--text-2);
}
.nf-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease-out;
}
.nf-note a:hover { color: var(--gold-text); }

.nf-done {
  grid-area: 1 / 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  outline: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out 80ms;
}
.nf.is-done .nf-form { opacity: 0; visibility: hidden; }
.nf.is-settled .nf-form { display: none; }
.nf.is-done .nf-done { opacity: 1; visibility: visible; }

.nf-done-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nf-done-icon--success { background: var(--gold); color: var(--white); }
.nf-done-icon--already { border: 1.5px solid var(--ink); color: var(--ink); }

/* The done state arrives in order: the icon grows in and, with motion on, its check draws itself (dash as in
   .cm-final), a new sign-up sends a gold ring out from the icon, then the title, text and address rise in. */
.nf-done-icon { position: relative; scale: 0.6; opacity: 0; transition: scale 480ms var(--ease) 80ms, opacity 240ms ease-out 80ms; }
.page.has-motion .nf-done-icon path { stroke-dasharray: 1 2; stroke-dashoffset: 1.2; transition: stroke-dashoffset 420ms ease-out 320ms; }
.nf-done-icon--success::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--gold);
  opacity: 0.7;
  transition: scale 900ms var(--ease) 220ms, opacity 900ms ease-out 220ms;
}
.nf-done-body > p { opacity: 0; translate: 0 8px; transition: opacity 360ms ease-out var(--td), translate 520ms var(--ease) var(--td); }
.nf-done-title { --td: 200ms; }
.nf-done-text { --td: 280ms; }
.nf-done-email { --td: 360ms; }
.nf.is-done .nf-done-icon { scale: 1; opacity: 1; }
.nf.is-done .nf-done-icon path { stroke-dashoffset: 0; }
.nf.is-done .nf-done-icon--success::after { scale: 1.7; opacity: 0; }
.nf.is-done .nf-done-body > p { opacity: 1; translate: none; }
/* Each done state hides the other's parts. Until then both stay rendered inside the hidden panel, so their entrance
   transitions have a style to start from. */
.nf[data-status="already"] .nf-done-icon--success,
.nf[data-status="success"] .nf-done-icon--already,
.nf[data-status="success"] .nf-done-email { display: none; }
.nf-done-body { min-width: 0; padding-top: 4px; }
.nf-done-title {
  margin: 0;
  font-size: calc(26px * var(--dk));
  font-weight: 800;
  font-variation-settings: var(--hvs);
  letter-spacing: var(--hls);
  line-height: var(--hlh);
}
.nf-done-text { margin: 6px 0 0; font-size: calc(17px * var(--bk)); line-height: var(--blh); color: var(--text-2); }
.nf-done-email {
  margin: 4px 0 0;
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
  text-align: left;
  word-break: break-all;
}
.page[lang="ar"] .nf-done-email { text-align: right; }

/* ---------- FAQ ---------- */

.faq { background: var(--paper); padding: clamp(80px, 10cqw, 144px) 0; }
.faq-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
.faq .h2 { flex: 1 1 300px; max-width: 420px; margin: 0; }
.faq-list { flex: 2 1 520px; max-width: 720px; min-width: 0; margin-inline-start: auto; border-bottom: 1px solid var(--rule); }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item h3 { margin: 0; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  min-height: 64px;
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--fnt);
  font-size: calc(clamp(18px, 16.5px + 0.35cqw, 21px) * var(--bk));
  font-weight: 700;
  line-height: var(--tlh);
  transition: color 160ms ease-out;
}
.faq-q:hover { color: var(--gold-text); }
.faq-icon { position: relative; flex: none; width: 18px; height: 18px; transition: rotate 280ms var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; border-radius: 1px; background: currentColor; }
.faq-icon::before { left: 0; right: 0; top: 8px; height: 2px; }
.faq-icon::after { top: 0; bottom: 0; left: 8px; width: 2px; transition: transform 200ms ease-out; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease); }
.faq-a > div { overflow: hidden; min-height: 0; }
/* The answer fades out before it's hidden, and fades and settles in as its row opens. */
.faq-a p {
  margin: 0;
  padding-bottom: 28px;
  padding-inline-end: 42px;
  max-width: 62ch;
  visibility: hidden;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 160ms ease-out, translate 240ms var(--ease), visibility 0s linear 240ms;
}
.faq-item.is-open .faq-icon { rotate: 180deg; }
.faq-item.is-open .faq-icon::after { transform: scaleY(0); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p {
  visibility: visible;
  opacity: 1;
  translate: none;
  transition: opacity 280ms ease-out 80ms, translate 360ms var(--ease) 80ms, visibility 0s;
}

/* ---------- Footer ---------- */

.site-footer { background: var(--paper); border-top: 1px solid var(--rule); padding: 64px 0 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-about { max-width: 420px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-name { font-size: calc(22px * var(--bk)); }
.footer-about .body-text { margin: 16px 0 0; }
.footer-nav { display: flex; flex-direction: column; gap: 4px; }
.footer-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: calc(16px * var(--bk));
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer-link, .footer-link:hover, .footer-email, .footer-email:hover { color: var(--ink); }
.footer-contact {
  margin: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: calc(16px * var(--bk));
  color: var(--text-2);
}
.footer-email {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer-bottom { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--white);
}
.badge-store {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-status { font-size: calc(12px * var(--bk)); color: var(--text-3); line-height: 1.3; }
.footer-copy { margin: 0; font-family: 'Roboto Flex', system-ui, sans-serif; font-size: 14px; color: var(--text-3); }

/* ---------- App screens (phone mock-ups and the cropped parts in "How it works") ---------- */

.scr { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; }

.phone {
  width: 340px;
  padding: 10px;
  background: var(--ink);
  border-radius: 54px;
  box-shadow: 0 30px 60px -30px rgba(9, 9, 11, 0.35);
}
.phone .scr { height: 692px; border-radius: 44px; }

.scr-status { position: relative; height: 44px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; }
.scr-time { font-size: 15px; font-weight: 650; letter-spacing: 0; }
.scr-camera {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 999px;
  background: var(--ink);
}
.scr-signal { display: flex; align-items: center; gap: 6px; }

.scr-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.scr-body--tight { gap: 10px; }
.phone .scr-body { padding: 2px 16px 0; }

.scr-titlebar { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.scr-title { font-size: 28px; font-weight: 800; font-variation-settings: var(--hvs); letter-spacing: var(--hls); line-height: 1.1; }
.scr-avatar, .scr-back {
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scr-avatar { width: 40px; height: 40px; }

.scr-search {
  height: 46px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--text-3);
}
.scr-search svg { flex: none; }
.scr-search span { font-size: 15px; line-height: 1.2; white-space: nowrap; }
.scr-field { flex: 1; min-width: 0; overflow: hidden; }

/* The hero phone's search (main.js startSearch), by its data-search state: focused shows a blinking caret before the
   placeholder, typing replaces the placeholder with the query and holds the caret steady, done blinks it again, and
   settled lets the field go. Each card's matching text turns gold, and a card that doesn't match dims. */
.scr-search { transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.scr-query { color: var(--ink); }
.scr-caret {
  display: none;
  width: 2px;
  height: 1.15em;
  margin-inline: 1px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: var(--gold);
  animation: caret 1.05s step-end infinite;
}
.scr-search.has-query .scr-placeholder { display: none; }
[data-search="focused"] .scr-search,
[data-search="typing"] .scr-search,
[data-search="done"] .scr-search { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-wash); }
[data-search="focused"] .scr-caret,
[data-search="typing"] .scr-caret,
[data-search="done"] .scr-caret { display: inline-block; }
[data-search="typing"] .scr-caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.scr-uni { transition: opacity 260ms ease-out; }
.scr-uni.is-dim { opacity: 0.35; }
.scr-uni-name mark { background: none; color: var(--gold-text); transition: color 160ms ease-out; }

.scr-chips { display: flex; flex-wrap: wrap; gap: 8px; overflow: hidden; }
.scr-chip {
  flex: none;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.scr-chip.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }

.scr-list { display: flex; flex-direction: column; gap: 10px; }
.scr-card { background: var(--white); border-radius: 24px; padding: 16px; box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04); }
.scr-uni { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.scr-uni-top { display: flex; gap: 12px; align-items: center; }
.scr-uni-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scr-uni-id { flex: 1; min-width: 0; }
.scr-uni-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.scr-uni-meta { font-size: 13px; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.scr-uni-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--rule-faint);
  padding-top: 12px;
}
.scr-fee { font-size: 15px; font-weight: 700; white-space: nowrap; }
.scr-fee span { font-size: 13px; font-weight: 500; color: var(--text-3); }

.spill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: calc(var(--lsz) - 1px);
  font-weight: 750;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  white-space: nowrap;
}
.spill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; }
.spill--open { background: var(--gold-wash); border-color: var(--gold-wash); color: var(--gold-text); }
.spill--open::before { background: var(--gold); }
.spill--closing { background: var(--ink); border-color: var(--ink); color: var(--white); }
.spill--closing::before { background: var(--white); }
.spill--upcoming { background: var(--white); border-color: var(--rule); color: var(--text-2); }
.spill--upcoming::before { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.spill--submitted { flex: none; background: var(--white); border-color: var(--rule); color: var(--ink); }
.spill--submitted::before { background: var(--ink); }

.scr-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  background: var(--white);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}
.scr-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.scr-tab.is-on { font-weight: 700; color: var(--ink); }
.scr-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 112px;
  margin-left: -56px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}

.scr-reqs { display: flex; flex-direction: column; }
.scr-reqs-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.scr-reqs-title { font-size: 15px; font-weight: 750; }
.scr-reqs-sum { font-size: 12px; color: var(--text-3); }
.scr-req { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-faint); align-items: flex-start; }
.scr-req-body { flex: 1; min-width: 0; }
.scr-req-title { font-size: 14px; font-weight: 650; line-height: 1.3; }
.scr-req-detail { font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.scr-note {
  margin-top: 6px;
  background: var(--paper);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.scr-note svg { flex: none; }

.scr-nav { height: 44px; display: flex; align-items: center; gap: 10px; margin-bottom: 2px; font-size: 16px; font-weight: 650; }
.scr-back { width: 36px; height: 36px; }
.scr-back svg { transform: scaleX(var(--flip)); }

.scr-label {
  display: block;
  font-size: calc(var(--lsz) - 1px);
  font-weight: 700;
  letter-spacing: var(--lls);
  text-transform: var(--ltt);
  color: var(--text-3);
}
.scr-app { display: flex; flex-direction: column; gap: 4px; }
.scr-program { font-size: 17px; font-weight: 750; line-height: 1.3; }
.scr-place { font-size: 13px; color: var(--text-3); }
.scr-shared {
  border-top: 1px solid var(--rule-faint);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scr-shared-title { font-size: 12px; color: var(--text-2); font-weight: 600; }
.scr-shared-items { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-shared-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 6px 10px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
}
.scr-tick {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scr-fees { padding: 14px 16px; }
.scr-fees .scr-label { margin-bottom: 4px; }
.scr-fee-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-inline: -8px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.35;
  transition: background-color 240ms ease-out;
}
.scr-fee-line span:first-child { color: var(--text-2); transition: color 240ms ease-out; }
/* The fees phone part that a lit fee note describes. */
.scr-fee-line.is-lit, .scr-pay.is-lit { background: var(--gold-wash); }
.scr-fee-line.is-lit span:first-child { color: var(--gold-text); }
.scr-fee-line span:last-child { font-weight: 650; white-space: nowrap; }
.scr-fee-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--rule);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 750;
}
.scr-fee-total span:last-child { white-space: nowrap; }

.scr-pay { padding: 14px 16px 16px; transition: background-color 240ms ease-out; }
.scr-pay .scr-label { margin-bottom: 10px; }
.scr-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scr-method {
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scr-method svg { flex: none; }
.scr-method-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.scr-radio {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--text-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scr-method.is-on { border: 1.5px solid var(--gold); }
.scr-method.is-on .scr-radio { border-color: var(--gold); }
.scr-method.is-on .scr-radio::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }

.scr-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px 26px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.scr-cta-btn {
  height: 50px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 650;
}

.scr-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.scr-track-head > div { min-width: 0; }
.scr-track-head .scr-place { margin-top: 2px; }
.scr-steps { margin-top: 16px; display: flex; flex-direction: column; }
.scr-step { display: flex; gap: 12px; align-items: stretch; }
.scr-rail { flex: none; width: 20px; display: flex; flex-direction: column; align-items: center; }
.scr-node {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scr-step--done .scr-node { background: var(--ink); color: var(--white); }
.scr-step--now .scr-node { border: 2px solid var(--ink); }
.scr-step--now .scr-node::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
.scr-step--next .scr-node { border: 1.5px solid var(--text-4); }
.scr-line { flex: 1; width: 2px; min-height: 18px; margin: 3px 0; border-radius: 1px; background: var(--rule); }
.scr-step--done .scr-line { background: var(--ink); }
.scr-step-text { padding-bottom: 14px; min-width: 0; }
.scr-step-title { font-size: 14px; font-weight: 650; line-height: 20px; }
.scr-step--next .scr-step-title { color: var(--text-2); }
.scr-step-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }

/* ---------- Narrow layouts (below 1024px of page width) ---------- */

@container page (width < 1024px) {
  .hero { z-index: 1; padding-bottom: 64px; }
  .hero-title { display: block; }
  .hero-title span { display: inline; }
  .hero-phone { margin-top: 48px; margin-bottom: 0; }
  .page.has-motion .hero-phone.is-in { animation-delay: 0ms; }
  .how-head { max-width: 640px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { --sd: calc(var(--i2, 0) * 360ms); }
  .cm-copy { padding-top: 0; }
  .cm-card { order: 0; }
  .fees { padding-bottom: 80px; }
  .fees-phone { order: 3; }
  .fee-notes { padding-top: 0; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container page (width < 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { --sd: 0ms; }
}