/* The Toolkit: Taste Network lead magnet.
   The look is the Revenue Gap Calculator's (gold on paper, Cormorant Garamond for the
   big lines, DM Sans for the reading, DM Mono for the small caps), so the three tools
   feel like one product. One light look, on purpose (Brady, 14 Oct: "not dark themes"). */
:root{
  color-scheme:light;
  --gold:#B8860B;--gold-soft:#D4A843;--gold-dim:rgba(184,134,11,.08);--gold-border:rgba(184,134,11,.3);
  --ink:#1a1815;--ink-soft:#55504a;--ink-faint:#8a8378;
  --paper:#ffffff;--paper-warm:#faf8f4;--line:rgba(26,24,21,.1);--line-soft:rgba(26,24,21,.06);
  --good:#2f7d4f;--bad-bg:#fdf2f2;--bad-line:#e8c4c4;--bad-ink:#8c2f2f;
  --code-bg:#1a1815;--code-ink:#f4efe4;--code-lbl:#D4A843;
  --hero-a:#1a1815;--hero-b:#2a2620;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;background:var(--paper);color:var(--ink);min-height:100dvh;line-height:1.55;-webkit-font-smoothing:antialiased;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
a{color:var(--gold)}
img{max-width:100%}

.shell{max-width:620px;margin-inline:auto;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.shell.wide{max-width:900px}
header.top{padding-block:22px 0}
.brand{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.brand-mark{width:22px;height:22px;flex-shrink:0}
.brand-name{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.brand-name a{color:inherit;text-decoration:none}
main{flex:1;padding-block:30px 24px;display:flex;flex-direction:column}
footer.foot{text-align:center;padding-block:20px}
footer.foot p{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;opacity:.8}

.stage{display:none;animation:fade .45s ease}
.stage.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
h1.stage-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(30px,7.4vw,42px);line-height:1.1;color:var(--ink);margin-bottom:18px;letter-spacing:-.01em}
h1.stage-title em{font-style:italic;color:var(--gold)}
.lead{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:20px}

/* intro list (the finder's "what you get" rows) */
.intro-list{border-top:1px solid var(--line);margin-bottom:22px}
.intro-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.intro-item .in{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--gold);padding-top:3px;flex:0 0 20px}
.intro-item .it{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.intro-item .it b{color:var(--ink)}

/* the gate */
.capture{background:var(--gold-dim);border:1px solid var(--gold-border);border-radius:16px;padding:24px 22px;margin:6px 0 10px}
.capture h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:25px;color:var(--ink);line-height:1.2;margin-bottom:6px}
.capture h3 em{font-style:italic;color:var(--gold)}
.capture p.cap-lead{font-size:14px;color:var(--ink-soft);margin-bottom:18px;line-height:1.5}
.field{margin-bottom:14px}
.field label.q{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px}
input[type="text"],input[type="email"],select{width:100%;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--ink);background:var(--paper-warm);border:1px solid var(--line);border-radius:11px;padding:14px 16px;outline:none;transition:border-color .2s,background .2s}
input:focus,select:focus{border-color:var(--gold);background:var(--paper)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-error{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-ink);border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.45;margin-bottom:12px}
.cap-note{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:12px;line-height:1.4}

.btn{display:block;width:100%;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-align:center;background:var(--ink);color:var(--paper);border:none;border-radius:12px;padding:17px;cursor:pointer;transition:transform .1s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.99)}
.btn.gold{background:var(--gold);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:none;color:var(--ink-soft);border:1px solid var(--line)}

/* the three doors */
.welcome{background:rgba(47,125,79,.08);border:1px solid rgba(47,125,79,.3);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--good);line-height:1.5;margin-bottom:22px}
.welcome b{font-weight:600}
.doors{display:grid;gap:14px;margin:6px 0 22px}
.door{display:block;text-decoration:none;color:inherit;background:var(--paper-warm);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:20px 22px;transition:transform .12s,border-color .2s,box-shadow .2s}
.door:hover,.door:focus-visible{transform:translateX(3px);border-color:var(--gold);box-shadow:0 6px 22px rgba(0,0,0,.07);outline:none}
.door .d-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;display:flex;justify-content:space-between;gap:10px}
.door .d-name{font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1.1;color:var(--ink);margin-bottom:7px}
.door .d-sub{font-size:14px;color:var(--ink-soft);line-height:1.5}
.door .d-go{display:block;margin-top:12px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.next-line{text-align:center;font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:6px}
.next-line b{color:var(--ink)}

/* reading pages */
.page-nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:10px 0 0;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.page-nav a{color:var(--ink-faint);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.page-nav a:hover{color:var(--gold);border-color:var(--gold)}
.page-nav a.here{color:var(--gold);border-color:var(--gold)}
.hero{padding:34px 0 8px}
.hero .dek{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:640px}
.hero .byline{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:16px}
.toc{display:flex;gap:8px;overflow-x:auto;padding:14px 0;margin:18px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);background:var(--paper);z-index:5;scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:0 0 auto;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper-warm)}
.toc a:hover{border-color:var(--gold);color:var(--gold)}

