/* Positioning Statement Builder — tool styles.
 * CONSUMES /css/tokens.css. Declares no tokens of its own.
 * Base cloned from why-they-ghost / deal-reality-check so every BigLeaps tool
 * renders as one family; additions for this tool are at the bottom, marked. */

*{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 ----------------------------------------------------------- */
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 .logo{height:44px;width:auto;display:block}
.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 & fields ------------------------------------------------------ */
.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}
.nav-back{margin-top:22px;background:none;border:none;font-family:var(--sans);font-size:.85rem;color:var(--body);cursor:pointer;padding:4px 0;display:block}
.nav-back:hover{color:var(--green-dk);text-decoration:underline}
.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;text-decoration:none}
.btn:hover{background:var(--green-dk);text-decoration:none}
.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}

/* --- teaser / reveal --------------------------------------------------------- */
.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}
.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)}

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}

/* --- the one / handoff ------------------------------------------------------- */
.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}
.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)}

@media(max-width:640px){
  .one,.handoff{padding:22px 20px}
  .nav-cta{font-size:.78rem}
  .nav-cta .nav-cta-full{display:none}
}

/* ==========================================================================
   Additions for the Positioning Statement Builder
   ========================================================================== */

/* live assembled preview above the problem input */
.preview-line{background:var(--tint);border:1px solid #dfe9d4;border-radius:6px;padding:14px 17px;font-family:var(--serif);font-size:1.08rem;color:var(--ink);line-height:1.4;margin-bottom:20px}
.preview-line em{color:var(--body);font-style:italic}

/* emotional-word chips (multi-select, max 2) */
.emochips{display:flex;gap:9px;flex-wrap:wrap}
.emochip{padding:10px 18px;border:1.5px solid var(--line);border-radius:99px;background:var(--paper);font-family:var(--sans);font-size:.94rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.14s}
.emochip:hover{border-color:var(--green-lt);background:var(--tint)}
.emochip.on{background:var(--green);border-color:var(--green);color:#fff}
.emochip:focus-visible{outline:none;border-color:var(--green-lt);box-shadow:0 0 0 3px rgba(124,179,66,.2)}

/* masked teaser blocks */
.mask{color:var(--green-lt);letter-spacing:1px;opacity:.75}

/* result page: the three statement cards */
.stmts{display:grid;gap:14px;margin-bottom:8px}
.stmt{background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--green);border-radius:0 8px 8px 0;padding:22px 24px;position:relative}
.stmt .s-k{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dk);margin-bottom:8px}
.stmt .s-line{font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.45rem);color:var(--ink);line-height:1.3;padding-right:70px}
.copybtn{position:absolute;top:18px;right:16px;background:var(--tint);border:1px solid #dfe9d4;border-radius:5px;font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--green-dk);padding:6px 11px;cursor:pointer;transition:.14s}
.copybtn:hover{background:var(--green-lt);border-color:var(--green-lt);color:#fff}
.copybtn.done{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:640px){.stmt .s-line{padding-right:0}.copybtn{position:static;margin-top:12px}}

/* how-to-use rows */
.uses{list-style:none;display:grid;gap:2px}
.uses li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.uses li:last-child{border-bottom:none}
.uses .di{flex:none;width:12px;height:12px;transform:rotate(45deg);background:var(--green-lt);border-radius:2px;margin-top:7px}
.uses .u-name{font-weight:700;color:var(--ink);font-size:1rem}
.uses .u-how{font-size:.93rem;margin:3px 0 0}

/* inbox note on a fresh unlock */
.inbox{background:var(--tint);border:1px solid #dfe9d4;border-radius:6px;padding:13px 16px;font-size:.9rem;color:var(--ink);margin-bottom:24px}