/* The Fee Auditor quiz styles.
   PHASE 2 SKIN: every value in the tokens block below comes from
   DESIGN-BIBLE.md (exported from the live Webflow theme, Swiftform).
   Template swatches only; no invented colors. Elevation is flat (borders,
   not shadows), radii snap to the bible scale, Aspekta for UI, Geist Mono
   for every figure. Fonts are self-hosted in ./fonts, converted from the
   exact files the live site serves.

   INTENTIONAL ADDITIONS the template does not define, kept from the Phase 1
   UI audit (do not remove):
   - .btn[disabled] reduced-opacity state
   - :focus-visible outlines on all interactive elements
   - inline form error color (--err) + aria-invalid border
   - derived tints, not new hues: --muted (Black at 62% for secondary text
     on light surfaces) and --line-on-dark (white hairline on dark panels) */

@font-face{font-family:'Aspekta';src:url('fonts/aspekta-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/geistmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/geistmono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/geistmono-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/geistmono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* swatches (DESIGN-BIBLE.md section 1) */
  --primary:#98ffa1;
  --black:#050c0b;
  --white:#ffffff;
  --bg-base:#f1f1f1;
  --bg-soft:#e3edeb;
  --bg-inverse:#112522;
  --light:#c0ded9;
  --neutral-400:#c3cdcf;
  --bg-muted:#93afaa;
  --stroke:#e8e8e8;
  --stroke-subtle:#e5e5e5;
  --accent-purple:#e8d0ff;
  --accent-red:#ffc5c6;
  --accent-yellow:#ffedd4;
  /* component aliases */
  --bg:var(--bg-base);
  --card:var(--white);
  --ink:var(--black);
  --dark:var(--black);
  --mint:var(--primary);
  /* derived tints (see header note) */
  --muted:rgba(5,12,11,.62);
  --line-on-dark:rgba(255,255,255,.08);
  --err:#B4402F; /* audit addition: inline error state */
  /* radius scale (bible section 4) */
  --r-pill:50px;
  --r-circ:30px;
  --r-card:20px;
  --r-tile:16px;
  --r-chip:12px;
  --r-input:10px;
  --r-msg:8px;
  /* type (bible section 2) */
  --font:'Aspekta',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',monospace;
}
/* ============ end tokens block ============ */

*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* every number, rate, and dollar figure renders in Geist Mono */
.slider-row output,.stat .num,.o-save,.s-big .v,#rVol,#rEff,#rYr,#rKeep,
#aIC,#aMargin,#aGCost,#aTx,#aCh,.resid .v,#bonusV,.grade,.custom-rate input,#txCount,
.a-in input[type=number]{font-family:var(--font-mono);letter-spacing:0}

header{padding:18px 0;background:var(--dark)}
.header-in{max-width:1280px;margin:0 auto;padding:0 30px;display:flex;justify-content:space-between;align-items:center}
.wordmark{color:var(--white);font-weight:600;font-size:18px;letter-spacing:.01em}
/* nav CTA = the site's signature dark pill (Secondary Btn component):
   BG Inverse, Light text, mint icon circle with black icon */
.nav-cta{display:inline-flex;align-items:center;gap:10px;background:var(--bg-inverse);color:var(--light);border:none;border-radius:var(--r-pill);padding:6px 6px 6px 18px;font-weight:500;font-size:14px;font-family:var(--font);cursor:pointer;text-decoration:none}
.nav-cta .circ{width:28px;height:28px;border-radius:var(--r-circ);background:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--black)}

.wrap{max-width:1280px;margin:0 auto;padding:44px 30px 80px;display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}

.eyebrow{display:inline-block;background:var(--primary);color:var(--black);font-size:14px;line-height:1.4;font-weight:500;border-radius:var(--r-pill);padding:6px 14px;margin-bottom:16px}
h1{font-weight:500;font-size:54px;line-height:1;letter-spacing:-0.54px}
.sub{color:var(--muted);margin:12px 0 30px;font-size:16px;line-height:1.4;max-width:52ch}

/* coming-soon gate */
.coming{display:none;max-width:640px;margin:0 auto;padding:60px 24px}
.coming .card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-card);padding:40px 34px}
body.coming-on .wrap{display:none}
body.coming-on .coming{display:block}

