/* What The Cuts audit demo, v3. Built to the WTC brand guidelines v1.0 (Oct 2026).
   Type: Excon Black (headlines, key numbers), Inter 400/600 (everything else).
   JetBrains Mono only where the guidelines put it: pills, tags, badges, buttons, eyebrows.
   Colour: 60 indigo / 30 white / 10 gold. Brand tints only. Never gold text on white.
   Spacing: 8px scale (8 16 24 32 48 64). One 24px gutter. Cards: 20px corners, 24px padding. */
@font-face{font-family:"Excon";src:url(fonts/excon-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --indigo:#1E2A5A;--white:#FFFFFF;--gold:#F4B740;
  --deep:#141C40;--ink:#0E1430;--slate:#3C466E;--mist:#AEB6D3;--tint:#EEF0F7;--gold-light:#F8C863;
  --glow:radial-gradient(120% 90% at 78% 18%,#2D3E80 0%,var(--indigo) 42%,var(--deep) 100%);
  --line:rgba(174,182,211,.22);--line-2:rgba(174,182,211,.38);
  --display:"Excon","Inter",system-ui,sans-serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;
  --g:24px;--max:560px;--r:20px;--r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--mist);background:var(--deep);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
b,strong{font-weight:600}

/* type scale (guidelines, mobile): H1 44 / H2 36 / H3 28 / H4 22 / Lead 18 / Body 16 / Small 14 / Accent 13 / Label 12 */
h1,h2,h3{font-family:var(--display);font-weight:900;color:var(--white);letter-spacing:-.005em}
h1{font-size:44px;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
h2{font-size:36px;line-height:1}
h3{font-size:28px;line-height:1.05}
h4{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--white)}
.lede{font-size:18px;line-height:1.5;color:var(--white);opacity:.92}
.small{font-size:14px;line-height:1.5}
.gold{color:var(--gold)}
.eyebrow{display:flex;align-items:center;gap:var(--s1);font:400 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist);margin-bottom:var(--s2)}
.eyebrow .n{color:var(--gold);font-weight:700}
.lt .eyebrow{color:var(--slate)}.lt .eyebrow .n{color:var(--indigo)}

/* pills, tags, badges: JetBrains Mono caps */
.pill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1.5px solid var(--line-2);color:var(--mist);white-space:nowrap}
.pill.src{color:var(--white);border-color:var(--line-2)}
.pill.ex{color:var(--indigo);background:var(--gold);border-color:var(--gold)}
.pill.na{color:var(--mist);border-style:dashed}
.lt .pill{color:var(--slate);border-color:var(--mist)}
.lt .pill.src{color:var(--indigo);border-color:var(--indigo)}
.lt .pill.ex{color:var(--indigo);background:var(--gold);border-color:var(--gold)}

/* buttons: pills, JetBrains Mono Bold, gold primary */
.btn{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:16px 24px;border-radius:999px;border:2px solid var(--gold);background:var(--gold);color:var(--indigo);font:700 14px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 10px 28px rgba(244,183,64,.32)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px}
.btn.line{background:transparent;border-color:var(--line-2);color:var(--white);min-height:48px;font-size:13px}
.btn.line:hover{background:rgba(255,255,255,.06);border-color:var(--white);box-shadow:none}
.lt .btn.line{color:var(--indigo);border-color:var(--mist)}
.lt .btn.line:hover{border-color:var(--indigo);background:var(--tint)}
.btn.indigo{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.btn.indigo:hover{background:var(--deep);border-color:var(--deep);box-shadow:0 10px 24px rgba(14,20,48,.25)}
.btn.loading{opacity:.75;pointer-events:none}
.more{margin-top:var(--s2)}
.link{font:600 14px/1.4 var(--sans);text-decoration:underline;text-underline-offset:3px;color:var(--white)}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--g);background:rgba(20,28,64,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .logo{width:132px;height:auto}
.demo-tag{font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist);padding:6px 10px;border-radius:999px;border:1.5px solid var(--line-2)}

