/* Simple: approved October 3, 2026. Fewer words, one ending, glass surfaces.
   Built on the approved Spectral Flow system. */

:root{
  --sv-fill:color-mix(in srgb,var(--panel) 70%,var(--ground));
  --sv-chip:color-mix(in srgb,var(--line) 70%,var(--panel));
  --t-time:var(--cyan);--t-money:var(--mint);--t-staff:var(--lilac);
  /* Values the approved site uses as literals, named once here. */
  --surface-top:#15161ecc;--surface-bottom:#101117cc;
  --text-soft:#d0d1db;--text-bright:#d9dae4;
  --rule-faint:#1d1e27;--link-ink:#dbe5e4;--link-rule:#3a3c4b;
}

/* ---------- Review bar ---------- */
.prototype-bar{align-items:center;flex-wrap:wrap;position:relative;z-index:60}
.prototype-bar b{color:var(--ink);font-weight:600}

/* ---------- Hero: motto, two short lines, one button ---------- */
.simple .hero .actions{margin-top:30px}

/* ---------- Example tiles ---------- */
.ex-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.ex-tile{display:flex;flex-direction:column;padding:clamp(20px,2vw,26px);border-radius:16px;background:linear-gradient(180deg,var(--surface-top),var(--surface-bottom));border:1px solid var(--line)}
.ex-tile .tag{align-self:flex-start;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:500;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.ex-tile.t-time{--c:var(--t-time)}.ex-tile.t-money{--c:var(--t-money)}.ex-tile.t-staff{--c:var(--t-staff)}
.ex-tile h3{margin-top:18px;font-size:clamp(22px,1.8vw,26px);line-height:1.1}
.ex-tile p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55}
.ex-art{order:-1;margin-bottom:20px}
.ex-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.ex-foot p{font-size:14px;color:var(--quiet)}

/* ---------- Small illustrations in the example tiles ---------- */
.sv{display:grid;gap:8px;padding:14px;border-radius:12px;background:var(--sv-fill);font-size:13px;line-height:1.4;color:var(--text-soft)}
.sv-label{font-size:12px;color:var(--quiet)}
.sv-card{padding:10px 12px;border-radius:10px;background:var(--sv-chip)}
.sv-card b{display:block;font-weight:500;color:var(--ink)}
.sv-card small{display:block;margin-top:2px;font-size:12px;color:var(--quiet)}
.sv-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sv-row b{display:inline;font-weight:500}
.sv-row span{flex:none;font-variant-numeric:tabular-nums;color:var(--ink)}
.sv-state{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted);font-size:12px}
.sv-ask{justify-self:end;max-width:88%;padding:9px 12px;border-radius:12px 12px 4px 12px;background:color-mix(in srgb,var(--lilac) 18%,var(--panel));color:var(--ink)}
.sv-reply{max-width:92%;padding:9px 12px;border-radius:12px 12px 12px 4px;background:var(--sv-chip);color:var(--ink)}
.sv-reply small{display:block;margin-top:4px;font-size:12px;color:var(--quiet)}


/* ---------- Single ending: booking + three short questions ---------- */
.ending .end-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.ending h2{font-size:clamp(40px,5vw,68px);line-height:1}
.ending .facts{display:block;margin-top:16px;color:var(--mint);font-size:17px}
.end-lede{margin-top:18px;max-width:40ch;font-size:18px;line-height:1.55;color:var(--text-bright)}
.ending .btn{margin-top:26px}
.ending .cal-note{margin-top:12px}
.ending .mail{max-width:520px}
.end-faq h3{margin-bottom:14px;font-size:clamp(22px,2vw,28px);line-height:1.1}
.end-faq .text-link{display:inline-block;margin-top:18px}
.ending .qa summary{min-height:60px;font-size:clamp(18px,1.5vw,21px)}
@media (max-width:900px){.ending .end-grid{grid-template-columns:1fr}}

/* ---------- Footer: approved footer plus one row of service links ---------- */
footer .svc-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;width:100%;padding-top:14px;border-top:1px solid var(--rule-faint);font-size:13.5px}
footer .svc-links span{color:var(--quiet)}

.more-q .faq{align-items:start}
.more-q h2{font-size:clamp(32px,3.6vw,48px)}

