/* ═══════════════════════════════════════════════════════════════════════
   NEURASOLE — shared stylesheet
   Used by  variant-c.html  and  learn-more.html.
   index.html keeps its own inline copy (it doubles as the artifact mirror,
   which has to be a single self-contained file).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FBFCFC; --surface:#FFFFFF; --surface-2:#F1F5F6; --surface-3:#E6EDEF;
  --line:#D9E3E6; --line-soft:#EAF0F2;
  --text:#0E1A22; --text-dim:#4E606B; --text-faint:#7E8F99;
  --pulse:#07848D; --pulse-deep:#056068; --pulse-glow:rgba(7,132,141,.09);
  --warn-bg:#FDF6E9; --warn-line:#E8D3A4; --warn-text:#7A5610;
  --shadow:0 1px 2px rgba(14,26,34,.05), 0 12px 34px rgba(14,26,34,.06);
  --radius:14px;
  --panel-tint:rgba(7,132,141,.15);
  --lift:0 1px 2px rgba(14,26,34,.06), 0 5px 14px rgba(14,26,34,.07);
  /* The red-orange that labels the "what people do today" cards. Deeper
     than the specified #FF401E because that measures 3.50:1 on white and
     these labels are small; this is 4.70:1. The dim one is the same hue
     pulled toward --text-faint, so the first three read as a set and
     NeuraSole's is the one that carries heat. */
  --flag:#D93511; --flag-dim:#A66052;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1011; --surface:#16191A; --surface-2:#1C2021; --surface-3:#262A2B;
    --line:#303537; --line-soft:#212526;
    --text:#E8EBEB; --text-dim:#A0A6A6; --text-faint:#717777;
    --pulse:#17C3CE; --pulse-deep:#5FE0E6; --pulse-glow:rgba(23,195,206,.12);
    --warn-bg:#241D0E; --warn-line:#4B3C18; --warn-text:#E0A03A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.35);
    --panel-tint:rgba(23,195,206,.2);
    --lift:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42);
    --flag:#FF401E; --flag-dim:#C95540;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1011; --surface:#16191A; --surface-2:#1C2021; --surface-3:#262A2B;
  --line:#303537; --line-soft:#212526;
  --text:#E8EBEB; --text-dim:#A0A6A6; --text-faint:#717777;
  --pulse:#17C3CE; --pulse-deep:#5FE0E6; --pulse-glow:rgba(23,195,206,.12);
  --warn-bg:#241D0E; --warn-line:#4B3C18; --warn-text:#E0A03A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.35);
  --panel-tint:rgba(23,195,206,.2);
  --lift:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42);
  --flag:#FF401E; --flag-dim:#C95540;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
img,video,iframe{max-width:100%;}
a{color:var(--pulse);}

.wrap{width:min(1080px,100% - 2.5rem); margin-inline:auto;}
.wrap.wide{width:min(1240px,100% - 2.5rem);}

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);
}
nav .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;}
.nav-right{display:flex;align-items:center;gap:.9rem;}
.wordmark{font-size:clamp(1.3rem,2.2vw,1.5rem);letter-spacing:-.035em;font-weight:700;text-decoration:none;color:var(--text);}
.wordmark span{font-weight:300;color:var(--pulse);}
.nav-link{font-size:.9rem;font-weight:560;color:var(--text-dim);text-decoration:none;white-space:nowrap;}
.nav-link:hover{color:var(--pulse);}
/* The wordmark, this link and the CTA pill together are wider than a phone
   at desktop sizes, and the nav's min-content width would drag the whole
   page sideways. Rather than drop the link, everything in the bar steps
   down so all three fit — see the nav block under PHONES below. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  background:var(--pulse); color:#fff; border:1px solid var(--pulse);
  font-size:1rem;font-weight:620;padding:.72rem 1.4rem;border-radius:999px;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,filter .12s ease;
}
/* the filled button's label flips with the theme so it stays legible on the
   accent. Both selectors outrank .btn.ghost, which takes its label from
   --text — so the ghost variant has to opt out here or it renders invisible. */
