/* ============================================================
   Synaptive - shared design system
   ============================================================ */
/* ============================================================
   PALETTE
   One paper, one text colour, one near-black, shared by every page.
   Only the accent changes per page. The five accents are generated in
   OKLCH at identical lightness and chroma (L .4554, C .1216), the
   chroma taken from the brand copper measured off the product
   photography. Matched L and C is what makes a themed set read as one
   system rather than six unrelated picks: no page feels louder or
   weaker than another.

   L is solved against --bg3, the darkest ground an accent is ever
   drawn on, not against the paper. Tuning to the paper is the obvious
   mistake and it leaves accent-on-bg2 at about 4.4:1, just under AA.
   Every accent now clears 4.75:1 on bg3 and 6.3:1 on the paper.

   bg2/bg3 carry a trace of the theme hue (C .010/.020) so a page has
   character without introducing a second paper colour.
   ============================================================ */
:root{
  --bg:#F3F7F9; --bg2:#F1E8E5; --bg3:#E4D4CE;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#8C3B12; --accent2:#BF7555; --accent-deep:#752600;
  --ink:#0D1115; --on-ink:#F3F7F9;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* The wordmark is Helvetica. Measured off the supplied logo: x-height is
     73.4% of cap and the whole word spans 5.406 cap heights, which needs
     -.093em tracking to reproduce. Arial is metric-compatible for Windows. */
  --wordmark:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --wordmark-track:-.093em;
  --maxw:1180px;
}
body[data-theme="clinical"]{
  --bg:#F3F7F9; --bg2:#E4ECF0; --bg3:#CBDBE2;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#006289; --accent2:#3198BA; --accent-deep:#004E74;
  --ink:#0D1115; --on-ink:#F3F7F9;
}
body[data-theme="technical"]{
  --bg:#F3F7F9; --bg2:#E7EAF1; --bg3:#D2D8E6;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#3A519A; --accent2:#6F88CB; --accent-deep:#283D84;
  --ink:#0D1115; --on-ink:#F3F7F9;
}
body[data-theme="research"]{
  --bg:#F3F7F9; --bg2:#EFEAE3; --bg3:#E1D6CA;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#7F4800; --accent2:#B2803C; --accent-deep:#6A3400;
  --ink:#0D1115; --on-ink:#F3F7F9;
}
body[data-theme="archive"]{
  --bg:#F3F7F9; --bg2:#E6ECE7; --bg3:#CFDCD1;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#09692F; --accent2:#599D68; --accent-deep:#00541B;
  --ink:#0D1115; --on-ink:#F3F7F9;
}
body[data-theme="company"]{
  --bg:#F3F7F9; --bg2:#F1E8E5; --bg3:#E4D4CE;
  --band:#F3F7F9;
  --text:#151A1F; --muted:rgba(21,26,31,.70); --faint:rgba(21,26,31,.52);
  --line:rgba(21,26,31,.14); --line2:rgba(21,26,31,.26);
  --accent:#8C3B12; --accent2:#BF7555; --accent-deep:#752600;
  --ink:#0D1115; --on-ink:#F3F7F9;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* overflow-x must be `clip`, not `hidden`: `hidden` turns html/body into scroll
   containers, and position:sticky then resolves against that container instead
   of the viewport, so the sticky header and subnav silently stop sticking. */
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  font-size:17px;line-height:1.6;letter-spacing:normal;max-width:100%;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
/* 600, not 700. The headline carried more weight than the body could answer,
   which is what made the hierarchy read as a marketing page rather than a
   document. Tracking is tightened at display sizes and left alone at h3. */
h1,h2{font-weight:600;letter-spacing:-.021em;}
h3{font-weight:600;letter-spacing:-.008em;}
.label{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:var(--text);margin-top:28px;transition:gap .15s,color .15s;}
.arrow:hover{gap:12px;color:var(--accent);}
section{padding:104px 0;}
h2{font-size:clamp(27px,3.1vw,38px);line-height:1.12;}
.lead{font-size:19px;color:var(--muted);line-height:1.62;margin-top:22px;max-width:54ch;}
.sec-head{max-width:680px;margin-bottom:56px;}
.section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* NAV */
/* Scoped to the site header only. The breadcrumb bar and the in-page subnav are
   also <nav> elements, so a bare `nav` selector gave them the sticky header's
   position, z-index and blur: two elements at z-index 50 with the crumbs later
   in the DOM, which painted the breadcrumb over the header and its dropdowns. */
body > nav{position:sticky;top:0;z-index:50;background:rgba(243,247,249,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:74px;display:flex;align-items:center;justify-content:space-between;}
.brand{font-family:var(--wordmark);font-weight:700;font-size:22px;letter-spacing:var(--wordmark-track);}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-size:14.5px;color:var(--muted);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-cta{color:var(--text)!important;border:1px solid var(--line2);padding:9px 17px;border-radius:2px;font-size:14px;transition:.15s;}
.nav-cta:hover{background:var(--text);color:var(--bg)!important;}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* NAV DROPDOWNS */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-item>a{display:inline-flex;align-items:center;gap:5px;}
.nav-item>a::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.55;}
.submenu{position:absolute;top:100%;left:-18px;min-width:232px;padding:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 14px 34px rgba(21,26,31,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:60;}
/* Scoped to real pointers. On a touch screen the first tap on an element that
   has :hover styles is consumed applying that hover state, and the click only
   lands on the second tap: the double-tap needed to open a nav section. */
@media(hover:hover) and (min-width:961px){
  .nav-item:hover>.submenu,.nav-item:focus-within>.submenu{opacity:1;visibility:visible;transform:translateY(0);}
}
.submenu a{display:block;padding:9px 12px;border-radius:3px;font-size:14px;color:var(--muted);
  transition:background .12s,color .12s;}
.submenu a:hover,.submenu a:focus-visible{background:var(--bg2);color:var(--text);}
.submenu a b{display:block;font-weight:600;color:var(--text);font-size:14px;}
.submenu a span{display:block;font-size:12.5px;color:var(--faint);margin-top:1px;}
.submenu a:hover span{color:var(--muted);}
/* a hover bridge, so the pointer can cross the gap into the panel */
.nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;}

@media(max-width:960px){
  /* On the mobile menu each section is a disclosure: the top-level row toggles
     its own submenu rather than navigating. Nothing is lost by that, because
     the first entry of every submenu is the section's own landing page. */
  .nav-item{display:block;border-bottom:1px solid var(--line);}
  .nav-item::after{display:none;}
  .nav-item>a{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:15px 0;font-size:17px;color:var(--text);}
  /* chevron, rotating to point down when the section is open */
  .nav-item>a::after{display:block;content:'';width:8px;height:8px;flex:0 0 auto;
    margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg);opacity:.55;transition:transform .2s;}
  .nav-item.open>a::after{transform:rotate(45deg);}

  .submenu{position:static;opacity:1;visibility:hidden;transform:none;min-width:0;
    background:none;border:0;box-shadow:none;border-radius:0;
    display:grid;grid-template-rows:0fr;padding:0;
    transition:grid-template-rows .22s ease,visibility .22s,padding .22s;}
  .submenu>.submenu-in,.submenu>*{overflow:hidden;min-height:0;}
  .nav-item.open>.submenu{visibility:visible;grid-template-rows:1fr;padding:0 0 10px;}
  /* the grid-rows transition needs a single child to collapse, so the links are
     wrapped at runtime by nav.js; this is the fallback if that has not run */
  .submenu a{padding:11px 0 11px 16px;border-bottom:1px solid var(--line);font-size:15px;}
  .submenu a:last-child{border-bottom:0;}
  .submenu a span{display:none;}
  .nav-links>a{padding:15px 0;font-size:17px;color:var(--text);border-bottom:1px solid var(--line);}
  .nav-links>a.nav-cta{margin-top:18px;border:1px solid var(--line2);padding:15px 20px;text-align:center;}
}

