/* FUC Money — shared styles for every tool page (hub + individual tools).
   The brand :root block plus the components each tool reuses. Page-specific
   layout (body, .wrap, .blob, hero, inputs unique to one tool) stays inline
   on each page. Linked AFTER /assets/site.css. */

:root{
  --paper:#EFE9FF;--ink:#15121F;--lime:#CBF53F;--coral:#FF5A4D;
  --violet:#6B38E8;--sky:#39B0FF;--card:#FFFFFF;
  --shadow:6px 6px 0 var(--ink);--shadow-lg:10px 10px 0 var(--ink);
}

/* marker highlight */
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.06em;height:.42em;background:var(--lime);z-index:-1;transform:rotate(-1.4deg);border-radius:2px}
.hl.coral::after{background:var(--coral);opacity:.85}

/* card + question copy */
.card{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:clamp(22px,4vw,30px);box-shadow:var(--shadow);margin-top:22px}
.q{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,24px);line-height:1.2;margin:6px 0 4px}
.hint{font-size:14px;opacity:.65;line-height:1.4;margin-bottom:14px}

/* text/number inputs */
input[type=number],input[type=text],input[type=email]{width:100%;font-family:'Inter',sans-serif;font-size:19px;padding:14px 16px;border:3px solid var(--ink);border-radius:13px;background:var(--paper);color:var(--ink);outline:none;font-weight:600}
input:focus{box-shadow:0 0 0 3px var(--lime)}
input[type=text],input[type=email]{font-weight:500}

/* primary CTA button */
.cta{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(19px,2.4vw,23px);background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:16px;padding:17px 28px;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s;width:100%;margin-top:8px}
.cta:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.cta:active{transform:translate(3px,3px);box-shadow:none}

/* result: verdict block */
.verdict{border:3px solid var(--ink);border-radius:20px;padding:clamp(24px,4vw,34px);box-shadow:var(--shadow-lg);color:#fff}
.verdict.there{background:var(--violet)}
.verdict.close{background:var(--sky)}
.verdict.gap{background:var(--ink)}
.verdict .tag{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;opacity:.85}
.verdict h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,5vw,44px);line-height:1;margin:10px 0 14px}
.verdict p{font-size:clamp(15px,2vw,18px);line-height:1.55;opacity:.97}
.verdict .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,9vw,72px);line-height:1;margin:4px 0}

/* result: reframe + mirror blocks */
.reframe{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin-top:14px}
.reframe .rk{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--violet);margin-bottom:8px}
.reframe p{font-size:16px;line-height:1.5}
.reframe .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(26px,5vw,38px);line-height:1;color:var(--coral)}
.mirror{background:var(--lime);border:3px solid var(--ink);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin-top:14px}
.mirror .rk{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;margin-bottom:8px}
.mirror p{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(18px,2.4vw,24px);line-height:1.25}

/* disclaimer */
.disc{font-family:'Space Grotesk',sans-serif;font-size:11px;opacity:.55;line-height:1.5;margin-top:24px;letter-spacing:.02em;text-align:center}

/* micro-line under a CTA, e.g. "no download, no signup" */
.ctahint{font-family:'Space Grotesk',sans-serif;font-size:11px;text-align:center;margin-top:8px;color:var(--ink);opacity:.65}

/* ============================================================
   The result template — three blocks every tool page ends with.
   01 number · 02 feeling · 03 one action (-> the app).
   ============================================================ */

/* 01 · Number — ink card, violet offset shadow, big figure. */
.b-number{background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:20px;padding:clamp(24px,4vw,34px);box-shadow:10px 10px 0 var(--violet);margin-top:22px}
.b-number .fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,9vw,68px);line-height:1}
.b-number .mech{font-size:13px;line-height:1.5;margin-top:12px;opacity:.85}

/* 02 · Feeling — lime card. The differentiator. */
.b-feeling{background:var(--lime);border:3px solid var(--ink);border-radius:20px;padding:clamp(22px,4vw,30px);box-shadow:var(--shadow);margin-top:16px}
.b-feeling .lbl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.7}
.b-feeling p{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;line-height:1.35;margin-top:10px}

/* 03 · One action — white card, single behavioural action to /look. */
.b-action{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:clamp(22px,4vw,30px);box-shadow:var(--shadow);margin-top:16px}
.b-action .lbl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.b-action .act{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(18px,2.4vw,22px);line-height:1.3;margin:10px 0 4px}

/* body prose — collapsed into accordions so the page stays light; the text is
   still in the DOM (search engines read it, readers expand it if they want). */
.prose{margin-top:clamp(32px,6vw,52px);max-width:64ch}
.prose-intro{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);opacity:.85;margin-bottom:4px}
.prose details{border-top:3px solid var(--ink)}
.prose details:last-of-type{border-bottom:3px solid var(--ink)}
.prose summary{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(17px,2.6vw,21px);line-height:1.2;letter-spacing:-.01em;cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;line-height:1;color:var(--violet)}
.prose details[open] summary::after{content:'–'}
.prose details p{font-size:16px;line-height:1.65;margin:0 0 14px;opacity:.92}
.prose details p:last-child{margin-bottom:18px}