/* ============================================================================
   AdmiTree homepage, light theme.
   Nothing here is scroll-scrubbed or pinned: each section animates itself once
   it is in view (js/home.js, js/v9.js). scrollcraft supplies only the progress
   hairline and entry counters; nothing follows the pointer, hovers are plain CSS.
   ========================================================================== */

:root {
  --sc-canvas:     #f4f6fa;
  --sc-surface:    #ffffff;
  --sc-ink:        #0b1530;
  --sc-ink-soft:   #4f5b72;
  --sc-accent:     #7bd23c;
  --sc-accent-ink: #0b1a06;
  --sc-font-display: "Geist", "Geist Fallback", system-ui, sans-serif;
  --sc-font-text:    "Geist", "Geist Fallback", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 222 60% 12%;

  --h-line: color-mix(in oklab, var(--ink) 9%, transparent);
  --h-line-2: color-mix(in oklab, var(--ink) 15%, transparent);
}

body.v9-home { background: var(--paper); color: var(--ink); }
.v9-home #scrollProgress { display: none; }
.v9-home [data-sc-progress] { z-index: 65; height: 2px; }
.home p { color: var(--muted); }
.home h1, .home h2, .home h3 { color: var(--ink); }
.home { overflow-x: clip; }
.h-wrap { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.h-h2 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 4.2rem) !important;
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  max-width: 16ch;
  margin: 0 0 clamp(28px, 4vw, 52px);
}
.btn.h-big { min-height: 60px; padding: 0 30px; font-size: 17px; }
section[class^="h-"] { position: relative; }

/* =================================================================== HERO */
/* An inset photographic stage. Planes (campus, copy, student, canopy) carry
   data-depth; js/home.js writes --hs (scroll 0..1) and each plane translates
   by its own depth. --hx/--hy stay 0: the hero no longer follows the pointer.
   Only transform moves. */
.h-hero { padding: 12px 12px 0; isolation: isolate; }
.h-stage {
  --hx: 0; --hy: 0; --hs: 0;
  position: relative;
  overflow: hidden; isolation: isolate;
  min-height: min(calc(100svh - 24px), 980px);
  border-radius: 32px;
  background: #d9c9a8;
  display: flex; align-items: center;
}
.h-plane { position: absolute; pointer-events: none; will-change: transform; }
.h-plane--bg { inset: -4%; z-index: 0;
  transform: translate3d(calc(var(--hx) * -14px), calc(var(--hy) * -10px + var(--hs) * 90px), 0) scale(calc(1.06 + var(--hs) * .05)); }
.h-plane--bg img, .h-plane--bg picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.h-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(252 247 238 / .92) 0%, rgb(252 247 238 / .78) 30%, rgb(252 247 238 / .18) 56%, transparent 70%),
    linear-gradient(0deg, rgb(20 24 16 / .28), transparent 30%);
}
.h-hero__copy { position: relative; z-index: 3; padding: calc(var(--header-h) + 56px) 0 72px;
  transform: translate3d(0, calc(var(--hs) * -40px), 0); }
.h-plane--subject {
  z-index: 4; right: clamp(0px, 6vw, 110px); bottom: 0;
  height: min(86%, 840px); aspect-ratio: 1300 / 1723;
  transform: translate3d(calc(var(--hx) * 16px), calc(var(--hy) * 6px + var(--hs) * 30px), 0);
}
.h-plane--subject > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 30px 40px rgb(30 25 10 / .28)); }
.h-plane--fg {
  z-index: 5; right: -4%; top: -6%; width: 58%; aspect-ratio: 16 / 9;
  background: url(../assets/photos/leaves.webp) center / cover no-repeat;
  mix-blend-mode: multiply; opacity: .75; filter: blur(1.5px);
  mask-image: radial-gradient(90% 80% at 80% 10%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(90% 80% at 80% 10%, #000 30%, transparent 75%);
  transform: translate3d(calc(var(--hx) * 34px), calc(var(--hy) * 18px + var(--hs) * -120px), 0);
}

/* the shortlist tags that float beside the student */
.h-tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.h-tag {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / .82);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 18px 40px -18px rgb(30 25 10 / .45);
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.96);
  transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s);
}
.is-live .h-tag { opacity: 1; transform: none; }
.h-tag i { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.h-tag b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.h-tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 22%, transparent); }
.h-tag--safe  { --c: var(--safety); left: -6%; top: 40%; }
.h-tag--match { --c: var(--match); left: -16%; top: 54%; }
.h-tag--reach { --c: var(--reach); left: -2%; top: 68%; }
@media (prefers-reduced-motion: no-preference) {
  .is-live .h-tag { animation: h-bob 6s ease-in-out infinite; animation-delay: calc(var(--d) + 1s); }
}
@keyframes h-bob { 50% { transform: translate3d(0, -6px, 0); } }

