/* ORIENT. Tokens come from copy/brand-kit.md.
   Blue = actions. Green = progress. Amber = money and status deadlines.
   Layout uses logical properties (inline / block) so French and
   right-to-left languages drop in without a rewrite. */

/* Fonts are served from this site (assets/fonts), not from Google, so a visit sends nothing to a third party.
   Figtree and Sora are variable fonts under the SIL Open Font License; each file covers all the weights we use. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("assets/fonts/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("assets/fonts/sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #F5FAFC;
  --surface: #FFFFFF;
  --surface-2: #E6F4F8;
  --text: #0A1C2A;
  --muted: #475869;
  --accent: #0041C2;
  --accent-rgb: 0, 65, 194;
  --accent-dark: #00339A;
  --accent-tint: #E4EDFF;
  --accent-2: #00A86B;
  --accent-2-bright: #17C47F;
  --accent-2-glow: #3DDC97;
  --accent-2-text: #00704A;
  --accent-2-tint: #DDF5EA;
  --warn: #C25E00;
  --warn-text: #7A3E00;
  --warn-tint: #FFF1D6;
  --line: #CFE0EA;
  --field: #6B7F90;
  --navy-2: #12293B;
  --on-navy: #F5FAFC;
  --on-navy-muted: #B9C9D5;
  --error: #B3261E;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Sora", var(--font);

  --radius: 22px;
  --radius-sm: 12px;
  --gutter: 20px;
  --section: clamp(56px, 7vw, 96px);
  --shadow-card: 0 1px 1px rgba(10, 28, 42, .04), 0 4px 8px rgba(10, 28, 42, .04), 0 14px 28px rgba(10, 28, 42, .07), 0 32px 64px rgba(10, 28, 42, .07);
  --shadow-soft: 0 1px 2px rgba(10, 28, 42, .04), 0 8px 24px rgba(10, 28, 42, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-block-start: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
img, svg { display: block; max-inline-size: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); font-weight: 700; line-height: 1.02; }
h2 { font-size: clamp(2rem, 6.4vw, 3.5rem); font-weight: 700; line-height: 1.06; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

.hl { color: var(--accent); }
.hl--warn { color: #B45309; }
.path .hl, .access .hl { color: var(--accent-2-glow); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.access :focus-visible, .footer :focus-visible { outline-color: #fff; }
.formcard :focus-visible { outline-color: var(--accent); }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 100;
  background: var(--text); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600;
}
.skip:focus { inset-block-start: 12px; color: #fff; }

.wrap { inline-size: 100%; max-inline-size: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-inline-size: 900px; }

.icon { inline-size: 1.15em; block-size: 1.15em; flex: none; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

.tick {
  inline-size: 26px; block-size: 26px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--accent-2-tint); color: var(--accent-2-text);
}
.tick .icon { inline-size: 15px; block-size: 15px; }
.access .tick { background: rgba(23, 196, 127, .2); color: var(--accent-2-glow); }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-block-end: 16px;
}
.eyebrow--light { color: #8FB4FF; }
.lede { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--muted); margin-block-start: 20px; max-inline-size: 34em; }
.lede--light { color: var(--on-navy-muted); }
.section-head { max-inline-size: 820px; margin-block-end: clamp(40px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(var(--accent-rgb), .3), 0 8px 22px rgba(var(--accent-rgb), .28); }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--done { background: var(--accent-2); color: var(--text); box-shadow: 0 6px 16px rgba(0, 168, 107, .28); }
.btn--done:hover { background: var(--accent-2-bright); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--field); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--large { min-block-size: 56px; padding-inline: 30px; font-size: 1.0625rem; }
.btn--small { min-block-size: 44px; padding: 8px 18px; font-size: .9375rem; }
.btn--block { inline-size: 100%; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px;
  font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px;
}
.textlink:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgba(245, 250, 252, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-block-end: 1px solid transparent; transition: border-color .2s ease;
}
.header.is-scrolled { border-block-end-color: var(--line); }
.header__row { display: flex; align-items: center; gap: 12px; min-block-size: 68px; }

.logo { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text); margin-inline-end: auto; }
.logo svg { block-size: 30px; inline-size: auto; aspect-ratio: 345 / 100; }
.logo:hover { color: var(--text); }
.logo--light, .logo--light:hover { color: #fff; }

.header__cta { display: none; }

.menu-btn {
  inline-size: 48px; block-size: 48px; display: inline-grid; place-items: center;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block; inline-size: 24px; block-size: 2.5px; border-radius: 2px; background: var(--text);
  transition: transform .2s ease, background-color .2s ease;
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-btn__bars::before { inset-block-start: -8px; }
.menu-btn__bars::after { inset-block-start: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-8px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  background: var(--bg); border-block-end: 1px solid var(--line);
  box-shadow: 0 24px 40px rgba(10, 28, 42, .1);
  padding: 8px var(--gutter) 24px;
}
.nav.is-open { display: block; }
.nav__list a:not(.btn) {
  display: flex; align-items: center; min-block-size: 52px;
  font-weight: 600; font-size: 1.125rem; color: var(--text); text-decoration: none;
  border-block-end: 1px solid var(--line);
}
.nav__cta { margin-block-start: 20px; }
.nav__cta .btn { inline-size: 100%; }

@media (min-width: 520px) {
  .header__cta { display: inline-flex; }
  .nav__cta { display: none; }
}
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .logo { margin-inline-end: 0; }
  .logo svg { block-size: 32px; }
  .header__row { gap: 28px; min-block-size: 76px; }
  .nav { display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0; margin-inline-start: auto; }
  .nav__list { display: flex; gap: 6px; }
  .nav__list a:not(.btn) {
    min-block-size: 44px; padding-inline: 14px; border: 0; border-radius: 10px;
    font-size: 1rem; font-weight: 500; color: var(--text);
  }
  .nav__list a:not(.btn):hover { background: var(--surface-2); }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(12px, 2vw, 20px) clamp(48px, 7vw, 88px); isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: -76px 0 0 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(var(--accent-rgb), .12), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(0, 168, 107, .1), transparent 70%);
}
/* grain */
.hero::after {
  content: ""; position: absolute; inset: -76px 0 0 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grid { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.375rem, 8.4vw, 4.25rem); }
.hero__sub { font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--muted); margin-block-start: 16px; max-inline-size: 28em; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* ---------- Signup: one email field, then an optional second step (hero and closing section) ---------- */
.signup { margin-block-start: 24px; max-inline-size: 34rem; }
.signup__label { display: block; font-weight: 600; margin-block-end: 8px; }
.signup__row { display: grid; gap: 10px; }
.signup__row input {
  inline-size: 100%; min-block-size: 56px; padding: 12px 16px;
  background: var(--surface); color: var(--text); border: 2px solid var(--field); border-radius: var(--radius-sm); font-size: 1.0625rem;
}
.signup__row input:hover { border-color: var(--text); }
.signup__row input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); border-radius: var(--radius-sm); }
.signup__row input[aria-invalid="true"] { border-color: var(--error); }
.signup__fine { margin-block-start: 12px; font-size: .875rem; color: var(--muted); }
/* step 2 (optional) and the last screen */
.hero .signup__two, .hero .signup__done { padding: clamp(18px, 3vw, 26px); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.formcard .signup { margin-block-start: 0; max-inline-size: none; }
.signup__step { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2-text); }
.signup__title { margin-block-start: 6px; font-size: 1.375rem; }
.signup__title:focus { outline: none; }
.signup__note { margin-block: 8px 20px; color: var(--muted); }
.signup__skipline { margin-block-start: 6px; text-align: center; }
.signup__skip { min-block-size: 44px; padding: 8px 12px; background: none; border: 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.signup__skip:hover { color: var(--accent-dark); }
.signup__two .signup__fine { text-align: center; margin-block-start: 6px; }
@media (min-width: 560px) {
  .signup__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- The phone and the step card (signature element) ---------- */
.demo { inline-size: 100%; max-inline-size: 400px; margin-inline: auto; }
/* the hint sits above the phone, where people look first */
.demo__cap {
  display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: fit-content; margin: 0 auto 14px;
  padding: 8px 16px; border-radius: 999px; background: var(--text); color: #fff; font-size: 1rem; font-weight: 600;
}
.demo__cap .icon { transform: rotate(90deg); }
.demo__stage { position: relative; isolation: isolate; padding-block: 6px; }
/* laptops with short screens (1366x768): shrink the phone so all of it fits under the header */
@media (min-width: 960px) and (max-height: 840px) { .demo__stage { zoom: .87; } }
@media (min-width: 960px) and (max-height: 700px) { .demo__stage { zoom: .76; } }

.demo__blob {
  position: absolute; inset: -4% calc(-1 * var(--gutter)); z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 30% 28%, rgba(47, 107, 235, .5), transparent 72%),
    radial-gradient(44% 40% at 72% 74%, rgba(0, 168, 107, .42), transparent 72%);
  filter: blur(44px);
  animation: drift 18s ease-in-out -6s infinite alternate;
}
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }

.phone {
  position: relative; inline-size: min(100%, 318px); margin-inline: auto; padding: 10px;
  border-radius: 50px;
  background: linear-gradient(145deg, #223C52, #0A1C2A 38%, #050D14);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    0 2px 4px rgba(10, 28, 42, .2),
    0 22px 44px -12px rgba(10, 28, 42, .38),
    0 64px 110px -30px rgba(0, 65, 194, .42);
  transform: rotate(2deg);
}
.phone::before, .phone::after {
  content: ""; position: absolute; inset-inline-end: -3px; inline-size: 4px; border-radius: 2px; background: #0A1C2A;
}
.phone::before { inset-block-start: 128px; block-size: 70px; }
.phone::after { inset-inline: -3px auto; inset-block-start: 108px; block-size: 38px; }
[dir="rtl"] .phone { transform: rotate(-2deg); }
@media (min-width: 960px) {
  .phone { inline-size: 338px; transform: rotate(2deg); }
  [dir="rtl"] .phone { transform: rotate(-2deg); }
}

.phone__screen {
  position: relative; display: flex; flex-direction: column;
  min-block-size: 610px; padding: 0 12px 30px;
  border-radius: 40px; overflow: hidden;
  background: linear-gradient(180deg, #EEF6FA, var(--bg) 30%);
}
.phone__status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 14px 6px; font-weight: 600; font-size: .8125rem; }
.phone__island { inline-size: 86px; block-size: 25px; border-radius: 999px; background: #0A1C2A; }
.phone__sys { justify-self: end; display: flex; align-items: flex-end; gap: 2px; }
.phone__sys i { inline-size: 3px; border-radius: 1px; background: var(--text); }
.phone__sys i:nth-child(1) { block-size: 5px; }
.phone__sys i:nth-child(2) { block-size: 8px; }
.phone__sys i:nth-child(3) { block-size: 11px; }
.phone__sys b { inline-size: 22px; block-size: 11px; margin-inline-start: 6px; border: 1.5px solid var(--text); border-radius: 3.5px; background: linear-gradient(90deg, var(--text) 70%, transparent 70%) content-box; padding: 1.5px; }
.phone__home { position: absolute; inset-block-end: 9px; inset-inline-start: 50%; translate: -50% 0; inline-size: 108px; block-size: 5px; border-radius: 999px; background: rgba(10, 28, 42, .32); }

.app__bar { display: flex; align-items: center; gap: 8px; padding: 12px 4px 10px; font-size: .8125rem; font-weight: 600; }
.app__mark { inline-size: 24px; block-size: 24px; flex: none; color: var(--text); }
.app__chapter { color: var(--accent); margin-inline-end: auto; }
.app__count { color: var(--muted); white-space: nowrap; }
.app__progress { block-size: 6px; margin: 0 4px 14px; border-radius: 999px; background: #D5E6EE; overflow: hidden; }
.app__progress i { display: block; block-size: 100%; inline-size: 100%; border-radius: 999px; background: var(--accent-2); transform: scaleX(var(--bar, .04)); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .app__progress i { transform-origin: 100% 50%; }

.stack { position: relative; }
.card { position: relative; z-index: 1; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-card); overflow: hidden; }
.card__body, .card__end { padding: 18px 16px 16px; }

.card__label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem; line-height: 1.16; letter-spacing: -0.02em; margin-block-start: 6px; }

.card__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; }
.due, .flag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-weight: 600; font-size: .875rem; }
.due { background: var(--surface-2); color: var(--text); }
.due .icon { animation: tick 5s ease-in-out -2s infinite; transform-origin: center; }
.flag { background: var(--warn-tint); color: var(--warn-text); }
.flag .icon { color: var(--warn); }
@keyframes tick { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } 94% { transform: rotate(10deg); } }

