/* THE LIFT TEST — /brand-lift-calculator
   Dark, loud, on-brand. Same tokens and faces as v4.html. */

@font-face{font-family:"Roc Grotesk";src:url("/brand/fonts/roc-grotesk/fonnts.com-Roc_Grotesk_Condensed_Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/brand/fonts/instrument-sans/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/brand/fonts/instrument-sans/InstrumentSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/brand/fonts/instrument-sans/InstrumentSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/brand/fonts/instrument-sans/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --purple:#2e024c;--purple-deep:#1c0130;--purple-ink:#3d1063;
  --electric:#be43ff;--pink:#ff9cff;--neon:#a9f600;--teal:#00b1a5;--yellow:#f7f800;--peach:#ffcfa0;
  --grad:linear-gradient(90deg,#be43ff 0%,#ff9cff 30%,#ffcfa0 55%,#f7f800 80%,#a9f600 100%);
  --display:"Roc Grotesk","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --pad:clamp(1.1rem,4vw,3rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--purple);color:#fff;font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--neon);color:var(--purple);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.d{font-family:var(--display);font-weight:700;line-height:.9;letter-spacing:.005em;text-transform:uppercase}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.65;margin:0}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.3,1.4),background .2s}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn-neon{background:var(--neon);color:var(--purple)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff}
.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ── nav ─────────────────────────────────────────────────────────────── */
.lt-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.2rem var(--pad);position:relative;z-index:5}
.lt-nav img{height:26px;width:auto;display:block}
.lt-nav nav{display:flex;gap:1.6rem;font-size:.9rem;font-weight:500}
.lt-nav nav a{text-decoration:none;opacity:.8}
.lt-nav nav a:hover{opacity:1}
.lt-nav .btn{padding:.7rem 1.2rem;font-size:.85rem}
@media(max-width:700px){.lt-nav nav{display:none}}

/* ── the tool ────────────────────────────────────────────────────────── */
.lt-hero{position:relative;padding:clamp(1.5rem,4vw,3.5rem) var(--pad) clamp(2.5rem,5vw,4.5rem);overflow:hidden}
.lt-hero::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(190,67,255,.35),transparent 70%),radial-gradient(40% 50% at 80% 20%,rgba(169,246,0,.16),transparent 70%);
  pointer-events:none;filter:blur(20px)}
.lt-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start;max-width:1440px;margin:0 auto}
@media(max-width:940px){.lt-grid{grid-template-columns:1fr}}

.lt-title{margin:.6rem 0 1rem;font-size:clamp(3.2rem,9vw,7.5rem)}
.lt-title .grad{display:inline-block;padding-right:.08em}
.lt-lead{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.5;opacity:.85;max-width:34rem;margin:0 0 2.2rem}

/* sliders: giant number readouts, the control is the number */
.lt-sliders{display:flex;flex-direction:column;gap:1.6rem}
.slider{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "range range" "hint hint";gap:.35rem 1rem;align-items:end}
.slider label{grid-area:label;font-size:.95rem;font-weight:600}
.slider output{grid-area:value;font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--neon);text-align:right;white-space:nowrap}
.slider output small{font-size:.42em;color:#fff;opacity:.8;margin-left:.15em;font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0}
.slider input[type=range]{grid-area:range;width:100%;appearance:none;-webkit-appearance:none;height:44px;background:transparent;margin:0;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--neon) var(--fill,0%),rgba(255,255,255,.14) var(--fill,0%))}
.slider input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:rgba(255,255,255,.14)}
.slider input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--neon)}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:4px solid var(--purple);box-shadow:0 0 0 3px var(--neon),0 6px 22px rgba(0,0,0,.4);transition:transform .15s}
.slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--purple);box-shadow:0 0 0 3px var(--neon),0 6px 22px rgba(0,0,0,.4)}
.slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.slider input[type=range]:focus-visible{outline:none}
.slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--yellow),0 0 0 8px rgba(247,248,0,.25)}
.slider .hint{grid-area:hint;font-size:.82rem;opacity:.6;margin:0}

.lt-fineprint{margin-top:1.6rem;font-size:.85rem}
.lt-fineprint summary{cursor:pointer;font-weight:600;opacity:.75;list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.lt-fineprint summary::before{content:"+";font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--neon)}
.lt-fineprint[open] summary::before{content:"–"}
.lt-fineprint summary::-webkit-details-marker{display:none}
.lt-fineprint .row{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center;margin-top:.9rem;font-size:.85rem}
.lt-fineprint input[type=number]{width:5.5rem;padding:.55rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-variant-numeric:tabular-nums}
.lt-fineprint p{opacity:.65;margin:.5rem 0 0}

