/* Kinetic Robotics — shared stylesheet for all pages */
:root {
   /* Warm grey base kept from the original identity, but the surface treatment
      moves from pillowy soft-UI to instrument panel: hairline rules carry the
      structure and shadow is used sparingly, for elevation only. */
   --bg: #b7b4af;
   --surface: #bcb9b4;          /* panels sit a touch above the page, not puffed off it */
   --surface-2: #c1beb9;        /* nested tiles */
   --stage: #b1b1b1;            /* matches the studio renders for seamless placement */
   --shadow-light: #d3d0ca;
   --shadow-dark: #918e88;
   --ink: #1f1d19;
   --ink-2: #3a3733;
   --muted: #3f3b36;            /* deepened so it clears AA on the tinted sections too */
   --line: rgba(31,29,25,.16);  /* the primary structural device now */
   --line-strong: rgba(31,29,25,.30);
   --accent: #201e1a;           /* high-contrast graphite for primary CTAs */
   --accent-ink: #f4f2ee;
   /* ---- Copper ----
      The accent is the colour from the deployed site, #9a6a3c, hue 29. Every
      value below stays inside the copper hue band (27-31) so nothing drifts
      yellow. Contrast note, deliberate and known: #9a6a3c is 2.3:1 on the sand
      and 2.0:1 on the cool sections, below the WCAG floor for both normal and
      large text. It is used for headline highlights and small labels because it
      is the brand colour. Body copy and all controls stay on the near-black ink
      and are unaffected. */
   --copper: #9a6a3c;           /* the deployed accent — headings and small labels */
   --copper-ink: #9a6a3c;       /* same, so labels and headings finally match */
   --copper-glow: 154,106,60;   /* #9a6a3c · the button wash and non-text accents */
   --copper-deep: #6f4419;      /* deepest copper, decorative only */
   /* The checkout button is a real purchase control, not decoration, so this one
      keeps 4.5:1 on every ground its wash can sit on. Same copper hue, darker. */
   --copper-text: #452c17;      /* button label · 4.5:1+ on the wash */
   --copper-on-dark: #c17525;   /* copper lifted for the graphite panel · 4.5:1 */
   --copper-light: #c17525;     /* same, on the graphite band · 4.5:1 */
   /* The four-colour system: sand (--bg) is the page, stage grey bands the
      technical sections, copper carries every accent and the primary action,
      graphite is the anchor. Nothing else is introduced. */
   /* Two section tints that alternate. The point is not each tint against the
      page — it is the 1.32:1 step between ONE SECTION AND THE NEXT, which is what
      the eye actually reads as a boundary. One is warmer and lighter than the
      sand, the other cooler and darker, so consecutive sections never match. */
   --band-warm: #c5c0b6;
   --band-cool: #a6a8a7;
   /* --ground is whatever colour the current section sits on. Panels, tiles and
      image fades all read it instead of hard-coding sand, so a section can be
      retinted by setting one variable and nothing paints a vertical edge.
      The -0 twin is the same colour at zero alpha: fading to plain
      "transparent" can interpolate through grey in older engines. */
   --ground:   var(--bg);
   --ground-0: rgba(183,180,175,0);
   /* ---- Page width. These two are the knobs. ----
      --page-max : the widest the content will ever get. Raise it to run closer
                   to the edges on a large monitor, lower it to keep lines short.
      --gutter   : the minimum breathing room at the screen edges, which wins
                   over --page-max on narrow screens. */
   --page-max: 1400px;
   --gutter:   clamp(16px, 3vw, 56px);
   --max: var(--page-max);
   --ease: cubic-bezier(.22,.61,.36,1);
   --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
   --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
   /* 8px base unit — every gap and pad below is a multiple of it */
   --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
   --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
   --r-lg: 14px;
   --r-md: 12px;
   --r-sm: 8px;
   /* elevation, used deliberately and rarely */
   --e1: 0 1px 2px rgba(20,18,15,.06);
   --e2: 0 2px 8px rgba(20,18,15,.08);
   --e3: 0 12px 32px rgba(20,18,15,.12);
   /* sandy soft-UI physics — kept restrained. The press/raise is still felt on
      the controls, but surfaces stay flat and clean rather than pillowy. */
   --raise:        4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
   --raise-sm:     2px 2px 6px var(--shadow-dark), -2px -2px 6px var(--shadow-light);
   --press:        inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
   --raise-dark:   3px 3px 9px rgba(20,18,15,.28), -2px -2px 7px rgba(255,255,255,.16);
   --raise-dark-sm:2px 2px 5px rgba(20,18,15,.24), -1px -1px 4px rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
/* overflow-x is deliberately NOT on <html>: a clip/hidden on the root element
   makes it the sticky scroll container and kills `position: sticky` for every
   descendant (the docs "Contents" sidebar among them). Containing the sideways
   overflow on <body> stops the horizontal scroll just the same while leaving
   the viewport as the scroll root, so sticky keeps working. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
   margin: 0;
   min-height: 100vh;
   color: var(--ink);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.6;
   letter-spacing: -0.01em;
   background-color: var(--bg);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

/* Subtle drifting "sand" grain over the whole page — minimalist, just enough tooth */
.grain {
   position: fixed; inset: 0; z-index: 50; pointer-events: none;
   opacity: .07; mix-blend-mode: soft-light;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 200px 200px;
   animation: grain-shift .8s steps(5) infinite;
}
@keyframes grain-shift {
   0%{background-position:0 0}25%{background-position:-40px 30px}50%{background-position:50px -20px}
   75%{background-position:-25px -45px}100%{background-position:35px 40px}
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--accent-ink); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
/* Copper picks out the load-bearing words inside a headline */
.hl { color: var(--copper); }
p { margin: 0; }

.wrap { width: min(var(--page-max), calc(100% - var(--gutter) * 2)); margin: 0 auto; }
.eyebrow {
   font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 600; margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--copper); opacity: .7; }

/* Reveal only hides when JS is active, so no-JS users still see everything */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .38s var(--ease), transform .38s var(--ease); }
.js body.ready .reveal.in { opacity: 1; transform: none; filter: none; }
.d1 { transition-delay: .05s } .d2 { transition-delay: .10s } .d3 { transition-delay: .15s } .d4 { transition-delay: .20s }

/* ---------- Buttons: sandy bubble physics, sharp geometry ----------
   The tactile part of soft-UI is worth keeping — a button that rises from the
   surface and presses into it reads as a physical control. What made the old
   version look dated was the 999px pill and the oversized shadow spread, not
   the material. So: same raise-and-press, tight radius, half the blur. */
.btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 10px;
   border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
   font: 600 15px/1 var(--sans); letter-spacing: -0.01em; padding: 15px 24px; color: var(--ink);
   background: var(--ground); min-height: 48px; position: relative;
   box-shadow: var(--raise);
   transition: box-shadow .2s var(--ease), transform .12s var(--ease), background .18s var(--ease);
}
.btn:hover { box-shadow: var(--raise-sm); transform: translateY(1px); }
.btn:active { box-shadow: var(--press); transform: translateY(1px); }
/* A pressed-in shadow alone is far too quiet to serve as a focus indicator —
   keyboard users get an explicit high-contrast ring on every interactive element */
.btn:focus-visible, .nav-cta:focus-visible, .navlinks a:focus-visible,
.foot-links a:focus-visible, .brand:focus-visible, .x:focus-visible, summary:focus-visible {
   outline: 3px solid var(--ink); outline-offset: 3px;
}
.field input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The primary action sits flush with the page like the ghost button, carrying
   only a wash of copper so it still reads as the main action. It lifts out of
   the surface on hover and presses back in on click. No border, no gradient.
   Text is a deep copper rather than the mid tone: on the washed background that
   is 5.4:1, where --copper-ink would have landed at 4.3 and missed AA. */
.btn.primary {
   background: rgba(var(--copper-glow), .18);
   color: var(--copper-text); border: none;
   box-shadow: none; text-shadow: none;
}
.btn.primary:hover {
   background: rgba(var(--copper-glow), .26);
   box-shadow: var(--raise-sm);
}
.btn.primary:active {
   background: rgba(var(--copper-glow), .22);
   box-shadow: var(--press);
}
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--ground); box-shadow: var(--raise-sm); }
.btn.ghost:active { box-shadow: var(--press); }
.btn svg { width: 16px; height: 16px; }

/* ---------- Sand ripple ----------
   A soft warm ridge that rises just outside the control and settles outward. It
   never crosses the button's face: one quiet ring on hover, a slightly wider one
   on press. Warm, blurred and low-opacity on purpose — a refined touch, not an
   attention grab. Follows the button's own radius now rather than a pill. */
.rh { position: relative; overflow: hidden; }
.ripple-el {
   position: absolute; pointer-events: none; z-index: 4;
   background: transparent; border-radius: var(--r-sm);
   outline: 1.5px solid rgba(84,82,78,.9);
   outline-offset: 2px; opacity: 0;
   filter: blur(.7px);
   animation: sand-ring var(--rip-t,1s) ease-out forwards;
}
@keyframes sand-ring {
   0%   { outline-offset: 2px;  opacity: 0; }
   26%  { opacity: .24; }
   100% { outline-offset: 13px; opacity: 0; }
}
.ripple-el.big { outline-width: 2px; animation-name: sand-ring-lg; }
@keyframes sand-ring-lg {
   0%   { outline-offset: 2px;  opacity: 0; }
   22%  { opacity: .34; }
   100% { outline-offset: 22px; opacity: 0; }
}

/* ---------- Nav ---------- */
.nav {
   position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60;
   width: min(var(--page-max), calc(100% - var(--gutter) * 2)); height: 62px;
   display: flex; align-items: center; padding: 0 10px 0 18px;
   border-radius: var(--r-md);
   background: rgba(183,180,175,0.7); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
   box-shadow: var(--raise-sm);
   transition: box-shadow .3s var(--ease), background .3s var(--ease);
   animation: nav-drop .6s var(--ease) both;
}
@keyframes nav-drop { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nav-in { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav.scrolled { background: rgba(183,180,175,0.92); box-shadow: var(--raise); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.02em; }
.brand img { height: 30px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.brand .wm { font-size: 15px; }
.navlinks { display: flex; align-items: center; gap: 30px; }
.navlinks a { font-size: 14px; font-weight: 500; color: var(--muted); position: relative; transition: color .2s var(--ease);
   display: inline-flex; align-items: center; min-height: 44px; }   /* 44px hit area */
.navlinks a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 2px; background: var(--ink); transition: left .22s var(--ease), right .22s var(--ease); border-radius: 2px; }
.navlinks a:hover, .navlinks a.active { color: var(--ink); }
.navlinks a:hover::after, .navlinks a.active::after { left: 0; right: 0; }
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-cta {
   font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: var(--r-sm);
   background: rgba(var(--copper-glow), .18); color: var(--copper-text);
   box-shadow: none;
   transition: box-shadow .2s var(--ease), transform .12s var(--ease), background .18s var(--ease);
   position: relative; display: inline-flex; align-items: center; min-height: 40px;
}
.nav-cta:hover { background: rgba(var(--copper-glow), .26); box-shadow: var(--raise-sm); }
.nav-cta:active { background: rgba(var(--copper-glow), .22); box-shadow: var(--press); }

/* ---------- Nav, small screens ----------
   The links plus the wordmark plus the full CTA are wider than the bar below
   ~760px, which pushed the button past the right edge where it was clipped.
   Each breakpoint drops the next least-essential element. */
@media (max-width:760px){
   .nav { width: calc(100% - 20px); padding: 0 8px 0 14px; }
   .navlinks { display: none; }
}
@media (max-width:560px){
   .nav-right { gap: 10px; }
   .brand { min-width: 0; flex: 0 1 auto; }
   .brand .wm { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .brand img { height: 26px; }
   .nav-cta { font-size: 12.5px; padding: 10px 13px; flex: 0 0 auto; }
   .nav-cta .cta-full { display: none; }   /* "Pre-order Myo-20" -> "Pre-order" */
}
@media (max-width:400px){
   .brand .wm { display: none; }            /* logo mark only */
}

/* ---------- Shared surfaces ----------
   No outline anywhere: the soft dual shadow alone defines every edge, which is
   what gives the surfaces their raised, three-dimensional read. */
/* The panel is now purely a layout box. Giving it a background would draw a
   vertical edge against the section strip, which is exactly what we are
   removing — the horizontal colour change carries the structure instead. */
.panel {
   position: relative; border-radius: var(--r-lg); background: transparent;
   box-shadow: none;
}
.section { position: relative; z-index: 1; }
.section-head { max-width: 720px; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.03; }
.section-head p { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.62; color: var(--muted); max-width: 56ch; margin-top: 16px; }

/* Faded-bleed media — the product is centred in its crop, then melts into the
   panel with a soft vignette + a directional fade toward the copy (the "Numbers" look).
   Because the crops are product-centred, object-position:center keeps them centred at every width. */
.bleed { position: relative; overflow: hidden; background: var(--ground); }
.bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bleed.contain > img { object-fit: contain; }
.bleed.multiply > img { mix-blend-mode: multiply; }

/* ---------- Cut-out product shots ----------
   For a PNG with a genuinely transparent background, the whole bleed treatment
   is not just unnecessary, it is what makes it look wrong: the ground fill and
   the edge-fade gradients redraw the very rectangle the transparency removed,
   and object-fit:cover crops a square render into a portrait box, clipping the
   product. A cut-out gets none of it — no background, no fades, contained so
   the whole part is visible, and it floats instead of drifting under a crop. */
.bleed.cutout { background: transparent; overflow: visible; }
.bleed.cutout::after, .bleed.cutout::before { display: none; }
.bleed.cutout > img {
   object-fit: contain; padding: 4%;
   animation: cutout-float 20s ease-in-out infinite alternate;
   filter: drop-shadow(0 18px 30px rgba(20,18,15,.22));
}
@keyframes cutout-float {
   0%   { transform: translate3d(0, var(--par, 0px), 0) scale(1); }
   100% { transform: translate3d(0, calc(var(--par, 0px) - 12px), 0) scale(1.035); }
}
/* every edge melts fully into the panel (no visible break on any side) */
.bleed::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
   background:
     linear-gradient(90deg,  var(--ground) 0%, var(--ground-0) 24%, var(--ground-0) 78%, var(--ground) 100%),
     linear-gradient(180deg, var(--ground) 0%, var(--ground-0) 18%, var(--ground-0) 82%, var(--ground) 100%); }
/* deeper directional fade toward the copy column, on top of the edge melt */
.bleed.fade-r::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
   background: linear-gradient(90deg, var(--ground-0) 54%, var(--ground) 100%); }
.bleed.fade-l::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
   background: linear-gradient(90deg, var(--ground) 0%, var(--ground-0) 46%); }
