/* ==========================================================================
   Tidewater Labs — shared design system
   Dark, editorial, layered. One stylesheet drives every page.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* ground — a real navy with blue left in it, not a tinted black */
  --bg:#122444;

  /* raised surfaces */
  --surface:#1e3765;
  --surface-2:#294a82;

  /* hairlines — alpha-based so they read correctly on any surface */
  --rule:rgba(255,255,255,.15);
  --rule-strong:rgba(255,255,255,.28);
  --hi:rgba(255,255,255,.11);          /* top-edge highlight */

  /* ink */
  --ink:#ffffff;
  --ink-soft:#d8e4f7;
  --ink-dim:#aabdd9;

  /* accent — saturated, not washed */
  --amber:#ffc12e;
  --amber-warm:#ffe49b;
  --amber-a12:rgba(255,193,46,.16);
  --amber-a20:rgba(255,193,46,.28);
  --amber-a35:rgba(255,193,46,.46);

  /* secondary accent */
  --sea:#5cc6ff;
  --sea-a12:rgba(92,198,255,.17);
  --sea-a30:rgba(92,198,255,.38);

  /* live / running — green reads as "on" far better than another amber,
     and gives the page a third hue so it stops being monochrome */
  --mint:#3fe0a4;
  --mint-a12:rgba(63,224,164,.16);
  --mint-a35:rgba(63,224,164,.44);

  /* type */
  --display:'Fraunces',Georgia,serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* geometry */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px rgba(0,0,0,.32);
  --shadow-3:0 18px 44px rgba(0,0,0,.46);

  /* rhythm */
  --gap:18px;
  --wrap:1080px;
  --pad:28px;

  --ease:cubic-bezier(.22,.7,.25,1);
}

/* --- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--amber-a35);color:#fff}
[id]{scroll-margin-top:96px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* Full-bleed grids get the same measure as .wrap so their rounded cards
   do not run into the viewport edge. */
.cards,.pipeline,.reasons{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

section{padding:clamp(56px,7vw,84px) 0}

/* --- Masthead ----------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--rule);
  background:rgba(18,36,68,.76);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.masthead .wrap{display:flex;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:var(--r-sm)}
.gauge{width:30px;height:30px;flex:none;transition:transform .4s var(--ease)}
.logo:hover .gauge{transform:rotate(-12deg)}
.wordmark{font-family:var(--display);font-weight:500;letter-spacing:-.015em;font-size:19px;color:var(--ink)}
.wordmark span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--amber);margin-left:8px}
.masthead-note{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}

/* --- Type --------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin:0 0 22px;
  padding:6px 13px 6px 11px;border-radius:var(--r-pill);
  background:var(--amber-a12);border:1px solid var(--amber-a20);
}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}

h1{
  font-family:var(--display);font-size:clamp(44px,7vw,80px);line-height:1.02;
  letter-spacing:-.025em;font-weight:400;color:var(--ink);margin:0 0 24px;
  text-wrap:balance;
}
h1 em{font-style:italic;color:var(--amber);font-weight:400}

.lede{font-size:19px;line-height:1.6;max-width:62ch;color:var(--ink-soft);margin:0;text-wrap:pretty}

h2{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin:0 0 12px;
  display:flex;align-items:center;gap:14px;
}
h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}
.h2-note{font-size:16px;color:var(--ink-soft);max-width:62ch;margin:0 0 32px;line-height:1.65;text-wrap:pretty}

h3{font-family:var(--display);font-size:25px;line-height:1.2;letter-spacing:-.018em;font-weight:500;color:var(--ink);margin:0 0 12px;text-wrap:balance}
h3 em{font-style:italic;color:var(--amber);font-weight:500}

/* --- Hero --------------------------------------------------------------- */
.hero{
  position:relative;
  padding:clamp(72px,10vw,120px) 0 clamp(64px,8vw,92px);
  isolation:isolate;
}
/* amber dawn + a fine dot grid, both faded out toward the fold */
.hero::before{
  content:'';position:absolute;inset:-140px 0 0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 760px 520px at 18% 0%,rgba(255,193,46,.26) 0%,transparent 58%),
    radial-gradient(ellipse 620px 460px at 88% 22%,rgba(92,198,255,.09) 0%,transparent 55%);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 70% at 30% 30%,#000 0%,transparent 72%);
}

