/* ============================================================
   SOMA GOVERNANCE — "The Red Pen"
   Warm document paper. Black ink. One attestation-red pen
   that only ever appears on the reader's liabilities.
   ============================================================ */

:root {
  --paper:        #F4F1E9;
  --paper-2:      #ECE7DB;
  --paper-3:      #E4DECF;
  --ink:          #16140E;
  --ink-soft:     #3C382F;
  --muted:        #726C5F;
  --rule:         #CEC8B8;
  --rule-soft:    #DDD7C8;

  --obsidian:     #0B0A07;
  --obsidian-2:   #131109;
  --on-dark:      #ECE8DD;
  --muted-dark:   #8A8475;
  --rule-dark:    rgba(236,232,221,0.14);

  --pen:          #CE1620;   /* the auditor's pen */
  --pen-deep:     #A30F18;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1340px;
  --gutter: clamp(20px, 5vw, 76px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  /* faint cotton-paper grain */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--pen); color: #fff; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

/* ---------- shared layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.rule-top { border-top: 1px solid var(--rule); }
.hair { border: none; border-top: 1px solid var(--rule); }

/* mono micro-label */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.label.ink { color: var(--ink); }
.label.pen { color: var(--pen); }

.section-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--pen);
  font-weight: 600;
}

/* serif display helpers */
.serif { font-family: var(--serif); }
.h-xl {
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 0.99;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h-lg {
  font-family: var(--serif);
  font-weight: 440;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.h-md {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
}
.lede.dark { color: var(--muted-dark); }
em { font-style: italic; }

/* ============================================================
   HEADER
   ============================================================ */
.topstrip {
  background: var(--obsidian);
  color: var(--muted-dark);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.topstrip .wrap { display: flex; gap: 28px; align-items: center; height: 34px; overflow: hidden; }
.topstrip span { white-space: nowrap; }
.topstrip .dot { color: var(--pen); }

header.site {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s, background .3s;
}
header.site.stuck { box-shadow: 0 1px 0 var(--rule), 0 18px 40px -34px rgba(0,0,0,.5); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }

/* logomark lockup */
.brand { display: flex; align-items: center; gap: 12px; }
.mark-glyph { width: 34px; height: 25px; flex: none; }
.mark-glyph .brk { fill: none; stroke: var(--ink); stroke-width: 2.3; }
.mark-glyph .mono-s { font-family: var(--serif); font-size: 34px; font-weight: 540; fill: var(--ink); }
.mark-glyph .base { stroke: var(--pen); stroke-width: 2.4; }
.brand-div { width: 1px; align-self: stretch; min-height: 30px; background: var(--rule); flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark .nm { font-family: var(--serif); font-size: 23px; font-weight: 560; letter-spacing: -0.01em; }
.wordmark .sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.34em; color: var(--muted); margin-top: 4px; text-transform: uppercase; }
/* attestation wordmark variant */
.wm-attest .attest-rule { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.wm-attest .attest-rule .l { width: 26px; height: 1px; background: var(--on-dark); }
.wm-attest .attest-rule .t { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted-dark); white-space: nowrap; }
/* card identifier mark */
.co-id { display: flex; align-items: center; gap: 9px; }
.card-mark { width: 25px; height: 18px; flex: none; }
.card-mark .brk { fill: none; stroke: var(--paper); stroke-width: 3; }
.card-mark .mono-s { font-family: var(--serif); font-size: 36px; font-weight: 560; fill: var(--paper); }
.card-mark .base { stroke: var(--pen); stroke-width: 3; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft); padding: 6px 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--pen); transition: right .28s ease;
}
.nav-links a:hover::after { right: 0; }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { right: 0; }

.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; padding: 13px 22px; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; gap: 10px; transition: all .22s ease; white-space: nowrap;
}
.btn .arr { transition: transform .22s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--pen); border-color: var(--pen); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-pen { background: var(--pen); border-color: var(--pen); color: #fff; }
.btn-pen:hover { background: var(--pen-deep); border-color: var(--pen-deep); }
.btn-on-dark { border-color: var(--on-dark); color: var(--on-dark); }
.btn-on-dark:hover { background: var(--on-dark); color: var(--obsidian); }
.btn-lg { padding: 17px 30px; font-size: 13px; }
.btn .sub2 { font-size: 9.5px; letter-spacing: 0.1em; opacity: .62; text-transform: uppercase; }

.menu-toggle { display: none; }

/* ============================================================
   RED-PEN ANNOTATIONS
   ============================================================ */
.pen-circle, .pen-underline, .pen-strike { position: relative; display: inline-block; white-space: nowrap; }
.pen-circle > svg, .pen-underline > svg, .pen-strike > svg {
  position: absolute; overflow: visible; pointer-events: none;
}
.pen-circle > svg { inset: -0.28em -0.62em; width: calc(100% + 1.24em); height: calc(100% + 0.56em); }
.pen-underline > svg { left: -2%; right: -2%; bottom: -0.24em; width: 104%; height: 0.6em; }
.pen-strike > svg { left: -2%; top: 42%; width: 104%; height: 0.5em; }
.pen-circle path, .pen-underline path, .pen-strike path {
  fill: none; stroke: var(--pen); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.pen-in path { transition: stroke-dashoffset 1s cubic-bezier(.5,0,.2,1); stroke-dashoffset: 0; }

/* margin note: handwritten-feeling mono in the gutter */
.margin-note {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--pen); line-height: 1.4; font-weight: 500;
}
.margin-note .nib { display: inline-block; transform: rotate(-2deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(54px, 7vw, 100px); }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.hero-eyebrow .ln { flex: none; width: 42px; height: 1px; background: var(--pen); }
.hero h1 { margin-bottom: 0; max-width: 18ch; }
.hero-grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(34px, 5vw, 80px);
  margin-top: clamp(36px, 4vw, 56px); align-items: start;
}
.hero-reality { }
.hero-reality .lede + .lede { margin-top: 18px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* posture card object */
.card-object {
  border: 1px solid var(--ink); background: var(--paper-2);
  box-shadow: 14px 14px 0 -2px var(--paper-3), 14px 14px 0 -1px var(--rule);
}
.card-object .co-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper);
}
.card-object .co-head .label { color: var(--paper); }
.card-object .co-head .stamp { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--pen); }
.card-object .co-body { padding: 20px 18px 22px; }
.co-body .ttl { font-family: var(--serif); font-size: 19px; line-height: 1.15; margin-bottom: 4px; }
.co-body .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