/* the stage: towers + noise floor + verdict */
.lt-stage{position:relative;display:flex;flex-direction:column;gap:1.2rem}
.verdict{min-height:3.6em;display:flex;align-items:flex-end}
.verdict .d{font-size:clamp(3.4rem,8.5vw,7rem);margin:0;transform-origin:left bottom;will-change:transform}
.verdict[data-band=clear] .d{color:var(--neon)}
.verdict[data-band=marginal] .d{color:var(--yellow)}
.verdict[data-band=short] .d{color:var(--pink)}
.verdict[data-band=unknown] .d{color:rgba(255,255,255,.4)}
.verdict-sub{font-size:1.02rem;line-height:1.5;opacity:.85;max-width:38rem;margin:0}

.towers{position:relative;background:var(--purple-deep);border-radius:22px;padding:1.3rem 1.3rem 1rem;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.towers svg{width:100%;height:auto;display:block;overflow:visible}
.towers .lab{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:rgba(255,255,255,.6)}
.towers .pct{font-family:var(--display);font-size:30px;fill:#fff;text-transform:uppercase}
.towers .noise-lab{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;fill:var(--yellow)}
.towers .tick{font-family:var(--body);font-size:9px;font-weight:600;fill:rgba(255,255,255,.3);text-anchor:start}
.towers .tower{transition:none}
.towers .noise{fill:url(#noisePat);stroke:var(--yellow);stroke-width:1.5;stroke-dasharray:5 4;opacity:.9}
.tower-legend{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;font-size:.8rem;opacity:.78;margin:.8rem 0 0;padding:0}
.tower-legend i{display:inline-block;width:.75em;height:.75em;border-radius:3px;margin-right:.45em;vertical-align:-.05em}
.tower-legend i.dash{background:transparent;border:1.5px dashed var(--yellow);border-radius:2px}
.tower-read{margin:.55rem 0 0;font-size:.92rem;line-height:1.45;color:#fff;font-weight:600;max-width:44rem}

.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:560px){.figs{grid-template-columns:1fr 1fr}}
.fig{border-top:2px solid rgba(255,255,255,.12);padding-top:.7rem;min-width:0}
.fig b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fig span{display:block;font-size:.76rem;opacity:.65;margin-top:.3rem;line-height:1.35}
.fig.hot b{color:var(--neon)}

.lt-cta{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-top:.4rem}
.lt-share{background:none;border:0;color:#fff;opacity:.7;font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.6rem 0;min-height:44px}
.lt-share:hover{opacity:1}
.lt-share[data-done]{color:var(--neon);opacity:1;text-decoration:none}

/* ── explainer, maths, faq ───────────────────────────────────────────── */
.lt-section{padding:clamp(3rem,7vw,6rem) var(--pad);border-top:1px solid rgba(255,255,255,.08)}
.lt-section .wrap{max-width:1100px;margin:0 auto}
.lt-section h2.d{font-size:clamp(2.4rem,6vw,4.6rem);margin:.4rem 0 1.4rem;max-width:14ch}
.lt-section p{max-width:64ch;font-size:1.05rem;line-height:1.6;opacity:.85;margin:0 0 1rem}
.lt-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
@media(max-width:860px){.lt-two{grid-template-columns:1fr}}

.lt-table{overflow-x:auto;margin:1.4rem 0 .6rem;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--purple-deep)}
.lt-table table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums;min-width:520px}
.lt-table th,.lt-table td{padding:.8rem 1rem;text-align:right;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.lt-table thead th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;font-weight:600}
.lt-table th[scope=row],.lt-table thead th:first-child{text-align:left;font-weight:700;color:var(--pink)}
.lt-table tbody tr:last-child td,.lt-table tbody tr:last-child th{border-bottom:0}
.lt-table caption{text-align:left;padding:.9rem 1rem .3rem;font-weight:600;font-size:.9rem}
.lt-note{font-size:.88rem;opacity:.6;max-width:64ch}

.lt-faq dl{margin:0;display:grid;gap:1.3rem}
.lt-faq dt{font-weight:700;font-size:1.05rem;margin-bottom:.35rem}
.lt-faq dd{margin:0;opacity:.8;max-width:66ch;line-height:1.55}

.lt-band{background:var(--neon);color:var(--purple);padding:clamp(3rem,7vw,5.5rem) var(--pad);text-align:center}
.lt-band h2.d{font-size:clamp(3rem,9vw,7rem);margin:0 0 1rem}
.lt-band p{max-width:40rem;margin:0 auto 1.8rem;font-size:1.1rem;font-weight:500}
.lt-band .btn-dark{background:var(--purple);color:#fff}
.lt-band .btn-line{background:transparent;color:var(--purple);border:1.5px solid rgba(46,2,76,.45)}

/* ── footer ──────────────────────────────────────────────────────────── */
.lt-footer{padding:2.6rem var(--pad) 2rem;border-top:1px solid rgba(255,255,255,.08);font-size:.86rem}
.lt-footer .footer-cols{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.lt-footer .footer-cols>div{display:flex;flex-direction:column;gap:.45rem}
.lt-footer .footer-col-title{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.55;margin:0 0 .3rem}
.lt-footer a{text-decoration:none;opacity:.85}
.lt-footer a:hover{opacity:1;text-decoration:underline}
.lt-footer-utility{max-width:1100px;margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;opacity:.6}
.lt-footer-utility nav{display:flex;gap:1.2rem}
@media(max-width:560px){.lt-footer .footer-cols{grid-template-columns:1fr}}

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes slam{0%{transform:translateY(.3em) skewX(-6deg) scale(.86);opacity:0}60%{transform:translateY(-.04em) skewX(2deg) scale(1.04);opacity:1}100%{transform:none;opacity:1}}
.verdict.pop .d{animation:slam .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.verdict[data-band=clear] .d{animation-name:slam}
@media(prefers-reduced-motion:reduce){.verdict.pop .d{animation:none}.btn:hover{transform:none}.slider input[type=range]:active::-webkit-slider-thumb{transform:none}}

/* ── The Rights Builder ──────────────────────────────────────────────── */
.rb-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
/* This rule comes after the .lt-grid media query and has the same specificity,
   so without its own breakpoint it kept two columns on a phone. Found by eye
   at 390px; the overflow measurement missed it because minmax(0,…) shrinks. */
@media(max-width:940px){.rb-grid{grid-template-columns:1fr}}
.rb-form{display:flex;flex-direction:column;gap:1.7rem}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.55rem}
.chips legend{width:100%;margin-bottom:.55rem;padding:0;display:flex;flex-direction:column;gap:.15rem}
.chips legend .d{font-size:1.45rem;line-height:1}
.chips legend .hint{font-size:.8rem;opacity:.6}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);font-size:.9rem;font-weight:600;cursor:pointer;user-select:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s cubic-bezier(.2,.9,.3,1.4)}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:hover{border-color:#fff;transform:translateY(-1px)}
.chip.on{background:var(--neon);border-color:var(--neon);color:var(--purple)}
.chip:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:3px}

.rb-stage{position:sticky;top:1.2rem}
@media(max-width:940px){.rb-stage{position:static}}
.verdict[data-band=modest] .d{color:var(--neon)}
.verdict[data-band=fair] .d{color:var(--peach)}
.verdict[data-band=big] .d{color:var(--yellow)}
.verdict[data-band=everything] .d{color:var(--pink)}

.ask-meter{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.12);margin:.2rem 0 1.6rem}
.ask-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--grad);transition:width .45s cubic-bezier(.2,.9,.3,1)}
.ask-meter>span{position:absolute;top:16px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;font-weight:600}
.ask-meter>span:nth-of-type(1){left:0}.ask-meter>span:nth-of-type(2){left:18%}.ask-meter>span:nth-of-type(3){left:42%}.ask-meter>span:nth-of-type(4){right:0}