/* layout: one column, one gutter */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.screen{display:none}
.screen.is-on{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.blk{padding:var(--s8) 0}
.dk{background:var(--deep)}
.ind{background:var(--indigo)}
.glow{background:var(--glow)}
.lt{background:var(--white);color:var(--slate)}
.lt h2,.lt h3,.lt h4{color:var(--indigo)}
.blk-head{margin-bottom:var(--s4)}
.blk-head h3{margin-bottom:var(--s2)}
.blk-head p{font-size:16px}
.blk-head .pill{margin-top:var(--s2)}
.stack>*+*{margin-top:var(--s2)}

/* cards: 20px corners, 24px padding everywhere */
.card{background:var(--indigo);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.ind .card,.glow .card{background:rgba(20,28,64,.55)}
.lt .card{background:var(--white);border:1.5px solid var(--tint);box-shadow:0 1px 2px rgba(14,20,48,.06)}
.lt .card.tint{background:var(--tint);border-color:var(--tint);box-shadow:none}

/* 1. landing */
#landing{background:var(--glow);min-height:calc(100svh - 64px)}
#landing .wrap{padding-top:var(--s6);padding-bottom:var(--s8)}
#landing h1{margin-bottom:var(--s3)}
.hl{display:inline-block;background:var(--gold);color:var(--indigo);padding:.08em .14em .02em;border-radius:4px;line-height:1}
#landing .lede{margin-bottom:var(--s4)}
.form label,.flabel{display:block;font:600 14px/1.4 var(--sans);color:var(--white);margin-bottom:var(--s1)}
.at-field{display:flex;align-items:center;height:56px;border-radius:var(--r-sm);background:var(--deep);border:2px solid var(--line-2);transition:border-color .2s}
.at-field:focus-within{border-color:var(--gold)}
.at-field span{padding:0 4px 0 var(--s2);color:var(--mist);font-weight:600}
.at-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--white);font-size:17px;outline:0;padding-right:var(--s2)}
.at-field input::placeholder{color:rgba(174,182,211,.55)}
.err{min-height:0;font-size:14px;line-height:1.4;color:var(--gold-light);margin-top:var(--s1)}
.err:empty{display:none}
.lt .err,.sheet .err{color:var(--indigo);font-weight:600}
.seg-lbl{font:600 14px/1.4 var(--sans);color:var(--white);margin:var(--s3) 0 var(--s1)}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1)}
.seg button{min-height:44px;border-radius:999px;border:1.5px solid var(--line-2);color:var(--mist);font:700 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;transition:all .2s var(--ease)}
.seg button:hover{border-color:var(--mist);color:var(--white)}
.seg button.on{background:var(--gold);border-color:var(--gold);color:var(--indigo)}
.form .btn{margin-top:var(--s3)}
.fine{font-size:14px;line-height:1.5;color:var(--mist);margin-top:var(--s2)}
.lt .fine{color:var(--slate)}
.mini{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line)}
.mini li{display:flex;flex-direction:column;gap:var(--s1)}
.mini b{font:900 28px/1 var(--display);color:var(--white)}
.mini span{font:400 12px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}