.card__meta { margin-block-start: 14px; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.card__row { padding-block: 11px; border-block-end: 1px solid var(--line); }
.card__row dt { display: flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.card__row dd { margin-block-start: 3px; padding-inline-start: 24px; }
.card__source { display: block; font-weight: 600; line-height: 1.35; }
.verified {
  display: inline-flex; align-items: center; gap: 5px; margin-block-start: 6px; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: var(--accent-2-tint); color: var(--accent-2-text); font-size: .8125rem; font-weight: 600;
}
.card__docs li { position: relative; padding-inline-start: 14px; line-height: 1.5; }
.card__docs li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--field); }

.card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 16px; }
.card__actions .btn { flex: 1 1 110px; min-block-size: 46px; padding: 10px 14px; font-size: .9375rem; }
.card__end .card__actions .btn { flex-basis: 100%; }
.card__end { padding-block: 26px 22px; }

.help { margin-block-start: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); font-size: .875rem; }
.help__title { font-weight: 600; }
.help__to { color: var(--muted); margin-block-start: 6px; font-size: .8125rem; }
.help__text { margin-block-start: 6px; padding: 10px 12px; background: var(--surface); border-radius: 10px; line-height: 1.5; }

/* the next step, locked, peeking out from behind */
.peek {
  position: relative; z-index: 0; display: flex; align-items: center; gap: 10px;
  margin: -16px 12px 0; padding: 28px 14px 13px;
  background: var(--surface); border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 22px rgba(10, 28, 42, .08);
  color: var(--muted); opacity: .82;
}
.peek .icon { inline-size: 18px; block-size: 18px; }
.peek__text { display: grid; line-height: 1.3; }
.peek small { font-size: .6875rem; font-weight: 600; }
.peek b { font-size: .875rem; font-weight: 600; color: var(--text); }
.stack::after {
  content: ""; display: block; block-size: 10px; margin: 0 28px; border-radius: 0 0 16px 16px;
  background: var(--surface); opacity: .5; box-shadow: 0 8px 16px rgba(10, 28, 42, .06);
}
.stack.is-end::after { display: none; }

/* Done: tick, then the next step slides in */
.btn--done.is-ticked { background: var(--accent-2-bright); }
.btn--done.is-ticked .icon { animation: pop .45s cubic-bezier(.3, 1.7, .5, 1); }
.btn--done::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent-2); opacity: 0; pointer-events: none; }
.btn--done.is-ticked::after { animation: ring .55s ease-out; }
@keyframes pop { 0% { transform: scale(.3) rotate(-20deg); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.22, 1.5); } }

.stack.is-anim .card__body, .stack.is-anim .card__end, .stack.is-anim .peek { transition: transform .28s cubic-bezier(.3, .7, .2, 1), opacity .24s ease; }
.stack.is-leaving .card__body { transform: translateX(-30px); opacity: 0; }
.stack.is-leaving .peek { transform: translateY(-10px); opacity: 0; }
.stack.is-entering .card__body, .stack.is-entering .card__end { transform: translateX(30px); opacity: 0; transition: none; }
.stack.is-entering .peek { transform: translateY(8px); opacity: 0; transition: none; }
[dir="rtl"] .stack.is-leaving .card__body { transform: translateX(30px); }
[dir="rtl"] .stack.is-entering .card__body, [dir="rtl"] .stack.is-entering .card__end { transform: translateX(-30px); }

/* ---------- Trust line ---------- */
.trust { background: var(--surface); }
.trust__list { display: grid; gap: 12px; padding-block: 26px; font-weight: 600; font-size: 1rem; }
.trust__list li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 860px) {
  .trust__list { grid-auto-flow: column; justify-content: space-between; gap: 24px; padding-block: 30px; }
}

/* ---------- The cousin ---------- */
.cousin { padding-block: var(--section); }
.cousin__card { display: grid; gap: clamp(28px, 6vw, 40px); }
.cousin__img {
  inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 84% 50%;
  border-radius: 26px; box-shadow: var(--shadow-card);
}
.cousin__lead {
  font-family: var(--font-head); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(1.625rem, 5vw, 2.25rem); line-height: 1.22; text-wrap: balance;
}
.cousin__turn { font-size: clamp(1.25rem, 3.2vw, 1.5rem); line-height: 1.4; color: var(--muted); margin-block-start: clamp(24px, 4vw, 32px); padding-inline-start: 22px; border-inline-start: 5px solid var(--accent-2); }
.cousin__turn strong { color: var(--text); font-weight: 600; }

/* wide screens: the quote sits on the calm side of the photo */
@media (min-width: 900px) {
  .cousin__card {
    position: relative; isolation: isolate; overflow: hidden; align-items: center;
    min-block-size: 540px; border-radius: 32px; box-shadow: var(--shadow-card); background: var(--text);
  }
  .cousin__img { position: absolute; inset: 0; z-index: -2; block-size: 100%; aspect-ratio: auto; object-position: 100% 50%; border-radius: 0; box-shadow: none; }
  .cousin__card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 28, 42, .95) 0%, rgba(10, 28, 42, .94) 46%, rgba(10, 28, 42, .55) 58%, rgba(10, 28, 42, 0) 72%);
  }
  .cousin__copy { inline-size: 49%; padding: 56px 0 56px clamp(40px, 5vw, 68px); color: #fff; text-shadow: 0 1px 2px rgba(5, 12, 20, .5); }
  .cousin__lead { font-size: clamp(1.625rem, 2.7vw, 2.125rem); }
  .cousin__lead .hl { color: var(--accent-2-glow); }
  .cousin__turn { color: var(--on-navy-muted); border-inline-start-color: var(--accent-2-bright); }
  .cousin__turn strong { color: #fff; }
  [dir="rtl"] .cousin__img { transform: scaleX(-1); }
  [dir="rtl"] .cousin__card::before { transform: scaleX(-1); }
  [dir="rtl"] .cousin__copy { padding: 56px clamp(40px, 5vw, 68px) 56px 0; }
}

/* ---------- How it works ---------- */
.how { padding-block: var(--section); background: var(--surface); }

.tiles { display: grid; gap: 18px; }
.tile { display: flex; flex-direction: column; background: var(--bg); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); }
.tile__art {
  position: relative; min-block-size: 224px; display: grid; place-items: center; padding: 30px 22px; overflow: hidden;
  background:
    radial-gradient(90% 80% at 10% 0%, rgba(var(--accent-rgb), .13), transparent 62%),
    radial-gradient(80% 80% at 100% 100%, rgba(0, 168, 107, .14), transparent 62%),
    var(--surface-2);
}
.tile__text { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 22px 22px 26px; }
.tile__num { inline-size: 34px; block-size: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; }
.tile__text h3 { padding-block-start: 5px; }
.tile__text p { color: var(--muted); margin-block-start: 6px; }

@media (min-width: 680px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
  .tile { grid-column: span 2; }
  .tile--wide, .tile:last-child { grid-column: span 3; }
}

/* zoomed-in pieces of the step card */
.frag { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-card); inline-size: min(100%, 320px); }
.frag--due { display: grid; gap: 4px; padding: 20px 22px 22px; transform: rotate(-1.5deg); }
.frag__label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.frag__title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.frag__pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 9px; margin-block-start: 12px; padding: 11px 18px;
  border-radius: 999px; background: var(--text); color: #fff; font-weight: 600; font-size: 1.125rem;
  box-shadow: 0 10px 22px rgba(10, 28, 42, .25);
}
.frag__pill .icon { animation: tick 5s ease-in-out -1s infinite; transform-origin: center; }

