/* ==========================================================================
   Coolroom Alarm | "Cold Watch" bespoke identity (coolroomalarm.com.au)
   Industrial-precise, premium. Steel-white page + one midnight scroll story.
   Display: Space Grotesk · Body: Inter · Data: Space Mono (temperatures).
   The mono temperature read-out is the brand signature. No build step.
   ========================================================================== */
:root{
  /* steel / ink, light page */
  --bg:        oklch(0.985 0.004 240);
  --bg-2:      oklch(0.963 0.006 235);
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.27 0.034 248);
  --ink-soft:  oklch(0.40 0.030 248);
  --muted:     oklch(0.52 0.024 248);
  --steel:     oklch(0.55 0.045 245);
  --steel-2:   oklch(0.74 0.030 245);
  --line:      oklch(0.90 0.012 245);
  --line-2:    oklch(0.83 0.016 245);

  /* cold accent (the "all good" cool blue) */
  --cool:      oklch(0.58 0.105 235);
  --cool-ink:  oklch(0.46 0.105 240);

  /* midnight story section */
  --night:     oklch(0.21 0.040 255);
  --night-2:   oklch(0.27 0.045 255);
  --on-dark:   oklch(0.95 0.012 240);
  --on-dark-2: oklch(0.78 0.020 245);

  /* alarm accent (amber -> red, used sparingly for the alert state) */
  --warn:      oklch(0.74 0.150 62);
  --alarm:     oklch(0.62 0.205 35);
  --alarm-ink: oklch(0.52 0.190 33);

  --good:      oklch(0.66 0.140 165);

  --display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --sans: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --maxw: 1180px;
  --gutter: clamp(1.15rem, 4.5vw, 5rem);
  --radius: 16px; --radius-lg: 24px; --radius-sm: 10px;
  --shadow: 0 1px 3px oklch(0.3 0.04 248 / .06), 0 22px 50px -28px oklch(0.28 0.06 250 / .30);
  --shadow-sm: 0 1px 2px oklch(0.3 0.04 248 / .06), 0 10px 24px -18px oklch(0.28 0.06 250 / .24);

  --z-nav:200;
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1.01rem,.985rem + .16vw,1.12rem); line-height:1.64;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--cool-ink); }
::selection{ background:oklch(0.58 0.105 235 / .22); }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05;
  letter-spacing:-0.02em; text-wrap:balance; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.4rem,1.55rem + 3.9vw,4.6rem); letter-spacing:-0.03em; }
h2{ font-size:clamp(1.85rem,1.3rem + 2.5vw,3.1rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem); }
p{ margin:0; text-wrap:pretty; }
.lead{ font-size:clamp(1.12rem,1.02rem + .55vw,1.42rem); line-height:1.5; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:62ch; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; }
:where(a,button,summary):focus-visible{ outline:3px solid var(--cool); outline-offset:3px; border-radius:6px; }

/* eyebrow / data label (used sparingly, not on every section) */
.eyebrow{ font-family:var(--mono); font-size:.78rem; letter-spacing:.10em; text-transform:uppercase;
  color:var(--steel); font-weight:700; display:inline-flex; gap:.5rem; align-items:center; }
.eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--cool); border-radius:2px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; white-space:nowrap;
  font-size:1rem; line-height:1; padding:.92rem 1.5rem; border-radius:12px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .35s var(--ease), background-color .25s, box-shadow .35s, border-color .25s, color .25s; }