:root[data-theme="dark"] .btn:not(.ghost),
:root:not([data-theme="light"]) .btn:not(.ghost){color:#06171A;}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .btn:not(.ghost){color:#fff;}
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;}
.btn.lg{font-size:1.08rem;padding:.95rem 1.9rem;}
.btn.chip{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:.42rem 1rem;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
/* holds its slot while hidden so the header never shifts */
.nav-cta{opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.nav-cta.on{opacity:1;visibility:visible;transform:none;}
.nav-cta:hover{transform:none;}
@media (prefers-reduced-motion:reduce){ .nav-cta{transition:none;} }
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--pulse);color:var(--pulse);}

/* ---------- shared type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.87rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:750;color:var(--pulse);
  background:var(--pulse-glow);
  border:1.5px solid color-mix(in srgb,var(--pulse) 34%,transparent);
  padding:.39rem .92rem;border-radius:999px;margin-bottom:1.4rem;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
.eyebrow-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.eyebrow-row .eyebrow{margin-bottom:0;}
h1{
  font-size:clamp(2.3rem,6.2vw,4.15rem); line-height:1.06; letter-spacing:-.035em;
  margin:0 0 .8rem; font-weight:700; text-wrap:balance; max-width:22ch;
}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1.14;letter-spacing:-.028em;margin:0 0 .7rem;font-weight:660;text-wrap:balance;}
h3{margin:0;font-size:1.13rem;font-weight:650;letter-spacing:-.012em;text-wrap:balance;}
.lead{font-size:1.06rem;color:var(--text-dim);max-width:96ch;margin:0 0 2rem;text-wrap:pretty;}
.lead.tight{margin-bottom:1.4rem;}
.hero p.sub strong, .lead strong{color:var(--pulse);font-weight:650;}
.kicker{font-size:.88rem;letter-spacing:.15em;text-transform:uppercase;font-weight:650;color:var(--pulse);margin:0 0 .75rem;}
section{padding:clamp(2.6rem,6vw,4.4rem) 0;}
section.alt{background:var(--surface-2);border-block:1px solid var(--line-soft);}
/* Two sections on the same ground stack their vertical padding into a gap
   with nothing in it — no colour change, no rule, just distance. Where a
   banded section separates them the padding is doing real work, so this
   only collapses the seam between two unbanded ones. */
section:not(.alt) + section:not(.alt){padding-top:0;}
.sec-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;}

/* ---------- hero ---------- */
header.hero{position:relative;overflow:hidden;padding:clamp(2.2rem,4.4vw,3.4rem) 0 clamp(2.2rem,4vw,3.2rem);}
#wave{position:absolute;inset:0;width:100%;height:100%;opacity:.58;pointer-events:none;}
.hero .wrap{position:relative;z-index:1;}
.hero p.sub{font-size:clamp(1.06rem,2.2vw,1.28rem);color:var(--text-dim);max-width:50ch;margin:0 0 1.4rem;text-wrap:pretty;}

/* variant C hero: copy and capture on the left, the product itself on the right */
.hero-c{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;}
@media (min-width:1000px){
  /* the photo column is deliberately the wider one: the picture scales up
     proportionally (no crop, no stretch) and stays vertically centred */
  .hero-c{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:2.5rem;}
  .hero-c h1{font-size:clamp(2.3rem,4vw,3.35rem);max-width:15ch;}
}

/* ---------- figures ---------- */
/* every photograph on the site goes through .shot, so a missing file degrades
   to a labelled placeholder instead of a broken-image icon */
.shot{
  position:relative;display:block;width:100%;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--lift);
}
.shot img{display:block;width:100%;height:100%;object-fit:cover;}
.shot.ph{border-style:dashed;border-color:color-mix(in srgb,var(--pulse) 38%,var(--line));}
.shot.ph img{display:none;}
.ph-body{
  position:absolute;inset:0;display:none;flex-direction:column;gap:.4rem;
  align-items:center;justify-content:center;text-align:center;padding:1.4rem;
}
.shot.ph .ph-body{display:flex;}
.ph-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--pulse-glow);border:1px solid color-mix(in srgb,var(--pulse) 30%,transparent);
  color:var(--pulse);font-size:1.05rem;}