/* BUTTONS */
.btn{display:inline-block;font-size:15px;font-weight:500;padding:14px 24px;border-radius:2px;transition:.15s;
  font-family:inherit;background:none;border:none;cursor:pointer;text-align:center;line-height:normal;}
.btn-primary{background:var(--accent2);color:var(--ink);box-shadow:0 1px 0 rgba(21,26,31,.10);}
.btn-primary:hover{background:var(--accent);color:var(--bg);transform:translateY(-1px);box-shadow:0 6px 18px rgba(160,77,39,.28);}
.btn-line{color:var(--text);border-bottom:1px solid var(--line2);padding:14px 2px;border-radius:0;}
.btn-line:hover{border-color:var(--accent);color:var(--accent);}
.btn-dark{background:var(--ink);color:var(--bg);}
.cta-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:38px;}

/* HOME HERO */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;padding-top:88px;padding-bottom:96px;}
.hero h1{font-size:clamp(36px,4.2vw,54px);line-height:1.06;}
.hero-sub{font-size:19px;color:var(--muted);max-width:46ch;margin-top:26px;line-height:1.55;}
.hero-meta{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:20px 28px;border-top:1px solid var(--line);padding-top:22px;}
.hero-meta div{font-size:13.5px;color:var(--muted);}
.hero-meta b{display:block;font-weight:700;font-size:15px;color:var(--text);margin-bottom:3px;}
.hero-visual{position:relative;height:540px;background:radial-gradient(58% 58% at 50% 42%,rgba(208,155,139,.20),transparent 72%);}
/* touch-action:pan-y is the whole trick on a phone. The browser keeps vertical
   panning for itself, so the page scrolls normally over the canvas, and only
   horizontal gestures are delivered to us as pointer events to rotate with. */
#electrode-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;
  outline:none;-webkit-tap-highlight-color:transparent;}
.hero-visual.is-grabbing #electrode-canvas{cursor:grabbing;}
#electrode-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px;}

/* Nobody drags a thing they do not know is draggable. The hint sits under the
   model and retires permanently the first time it is used. */
.hero-visual::after{content:'Drag to rotate';position:absolute;left:50%;bottom:6px;
  transform:translateX(-50%);pointer-events:none;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);opacity:.85;transition:opacity .35s;}
.hero-visual.has-dragged::after{opacity:0;}
@media(hover:none){.hero-visual::after{content:'Swipe to rotate';}}

/* HERO STRIP: a wide product image opening every interior page */
.herostrip{display:block;width:100%;height:300px;object-fit:cover;border-bottom:1px solid var(--line);}
@media(max-width:960px){.herostrip{height:210px;}}
@media(max-width:700px){.herostrip{height:160px;}}

/* INTERIOR PAGE HERO */
.page-hero{padding:78px 0 62px;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(34px,3.9vw,48px);line-height:1.08;max-width:18ch;}
.page-hero .lead{font-size:20px;max-width:58ch;}
.page-hero.center{text-align:center;}
.page-hero.center h1,.page-hero.center .lead{margin-left:auto;margin-right:auto;}

/* PROSE */
.prose{max-width:70ch;}
.prose p{font-size:16.5px;color:var(--muted);line-height:1.72;margin-bottom:1.1rem;}
.prose h2{margin:2.4rem 0 1rem;}
.prose h3{font-size:20px;margin:1.8rem 0 .6rem;}
.prose ul{margin:0 0 1.3rem 1.1rem;}
.prose li{color:var(--muted);line-height:1.72;margin-bottom:.45rem;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.prose a:hover{color:var(--text);}

/* LOGO CAROUSEL */
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text);padding:26px 0;overflow:hidden;}
.band .l{max-width:var(--maxw);margin:0 auto 18px;padding:0 40px;font-size:13px;color:var(--faint);}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;align-items:center;gap:52px;width:max-content;animation:scroll 44s linear infinite;padding-left:64px;}
/* The logos are pre-normalised to transparent-ground PNGs (images/logos), so
   they need no tile to hide a white rectangle behind them. They sit as marks
   directly on the band: grey at rest, their own colour under the cursor. */
.logo-tile{height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.logo-tile img{max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) brightness(.34) contrast(1.12);opacity:.72;
  transition:filter .28s ease,opacity .28s ease;}
.logo-tile:hover img{filter:none;opacity:1;}
/* Hovering a moving target is a losing game, so the row holds still while the
   pointer is over it. */
.marquee:hover .marquee-track{animation-play-state:paused;}
@media(hover:none){.logo-tile img{opacity:.7;}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* METRICS */
.metrics-in{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);}
.metric{padding:56px 44px;border-right:1px solid var(--line);}
.metric:first-child{padding-left:0;}
.metric:last-child{border-right:0;padding-right:0;}
.metric b{font-weight:700;font-size:clamp(38px,4.2vw,52px);letter-spacing:-.02em;line-height:1.08;display:block;margin-bottom:14px;font-variant-numeric:tabular-nums;}
.metric span{font-size:15px;color:var(--muted);line-height:1.5;display:block;max-width:30ch;}

/* TWO-COLUMN (text + media) */
.two{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.two.rev>*:first-child{order:2;}
.stat-line{margin-top:36px;display:flex;gap:24px;align-items:flex-start;}
.stat-line b{font-weight:700;font-size:60px;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.stat-line p{font-size:15px;color:var(--muted);max-width:36ch;line-height:1.55;padding-top:8px;}
.diagram{border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.diagram img{width:100%;height:auto;display:block;}
.media img{width:100%;height:440px;object-fit:cover;border-radius:3px;border:1px solid var(--line);}

/* FEATURE / NUMBERED GRID */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.feat{padding:38px 44px 34px;border-right:1px solid var(--line);}
.feat:first-child{padding-left:0;}
.feat:last-child{border-right:0;padding-right:0;}
.feat .n{font-weight:700;font-size:15px;color:var(--accent);margin-bottom:20px;}
.feat h3{font-size:19px;font-weight:700;margin-bottom:10px;}
.feat p{font-size:14.5px;color:var(--muted);line-height:1.55;}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.cards.three{grid-template-columns:repeat(3,1fr);}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:34px;}
.card .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{color:var(--muted);font-size:15px;line-height:1.62;}
.card ul{margin:14px 0 0 1.05rem;}
.card li{color:var(--muted);font-size:14.5px;line-height:1.5;margin-bottom:.35rem;}

/* ROUTER CARDS */
.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.route{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:44px;min-height:260px;display:flex;flex-direction:column;transition:.18s;}
.route:hover{border-color:var(--line2);transform:translateY(-3px);}
.route .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.route h3{font-size:25px;font-weight:700;margin-bottom:14px;}
.route p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:auto;}
.route .go{margin-top:30px;font-weight:500;display:inline-flex;gap:8px;transition:gap .15s;}
.route:hover .go{gap:12px;color:var(--accent);}

/* PATHWAY CARDS (homepage "where you fit" - distinct from .route) */
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.path{background:var(--bg);padding:52px 48px;display:flex;flex-direction:column;transition:background .18s;position:relative;}
.path:hover{background:var(--bg2);}
.path-num{font-size:15px;font-weight:700;color:var(--accent);width:40px;height:40px;border:1.5px solid var(--line2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:28px;}
.path .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.path h3{font-size:27px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em;}
.path p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:32px;}
.path .btn{margin-top:auto;align-self:flex-start;}

/* STEPS */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.step{background:var(--bg);padding:30px 32px;display:grid;grid-template-columns:52px 1fr;gap:22px;align-items:start;}
.step .sn{font-weight:700;color:var(--accent);font-size:22px;}
.step h3{font-size:18px;margin-bottom:7px;}
.step p{color:var(--muted);font-size:15px;line-height:1.62;}

/* SPEC TABLE */
.spec-table{width:100%;table-layout:fixed;border-collapse:collapse;border-top:1px solid var(--line);}
.spec-table th,.spec-table td{text-align:left;padding:17px 4px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top;word-wrap:break-word;}
.spec-table th{color:var(--faint);font-weight:500;width:34%;padding-right:24px;}
.spec-table td{color:var(--text);}
@media(max-width:600px){.spec-table th{width:38%;font-size:13.5px;}.spec-table td{font-size:13.5px;}}

/* QUOTE */
.quote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quote blockquote{font-weight:500;font-size:clamp(25px,3.2vw,38px);line-height:1.32;letter-spacing:-.01em;max-width:22ch;}
.quote .qgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center;}
.quote cite{font-style:normal;font-size:14px;color:var(--faint);display:block;margin-top:34px;}
.quote-img img{width:100%;height:380px;object-fit:cover;object-position:center 42%;border-radius:3px;border:1px solid var(--line);}