.doc section.sec{padding:30px 0 8px;border-bottom:1px solid var(--line-soft)}
.doc section.sec:last-of-type{border-bottom:none}
.doc h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(26px,5.6vw,34px);line-height:1.12;margin-bottom:14px;letter-spacing:-.01em;scroll-margin-top:70px}
.doc h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:23px;line-height:1.2;margin:26px 0 8px;color:var(--ink)}
.doc p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-bottom:14px}
.doc p strong,.doc li strong,.doc td strong{color:var(--ink);font-weight:600}
.doc ul,.doc ol{margin:0 0 16px 22px;color:var(--ink-soft);font-size:16px;line-height:1.65}
.doc li{margin-bottom:6px;padding-left:2px}
.doc li ul,.doc li ol{margin-top:6px;margin-bottom:6px}
.doc li::marker{color:var(--gold)}
ul.checklist{list-style:none;margin-left:0}
ul.checklist li{padding-left:0}
ul.checklist label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
ul.checklist input{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin-top:3px;border:1.5px solid var(--gold-border);border-radius:5px;background:var(--paper-warm);cursor:pointer;position:relative}
ul.checklist input:checked{background:var(--gold);border-color:var(--gold)}
ul.checklist input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
ul.checklist input:checked + span{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--gold-border)}
.tbl-wrap{overflow-x:auto;margin:6px 0 20px;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.tbl-wrap table,.doc table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px;line-height:1.5}
.doc th,.doc td,.prompts th,.prompts td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.doc th,.prompts th{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--gold-dim);font-weight:500;white-space:nowrap}
.doc tr:last-child td,.prompts tr:last-child td{border-bottom:none}
.doc td:first-child{color:var(--ink);font-weight:600}
.codebox{position:relative;margin:6px 0 20px}
.codebox pre,.prompt-box pre{background:var(--code-bg);color:var(--code-ink);font-family:'DM Mono',monospace;font-size:13px;line-height:1.7;border-radius:12px;padding:20px 18px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.copy{position:absolute;top:8px;right:8px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--code-lbl);background:rgba(255,255,255,.07);border:1px solid rgba(212,168,67,.4);border-radius:8px;padding:6px 10px;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.14)}
.codebox pre{padding-top:42px}

/* closing block on reading pages */
.also{margin:34px 0 8px;border-top:1px solid var(--line);padding-top:26px}
.also h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;margin-bottom:12px;font-weight:500}
.also .doors{margin:0 0 18px}
.tools-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.tools-row .btn{width:auto;flex:1 1 200px}

