/* ==========================================================================
   Support24 — landing page
   Self-contained design system — the reference implementation of design-system/support24/MASTER.md.

   Principles (see the review that produced this file):
   - one grotesk (Geist) at three optical roles: display / text / mono labels
   - a depth system (ground → panel → element) built from hairlines, inner
     highlights and low-amplitude shadows, never from heavy borders
   - motion that whispers: enter 480ms, stagger 40ms, hover 160ms; no scale,
     no breathing; every animated thing renders its final state under
     prefers-reduced-motion
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Ground and surfaces */
  --ground:     #F7F7F5;
  --ground-2:   #F1F1EE;
  --panel:      #FFFFFF;
  --sunk:       #F3F3F0;

  /* Ink */
  --ink:        #0C0F14;
  --ink-2:      #1F232B;
  --slate:      #474C57;
  --muted:      #6B7079;

  /* Hairlines */
  --hair:       rgba(12,15,20,.08);
  --hair-2:     rgba(12,15,20,.14);
  --hair-3:     rgba(12,15,20,.22);
  --highlight:  rgba(255,255,255,.75);

  /* Brand — evergreen. Used for the one primary action and for "evidenced". */
  --green:      #0E6B52;
  --green-2:    #0B5A45;
  --green-soft: #E8F2ED;
  --green-ink:  #0A4A3A;

  /* Signal — amber. Only for awaiting / escalated / clock. */
  --amber:      #B45309;
  --amber-soft: #FBF1E3;

  /* Night chapter */
  --night:      #0B0D12;
  --night-2:    #12151C;
  --night-3:    #1A1E27;
  --night-hair: rgba(255,255,255,.08);
  --night-hair-2: rgba(255,255,255,.14);
  --night-text: #B8BDC7;
  --night-muted:#7E8590;

  /* Shape */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;

  /* Depth */
  --shadow-1: 0 1px 0 rgba(12,15,20,.03), 0 1px 2px rgba(12,15,20,.05);
  --shadow-2: 0 1px 1px rgba(12,15,20,.03), 0 4px 10px rgba(12,15,20,.04), 0 18px 44px rgba(12,15,20,.07);
  --shadow-3: 0 2px 4px rgba(12,15,20,.04), 0 12px 28px rgba(12,15,20,.08), 0 40px 90px rgba(12,15,20,.12);
  --inset-hi: inset 0 1px 0 var(--highlight);

  /* Layout */
  --container: 1200px;
  --gut: 24px;
  --chapter: clamp(5rem, 10vw, 9rem);
  --block: clamp(3rem, 6vw, 5rem);

  /* Type */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-hover: 160ms;
  --t-enter: 480ms;
}

/* --- Base -------------------------------------------------------------- */
*, *::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;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--slate);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: #CFE3DA; color: var(--ink); }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; text-wrap: balance; font-weight: 500; }
h1 { font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.032em; }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.25; letter-spacing: -0.018em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; font-weight: 600; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
[id] { scroll-margin-top: 84px; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 780px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-1);
  z-index: 1000; text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }

/* --- Type helpers ------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.25rem;
}
.eyebrow b { color: var(--green); font-weight: 500; }
.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height: 1.55; color: var(--slate); max-width: 58ch; letter-spacing: -0.01em; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; line-height: 1.2;
  background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair);
}
.chip--green { background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 1px rgba(14,107,82,.18); }
.chip--amber { background: var(--amber-soft); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(180,83,9,.18); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-2); border: 1px solid transparent;
  font-weight: 500; font-size: .95rem; letter-spacing: -0.01em; text-decoration: none; line-height: 1;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-out);
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-hover) var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--primary:hover { background: #1A1F28; border-color: #1A1F28; color: #fff; }
.btn--green { background: var(--green); color: #fff; border-color: var(--green); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--green:hover { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--hair-2); box-shadow: var(--shadow-1), var(--inset-hi); }
.btn--ghost:hover { border-color: var(--hair-3); color: var(--ink); }
.btn--night { background: #fff; color: var(--ink); border-color: #fff; }
.btn--night:hover { background: #E9EAEE; color: var(--ink); }
.btn--night-ghost { background: transparent; color: #fff; border-color: var(--night-hair-2); }
.btn--night-ghost:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--lg { height: 50px; padding: 0 22px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .95rem;
  color: var(--ink); text-decoration: none;
}
.link svg { width: 14px; height: 14px; transition: transform var(--t-hover) var(--ease-out); }
.link:hover { color: var(--green); }
.link:hover svg { transform: translateX(2px); }

/* --- Header ------------------------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,247,245,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 240ms var(--ease-out);
}
.top.is-stuck { box-shadow: 0 1px 0 var(--hair); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.top__bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--green); opacity: 0; transition: opacity 240ms; }
.top.is-stuck .top__bar { opacity: 1; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.foot .brand img { height: 24px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  position: relative; padding: 8px 11px; border-radius: 7px;
  color: var(--slate); text-decoration: none; font-weight: 500; font-size: .9rem; letter-spacing: -0.01em;
  transition: color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--ink); background: rgba(12,15,20,.04); }
.nav a:not(.btn).is-active { color: var(--ink); }
.nav a:not(.btn).is-active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px; background: var(--green); }
.nav .btn { margin-left: 10px; height: 38px; padding: 0 14px; font-size: .88rem; }

.burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--hair-2); border-radius: 8px; color: var(--ink);
}

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ground); box-shadow: 0 1px 0 var(--hair), 0 20px 40px rgba(12,15,20,.08);
    padding: 8px var(--gut) 16px;
  }
  .top.is-open .nav { display: flex; }
  .nav a:not(.btn) { padding: 12px 10px; font-size: 1rem; }
  .nav a:not(.btn).is-active::after { display: none; }
  .nav .btn { margin: 8px 0 0; height: 44px; }
}

/* --- Chapters ---------------------------------------------------------- */
.chapter { padding-block: var(--chapter); position: relative; }
.chapter--tight { padding-block: var(--block); }
.chapter--panel { background: var(--panel); box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.chapter--sunk { background: var(--ground-2); }
.chapter--night { background: var(--night); color: var(--night-text); overflow: hidden; }
.chapter--night h2, .chapter--night h3, .chapter--night h4 { color: #fff; }
.chapter--night .eyebrow { color: var(--night-muted); }
.chapter--night .eyebrow b { color: #7FC2A8; }
.chapter--night .lede { color: var(--night-text); }
.chapter--night a:not(.btn) { color: #9BD1BC; }

/* grain + light for the two "expensive" surfaces */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.chapter--night.grain::before { mix-blend-mode: screen; opacity: .18; }
.grain > * { position: relative; z-index: 1; }

.head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head--wide { max-width: 860px; }
.head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; max-width: none; }
@media (max-width: 860px) { .head--split { grid-template-columns: 1fr; } }

/* --- Hero -------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem) 0; overflow: hidden; }
.hero__light {
  position: absolute; inset: -20% -10% auto; height: 70%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 70% at 20% 10%, rgba(14,107,82,.10), transparent 60%),
    radial-gradient(50% 60% at 85% 0%, rgba(180,83,9,.06), transparent 60%);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero__in { position: relative; z-index: 1; max-width: 900px; }
.hero h1 { margin-bottom: 1.4rem; max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lede { margin-bottom: 2rem; max-width: 62ch; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 2.2rem; }
.hero__line { font-size: .95rem; color: var(--muted); letter-spacing: -0.01em; }
.hero__line b { color: var(--ink); font-weight: 500; }

/* --- The record: one case, moving ------------------------------------- */
.record-wrap { position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.record {
  position: relative;
  background: var(--panel); border-radius: var(--r-4);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--hair), var(--inset-hi);
  overflow: hidden;
}
.record__bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 12px 18px; box-shadow: 0 1px 0 var(--hair); background: linear-gradient(#fff, #FBFBFA);
}
.record__ref { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); }
.record__ref b { color: var(--ink); font-weight: 500; }
.record__title { font-size: .92rem; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record__title span { color: var(--muted); font-weight: 400; }
.record__state { justify-self: end; }

.record__body { display: grid; grid-template-columns: 236px minmax(0, 1fr) 280px; min-height: 380px; }
.record__col { padding: 18px 18px 20px; min-width: 0; }
.record__col + .record__col { box-shadow: -1px 0 0 var(--hair); }
.record__h { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }

/* stages */
.stages { display: grid; gap: 2px; }
.stage {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0;
  padding: 8px 8px; border-radius: 7px; font-size: .86rem; color: var(--muted);
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}
.stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-2); justify-self: center; transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.stage.is-done { color: var(--slate); }
.stage.is-done i { background: var(--green); }
.stage.is-now { background: var(--sunk); color: var(--ink); font-weight: 500; }
.stage.is-now i { background: var(--green); box-shadow: 0 0 0 4px rgba(14,107,82,.15); }
.stage.is-wait.is-now i { background: var(--amber); box-shadow: 0 0 0 4px rgba(180,83,9,.15); }
.stage small { display: block; font-family: var(--mono); font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; color: var(--muted); font-weight: 400; }

/* timeline */
.log { display: grid; gap: 0; position: relative; }
.log::before { content: ""; position: absolute; left: 63px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
.log li {
  display: grid; grid-template-columns: 52px 22px minmax(0, 1fr); gap: 0 8px; align-items: start;
  padding: 7px 0; font-size: .88rem; color: var(--ink-2);
}
.log time { font-family: var(--mono); font-size: .7rem; color: var(--muted); padding-top: 3px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.log .k { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-2); margin: 7px auto 0; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--panel); }
.log .k.green { background: var(--green); }
.log .k.amber { background: var(--amber); }
.log .k.ink { background: var(--ink); }
.log b { font-weight: 500; color: var(--ink); }
.log small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
.log li.is-pending { opacity: 0; }
.log li.is-pending.is-in { opacity: 1; transition: opacity 360ms var(--ease-out); }

/* evidence + clock */
.evidence { display: grid; gap: 8px; }
.evidence li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: .82rem; color: var(--slate); line-height: 1.4; }
.evidence li svg { width: 14px; height: 14px; color: var(--green); margin-top: 2px; }
.evidence li.is-pending { opacity: 0; }
.evidence li.is-pending.is-in { opacity: 1; transition: opacity 360ms var(--ease-out); }
/* hero entrance guard: hidden only while scripting is on, motion is welcome, and before motion.js has run */
.js-motion [data-hero] { opacity: 0; }
.clock {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}
.clock b { display: block; font-size: .8rem; color: var(--ink); font-weight: 500; }
.clock small { display: block; font-size: .72rem; color: var(--muted); }
.clock .t { font-family: var(--mono); font-size: 1.1rem; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock.is-clear .t { color: var(--green); }
.stamp {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-ink); background: var(--green-soft); padding: 6px 10px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(14,107,82,.2);
  opacity: 0; transform: translateY(4px);
}
.stamp.is-in { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.stamp svg { width: 12px; height: 12px; }
.record__foot { padding: 10px 18px; box-shadow: 0 -1px 0 var(--hair); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .record__body { grid-template-columns: 200px minmax(0, 1fr); }
  .record__col--ev { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--hair) !important; }
  .evidence { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .record__body { grid-template-columns: 1fr; }
  .record__col + .record__col { box-shadow: 0 -1px 0 var(--hair); }
  .stages { grid-template-columns: 1fr 1fr; }
  .evidence { grid-template-columns: 1fr; }
  .record__bar { grid-template-columns: 1fr auto; }
  .record__title { display: none; }
  .record__ref .chip { display: none; } /* the foot already says illustrative */
}

/* --- Chapter 01 — the day ----------------------------------------------- */
.day { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.day__copy { position: sticky; top: 96px; }
.tl { display: grid; }
.tl li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 0; box-shadow: 0 1px 0 var(--hair); align-items: baseline; }
.tl li:first-child { box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.tl time { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl li.is-warm time { color: var(--amber); }
.tl p { font-size: 1.05rem; color: var(--ink); margin: 0; letter-spacing: -0.012em; }
.day__close { margin-top: 2.2rem; max-width: 46ch; }
.day__close p:first-child { color: var(--slate); }
.day__close p:last-child { font-size: 1.35rem; color: var(--ink); letter-spacing: -0.02em; font-weight: 500; line-height: 1.3; }
@media (max-width: 860px) { .day { grid-template-columns: 1fr; } .day__copy { position: static; } .tl li { grid-template-columns: 70px 1fr; } }

/* --- Chapter 02 — reframe ---------------------------------------------- */
.reframe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.trig { margin-top: 1.5rem; display: grid; counter-reset: trig; }
.trig li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px 0; box-shadow: 0 1px 0 var(--hair); font-size: .95rem; color: var(--ink-2); align-items: baseline; }
.trig li::before { content: counter(trig, decimal-leading-zero); counter-increment: trig; font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .06em; }
.trig li:first-child { box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.reframe__compare { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reframe__compare div { padding: 14px 16px; border-radius: var(--r-2); font-size: .95rem; line-height: 1.45; }
.reframe__compare .old { background: var(--sunk); color: var(--slate); box-shadow: inset 0 0 0 1px var(--hair); }
.reframe__compare .new { background: var(--ink); color: #fff; }
.reframe__compare b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; color: var(--muted); }
.reframe__compare .new b { color: #7FC2A8; }
@media (max-width: 520px) { .reframe__compare { grid-template-columns: 1fr; } }

/* authority-check artefact */
.artefact {
  background: var(--panel); border-radius: var(--r-3);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--hair), var(--inset-hi);
  overflow: hidden;
}
.artefact__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; box-shadow: 0 1px 0 var(--hair); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.artefact__bar b { color: var(--ink); font-weight: 500; }
.artefact__body { padding: 16px; }
.kv { display: grid; }
.kv li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; font-size: .88rem; box-shadow: 0 1px 0 var(--hair); align-items: baseline; }
.kv li:last-child { box-shadow: none; }
.kv span { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kv b { font-weight: 500; color: var(--ink); }
.kv .ok { color: var(--green-ink); }
.kv .no { color: var(--amber); }
.artefact__out { margin: 14px 16px 16px; padding: 12px 14px; border-radius: var(--r-2); background: var(--ink); color: #D8DCE4; font-size: .88rem; line-height: 1.45; }
.artefact__out b { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #7FC2A8; margin-bottom: 4px; font-weight: 500; }
.artefact__note { padding: 0 16px 14px; font-size: .8rem; color: var(--muted); }
.reframe__side { position: sticky; top: 96px; display: grid; gap: 1.5rem; }

/* six-step flow */
.flow { display: grid; }
.flow li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; box-shadow: 0 1px 0 var(--hair); align-items: start; }
.flow li:first-child { box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.flow__n { font-family: var(--mono); font-size: .7rem; color: var(--muted); padding-top: 5px; letter-spacing: .06em; }
.flow__t { font-size: 1.02rem; color: var(--ink); font-weight: 500; letter-spacing: -0.014em; }
.flow__d { font-size: .88rem; color: var(--muted); margin-top: 2px; }
.flow li.is-out .flow__n, .flow li.is-out .flow__t { color: var(--green-ink); }
@media (max-width: 860px) { .reframe { grid-template-columns: 1fr; } .reframe__side { position: static; } }

/* --- Chapter 03 — the loop --------------------------------------------- */
.rail { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin-top: 1rem; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hair-2); }
.rail__fill { position: absolute; left: 0; top: 5px; height: 1px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
.rail li { padding: 0 14px 0 0; position: relative; }
.rail li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--hair-3); transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.rail li.is-lit::before { background: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.rail li.is-out.is-lit::before { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rail__n { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--muted); margin: 22px 0 8px; }
.rail b { display: block; font-size: 1.05rem; color: var(--ink); font-weight: 500; letter-spacing: -0.014em; margin-bottom: 6px; }
.rail span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 1000px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.2rem; } .rail::before, .rail__fill { display: none; } .rail li::before { display: none; } .rail__n { margin-top: 0; } }
@media (max-width: 560px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* channels micro-row (chapter 03) */
.channels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -.5rem 0 2rem; }
.channels__k { font-size: .9rem; color: var(--ink); font-weight: 500; margin-right: 8px; letter-spacing: -0.01em; }
.channels span:not(.channels__k) { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; background: var(--panel); color: var(--slate); box-shadow: inset 0 0 0 1px var(--hair); }

/* two reassurances under the compare block (chapter 09) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2.4rem; padding-top: 2rem; box-shadow: 0 -1px 0 var(--hair); }
.pair h3 { margin-bottom: .5rem; }
.pair p { font-size: .97rem; max-width: 52ch; }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }

/* --- Desks ------------------------------------------------------------- */
.desks { display: grid; grid-template-columns: 1fr 1fr; }
.desk { padding: clamp(1.6rem, 3vw, 2.4rem); position: relative; display: flex; flex-direction: column; gap: 1rem; }
.desk:nth-child(1) { box-shadow: 1px 0 0 var(--hair), 0 1px 0 var(--hair); }
.desk:nth-child(2) { box-shadow: 0 1px 0 var(--hair); }
.desk:nth-child(3) { box-shadow: 1px 0 0 var(--hair); }
.desk__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.desk__num { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--muted); }
.desk__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--panel); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hair), var(--inset-hi); }
.desk__icon svg { width: 16px; height: 16px; }
.desk h3 { margin: 0; }
.desk__promise { font-size: 1.1rem; color: var(--ink); line-height: 1.4; letter-spacing: -0.016em; max-width: 34ch; }
.desk__caps { font-size: .9rem; color: var(--slate); line-height: 1.7; }
.desk__caps span::after { content: " · "; color: var(--hair-3); }
.desk__caps span:last-child::after { content: ""; }
.desk__ex { margin-top: auto; padding: 12px 14px; background: var(--sunk); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair); }
.desk__ex b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-size: .86rem; color: var(--ink-2); }
.chain li { display: inline-flex; align-items: center; }
.chain li + li::before { content: "→"; color: var(--hair-3); margin: 0 6px; }
.chain li.is-out { color: var(--green-ink); font-weight: 500; }
.desk__note { font-size: .9rem; color: var(--slate); padding-left: 12px; box-shadow: inset 2px 0 0 var(--green-soft); }
.desk__note strong { color: var(--ink); }
.states { display: flex; flex-wrap: wrap; gap: 5px; }
.states li { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: var(--panel); color: var(--slate); box-shadow: inset 0 0 0 1px var(--hair); }
.states li.is-amber { color: var(--amber); }
.states li.is-green { color: var(--green-ink); }
@media (max-width: 800px) {
  .desks { grid-template-columns: 1fr; }
  .desk { padding-inline: 0; }
  .desk:nth-child(n) { box-shadow: 0 1px 0 var(--hair); }
  .desk:last-child { box-shadow: none; }
}