/* FORMS */
.form{max-width:660px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:3px;color:var(--text);font-family:inherit;font-size:15px;padding:12px 14px;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* JOURNAL */
.posts{border-top:1px solid var(--line);}
.post-row{display:grid;grid-template-columns:150px 1fr;gap:30px;padding:32px 0;border-bottom:1px solid var(--line);transition:.15s;}
.post-row:hover{background:rgba(21,26,31,.03);}
.post-row .date{color:var(--faint);font-size:14px;}
.post-row h3{font-size:22px;margin-bottom:9px;}
.post-row p{color:var(--muted);font-size:15px;line-height:1.62;max-width:62ch;}
.post-row .tag{color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.article{max-width:720px;margin:0 auto;}
.article .meta{color:var(--faint);font-size:14px;margin-bottom:38px;}

/* CLOSING */
.close-card{position:relative;background:var(--bg2);border:1px solid var(--line2);border-radius:3px;padding:72px 76px;display:flex;justify-content:space-between;align-items:center;gap:44px;flex-wrap:wrap;overflow:hidden;}
.close-card::before{content:'';position:absolute;top:-50%;right:-8%;width:55%;height:200%;background:radial-gradient(circle,rgba(208,155,139,.16) 0%,transparent 70%);pointer-events:none;}
.close-card .eyebrow-line{position:relative;z-index:1;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.close-card h2{position:relative;z-index:1;color:var(--text);max-width:16ch;}
.close-card .cta-row{position:relative;z-index:1;}

/* FOOTER */
footer{padding:76px 0 36px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line);}
.foot-brand .fb{font-family:var(--wordmark);font-weight:700;font-size:22px;letter-spacing:var(--wordmark-track);color:var(--text);margin-bottom:14px;}
.foot-brand p{font-size:14px;color:var(--muted);max-width:32ch;line-height:1.55;}
.foot-col h4{font-size:13px;font-weight:600;color:var(--faint);margin-bottom:16px;}
.foot-col a{display:block;font-size:14px;color:var(--muted);margin-bottom:11px;transition:.15s;}
.foot-col a:hover{color:var(--text);}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:var(--faint);}
.foot-bottom a{color:var(--muted);}
.foot-bottom a:hover{color:var(--text);}

@media(max-width:960px){
  .wrap,.nav-in,.metrics-in{
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  .nav-toggle{display:flex;}
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:74px;left:0;right:0;
    height:calc(100vh - 74px);height:calc(100dvh - 74px);
    background:var(--bg);padding:8px 20px calc(28px + env(safe-area-inset-bottom));
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s,transform .2s,visibility .2s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  /* While the menu is open the body is pinned at its current offset (see
     nav.js) so the page behind cannot scroll. A pinned body cannot host a
     sticky header, so the header is fixed for the duration - otherwise it,
     and the panel below it, land wherever the document top happens to be. */
  body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
  body.menu-open > nav{position:fixed;top:0;left:0;right:0;}
  .nav-links a{font-size:17px;padding:16px 0;border-bottom:1px solid var(--line);}
  .nav-links a.nav-cta{margin-top:18px;text-align:center;border:1px solid var(--line2);}
  .hero{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:56px;}
  .hero-visual{height:360px;}
  .metrics-in{grid-template-columns:1fr;}
  .metric{border-right:0;border-bottom:1px solid var(--line);padding:36px 0;}
  .metric:first-child{padding-left:0;}
  .two,.qgrid{grid-template-columns:1fr!important;gap:36px;}
  .two.rev>*:first-child{order:0;}
  .feat-grid{grid-template-columns:1fr;}
  .feat{border-right:0;border-bottom:1px solid var(--line);padding:30px 0;}
  .feat:last-child{border-bottom:0;}
  .cards,.cards.three,.route-grid,.path-grid,.path-grid.three,.form-row{grid-template-columns:1fr;}
  .path{padding:36px 28px;}
  .close-card{padding:44px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .post-row{grid-template-columns:1fr;gap:8px;}
  section{padding:68px 0;}
}

/* DECORATIVE BACKGROUND LINES
   Opt-in per section via data-lines, never applied blanket. Each variant is
   positioned for the kind of panel it sits behind, and anything with a table,
   a form or a dense grid is deliberately left plain, because artwork behind
   ruled rows reads as noise. Content sits above via .wrap's stacking level.

   The four SVGs are alpha masks, not coloured artwork: they carry the stroke
   shapes and the fade along each stroke, and the colour underneath comes from
   the page's own --accent/--accent2. That way the curves follow whatever theme
   the page is on instead of painting terracotta over a cool palette. */
.wrap{position:relative;z-index:1;}
[data-lines]{position:relative;overflow:hidden;}
[data-lines]::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(100deg,var(--accent) 0%,var(--accent2) 58%,var(--accent) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero>*{position:relative;z-index:1;}

/* sweep: broad flowing curves across a wide panel. Faded out across the left
   so the curves stop short of the text column and never run behind copy. The
   second mask layer is that fade; the two are intersected. */
[data-lines="sweep"]::before{
  opacity:.42;
  -webkit-mask-image:url('images/lines-sweep.svg');mask-image:url('images/lines-sweep.svg');
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:cover;mask-size:cover;
}
/* Text columns stay clear: the curves only carry weight to the right. */
[data-lines="sweep-right"]::before{
  opacity:.38;
  -webkit-mask-image:url('images/lines-sweep.svg');mask-image:url('images/lines-sweep.svg');
  -webkit-mask-position:right center;mask-position:right center;
  -webkit-mask-size:cover;mask-size:cover;
}
/* arc: concentric arcs anchored to the top-right. Suits short page headers
   and closing panels, where one confident gesture beats a busy field. */
[data-lines="arc"]::before{
  opacity:.42;
  -webkit-mask-image:url('images/lines-arc.svg');mask-image:url('images/lines-arc.svg');
  -webkit-mask-position:right -80px top -60px;mask-position:right -80px top -60px;
  -webkit-mask-size:auto 150%;mask-size:auto 150%;
}
[data-lines="arc-left"]::before{
  opacity:.36;transform:scaleX(-1);
  -webkit-mask-image:url('images/lines-arc.svg');mask-image:url('images/lines-arc.svg');
  -webkit-mask-position:left -80px bottom -60px;mask-position:left -80px bottom -60px;
  -webkit-mask-size:auto 150%;mask-size:auto 150%;
}
/* trace: a low rhythmic band, a nod to a recorded signal. Kept to a shallow
   strip along the bottom and faded out upward, so it reads as a footer to the
   panel rather than a field the copy has to sit on top of. */
[data-lines="trace"]::before{
  opacity:.3;
  -webkit-mask-image:url('images/lines-trace.svg');mask-image:url('images/lines-trace.svg');
  -webkit-mask-position:center bottom -30px;mask-position:center bottom -30px;
  -webkit-mask-size:118% auto;mask-size:118% auto;
}

/* The soft fades that hold the artwork off the text column need more than one
   mask layer, which only works where mask-composite does. Without it the extra
   layer would ADD to the art instead of clipping it, painting a solid block of
   accent over the panel, so the fades are opt-in behind a support query and
   older browsers simply get the un-faded artwork. */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  [data-lines="sweep"]::before{
    -webkit-mask-image:url('images/lines-sweep.svg'),linear-gradient(93deg,transparent 38%,rgba(0,0,0,.35) 52%,#000 72%);
    mask-image:url('images/lines-sweep.svg'),linear-gradient(93deg,transparent 38%,rgba(0,0,0,.35) 52%,#000 72%);
    -webkit-mask-position:center,center;mask-position:center,center;
    -webkit-mask-size:cover,cover;mask-size:cover,cover;
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  [data-lines="sweep-right"]::before{
    -webkit-mask-image:url('images/lines-sweep.svg'),linear-gradient(95deg,transparent 30%,rgba(0,0,0,.28) 55%,#000 82%);
    mask-image:url('images/lines-sweep.svg'),linear-gradient(95deg,transparent 30%,rgba(0,0,0,.28) 55%,#000 82%);
    -webkit-mask-position:right center,center;mask-position:right center,center;
    -webkit-mask-size:cover,cover;mask-size:cover,cover;
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  /* trace also gets a horizontal fade: both uses sit behind a left-aligned
     page header, and the waveform was crossing the body copy. */
  [data-lines="trace"]::before{
    -webkit-mask-image:url('images/lines-trace.svg'),linear-gradient(to bottom,transparent 34%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(100deg,transparent 34%,rgba(0,0,0,.4) 54%,#000 76%);
    mask-image:url('images/lines-trace.svg'),linear-gradient(to bottom,transparent 34%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(100deg,transparent 34%,rgba(0,0,0,.4) 54%,#000 76%);
    -webkit-mask-position:center bottom -30px,center,center;mask-position:center bottom -30px,center,center;
    -webkit-mask-size:118% auto,cover,cover;mask-size:118% auto,cover,cover;
    -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
  }
}
/* ripple: contact spreading from a point. For panels about the mechanism. */
[data-lines="ripple"]::before{
  opacity:.34;
  -webkit-mask-image:url('images/lines-ripple.svg');mask-image:url('images/lines-ripple.svg');
  -webkit-mask-position:right -260px center;mask-position:right -260px center;
  -webkit-mask-size:auto 190%;mask-size:auto 190%;
}
[data-lines="ripple-left"]::before{
  opacity:.28;
  -webkit-mask-image:url('images/lines-ripple.svg');mask-image:url('images/lines-ripple.svg');
  -webkit-mask-position:left -300px center;mask-position:left -300px center;
  -webkit-mask-size:auto 190%;mask-size:auto 190%;
}
@media(max-width:960px){
  [data-lines]::before{opacity:.2;}
}
@media(prefers-reduced-motion:no-preference){
  [data-lines]::before{transition:opacity .3s;}
}

/* IMAGE + PANEL BAND
   A product shot on one half, copy on a solid panel on the other. Text never
   sits over photography, so legibility does not depend on the crop. */
.imgband{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);}
.imgband>img{width:100%;height:100%;min-height:460px;object-fit:cover;display:block;}
.imgband .panel{display:flex;align-items:center;padding:72px 72px;background:var(--bg2);}
.imgband .inner{max-width:46ch;}
.imgband h2{margin-bottom:4px;}
.imgband.right>img{order:2;}
.imgband.dark .panel{background:var(--ink);}
.imgband.dark .panel,.imgband.dark h2{color:var(--on-ink);}
.imgband.dark .lead{color:rgba(243,247,249,.78);}
.imgband.dark .label{color:var(--accent2);}
.imgband.dark .arrow{color:var(--on-ink);}
.imgband.dark .arrow:hover{color:var(--accent2);}
.imgband.dark .btn-line{color:var(--on-ink);border-color:rgba(243,247,249,.45);}
.imgband.dark .btn-line:hover{color:var(--accent2);border-color:var(--accent2);}

/* Overlay variant: for shots that carry a genuinely empty area, the image runs
   full-bleed and the copy sits in that empty space over a scrim. Used only
   where the composition allows it; everything else uses the split panel. */
.imgband.overlay{display:block;position:relative;overflow:hidden;}
.imgband.overlay>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.imgband.overlay .panel{position:relative;z-index:2;background:none;min-height:520px;
  padding:72px 0;align-items:center;}
.imgband.overlay .panel::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;}
.imgband.overlay .panel>.inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%;}
.imgband.overlay .panel>.inner>*{max-width:40ch;}
.imgband.overlay .panel>.inner>h2{max-width:19ch;}
.imgband.overlay:not(.dark) .panel::before{
  background:linear-gradient(90deg,rgba(243,247,249,.97) 0%,rgba(243,247,249,.95) 36%,rgba(243,247,249,.72) 50%,rgba(243,247,249,0) 70%);}
.imgband.overlay.dark .panel{background:none;}
.imgband.overlay.dark .panel::before{
  background:linear-gradient(90deg,rgba(13,17,21,.94) 0%,rgba(13,17,21,.88) 32%,rgba(13,17,21,.55) 48%,rgba(13,17,21,0) 68%);}

/* bare: the photograph keeps the right-hand side clean and the scrim covers
   only the type. Measured against the actual pixels of band-standing.jpg in
   the text column: with no scrim the 18px lead sat at 3.1:1 against the
   brightest 5% of the image, under the 4.5 AA floor. The old "~5.1:1" note
   was the mean, which hides exactly the bright specular edges the type falls
   on. At .48 fading out by 70% the worst pixel measures 5.2:1 and the
   electrode itself is never covered. */
.imgband.overlay.bare .panel::before{display:block;
  background:linear-gradient(90deg,rgba(13,17,21,.48) 0%,rgba(13,17,21,.44) 34%,rgba(13,17,21,.20) 54%,rgba(13,17,21,0) 70%);}
.imgband.overlay.bare .panel{text-shadow:0 1px 14px rgba(13,17,21,.34);}

/* THIN DIVIDER STRIP
   A slim full-bleed detail shot used to break up long pages. Decorative only. */
.strip{display:block;width:100%;height:190px;object-fit:cover;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* PORTRAIT MEDIA SLOT
   The product shots are 4:5, so this slot is built for upright images rather
   than cropping them into the site's older landscape frames. */
.two.portrait{grid-template-columns:1fr .82fr;gap:64px;}
.two.portrait.rev{grid-template-columns:.82fr 1fr;}
.figure{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);}
.figure img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;}
.figure.square img{aspect-ratio:1/1;}
.figure.wide img{aspect-ratio:16/10;}
.figure.plot img{aspect-ratio:auto;height:auto;object-fit:contain;}
.figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:12.5px;
  color:var(--on-ink);background:linear-gradient(transparent,rgba(13,17,21,.72));}

@media(max-width:960px){
  .two.portrait,.two.portrait.rev{grid-template-columns:1fr!important;}
}
@media(max-width:960px){
  .imgband.overlay{display:grid;}
  .imgband.overlay>img{position:relative;}
  .imgband.overlay .panel{min-height:0;padding:44px 40px;background:var(--bg2);}
  /* the bare variant keeps its overlay: it is the one full-bleed moment in the
     scroll and it should not become another panel of text on tan */
  .imgband.overlay.bare{position:relative;}
  .imgband.overlay.bare>img{position:absolute;inset:0;width:100%;height:100%;
    min-height:0;object-fit:cover;}
  /* Text goes to the TOP on a phone. The product sits low in this frame and the
     crop cannot move it (the source is only 37px wider than the box at this
     size), so bottom-aligned copy ran straight through the electrode. The upper
     half is clean ground. */
  /* An image band is a full-bleed picture, not a padded section, but it is a
     <section> so it was inheriting 56px top and bottom. That sat on top of the
     panel height and left a dead strip of ground at each end. Height comes from
     the panel alone. */
  .imgband{padding:0;}
  .imgband.overlay.bare .panel{position:relative;background:none;min-height:480px;
    display:flex;align-items:flex-start;padding:0;}
  /* beats `.imgband.overlay .panel>.inner{padding:0}` below, which was leaving
     the headline flush against the screen edge */
  .imgband.overlay.bare .panel>.inner{padding:36px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left));}
  /* .bare keeps its overlay on mobile; everything else falls back to a panel */
  .imgband.overlay.dark:not(.bare) .panel{background:var(--ink);}
  .imgband.overlay .panel::before{display:none;}
  .imgband.overlay .panel>.inner{padding:0;}
  .imgband.overlay .panel>.inner>*{max-width:none;}
  .imgband{grid-template-columns:1fr;}
  .imgband>img,.imgband.right>img{order:0;min-height:0;height:300px;}
  .imgband .panel{padding:44px 40px;}
}
@media(max-width:700px){
  .imgband>img,.imgband.right>img{height:230px;}
  .imgband .panel{padding:34px 20px;}
  .imgband .inner{max-width:none;}
  .strip{height:120px;}
  .figure img{aspect-ratio:4/3;}
}

/* BREADCRUMBS */
.crumbs{border-bottom:1px solid var(--line);background:var(--bg);}
.crumbs .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px;font-size:12.5px;color:var(--faint);}
.crumbs a{color:var(--muted);transition:color .15s;}
.crumbs a:hover{color:var(--accent);}
.crumbs span[aria-current]{color:var(--text);font-weight:500;}
.crumbs .sep{opacity:.5;}

/* IN-PAGE SUB-NAVIGATION (long reference pages) */
.subnav{position:sticky;top:74px;z-index:40;background:rgba(243,247,249,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.subnav .wrap{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav a{white-space:nowrap;font-size:13.5px;color:var(--muted);padding:15px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.subnav a:hover{color:var(--text);}
.subnav a.current{color:var(--text);border-bottom-color:var(--accent);}
@media(max-width:960px){.subnav{top:74px;}.subnav a{font-size:13px;}}

/* Anchor targets stop below the sticky chrome rather than under it. Without
   this every in-page link (#faq, #compare, #enquire ...) scrolls the section
   heading to y=0, where the 74px header - 124px with a subnav - covers it. */
section[id]{scroll-margin-top:96px;}
body:has(.subnav) section[id]{scroll-margin-top:142px;}

/* PRODUCT-COMPANY COMPONENTS */
.ruo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:5px 12px;margin-bottom:18px;}
.ruo::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);}
.ruo.dev{color:var(--muted);border-color:var(--line2);}
.ruo.dev::before{background:var(--faint);}
.dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.dl a,.dl .soon{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--bg);padding:18px 22px;font-size:15px;font-weight:500;transition:background .15s;}
.dl a:hover{background:var(--bg2);}
.dl .soon{color:var(--faint);pointer-events:none;}
.dl .tag{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);white-space:nowrap;}
.dl .soon .tag{color:var(--faint);}
.faq{border-top:1px solid var(--line);max-width:760px;}
.faq details{border-bottom:1px solid var(--line);padding:20px 0;}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--accent);font-size:22px;font-weight:400;line-height:1;flex-shrink:0;}
.faq details[open] summary::after{content:'\2013';}
.faq details p{color:var(--muted);margin-top:12px;line-height:1.62;max-width:68ch;font-size:15.5px;}
.foot-legal{font-size:13px;color:var(--faint);line-height:1.6;max-width:86ch;padding:24px 0 0;}
.foot-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.foot-legal a:hover{color:var(--text);}
.path-grid.three{grid-template-columns:1fr 1fr 1fr;}

/* KEYBOARD FOCUS, small-screen tap targets, reduced motion */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
@media(max-width:600px){
  .cta-row{gap:14px;}
  .cta-row .btn-primary{flex:1 1 100%;}
  .btn{min-height:46px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee-track{animation:none;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* COOKIE CONSENT BANNER (added via consent.js) */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:10000;
  background:var(--bg2); border-top:1px solid var(--line2);
  box-shadow:0 -8px 30px rgba(21,26,31,.18);
}
.cookie-banner-inner{
  max-width:var(--maxw); margin:0 auto; padding:20px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cookie-banner-inner p{
  margin:0; font-size:14px; color:var(--muted); max-width:60ch; line-height:1.5;
}
.cookie-banner-inner p a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner-actions .btn{padding:10px 20px; font-size:14px;}
@media(max-width:640px){
  .cookie-banner-inner{padding:18px 20px; flex-direction:column; align-items:stretch; text-align:left;}
  .cookie-banner-actions{justify-content:flex-end;}
}

/* ============================================================
   MOBILE REFINEMENT (<=700px)
   Kept last so it always wins the cascade. Everything here is
   about making narrow screens read like a considered layout
   rather than a squeezed desktop one.
   ============================================================ */
@media(max-width:700px){

  /* Rhythm: tighter vertical space, so pages don't feel endless */
  section{padding:56px 0;}
  .sec-head{margin-bottom:32px;}
  .page-hero{padding:44px 0 40px;}
  .hero{padding-top:36px;padding-bottom:44px;gap:24px;}
  .lead{font-size:17.5px;margin-top:16px;}
  .page-hero .lead{font-size:17.5px;}
  .hero-sub{font-size:17px;margin-top:18px;}
  h2{font-size:clamp(25px,6.4vw,30px);}
  .hero h1{font-size:clamp(30px,8.2vw,37px);}
  .page-hero h1{font-size:clamp(29px,7.8vw,36px);max-width:none;}

  /* Decorative curves are hidden: with no side column on a phone they
     can only ever sit behind the copy, which we don't want. */
  [data-lines]::before{display:none;}

  /* Buttons: both actions become full-width, so the secondary reads as a
     real button instead of a stray underlined link under a big one. */
  .cta-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px;}
  .cta-row .btn{width:100%;}
  .cta-row .btn-line{border:1px solid var(--line2);border-radius:2px;padding:14px 20px;}
  .cta-row .btn-line:hover{border-color:var(--accent);}

  /* Big stat + caption stack instead of fighting over ~180px each */
  .stat-line{flex-direction:column;gap:8px;margin-top:28px;}
  .stat-line b{font-size:52px;}
  .stat-line p{max-width:none;padding-top:0;}

  /* Cards and panels: reclaim the padding for content */
  .card{padding:24px 22px;}
  .route{padding:28px 24px;min-height:0;}
  .path{padding:30px 24px;}
  .close-card{padding:32px 24px;gap:24px;}
  .close-card h2{max-width:none;}
  .step{padding:22px 20px;grid-template-columns:34px 1fr;gap:14px;}
  .feat{padding:26px 0;}

  /* Two-column spec tables stack: label above value, full width each */
  .spec-table:not(.compare) tr{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  .spec-table:not(.compare) tr:last-child{border-bottom:0;}
  .spec-table:not(.compare) th,
  .spec-table:not(.compare) td{display:block;width:auto;padding:0;border:0;font-size:15px;}
  .spec-table:not(.compare) th{color:var(--faint);margin-bottom:5px;padding-right:0;}

  /* The 3-column comparison table can't stack meaningfully, so it scrolls
     sideways at a readable width instead of crushing to ~100px columns. */
  .spec-table.compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .spec-table.compare tbody{display:table;width:100%;min-width:560px;}

  /* Download rows: title over tag rather than squeezed side by side */
  .dl a,.dl .soon{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;}

  /* Media stops dominating the scroll */
  .media img{height:260px;}
  .quote-img img{height:230px;}
  .hero-visual{height:300px;}
  .diagram img{max-height:340px;object-fit:contain;}

  /* The closing card's glow is sized for a wide desktop panel; on a narrow
     card it never fades out and reads as a lighter rectangle, so drop it. */
  .close-card::before{display:none;}

  /* FAQ: room for the +/- affordance */
  .faq summary{font-size:16px;gap:14px;}
  .faq details p{font-size:15px;}

  /* In-page sub-nav scrolls with a hint of the next item */
  .subnav .wrap{gap:22px;padding-right:28px;}
  .subnav a{padding:13px 0;}

  /* Footer: single column below, long email allowed to wrap */
  /* Two columns of links with the brand across the top. Stacking all four
     blocks made the footer 1217px - 1.4 screens of footer under every page. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding-bottom:32px;}
  .foot-brand{grid-column:1 / -1;}
  .foot-brand p{max-width:44ch;}
  .foot-col h4{margin-bottom:12px;}
  .foot-col a{display:block;margin-bottom:9px;word-break:break-word;}
  /* Three link groups do not divide into two columns, so the last one runs
     full width and splits its own links rather than leaving an empty cell. */
  .foot-grid>.foot-col:last-child{grid-column:1 / -1;}
  .foot-grid>.foot-col:last-child a{display:inline-block;vertical-align:top;
    width:calc(50% - 9px);margin-right:14px;}
  .foot-grid>.foot-col:last-child a:nth-child(even){margin-right:0;}
  .foot-bottom{flex-direction:column;gap:12px;font-size:13px;}
  .foot-legal{font-size:13.5px;line-height:1.6;padding-top:20px;}

  /* Forms sit comfortably under the thumb */
  .field input,.field select,.field textarea{font-size:16px;padding:13px 14px;} /* 16px stops iOS zooming on focus */
  .form button[type=submit]{width:100%;}

  /* Tap targets. These text links are the main way into the next page on a
     phone but rendered at 23-25px tall, well under the 44px guideline, so
     they get height without changing how they look on desktop. */
  .arrow,.route .go{min-height:44px;align-items:center;font-size:16px;}
  .brand{display:inline-flex;align-items:center;min-height:44px;}
  .faq summary{min-height:52px;}
  .dl a,.dl .soon{min-height:56px;justify-content:center;}

  .crumbs .wrap{font-size:13px;}
}

@media(max-width:430px){
  /* stays two columns here - the narrow width is exactly where a stacked
     footer gets unreadably long */
  .foot-grid{gap:24px 14px;}
  .metric{padding:28px 0;}
  .card{padding:22px 18px;}
  .hero-meta{grid-template-columns:1fr 1fr;gap:16px 18px;}
}

/* ============================================================
   PER-PAGE THEMES
   Same token structure, shifted temperature and accent, so each
   audience gets its own character without leaving the brand.
   Every combination below is contrast-checked at 4.5:1 or better.
   ============================================================ */
/* Per-page palettes removed: the site carried six grounds and twelve accents.
   data-theme is kept on the pages as a structural hook but no longer recolours. */
/* Per-page themes: the paper, text and ink are identical everywhere; only
   --accent and the faint bg2/bg3 tint change. Defined with the palette above. */
body[data-theme]{background:var(--bg);color:var(--text);}
body[data-theme] > nav{background:color-mix(in srgb, var(--bg) 84%, transparent);}
body[data-theme] .subnav{background:color-mix(in srgb, var(--bg) 92%, transparent);}

/* INVERTED SECTION
   A dark block used to mark a genuine change of register on a page, so long
   documents break into distinct movements rather than one continuous scroll. */
.section-ink{background:var(--ink);color:var(--on-ink);
  border-top:1px solid rgba(243,247,249,.14);border-bottom:1px solid rgba(243,247,249,.14);}
.section-ink h2,.section-ink h3,.section-ink h4{color:var(--on-ink);}
.section-ink .lead,.section-ink p{color:rgba(243,247,249,.76);}
.section-ink .label{color:var(--accent2);}
.section-ink .card{background:rgba(243,247,249,.05);border-color:rgba(243,247,249,.16);}
.section-ink .card p{color:rgba(243,247,249,.74);}
.section-ink .card .rl{color:var(--accent2);}
.section-ink .arrow{color:var(--on-ink);}
.section-ink .arrow:hover{color:var(--accent2);}
.section-ink .spec-table{border-color:rgba(243,247,249,.18);}
.section-ink .spec-table th,.section-ink .spec-table td{border-color:rgba(243,247,249,.14);}
.section-ink .spec-table th{color:rgba(243,247,249,.55);}
.section-ink .spec-table td{color:var(--on-ink);}
.section-ink .btn-line{color:var(--on-ink);border-color:rgba(243,247,249,.45);}
.section-ink .rowlist{border-top-color:rgba(243,247,249,.28);}
.section-ink .rowlist .row{border-bottom-color:rgba(243,247,249,.14);}
.section-ink .rowlist .row .rl{color:var(--accent2);}
.section-ink .rowlist .row p{color:rgba(243,247,249,.74);}
.section-ink .rowlist .row:hover{background:rgba(243,247,249,.04);}
.section-ink .rowlist .row .arrow{margin-top:14px;font-size:14.5px;}

/* ============================================================
   VARIED SECTION LAYOUTS
   Alternatives to the card grid, so pages can change shape as
   they scroll instead of stacking the same box over and over.
   ============================================================ */

/* rowlist: bordered rows, no boxes. Index-like, reads as substance. */
.rowlist{border-top:1px solid var(--line2);}
.rowlist .row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:40px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.rowlist .row>h3{font-size:21px;letter-spacing:-.01em;}
.rowlist .row .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;}
.rowlist .row p{color:var(--muted);font-size:16px;line-height:1.65;max-width:62ch;}
.rowlist .row:hover{background:color-mix(in srgb, var(--text) 3%, transparent);}
.rowlist .row .side{display:block;}

/* flow: numbered steps on one horizontal run with a connecting rule */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;position:relative;margin-top:12px;}
.flow::before{content:'';position:absolute;top:19px;left:8%;right:8%;height:1px;background:var(--line2);}
.flow .fstep{position:relative;padding:0 26px;text-align:center;}
.flow .fstep:first-child{padding-left:0;}
.flow .fstep:last-child{padding-right:0;}
.flow .fnum{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent);
  color:var(--accent);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;position:relative;z-index:1;}
.flow .fstep .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;}
.flow .fstep .rl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;}
.flow .fstep h3{font-size:19px;margin-bottom:8px;}
.flow .fstep p{color:var(--muted);font-size:15px;line-height:1.6;max-width:34ch;margin:0 auto;}