/* --- Status pills ------------------------------------------------------- */
.status,.mstat{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;font-weight:500;
  border:1px solid transparent;
}
.status::before,.mstat::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.s-live,.m-runs{background:var(--mint-a12);border-color:var(--mint-a35);color:var(--mint)}
.s-live::before,.m-runs::before{box-shadow:0 0 0 0 var(--mint-a35);animation:pulse 2.4s var(--ease) infinite}
.s-avail,.m-alpha{background:var(--sea-a12);border-color:var(--sea-a30);color:var(--sea)}
.s-weekly,.m-early,.s-internal{background:rgba(255,255,255,.07);border-color:var(--rule-strong);color:var(--ink-soft)}
.m-design,.m-paused{background:transparent;border-color:var(--rule);color:var(--ink-dim)}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--mint-a35)}
  70%{box-shadow:0 0 0 6px rgba(63,224,164,0)}
  100%{box-shadow:0 0 0 0 rgba(63,224,164,0)}
}

/* --- Cards -------------------------------------------------------------- */
.cards{display:grid;gap:var(--gap)}
@media(min-width:760px){.cards,.cards--2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cards--3{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:32px 30px 30px;
  display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
  overflow:hidden;
}
.card.wide{grid-column:1/-1}

/* accent wash that fades in on hover */
a.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 90% 120% at 0% 0%,var(--amber-a12),transparent 60%);
  opacity:0;transition:opacity .3s var(--ease);
}
a.card{text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
a.card:hover{transform:translateY(-3px);border-color:var(--amber-a35);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-3)}
a.card:hover::after{opacity:1}
a.card:hover .card-name{color:var(--amber-warm)}
a.card:hover .link{color:var(--amber-warm);transform:translateX(3px)}
a.card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
a.card>*{position:relative;z-index:1}

.card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-name{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);transition:color .25s var(--ease)}
.card p{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;text-wrap:pretty}

.detail{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.02em;
  line-height:1.85;margin:2px 0 20px!important;padding:14px 16px;
  background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:var(--r-sm);
}
.detail b{color:var(--ink-soft);font-weight:500}

/* --- Inline arrow links ------------------------------------------------- */
.link{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-decoration:none;color:var(--amber);font-weight:500;align-self:flex-start;
  border-bottom:1px solid var(--amber-a35);padding-bottom:3px;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.card .link{margin-top:auto}
.link:hover{color:var(--amber-warm);border-bottom-color:var(--amber-warm);transform:translateX(3px)}

/* --- Alternating ground ------------------------------------------------- */
/* Sections alternate between the page ground and a slightly raised band, so
   the page reads as movements rather than one continuous column of boxes. */
.band{
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.014));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* --- Tier label --------------------------------------------------------- */
.tier{
  display:flex;align-items:center;gap:13px;margin:clamp(40px,5vw,56px) 0 18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;
}
.tier::before{content:'';width:18px;height:1px;background:var(--amber);flex:none}
.tier::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}

/* --- Featured project --------------------------------------------------- */
/* The flagship gets the room; everything below it gets less, in proportion. */
.feature{
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 62%);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:36px;text-decoration:none;color:inherit;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
/* Weighted toward the copy: the screenshot is supporting evidence, not the
   point, and a 50/50 split made the block taller than it needed to be. */
