@property --orb { syntax: '<length-percentage>'; inherits: true; initial-value: 9vmin; }

  :root{
    --paper:#FBFAF7; --ink:#17140D; --muted:#9A958A; --faint:#C9C4B8;
    --hairline:rgba(23,20,13,.10); --hairline-2:rgba(23,20,13,.18);
    --glass:rgba(251,250,247,.72); --pill:#17140D; --pill-ink:#FBFAF7;
    --card-top:clamp(84px,12vh,124px); --card-x:clamp(14px,3vw,52px);
    --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
    --ease:cubic-bezier(.7,0,.2,1);
  }
  @media (prefers-color-scheme: dark){
    :root{ --paper:#0C0B08; --ink:#F3F0E9; --muted:#8B867A; --faint:#4A473F;
      --hairline:rgba(255,255,255,.12); --hairline-2:rgba(255,255,255,.22);
      --glass:rgba(14,13,10,.62); --pill:#F3F0E9; --pill-ink:#0C0B08; }
  }
  :root[data-theme="light"]{ --paper:#FBFAF7; --ink:#17140D; --muted:#9A958A; --faint:#C9C4B8;
    --hairline:rgba(23,20,13,.10); --hairline-2:rgba(23,20,13,.18); --glass:rgba(251,250,247,.72); --pill:#17140D; --pill-ink:#FBFAF7; }
  :root[data-theme="dark"]{ --paper:#0C0B08; --ink:#F3F0E9; --muted:#8B867A; --faint:#4A473F;
    --hairline:rgba(255,255,255,.12); --hairline-2:rgba(255,255,255,.22); --glass:rgba(14,13,10,.62); --pill:#F3F0E9; --pill-ink:#0C0B08; }

  *{ box-sizing:border-box; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }

  /* ---- chips (used everywhere, never all-caps) ---- */
  .chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
    font-size:13px; font-weight:500; letter-spacing:-.005em; color:var(--ink);
    border:1px solid var(--hairline); background:transparent; white-space:nowrap; }
  .chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-green); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-green) 20%, transparent); flex:none; }
  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
  a.chip{ transition:border-color .2s var(--ease), transform .2s var(--ease); }
  a.chip:hover{ border-color:var(--hairline-2); transform:translateY(-1px); }
  .on-image a.chip:hover{ border-color:rgba(246,241,233,.75); }
  .on-image .chip{ color:#F6F1E9; border-color:rgba(246,241,233,.42); }
  .on-image .chip .dot{ background:rgba(246,241,233,.85); }

  .oh-brand{ display:inline-flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.02em; font-size:16px; }

  /* give html the paper bg so an overscroll bounce never flashes a dark strip above the nav.
     (overscroll-behavior:none was removed — on Safari's root scroller it broke page scrolling
     entirely; the dark-strip fix is the background, not disabling overscroll.) */
  html{ background:#F7F7F4; }
  :root[data-theme="dark"]{ background:#0C0B08; }

  /* ---------------- STAGE / HERO ---------------- */
  /* Native scroll-linked reveal (Engine C): a tall stage whose sticky inner pins for a viewport
     while --p = scrollY / (offset to the oasis snap point) drives the orb->oasis morph. No scroll
     hijacking, no lock — the browser's real scroll does everything. JS eases --p (caps runaway
     fast-scroll speed) and snap-completes to the nearest state when you stop mid-reveal, so you're
     never left half-open. No overflow clip, so the orb's lift shadow fades cleanly. */
  /* height = 100svh (sticky) + ~78svh (reveal distance to .snap-oasis) + a small buffer, so the
     hero unpins right as the reveal finishes — no long "dead" hold where scrolling moves the bar
     but the pinned oasis doesn't budge */
  .stage{ position:relative; height:184svh; }
  .hero-sticky{ position:sticky; top:0; height:100svh; }
  /* invisible marker at the oasis position: JS reads its offsetTop as the reveal denominator */
  .snap-oasis{ position:absolute; left:0; top:78svh; width:1px; height:1px; pointer-events:none; }
  @media (prefers-reduced-motion: reduce){ .stage{ height:100svh; } .hero-sticky{ position:relative; } .snap-oasis{ display:none; } }
  /* phones load the light 1440 source (2944 is desktop/retina only) */
  @media (max-width:700px){
    .hero-media, .hero-sharp{
      background-image:url('../images/v4/oasis-1440.jpg');
      background-image:-webkit-image-set(url('../images/v4/oasis-1440.webp') 1x);
      background-image:image-set(url('../images/v4/oasis-1440.webp') type('image/webp'), url('../images/v4/oasis-1440.jpg') type('image/jpeg'));
    }
  }
  @property --p { syntax:'<number>'; inherits:true; initial-value:0; }  /* orb->oasis progress, driven by scroll */
  /* The card frame is a clip on a FIXED full-viewport wrapper: clip-path clips the VISIBLE region
     without resizing the box, so .hero-media's cover background never re-fits. That removes the
     image "shift" (cover recomputing as the box shrank toward the card) AND the per-frame layout of
     animating top/right/bottom/left — both of which stopped at p=0.12, exactly when the reveal used
     to "settle" and the framerate recovered. Same inset timing (by p=0.12) + rounded-corner ramp
     (p 0.1->0.4) as the old box inset carried. */
  .hero-frame{ position:absolute; inset:0; z-index:1;
    clip-path:inset(
      calc(var(--card-top,0px) * min(1, var(--p) / 0.12))
      calc(var(--card-x,0px)   * min(1, var(--p) / 0.12))
      calc(var(--card-x,0px)   * min(1, var(--p) / 0.12))
      calc(var(--card-x,0px)   * min(1, var(--p) / 0.12))
      round calc(30px * clamp(0, (var(--p) - 0.1) / 0.3, 1))); }
  .hero-media{ position:absolute; inset:0; overflow:hidden;
    background-image:url('../images/v4/oasis-2944.jpg');
    background-image:-webkit-image-set(url('../images/v4/oasis-2944.webp') 1x);
    background-image:image-set(url('../images/v4/oasis-2944.webp') type('image/webp'), url('../images/v4/oasis-2944.jpg') type('image/jpeg'));
    background-size:cover; background-position:center 42%;
    --orb:9vmin;
    /* the reveal circle grows within the frame-clipped card. The box is now fixed full-viewport, so
       the image beneath stays PUT — the orb frames the same palms at every --p (alignment holds all
       the way through the reveal instead of drifting until p=0.12). */
    clip-path:circle(calc(var(--orb) + (152% - 9vmin) * var(--p)) at 50% 37%);
    /* orb is softly blurred (cursor clears a crisp window via .hero-sharp); the blur clears by
       p=0.25 so the oasis is sharp. The lift shadow applies to the ORB only and fades to nothing
       by p~0.67 -> pure white beneath the open oasis (no grey band). */
    filter:blur(calc(6px * clamp(0, 1 - var(--p) * 4, 1)))
           drop-shadow(0 calc(18px * clamp(0, 1 - var(--p) * 1.5, 1)) calc(40px * clamp(0, 1 - var(--p) * 1.5, 1)) rgba(30,24,14, calc(.16 * clamp(0, 1 - var(--p) * 1.5, 1)))); }
  /* breathe only at the orb (p<0.05); oasisLive drift only at the oasis (p>0.92) — classes toggled by scroll */
  @media (min-width: 0px){ .at-orb .hero-media:not(.magnetic){ animation:breathe 5s ease-in-out infinite; } }
  @keyframes breathe{ 0%,100%{ --orb:8.4vmin; } 50%{ --orb:10.2vmin; } }
  @media (min-width: 0px){ .at-oasis .hero-media{ animation:oasisLive 30s ease-in-out infinite alternate; } }
  @keyframes oasisLive{ 0%{ background-position:50% 42%; } 100%{ background-position:53% 45%; } }


  /* fog-reveal sharp layer — over the softly-blurred orb, the cursor clears a crisp window into
     the image; the whole layer fades out as the oasis reveals (opacity tied to --p) */
  .hero-sharp{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; pointer-events:none;
    background-image:url('../images/v4/oasis-2944.jpg');
    background-image:-webkit-image-set(url('../images/v4/oasis-2944.webp') 1x);
    background-image:image-set(url('../images/v4/oasis-2944.webp') type('image/webp'), url('../images/v4/oasis-2944.jpg') type('image/jpeg'));
    background-size:cover; background-position:center 42%;
    clip-path:circle(var(--orb) at 50% 37%); opacity:calc(1 - var(--p) * 2.4);
    -webkit-mask-image:radial-gradient(circle var(--rr,0px) at var(--mx,-600px) var(--my,-600px), #000 42%, transparent 80%);
            mask-image:radial-gradient(circle var(--rr,0px) at var(--mx,-600px) var(--my,-600px), #000 42%, transparent 80%); }

  /* Touch devices have no cursor to drive the fog-reveal, so .hero-sharp never does anything
     (its mask stays radius:0 -> invisible) and the orb's blur can never be "cleared". Meanwhile
     animating filter:blur()+drop-shadow() on a full-viewport image WHILE clip-path expands is a
     per-frame paint the phone GPU chokes on — that's the frame-drop as the orb passes ~2x. Cut
     the blur/shadow (crisp orb) and drop the dead sharp layer on coarse pointers: clip-path alone
     composites smoothly, so the reveal stays fluid. Desktop (fine pointer) keeps the full effect. */
  @media (hover: none) and (pointer: coarse){
    .hero-media{ filter:none; }
    .hero-sharp{ display:none; }
  }

  /* ethereal blur behind the oasis text: a soft, LOOSE cloud that hugs the copy + padding and
     fades out over a long gradient (no box, no hard edge). Softens the busy image behind the
     text; the strong text-shadow on .card-copy carries the contrast. */
  .card-haze{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(1240px,97vw); height:min(680px,74vh); pointer-events:none;
    -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
    -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 0%, rgba(0,0,0,.8) 46%, rgba(0,0,0,.38) 66%, transparent 86%);
            mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 0%, rgba(0,0,0,.8) 46%, rgba(0,0,0,.38) 66%, transparent 86%);
    opacity:clamp(0, calc((var(--p) - 0.5) * 2.6), 1); }

  /* orb "alive" fx — drifting iridescent haze + breathing rings (idle only) */
  /* fade the orb glow/rings out FAST (gone by ~22% progress) so they don't linger as a
     circle in the stage centre — escaping the card — while it expands/collapses */
  .orb-fx{ position:absolute; left:50%; top:37%; width:0; height:0; z-index:3; pointer-events:none; opacity:clamp(0, calc(1 - var(--p) * 8), 1); }
  /* the orb reads as clickable — in the orb state the hero advances the reveal on click
     (media click -> toOasis), so show the hand cursor. Text/links/CTAs sit on top with
     their own pointer-events, so they keep their own cursors. */
  .at-orb .hero-media{ cursor:pointer; }
  .orb-haze{ position:absolute; left:50%; top:50%; width:0; height:0; }
  .orb-glow{ position:absolute; left:50%; top:50%; border-radius:50%; filter:blur(24px); }
  .orb-glow.g1{ width:33vmin; height:33vmin; margin:-16.5vmin 0 0 -16.5vmin;
    background:radial-gradient(circle, rgba(245,168,118,.52), rgba(240,150,110,.16) 46%, transparent 68%);
    animation:orbHaze1 8.5s ease-in-out infinite; }
  .orb-glow.g2{ width:30vmin; height:30vmin; margin:-15vmin 0 0 -15vmin;
    background:radial-gradient(circle, rgba(150,160,226,.42), rgba(192,150,212,.14) 48%, transparent 66%);
    animation:orbHaze2 11s ease-in-out infinite; }
  @keyframes orbHaze1{ 0%,100%{ transform:translate(-7%,-3%) scale(1); opacity:.6; } 50%{ transform:translate(8%,5%) scale(1.14); opacity:.92; } }
  @keyframes orbHaze2{ 0%,100%{ transform:translate(6%,4%) scale(1.05); opacity:.5; } 50%{ transform:translate(-8%,-6%) scale(.92); opacity:.78; } }
  .orb-ring{ position:absolute; left:50%; top:50%; border-radius:50%; }
  .orb-ring.r1{ width:20.5vmin; height:20.5vmin; margin:-10.25vmin 0 0 -10.25vmin;
    border:1.5px solid rgba(250,212,182,.62); box-shadow:0 0 26px 1px rgba(245,180,150,.3);
    animation:orbRing1 4.6s ease-in-out infinite; }
  .orb-ring.r2{ width:23.5vmin; height:23.5vmin; margin:-11.75vmin 0 0 -11.75vmin;
    border:1px solid rgba(250,212,182,.3); animation:orbRing2 5.6s ease-in-out infinite; }
  @keyframes orbRing1{ 0%,100%{ transform:scale(.97); opacity:.45; } 50%{ transform:scale(1.08); opacity:.9; } }
  @keyframes orbRing2{ 0%,100%{ transform:scale(1); opacity:.24; } 50%{ transform:scale(1.13); opacity:.55; } }
  @media (prefers-reduced-motion: reduce){ .orb-glow,.orb-ring{ animation:none !important; } }

  /* card overlays (expanded only) */
  /* (removed the radial .card-scrim — its soft edge read as a grey circle over the oasis;
     legibility now comes from a text-shadow on the copy, which hugs the glyphs, no overlay) */
  .card-copy{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    max-width:min(760px,84vw); color:#F6F1E9; pointer-events:none;  /* invisible at idle — must not eat taps on the hero CTAs below it */
    text-shadow:0 1px 2px rgba(8,6,4,.55), 0 2px 9px rgba(8,6,4,.5), 0 4px 30px rgba(8,6,4,.42);
    opacity:clamp(0, calc((var(--p) - 0.42) * 2.6), 1); }
  .card-copy .chip-row{ justify-content:center; margin-bottom:20px; }
  /* Keep the filtered surface alive from first paint and reveal it by opacity. WebKit can
     snap a changing backdrop-filter radius between compositor states, while opacity stays smooth. */
  body.al26 .card-copy.on-image .chip{
    --chip-glass:clamp(.001,calc((var(--p) - .5) * 2),1);
    position:relative; z-index:0; isolation:isolate;
    background:transparent !important; border-color:transparent !important;
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none !important; }
  body.al26 .card-copy.on-image .chip::before{
    content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; pointer-events:none;
    background:rgba(28,22,16,.30); border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(13px) saturate(155%); backdrop-filter:blur(13px) saturate(155%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 16px rgba(0,0,0,.20);
    opacity:var(--chip-glass); transform:translateZ(0); will-change:opacity;
    transition:background-color .2s var(--ease),border-color .2s var(--ease); }
  body.al26 .card-copy.on-image a.chip{ transition:transform .2s var(--ease); }
  body.al26 .card-copy.on-image a.chip:hover{
    background:transparent !important; border-color:transparent !important; }
  body.al26 .card-copy.on-image a.chip:hover::before{
    background:rgba(28,22,16,.42); border-color:rgba(255,255,255,.42); }
  .card-tag{ margin:0; font-size:clamp(40px,5vw,72px); line-height:1.02; letter-spacing:-.025em; font-weight:500; text-wrap:balance; }
  .card-sub{ margin:18px auto 0; color:rgba(246,241,233,.86); font-size:clamp(15px,1.25vw,19px); line-height:1.5; max-width:48ch; }
  .card-points{ list-style:none; margin:22px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 22px; }
  .card-points li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(246,241,233,.92); letter-spacing:-.005em; }
  .card-points li::before{ content:""; width:6px; height:6px; border-radius:50%; background:#7BC29B; box-shadow:0 0 0 3px rgba(123,194,155,.22); flex:none; }
  body.al26 .card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:11px 17px;
    border-radius:999px; background:rgba(246,241,233,.94); color:#17140D; font-size:14px;
    text-shadow:none;
    box-shadow:0 10px 28px rgba(8,6,4,.18);
    transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
  .card-link span.u{ border:0; padding:0; }
  .card-link svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
  body.al26 .card-link:hover{ color:#17140D; transform:translateY(-1px); background:#fff;
    box-shadow:0 14px 32px rgba(8,6,4,.24); }
  .card-link:hover svg{ transform:translateX(3px); }
  .card-link:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  .card-cue{ position:absolute; z-index:3; left:50%; bottom:calc(var(--card-x) + clamp(16px,2.2vh,26px)); transform:translateX(-50%);
    color:rgba(246,241,233,.85); opacity:var(--p);
    border:0; background:none; padding:8px 12px; cursor:pointer; pointer-events:none; transition:color .18s, transform .18s; }
  .card-cue:hover,.card-cue:focus-visible{ color:#fff; transform:translateX(-50%) translateY(3px); outline:none; }
  @media (min-width: 0px){ .card-cue svg,.cue .cue-ring{ animation:bob 2.2s var(--ease) infinite; } }
  .card-cue svg{ width:18px; height:18px; }

  /* idle copy */
  .flash{ position:absolute; z-index:2; left:50%; top:clamp(98px,15.5vh,176px); transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:10px; padding:8px 9px 8px 15px; border-radius:999px;
    border:1px solid var(--hairline); font-size:13.5px; color:var(--ink); background:var(--glass);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); white-space:nowrap;
    transition:border-color .2s var(--ease), transform .6s var(--ease); }
  .flash:hover{ border-color:var(--hairline-2); }
  .flash .dot{ width:7px; height:7px; border-radius:50%; background:#5f9c6f; box-shadow:0 0 0 4px rgba(95,156,111,.16); flex:none; }
  .flash .go{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:var(--ink); color:var(--paper); }
  .flash .go svg{ width:13px; height:13px; }
  /* Top-anchored a fixed clearance BELOW the orb (centre 37%, radius ~9vmin) instead of
     bottom-anchored — so the gap orb->headline can never go negative. Bottom-anchoring let the
     block rise into the orb when the viewport shortened (zoom, or both Safari bars showing),
     overlapping the headline. Anchoring to the orb tracks it at every height (also replaces the
     old tall-screen bottom override below). --orb-clear = orb radius + a small gap. */
  .hero-text{ position:absolute; z-index:2; left:50%; top:calc(37% + var(--orb-clear,12vmin)); bottom:auto; transform:translateX(-50%);
    width:min(880px,90vw); text-align:center; }
  .hero-text h1{ margin:0; font-size:clamp(28px,4vw,48px); line-height:1.16; letter-spacing:-.024em; font-weight:500; text-wrap:balance; }
  .hero-text h1 span{ color:var(--muted); }
  /* playful hover: each muted word pops to ink with a bounce as the cursor sweeps across (JS wraps words in .w) */
  .hero-text h1 span .w{ display:inline-block;
    transition:color .24s var(--ease), transform .44s cubic-bezier(.34,1.7,.5,1); }
  .hero-text h1 span .w:hover{ color:var(--ink); transform:translateY(-5px) scale(1.05); }
  /* secret links: look exactly like the other words (no underline / link colour), pointer is the only hint */
  .hero-text h1 span a.w{ position:relative; color:inherit; text-decoration:none; cursor:pointer; }
  /* a very subtle gradient sheen that continuously drifts across the secret-link glyphs (a ::before
     copy clipped to the text) — soft green->light->gold, wide and low-contrast; only while at the orb */
  .hero-text h1 span a.w::before{ content:attr(data-w); position:absolute; left:0; top:0; pointer-events:none; white-space:nowrap;
    background-image:linear-gradient(100deg, transparent 26%, rgba(150,205,170,.28) 42%, rgba(255,252,240,.5) 50%, rgba(226,198,150,.28) 58%, transparent 74%);
    background-size:230% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:wordSheen 4.2s linear infinite; animation-play-state:paused; }
  .at-orb .hero-text h1 span a.w::before{ animation-play-state:running; }
  @keyframes wordSheen{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }
  @media (prefers-reduced-motion: reduce){ .hero-text h1 span a.w::before{ display:none; } }
  @media (prefers-reduced-motion: reduce){
    .hero-text h1 span .w{ transition:color .2s var(--ease); }
    .hero-text h1 span .w:hover{ transform:none; }
  }
  .cta{ margin-top:clamp(24px,3.4vh,38px); display:flex; gap:18px; align-items:center; justify-content:center; }
  .cta .primary{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px;
    background:var(--pill); color:var(--pill-ink); font-weight:500; font-size:15px;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease); }
  .cta .primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(23,20,13,.24); opacity:.92; }
  .cta .primary svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
  .cta .primary:hover svg{ transform:translateX(2px); }
  .cta .ghost{ color:var(--muted); font-size:15px; position:relative; transition:color .2s var(--ease); }
  .cta .ghost::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:currentColor; transition:right .28s var(--ease); }
  .cta .ghost:hover{ color:var(--ink); } .cta .ghost:hover::after{ right:0; }
  .hero-text{ transition:transform .6s var(--ease); }
  /* idle copy fades out as the orb expands (driven by --p) */
  .flash, .hero-text, .cue{ opacity:clamp(0, calc(1 - var(--p) * 2.2), 1); }

  /* On tall screens the flash (top-anchored) drifts far above the orb (top:37%), leaving a big
     gap. Track the orb so it sits just above it. (.hero-text now top-anchors to the orb itself, so
     it tracks at every height — no special-case needed here anymore.) */
  @media (min-height: 980px){
    .flash{ top: calc(24vh - 70px); }
  }

  .cue{ position:absolute; z-index:3; left:50%; bottom:clamp(26px,4.5vh,46px); transform:translateX(-50%);
    display:inline-flex; flex-direction:column; align-items:center; gap:6px;
    font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.06em; color:var(--muted); }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
  /* the arrow sits in a frosted-glass circle so it reads as a tap target (the whole .cue button
     scrolls to the reveal). The circle bobs; hover brightens it. */
  .cue-ring{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:50%; color:var(--ink); border:1px solid var(--hairline); background:var(--glass);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
  .cue:hover .cue-ring,.cue:focus-visible .cue-ring{ border-color:var(--hairline-2); background:var(--paper); box-shadow:0 4px 14px rgba(23,20,13,.10); }
  .cue:focus-visible{ outline:none; }
  .cue svg{ width:16px; height:16px; }
  /* Short viewports (zoomed in, or small phones showing both Safari bars): the idle stack
     — chip + orb + headline + CTA + cue — can't all fit in 100svh. Tighten so nothing overlaps
     and the CTA stays above the idle fold (scrolling starts the reveal, so a below-fold CTA is
     unreachable): shrink the headline, hug the orb a touch closer, and drop the inessential cue.
     (Placed after .cue so the display:none wins the cascade over the base display:inline-flex.) */
  @media (max-height: 700px){
    .hero-text{ --orb-clear: 9.5vmin; }
    .hero-text h1{ font-size:clamp(20px,3.2vw,28px); }
    .hero-text .cta{ margin-top:clamp(14px,2.4vh,24px); }
    .cue{ display:none; }
  }

  /* ---------------- CONTENT ---------------- */
  .oh-section{ max-width:1120px; margin:0 auto; padding:clamp(90px,13vh,190px) clamp(22px,4vw,40px); }
  .oh-section .chip-row{ margin:0 0 26px; }
  .split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
  .split h2{ margin:0; font-size:clamp(30px,3.6vw,50px); line-height:1.08; letter-spacing:-.026em; font-weight:500; text-wrap:balance; }
  .split p{ margin:22px 0 0; color:var(--muted); font-size:clamp(16px,1.15vw,18px); line-height:1.62; max-width:52ch; }
  .learn{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; font-size:15px; color:var(--ink); transition:color .2s var(--ease); }
  .learn svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
  .learn:hover{ color:var(--green); } .learn:hover svg{ transform:translateX(3px); }
  /* no real border (a translucent 1px border lets the sharp photo show through on hover, past the
     blur overlay's clip) — use an inset ring for rest-state definition; the hover overlay covers it */
  .frame{ position:relative; display:block; border-radius:26px; overflow:hidden; aspect-ratio:4/5; background:var(--faint);
    background-clip:padding-box;
    box-shadow:0 40px 90px rgba(30,24,14,.14), inset 0 0 0 1px rgba(23,20,13,.09); }
  /* hover a section photo -> it blurs and offers "Explore <section>" -> that section's page */
  .frame-explore{ position:absolute; inset:-10px; z-index:2; border-radius:inherit;
    display:flex; align-items:center; justify-content:center; gap:9px;
    color:#fff; font-size:16px; font-weight:540; letter-spacing:-.008em;
    background:rgba(18,14,10,.30);
    -webkit-backdrop-filter:blur(9px) saturate(1.04); backdrop-filter:blur(9px) saturate(1.04);
    opacity:0; transition:opacity .32s var(--ease); }
  a.frame:hover .frame-explore, a.frame:focus-visible .frame-explore{ opacity:1; }
  .frame-explore svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
  a.frame:hover .frame-explore svg{ transform:translateX(4px); }
  a.frame:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
  .frame.terr{ background-image:url('../images/v4/terraced-1440.jpg'); background-size:cover; background-position:center; }
      .frame.wide{ aspect-ratio:5/4; }
  /* content-section benefit list — green dots, ink-2 text (matches the brand) */
  .oh-points{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .oh-points li{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--ink-2,#57534A); letter-spacing:-.005em; }
  .oh-points li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green,#2E7A57);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--green,#2E7A57) 20%, transparent); flex:none; }
  .stat-row{ margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); border-top:1px solid var(--hairline); padding-top:30px; }
  .stat-row .s{ font-size:clamp(26px,2.6vw,36px); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .stat-row .k{ margin-top:7px; color:var(--muted); font-size:14px; line-height:1.45; text-wrap:balance; max-width:15ch; }

  /* Revenue proof bento — a compact economic story made from the same quiet paper,
     landscape, and green used across the page. Dedicated class names keep the global
     .frame parallax/gallery treatment from wrapping or mutating these grid children. */
  .revenue-proof{ max-width:1200px; scroll-margin-top:86px; }
  .revenue-proof-head{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(300px,.78fr);
    gap:clamp(22px,3vw,46px); align-items:end; margin-bottom:clamp(34px,4.5vw,56px); }
  .revenue-proof-head .chip-row{ margin-bottom:20px; }
  .revenue-proof-head h2{ margin:0; max-width:14ch; font-size:clamp(36px,4.4vw,58px);
    line-height:1.01; letter-spacing:-.037em; font-weight:500; text-wrap:balance; }
  .revenue-proof-head > p{ margin:0 0 4px; max-width:52ch; color:var(--muted);
    font-size:clamp(15px,1.15vw,18px); line-height:1.58; }
  .revenue-bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:"story story story story story story story image image image image image"
                        "stream stream stream stream stream stream stream stream stream stream stream stream";
    gap:14px; }
  .revenue-bento-card{ position:relative; min-width:0; overflow:hidden; border-radius:clamp(22px,2.3vw,30px);
    background:color-mix(in srgb,var(--ink) 6.5%,var(--paper)); box-shadow:none; }
  [data-theme="dark"] .revenue-bento-card{ background:color-mix(in srgb,var(--ink) 8%,var(--paper)); }
  .revenue-story{ grid-area:story; min-height:480px; display:flex; flex-direction:column;
    padding:clamp(28px,4vw,52px); }
  .revenue-story-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .revenue-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2,var(--muted)); }
  .revenue-kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 17%,transparent); }
  .revenue-story h3{ max-width:13ch; margin:clamp(38px,5vw,60px) 0 16px; font-size:clamp(28px,3.2vw,42px);
    line-height:1.04; letter-spacing:-.03em; font-weight:500; text-wrap:balance; }
  .revenue-story > p{ max-width:48ch; margin:0 0 clamp(30px,3.2vw,44px); color:var(--muted);
    font-size:15px; line-height:1.58; }
  .revenue-example{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
    margin-top:auto; padding:0; border:0; border-radius:0; background:transparent; }
  .revenue-example-stat{ display:flex; min-width:0; min-height:94px; flex-direction:column; justify-content:space-between;
    gap:10px; padding:14px; border-radius:14px; background:var(--paper); box-shadow:none; }
  .revenue-example-stat small{ color:var(--muted); font-size:10.5px; line-height:1.25; }
  .revenue-example-stat b{ font-family:'Söhne',var(--sans); color:var(--ink); font-size:clamp(18px,1.65vw,25px);
    line-height:1; letter-spacing:-.018em; font-weight:500; font-variant-numeric:lining-nums proportional-nums; white-space:nowrap; }
  .revenue-example-stat em{ color:var(--muted); font-size:9.5px; line-height:1.2; font-style:normal; }
  .revenue-example-stat.is-fee{ background:var(--green-tint,#EAF2EC); box-shadow:none; }
  .revenue-example-stat.is-fee b,.revenue-example-stat.is-more b{ color:var(--green); }
  body.al26 .revenue-action{ display:inline-flex; align-items:center; gap:8px; flex:none; border-radius:999px;
    padding:10px 16px; background:var(--ink); color:var(--paper); border:0;
    font-size:13px; font-weight:500;
    transition:transform .2s var(--ease),opacity .2s var(--ease); }
  .revenue-action svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
  body.al26 .revenue-action:hover{ color:var(--paper); transform:translateY(-1px); opacity:.9; }
  .revenue-action:hover svg{ transform:translateX(2px); }
  body.al26 .revenue-action:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

  .revenue-image{ grid-area:image; min-height:480px; color:#fff; background:#637566; }
  .revenue-image-art{ position:absolute; inset:0; background-image:url('../images/v4/crossing-1440.jpg');
    background-size:cover; background-position:center; transform:scale(1.025); filter:blur(0);
    transition:transform .7s var(--ease),filter .38s var(--ease); }
  .revenue-image:hover .revenue-image-art,.revenue-image:focus-within .revenue-image-art{
    transform:scale(1.065); filter:blur(8px) saturate(.92); }
  .revenue-image::before{ content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg,rgba(12,18,13,.76) 0%,rgba(12,18,13,.12) 40%,rgba(12,18,13,.06) 56%,rgba(12,18,13,.72) 100%); }
  .revenue-image::after{ content:""; position:absolute; left:0; right:0; top:0; z-index:1; height:34%;
    background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 76%,transparent),transparent);
    mix-blend-mode:screen; opacity:.38; pointer-events:none; }
  [data-theme="dark"] .revenue-image::after{ opacity:.12; }
  .revenue-image-copy{ position:relative; z-index:2; display:flex; flex-direction:column;
    justify-content:space-between; height:100%; padding:clamp(28px,3.4vw,44px); }
  .revenue-image-label{ display:inline-flex; align-self:flex-start; padding:6px 11px; border-radius:999px;
    color:rgba(255,255,255,.84); border:1px solid rgba(255,255,255,.28); background:rgba(8,17,12,.18);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:12px; }
  .revenue-hero-number{ display:flex; align-items:flex-start; margin-top:auto; font-family:'Söhne',var(--sans);
    font-size:clamp(68px,7.8vw,108px); line-height:.78; letter-spacing:0; font-weight:500;
    font-variant-numeric:lining-nums proportional-nums; font-feature-settings:"kern" 1,"tnum" 0;
    text-shadow:0 3px 24px rgba(0,0,0,.25); }
  .revenue-hero-value{ letter-spacing:-.012em; }
  .revenue-hero-symbol{ margin-left:.018em; font-size:.68em; line-height:.9; transform:translateY(.055em); }
  .revenue-image-proof{ position:relative; isolation:isolate; margin-top:auto; max-width:29ch; }
  .revenue-image-proof::before{ content:""; position:absolute; z-index:-1; inset:-78px -110px -72px -74px;
    background:rgba(9,15,11,.12); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
    -webkit-mask-image:radial-gradient(ellipse 76% 78% at 31% 54%,#000 0%,rgba(0,0,0,.96) 30%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.12) 82%,transparent 96%);
            mask-image:radial-gradient(ellipse 76% 78% at 31% 54%,#000 0%,rgba(0,0,0,.96) 30%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.12) 82%,transparent 96%); }
  .revenue-image-copy p{ margin:20px 0 0; max-width:27ch; color:rgba(255,255,255,.84);
    font-size:14px; line-height:1.45; }
  .revenue-gallery-hover{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
    color:#fff; background:rgba(12,18,13,.25); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
  body.al26 .revenue-gallery-link{ display:inline-flex; align-items:center; gap:8px; border-radius:999px;
    padding:11px 16px; color:#17140D; background:rgba(251,250,247,.94); box-shadow:0 14px 32px rgba(0,0,0,.18);
    font-size:13px; font-weight:500; pointer-events:none; transform:translateY(7px);
    transition:transform .24s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .24s var(--ease); }
  .revenue-gallery-link > span{ transition:transform .22s var(--ease); }
  .revenue-image:hover .revenue-gallery-hover,.revenue-image:focus-within .revenue-gallery-hover{
    opacity:1; }
  .revenue-image:hover .revenue-gallery-link,.revenue-image:focus-within .revenue-gallery-link{
    pointer-events:auto; transform:none; }
  body.al26 .revenue-gallery-link:hover,body.al26 .revenue-gallery-link:focus-visible{
    color:var(--paper); background:var(--ink); box-shadow:0 18px 38px rgba(0,0,0,.24);
    transform:translateY(-2px) scale(1.025); }
  .revenue-gallery-link:hover > span,.revenue-gallery-link:focus-visible > span{ transform:translate(2px,-1px); }
  body.al26 .revenue-gallery-link:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

  .revenue-stream{ grid-area:stream; display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.7fr);
    gap:clamp(26px,4vw,58px); align-items:center; min-height:216px; padding:clamp(26px,3vw,36px); }
  .revenue-stream-copy h3{ margin:10px 0 0; max-width:15ch; font-size:clamp(25px,2.7vw,34px);
    line-height:1.03; letter-spacing:-.032em; font-weight:500; text-wrap:balance; }
  .revenue-stream-copy p{ margin:12px 0 0; max-width:36ch; color:var(--muted); font-size:13px; line-height:1.45; }
  .revenue-streams{ min-width:0; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
  .revenue-stream-lane{ width:100%; min-width:0; overflow:hidden; padding:7px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
  .revenue-stream-track{ --stream-distance:50%; display:flex; width:max-content; will-change:transform;
    animation:revenueStreamLeft 48s linear infinite; }
  .revenue-stream-lane:nth-child(2) .revenue-stream-track{ animation-direction:reverse; animation-duration:58s; }
  .revenue-stream-lane:nth-child(3) .revenue-stream-track{ animation-duration:66s; }
  .revenue-stream-set{ display:flex; flex:none; align-items:center; gap:9px; padding-right:9px; }
  .revenue-stream-pill{ position:relative; z-index:1; flex:none; padding:8px 12px; border-radius:999px;
    background:var(--paper); box-shadow:inset 0 0 0 1px var(--hairline); color:var(--ink-2,var(--ink));
    font-size:12px; white-space:nowrap; transform:translateZ(0);
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease); }
  .revenue-stream-pill.is-accent{ background:var(--ink); color:var(--paper); box-shadow:none; }
  .revenue-stream-pill:hover{ z-index:2; transform:translateY(-2px) scale(1.07); box-shadow:none; }
  @keyframes revenueStreamLeft{ to{ transform:translate3d(calc(var(--stream-distance) * -1),0,0); } }

  /* Query-driven review surface: ?compare=image replaces the full bento with the two
     image compositions in the real page context, so this remains a design choice rather
     than shipping two competing treatments to ordinary visitors. */
  .revenue-image-comparison{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .show-revenue-image-comparison .revenue-image-comparison{ display:grid; }
  .show-revenue-image-comparison .revenue-bento{ display:none; }
  .revenue-image-option{ grid-area:auto; min-height:650px; }
  .revenue-option-badge{ position:absolute; z-index:4; top:22px; right:22px; display:inline-flex;
    align-items:center; gap:7px; border-radius:999px; padding:7px 11px; font-size:11px; font-weight:600;
    color:#17140D; background:rgba(251,250,247,.92); box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .revenue-option-badge b{ display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%;
    color:#fff; background:#17140D; font-size:10px; }
  .revenue-image-option.is-fade{ color:var(--ink); background:color-mix(in srgb,var(--ink) 3.4%,var(--paper)); }
  [data-theme="dark"] .revenue-image-option.is-fade{ background:color-mix(in srgb,var(--ink) 5%,var(--paper)); }
  .revenue-image-option.is-fade .revenue-image-art{ inset:auto 0 0; height:66%; background-position:center 48%;
    transform:scale(1.035);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 12%,#000 47%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 12%,#000 47%); }
  .revenue-image-option.is-fade:hover .revenue-image-art,
  .revenue-image-option.is-fade:focus-within .revenue-image-art{ transform:scale(1.075); }
  .revenue-image-option.is-fade::before{ background:linear-gradient(180deg,
    color-mix(in srgb,var(--paper) 100%,transparent) 0%,
    color-mix(in srgb,var(--paper) 100%,transparent) 25%,
    color-mix(in srgb,var(--paper) 76%,transparent) 44%,transparent 68%); }
  .revenue-image-option.is-fade::after{ display:none; }
  .revenue-image-option.is-fade .revenue-image-copy{ justify-content:flex-start; }
  .revenue-image-option.is-fade .revenue-image-label{ color:var(--ink-2,var(--muted)); border-color:var(--hairline);
    background:color-mix(in srgb,var(--paper) 86%,transparent); }
  .revenue-image-option.is-fade .revenue-image-proof{ margin-top:clamp(48px,6vw,80px); }
  .revenue-image-option.is-fade .revenue-image-proof::before{ display:none; }
  .revenue-image-option.is-fade .revenue-hero-number{ margin-top:0; color:var(--ink); text-shadow:none; }
  .revenue-image-option.is-fade .revenue-image-copy p{ color:var(--muted); }
  .revenue-image-option.is-fade .revenue-gallery-hover{ top:34%; background:rgba(12,18,13,.18); }
  @media (prefers-reduced-motion: reduce){
    .revenue-stream-track{ animation:none !important; transform:none !important; }
    .revenue-stream-set[aria-hidden="true"]{ display:none; }
    .revenue-image-art{ transition:none; }
  }
  @media (max-width:900px){
    .revenue-proof-head{ grid-template-columns:1fr; align-items:start; }
    .revenue-proof-head > p{ max-width:56ch; }
    .revenue-bento{ grid-template-columns:1fr;
      grid-template-areas:"story" "image" "stream"; }
    .revenue-image{ min-height:480px; }
    .revenue-image-comparison{ grid-template-columns:1fr; }
    .revenue-image-option{ min-height:620px; }
  }
  @media (max-width:620px){
    .revenue-bento{ grid-template-columns:1fr; grid-template-areas:"story" "image" "country" "fee" "stream"; }
    .revenue-story{ min-height:0; }
    .revenue-story h3{ margin-top:38px; }
    .revenue-example{ grid-template-columns:1fr 1fr; }
    .revenue-example-stat.is-fee{ grid-column:1/-1; min-height:84px; }
    .revenue-image{ min-height:430px; }
    .revenue-small{ min-height:180px; }
    .revenue-stream{ grid-template-columns:1fr; min-height:0; padding-inline:0; }
    .revenue-stream-copy{ padding:4px 26px 14px; }
    .revenue-stream-copy h3{ max-width:14ch; }
    .revenue-streams{ padding-bottom:6px; }
  }

  /* Autopilot search landscape — a living decision map rather than another
     image split or nested card grid. The sparse plotting field keeps the page
     airy while making continuous search, guardrails, and approval tangible. */
  .ap-landscape{ max-width:1200px; }
  .ap-landscape-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);
    gap:clamp(34px,6vw,88px); align-items:end; margin-bottom:clamp(38px,5vw,64px); }
  .ap-landscape-head .chip-row{ margin-bottom:22px; }
  .ap-landscape-head h2{ margin:0; max-width:14ch; font-size:clamp(38px,4.7vw,62px);
    line-height:1.01; letter-spacing:-.04em; font-weight:500; text-wrap:balance; }
  .ap-landscape-intro p{ margin:0; max-width:50ch; color:var(--muted);
    font-size:clamp(15px,1.15vw,18px); line-height:1.58; }
  .ap-landscape-intro .learn{ margin-top:22px; padding:11px 17px; border-radius:999px;
    background:var(--ink); color:var(--paper); font-size:14px; font-weight:500;
    transition:transform .2s var(--ease),opacity .2s var(--ease); }
  .ap-landscape-intro .learn:hover{ color:var(--paper); opacity:.9; transform:translateY(-1px); }
  .ap-landscape-intro .learn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
  .ap-landscape-field{ --ap-pad:clamp(24px,3.2vw,42px); position:relative; min-height:460px;
    overflow:hidden; border-radius:clamp(24px,3vw,36px);
    background:
      radial-gradient(circle at 22% 51%,color-mix(in srgb,var(--green) 11%,transparent),transparent 24%),
      linear-gradient(color-mix(in srgb,var(--ink) 4.5%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in srgb,var(--ink) 4.5%,transparent) 1px,transparent 1px),
      color-mix(in srgb,var(--ink) 5.8%,var(--paper));
    background-size:auto,64px 64px,64px 64px,auto; isolation:isolate; }
  [data-theme="dark"] .ap-landscape-field{
    background:
      radial-gradient(circle at 22% 51%,color-mix(in srgb,var(--green) 16%,transparent),transparent 25%),
      linear-gradient(color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1px),
      color-mix(in srgb,var(--ink) 8%,var(--paper));
    background-size:auto,64px 64px,64px 64px,auto; }
  .ap-landscape-field::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 48%,transparent),transparent 26% 78%,
      color-mix(in srgb,var(--paper) 18%,transparent)); opacity:.48; }
  .ap-landscape-objective{ position:absolute; z-index:4; left:var(--ap-pad); top:50%; width:min(220px,20%);
    transform:translateY(-50%); }
  .ap-landscape-objective span{ display:inline-flex; align-items:center; gap:10px; }
  .ap-landscape-objective span::before{ content:""; display:block; flex:0 0 auto; width:9px; height:9px;
    border-radius:50%; background:var(--green);
    outline:7px solid color-mix(in srgb,var(--green) 13%,transparent); }
  .ap-landscape-objective span,.ap-route-label small{
    color:var(--muted); font-size:11px; letter-spacing:.025em; }
  .ap-landscape-objective p{ margin:8px 0 0; color:var(--ink); font-size:clamp(16px,1.5vw,20px);
    line-height:1.35; letter-spacing:-.015em; text-wrap:balance; }
  .ap-landscape-paths{ position:absolute; z-index:2; inset:0; width:100%; height:100%;
    overflow:visible; pointer-events:none; }
  .ap-landscape-paths path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round;
    stroke-linejoin:round; stroke-width:2; pathLength:1; stroke-dasharray:none; stroke-dashoffset:0; }
  .ap-trunk{ stroke:color-mix(in srgb,var(--green) 72%,var(--muted)); }
  .ap-landscape-paths [data-ap-route="stopped"]{ stroke:#A79B87; }
  .ap-landscape-paths [data-ap-route="running"]{
    stroke:color-mix(in srgb,var(--green) 47%,var(--muted)); stroke-dasharray:.025 .022; }
  .ap-landscape-paths [data-ap-route="winner"]{ stroke:var(--green); }
  .ap-route-label{ --label-anchor:-50%; --label-shift:0px; position:absolute; z-index:5; display:flex; flex-direction:column; gap:5px;
    width:150px; min-width:150px; padding:10px 12px 11px; text-align:left; color:var(--ink);
    appearance:none; border:0; border-radius:13px;
    background:var(--paper);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transform:translateY(calc(var(--label-anchor) + var(--label-shift))); transform-origin:left center;
    transition:transform .28s var(--ease),background .28s var(--ease),opacity .35s var(--ease); }
  .ap-route-label::before{ content:""; position:absolute; left:-4px; top:50%; width:7px; height:7px;
    border-radius:50%; background:currentColor; transform:translate(-50%,-50%); }
  .ap-route-label small{ line-height:1.25; }
  .ap-route-label strong{ font-size:13px; line-height:1.2; font-weight:520; letter-spacing:-.005em; }
  .ap-route-label.is-stopped{ left:calc(58.5% + 4px); top:20.238095%; color:#756A59; }
  .ap-route-label.is-running{ left:calc(69% + 4px); top:50%; color:var(--ink-2); }
  .ap-route-label.is-winner{ left:calc(79% + 4px); right:auto; top:79.761905%; color:var(--green); }
  .ap-route-label:hover,.ap-route-label:focus-visible{
    background:color-mix(in srgb,var(--paper) 98%,transparent); }
  .ap-route-label:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

  .ap-landscape.is-pending:not(.is-sequenced):not(.is-complete) .ap-landscape-paths path{ stroke-dasharray:1; stroke-dashoffset:1; }
  .ap-landscape.is-pending:not(.is-complete) .ap-route-label{ opacity:.28; }
  .ap-landscape.is-sequenced .ap-landscape-paths path{
    stroke-dasharray:1; animation:apPathDraw 1.15s var(--ease) forwards; animation-iteration-count:1; }
  .ap-landscape.is-sequenced .ap-landscape-paths .ap-trunk{ animation-duration:.72s; }
  .ap-landscape.is-sequenced .ap-landscape-paths [data-ap-route="stopped"]{ animation-delay:.5s; }
  .ap-landscape.is-sequenced .ap-landscape-paths [data-ap-route="running"]{ animation-delay:.75s; }
  .ap-landscape.is-sequenced .ap-landscape-paths [data-ap-route="winner"]{ animation-delay:1s; }
  .ap-landscape.is-paused .ap-landscape-paths path{ animation-play-state:paused; }
  .ap-landscape[data-ap-step="1"] .ap-route-label.is-stopped,
  .ap-landscape[data-ap-step="2"] .ap-route-label.is-stopped,
  .ap-landscape[data-ap-step="2"] .ap-route-label.is-running,
  .ap-landscape[data-ap-step="3"] .ap-route-label{ opacity:1; }
  .ap-landscape.is-complete .ap-route-label{ opacity:1; }
  .ap-landscape.is-complete .ap-landscape-paths path{ stroke-dashoffset:0; }
  .ap-landscape.is-complete .ap-landscape-paths .ap-trunk,
  .ap-landscape.is-complete .ap-landscape-paths [data-ap-route="stopped"],
  .ap-landscape.is-complete .ap-landscape-paths [data-ap-route="winner"]{ stroke-dasharray:none; }
  .ap-landscape.is-complete .ap-landscape-paths [data-ap-route="running"]{ stroke-dasharray:.025 .022; }
  @keyframes apPathDraw{ to{ stroke-dashoffset:0; } }

  @media (max-width:700px){
    .ap-landscape-head{ grid-template-columns:1fr; align-items:start; gap:24px; }
    .ap-landscape-head h2{ font-size:clamp(36px,11vw,52px); }
    .ap-landscape-intro p{ max-width:56ch; }
    .ap-landscape-field{ --ap-pad:24px; min-height:680px; background-size:auto,48px 48px,48px 48px,auto; }
    .ap-landscape-field::after{ background:linear-gradient(180deg,
      color-mix(in srgb,var(--paper) 42%,transparent),transparent 24% 80%,
      color-mix(in srgb,var(--paper) 20%,transparent)); }
    .ap-landscape-objective{ top:34px; left:var(--ap-pad); width:calc(100% - 48px); transform:none; }
    .ap-landscape-paths{ top:92px; left:-162px; width:680px; height:390px;
      transform:rotate(90deg) scale(1.1,1.18); transform-origin:center; }
    .ap-route-label{ --label-anchor:-50%; width:auto; min-width:148px; }
    .ap-route-label.is-stopped{ left:auto; right:calc(100% - 314.964px + 4px); top:51.555882%; }
    .ap-route-label.is-stopped::before{ left:auto; right:-4px; transform:translate(50%,-50%); }
    .ap-route-label.is-running{ left:182px; top:63.105882%; }
    .ap-route-label.is-winner{ left:45.036px; right:auto; top:74.105882%; }
    .ap-route-label.is-winner::before{ left:-4px; right:auto; transform:translate(-50%,-50%); }
  }
  @media (max-width:390px){
    .ap-landscape-paths{ transform:rotate(90deg) scale(1.1,.95); }
    .ap-route-label{ min-width:132px; padding-inline:10px; }
    .ap-route-label.is-stopped{ left:auto; right:calc(100% - 288.268px + 4px); }
    .ap-route-label.is-running{ left:182px; }
    .ap-route-label.is-winner{ left:71.732px; }
  }
  @media (max-width:340px){
    .ap-landscape-paths{ transform:rotate(90deg) scale(1.1,.81); }
    .ap-route-label{ min-width:120px; max-width:120px; padding:9px 8px; }
    .ap-route-label small{ font-size:10px; }
    .ap-route-label strong{ font-size:12px; }
    .ap-route-label.is-stopped{ left:auto; right:calc(100% - 272.016px + 4px); }
    .ap-route-label.is-running{ left:auto; right:calc(100% - 178px + 4px); }
    .ap-route-label.is-running::before{ left:auto; right:-4px; transform:translate(50%,-50%); }
    .ap-route-label.is-winner{ left:87.984px; }
  }
  @media (prefers-reduced-motion: reduce){
    .ap-landscape-paths path{ animation:none !important; stroke-dashoffset:0 !important; }
    .ap-route-label{ transition:none; }
  }

  .ladder{ margin-top:26px; }
  .ladder .row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--hairline); }
  .ladder .row:last-child{ border-bottom:0; }
  .ladder .row .m{ color:var(--ink-2); font-size:15px; } .ladder .row .m span{ color:var(--muted); }
  .ladder .row b{ font-weight:560; font-size:15px; font-variant-numeric:tabular-nums; }
  .rule{ height:1px; background:var(--hairline); max-width:1120px; margin:0 auto; }

  /* scroll build-in reveals (content sections only — never the hero) */
  .v4-anim:not(.reveal-unavailable) main .oh-section .chip-row,
  .v4-anim:not(.reveal-unavailable) main .oh-section h2,
  .v4-anim:not(.reveal-unavailable) main .split p,
  .v4-anim:not(.reveal-unavailable) main .oh-section .learn,
  .v4-anim:not(.reveal-unavailable) main .frame,
  .v4-anim:not(.reveal-unavailable) main .stat-row > div,
  .v4-anim:not(.reveal-unavailable) main .revenue-bento-card,
  .v4-anim:not(.reveal-unavailable) main .ladder .row,
  .v4-anim:not(.reveal-unavailable) main .trio > div,
  .v4-anim:not(.reveal-unavailable) main .closer h2,
  .v4-anim:not(.reveal-unavailable) main .closer .cta,
  .v4-anim:not(.reveal-unavailable) main [data-scroll-reveal]{
    opacity:0; transform:translateY(20px);
    transition:opacity .7s var(--ease) var(--rd,0s), transform .8s var(--ease) var(--rd,0s);
  }
  .is-in{ opacity:1 !important; transform:none !important; }
  main .frame{ will-change:background-position, filter; }
  @media (prefers-reduced-motion: reduce){
    main .oh-section .chip-row, main .oh-section h2, main .split p, main .oh-section .learn,
    main .frame, main .stat-row > div, main .revenue-bento-card, main .ladder .row, main .oh-points li, main .trio > div,
    main .closer h2, main .closer .cta, main [data-scroll-reveal]{
      opacity:1 !important; transform:none !important;
    }
  }
  .trio-head h2{ font-size:clamp(28px,3.4vw,46px); line-height:1.1; letter-spacing:-.026em; font-weight:500; margin:0; max-width:20ch; text-wrap:balance; }
  .trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,56px); margin-top:clamp(48px,6vw,84px); }
  .trio h3{ margin:0 0 12px; font-size:19px; font-weight:540; letter-spacing:-.01em; }
  .trio .n{ font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.08em; margin:0 0 18px; }
  .trio p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; }
  .calc-lede{ color:var(--muted); font-size:clamp(16px,1.15vw,18px); line-height:1.6; max-width:56ch; margin:22px 0 0; }
  .calc{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,72px); align-items:center; }
  .calc-inputs{ display:flex; flex-direction:column; gap:30px; }
  .calc-field{ display:block; }
  .calc-label{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:12px; }
  .calc-label b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
  .calc-inputwrap{ display:flex; align-items:center; gap:6px; border-bottom:1.5px solid var(--hairline-2); padding-bottom:10px; transition:border-color .2s var(--ease); }
  .calc-inputwrap:focus-within{ border-color:var(--ink); }
  .calc-pre{ color:var(--muted); font-size:clamp(22px,2.2vw,28px); }
  #calc-arr{ border:0; background:transparent; color:var(--ink); font-size:clamp(22px,2.2vw,28px); font-weight:500; letter-spacing:-.02em; width:100%; font-variant-numeric:tabular-nums; outline:none; }
  #calc-adopt{ width:100%; accent-color:var(--green); height:4px; cursor:pointer; }
  .calc-out{ border:1px solid var(--hairline); border-radius:24px; padding:clamp(26px,3vw,40px); }
  .calc-out-label{ font-size:14px; color:var(--muted); }
  .calc-out-num{ font-size:clamp(40px,5.5vw,68px); font-weight:500; letter-spacing:-.03em; line-height:1; margin:10px 0 14px; font-variant-numeric:tabular-nums; }
  .calc-out-sub{ color:var(--muted); font-size:15px; line-height:1.55; } .calc-out-sub span{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .calc-out .learn{ margin-top:22px; }
  @media (max-width:860px){ .calc{ grid-template-columns:1fr; } }
  /* closer — the shared dark CTA band (matches the autopilot page component) */
  .closer{ padding:clamp(40px,6vh,86px) clamp(22px,4vw,40px); }
  .closer-band{ position:relative; overflow:hidden; max-width:1120px; margin:0 auto; text-align:center;
    border-radius:clamp(24px,3vw,36px); background:#0B1D16; color:#fff;
    padding:clamp(56px,7vw,110px) clamp(28px,5vw,80px); box-shadow:0 30px 80px rgba(23,20,13,.20); }
  [data-theme="dark"] .closer-band{ background:#0A1712; box-shadow:0 30px 80px rgba(0,0,0,.5); }
  .closer-kicker{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#9BD1AE; font-size:13px; font-weight:500; }
  .closer-kicker .dot{ width:7px; height:7px; border-radius:50%; background:#9BD1AE; box-shadow:0 0 0 4px rgba(155,209,174,.18); flex:none; }
  .closer h2{ font-size:clamp(30px,4vw,52px); line-height:1.05; letter-spacing:-.028em; font-weight:500; color:#fff; margin:18px auto 0; max-width:18ch; text-wrap:balance; }
  .closer p{ color:rgba(255,255,255,.74); max-width:52ch; margin:18px auto 0; font-size:clamp(15px,1.15vw,17px); line-height:1.6; }
  .closer .cta{ margin-top:34px; justify-content:center; }
  .closer .cta .primary{ background:#fff; color:#0B1D16; }
  .closer .cta .primary:hover{ background:var(--green); color:#06140D; box-shadow:0 10px 24px rgba(0,0,0,.28); }
  .closer .cta .ghost{ color:rgba(255,255,255,.82); }
  .closer .cta .ghost::after{ background:rgba(255,255,255,.85); }
  .closer .cta .ghost:hover{ color:#fff; }
  .foot{ border-top:1px solid var(--hairline); max-width:1120px; margin:0 auto; padding:clamp(48px,6vw,84px) clamp(22px,4vw,40px) 36px; }
  .foot-top{ display:grid; grid-template-columns:1.4fr 3fr; gap:clamp(30px,5vw,72px); }
  .foot-brand .brand{ font-size:16px; }
  .foot-brand p{ color:var(--muted); font-size:14px; margin:14px 0 0; max-width:26ch; line-height:1.5; }
  .foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .foot-cols h5{ margin:0 0 12px; font-size:13px; font-weight:560; color:var(--ink); }
  .foot-cols a{ display:block; color:var(--muted); font-size:14px; padding:5px 0; transition:color .18s var(--ease); }
  .foot-cols a:hover{ color:var(--ink); }
  .foot-bottom{ display:flex; justify-content:space-between; margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--hairline); color:var(--muted); font-size:13px; }
  @media (max-width:860px){ .foot-top{ grid-template-columns:1fr; } .foot-cols{ grid-template-columns:repeat(2,1fr); } }

  @media (max-width:860px){
    .nav-mid{ display:none; }
    .split{ grid-template-columns:1fr; }
    /* Phones: lead with the copy, not the painting. The frame always drops BELOW the copy and
       shrinks to a short banner — a slim closing visual instead of a tall block that pushes the
       point down. order:2 must sit on the actual grid item: shell.js wraps every .frame in a
       .art-figure-wrap (for the gallery credit), so the wrapper — not the .frame — is the child
       of .split; we order BOTH so it works before and after that wrap runs. The aspect-ratio
       goes on .frame; `.split .frame` (0,2,0) matches `.frame.wide` and, being later, wins, so
       the `wide` frames stop rendering at their ~5/4 desktop crop here too. */
    .split .frame, .split .art-figure-wrap{ order:2; }
    .split .frame{ aspect-ratio:16/6; }
    .trio{ grid-template-columns:1fr; gap:36px; }
    .card-cue{ display:none; }
    /* phones: let the oasis headline use the room instead of wrapping skinny */
    /* definite width (not just max-width) so the absolutely-positioned copy stops
       shrink-wrapping narrow and the headline breaks at the container edge instead
       of collapsing into a skinny word-per-line stack */
    .card-copy{ width:94vw; max-width:520px; }
    .card-tag{ width:100%; font-size:clamp(34px,9vw,58px); text-wrap:balance; }
    .card-sub{ max-width:34ch; }
  }

  

  /* "up to" eyebrow inside a stat number + the explain-the-math tooltip */
  .stat-row .s small{ display:block; font-size:12px; font-weight:500; color:var(--muted,#8a8578); letter-spacing:.01em; margin:0 0 3px; }
  .tip{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-left:6px; border-radius:50%;
        border:1px solid var(--hairline,rgba(0,0,0,.22)); color:var(--muted,#8a8578); font-size:10.5px; font-weight:600; line-height:1;
        cursor:help; vertical-align:super; position:relative; transition:background .18s,color .18s,border-color .18s,transform .18s; }
  .tip:hover,.tip:focus-visible{ background:var(--ink,#17140d); color:var(--paper,#fbfaf7); border-color:var(--ink,#17140d); outline:none; transform:translateY(-1px); }
  .tip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 13px); left:50%; transform-origin:bottom center;
        transform:translateX(calc(-50% + var(--tip-shift,0px))) translateY(7px) scale(.96);
        width:max-content; max-width:min(340px,86vw); white-space:normal; background:var(--ink,#17140d); color:var(--paper,#fbfaf7); font-size:12.5px; font-weight:400; line-height:1.55; letter-spacing:.004em;
        text-align:left; padding:12px 14px; border-radius:12px; box-shadow:0 18px 40px -10px rgba(0,0,0,.36), 0 3px 10px rgba(0,0,0,.14);
        opacity:0; visibility:hidden; transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.28,.5,1), visibility 0s .22s; z-index:60; pointer-events:none; }
  .tip::before{ content:""; position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(7px) rotate(45deg);
        width:10px; height:10px; background:var(--ink,#17140d); border-radius:2px; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.28,.5,1), visibility 0s .22s; z-index:60; }
  .tip:hover::after,.tip:focus-visible::after{ opacity:1; visibility:visible; transform:translateX(calc(-50% + var(--tip-shift,0px))) translateY(0) scale(1); transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.28,.5,1); }
  .tip:hover::before,.tip:focus-visible::before{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) rotate(45deg); transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.28,.5,1); }
  /* flipboard ladder — non-base rows flip to new markets (item: "make it feel alive") */
  .ladder .row{ perspective:640px; }
  .ladder .row .m, .ladder .row b{ display:inline-block; transform-origin:center top; backface-visibility:hidden;
    transition:transform .30s var(--ease), opacity .30s var(--ease); will-change:transform; }
  .ladder .row.rp-flip .m, .ladder .row.rp-flip b{ transform:rotateX(-88deg); opacity:0; }
  /* minimal countdown bar — fills between market flips */
  .ladder-timer{ display:flex; align-items:center; gap:10px; margin-top:16px; }
  .ladder-timer .lt-track{ position:relative; flex:1; height:2px; border-radius:2px; background:var(--hairline); overflow:hidden; }
  .ladder-timer .lt-track i{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:var(--green,#2E7A57); border-radius:2px; }
  .ladder-timer.run .lt-track i{ animation:ladderFill var(--cyc,3400ms) linear both; }
  .ladder-timer .lt-label{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#8a8578); white-space:nowrap; }
  @keyframes ladderFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  @media (prefers-reduced-motion: reduce){ .ladder-timer{ display:none; } }
  
/* ---- rebuild: marquee phase ----------------------------------------------
   The reference capture caught the Merchant-of-Record lanes ~4.3s into their
   loop. Seeding the same phase makes the rebuilt page line up with it (the
   lanes still scroll normally from there). */
.revenue-stream-track{ animation-delay:-4.3s; }