/* bigquote: editorial pull-quote, no card, sits in open space */
.bigquote{max-width:22ch;font-size:clamp(28px,3.4vw,42px);line-height:1.22;font-weight:700;
  letter-spacing:-.015em;}
.bigquote-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start;}
.bigquote-wrap>div:first-child{position:relative;}
/* A big rounded quote mark sitting behind the words, not above them. Serif
   because the geometric sans has no real curl to its quotes. */
.bigquote-mark{position:absolute;top:-56px;left:-30px;z-index:0;
  font-family:Georgia,'Times New Roman',serif;font-size:clamp(180px,20vw,260px);
  line-height:1;color:var(--accent);opacity:.12;pointer-events:none;user-select:none;}
.bigquote-wrap .label,.bigquote,.bigquote-cite{position:relative;z-index:1;}
.bigquote-cite{margin-top:26px;font-size:14px;color:var(--faint);font-style:normal;display:block;}
.bigquote-side p{color:var(--muted);font-size:16.5px;line-height:1.7;}

/* statement: a single large line of type, used sparingly as a breath */
.statement{max-width:26ch;font-size:clamp(28px,3.5vw,44px);line-height:1.14;font-weight:600;letter-spacing:-.021em;}

/* ledger: two-column key/value strip, lighter than a table */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.ledger div{background:var(--bg);padding:26px 24px;}
/* inside a split image band the panel is too narrow for columns: stack instead */
.imgband .panel .ledger{grid-template-columns:1fr;}
.imgband .panel .ledger div{padding:18px 22px;}
.ledger b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;}
.ledger span{font-size:15.5px;color:var(--muted);line-height:1.55;}

