/* ============================================================================
   Magnor Vessels — marketing design system
   ----------------------------------------------------------------------------
   ONE stylesheet for all five static marketing pages (the landing + crew /
   owners / shore / for-fleets). It replaces five copy-pasted forks: the landing
   carried ~1,424 lines across six inline <style> blocks, and each segment page
   carried its own near-identical ~80-line copy under DIFFERENT variable names
   (--dim vs --text-dim), which is how the landing ended up using var(--dim)
   five times without ever defining it.

   Direction: editorial + precision. Brochure-grade story sections on warm
   paper; instrument-grade product and data sections on ink. Serif display,
   monospace figures — the precision IS the luxury signal for a compliance
   product.

   Accent is GOLD (#C9A961), matching the app's own --brand token. The previous
   marketing cyan (#3FD8F2) was a documented fork; see MagnorLogo.tsx, which
   calls flipping it "the single switch to re-accent the whole identity".
   ========================================================================= */

/* ── Fonts — self-hosted. No render-blocking third-party request, no EU IPs
      sent to Google (which sat awkwardly beside our own cookie banner and DPA
      page), and no layout shift from a late swap. ───────────────────────── */
@font-face{font-family:'Cormorant';src:url('/fonts/cormorant-500.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('/fonts/cormorant-600.woff2')format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'InterM';src:url('/fonts/inter-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'InterM';src:url('/fonts/inter-500.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'InterM';src:url('/fonts/inter-600.woff2')format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'MonoM';src:url('/fonts/mono-500.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Palette — warm paper, deep ink, gold */
  --paper:#FAF8F4;
  --paper-2:#F2EFE9;
  --paper-3:#E8E3D9;
  --ink:#0B1B2B;
  --ink-soft:#132539;
  --ink-2:#3D4A57;
  --ink-3:#7A8794;
  --gold:#C9A961;
  --gold-deep:#A8873F;
  --gold-wash:rgba(201,169,97,.12);
  --line:rgba(11,27,43,.10);
  --line-2:rgba(11,27,43,.18);
  --line-dark:rgba(250,248,244,.14);
  --success:#16A34A;
  --warn:#D97706;
  --critical:#DC2626;

  /* Type */
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'InterM',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'MonoM',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Geometry — 3 radii, not the 14 ad-hoc values the old file accumulated */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --container:1180px;
  --gutter:clamp(20px,5vw,40px);

  /* One rhythm. The old file mixed fixed 120px sections with clamp() ones. */
  --section-y:clamp(72px,10vw,132px);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
/* <picture> generates its own inline box, which breaks height:100% and
   width:100% on the <img> inside it. display:contents makes the wrapper
   transparent to layout so the img behaves as a direct child of its parent. */
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.015em}
p{margin:0}
::selection{background:var(--gold-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
section[id]{scroll-margin-top:88px}

/* Dark bands — the "instrument" half of the rhythm */
.on-ink{background:var(--ink);color:rgba(250,248,244,.72)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--paper)}
.on-ink .lede{color:rgba(250,248,244,.66)}
.on-ink .eyebrow{color:var(--gold)}
.on-paper-2{background:var(--paper-2)}

/* ── Type primitives ───────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 20px;display:block;
}
.h-display{font-size:clamp(2.9rem,7.2vw,5.6rem);line-height:.98;letter-spacing:-.025em}
.h-section{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.02}
.h-card{font-size:1.4rem;line-height:1.15}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.62;color:var(--ink-2);
  max-width:62ch;margin-top:22px;
}
.serif-em{font-style:italic;color:var(--gold-deep)}
.on-ink .serif-em{color:var(--gold)}
/* Figures are ALWAYS mono — the precision half of the direction */
.fig{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rule{height:1px;background:var(--line);border:0;margin:0}
.on-ink .rule{background:var(--line-dark)}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:.94rem;font-weight:500;letter-spacing:.01em;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink-soft)}
.on-ink .btn-primary{background:var(--gold);color:var(--ink)}
.on-ink .btn-primary:hover{background:#d8bd7e}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,27,43,.04)}
.on-ink .btn-ghost{border-color:var(--line-dark);color:var(--paper)}
.on-ink .btn-ghost:hover{border-color:var(--gold);background:rgba(201,169,97,.10)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.nav.scrolled{background:rgba(250,248,244,.86);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.nav.on-dark:not(.scrolled) .nav-link,.nav.on-dark:not(.scrolled) .brand-name{color:var(--paper)}
.nav.on-dark:not(.scrolled) .btn-ghost{border-color:var(--line-dark);color:var(--paper)}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand img{width:34px;height:34px}
/* The mark has no plate: the M is white on `-ondark` and navy on `-onlight`, so
   it must follow the nav's own background. `.nav.scrolled` swaps to near-white
   paper, which made the white M vanish and left the gold wedge floating alone —
   the state a visitor spends most of the session in. Ship both, toggle on scroll.
   The drawer keeps `-ondark` unconditionally; its background is always --ink. */
.nav .brand .mark-onlight{display:none}
.nav.scrolled .brand .mark-ondark{display:none}
.nav.scrolled .brand .mark-onlight{display:inline-block}
.brand-name{font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-link{font-size:.92rem;color:var(--ink-2);transition:color .25s}
.nav-link:hover{color:var(--gold-deep)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 22px;font-size:.88rem}
/* Below 900px the nav links and the "Sign in" ghost are hidden, so this button is
   the ONLY way to navigate. `color:inherit` resolved to --ink-2 (dark slate) over
   the dark hero scrim — about 1.1:1, i.e. invisible, and a WCAG 1.4.11 failure.
   Follow the nav's ground the same way the links and ghost button already do, and
   carry a visible border so the control reads as a control in both states. */
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;width:42px;height:42px;padding:0;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.nav.on-dark:not(.scrolled) .burger{color:var(--paper);border-color:var(--line-dark)}
/* The drawer's close button reuses .burger but sits on --ink, so it needs the
   light hairline; --line-2 is a dark-on-light value and would not show. */
.drawer .burger{border-color:var(--line-dark)}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;padding:28px var(--gutter);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.drawer.open{opacity:1;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between}
.drawer-top .brand-name{color:var(--paper)}
.drawer-links{display:flex;flex-direction:column;gap:6px;margin-top:56px}
.drawer-links a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-dark);font-family:var(--serif);font-size:2rem;color:var(--paper)}
.drawer-links a span{font-family:var(--mono);font-size:.7rem;color:var(--gold);letter-spacing:.2em}
.drawer .btn{margin-top:36px;justify-content:center}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(620px,92vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
/* Two-axis scrim. The vertical pass seats the nav and the lower content; the
   horizontal pass keeps the copy column legible over the bright hull, which a
   single top-to-bottom gradient could not do. */
/* NOTE: these two stack multiplicatively — at any point the effective alpha is
   1-(1-a)(1-b). Keep the mid-stops low or the photograph goes to mud. */
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,27,43,.58) 0%,rgba(11,27,43,.05) 30%,rgba(11,27,43,.58) 78%,rgba(11,27,43,.90) 100%),
  linear-gradient(100deg,rgba(11,27,43,.74) 0%,rgba(11,27,43,.32) 34%,rgba(11,27,43,0) 62%)}
/* Top padding clears the fixed 76px nav — without it the eyebrow slides under
   the brand lockup once the hero content is tall enough to fill the section. */
.hero-in{position:relative;width:100%;padding-top:calc(76px + clamp(36px,7vw,80px));padding-bottom:clamp(56px,9vw,104px)}
.hero h1{color:var(--paper);max-width:16ch}
.hero .lede{color:rgba(250,248,244,.76);max-width:56ch}
.hero-figs{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,68px);margin-top:clamp(40px,6vw,64px);padding-top:30px;border-top:1px solid var(--line-dark)}
.hero-fig .n{font-family:var(--mono);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;color:var(--gold);letter-spacing:-.02em;display:block}
.hero-fig .l{font-size:.82rem;color:rgba(250,248,244,.60);margin-top:6px;display:block;max-width:22ch}

/* ── Editorial grid pieces ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,44px)}
.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,44px)}

/* Numbered pillars — editorial, hairline-separated, no boxes */
.pillar{padding-top:26px;border-top:1px solid var(--line)}
.on-ink .pillar{border-color:var(--line-dark)}
.pillar .num{font-family:var(--mono);font-size:.72rem;color:var(--gold-deep);letter-spacing:.18em;display:block;margin-bottom:18px}
.on-ink .pillar .num{color:var(--gold)}
.pillar h3{font-size:1.5rem;margin-bottom:12px}
.pillar p{font-size:.98rem}

/* Role cards — photography as plates */
.role{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);isolation:isolate}
.role img{aspect-ratio:4/5;width:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(.86) contrast(1.05) brightness(.86)}
.role:hover img{transform:scale(1.045)}
.role-body{position:absolute;inset:auto 0 0;padding:26px 24px;background:linear-gradient(180deg,transparent,rgba(11,27,43,.86) 46%)}
.role-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
.role h3{color:var(--paper);font-size:1.45rem;margin-bottom:8px}
.role p{color:rgba(250,248,244,.72);font-size:.9rem;line-height:1.5}
.role-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.82rem;color:var(--gold);font-family:var(--sans)}

