/* =====================================================================
   SKYTAALS — site.css
   Brand rules and the reason for every decision: see DECISIONS.md
   No inline styles anywhere, so the CSP can stay at style-src 'self'.
   ===================================================================== */

/* ---------- Self-hosted fonts (DECISIONS 10.1, 12.2–12.3) ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/geist-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/geist-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/geist-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --ink:#080A0D; --carbon:#101419; --iron:#1D242C; --graphite:#262E37;
  --parchment:#EAE3D5; --bone:#F4F0E8; --stone:#9AA0A7; --muted:#7D848C;
  --bronze:#C1935A; --bronze-deep:#6B4A22;
  --verified:#56D9D2; --risk:#E8705A; --control:#7FB290;

  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --serif:'Instrument Serif',Georgia,serif;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
  --pad:clamp(16px,5vw,80px); --max:1240px; --nav-h:68px;
  --ease:cubic-bezier(.22,1,.36,1); --r:3px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%} /* WCAG 2.4.11 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{margin:0;background:var(--ink);color:var(--parchment);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--bronze);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--verified);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ol,ul,dl,figure{margin:0}
ol.plain,ul.plain{list-style:none;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type ---------- */
.t-display{font-size:clamp(2.6rem,7.4vw,6rem);font-weight:500;letter-spacing:-.035em;line-height:.98}
.t-h2{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.t-h3{font-size:1.25rem;font-weight:500;letter-spacing:-.012em;line-height:1.3}
.t-lede{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;color:var(--stone);max-width:58ch}
.t-body{color:var(--stone);max-width:62ch}
.t-small{font-size:.875rem;line-height:1.55;color:var(--stone)}
.ref{font-family:var(--mono);font-size:.78rem;letter-spacing:.01em;color:var(--bronze)}
.kicker{font-size:.95rem;color:var(--bronze);margin-bottom:var(--s4)}
.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(72px,10vw,var(--s10))}
.rule{border:0;height:1px;background:var(--iron);margin:0}
.split{display:grid;gap:var(--s6)}
@media (min-width:880px){.split{grid-template-columns:5fr 7fr;gap:var(--s8)}}
.note{margin-top:var(--s6);padding:var(--s4) var(--s5);border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon);
  font-size:.9rem;color:var(--stone);max-width:78ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);
  border-radius:var(--r);font-size:.97rem;font-weight:500;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--parchment);color:var(--ink)}
.btn-primary:hover{background:var(--bone)}
.btn-primary[disabled]{opacity:.6;cursor:progress}
.btn-ghost{border:1px solid var(--graphite);color:var(--parchment)}
.btn-ghost:hover{border-color:var(--bronze)}
.btn-sm{min-height:40px;padding:0 var(--s4);font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---------- Nav ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--parchment);color:var(--ink);padding:10px 14px;border-radius:var(--r)}
.skip:focus{left:8px}
.nav{position:sticky;top:0;z-index:100;background:rgba(8,10,13,.88);backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--iron)}
.nav__in{max-width:var(--max);margin-inline:auto;padding:12px var(--pad);display:flex;align-items:center;gap:var(--s5);min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:1.08rem}
.brand svg{width:26px;height:26px}
.nav__links{display:none;margin-left:auto;gap:var(--s5)}
.nav__links a{font-size:.92rem;color:var(--stone);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav__links a:hover{color:var(--parchment)}
.nav__links a[aria-current="true"]{color:var(--parchment);border-bottom-color:var(--bronze)}
.nav__cta{display:none}
.menu-btn{margin-left:auto;min-height:44px;min-width:64px;padding:0 var(--s3);border:1px solid var(--iron);border-radius:var(--r);font-size:.9rem}
@media (min-width:1060px){.nav__links{display:flex}.nav__cta{display:inline-flex;min-height:40px}.menu-btn{display:none}}
.drawer{display:none;border-top:1px solid var(--iron);padding:var(--s4) var(--pad) var(--s6)}
.drawer[data-open="true"]{display:block}
.drawer a{display:block;padding:12px 0;font-size:1.15rem;text-decoration:none;border-bottom:1px solid var(--iron)}
.drawer .btn{margin-top:var(--s5);width:100%}
@media (min-width:1060px){.drawer{display:none!important}}

/* ---------- Hero ---------- */
.hero{overflow-x:clip;padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(40px,6vw,72px)}
.hero h1{max-width:13ch}
.hero .t-lede{margin-top:var(--s5)}
.hero .btn-row{margin-top:var(--s6)}
.strip{position:relative;margin-top:clamp(48px,7vw,88px);background:var(--parchment);color:var(--ink);border-radius:2px;overflow:hidden;
  transform:rotate(-1.6deg);transform-origin:left center;margin-inline:calc(var(--pad) * -1)}
.strip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-62deg,transparent 0 calc(11.5% - 1px),rgba(107,74,34,.28) calc(11.5% - 1px) 11.5%)}
.strip__text{position:relative;display:block;white-space:nowrap;font-family:var(--mono);font-weight:500;
  font-size:clamp(.82rem,1.7vw,1.15rem);letter-spacing:.14em;padding:18px var(--pad);overflow:hidden}