/* --- Scenarios --------------------------------------------------------- */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 1.6rem; padding: 3px; border-radius: 10px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); width: fit-content; max-width: 100%; }
.tab {
  background: transparent; border: 0; border-radius: 8px;
  padding: 0 14px; height: 38px; color: var(--slate); font-weight: 500; font-size: .9rem; letter-spacing: -0.01em;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hair); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.panel[hidden] { display: none; }
.panel__steps { display: grid; }
.panel__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 0; box-shadow: 0 1px 0 var(--hair); font-size: .98rem; color: var(--ink-2); align-items: baseline; }
.panel__steps li:first-child { box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.panel__steps li::before { content: attr(data-n); font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .06em; }
.panel__side { position: sticky; top: 96px; display: grid; gap: 12px; }
.outcome { background: var(--ink); color: #fff; border-radius: var(--r-3); padding: 20px 22px; box-shadow: var(--shadow-2); }
.outcome b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #7FC2A8; margin-bottom: 8px; font-weight: 500; }
.outcome p { font-size: 1.15rem; line-height: 1.35; color: #fff; letter-spacing: -0.016em; font-weight: 500; }
.aside { background: var(--panel); border-radius: var(--r-3); padding: 16px 18px; font-size: .92rem; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hair); }
.aside b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; font-weight: 500; }
@media (max-width: 800px) { .panel { grid-template-columns: 1fr; } .panel__side { position: static; } }

/* --- Roster Relay (night) --------------------------------------------- */
.night-light { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 60% at 80% 20%, rgba(127,194,168,.10), transparent 60%), radial-gradient(40% 50% at 10% 90%, rgba(180,83,9,.08), transparent 60%);
}
.rr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ladder { display: grid; gap: 6px; counter-reset: rung; }
.ladder li {
  counter-increment: rung; display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 16px; border-radius: var(--r-2); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-hair), inset 0 1px 0 rgba(255,255,255,.04);
  color: #fff; font-size: .95rem;
  transition: opacity 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.ladder li::before { content: counter(rung); font-family: var(--mono); font-size: .72rem; color: var(--night-muted); }