.h-hero__title {
  font-size: clamp(2.5rem, 1.1rem + 4vw, 4.9rem) !important;
  line-height: .95;
  letter-spacing: -0.05em;
  font-weight: 600;
  max-width: 12ch;
  margin: 0;
  text-wrap: wrap; /* balance split it as "India's first / free, AI-powered"; greedy wrapping breaks after "free," */
}
/* the green phrase is its own line: three lines on desktop and tablet instead of a fourth orphaned word */
.h-hero__title em { display: block; color: var(--leaf-deep); }
.h-hero__sub { margin: clamp(20px, 3vh, 28px) 0 0; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.5; max-width: 36ch; text-wrap: pretty; color: #3d4556 !important; }
.h-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 34px); }
.h-hero__trust { margin: 22px 0 0; font-size: 14px; color: #4a5160 !important; }
.h-hero__trust b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Each word fades up into place. No clipping mask: a mask sliced the glyphs
   mid-rise (descenders, the italic overhang of "admitted.") and let fragments
   of the next line show through. */
.h-w > span {
  display: inline-block;
  opacity: 0; transform: translate3d(0, .32em, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
.is-live .h-w > span { opacity: 1; transform: none; }
.h-rise { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s var(--ease-out) var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s); }
.is-live .h-rise { opacity: 1; transform: none; }
html:not(.h-js) .h-rise, html:not(.h-js) .h-w > span, html:not(.h-js) .h-tag { opacity: 1; transform: none; }
/* html.h-js is set in <head> (includes/header.php), so the headline is hidden
   from the first paint until js/home.js has split it into words; it used to
   paint whole, vanish, and rise again. Under reduced motion it is never split
   and never hidden. html.v9-failsafe (set if the scripts never arrive) wins. */
@media (prefers-reduced-motion: no-preference) {
  html.h-js .h-hero__title:not([aria-label]) { opacity: 0; }
}
html.v9-failsafe .h-hero__title, html.v9-failsafe .h-rise, html.v9-failsafe .h-tag,
html.v9-failsafe .h-w > span { opacity: 1 !important; transform: none !important; }

/* Between the phone layout and a wide desktop, the student plane is narrower
   and the tags sit over its own edge, so they never cover the hero copy. */
@media (min-width: 981px) and (max-width: 1240px) {
  /* the card sits closer here: the headline scales with the viewport so "college counsellor." keeps clear of it */
  .h-hero__title { font-size: clamp(2.5rem, 4.6vw, 4.9rem) !important; }
  .h-plane--subject { height: min(70%, 700px); right: clamp(0px, 4vw, 60px); }
  .h-tag--safe  { left: 2%; }
  .h-tag--match { left: -4%; }
  .h-tag--reach { left: 6%; }
}

@media (max-width: 980px) {
  .h-stage { flex-direction: column; align-items: stretch; min-height: 0; }
  .h-hero__copy { padding: calc(var(--header-h) + 40px) 0 0; }
  .h-hero__scrim { background: linear-gradient(180deg, rgb(252 247 238 / .94) 0%, rgb(252 247 238 / .8) 42%, rgb(252 247 238 / .1) 70%, transparent 80%); }
  /* stacked: the illustration is centred under the copy, with the chance tags over its left edge */
  .h-plane--subject { position: relative; right: auto; align-self: center; margin: 28px auto 0; height: auto; width: min(58%, 380px); }
  .h-plane--bg img { object-position: 70% 80%; }
  .h-plane--fg { width: 90%; }
  .h-tag { padding: 8px 11px 8px 10px; gap: 8px; border-radius: 13px; }
  .h-tag b { font-size: 1.05rem; }
  .h-tag--safe  { left: -8%;  top: 30%; }
  .h-tag--match { left: -14%; top: 46%; }
  .h-tag--reach { left: -6%;  top: 62%; }
}
@media (max-width: 620px) {
  .h-hero { padding: 8px 8px 0; }
  .h-stage { border-radius: 24px; }
  /* when the two CTAs wrap, they share one width instead of two ragged pills */
  .h-hero__cta .btn { flex: 1 1 200px; justify-content: center; }
  .h-plane--subject { width: min(80%, 330px); }
}
@media (prefers-reduced-motion: reduce) {
  .h-plane, .h-hero__copy { transform: none !important; }
}

/* marquee */
.h-marquee {
  margin-top: clamp(28px, 5vh, 56px);
  padding: 18px 0 22px;
  border-top: 1px solid var(--h-line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.h-marquee__track { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; padding-right: clamp(20px, 3vw, 44px); will-change: transform; }
.h-marquee__track span {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 38%, transparent);
  white-space: nowrap;
  transition: color .4s ease;
}
.h-marquee__track span:hover { color: var(--ink); }
.h-marquee__track i { color: var(--leaf-deep); font-size: clamp(1rem, .8rem + .8vw, 1.6rem); }

/* ============================================================== STATEMENT */
/* Four lines in normal flow. When the section is seen, js steps through them
   on a timer; the last gets a leaf highlight that sweeps across it. */
/* POWERED BY: data counts, systems and team, right under the hero */
.h-powered { padding: clamp(28px, 4vw, 48px) 0 0; }
.h-powered__panel {
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px);
  border: 1px solid var(--h-line); border-radius: 24px;
  background: color-mix(in oklab, #fff 72%, transparent);
  box-shadow: 0 24px 60px -40px rgb(15 23 42 / .35);
}
.h-powered__eyebrow { margin: 0 0 18px; font: 500 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--leaf-text) !important; }
/* The figures follow the proof row further down (.h-fig): a ruled row of equal
   columns, heavy tabular numerals that count up, a raised leaf "+". They are sized
   down so five fit inside the panel, and carry their own class because the proof
   row's tablet rules (two columns) must not reach in here. */
.h-powered__data { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--h-line); }
.h-pfig { min-width: 0; padding: clamp(18px, 2.2vw, 28px) clamp(8px, 1.2vw, 18px) 0 0; }
.h-pfig + .h-pfig { border-left: 1px solid var(--h-line); padding-left: clamp(12px, 1.6vw, 22px); }
.h-pfig b { display: block; font-size: clamp(1.9rem, .6rem + 2.5vw, 3.4rem); line-height: .9; letter-spacing: -0.06em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.h-pfig sup { position: relative; top: -.95em; vertical-align: baseline; font-size: .45em; line-height: 0; color: var(--leaf-deep); }
.h-pfig > span { display: block; margin-top: 12px; max-width: 20ch; font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (min-width: 561px) and (max-width: 820px) {
  .h-powered__data { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-pfig { padding-bottom: 20px; }
  .h-pfig:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .h-pfig:nth-child(n+4) { border-top: 1px solid var(--h-line); }
  /* the last row's rule runs to the panel edge */
  .h-pfig:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .h-pfig:last-child:nth-child(3n+2) { grid-column: 2 / -1; }
}
@media (max-width: 560px) {
  .h-powered__data { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-pfig { padding-bottom: 18px; }
  .h-pfig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .h-pfig:nth-child(n+3) { border-top: 1px solid var(--h-line); }
  .h-pfig:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.h-powered__systems { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h-powered__systems li { display: flex; }
/* Place cards: the same lift the step and bento cards use, plus an icon tile that
   fills with leaf and a leaf rule that draws across the top edge. */
.h-pcard {
  position: relative; overflow: hidden; flex: 1; min-width: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); border-radius: 18px;
  background: linear-gradient(160deg, #fff 35%, var(--sky));
  box-shadow: 0 18px 44px -34px rgb(15 23 42 / .35);
  transition: box-shadow .35s ease, transform .3s var(--ease-out), border-color .35s ease;
}
.h-pcard i {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; font-size: 17px;
  color: var(--leaf-deep); background: var(--leaf-soft);
  transition: background-color .3s ease, color .3s ease, transform .4s var(--ease-out);
}
.h-pcard h3 { margin: 16px 0 6px; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }
.h-pcard p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
@media (hover: hover) {
  .h-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--ink) 14%, transparent); }
  .h-pcard:hover i { background: var(--leaf); color: var(--leaf-ink); }
}
/* The team line closes the panel as a leaf-tinted strip with a pill link. */
.h-powered__team { margin: 14px 0 0; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--leaf-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; font-weight: 500; color: var(--leaf-ink); }
.h-powered__team i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; color: var(--leaf-deep); background: #fff; }
.h-powered__team > span { flex: 1 1 260px; }
.h-powered__team a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink); text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.h-powered__team a:hover { background: var(--leaf); color: var(--leaf-ink); }
@media (max-width: 860px) {
  .h-powered__systems { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .h-pcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .h-pcard i { grid-row: span 2; }
  .h-pcard h3 { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .h-pcard, .h-pcard i { transition: none; } }

.h-say { padding: clamp(80px, 12vw, 170px) 0; }
.h-say__line {
  margin: 0;
  font-size: clamp(1.9rem, 1rem + 3.8vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--ink) !important;
  text-wrap: balance;
  max-width: 20ch;
}
.h-say__line + .h-say__line { margin-top: clamp(10px, 1.6vw, 22px); }
/* opacity and transform only: these lines toggle in both scroll directions, and
   animating a blur filter over display-size text repainted it on every frame */
html.h-js .h-say__line { opacity: .12; transform: translate3d(0, 20px, 0); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
html.h-js .h-say__line.is-on { opacity: 1; transform: none; }
html.h-js .h-say__line.is-past { opacity: .32; }
.h-say__line--turn mark {
  color: inherit;
  background: linear-gradient(transparent 58%, color-mix(in oklab, var(--leaf) 60%, transparent) 58%, color-mix(in oklab, var(--leaf) 60%, transparent) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%;
  transition: background-size .6s var(--ease-out) .15s;
}
.h-say__line--turn.is-on mark, html:not(.h-js) .h-say__line--turn mark { background-size: 100% 100%; }

/* =================================================================== TOUR */
/* A dark product stage inside the light page: aurora blooms and a dot grid
   behind white demo cards. Blooms drift on transform only. */
.h-tour { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.h-tour__shell {
  /* no overflow clip here: the search box's live dropdown must be able to
     hang below the stage. The blooms are clipped inside .h-tour__bg instead. */
  position: relative; isolation: isolate;
  border-radius: 32px;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(170deg, var(--night-3), var(--night-2) 45%, var(--night) 100%);
  color: #fff;
  border: 1px solid rgb(255 255 255 / .08);
  box-shadow: 0 60px 120px -60px hsl(222 60% 8% / .8), inset 0 1px 0 rgb(255 255 255 / .08);
}
.h-tour__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.h-tour__bg::before {
  content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 42% at 14% 18%, color-mix(in oklab, var(--leaf) 34%, transparent), transparent 70%),
    radial-gradient(44% 46% at 88% 30%, color-mix(in oklab, #4f8dff 40%, transparent), transparent 70%),
    radial-gradient(40% 36% at 60% 100%, color-mix(in oklab, #2451c7 38%, transparent), transparent 70%);
  will-change: transform;
  animation: h-aurora 26s ease-in-out infinite alternate;
}
@keyframes h-aurora {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) rotate(5deg) scale(1.08); }
}
.h-tour__bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .9), transparent 90%);
          mask-image: linear-gradient(180deg, rgb(0 0 0 / .9), transparent 90%);
}

/* tabs: the original 48px pills, with an icon and the auto-advance line */
.h-tour__tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .12);
}
.h-tour__tabs button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; border: 0; border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / .78);
  font: 500 15px/1 var(--font-sans);
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}
.h-tour__tabs button i { font-size: 13px; opacity: .8; transition: color .3s ease, opacity .3s ease; }
.h-tour__tabs button span { position: relative; z-index: 1; }
.h-tour__tabs button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.h-tour__tabs button[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); }
.h-tour__tabs button[aria-selected="true"] i { color: var(--leaf-deep); opacity: 1; }
.h-tour__tabs button::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--leaf); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); opacity: 0;
}
.h-tour__tabs button[aria-selected="true"]::after { opacity: 1; }
.h-tour__tabs button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