.btn--primary{ background:var(--ink); color:var(--on-dark); box-shadow:0 10px 26px -14px oklch(0.27 0.034 248 / .8); }
.btn--primary:hover{ background:oklch(0.33 0.05 250); transform:translateY(-2px); box-shadow:0 16px 34px -14px oklch(0.27 0.034 248 / .85); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--cool); color:var(--cool-ink); transform:translateY(-2px); }
.btn--lg{ padding:1.05rem 1.85rem; font-size:1.06rem; }
.btn--on-dark{ background:var(--on-dark); color:var(--ink); }
.btn--on-dark:hover{ background:#fff; transform:translateY(-2px); }
.btn--alarm{ background:var(--alarm); color:oklch(0.99 0.01 60); box-shadow:0 10px 26px -12px oklch(0.62 0.205 35 / .6); }
.btn--alarm:hover{ background:var(--alarm-ink); transform:translateY(-2px); }
.textlink{ color:var(--cool-ink); font-weight:600; text-decoration:none; border-bottom:2px solid oklch(0.58 0.105 235 / .35); padding-bottom:1px; transition:border-color .25s; }
.textlink:hover{ border-color:var(--cool); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- header ---------- */
.nav{ position:sticky; top:0; z-index:var(--z-nav); background:oklch(0.985 0.004 240 / .82); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s; }
.nav.is-stuck{ border-color:var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:1.18rem; letter-spacing:-0.02em; }
.brand svg{ width:30px; height:30px; flex:none; }
.nav__cta{ display:flex; align-items:center; gap:1.3rem; }
.nav__cta a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.95rem; }
.nav__cta a:not(.btn):hover{ color:var(--cool-ink); }
.nav__cta a:not(.btn).is-current{ color:var(--ink); }
@media (max-width:620px){ .nav__cta a:not(.btn){ display:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3rem,2.6rem + 5vw,7rem) 0 clamp(2.6rem,2rem + 4vw,5.5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:60%; height:80%; z-index:-1;
  background:radial-gradient(60% 60% at 78% 14%, oklch(0.58 0.105 235 / .14), transparent 70%); filter:blur(6px); }
.hero__in{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (max-width:900px){ .hero__in{ grid-template-columns:1fr; } }
.hero h1{ margin:1rem 0 1.2rem; }
.hero h1 em{ font-style:normal; color:var(--cool-ink); }
.hero .lead{ max-width:40ch; margin-bottom:1.9rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.hero__note{ margin-top:1.7rem; color:var(--muted); font-size:.95rem; max-width:46ch; display:flex; gap:.6rem; align-items:flex-start; }
.hero__note svg{ width:18px; height:18px; color:var(--good); flex:none; margin-top:.2rem; }

/* hero read-out: a calm live temperature card (mono number is the hero) */
.gauge{ position:relative; justify-self:end; width:min(100%,420px); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.4rem 1.4rem 1.5rem; overflow-wrap:anywhere; }
.gauge__bar{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); font-weight:700; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.gauge__live{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 oklch(0.66 0.140 165 / .5); animation:pulse 2.4s var(--ease) infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 oklch(0.66 0.140 165 / .5);} 70%{ box-shadow:0 0 0 7px oklch(0.66 0.140 165 / 0);} 100%{ box-shadow:0 0 0 0 oklch(0.66 0.140 165 / 0);} }
.gauge__rooms{ display:grid; gap:.65rem; margin:1.1rem 0 0; }
.room{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.6rem 1rem; padding:.75rem .9rem;
  background:var(--bg-2); border-radius:var(--radius-sm); min-width:0; }
.room__nm{ font-weight:600; font-size:.95rem; color:var(--ink-soft); overflow-wrap:anywhere; min-width:0; }
.room__t{ font-family:var(--mono); font-weight:700; font-size:1.35rem; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; }
.room__t small{ font-size:.62em; color:var(--steel); font-weight:400; }
.room.is-ok .room__nm::after{ content:"OK"; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em;
  color:var(--good); background:oklch(0.66 0.140 165 / .14); border-radius:5px; padding:.12rem .4rem; margin-left:.5rem; vertical-align:middle; }
.room.is-alarm{ background:oklch(0.62 0.205 35 / .08); }
.room.is-alarm .room__t{ color:var(--alarm-ink); }
.room.is-alarm .room__nm::after{ content:"ALARM"; color:var(--alarm-ink); background:oklch(0.62 0.205 35 / .14);
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; border-radius:5px; padding:.12rem .4rem; margin-left:.5rem; vertical-align:middle; }
.gauge__alert{ margin-top:1.1rem; display:flex; gap:.55rem; align-items:flex-start; background:oklch(0.62 0.205 35 / .10);
  border:1px solid oklch(0.62 0.205 35 / .25); border-radius:var(--radius-sm); padding:.7rem .85rem; color:var(--alarm-ink); font-size:.88rem; font-weight:500; }
.gauge__alert svg{ width:18px; height:18px; flex:none; margin-top:.05rem; }
@media (max-width:900px){ .gauge{ justify-self:stretch; width:100%; margin-top:.5rem; } }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(3.5rem,2.6rem + 4.5vw,7rem) 0; }
.section--tight{ padding-top:0; }
.section__head{ max-width:44ch; margin-bottom:clamp(2rem,3vw,3rem); }
.section__head .eyebrow{ margin-bottom:1rem; }
.section__head h2{ margin-bottom:.9rem; }
.section__head p{ color:var(--ink-soft); font-size:1.12rem; }
.panel{ background:var(--bg-2); }

/* ---------- story: sticky mono read-out climbing through the night ---------- */
.story{ background:var(--night); color:var(--on-dark); position:relative; overflow:hidden; }
.story::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 30% at 84% 6%, oklch(0.62 0.205 35 / .14), transparent 70%),
             radial-gradient(46% 34% at 8% 96%, oklch(0.58 0.105 235 / .20), transparent 70%); }
