/* ============================================================
   Growth Dudes — Design System v1.1
   Paper, ink, and one highlighter.
   ============================================================ */

:root{
  --paper:#FBFAF7;--paper-2:#F4F1EA;--paper-3:#EBE7DD;--white:#FFFFFF;
  --ink:#12100E;--ink-700:#3D3833;--ink-600:#5C554C;--ink-500:#7A7167;
  --ink-400:#9C9388;--ink-300:#C2BAAE;--ink-200:#DCD6CB;--ink-100:#EDE9E1;
  --lime:#D8FF3E;--lime-deep:#B5DB1F;--lime-wash:#F2FFC7;
  --clay:#B8492A;--clay-wash:#FBEDE8;
  --go:#1E6B3A;--go-wash:#E7F4EA;--warn:#8A5A00;--warn-wash:#FDF3DD;
  --stop:#B3261E;--stop-wash:#FBEAE8;--info:#1F4F8B;--info-wash:#E8F0FA;
  --font-display:'Fraunces',Georgia,serif;
  --font-text:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --t-micro:.75rem;--t-meta:.875rem;--t-small:1rem;--t-body:1.125rem;--t-lead:1.25rem;
  --t-5:1.5rem;--t-4:1.875rem;--t-3:2.375rem;--t-2:3rem;--t-1:3.875rem;--t-display:5rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:160px;
  --r-none:0;--r-sm:4px;--r-md:6px;--r-lg:10px;
  --shadow-card:4px 4px 0 var(--ink);--shadow-hover:6px 6px 0 var(--ink);
  --shadow-press:2px 2px 0 var(--ink);--border:2px solid var(--ink);
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:260ms;--ease:cubic-bezier(0.2,0,0,1);
  --measure:720px;--container:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:1.125rem;line-height:1.65;
  font-variant-ligatures:common-ligatures;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-variation-settings:'SOFT' 40,'WONK' 0;
  font-weight:600;margin:0 0 var(--sp-4);line-height:1.15;letter-spacing:-.02em}
p{margin:0 0 var(--sp-4)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
@media(min-width:1024px){.wrap{padding:0 40px}}
mark{background:var(--lime-wash);color:var(--ink);border-radius:var(--r-none);padding:0 3px}
code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:1px 5px;border-radius:var(--r-sm)}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--clay);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:var(--r-sm)}
img{max-width:100%;height:auto}

/* ---- site header / nav ---- */
.site-header{border-bottom:var(--border);background:var(--paper);position:sticky;top:0;z-index:100}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.375rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--sp-2)}
.logo:hover{color:var(--ink)}
.logo .dot{width:12px;height:12px;background:var(--lime);border:1.5px solid var(--ink);border-radius:50%;display:inline-block;flex:none}
.nav-links{display:flex;align-items:center;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.nav-links a{font-weight:600;font-size:1rem;text-decoration:none;color:var(--ink-700)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-family:var(--font-text);font-size:.9375rem;font-weight:600;padding:8px 16px;border:var(--border);border-radius:var(--r-md);background:var(--ink);color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px}
.nav-cta:hover{background:var(--ink-700);color:var(--paper)}
@media(max-width:640px){.nav-links{gap:var(--sp-4)}.nav-links .hide-mobile{display:none}}

/* ---- hero ---- */
.hero{border-bottom:var(--border);background:var(--paper);padding:var(--sp-10) 0}
@media(min-width:768px){.hero{padding:var(--sp-11) 0}}
.eyebrow{font-size:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600);margin:0 0 var(--sp-4)}
.hero h1{font-size:clamp(2.5rem,7vw,3.875rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--sp-5)}
.hero .lead{max-width:var(--measure);font-size:1.25rem;color:var(--ink-700);margin-bottom:var(--sp-6)}
.hero .badge-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6)}

