/* The Deal Reality Check — tool styles.
 * CONSUMES /css/tokens.css. Declares no tokens of its own. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--body);background:var(--off);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.14}
p{margin-bottom:1rem}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow);margin:0 auto}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:14px}

/* --- site chrome: this is a page of the site, not a floating card --------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:9px}
.nav-logo .mark{width:22px;height:22px;display:block}
.nav-logo .wm{font-family:var(--serif);font-size:1.5rem;color:var(--green-dk);line-height:1;letter-spacing:-.01em}
.nav-cta{font-size:.85rem;font-weight:600;color:var(--ink)}
footer{padding:34px 0;background:var(--ink);color:#c7cdc0;font-size:.82rem}
footer .f-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer strong{color:#fff}
footer a{color:var(--green-lt)}

/* --- stage ---------------------------------------------------------------- */
main{padding:48px 0 72px;min-height:70vh}
.stage{background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 40px rgba(26,26,26,.07);padding:38px 40px 34px}
@media(max-width:640px){.stage{padding:26px 22px 24px;border-radius:8px}main{padding:26px 0 46px}}

.step{animation:enter .22s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.step{animation:none}}

/* --- intro ---------------------------------------------------------------- */
.intro h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:16px}
.intro h1 .accent{color:var(--green-dk)}
.intro .lede{font-size:1.1rem;color:var(--ink);max-width:56ch}
.intro .terms{display:flex;gap:26px;flex-wrap:wrap;margin:26px 0 30px;font-size:.87rem}
.intro .terms span{display:flex;align-items:center;gap:8px}
.intro .terms .di{width:13px;height:13px;transform:rotate(45deg);background:var(--green-lt);border-radius:2px;flex:none}

/* --- progress ------------------------------------------------------------- */
.prog{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.prog-track{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--green-lt);border-radius:2px;transition:width .28s ease}
.prog-label{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--body);white-space:nowrap}

/* --- questions ------------------------------------------------------------ */
.q h2{font-size:clamp(1.35rem,2.9vw,1.85rem);margin-bottom:10px}
.q .help{font-size:.92rem;color:var(--body);margin-bottom:26px}
.opts{display:grid;gap:10px}
.opt{display:block;width:100%;text-align:left;padding:15px 18px;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.14s}
.opt:hover{border-color:var(--green-lt);background:var(--tint)}
.opt:focus-visible{outline:none;border-color:var(--green-lt);box-shadow:0 0 0 3px rgba(124,179,66,.2)}
.opt .o-sub{display:block;font-weight:400;font-size:.85rem;color:var(--body);margin-top:2px}
.nav-back{margin-top:22px;background:none;border:none;font-family:var(--sans);font-size:.85rem;color:var(--body);cursor:pointer;padding:4px 0}
.nav-back:hover{color:var(--green-dk);text-decoration:underline}

/* --- context form --------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:5px;font-family:var(--sans);font-size:.97rem;color:var(--ink);background:var(--paper);transition:.15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--green-lt);box-shadow:0 0 0 3px rgba(124,179,66,.15)}
.field .hint{font-size:.8rem;color:var(--body);margin-top:5px}
.btn{display:inline-block;padding:14px 30px;border:none;border-radius:5px;background:var(--green);color:#fff;font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;transition:.16s}
.btn:hover{background:var(--green-dk)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-wide{width:100%}
.err{display:none;background:var(--danger-bg);border:1px solid var(--danger);color:#8f2c22;font-size:.86rem;padding:10px 12px;border-radius:5px;margin-bottom:14px}
.err.show{display:block}

/* --- result --------------------------------------------------------------- */
.verdict{text-align:center;padding:8px 0 4px;border-bottom:1px solid var(--line);margin-bottom:28px}
.verdict .name{font-family:var(--serif);font-size:clamp(2.1rem,5.4vw,3.4rem);color:var(--green-dk);line-height:1.06;margin-bottom:12px}
.verdict .claim{font-size:1.12rem;color:var(--ink);font-weight:600;max-width:44ch;margin:0 auto 20px}
.verdict .tally{display:inline-flex;align-items:center;gap:9px;background:var(--tint);color:var(--green-dk);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:3px;margin-bottom:24px}

/* diamond */
.diamond{width:186px;margin:0 auto 22px;display:block}
.diamond .path{fill:none;stroke:var(--line);stroke-width:2}
.diamond .bag{fill:var(--paper);stroke:var(--line);stroke-width:2}
.diamond .bag.on{fill:var(--green-lt);stroke:var(--green-dk)}
.diamond .bag.here{fill:var(--green-dk);stroke:var(--green-dk)}
.diamond .lbl{font-family:var(--sans);font-size:8.5px;font-weight:700;fill:var(--body)}
.diamond .lbl.here{fill:var(--green-dk)}