.frag--source { display: flex; gap: 14px; align-items: flex-start; padding: 20px; transform: rotate(1.2deg); }
.frag__icon { inline-size: 46px; block-size: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.frag__icon .icon { inline-size: 22px; block-size: 22px; }
.frag__stack { display: grid; gap: 2px; justify-items: start; }
.frag__stack small { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.frag__stack b { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.frag__badge {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: 10px; padding: 6px 12px 6px 9px;
  border-radius: 999px; background: var(--accent-2-tint); color: var(--accent-2-text); font-weight: 600; font-size: .9375rem;
}

.frag--docs { padding: 6px 20px; transform: rotate(-1deg); }
.frag--docs li { display: flex; align-items: center; gap: 12px; padding-block: 13px; border-block-end: 1px solid var(--line); font-weight: 500; font-size: 1.0625rem; }
.frag--docs li:last-child { border-block-end: 0; color: var(--muted); }
.frag--docs i { inline-size: 26px; block-size: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--field); }
.frag--docs .is-on i { background: var(--accent-2); border-color: var(--accent-2); color: var(--text); }
.frag--docs i .icon { inline-size: 16px; block-size: 16px; }

.frag--done { background: none; box-shadow: none; display: grid; justify-items: center; gap: 16px; }
.frag__btn { position: relative; inline-size: 230px; block-size: 62px; border-radius: 999px; font-weight: 600; font-size: 1.1875rem; box-shadow: var(--shadow-card); animation: press 6s ease-in-out infinite; }
.frag__btn-off, .frag__btn-on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: inherit; }
.frag__btn-off { background: var(--surface); border: 2px solid var(--field); color: var(--text); }
.frag__btn-on { background: var(--accent-2); color: var(--text); animation: turn-green 6s ease-in-out infinite; }
.frag__btn-on .icon { inline-size: 24px; block-size: 24px; animation: tick-in 6s ease-in-out infinite; }
.frag__next { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: .9375rem; box-shadow: var(--shadow-soft); animation: next-in 6s ease-in-out infinite; }
[dir="rtl"] .frag__next .icon { transform: scaleX(-1); }
@keyframes turn-green { 0%, 34% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes press { 0%, 30%, 40%, 100% { transform: scale(1); } 35% { transform: scale(.95); } }
@keyframes tick-in { 0%, 38% { transform: scale(.2) rotate(-30deg); } 46% { transform: scale(1.3); } 52%, 100% { transform: scale(1); } }
@keyframes next-in { 0%, 46% { opacity: 0; transform: translateY(8px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

.frag--mail { display: grid; padding: 16px 18px 18px; font-size: .9375rem; inline-size: min(100%, 380px); transform: rotate(1deg); }
.frag__mailhead { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-block-end: 8px; }
.frag__mailhead .icon { color: var(--accent); }
.frag__mailhead em { margin-inline-start: auto; font-style: normal; font-size: .75rem; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); }
.frag__line { padding-block: 8px; border-block-start: 1px solid var(--line); font-weight: 500; }
.frag__line small { display: inline-block; min-inline-size: 62px; color: var(--muted); font-size: .8125rem; }
.frag__bodytext { padding-block-start: 10px; border-block-start: 1px solid var(--line); color: var(--muted); line-height: 1.5; }
.frag__bodytext::after { content: ""; display: inline-block; inline-size: 2px; block-size: 1.05em; margin-inline-start: 2px; vertical-align: text-bottom; background: var(--accent); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.note {
  display: flex; gap: 16px; align-items: flex-start;
  margin-block-start: clamp(36px, 6vw, 64px); padding: clamp(20px, 3.4vw, 30px);
  background: var(--surface-2); border-radius: var(--radius); font-size: 1.0625rem; font-weight: 500;
}
.note__mark { inline-size: 34px; block-size: 34px; flex: none; color: var(--text); }
.note span { max-inline-size: 46em; }

/* ---------- The path ---------- */
.path {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--section); background: var(--text); color: var(--on-navy);
}
.path::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 34% at 12% 4%, rgba(47, 107, 235, .34), transparent 70%),
    radial-gradient(46% 30% at 92% 58%, rgba(0, 168, 107, .2), transparent 70%),
    radial-gradient(50% 30% at 10% 100%, rgba(47, 107, 235, .2), transparent 70%);
}

.route { --ny: 36px; --gap: 40px; --rail: 96px; position: relative; max-inline-size: 980px; margin-inline: auto; }
.route__stop { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 16px; padding-block-end: var(--gap); }
.route__stop:last-child { padding-block-end: 0; }
.route__rail { position: relative; grid-row: 1; grid-column: 1; }

.route__rail > svg {
  position: absolute; inset-inline-start: 0; inset-block-start: var(--ny);
  inline-size: 100%; block-size: calc(100% + var(--gap)); max-inline-size: none; overflow: visible;
}
[dir="rtl"] .route__rail > svg { transform: scaleX(-1); }
.route__rail > svg path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route__track path { stroke: rgba(255, 255, 255, .14); stroke-width: 7; }
.route__fill path { stroke: var(--accent-2-bright); stroke-width: 7; }
.route__fill { clip-path: inset(-12px -12px calc((1 - var(--p, 1)) * 100%) -12px); filter: drop-shadow(0 0 7px rgba(23, 196, 127, .65)); }
.route__dots path { stroke: rgba(255, 255, 255, .42); stroke-width: 5; stroke-dasharray: .1 13; }

.route__node {
  position: absolute; z-index: 2; inset-block-start: var(--ny); inset-inline-start: 25%; translate: -50% -50%;
  inline-size: 46px; block-size: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--navy-2); border: 2px solid rgba(255, 255, 255, .24); color: var(--on-navy-muted);
}
[dir="rtl"] .route__node { translate: 50% -50%; }
.route__stop:nth-child(even) .route__node { inset-inline-start: 75%; }
.route__node .icon { inline-size: 20px; block-size: 20px; }

.is-done .route__node {
  background: var(--accent-2-bright); border-color: var(--accent-2-bright); color: var(--text);
  box-shadow: 0 0 0 6px rgba(23, 196, 127, .16), 0 0 26px rgba(23, 196, 127, .55);
}
.is-current .route__node {
  inline-size: 72px; block-size: 72px; background: #fff; border: 0; color: var(--text);
  box-shadow: 0 0 0 10px rgba(47, 107, 235, .28), 0 0 0 22px rgba(47, 107, 235, .12), 0 0 60px 8px rgba(47, 107, 235, .75);
}
.is-current .route__node::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #8FB4FF; opacity: 0;
  animation: pulse 3.2s ease-out -1s infinite;
}
@keyframes pulse { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.55); } }
.route__needle { inline-size: 42px; block-size: 42px; animation: sway 6s ease-in-out -3s infinite; transform-origin: 50% 50%; }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

.route__text { grid-row: 1; grid-column: 2; padding-block-start: 8px; }
.route__state { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-muted); }
.is-done .route__state { color: var(--accent-2-glow); }
.is-current .route__state { color: #A9C5FF; }
.route__here { display: inline-block; margin-inline-end: 8px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--text); letter-spacing: .04em; }
.route__text h3 { margin-block-start: 6px; font-size: 1.375rem; color: #fff; }
.is-current .route__text h3 { font-size: clamp(1.75rem, 5vw, 2.25rem); letter-spacing: -0.02em; }
.route__text p:last-child { color: var(--on-navy-muted); margin-block-start: 6px; max-inline-size: 30em; }
.route__stop:not(.is-done):not(.is-current) .route__text h3 { color: #DCE7EE; }

@media (min-width: 900px) {
  .route { --rail: 280px; --gap: 14px; --ny: 40px; }
  .route__stop { grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr); column-gap: 8px; min-block-size: 132px; }
  .route__rail { grid-column: 2; }
  .route__stop:nth-child(odd) .route__text { grid-column: 1; text-align: end; justify-self: end; }
  .route__stop:nth-child(even) .route__text { grid-column: 3; }
  .route__text { padding-block-start: 10px; }
  .route__text h3 { font-size: 1.5rem; }
  .route__here { margin-inline: 0 8px; }
}

/* ---------- Year at a glance ---------- */
.glance { padding-block: var(--section); background: var(--surface-2); }
.glance__head { display: grid; gap: 20px; margin-block-end: clamp(32px, 5vw, 56px); }
.glance__legend {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--warn-tint);
  font-weight: 600; font-size: .9375rem; color: var(--warn-text);
}
.glance__legend .icon { color: var(--warn); inline-size: 20px; block-size: 20px; }
.glance__grid { display: grid; gap: 18px; }
.term { background: var(--surface); border-radius: 26px; padding: 26px 18px 14px; box-shadow: var(--shadow-card); }
.term h3 { padding: 0 6px 14px; font-size: 1.3125rem; }
.term__list { display: grid; gap: 4px; }
.term__list li { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 8px 12px; border-radius: 14px; font-weight: 500; }
.term__list li:not(.is-deadline) { padding-inline-start: 42px; position: relative; color: var(--muted); }
.term__list li:not(.is-deadline)::before {
  content: ""; position: absolute; inset-inline-start: 18px; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 8px; block-size: 8px; border-radius: 50%; border: 2px solid var(--field);
}
.term__list .is-deadline { background: var(--warn-tint); color: var(--warn-text); font-weight: 600; }
.term__list .is-deadline .icon { inline-size: 20px; block-size: 20px; color: var(--warn); }
.glance__foot { margin-block-start: 24px; color: var(--muted); font-size: .9375rem; }
@media (min-width: 860px) {
  .glance__head { grid-template-columns: 1fr auto; align-items: end; }
  .glance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
}

/* ---------- Who it's for ---------- */
.who { padding-block: var(--section); background: var(--surface); }
.who__grid { display: grid; gap: 18px; }
.who__card { background: var(--bg); border-radius: 26px; padding: 14px 14px 28px; box-shadow: var(--shadow-soft); }
.who__photo { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; margin-block-end: 20px; }
.who__card h3, .who__card p { padding-inline: 10px; }
.who__card h3 { font-size: 1.375rem; }
.who__card p { color: var(--muted); margin-block-start: 8px; max-inline-size: 30em; }
.who__where {
  display: inline-flex; align-items: center; gap: 12px; margin-block-start: 32px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em;
}
.who__mark { inline-size: 32px; block-size: 32px; }
@media (min-width: 860px) {
  .who__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .who__where { margin-block-start: 48px; }
}

/* ---------- Early access ---------- */
.access { padding-block: var(--section); background: var(--text); color: var(--on-navy); position: relative; isolation: isolate; overflow: hidden; }
.access::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 60% at 0% 0%, rgba(47, 107, 235, .36), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(0, 168, 107, .24), transparent 70%);
}
.access__grid { display: grid; gap: clamp(32px, 6vw, 72px); align-items: start; }
.access__points { margin-block-start: 28px; display: grid; gap: 12px; font-weight: 600; }
.access__points li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 960px) {
  .access__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .access__copy { padding-block-start: 24px; }
}

.formcard { background: var(--surface); color: var(--text); border-radius: 28px; padding: clamp(22px, 4vw, 38px); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 70px rgba(0, 0, 0, .35), 0 0 90px rgba(47, 107, 235, .25); }
.field { margin-block-end: 20px; }
.field label, .field legend { display: block; font-weight: 600; margin-block-end: 8px; }
.field input[type="email"], .field input[type="text"], .field select {
  inline-size: 100%; min-block-size: 52px; padding: 12px 14px;
  background: var(--surface); border: 2px solid var(--field); border-radius: var(--radius-sm);
  font-size: 1.0625rem;
}
.field select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A1C2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 22px; background-position: right 12px center; }
[dir="rtl"] .field select { background-position: left 12px center; }
.field input:hover, .field select:hover { border-color: var(--text); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); border-radius: var(--radius-sm); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__err { color: var(--error); font-weight: 600; font-size: .9375rem; margin-block-start: 8px; }

.field--choices { display: grid; gap: 8px; }
.field--choices legend { margin-block-end: 10px; }
.choice {
  display: flex !important; align-items: center; gap: 12px; min-block-size: 52px; padding: 10px 14px; margin: 0 !important;
  border: 2px solid var(--line); border-radius: var(--radius-sm); font-weight: 500 !important; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--field); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice input { inline-size: 22px; block-size: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.choice input:focus-visible { outline: none; }
.form__fine { margin-block-start: 14px; font-size: .875rem; color: var(--muted); text-align: center; }

.success { text-align: start; }
.success:focus { outline: none; }
.success__icon { inline-size: 52px; block-size: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-2); color: var(--text); margin-block-end: 18px; }
.success__icon .icon { inline-size: 26px; block-size: 26px; }
.success h3 { font-size: 1.5rem; }
.success p { margin-block-start: 10px; color: var(--muted); }
.success__details { margin-block: 14px 20px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-sm); font-family: var(--font); font-size: .9375rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- For universities ---------- */
.uni { padding-block: var(--section); }
.uni__grid { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; }
.uni__points { margin-block: 30px 34px; display: grid; gap: 16px; }
.uni__points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; color: var(--muted); }
.uni__points strong { color: var(--text); font-weight: 600; }
.uni__fine { margin-block-start: 14px; font-size: .9375rem; color: var(--muted); }
@media (min-width: 960px) {
  .uni__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.panel { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(22px, 3.6vw, 36px); }
.panel__title { font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; margin-block-end: 22px; }
.panel__bars { display: grid; gap: 16px; }
.panel__bars li { display: grid; gap: 7px; font-size: .9375rem; font-weight: 500; color: var(--muted); }
.panel__bars .is-top span { color: var(--text); font-weight: 600; }
.panel__bars i { display: block; block-size: 12px; border-radius: 999px; background: var(--surface-2); position: relative; overflow: hidden; }
.panel__bars i::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w);
  border-radius: 999px; background: var(--accent); transform-origin: 0 50%;
}
[dir="rtl"] .panel__bars i::after { transform-origin: 100% 50%; }
.panel__foot { margin-block-start: 20px; font-size: .8125rem; color: var(--muted); }

/* ---------- Questions (native details/summary: works with keyboard, screen readers and no script) ---------- */
.faq { padding-block: 0 var(--section); }
.faq__list { border-block-start: 1px solid var(--line); }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px; padding-block: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.0625rem, 2.4vw, 1.25rem); letter-spacing: -0.01em; line-height: 1.25;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; inline-size: 10px; block-size: 10px; margin-inline-end: 6px; border-inline-end: 2.5px solid var(--accent); border-block-end: 2.5px solid var(--accent); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease-out; }
.faq__item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__item p { padding-block-end: 20px; color: var(--muted); max-inline-size: 44em; }