/* ---- sections ---- */
section{padding:var(--sp-8) 0;border-bottom:1px solid var(--ink-200)}
@media(min-width:768px){section{padding:var(--sp-9) 0}}
.sec-head{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-3);flex-wrap:wrap}
.sec-num{font-family:var(--font-text);font-size:.875rem;color:var(--ink-500);font-weight:600;letter-spacing:.08em}
.sec-head h2{font-size:clamp(1.875rem,4vw,3rem)}
.sec-why{max-width:var(--measure);color:var(--ink-700);margin:0 0 var(--sp-7);font-size:1.125rem}
.sec-why strong{color:var(--ink)}

/* ---- trace pill ---- */
.trace{display:inline-block;font-size:.875rem;font-weight:600;background:var(--lime-wash);
  color:var(--ink);border:1px solid var(--lime-deep);border-radius:var(--r-sm);padding:2px 8px;
  font-family:var(--font-text)}

/* ---- buttons ---- */
.btn{font-family:var(--font-text);font-size:1.125rem;font-weight:600;padding:14px 24px;
  border:var(--border);border-radius:var(--r-md);cursor:pointer;box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
    background var(--dur-fast) var(--ease);display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:48px;line-height:1;text-decoration:none}
.btn:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}
.btn:active{box-shadow:var(--shadow-press);transform:translate(2px,2px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink-700);color:var(--paper)}
.btn-accent{background:var(--lime);color:var(--ink)}
.btn-accent:hover{background:var(--lime-deep);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink-100)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}

/* ---- tags ---- */
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);
  border:1px solid var(--ink);background:var(--lime);color:var(--ink)}
.tag.ghost{background:transparent;color:var(--ink-700);border-color:var(--ink-500)}
.tag.go{background:var(--go-wash);border-color:var(--go);color:var(--go)}
.tag.info{background:var(--info-wash);border-color:var(--info);color:var(--info)}
.tag.warn{background:var(--warn-wash);border-color:var(--warn);color:var(--warn)}

/* ---- reality bar ---- */
.reality{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:center;
  border:var(--border);border-radius:var(--r-lg);background:var(--paper-2);
  padding:var(--sp-3) var(--sp-5);font-size:1rem;font-weight:500}
.reality span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.reality .dots{letter-spacing:.1em}

/* ---- tool card ---- */
.card{border:var(--border);border-radius:var(--r-lg);background:var(--paper);padding:var(--sp-5);
  box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease),
  transform var(--dur-base) var(--ease);display:flex;flex-direction:column;height:100%}
.card:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}
.card h3{font-size:1.375rem;margin:var(--sp-3) 0 var(--sp-2);line-height:1.25}
.card p{margin:0 0 var(--sp-4);color:var(--ink-700);font-size:1rem;flex:1}
.card .mini{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:.875rem;color:var(--ink-600);
  border-top:1px solid var(--ink-200);padding-top:var(--sp-3);margin-bottom:var(--sp-4)}
.card .card-link{font-weight:600;text-decoration:none;color:var(--ink);font-size:1rem}
.card .card-link:hover{color:var(--clay)}
.card-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.card-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- filter bar ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-7);align-items:center}
.filter-btn{font-family:var(--font-text);font-size:1rem;font-weight:600;padding:8px 16px;
  border:2px solid var(--ink-300);border-radius:var(--r-md);background:var(--white);color:var(--ink-700);
  cursor:pointer;transition:all var(--dur-fast) var(--ease);min-height:40px}
.filter-btn:hover{border-color:var(--ink-500);color:var(--ink)}
.filter-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- callouts ---- */
.callout{border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0;
  font-size:1.0625rem;line-height:1.6}
.callout > strong:first-child{display:block;margin-bottom:var(--sp-2);font-size:1.0625rem}
.co-warn{background:var(--warn-wash);border-left:4px solid var(--warn);color:var(--ink)}
.co-warn strong{color:var(--warn)}
.co-stop{background:var(--stop-wash);border-left:4px solid var(--stop)}
.co-stop strong{color:var(--stop)}
.co-go{background:var(--go-wash);border-left:4px solid var(--go)}
.co-go strong{color:var(--go)}
.co-info{background:var(--info-wash);border-left:4px solid var(--info)}
.co-info strong{color:var(--info)}