.h-tour__panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  /* --h-panel-h: the tallest panel, measured by js/home.js, so switching tabs
     never changes the page height */
  min-height: max(clamp(360px, 42vw, 460px), var(--h-panel-h, 0px));
  padding: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 28px) clamp(12px, 2vw, 20px);
}
.h-tour__panel[hidden] { display: none; }
.h-tour__panel.is-on .h-tour__text > *,
.h-tour__panel.is-on .h-tour__demo { animation: h-in .8s var(--ease-out) both; }
.h-tour__panel.is-on .h-tour__text h3 { animation-delay: .05s; }
.h-tour__panel.is-on .h-tour__text p { animation-delay: .1s; }
.h-tour__panel.is-on .h-tour__text .h-tour__cta { animation-delay: .16s; }
.h-tour__panel.is-on .h-tour__demo { animation-delay: .14s; }
@keyframes h-in { from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.h-tour__step { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--leaf); }
.h-tour__step em { font-style: normal; color: rgb(255 255 255 / .6); text-transform: uppercase; }
.h-tour__step::before { content: ""; width: 22px; height: 1px; background: var(--leaf); }
.h-tour__text h3 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 14px; max-width: 16ch; color: #fff; }
.h-tour__text p { margin: 0; font-size: 1.05rem; line-height: 1.55; max-width: 38ch; color: rgb(255 255 255 / .86); }
.h-tour__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .18); color: #fff; font-weight: 600; font-size: 14.5px; transition: background-color .25s ease, border-color .25s ease; }
.h-tour__cta:hover { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); }

/* the demo card and the ghost card stacked behind it */
.h-tour__demo {
  position: relative;
  border-radius: 24px;
  padding: clamp(20px, 2.6vw, 30px);
  background: #fff;
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: 0 40px 80px -36px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .04);
}
.h-tour__demo::before {
  content: ""; position: absolute; z-index: -1; inset: 14px -12px -14px 12px;
  border-radius: inherit; background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .12);
}
.h-tour__demo p { color: var(--muted); }