/* histogram */
.histo { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin: 22px 0 10px; position: relative; }
.histo .bar { flex: 1; background: var(--rule); }
.histo .bar.hot { background: var(--ink); }
.histo .marker {
  position: absolute; top: -8px; bottom: -2px; width: 0; border-left: 2px dashed var(--pen);
}
.histo .marker::after {
  content: "YOU"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--pen); white-space: nowrap;
}
.histo.unknown .marker { border-color: var(--muted); }
.histo.unknown .marker::after { content: "?"; color: var(--muted); }
.co-foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 12px; }
.co-foot .axis { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--muted); }
.co-run { margin-top: 16px; width: 100%; justify-content: center; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section.band { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: clamp(16px, 3vw, 48px); align-items: start; }
.sec-head .marker-col { padding-top: 8px; }
.sec-head .marker-col .nm2 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 10px; display: block; }
.sec-head h2 { margin-bottom: 22px; }
.sec-head .lede { margin-bottom: 0; }

/* ---------- §01 realities table ---------- */
.realities { margin-top: clamp(34px, 4vw, 54px); border-top: 2px solid var(--ink); }
.r-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 56px;
  gap: clamp(18px, 3vw, 48px); padding: 26px 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.r-row .r-risk { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.12; }
.r-row .r-risk .tag { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--pen); text-transform: uppercase; margin-bottom: 8px; font-weight: 500; }
.r-row .r-real { color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; }
.r-row .r-num { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; padding-top: 6px; letter-spacing: .1em; }