.strip__text .c{display:inline-block;min-width:.62em;text-align:center;transition:color .3s}
.strip__text .c.is-moved{color:var(--bronze-deep)}
.strip-caption{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline}
.deadline{display:inline-flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.deadline b{font-weight:500;color:var(--parchment)}
.deadline .days{font-family:var(--mono);color:var(--risk);font-size:.95rem}

/* ---------- Problem ---------- */
.quote-line{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.15;max-width:24ch;color:var(--bone)}
.gaps{display:grid;margin-top:var(--s7);border-top:1px solid var(--iron)}
@media (min-width:880px){.gaps{grid-template-columns:repeat(3,1fr)}}
.gap{padding:var(--s6) 0;border-bottom:1px solid var(--iron)}
@media (min-width:880px){.gap{padding:var(--s6) var(--s6) var(--s6) 0;border-bottom:0}.gap+.gap{border-left:1px solid var(--iron);padding-left:var(--s6)}}
.gap .t-h3{margin-bottom:var(--s3)}

/* ---------- Timeline ---------- */
.timeline{margin-top:var(--s7)}
.tl-track{position:relative;height:2px;background:var(--iron);margin-top:28px}
.tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bronze)}
.tl-today{position:absolute;top:-30px;left:0;transform:translateX(-50%);font-family:var(--mono);font-size:.75rem;color:var(--parchment);white-space:nowrap}
.tl-today.is-left{transform:none}.tl-today.is-right{transform:translateX(-100%)}
.tl-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ink);border:2px solid var(--graphite)}
.tl-dot[data-state="done"]{border-color:var(--control);background:var(--control)}
.tl-dot[data-state="next"]{border-color:var(--bronze)}
.tl-dot[data-state="core"]{border-color:var(--risk)}
.tl-points{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:880px){.tl-points{grid-template-columns:repeat(3,1fr)}}
.tl-point{border-left:2px solid var(--iron);padding-left:var(--s4)}
.tl-point[data-state="done"]{border-color:var(--control)}
.tl-point[data-state="next"]{border-color:var(--bronze)}
.tl-point[data-state="core"]{border-color:var(--risk)}
.tl-point .ref{display:block;margin-bottom:var(--s2);color:var(--parchment)}
.tl-point .t-h3{margin-bottom:var(--s2)}
.tl-status{font-size:.82rem;margin-top:var(--s3)}
.tl-point[data-state="done"] .tl-status{color:var(--control)}
.tl-point[data-state="next"] .tl-status{color:var(--bronze)}
.tl-point[data-state="core"] .tl-status{color:var(--risk)}

/* ---------- Penalty schedule ---------- */
.penalties{margin-top:var(--s8)}
.ptable{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:.95rem}
.ptable caption{text-align:left;color:var(--stone);font-size:.9rem;padding-bottom:var(--s3)}
.ptable th,.ptable td{text-align:left;padding:14px var(--s4) 14px 0;border-bottom:1px solid var(--iron);vertical-align:top}
.ptable thead th{font-weight:500;font-size:.85rem;color:var(--stone);border-bottom-color:var(--graphite)}
.ptable td:first-child{width:9rem}
.ptable td:last-child{text-align:right;white-space:nowrap;padding-right:0;color:var(--parchment)}
.ptable th:last-child{text-align:right;padding-right:0}
@media (max-width:640px){.ptable thead{display:none}.ptable tr{display:grid;grid-template-columns:1fr auto;gap:2px var(--s4);padding:12px 0;border-bottom:1px solid var(--iron)}
  .ptable td{border:0;padding:0}.ptable td:first-child{width:auto;grid-column:1/-1}.ptable td:nth-child(2){grid-column:1}.ptable td:last-child{grid-column:2;grid-row:2}}

/* ---------- Breach clocks ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.chip-group{margin-top:var(--s6)}
.chip-group > p{font-size:.88rem;color:var(--stone)}
.toggle{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--graphite);border-radius:999px;font-size:.92rem;color:var(--stone)}
.toggle[aria-pressed="true"]{border-color:var(--parchment);color:var(--parchment)}
.toggle .dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor}
.toggle[aria-pressed="true"] .dot{background:currentColor}
.clocks{margin-top:var(--s6);border-top:1px solid var(--iron)}
.clock{display:grid;gap:var(--s3);padding:var(--s5) 0;border-bottom:1px solid var(--iron)}
@media (min-width:880px){.clock{grid-template-columns:minmax(240px,2fr) 5fr;align-items:center;gap:var(--s6)}}
.clock[hidden]{display:none}
.clock__who{font-weight:500}
.clock__who .ref{display:block;margin-top:4px;color:var(--muted)}
.clock__trigger{display:block;margin-top:2px;font-size:.82rem;font-weight:400;color:var(--stone)}
.clock__bar{position:relative;height:36px}
.clock__axis{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--iron)}
.clock__span{position:absolute;top:50%;height:6px;margin-top:-3px;left:var(--from,0%);width:var(--w,0%);border-radius:3px;background:var(--risk)}
.clock__span.is-soft{background:linear-gradient(90deg,var(--risk),rgba(232,112,90,0))}
.clock__span.is-range{background:repeating-linear-gradient(90deg,var(--risk) 0 4px,rgba(232,112,90,.35) 4px 8px)}
.clock__label{position:absolute;top:-4px;left:var(--at,0%);font-family:var(--mono);font-size:.75rem;color:var(--parchment);white-space:nowrap;transform:translateX(-100%);padding-right:6px}
.clock__label.is-after{transform:none;padding:0 0 0 6px}
.clock-scale{display:none}
@media (min-width:880px){.clock-scale{display:grid;grid-template-columns:minmax(240px,2fr) 5fr;gap:var(--s6);margin-top:var(--s6)}
  .clock-scale .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--muted)}}
.empty{padding:var(--s5) 0;color:var(--stone)}

/* ---------- Crosswalk ---------- */
.xw{margin-top:var(--s7);display:grid;gap:var(--s5)}
@media (min-width:980px){.xw{grid-template-columns:280px 1fr;gap:var(--s7)}}
.xw__list{display:flex;flex-direction:column;border-top:1px solid var(--iron)}
@media (max-width:979px){.xw__list{flex-direction:row;overflow-x:auto;border-top:0;gap:var(--s2);padding-bottom:var(--s2);scrollbar-width:thin}}
.xw__tab{text-align:left;padding:14px 0;border-bottom:1px solid var(--iron);color:var(--stone);font-size:1rem;display:flex;justify-content:space-between;gap:var(--s3);align-items:center}
.xw__tab::after{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--graphite);flex:none}
.xw__tab[aria-selected="true"]{color:var(--parchment)}
.xw__tab[aria-selected="true"]::after{background:var(--bronze);border-color:var(--bronze)}
@media (max-width:979px){.xw__tab{white-space:nowrap;border:1px solid var(--graphite);border-radius:999px;padding:10px 16px;min-height:44px}
  .xw__tab::after{display:none}.xw__tab[aria-selected="true"]{border-color:var(--bronze)}}