.story .wrap{ position:relative; z-index:1; }
.story__intro{ max-width:46ch; padding-bottom:clamp(1rem,2vw,2.4rem); }
.story__intro .eyebrow{ color:var(--steel-2); margin-bottom:1rem; }
.story__intro .eyebrow::before{ background:var(--cool); }
.story__intro h2{ color:var(--on-dark); margin-bottom:.9rem; }
.story__intro p{ color:var(--on-dark-2); font-size:1.14rem; }

.story__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5.5rem); align-items:start; }
.story__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }

/* the read-out instrument */
.readout{ width:min(420px,86vw); }
.readout__panel{ background:oklch(0.27 0.045 255 / .6); border:1px solid oklch(0.62 0.08 250 / .35);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.1rem); backdrop-filter:blur(4px); transition:border-color .6s var(--ease), background-color .6s var(--ease); }
.readout__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-2); font-weight:700; margin-bottom:1.1rem; flex-wrap:wrap; }
.readout__time{ color:var(--on-dark); }
.readout__big{ font-family:var(--mono); font-weight:700; font-size:clamp(3.6rem,2.2rem + 7vw,6rem); line-height:.92;
  letter-spacing:-0.04em; color:var(--on-dark); transition:color .6s var(--ease); overflow-wrap:anywhere; }
.readout__big small{ font-size:.34em; letter-spacing:0; color:var(--steel-2); font-weight:400; }
.readout__state{ font-family:var(--mono); font-size:.85rem; font-weight:700; letter-spacing:.04em; margin-top:.7rem;
  color:var(--good); transition:color .6s var(--ease); display:inline-flex; gap:.5rem; align-items:center; }
.readout__state::before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.readout__line{ margin-top:1.5rem; height:46px; }
.readout__line svg{ width:100%; height:46px; overflow:visible; }
.readout__line path.track{ fill:none; stroke:oklch(0.62 0.08 250 / .35); stroke-width:1.5; }
.readout__line path.trace{ fill:none; stroke:var(--cool); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke .6s var(--ease); }
.readout__scale{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--steel-2); margin-top:.45rem; }
/* alarm state */
.readout.is-alarm .readout__panel{ border-color:oklch(0.62 0.205 35 / .55); background:oklch(0.30 0.07 35 / .42); }
.readout.is-alarm .readout__big{ color:var(--warn); }
.readout.is-alarm .readout__state{ color:var(--alarm); }
.readout.is-alarm path.trace{ stroke:var(--alarm); }
/* lost state (the morning you weren't watching) */
.readout.is-lost .readout__panel{ border-color:oklch(0.62 0.205 35 / .7); background:oklch(0.32 0.09 32 / .5); }
.readout.is-lost .readout__big{ color:var(--alarm); }
.readout.is-lost .readout__state{ color:var(--alarm); }
.readout.is-lost path.trace{ stroke:var(--alarm); }

.beats{ padding:5vh 0 9vh; }
.beat{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; max-width:34ch; }
.beat__time{ font-family:var(--mono); font-weight:700; font-size:.86rem; letter-spacing:.05em; color:var(--cool); margin-bottom:.7rem; }
.beat h3{ color:var(--on-dark); font-size:clamp(1.5rem,1.15rem + 1.7vw,2.3rem); margin-bottom:.7rem; }
.beat p{ color:var(--on-dark-2); font-size:1.06rem; }
.beat.is-alert .beat__time{ color:var(--warn); }
.beat.is-lost .beat__time{ color:var(--alarm); }
@media (max-width:880px){
  .story__cols{ grid-template-columns:1fr; }
  .story__stage{ height:auto; position:sticky; top:56px; padding:1rem 0 1.4rem; }
  .readout{ width:min(360px,90vw); }
  .beats{ padding:2vh 0 0; }
  .beat{ min-height:62vh; }
}