/* ── Module map — typographic grid, not SVG wires ──────────────────────── */
.fam{padding-top:24px;border-top:1px solid var(--line-dark)}
.fam h3{font-size:1.16rem;color:var(--paper);margin-bottom:4px}
.fam .fam-n{font-family:var(--mono);font-size:.68rem;color:var(--gold);letter-spacing:.16em;display:block;margin-bottom:14px}
.fam ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.fam li{font-size:.78rem;padding:5px 11px;border:1px solid var(--line-dark);border-radius:100px;color:rgba(250,248,244,.70)}

/* ── Spec table — the "instrument" component (scores, rules, alerts) ───── */
.spec{width:100%;border-collapse:collapse;margin-top:34px;font-size:.92rem}
.spec caption{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-bottom:14px}
.on-ink .spec caption{color:rgba(250,248,244,.5)}
.spec th{text-align:left;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 16px 12px 0;border-bottom:1px solid var(--line)}
.on-ink .spec th{color:rgba(250,248,244,.5);border-color:var(--line-dark)}
.spec td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.on-ink .spec td{border-color:var(--line-dark);color:rgba(250,248,244,.74)}
.spec td:first-child{color:var(--ink);font-weight:500}
.on-ink .spec td:first-child{color:var(--paper)}
.spec .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--gold-deep);white-space:nowrap}
.on-ink .spec .num{color:var(--gold)}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.on-ink .card{background:rgba(250,248,244,.04);border-color:var(--line-dark)}
.card h3{font-size:1.28rem;margin-bottom:10px}
.card p{font-size:.94rem}
.card .eyebrow{margin-bottom:14px}