.xw__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.xw__head .t-body{margin-top:var(--s2)}
.xw__grid{margin-top:var(--s5);border-top:1px solid var(--iron)}
.xw__row{display:grid;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--iron)}
@media (min-width:640px){.xw__row{grid-template-columns:150px 1fr;gap:var(--s5)}}
.xw__fw{font-size:.9rem;color:var(--stone)}
.xw__refs .ref{color:var(--parchment)}
.xw__refs small{display:block;font-size:.85rem;color:var(--stone);font-family:var(--sans)}
.xw__ev{margin-top:var(--s5);padding:var(--s4) var(--s5);background:var(--carbon);border:1px solid var(--iron);border-left:2px solid var(--verified);border-radius:var(--r)}
.xw__ev p{font-size:.9rem;color:var(--stone)}
.xw__ev li{padding:6px 0;display:flex;gap:var(--s3);align-items:baseline}
.xw__ev li .ref{color:var(--verified);flex:none}

/* ---------- Self-check ---------- */
.check{margin-top:var(--s7);display:grid;gap:var(--s7)}
@media (min-width:1060px){.check{grid-template-columns:7fr 5fr;align-items:start}}
.q{border-top:1px solid var(--iron);padding:var(--s5) 0}
.q:last-child{border-bottom:1px solid var(--iron)}
.q legend{padding:0;font-weight:500;line-height:1.4;max-width:60ch}
.q fieldset{border:0;margin:0;padding:0;min-width:0}
.q .ref{display:block;margin-top:var(--s2)}
.answers{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.answers label{position:relative}
.answers input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.answers span{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s4);border:1px solid var(--graphite);border-radius:999px;font-size:.9rem;color:var(--stone)}
.answers input:focus-visible + span{outline:2px solid var(--verified);outline-offset:2px}
.answers input:checked + span{color:var(--ink);background:var(--parchment);border-color:var(--parchment)}
.result{position:sticky;top:calc(var(--nav-h) + 24px);border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon);padding:var(--s5)}
.score{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s3)}
.score b{font-size:3rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.meter{height:6px;border-radius:3px;background:var(--iron);margin-top:var(--s4);overflow:hidden}
.meter i{display:block;height:100%;width:var(--p,0%);background:var(--bronze);transition:width .4s var(--ease)}
.meter[data-band="low"] i{background:var(--risk)}
.meter[data-band="high"] i{background:var(--control)}
.gaplist{margin-top:var(--s5);border-top:1px solid var(--iron)}
.gaplist li{padding:var(--s3) 0;border-bottom:1px solid var(--iron);font-size:.92rem}
.gaplist .ref{margin-right:var(--s2)}
.gaplist .lvl{font-size:.8rem;color:var(--risk);margin-left:var(--s2)}
.gaplist .lvl.is-partly{color:var(--bronze)}
.result .btn{margin-top:var(--s5);width:100%}
.privacy-line{margin-top:var(--s4);font-size:.82rem;color:var(--stone)}

/* ---------- Practices ---------- */
.practices{margin-top:var(--s7);border-top:1px solid var(--iron)}
.practice{display:grid;gap:var(--s3);padding:var(--s6) 0;border-bottom:1px solid var(--iron)}
@media (min-width:880px){.practice{grid-template-columns:160px 1fr 1fr;gap:var(--s6);align-items:start}}
.tier{font-size:.85rem;color:var(--stone)}
.tier[data-tier="lead"]{color:var(--bronze)}
.practice .t-h3{margin-bottom:var(--s2)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.tag{font-family:var(--mono);font-size:.74rem;color:var(--parchment);border:1px solid var(--graphite);border-radius:2px;padding:3px 8px}
.practice__note{font-size:.88rem;color:var(--stone);border-left:1px solid var(--bronze);padding-left:var(--s4)}

/* ---------- Approach ---------- */
.steps{margin-top:var(--s7);display:grid;border-top:1px solid var(--iron)}
@media (min-width:980px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{padding:var(--s5) 0;border-bottom:1px solid var(--iron)}
@media (min-width:980px){.step{padding:var(--s5) var(--s4) var(--s6) 0;border-bottom:0}.step+.step{border-left:1px solid var(--iron);padding-left:var(--s4)}}
.step__n{font-family:var(--mono);font-size:.8rem;color:var(--bronze)}
.step .t-h3{margin:var(--s3) 0 var(--s2)}
.artefact{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--graphite);font-size:.88rem}
.artefact .ref{display:block;color:var(--verified)}

/* ---------- Story ---------- */
.story{display:grid;gap:var(--s7)}
@media (min-width:880px){.story{grid-template-columns:6fr 5fr;align-items:center}}
.story__quote{font-family:var(--serif);font-size:clamp(1.65rem,3.3vw,2.55rem);line-height:1.25;color:var(--bone)}
.story__cite{margin-top:var(--s4);font-size:.85rem;color:var(--stone)}
.story__rod{max-width:520px}
.story .t-body + .t-body{margin-top:var(--s4)}

/* ---------- Principles ---------- */
.principles{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media (min-width:880px){.principles{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s8)}}
.principle .t-h3{margin-bottom:var(--s2)}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s6);border-top:1px solid var(--iron);max-width:880px}
.faq details{border-bottom:1px solid var(--iron)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s5) 40px var(--s5) 0;position:relative;font-size:1.1rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .ans{padding:0 0 var(--s5);color:var(--stone);max-width:70ch}
.faq .ans p+p{margin-top:var(--s3)}