/* master prompts (the vault markup, restyled) */
.prompts section{padding:0}
.prompts .wrap{padding:6px 0}
.prompts section.prompt-card{border-top:1px solid var(--line-soft);padding:26px 0 8px}
.prompts section:not(.prompt-card){padding:30px 0 6px;border-top:1px solid var(--line)}
.prompts .eyebrow{margin-bottom:10px}
.prompts h2.title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(26px,5.6vw,34px);line-height:1.12;margin-bottom:12px;scroll-margin-top:70px}
.prompts .dek{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:16px}
.prompts .dek b,.prompts p b,.prompts li b{color:var(--ink);font-weight:600}
.prompts .rules{display:grid;gap:12px;margin:16px 0}
.prompts .rule-card{background:var(--paper-warm);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 18px}
.prompts .rule-card .num{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--gold)}
.prompts .rule-card h3{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;margin:4px 0 6px;color:var(--ink)}
.prompts .rule-card p,.prompts .note p,.prompts .lede,.prompts .ext-intro p,.prompts .steps li,.prompts .compare p,.prompts .tool p{font-size:15px;line-height:1.65;color:var(--ink-soft)}
.prompts .note{background:var(--gold-dim);border:1px solid var(--gold-border);border-radius:12px;padding:14px 16px;margin:16px 0}
.prompts .lbl{display:block;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.prompts .loop{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0}
.prompts .loop>div{background:var(--paper-warm);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.prompts .loop p{font-size:14px;color:var(--ink-soft);line-height:1.5}
.prompts .prompt-head{display:flex;gap:14px;align-items:baseline;margin-bottom:6px}
.prompts .prompt-head .idx{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--gold);border-radius:6px;padding:3px 8px;flex-shrink:0}
.prompts .prompt-head h3{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500;line-height:1.15;color:var(--ink)}
.prompts .prompt-tag{display:block;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:2px 0 12px}
.prompts .lede{margin-bottom:12px}
.prompt-box{position:relative;margin:12px 0 14px}
.prompt-box .lbl{position:absolute;top:12px;left:18px;z-index:1;color:var(--code-lbl)}
.prompt-box pre{padding-top:38px}
.prompts .pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.35;color:var(--gold);border-left:3px solid var(--gold);padding:4px 0 4px 16px;margin:16px 0}
.prompts .subhead{display:block;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:20px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--gold-border)}
.prompts .tbl-wrap table{min-width:0;border-collapse:collapse;width:100%;font-size:14.5px}
.prompts td.own{color:var(--gold);font-weight:600}
.prompts .compare{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:14px 0}
.prompts .compare>div{background:var(--paper-warm);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.prompts .compare .form{border-color:var(--gold-border);background:var(--gold-dim)}
.prompts .compare h4{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;margin:4px 0 6px;color:var(--ink)}
.prompts .steps ol{margin:12px 0 12px 22px}
.prompts .steps li{margin-bottom:8px}
.prompts .stack{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px}
.prompts .tool{display:flex;gap:12px;align-items:flex-start;background:var(--paper-warm);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.prompts .tool .badge{flex:0 0 38px;height:38px;border-radius:9px;background:var(--gold);color:#fff;font-family:'DM Mono',monospace;font-size:12px;display:flex;align-items:center;justify-content:center}
.prompts .tool h4{font-size:15px;font-weight:600;color:var(--ink)}
.prompts .tool a{font-size:12.5px;word-break:break-all}
.prompts section.closing{padding:28px 24px;margin:28px 0 0;background:linear-gradient(160deg,var(--hero-a),var(--hero-b));color:#fff;border-radius:18px;border-top:none}
.prompts .closing .eyebrow{color:var(--gold-soft)}
.prompts .closing .title{color:#fff}
.prompts .closing .dek{color:rgba(255,255,255,.78)}
.prompts .closing a.cta{display:block;text-align:center;background:var(--gold);color:#fff;text-decoration:none;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-radius:12px;padding:16px;margin:18px 0 14px}
.prompts .closing .credit{font-size:12px;line-height:1.55;color:rgba(255,255,255,.55)}

@media (min-width:720px){
  body{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
  .doc,.prompts{max-width:720px}
  .toc{flex-wrap:wrap;position:static;overflow:visible}
}
@media print{
  .toc,.copy,.page-nav,.also .btn,.tools-row,footer.foot{display:none!important}
  body{background:#fff;color:#000}
  .codebox pre,.prompt-box pre{background:#f4f1ea;color:#111;border:1px solid #ddd}
  .doc section.sec,.prompts section{break-inside:avoid-page}
  .prompts .closing{background:#fff;color:#000;border:1px solid #ccc}
  .prompts .closing .title,.prompts .closing .dek,.prompts .closing .credit{color:#000}
}

/* tables become cards on a phone, so no column hides off the edge */
@media (max-width:640px){
  .doc .tbl-wrap{border:none;overflow:visible;margin-bottom:8px}
  .doc .tbl-wrap table{min-width:0;display:block}
  .doc .tbl-wrap thead{display:none}
  .doc .tbl-wrap tbody,.doc .tbl-wrap tr{display:block}
  .doc .tbl-wrap tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--paper-warm)}
  .doc .tbl-wrap td{display:block;border:none;padding:4px 0}
  .doc .tbl-wrap td:first-child{font-size:15px;padding-bottom:6px}
  .doc .tbl-wrap td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1px}
}

.doors>*,.compare>*,.stack>*,.rules>*,.loop>*,.tools-row>*{min-width:0}

/* the optional sign-up at the end of a page (the finder asks at the end, so do we) */
form.endcap{margin:34px 0 8px}
form.endcap h3{font-size:24px}
form.endcap .row2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:560px){form.endcap .row2{grid-template-columns:1fr}}
.prompts .howto{background:var(--paper-warm);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:14px 0}