/* Quote / statement block — editorial punctuation between sections */
.statement{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.18;color:var(--ink);letter-spacing:-.015em;max-width:22ch}
.on-ink .statement{color:var(--paper)}
.statement .fig{font-size:.92em;color:var(--gold-deep)}
.on-ink .statement .fig{color:var(--gold)}

/* ── Product windows (hand-built app chrome — the proven approach) ─────── */
.appwin{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(11,27,43,.55)}
.on-ink .appwin{border-color:rgba(250,248,244,.10);box-shadow:0 50px 120px -55px rgba(0,0,0,.8)}
.appbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.appbar .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.appbar .b{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--gold-wash);color:var(--gold-deep)}
.appbody{padding:clamp(18px,2.4vw,26px);background:#fff}
.ui-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ui-tile{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.ui-tile .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block}
.ui-tile .v{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--ink);display:block;margin-top:6px;letter-spacing:-.02em}
.ui-tile .s{font-size:.74rem;color:var(--ink-3);display:block;margin-top:2px}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ui-row:last-child{border-bottom:0}
.ui-row .n{font-size:.9rem;color:var(--ink);font-weight:500}
.ui-row .m{font-size:.76rem;color:var(--ink-3);margin-top:2px}
.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap}
.pill-ok{background:rgba(22,163,74,.10);color:var(--success)}
.pill-warn{background:rgba(217,119,6,.12);color:var(--warn)}
.pill-crit{background:rgba(220,38,38,.10);color:var(--critical)}