/* ---------- Contact ---------- */
.contact{display:grid;gap:var(--s7)}
@media (min-width:980px){.contact{grid-template-columns:5fr 7fr}}
.form{display:grid;gap:var(--s4)}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.span2{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.88rem;color:var(--stone)}
.field label .opt{color:var(--muted)}
.field input,.field select,.field textarea{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r);color:var(--parchment);
  font:inherit;font-size:1rem;padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--verified);box-shadow:0 0 0 1px var(--verified)}
.field [aria-invalid="true"]{border-color:var(--risk)}
.err{font-size:.82rem;color:var(--risk);min-height:1em}
.err:empty{min-height:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* honeypot */
.notice{border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon);padding:var(--s5)}
.notice h3{font-size:1rem;font-weight:500;margin-bottom:var(--s3)}
.notice dl{display:grid;gap:var(--s3)}
@media (min-width:640px){.notice dl{grid-template-columns:130px 1fr}}
.notice dt{font-size:.85rem;color:var(--parchment)}
.notice dd{margin:0;font-size:.88rem;color:var(--stone)}
.notice .meta{margin-top:var(--s4);font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.notice a{color:var(--parchment)}
.consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:.92rem;color:var(--parchment);cursor:pointer}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--bronze);flex:none}
.consent small{display:block;color:var(--stone);font-size:.82rem}
.status{font-size:.92rem;min-height:1.5em}
.status[data-kind="ok"]{color:var(--verified)}
.status[data-kind="error"]{color:var(--risk)}
.receipt{margin-top:var(--s2);border:1px solid var(--iron);border-left:2px solid var(--verified);border-radius:var(--r);background:var(--carbon);padding:var(--s5)}
.receipt h3{font-size:1rem;font-weight:500}
.receipt dl{display:grid;gap:var(--s2);margin-top:var(--s3)}
@media (min-width:640px){.receipt dl{grid-template-columns:150px 1fr}}
.receipt dt{font-size:.85rem;color:var(--stone)}
.receipt dd{margin:0;font-family:var(--mono);font-size:.82rem}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--iron);padding-block:var(--s8) var(--s6)}
.footer__cols{display:grid;gap:var(--s6);grid-template-columns:repeat(2,1fr)}
@media (min-width:880px){.footer__cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h2{font-size:.9rem;font-weight:500;color:var(--parchment);margin-bottom:var(--s3)}
.footer li a{display:inline-block;padding:6px 0;min-height:32px;font-size:.92rem;color:var(--stone);text-decoration:none}
.footer li a:hover{color:var(--parchment)}
.footer__motto{font-family:var(--serif);font-size:1.4rem;line-height:1.3;color:var(--bone);max-width:22ch;margin-top:var(--s4)}
.footer__pledge{margin-top:var(--s7);padding:var(--s4) var(--s5);border:1px solid var(--iron);border-radius:var(--r);font-size:.88rem;color:var(--stone);display:flex;gap:var(--s3);align-items:flex-start}
.footer__pledge svg{flex:none;width:18px;height:18px;margin-top:2px}
.footer__base{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--iron);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;font-size:.84rem;color:var(--muted)}

/* ---------- Long-form pages (privacy, 404) ---------- */
.doc{max-width:760px}
.doc h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.doc h2{font-size:1.4rem;font-weight:500;letter-spacing:-.015em;margin-top:var(--s7);margin-bottom:var(--s3)}
.doc p,.doc li{color:var(--stone)}
.doc p+p{margin-top:var(--s3)}
.doc ul{padding-left:1.2em;margin-top:var(--s3)}
.doc li+li{margin-top:var(--s2)}
.doc table{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:.92rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px var(--s4) 12px 0;border-bottom:1px solid var(--iron)}
.doc th{font-weight:500;color:var(--parchment)}
.doc td{color:var(--stone)}
.doc strong{color:var(--parchment);font-weight:500}
.doc .version{margin-top:var(--s4);font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.confirm{background:rgba(193,147,90,.14);color:var(--bronze);padding:0 4px;border-radius:2px}

/* ---------- Print (DECISIONS 11.6) ---------- */
@media print{
  :root{--ink:#fff;--carbon:#fff;--iron:#ccc;--graphite:#bbb;--parchment:#111;--bone:#111;--stone:#333;--muted:#555;--bronze:#6B4A22;--verified:#0b6b66;--risk:#9b2c1a;--control:#2f6b43}
  body{font-size:11pt}
  .nav,.skip,.strip,.btn-row,.chips,.toggle,.form,.result .btn,.menu-btn,.drawer,.footer__pledge{display:none!important}
  .band{padding-block:24pt}
  .faq details{display:block}.faq details:not([open]) .ans{display:block}
  .result{position:static}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}
.nav-back{margin-left:auto}

/* =====================================================================
   RESPONSIVE REFINEMENTS (DECISIONS section 14)
   Tested at 320, 360, 375, 390, 430, 667×375, 844×390, 768, 820,
   1024, 1280, 1440, 1920 and 2560 px.
   ===================================================================== */

/* 14.1 Notches and rounded corners: keep content out of the safe-area insets */
.wrap,.nav__in,.drawer{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.footer{padding-bottom:max(var(--s6),env(safe-area-inset-bottom))}

/* 14.2 Touch: no tap delay, no grey flash, no hover styles stuck after a tap */
a,button,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn-primary:hover{background:var(--parchment)}
  .btn-ghost:hover{border-color:var(--graphite)}
  .nav__links a:hover,.footer li a:hover{color:inherit}
}

/* 14.3 Minimum legible size for small mono labels (≥12.5px) and 24px targets */
.tag{font-size:.78rem}
.clock-scale .ticks{font-size:.78rem}
.consent input{width:24px;height:24px}
.answers span{min-height:44px}

/* 14.4 Signature strip runs edge to edge on every screen width */
.strip{margin-inline:calc(50% - 50vw);padding-inline:0}
.strip__text{padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)))}