@media(max-width:960px){
  .rowlist .row{grid-template-columns:1fr;gap:10px;padding:26px 0;}
  .flow{grid-template-columns:1fr;gap:30px;}
  .flow::before{display:none;}
  .flow .fstep{padding:0;text-align:left;display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start;}
  .flow .fnum{margin:0;}
  .flow .fstep p{margin:0;max-width:none;}
  .flow .fstep .rl{grid-column:2;}
  .flow .fstep h3{grid-column:2;}
  .flow .fstep p{grid-column:2;}
  .bigquote-wrap{grid-template-columns:1fr;gap:32px;}
  .bigquote{max-width:none;}
}

/* ============================================================
   MOBILE DETAIL TYPOGRAPHY
   Last in the file on purpose. The eyebrow labels, row labels and
   tags are set at 11.5-12.5px by component rules further up, some
   of them three classes deep; at phone size that is below what is
   comfortable to read, and these labels carry real meaning (they
   say which audience or section a block belongs to). Placing the
   overrides here means they win without inflating specificity in
   the component rules themselves.
   ============================================================ */
@media(max-width:700px){
  .card .rl,.route .rl,.path .rl,.rowlist .row .rl,.tl-item .st,
  .metric .rl,.ledger b{font-size:12.5px;}
  .dl .tag,.post-row .tag,.tag{font-size:12.5px;}
  .close-card .eyebrow-line,.eyebrow-line,.label{font-size:13px;}
  .figure figcaption{font-size:13px;}
}