/* find */
.h-search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.h-search i { color: #5b6680; }
.h-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent; box-shadow: none !important; padding: 12px 4px; font: 500 16px/1.2 var(--font-sans); color: var(--ink); }
.h-search input:focus { box-shadow: none !important; }
.h-search:focus-within { border-color: color-mix(in oklab, var(--ink) 30%, transparent); box-shadow: none; }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.h-chips a {
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-size: 13.5px; font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease-out);
}
.h-chips a:hover { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); transform: translateY(-2px); }

/* odds */
.h-odds { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: center; }
.h-odds__ring { position: relative; width: clamp(150px, 16vw, 190px); aspect-ratio: 1; }
.h-odds__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.h-odds__ring circle { fill: none; stroke-width: 10; }
.h-odds__ring .bg { stroke: var(--soft); }
.h-odds__ring .fg {
  stroke: var(--tier, var(--leaf-deep)); stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 * (1 - var(--p, 0)));
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--tier, var(--leaf-deep)) 55%, transparent));
  transition: stroke-dashoffset .7s var(--ease-out), stroke .4s ease;
}
.h-odds__read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.h-odds__read b { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.h-odds__read span { margin-top: 8px; padding: 5px 10px; border-radius: 999px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--tier, var(--leaf-deep)); transition: background-color .4s ease; }
.h-seg { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.h-seg legend { float: left; width: 100%; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.h-seg label { cursor: pointer; }
.h-seg input { position: absolute; opacity: 0; pointer-events: none; }
.h-seg span {
  display: inline-grid; place-items: center; min-width: 64px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line);
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.h-seg input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.h-seg input:focus-visible + span { outline: 2px solid var(--leaf-deep); outline-offset: 3px; }
.h-range { display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.h-range output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.h-range input[type="range"] { width: 100%; accent-color: var(--leaf-deep); height: 28px; }
.h-odds__why { margin: 14px 0 0; font-size: 14px; line-height: 1.5; min-height: 3em; }
.h-odds__band {
  grid-column: 1 / -1; position: relative; margin-top: 4px; padding-top: 14px;
  display: grid; grid-template-columns: 1fr 2fr 3.5fr 3.5fr; gap: 0;
}
.h-odds__band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #d03b2f 0 10%, #c77700 10% 30%, #2451c7 30% 65%, #3f8f14 65% 100%);
  opacity: .9;
}
.h-odds__band i {
  position: absolute; top: -5px; left: calc(var(--p, 0) * 100%); width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--tier, var(--leaf-deep));
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
  transition: left .7s var(--ease-out), border-color .4s ease;
}
.h-odds__band span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.h-odds__band span:last-child { text-align: right; }

/* essay */
.h-essay__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.h-essay__label { margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; }
.h-essay__score { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 12px; border-radius: 999px; background: var(--leaf-soft); color: var(--green-dark); font: 500 12px/1 var(--font-mono); }
.h-essay__score b { font: 700 18px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--green-dark); }
.h-essay__body { margin: 0; font-size: clamp(1rem, .95rem + .2vw, 1.12rem); line-height: 1.75; color: var(--ink) !important; }
.h-essay mark {
  color: inherit;
  background: linear-gradient(transparent 60%, var(--hl, transparent) 60%) no-repeat;
  background-size: 0% 100%;
  transition: background-size .9s var(--ease-out);
  border-radius: 2px; cursor: help;
}
.h-essay mark.is-marked { background-size: 100% 100%; }
.h-essay mark:nth-of-type(1) { --hl: #ffd98a; }
.h-essay mark:nth-of-type(2) { --hl: #c5eba2; }
.h-essay mark:nth-of-type(3) { --hl: #ffc2bc; }
.h-essay__note { position: relative; margin: 16px 0 0; min-height: 2.8em; padding: 12px 14px 12px 22px; border-radius: 14px; background: var(--paper); font-size: 14px; line-height: 1.45; color: var(--ink) !important; }
.h-essay__note::before { content: ""; position: absolute; left: 10px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-deep); }
/* deadlines: a horizontal month rail */
.h-plan__line { position: relative; list-style: none; margin: 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.h-plan__line::before, .h-plan__line::after { content: ""; position: absolute; left: 8px; right: 8px; top: 5px; height: 2px; background: var(--line); }
.h-plan__line::after { background: var(--leaf-deep); transform-origin: 0 50%; transform: scaleX(0); }
.is-on .h-plan__line::after { animation: h-draw 1.8s var(--ease-out) .2s forwards; }
@keyframes h-draw { to { transform: scaleX(1); } }
.h-plan__line li { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px 10px 12px; border-radius: 16px; min-width: 0; }
.h-plan__line li::before { content: ""; position: absolute; left: 10px; top: -22px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--leaf-deep); }
.h-plan__line li.is-next { background: var(--leaf-soft); }
.h-plan__line li.is-next::before { background: var(--leaf-deep); box-shadow: 0 0 0 5px color-mix(in oklab, var(--leaf) 30%, transparent); }
.h-plan__line b { font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.h-plan__line span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.h-plan__line small { margin-top: 4px; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.h-plan__line em { position: absolute; right: 8px; top: -30px; padding: 4px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.is-on .h-plan__line li { animation: h-pop .6s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * .2s); }
.h-plan__line li:nth-child(1) { --i: 0; } .h-plan__line li:nth-child(2) { --i: 1; } .h-plan__line li:nth-child(3) { --i: 2; }
.h-plan__line li:nth-child(4) { --i: 3; } .h-plan__line li:nth-child(5) { --i: 4; }
@keyframes h-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.h-plan__foot { margin: 18px 0 0; font-size: 13px; }

/* ================================================================== PROOF */
.h-proof { padding: 0 0 clamp(80px, 10vw, 140px); }
/* One row of equal columns (three or four figures, the DU one is optional),
   two columns on a tablet, one on a phone. The figure size is capped so the
   widest one ("15,230") always clears its column's divider. */
.h-proof__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--h-line); }
.h-fig { min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 28px) 0 0; }
.h-fig + .h-fig { border-left: 1px solid var(--h-line); padding-left: clamp(16px, 2vw, 28px); }
.h-fig b {
  display: block;
  font-size: clamp(2.6rem, 1rem + 4vw, 5rem);
  line-height: .9;
  letter-spacing: -0.06em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
/* raised with relative positioning, which never touches the line box: a
   vertical-align lift made this figure's line taller than its neighbours and
   pushed its caption down */
.h-fig sup { position: relative; top: -.95em; vertical-align: baseline; font-size: .45em; line-height: 0; color: var(--leaf-deep); }
@media (max-width: 1000px) {
  .h-proof__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-fig { padding-bottom: clamp(24px, 3vw, 40px); }
  .h-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .h-fig:nth-child(n+3) { border-top: 1px solid var(--h-line); }
}
/* captions only: the counter inside "130+" is also a span, and inheriting the
   caption's 1.45 line-height made that one figure's line taller */
.h-fig > span { display: block; margin-top: 14px; max-width: 26ch; font-size: 1rem; color: var(--muted); line-height: 1.45; }
.h-fig--free b { color: var(--leaf-deep); }


/* ================================================================= FAMILY */
.h-family { padding: 0 0 clamp(90px, 12vw, 160px); }
.h-family__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.h-family__photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.2; background: #d8c8b0;
  box-shadow: 0 40px 80px -50px rgb(40 30 10 / .6); }
.h-family__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the photo opens from a sliver, and settles from a slight zoom */
html.h-js .h-family__photo { clip-path: inset(12% 30% 12% 0 round 28px); transition: clip-path 1.4s var(--ease-io); }
html.h-js .h-family__photo img { transform: scale(1.15); transition: transform 1.8s var(--ease-out); }
html.h-js .h-family__photo.is-in { clip-path: inset(0 0 0 0 round 28px); }
html.h-js .h-family__photo.is-in img { transform: scale(1); }
.h-family__copy .h-h2 { max-width: 12ch; }
.h-family__copy > p { font-size: 1.15rem; line-height: 1.55; max-width: 38ch; margin: 0; }
.h-family__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.h-family__list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--h-line); }
.h-family__list i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--leaf-soft); color: var(--leaf-deep); }
.h-family__list span { color: var(--muted); line-height: 1.5; }
.h-family__list b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .h-family__grid { grid-template-columns: 1fr; } }