/* 14.5 Small phones: thumb-friendly full-width actions, calmer type */
@media (max-width:479px){
  .hero .btn-row .btn,.contact .btn-row .btn,.drawer .btn{width:100%}
  .btn-row{gap:var(--s2)}
  .t-display{font-size:clamp(2.35rem,11.5vw,3rem)}
  .band{padding-block:64px}
  .note{padding:var(--s4)}
  .notice{padding:var(--s4)}
}

/* 14.6 Penalty table on phones: amount sits under the description, never squeezed */
@media (max-width:640px){
  .ptable tr{grid-template-columns:1fr}
  .ptable td:last-child{grid-column:1;grid-row:auto;text-align:left;white-space:normal;max-width:none;color:var(--parchment);font-weight:500}
  .doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 14.7 Crosswalk tabs on phones and tablets: snap, edge fade, visible scroll hint */
@media (max-width:979px){
  .xw__list{scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    margin-right:calc(var(--pad) * -1);padding-right:40px}
  .xw__tab{scroll-snap-align:start}
  .xw__list.is-end{-webkit-mask-image:none;mask-image:none}
}

/* 14.8 Breach clock scale also on phones, as a compact header */
@media (max-width:879px){
  .clock-scale{display:block;margin-top:var(--s6)}
  .clock-scale > span{display:none}
  .clock-scale .ticks{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--muted)}
}

/* 14.9 Self-check on phones and tablets: a sticky score bar while answering */
.check-bar{display:none}
@media (max-width:1059px){
  .result{position:static}
  .check-bar{display:flex;position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;margin-top:var(--s5);
    align-items:center;justify-content:space-between;gap:var(--s3);padding:10px 12px 10px 16px;border:1px solid var(--graphite);border-radius:999px;
    background:rgba(16,20,25,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .check-bar[hidden]{display:none}
  .check-bar b{font-weight:500;font-family:var(--mono);font-size:.95rem}
  .check-bar span{font-size:.85rem;color:var(--stone)}
  .check-bar .btn{min-height:40px;padding:0 var(--s4);font-size:.88rem;border-radius:999px}
}

/* 14.10 Tablets (640–979): use the width instead of one long column */
@media (min-width:640px) and (max-width:979px){
  .steps{grid-template-columns:repeat(2,1fr);column-gap:var(--s6)}
  .steps .step:last-child{grid-column:1/-1}
  .gaps{grid-template-columns:repeat(2,1fr);column-gap:var(--s6)}
  .gaps .gap:last-child{grid-column:1/-1}
  .principles{grid-template-columns:repeat(2,1fr)}
  .practice{grid-template-columns:140px 1fr;column-gap:var(--s5)}
  .practice > :last-child{grid-column:2}
  .story__rod{max-width:420px}
  .footer__cols{grid-template-columns:2fr 1fr 1fr}
  .footer__cols > :first-child{grid-column:1/-1}
}

/* 14.11 Short landscape phones: the sticky nav would eat a fifth of the screen */
@media (max-height:500px) and (orientation:landscape){
  :root{--nav-h:52px}
  .nav__in{padding-top:6px;padding-bottom:6px}
  .menu-btn{min-height:40px}
  .result{position:static}
  .hero{padding-top:32px}
}

/* 14.12 Large and very large screens: scale up so the page doesn't shrink into the middle */
@media (min-width:1600px){:root{--max:1360px}html{font-size:106.25%}}
@media (min-width:2200px){:root{--max:1480px}html{font-size:118.75%}}
.hero{overflow-x:visible}

/* 14.13 Mobile menu: a full-height panel that scrolls on its own, page locked behind it */
@media (max-width:1059px){
  .drawer{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);
    padding-bottom:max(var(--s6),env(safe-area-inset-bottom))}
  /* No scroll lock: overflow:hidden on html/body resets scroll or detaches the sticky header on some browsers.
     The panel covers the screen and overscroll-behavior:contain stops scroll chaining to the page behind. */
}
main{overflow-x:clip} /* clip the rotated strip at the viewport edge; clip (not hidden) keeps position:sticky working, and iOS honours it unlike overflow on body */

/* =====================================================================
   v4: FULL SERVICE RANGE (DECISIONS section 15)
   ===================================================================== */

/* 15.1 Menu panel lives outside the header, so position:fixed is relative to the viewport */
.drawer{z-index:99}
@media (max-width:1059px){.drawer{top:var(--nav-h)}}

/* Hero deadline link */
.deadline a{color:inherit;text-decoration:none;border-bottom:1px solid var(--graphite)}
.deadline a:hover{border-bottom-color:var(--bronze)}
.inline-link{color:var(--parchment);font-size:.92rem;text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:4px}
.inline-link:hover{text-decoration-thickness:2px}

/* Services quick index */
.svc-index{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.svc-index a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s4);border:1px solid var(--graphite);border-radius:999px;
  font-size:.9rem;color:var(--stone);text-decoration:none}
.svc-index a:hover{color:var(--parchment);border-color:var(--bronze)}
.practices{margin-top:var(--s6)}