.ph-name{font-size:.8rem;color:var(--pulse);font-weight:650;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
.ph-hint{font-size:.82rem;color:var(--text-faint);max-width:32ch;line-height:1.45;}

.shot.tall{aspect-ratio:4/3;}
.shot.square{aspect-ratio:1/1;}
.shot.wide{aspect-ratio:16/9;}
.shot.r32{aspect-ratio:3/2;}
.shot.r1610{aspect-ratio:16/10;}
/* No fixed ratio: the phone plates take their height from the screenshot.
   With a ratio, object-fit:contain leaves slack on whichever axis doesn't
   match it — 23px above and below against 12px at the sides here — and the
   phone reads as off-centre even though it is dead centre. Sized by the
   image, equal padding really is equal margin. */
.shot.phone{}

/* a technical plate: a CAD render or drawing, letterboxed rather than
   cropped so no callout gets cut off, and kept on its own ground in both
   themes — these renders are drawn on white, and floating one on charcoal
   reads as an accident rather than a decision.
   The ground is white rather than an off-white tint so that it matches the
   renders' own background exactly: anything close-but-not-equal draws a
   visible seam where a letterboxed image meets its bands. */
.shot.plate{background:#FFFFFF;border-color:var(--line);}
.shot.plate img{object-fit:contain;}
/* the arch diagram is a tall infographic with its own small type, so this
   plate takes its height from the drawing rather than a fixed ratio — a
   ratio would either crop the callouts or letterbox them into illegibility */
.shot.plate.arch-plate{padding:1rem 1.1rem;}
/* the phone screenshots are cut out against alpha, so they sit on the page
   itself — no card, no border, nothing to letterbox them inside */
.shot.bare{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
.shot.bare img{height:auto;object-fit:contain;}
/* a missing file still has to announce itself, and .bare just removed the
   border that did that */
.shot.bare.ph{border-width:1px;border-style:dashed;min-height:220px;}
.shot.plate.arch-plate img{height:auto;}
/* the pale ground is there to hold a render — with no render to hold it is
   just a slab of white on a dark page, so an empty plate drops back to the
   normal placeholder surface */
.shot.plate.ph{background:var(--surface-2);}
.shot.plate .shot-tag{background:rgba(10,18,24,.72);}

figure{margin:0;}
figcaption{font-size:.85rem;color:var(--text-faint);margin-top:.6rem;line-height:1.45;}
figcaption strong{color:var(--text-dim);font-weight:640;}

/* a small chip pinned inside a photo, for labelling a build */
.shot-tag{
  position:absolute;left:.75rem;top:.75rem;z-index:2;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:750;
  padding:.26rem .6rem;border-radius:999px;
  background:rgba(10,18,24,.66);color:#fff;border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- build progression ---------- */
/* a real sequence, so the steps are numbered — the order is the information */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.4rem;}
.step{display:flex;flex-direction:column;gap:.75rem;}
.step-head{display:flex;align-items:center;gap:.6rem;}
.step-n{font-size:.78rem;letter-spacing:.14em;font-weight:750;color:var(--pulse);
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
.step-rule{flex:1;height:1px;background:var(--line);}
.step h3{font-size:1.05rem;}
.step p{margin:0;font-size:.92rem;color:var(--text-dim);line-height:1.5;}

/* ---------- engineering band ---------- */
/* the numbers are the loudest thing on the page — they are the only hard
   evidence the product has, so they get display type rather than card type */
.eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
/* the cells hold values of different heights, so the captions are pushed to
   the bottom of each — otherwise they step up and down across the row */
.eng .cell{background:var(--surface);padding:1.5rem 1.4rem 1.35rem;
  display:flex;flex-direction:column;}
.eng .v{font-size:clamp(2.5rem,5.4vw,3.5rem);font-weight:700;letter-spacing:-.045em;
  color:var(--pulse);font-variant-numeric:tabular-nums;line-height:.95;}
/* the size range is the one value that's a string rather than a number, and
   it's wide enough to wrap at display size — it takes a step down instead */
.eng .v.sm{font-size:clamp(1.9rem,3.6vw,2.55rem);}
.eng .v .alt{display:block;font-size:.9rem;font-weight:560;letter-spacing:-.005em;
  color:var(--text-faint);margin-top:.4rem;}
.eng .k{font-size:.88rem;color:var(--text-dim);margin-top:auto;padding-top:.8rem;
  line-height:1.4;}

/* On the landing page the numbers carry the section alone — no spec table
   under them — so the cells break out of the shared frame into separate
   cards and the type grows to match. Three across, then two wider: five
   equal cells in a row would squeeze every number back down again. */
.eng.loose{background:none;border:0;border-radius:0;gap:1rem;overflow:visible;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.eng.loose .cell{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.7rem 1.5rem 1.45rem;box-shadow:var(--lift);}
.eng.loose .v{font-size:clamp(2.6rem,5.2vw,3.7rem);}
.eng.loose .v.sm{font-size:clamp(2rem,3.8vw,2.7rem);}
.eng.loose .k{font-size:.92rem;padding-top:.9rem;}
@media (min-width:900px){
  .eng.loose{grid-template-columns:repeat(6,1fr);}
  .eng.loose .cell{grid-column:span 2;}
  .eng.loose .cell:nth-child(4),
  .eng.loose .cell:nth-child(5){grid-column:span 3;}
}

/* the non-numeric half of the spec: no measurements, just what it is.
   Two columns, not four — a four-up split leaves the value so narrow it
   wraps to three lines beside a one-line label */
/* pinned to two columns rather than auto-fit: there are four rows, and a
   three-up track leaves the fourth stranded on a line of its own */
.spec{display:grid;grid-template-columns:1fr;gap:0 2.4rem;
  margin-top:1.7rem;border-top:1px solid var(--line);}
@media (min-width:760px){ .spec{grid-template-columns:1fr 1fr;} }
.spec div{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line-soft);}
.spec dt{flex:none;width:7rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--text-faint);line-height:1.5;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
.spec dd{margin:0;font-size:.93rem;color:var(--text-dim);line-height:1.45;}
.spec dd strong{color:var(--text);font-weight:620;}

/* ---------- function tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem;}
.tile{display:flex;flex-direction:column;gap:.85rem;}
.tile .n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pulse);font-weight:700;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
.tile h3{font-size:1.12rem;}
.tile p{margin:0;font-size:.92rem;color:var(--text-dim);line-height:1.5;}

/* two functions: the copy and the compact list on one side, the app on the
   other — the section carries a picture instead of a third row of prose */
.fn-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;}
@media (min-width:900px){
  /* a fixed, narrow right column: the image no longer needs a wide one, and
     the copy is what deserves the room */
  .fn-grid{grid-template-columns:minmax(0,1fr) 330px;gap:2.6rem;}
}
.fn-list{display:grid;gap:0;margin:0 0 1.3rem;border-top:1px solid var(--line);}
.fn-list > div{padding:.72rem 0;border-bottom:1px solid var(--line-soft);}
.fn-list .n{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flag);font-weight:700;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
.fn-list h3{margin:.3rem 0 0;font-size:1.08rem;}
/* the app is a supporting visual here, not the hero — at 300px it stood a
   head taller than the column beside it and set the height of the whole
   section on its own. The cap is on the frame, not the figure, so the
   caption still gets the column's full width and stops wrapping to three
   lines under a narrow image. */
.fn-figure{margin-inline:auto;}
.fn-figure .shot{max-width:213px;margin-inline:auto;}

/* ---------- development timeline ---------- */
/* the credibility section: a real sequence, so the numbered markers carry
   order. Slim ruled rows rather than cards — five cards in a stack would
   read as a wall. Everything is drawn from existing tokens, so both themes
   come for free. */
.timeline{list-style:none;margin:.4rem 0 0;padding:0;max-width:820px;}
.timeline li{display:grid;grid-template-columns:2.4rem 1fr;gap:1.05rem;
  padding:1.05rem 0;border-top:1px solid var(--line-soft);align-items:baseline;}
.timeline li:first-child{border-top:0;}
.timeline .step{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;font-weight:650;color:var(--pulse);letter-spacing:.1em;}
.timeline h3{margin:0;font-size:1.06rem;}
.timeline p{margin:.35rem 0 0;color:var(--text-dim);font-size:.97rem;line-height:1.55;
  max-width:64ch;}
.founder-note{margin-top:1.6rem;max-width:820px;}

/* learn-more's two functions: the three cards stacked in one column at a
   shared height, the app screens beside them */
.fn-split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;}
@media (min-width:900px){
  .fn-split{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:2.6rem;}
}
/* 1fr rows in an auto-height grid all take the tallest row's height, so the
   three cards come out level without measuring anything in JS */
.fn-stack{display:grid;gap:1rem;grid-auto-rows:1fr;}
.fn-apps{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.fn-apps .shot{max-width:215px;margin-inline:auto;}

/* the problem section splits the other way round from .fn-split: the diagram
   carries small callout text, so it takes the larger share and the cards the
   smaller one */
.problem-split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;}
@media (min-width:980px){
  .problem-split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:2.6rem;}
}
@media (max-width:440px){ .fn-apps{grid-template-columns:1fr;} }

/* ---------- video ---------- */
.video-slot{
  aspect-ratio:16/9;width:100%;border-radius:var(--radius);
  border:2px dashed color-mix(in srgb,var(--pulse) 40%,var(--line));
  background:var(--surface); display:grid;place-items:center;text-align:center;padding:1.5rem;
}
.video-frame{width:100%;aspect-ratio:16/9;border-radius:var(--radius);display:block;background:#000;border:1px solid var(--line);}
.video-slot.has-video{position:relative;padding:0;overflow:hidden;
  border-style:solid;border-width:1px;border-color:var(--line);}
.video-frame.in-slot{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0;border:0;}
.video-shield{position:absolute;inset:0;z-index:2;cursor:default;}
.sound-btn{
  position:absolute;right:.85rem;bottom:.85rem;z-index:3;
  width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1rem;line-height:1;
  background:rgba(10,18,24,.62);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);transition:background .15s ease,transform .12s ease;
}
.sound-btn:hover{background:rgba(10,18,24,.82);transform:scale(1.06);}
.sound-btn:focus-visible{outline:2px solid var(--pulse);outline-offset:2px;}
.video-caption{font-size:.83rem;color:var(--text-faint);margin-top:.7rem;}
.slot-inner{max-width:46ch;display:flex;flex-direction:column;gap:.5rem;align-items:center;}
.slot-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--pulse-glow);border:1px solid color-mix(in srgb,var(--pulse) 30%,transparent);color:var(--pulse);font-size:1.15rem;}
.slot-title{font-weight:650;font-size:1.02rem;}
.slot-body{font-size:.9rem;color:var(--text-dim);}
.slot-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-weight:650;}