/* Compliance ring */
.ring{--p:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--paper-3) 0)}
.ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}
.ring .in{position:relative;text-align:center}
.ring .g{font-family:var(--serif);font-size:2.5rem;font-weight:600;color:var(--ink);line-height:1}
.ring .v{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-top:2px}

/* Chat */
.chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:82%;padding:13px 16px;border-radius:var(--r);font-size:.9rem;line-height:1.5}
.bub-ai{background:var(--paper-2);color:var(--ink-2);border-bottom-left-radius:5px}
.bub-me{background:var(--ink);color:rgba(250,248,244,.9);align-self:flex-end;border-bottom-right-radius:5px}
.bub cite{display:block;margin-top:9px;font-family:var(--mono);font-size:.62rem;font-style:normal;letter-spacing:.06em;color:var(--gold-deep)}

/* ── Alert flow diagram (sources → AI officer → delivery) ─────────────────
   Carried over from the previous landing, restyled: gold instead of cyan, a
   hairline orb instead of a glass bloom, mono labels. The connector fans are
   two SVGs living in the grid gaps with preserveAspectRatio="none", so they
   stretch to whatever height the columns take — no JS, no fixed coordinates. */
/* Three columns with a real gap — the wires are an absolutely-positioned
   overlay now, so the two empty spacer columns the old fan SVGs used to sit in
   are gone. Leaving them in would have let the three real columns auto-place
   into 1/2/3 and collapse leftward into the spacers. */