/* ---- code block ---- */
.cb{border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);
  box-shadow:var(--shadow-card);max-width:var(--measure);margin:var(--sp-5) 0}
.cb-what{background:var(--paper-3);padding:var(--sp-4) var(--sp-5);border-bottom:var(--border);
  font-size:1.0625rem}
.cb-what b{display:block;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-600);margin-bottom:var(--sp-2)}
.cb-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  border-bottom:1px solid var(--ink-300);font-family:var(--font-mono);font-size:.875rem;color:var(--ink-600)}
.cb-copy{font-family:var(--font-text);font-size:.875rem;font-weight:600;background:var(--white);
  border:1px solid var(--ink);border-radius:var(--r-sm);padding:6px 14px;cursor:pointer;
  min-height:40px;min-width:72px}
.cb-copy:hover{background:var(--lime)}
.cb pre{margin:0;padding:var(--sp-4) 0;overflow-x:auto;font-family:var(--font-mono);
  font-size:.9375rem;line-height:1.75}
.cb .ln{display:block;padding:0 var(--sp-5) 0 0;white-space:pre}
.cb .ln::before{content:attr(data-n);display:inline-block;width:2.5em;padding-left:var(--sp-5);
  color:var(--ink-500);-webkit-user-select:none;user-select:none}
.cb .ln.hl{background:var(--lime-wash);box-shadow:inset 3px 0 0 var(--lime-deep)}
.cb .c{color:var(--ink-600)}
.cb .s{color:var(--clay)}
.cb .k{color:var(--info);font-weight:500}

/* ---- rules box ---- */
.rules{border:var(--border);border-radius:var(--r-lg);background:var(--white);
  padding:var(--sp-5);box-shadow:var(--shadow-card);margin-top:var(--sp-7)}
.rules h4{font-family:var(--font-text);font-weight:700;font-size:1.125rem;margin:0 0 var(--sp-3)}
.rules ol{margin:0;padding-left:1.25em}
.rules li{margin-bottom:var(--sp-3);font-size:1rem}
.rules li:last-child{margin-bottom:0}

/* ---- do / dont ---- */
.dd{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:800px){.dd{grid-template-columns:1fr 1fr}}
.dd-col{border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.dd-col header{padding:var(--sp-3) var(--sp-5);font-weight:700;border-bottom:var(--border);font-size:1.0625rem}
.dd-yes header{background:var(--lime)}
.dd-no header{background:var(--stop-wash);color:var(--stop)}
.dd-col ul{margin:0;padding:var(--sp-4) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 1.1em);font-size:1rem}
.dd-col li{margin-bottom:var(--sp-2)}
.dd-col li:last-child{margin-bottom:0}

/* ---- voice table ---- */
.vt{width:100%;border-collapse:collapse;border:var(--border);border-radius:var(--r-lg);overflow:hidden;
  font-size:1rem;background:var(--white)}
.vt th{background:var(--ink);color:var(--paper);text-align:left;padding:var(--sp-3) var(--sp-4);
  font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.vt td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--ink-200);vertical-align:top}
.vt td:first-child{color:var(--ink-600);text-decoration:line-through;text-decoration-color:var(--stop);width:44%}
.vt td:last-child{font-weight:500}
.tscroll{overflow-x:auto}

/* ---- grid layouts ---- */
.g{display:grid;gap:var(--sp-5)}
.grid-2{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:800px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:800px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---- stat strip ---- */
.stat-strip{display:grid;grid-template-columns:1fr;gap:var(--sp-5);border:var(--border);border-radius:var(--r-lg);background:var(--white);padding:var(--sp-5);box-shadow:var(--shadow-card)}
@media(min-width:600px){.stat-strip{grid-template-columns:repeat(3,1fr)}}
.stat{text-align:center}
.stat .num{font-family:var(--font-display);font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:var(--sp-2)}
.stat .label{font-size:1rem;color:var(--ink-600);font-weight:500}

/* ---- community card ---- */
.community-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:900px){.community-grid{grid-template-columns:repeat(2,1fr)}}
.perk{border:var(--border);border-radius:var(--r-lg);background:var(--white);padding:var(--sp-5);box-shadow:var(--shadow-card)}
.perk h3{font-size:1.25rem;margin-bottom:var(--sp-3)}
.perk p{color:var(--ink-700);font-size:1rem;margin:0}