@media (max-width:980px){.ex-tiles{grid-template-columns:1fr}}

/* Whole example tile opens its demo on the examples page */
.ex-tile{position:relative;transition:transform .4s var(--ease)}
.ex-tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.ex-tile:hover{transform:translateY(-2px)}
.ex-tile:hover::before{opacity:1}
.tile-link{color:inherit;text-decoration:none}
.tile-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* Draw the focus ring on the whole tile where :has() exists; elsewhere the link keeps its own ring. */
.tile-link:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
@supports selector(:has(*)){
  .tile-link:focus-visible{outline:none}
  .ex-tile:has(.tile-link:focus-visible){outline:2px solid var(--mint);outline-offset:3px}
}

/* Tile titles line up across the row whatever the illustration height. */
@media (min-width:981px){
  @supports (grid-template-rows:subgrid){
    .ex-tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
    .ex-tile .tag{justify-self:start}
  }
}

/* Links outside the old examples section get the site's link style and a full-size target. */
.ex-foot .text-link,.end-faq .text-link{display:inline-flex;gap:14px;align-items:center;min-height:44px;color:var(--link-ink);font-size:15px;text-decoration:none;border-bottom:1px solid var(--link-rule)}
.ex-foot .text-link:hover,.end-faq .text-link:hover{color:var(--ink);border-bottom-color:var(--mint)}
.ex-foot .text-link svg{width:20px;height:20px}

/* Examples page: page title for assistive tech; the section heading carries it visually. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.ex-tile,.ex-tile::before{transition:none}.ex-tile:hover{transform:none}}

/* Adam, Oct 3: larger "Step" labels on the services cards (carried over from variant B) */
.svc-step{font-size:16px;letter-spacing:.06em}

/* ==========================================================================
   Premium pass (Adam, Oct 3 later): a frosted-glass header and cards, a simple
   services path, quiet light on hover, and one scroll moment per page.
   Glass is used where something moves or glows behind it, never over the hero video.
   ========================================================================== */
:root{
  --glass-fill:rgb(19 20 27 / .56);
  --glass-sheen:linear-gradient(180deg,rgb(255 255 255 / .05),rgb(255 255 255 / .012) 55%);
  --glass-blur:blur(22px) saturate(150%);
  --glass-rim:inset 0 0 0 1px rgb(255 255 255 / .065),inset 0 1px 0 rgb(255 255 255 / .09);
  --glass-rim-hover:inset 0 0 0 1px rgb(255 255 255 / .12),inset 0 1px 0 rgb(255 255 255 / .14);
}
@property --spot{syntax:'<number>';inherits:false;initial-value:0}

/* ---------- Header: frosted glass ---------- */
/* The glass sits on a pseudo-element so the header isn't a backdrop root: the open menu can blur the page too. */
.nav{background:transparent;border-bottom:1px solid transparent;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(8 9 11 / .66);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);transition:background-color .5s var(--ease)}
html.scrolled .nav{border-bottom-color:rgb(255 255 255 / .07);box-shadow:0 14px 34px -24px rgb(0 0 0 / .9)}
/* Over the playing hero video: a deeper tint and no blur (DESIGN.md performance rule). */
html.nav-on-video .nav::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(8 9 11 / .9)}
.nav nav.links a.link{position:relative;transition:color .3s var(--ease)}
.nav nav.links a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav nav.links a.link:hover::after{transform:scaleX(1)}
.nav nav.links a.link[aria-current]::after{display:none}
.mobile-menu nav{background:rgb(17 18 24 / .8);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08),0 24px 50px -20px #000;transform-origin:top right}
.mobile-menu nav a:hover{background:rgb(255 255 255 / .06)}
@media (max-width:540px){.mobile-menu nav{transform-origin:top left}}

/* ---------- Buttons: one frosted-glass material everywhere (Adam, Oct 3 later) ----------
   Booking actions carry a mint tint; every other button is clear glass. Both consent choices stay identical.
   Demo controls drawn on the light "paper" mock-ups keep their own look. */
