*{box-sizing:border-box}
:root{
  --bg:#F5F4FA;--surface:#FFFFFF;--surface-2:#ECEAF6;
  --ink:#14141F;--ink-2:#3D3B52;--muted:#6D6A85;--line:#DCD9EA;--line-strong:#BDB8D6;
  --accent:#5A2CF0;--accent-ink:#4A1FD0;--accent-wash:#EAE3FF;--on-accent:#FFFFFF;
  --band:#0B0B12;--band-ink:#ECEAF6;--band-muted:#8B87A5;--band-line:#26243A;
  --sig-strong:#0F7A57;--sig-dev:#8A6206;--sig-needs:#B2381F;
  --sig-strong-bg:#D9F2E8;--sig-dev-bg:#F6EDD9;--sig-needs-bg:#FAE3DD;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0B12;--surface:#14141F;--surface-2:#1C1B2A;
  --ink:#ECEAF6;--ink-2:#C3BFD9;--muted:#8B87A5;--line:#2A2839;--line-strong:#3C3950;
  --accent:#9B7BFF;--accent-ink:#B9A3FF;--accent-wash:#221B3D;--on-accent:#0B0B12;
  --band:#050509;--band-ink:#ECEAF6;--band-muted:#8B87A5;--band-line:#26243A;
  --sig-strong:#3AD29F;--sig-dev:#E0B95F;--sig-needs:#F0907A;
  --sig-strong-bg:#0F2A22;--sig-dev-bg:#2A2415;--sig-needs-bg:#2C1A16;
}}
:root[data-theme="dark"]{
  --bg:#0B0B12;--surface:#14141F;--surface-2:#1C1B2A;
  --ink:#ECEAF6;--ink-2:#C3BFD9;--muted:#8B87A5;--line:#2A2839;--line-strong:#3C3950;
  --accent:#9B7BFF;--accent-ink:#B9A3FF;--accent-wash:#221B3D;--on-accent:#0B0B12;
  --band:#050509;--band-ink:#ECEAF6;--band-muted:#8B87A5;--band-line:#26243A;
  --sig-strong:#3AD29F;--sig-dev:#E0B95F;--sig-needs:#F0907A;
  --sig-strong-bg:#0F2A22;--sig-dev-bg:#2A2415;--sig-needs-bg:#2C1A16;
}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.62;margin:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.col{max-width:64ch}
h1,h2,h3,.disp{font-family:Archivo,ui-sans-serif,system-ui,sans-serif;text-wrap:balance;letter-spacing:-.02em;margin:0}
h1{font-weight:800;font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.05}
h2{font-weight:700;font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.12}
h3{font-weight:600;font-size:1.12rem;line-height:1.3}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
section{border-top:1px solid var(--line)}
section>.wrap{padding-block:clamp(56px,8vw,92px)}
.stack{display:flex;flex-direction:column;gap:22px}
.stack-lg{display:flex;flex-direction:column;gap:40px}
.top{border-top:none;position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{padding-block:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{font-family:Archivo;font-weight:800;letter-spacing:-.03em;font-size:1.05rem;color:var(--ink);text-decoration:none}
.mark span{color:var(--accent)}
.navlinks{display:flex;gap:22px;align-items:center;font-size:.92rem}
.navlinks a{color:var(--ink-2);text-decoration:none}
.navlinks a:hover{color:var(--accent)}
@media(max-width:760px){.navlinks{display:none}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:2px;font-weight:600;font-size:.97rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-note{font-size:.85rem;color:var(--muted)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.lede{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--ink-2);max-width:60ch}
footer{border-top:1px solid var(--line);background:var(--surface-2)}
footer .wrap{padding-block:38px;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;font-size:.88rem;color:var(--muted)}
footer a{color:var(--ink-2);text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:var(--accent)}
.fcol{display:flex;flex-direction:column;gap:2px}
.fcol .eyebrow{margin-bottom:8px}
@media (prefers-reduced-motion:no-preference){.btn,footer a,.navlinks a{transition:all .16s ease}}
.honest{border:1px solid var(--line);background:var(--surface-2);padding:16px 18px;border-radius:2px;font-size:.92rem;color:var(--ink-2);max-width:66ch}
.honest strong{color:var(--ink)}
.report{background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(0,0,0,.5);overflow:hidden}
.report-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}
.report-meta{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--muted);line-height:1.8}
.report-meta b{color:var(--ink-2);font-weight:500}
.report-body{padding:26px}
.report-h{font-family:Archivo;font-weight:700;font-size:1.28rem;line-height:1.25;letter-spacing:-.02em}
.grid-dims,.twoup{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:6px}
@media(min-width:760px){.grid-dims,.twoup{grid-template-columns:1fr 1fr}}
.dim,.twoup>div{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.dim-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dim-name{font-family:"IBM Plex Mono",monospace;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.score{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;padding:4px 9px;border-radius:2px;white-space:nowrap}
.bars{display:inline-flex;gap:2px;align-items:flex-end}
.bars i{display:block;width:3px;background:currentColor;border-radius:1px;opacity:.28}
.bars i:nth-child(1){height:6px}.bars i:nth-child(2){height:9px}.bars i:nth-child(3){height:12px}
.bars i.on{opacity:1}
.s-strong{color:var(--sig-strong);background:var(--sig-strong-bg)}
.s-dev{color:var(--sig-dev);background:var(--sig-dev-bg)}
.s-needs{color:var(--sig-needs);background:var(--sig-needs-bg)}
.obs{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:.93rem;color:var(--ink-2)}
.obs li::marker{color:var(--line-strong)}
.quote{font-family:"IBM Plex Mono",monospace;font-size:.87rem;color:var(--ink)}
.stamp{border:1.5px solid var(--accent);color:var(--accent);border-radius:2px;padding:12px 16px;font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.6;max-width:290px}
.stamp b{display:block;font-size:.86rem;letter-spacing:.04em;margin-bottom:4px}
.cards{display:grid;gap:18px}
@media(min-width:760px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card p{font-size:.95rem;color:var(--ink-2)}
.step-n{font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.split{display:grid;gap:32px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.tick{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.96rem;color:var(--ink-2)}
.tick li{display:flex;gap:11px;align-items:flex-start}
.tick li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;background:var(--accent);border-radius:50%}
.tick.no li::before{background:var(--line-strong)}
.price-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;padding:clamp(24px,4vw,38px);display:flex;flex-direction:column;gap:24px}
.price-fig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-num{font-family:Archivo;font-weight:800;font-size:clamp(2.6rem,7vw,3.8rem);letter-spacing:-.04em;line-height:1}
.price-unit{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--muted)}
.incl{display:grid;gap:10px 26px;font-size:.95rem;color:var(--ink-2);list-style:none;margin:0;padding:0}
@media(min-width:640px){.incl{grid-template-columns:1fr 1fr}}
.incl li{display:flex;gap:10px}
.incl li::before{content:"/";color:var(--accent);font-family:"IBM Plex Mono",monospace}
.invoice{font-size:.92rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:18px}
details{border-bottom:1px solid var(--line);padding:16px 0}
details summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:1.25rem;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:12px;color:var(--ink-2);font-size:.96rem;max-width:66ch}
.form-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;padding:clamp(22px,4vw,34px)}
#waitlistForm{display:grid;gap:18px}
@media(min-width:700px){#waitlistForm{grid-template-columns:1fr 1fr}.form-row.full{grid-column:1/-1}}
.form-row{display:flex;flex-direction:column;gap:7px}
.form-row label{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=tel]{font-family:inherit;font-size:1rem;padding:12px 13px;border:1.5px solid var(--line-strong);border-radius:2px;background:var(--bg);color:var(--ink);width:100%}
.form-row input:focus{border-color:var(--accent);outline:none}
.consent label{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#submitBtn[disabled]{opacity:.55;cursor:progress}
.err{color:var(--sig-needs);font-size:.86rem}


/* ---- Colour pass, 26 Aug 2026 ----
   Brand violet #5A2CF0 with the mint #3AD29F as the positive signal.
   Boldness is spent in two places only: the CTA, and the report header band.
   Everything else stays quiet so those two carry maximum contrast. */

/* The report is the most important object on the page, so it gets the brand ground. */
.report-head{background:var(--band);border-bottom:1px solid var(--band-line)}
.report-meta{color:var(--band-muted)}
.report-meta b{color:var(--band-ink)}
.stamp{border-color:var(--sig-strong);color:var(--sig-strong);background:rgba(58,210,159,.07)}

/* A hairline of brand above every section heading group, like a waveform baseline. */
.eyebrow{position:relative;padding-top:14px}
.eyebrow::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--accent);border-radius:2px}
.report-body .eyebrow,.twoup .eyebrow,.dim .eyebrow{padding-top:0}
.report-body .eyebrow::before,.twoup .eyebrow::before,.dim .eyebrow::before{display:none}

/* CTA carries the only saturated fill on the page. */
.btn-primary{box-shadow:0 1px 2px rgba(90,44,240,.28),0 6px 18px -8px rgba(90,44,240,.45)}
.btn-primary:hover{box-shadow:0 1px 2px rgba(90,44,240,.34),0 10px 24px -8px rgba(90,44,240,.55)}

/* The honest-status note and the price get a tint so they read as deliberate, not empty. */
.honest{background:var(--accent-wash);border-color:var(--accent);border-left-width:3px}
.price-num{color:var(--accent)}
.step-n{color:var(--accent)}
.mark span{color:var(--accent)}

/* Alternate section grounds so the page has rhythm rather than one flat field. */
#report{background:var(--surface-2)}
#pricing{background:var(--surface-2)}
#access{background:var(--surface-2)}
.card{border-top:2px solid var(--accent)}

/* Score chips keep semantic colour independent of the brand accent. */
.s-strong{border:1px solid color-mix(in srgb,var(--sig-strong) 30%,transparent)}
.s-dev{border:1px solid color-mix(in srgb,var(--sig-dev) 30%,transparent)}
.s-needs{border:1px solid color-mix(in srgb,var(--sig-needs) 30%,transparent)}

/* ---- Scorecard, added 6 Oct 2026 ----
   The report section now prints the real artefact: a named rulebook, a key,
   the deal-killer line, three counts, and every principle as a card holding its
   own questions with a mark and the reason underneath.
   Semantic colour comes from the existing --sig-* tokens, so this follows light and
   dark like the rest of the page, and keeps those tokens in use after the
   Strong / Developing / Needs work chips come out. */

.mk{font-family:"IBM Plex Mono",ui-monospace,monospace;font-style:normal;font-weight:600;line-height:1}
.mk-ok{color:var(--sig-strong)}
.mk-no{color:var(--sig-needs)}
.mk-na{color:var(--muted)}

.sc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:10px}
.sc-rule{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;color:var(--accent)}