/* ---------- notices ---------- */
.notice{
  display:flex;gap:.85rem;align-items:flex-start;margin-top:1.15rem;
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:11px;padding:.95rem 1.15rem;
}
.notice .badge{
  flex:none;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:750;
  color:var(--warn-text);border:1px solid var(--warn-line);border-radius:999px;padding:.18rem .55rem;margin-top:.1rem;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;
}
.notice p{margin:0;font-size:.93rem;line-height:1.5;color:var(--text-dim);}
.notice strong{color:var(--text);}
/* collapsed, the summary still carries the caveat itself — only the
   elaboration hides, so the material disclosure is never behind a click */
details.notice{display:block;}
details.notice > summary{
  display:flex;gap:.85rem;align-items:center;cursor:pointer;list-style:none;user-select:none;
}
details.notice > summary::-webkit-details-marker{display:none;}
details.notice > summary:focus-visible{outline:2px solid var(--warn-text);outline-offset:4px;border-radius:5px;}
details.notice > summary strong{flex:1;min-width:0;font-size:.93rem;line-height:1.45;font-weight:650;}
details.notice > summary .chev{border-color:var(--warn-text);opacity:.75;}
details.notice:hover > summary .chev,
details.notice[open] > summary .chev{border-color:var(--warn-text);opacity:1;}
details.notice > p{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--warn-line);
  animation:reveal .26s ease-out both;}