.btn,.btn.ghost,.mobile-menu summary,.copy,.privacy-choice-actions button,.privacy-choice-close,
.showcase .demo-chips .demo-chip,.showcase .demo-replay,.showcase .have-tile{
  --b-fill:rgb(255 255 255 / .06);--b-rim:rgb(255 255 255 / .15);
  background:var(--b-fill);color:var(--ink);border:0;
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 0 0 1px var(--b-rim),inset 0 1px 0 rgb(255 255 255 / .16),inset 0 14px 18px -14px rgb(255 255 255 / .1);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)}
.btn:not(.ghost),.showcase .demo-chips .demo-chip[aria-pressed="true"]{--b-fill:rgb(164 245 210 / .14);--b-rim:rgb(164 245 210 / .5);color:#ecfff6}
.btn:hover,.btn.ghost:hover,.nav .btn:hover,.mobile-menu summary:hover,.copy:hover,.privacy-choice-actions button:hover,.privacy-choice-close:hover,
.showcase .demo-chips .demo-chip:hover,.showcase .demo-replay:hover,.showcase .have-tile:hover{
  --b-fill:rgb(255 255 255 / .1);--b-rim:rgb(255 255 255 / .28);background:var(--b-fill);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--b-rim),inset 0 1px 0 rgb(255 255 255 / .16),inset 0 14px 18px -14px rgb(255 255 255 / .1)}
.btn:not(.ghost):hover,.nav .btn:not(.ghost):hover,.showcase .demo-chips .demo-chip[aria-pressed="true"]:hover{--b-fill:rgb(164 245 210 / .22);--b-rim:rgb(164 245 210 / .85);color:#ecfff6}
.nav a.btn[aria-current]{color:#ecfff6}
.showcase .have-tile[aria-pressed="true"],.showcase .have-tile[aria-pressed="true"]:hover{--b-fill:color-mix(in srgb,var(--c) 16%,transparent);--b-rim:color-mix(in srgb,var(--c) 65%,transparent);background:var(--b-fill)}
.privacy-choice-actions button,.privacy-choice-close,.copy{border-radius:10px}
.privacy-choice-actions button:disabled{--b-fill:transparent;opacity:.5}
/* No blur over the hero video (DESIGN.md) or on the solid consent panel, where it would show nothing. */
.hero .btn,.privacy-choice-panel button,html.nav-on-video .nav .btn,html.nav-on-video .mobile-menu summary{-webkit-backdrop-filter:none;backdrop-filter:none}
/* One pass of light across a button on hover. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 32%,rgb(255 255 255 / .16) 50%,transparent 68%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn:hover::after{transform:translateX(120%);transition:transform .9s var(--ease)}}

/* ---------- Links ---------- */
.ex-foot .text-link,.end-faq .text-link{position:relative;transition:color .3s var(--ease)}
.ex-foot .text-link::after,.end-faq .text-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ex-foot .text-link:hover::after,.end-faq .text-link:hover::after{transform:scaleX(1)}
.text-link svg{transition:transform .4s var(--ease)}
.text-link:hover svg{transform:translateX(4px)}
footer a{transition:color .3s var(--ease)}
/* Hero motion control: a small icon button in the hero's bottom corner. No blur: it sits over the video. */
.simple .hero .motion-toggle{position:absolute;z-index:2;right:max(16px,calc((100% - 1320px) / 2 + clamp(16px,4vw,48px)));bottom:clamp(14px,2.4vw,28px);display:grid;place-items:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:rgb(8 9 11 / .55);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18),inset 0 1px 0 rgb(255 255 255 / .14);color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.simple .hero .motion-toggle:hover{background:rgb(8 9 11 / .78);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .36),inset 0 1px 0 rgb(255 255 255 / .14)}
.simple .hero .motion-toggle[hidden]{display:none}
.motion-toggle svg{width:14px;height:14px}
.motion-toggle .i-play,.motion-toggle.is-paused .i-pause{display:none}
.motion-toggle.is-paused .i-play{display:block}

/* ---------- Glass cards ---------- */
.ex-tile,.how .step,.leg-card,.ending .end-book,.showcase .showcase-card{
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / calc(var(--spot) * .06)),transparent 70%),var(--glass-sheen),var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:0;border-radius:16px;box-shadow:var(--glass-rim);
  transition:--spot .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.ex-tile:hover,.how .step:hover,.leg-card:hover,.ending .end-book:hover,.showcase .showcase-card:hover,.showcase .showcase-card:focus-within{--spot:1;box-shadow:var(--glass-rim-hover)}
