/* The Game Plan - marketing page stylesheet.
   Extracted verbatim from marketing/index.html so www.yourgameplannow.com
   (ClickFunnels) can <link> the SAME stylesheet the Netlify site uses.
   Keeping one copy means the two can never drift.
   Regenerate with: python3 scripts/extract-marketing-css.py */

  :root{
    --cream:#f5f1e8;
    --cream-deep:#ede7d8;
    --olive:#7d8c5c;
    --olive-soft:#a8b48c;
    --olive-deep:#5c6b42;
    --ink:#2e2a24;
    --brown:#4a4238;
    --white:#fdfcf9;
    --tape:rgba(168,180,140,.4);
    --display:'Playfair Display',serif;
    --body:'Nunito Sans',sans-serif;
    --hand:'Caveat',cursive;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
  body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px}
  a{color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--display);line-height:1.12;color:var(--ink)}
  .eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-deep)}
  .hand{font-family:var(--hand);color:var(--olive-deep);font-size:24px;line-height:1.3;font-weight:600}
  .btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:16px;text-decoration:none;padding:16px 32px;border-radius:40px;transition:transform .15s ease,box-shadow .15s ease;letter-spacing:.02em}
  .btn:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
  .btn-primary{background:var(--olive-deep);color:var(--cream)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(92,107,66,.35)}
  .btn-ghost{border:2px solid var(--olive-deep);color:var(--olive-deep)}
  .btn-ghost:hover{background:rgba(125,140,92,.1)}
  /* mid-page secondary offer — deliberately quieter than any primary CTA */
  .report-bar{background:var(--olive-deep);color:var(--cream)}
  .report-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:44px 24px;flex-wrap:wrap}
  .report-bar-eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-soft);margin-bottom:10px}
  .report-bar-headline{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,29px);line-height:1.2;color:var(--cream);max-width:20em;margin-bottom:10px}
  .report-bar-copy{font-size:16.5px;color:rgba(245,241,232,.82);max-width:40em}
  .report-bar .btn-primary{background:var(--cream);color:var(--olive-deep)}
  .report-bar .btn-primary:hover{background:#fff}
  .report-bar-cta{flex-shrink:0;padding:13px 26px;font-size:15px}
  @media (max-width:560px){
    .report-bar-inner{gap:18px}
    .report-bar-cta{width:100%;text-align:center}
  }
  .note{font-size:13px;color:#7a7263;letter-spacing:.04em}

  /* subtle paper texture */
  body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:0;
    background-image:radial-gradient(rgba(74,66,56,.05) 1px, transparent 1px);background-size:22px 22px}
  main,header,footer{position:relative;z-index:1}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(245,241,232,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-deep)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
  .nav .brand img{height:52px;width:52px;border-radius:50%}
  .nav .brand span{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.06em}
  .nav-cta{font-size:15px;padding:12px 24px}
  .nav-right{display:flex;align-items:center;gap:24px}
  .nav-signin{font-family:var(--body);font-weight:700;font-size:15px;text-decoration:none;color:var(--olive-deep);white-space:nowrap;padding:8px 4px;border-bottom:2px solid transparent}
  .nav-signin:hover{border-bottom-color:var(--olive-deep)}
  .nav-signin:focus-visible{outline:3px solid var(--olive);outline-offset:3px}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 88px;overflow:hidden}
  /* Single column. Side-by-side left the two columns at wildly different heights,
     which showed up as dead space no matter how it was aligned. Photos now sit
     under the CTA, where they read as proof of the promise just made. */
  .hero-grid{display:block;max-width:980px;margin:0 auto}
  .hero h1{font-size:clamp(38px,5vw,60px);font-weight:800;margin:18px 0 0}
  .hero h1 em{font-style:italic;color:var(--olive-deep)}
  .strike{position:relative;white-space:nowrap}
  .strike::after{content:"";position:absolute;left:-1%;right:-1%;top:55%;height:3px;background:var(--olive);transform:rotate(-2.5deg);border-radius:2px}
  .hero .lede{font-size:19px;margin:26px 0 12px;max-width:32em;color:var(--brown)}
  .hero .hand-note{margin:6px 0 30px;transform:rotate(-1.5deg);display:inline-block}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero .note{margin-top:16px;display:block}

  /* polaroid stack */
  .stack{position:relative;display:flex;flex-wrap:wrap;gap:36px 24px;justify-content:center;align-items:flex-start;padding-top:56px}
  .polaroid{position:relative;background:var(--white);padding:14px 14px 44px;box-shadow:0 14px 40px rgba(46,42,36,.18);border-radius:3px;width:180px;flex:0 0 auto}
  .polaroid::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);width:70px;height:22px;background:var(--tape);border-radius:2px}
  .polaroid .ph{width:100%;aspect-ratio:1/1;background:linear-gradient(145deg,var(--cream-deep),#e0d9c6);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;border:1px dashed var(--olive-soft)}
  .polaroid .ph span{font-family:var(--hand);font-size:16px;color:var(--olive-deep);line-height:1.3}
  .polaroid .cap{margin-top:12px;text-align:center;font-family:var(--hand);font-size:17px;color:var(--brown)}
  .p1{transform:rotate(-4deg);z-index:2}
  .p2{transform:rotate(3.5deg);z-index:3;margin-top:34px}
  .p3{transform:rotate(-1.5deg);z-index:1}

  /* ---------- ticker of truth ---------- */
  .truths{background:var(--olive-deep);color:var(--cream);padding:16px 0;overflow:hidden}
  .truths .row{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
  .truths .row span::before{content:"✳";margin-right:12px;color:var(--olive-soft)}

  /* ---------- full week grid ---------- */
  .fullweek{padding:88px 0;background:var(--white);border-bottom:1px solid var(--cream-deep)}
  .fullweek .head{text-align:center;max-width:640px;margin:0 auto 44px}
  .fullweek h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin:14px 0 12px}
  .fullweek .sub{font-size:17.5px;color:var(--brown)}
  .weektable{max-width:880px;margin:0 auto;background:var(--cream);border-radius:10px;padding:34px 34px 26px;box-shadow:0 16px 44px rgba(46,42,36,.1);overflow-x:auto}
  .weektable table{width:100%;border-collapse:collapse;min-width:560px}
  .weektable th{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive-deep);padding:10px 8px;border-bottom:2px solid var(--olive-soft);text-align:center}
  .weektable th:first-child{text-align:left}
  .weektable td{padding:14px 8px;border-bottom:1px dashed var(--cream-deep);text-align:center;font-size:15px;color:var(--brown)}
  .weektable td.meal{font-family:var(--display);font-weight:700;font-size:16.5px;text-align:left;color:var(--ink);white-space:nowrap}
  .weektable td.meal small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:#8a8271}
  .weektable td .ck{color:var(--olive-deep);font-weight:700}
  .weektable tr:last-child td{border-bottom:none}
  .weektable .wknote{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:2px solid var(--olive-soft)}
  .weektable .wknote .hand{font-size:22px}

  /* ---------- stat / villain ---------- */
  .villain{padding:96px 0}
  .villain .wrap{max-width:760px}
  /* line-height:1 — Playfair's 9 has a descender that dropped below its own
     text box at .85, colliding with the caption underneath. */
  .bignum{font-family:var(--display);font-weight:800;font-size:clamp(96px,13vw,170px);line-height:1;color:var(--olive-deep);position:relative}
  .bignum .circled{position:absolute;top:-20px;right:-44px;transform:rotate(8deg)}
  .bignum small{display:block;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);margin-top:28px}
  /* The 9 is enumerated on the page so the number is verifiable, not asserted. */
  .ninelist{margin:26px 0 0;padding-left:1.35em;max-width:22em}
  .ninelist li{font-size:15.5px;line-height:1.45;color:var(--brown);margin-bottom:9px}
  .ninelist li::marker{color:var(--olive-deep);font-weight:700}
  /* early byline — she should know who is talking before the pain sequence */
  .byline{padding:8px 0 56px}
  .byline-inner{display:flex;align-items:center;gap:28px;max-width:760px;margin:0 auto;background:var(--white);border:1px solid rgba(125,140,92,.22);border-radius:8px;padding:28px 34px;box-shadow:0 10px 30px rgba(46,42,36,.07)}
  .byline-face{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex-shrink:0;border:3px solid var(--cream-deep)}
  .byline-hi{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-deep);margin-bottom:9px}
  .byline-copy{font-size:17px;color:var(--brown);line-height:1.6;max-width:34em}
  @media (max-width:560px){
    .byline-inner{gap:18px}
    .byline-face{width:74px;height:74px}
    .byline-copy{font-size:16.5px}
  }
  .ninegrid{margin:44px 0 8px;padding:34px 0 6px;border-top:1px solid rgba(125,140,92,.3)}
  .ninegrid-head{font-family:var(--display);font-size:clamp(21px,2.5vw,26px);font-weight:700;color:var(--ink);margin-bottom:26px}
  .ninegrid ol{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .ninegrid li{counter-increment:n;background:var(--white);border:1px solid rgba(125,140,92,.22);border-radius:6px;padding:18px 18px 20px;font-size:15px;line-height:1.45;color:var(--brown)}
  .ninegrid li::before{content:counter(n);display:block;font-family:var(--display);font-size:26px;font-weight:800;color:var(--olive-soft);line-height:1;margin-bottom:10px}
  @media (max-width:900px){.ninegrid ol{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.ninegrid ol{grid-template-columns:1fr;gap:12px}.ninegrid li{padding:14px 16px}}
  .ninegrid li span{display:block;font-weight:700;color:var(--ink);margin-bottom:7px;font-size:15px;line-height:1.35}
  .ninegrid li em{display:block;font-style:normal;font-size:14px;line-height:1.45;color:var(--olive-deep)}
  .benefit{margin-top:12px;padding-top:12px;border-top:1px solid rgba(125,140,92,.25);font-size:15px;color:var(--olive-deep)}
  .pull-line{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--olive-deep);margin:26px 0;font-weight:700}
  .sources{font-size:12.5px;color:#8a8172;letter-spacing:.02em;margin-top:26px;line-height:1.6}
  .after-close{max-width:44em;margin:36px auto 0;text-align:center;font-size:18px;color:var(--brown)}
  .ninelist{margin:26px 0 0;padding-left:0;list-style:none;counter-reset:n;max-width:23em}
  .ninelist li{counter-increment:n;position:relative;padding-left:38px;font-size:15.5px;line-height:1.45;color:var(--brown);margin-bottom:11px}
  .ninelist li::before{content:counter(n);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;background:var(--cream-deep);color:var(--olive-deep);font-family:var(--body);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
  .nextstep{display:block;margin-top:10px;font-size:14px;color:#8a8172}
  /* the stack — everything she gets, in one place, right before the ask */
  .stackbox{max-width:44em;margin:0 0 40px;background:var(--white);border:1px solid rgba(125,140,92,.28);border-radius:6px;padding:34px 36px}
  .stackbox h3{font-family:var(--display);font-size:clamp(22px,2.7vw,28px);font-weight:700;margin-bottom:20px}
  .stacklist{list-style:none;padding:0;margin:0 0 24px}
  .stacklist li{position:relative;padding-left:30px;margin-bottom:13px;font-size:16.5px;line-height:1.5;color:var(--brown)}
  .stacklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--olive-deep);font-weight:700}
  .stacklist strong{color:var(--ink)}
  .anotherweek{list-style:none;padding:0;margin:14px 0 18px}
  .anotherweek li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16.5px;color:var(--brown)}
  .anotherweek li::before{content:"×";position:absolute;left:4px;top:-1px;color:#b4553f;font-weight:700;font-size:18px}
  .whynow-close{font-size:17px;color:var(--ink);margin:0}
  .whynow{font-size:16.5px;color:var(--brown);border-top:1px solid rgba(125,140,92,.25);padding-top:20px;margin:0}
  @media (max-width:560px){.stackbox{padding:26px 22px}}
  .quote-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:52em;margin:0 auto}
  .quote-pair blockquote{background:var(--white);border-left:4px solid var(--olive-soft);border-radius:3px;padding:22px 24px;font-family:var(--display);font-size:20px;line-height:1.35;color:var(--ink);text-align:left}
  .quote-pair .who{display:block;margin-top:12px;font-family:var(--body);font-size:13.5px;letter-spacing:.05em;color:#8a8172}
  .villain h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:20px}
  .villain p{font-size:18px;color:var(--brown);margin-bottom:16px;max-width:34em}
  .villain p strong{color:var(--ink)}
  .villain .src{font-size:12.5px;color:#8a8271;margin-top:8px;display:block}

  /* ---------- tuesday letter ---------- */
  .tuesday{padding:80px 0;background:var(--white);border-top:1px solid var(--cream-deep);border-bottom:1px solid var(--cream-deep)}
  .tuesday .card{max-width:740px;margin:0 auto;background:var(--cream);border-radius:6px;padding:56px 56px 48px;box-shadow:0 18px 50px rgba(46,42,36,.1);position:relative;transform:rotate(-.4deg)}
  .tuesday .card::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(1.5deg);width:120px;height:32px;background:var(--tape);border-radius:2px}
  .tuesday .time{font-family:var(--hand);font-size:30px;color:var(--olive-deep)}
  .tuesday h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;margin:10px 0 20px}
  .tuesday p{font-size:17.5px;color:var(--brown);margin-bottom:16px}
  .tuesday p em{font-style:italic}
  .tuesday .kicker{font-family:var(--display);font-style:italic;font-size:21px;color:var(--olive-deep);margin-top:24px}

  /* ---------- three decisions ---------- */
  .plays{padding:96px 0}
  .plays .head{text-align:center;max-width:640px;margin:0 auto 56px}
  .plays h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:14px 0 14px}
  .plays .sub{font-size:18px;color:var(--brown)}
  .play-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .play{background:var(--white);border-radius:8px;padding:36px 30px;box-shadow:0 10px 32px rgba(46,42,36,.08);position:relative;border-top:4px solid var(--olive)}
  .play .pnum{font-family:var(--hand);font-size:26px;color:var(--olive-deep)}
  .play h3{font-size:24px;font-weight:700;margin:8px 0 12px}
  .play p{font-size:15.5px;color:var(--brown)}
  .plays .tagline{margin-top:52px;text-align:center}
  .plays .tagline .hand{font-size:34px}

  /* ---------- sunday picker ---------- */
  .sunday{padding:96px 0;background:var(--cream-deep)}
  .sunday{text-align:center}
  .sunday .head{max-width:620px;margin:0 auto 52px}
  .sunday .picker{text-align:left}
  .sunday h2{font-size:clamp(30px,4vw,44px);font-weight:800;margin:14px 0 12px}
  .sunday .sub{font-size:18px;color:var(--brown)}
  .picker{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:880px;margin:0 auto}
  .pcard{border-radius:8px;padding:36px 32px;background:var(--white);box-shadow:0 14px 36px rgba(46,42,36,.12);position:relative}
  .pcard.a{transform:rotate(-.8deg)}
  .pcard.b{transform:rotate(.8deg)}
  .pcard .plabel{font-family:var(--hand);font-size:24px;color:var(--olive-deep)}
  .pcard h3{font-size:28px;font-weight:800;margin:6px 0 18px}
  .pcard ul{list-style:none;margin-bottom:20px}
  .pcard li{font-size:15.5px;padding:9px 0;border-bottom:1px dashed var(--cream-deep);display:flex;gap:12px;color:var(--brown)}
  .pcard li::before{content:"✓";color:var(--olive);font-weight:700}
  .pcard li:last-child{border-bottom:none}
  .pcard .pquote{font-family:var(--display);font-style:italic;font-size:18px;color:var(--olive-deep)}
  .sunday .after{margin:44px auto 0;font-size:17.5px;color:var(--brown);max-width:40em}
  .sunday .after strong{color:var(--ink)}

  /* ---------- one table / one store with photo slots ---------- */
  .twoup{padding:64px 0}
  .twoup .cols{display:grid;grid-template-columns:1fr 1fr;gap:64px}
  .twoup .col{display:flex;flex-direction:column;gap:20px}
  .twoup h3{font-size:clamp(25px,3vw,32px);font-weight:700;margin-top:4px}
  .twoup p{font-size:16.5px;color:var(--brown)}
  .photoslot{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(145deg,var(--cream-deep),#e2dbc8);display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--olive-soft);padding:24px}
  .photoslot span{font-family:var(--hand);font-size:22px;color:var(--olive-deep)}
  .photoslot.diagram{display:block;border:none;padding:22px 20px;background:var(--white);box-shadow:0 10px 26px rgba(46,42,36,.1)}
  .photoslot.diagram svg{width:100%;height:100%;display:block}
  .diagram-tag{font-family:var(--hand);font-size:15px;fill:var(--brown)}
  .diagram-label{font-family:var(--body);font-weight:700;font-size:9.5px;letter-spacing:.08em;fill:var(--olive-deep)}

  /* ---------- category of one ---------- */
  .notanapp{padding:56px 0 104px;background:var(--olive-deep);color:var(--cream)}
  .notanapp .eyebrow{color:var(--olive-soft)}
  .notanapp h2{font-size:clamp(32px,4.4vw,50px);font-weight:800;margin:16px 0 22px;color:var(--white)}
  /* Centred on purpose — this is the manifesto section, the one place on the
     page that draws a line and tells some readers to leave. */
  .notanapp .wrap{max-width:840px;text-align:center}
  .notanapp p{font-size:18.5px;color:#e8e4d6;margin:0 auto 20px;max-width:30em;line-height:1.62}
  .notanapp .vs{text-align:left}
  /* her-voice quote wall */
  .voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:36px 0 48px}
  .voice{background:var(--white);border-left:4px solid var(--olive-soft);border-radius:3px;padding:22px 24px;font-size:18px;line-height:1.5;color:var(--ink);box-shadow:0 6px 20px rgba(46,42,36,.07)}
  .voice em{font-style:normal;font-weight:700}
  .voice cite{display:block;margin-top:12px;font-style:normal;font-size:13px;letter-spacing:.06em;color:#8a8172}
  .cost{max-width:44em;margin:0 auto 52px;text-align:center}
  .cost h3{font-family:var(--display);font-size:clamp(23px,2.9vw,31px);font-weight:700;margin-bottom:16px}
  .cost p{font-size:18px;color:var(--brown);margin-bottom:14px}
  /* sourced value stack */
  .costcase{max-width:46em;margin:0 0 44px}
  .pricing,.pricing .head,.pricing .costcase,.pricing .stackbox{text-align:left}
  .costcase p{font-size:18px;color:var(--brown);margin-bottom:20px}
  .costcase .kicker{font-size:19px;color:var(--ink)}
  .src-note{display:block;font-size:12.5px;letter-spacing:.04em;color:#8a8172;margin-top:6px}
  .pricetable{width:100%;border-collapse:collapse;margin:28px 0}
  .pricetable td{padding:14px 4px;border-bottom:1px solid rgba(125,140,92,.25);font-size:17px;color:var(--brown)}
  .pricetable td:last-child{text-align:right;white-space:nowrap}
  .pricetable tr.us td{color:var(--olive-deep);font-size:19px;border-bottom:none;border-top:2px solid var(--olive-deep)}
  .notanapp p strong{color:var(--white)}
  .vs{margin:48px auto 0;max-width:820px;display:grid;grid-template-columns:1fr 1fr;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.2)}
  .vs .col{padding:34px 30px}
  .vs .col.them{background:rgba(0,0,0,.22)}
  .vs .col.us{background:var(--cream);color:var(--ink)}
  .vs .vlabel{font-family:var(--hand);font-size:24px;display:block;margin-bottom:16px;color:var(--olive-soft)}
  .vs .col.us .vlabel{color:var(--olive-deep)}
  .vs li{list-style:none;font-size:15.5px;padding:9px 0;border-bottom:1px dashed rgba(245,241,232,.2);color:#ddd8c8}
  .vs .col.us li{color:var(--brown);border-bottom:1px dashed var(--cream-deep)}
  .vs li:last-child{border-bottom:none}

  /* ---------- founder ---------- */
  .founder{padding:96px 0;background:var(--white);border-top:1px solid var(--cream-deep);border-bottom:1px solid var(--cream-deep)}
  .founder .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;max-width:1000px;margin:0 auto}
  .founder .photo{position:relative}
  .founder .photo .polaroid{position:relative;width:100%;transform:rotate(-2.5deg)}
  .founder blockquote{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(22px,2.8vw,30px);line-height:1.4;color:var(--olive-deep);margin:18px 0 24px}
  .founder p{font-size:17px;color:var(--brown);margin-bottom:16px}
  .founder .sig{font-family:var(--hand);font-size:30px;color:var(--ink);margin-top:12px}

  /* ---------- future pacing ---------- */
  .after-section{padding:96px 0;background:var(--cream-deep)}
  .after-section .head{text-align:center;max-width:620px;margin:0 auto 52px}
  .after-section h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin:14px 0 12px}
  .after-section .sub{font-size:17.5px;color:var(--brown)}
  .after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto}
  .after-card{background:var(--white);border-radius:8px;padding:30px 28px;box-shadow:0 10px 30px rgba(46,42,36,.08)}
  .after-card .when{font-family:var(--hand);font-size:23px;color:var(--olive-deep)}
  .after-card p{font-size:15.5px;color:var(--brown);margin-top:10px}
  .after-card p strong{color:var(--ink)}
  .after-section .claim{text-align:center;margin-top:48px}
  .after-section .claim .hand{font-size:30px}

  /* ---------- pricing ---------- */
  .pricing{padding:96px 0}
  .pricing .wrap{max-width:820px}
  .pricing .head,.pricing .costcase,.pricing .stackbox,.pricing .trial{max-width:100%;width:100%}
  .pricing .head{max-width:680px;margin-bottom:52px}
  .pricing h2{font-size:clamp(30px,4vw,44px);font-weight:800;margin:14px 0 14px}
  .pricing .sub{font-size:18px;color:var(--brown)}
  .tiers{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:840px}
  .tier{background:var(--white);border-radius:10px;padding:38px 32px;box-shadow:0 12px 34px rgba(46,42,36,.09)}
  .tier.feature{border:2px solid var(--olive-deep);position:relative}
  .tier .tag{position:absolute;top:-16px;left:30px;background:var(--olive);color:var(--white);font-family:var(--hand);font-size:20px;padding:4px 18px;border-radius:20px;transform:rotate(-2deg)}
  .tier .tname{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive-deep)}
  .tier .price{font-family:var(--display);font-weight:800;font-size:50px;margin:14px 0 2px}
  .tier .per{font-size:13.5px;color:#8a8271;margin-bottom:20px}
  .tier p{font-size:15.5px;color:var(--brown);margin-bottom:24px}
  .pricing .trial{margin-top:44px;max-width:840px;background:var(--olive-deep);color:var(--cream);border-radius:12px;padding:38px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
  .pricing .trial h3{font-size:26px;font-weight:800;color:var(--white)}
  .pricing .trial p{color:#e8e4d6;font-size:15.5px;margin-top:8px;max-width:32em}
  .pricing .trial .btn{background:var(--cream);color:var(--olive-deep)}
  .pricing .trial .hand-corner{position:absolute;top:14px;right:26px;font-family:var(--hand);font-size:22px;color:var(--olive-soft);transform:rotate(3deg)}

  /* ---------- faq ---------- */
  .faq{padding:96px 0;background:var(--cream-deep)}
  .faq .wrap{max-width:800px}
  .faq h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin:14px 0 36px}
  .faq details{background:var(--white);border-radius:8px;padding:22px 26px;margin-bottom:14px;box-shadow:0 6px 20px rgba(46,42,36,.06)}
  .faq summary{font-family:var(--display);font-weight:700;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::after{content:"+";font-family:var(--hand);color:var(--olive-deep);font-size:30px;flex-shrink:0;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq details p{margin-top:14px;font-size:16px;color:var(--brown);max-width:42em}

  /* ---------- final cta ---------- */
  .final{padding:112px 0;text-align:center}
  .final img{height:110px;width:110px;border-radius:50%;margin-bottom:28px;box-shadow:0 12px 30px rgba(46,42,36,.15)}
  .final h2{font-size:clamp(32px,4.6vw,52px);font-weight:800;max-width:17em;margin:0 auto 14px}
  .final h2 em{font-style:italic;color:var(--olive-deep)}
  .final .hand{font-size:28px;display:block;margin-bottom:32px;transform:rotate(-1deg)}
  .final .btn{font-size:17px;padding:18px 40px}
  .final .note{margin-top:18px;display:block}

  footer{padding:48px 0 60px;border-top:1px solid var(--cream-deep);background:var(--cream)}
  footer .frow{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
  footer .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
  footer .brand img{height:44px;width:44px;border-radius:50%}
  footer .brand span{font-family:var(--display);font-weight:700;font-size:17px}
  footer nav a{font-size:14px;color:var(--brown);text-decoration:none;margin-left:22px}
  footer nav a:hover{text-decoration:underline}
  footer .disc{font-size:13px;color:#8a8271;max-width:64em;line-height:1.6}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:52px}
    .stack{padding-top:40px;gap:28px 18px;justify-content:center}
    .villain .wrap{align-items:start}
    .report-bar-inner{padding:36px 24px;gap:26px}
    .villain .wrap{grid-template-columns:1fr;gap:28px}
    .play-grid{grid-template-columns:1fr}
    .picker{grid-template-columns:1fr}
    .twoup .cols{grid-template-columns:1fr;gap:52px}
    .vs{grid-template-columns:1fr}
    .founder .grid{grid-template-columns:1fr;gap:44px}
    .tiers{grid-template-columns:1fr}
    .tuesday .card{padding:44px 28px 38px}
    .hero{padding:48px 0 64px}
    /* The strikethrough phrase is white-space:nowrap so the rule can be drawn
       as one clean bar across it. At phone widths that pushes the headline off
       the right edge - the words are literally cut off and the whole page
       scrolls sideways. Below 900px let it wrap and draw the rule with
       text-decoration instead, which follows each line correctly. */
    .strike{white-space:normal;text-decoration:line-through;text-decoration-color:var(--olive);text-decoration-thickness:3px}
    .strike::after{display:none}
    /* Three "what you get back" cards will not fit side by side on a phone. */
    .after-grid{grid-template-columns:1fr}
  }
  /* Header has three things now (logo, sign in, CTA). On a phone the wordmark is
     the one that can go — the logo still carries the brand, and both links stay
     reachable. */
  @media (max-width:560px){
    .nav{height:66px}
    .nav .brand span{display:none}
    .nav .brand img{height:44px;width:44px}
    .nav-right{gap:14px}
    .nav-signin{font-size:14px}
    .nav-cta{font-size:14px;padding:11px 18px}
  }