@media(min-width:900px){.feature{grid-template-columns:1.35fr 1fr;gap:34px;padding:30px 32px}}
@media(max-width:560px){.feature{padding:26px 22px}}
.feature:hover{transform:translateY(-3px);border-color:var(--amber-a35);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-3)}
.feature:hover .card-name{color:var(--amber-warm)}
.feature:hover .link{color:var(--amber-warm);transform:translateX(3px)}
.feature-h{font-size:clamp(23px,2.5vw,28px);line-height:1.17;margin-bottom:11px}
.feature-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0 0 13px;text-wrap:pretty}
.feature-body .detail{line-height:1.7;padding:12px 14px;margin-bottom:16px!important}
.feature-shot{align-self:center}
.feature-shot{
  margin:0;line-height:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--rule);box-shadow:var(--shadow-2);
}
/* Reserve the image's own ratio so a lazy load cannot shift the layout. */
.feature-shot img{display:block;width:100%;height:auto;aspect-ratio:1627/1091}

/* --- The bench ---------------------------------------------------------- */
/* Barely started, so: no panel, no fill, a hairline and a couple of lines. */
.bench{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.bench{grid-template-columns:1fr 1fr;gap:0 44px}}
.bench-item{padding:22px 0;border-top:1px solid var(--rule)}
.bench-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.bench-item p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.6;text-wrap:pretty}
.bench-note{
  margin-top:10px!important;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;color:var(--ink-dim);line-height:1.7;
}

.bars{display:flex;gap:4px;margin-top:auto;padding-top:18px}
.bar{width:26px;height:5px;background:rgba(255,255,255,.13);border-radius:var(--r-pill);display:inline-block}
.bar.on{background:var(--amber);box-shadow:0 0 10px var(--amber-a35)}

/* --- Channel band ------------------------------------------------------- */
.channel-band{padding-top:0}
.channel{
  display:flex;gap:28px;align-items:flex-start;
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 60%);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:34px 36px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
}
.channel-mark{flex:none;line-height:0;padding-top:4px}
@media(max-width:640px){.channel{flex-direction:column;gap:18px;padding:28px 24px}}
.channel-body{min-width:0}
.channel-body h3{font-size:22px}
.channel-body p{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px;max-width:64ch;line-height:1.65;text-wrap:pretty}

/* --- CTA ---------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(56px,7vw,84px) 0;
}
.cta::before{
  content:'';position:absolute;top:-160px;right:-120px;width:520px;height:520px;z-index:-1;
  background:radial-gradient(circle,rgba(255,193,46,.20) 0%,transparent 62%);pointer-events:none;
}
.cta h3{font-size:clamp(26px,3.4vw,32px);max-width:24ch;margin:0 0 14px;line-height:1.2}
.cta p{color:var(--ink-soft);max-width:54ch;margin:0;font-size:16px;line-height:1.65;text-wrap:pretty}

.btn{
  display:inline-block;margin-top:24px;
  background:linear-gradient(180deg,var(--amber-warm) 0%,var(--amber) 100%);
  color:#1a1204;font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;text-decoration:none;
  border-radius:var(--r-pill);
  box-shadow:0 6px 20px rgba(255,193,46,.22),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(255,193,46,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active{transform:translateY(0)}

/* --- Footer ------------------------------------------------------------- */
footer{padding:44px 0;border-top:1px solid var(--rule)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.04em}
footer a{color:var(--amber);text-decoration:none;transition:color .15s var(--ease)}
footer a:hover{color:var(--amber-warm)}

/* ==========================================================================
   Project pages
   ========================================================================== */