.ex-tile::before{inset:0}
.how .step.lit{--glass-fill:rgb(20 32 30 / .58);box-shadow:inset 0 0 0 1px rgb(164 245 210 / .2),inset 0 1px 0 rgb(255 255 255 / .1)}
.leg-card .svc-terms{background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);color:var(--text-soft)}
.ex-tile .sv{background:rgb(255 255 255 / .035);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .04)}
.ex-tile .sv-card,.ex-tile .sv-reply{background:rgb(255 255 255 / .055)}
.ending .end-book{position:relative;padding:clamp(26px,3vw,40px)}
.ending .end-book h2{font-size:clamp(38px,4.2vw,58px)}
.end-lede a{color:inherit;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:1px;text-underline-offset:4px}
.end-lede a:hover{color:var(--mint)}

/* Light behind each card group, in the colors the cards already use; the glass frosts it. */
.ex-tiles,.how .path-wrap,.ending .end-grid,.showcase .showcase-grid{position:relative;isolation:isolate}
.ex-tiles::before,.how .path-wrap::before,.ending .end-grid::before,.showcase .showcase-grid::before{content:"";position:absolute;z-index:-1;pointer-events:none}
.ex-tiles::before{inset:-10% 0;background:radial-gradient(28% 42% at 17% 58%,rgb(131 220 238 / .2),transparent 70%),radial-gradient(28% 42% at 50% 52%,rgb(164 245 210 / .16),transparent 70%),radial-gradient(28% 42% at 83% 58%,rgb(197 171 255 / .2),transparent 70%)}
.how .path-wrap::before{inset:10% 0 -10%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);background:radial-gradient(22% 46% at 12% 62%,rgb(164 245 210 / .16),transparent 70%),radial-gradient(22% 46% at 38% 58%,rgb(131 220 238 / .14),transparent 70%),radial-gradient(22% 46% at 63% 58%,rgb(131 220 238 / .1),transparent 70%),radial-gradient(22% 46% at 88% 62%,rgb(197 171 255 / .16),transparent 70%)}
.ending .end-grid::before{inset:-12% 40% -12% -6%;background:radial-gradient(44% 42% at 45% 50%,rgb(164 245 210 / .14),transparent 70%)}
.showcase .showcase-grid::before{inset:0;background:radial-gradient(30% 14% at 18% 8%,rgb(164 245 210 / .14),transparent 70%),radial-gradient(30% 14% at 82% 34%,rgb(197 171 255 / .14),transparent 70%),radial-gradient(30% 14% at 22% 62%,rgb(131 220 238 / .12),transparent 70%),radial-gradient(30% 14% at 78% 90%,rgb(164 245 210 / .12),transparent 70%)}
@media (max-width:980px){
  .ex-tiles::before{inset:0;background:radial-gradient(60% 18% at 50% 16%,rgb(131 220 238 / .2),transparent 70%),radial-gradient(60% 18% at 50% 50%,rgb(164 245 210 / .16),transparent 70%),radial-gradient(60% 18% at 50% 84%,rgb(197 171 255 / .2),transparent 70%)}
  .how .path-wrap::before{inset:0;background:radial-gradient(60% 14% at 40% 12%,rgb(164 245 210 / .14),transparent 70%),radial-gradient(60% 14% at 40% 38%,rgb(131 220 238 / .12),transparent 70%),radial-gradient(60% 14% at 40% 63%,rgb(131 220 238 / .1),transparent 70%),radial-gradient(60% 14% at 40% 88%,rgb(197 171 255 / .14),transparent 70%)}
}

/* Subpage headers: a soft satin light (the brand's own video still) for the glass header to frost. */
.subpage .page-hero{position:relative;isolation:isolate}
.subpage .page-hero::before{content:"";position:absolute;z-index:-1;top:-45%;right:0;width:min(62%,820px);aspect-ratio:1.4;background:url(media/satin-poster.webp) center/cover;opacity:.18;filter:blur(64px) saturate(1.2);border-radius:50%;pointer-events:none}

/* ---------- Services: one path ----------
   Steps 1 to 3 sit on a line that draws itself as you read; each step lights when the line reaches it.
   The two after-handover options branch off below on a dashed line. Desktop zigzags; narrower screens use a left rail. */