/* ============================================================
   MOBILE LAYOUT COLLAPSE
   Deliberately last in the file. Every multi-column construct is
   listed here in one place so it cannot be overruled by a component
   rule declared further down. .path-grid.three proved why this is
   needed: its collapse lived at line ~281 while its desktop rule was
   at ~524, so on a 390px screen the homepage router still rendered
   three columns at 139/150/167px, with headings breaking to one word
   a line and the third card clipped by the container's overflow.
   ============================================================ */
@media(max-width:960px){
  .hero,
  .two,.two.portrait,.two.portrait.rev,.qgrid,
  .metrics-in,.feat-grid,
  .cards,.cards.three,
  .route-grid,
  .path-grid,.path-grid.three,
  .form-row,.post-row,
  .imgband,
  .rowlist .row,
  .flow,
  .bigquote-wrap,
  .ledger{grid-template-columns:1fr;}
}

/* ============================================================
   PHONE: BOXES BECOME BANDS
   The desktop look is built on three things - big type against tiny
   tracked labels, hairline rules as structure, and full-bleed bands
   that break the page. None of those need a wide screen. What does
   not survive is the bordered card: at 390px the wrap's 20px padding
   and the card's own 34px stack up, so body text ran in a 300px
   column with 45px of border, radius and padding either side. It
   reads as squashed because it is.

   So on a phone the boxes are stripped back to what .rowlist already
   does on desktop: content on the page ground, separated by hairline
   rules, running the full width. Same character, 50px more column.
   ============================================================ */