/* 2. loading */
#loading{background:var(--glow);min-height:calc(100svh - 64px)}
#loading .wrap{padding-top:var(--s8);padding-bottom:var(--s8)}
.loader-ring{width:56px;height:56px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--gold);animation:spin .9s linear infinite;margin-bottom:var(--s4)}
@keyframes spin{to{transform:rotate(360deg)}}
#loading h2{margin-bottom:var(--s1)}
#loadHandle{font-size:16px;color:var(--mist);margin-bottom:var(--s4)}
.steps{list-style:none;border-top:1px solid var(--line)}
.steps li{display:flex;align-items:center;gap:var(--s2);min-height:56px;border-bottom:1px solid var(--line);color:var(--mist);font-size:16px;transition:color .3s}
.steps li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);background:center/14px no-repeat}
.steps li.doing{color:var(--white)}
.steps li.doing::before{border-color:var(--gold);border-top-color:transparent;animation:spin .8s linear infinite}
.steps li.done{color:var(--white)}
.steps li.done::before{border-color:var(--gold);background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231E2A5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bar{height:4px;border-radius:4px;background:var(--line);margin-top:var(--s4);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .8s var(--ease)}

/* 3. report header */
.rep-hero{background:var(--glow);padding:var(--s4) 0 var(--s6)}
.profile{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s2);align-items:center}
.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--deep);border:2px solid var(--gold);font:900 28px/1 var(--display);color:var(--white)}
.handle{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.01em;word-break:break-all}
.pinfo p{font-size:14px;line-height:1.5;color:var(--mist)}
.read-at{margin-top:4px}
.seg-wrap{margin-top:var(--s3)}
.seg-wrap .seg-lbl{margin-top:0}
.src-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:var(--s4) 0 var(--s2)}
.src-row span:first-child{font:600 14px/1.4 var(--sans);color:var(--white)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.stats li{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);border-radius:var(--r);background:rgba(20,28,64,.55);border:1px solid var(--line)}
.stats b{font:900 36px/1 var(--display);color:var(--white);letter-spacing:-.01em}
.stats span{font-size:14px;line-height:1.4;color:var(--mist)}
.score-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s3);align-items:center;margin-top:var(--s2)}
.score-k{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.score-lbl{font-weight:600;font-size:16px;color:var(--white)}
.score-txt{grid-column:1/-1;padding-top:var(--s3);border-top:1px solid var(--line)}
.score-txt h3{font-size:28px;line-height:1.05;margin-bottom:var(--s1)}
.score-txt p{font-size:15px;line-height:1.55}
.ring{position:relative;width:112px;height:112px;--p:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .trk{stroke:var(--line)}
.ring .val{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:calc(326.7 - 326.7 * var(--p) / 100);transition:stroke-dashoffset 1.4s var(--ease)}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num b{font:900 40px/1 var(--display);color:var(--gold)}
.ring-num span{font:400 12px/1 var(--mono);letter-spacing:.05em;color:var(--mist);margin-top:4px}

#repBody{transition:opacity .22s}
#repBody.fading{opacity:.25}

/* sub-scores */
.subs{display:grid;gap:var(--s2);margin-top:var(--s2)}
.sub .top-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.sub .k{font-weight:600;font-size:16px;color:var(--white)}
.sub .v{font:900 28px/1 var(--display);color:var(--white)}
.sub .v.hi{color:var(--gold)}
.sub .v small{font:400 12px/1 var(--mono);color:var(--mist);margin-left:2px}
.meter{height:8px;border-radius:8px;background:var(--line);margin:var(--s2) 0;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:8px;background:var(--white);transition:width 1.1s var(--ease)}
.meter i.hi{background:var(--gold)}
.meter i.low{background:var(--mist);opacity:.55}
.sub p{font-size:14px;line-height:1.5}
.sub .tagrow{display:flex;gap:var(--s1);margin-top:var(--s2)}

/* score pills (x/10) */
.sc{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:32px;padding:0 10px;border-radius:999px;font:700 13px/1 var(--mono);letter-spacing:.02em;border:1.5px solid var(--line-2);color:var(--white)}
.sc.good{background:var(--gold);border-color:var(--gold);color:var(--indigo)}
.sc.bad{border-style:dashed;color:var(--mist)}
.lt .sc{color:var(--indigo);border-color:var(--mist)}
.lt .sc.good{border-color:var(--gold)}
.lt .sc.bad{color:var(--slate)}

/* profile check (light) */
.plist{display:grid;gap:var(--s2);margin-top:var(--s2)}
.pi-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.pi-top b{font-size:18px;color:var(--indigo)}
.saw{font-size:15px;line-height:1.55;color:var(--slate)}
.fix{position:relative;margin-top:var(--s2);padding:var(--s2);border-radius:var(--r-sm);background:var(--tint);font-size:15px;line-height:1.55;color:var(--indigo)}
.fix::before{content:"Fix";display:block;font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);margin-bottom:var(--s1)}
.dk .fix,.ind .fix{background:rgba(255,255,255,.06);color:var(--white)}
.dk .fix::before,.ind .fix::before{color:var(--gold)}

/* hooks (dark) */
.hlist{display:grid;gap:var(--s2);margin-top:var(--s2)}
.hi .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.hi .meta span:first-child{font-size:14px;line-height:1.4;color:var(--mist)}
.hi q{display:block;font-weight:600;font-size:18px;line-height:1.35;color:var(--white);quotes:"\201C" "\201D"}
.hi .why{font-size:14px;line-height:1.5;margin-top:var(--s1)}
.hide{display:none!important}

/* totals strip */
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.tot{display:flex;flex-direction:column;gap:4px;padding:var(--s2);border-radius:var(--r-sm);background:var(--indigo);border:1px solid var(--line);min-width:0}
.tot span{font-size:12px;line-height:1.3;color:var(--mist)}
.tot b{font:900 24px/1.05 var(--display);color:var(--white);overflow-wrap:anywhere}
.tot i{font-style:normal;font-size:12px;line-height:1.3;color:var(--mist)}
.tot.priv b{font:600 14px/1.3 var(--sans);color:var(--mist)}
.lt .tot{background:var(--tint);border-color:var(--tint)}
.lt .tot span,.lt .tot i{color:var(--slate)}
.lt .tot b{color:var(--indigo)}
#totals{grid-template-columns:repeat(2,minmax(0,1fr))}

/* captions (light) */
.caplist{display:grid;gap:var(--s1);margin-top:var(--s2)}
.cp{padding:var(--s2) 0;border-bottom:1px solid var(--tint)}
.cp .ct{font-weight:600;font-size:16px;line-height:1.4;color:var(--indigo);margin-bottom:var(--s1)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{font:700 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1.5px solid var(--mist);color:var(--slate)}
.chip.ok{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.chip.no{border-style:dashed}

/* charts */
.ch{overflow:hidden}
.ch+.ch{margin-top:var(--s2)}
.ch-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px;margin-bottom:var(--s3)}
.ch-head h4{font-size:18px}
.ch-src{font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1.5px solid var(--line-2);color:var(--white);white-space:nowrap}
.ch-src.ex{background:var(--gold);border-color:var(--gold);color:var(--indigo)}
.lt .ch-src{color:var(--indigo);border-color:var(--indigo)}
.lt .ch-src.ex{border-color:var(--gold)}
.ch svg{width:100%;height:auto;overflow:visible}
.ch-note{font-size:14px;line-height:1.5;margin-top:var(--s2)}
.ch-note b{color:var(--white)}
.lt .ch-note b{color:var(--indigo)}
.ch-sub{font-weight:600;font-size:14px;color:var(--white);margin:var(--s3) 0 var(--s2)}
.lt .ch-sub{color:var(--indigo)}
.ch-empty{font-size:14px}
.ax{font:400 11px var(--sans);font-variant-numeric:tabular-nums}
.ax.s{font-size:10px}
.bv,.rv{font:600 12px var(--sans);font-variant-numeric:tabular-nums}
.rl{font:400 12px var(--sans)}
.rv{font-size:14px}
.lbl-in{font:600 11px var(--sans)}
.d-num{font:900 22px var(--display)}
.d-sub{font:400 10px var(--sans)}
.donut-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s3);align-items:center}
.donut{width:132px;height:132px}
.legend{list-style:none;display:grid;gap:var(--s1)}
.legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:var(--s1);row-gap:2px;align-items:center;font-size:14px}
.legend i{width:12px;height:12px;border-radius:3px}
.legend .lk{color:var(--white)}
.legend b{text-align:right;color:var(--white)}
.legend em{grid-column:2/4;font-style:normal;font-size:12px;color:var(--mist)}
.lt .legend .lk,.lt .legend b{color:var(--indigo)}
.lt .legend em{color:var(--slate)}
.hb{display:grid;gap:var(--s2)}
.hb-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:14px;margin-bottom:6px}
.hb-lbl span{color:var(--mist)}
.hb-lbl em{font-style:normal;font-size:12px;opacity:.8}
.hb-lbl b{color:var(--white)}
.is-best .hb-lbl span{color:var(--white)}
.is-best .hb-lbl b{color:var(--gold)}
.lt .hb-lbl span{color:var(--slate)}
.lt .hb-lbl b,.lt .is-best .hb-lbl span,.lt .is-best .hb-lbl b{color:var(--indigo)}
.hb-track{height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.lt .hb-track{background:var(--tint)}
.hb-track i{display:block;height:100%;width:var(--w);border-radius:10px}
.ch-best{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:var(--s2);border-radius:var(--r-sm);background:rgba(244,183,64,.12);border:1px solid rgba(244,183,64,.35)}
.ch-best span{font:400 12px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.ch-best b{font-size:16px;color:var(--gold);text-align:right}
.ff{display:grid;gap:var(--s3)}
.ff-ratio{display:flex;align-items:baseline;gap:var(--s2)}
.ff-ratio b{font:900 44px/1 var(--display);color:var(--white)}
.lt .ff-ratio b{color:var(--indigo)}
.ff-ratio span{font-size:14px;line-height:1.4}
.cmp-g+.cmp-g{margin-top:var(--s3)}
.cmp-k{font-weight:600;font-size:14px;color:var(--white);margin-bottom:var(--s1)}
.lt .cmp-k{color:var(--indigo)}
/* chart motion: only after scroll-in */
.ch .arc{stroke-dasharray:0 100;fill:none;stroke-width:15}
.ch.in .arc{stroke-dasharray:var(--da);transition:stroke-dasharray 1s var(--ease) var(--dl)}
.ch .ln{stroke-dasharray:1;stroke-dashoffset:1}
.ch.in .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease)}
.ch .area,.ch .pt,.ch .best,.ch .bv,.ch .avg,.ch .lbl-in{opacity:0}
.ch.in .area{opacity:1;transition:opacity 1s var(--ease) .5s}
.ch.in .pt,.ch.in .bv{opacity:1;transition:opacity .4s var(--ease) var(--dl)}
.ch.in .best,.ch.in .avg,.ch.in .lbl-in{opacity:1;transition:opacity .5s var(--ease) 1.2s}
.ch .vb{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.ch.in .vb{transform:scaleY(1);transition:transform .8s var(--ease) var(--dl)}
.ch .hb-track i{transform:scaleX(0);transform-origin:left}
.ch.in .hb-track i{transform:scaleX(1);transition:transform 1s var(--ease) var(--dl)}
.ch .shape{transform:scale(0);transform-origin:160px 137px;opacity:0}
.ch.in .shape{transform:scale(1);opacity:1;transition:transform 1.1s var(--ease),opacity .4s}

/* reels vs posts bars */
.mix-h{font-weight:600;font-size:18px;color:var(--white);margin-bottom:var(--s2)}
.mrow+.mrow{margin-top:var(--s2)}
.mrow .lbl{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.mrow .lbl b{color:var(--white)}
.mbar{height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.mbar i{display:block;height:100%;border-radius:10px;background:var(--white);transition:width 1.1s var(--ease)}
.mrow:first-child .mbar i{background:var(--gold)}
.mv{font-size:12px;color:var(--mist);margin-top:6px}
#mixNote{margin-top:var(--s2)}

/* content list */
.clist{display:grid;gap:var(--s1);margin-top:var(--s2)}
.crow{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s2);padding:var(--s2);border-radius:var(--r-sm);background:var(--indigo);border:1px solid var(--line)}
.cth{width:48px;height:60px;border-radius:8px;display:grid;place-items:center;background:var(--deep);border:1px solid var(--line)}
.cth b{font:700 8px/1 var(--mono);letter-spacing:.04em;color:var(--mist)}
.cth.Reel b{color:var(--gold)}
.cinfo .ct{font-weight:600;font-size:15px;line-height:1.35;color:var(--white)}
.cm{font-size:12px;color:var(--mist);margin:2px 0 var(--s1)}
.cnum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.cnum div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cnum span{font-size:11px;line-height:1.2;color:var(--mist)}
.cnum b{font-size:13px;line-height:1.2;color:var(--white);overflow-wrap:anywhere}
.cnum b.na{font-weight:400;font-size:11px;color:var(--mist)}
.cnum b.er{color:var(--white)}

/* best vs weakest (light) */
.reels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.reel{padding:0!important;overflow:hidden}
.thumb{position:relative;aspect-ratio:4/5;padding:var(--s2);display:flex;flex-direction:column;justify-content:flex-end;background:var(--glow);color:var(--white)}
.thumb.weak{background:linear-gradient(160deg,var(--slate),var(--deep))}
.thumb .tag{position:absolute;top:var(--s2);left:var(--s2)}
.thumb .ttl{font-weight:600;font-size:14px;line-height:1.3}
.thumb .len{position:absolute;top:var(--s2);right:var(--s2);font:400 11px/1 var(--mono);color:var(--white);opacity:.85}
.play{position:absolute;left:50%;top:44%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.play::after{content:"";margin-left:3px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--indigo)}
.thumb.weak .play{background:rgba(255,255,255,.85)}
.reel .rbody{padding:var(--s2)}
.rmeta{font-size:13px;color:var(--slate)}
.rmeta b{font:900 22px/1 var(--display);color:var(--indigo);display:block;margin-bottom:4px}
.reel p.small{margin-top:var(--s1);color:var(--slate)}

/* ads (dark) */
.ads-sum{display:grid;gap:var(--s2)}
.ads-stat{display:flex;align-items:center;gap:var(--s2)}
.ads-stat b{font:900 44px/1 var(--display);color:var(--gold)}
.ads-stat span:last-child{font-size:14px}
.ads{display:grid;gap:var(--s2);margin-top:var(--s2)}
.ad .pill{margin-bottom:var(--s2)}
.ad h4{margin-bottom:4px}
.ad .am{font-size:13px;color:var(--mist)}
.ad .ac{margin-top:var(--s2);padding-left:var(--s2);border-left:3px solid var(--gold);font-size:15px;line-height:1.5;color:var(--white)}

/* competitors (light) */
.comps{display:grid;gap:var(--s2);margin-top:var(--s2)}
.comp-top{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--indigo);color:var(--white);font:700 13px/1 var(--mono)}
.comp:first-child .rank{background:var(--gold);color:var(--indigo)}
.comp-id b{display:block;font-size:16px;line-height:1.3;color:var(--indigo);overflow-wrap:anywhere}
.loc{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--slate)}
.loc svg{width:12px;height:12px;flex:none}
.comp-n{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);padding:var(--s2) 0;border-top:1px solid var(--tint);border-bottom:1px solid var(--tint)}
.lt .cnum span{color:var(--slate)}
.lt .cnum b{color:var(--indigo);font-size:15px}
.lt .cnum b.er{color:var(--indigo)}
.better{margin-top:var(--s2);font-size:14px;line-height:1.5;color:var(--slate)}
.better span{display:block;font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);margin-bottom:6px}