.journey{--gap:112px;--stagger:96px;--nt:38px;position:relative;isolation:isolate;padding-bottom:clamp(64px,8vw,112px)}
.k-mint{--k:var(--mint)}.k-cyan{--k:var(--cyan)}.k-lilac{--k:var(--lilac)}
.path{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.leg{position:relative;width:calc(50% - var(--gap) / 2)}
.leg:nth-child(even){margin-left:auto}
.leg+.leg{margin-top:calc(var(--stagger) * -1)}
.leg-card{position:relative;padding:clamp(24px,2.4vw,34px)}
.leg-card h2{margin-top:12px;font-size:clamp(28px,2.5vw,36px);line-height:1.05}
.leg-card .svc-terms+h2{margin-top:16px}
.leg-what{margin-top:12px;max-width:46ch;font-size:17px;line-height:1.55;color:var(--text-bright)}
.leg-get{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline;margin:22px 0 0;padding-top:16px;border-top:1px solid rgb(255 255 255 / .07)}
.leg-get dt{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--k) 85%,var(--ink))}
.leg-get dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-soft)}
.leg-card .btn{margin-top:24px}
.leg-card .svc-terms{display:inline-block;margin:0;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500}
/* The card's edge catches the light from its own point on the line. */
.leg-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(var(--rim-angle,210deg),color-mix(in srgb,var(--k) 60%,transparent),transparent 42%,transparent 72%,color-mix(in srgb,var(--k) 16%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.leg:nth-child(even){--rim-angle:150deg}
.leg::before{content:"";position:absolute;z-index:-1;top:-70px;width:520px;height:420px;background:radial-gradient(closest-side,color-mix(in srgb,var(--k) 22%,transparent),transparent);pointer-events:none}
.leg:nth-child(odd)::before{right:-240px}
.leg:nth-child(even)::before{left:-240px}
/* Points on the line, the line itself, and a short tie from each card to its point. */
.leg>.node{position:absolute;top:var(--nt);width:14px;height:14px;border-radius:50%;border:1.5px solid var(--k);background:var(--k);box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 16%,transparent);box-sizing:border-box}
.leg>.seg{position:absolute;top:calc(var(--nt) + 20px);bottom:calc(var(--stagger) - var(--nt) + 6px);width:2px;border-radius:2px;background:rgb(255 255 255 / .09)}
.leg>.seg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--k),var(--k-next,var(--k)));transform-origin:top}
.leg.k-mint{--k-next:var(--cyan)}.leg.k-cyan{--k-next:var(--lilac)}
.path>.leg:last-child{--k-next:var(--mint)}
.path>.leg:last-child>.seg{bottom:-37px}
.path>.leg:last-child>.seg,.handover .leg>.seg,.hseg{background:linear-gradient(rgb(255 255 255 / .2) 50%,transparent 0) 0 0/100% 10px repeat-y;border-radius:0}
.path>.leg:last-child>.seg::after,.handover .leg>.seg::after,.hseg::after{border-radius:0;-webkit-mask:linear-gradient(#000 50%,transparent 0) 0 0/100% 10px repeat-y;mask:linear-gradient(#000 50%,transparent 0) 0 0/100% 10px repeat-y}
.leg::after{content:"";position:absolute;top:calc(var(--nt) + 6.5px);width:calc(var(--gap) / 2 - 14px);height:1px;pointer-events:none}
.leg:nth-child(odd)>.node{right:calc(var(--gap) / -2 - 7px)}
.leg:nth-child(odd)>.seg{right:calc(var(--gap) / -2 - 1px)}
.leg:nth-child(odd)::after{left:100%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--k) 55%,transparent))}
.leg:nth-child(even)>.node{left:calc(var(--gap) / -2 - 7px)}
.leg:nth-child(even)>.seg{left:calc(var(--gap) / -2 - 1px)}
.leg:nth-child(even)::after{right:100%;background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--k) 55%,transparent))}
/* After handover: one point on the line, then both options branch from a shared point beside their cards. */
.handover{position:relative;margin-top:40px;--k:var(--mint)}
.handover-label{position:relative;height:20px;margin:0}
.handover-label .node{position:absolute;top:3px;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;border:1.5px solid var(--k);background:var(--k);box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 16%,transparent);box-sizing:border-box}
.handover-label .svc-step{position:absolute;top:0;left:calc(50% + 24px);line-height:20px;white-space:nowrap}
.hseg{position:absolute;top:23px;left:calc(50% - 1px);width:2px;height:calc(var(--nt) + 17px)}
.hseg::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--mint),var(--lilac));transform-origin:top}
.handover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--gap);margin:26px 0 0;padding:0;list-style:none}
.handover-grid>.leg{width:auto;margin:0}
.handover .leg>.seg{display:none}
.handover .leg.k-mint{--k-next:var(--lilac)}
.path-note{margin-top:48px;text-align:center;color:var(--quiet);font-size:15px}
@media (max-width:980px){
  .journey{--stagger:-16px;--nt:34px}
  .path,.handover-grid{padding-left:40px}
  .leg{width:auto}
  .leg:nth-child(even){margin-left:0}
  .leg:nth-child(n)>.node{left:-40px;right:auto}
  .leg:nth-child(n)>.seg{left:-34px;right:auto}
  .leg:nth-child(n)::after{left:-26px;right:auto;width:26px;background:linear-gradient(90deg,color-mix(in srgb,var(--k) 55%,transparent),transparent)}
  .leg:nth-child(n)::before{left:-160px;right:auto;width:440px;height:380px}
  .leg:nth-child(n){--rim-angle:150deg}
  .handover-label .node{left:0}
  .handover-label .svc-step{left:40px}
  .hseg{left:6px}
  .handover-grid{grid-template-columns:minmax(0,1fr)}
  .handover .leg:first-child>.seg{display:block}
  .path-note{text-align:left;padding-left:40px}
}