@media(max-width:700px){

  /* Card grids become rule-separated lists */
  .cards{gap:0;}
  .cards>.card{background:none;border:0;border-radius:0;padding:26px 0;
    border-bottom:1px solid var(--line);}
  .cards>.card:first-child{padding-top:4px;}
  .cards>.card:last-child{border-bottom:0;padding-bottom:4px;}
  .section-ink .cards>.card{border-bottom-color:rgba(243,247,249,.16);}

  /* Route cards likewise, with the arrow link kept as the row's action */
  .route-grid{gap:0;}
  .route-grid>.route{background:none;border:0;border-radius:0;padding:26px 0;
    border-bottom:1px solid var(--line);min-height:0;}
  .route-grid>.route:last-child{border-bottom:0;}
  .route:hover{transform:none;}

  /* The router runs edge to edge: no outer box, dividers span the screen */
  .path-grid{border-left:0;border-right:0;border-radius:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));}
  .path{padding:32px max(20px, env(safe-area-inset-left));}

  /* Images run to the screen edge rather than sitting inset in the column */
  .figure{border-radius:0;border-left:0;border-right:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));}

  /* Ledger and download rows: same edge-to-edge band treatment, so the page
     has one left margin rather than a column inside a column. */
  .ledger,.dl{border-left:0;border-right:0;border-radius:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));}
  .ledger div{padding:22px max(20px, env(safe-area-inset-left));}
  .dl a,.dl .soon{padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));}
  .steps{border-left:0;border-right:0;border-radius:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));}
  .step{padding:22px max(20px, env(safe-area-inset-left));}

  /* Type contrast is what carries the design at this width, so the headline
     keeps its weight instead of shrinking toward the body copy. */
  h2{font-size:clamp(26px,7vw,31px);line-height:1.1;}
  .lead{font-size:17.5px;}
}

/* ============================================================
   SETUP STEP PLATES
   Line-art instruction panels. They are drawn on white, so they sit
   on a white plate rather than the page tint - otherwise the drawing
   reads as a photo that has lost its background. Three across on
   desktop, stacked on a phone, where a single 3.6:1 strip would have
   been about 100px tall and unreadable.
   ============================================================ */
.stepshots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin-bottom:28px;}
.stepshots figure{background:#FDFCFA;margin:0;} /* matches the drawing's own ground */
.stepshots img{width:100%;height:auto;display:block;}
@media(max-width:700px){
  .stepshots{grid-template-columns:1fr;border-left:0;border-right:0;border-radius:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));}
}

/* SETUP VIDEO
   Silent, 66s, opt-in. preload="none" plus a poster means the page costs
   nothing until someone presses play, which matters because the file is
   large and most visitors will read the written steps instead. */
.videoblock{margin:0 0 44px;}
.videoblock video{width:100%;height:auto;display:block;background:#FDFCFA;
  border:1px solid var(--line);border-radius:3px;}
@media(max-width:700px){
  .videoblock{margin-bottom:32px;}
  .videoblock video{border-radius:0;border-left:0;border-right:0;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));
    width:calc(100% + 2 * max(20px, env(safe-area-inset-left)));}
}

/* ============================================================
   HOMEPAGE SECTION RHYTHM
   The devices on the homepage were already all different, but every
   one sat in the same container: one of two grounds, the same 1180px
   column, the same 104px padding, the same label-then-heading opening.
   These give each section its own ground, measure and pace, so the
   page stops reading as one template filled eleven times.
   ============================================================ */

/* NARROW: a centred, short measure for the moments that should feel
   like a pause rather than a panel. */
.wrap.narrow{max-width:760px;text-align:center;}
.wrap.narrow .lead{margin-left:auto;margin-right:auto;}
.wrap.narrow .cta-row{justify-content:center;}
.wrap.narrow .sec-head{margin-left:auto;margin-right:auto;}

/* DEEP: a third ground, so the compliance strip separates from the router
   above it and the closing below without either neighbour changing. */