.ladder li span { display: block; font-size: .8rem; color: var(--night-muted); margin-top: 2px; }
.ladder .st { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--night-muted); white-space: nowrap; }
.ladder li.is-done { opacity: .7; }
.ladder li.is-now { box-shadow: inset 0 0 0 1px rgba(127,194,168,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.ladder li.is-now .st { color: #7FC2A8; }
.ladder li.is-hold { opacity: .45; }
.ladder__note { font-size: .86rem; color: var(--night-muted); margin-top: 14px; }
@media (max-width: 800px) { .rr { grid-template-columns: 1fr; } .ladder li { grid-template-columns: 24px 1fr; } .ladder .st { grid-column: 2; } }

/* --- Command centre ---------------------------------------------------- */
.cmd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.board { background: var(--panel); border-radius: var(--r-3); box-shadow: var(--shadow-3), 0 0 0 1px var(--hair), var(--inset-hi); overflow: hidden; }
.board__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; box-shadow: 0 1px 0 var(--hair); background: linear-gradient(#fff, #FBFBFA); }
.board__bar b { font-size: .9rem; color: var(--ink); font-weight: 500; }
.board__bar span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.board__row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 18px; box-shadow: 0 1px 0 var(--hair); transition: background var(--t-hover) var(--ease-out); }
.board__row:hover { background: var(--sunk); }
.board__row .k { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-3); }
.board__row .k.amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.board__row .k.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.board__row b { display: block; font-size: .92rem; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.board__row small { display: block; font-size: .8rem; color: var(--muted); }
.board__row .st { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.board__foot { padding: 10px 18px; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmd__list { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cmd__list li { font-size: .93rem; color: var(--ink-2); padding: 7px 0; box-shadow: 0 1px 0 var(--hair); }
.cmd__quote { margin-top: 1.8rem; font-size: 1.25rem; color: var(--ink); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; max-width: 30ch; }
@media (max-width: 860px) { .cmd { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cmd__list { grid-template-columns: 1fr; } }

/* --- Approach ---------------------------------------------------------- */
.rungs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 2.4rem; }
.rung { padding: 1.6rem clamp(1.2rem, 2.4vw, 2rem) 1.6rem 0; }
.rung + .rung { padding-left: clamp(1.2rem, 2.4vw, 2rem); box-shadow: -1px 0 0 var(--hair); }
.rung b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.rung h3 { margin-bottom: .5rem; }
.rung p { font-size: .93rem; }
.rung ul { margin-top: 12px; display: grid; }
.rung li { font-size: .88rem; color: var(--slate); padding: 6px 0; box-shadow: 0 1px 0 var(--hair); }
.rung--decide b { color: var(--green-ink); }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9rem; color: var(--ink-2); padding: 14px; background: var(--panel); border-radius: var(--r-2); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hair), var(--inset-hi); }
.trust li svg { width: 16px; height: 16px; color: var(--green); margin-top: 3px; }
.closing { margin-top: 2.2rem; font-size: 1.2rem; color: var(--ink); max-width: 56ch; letter-spacing: -0.018em; line-height: 1.4; font-weight: 500; }
@media (max-width: 900px) { .rungs { grid-template-columns: 1fr; } .rung { padding-inline: 0 !important; box-shadow: 0 1px 0 var(--hair) !important; } .rung:last-child { box-shadow: none !important; } .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust { grid-template-columns: 1fr; } }

/* --- Compare ----------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare > div { border-radius: var(--r-3); padding: clamp(1.4rem, 2.4vw, 2rem); }
.compare .was { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); }
.compare .now { background: var(--night); color: var(--night-text); box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
.compare .now::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 100% 0%, rgba(127,194,168,.14), transparent 60%); pointer-events: none; }
.compare .now > * { position: relative; }
.compare b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; color: var(--muted); }
.compare .now b { color: #7FC2A8; }
.compare q { display: block; font-size: 1.2rem; line-height: 1.35; margin-bottom: 1rem; quotes: "\201C" "\201D"; letter-spacing: -0.018em; font-weight: 500; }
.compare .was q { color: var(--ink); }
.compare .now q { color: #fff; }
.compare ul { display: grid; margin-top: 10px; }
.compare li { font-size: .9rem; padding: 6px 0; box-shadow: 0 1px 0 var(--night-hair); }
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

/* --- Cost -------------------------------------------------------------- */
.cost { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cost__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: cost; }
.cost__grid li { padding: 12px 0; box-shadow: 0 1px 0 var(--hair); font-size: .93rem; color: var(--ink-2); display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; }
.cost__grid li::before { content: counter(cost, decimal-leading-zero); counter-increment: cost; font-family: var(--mono); font-size: .66rem; color: var(--amber); letter-spacing: .06em; }
@media (max-width: 860px) { .cost { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cost__grid { grid-template-columns: 1fr; } }

/* --- Trio -------------------------------------------------------------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.trio li { position: relative; background: var(--panel); border-radius: var(--r-3); padding: 22px 22px 20px; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hair), var(--inset-hi); }
.trio li.is-s24 { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--green), var(--inset-hi); }
.trio li::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px; background: var(--hair-3); }
.trio li:last-child::after { display: none; }
.trio b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.trio h3 { margin-bottom: .35rem; }
.trio p { font-size: .92rem; }
.trio .link { margin-top: 10px; font-size: .9rem; }
@media (max-width: 800px) { .trio { grid-template-columns: 1fr; } .trio li::after { display: none; } }

/* --- Assessment -------------------------------------------------------- */
.assess { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.assess__copy { position: sticky; top: 96px; }
.assess__copy ul { margin-top: 1.2rem; display: grid; }
.assess__copy li { font-size: .93rem; color: var(--ink-2); padding: 8px 0; box-shadow: 0 1px 0 var(--hair); display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.assess__copy li svg { width: 14px; height: 14px; color: var(--green); margin-top: 4px; }
.assess__fine { margin-top: 1.2rem; font-size: .82rem; color: var(--muted); }

.form { background: var(--panel); border-radius: var(--r-4); padding: clamp(1.4rem, 2.6vw, 2.2rem); box-shadow: var(--shadow-2), 0 0 0 1px var(--hair), var(--inset-hi); }
.form fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.form legend { font-weight: 500; color: var(--ink); font-size: .98rem; margin-bottom: .6rem; padding: 0; letter-spacing: -0.012em; }
.form legend small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 9px 12px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: .9rem; color: var(--ink-2); cursor: pointer; background: var(--panel);
  transition: box-shadow var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.opt label::before { content: ""; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-3); flex: none; background: #fff; transition: box-shadow var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out); }
.opt input[type="checkbox"] + label::before { border-radius: 4px; }
.opt label:hover { box-shadow: inset 0 0 0 1px var(--hair-3); }
.opt input:checked + label { box-shadow: inset 0 0 0 1px var(--green); background: var(--green-soft); color: var(--green-ink); }
.opt input:checked + label::before { background: var(--green); box-shadow: inset 0 0 0 1px var(--green), inset 0 0 0 3.5px #fff; }
.opt input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.opt input:disabled + label { opacity: .45; cursor: not-allowed; }
.form__err { display: none; color: var(--amber); font-size: .86rem; margin: 0 0 12px; }
.form__err.is-on { display: block; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form__actions small { color: var(--muted); font-size: .8rem; }
@media (max-width: 860px) { .assess { grid-template-columns: 1fr; } .assess__copy { position: static; } }
@media (max-width: 520px) { .opts { grid-template-columns: 1fr; } }

.result { display: none; margin-top: 1.6rem; padding-top: 1.6rem; box-shadow: 0 -1px 0 var(--hair); }
.result.is-on { display: block; }
.result h3 { margin-bottom: .4rem; }
.result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1rem; }
.result__box { background: var(--sunk); border-radius: var(--r-2); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.result__box b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.result__box ul { display: grid; gap: 6px; }
.result__box li { font-size: .9rem; color: var(--ink-2); padding-left: 14px; position: relative; line-height: 1.45; }
.result__box li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.result__fine { font-size: .8rem; color: var(--muted); margin-top: 1rem; }
.result__actions { margin-top: 1.2rem; }
@media (max-width: 600px) { .result__grid { grid-template-columns: 1fr; } }

/* --- FAQ --------------------------------------------------------------- */
.faq { display: grid; }
.faq details { box-shadow: 0 1px 0 var(--hair); }
.faq details:first-child { box-shadow: 0 1px 0 var(--hair), 0 -1px 0 var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 500; color: var(--ink); font-size: 1.02rem; letter-spacing: -0.012em; min-height: 48px;
  transition: color var(--t-hover) var(--ease-out);
}
.faq summary:hover { color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform 240ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding: 0 4px 20px; font-size: .97rem; max-width: 66ch; }

/* --- Final CTA --------------------------------------------------------- */
.final { text-align: center; }
.final h2 { max-width: 22ch; margin-inline: auto; color: #fff; }
.final .lede { max-width: 56ch; margin: 0 auto 2rem; }
.final .btn-row { justify-content: center; }

/* Booking: the inline Cal.com calendar (assets/js/booking.js). Once it is
   shown, the section's own booking button steps aside; the email stays. */
.booking { max-width: 1040px; margin: 0 auto 1.6rem; }
.booking__cal {
  min-height: 560px; background: var(--panel); border-radius: var(--r-4);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--night-hair-2);
  overflow: hidden; text-align: left;
}
.booking__loading { padding: 3rem 1.5rem; color: var(--muted); text-align: center; font-size: .95rem; }
.booking__note { margin-top: .9rem; font-size: .85rem; color: var(--night-text); }
.final.is-embedded .btn-row [data-booking] { display: none; }

/* --- Footer ------------------------------------------------------------ */
.foot { padding-block: 3rem 2.5rem; box-shadow: 0 -1px 0 var(--hair); font-size: .88rem; color: var(--muted); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem; }
.foot p { max-width: 44ch; }
.foot h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .8rem; }
.foot ul { display: grid; gap: 6px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--green); }
.foot__base { margin-top: 2.4rem; padding-top: 1.2rem; box-shadow: 0 -1px 0 var(--hair); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .8rem; }
@media (max-width: 720px) { .foot__in { grid-template-columns: 1fr; } }

/* --- Launch page (launch.html) ---------------------------------------- */
.nav--launch { display: flex !important; position: static !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.nav--launch .btn { margin: 0; }
.is-launch .burger { display: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { padding: 1.6rem clamp(1.2rem, 2.4vw, 2rem) 1.6rem 0; }
.steps li + li { padding-left: clamp(1.2rem, 2.4vw, 2rem); box-shadow: -1px 0 0 var(--hair); }
.steps__n { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--green); margin-bottom: 10px; }
.steps h3 { margin-bottom: .5rem; }
.steps p { font-size: .95rem; }
.desks-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.desks-row li { padding: 1.4rem clamp(1rem, 2vw, 1.6rem) 1.4rem 0; }
.desks-row li + li { padding-left: clamp(1rem, 2vw, 1.6rem); box-shadow: -1px 0 0 var(--hair); }
.desks-row .desk__num { display: block; margin-bottom: 12px; }
.desks-row h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.desks-row p { font-size: .92rem; color: var(--slate); }
@media (max-width: 900px) { .steps, .desks-row { grid-template-columns: 1fr; } .steps li, .desks-row li { padding-inline: 0 !important; box-shadow: 0 1px 0 var(--hair) !important; } .steps li:last-child, .desks-row li:last-child { box-shadow: none !important; } }

/* --- Reveal (progressive, reduced-motion safe) ------------------------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .log li.is-pending, .evidence li.is-pending, .stamp { opacity: 1; transform: none; }
  .rail__fill { transform: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}