.clause{background:var(--purple-deep);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.2rem 1.35rem 1.3rem;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.clause-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}
.clause p{font-size:.95rem;line-height:1.55;margin:0 0 .75rem;opacity:.92}
.clause p:first-of-type{color:var(--pink)}
.clause p:last-of-type{margin-bottom:0;opacity:.7;font-size:.88rem}
.btn-sm{padding:.55rem 1rem;font-size:.8rem}

.tips{display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;line-height:1.5;opacity:.85}
.tips p{margin:0}
.tips p::before{content:"Worth knowing";display:inline-block;margin-right:.6rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--yellow);vertical-align:.08em}
.tips:empty{display:none}

/* ── The Disclosure Check ────────────────────────────────────────────── */
.dc-form{display:flex;flex-direction:column;gap:1.5rem}
.dc-field{display:flex;flex-direction:column;gap:.45rem}
.dc-field>label,.dc-field>.chips legend{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.45rem;line-height:1;letter-spacing:.005em}
.dc-field .hint{font-size:.8rem;opacity:.6;margin:0}
.dc-input,.dc-textarea{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.25);border-radius:14px;padding:.85rem 1rem;transition:border-color .18s}
.dc-input{min-height:48px}
.dc-textarea{min-height:11rem;resize:vertical;line-height:1.5}
.dc-input::placeholder,.dc-textarea::placeholder{color:rgba(255,255,255,.4)}
.dc-input:hover,.dc-textarea:hover{border-color:rgba(255,255,255,.6)}
.dc-input:focus-visible,.dc-textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-color:transparent}
.dc-toggle{display:flex;align-items:center;gap:.8rem;min-height:44px;cursor:pointer;font-size:.95rem;font-weight:600}
.dc-toggle input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;flex:none;cursor:pointer;transition:background .18s;margin:0}
.dc-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.2,.9,.3,1.4)}
.dc-toggle input:checked{background:var(--neon)}
.dc-toggle input:checked::after{transform:translateX(20px);background:var(--purple)}
.dc-toggle input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.verdict[data-band=buried] .d{color:var(--yellow)}
.verdict[data-band=unclear] .d{color:var(--peach)}
.verdict[data-band=missing] .d{color:var(--pink)}
.verdict[data-band=empty] .d{color:rgba(255,255,255,.4)}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.checks li{display:grid;grid-template-columns:2rem 1fr;gap:.2rem .8rem;align-items:start;padding:.85rem 1rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.checks .mark{grid-row:span 2;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;line-height:1;background:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.checks li[data-ok=true] .mark{background:var(--neon);color:var(--purple)}
.checks li[data-ok=false] .mark{background:var(--pink);color:var(--purple)}
.checks strong{font-size:.98rem;line-height:1.3}
.checks span:not(.mark){font-size:.86rem;opacity:.72;line-height:1.45}
.checks li[data-ok=null]{opacity:.7}

.fix{white-space:pre-wrap;font-size:.95rem;line-height:1.55;margin:0;opacity:.95}
.fix .lead-line{color:var(--neon);font-weight:700}
.clause[hidden]{display:none}

.dc-words{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
@media(max-width:700px){.dc-words{grid-template-columns:1fr}}
.dc-word{background:var(--purple-deep);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.2rem 1.3rem}
.dc-word h3{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin:0 0 .6rem;line-height:1}
.dc-word dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;font-size:.92rem}
.dc-word dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.6;padding-top:.2em}
.dc-word dd{margin:0;opacity:.9}
.dc-word dd.good{color:var(--neon)}
.dc-word dd.weak{color:var(--peach)}

/* ── The Brief Builder ───────────────────────────────────────────────── */
.verdict[data-band=blank] .d{color:rgba(255,255,255,.4)}
.verdict[data-band=start] .d{color:var(--pink)}
.verdict[data-band=half] .d{color:var(--peach)}
.verdict[data-band=nearly] .d{color:var(--yellow)}
.verdict[data-band=ready] .d{color:var(--neon)}
.bb-count{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.6;margin:-.4rem 0 0}
.bb-count b{color:var(--neon)}

.paper{background:#fff;color:#2a1740;border-radius:6px;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);position:relative;font-size:1rem;line-height:1.55}
.paper-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1rem;border-bottom:1px solid #e6e0ee;margin-bottom:1.2rem}
.paper-top img{height:18px;width:auto;display:block}
.paper-top small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8a7d99;text-align:right;line-height:1.4}
.paper h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.3rem);line-height:.95;margin:0 0 1rem;color:var(--purple);letter-spacing:.005em}
.paper p{margin:0 0 .8rem;max-width:60ch}
.paper h3{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8a7d99;margin:1.4rem 0 .35rem}
.paper h3 span{font-weight:500;letter-spacing:0;text-transform:none;color:#a99bb8;margin-left:.5rem}
.paper .sec{white-space:pre-wrap}
.gap{background:#ffe2ff;color:#7a1d8f;border-radius:4px;padding:.05em .35em;font-weight:600;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gap::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--electric);margin-right:.35em;vertical-align:.05em}
.paper-foot{margin-top:1.4rem;padding-top:.9rem;border-top:1px solid #e6e0ee;font-size:.78rem;color:#8a7d99}

.from-tool{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:start;padding:.85rem 1rem;border-radius:14px;background:rgba(169,246,0,.08);border:1px solid rgba(169,246,0,.35)}
.from-tool .eyebrow{color:var(--neon);opacity:1;grid-column:1}
.from-tool p{grid-column:1;margin:0;font-size:.9rem;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.from-tool button{grid-column:2;grid-row:1/span 2;align-self:center}
.from-tool[hidden]{display:none}
.bb-tools{display:flex;flex-direction:column;gap:.6rem}
.bb-tools:empty{display:none}
.bb-more{margin-top:.2rem}
.bb-more summary{cursor:pointer;font-weight:600;opacity:.75;list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.bb-more summary::before{content:"+";font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--neon)}
.bb-more[open] summary::before{content:"–"}
.bb-more summary::-webkit-details-marker{display:none}
.bb-more .dc-field{margin-top:.6rem}

/* the send panel is the site's real form, in the tools' clothes */
.send{background:var(--purple-deep);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:1.4rem 1.5rem 1.5rem;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.send[hidden]{display:none}
.send h3{font-family:var(--display);text-transform:uppercase;font-size:1.8rem;line-height:.95;margin:.2rem 0 .3rem}
.send>p{margin:0 0 1rem;opacity:.8;font-size:.95rem}
.send .form-fields{display:flex;flex-direction:column;gap:.9rem}
.send .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:600px){.send .form-row{grid-template-columns:1fr}}
.send .field{display:flex;flex-direction:column;gap:.35rem}
.send .field label{font-size:.8rem;font-weight:600;opacity:.8}
.send .dc-input[aria-invalid=true]{border-color:#ff5635;background:rgba(255,86,53,.1)}
.send .form-feedback{margin:0;font-size:.88rem;color:var(--yellow);min-height:1.2em}
.send .form-feedback:empty{display:none}
.send .form-note{margin:0;font-size:.8rem;opacity:.6}
.send .form-note a{color:#fff}
.send .form-actions{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:.2rem}
.form-success{display:none;flex-direction:column;gap:.8rem;align-items:flex-start}
.form-success .tick{width:56px;height:56px;border-radius:50%;background:var(--neon);color:var(--purple);display:grid;place-items:center;font-size:1.5rem;font-weight:700}
.form-success .d{font-size:1.6rem;margin:0}
.form-success p{margin:.2rem 0 0;opacity:.8}
.form.sent .form-success{display:flex}
.form.sent .form-fields{display:none}
.form-success .state-received,.form-success .state-fallback{display:none}
.form[data-state=received] .state-received{display:block}
.form[data-state=fallback] .state-fallback{display:block}
.form-success #editBrief{background:none;border:0;color:#fff;opacity:.7;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0}

@media print{
  body{background:#fff;color:#000}
  .lt-nav,.nav,.msheet,.footer,.skip,form#builderForm,.verdict,.verdict-sub,.bb-count,.lt-cta,.send,.lt-section,.lt-band,.lt-footer,.lt-hero::before,#cookies{display:none!important}
  .lt-hero{padding:0}
  .lt-grid{display:block}
  .paper{box-shadow:none;border:0;padding:0;color:#000}
  .gap{background:none;color:#7a1d8f;padding:0}
}

/* ── small screens ───────────────────────────────────────────────────── */
/* Measured at 371px in a real viewport. Three things pushed past the right
   edge (the verdict word, the clause's Copy button, the paper's corner label)
   and the footer links were 21 to 32px tall, which is a poor tap target. */
@media(max-width:560px){
  /* The verdict is one long word at a floor of 3.4rem. "Wrong language." and
     "Lost in the noise." ran off the screen. Let it get smaller here, and
     break rather than overflow if a future band is longer still. */
  .verdict .d{font-size:clamp(2.5rem,11.5vw,3.6rem);overflow-wrap:break-word;hyphens:auto}
  .lt-title{font-size:clamp(2.7rem,12vw,4rem);overflow-wrap:break-word}
  .lt-section h2.d,.lt-band h2.d{font-size:clamp(2rem,9vw,3rem);overflow-wrap:break-word}

  /* Stack the clause header so Copy sits under the label instead of beside it. */
  .clause{padding:1rem 1.05rem 1.1rem}
  .clause-head{flex-wrap:wrap;gap:.5rem}
  .btn-sm{min-height:44px}

  /* The paper's corner label had nowhere to shrink into. */
  .paper{padding:1.15rem 1.15rem 1.3rem}
  .paper-top{gap:.6rem}
  .paper-top small{font-size:.62rem;flex:0 1 auto;min-width:0}
  .paper h2{font-size:1.45rem}

  /* Tap targets: a 21px link is a miss on a phone. */
  .lt-footer a,.lt-footer-utility a{display:inline-flex;align-items:center;min-height:44px}
  .lt-nav>a:first-child{display:inline-flex;align-items:center;min-height:44px}
  .lt-footer .footer-cols>div{gap:0}
  .lt-share{padding:.75rem 0}
  .lt-cta{gap:.7rem}
  .lt-cta .btn{width:100%;justify-content:center}

  /* Word lists in the Disclosure Check are long; let them wrap under the label. */
  .dc-word dl{grid-template-columns:1fr;gap:.15rem}
  .dc-word dt{padding-top:.5rem}
  .figs{grid-template-columns:1fr 1fr}
  .ask-meter>span{font-size:.6rem}
}

/* ── /tools hub ──────────────────────────────────────────────────────── */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;max-width:1200px;margin:2.2rem auto 0}
.tool-card{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem 1.6rem 1.5rem;border-radius:22px;background:var(--purple-deep);border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),border-color .25s}
.tool-card::after{content:"";position:absolute;inset:auto -30% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(169,246,0,.22),transparent 70%);opacity:0;transition:opacity .3s}
.tool-card:hover{transform:translateY(-4px);border-color:rgba(169,246,0,.5)}
.tool-card:hover::after{opacity:1}
.tool-card .eyebrow{opacity:.55}
.tool-card h2{font-size:clamp(2rem,3.2vw,2.8rem);margin:0}
.tool-card p{margin:0;opacity:.8;font-size:.95rem;line-height:1.5;max-width:34ch}
.tool-card .go{margin-top:auto;padding-top:.6rem;font-weight:700;color:var(--neon)}
.tool-card.ext .go{color:var(--pink)}

/* Discovery leads the hub: one card the full width of the grid, the argument on
   the left and the three facts the brief allows on the right. The whole card is
   the link; the button inside is a span so the anchor stays valid. */
.tool-card.featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  max-width:1200px;margin:2.2rem auto 0;padding:clamp(1.8rem,3.2vw,2.8rem);
  background:linear-gradient(135deg,#2e024c 0%,#4a0a7a 42%,#8a1fd6 78%,#be43ff 100%);border-color:rgba(255,255,255,.2)}
.tool-card.featured::after{background:radial-gradient(circle,rgba(169,246,0,.3),transparent 70%);opacity:.6}
.tool-card.featured>div:first-child{display:flex;flex-direction:column;gap:.9rem;position:relative;z-index:1}
.tool-card.featured h2{font-size:clamp(2.6rem,5vw,4.2rem);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
.tool-card.featured p{max-width:46ch;font-size:clamp(1rem,1.3vw,1.12rem);opacity:.86}
.tool-card.featured .btn{align-self:flex-start;margin-top:.4rem;line-height:1;padding-top:calc(1rem + .08em);padding-bottom:calc(1rem - .06em)}
.tool-card.featured:hover .btn{filter:brightness(1.06)}
.feat-facts{display:grid;gap:.75rem;position:relative;z-index:1}
.feat-fact{padding:.95rem 1.1rem;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.feat-fact b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1;text-transform:uppercase;color:var(--neon);padding-top:.08em}
.feat-fact span{display:block;margin-top:.35rem;font-size:.85rem;opacity:.78}
.tools-grid{margin-top:1.2rem}
@media(max-width:760px){.tool-card.featured{grid-template-columns:1fr}.feat-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.feat-fact b{font-size:1.2rem}}
@media(max-width:520px){.feat-facts{grid-template-columns:1fr}}

/* ── 2026 identity (Fixgu brand book) ───────────────────────────────────
   Type roles: Roc Grotesk Condensed for statements, numbers, small labels and buttons;
   Instrument Sans semibold, sentence case, for content headings. Grain gradient behind the page. */
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1rem}
.lt-nav .btn{font-size:.9rem}
.paper h2,.dc-word h3,.send h3,.tool-card h2{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.015em;line-height:1.1}
.tool-card h2{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.paper h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.send h3{font-size:1.5rem}
.dc-word h3{font-size:1.35rem}
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(135deg,#2e024c 0%,#3d0866 55%,#6a12b5 100%);pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");background-size:180px 180px}
@media print{body::before,body::after{display:none}}

/* shared nav pill is fixed at the top: start the tool below it */
.tool-page .lt-hero{padding-top:clamp(6.2rem,9vw,7.6rem)}
.tool-page .nav{color:#fff}
/* Roc Grotesk ships in one weight (Condensed Bold): every display use declares it, so nothing falls back to a synthesised 400. */
.slider output,.towers .pct,.checks .mark,.lt-fineprint summary::before,.bb-more summary::before,.dc-word h3,.paper h2,.send h3,.dc-field>label,.dc-field>.chips legend{font-weight:700}
.tool-page input,.tool-page select,.tool-page textarea,.tool-page button{font-family:inherit}
/* optical centring of Roc caps in the pills (see the same note in v4.html) */
.btn{line-height:1;padding-top:calc(1rem + .08em);padding-bottom:calc(1rem - .06em)}
.lt-nav .btn{padding-top:calc(.7rem + .08em);padding-bottom:calc(.7rem - .06em)}

/* ── The Rate Check & The Follower Check ─────────────────────────────── */
/* Numeric forms in two or three columns: the display-face labels of the
   Disclosure Check are too loud at this density, so these use the body face. */
.er-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem 1rem}
.dc-form .er-field>label{font-family:var(--body);font-weight:600;font-size:.92rem;text-transform:none;letter-spacing:0;line-height:1.3}
.er-field .dc-input{font-variant-numeric:tabular-nums}
.er-field .hint{font-size:.76rem}
.figs-2x2{grid-template-columns:repeat(2,minmax(0,1fr))}

.verdict[data-band=within] .d,.verdict[data-band=adds] .d{color:var(--neon)}
.verdict[data-band=above] .d,.verdict[data-band=look] .d{color:var(--yellow)}
.verdict[data-band=below] .d,.verdict[data-band=off] .d{color:var(--pink)}

/* the rail: the working range as a lit band, the rate as a pin */
.rail-box{background:var(--purple-deep);border-radius:22px;padding:1.2rem 1.3rem 1.1rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.rail-box .eyebrow{opacity:.75;margin:0 0 2.4rem;line-height:1.45}
.rail{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.12);margin:0 .9rem 2rem}
.rail-band{position:absolute;top:0;bottom:0;left:var(--lo,0%);width:calc(var(--hi,0%) - var(--lo,0%));border-radius:999px;background:var(--grad);opacity:.85;transition:left .45s cubic-bezier(.2,.9,.3,1),width .45s cubic-bezier(.2,.9,.3,1)}
.rail-pin{position:absolute;top:50%;left:var(--pos,0%);transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--purple);box-shadow:0 0 0 3px var(--neon),0 6px 22px rgba(0,0,0,.4);transition:left .45s cubic-bezier(.2,.9,.3,1)}
.rail-pin span{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1;color:var(--neon);white-space:nowrap;text-transform:uppercase;font-variant-numeric:tabular-nums}
.rail .tick{position:absolute;top:calc(100% + 8px);transform:translateX(-50%);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-weight:600;white-space:nowrap;transition:left .45s cubic-bezier(.2,.9,.3,1)}
.rail .tick-lo{left:var(--lo,0%)}
.rail .tick-hi{left:var(--hi,0%)}

/* the checks list gains a value line and a third, yellow, state */
.checks strong em{display:block;font-style:normal;font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1;text-transform:uppercase;color:var(--neon);margin-top:.25rem;font-variant-numeric:tabular-nums}
.checks li[data-state=warn] strong em{color:var(--yellow)}
.checks li[data-state=fail] strong em{color:var(--pink)}
.checks li[data-state=skip] strong em{color:rgba(255,255,255,.4)}
.checks li[data-ok=warn] .mark{background:var(--yellow);color:var(--purple)}

/* the score meter: three labels, the middle one centred on 50 */
.ask-meter.score>span:nth-of-type(2){left:50%;transform:translateX(-50%)}
.ask-meter.score>span:nth-of-type(3){left:auto;right:0}

@media(max-width:560px){
  .er-row{grid-template-columns:1fr 1fr}
  .rail-box .eyebrow{margin-bottom:2.2rem}
  .rail-pin span{font-size:1.15rem}
}

/* the "@handle → fetch" row (Instagram only; hidden on other platforms) */
.er-lookup[hidden]{display:none}
.er-lookup-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.er-lookup-row .at{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1;color:var(--neon);padding-left:.1rem}
.er-lookup-row .dc-input{flex:1 1 12rem;min-width:0}
.er-lookup-row .btn{white-space:nowrap;min-height:48px}
.er-lookup-row .btn:disabled{opacity:.55;cursor:wait;transform:none}
.lookup-status{font-size:.82rem;line-height:1.45;margin:.15rem 0 0;opacity:.9}
.lookup-status[hidden]{display:none}
.lookup-status[data-tone=good]{color:var(--neon)}
.lookup-status[data-tone=bad]{color:var(--peach)}
@media(max-width:560px){.er-lookup-row .btn{width:100%;justify-content:center}}

/* the eyebrow can carry one link back to the hub */
.lt-hero .eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.lt-hero .eyebrow a:hover{color:var(--neon);text-decoration-color:currentColor}

/* Inputs on one line whatever the label does: each field lends its rows
   (label / input / hint) to the row grid, so a two-line label only makes the
   label row taller. Labels hug their input from below; hints hang under it. */
@supports (grid-template-rows: subgrid){
  .er-row .er-field{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:.45rem 0;align-items:start}
  .er-row .er-field>label{align-self:end}
}

/* ── The Reach Check ─────────────────────────────────────────────────── */
.verdict[data-band=noise] .d{color:var(--pink)}
.verdict[data-band=dent] .d{color:var(--peach)}
.verdict[data-band=campaign] .d{color:var(--neon)}
.verdict[data-band=wave] .d{color:var(--yellow)}

.cr-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.cr-head>span:first-child{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.45rem;line-height:1;letter-spacing:.005em}
.cr-head .hint{margin:0}
.cr-rows{display:flex;flex-direction:column;gap:.55rem}
.cr-row{display:grid;grid-template-columns:1.1fr 1.35fr .7fr 1.1fr auto;gap:.5rem;align-items:center}
.cr-row .dc-input{min-height:46px;padding:.6rem .8rem;font-size:.95rem;font-variant-numeric:tabular-nums}
.cr-row select.dc-input{appearance:none;-webkit-appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right .8rem center}
.cr-row select.dc-input option{color:#2e024c;background:#fff}
.cr-row .dc-input:disabled{opacity:.35;cursor:not-allowed}
.cr-remove{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;flex:none;transition:border-color .18s,color .18s}
.cr-remove:hover{border-color:var(--pink);color:var(--pink)}
.cr-remove:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
#addCreator{align-self:flex-start;margin-top:.2rem}

.funnel{display:flex;flex-direction:column;gap:.85rem;background:var(--purple-deep);border-radius:22px;padding:1.2rem 1.3rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.funnel-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto;grid-template-areas:"lab bar val";gap:.5rem .9rem;align-items:center}
.funnel-lab{grid-area:lab;font-size:.85rem;font-weight:600;line-height:1.3}
.funnel-lab small{display:block;font-weight:400;opacity:.6;font-size:.72rem;line-height:1.35}
.funnel-bar{grid-area:bar;display:block;height:14px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.funnel-bar::after{content:"";position:absolute;inset:0;width:var(--w,0%);border-radius:999px;background:var(--pink);opacity:.9;transition:width .45s cubic-bezier(.2,.9,.3,1)}
.funnel-row.hot .funnel-bar::after{background:var(--grad);opacity:1}
.funnel-row b{grid-area:val;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.funnel-row.hot b{color:var(--neon)}
.estimate{font-size:.82rem;line-height:1.45;opacity:.85;margin:-.2rem 0 0;padding:.7rem .9rem;border-radius:12px;background:rgba(247,248,0,.07);border:1px solid rgba(247,248,0,.25)}

@media(max-width:700px){
  .cr-row{grid-template-columns:1fr 1fr auto;grid-template-areas:"f fm x" "p v x"}
  .cr-row [name=followers]{grid-area:f}.cr-row [name=format]{grid-area:fm}.cr-row [name=posts]{grid-area:p}.cr-row [name=views]{grid-area:v}.cr-remove{grid-area:x}
  .funnel-row{grid-template-columns:1fr auto;grid-template-areas:"lab val" "bar bar"}
}