.standalone-stamp {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  border: 1.5px solid var(--pen); color: var(--pen); padding: 9px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  transform: rotate(-1.2deg);
}
.standalone-stamp .dotp { width: 7px; height: 7px; border-radius: 50%; background: var(--pen); }

/* ---------- §02 engagement sequence ---------- */
.phases { margin-top: clamp(36px, 4vw, 56px); }
.phase {
  display: grid; grid-template-columns: 84px 1fr minmax(0, 280px); gap: clamp(20px, 3vw, 56px);
  padding: 36px 0; border-top: 1px solid var(--rule); align-items: start;
}
.phase:first-child { border-top: 2px solid var(--ink); }
.phase .ph-no { font-family: var(--serif); font-size: clamp(40px, 4vw, 60px); line-height: .8; color: var(--ink); font-weight: 380; }
.phase .ph-no .free { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--pen); margin-top: 12px; }
.phase .ph-main h3 { font-family: var(--serif); font-size: clamp(23px, 2.2vw, 30px); line-height: 1.08; margin-bottom: 12px; letter-spacing: -0.01em; }
.phase .ph-main p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.58; max-width: 58ch; }
.ph-meta { display: flex; flex-direction: column; gap: 10px; }
.ph-meta .row { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px dotted var(--rule); padding-bottom: 8px; }
.ph-meta .row .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ph-meta .row .v { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.ph-meta .row .v.big { font-size: 16px; }
.ph-meta .row .v.pen { color: var(--pen); }
.std-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.std-chips span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 5px 9px; border: 1px solid var(--rule); color: var(--ink-soft); }

.phase.featured { background: var(--obsidian); color: var(--on-dark); border: none; padding: 40px clamp(20px,3vw,44px); margin-top: 14px; position: relative; }
.phase.featured .ph-no, .phase.featured .ph-main h3 { color: var(--on-dark); }
.phase.featured .ph-main p { color: var(--muted-dark); }
.phase.featured .ph-meta .row { border-color: var(--rule-dark); }
.phase.featured .ph-meta .row .v { color: var(--on-dark); }
.phase.featured .std-chips span { border-color: var(--rule-dark); color: var(--muted-dark); }
.phase.featured .seal {
  position: absolute; top: 24px; right: clamp(20px,3vw,44px);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--pen); text-transform: uppercase;
}

/* ============================================================
   §03 THE SOMA INDEX — obsidian war-room block
   ============================================================ */
.index-block { background: var(--obsidian); color: var(--on-dark); }
.index-block .label { color: var(--muted-dark); }
.index-block .sec-head h2 { color: var(--on-dark); }
.index-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.index-head .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted-dark); text-transform: uppercase; text-align: right; line-height: 1.7; }
.index-head .meta b { color: var(--pen); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule-dark); }
.stat { padding: clamp(28px,3vw,42px) clamp(20px,2.5vw,38px) clamp(28px,3vw,42px) 0; border-right: 1px solid var(--rule-dark); position: relative; }
.stat:last-child { border-right: none; }
.stat .big {
  font-family: var(--serif); font-weight: 380; line-height: 0.86; letter-spacing: -0.03em;
  font-size: clamp(72px, 11vw, 156px); position: relative; display: inline-block;
}
.stat .big .u { font-size: 0.42em; vertical-align: baseline; letter-spacing: -0.02em; }
.stat .name { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pen); margin: 18px 0 12px; font-weight: 600; }
.stat .desc { color: var(--muted-dark); font-size: 15.5px; line-height: 1.55; max-width: 34ch; }
.stat .big .pen-circle path, .stat .big .pen-underline path { stroke-width: 3px; }

/* ============================================================
   §04 GET STARTED + closing
   ============================================================ */
.get-started { }
.gs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,72px); margin-top: clamp(34px,4vw,52px); align-items: start; }
.gs-intro p { color: var(--ink-soft); font-size: 17px; line-height: 1.62; max-width: 50ch; }
.gs-intro p + p { margin-top: 16px; }
.gs-intro .selective { font-family: var(--serif); font-size: clamp(22px,2.2vw,28px); line-height: 1.2; color: var(--ink); margin-bottom: 20px; }
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.step:first-child { border-top: 2px solid var(--ink); }
.step .sn { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--pen); padding-top: 4px; }
.step .st { font-family: var(--serif); font-size: clamp(18px,1.8vw,22px); line-height: 1.3; }
.step .st .hl { color: var(--ink); }