/* the university pitch has its own page (universities.html) */
.uni--page { padding-block: clamp(28px, 5vw, 64px) var(--section); }
.uni--page h1 { font-size: clamp(2rem, 6.4vw, 3.5rem); line-height: 1.06; }
.uni--page .uni__points { margin-block-end: 30px; }
.field textarea {
  display: block; inline-size: 100%; min-block-size: 112px; padding: 12px 14px; resize: vertical;
  background: var(--surface); color: var(--text); border: 2px solid var(--field); border-radius: var(--radius-sm); font: inherit; font-size: 1.0625rem;
}
.field textarea:hover { border-color: var(--text); }
.field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); border-radius: var(--radius-sm); }
.field__opt { font-weight: 400; color: var(--muted); }
.formcard__alt { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .9375rem; }
.partners--page { padding-block-start: var(--section); }
/* the student page keeps one line for universities, just above the footer */
.unilink { padding-block: 26px; background: var(--surface); border-block-start: 1px solid var(--line); text-align: center; font-weight: 500; }
.unilink a { font-weight: 600; }

/* ---------- Partners ---------- */
.partners { padding-block: 0 var(--section); }
.partners__row { display: grid; gap: 10px; padding-block: 30px; border-block: 1px solid var(--line); }
.partners__title { font-size: 1.5rem; line-height: 1.2; }
.partners p { color: var(--muted); }
.partners a { font-weight: 600; }
@media (min-width: 860px) {
  .partners__row { grid-template-columns: auto 1fr; gap: 40px; align-items: baseline; }
}

/* ---------- Footer ---------- */
.footer { background: var(--text); color: var(--on-navy-muted); padding-block: 56px 28px; font-size: .9375rem; }
.footer a { color: #fff; }
.footer__grid { display: grid; gap: 28px; }
.footer__line { margin-block-start: 10px; }
.footer__contact { display: grid; gap: 6px; }
.footer__contact a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.footer__base { margin-block-start: 36px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 8px; }
.footer__legal { color: #fff; font-weight: 500; }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1fr auto; }
  .footer__base { grid-template-columns: 1fr auto; }
}

/* ---------- Scroll motion ----------
   No script and no hidden starting state. Everything below is tied to the
   scroll position by the browser itself, so a section can never be left
   blank: with no support, no script, or reduced motion, the page simply
   shows its finished state. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* entrances */
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    @keyframes rise { from { opacity: 0; transform: translateY(30px); } }

    /* the path fills in, and each chapter lights up, as it crosses the reading line */
    .route__fill { animation: route-fill linear both; animation-timeline: view(block 0% 38%); animation-range: entry 0% entry 100%; }
    @keyframes route-fill { from { clip-path: inset(-12px -12px 100% -12px); } }

    .is-done .route__node { animation: node-lit linear both; animation-timeline: view(block 0% 38%); animation-range: entry 0% entry 100%; }
    @keyframes node-lit {
      from { background-color: var(--navy-2); border-color: rgba(255, 255, 255, .24); color: rgba(10, 28, 42, 0); box-shadow: 0 0 0 0 rgba(23, 196, 127, 0), 0 0 0 rgba(23, 196, 127, 0); scale: .84; }
    }
    .is-current .route__node { animation: here-lit linear both; animation-timeline: view(block 0% 38%); animation-range: entry 0% entry 100%; }
    @keyframes here-lit {
      from { box-shadow: 0 0 0 0 rgba(47, 107, 235, 0), 0 0 0 0 rgba(47, 107, 235, 0), 0 0 0 0 rgba(47, 107, 235, 0); scale: .74; }
    }

    /* university chart bars grow as the panel arrives */
    .panel { view-timeline: --panel block; }
    .panel__bars i::after { animation: bar-grow linear both; animation-timeline: --panel; animation-range: entry 30% cover 42%; }
    @keyframes bar-grow { from { transform: scaleX(0); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Added 2026-11-11: what's inside, privacy, upcoming labels ---------- */
.route__after { margin-block-start: clamp(36px, 6vw, 56px); text-align: center; margin-inline: auto; max-inline-size: 46rem; }
.inside, .privacy { padding-block: var(--section); }
.inside__grid { display: grid; gap: 18px; margin-block-start: 34px; }
.inside__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-soft); }
.inside__col--soon { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.inside__col h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 14px; }
.inside__list { display: grid; gap: 12px; color: var(--muted); }
.inside__list strong { color: var(--text); font-weight: 600; }
.soon { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-family: var(--font); font-size: .8125rem; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.inside__col--soon .soon { background: var(--surface); }
.who__also { margin-block-start: 26px; color: var(--muted); max-inline-size: 46rem; }
.privacy__points { margin-block: 26px 0; }
@media (min-width: 900px) { .inside__grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.who__mark { flex: none; }

/* ---------- Added 2026-11-11: benefits and what's inside, shown as app pieces ---------- */
.benefits { padding-block: var(--section); background: var(--surface); }
.benefits__note { margin-block-start: 22px; }
.features { display: grid; gap: 18px; margin-block-start: 34px; }
.features .tile { grid-column: auto; }
.tile__text--plain { display: block; }
.tile__text--plain h3 { padding-block-start: 0; }
@media (min-width: 680px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.features--two .tile__art { min-block-size: 360px; }

.ui { display: grid; gap: 2px; inline-size: min(100%, 300px); padding: 16px 18px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-card); font-size: .9375rem; line-height: 1.35; }
.ui--screen { inline-size: min(100%, 380px); padding: 20px 22px; }
.ui__label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-block-end: 6px; }
.ui__title { font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; }
.ui__meta { color: var(--muted); font-size: .8125rem; padding-block: 4px; }
.ui__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 9px; border-block-start: 1px solid var(--line); }
.ui__row small { color: var(--muted); font-size: .8125rem; }
.ui__row b { font-weight: 600; }
.ui__row .icon { color: var(--accent); }
.ui__row--stack { display: grid; justify-content: start; gap: 0; padding-block: 6px; }
.ui__big { font-family: var(--font-head); font-size: 1.25rem; color: var(--accent-2-text); }
.ui__tag { flex: none; font-style: normal; font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--accent-2-tint); color: var(--accent-2-text); }
.ui__tag--free { background: var(--accent-tint); color: var(--accent); }
.ui__tag--warn { background: var(--warn-tint); color: var(--warn-text); }
.ui__bar { display: block; block-size: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-block: 4px 10px; }
.ui__bar i { display: block; block-size: 100%; inline-size: var(--w); border-radius: inherit; background: var(--accent-2); }
.ui__row--bar { display: grid; grid-template-columns: 4.5em 1fr; }
.ui__row--bar .ui__bar { margin: 0; }
.ui__tabs { display: flex; gap: 6px; padding-block: 2px 10px; font-size: .8125rem; font-weight: 600; }
.ui__tabs > * { padding: 5px 11px; border-radius: 999px; color: var(--muted); background: var(--surface-2); }
.ui__tabs b { background: var(--text); color: #fff; }
.ui--chat { gap: 8px; }
.ui__bubble { justify-self: start; max-inline-size: 85%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); }
.ui__bubble--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; }
.ui__source { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: .75rem; font-weight: 600; color: var(--accent-2-text); }
.ui__source .icon { inline-size: 14px; block-size: 14px; }
.ui__quote { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; margin-block-end: 6px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: .8125rem; font-style: italic; }
.ui__quote .icon { flex: none; color: var(--accent); margin-block-start: 2px; }
.ui__search { padding: 10px 14px; margin-block-end: 6px; border: 2px solid var(--field); border-radius: 999px; color: var(--text); }
.ui__dots { display: flex; gap: 6px; padding-block: 10px 4px; }
.ui__dots i { inline-size: 28px; block-size: 6px; border-radius: 999px; background: var(--line); }
.ui__dots i.is-on { background: var(--accent-2); }
.ui__faces { display: flex; padding-block: 2px 10px; }
.ui__faces i { inline-size: 36px; block-size: 36px; display: grid; place-items: center; margin-inline-end: -8px; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent-tint); color: var(--accent); font-style: normal; font-size: .75rem; font-weight: 600; }
.ui__faces i:nth-child(2n) { background: var(--accent-2-tint); color: var(--accent-2-text); }
.ui--langs { display: flex; flex-wrap: wrap; gap: 8px; }
.ui--langs span { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .875rem; }
.ui--langs span:first-child { background: var(--text); color: #fff; }
.ui__map { position: relative; display: block; block-size: 110px; margin-block: 8px 6px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(90deg, transparent 47%, #fff 47% 51%, transparent 51%), linear-gradient(0deg, transparent 54%, #fff 54% 58%, transparent 58%), linear-gradient(35deg, transparent 30%, rgba(255,255,255,.8) 30% 33%, transparent 33%), var(--accent-2-tint); }
.ui__map i, .ui__map b { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 14px; block-size: 14px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -100%) rotate(-45deg); background: var(--accent); }
.ui__map b { inline-size: 16px; block-size: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent-2); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0,168,107,.2); }