.flow{position:relative;display:grid;grid-template-columns:1fr minmax(240px,300px) 1fr;
  gap:0 clamp(40px,6vw,90px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.flow-col{display:flex;flex-direction:column;gap:9px}
.flow-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px}
.flow-col h3{font-size:1.06rem;color:var(--paper);margin-bottom:14px}
.flow-item{display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid var(--line-dark);border-radius:var(--r-sm);background:rgba(250,248,244,.03);font-size:.88rem;color:rgba(250,248,244,.82)}
.flow-item .d{font-size:.74rem;color:rgba(250,248,244,.5);display:block;margin-top:1px}
.flow-item svg{flex:none;color:var(--gold);opacity:.75}
/* ONE overlay spanning the whole diagram, rather than two SVGs living in the
   grid gaps. The gap-column version could only guess where the boxes were: it
   spread its endpoints across the full row height while the boxes start below
   the section heading, so no wire actually met a box. This is sized in real
   pixels (viewBox = its own box, set by JS) so there is no distortion either. */
.flow-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.flow-wires path{fill:none;stroke:var(--gold);stroke-width:1}
/* The columns sit above the wires so a curve never crosses a card face. */
.flow-col,.flow-core{position:relative;z-index:1}

/* ── Wire animation ───────────────────────────────────────────────────────
   Carried over from the previous landing, which drew the wires in on reveal
   and ran travelling pulses along them.

   Implemented with stroke-dash rather than offset-path/animateMotion on
   purpose: the fans use preserveAspectRatio="none", so the SVG scales
   non-uniformly and anything travelling ALONG the path (a moving dot) would
   visibly squash at some viewport widths. A dash pattern distorts with the
   stroke itself, so it stays correct at every size.

   pathLength="100" normalises every curve to the same length, so one dash
   rule covers curves of different real lengths and they all draw in together. */
.wire-base path{opacity:.22}
.wire-pulse path{opacity:0;stroke-dasharray:2 26;stroke-width:1.4}

/* Draw-in, then start the pulses. The delay matches the draw duration so the
   flow only begins once the wire it travels along actually exists. */
.flow-wires .wire-base path{stroke-dasharray:100;stroke-dashoffset:100}
.reveal.in .wire-base path{animation:wire-draw 1.5s var(--ease) forwards}
.reveal.in .wire-pulse path{animation:wire-flow 2.8s linear 1.2s infinite}

/* Same guard as .reveal: the draw-in's start state is a HIDDEN wire, so
   without these the diagram loses its connectors whenever the animation never
   runs — no JS, or reduced motion (which the global rule kills animations for,
   freezing dashoffset at 100). Both restore a drawn, static wire. */
.no-js .wire-base path{stroke-dasharray:none;stroke-dashoffset:0}
.no-js .wire-pulse{display:none}
.no-js .flow-wires{display:none}
@media (prefers-reduced-motion:reduce){
  .flow .wire-base path{stroke-dasharray:none;stroke-dashoffset:0}
  .wire-pulse{display:none}
}

@keyframes wire-draw{to{stroke-dashoffset:0}}
@keyframes wire-flow{
  0%{opacity:0;stroke-dashoffset:28}
  12%{opacity:.85}
  88%{opacity:.85}
  100%{opacity:0;stroke-dashoffset:-28}
}

/* Stagger each wire so the pulses don't fire in lockstep — the old page's
   five offset-path pulses were individually delayed for the same reason. */
.wire-pulse path:nth-child(1){animation-delay:1.2s}
.wire-pulse path:nth-child(2){animation-delay:1.5s}
.wire-pulse path:nth-child(3){animation-delay:1.8s}
.wire-pulse path:nth-child(4){animation-delay:2.1s}
.wire-pulse path:nth-child(5){animation-delay:2.4s}
.wire-pulse path:nth-child(6){animation-delay:2.7s}
.wire-pulse path:nth-child(7){animation-delay:3.0s}
.flow-core{border:1px solid rgba(201,169,97,.28);border-radius:var(--r-lg);padding:26px 22px;text-align:center;background:
  radial-gradient(120% 90% at 50% 0%,rgba(201,169,97,.10),transparent 62%),rgba(250,248,244,.035)}
.orb{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 34% 30%,#e6cf96,#C9A961 42%,#8f7132 100%);
  animation:orb-breathe 4.5s ease-in-out infinite}
/* Glow halo — breathes counter to the orb so the two never peak together. */
.orb::after{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,97,.26),transparent 68%);
  animation:orb-glow 4.5s ease-in-out infinite}
/* Expanding ring, emitted on a slower cycle than the breath. */
.orb::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(201,169,97,.45);
  animation:orb-ring 3.6s cubic-bezier(.3,0,.2,1) infinite}
.orb svg{position:relative;z-index:1;color:var(--ink)}