.sc-key{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-2);margin:0}
.sc-key span{display:inline-flex;align-items:center;gap:6px}

.sc-killer{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin:0;
  background:var(--sig-strong-bg);border:1px solid color-mix(in srgb,var(--sig-strong) 30%,transparent);
  border-radius:2px;padding:12px 15px;font-size:.93rem;color:var(--ink-2)}
.sc-killer b{color:var(--ink);font-weight:600}

.sc-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sc-count{background:var(--surface);padding:14px 16px;min-width:0}
.sc-count b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.5rem;
  font-variant-numeric:tabular-nums;line-height:1.1;font-weight:600}
.sc-count span{font-size:.8rem;color:var(--ink-2)}

/* Each principle is a card in the report's existing grid, so the breakdown reads the
   way the four groups used to, with the real marks and reasons inside it. */
.dim-name i{font-style:normal;color:var(--accent);margin-right:8px}
.pr-wide{grid-column:1/-1}
.pr-list{list-style:none;padding-left:0;gap:12px}
.pr-list li{display:grid;grid-template-columns:19px minmax(0,1fr);gap:10px;align-items:start}
.pr-list .mk{font-size:1rem;line-height:1.5}
.pr-list b{color:var(--ink);font-weight:500;display:block;margin-bottom:3px}
.pr-list div{color:var(--ink-2);font-size:.9rem}

.pr-foot{border-top:1px solid var(--line);padding-top:16px;margin:0;font-size:.85rem;color:var(--muted)}

@media (max-width:560px){
  .sc-counts{grid-template-columns:1fr}
  .pr-list li{grid-template-columns:17px minmax(0,1fr);gap:9px}
}