.reveal{background:var(--off);border-left:3px solid var(--green);padding:20px 22px;border-radius:0 6px 6px 0;margin-bottom:28px}
.reveal .line{font-family:var(--serif);font-size:clamp(1.2rem,2.7vw,1.55rem);color:var(--ink);line-height:1.24;margin-bottom:8px}
.reveal .sub{font-size:.94rem;margin:0}
.reveal.match{border-left-color:var(--green-lt)}
.reveal.under{border-left-color:var(--green-lt)}

.body-copy{font-size:1.02rem;color:var(--ink);max-width:62ch;margin-bottom:30px}

h3.sec{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--body);padding-bottom:9px;border-bottom:1px solid var(--line);margin:34px 0 18px}

/* fiction flags */
.flags{list-style:none;display:grid;gap:2px}
.flags li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.flags li:last-child{border-bottom:none}
.flags .di{flex:none;width:14px;height:14px;transform:rotate(45deg);background:var(--danger);border-radius:2px;margin-top:6px;opacity:.85}
.flags li.unsure .di{background:var(--warn)}
.flags .f-name{font-weight:700;color:var(--ink);font-size:1rem;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.flags .tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px;background:var(--danger-bg);color:#8f2c22}
.flags li.unsure .tag{background:var(--warn-bg);color:#8a660a}
.flags .f-why{font-size:.93rem;margin:3px 0 0}
.clean{background:var(--tint);border-radius:6px;padding:20px 22px;color:var(--ink);font-size:.98rem}

/* the one thing */
.one{background:var(--ink);color:#fff;border-radius:8px;padding:28px 30px}
.one .k{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green-lt);margin-bottom:12px}
.one h3{font-family:var(--serif);color:#fff;font-size:1.5rem;margin-bottom:12px}
.one p{color:#d7ddd0;font-size:1rem;margin:0;max-width:60ch}

/* price gate */
.price{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;padding:20px 22px;margin-top:22px;background:var(--warn-bg)}
.price.strong{border-left-color:var(--danger);background:var(--danger-bg)}
.price h4{font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:7px}
.price p{font-size:.95rem;margin:0}

/* --- unlock gate ---------------------------------------------------------- */
.gate{background:var(--off);border:1px solid var(--line);border-radius:8px;padding:28px 30px;margin-top:34px}
.gate h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:8px}
.gate .g-lede{font-size:1rem;color:var(--ink);max-width:56ch}
.locked{position:relative;margin-top:22px}
.locked .blur{filter:blur(5px);opacity:.42;pointer-events:none;user-select:none}
.consent{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:15px 17px;font-size:.86rem;margin:18px 0}
.consent strong{color:var(--ink)}
.checks{display:grid;gap:11px;margin:18px 0 20px}
.checks label{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink);cursor:pointer}
.checks input{margin-top:4px;width:16px;height:16px;accent-color:var(--green);flex:none}
.checks .c-sub{display:block;font-size:.84rem;color:var(--body)}

/* result-email pointer (shown once the server confirms the send) */
.mailnote{background:var(--off);border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:.88rem;color:var(--body);margin:0 0 22px}
.mailnote strong{color:var(--ink)}

/* --- fit-call booking panel (walkthrough box ticked) ----------------------- */
.book{background:var(--tint);border:2px solid var(--green-lt);border-radius:8px;padding:26px 28px;margin:6px 0 30px}
.book .b-k{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk);margin-bottom:10px}
.book h3{font-family:var(--serif);font-size:1.45rem;color:var(--ink);margin-bottom:10px}
.book p{font-size:.97rem;color:var(--ink);max-width:58ch;margin-bottom:16px}
.book .btn{margin:0}
.book .b-fine{font-size:.82rem;color:var(--body);margin:14px 0 0}

/* --- handoff -------------------------------------------------------------- */
.handoff{background:var(--ink);color:#d7ddd0;border-radius:8px;padding:34px 36px;margin-top:34px}
.handoff .eyebrow{color:var(--green-lt)}
.handoff h3{font-family:var(--serif);color:#fff;font-size:clamp(1.5rem,3.1vw,2rem);margin-bottom:14px}
.handoff p{max-width:60ch}
.handoff .btn{margin-top:10px}
.handoff .fine{font-size:.84rem;color:#9aa393;margin:14px 0 0}

.share{text-align:center;margin-top:30px;font-size:.9rem;color:var(--body)}
.restart{background:none;border:none;font-family:var(--sans);font-size:.9rem;color:var(--green);cursor:pointer;text-decoration:underline;padding:0}

@media(max-width:640px){
  .one,.handoff,.gate{padding:22px 20px}
  .verdict .name{font-size:2rem}
  /* The nav wraps to two lines on a phone and pushes the card down. Drop the
     programme name; the logo and the domain carry the identity on their own. */
  .nav-cta{font-size:.78rem}
  .nav-cta .nav-cta-full{display:none}
  .diamond{width:168px}
}