/* Trust layer chain: a real sequence, so numbered steps are honest here */
.chain{margin-top:var(--s7)}
.chain__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media (min-width:880px){.chain__steps{grid-template-columns:repeat(8,1fr);gap:0}}
.chain__step{position:relative}
.chain__btn{width:100%;text-align:left;padding:var(--s3) var(--s3) var(--s3) 0;min-height:64px;display:flex;flex-direction:column;gap:4px;color:var(--stone)}
@media (max-width:879px){.chain__btn{border:1px solid var(--graphite);border-radius:var(--r);padding:var(--s3)}}
@media (min-width:880px){
  .chain__btn{border-top:2px solid var(--iron);padding-top:var(--s4)}
  .chain__btn::before{content:"";position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--graphite)}
}
.chain__btn .n{font-family:var(--mono);font-size:.78rem}
.chain__btn .nm{font-size:.95rem;font-weight:500}
.chain__btn[aria-selected="true"]{color:var(--parchment)}
.chain__btn[aria-selected="true"],.chain__btn.is-past{border-color:var(--c,var(--bronze))}
.chain__btn[aria-selected="true"]::before,.chain__btn.is-past::before{border-color:var(--c,var(--bronze));background:var(--c,var(--bronze))}
.chain__btn[aria-selected="true"] .n{color:var(--c,var(--bronze))}
.chain__panel{margin-top:var(--s6);min-height:150px;padding:var(--s5) var(--s6);background:var(--carbon);border:1px solid var(--iron);border-left:2px solid var(--c,var(--bronze));border-radius:var(--r)}
.chain__panel .lbl{font-size:.88rem;color:var(--c,var(--bronze))}
.chain__panel .val{margin-top:var(--s3);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.25;letter-spacing:-.015em;color:var(--parchment);max-width:32ch}
.chain__panel .why{margin-top:var(--s3);color:var(--stone);font-size:.95rem;max-width:62ch}
.chain__nav{display:flex;gap:var(--s2);margin-top:var(--s4)}
@media (max-width:479px){.chain__panel{padding:var(--s4)}.chain__nav .btn{flex:1}}

/* AI security trust boundaries */
.aichain{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s7)}
@media (min-width:640px){.aichain{grid-template-columns:repeat(4,1fr)}}
@media (min-width:980px){.aichain{grid-template-columns:repeat(7,1fr)}}
.ai-link{position:relative;text-align:left;padding:var(--s4);min-height:72px;border:1px solid var(--iron);background:var(--carbon);border-radius:var(--r);transition:border-color .15s}
.ai-link .nm{display:block;font-weight:500}
.ai-link .hint{display:block;margin-top:2px;font-size:.82rem;color:var(--stone)}
.ai-link:hover{border-color:var(--graphite)}
.ai-link[aria-selected="true"]{border-color:var(--risk)}
.ai-link[aria-selected="true"] .nm{color:var(--risk)}
@media (min-width:980px){.ai-link:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg);z-index:1}}
.aidetail{margin-top:var(--s5);display:grid;gap:var(--s5);padding:var(--s5);background:var(--carbon);border:1px solid var(--iron);border-radius:var(--r)}
@media (min-width:880px){.aidetail{grid-template-columns:1fr 1fr;gap:var(--s7);padding:var(--s6)}}
.aidetail .lbl{font-size:.88rem}
.aidetail .lbl.is-risk{color:var(--risk)}
.aidetail .lbl.is-ctl{color:var(--control)}
.aidetail .txt{margin-top:var(--s2);font-size:1.08rem;line-height:1.5;color:var(--parchment)}
.aidetail .txt.dim{color:var(--stone)}

/* Deliverables */
.deliverables{margin-top:var(--s8)}
.dlv{display:grid;gap:var(--s2);margin-top:var(--s5);grid-template-columns:1fr}
@media (min-width:480px){.dlv{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.dlv{grid-template-columns:repeat(4,1fr)}}
.dlv li{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon)}
.dlv .ref{color:var(--muted)}
.aud{align-self:flex-start;font-size:.78rem;padding:2px 8px;border-radius:999px;border:1px solid var(--graphite);color:var(--stone)}
.aud[data-aud="eng"]{border-color:rgba(86,217,210,.4);color:var(--verified)}
.aud[data-aud="mgmt"]{border-color:rgba(193,147,90,.5);color:var(--bronze)}
.aud[data-aud="audit"]{border-color:rgba(127,178,144,.5);color:var(--control)}