/* ---------- cost-of-one-bad-night ---------- */
.cost{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .cost{ grid-template-columns:1fr; } }
.cost__fig{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(1.4rem,3vw,2rem); }
.cost__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line); }
.cost__row:last-child{ border-bottom:0; }
.cost__row span{ color:var(--ink-soft); font-weight:500; min-width:0; overflow-wrap:anywhere; }
.cost__row b{ font-family:var(--mono); font-weight:700; font-size:1.2rem; color:var(--ink); white-space:nowrap; }
.cost__row.is-loss b{ color:var(--alarm-ink); }
.cost__note{ font-size:.9rem; color:var(--muted); margin-top:1.1rem; }

/* ---------- feature grid (varied, not identical-card) ---------- */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(1.2rem,2.4vw,1.9rem); }
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem;
  min-width:0; transition:border-color .3s, transform .3s var(--ease); }
.feat:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.feat__ic{ width:40px; height:40px; border-radius:11px; background:oklch(0.58 0.105 235 / .12); color:var(--cool-ink);
  display:grid; place-items:center; margin-bottom:1rem; }
.feat__ic svg{ width:22px; height:22px; }
.feat h3{ font-size:1.18rem; margin-bottom:.45rem; }
.feat p{ color:var(--ink-soft); font-size:1rem; overflow-wrap:anywhere; }
.feat--alarm .feat__ic{ background:oklch(0.62 0.205 35 / .12); color:var(--alarm-ink); }
@media (prefers-reduced-motion: reduce){ .feat:hover{ transform:none; } }

/* ---------- HACCP: clipboard replaced ---------- */
.haccp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .haccp{ grid-template-columns:1fr; } }
.haccp__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(1.4rem,3vw,2rem); }
.haccp__card h3{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); font-weight:700; margin-bottom:1.1rem; }
.logrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem .9rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line); }
.logrow:last-child{ border-bottom:0; }
.logrow time{ font-family:var(--mono); font-size:.84rem; color:var(--muted); white-space:nowrap; }
.logrow .lbl{ color:var(--ink-soft); font-weight:500; min-width:0; overflow-wrap:anywhere; }
.logrow .val{ font-family:var(--mono); font-weight:700; color:var(--ink); white-space:nowrap; }
.logrow .val.ok{ color:var(--good); }
.logrow .val.hi{ color:var(--alarm-ink); }

/* ---------- who it's for (chips, fully wrapping) ---------- */
.who{ display:flex; flex-wrap:wrap; gap:.7rem; }
.who span{ display:inline-flex; align-items:center; gap:.5rem; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:.6rem 1.05rem; font-weight:500; font-size:.97rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.who span svg{ width:17px; height:17px; color:var(--cool); flex:none; }

/* ---------- who-grid (solutions page, real detail per audience) ---------- */
.audience{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(1.2rem,2.4vw,1.8rem); }
.aud{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; min-width:0; }
.aud h3{ font-size:1.15rem; margin-bottom:.4rem; }
.aud p{ color:var(--ink-soft); font-size:1rem; overflow-wrap:anywhere; }

/* ---------- steps (numbered editorial sequence) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.8rem); counter-reset:s; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:0; } }
.step{ counter-increment:s; position:relative; padding-top:1.5rem; border-top:2px solid var(--line-2); min-width:0; }
@media (max-width:820px){ .step{ padding:1.5rem 0; border-top:1px solid var(--line); } .step:first-child{ border-top:2px solid var(--line-2); } }
.step::before{ content:"0" counter(s); font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--cool-ink); position:absolute; top:1.3rem; right:0; }
.step h3{ font-size:1.22rem; margin:.2rem 0 .5rem; padding-right:2.2rem; }
.step p{ color:var(--ink-soft); }

/* ---------- compliance band (the standards facts) ---------- */
.std{ background:var(--night); color:var(--on-dark); border-radius:var(--radius-lg); padding:clamp(2rem,2rem + 3.5vw,4rem); position:relative; overflow:hidden; }
.std::before{ content:""; position:absolute; inset:auto -10% -50% auto; width:50%; height:90%;
  background:radial-gradient(60% 60% at 80% 100%, oklch(0.58 0.105 235 / .20), transparent 70%); pointer-events:none; }
.std__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
@media (max-width:860px){ .std__in{ grid-template-columns:1fr; } }
.std .eyebrow{ color:var(--steel-2); margin-bottom:1rem; }
.std h2{ color:var(--on-dark); margin-bottom:1rem; max-width:20ch; }
.std p{ color:var(--on-dark-2); font-size:1.08rem; max-width:54ch; }
.std a{ color:var(--on-dark); }
.std__facts{ display:grid; gap:.8rem; }
.fact{ background:oklch(0.27 0.045 255 / .55); border:1px solid oklch(0.62 0.08 250 / .3); border-radius:var(--radius); padding:1rem 1.15rem; min-width:0; }
.fact b{ font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--on-dark); display:block; margin-bottom:.2rem; overflow-wrap:anywhere; }
.fact span{ color:var(--on-dark-2); font-size:.95rem; }