/* ---- signup form ---- */
.signup-box{border:var(--border);border-radius:var(--r-lg);background:var(--white);padding:var(--sp-6);box-shadow:var(--shadow-card);max-width:560px}
.signup-box h3{font-size:1.5rem;margin-bottom:var(--sp-3)}
.signup-box p{color:var(--ink-700);font-size:1rem;margin-bottom:var(--sp-4)}
.field{max-width:100%}
.field label{display:block;font-weight:600;font-size:1rem;margin-bottom:var(--sp-2)}
.field input{width:100%;font-family:var(--font-text);font-size:1.125rem;padding:12px 14px;
  min-height:48px;background:var(--white);border:1px solid var(--ink-500);border-radius:var(--r-sm);
  color:var(--ink)}
.field input::placeholder{color:var(--ink-500)}
.field .hint{font-size:.875rem;color:var(--ink-600);margin-top:var(--sp-2)}

/* ---- tool detail page ---- */
.tool-hero{border-bottom:var(--border);background:var(--paper);padding:var(--sp-8) 0}
@media(min-width:768px){.tool-hero{padding:var(--sp-9) 0}}
.tool-hero .badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.tool-hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:var(--sp-4)}
.tool-hero .tagline{font-size:1.25rem;color:var(--ink-700);max-width:var(--measure);margin-bottom:var(--sp-5)}
.tool-body{display:grid;gap:var(--sp-7);grid-template-columns:1fr}
@media(min-width:900px){.tool-body{grid-template-columns:1fr 320px}}
.tool-content{min-width:0}
.tool-sidebar{display:flex;flex-direction:column;gap:var(--sp-5)}
.tool-sidebar .side-box{border:var(--border);border-radius:var(--r-lg);background:var(--white);padding:var(--sp-5);box-shadow:var(--shadow-card)}
.tool-sidebar h3{font-family:var(--font-text);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-600);margin-bottom:var(--sp-3)}
.tool-sidebar dl{margin:0;display:grid;gap:var(--sp-2)}
.tool-sidebar dt{font-size:.875rem;color:var(--ink-600);font-weight:600}
.tool-sidebar dd{margin:0 0 var(--sp-3);font-size:1rem}
.tool-sidebar dd:last-child{margin-bottom:0}

/* ---- comparison table ---- */
.compare{width:100%;border-collapse:collapse;border:var(--border);border-radius:var(--r-lg);overflow:hidden;font-size:1rem;background:var(--white)}
.compare th{background:var(--paper-2);padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:600;border-bottom:var(--border);font-size:.9375rem}
.compare td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--ink-200);vertical-align:top}
.compare tr:hover td{background:var(--paper-2)}

/* ---- breadcrumb ---- */
.breadcrumb{display:flex;align-items:center;gap:var(--sp-2);font-size:.875rem;color:var(--ink-600);margin-bottom:var(--sp-5);flex-wrap:wrap}
.breadcrumb a{color:var(--ink-600);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--ink-400)}

/* ---- footer ---- */
footer{padding:var(--sp-8) 0;font-size:1rem;color:var(--ink-600);border-top:var(--border);background:var(--paper)}
.footer-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media(min-width:600px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-grid h4{font-family:var(--font-text);font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:var(--sp-3)}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:var(--sp-2)}
.footer-grid a{color:var(--ink-600);text-decoration:none;font-size:.9375rem}
.footer-grid a:hover{color:var(--ink)}
.footer-bottom{border-top:1px solid var(--ink-200);margin-top:var(--sp-7);padding-top:var(--sp-5);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);font-size:.875rem}

/* ---- utility ---- */
.center-text{text-align:center}
.measure{max-width:var(--measure)}
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}.mb-7{margin-bottom:var(--sp-7)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms!important;transition-duration:.01ms!important}}