/* quick wins + pro edit (dark) */
.wins{list-style:none;counter-reset:w;display:grid;gap:var(--s2)}
.wins li{counter-increment:w;display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s2);padding:var(--s3);border-radius:var(--r);background:var(--indigo);border:1px solid var(--line)}
.wins li::before{content:"0" counter(w);font:700 13px/1.6 var(--mono);letter-spacing:.05em;color:var(--gold)}
.wins b{display:block;font-size:18px;line-height:1.3;color:var(--white);margin-bottom:var(--s1)}
.wins p{font-size:15px;line-height:1.55}
.pro{padding:0!important;overflow:hidden}
.pro-head,.pro-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s2);padding:var(--s2) var(--s3)}
.pro-head{background:rgba(20,28,64,.6)}
.pro-head span{font:400 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.pro-head span:last-child{color:var(--gold);font-weight:700}
.pro-row{border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.pro-row .a{font-weight:600;color:var(--white)}
.pro-row .c{color:var(--white)}

/* CTA */
.cta-blk{background:var(--glow);padding:var(--s8) 0}
.cta-blk h2{margin-bottom:var(--s2)}
.cta-blk p{font-size:16px;margin-bottom:var(--s4)}
.cta-blk .mail{display:block;margin-top:var(--s3);font-size:14px;color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.again{padding:var(--s4) 0 140px;background:var(--deep)}

/* sticky export */
.export-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--s2) var(--g) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(20,28,64,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.export-bar .btn{max-width:calc(var(--max) - 48px);margin:0 auto}

/* export sheet (light) */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:rgba(14,20,48,.7);animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}}
.sheet{position:relative;width:100%;max-width:520px;max-height:92svh;overflow:auto;background:var(--white);color:var(--slate);border-radius:var(--r) var(--r) 0 0;padding:var(--s4) var(--g) calc(var(--s4) + env(safe-area-inset-bottom));animation:up .35s var(--ease)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h2{color:var(--indigo);font-size:28px;line-height:1.05;margin-bottom:var(--s1);padding-right:var(--s6)}
.msub{font-size:15px;line-height:1.5;margin-bottom:var(--s3)}
.x{position:absolute;top:var(--s2);right:var(--s2);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;color:var(--indigo);background:var(--tint)}
.sheet label{display:block;font:600 14px/1.4 var(--sans);color:var(--indigo);margin:var(--s2) 0 var(--s1)}
.sheet input,.sheet select{width:100%;height:56px;border-radius:var(--r-sm);border:2px solid var(--tint);background:var(--tint);color:var(--indigo);font-size:17px;padding:0 var(--s2);outline:0;transition:border-color .2s}
.sheet input:focus,.sheet select:focus{border-color:var(--gold);background:var(--white)}
.sheet input::placeholder{color:#8790b3}
.phone{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s1)}
.sheet select{font-size:15px;padding:0 10px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231E2A5A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.sheet .btn{margin-top:var(--s3)}
.sheet .fine{color:var(--slate)}
.preview{display:block;margin-top:var(--s3);font:600 14px/1.4 var(--sans);color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
#expDone h2{margin-top:var(--s2)}
.tick{width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--indigo);display:grid;place-items:center;animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.tick svg{width:32px;height:32px}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.link.dark{display:block;margin-top:var(--s3);color:var(--indigo)}

@media (min-width:700px){.modal{align-items:center}.sheet{border-radius:var(--r)}}
@media (max-width:360px){:root{--g:16px}h1{font-size:38px}.score-card{grid-template-columns:96px minmax(0,1fr)}.ring{width:96px;height:96px}.ring-num b{font-size:34px}.donut-row{grid-template-columns:112px minmax(0,1fr)}.donut{width:112px;height:112px}.stats b{font-size:30px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .ch .arc{stroke-dasharray:var(--da)}.ch .ln{stroke-dashoffset:0}
  .ch .area,.ch .pt,.ch .best,.ch .bv,.ch .avg,.ch .lbl-in{opacity:1}
  .ch .vb,.ch .hb-track i,.ch .shape{transform:none;opacity:1}
}

/* stage 17 additions */
.df label{color:var(--white);margin:var(--s3) 0 var(--s1)}
.df label .opt{font-weight:400;color:var(--mist)}
.df input,.df select{width:100%;height:56px;border-radius:var(--r-sm);border:2px solid var(--line-2);background:var(--deep);color:var(--white);font-size:17px;padding:0 var(--s2);outline:0;transition:border-color .2s;flex:none}
.df input:focus,.df select:focus{border-color:var(--gold);background:var(--deep)}
.df input::placeholder{color:rgba(174,182,211,.55)}
.df select{font-size:15px;padding:0 10px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23AEB6D3' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}
.df .btn{margin-top:var(--s3)}
.link.back{display:block;margin:var(--s3) auto 0;background:none;border:0;color:var(--mist);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer}
#thanks .steps{margin-top:var(--s3)}
#thanks .steps li.bad{color:var(--mist)}
#thanks .steps li.bad::before{border-color:var(--mist);background:none}
.thx-done .loader-ring{animation:none;border-color:var(--gold)}
.again{margin-top:var(--s4)}
.again .link{background:none;border:0;color:var(--gold);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.foot-mini{text-align:center;padding:var(--s4) var(--g) var(--s6)}
.foot-mini a{color:var(--mist);font-size:14px}

/* 02 first look: live profile read only */
.pk-head{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s3)}
.pk-head img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:var(--indigo);flex:none}
.pk-head h1{margin:0;font-size:28px;line-height:1.15}
.pk-h{margin:2px 0 0;font-family:var(--mono);font-size:13px;color:var(--gold)}
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1)}
.pk-t{padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(30,42,90,.55);display:flex;flex-direction:column;gap:4px;min-width:0}
.pk-t b{font-family:var(--display);font-weight:900;font-size:22px;line-height:1.1;color:var(--white);overflow-wrap:anywhere}
.pk-t span{font-size:12px;color:var(--mist)}
.pk-note{font-size:13px;margin:var(--s2) 0 0}
.pk-sub{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:var(--s4) 0 var(--s2)}
.pk-checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.pk-checks li{position:relative;padding:12px 16px 12px 44px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--white)}
.pk-checks li::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--mist)}
.pk-checks li.ok::before{border-color:var(--gold);background:var(--gold)}
.pk-checks li.no{color:var(--mist)}
.lock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s1);margin-bottom:var(--s3)}
.lock{position:relative;padding:var(--s2);border:1px dashed var(--line-2);border-radius:var(--r-sm);background:rgba(20,28,64,.6);overflow:hidden}
.lock b{display:block;font-weight:600;font-size:14px;color:var(--white);padding-right:22px;margin-bottom:10px}
.lock i{display:block;height:8px;border-radius:4px;background:var(--slate);margin-top:6px;filter:blur(2px);width:90%}
.lock i.s{width:55%}
.lock .lk{position:absolute;top:14px;right:14px;width:12px;height:10px;border-radius:2px;background:var(--gold)}
.lock .lk::before{content:"";position:absolute;left:2px;top:-7px;width:8px;height:8px;border:2px solid var(--gold);border-bottom:0;border-radius:6px 6px 0 0;box-sizing:border-box}