/* ---------- proof / backed-by ---------- */
.proof p{ color:var(--ink-soft); max-width:64ch; font-size:1.1rem; }
.proof__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1rem; margin-top:2rem; }
.proof__stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; min-width:0; }
.proof__stat b{ font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); display:block; margin-bottom:.3rem; overflow-wrap:anywhere; }
.proof__stat span{ color:var(--muted); font-size:.93rem; }

/* ---------- faq ---------- */
.faq{ max-width:780px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative; font-family:var(--display); font-weight:600; font-size:1.16rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; width:12px; height:12px; margin-top:-7px;
  border-right:2px solid var(--cool); border-bottom:2px solid var(--cool); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq p{ color:var(--ink-soft); padding-bottom:1.3rem; max-width:66ch; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; max-width:560px; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.4rem; }
.field label{ font-weight:600; font-size:.95rem; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--muted); font-size:.86rem; }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:.8rem .9rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.field textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--cool); box-shadow:0 0 0 3px oklch(0.58 0.105 235 / .16); }
.form__note{ color:var(--muted); font-size:.86rem; }
.aside{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2rem); }
.aside h2{ font-size:1.2rem; }
.aside h2:not(:first-child){ margin-top:1.6rem; }
.aside dl{ margin:.6rem 0 0; }
.aside dt{ font-weight:600; color:var(--ink); margin-top:.9rem; }
.aside dd{ margin:.15rem 0 0; color:var(--ink-soft); font-size:.96rem; }
.aside .tel{ font-family:var(--mono); font-weight:700; font-size:1.5rem; color:var(--cool-ink); text-decoration:none; letter-spacing:-0.02em; }

/* ---------- guide (long-form) ---------- */
.prose h2{ margin:2.6rem 0 .9rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--ink-soft); margin-bottom:1rem; }
.prose ul{ color:var(--ink-soft); margin:0 0 1.2rem; padding-left:1.2rem; display:grid; gap:.55rem; }
.prose li{ padding-left:.2rem; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose .faq{ margin-top:1.5rem; }

/* ---------- closing CTA ---------- */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta .eyebrow{ justify-content:center; display:flex; margin-bottom:1.1rem; }
.cta h2{ max-width:20ch; margin:0 auto 1.1rem; }
.cta p{ max-width:52ch; margin:0 auto 1.8rem; color:var(--ink-soft); font-size:1.12rem; }
.cta__btns{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }
.cta__sub{ margin:1.4rem auto 0; color:var(--muted); font-size:.94rem; max-width:56ch; }

/* ---------- footer ---------- */
.foot{ background:var(--night); color:var(--on-dark-2); padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2.4rem; }
.foot a{ color:var(--on-dark-2); text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot__top{ display:grid; grid-template-columns:1.3fr 2fr; gap:2.5rem 3rem; }
@media (max-width:760px){ .foot__top{ grid-template-columns:1fr; } }
.foot__brand .brand{ color:var(--on-dark); }
.foot__promise{ font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--on-dark); margin:.9rem 0 0; max-width:24ch; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2rem 3rem; }
.foot__col h4{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel-2); margin:0 0 .9rem; font-weight:700; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot__col li{ font-size:.95rem; }
.foot__bottom{ border-top:1px solid oklch(1 0 0 / .1); margin-top:2.6rem; padding-top:1.5rem; display:flex; flex-wrap:wrap;
  gap:.6rem 1.6rem; justify-content:space-between; color:var(--steel-2); font-size:.85rem; }
.foot__bottom a{ color:var(--on-dark-2); }

/* ---------- reveal motion (visible by default; JS hides only below-fold) ---------- */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-pending{ opacity:0; transform:translateY(20px); }
@media (prefers-reduced-motion: reduce){
  .reveal.is-pending{ opacity:1; transform:none; }
  .gauge__live{ animation:none; }
  .readout__panel,.readout__big,.readout__state,path.trace{ transition:none; }
}