/* wizard card (flat: border, no shadow, per bible section 7) */
.quiz{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-card);padding:28px;min-height:400px;display:flex;flex-direction:column;position:relative}
.quiz-top{display:flex;align-items:center;gap:14px;margin-bottom:20px;min-height:44px}
.steps{display:flex;gap:6px;flex:1}
.steps span{height:5px;flex:1;border-radius:var(--r-pill);background:var(--stroke)}
.steps span.done{background:var(--primary)}
.steps span.on{background:var(--black)}
.q-title{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-0.24px;margin:0 0 4px;outline:none}
.q-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.pane{display:none;flex:1;flex-direction:column}
.pane.on{display:flex}
.back{background:var(--white);border:1px solid var(--stroke-subtle);border-radius:var(--r-pill);font-size:16px;font-weight:500;color:var(--black);cursor:pointer;visibility:hidden;font-family:var(--font);min-height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.back:hover{border-color:var(--black)}
.back.show{visibility:visible}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.tile{border:1px solid var(--stroke);border-radius:var(--r-tile);background:var(--bg-base);padding:16px 14px;min-height:56px;cursor:pointer;text-align:left;font-size:16px;font-weight:500;font-family:var(--font);color:var(--black);overflow-wrap:break-word;min-width:0;transition:border-color .12s,background .12s,color .12s}
.tile:hover{border-color:var(--black)}
/* audit addition: visible focus */
.tile:focus-visible,button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.tile.selected{background:var(--black);color:var(--white);border-color:var(--black)}
.tile small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.tile .tile-icon{display:block;margin-bottom:8px}
.tile.selected small{color:var(--light)}
.more-link{margin-top:14px;background:none;border:none;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer;align-self:center;font-family:var(--font);min-height:44px;display:inline-flex;align-items:center;padding:0 12px}

.chips{display:flex;flex-direction:column;gap:10px}
.chip{border:1px solid var(--stroke);border-radius:var(--r-tile);background:var(--bg-base);padding:16px 18px;cursor:pointer;text-align:left;font-size:16px;font-weight:500;font-family:var(--font);color:var(--black)}
.chip small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.chip:hover{border-color:var(--black)}
.chip.selected{background:var(--black);color:var(--white);border-color:var(--black)}
.chip.selected small{color:var(--light)}

.slider-row{margin-bottom:22px}
.slider-row label{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:16px;margin-bottom:10px}
.slider-row output{background:var(--bg-soft);border-radius:var(--r-pill);padding:5px 14px;font-weight:600;font-size:16px}
input[type=range]{width:100%;accent-color:var(--black);height:28px}
.hint{font-size:14px;color:var(--muted);margin-top:6px}
.tx-row label{flex-wrap:wrap;gap:8px}
.tx-row input{width:140px;min-height:38px;padding:5px 14px;border:1px solid var(--stroke);border-radius:var(--r-pill);background:var(--white);font-size:16px;font-weight:600;text-align:right}
.tx-row input::placeholder{color:var(--muted);font-weight:400}
.know-rate button{background:none;border:none;font-size:14px;text-decoration:underline;cursor:pointer;color:var(--muted);font-family:var(--font);min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.custom-rate{display:none;margin-top:10px;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.custom-rate.open{display:flex}
.custom-rate input{width:96px;padding:9px;border:1px solid var(--stroke);border-radius:var(--r-input);font-size:16px;background:var(--white)}

/* Primary Button: black 50px pill; signature mint 40x40 icon circle */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:none;border-radius:var(--r-pill);padding:4px 4px 4px 28px;min-height:48px;font-weight:500;font-size:18px;line-height:1.4;cursor:pointer;font-family:var(--font);text-decoration:none}
.btn .circ{width:40px;height:40px;border-radius:var(--r-circ);background:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--black);flex-shrink:0}
.btn-dark{background:var(--bg-inverse);color:var(--light);width:100%}
.btn-outline{background:transparent;border:1px solid var(--stroke-subtle);color:var(--black);padding:12px 32px}
/* audit addition: disabled state */
.btn[disabled]{opacity:.55;pointer-events:none}

/* results */
.res-lead{font-size:16px;color:var(--muted)}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px}
.stat{border-radius:var(--r-tile);padding:20px 18px}
.stat .num{font-weight:600;font-size:32px;line-height:1.2}
.stat .lbl{font-size:14px;font-weight:500;margin-top:8px}
.stat.pay{background:var(--accent-red);color:var(--black)}
.stat.keep{background:var(--primary);color:var(--black)}

.opt{border:1px solid var(--stroke);border-radius:var(--r-tile);padding:18px;margin-bottom:10px;background:var(--card)}
.opt .o-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:16px}
/* savings figures ride on mint, always with black text */
.opt .o-save{font-weight:500;white-space:nowrap;background:var(--primary);color:var(--black);border-radius:var(--r-chip);padding:4px 12px;font-size:14px}
.opt small{display:block;font-size:14px;color:var(--muted);margin-top:8px}
.opt.best{background:var(--black);border-color:var(--black);color:var(--white)}
.opt.best small{color:var(--light)}
.tag{display:inline-block;background:var(--primary);color:var(--black);font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:3px 10px;margin-left:8px;vertical-align:middle}