.subnav{padding:22px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.subnav a{
  display:inline-block;color:var(--amber);text-decoration:none;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);border:1px solid var(--rule);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.subnav a:hover{border-color:var(--amber-a35);color:var(--amber-warm);transform:translateX(-3px)}

.hero-split{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:820px){.hero-split{grid-template-columns:1fr auto;gap:52px}}
.hero-icon{flex:none;line-height:0}

.pillar{
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 65%);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:42px 44px;margin:0;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
}
.pillar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--amber),var(--amber-a20))}
@media(max-width:640px){.pillar{padding:30px 26px}}
.pillar-h{font-family:var(--display);font-size:clamp(28px,4.6vw,42px);line-height:1.14;letter-spacing:-.025em;font-weight:400;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.pillar-h em{font-style:italic;color:var(--amber);font-weight:400}
.pillar p{margin:0 0 16px;color:var(--ink-soft);font-size:17px;max-width:64ch;line-height:1.65;text-wrap:pretty}
.pillar p:last-child{margin-bottom:0}

.pipeline{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:820px){.pipeline{grid-template-columns:repeat(4,1fr)}}
.pipeline-step{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.pipeline-step:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.pipeline-index{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700}
.pipeline-name{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0;color:var(--ink)}
.pipeline-desc{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.pipeline-aside{
  margin-top:24px;padding:24px 26px;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--amber-a35);
  border-radius:var(--r);font-size:15px;line-height:1.65;color:var(--ink-soft);
}
.pipeline-aside b{color:var(--amber);font-weight:700;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:10px}

.reasons{display:grid;grid-template-columns:1fr;gap:var(--gap);list-style:none;counter-reset:reason}
@media(min-width:760px){.reasons{grid-template-columns:1fr 1fr}}
.reason{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:28px 30px;display:flex;flex-direction:column;gap:10px;counter-increment:reason;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
}
.reason::before{
  content:counter(reason,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--amber);
  background:var(--amber-a12);border:1px solid var(--amber-a20);border-radius:var(--r-pill);
  padding:4px 11px;align-self:flex-start;
}
.reason-h{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
.reason-p{margin:4px 0 0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}

.origin-note{
  border:1px solid var(--rule);border-radius:var(--r);background:rgba(255,255,255,.02);
  padding:22px 26px;margin-top:20px;font-size:15px;line-height:1.7;color:var(--ink-dim);max-width:70ch;
}
.origin-note b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700;display:inline-block;margin-right:10px}

.tagline-band{padding:28px 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-dim);text-align:center}
.tagline-band b{color:var(--amber);font-weight:700}

/* --- Screenshots -------------------------------------------------------- */
/* Framed as an app window, so a bright product UI reads as a screen sitting
   on the dark ground rather than as a glaring rectangle. Images are shown
   whole — no cropping, no letterboxing. */
.shot{
  position:relative;margin:0;display:block;line-height:0;
  padding-top:34px;                       /* room for the chrome bar */
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
}
.shot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:34px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--rule);
}
.shot::after{                             /* the three window dots */
  content:'';position:absolute;top:14px;left:16px;
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);
  box-shadow:11px 0 0 rgba(255,255,255,.18),22px 0 0 rgba(255,255,255,.18);
}
.shot img{display:block;width:100%;height:auto;max-width:100%}
.shot figcaption{
  padding:13px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-dim);background:rgba(255,255,255,.045);border-top:1px solid var(--rule);line-height:1.55;
}
.hero-shot{margin:44px 0 0}
.pipeline-shot{margin:24px 0 0}

/* ==========================================================================
   Waterline page
   ========================================================================== */
.rule{border:0;border-top:1px solid var(--rule);margin:0}

.wl-hero{position:relative;padding:clamp(64px,8vw,96px) 0 0;isolation:isolate}
.wl-hero::before{
  content:'';position:absolute;inset:-120px 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 720px 500px at 15% 0%,rgba(92,198,255,.22) 0%,transparent 58%),
    radial-gradient(ellipse 560px 420px at 85% 30%,rgba(255,193,46,.08) 0%,transparent 55%);
}
.wl-hero h1{max-width:16ch}
.wl-hero .eyebrow{color:var(--sea);background:var(--sea-a12);border-color:var(--sea-a30)}
.wl-hero .eyebrow::before{background:var(--sea)}