.closing { background: var(--obsidian); color: var(--on-dark); }
.closing .wrap { padding-top: clamp(64px,8vw,120px); padding-bottom: clamp(64px,8vw,120px); }
.closing h2 { color: var(--on-dark); max-width: 16ch; margin: 22px 0 0; }
.closing .lede { margin: 28px 0 38px; }
.closing-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site { background: var(--obsidian-2); color: var(--muted-dark); padding: 56px 0 40px; border-top: 1px solid var(--rule-dark); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rule-dark); }
footer .wordmark .nm { color: var(--on-dark); }
footer .mark-glyph .brk { stroke: var(--on-dark); }
footer .mark-glyph .mono-s { fill: var(--on-dark); }
.foot-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 16px; }
.foot-col a { display: block; color: var(--on-dark); font-size: 14px; padding: 5px 0; opacity: .82; }
.foot-col a:hover { color: var(--pen); opacity: 1; }
.foot-blurb { font-size: 14px; line-height: 1.6; max-width: 38ch; margin: 20px 0 0; color: var(--muted-dark); }
.foot-standards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.foot-standards span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border: 1px solid var(--rule-dark); color: var(--muted-dark); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; gap: 20px; flex-wrap: wrap; }
.foot-bottom .reg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--muted-dark); }
.foot-bottom .reg b { color: var(--pen); }

/* ============================================================
   SIGNAL CHECK overlay
   ============================================================ */
.sc-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--paper);
  display: none; flex-direction: column; overflow-y: auto;
}
.sc-overlay.open { display: flex; }
.sc-top { position: sticky; top: 0; background: var(--ink); color: var(--paper); z-index: 2; }
.sc-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.sc-top .sc-id { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: flex; gap: 16px; align-items: center; }
.sc-top .sc-id .dotp { color: var(--pen); }
.sc-close { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; color: var(--paper); }
.sc-close:hover { color: var(--pen); }

.sc-prog { height: 3px; background: var(--rule); position: sticky; top: 60px; z-index: 2; }
.sc-prog .fill { height: 100%; background: var(--pen); width: 0; transition: width .4s ease; }

.sc-stage { flex: 1; display: flex; align-items: flex-start; padding: clamp(28px,5vw,56px) 0; }
.sc-stage .wrap { width: 100%; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,68px); align-items: start; }
.sc-intro { align-self: center; }
.sc-intro h2 { font-family: var(--serif); font-weight: 440; font-size: clamp(30px,4vw,52px); line-height: 1.02; letter-spacing: -.018em; margin-bottom: 18px; }
.sc-intro p { font-size: clamp(15px,1.25vw,17px); line-height: 1.62; color: var(--ink-soft); max-width: 46ch; }
.sc-stage .wrap:has(.sc-result) { grid-template-columns: 1fr; }
.sc-stage .wrap:has(.sc-result) .sc-intro { display: none; }
@media (max-width: 820px) {
  .sc-stage .wrap { grid-template-columns: 1fr; gap: 26px; }
  .sc-intro { position: static; }
  .sc-intro h2 { font-size: clamp(26px,5vw,34px); margin-bottom: 12px; }
}

/* question */
.sc-q { max-width: none; }
.sc-q .qmeta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.sc-q .qmeta .qn { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--pen); }
.sc-q .qmeta .ln { flex: 1; height: 1px; background: var(--rule); }
.sc-q .qmeta .qt { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sc-q h3 { font-family: var(--serif); font-weight: 440; font-size: clamp(23px,2.6vw,34px); line-height: 1.12; letter-spacing: -0.012em; margin-bottom: clamp(22px,2.6vw,30px); max-width: 26ch; }
.sc-opts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.sc-opt {
  display: flex; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--rule);
  text-align: left; width: 100%; transition: padding .2s ease, background .2s ease; position: relative;
}
.sc-opt:hover { padding-left: 18px; background: var(--paper-2); }
.sc-opt .opt-k { font-family: var(--mono); font-size: 13px; width: 26px; flex: none; color: var(--muted); }
.sc-opt .opt-t { font-family: var(--serif); font-size: clamp(18px,1.9vw,23px); line-height: 1.2; flex: 1; }
.sc-opt .opt-w { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .2s; }
.sc-opt:hover .opt-w { opacity: 1; }
.sc-opt .opt-go { color: var(--pen); opacity: 0; transform: translateX(-6px); transition: all .2s; }
.sc-opt:hover .opt-go { opacity: 1; transform: translateX(0); }