/* ===== Spacing pass (v18, 31 Oct 2026). One 8px scale: 8 16 24 32 40 48 64 80.
   label -> heading 16, heading -> body 24, body -> form 40, field gaps 24, sections 48-64 (mobile) / 64-80 (desktop),
   cards 20-24 padding, body line-height 1.5-1.6, display headings 1.08. ===== */
:root{--s5:40px;--s10:80px}
h1{line-height:1.08}
h2{line-height:1.1}
h3{line-height:1.12}

/* header: logo at a readable size, aligned with the content column */
.top{display:block;padding:20px var(--g)}
.top-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.top .logo{width:196px;height:auto;margin-left:-6px}
.demo-tag{padding:8px 12px;flex:none}

/* every screen gets the same top and bottom room */
.screen .wrap{padding-top:var(--s6);padding-bottom:var(--s8)}
#landing .wrap{padding-top:var(--s6);padding-bottom:var(--s8)}
.eyebrow{margin-bottom:var(--s2);line-height:1.4}

/* heading -> paragraph -> form */
.screen h1{margin-bottom:var(--s3)}
.screen .lede{margin-bottom:var(--s5)}
#landing .lede{margin-bottom:var(--s5)}

/* long handles never run off the screen */
.screen h1{overflow-wrap:anywhere}
#h-det{font-size:clamp(30px,9vw,44px)}
.pk-head h1{overflow-wrap:break-word}