/* The scroll moment: the line draws and each step lights as you reach it. Shown fully drawn and lit
   without scroll-driven animation support and with reduced motion (DESIGN.md). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .leg{timeline-scope:--point}
    .leg>.node{view-timeline:--point block}
    .leg>.seg{view-timeline:--seg block}
    .leg>.seg::after{animation:rail-draw linear both;animation-timeline:--seg;animation-range:cover 50vh cover calc(100% - 50vh)}
    .path>.leg:last-child>.seg::after,.handover .leg>.seg::after{animation-name:rail-clip}
    .hseg{view-timeline:--hseg block}
    .hseg::after{animation:rail-clip linear both;animation-timeline:--hseg;animation-range:cover 50vh cover calc(100% - 50vh)}
    .handover-label .node{view-timeline:--handover block;animation:point-lit linear both;animation-timeline:--handover;animation-range:cover calc(50vh - 8px) cover calc(50vh + 72px)}
    .leg>.node,.leg::before,.leg>.leg-card::before{animation:linear both;animation-timeline:--point;animation-range:cover calc(50vh - 8px) cover calc(50vh + 72px)}
    .leg>.node{animation-name:point-lit}
    .leg::before{animation-name:glow-lit}
    .leg>.leg-card::before{animation-name:rim-lit}
  }
}
@keyframes rail-draw{from{transform:scaleY(0)}}
@keyframes rail-clip{from{clip-path:inset(0 0 100% 0)}}
@keyframes point-lit{from{background:var(--ground);border-color:#3a3c4d;box-shadow:0 0 0 0 transparent}}
@keyframes glow-lit{from{opacity:.2}}
@keyframes rim-lit{from{opacity:0}}

/* ---------- Page to page: a short cross-fade where the browser supports it ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease)}
}
@media (prefers-reduced-motion:no-preference){.mobile-menu[open] nav{animation:menu-in .28s var(--ease)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* ---------- Without glass support, or when the visitor asks for less transparency: solid surfaces ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-fill:#14151c}
  .nav::before{background:rgb(8 9 11 / .96)}
  .mobile-menu nav{background:#111218}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass-fill:#14151c;--glass-blur:none}
  .nav::before{background:#08090b;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mobile-menu nav{background:#111218;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .ex-tile,.how .step,.leg-card,.ending .end-book,.showcase .showcase-card,.nav,.nav::before,.btn,.btn.ghost,.mobile-menu summary,.copy,.text-link svg,.nav nav.links a.link::after,.ex-foot .text-link::after,.end-faq .text-link::after{transition:none}
}