/* Footer with five columns */
@media (min-width:880px){.footer__cols--5{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
@media (min-width:640px) and (max-width:879px){.footer__cols--5{grid-template-columns:repeat(4,1fr)}.footer__cols--5 > :first-child{grid-column:1/-1}}

.drawer .btn{display:flex;justify-content:center;border-bottom:0}

/* 15.4b Trust chain on narrow screens: one swipeable row instead of a grid that overflows */
@media (max-width:639px){
  .chain__steps{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--s2);padding-bottom:var(--s2);padding-right:40px;
    margin-right:calc(var(--pad) * -1);scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .chain__steps.is-end{-webkit-mask-image:none;mask-image:none}
  .chain__step{flex:0 0 auto;scroll-snap-align:start}
  .chain__btn{min-width:112px}
}

/* =====================================================================
   v5: CENTRED FLOW AND ALIGNMENT SYSTEM (DECISIONS section 16)
   Rule: short display text (headings, kickers, one-line leads, CTAs) is
   centred; paragraphs and lists inside modules stay left-aligned, because
   centred paragraphs make every line start somewhere new.
   ===================================================================== */

/* 16.1 One rhythm for every section */
.band{padding-block:clamp(72px,9vw,128px)}
.sec-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head .kicker{margin-bottom:var(--s3)}
.sec-head .t-h2{text-wrap:balance}
.sec-head .t-lede{margin:var(--s4) auto 0;max-width:60ch;text-wrap:pretty}
.sec-head + *,.sec-head + .timeline,.sec-head + .chain,.sec-head + .aichain,.sec-head + .xw,.sec-head + .check,.sec-head + .steps,.sec-head + .principles,.sec-head + .faq{margin-top:0}

/* 16.2 Hero: one centred axis */
.hero{text-align:center}
.hero h1{max-width:14ch;margin-inline:auto;text-wrap:balance}
.hero .t-lede{margin-inline:auto;max-width:56ch;text-wrap:pretty}
.hero .btn-row{justify-content:center}
.strip-caption{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:var(--s2)}
.strip-caption .t-small{max-width:64ch}

/* 16.3 Nav: brand left, links centred, action right */
@media (min-width:1060px){
  .nav__in{display:grid;grid-template-columns:1fr auto 1fr}
  .nav__links{margin-left:0;justify-self:center}
  .nav__cta{justify-self:end}
}
.nav__cta-sm{min-height:40px;padding:0 var(--s4);font-size:.9rem;margin-left:auto}
.nav__cta-sm + .menu-btn{margin-left:var(--s2)}
@media (min-width:1060px){.nav__cta-sm{display:none}}
@media (max-width:359px){.nav__cta-sm{display:none}.menu-btn{margin-left:auto}}

/* 16.4 Notes and secondary blocks sit on the centre axis */
.note{margin-inline:auto;text-align:left}
.penalties > .t-h3,.penalties > .t-body,.deliverables > .t-h3,.deliverables > .t-body{text-align:center;margin-inline:auto}
.penalties > .t-body,.deliverables > .t-body{max-width:62ch}

/* 16.5 Need-based starting paths */
.paths{padding-block:clamp(40px,5vw,64px)}
.paths__title{text-align:center;font-size:1rem;font-weight:500;color:var(--stone);margin-bottom:var(--s5)}
.paths__grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:560px){.paths__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.paths__grid{grid-template-columns:repeat(4,1fr)}}
.path{display:flex;flex-direction:column;gap:6px;height:100%;padding:var(--s5);border:1px solid var(--iron);border-radius:var(--r);
  background:var(--carbon);text-decoration:none;transition:border-color .15s,background-color .15s}
.path__need{font-size:1.1rem;font-weight:500;color:var(--parchment)}
.path__what{font-size:.88rem;color:var(--stone)}
@media (hover:hover){.path:hover{border-color:var(--bronze);background:#131820}}

/* 16.6 Mid-page action bands */
.cta-band{background:var(--carbon);border-block:1px solid var(--iron)}
.cta-band__in{padding-block:clamp(56px,7vw,88px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.cta-band__title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.cta-band__text{color:var(--stone);max-width:52ch;text-wrap:pretty}
.cta-band .btn{margin-top:var(--s2)}

/* 16.7 Problem: centred statement, three equal columns */
.quote-line{margin-inline:auto;text-align:center;max-width:20ch;text-wrap:balance}
.gaps{margin-top:clamp(40px,5vw,64px)}

/* 16.8 Services: balanced 4 × 2 grid, tier shown by a top rule and a key */
.tier-key{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);margin:0 auto var(--s6);font-size:.88rem;color:var(--stone)}
.tier-key li{display:flex;align-items:center;gap:var(--s2)}
.tier-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.tier-dot[data-tier="lead"]{background:var(--bronze)}
.tier-dot[data-tier="advisory"]{background:var(--stone)}
.tier-dot[data-tier="partner"]{background:transparent;border:1.5px solid var(--stone)}
.svc-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);background:var(--carbon);border:1px solid var(--iron);
  border-top:2px solid var(--muted);border-radius:var(--r);scroll-margin-top:calc(var(--nav-h) + 24px)}
.svc[data-tier="lead"]{border-top-color:var(--bronze)}
.svc[data-tier="advisory"]{border-top-color:var(--stone)}
.svc[data-tier="partner"]{border-top-style:dashed;border-top-color:var(--stone)}
.svc__tier{font-size:.82rem;color:var(--stone)}
.svc[data-tier="lead"] .svc__tier{color:var(--bronze)}
.svc .t-h3{font-size:1.15rem;line-height:1.3}
.svc__pos{font-size:.95rem;color:var(--stone)}
.svc .tags{margin-top:0}
.svc__link,.svc__note{margin-top:auto;padding-top:var(--s3)}
.svc__link{font-size:.9rem;color:var(--parchment);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:4px;align-self:flex-start}
.svc__note{font-size:.85rem;color:var(--stone);border-top:1px dashed var(--graphite)}
.svc:target{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze)}

/* 16.9 Story: one centred column */
.story{grid-template-columns:1fr!important;max-width:760px;margin-inline:auto;text-align:center;gap:var(--s6)}
.story__quote{text-wrap:balance}
.story__rod{margin-inline:auto}
.story .t-body{margin-inline:auto;text-align:left}

/* 16.10 Principles, FAQ, contact: centred containers, left-aligned reading text */
.principles{max-width:980px;margin-inline:auto}
.faq{margin-inline:auto;max-width:820px}
.contact{grid-template-columns:1fr!important;max-width:820px;margin-inline:auto}
.check{max-width:1120px;margin-inline:auto}

/* 16.11 Interactive modules: centred controls on wide screens */
.chain__nav{justify-content:center}
.toggles,.chips{justify-content:center}
.chip-group{text-align:center}
@media (max-width:639px){.chip-group{text-align:left}.chips{justify-content:flex-start}}

/* 16.12 The hidden attribute always wins (component display rules were overriding it) */
[hidden]{display:none!important}
/* 16.13 Phones: tier key as a tidy centred column; deliverables two-up */
@media (max-width:639px){.tier-key{flex-direction:column;align-items:center;gap:var(--s2)}}
@media (min-width:360px) and (max-width:479px){.dlv{grid-template-columns:repeat(2,1fr)}.dlv li{padding:var(--s3)}}

/* =====================================================================
   v6: LESS TEXT, MORE TO DO (DECISIONS section 17)
   ===================================================================== */

/* 17.1 Strip is a button: tap to scramble and unwind again */
button.strip{display:block;width:100%;padding:0;border:0;font:inherit;text-align:left;cursor:pointer}
button.strip:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.strip-caption .hint{color:var(--muted)}

/* 17.2 Services: compact cards that open in place */
.svc{gap:0;padding:0}
.svc > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:var(--s5) var(--s5) var(--s5);position:relative}
.svc:not([open]) > summary{min-height:100%}
.svc > summary::-webkit-details-marker{display:none}
.svc > summary::after{content:"+";position:absolute;top:var(--s4);right:var(--s4);width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--graphite);border-radius:50%;font-family:var(--mono);font-size:1rem;color:var(--stone);transition:transform .25s var(--ease),border-color .15s}
.svc[open] > summary::after{transform:rotate(45deg);border-color:var(--bronze);color:var(--parchment)}
.svc__title{font-size:1.15rem;font-weight:500;line-height:1.3;color:var(--parchment);padding-right:36px}
.svc__more{display:none;flex-direction:column;gap:var(--s3);padding:0 var(--s5) var(--s5)}
.svc[open] .svc__more{display:flex;animation:rise .3s var(--ease)}
.svc .svc__link,.svc .svc__note{margin-top:0}
@media (hover:hover){.svc:hover{border-color:var(--graphite)}.svc > summary:hover::after{border-color:var(--bronze)}}
.svc > summary:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}
.svc-grid{align-items:stretch}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 17.3 Trust chain play control */
#chainPlay{min-width:96px}