/* ================================================================ JOURNEY */
.h-journey { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.h-journey__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.h-journey__head p { max-width: 34ch; font-size: 1.1rem; margin: 0 0 clamp(28px, 4vw, 52px); }
.h-steps {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
/* a line that draws itself through the five steps */
.h-steps::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 30%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--leaf-deep), #2451c7);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 2.4s var(--ease-io);
}
.h-steps.is-drawn::before { transform: scaleX(1); }
.h-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: 10px 10px 22px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ink) 7%, transparent);
  box-shadow: var(--shadow-sm);
}
/* height:auto + flex:none so aspect-ratio alone sets the size; with the base
   .gfx height:100% the flex column shrank each picture by its text length,
   which put the titles on different lines. */
.h-step .gfx { flex: none; height: auto; min-height: 0; aspect-ratio: 1.15; border-radius: 18px; }
.h-step .gfx__disc { width: 38%; font-size: 26px; }
.h-step h3 { font-size: 1.15rem; letter-spacing: -0.03em; margin: 18px 12px 8px; }
.h-step p { margin: 0 12px; font-size: 1rem; line-height: 1.5; }
.h-step--lit { background: var(--leaf-soft); border-color: transparent; }
/* Entrance is a keyframe animation with `backwards` fill: it holds the hidden
   first frame through the stagger delay and leaves no fill afterwards, so the
   plain :hover lift below owns transform once the card has arrived. */
html.h-js .h-step { opacity: 0; transition: box-shadow .4s ease, transform .3s var(--ease-out); }
html.h-js .h-steps.is-drawn .h-step { opacity: 1; animation: h-step-in 1s var(--ease-out) backwards; }
@keyframes h-step-in { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.97); } }
.h-steps.is-drawn .h-step:nth-child(2) { animation-delay: .35s; }
.h-steps.is-drawn .h-step:nth-child(3) { animation-delay: .7s; }
.h-steps.is-drawn .h-step:nth-child(4) { animation-delay: 1.05s; }
.h-steps.is-drawn .h-step:nth-child(5) { animation-delay: 1.4s; }
.h-step { transition: box-shadow .4s ease, transform .3s var(--ease-out); }
.h-step:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* ========================================================== DESTINATIONS */
.h-dest { padding: 0 0 clamp(80px, 10vw, 140px); }
.h-strips { display: flex; gap: 12px; height: clamp(420px, 58vh, 560px); }
.h-strip {
  position: relative; flex: 1 1 0; min-width: 0;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
  transition: flex-grow 1s var(--ease-io);
}
.h-strip.is-open { flex-grow: 3.6; }
.h-strip { background: #1b2230; color: #fff; border: 0; }
.h-strip__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12); transition: transform 1.4s var(--ease-out), filter 1s ease; filter: saturate(.85); }
.h-strip.is-open .h-strip__img { transform: scale(1); filter: none; }
.h-strip::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(8 12 20 / .05) 35%, rgb(8 12 20 / .72) 100%); transition: background .8s ease; }
.h-strip:not(.is-open)::before { background: linear-gradient(180deg, rgb(8 12 20 / .25), rgb(8 12 20 / .6)); }
.h-strip__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 32px); }
.h-strip h3 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 2.4rem); letter-spacing: -0.035em; white-space: nowrap; color: #fff !important; }
.h-strip:not(.is-open) h3 { writing-mode: vertical-rl; transform: rotate(180deg); }
.h-strip p { margin: 10px 0 0; max-width: 36ch; color: rgb(255 255 255 / .9) !important; opacity: 0; transform: translateY(10px); transition: opacity .5s ease .2s, transform .7s var(--ease-out) .2s; }
.h-strip.is-open p { opacity: 1; transform: none; }
.h-strip:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 4px; }
.h-strip::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--leaf); transform-origin: 0 50%; transform: scaleX(0);
}
.h-strips.is-cycling .h-strip.is-open::after { animation: h-strip-fill var(--cycle, 4.5s) linear forwards; }
@keyframes h-strip-fill { to { transform: scaleX(1); } }