@media (max-width:900px){
   /* stacked: add a deeper bottom fade (toward the copy below) */
   .bleed.fade-r::before, .bleed.fade-l::before { background: linear-gradient(180deg, var(--ground-0) 68%, var(--ground) 100%); }
}
/* slow ambient drift so the product feels alive (scale >=1 keeps it covering) */
.bleed > img { will-change: transform; animation: img-drift 22s ease-in-out infinite alternate; }
/* --par is written by the scroll engine; folding it into the keyframes lets the
   ambient drift and the scroll parallax share one transform */
.bleed.contain > img { animation: none; transform: translate3d(0, var(--par, 0px), 0); }
@keyframes img-drift {
   0%   { transform: translate3d(0, var(--par, 0px), 0) scale(1.11) translate(-1%, -0.5%); }
   100% { transform: translate3d(0, var(--par, 0px), 0) scale(1.16) translate(1.2%, 1%); }
}

/* ---------- Hero ---------- */
/* Hero height is tuned so the graphite ribbon below it lands inside the first
   viewport on a typical laptop (~820px of usable height) rather than sitting
   just under the fold. The reclaimed space is taken in small amounts from
   several spacings instead of one, so nothing reads as cramped. */
.hero { padding: 88px 0 var(--s3); }
.hero-shell { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 20px; padding: 20px; overflow: hidden; perspective: 1300px; }
.hero-copy { padding: 30px 28px 24px 34px; display: flex; flex-direction: column; justify-content: center; }
.badge {
   align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
   font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); font-weight: 600;
   padding: 9px 15px; border-radius: 999px; background: var(--bg);
  
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 0 rgba(var(--copper-glow),.4); animation: dot-pulse 2.4s var(--ease) infinite; }
@keyframes dot-pulse { 0%{ box-shadow: 0 0 0 0 rgba(var(--copper-glow),.45); } 70%{ box-shadow: 0 0 0 8px rgba(var(--copper-glow),0); } 100%{ box-shadow: 0 0 0 0 rgba(var(--copper-glow),0); } }
.hero h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.0; letter-spacing: -.04em; font-weight: 800; }
.hero h1 .lite { display:block; color: var(--copper); font-weight: 700; font-size: 1em; letter-spacing: -.04em; margin-top: 8px; }
.hero .sub { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hero-stat { padding: 13px 14px; border-radius: var(--r-sm); background: var(--ground); box-shadow: var(--press); }
.hero-stat b { display: block; font-size: 19px; line-height: 1.05; letter-spacing: -.03em; }
.hero-stat span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-ink); }
.hero-visual { position: relative; min-height: 460px; border-radius: var(--r-md); overflow: hidden; }
.hero-visual .cap {
   position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 3;
   display: flex; gap: 12px; align-items: center;
   padding: 14px 18px; border-radius: var(--r-sm);
   background: rgba(183,180,175,0.62); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
   box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-visual .cap svg { flex: 0 0 22px; color: var(--ink); }
.hero-visual .cap b { font-size: 13.5px; } .hero-visual .cap span { display:block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
@media (max-width:940px){
   .hero-shell{ grid-template-columns: 1fr; }
   .hero-copy{ padding: 30px 16px 8px 20px; } .hero-visual{ min-height: 380px; }
   .hero-stats{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Spec ribbon ---------- */
.ribbon { padding: 26px 0 8px; }
.ribbon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ribbon-pill { padding: 22px 20px; border-radius: var(--r-md); background: var(--ground); text-align: center; box-shadow: var(--raise); }
.ribbon-pill b { display: block; font-size: 24px; line-height: 1.05; letter-spacing: -.03em; }
.ribbon-pill span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-ink); }
@media (max-width:820px){ .ribbon-row{ grid-template-columns: 1fr 1fr; } }

/* ---------- Generic feature split ---------- */
.split { padding: 64px 0; }
.split .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; align-items: stretch; }
.split .bleed { min-height: 500px; }
.split .body { padding: 54px 48px; display: flex; flex-direction: column; justify-content: center; }
.split .body h2, .split .body h3 { font-size: clamp(28px, 3.5vw, 46px); line-height: 1.05; }
.split .body p { color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; margin-top: 18px; max-width: 46ch; }
.split .body.reversed { order: -1; }   /* used to force text side */
.pills { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--copper-ink); font-weight: 600; padding: 9px 15px; border-radius: var(--r-sm); background: var(--ground); box-shadow: var(--raise-sm); }
@media (max-width:900px){
   .split .panel{ grid-template-columns: 1fr; }
   .split .bleed{ min-height: 320px; order: -1; }
   .split .body{ padding: 34px 26px; }
   .split .body.reversed{ order: 0; }
}