@keyframes orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes orb-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes orb-ring{0%{transform:scale(.92);opacity:.7}70%{opacity:0}100%{transform:scale(1.65);opacity:0}}
.flow-core .role-tag{margin-bottom:6px}
.flow-core h3{font-family:var(--serif);font-size:1.55rem;color:var(--paper);margin-bottom:6px}
.flow-core .stat{font-size:.8rem;color:rgba(250,248,244,.55)}
.flow-brief{margin-top:20px;padding:16px;border:1px solid var(--line-dark);border-radius:var(--r-sm);text-align:left;background:rgba(11,27,43,.4)}
.flow-brief .t{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
.flow-brief p{font-size:.84rem;color:rgba(250,248,244,.72);line-height:1.5}
.flow-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.flow-chips span{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;padding:4px 9px;border-radius:100px;border:1px solid var(--line-dark);color:rgba(250,248,244,.6)}

@media (max-width:900px){
  /* Stack the three columns; the wires have nothing to span, so drop them. */
  .flow{grid-template-columns:1fr;gap:26px}
  .flow-wires{display:none}
  .flow-core{order:-1}
}

/* ── Pricing ───────────────────────────────────────────────────────────── */
.bands{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:100px;background:#fff}
.band-btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:10px 18px;border-radius:100px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .25s,color .25s}
.band-btn.on{background:var(--ink);color:var(--paper)}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,30px);margin-top:40px;align-items:start}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,36px);background:#fff;display:flex;flex-direction:column;height:100%}
.plan-feat{border-color:var(--ink);position:relative;box-shadow:0 30px 70px -46px rgba(11,27,43,.5)}
.plan-ribbon{position:absolute;top:-11px;left:clamp(26px,3vw,36px);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:4px 12px;border-radius:100px}
.plan h3{font-size:1.34rem}
.plan .sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;display:block}
.amt{font-family:var(--serif);font-size:3.4rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1}
.unit{font-size:.86rem;color:var(--ink-3);margin-left:6px}
.plan .desc{font-size:.92rem;margin-top:14px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.perks{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.perks li{position:relative;padding-left:26px;font-size:.92rem;color:var(--ink-2)}
.perks li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(-45deg)}
.plan .note{font-size:.78rem;color:var(--ink-3);margin-top:16px}
.price-row{margin-top:22px;display:flex;align-items:baseline}
/* Band groups: JS toggles [hidden]. All three bands ship in the HTML so a
   crawler and a no-JS visitor see the complete matrix — the old page rendered
   only the mid band and kept $300/$1,100 in a JS object. */
.price-row[hidden]{display:none}

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:rgba(250,248,244,.62);padding-block:clamp(56px,7vw,86px) 34px}
.foot a{color:rgba(250,248,244,.62);transition:color .25s}
.foot a:hover{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(28px,4vw,48px)}
.foot h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.foot .brand-name{color:var(--paper)}
.foot-tag{font-size:.9rem;margin-top:16px;max-width:34ch;color:rgba(250,248,244,.55)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line-dark);font-size:.82rem}

/* ── Cookie banner ─────────────────────────────────────────────────────── */
.ck{position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:300;max-width:640px;background:var(--ink);color:rgba(250,248,244,.8);border-radius:var(--r);padding:22px 24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);display:none;font-size:.88rem}
.ck.show{display:block}
.ck a{color:var(--gold);text-decoration:underline}
.ck-row{display:flex;gap:10px;margin-top:16px}
.ck .btn{padding:10px 18px;font-size:.84rem}

/* ── Reveal on scroll ──────────────────────────────────────────────────────
   NOTE: the previous landing had 71 elements at opacity:0 driven by one
   IntersectionObserver, with NO no-JS fallback — if the observer failed, most
   of the page was invisible to humans while looking perfect to a crawler.
   The .no-js guard below (set by an inline <html class="no-js"> that
   marketing.js immediately clears) makes that failure mode impossible. ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

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

/* ── Breakpoints — three, not the eleven the old file accumulated ──────── */
@media (max-width:1180px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .burger{display:inline-flex}
  .split{grid-template-columns:1fr;gap:32px}
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices{grid-template-columns:1fr;max-width:520px}
  .ui-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cols-3,.cols-4,.cols-2{grid-template-columns:1fr}
  .hero-figs{gap:24px}
  .brand-name{font-size:1.04rem}
  .nav-in{gap:12px}
  .nav-cta .btn{padding:10px 16px;font-size:.82rem}
  .foot-grid{grid-template-columns:1fr}
  .btn-row .btn{width:100%;justify-content:center}
  .spec thead{display:none}
  .spec td{display:block;padding:4px 0;border:0}
  .spec tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .on-ink .spec tr{border-color:var(--line-dark)}
}

@media print{
  .nav,.drawer,.ck,.btn-row{display:none}
  body{background:#fff;color:#000}
}