/* ---------- Added 2026-11-11: the path as a scroll-driven year ---------- */
.tailor { max-inline-size: 46rem; margin: 40px auto 0; text-align: center; }
.tailor__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 3vw, 1.5rem); color: #fff; }
.tailor__sub { color: var(--on-navy-muted); margin-block-start: 6px; }
.tailor__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 16px; }
.tailor__chip { min-block-size: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--on-navy); font: 600 .9375rem/1.2 var(--font); cursor: pointer; transition: background .2s ease-out, color .2s ease-out; }
.tailor__chip[aria-pressed="true"] { background: #fff; color: var(--text); border-color: #fff; }
.tailor__chip:focus-visible { outline: 3px solid var(--accent-2-glow); outline-offset: 2px; }


@media (min-width: 1040px) {
}

.branch { margin-block-start: clamp(56px, 9vw, 96px); text-align: center; }
.branch__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.75rem, 4.5vw, 2.5rem); color: #fff; letter-spacing: -0.02em; }
.branch__lines { display: none; }
.branch__cards { display: grid; gap: 16px; margin-block-start: 28px; text-align: start; }
.branch__cards li { position: relative; padding: 22px 22px 24px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.branch__cards h3 { color: #fff; }
.branch__cards p { color: var(--on-navy-muted); margin-block-start: 6px; }
.branch__cards .soon { margin-block-end: 10px; background: rgba(255,255,255,.12); color: #fff; }
@media (min-width: 900px) {
  .branch__lines { display: block; inline-size: 100%; block-size: 90px; margin-block-start: 18px; }
  .branch__lines path { fill: none; stroke: var(--accent-2-bright); stroke-width: 3; vector-effect: non-scaling-stroke; }
  .branch__cards { grid-template-columns: repeat(3, 1fr); margin-block-start: 0; }
}
.path.journey { overflow: clip; }
.ui { color: var(--text); }

/* ---------- The path, 2026-11-13: every step sits on the winding line ----------
   Like the first version of the site: one squiggly line runs down the middle, and every step is a stop on it, with its
   words on one side and a piece of the app on the other, swapping sides each time. Nothing to open: each step comes in
   as you scroll to it. A stage starts with its number on the line and its title beside it.
   On phones the line runs down the left. Without JS every step is simply there, with no line. */
.trail-sec { overflow: clip; }
.trail { --node: 36px; --dot: 16px; --rail: 48px; --lane: 13px; --gap: 40px; position: relative; max-inline-size: 1100px; margin: 44px auto 0; }
.trail[data-persona="intl"] [data-p]:not([data-p~="intl"]),
.trail[data-persona="city"] [data-p]:not([data-p~="city"]),
.trail[data-persona="home"] [data-p]:not([data-p~="home"]) { display: none; }
.trail__list { display: grid; gap: clamp(56px, 9vw, 104px); }

/* the line (drawn by main.js) and the dot on its tip */
.trail__squiggle { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.trail__squiggle path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail__squiggle-track { stroke: rgba(255,255,255,.14); stroke-width: 6; }
.trail__squiggle-fill { stroke: var(--accent-2-bright); stroke-width: 6; filter: drop-shadow(0 0 7px rgba(23,196,127,.6)); }
.trail__dot { position: absolute; z-index: 3; top: 0; left: 0; inline-size: 12px; block-size: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #D6FFEC; box-shadow: 0 0 0 3px rgba(61,220,151,.35), 0 0 14px 4px rgba(23,196,127,.8); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; will-change: transform; }
.trail:not(.is-live) .trail__dot { display: none; }
.trail__dot.is-on { opacity: 1; }

/* the stops on the line: a numbered one for each stage, a small one for each step */
.stage__node, .step__node { position: relative; z-index: 2; grid-column: 1; grid-row: 1; justify-self: center; border-radius: 50%; background: var(--navy-2); transition: background .25s, border-color .25s, box-shadow .25s, color .25s; }
.stage__node { inline-size: var(--node); block-size: var(--node); display: grid; place-items: center; border: 2px solid rgba(255,255,255,.3); color: var(--on-navy); font: 600 1rem/1 var(--font-head); }
.step__node { inline-size: var(--dot); block-size: var(--dot); margin-block-start: 5px; border: 3px solid rgba(255,255,255,.3); transform: translateX(calc(var(--lane) * -1)); }
.step--b .step__node { transform: translateX(var(--lane)); }
.trail:not(.is-live) .stage__node, .stage__node.is-passed, .step__node.is-passed { background: var(--accent-2-bright); border-color: var(--accent-2-bright); color: var(--text); box-shadow: 0 0 0 5px rgba(23,196,127,.16), 0 0 18px rgba(23,196,127,.5); }
.trail:not(.is-live) .step__node { visibility: hidden; }
.step--stuck .step__node { border-color: #FF6B5E; }
.step--stuck .step__node.is-passed { background: #D93025; border-color: #D93025; box-shadow: 0 0 0 5px rgba(217,48,37,.2), 0 0 18px rgba(217,48,37,.5); }

/* a stage: number on the line, title beside it */
.stage__head { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 12px; align-items: center; }
.stage__head > div { grid-column: 2; grid-row: 1; }
.stage__when { color: var(--accent-2-glow); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 600; }
.stage__head h3 { margin-block-start: 4px; font-size: clamp(1.625rem, 4.6vw, 2.5rem); letter-spacing: -0.02em; color: #fff; }
.stage__head h3 + p { margin-block-start: 6px; color: var(--on-navy-muted); }

/* a step: words on one side of the line, a piece of the app on the other */
.stage__steps { display: grid; gap: var(--gap); margin-block-start: var(--gap); }
.step { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 12px; row-gap: 16px; }
.step__text { grid-column: 2; grid-row: 1; }
.step__mock { grid-column: 2; grid-row: 2; display: flex; }
.step__when { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--on-navy-muted); }
.step h4 { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 2.8vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step__text > p:last-child { margin-block-start: 6px; color: var(--on-navy-muted); max-inline-size: 28rem; }
.step__mock > * { box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.step__mock .frag { color: var(--text); transform: none; }
.step__mock .frag--done { box-shadow: none; }
.step__sign { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 6px; background: #D93025; color: #fff; font-family: var(--font); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.step__sign::before { content: "!"; display: grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; color: #D93025; font-size: .75rem; }

/* each step comes in as you reach it (main.js adds is-open once, when the step scrolls into view) */
.trail.is-live .step__text, .trail.is-live .step__mock { transition: opacity .45s ease-out, transform .6s cubic-bezier(.2, .8, .25, 1); }
.trail.is-live .step:not(.is-open) .step__text { opacity: 0; transform: translateY(16px); }
.trail.is-live .step:not(.is-open) .step__mock { opacity: 0; transform: translateY(22px) scale(.92); }
.trail.is-live .step__mock { transform-origin: 0 0; transition-delay: .08s; }
/* choosing another kind of student: the steps that differ fade out, swap, and fade back in */
.trail.is-swapping .step--swaps .step__text, .trail.is-swapping .step--swaps .step__mock { opacity: 0; transition-duration: .17s; transition-delay: 0s; }

/* what comes after first year */
.stage .branch__cards { margin-block-start: 28px; text-align: start; }
.branch__cards h4 { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }

/* pieces of the app used in the mock-ups */
.ui__flag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-block-start: 8px; padding: 4px 10px; border-radius: 999px; background: var(--warn-tint); color: var(--warn-text); font-size: .8125rem; font-weight: 600; }
.ui__flag .icon, .ui__row--flag .icon { inline-size: 16px; block-size: 16px; }
.ui__row--flag { justify-content: flex-start; gap: 8px; margin-inline: -8px; padding-inline: 8px; border-radius: 8px; background: var(--warn-tint); color: var(--warn-text); font-weight: 600; border-block-start-color: transparent; margin-block: 2px; }
.ui__draft { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; border: 1px dashed var(--field); font-size: .8125rem; color: var(--muted); }
.ui__draft .icon { flex: none; color: var(--accent); }
/* the path's cards are the demo app's own cards: a step and its parts, a chapter, dates, a guide, people, the stuck sheet */
.step__mock .ui { text-align: start; }
.ui__label--gap { padding-block-start: 12px; }
.ui__row--stack small { color: var(--muted); font-size: .8125rem; }
.ui__kick { font-size: .6875rem !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ui__parthead { display: flex; align-items: center; gap: 12px; }
.ui__parthead .ui__label { display: block; padding-block-end: 2px; }
.ui__parthead .ui__title { display: block; }
.ui__num { flex: none; inline-size: 34px; block-size: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font: 600 .9375rem/1 var(--font-head); font-style: normal; }
.ui__why { padding-block: 10px 6px; color: var(--muted); }
.ui__subs { display: grid; gap: 7px; padding-block: 4px 6px; }
.ui__subs > span { display: flex; align-items: center; gap: 10px; }
.ui__subs i { flex: none; inline-size: 22px; block-size: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: .75rem; font-weight: 600; }
.ui__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block-start: 10px; }
.ui__chip { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .8125rem; font-weight: 600; }
.ui__btn { padding: 8px 18px; border-radius: 999px; background: var(--text); color: #fff; font-size: .875rem; font-weight: 600; }
.ui__office { display: grid; gap: 2px; margin-block-start: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ui__office small { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ui__office b { font-weight: 600; }
.ui__office span { color: var(--muted); font-size: .8125rem; }
.ui__office em, .ui__link { justify-self: start; margin-block-start: 6px; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--accent); }
.ui__link { margin-block-start: 0; padding: 5px 11px; border-radius: 999px; background: var(--accent-tint); }
.ui__ev { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 12px; padding-block: 10px; border-block-start: 1px solid var(--line); }
.ui__ev i { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--muted); padding-block-start: 1px; }
.ui__ev b { display: block; font-weight: 600; }
.ui__ev small { display: block; color: var(--muted); font-size: .8125rem; margin-block-start: 2px; }
.ui__ev--dl i, .ui__ev--dl b { color: var(--warn-text); }
.ui__ev--dl b::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 7px; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
.ui__up { display: grid; gap: 0; margin-block-start: 8px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--field); }
.ui__up small { color: var(--muted); font-size: .75rem; }
.ui__up b { font-weight: 600; }
.ui__person { display: flex; align-items: center; gap: 12px; padding-block-end: 4px; }
.ui__person > i { flex: none; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-style: normal; font-weight: 600; }
.ui__person > span { display: grid; flex: 1; min-inline-size: 0; }
.ui__person b { font-weight: 600; }
.ui__person small { color: var(--muted); font-size: .8125rem; }
.ui__person em { flex: none; font-style: normal; font-size: .8125rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--text); color: #fff; }
.ui__fine { padding-block-start: 10px; color: var(--muted); font-size: .75rem; }
.ui__count { display: flex; align-items: baseline; gap: 6px; padding-block: 9px; border-block-start: 1px solid var(--line); }
.ui__count > b { font: 700 1.375rem/1 var(--font-head); min-inline-size: 1.3em; }
.ui__count > span { color: var(--muted); font-size: .8125rem; }
.ui__count .ui__count-t { display: grid; margin-inline-start: 8px; color: var(--text); font-size: .9375rem; }
.ui__count-t b { font-weight: 600; }
.ui__count-t small { color: var(--muted); font-size: .8125rem; }
.ui__urgent { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--warn-tint); }
.ui__urgent small { color: var(--warn-text); font-size: .8125rem; font-weight: 600; }
.ui__urgent b { font: 700 1.1875rem/1.2 var(--font-head); letter-spacing: -0.02em; }
.ui__urgent span { font-size: .875rem; }
.ui__urgent em { margin-block-start: 8px; padding: 9px 16px; border-radius: 999px; background: var(--text); color: #fff; font-style: normal; font-size: .875rem; font-weight: 600; text-align: center; }
.ui__opt { display: flex; align-items: center; gap: 10px; margin-block-start: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); }
.ui__opt::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--field); }
.ui__opt.is-on { border-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.ui__opt.is-on::before { border: 5px solid var(--accent); }
.ui__amt { flex: none; inline-size: 5.5em; padding: 5px 10px; border-radius: 9px; border: 1.5px solid var(--line); color: var(--muted); font-style: normal; font-size: .8125rem; }
.ui__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.note--dark { margin-block-start: 48px; background: rgba(255,255,255,.06); color: var(--on-navy); }

@media (min-width: 560px) {
  .trail { --rail: 60px; --lane: 16px; }
  .stage__head { column-gap: 16px; }
}
/* wide screens: the line runs down the middle */
@media (min-width: 900px) {
  .trail { --node: 52px; --dot: 20px; --rail: 132px; --lane: 34px; --gap: clamp(44px, 5vw, 72px); }
  .stage__head, .step { grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .stage__node, .step__node { grid-column: 2; }
  .stage__node { font-size: 1.25rem; }
  .step__node { margin-block-start: 0; }
  /* the stage label sits on the left of the line, its title on the right */
  .stage__head { row-gap: 6px; }
  .stage__head > div { display: contents; }
  .stage__node { grid-row: 1 / span 2; }
  .stage__when { grid-column: 1; grid-row: 1 / span 2; justify-self: end; font-size: .9375rem; }
  .stage__head h3 { grid-column: 3; grid-row: 1; align-self: end; margin: 0; }
  .stage__head h3 + p { grid-column: 3; grid-row: 2; align-self: start; margin: 0; }
  .step { min-block-size: 120px; }
  .step__text, .step__mock { grid-row: 1; }
  /* words on the left, app on the right */
  .step--a .step__text { grid-column: 1; justify-self: end; text-align: end; }
  .step--a .step__text h4 { justify-content: flex-end; }
  .step--a .step__text > p:last-child { margin-inline-start: auto; }
  .step--a .step__mock { grid-column: 3; justify-content: flex-start; }
  /* and the other way round */
  .step--b .step__text { grid-column: 3; }
  .step--b .step__mock { grid-column: 1; justify-content: flex-end; }
  .trail.is-live .step--a .step__mock { transform-origin: 0 50%; }
  .trail.is-live .step--b .step__mock { transform-origin: 100% 50%; }
  .trail.is-live .step--a:not(.is-open) .step__text { transform: translateX(-18px); }
  .trail.is-live .step--b:not(.is-open) .step__text { transform: translateX(18px); }
  .trail.is-live .step--a:not(.is-open) .step__mock { transform: translateX(18px) scale(.92); }
  .trail.is-live .step--b:not(.is-open) .step__mock { transform: translateX(-18px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .trail.is-live .step .step__text, .trail.is-live .step .step__mock { transform: none !important; transition: opacity .2s linear; transition-delay: 0s; }
}

/* ---------- 2026-11-13: sections flow into each other ----------
   No full-width colour bars. The page is one light surface; the dark sections and the footer are rounded
   panels resting on it, and the white strips are cards. */
.trust, .who, .unilink { background: none; border: 0; }
.trust { padding-inline: var(--gutter); }
.trust__list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding-inline: clamp(18px, 3vw, 32px); }
.who__card { background: var(--surface); }
.path, .access, .footer { margin-inline: clamp(8px, 1.6vw, 24px); border-radius: clamp(26px, 4vw, 48px); }
.path, .access { box-shadow: 0 40px 80px -48px rgba(10, 28, 42, .55); }
.footer { margin-block-end: clamp(8px, 1.6vw, 24px); }
.faq { padding-block-end: clamp(56px, 8vw, 96px); }
.partners--page { padding-block: clamp(40px, 6vw, 72px); }

/* The student page ends as one dark block: the early-access section, the line for universities and the footer are joined. */
.access--end { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: none; }
.unilink { margin-inline: clamp(8px, 1.6vw, 24px); padding-block: 26px; background: var(--text); color: var(--on-navy); border-block-start: 1px solid rgba(255, 255, 255, .12); }
.unilink a, .unilink a:hover { color: #fff; }
.unilink :focus-visible { outline-color: #fff; }
.footer--joined { border-start-start-radius: 0; border-start-end-radius: 0; border-block-start: 1px solid rgba(255, 255, 255, .12); }
/* the hero tint fades out at the bottom, so it has no edge where the next section starts */
.hero::before, .hero::after { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }

/* ---------- 2026-11-13: the hero phone is a small sample of the app ----------
   A bigger phone with a fixed, phone-shaped screen. It opens like the app demo (the compass, "Try it out",
   the letters sliding out), then offers four screens from a bar at the bottom. Without JS it simply shows the
   first screen. */
.demo { max-inline-size: 440px; }
.phone { inline-size: min(100%, 340px); padding: 11px; border-radius: 56px; }
.phone__screen { block-size: 690px; min-block-size: 0; padding: 0; border-radius: 45px; }
.phone__status { position: relative; z-index: 7; padding: 14px 26px 6px; transition: color .3s; }
@media (min-width: 960px) {
  .phone { inline-size: 372px; }
  .phone__screen { block-size: 752px; }
  /* the hint becomes a small sticker on the phone's shoulder, so the phone can use the full height */
  .demo { position: relative; }
  .demo__cap { position: absolute; z-index: 3; inset-inline-start: -18px; inset-block-start: 104px; margin: 0; transform: rotate(-6deg); box-shadow: 0 10px 24px rgba(10, 28, 42, .25); }
  .demo__cap .icon { transform: none; }
  /* shorter screens: scale the whole phone so all of it still fits under the header */
  .demo__stage { zoom: 1; }
}
@media (min-width: 960px) and (max-height: 910px) { .demo__stage { zoom: .92; } }
@media (min-width: 960px) and (max-height: 840px) { .demo__stage { zoom: .84; } }
@media (min-width: 960px) and (max-height: 760px) { .demo__stage { zoom: .74; } }
@media (min-width: 960px) and (max-height: 680px) { .demo__stage { zoom: .66; } }

.app__views { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 16px; scrollbar-width: none; }
.app__views::-webkit-scrollbar { display: none; }
.app__view:focus { outline: none; }
.app__eyebrow { margin: 16px 6px 0; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.app__h { margin: 4px 6px 14px; font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem; line-height: 1.16; letter-spacing: -0.02em; }
.app__note { margin: 14px 6px 0; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.app__sheet { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-card); font-size: .9375rem; line-height: 1.35; }

/* the bar at the bottom */
.app__tabs { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px 8px 24px; background: var(--surface); border-block-start: 1px solid var(--line); }
.is-ready .app__tabs { display: grid; }
.app__tab { display: grid; justify-items: center; gap: 3px; min-block-size: 50px; padding: 7px 2px 5px; border: 0; border-radius: 14px; background: none; color: var(--muted); font: 600 .6875rem/1.1 var(--font); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.app__tab .icon { inline-size: 22px; block-size: 22px; }
.app__tab:hover { color: var(--text); }
.app__tab[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }
.app__tab:focus-visible { outline-offset: -2px; }

/* the path screen */
.pstages { display: grid; gap: 8px; }
.pstage { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-soft); overflow: hidden; }
.pstage__btn { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 60px; padding: 10px 14px; border: 0; background: none; text-align: start; color: var(--text); cursor: pointer; }
.pstage__btn::after { content: ""; flex: none; margin-inline-start: auto; inline-size: 8px; block-size: 8px; border-inline-end: 2px solid var(--field); border-block-end: 2px solid var(--field); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.pstage__btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.pstage__btn:focus-visible { outline-offset: -3px; border-radius: 18px; }
.pstage__n { flex: none; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font: 600 .9375rem/1 var(--font-head); }
.is-here .pstage__n { background: var(--accent-2); }
.pstage__t { display: grid; gap: 1px; line-height: 1.3; }
.pstage__t b { font-weight: 600; font-size: .9375rem; }
.pstage__t small { font-size: .8125rem; color: var(--muted); }
.is-here .pstage__t small { color: var(--accent-2-text); font-weight: 600; }
.pstage__steps { margin: 0 14px 12px 58px; padding-block-start: 2px; border-block-start: 1px solid var(--line); font-size: .875rem; }
.pstage__steps li { position: relative; padding: 8px 0 0 14px; line-height: 1.35; }
.pstage__steps li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.05em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--field); }

/* the ask screen */
.ask { display: grid; gap: 8px; font-size: .9375rem; line-height: 1.35; }
.ask__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 56px; padding: 12px 16px; border: 2px solid var(--accent); border-radius: 18px; background: var(--surface); color: var(--text); font: 600 .9375rem/1.3 var(--font); text-align: start; cursor: pointer; }
.ask__q .icon { color: var(--accent); }
.ask__q:hover { background: var(--accent-tint); }
.ask__thread, .ask__answer { display: grid; gap: 8px; }
.ask__again { justify-self: start; min-block-size: 44px; margin-block-start: 6px; padding: 8px 16px; font-size: .875rem; }

/* the opening */
.app__intro { display: none; position: absolute; inset: 0; z-index: 6; flex-direction: column; align-items: center; justify-content: center; gap: 30px; color: #fff;
  background: radial-gradient(70% 45% at 50% 44%, #0d2148 0%, #050a16 55%, #020308 100%); transition: opacity .5s ease-in; }
.is-intro .app__intro { display: flex; }
.app__intro::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 25% at 30% 30%, rgba(47, 107, 235, .22), transparent 70%), radial-gradient(35% 22% at 72% 66%, rgba(23, 196, 127, .16), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
.intro__logo { position: relative; inline-size: 76%; block-size: auto; overflow: visible; }
.intro__mark { transform: translateX(122.5px); filter: drop-shadow(0 0 10px rgba(47, 107, 235, .55)) drop-shadow(0 0 16px rgba(23, 196, 127, .35)); }
.intro__l { opacity: 0; transform: translateX(-70px); }
.intro__btn { position: relative; min-block-size: 48px; padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font: 600 1rem/1.2 var(--font); cursor: pointer; transition: opacity .3s ease, transform .3s ease, background-color .18s ease; }
.intro__btn:hover { background: rgba(255, 255, 255, .18); }
.intro__btn:focus-visible { outline-color: #fff; }
.app__intro.go .intro__btn { opacity: 0; transform: translateY(8px); pointer-events: none; }
.app__intro.go .intro__mark { animation: intro-mark .9s cubic-bezier(.65, 0, .25, 1) .2s forwards; }
.app__intro.go .intro__l { animation: intro-letter .8s cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(.32s + var(--i) * .07s); }
.app__intro.out { opacity: 0; pointer-events: none; }
@keyframes intro-mark { from { transform: translateX(122.5px); } to { transform: translateX(0); } }
@keyframes intro-letter { 0% { opacity: 0; transform: translateX(-70px); } 35% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
/* while the opening shows, the clock and battery sit on a dark screen */
.is-intro .phone__status { color: #fff; }
.is-intro .phone__sys i { background: #fff; }
.is-intro .phone__sys b { border-color: #fff; background: linear-gradient(90deg, #fff 70%, transparent 70%) content-box; }
@media (prefers-reduced-motion: reduce) {
  .intro__mark { transform: none; }
  .intro__l { opacity: 1; transform: none; }
}
/* once the sample is open, the hint sticker steps aside */
.demo__cap { transition: opacity .3s ease; }
@media (min-width: 960px) { .demo.is-open .demo__cap { opacity: 0; pointer-events: none; } }

/* ---------- 2026-11-13: tighter rhythm ----------
   Less empty space between sections (the section padding token is smaller too), a shorter path, and the questions
   and closing sections line up with the rest of the page. */
.cousin { padding-block-start: clamp(28px, 4vw, 48px); }
.privacy { padding-block-start: 0; }
.section-head { margin-block-end: clamp(28px, 4vw, 48px); }
.tailor { margin-block-start: 0; }
.trail { --gap: 32px; margin-block-start: 36px; }
.trail__list { gap: clamp(44px, 6vw, 72px); }
.step__mock .ui--screen { padding: 18px 20px; }
.note--dark { margin-block-start: 36px; }
@media (min-width: 900px) {
  .trail { --gap: 28px; }
  /* questions: heading on the left, answers on the right, on the same edges as every other section */
  .faq > .wrap { max-inline-size: 1160px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .faq .section-head { margin: 0; position: sticky; inset-block-start: 104px; }
  /* closing: the words sit level with the middle of the form, not stranded at its top */
  .access--end .access__copy { align-self: center; padding-block-start: 0; }
}

/* phones: the path's cards are a little denser, so the section is shorter */
@media (max-width: 899px) {
  .trail { --gap: 28px; }
  .step { row-gap: 12px; }
  .step__mock .ui { font-size: .875rem; }
  .step__mock .ui--screen { padding: 14px 16px; }
  .step__mock .ui__row { padding-block: 7px; }
  .step__mock .ui__ev { padding-block: 8px; gap: 10px; }
  .step__mock .ui__title { font-size: 1.0625rem; }
}

/* ---------- 2026-11-13: the top of the page is the trailer ----------
   The headline and the email field are centred, and under them sits a laptop whose screen is where the trailer plays.
   The lid opens when the page loads and closes as you scroll past it (main.js moves --lid; without JS, or with reduced
   motion, the laptop is simply open). The phone with the sample app has its own section straight after. */
.hero { padding-block-end: clamp(28px, 4vw, 48px); }
.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero__copy { max-inline-size: 860px; margin-inline: auto; padding-block-start: clamp(20px, 4vw, 44px); text-align: center; }
.hero__sub { margin-inline: auto; }
.hero .signup { margin-inline: auto; }
.hero .signup__two, .hero .signup__done { text-align: start; }

.laptop { position: relative; inline-size: 100%; max-inline-size: 900px; margin: clamp(32px, 5vw, 56px) auto 0; isolation: isolate; }
.laptop__glow { position: absolute; inset: 6% -6% 0; z-index: -1; pointer-events: none; filter: blur(52px);
  background: radial-gradient(46% 44% at 28% 34%, rgba(47, 107, 235, .42), transparent 72%), radial-gradient(44% 42% at 74% 70%, rgba(0, 168, 107, .34), transparent 72%); }
.laptop__scene { perspective: 2200px; perspective-origin: 50% 100%; }
.laptop__lid { position: relative; inline-size: 88%; margin-inline: auto; padding: clamp(8px, 1.6vw, 16px) clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 20px);
  border-radius: clamp(12px, 2.2vw, 22px) clamp(12px, 2.2vw, 22px) 0 0;
  background: linear-gradient(160deg, #223C52, #0A1C2A 40%, #050D14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(10, 28, 42, .45);
  transform-origin: 50% 100%; transform: rotateX(calc(var(--lid, 0) * 1deg)); will-change: transform; }
.laptop__cam { position: absolute; inset-block-start: clamp(3px, .6vw, 6px); inset-inline-start: 50%; inline-size: 5px; block-size: 5px; margin-inline-start: -2.5px; border-radius: 50%; background: #2A4257; }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(3px, .6vw, 6px); background: #020308; }
/* the screen dims as the lid comes down */
.laptop__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #020308; opacity: var(--shade, 0); }
.laptop__video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background: #020308; }
.laptop__soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(6px, 1.2vw, 12px); padding: 16px; color: #fff; text-align: center;
  background: radial-gradient(70% 60% at 50% 46%, #0d2148 0%, #050a16 58%, #020308 100%); }
.laptop__mark { inline-size: clamp(30px, 5vw, 52px); block-size: clamp(30px, 5vw, 52px); filter: drop-shadow(0 0 12px rgba(47, 107, 235, .5)); }
.laptop__play { display: grid; place-items: center; inline-size: clamp(52px, 9vw, 84px); block-size: clamp(52px, 9vw, 84px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.laptop__play svg { inline-size: 42%; block-size: 42%; margin-inline-start: 6%; }
.laptop__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.125rem, 3vw, 1.75rem); letter-spacing: -0.02em; }
.laptop__note { font-size: clamp(.8125rem, 1.6vw, 1rem); font-weight: 600; color: rgba(255, 255, 255, .66); }
.laptop__base { position: relative; block-size: clamp(10px, 1.9vw, 18px); border-radius: 2px 2px clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
  background: linear-gradient(#2B455B, #12293B 45%, #071019); box-shadow: 0 26px 40px -18px rgba(10, 28, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .22); }
.laptop__base::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; inline-size: 15%; block-size: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #071019; }

/* the phone, in its own section under the trailer */
.try { padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.try__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
.try__list { display: grid; gap: 12px; margin-block-start: 24px; font-weight: 600; }
.try__list li { display: flex; align-items: center; gap: 12px; }
.try .lede { margin-block-start: 14px; }
@media (max-width: 959px) { .try__copy { text-align: center; } .try__list { justify-content: center; text-align: start; } }
@media (min-width: 960px) { .try__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
/* keep the headline on one line on wide screens, so more of the laptop shows before any scrolling */
@media (min-width: 960px) {
  .hero h1 { font-size: clamp(2.75rem, 4.4vw, 3.5rem); }
  .hero__copy { padding-block-start: 20px; }
  .laptop { max-inline-size: min(900px, 112vh); margin-block-start: 36px; }
}

/* ---------- 2026-11-13: a bigger laptop that shuts completely ----------
   The laptop is the centrepiece: nearly the full width of the page, but never taller than the window, so the whole
   screen can be watched at once. When it closes, the lid comes all the way down and its front edge rests on the base.
   The three promises sit straight under it. */
.hero { padding-block-end: 0; }
.hero__copy { max-inline-size: 900px; }
.hero__sub { max-inline-size: none; }
.hero .signup { margin-block-start: 20px; }
.laptop { max-inline-size: 1120px; margin-block-start: clamp(28px, 4vw, 44px); }
.laptop__glow { inset: 4% -4% -4%; }
.laptop__scene { position: relative; perspective: 5200px; }
.laptop__lid { inline-size: 91%; opacity: calc(1 - var(--edge, 0)); }
.laptop.is-shut .laptop__lid { visibility: hidden; }
.laptop__edge { position: absolute; inset-inline: 4.5%; inset-block-end: clamp(10px, 1.9vw, 18px); block-size: clamp(5px, .9vw, 9px);
  border-radius: clamp(5px, .9vw, 9px) clamp(5px, .9vw, 9px) 0 0; background: linear-gradient(#2B455B, #0A1C2A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); opacity: var(--edge, 0); pointer-events: none; }
.hero + .trust { margin-block-start: clamp(20px, 3vw, 36px); }
.try { padding-block-start: clamp(40px, 6vw, 80px); }
.cousin { padding-block-start: clamp(36px, 5vw, 64px); }
@media (min-width: 960px) {
  .laptop { max-inline-size: min(1120px, calc((100vh - 116px) / .6)); margin-block-start: 32px; }
  .hero__copy { padding-block-start: 12px; }
}
/* the phone's glow must not widen the page now that it sits outside the hero */
.try { overflow-x: clip; }
/* the hero's email field: the label is still there for screen readers; sighted visitors see it inside the field */
.hero .signup__row input::placeholder { color: var(--muted); opacity: 1; }

/* the trailer: a big play button over the poster until it starts; after that the video's own controls take over */
.laptop__start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(8px, 1.4vw, 14px); inline-size: 100%; padding: 0; border: 0;
  background: linear-gradient(rgba(2, 3, 8, .1), rgba(2, 3, 8, .38)); color: #fff; font: 600 clamp(.9375rem, 1.8vw, 1.125rem)/1.2 var(--font); cursor: pointer; }
.laptop__start .laptop__play { background: rgba(10, 28, 42, .55); border-color: rgba(255, 255, 255, .55); transition: transform .2s ease-out, background-color .2s ease-out; }
.laptop__start:hover .laptop__play { transform: scale(1.06); background: var(--accent); }
.laptop__start:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.laptop.is-started .laptop__start { display: none; }

/* ---------- 2026-11-13: Orient above the headline, and waves behind the top of the page ---------- */
.hero__brand { margin-block-end: clamp(14px, 2vw, 22px); color: var(--text); }
.hero__brand svg { display: block; block-size: clamp(40px, 6vw, 60px); inline-size: auto; aspect-ratio: 345 / 100; margin-inline: auto; }
.hero__waves { position: absolute; inset: 14% 0 0 0; z-index: -1; inline-size: 100%; block-size: 86%; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 62%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 62%, transparent); }
.hero__wave { opacity: .17; }
.hero__wave--2 { opacity: .13; }
.hero__wave--3 { opacity: .15; }
.hero__line { fill: none; stroke-width: 2.5; opacity: .5; vector-effect: non-scaling-stroke; }
.hero__wave--1 { animation: wave-a 16s ease-in-out infinite alternate; }
.hero__wave--2 { animation: wave-b 20s ease-in-out infinite alternate; }
.hero__wave--3 { animation: wave-a 24s ease-in-out -8s infinite alternate; }
@keyframes wave-a { from { transform: translate3d(-70px, 0, 0); } to { transform: translate3d(70px, 14px, 0); } }
@keyframes wave-b { from { transform: translate3d(80px, 10px, 0); } to { transform: translate3d(-80px, -8px, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__wave--1, .hero__wave--2, .hero__wave--3 { animation: none; } }
.try__more { margin-block-start: 18px; color: var(--muted); }

/* ---------- 2026-11-13: the phone sample looks like the demo app ----------
   Three screens only: Home, Your path, and this week's step. The compass button at the bottom opens "Where to?". */
.sv { display: grid; gap: 12px; align-content: start; font-size: .875rem; line-height: 1.4; }
.sv[hidden] { display: none; }
.sv p { margin: 0; }
.sv__card { display: grid; gap: 6px; padding: 16px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-soft); }
.sv__h { font: 700 1.125rem/1.2 var(--font-head); letter-spacing: -0.02em; }
.sv__btn { display: flex; align-items: center; justify-content: center; min-block-size: 46px; inline-size: 100%; padding: 10px 18px; border: 0; border-radius: 999px; background: #0B2A4A; color: #fff; font: 600 .9375rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background-color .18s ease; }
.sv__btn:hover { background: var(--accent); color: #fff; }
.sv__btn--ghost { background: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--field); }
.sv__btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.sv__btn:focus-visible, .sv__tile:focus-visible, .sv__bud:focus-visible, .sv__opts button:focus-visible, .sv__wheel button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Home */
.on-home .phone__status { background: var(--text); color: #fff; }
.on-home .phone__sys i { background: #fff; }
.on-home .phone__sys b { border-color: #fff; background: linear-gradient(90deg, #fff 70%, transparent 70%) content-box; }
.sv__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 -12px -52px; padding: 10px 22px 70px; border-radius: 0 0 34px 34px; background: linear-gradient(160deg, #12293B, #0A1C2A 60%); color: #fff; }
.sv__hello { font: 700 1.5rem/1.15 var(--font-head); letter-spacing: -0.02em; }
.sv__hero-sub { margin-block-start: 3px !important; color: rgba(255, 255, 255, .82); font-size: .8125rem; }
.sv__avatar { flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--text); font: 700 1.125rem/1 var(--font-head); }
.sv__urgent { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: 24px; background: #FFEFD2; box-shadow: var(--shadow-soft); }
.sv__due { display: flex; align-items: center; gap: 7px; color: var(--warn-text); font-weight: 600; font-size: .8125rem; }
.sv__due::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--warn); }
.sv__big { font: 700 1.375rem/1.15 var(--font-head); letter-spacing: -0.02em; }
.sv__urgent .sv__btn { margin-block-start: 8px; }
.sv__chips { display: flex; gap: 6px; font-weight: 600; font-size: .8125rem; }
.sv__chips span { padding: 7px 13px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.sv__chips .is-on { background: #0B2A4A; color: #fff; box-shadow: none; }
.sv__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv__tile { display: grid; gap: 4px; align-content: start; padding: 14px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text); font: inherit; text-align: start; }
button.sv__tile { cursor: pointer; }
button.sv__tile:hover { background: var(--accent-tint); }
.sv__n { color: var(--muted); font-weight: 600; }
.sv__n b { color: var(--text); font: 700 1.625rem/1 var(--font-head); margin-inline-end: 3px; }
.sv__tile .ui__bar { margin-block: 4px 2px; }
.sv__soon { display: flex; align-items: center; gap: 12px; padding-block: 8px 2px; border-block-start: 1px solid var(--line); font-weight: 600; }
.sv__soon span { flex: none; inline-size: 46px; display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: .6875rem; font-weight: 600; }
.sv__soon span b { color: var(--text); font: 700 1.0625rem/1 var(--font-head); }

/* Your path and the step share a page top */
.sv__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 2px; }
.sv__kick { color: var(--accent-2-text); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sv__title { font: 700 1.625rem/1.1 var(--font-head); letter-spacing: -0.02em; }
.sv__meta { color: var(--muted); }
.sv__ring { flex: none; inline-size: 58px; block-size: 58px; display: grid; place-content: center; justify-items: center; border-radius: 50%; border: 5px solid var(--accent-2-bright); border-inline-start-color: var(--line); color: var(--muted); font-size: .625rem; font-weight: 600; line-height: 1.1; }
.sv__ring b { color: var(--text); font: 700 1.0625rem/1 var(--font-head); }

/* the winding path */
.sp { --rail: 62px; display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.sp__i { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 8px; min-block-size: 92px; padding-block-end: 14px; }
.sp__rail { position: relative; }
.sp__rail > svg { position: absolute; inset: 18px 0 auto 0; inline-size: 100%; block-size: calc(100% + 14px); overflow: visible; }
.sp__rail path { fill: none; stroke: var(--accent-2-bright); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp__i:last-child .sp__rail > svg { display: none; }
.sp__rail > i { position: absolute; z-index: 1; inset-block-start: 18px; inset-inline-start: 26%; inline-size: 20px; block-size: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 3px solid #C25E00; transform: translate(-50%, -50%); font-style: normal; }
.sp__i:nth-child(even) .sp__rail > i { inset-inline-start: 74%; }
.sp__i--stage .sp__rail > i { inline-size: 40px; block-size: 40px; border: 0; background: #0B2A4A; color: #fff; font: 700 1rem/1 var(--font-head); box-shadow: 0 0 0 6px rgba(11, 42, 74, .16); }
.is-here .sp__rail > i { inline-size: 40px; block-size: 40px; border: 3px solid var(--accent-2-bright); box-shadow: 0 0 0 6px rgba(23, 196, 127, .2); }
.is-here .sp__rail > i svg { inline-size: 24px; block-size: 24px; color: var(--text); }
.is-here .sp__rail path, .is-locked .sp__rail path { stroke: #B7C7D3; stroke-width: 5; stroke-dasharray: 1 12; }
.is-locked .sp__rail > i { border-color: #B7C7D3; background: var(--surface-2); }
.sp__t { display: grid; align-content: start; gap: 1px; padding-block-start: 4px; }
.sp__t small { color: var(--accent-2-text); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sp__t b { font: 700 1.0625rem/1.2 var(--font-head); letter-spacing: -0.01em; }
.sp__i--stage .sp__t b { font-size: 1.3125rem; }
.sp__t > span { color: var(--muted); font-size: .8125rem; }
.is-locked .sp__t { opacity: .55; }
.sp__here { gap: 4px; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); }
.sp__here .sv__btn { margin-block-start: 8px; }

/* the step */
.sv__parthead { display: flex; align-items: center; gap: 12px; }
.sv__partk { color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sv__partk span { color: var(--warn-text); }
.sv__parth { font: 700 1.1875rem/1.2 var(--font-head); letter-spacing: -0.02em; }
.sv__why { color: var(--muted); }
.sv__subs { display: grid; gap: 7px; margin: 4px 0; padding: 0; list-style: none; counter-reset: sub; }
.sv__subs li { display: flex; align-items: center; gap: 10px; counter-increment: sub; }
.sv__subs li::before { content: counter(sub); flex: none; inline-size: 22px; block-size: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 600; }
.is-done .sv__subs li::before { content: "\2713"; background: var(--accent-2-tint); color: var(--accent-2-text); }
.sv__chip { justify-self: start; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 600; }
.sv__actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-block-start: 6px; }
.is-done .sv__actions { grid-template-columns: 1fr; }
.is-done [data-sv="stuck"] { display: none; }
.is-done [data-sv="done"] { background: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--field); }
.sv__stuck { display: grid; gap: 8px; margin-block-start: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.sv__stuck[hidden], .sv__office[hidden], .sv__after[hidden] { display: none; }
.sv__opts { display: grid; gap: 6px; }
.sv__opts button { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.sv__opts button::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--field); }
.sv__opts button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.sv__opts button[aria-pressed="true"]::before { border: 5px solid var(--accent); }
.sv__office { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.sv__officek { color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sv__fine { margin-block-start: 6px !important; color: var(--muted); font-size: .75rem; }
.sv__after { background: var(--accent-2-tint); }
.sv__after .sv__btn { margin-block-start: 6px; }
.sv__ev { display: grid; grid-template-columns: 3.3em minmax(0, 1fr); gap: 10px; padding-block: 8px 2px; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.sv__ev > span:first-child { font-weight: 600; }
.sv__ev b { display: block; color: var(--text); font-size: .875rem; font-weight: 600; }
.sv__ev.is-dl > span:first-child, .sv__ev.is-dl b { color: var(--warn-text); }

/* the compass button and "Where to?" */
.sv__dock { display: none; justify-content: center; padding: 6px 0 22px; background: linear-gradient(transparent, var(--bg, #F4F9FC) 40%); margin-block-start: -18px; position: relative; z-index: 2; pointer-events: none; }
.is-ready .sv__dock { display: flex; }
.is-intro .sv__dock { visibility: hidden; }
.sv__bud { pointer-events: auto; inline-size: 58px; block-size: 58px; display: grid; place-items: center; padding: 0; border: 3px solid var(--accent-2-bright); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: 0 0 0 6px rgba(23, 196, 127, .18), 0 10px 22px rgba(10, 28, 42, .22); cursor: pointer; transition: transform .2s ease-out; }
.sv__bud:hover { transform: scale(1.06); }
.sv__bud svg { inline-size: 32px; block-size: 32px; }
.sv__wheel { position: absolute; inset: 0; z-index: 5; display: grid; align-content: end; justify-items: center; gap: 10px; padding: 24px 18px 30px; background: rgba(244, 249, 252, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; }
.sv__wheel[hidden] { display: none; }
.sv__wheel-h { margin: 0; font: 700 1.5rem/1.2 var(--font-head); letter-spacing: -0.02em; }
.sv__wheel-list { display: grid; gap: 8px; inline-size: 100%; }
.sv__wheel-list button { display: flex; align-items: center; gap: 12px; min-block-size: 54px; padding: 10px 18px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text); font: 600 1rem/1.2 var(--font); cursor: pointer; }
.sv__wheel-list button:hover { background: var(--accent-tint); }
.sv__wheel-list .icon { inline-size: 22px; block-size: 22px; color: var(--accent); }
.sv__wheel-more { margin: 2px 0 0; color: var(--muted); font-size: .8125rem; }
.sv__wheel-x { min-block-size: 44px; padding: 8px 22px; border: 0; border-radius: 999px; background: #0B2A4A; color: #fff; font: 600 .9375rem/1.2 var(--font); cursor: pointer; }
/* room at the end of each screen, so the compass button never covers the last line */
.is-ready .app__views { padding-block-end: 34px; }
/* phones: the waves start lower, behind the laptop, so they never run across the email field */
@media (max-width: 959px) { .hero__waves { inset-block-start: 50%; block-size: 50%; } .hero__line { opacity: .32; } }

/* ---------- 2026-11-13: pre-launch polish ----------
   The home page shows the big Orient above the headline, so the small one in the header waits until that has
   scrolled away (main.js sets has-brand on the header while the big one is in view). */
.header .logo { transition: opacity .25s ease; }
.header.has-brand .logo { opacity: 0; pointer-events: none; }

/* ---------- 2026-11-13: before launch ---------- */
.tailor__eg { margin-block-start: 14px; color: var(--on-navy-muted); font-size: .875rem; }
.sv__avatar svg { inline-size: 24px; block-size: 24px; }
/* phones: each path card is a preview, its top part with a soft fade, so the section is much shorter to scroll */
@media (max-width: 899px) {
  .step__mock .ui { position: relative; max-block-size: 232px; overflow: hidden; }
  .step__mock .ui::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 168px; block-size: 64px; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--surface) 88%); }
}

/* ---------- 2026-11-13: one background for the opening, and sections that fade in ----------
   The hero, the three promises and "Now try it yourself" sit on one soft wash of the brand's blue and green light
   over a faint dot grid. The lights drift slowly; the whole wash fades into the page before "School and life".
   With reduced motion the lights simply stay still. */
.opening { position: relative; isolation: isolate; }
.opening__bg {
  position: absolute; inset: -80px 0 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #E9F1FB 0%, #F1F7FB 34%, #EDF7F3 68%, var(--bg) 100%);
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.opening__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(10, 28, 42, .075) 1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 42% at 50% 22%, #000, transparent 78%), radial-gradient(60% 30% at 50% 82%, #000, transparent 80%);
  mask-image: radial-gradient(75% 42% at 50% 22%, #000, transparent 78%), radial-gradient(60% 30% at 50% 82%, #000, transparent 80%);
}
.ob { position: absolute; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.ob--1 { top: -4%; left: -14%; inline-size: max(560px, 58vw); background: radial-gradient(closest-side, rgba(47, 107, 235, .30), transparent); animation: ob-drift-a 34s ease-in-out infinite alternate; }
.ob--2 { top: 14%; right: -16%; inline-size: max(520px, 52vw); background: radial-gradient(closest-side, rgba(23, 196, 127, .24), transparent); animation: ob-drift-b 40s ease-in-out infinite alternate; }
.ob--3 { top: 36%; left: 14%; inline-size: max(620px, 66vw); background: radial-gradient(closest-side, rgba(61, 139, 245, .20), transparent); animation: ob-drift-b 46s ease-in-out -12s infinite alternate; }
.ob--4 { top: 62%; left: -12%; inline-size: max(480px, 48vw); background: radial-gradient(closest-side, rgba(0, 168, 107, .18), transparent); animation: ob-drift-a 38s ease-in-out -20s infinite alternate; }
.ob--5 { top: 70%; right: -10%; inline-size: max(500px, 50vw); background: radial-gradient(closest-side, rgba(0, 65, 194, .18), transparent); animation: ob-drift-b 42s ease-in-out -6s infinite alternate; }
@keyframes ob-drift-a { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.08); } }
@keyframes ob-drift-b { from { transform: translate3d(5%, 2%, 0) scale(1.06); } to { transform: translate3d(-6%, -4%, 0) scale(.96); } }
/* the hero's own corner tints are replaced by the shared wash */
.opening .hero::before { display: none; }

/* Sections fade in: a clearer rise, a little blur, and on more of the page (the promises, the phone, the path's
   chooser, the questions). Browsers that tie this to the scroll do it in CSS (above); others get it from main.js. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes rise-in { from { opacity: 0; transform: translateY(44px) scale(.985); filter: blur(6px); } }
  }
}
.io-reveal { opacity: 0; transform: translateY(44px) scale(.985); filter: blur(6px); transition: opacity .9s ease-out, transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease-out; }
.io-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* a success box while its save is still on the way (usually well under a second) */
.success[aria-busy="true"] { opacity: .65; transition: opacity .2s; }
/* lighter to draw while scrolling: no mask over the whole wash (its colours already end in the page colour), the dot
   grid only near the top, and the lights placed so they fade out before the bottom edge */
.opening__bg { -webkit-mask-image: none; mask-image: none; contain: strict; }
.opening__bg::after { inset: 0 0 auto; block-size: min(1100px, 60%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.ob--4 { top: 54%; }
.ob--5 { top: 58%; }

/* ---------- 2026-11-14: the privacy page (privacy.html) and its link from the privacy section ---------- */
.legal h1 { margin-block: 6px 14px; }
.legal .lede { color: var(--muted); max-inline-size: 40em; }
.legal .privacy__points { margin-block: 28px 8px; }
.legal h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; margin-block: clamp(32px, 4vw, 44px) 10px; }
.legal p { max-inline-size: 42em; margin-block-start: 10px; }
.legal p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__back { margin-block-start: clamp(36px, 5vw, 56px) !important; }
.legal__back .btn { text-decoration: none; color: #fff; }
.privacy__more { margin-block-start: 22px; font-weight: 600; }
.privacy__more a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* the bot trap field: off-screen, never focusable by people */
.hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; left: -9999px; }