/* ---------- Anatomy ---------- */
.anatomy { padding: 40px 0 20px; }
.anatomy .panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; overflow: hidden; }
.anatomy .bleed { min-height: 540px; }
.anatomy .body { padding: 54px 48px; }
.anatomy .body h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.03; margin-top: 8px; }
.anatomy .body > p { color: var(--muted); font-size: 18px; margin-top: 16px; max-width: 44ch; }
.chips { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chip { padding: 20px; border-radius: var(--r-sm); background: var(--ground); box-shadow: var(--raise-sm); transition: box-shadow .22s var(--ease), transform .22s var(--ease); }
.chip:hover { transform: translateY(-2px); box-shadow: var(--raise); }
.chip .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); font-weight: 700; }
.chip h4 { font-size: 15.5px; margin: 10px 0 0; }
.chip p { color: var(--muted); font-size: 13px; margin: 6px 0 0; line-height: 1.5; }
@media (max-width:900px){ .anatomy .panel{ grid-template-columns: 1fr; } .anatomy .bleed{ order: -1; min-height: 320px; } .anatomy .body{ padding: 34px 26px; } }

/* ---------- Specs / top view ---------- */
.specs { padding: 72px 0; }
/* Anchor landing. The global scroll-padding-top of 96px clears the nav for a
   section whose content starts at its own top edge — but this one stacks 72px
   of band padding and 54px of panel padding on top of that, so "The numbers"
   was landing 164px below the nav with nothing but empty band above it.
   A negative scroll-margin pulls the stop point back through that padding.
   Split by breakpoint because the internal padding is not the same: above
   900px the copy column leads, below it the image does and a deeper pull
   would crop the top of the render. */
.specs { scroll-margin-top: -80px; }
@media (min-width: 901px){ .specs { scroll-margin-top: -110px; } }
.specs .panel { overflow: hidden; padding: 0; }
.specs-grid { display: grid; grid-template-columns: 1fr .92fr; }
.specs-copy { padding: 54px 48px; }
.specs-copy h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.03; margin-top: 8px; }
.specs-copy > p { color: var(--muted); margin-top: 14px; font-size: 17px; max-width: 42ch; }
.spec-table { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spec-item { padding: 16px 18px; border-radius: var(--r-sm); background: var(--ground); box-shadow: var(--press); }
.spec-item .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); font-weight: 600; }
.spec-item .val { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 7px; }
.spec-item .val small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.specs-visual { position: relative; min-height: 100%; background: var(--ground); overflow: hidden; }
.specs-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; animation: img-drift 22s ease-in-out infinite alternate; }
.specs-visual::before { content:""; position:absolute; inset:0; z-index:2; background: linear-gradient(90deg, var(--ground) 0%, var(--ground-0) 24%, rgba(177,177,177,0) 80%, rgba(177,177,177,.35) 100%); }
.specs-visual .tag { position:absolute; z-index:3; left: 26px; top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--copper-ink); background: rgba(183,180,175,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
@media (max-width:900px){ .specs-grid{ grid-template-columns: 1fr; } .spec-table{ grid-template-columns: 1fr; } .specs-visual{ min-height: 320px; order: -1; } .specs-visual img{ position: relative; } .specs-copy{ padding: 34px 26px; } }

/* ---------- Reserve ---------- */
.reserve { padding: 40px 0 80px; }
.reserve .panel { display: grid; grid-template-columns: 1fr minmax(380px, .82fr); gap: 20px; padding: 48px; align-items: center; }
.reserve-copy h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.04; margin-top: 8px; }
.reserve-copy p { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.62; margin-top: 16px; max-width: 46ch; }
.ship-note { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-sm); background: var(--ground); box-shadow: var(--press); font-size: 13px; color: var(--ink-2); font-weight: 500; }
.ship-note svg { width: 16px; height: 16px; color: var(--copper); }
.reserve-card { border-radius: var(--r-md); padding: 36px; background: var(--ground); box-shadow: var(--raise), var(--e3); }
.reserve-card .tier { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--copper-ink); font-weight: 700; }
.reserve-card .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.reserve-card .price .big { font-size: clamp(46px, 7vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.reserve-card .price .was { color: var(--muted); font-size: 15px; font-weight: 500; }
.reserve-card .deposit { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.reserve-card .deposit b { color: var(--ink); }
.reserve-card ul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.reserve-card li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; font-weight: 500; }
.reserve-card li svg { flex: 0 0 19px; margin-top: 1px; color: var(--ink); }
.reserve-card .btn { width: 100%; margin-top: 28px; padding: 18px; font-size: 16px; }
.reserve-card .fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; margin-top: 16px; }
@media (max-width:900px){ .reserve .panel{ grid-template-columns: 1fr; padding: 28px; } }

/* ---------- Final CTA ---------- */
.final { padding: 8px 0 88px; }
.final .panel { overflow: hidden; padding: 0; }
.final-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; }
.final-visual { min-height: 380px; }
.final-copy { padding: 60px 54px 60px 20px; }
.final-copy h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; }
.final-copy p { color: var(--muted); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; margin: 20px 0 30px; max-width: 40ch; }
.final-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.final-actions .meta { font-size: 13px; color: var(--muted); }
@media (max-width:900px){ .final-grid{ grid-template-columns: 1fr; } .final-visual{ order: -1; min-height: 300px; } .final-copy{ padding: 34px 28px; } }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: var(--s6); padding: var(--s5) 0 var(--s5); color: var(--muted); font-size: 13.5px; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot-in .brand { color: var(--ink-2); }
.foot-in .brand img { height: 24px; filter: grayscale(100%) opacity(.7); }
/* Five links at a fixed 22px gap are wider than a 320px viewport and were the
   one thing still pushing the page sideways — they wrap now. */
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width:560px){ .foot-links { gap: 14px 16px; } }
.foot-links a:hover { color: var(--ink); }