@media (prefers-reduced-motion:reduce){ details.notice > p{animation:none;} }

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1rem;align-items:start;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.45rem;
  box-shadow:var(--lift);transition:border-color .18s ease,background .18s ease;}
.card .n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flag-dim);font-weight:650;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;}
/* the highlighted card's label is the one that carries full heat — it marks
   the end of the problem sequence on the landing page and the NeuraSole
   function on the how-it-works page */
.card.hl .n{color:var(--flag);}
.card h3{margin:.4rem 0 0;}
.card p{margin:0;font-size:.95rem;color:var(--text-dim);line-height:1.5;}
.card.hl{background:var(--pulse-glow);border-color:color-mix(in srgb,var(--pulse) 30%,var(--line));}
.card > p + p{margin-top:.7rem;}

details.card > summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;list-style:none;user-select:none;
}
details.card > summary::-webkit-details-marker{display:none;}
details.card > summary:focus-visible{outline:2px solid var(--pulse);outline-offset:5px;border-radius:4px;}
.sum-text{display:block;min-width:0;}

/* chevron drawn from two borders so it needs no asset and inherits colour */
.chev{
  flex:none;width:9px;height:9px;margin-right:3px;
  border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);
  transform:rotate(45deg) translate(-2px,-2px);transform-origin:center;
  transition:transform .22s ease,border-color .18s ease;
}
details.card[open] > summary .chev{transform:rotate(225deg) translate(-2px,-2px);
  border-color:var(--pulse);}