.meter-stage{
  margin-top:52px;padding:26px 28px 30px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
}
@media(max-width:640px){.meter-stage{padding:22px 20px 24px}}
.meter-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.meter-metric{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.meter-read{font-family:var(--mono);font-size:13px;color:var(--sea);font-weight:700}
.meter{position:relative;height:56px;display:flex;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--rule)}
.seg{flex:1;position:relative}
.seg-1,.seg-3{background:rgba(255,255,255,.07)}
.seg-2{background:linear-gradient(180deg,var(--sea-a30),rgba(92,198,255,.14))}
.seg span{position:absolute;left:12px;bottom:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim)}
.seg-2 span{color:var(--sea)}
.marker{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);left:57%;box-shadow:0 0 12px rgba(244,248,255,.55);animation:slide 1.6s var(--ease) both}
.marker::after{content:'';position:absolute;top:-4px;left:-4px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
@keyframes slide{from{left:0;opacity:0}to{left:57%;opacity:1}}
.meter-foot{margin:18px 0 0;font-size:15px;color:var(--ink-soft);max-width:56ch;line-height:1.65;text-wrap:pretty}

.modules{display:grid;gap:var(--gap)}
@media(min-width:660px){.modules{grid-template-columns:repeat(3,1fr)}}
.mod{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:22px 22px 24px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.mod:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.mod-name{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;color:var(--amber)}
.mod p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.6;text-wrap:pretty}

.verticals{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vert{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);background:rgba(255,255,255,.045);color:var(--ink-soft);
  padding:8px 15px;border-radius:var(--r-pill);
}

.steps{display:grid;gap:var(--gap);counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  counter-increment:step;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:26px 26px 28px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
}
.step::before{
  content:counter(step,decimal-leading-zero);display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);
  background:var(--amber-a12);border:1px solid var(--amber-a20);border-radius:var(--r-pill);
  padding:4px 11px;margin-bottom:14px;font-weight:700;
}
.step h3{font-size:20px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.65;text-wrap:pretty}

.proof{
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 65%);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:34px 36px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow-2);
}
.proof::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--sea),var(--sea-a30))}
@media(max-width:640px){.proof{padding:28px 24px}}
.proof p{margin:0 0 14px;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1.55;max-width:64ch;text-wrap:pretty}
.proof .who{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase}

.price-grid{display:grid;gap:var(--gap)}
@media(min-width:660px){.price-grid{grid-template-columns:repeat(4,1fr)}}
.price{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px 22px 26px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-1);
}
.price-num{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.price-num small{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ink-dim);letter-spacing:0}
.price-lab{font-size:14.5px;color:var(--ink-soft);line-height:1.6;text-wrap:pretty}
.price-foot{margin:22px 0 0;font-size:16px;color:var(--ink-soft);max-width:62ch;line-height:1.65;text-wrap:pretty}

/* ==========================================================================
   Motion — no JavaScript.

   Entrance uses a plain time-based animation, which always runs to
   completion. Scroll reveal uses a scroll-driven view() timeline behind an
   @supports guard, so a browser without it simply renders the content
   normally. Nothing here can leave an element stuck at opacity 0.
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:no-preference){

  /* Above the fold: staggered on load. */
  .hero .eyebrow,.hero h1,.hero .lede,.hero-icon,
  .wl-hero .eyebrow,.wl-hero h1,.wl-hero .lede,.wl-hero .meter-stage{
    animation:rise .75s var(--ease) both;
  }
  .hero h1,.wl-hero h1{animation-delay:.06s}
  .hero .lede,.wl-hero .lede{animation-delay:.12s}
  .hero-icon,.wl-hero .meter-stage{animation-delay:.18s}

  /* Below the fold: driven by scroll position where the browser supports it. */
  @supports (animation-timeline:view()){
    .cards>*,.pipeline>.pipeline-step,.reasons>.reason,.feature,.bench-item,
    .modules>.mod,.steps>.step,.price-grid>.price,
    .pillar,.channel,.proof,.pipeline-aside,.origin-note,.shot{
      animation:rise .01s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .marker{animation:none;left:57%}
}