/* LPPA — "The Instrument" design system.
   Production self-hosts Fraunces + IBM Plex Sans/Mono; robust fallbacks here. */
:root{
  --bg:#F6F8FA; --surface:#FFFFFF; --surface-2:#EDF1F5;
  --border:#DBE1E9; --border-strong:#C1C9D4;
  --muted:#5B6573; --secondary:#39424E; --ink:#161B22;
  --amber-300:#EBC17A; --amber-400:#E0A94A; --amber-500:#C9932B; --amber-600:#A9791E; --amber-700:#7C560F;
  --teal:#0B7285; --teal-bright:#0E8FA6; --grid:#DBE1E9; --accent:var(--amber-500);
  --shadow:0 1px 2px rgba(20,28,40,.05), 0 10px 30px rgba(20,28,40,.07);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0D1017; --surface:#151A23; --surface-2:#1D2430; --border:#2A3240; --border-strong:#3A4353;
  --muted:#8B95A4; --secondary:#B6BFCB; --ink:#EDF1F6; --amber-700:#EBC17A; --grid:#2A3240;
  --teal:#45B6C9; --teal-bright:#45C0D6; --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --bg:#0D1017; --surface:#151A23; --surface-2:#1D2430; --border:#2A3240; --border-strong:#3A4353;
  --muted:#8B95A4; --secondary:#B6BFCB; --ink:#EDF1F6; --amber-700:#EBC17A; --grid:#2A3240;
  --teal:#45B6C9; --teal-bright:#45C0D6; --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  --bg:#F6F8FA; --surface:#FFFFFF; --surface-2:#EDF1F5; --border:#DBE1E9; --border-strong:#C1C9D4;
  --muted:#5B6573; --secondary:#39424E; --ink:#161B22; --amber-700:#7C560F; --grid:#DBE1E9;
  --teal:#0B7285; --teal-bright:#0E8FA6; --shadow:0 1px 2px rgba(20,28,40,.05), 0 10px 30px rgba(20,28,40,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:var(--teal);}
.wrap{max-width:44rem; margin:0 auto; padding:clamp(1.1rem,4vw,2rem);}
.wrap-wide{max-width:56rem;}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600;}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.13; text-wrap:balance; letter-spacing:-.01em; margin:0;}
button{font-family:var(--sans); cursor:pointer;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1.1rem,4vw,2rem); border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:10;}
.brandmark{display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--secondary); text-decoration:none;}
.tick{width:26px; height:26px; flex:none;}
.nav{display:flex; align-items:center; gap:1.2rem;}
.nav a{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-decoration:none;}
.nav a:hover{color:var(--ink);}
.theme-btn{background:transparent; border:1px solid var(--border-strong); border-radius:7px; color:var(--muted); padding:.3rem .5rem; font-size:.8rem;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:none; border-radius:8px;
  padding:.85rem 1.4rem; font-size:.98rem; font-weight:600; text-decoration:none;
  transition:transform .12s ease, background .15s ease;}
.btn-primary{background:var(--amber-400); color:#1a1205;}
.btn-primary:hover{background:var(--amber-500);}
.btn-primary:active{transform:translateY(1px);}
.btn-ghost{background:transparent; color:var(--secondary); border:1px solid var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn:focus-visible,.opt:focus-visible{outline:2px solid var(--amber-500); outline-offset:2px;}

.rule{height:1px; background:var(--border); margin:1.8rem 0;}
.narrative{border-left:3px solid var(--accent); padding:.4rem 0 .4rem 1.1rem; margin:1.8rem 0; font-family:var(--serif); font-size:1.15rem; line-height:1.4; color:var(--ink);}
.byline{font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted);}
.byline b{color:var(--secondary); font-weight:500;}
.disclaimer{font-size:.8rem; color:var(--muted); line-height:1.5;}

/* landing */
.hero{padding:clamp(2rem,7vw,4.5rem) 0 3rem;}
.hero h1{font-size:clamp(2.1rem,6.5vw,3.4rem); margin:.9rem 0 0;}
.hero .lede{font-size:clamp(1.05rem,2.6vw,1.28rem); color:var(--secondary); margin:1.2rem 0 0; max-width:34rem;}
.facts{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:1.6rem 0 2rem; font-family:var(--mono); font-size:.74rem; color:var(--muted); letter-spacing:.03em;}
.facts b{color:var(--secondary); font-weight:500;} .facts .dot{color:var(--accent);}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.8rem; margin-top:1.4rem;}
.pcard{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; box-shadow:var(--shadow); border-top:3px solid var(--pc,var(--accent));}
.pcard .arche{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.pcard h3{font-size:1.1rem; margin:.35rem 0 .4rem; color:var(--ink);}
.pcard p{font-size:.88rem; color:var(--secondary); margin:0;}

/* progress + question */
.prog-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.7rem;}
.prog-step{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.prog-count{font-family:var(--mono); font-size:.72rem; color:var(--muted);}
.prog-track{height:3px; background:var(--surface-2); border-radius:2px; overflow:hidden;}
.prog-fill{height:100%; background:var(--amber-400); transition:width .35s cubic-bezier(.4,0,.2,1);}
.qcard{padding:clamp(1.5rem,6vw,3rem) 0;}
.qtext{font-size:clamp(1.4rem,4vw,1.95rem); margin:1.4rem 0 .3rem; max-width:32rem;}
.opts{display:flex; flex-direction:column; gap:.65rem; margin:1.8rem 0 0;}
.opt{display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem; font-size:1.02rem; color:var(--ink); min-height:58px;
  transition:border-color .14s, background .14s;}
.opt:hover{border-color:var(--border-strong); background:var(--surface-2);}
.opt .mark{width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); flex:none; position:relative; transition:border-color .14s;}
.opt.sel{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent);}
.opt.sel .mark{border-color:var(--accent);}
.opt.sel .mark::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);}
.qnav{display:flex; justify-content:space-between; gap:1rem; margin-top:2rem;}