/* ==================================================================== WHY */
.h-why { padding: 0 0 clamp(90px, 12vw, 150px); }
.h-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.h-cell {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 230px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 26px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ink) 7%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.h-cell h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); letter-spacing: -0.03em; margin: 0 0 8px; }
.h-cell p { margin: 0; max-width: 32ch; }
.h-cell--du { grid-row: span 2; background: var(--leaf); border-color: var(--leaf); justify-content: space-between; }
.h-cell--du h3, .h-cell--du p { color: var(--leaf-ink) !important; }
.h-cell--du h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.h-cell__big { font-size: clamp(4rem, 2rem + 7vw, 8.5rem); font-weight: 700; line-height: .8; letter-spacing: -0.06em; color: color-mix(in oklab, var(--leaf-ink) 14%, transparent); }
.h-cell--odds { background: linear-gradient(160deg, #fff, var(--sky)); }
.h-cell--free { grid-column: 2 / span 2; min-height: 260px; flex-direction: row; align-items: stretch; gap: 24px; padding: 10px; }
.h-cell--free .gfx { flex: 0 0 42%; min-height: 0; border-radius: 18px; }
.h-cell--free > div { align-self: flex-end; padding: 18px 14px 14px 0; }
.h-cell { transition: box-shadow .35s ease, transform .3s var(--ease-out), border-color .35s ease; }
.h-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--ink) 14%, transparent); }