details.card:hover{border-color:color-mix(in srgb,var(--pulse) 45%,var(--line));}
details.card:hover .chev{border-color:var(--pulse);}
details.card[open]{border-color:color-mix(in srgb,var(--pulse) 40%,var(--line));}
details.card > p{
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line-soft);
  animation:reveal .26s ease-out both;
}
details.card.hl > p{border-top-color:var(--line);}
/* fade only — the box's own height animation supplies the movement */
@keyframes reveal{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  details.card > p{animation:none;}
  .chev{transition:none;}
}

/* ---------- email capture ---------- */
input[type=email]{
  width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:.72rem .9rem;
  max-width:100%;
}
input:focus{outline:2px solid var(--pulse);outline-offset:1px;border-color:var(--pulse);}
.cta-block{margin-top:1.7rem;max-width:640px;padding:1.15rem 1.3rem;border-radius:var(--radius);
  background:var(--pulse-glow);border:1px solid color-mix(in srgb,var(--pulse) 26%,var(--line));}
.cta-block.tint{background:var(--panel-tint);}
.cta-title{margin:0;font-size:1.08rem;font-weight:660;letter-spacing:-.015em;}
.cta-sub{margin:.2rem 0 .6rem;font-size:.91rem;color:var(--text-dim);}
.cta-list{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.32rem;}
.cta-list li{position:relative;padding-left:1.55rem;font-size:.95rem;color:var(--text);}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:-.02em;
  color:var(--pulse);font-weight:700;font-size:.95rem;}
@media (min-width:560px){ .cta-list{grid-template-columns:1fr 1fr;column-gap:1.2rem;} }
.cta-note{font-size:.86rem;color:var(--text-faint);}
p.cta-note{margin:0;}

.email-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.5rem;
  max-width:580px;}
.email-cta input[type=email]{flex:1 1 250px;width:auto;min-width:0;background:var(--surface);
  border-color:var(--text);}
/* outranks the generic input:focus rule, so the focus colour is restated here
   or the ring stays black while focused */
.email-cta input[type=email]:focus{border-color:var(--pulse);}
/* below this the button's own text is wider than the panel, so the row stacks.
   The field's flex basis becomes a *height* once the axis turns vertical, so it
   is reset or the input renders as a 250px-tall box. */