/* results */
.res-hero{margin-bottom:2rem;}
.res-hero .arche{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.res-hero h1{font-size:clamp(2rem,6vw,3rem); margin:.6rem 0 0;}
.res-hero .sub{font-size:1.1rem; color:var(--secondary); margin:.8rem 0 0; max-width:34rem;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:clamp(1.2rem,4vw,1.8rem); box-shadow:var(--shadow); margin-bottom:1.1rem;}
.panel h2{font-size:1.15rem; margin:0 0 1rem;}
.panel h3{font-size:.72rem; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 .7rem;}
.readouts{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; align-items:baseline; justify-content:center;}
.readout .k{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.readout .v{font-family:var(--mono); font-size:1.5rem; font-weight:600; color:var(--ink); display:block; margin-top:.15rem;}
.readout .v small{font-size:.9rem; color:var(--accent);}
canvas#radar{width:100%; max-width:340px; height:auto; display:block; margin:0 auto;}
.bars{display:flex; flex-direction:column; gap:.7rem;}
.bar-row{display:grid; grid-template-columns:8.5rem 1fr 2.6rem; align-items:center; gap:.8rem;}
.bar-label{font-size:.82rem; color:var(--secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-track{height:9px; background:var(--surface-2); border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; border-radius:5px; transition:width .6s cubic-bezier(.3,0,.2,1);}
.bar-val{font-family:var(--mono); font-size:.78rem; color:var(--muted); text-align:right;}
.siglist{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem;}
.siglist li{display:flex; gap:.6rem; align-items:flex-start; font-size:.96rem; color:var(--secondary);}
.siglist li::before{content:""; width:6px; height:6px; margin-top:.5rem; flex:none; background:var(--accent); border-radius:1px; transform:rotate(45deg);}
.pause{border-left:3px solid var(--accent); padding:.3rem 0 .3rem 1.1rem; margin-top:.4rem;}
.pause .q{font-family:var(--serif); font-size:1.3rem; color:var(--ink); line-height:1.3;}
.pause .cap{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5rem;}
.note{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:10px; padding:1rem 1.1rem; font-size:.92rem; color:var(--secondary);}

.locked{border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:1.1rem;}
.locked-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem; background:var(--surface); border-bottom:1px solid var(--border);}
.locked-head .price{font-family:var(--mono); font-weight:600; color:var(--amber-700); font-size:1.05rem; white-space:nowrap;}
.locked-body{padding:1.2rem 1.4rem; background:color-mix(in srgb, var(--amber-400) 6%, var(--surface));}
.locked ul{margin:0; padding:0; list-style:none; display:grid; gap:.55rem;}
.locked li{display:flex; gap:.6rem; font-size:.95rem; color:var(--secondary); align-items:flex-start;}
.locked li .lk{color:var(--amber-700); flex:none;}
.tierline{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:1rem;}
.tier{font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; border:1px solid var(--border-strong); border-radius:999px; padding:.22rem .6rem; color:var(--muted);}
.tier b{color:var(--secondary); font-weight:600;}

.email-row{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem;}
.email-row input{flex:1; min-width:12rem; background:var(--bg); border:1px solid var(--border-strong); border-radius:8px; padding:.8rem 1rem; font-size:1rem; color:var(--ink); font-family:var(--sans);}
.email-row input:focus{outline:2px solid var(--amber-500); outline-offset:1px;}
.consent{display:flex; gap:.5rem; align-items:flex-start; margin-top:.8rem; font-size:.82rem; color:var(--muted);}
.consent input{margin-top:.15rem;}

.foot{border-top:1px solid var(--border); margin-top:2.5rem; padding:1.6rem clamp(1.1rem,4vw,2rem); font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.03em; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; max-width:56rem; margin-left:auto; margin-right:auto;}
.foot a{color:var(--teal);}

.prose p{color:var(--secondary); max-width:36rem;}
.prose h2{margin:2rem 0 .8rem; font-size:1.4rem;}

.fade{animation:fade .38s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}
@media (max-width:520px){.bar-row{grid-template-columns:6.5rem 1fr 2.4rem;} .nav a:not(.btn){display:none;}}