/* ---------- Modal ---------- */
.scrim { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(183,180,175,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.scrim.open { opacity: 1; visibility: visible; }
.modal { width: min(460px, 100%); border-radius: var(--r-md); padding: 40px 32px; position: relative; background: var(--bg); box-shadow: var(--raise), var(--e3); transform: translateY(18px) scale(.98); transition: transform .3s var(--ease); }
.scrim.open .modal { transform: none; }
.modal h3 { font-size: 25px; letter-spacing: -.03em; margin: 0 0 12px; }
.modal p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input { width: 100%; border-radius: var(--r-sm); padding: 17px 19px; font-size: 16px; font-family: var(--sans); font-weight: 500; color: var(--ink); background: var(--ground); box-shadow: var(--press); transition: box-shadow .2s, border-color .2s; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31,29,25,.14); }
.field input.err { box-shadow: inset 4px 4px 8px #c99, inset -4px -4px 8px #fde3e3; }
.modal .btn { width: 100%; margin-top: 22px; padding: 17px; }
.msg { font-size: 13.5px; margin-top: 14px; min-height: 18px; color: var(--muted); font-weight: 500; }
.msg.ok { color: var(--ink); } .msg.bad { color: #b3261e; }
/* 44×44 minimum hit area — the glyph is small but the target must not be */
.x { position: absolute; top: 12px; right: 14px; border: 0; background: none; color: var(--muted);
   font-size: 27px; line-height: 1; width: 44px; height: 44px; display: flex; align-items: center;
   justify-content: center; border-radius: 50%; cursor: pointer; }
.x:hover { color: var(--ink); }
.done { display: none; text-align: center; }
.done.show { display: block; }
.done .ring { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; background: var(--bg); box-shadow: var(--raise); }
.done .ring svg { width: 30px; height: 30px; stroke: var(--ink); }

/* ======================================================================
   MOTION SYSTEM
   One rAF loop in JS publishes three signals to the page:
     --scroll   0..1  progress through the whole document
     --p        0..1  per-element progress across the viewport (parallax)
   Everything below consumes those three numbers, so the page moves as a
   single system instead of a pile of unrelated animations.
   ====================================================================== */


/* --- Scroll progress: a copper meniscus filling the nav pill --- */

:root { --liquid: cubic-bezier(.16,1.06,.3,1); }


/* --- Headlines rise word by word out of a mask --- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.js .w > i { display: inline-block; font-style: inherit; transform: translateY(108%);
   transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 32ms); }
.js body.ready .in .w > i, .js body.ready .w.in > i { transform: none; }

/* --- Media parallax: the product drifts against its frame --- */
.bleed > img, .specs-visual img { will-change: transform; }

/* --- Chips, pills and spec tiles pop in with a bubble overshoot --- */
.js .bub { opacity: 0; transform: translateY(12px);
   transition: opacity .34s var(--ease), transform .34s var(--ease);
   transition-delay: calc(var(--i, 0) * 40ms); }
.js body.ready .bub.in { opacity: 1; transform: none; filter: none; }
.chip, .pill, .spec-item, .ribbon-pill, .hero-stat { transition: transform .45s var(--liquid), box-shadow .45s var(--ease); }
.pill:hover { transform: translateY(-3px) scale(1.05); }
.spec-item:hover { transform: translateY(-3px); }
.ribbon-pill:hover { transform: translateY(-5px) scale(1.02); }
.hero-stat:hover { transform: translateY(-3px); }


@media (prefers-reduced-motion:reduce){
   html{ scroll-behavior: auto }
   .reveal, .btn, .nav, .chip, .modal, .scrim,
   .grain, .bleed > img, .specs-visual img, .badge .dot, .w > i, .bub, .panel, .ripple-el
     { transition: none !important; animation: none !important; }
   .reveal, .bub { opacity: 1 !important; transform: none !important; filter: none !important; }
   .w > i { transform: none !important; }
   .grain { display: none; }
}

/* ==========================================================================
   SUB-PAGES — FAQ and Compare
   Same grid, type scale and surface language as the home page; these read as
   part of one site rather than bolted-on extras.
   ========================================================================== */
.page { padding: 128px 0 var(--s6); }
.page-head { max-width: 62ch; margin-bottom: var(--s6); }
.page-head h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.04em; }
.page-head p { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; margin-top: var(--s2); }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 600; margin-bottom: var(--s2); display: block; }
.crumb a { color: var(--copper-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--ink); }

/* ---------- FAQ accordion ----------
   Built on <details>/<summary>: open/close, keyboard operation and screen-reader
   semantics come from the browser, and every answer stays in the DOM for search
   engines and for in-page find. No JS required. */
.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
   list-style: none; cursor: pointer; padding: var(--s3) var(--s5) var(--s3) 0;
   font-size: clamp(16px, 1.7vw, 19px); font-weight: 600; letter-spacing: -.02em;
   position: relative; display: block; transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper-ink); }