.mini-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 10px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;padding-left:4px}
.field input{width:100%;padding:12px 16px;border:1px solid var(--stroke);border-radius:var(--r-input);font-size:16px;font-family:var(--font);background:var(--white)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.f-err{display:none;font-size:14px;color:var(--err);margin:6px 0 0 4px}
.f-err.show{display:block}
.consent{font-size:14px;color:var(--muted);margin:0 0 12px;padding-left:4px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .btn{flex:1}
.upload-note{font-size:14px;color:var(--muted);margin-top:12px;text-align:center}
.upload-note b{color:var(--black);font-weight:600}
.trust{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}

/* live summary (right column) */
.sum-wrap{position:sticky;top:20px}
.sum{background:var(--black);border-radius:var(--r-card);padding:26px 24px;color:var(--white)}
.sum .s-eyebrow{display:inline-block;background:var(--bg-inverse);color:var(--light);font-size:14px;font-weight:500;border-radius:var(--r-pill);padding:5px 14px;margin-bottom:16px}
.s-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line-on-dark)}
.s-line .k{color:var(--light)}
.s-line .v{font-weight:500;text-align:right}
.s-big{margin-top:18px}
.s-big .k{font-size:14px;color:var(--light);font-weight:500}
.s-big .v{display:inline-block;font-weight:600;font-size:24px;line-height:1.2;margin-top:6px;border-radius:var(--r-chip);padding:4px 12px}
.s-big .v.loss{background:var(--accent-red);color:var(--black)}
.s-big .v.gain{background:var(--primary);color:var(--black)}
.s-note{font-size:14px;color:var(--light);margin-top:16px;line-height:1.4}

/* agent panel */
.agent{display:none;margin-top:20px;background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-card);padding:20px;font-size:14px}
body.agent-on .agent{display:block}
.agent h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.grade{font-size:18px;font-weight:600;border-radius:var(--r-input);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center}
.grade.A{background:var(--primary);color:var(--black)}
.grade.B{background:var(--accent-yellow);color:var(--black)}
.grade.C{background:var(--bg-soft);color:var(--black)}
.grade.PASS{background:var(--accent-red);color:var(--black);font-size:12px}
.grade-note{display:none;background:var(--accent-red);color:var(--black);border-radius:var(--r-msg);padding:8px 12px;font-size:14px;font-weight:500;margin:-4px 0 12px}
.grade-note.show{display:block}
.a-grid{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin-bottom:14px}
.a-grid .k{color:var(--muted)}
.a-grid .v{text-align:right;font-weight:500}
.a-sec{border-top:1px solid var(--stroke);padding-top:12px;margin-top:4px}
.a-sec b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.a-in{display:flex;justify-content:space-between;align-items:center;padding:3px 0;gap:8px}
.a-in input{width:76px;padding:5px 8px;font-size:13px;border:1px solid var(--stroke);border-radius:var(--r-msg);text-align:right;background:var(--white)}
.a-in input[type=range]{width:110px;padding:0;border:none;accent-color:var(--black)}
.resid{background:var(--primary);color:var(--black);border-radius:var(--r-tile);padding:14px 16px;margin-top:12px}
.resid .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.resid .v{font-size:22px;font-weight:600;margin-top:2px}
.bonus-row{display:flex;justify-content:space-between;font-weight:500}
.bonus-track{height:6px;border-radius:var(--r-pill);background:var(--stroke);margin-top:8px;overflow:hidden}
.bonus-bar{height:100%;width:0;border-radius:var(--r-pill);background:var(--bg-inverse);transition:width .2s}
.bonus-note{font-size:14px;color:var(--muted);margin-top:6px}

/* type scale per bible breakpoints */
@media(max-width:991px){
  h1{font-size:44px;letter-spacing:-0.40px}
  .q-title{font-size:22px;letter-spacing:-0.22px}
  .stat .num{font-size:28px}
}
@media(max-width:767px){
  h1{font-size:36px;letter-spacing:-0.36px}
  .q-title{font-size:20px;letter-spacing:-0.20px}
  .stat .num{font-size:26px}
  .s-big .v{font-size:22px}
}
@media(max-width:479px){
  h1{font-size:30px;letter-spacing:-0.30px}
  .q-title{font-size:18px;letter-spacing:-0.18px}
  .btn{font-size:16px}
  .stat .num{font-size:22px}
}

/* layout breakpoints */
@media(max-width:991px){
  .wrap{padding-left:24px;padding-right:24px}
  .header-in{padding:0 24px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .wrap{grid-template-columns:1fr;gap:24px;padding-top:26px}
  .sum-wrap{display:none}
  body.agent-on .sum-wrap{display:block;position:static}
  header{padding:14px 0}
  .quiz{min-height:0;padding:22px}
  .stat-cards{grid-template-columns:1fr}
}
body.agent-on .sum-wrap{position:static}
@media(max-width:767px){
  .wrap{padding-left:20px;padding-right:20px}
  .header-in{padding:0 20px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .mini-form{grid-template-columns:1fr}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
}
@media(max-width:479px){
  .wrap{padding-left:16px;padding-right:16px}
  .header-in{padding:0 16px}
  .quiz{padding:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{padding:12px 10px;font-size:14px}
  .tile small{font-size:12px}
  .chip{padding:14px}
  .btn{padding:4px 4px 4px 20px}
  .btn .circ{width:36px;height:36px}
  .slider-row output{font-size:14px}
}
@media(max-width:400px){
  .wordmark{font-size:16px}
  .nav-cta{padding:5px 5px 5px 12px;font-size:13px}
  .o-head{flex-wrap:wrap}
  .stat .num{font-size:20px}
}