@media (max-width:540px){
  .email-cta{flex-direction:column;align-items:stretch;}
  .email-cta input[type=email]{flex:0 0 auto;width:100%;}
  .email-cta .btn{width:100%;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.hero .result{max-width:640px;}
.result{
  display:none;margin-top:1.3rem;border-radius:12px;padding:1.1rem 1.25rem;
  border:1px solid var(--line);background:var(--surface-2);
}
.result.show{display:block;}
.result.ok{border-color:color-mix(in srgb,var(--pulse) 40%,transparent);background:var(--pulse-glow);}
.result h4{margin:0 0 .45rem;font-size:1rem;font-weight:660;}
.result p{margin:0;font-size:.9rem;color:var(--text-dim);line-height:1.5;}
.result pre{
  margin:.85rem 0 0;font-size:.78rem;line-height:1.55;color:var(--text-dim);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:.85rem;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- learn-more page ---------- */
.doc-head{padding:clamp(2.2rem,5vw,3.4rem) 0 0;}
.doc-head h1{font-size:clamp(2.1rem,4.6vw,3.1rem);max-width:20ch;}
.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:560;
  color:var(--text-dim);text-decoration:none;margin-bottom:1.4rem;}
.back-link:hover{color:var(--pulse);}
.doc h2{margin-top:0;}
.doc section{padding:clamp(2rem,4vw,3rem) 0;}
.doc p.body{font-size:1rem;color:var(--text-dim);line-height:1.65;max-width:74ch;margin:0 0 1rem;}
.doc p.body strong{color:var(--text);font-weight:620;}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;padding:0;list-style:none;}
.toc a{font-size:.83rem;font-weight:600;text-decoration:none;color:var(--text-dim);
  border:1px solid var(--line);border-radius:999px;padding:.34rem .85rem;}
.toc a:hover{border-color:var(--pulse);color:var(--pulse);}
.qa{border-top:1px solid var(--line);margin-top:.4rem;}
.qa > div{padding:1.15rem 0;border-bottom:1px solid var(--line-soft);}
.qa h3{margin:0 0 .4rem;font-size:1.02rem;}
.qa p{margin:0;font-size:.95rem;color:var(--text-dim);line-height:1.6;max-width:74ch;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface-2);padding:2.4rem 0 3rem;}
.disclaimer{font-size:.83rem;line-height:1.6;color:var(--text-faint);max-width:78ch;}
.disclaimer.wide{max-width:none;}
.disclaimer strong{color:var(--text-dim);}
.foot-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;margin-bottom:1.2rem;}
.foot-row .mono{font-size:.83rem;color:var(--text-faint);}
.foot-nav{display:flex;gap:1.1rem;flex-wrap:wrap;}
.foot-nav a{font-size:.85rem;text-decoration:none;color:var(--text-dim);}
.foot-nav a:hover{color:var(--pulse);}

/* ═══════════════════════════════════════════════════════════════════════
   PHONES
   The layouts above all collapse to one column on their own. What needs
   saying here is what stops being worth its space once they do.
   ═══════════════════════════════════════════════════════════════════════ */

/* Equal-height cards exist so a row of them reads as a set. Stacked, there
   is no row left to align to — the shared height just prints the tallest
   card's dead space onto every other one, which on a phone is most of a
   screen of nothing. Each stack drops it at its own breakpoint. */
@media (max-width:979px){ .problem-split .fn-stack{grid-auto-rows:auto;} }
@media (max-width:899px){ .fn-split .fn-stack{grid-auto-rows:auto;} }

/* every item in the bar steps down so the wordmark, the link and the pill
   share one line on a phone */
@media (max-width:600px){
  nav .inner{gap:.6rem;}
  .nav-right{gap:.7rem;}
  .wordmark{font-size:1.15rem;}
  .nav-link{font-size:.82rem;}
  .btn.chip{font-size:.68rem;letter-spacing:.1em;padding:.38rem .72rem;}
}

@media (max-width:560px){
  /* the two status pills are ~10px too wide together to share a line */
  .eyebrow{font-size:.78rem;letter-spacing:.12em;padding:.34rem .78rem;}

  /* the numbers stay big — they're the point of the section — so the space
     comes out of the padding around them instead */
  .eng.loose .cell{padding:1.25rem 1.25rem 1.1rem;}

  /* badge and chevron share the first line, the caveat gets the full width
     below, rather than three words per line in a narrow middle column */
  details.notice > summary{flex-wrap:wrap;gap:.55rem;}
  details.notice > summary strong{flex:1 1 100%;order:2;}
  details.notice > summary .chev{order:1;margin-left:auto;}
  .notice{flex-wrap:wrap;gap:.55rem;}
  .notice > p{flex:1 1 100%;}

  /* the diagram is the one image whose own type has to stay readable, so it
     takes back the plate's padding */
  .shot.plate.arch-plate{padding:.4rem;}
}