.faq summary:active { transform: translateY(1px); }
.faq summary { border-radius: var(--r-sm); transition: color .18s var(--ease), transform .12s var(--ease); }
.faq summary::after {
   content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
   border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
   transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary::after { transition: transform .3s var(--ease); }
.faq .a { overflow: hidden; padding: 0 var(--s5) var(--s4) 0; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 68ch; }
.faq .a p + p { margin-top: var(--s2); }
.faq .a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-group { margin-bottom: var(--s6); }
.faq-group > h2 { font-size: 13px; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase;
   color: var(--copper-ink); margin-bottom: var(--s2); font-weight: 600; }

/* ---------- Comparison table ----------
   A real <table> with proper scope attributes — screen readers announce which
   column and row a cell belongs to, which a div-grid cannot do. */
/* A horizontally scrolling region needs to be focusable, or keyboard-only users
   have no way to reach the columns that are off-screen. */
.cmp-wrap { overflow-x: auto; border-radius: var(--r-md); background: var(--surface); }
.cmp-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Only worth saying when the table cannot actually fit */
.scroll-hint { display: none; }
@media (max-width: 900px){
   .scroll-hint {
      display: block; margin-bottom: var(--s2);
      font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
      text-transform: uppercase; color: var(--copper-ink); font-weight: 600;
   }
}
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.cmp caption { text-align: left; padding: var(--s3); color: var(--muted); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.cmp th, .cmp td { padding: 16px var(--s3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 700; background: var(--surface-2); white-space: nowrap; }
.cmp tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp .own { background: rgba(var(--copper-glow), .09); color: var(--ink); font-weight: 600; }
.cmp thead th.own { background: rgba(var(--copper-glow), .16); color: var(--copper-ink); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp .note { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 4px; letter-spacing: 0; }

/* An honest label for figures we cannot verify — never present an estimate as measured */
.est { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
   color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
   white-space: nowrap; vertical-align: middle; }

.page-cta { margin-top: var(--s6); padding: var(--s5); border-radius: var(--r-md);
   background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.page-cta h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; }
.page-cta p { color: var(--muted); margin-top: 6px; font-size: 15px; }
@media (max-width: 700px){ .page { padding: 96px 0 var(--s5); } .page-cta { flex-direction: column; align-items: flex-start; } }
/* At the narrow end the 48px box padding left less room than the nowrap CTA
   needs, pushing the page 17px wider than the viewport. Tighten the box and let
   the button take the full width instead of overflowing it. */
@media (max-width: 560px){
   .page-cta { padding: var(--s4) var(--s3); }
   .page-cta .btn { width: 100%; }
   .page-head h1 { overflow-wrap: break-word; }
}

/* ==========================================================================
   FOUR-COLOUR RHYTHM
   sand (--bg) · stage grey (--band) · copper · graphite (--accent)
   The page alternates between them so no screen is all one tone. Grey and
   graphite are used as full-width bands, which also gives the eye a break
   between the panel-heavy sections.
   ========================================================================== */

/* The key-figure ribbon becomes one graphite band — the page's black note,
   placed right under the hero where it doubles as a spec summary. */
.ribbon { padding: var(--s3) 0 var(--s2); }
.ribbon-row {
   background: linear-gradient(180deg, #262320 0%, var(--accent) 100%);
   border-radius: var(--r-md);
   box-shadow: var(--raise), var(--e3);
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
   overflow: hidden;
}
.ribbon-pill {
   background: none; box-shadow: none; border-radius: 0;
   padding: var(--s4) var(--s3); text-align: center;
   position: relative;
}
.ribbon-pill + .ribbon-pill::before {
   content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
   width: 1px; background: rgba(255,255,255,.13);
}
.ribbon-pill b { color: #f4f2ee; font-size: 26px; }
.ribbon-pill span { color: var(--copper-light); }   /* 6.2:1 on the graphite */
@media (max-width:820px){
   .ribbon-row { grid-template-columns: 1fr 1fr; }
   .ribbon-pill:nth-child(3)::before, .ribbon-pill:nth-child(2) ~ .ribbon-pill::before { top: 0; }
}

/* Alternating sections sit on a soft band of the stage grey — the same grey the
   actuator renders already sit on. It fades in and out at the top and bottom
   rather than starting hard, so the eye reads a change of ground, not a box.
   With panels now flat and borderless, this is what separates one section from
   the next. */
/* Alternating section tints. The point is not each tint against the page — it is
   the ~1.3:1 step between one section and the NEXT, which is what the eye reads
   as a boundary. Warm/lighter alternates with cool/darker, so consecutive
   sections never share a ground. Each fades in at 11% and out at 89% so the
   change is soft rather than a hard block. */
.section.band-warm { --ground: var(--band-warm); --ground-0: rgba(197,192,182,0); }
.section.band-cool { --ground: var(--band-cool); --ground-0: rgba(166,168,167,0); }
.section.band-warm::before, .section.band-cool::before {
   content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section.band-warm::before {
   background: linear-gradient(180deg,
      rgba(197,192,182,0) 0%, rgba(197,192,182,1) 11%,
      rgba(197,192,182,1) 89%, rgba(197,192,182,0) 100%);
}
.section.band-cool::before {
   background: linear-gradient(180deg,
      rgba(166,168,167,0) 0%, rgba(166,168,167,1) 11%,
      rgba(166,168,167,1) 89%, rgba(166,168,167,0) 100%);
}

/* Copper earns more presence: section rules, the active nav link, and the
   left edge of every chip. */
.eyebrow::before { background: var(--copper); opacity: 1; height: 2px; width: 26px; }
.navlinks a::after { background: var(--copper); height: 2px; }
.chip { border-left: 2px solid transparent; transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease); }
.chip:hover { border-left-color: var(--copper); }
.spec-item { border-left: 2px solid rgba(var(--copper-glow), .34); }
.pill { color: var(--copper-ink); }

/* The closing CTA gets the graphite band too, so the page opens on sand and
   closes on black with copper as the through-line. */
/* The graphite stopped dead at the panel edge, which read as a hard black slab.
   A mask feathers the top and bottom so it dissolves into the sand instead. The
   fade is ~7%, well outside the 60px padding, so no text is touched. */
/* The closing section's ground is graphite, so anything inside it that reads
   --ground (buttons, tiles, image fades) resolves to the dark value instead of
   inheriting sand and punching a light rectangle into the panel. */
.final { --ground: #23201d; --ground-0: rgba(35,32,29,0); }
.final .panel {
   background: linear-gradient(180deg, #262320 0%, var(--accent) 100%);
   box-shadow: none;
   -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(90deg,  transparent 0%, #000 4%, #000 96%, transparent 100%);
   -webkit-mask-composite: source-in;
           mask-image:
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(90deg,  transparent 0%, #000 4%, #000 96%, transparent 100%);
           mask-composite: intersect;
}
.final .final-copy h2 { color: #f4f2ee; }
.final .final-copy .hl { color: var(--copper-light); }
.final .final-copy p { color: #c9c5be; }
.final .eyebrow { color: var(--copper-light); }
.final .eyebrow::before { background: var(--copper-light); }
.final .final-actions .meta { color: #b3aea6; }
/* On the graphite panel the standard copper wash (.18) and the deep copper label
   composite to almost the same colour — 1.07:1, unreadable. Both are lifted here:
   a stronger wash and a light gold label, which measures 5.7:1. */
.final .btn.primary { background: rgba(var(--copper-glow), .30); color: var(--copper-on-dark); }
.final .btn.primary:hover { background: rgba(var(--copper-glow), .42); box-shadow: var(--raise-dark-sm); }
.final .btn.primary:active { background: rgba(var(--copper-glow), .26); box-shadow: inset 3px 3px 8px rgba(0,0,0,.42); }
.final .btn.ghost { color: #f4f2ee; }
.final .btn.ghost:hover { background: rgba(255,255,255,.08); box-shadow: none; }
/* the render sits on grey, so its bleed must fade into the band, not into sand */
.final .bleed { background: var(--band); }
.final .bleed::after {
   background:
     linear-gradient(90deg, #23201d 0%, rgba(35,32,29,0) 18%, rgba(35,32,29,0) 82%, #23201d 100%),
     linear-gradient(180deg, #23201d 0%, rgba(35,32,29,0) 16%, rgba(35,32,29,0) 84%, #23201d 100%);
}
.final .bleed.fade-r::before { background: linear-gradient(90deg, rgba(35,32,29,0) 50%, #24211e 100%); }
@media (max-width:900px){
   .final .bleed.fade-r::before { background: linear-gradient(180deg, rgba(35,32,29,0) 64%, #24211e 100%); }
}

/* ==========================================================================
   SUPPORT PAGE
   Same instrument-panel language as the other sub-pages. The Zoho Desk form
   arrives as a cross-origin iframe we cannot restyle, so the frame is given a
   quiet surface of our own and the form is left to look like itself rather
   than half-skinned.
   ========================================================================== */

/* Sections of this page toggle links based on what is configured — the hidden
   attribute has to beat the flex display below. */
[hidden] { display: none !important; }

/* ---------- Channel cards ---------- */
.sup-grid {
   display: grid; gap: var(--s3); margin-bottom: var(--s6);
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sup-card {
   background: var(--surface); border-radius: var(--r-md); padding: var(--s4);
   display: flex; flex-direction: column; gap: 10px;
   border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sup-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.sup-tag {
   font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 700;
}
.sup-card h2 { font-size: clamp(18px, 2vw, 21px); letter-spacing: -.03em; }
.sup-card p { color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1 1 auto; }
.sup-link {
   display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
   font-size: 14.5px; font-weight: 600; color: var(--ink);
   text-decoration: underline; text-underline-offset: 4px;
   min-height: 44px; /* touch target, even though it reads as inline text */
}
.sup-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.sup-link:hover svg { transform: translateX(3px); }
.sup-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---------- What to expect ---------- */
.sup-facts {
   display: grid; gap: var(--s3); margin-bottom: var(--s6);
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   border-top: 1px solid var(--line); padding-top: var(--s4);
}
.sup-fact { display: flex; flex-direction: column; gap: 6px; }
.sup-fact .k {
   font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 600;
}
.sup-fact .v { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.03em; }
.sup-fact .n { color: var(--muted); font-size: 14px; line-height: 1.55; }
.sup-fact .n a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ticket form ---------- */
.sup-form-sec {
   display: grid; grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
   gap: var(--s5); align-items: start;
   padding: var(--s5); border-radius: var(--r-md); background: var(--surface);
   scroll-margin-top: 110px;
}
.sup-form-copy h2 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.035em; }
.sup-form-copy p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin-top: var(--s2); }
.sup-note { font-size: 13px !important; color: var(--muted); opacity: .85; }

/* Matching the form to the panel, given we cannot reach inside it.
   The Desk form is cross-origin: its stylesheet is not ours to edit, and it
   paints an opaque white page (allowtransparency is a no-op against that).
   The one lever left is compositing. multiply against the panel maps the
   form's white to exactly the panel colour — white is the identity for
   multiply — while dark text and field borders stay dark. The frame is still
   a live iframe; blending does not affect input or scrolling.
   Cost, and it is a real one: the Submit button and the captcha refresh icon
   are multiplied too, so both sit a shade darker than Zoho renders them. */
.desk-embed { background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
@supports (mix-blend-mode: multiply) {
   .desk-embed #zsfeedbackFrame { mix-blend-mode: multiply; }
}
.desk-frame {
   display: block; width: 100%; border: 0;
   /* Zoho's resizer sets an exact inline height once the form reports back.
      This floor is Zoho's own default height — it holds the layout until then,
      and keeps the form reachable if the resizer is ever blocked (the frame is
      scrolling="no", so a frame that is too short clips rather than scrolls). */
   min-height: 570px;
   background: transparent;
}
/* Zoho's feedbackwidget script pulls in its own stylesheet (ZSFeedbackIframe
   .css) which pins #zsfeedbackFrame at 580x600 with !important. Specificity
   alone does not beat that, so the width is reclaimed with !important of our
   own — otherwise the form sits in a 580px column inside a much wider panel.

   Height is left to Zoho. Their 600px is a static figure rather than a live
   measurement, so the frame is left scrollable (see support.js): if the form
   ever renders taller than 600px — validation errors, the post-submit
   confirmation — the content stays reachable instead of being clipped. */
.desk-embed #zsfeedbackFrame { width: 100% !important; }

.desk-fallback { padding: var(--s4); background: var(--surface-2); }
.desk-fallback p { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.desk-fallback p + p { margin-top: var(--s2); }
.desk-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px){
   .sup-form-sec { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 560px){
   .sup-form-sec { padding: var(--s4) var(--s3); }
   .desk-frame { min-height: 720px; }
}

/* ==========================================================================
   EMBEDDED CHECKOUT
   Stripe renders its own cross-origin iframe into #co-mount. Its interior is
   unreachable from here — the only supported way to restyle it is Stripe's
   appearance API, set server-side on the session. So this block sizes and
   frames the container and leaves the form itself alone.
   ========================================================================== */
.modal:has(#coview:not([hidden])) {
   width: min(640px, 100%);
   max-height: min(92vh, 900px);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 32px 26px 26px;
}
#coview h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.03em; }
.co-status { color: var(--muted); font-size: 14px; min-height: 18px; margin-bottom: 14px; }
.co-status:empty { min-height: 0; margin-bottom: 0; }
/* Stripe measures its own height and grows the iframe; this only reserves
   space while it is still loading, so the modal does not snap open. */
#co-mount { min-height: 320px; }
#co-mount:empty { background: var(--surface-2); border-radius: var(--r-sm); }

@media (max-width: 560px){
   .modal:has(#coview:not([hidden])) { padding: 28px 16px 18px; max-height: 94vh; }
}

/* ==========================================================================
   DOCUMENTATION
   Generated by build-docs.js from docs/*.md. The prose styles below have to
   cover whatever Markdown produces, so they are written against bare tags
   inside .doc-article / .q-answer rather than against classes.
   ========================================================================== */
.doc-section { margin-bottom: var(--s6); }
.doc-h { font-size: 13px; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 600; margin-bottom: var(--s2); }
.doc-lede { color: var(--muted); font-size: 15.5px; margin-bottom: var(--s3); max-width: 62ch; }
.doc-empty { color: var(--muted); font-size: 15px; padding: var(--s4); background: var(--surface);
   border-radius: var(--r-md); }
.doc-empty code { font-family: var(--mono); font-size: 13px; background: var(--surface-2);
   padding: 2px 6px; border-radius: 4px; }

/* ---------- Question cards ---------- */
.q-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.q-card {
   display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
   padding: var(--s3); font: inherit; color: var(--ink);
   transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.q-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.q-card:active { transform: translateY(0); }
.q-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.q-title { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.q-sum { color: var(--muted); font-size: 14px; line-height: 1.5; }
.q-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
   font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
   color: var(--copper-ink); font-weight: 600; }
.q-open svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.q-card:hover .q-open svg { transform: translateX(3px); }

/* The answers sit in the DOM so they are indexed and findable, but must never
   paint until borrowed by the modal. */
.answer-store { display: none; }

/* ---------- PDF cards ---------- */
.pdf-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pdf-card {
   display: flex; align-items: center; gap: var(--s2); text-align: left; cursor: pointer;
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
   padding: var(--s3); font: inherit; color: var(--ink);
   transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pdf-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.pdf-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pdf-ico { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm);
   background: var(--surface-2); color: var(--copper-ink); }
.pdf-ico svg { width: 19px; height: 19px; }
.pdf-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdf-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; }
.pdf-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Article layout ---------- */
.doc-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* The aside must span the full height of the (tall) article column, or the
   sticky child below has nothing to stick within: a sticky element is confined
   to its containing block, so a short sidebar releases the instant you scroll
   past it. `align-items: start` above keeps the column top-aligned; this opts
   the aside back into stretching so "Contents" can follow the scroll. */
.doc-nav { align-self: stretch; }
.doc-nav-in { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; }
.doc-nav-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
   color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.doc-nav a { display: block; padding: 7px 11px; border-radius: var(--r-sm); font-size: 14.5px;
   color: var(--muted); border-left: 2px solid transparent; transition: color .2s, background .2s, border-color .2s; }
.doc-nav a:hover { color: var(--ink); background: var(--surface); }
.doc-nav a.active { color: var(--ink); font-weight: 600; border-left-color: var(--copper); background: var(--surface); }
@media (max-width: 900px){
   .doc-layout { grid-template-columns: 1fr; gap: var(--s3); }
   .doc-nav-in { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
   .doc-nav-title { width: 100%; margin-bottom: 2px; }
   .doc-nav a { border-left: 0; background: var(--surface); border: 1px solid var(--line); }
}

/* ---------- Generated prose ----------
   Applies to article bodies and to answers once they are inside the modal. */
.doc-article, .q-answer { color: var(--ink); }
.doc-article + .doc-article { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.doc-article { scroll-margin-top: 110px; }
/* In-page TOC links jump to headings, not just to the article top — each needs
   to clear the sticky nav too. */
.doc-article :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 110px; }
.doc-article h1, .q-answer-title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 var(--s2); }
.doc-article h2, .q-answer h2 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.03em; margin: var(--s4) 0 var(--s2); }
.doc-article h3, .q-answer h3 { font-size: 17px; letter-spacing: -.02em; margin: var(--s3) 0 10px; }
.doc-article p, .q-answer p { color: var(--muted); font-size: 16px; line-height: 1.68; margin: 0 0 var(--s2); max-width: 72ch; }
.doc-article ul, .doc-article ol, .q-answer ul, .q-answer ol { color: var(--muted); font-size: 16px; line-height: 1.68;
   margin: 0 0 var(--s2); padding-left: 22px; max-width: 72ch; }
.doc-article li, .q-answer li { margin-bottom: 6px; }
.doc-article li::marker, .q-answer li::marker { color: var(--copper-ink); }
.doc-article a, .q-answer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc-article strong, .q-answer strong { color: var(--ink); font-weight: 700; }
.doc-article code, .q-answer code { font-family: var(--mono); font-size: .89em; background: var(--surface-2);
   padding: 2px 6px; border-radius: 4px; color: var(--ink); }
.doc-article pre, .q-answer pre { background: var(--accent); color: #e8e5e0; padding: var(--s3);
   border-radius: var(--r-sm); overflow-x: auto; margin: 0 0 var(--s3); font-size: 13.5px; line-height: 1.6; }
.doc-article pre code, .q-answer pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.doc-article blockquote, .q-answer blockquote { margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
   border-left: 3px solid var(--copper); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.doc-article blockquote p, .q-answer blockquote p { margin: 0; color: var(--ink-2); }
.doc-article hr, .q-answer hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.doc-article img, .q-answer img { border-radius: var(--r-sm); margin: 0 0 var(--s3); }
/* Tables can exceed the column; scroll them rather than the page. */
.doc-article table, .q-answer table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 var(--s3); display: block; overflow-x: auto; }
.doc-article th, .q-answer th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
   text-transform: uppercase; color: var(--copper-ink); padding: 10px 14px; background: var(--surface-2); white-space: nowrap; }
.doc-article td, .q-answer td { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }

/* ---------- Doc modal ---------- */
.doc-modal { width: min(720px, 100%); max-height: min(90vh, 880px); overflow-y: auto;
   overscroll-behavior: contain; padding: 34px 30px 28px; }
.doc-modal .q-answer[hidden] { display: block; }
.pdf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
   flex-wrap: wrap; margin-bottom: var(--s2); padding-right: 34px; }
.pdf-head h3 { font-size: 20px; letter-spacing: -.03em; }
/* .modal .btn is width:100% for the checkout modal's full-width actions. The
   download control is an inline button beside a heading, so it opts out. */
.doc-modal .btn.pdf-dl { width: auto; margin-top: 0; padding: 9px 16px; min-height: 40px;
   font-size: 13.5px; border: 1px solid var(--line); }
.doc-modal.pdf-mode { width: min(980px, 100%); }
.pdf-frame { display: block; width: 100%; height: min(70vh, 740px);
   border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
/* Always visible, below the frame — see the note in docs.js. */
.pdf-fallback { color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; }
.pdf-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px){
   .doc-modal { padding: 28px 18px 20px; max-height: 94vh; }
   .pdf-frame { height: 62vh; }
   .pdf-head { padding-right: 30px; }
}

/* ---------- Documentation category tabs ----------
   Generated from the folders under docs/. The strip scrolls sideways rather
   than wrapping: a tab row that reflows to two lines stops reading as one
   control, and there may be more than two categories later. */
.doc-tabs {
   display: flex; gap: 4px; margin-bottom: var(--s5);
   border-bottom: 1px solid var(--line);
   overflow-x: auto; scrollbar-width: none;
}
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tab {
   position: relative; cursor: pointer; white-space: nowrap;
   background: none; border: 0; padding: 13px 18px; margin-bottom: -1px;
   font: 600 15px/1 var(--sans); letter-spacing: -.01em; color: var(--muted);
   border-bottom: 2px solid transparent;
   transition: color .2s var(--ease), border-color .2s var(--ease);
}
.doc-tab:hover { color: var(--ink); }
.doc-tab.active { color: var(--ink); border-bottom-color: var(--copper); }
.doc-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: var(--r-sm); }

/* Each panel repeats the three section headings, so they need their own
   rhythm — the first must not push off the tab strip. */
.doc-panel > .doc-h { margin-top: var(--s6); }
.doc-panel > .doc-h:first-child { margin-top: 0; }
.doc-panel > .q-grid, .doc-panel > .pdf-grid { margin-bottom: var(--s2); }