/* forms: label 8 above its field, 24 between fields, 32 before the button */
.form label{margin-bottom:var(--s1)}
.df label{margin:var(--s3) 0 var(--s1)}
.df label:first-child{margin-top:0}
.phone{gap:var(--s1)}
.err{margin-top:var(--s1)}
.seg-lbl{margin:var(--s3) 0 var(--s1)}
.form .btn,.df .btn{margin-top:var(--s4)}
.fine{margin-top:var(--s2);line-height:1.5}
.link.back{margin:var(--s4) auto 0}
.mini{margin-top:var(--s8);padding-top:var(--s4);gap:var(--s3)}

/* 02 first look */
.pk-head{margin:var(--s2) 0 var(--s4);gap:var(--s3)}
.pk-head h1{margin:0 0 4px;line-height:1.1}
.pk-h{margin-top:4px}
.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.pk-t{padding:20px;gap:var(--s1)}
.pk-t b{font-size:24px;overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
.pk-t span{font-size:13px;line-height:1.4}
.pk-note{font-size:13px;line-height:1.55;margin:var(--s3) 0 0}
.pk-sub{margin:var(--s8) 0 var(--s3)}
.pk-checks{gap:12px}
.pk-checks li{padding:16px 20px 16px 52px;line-height:1.5}
.pk-checks li::before{left:20px}
.lock-grid{grid-template-columns:1fr;gap:var(--s2);margin-bottom:var(--s5)}
.lock{padding:20px 24px}
.lock b{margin-bottom:var(--s2);padding-right:32px;line-height:1.4}
.lock i{margin-top:var(--s1)}
.lock .lk{top:22px;right:22px}
#peek .btn{margin-top:var(--s5)}

/* 04 progress, sent, error */
.loader-ring{margin-bottom:var(--s4)}
#thanks .steps{margin-top:var(--s5)}
.steps li{min-height:56px;padding:var(--s1) 0;line-height:1.4}
#thanks .fine{margin-top:var(--s3)}
.thx-done .lede{margin-bottom:var(--s4)}

/* bottom links and footer: no dead 140px gap */
.again{padding:0;margin-top:var(--s5);background:none}
.foot-mini{padding:var(--s5) var(--g) var(--s6);border-top:1px solid var(--line)}

@media (min-width:600px){
  .pk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-t b{font-size:22px}
}
@media (min-width:900px){
  :root{--g:32px;--max:640px}
  .top{padding:24px var(--g)}
  .top .logo{width:248px;margin-left:-8px}
  .screen .wrap,#landing .wrap{padding-top:var(--s8);padding-bottom:var(--s10)}
  h1,#h-det{font-size:52px}
  .pk-head h1{font-size:32px}
  .pk-t b{font-size:26px}
  .pk-grid{gap:var(--s3)}
  .lock-grid{gap:var(--s3)}
  .pk-t{padding:24px}
}
@media (max-width:360px){
  .top .logo{width:168px}
  .pk-t{padding:16px}
  .pk-t b{font-size:20px}
}