.h-vs { margin-top: clamp(56px, 8vw, 96px); }
.h-vs__switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  margin-bottom: 26px;
}
.h-vs__switch button {
  position: relative; z-index: 1; min-height: 46px; padding: 0 22px;
  border: 0; background: transparent; border-radius: 999px;
  font: 600 15px/1 var(--font-sans); color: var(--muted); cursor: pointer;
  transition: color .35s ease;
}
.h-vs__switch button[aria-pressed="true"] { color: #fff; }
.h-vs__switch i {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 999px; background: var(--ink);
  transition: transform .6s var(--ease-out), background-color .4s ease;
}
.h-vs[data-state="usual"] .h-vs__switch i { transform: translateX(0); background: #6b7890; }
.h-vs:not([data-state="usual"]) .h-vs__switch i { transform: translateX(100%); }
.h-vs__rows { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(20px, 4vw, 56px); }
.h-vs__rows > div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--h-line); align-items: baseline; }
.h-vs__rows dt { font-weight: 600; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.h-vs__rows dt i { color: var(--leaf-deep); width: 1.1em; }
.h-vs__rows dd { margin: 0; grid-column: 2; grid-row: 1; font-size: 1.05rem; line-height: 1.45; transition: opacity .45s ease, transform .6s var(--ease-out), filter .45s ease; }
.h-vs__rows dd.u { color: var(--muted); }
.h-vs__rows dd.a { color: var(--ink); }
.h-vs__rows[data-side="us"] dd.u, .h-vs__rows[data-side="usual"] dd.a { opacity: 0; transform: translateY(8px); filter: blur(4px); pointer-events: none; }
.h-vs__rows[data-side="usual"] dd.u, .h-vs__rows[data-side="us"] dd.a { opacity: 1; transform: none; filter: none; }
.h-vs__foot { margin: 26px 0 0; font-size: 15px; }

/* ================================================================== CLOSE */
.h-close { padding: 0 12px; }
.h-close__panel {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(1240px, 100%); margin: 0 auto;
  padding: clamp(64px, 9vw, 130px) 24px;
  border-radius: 32px;
  text-align: center;
  background: #1d2433;
  color: #fff;
}
.h-close__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.h-close__panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 90% at 50% 55%, rgb(8 14 28 / .72), rgb(8 14 28 / .35) 80%); }
.h-close__panel .h-close__title { color: #fff !important; }
.h-close__panel .h-close__title em { color: var(--leaf); }
.h-close__panel .h-close__sub { color: rgb(255 255 255 / .86) !important; }
.h-close__panel .btn.primary { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); }
.h-close__panel .btn.primary:hover { background: #8fe052; }
.h-close__panel .btn.secondary { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .4); backdrop-filter: blur(8px); }
.h-close__panel .btn.secondary:hover { background: rgb(255 255 255 / .22); border-color: #fff; color: #fff; }
.h-close__panel::before {
  content: ""; position: absolute; left: 50%; bottom: -55%; z-index: -1;
  width: 110%; aspect-ratio: 2 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--leaf) 38%, transparent), transparent);
  animation: v9-glow 9s ease-in-out infinite alternate;
}
.h-close__title { margin: 0 auto; font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem) !important; line-height: .98; letter-spacing: -0.05em; font-weight: 600; max-width: 14ch; }
.h-close__sub { margin: 22px auto 0; max-width: 44ch; font-size: 1.15rem; }
.h-close__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.h-mine { margin: 44px auto 0; max-width: 560px; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); text-align: left; }
.h-mine__title { margin: 0 0 12px; color: var(--ink) !important; font-weight: 600; }
.h-mine__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.h-mine__row b { display: block; font-size: 1.8rem; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.h-mine__row span { font-size: 13px; color: var(--muted); }
.h-mine__next { margin: 12px 0 0; font-size: 14px; }

/* ================================================================ MOBILE */
@media (max-width: 1100px) {
  .h-steps { grid-template-columns: repeat(5, minmax(230px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .h-steps:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .h-steps::-webkit-scrollbar { display: none; }
  .h-step { scroll-snap-align: start; }
  .h-steps::before { display: none; }
}
@media (max-width: 980px) {
  .h-hero__grid { grid-template-columns: 1fr; }
  .h-tour__panel { grid-template-columns: 1fr; min-height: var(--h-panel-h, 0px); align-content: start; }
  .h-bento { grid-template-columns: 1fr 1fr; }
  .h-cell--du { grid-row: auto; grid-column: 1 / -1; min-height: 260px; }
  .h-cell--free { grid-column: 1 / -1; }
  .h-vs__rows { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .h-tour__tabs { grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
  .h-tour__demo::before { display: none; }
  .h-odds { grid-template-columns: 1fr; justify-items: center; }
  .h-odds__controls { width: 100%; }
  .h-odds__band { width: 100%; }
  .h-plan__line { grid-template-columns: 1fr; padding: 0 0 0 26px; gap: 6px; }
  .h-plan__line::before, .h-plan__line::after { left: 5px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .h-plan__line::after { transform-origin: 50% 0; transform: scaleY(0); }
  .h-plan__line li::before { left: -27px; top: 14px; }
  .h-plan__line em { top: 8px; }
  .h-strips { flex-direction: column; height: auto; }
  .h-strip { flex: 0 0 88px; transition: flex-basis .9s var(--ease-io); }
  .h-strip.is-open { flex: 0 0 320px; }
  .h-strip:not(.is-open) h3 { writing-mode: horizontal-tb; transform: none; }
  .h-strip:not(.is-open) p { display: none; }
  .h-strip:not(.is-open) .h-strip__copy { top: 0; display: flex; align-items: center; padding-block: 0; }
  .h-bento { grid-template-columns: 1fr; }
  .h-cell:not(.h-cell--du) { min-height: 0; }
  .h-cell--free { flex-direction: column; }
  .h-cell--free .gfx { flex-basis: 180px; }
  .h-proof__row { grid-template-columns: minmax(0, 1fr); }
  .h-fig + .h-fig { border-left: 0; padding-left: 0; border-top: 1px solid var(--h-line); }
  .h-fig { padding-bottom: 24px; }
  .h-vs__rows > div { grid-template-columns: 1fr; gap: 6px; }
  .h-vs__rows dd { grid-column: 1; grid-row: 2; }
  .h-vs__switch button { padding: 0 14px; font-size: 14px; }
  .h-mine__row { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .h-hero__glow::before, .h-hero__glow::after, .h-close__panel::before { animation: none; }
  .h-strip, .h-strip__img, .h-steps::before { transition: none; }
  .h-family__photo { clip-path: none !important; }
  .h-family__photo img { transform: none !important; }
  html.h-js .h-say__line { opacity: 1; transform: none; filter: none; transition: none; }
  html.h-js .h-step { opacity: 1; transform: none; animation: none; }
  .h-tour__panel.is-on .h-tour__text > *, .h-tour__panel.is-on .h-tour__demo, .is-on .h-plan__line li,
  .h-tour__bg::before { animation: none; }
  .is-on .h-plan__line::after { animation: none; transform: none; }
  .h-essay mark { transition: none; }
  .h-strips.is-cycling .h-strip.is-open::after { animation: none; }
}

/* ---- Hero backdrop (27 Sept 2026) ----------------------------------------------------------------
   The campus photo, its cream fade and the blurred leaves were replaced by a light, CSS-only backdrop in the
   site's own colours: a cool paper-to-sky gradient, soft blue and green glows that drift very slowly, and a
   faint dot grid that fades out towards the copy. The bg plane keeps its parallax from js/home.js. */
.h-stage { background: #f3f6fd; }
.h-plane--bg {
  background:
    radial-gradient(38% 52% at 76% 48%, rgb(74 124 238 / .22), transparent 70%),
    radial-gradient(30% 42% at 10% 88%, rgb(123 210 60 / .16), transparent 72%),
    radial-gradient(34% 40% at 34% 6%, rgb(36 81 199 / .09), transparent 70%),
    linear-gradient(160deg, #f8faff 0%, #eef3fd 50%, #e4ecfb 100%);
}
.h-plane--bg::before,
.h-plane--bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.h-plane--bg::before {
  background: radial-gradient(26% 34% at 62% 30%, rgb(123 210 60 / .12), transparent 70%),
              radial-gradient(24% 30% at 88% 82%, rgb(36 81 199 / .12), transparent 70%);
  animation: h-bg-drift 22s ease-in-out infinite alternate;
}
.h-plane--bg::after {
  background-image: radial-gradient(rgb(36 81 199 / .14) 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(60% 70% at 72% 50%, #000 0%, transparent 78%);
}
@keyframes h-bg-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }
.h-hero__scrim, .h-plane--fg { display: none; }
.h-plane--subject > img { filter: drop-shadow(0 30px 44px rgb(36 81 199 / .22)); }
@media (prefers-reduced-motion: reduce) { .h-plane--bg::before { animation: none; } }

/* ---- Powered by, live tiles (3 Nov 2026) --------------------------------------------------------
   Same fonts, colours and card language as the rest of the homepage: Geist figures at the original
   weight and tracking, white-to-sky cards, leaf accents. Each figure becomes its own card with a
   small live visual under it (countries lighting in turn, bars rising, a cut-off trend drawing
   itself, questions ticking off, a scholarship ring filling). Hover is the site's plain lift. */
.h-powered__data { border-top: 0; gap: 12px; }
.h-pfig, .h-pfig + .h-pfig {
  padding: 22px 20px 20px; border: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); border-radius: 18px;
  background: linear-gradient(160deg, #fff 35%, var(--sky));
  transition: box-shadow .35s ease, transform .3s var(--ease-out), border-color .35s ease;
}
@media (hover: hover) {
  .h-pfig:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--ink) 14%, transparent); }
}
.h-pfig > .h-pviz { display: flex; align-items: flex-end; max-width: none; height: 32px; margin-top: 18px; }

.h-pviz--geo { gap: 6px; align-items: center !important; }
.h-pviz--geo i { padding: 5px 8px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background: #fff; font: 600 11px/1 var(--font-sans); font-style: normal; color: var(--muted); }
.h-pviz--bars { gap: 5px; }
.h-pviz--bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--leaf), var(--leaf-soft)); transform-origin: 50% 100%; }
.h-pviz--line svg { flex: 1; min-width: 0; height: 100%; overflow: visible; }
.h-pviz--line path { fill: none; stroke: #2451c7; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.h-pviz--line circle { fill: var(--leaf); }
.h-pviz--grid { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 5px; align-content: end; }
.h-pviz--grid i { height: 11px; border-radius: 3px; background: var(--leaf); }
.h-pviz--grid i:nth-child(5n+3), .h-pviz--grid i:nth-child(7n+6) { background: var(--leaf-soft); }
.h-pviz--ring { position: relative; width: 32px; }
.h-pviz--ring svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.h-pviz--ring circle { fill: none; stroke: var(--leaf-soft); stroke-width: 3.5; }
.h-pviz--ring .arc { stroke: var(--leaf); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .26; }
.h-pviz--ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font-sans); color: var(--leaf-deep); }

@media (prefers-reduced-motion: no-preference) {
  html.v9-js .h-pfig:not(.is-in) .h-pviz--bars i { transform: scaleY(0); }
  html.v9-js .h-pfig:not(.is-in) .h-pviz--line path { stroke-dashoffset: 1; }
  html.v9-js .h-pfig:not(.is-in) .h-pviz--ring .arc { stroke-dashoffset: 1; }
  html.v9-js .h-pfig:not(.is-in) .h-pviz--grid i { opacity: 0; }
  .h-pviz--bars i { transition: transform 1s var(--ease-out) calc(.25s + var(--h) * .5s); }
  .h-pviz--line path, .h-pviz--ring .arc { transition: stroke-dashoffset 1.8s var(--ease-out) .3s; }
  .h-pviz--grid i { transition: opacity .4s ease; }
  .h-pviz--grid i:nth-child(2) { transition-delay: .08s } .h-pviz--grid i:nth-child(3) { transition-delay: .16s } .h-pviz--grid i:nth-child(4) { transition-delay: .24s }
  .h-pviz--grid i:nth-child(5) { transition-delay: .32s } .h-pviz--grid i:nth-child(6) { transition-delay: .4s } .h-pviz--grid i:nth-child(7) { transition-delay: .48s }
  .h-pviz--grid i:nth-child(8) { transition-delay: .56s } .h-pviz--grid i:nth-child(9) { transition-delay: .64s } .h-pviz--grid i:nth-child(10) { transition-delay: .72s }
  .h-pviz--grid i:nth-child(11) { transition-delay: .8s } .h-pviz--grid i:nth-child(12) { transition-delay: .88s } .h-pviz--grid i:nth-child(13) { transition-delay: .96s }
  .h-pviz--grid i:nth-child(14) { transition-delay: 1.04s }
  .h-pfig.is-in .h-pviz--geo i { animation: hp-geo 4s ease-in-out infinite; }
  .h-pviz--geo i:nth-child(2) { animation-delay: 1s !important; } .h-pviz--geo i:nth-child(3) { animation-delay: 2s !important; } .h-pviz--geo i:nth-child(4) { animation-delay: 3s !important; }
  .h-pfig.is-in .h-pviz--bars i { animation: hp-bar 3.2s ease-in-out 1.6s infinite alternate; }
  .h-pviz--bars i:nth-child(2n) { animation-duration: 2.6s !important; }
  .h-pfig.is-in .h-pviz--line circle { animation: hp-ping 1.8s ease-out 2s infinite; transform-box: fill-box; transform-origin: center; }
  .h-pfig.is-in .h-pviz--grid i:nth-child(5n+3) { animation: hp-tick 3s ease-in-out 1.6s infinite; }
}
@keyframes hp-geo { 0%, 18% { background: var(--leaf); color: var(--leaf-ink); border-color: var(--leaf); } 30%, 100% { background: #fff; color: var(--muted); border-color: color-mix(in oklab, var(--ink) 12%, transparent); } }
@keyframes hp-bar { to { transform: scaleY(.78); } }
@keyframes hp-ping { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes hp-tick { 50% { background: var(--leaf); } }

/* the grid's tablet and phone rows: cards carry their own borders, so the old dividers go */
@media (min-width: 561px) and (max-width: 820px) {
  .h-pfig:nth-child(3n+1) { padding-left: 20px; border-left: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); }
  .h-pfig:nth-child(n+4) { border-top: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); }
}
@media (max-width: 560px) {
  .h-pfig:nth-child(odd) { padding-left: 20px; border-left: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); }
  .h-pfig:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--ink) 7%, transparent); }
  .h-pfig, .h-pfig + .h-pfig { padding: 18px 16px 16px; }
}

/* ---- Hero backdrop and tags (3 Nov 2026) ---------------------------------------------------------
   1. The backdrop takes the bold world map used on the search, services and about pages, faded
      behind the copy, with the same live layer (pins pulse, light runs along the routes).
   2. The shortlist tags used to hang off the card's left edge by up to 16%, so on mid-size and
      tablet windows they floated outside it. They now sit inside the card at every width. */
.h-plane--bg {
  background:
    linear-gradient(90deg, rgb(247 250 255 / .9) 0%, rgb(247 250 255 / .62) 34%, rgb(247 250 255 / .12) 60%, rgb(247 250 255 / 0) 78%),
    #eaf1fd url("../assets/illustrations/search-hero-map.webp") right center / cover no-repeat;
}
.h-plane--bg::before { opacity: .6; }
.h-plane--bg::after { display: none; }
.h-hero__routes { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .2) 30%, #000 62%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .2) 30%, #000 62%); }
@media (max-width: 900px) {
  .h-plane--bg { background:
    linear-gradient(180deg, rgb(247 250 255 / .82) 0%, rgb(247 250 255 / .55) 55%, rgb(247 250 255 / .3) 100%),
    #eaf1fd url("../assets/illustrations/search-hero-map-sm.webp") 70% 40% / cover no-repeat; }
  .h-hero__routes { display: none; }
}
.h-tag--safe  { left: 5%;  top: 40%; }
.h-tag--match { left: 9%;  top: 53%; }
.h-tag--reach { left: 4%;  top: 66%; }

/* ---- Smoothness pass (3 Nov 2026) ------------------------------------------------------------------
   - the shortlist tags bob up and down forever; with a backdrop blur that meant three live blurs
     over the hero every frame in Safari. They are solid white now.
   - reveals fade and rise only; the blur they started from made Safari repaint the text each frame
   - the hero's drifting light is promoted to its own layer */
.h-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .95); }
.h-close__panel .btn.secondary { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .16); }
@keyframes h-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.h-vs__rows[data-side="us"] dd.u, .h-vs__rows[data-side="usual"] dd.a { filter: none; }
.h-vs__rows dd { transition: opacity .45s ease, transform .6s var(--ease-out); }
.h-plane--bg::before { will-change: transform; }
/* the routes stay clear of the headline: they only show from the middle of the hero rightwards */
.h-hero__routes { -webkit-mask-image: linear-gradient(90deg, transparent 46%, #000 64%); mask-image: linear-gradient(90deg, transparent 46%, #000 64%); }

/* cut-off trend line, Safari-safe: the dash is measured in screen pixels (a non-scaling stroke
   with pathLength="1" came out short in Safari), and the end dot is a real circle outside the
   stretched SVG, so it no longer turns into a pill */
.h-pviz--line { position: relative; }
.h-pviz--line path { stroke-dasharray: 600; stroke-dashoffset: 0; }
.h-pviz--line .dot { position: absolute; right: -3px; top: calc(8 / 34 * 100% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
@media (prefers-reduced-motion: no-preference) {
  html.v9-js .h-pfig:not(.is-in) .h-pviz--line path { stroke-dashoffset: 600; }
  .h-pviz--line .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--leaf); opacity: 0; }
  .h-pfig.is-in .h-pviz--line .dot::after { animation: hp-ping 1.8s ease-out 2s infinite; }
}