.section-deep{background:var(--bg3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* COMPRESSED: a strip, not a section. For the factual, low-drama bits. */
section.compressed{padding:52px 0;}

/* ROOMY: the opposite, for the one moment that should breathe. */
section.roomy{padding:150px 0;}

/* BLEED-RIGHT: the column holds the text but the figure escapes to the
   viewport edge, so one section is not a tidy box like the rest. */
@media(min-width:961px){
  .two.bleed-right{grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;}
  .two.bleed-right>figure{margin-right:min(0px, calc((var(--maxw) - 100vw) / 2 - 40px));}
}

/* The stat lines carry the argument in the ink section, so they are set
   as display numerals rather than body copy. */
.section-ink .stat-line b{font-size:clamp(46px,6vw,72px);line-height:1;color:var(--on-ink);}
.section-ink .stat-line p{color:rgba(243,247,249,.72);}
.section-ink .diagram{border-color:rgba(243,247,249,.18);}
.section-ink .arrow{color:var(--on-ink);}
.section-ink .arrow:hover{color:var(--accent2);}

@media(max-width:700px){
  /* Desktop runs 52 / 104 / 150. Collapsing that to 44 / 56 / 72 on a phone
     removed the pace entirely, so sections stopped announcing themselves.
     Keep the same ratio, just scaled down. */
  section.roomy{padding:104px 0;}
  section.compressed{padding:28px 0;}
  .wrap.narrow{text-align:left;}
  .wrap.narrow .cta-row{justify-content:flex-start;}
}

/* ============================================================
   SOURCED FIGURES
   A cited statistic carries its source inline, so the claim and
   where it came from are never separated. Used wherever we lean
   on someone else's numbers rather than our own.
   ============================================================ */
.figstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.figstat div{background:var(--bg);padding:26px 24px;}
.figstat b{display:block;font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;
  line-height:1;color:var(--text);margin-bottom:12px;}
.figstat span{display:block;font-size:14.5px;color:var(--muted);line-height:1.55;}
.section-ink .figstat{background:rgba(243,247,249,.16);border-color:rgba(243,247,249,.16);}
.section-ink .figstat div{background:var(--ink);}
.section-ink .figstat b{color:var(--on-ink);}
.section-ink .figstat span{color:rgba(243,247,249,.74);}

.srcnote{margin-top:20px;font-size:13.5px;color:var(--faint);line-height:1.6;}
.srcnote a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.srcnote a:hover{color:var(--accent);}
.section-ink .srcnote{color:rgba(243,247,249,.55);}
.section-ink .srcnote a{color:rgba(243,247,249,.78);}

/* A pulled quote with attribution, for borrowed voices rather than our own */
.qcite{border-left:2px solid var(--accent);padding:4px 0 4px 26px;margin:0;}
.qcite p{font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--text);font-weight:500;}
.qcite footer{margin-top:14px;font-size:14px;color:var(--muted);}
.qcite footer b{font-weight:600;color:var(--text);}
.section-ink .qcite{border-left-color:var(--accent2);}
.section-ink .qcite p{color:var(--on-ink);}
.section-ink .qcite footer{color:rgba(243,247,249,.7);}
.section-ink .qcite footer b{color:var(--on-ink);}
@media(max-width:700px){
  .figstat div{padding:22px 20px;}
  .qcite{padding-left:18px;}
}

/* ============================================================
   SPEC STRIP
   The four hard facts about the device used to live inside the hero.
   A hero carries one message; a spec list inside it is a second one
   competing for the same glance, and it pushed the CTAs down the
   fold. So the strip now sits directly beneath the hero on the same
   ground, divided off by a single rule. It reads as the hero's
   baseline rather than a separate band, and it is the first thing a
   buyer scanning for compatibility actually wants.
   ============================================================ */
.specbar{border-top:1px solid var(--line);}
.specbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.specbar .wrap > div{padding:24px 0 26px 26px;border-left:1px solid var(--line);}
.specbar .wrap > div:first-child{border-left:0;padding-left:0;}
.specbar b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px;}
.specbar span{display:block;font-size:16px;line-height:1.4;color:var(--text);}

/* ============================================================
   PULL QUOTE, FULL WIDTH
   This was a big quote on the left with an explanatory paragraph
   floating in a narrow right-hand column. That shape splits one
   message across two columns and halves the quote's scale for no
   gain. The quote now runs at full width at the largest type on the
   page after the h1, and its context sits below a rule as a single
   line with the link, so the voice lands before the explanation.
   ============================================================ */
.pullquote{position:relative;}
.pullquote .bigquote{max-width:30ch;font-size:clamp(32px,4.4vw,54px);}
.pullquote-foot{margin-top:54px;padding-top:26px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px;}
.pullquote-foot p{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:56ch;}
.pullquote-foot .arrow{margin-top:0;white-space:nowrap;}

/* Repeated one-off inline styles, lifted into the system */
.arrow-row{display:flex;flex-wrap:wrap;gap:8px 28px;}
.stat-pair{display:grid;gap:22px;margin-top:36px;}
.stat-pair .stat-line{margin-top:0;}
.figure.framed{background:#fff;padding:20px 18px;}
.inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

@media(max-width:960px){
  .specbar .wrap{grid-template-columns:1fr 1fr;}
  .specbar .wrap > div{padding:18px 0 20px 22px;}
  .specbar .wrap > div:nth-child(odd){border-left:0;padding-left:0;}
  .specbar .wrap > div:nth-child(n+3){border-top:1px solid var(--line);}
  .pullquote-foot{margin-top:36px;}
}
@media(max-width:600px){
  .pullquote .bigquote{font-size:clamp(27px,8.2vw,34px);max-width:none;}
  .specbar span{font-size:15px;}
}

/* ============================================================
   HERO COLOUR SPLIT
   Copy on paper, the electrode on ink. The seam sits at the viewport
   centre rather than at the grid gap: at 1440 the two land 9px apart,
   so a centre split costs nothing in alignment and reads as deliberate
   at every width, where a near-miss at the gap reads as a mistake.

   The renderer is created with alpha:true, so the ink shows straight
   through behind the model and the existing copper halo on .hero-visual
   becomes a glow rather than a stray warm patch on pale paper.

   z-index:-1 because .wrap already sets z-index:1 and so opens a
   stacking context: the split lands at the bottom of that context,
   above the body background and below the hero's own content.
   ============================================================ */
.hero{--hero-split:var(--ink);}
.hero::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:linear-gradient(to right,transparent 0 50%,var(--hero-split) 50% 100%);
}
/* the only furniture that now sits on ink */
.hero-visual::after{color:rgba(243,247,249,.58);}

@media(min-width:961px){
  /* The copy column ran to within 9px of the seam while sitting 170px from
     the page edge, so the hero read as shoved against the ink. 64px of right
     padding rebalances it without touching the grid: the headline re-breaks
     one word earlier and clears the seam by 124px instead of 29, and both it
     and the sub stay on two lines. Past 88px the sub goes to three lines and
     past 140 the headline does, so this is the wide end of the usable range. */
  .hero > div:first-child{padding-right:64px;}

  /* The canvas is a grid cell ending at the wrap's padding edge, so it sat
     70px left of the ink panel's centre and the electrode looked off-axis.
     Stretching the cell to span the panel exactly puts the model's pivot on
     the panel centre: the camera sits at x=0 looking at the origin and the
     mesh is already recentred on its own bounding box, so centring the cell
     is the whole fix.

     -30px pulls the left edge from the grid gutter back to the seam (the
     offset is 30.6px at any width at or above the 1180 wrap, and 28.8px at
     1000, so a constant is within a pixel across the range).
     For the right edge, a percentage margin is no use: on a grid item a
     percentage resolves against the grid AREA (519px here), not the grid
     container, so calc(50% - 50vw) overshot the viewport by 290px. In
     viewport units the natural right edge is 50vw+550 above the 1180 wrap
     and 100vw-40 below it, so the extension needed is 550px-50vw above and
     a flat -40px below. min() picks the right one either side, and the two
     agree exactly at 1180. */
  .hero-visual{margin-left:-30px;margin-right:min(-40px, 550px - 50vw);}
}

@media(max-width:960px){
  /* One column here, so a vertical seam would cut the copy in half.
     The ink becomes a full-bleed band behind the electrode instead. */
  .hero::before{display:none;}
  .hero-visual{
    background:var(--ink);
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));}
}