/* 17.4 Three numbers instead of a penalty table */
.stat-row{display:grid;gap:var(--s4);margin-top:clamp(40px,5vw,56px);grid-template-columns:1fr}
@media (min-width:640px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s5);text-align:center;border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon)}
.stat b{font-family:var(--mono);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--parchment);letter-spacing:-.02em}
.stat span{font-size:.9rem;color:var(--stone);max-width:26ch}
.stat:first-child b{color:var(--risk)}

/* 17.5 Self-check: one question at a time */
.quiz{max-width:720px;margin-inline:auto;padding:clamp(20px,4vw,40px);border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon)}
.quiz__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);font-size:.9rem;color:var(--stone)}
.quiz__count{font-family:var(--mono);font-size:.82rem}
.quiz__back{min-height:36px;padding:0 var(--s3);border:1px solid var(--graphite);border-radius:999px;color:var(--stone);font-size:.88rem}
.quiz__back:disabled{opacity:.35;cursor:default}
.quiz__progress{height:4px;margin-top:var(--s4);border-radius:2px;background:var(--iron);overflow:hidden}
.quiz__progress i{display:block;height:100%;width:var(--p,0%);background:var(--bronze);transition:width .35s var(--ease)}
.quiz__card{margin-top:var(--s6)}
.quiz__card.is-in{animation:slidein .35s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.quiz__q{border:0;margin:0;padding:0;min-width:0}
.quiz__q legend{padding:0;font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:500;line-height:1.35;text-wrap:balance}
.quiz__q .ref{display:block;margin-top:var(--s3)}
.quiz__opts{display:grid;gap:var(--s3);margin-top:var(--s6);grid-template-columns:1fr}
@media (min-width:480px){.quiz__opts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
.quiz__opt{min-height:56px;padding:0 var(--s4);border:1px solid var(--graphite);border-radius:var(--r);font-size:1rem;font-weight:500;color:var(--parchment);background:var(--ink);transition:border-color .15s,background-color .15s,color .15s,transform .1s}
.quiz__opt:active{transform:scale(.98)}
.quiz__opt[aria-pressed="true"]{background:var(--parchment);color:var(--ink);border-color:var(--parchment)}
@media (hover:hover){.quiz__opt:hover{border-color:var(--bronze)}}
.quiz__opt:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.quiz__result{margin-top:var(--s5);text-align:center;outline:none}
.quiz__result .t-h3{margin-top:var(--s5);text-wrap:balance}
.quiz__result .gaplist{text-align:left;margin-top:var(--s5)}
.quiz__result .btn-row{justify-content:center;margin-top:var(--s6)}
.ring{position:relative;width:148px;height:148px;margin:0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring__bg{stroke:var(--iron)}
.ring__fg{stroke:var(--bronze);stroke-linecap:round;stroke-dasharray:var(--dash,327);stroke-dashoffset:var(--off,327);transition:stroke-dashoffset .9s var(--ease)}
.quiz__result[data-band="low"] .ring__fg{stroke:var(--risk)}
.quiz__result[data-band="high"] .ring__fg{stroke:var(--control)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:2rem}

/* 17.6 Breach clock simulation */
.sim{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s4) var(--s6);margin-top:var(--s6);padding:var(--s5);border:1px solid var(--iron);border-radius:var(--r);background:var(--carbon)}
.sim__clock{display:flex;flex-direction:column;align-items:center;gap:2px}
.sim__label{font-size:.82rem;color:var(--stone)}
.sim__clock b{font-family:var(--mono);font-weight:500;font-size:clamp(1.8rem,5vw,2.6rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:9ch;text-align:center}
.sim__ctrl{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
#simStart{min-width:160px}
.clock__head{position:absolute;top:2px;bottom:2px;left:var(--t,0%);width:2px;margin-left:-1px;background:var(--verified);opacity:0;transition:opacity .2s}
.clocks.is-started .clock__head{opacity:1}
.clock{transition:background-color .3s}
.clock__span{transition:box-shadow .3s,opacity .3s}
.clocks.is-started .clock:not([data-state="due"]) .clock__span{opacity:.45}
.clock[data-state="due"] .clock__span{opacity:1;box-shadow:0 0 0 3px rgba(232,112,90,.22)}
.clock__flag{display:none;width:max-content;margin-bottom:6px;padding:2px 8px;border-radius:2px;font-family:var(--mono);font-size:.74rem;color:var(--ink);background:var(--risk)}
.clock[data-state="due"] .clock__flag{display:block;animation:rise .3s var(--ease)}
.clock[data-state="due"]{background:linear-gradient(90deg,rgba(232,112,90,.06),transparent 60%)}

/* 17.7 Approach: five stages and four promises, no paragraphs */
.promises{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:clamp(40px,5vw,56px)}
.promises li{padding:var(--s2) var(--s4);border:1px solid var(--graphite);border-radius:999px;font-size:.92rem;color:var(--parchment)}
.promises li::before{content:"";display:inline-block;width:7px;height:7px;margin-right:var(--s2);border-radius:50%;background:var(--verified);vertical-align:middle}
.step{text-align:center}
.step .artefact .ref{display:block}

@media (prefers-reduced-motion:reduce){
  .quiz__card.is-in,.svc[open] .svc__more,.clock[data-state="due"] .clock__flag{animation:none}
  .ring__fg,.quiz__progress i{transition:none}
}