.sc-back { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 30px; display: inline-flex; gap: 8px; align-items: center; }
.sc-back:hover { color: var(--pen); }

/* result — the position card */
.sc-result { max-width: 1080px; margin: 0 auto; }
.sc-result .res-head { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.sc-result .res-head .ln { flex: 1; height: 1px; background: var(--ink); }
.res-card { border: 2px solid var(--ink); background: var(--paper); }
.res-card .rc-top { background: var(--ink); color: var(--paper); padding: 16px 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.res-card .rc-top .label { color: var(--paper); }
.res-card .rc-top .stamp { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--pen); }
.rc-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.rc-band { padding: clamp(30px,4vw,52px); border-right: 1px solid var(--rule); }
.rc-band .blabel { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rc-band .bname { font-family: var(--serif); font-size: clamp(40px,6vw,84px); line-height: .92; letter-spacing: -0.02em; margin: 14px 0 18px; }
.rc-band .bname.tier-0 { color: var(--pen); }
.rc-band .bdesc { color: var(--ink-soft); font-size: 16px; line-height: 1.55; max-width: 36ch; }
.rc-band .rc-histo { margin-top: 26px; }
.rc-score { padding: clamp(30px,4vw,52px); display: flex; flex-direction: column; }
.rc-score .slabel { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.rc-circled { border-top: 1px solid var(--rule); padding-top: 18px; }
.rc-circled .ctitle { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pen); margin-bottom: 12px; }
.rc-circled ul { list-style: none; }
.rc-circled li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.rc-circled li .ring { color: var(--pen); flex: none; font-family: var(--mono); }
.rc-circled li.clean { color: var(--muted); }
.rc-circled li.clean .ring { color: var(--muted); }
.res-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-items: center; }
.res-actions .note { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.score-num { font-family: var(--serif); font-size: clamp(56px,7vw,96px); line-height: 1; }
.score-num .of { color: var(--muted); font-size: 0.42em; }
.pct-line { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); margin-top: 10px; }
.pct-line b { color: var(--pen); }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
.hero [data-reveal] { transition-delay: var(--d, 0s); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .card-object { max-width: 460px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .marker-col { display: flex; align-items: center; gap: 14px; padding-top: 0; }
  .sec-head .marker-col .nm2 { margin-top: 0; }
  .gs-grid { grid-template-columns: 1fr; }
  .rc-body { grid-template-columns: 1fr; }
  .rc-band { border-right: none; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 800px) {
  .nav-links, .nav-cta, .topstrip .wrap span:nth-child(n+4) { display: none; }
  .menu-toggle { display: inline-flex; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--rule-dark); padding-right: 0; }
  .stat:last-child { border-bottom: none; }
  .r-row { grid-template-columns: 1fr; gap: 10px; }
  .r-row .r-num { display: none; }
  .phase { grid-template-columns: 1fr; gap: 16px; }
  .phase .ph-no { display: flex; align-items: baseline; gap: 16px; }
  .phase .ph-no .free { margin-top: 0; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .hero-cta .btn, .closing-cta .btn, .res-actions .btn { width: 100%; justify-content: center; }
  .nav { height: 64px; }
}

/* nav drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: 300; background: var(--obsidian); color: var(--on-dark); display: none; flex-direction: column; padding: 30px var(--gutter); }
.drawer.open { display: flex; }
.drawer .dr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.drawer a { font-family: var(--serif); font-size: 30px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
.drawer a:hover { color: var(--pen); }