/* The Hub — landing page, "Funky & Hand-drawn" (matches app/styles.css). */
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --paper:oklch(0.972 0.018 90);
  --panel:oklch(0.995 0.008 90);
  --ink:oklch(0.20 0.02 65);
  --ink-soft:oklch(0.42 0.02 65);
  --ink-faint:oklch(0.45 0.02 65);
  --hair:oklch(0.88 0.02 85);
  --flame:oklch(0.70 0.19 47);
  --flame-deep:oklch(0.60 0.18 42);
  --flame-wash:oklch(0.93 0.06 65);
  --blue:oklch(0.62 0.16 250);--blue-wash:oklch(0.93 0.05 250);
  --red:oklch(0.62 0.20 25);--red-wash:oklch(0.93 0.06 30);
  --mint:oklch(0.74 0.15 162);--mint-wash:oklch(0.93 0.07 162);
  --go:oklch(0.60 0.14 162);
  --sun:oklch(0.85 0.15 92);
  --green:oklch(0.55 0.13 162);
  --amber:oklch(0.64 0.13 72);--amber-wash:oklch(0.93 0.08 82);
  --rose:oklch(0.58 0.18 355);--rose-wash:oklch(0.93 0.06 355);
  --teal:oklch(0.55 0.10 200);--teal-wash:oklch(0.92 0.05 200);
  --dropship:oklch(0.55 0.17 275);--dropship-wash:oklch(0.93 0.05 275);
  --font-display:'Shantell Sans',system-ui,sans-serif;
  --font:'Hanken Grotesk',system-ui,sans-serif;
  --sh:4px 4px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.01em;line-height:1.05;font-weight:800}
a{color:inherit;text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.doodle{position:relative;display:inline-block}
.doodle::after{content:"";position:absolute;left:0;right:-6px;bottom:-12px;height:12px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cpath d='M3 8 Q 22 2 42 7 T 82 7 T 122 6 T 162 8 T 202 6 T 237 7' fill='none' stroke='%23e8722e' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:700;font-size:15px;border:2.5px solid var(--ink);transition:.14s cubic-bezier(.3,.9,.3,1);cursor:pointer}
.btn-primary{background:var(--flame);color:var(--ink);box-shadow:var(--sh)}
.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-lg)}
.btn-ghost{background:var(--panel);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-ghost:hover{transform:translate(-1px,-1px);box-shadow:var(--sh)}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:oklch(0.972 0.018 90 / 0.9);backdrop-filter:blur(6px);border-bottom:2.5px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--font-display);font-weight:800;font-size:24px;display:flex;align-items:center;gap:11px}
.logo .dot{width:16px;height:16px;background:var(--flame);border:2px solid var(--ink);border-radius:5px;transform:rotate(-8deg)}
.hub-mark{width:31px;height:31px;flex-shrink:0;background:var(--flame);border:2.5px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg);display:inline-flex;align-items:center;justify-content:center;line-height:0}
.hub-mark b{transform:rotate(6deg);font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--panel)}

/* Hero */
.hero{padding:70px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:14px;background:var(--sun);border:2px solid var(--ink);border-radius:20px;padding:6px 14px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-1.5deg);margin-bottom:22px}
.hero h1{font-size:52px}
.hero h1 .hl{color:var(--flame-deep)}
.hero .sub{font-size:18px;color:var(--ink-soft);margin-top:22px;max-width:46ch}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .trust{margin-top:18px;font-size:13.5px;color:var(--ink-faint);font-weight:500}

/* Hero preview card (product imagery) */
.preview{background:var(--panel);border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);padding:22px;transform:rotate(1.5deg)}
.preview .plabel{font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--flame-deep);text-transform:uppercase;letter-spacing:.5px}
.preview .phook{font-family:var(--font-display);font-size:20px;font-weight:700;margin:8px 0 16px;line-height:1.25}
.preview .prow{display:flex;gap:8px;flex-wrap:wrap}
.pchip{font-size:12px;font-weight:700;padding:7px 12px;border:2px solid var(--ink);border-radius:11px;background:var(--panel)}
.pchip.on{background:var(--flame)}
.preview .pmeter{margin-top:18px}
.preview .pmeter .pt{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--flame-deep);margin-bottom:6px}
.preview .ptrack{height:12px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.preview .pfill{height:100%;width:70%;background:var(--flame)}

/* Sections */
.section{padding:56px 0;border-top:2.5px dashed var(--hair);scroll-margin-top:88px}
.section h2{font-size:34px;margin:0 auto 8px;width:fit-content;max-width:100%;text-align:center}
.section .lede{color:var(--ink-soft);font-size:17px;margin:0 auto 34px;max-width:56ch;text-align:center}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.step{background:var(--panel);border:2.5px solid var(--ink);border-radius:18px;padding:22px;box-shadow:var(--sh)}
.step .n{font-family:var(--font-display);font-weight:800;font-size:20px;width:40px;height:40px;background:var(--sun);border:2.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:6px}
.step p{font-size:14px;color:var(--ink-soft)}
.step:nth-child(2) .n{background:var(--blue-wash)}
.step:nth-child(3) .n{background:var(--mint-wash)}
.step:nth-child(4) .n{background:var(--flame-wash)}

/* Method grid */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.m-tile{background:var(--panel);border:2.5px solid var(--ink);border-radius:18px;padding:20px 16px;box-shadow:var(--sh)}
.m-tile .mi{width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.m-tile h3{font-size:17px}
.m-tile .st{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;margin-top:6px;color:var(--ink-faint)}
.m-tile.live-f .mi{background:var(--blue-wash);color:var(--blue)}.m-tile.live-f .st{color:var(--blue)}
.m-tile.live-a .mi{background:var(--red-wash);color:var(--red)}.m-tile.live-a .st{color:var(--red)}
.m-tile.live-d .mi{background:var(--mint-wash);color:var(--green)}.m-tile.live-d .st{color:var(--green)}
.m-tile.live-e .mi{background:var(--rose-wash);color:var(--rose)}.m-tile.live-e .st{color:var(--rose)}
.m-tile.live-am .mi{background:var(--amber-wash);color:var(--amber)}.m-tile.live-am .st{color:var(--amber)}
.m-tile.live-u .mi{background:var(--teal-wash);color:var(--teal)}.m-tile.live-u .st{color:var(--teal)}
.m-tile.live-y .mi{background:var(--red-wash);color:var(--red)}.m-tile.live-y .st{color:var(--red)}
.m-tile.live-fr .mi{background:var(--amber-wash);color:var(--amber)}.m-tile.live-fr .st{color:var(--amber)}
.m-tile.live-ds .mi{background:var(--dropship-wash);color:var(--dropship)}.m-tile.live-ds .st{color:var(--dropship)}
.m-tile.soon{opacity:.55;box-shadow:none;background:var(--paper)}
.m-tile .mdesc{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.m-tile .fast-tag{display:inline-block;margin-top:11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;background:var(--flame-wash);color:var(--flame-deep);border:1.5px solid var(--ink);border-radius:7px;padding:3px 8px}

/* ── Affiliate-tile link into the featured program ── */
.m-real{display:inline-block;margin-top:11px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:var(--flame);color:var(--ink);border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);padding:5px 9px;text-decoration:none;transition:.14s cubic-bezier(.3,.9,.3,1)}
.m-real:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ── Featured real program (Quoted affiliate · Iowa) ── */
.qf-flag{display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:9px;box-shadow:2px 2px 0 var(--ink);padding:6px 12px;transform:rotate(-1.5deg);margin-bottom:14px}
.qf{background:var(--flame-wash);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sh-lg);padding:30px;transform:rotate(-.6deg)}
.qf-body{transform:rotate(.6deg)}
.qf-title{font-size:26px;line-height:1.15;margin:14px 0 10px}
.qf-title .hl{color:var(--flame-deep)}
.qf-desc{font-size:16px;color:var(--ink-soft);max-width:52ch;margin-bottom:18px}
.qf-ladder{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.qf-rung{background:var(--panel);border:2.5px solid var(--ink);border-radius:14px;box-shadow:var(--sh);padding:12px 18px;text-align:center;min-width:92px}
.qf-rung b{display:block;font-family:var(--font-display);font-size:24px;color:var(--flame-deep);line-height:1}
.qf-rung span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.qf-fit{font-size:13.5px;color:var(--ink-faint);margin-bottom:22px}
.qf-fit b{color:var(--ink)}
/* the money band — the part that actually sells it */
.qf-money{background:var(--panel);border:2.5px solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:20px;margin:6px 0 18px}
.qf-money-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.qf-money-big b{font-family:var(--font-display);font-size:52px;line-height:.95;color:var(--flame-deep)}
.qf-money-big span{font-size:15px;color:var(--ink-soft);max-width:30ch}
.qf-money-big strong{color:var(--ink)}
.qf-money-scale{display:flex;gap:10px;flex-wrap:wrap;border-top:2px dashed var(--hair);padding-top:14px}
.qf-money-scale div{flex:1;min-width:84px;text-align:center;background:var(--paper);border:2px solid var(--ink);border-radius:11px;padding:9px 6px}
.qf-money-scale div.hi{background:var(--sun)}
.qf-money-scale i{display:block;font-style:normal;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint);margin-bottom:3px}
.qf-money-scale div.hi i{color:var(--ink)}
.qf-money-scale span{display:block;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--flame-deep);font-variant-numeric:tabular-nums}
.qf-clock{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.qf-clock b{color:var(--ink)}
.qf-tip{background:var(--mint-wash);border:2.5px solid var(--ink);border-radius:14px;box-shadow:var(--sh);padding:14px 16px;margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.qf-tip b{color:var(--ink)}
.qf-tip em{font-style:normal;font-weight:800;color:var(--flame-deep)}
.qf-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.qf-money-note{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft);text-align:center}
.qf-money-note b{color:var(--ink)}
.qf-ladder-cap{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-faint);margin-bottom:8px}
.qf-assume{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin:14px 0 12px}
@media(max-width:560px){.qf-money-big b{font-size:42px}}
@media(max-width:560px){.qf{padding:22px}.qf-title{font-size:22px}.qf-rung{flex:1;min-width:0}}
.about{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center}
.about-photo{position:relative;overflow:hidden;aspect-ratio:1;border:2.5px solid var(--ink);border-radius:18px;background:var(--flame-wash);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--ink-soft);font-size:22px;padding:12px}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-body p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-bottom:12px}
.about-contact{font-weight:600}
.about-contact a{color:var(--flame-deep)}

/* Honesty */
.honesty{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hcard{border:2.5px solid var(--ink);border-radius:18px;padding:24px;box-shadow:var(--sh)}
.hcard.is{background:var(--mint-wash)}
.hcard.isnt{background:var(--red-wash)}
.hcard h3{font-size:20px;margin-bottom:14px}
.hcard li{list-style:none;padding:7px 0 7px 28px;position:relative;font-size:15px;font-weight:500}
.hcard.is li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--go)}
.hcard.isnt li::before{content:"✕";position:absolute;left:0;font-weight:800;color:var(--red)}
.honest-line{font-family:var(--font-display);font-size:20px;font-weight:700;text-align:center;margin-top:30px;line-height:1.4}

/* Pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin-left:auto;margin-right:auto}
.price{background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:28px;box-shadow:var(--sh)}
.price.pro{background:var(--amber-wash);color:var(--ink);box-shadow:var(--sh-lg)}
.price .pt{font-family:var(--font-display);font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px}
.price .amt{font-family:var(--font-display);font-size:42px;font-weight:800;margin:12px 0 4px}
.price .amt span{font-size:16px;font-weight:600;color:var(--ink-faint)}
.price .amt .was{text-decoration:line-through;color:var(--ink-faint);font-size:24px;font-weight:600;margin-right:9px}
.launch-badge{font-family:var(--font-display);font-size:11px;font-weight:800;background:var(--mint);color:var(--ink);border:2px solid var(--ink);border-radius:20px;padding:3px 10px;transform:rotate(-2deg);display:inline-block}
.price.pro .amt span{color:var(--ink-faint)}
.price ul{margin:18px 0;list-style:none}
.price li{padding:8px 0 8px 26px;position:relative;font-size:14.5px;font-weight:500}
.price li::before{content:"\2192";position:absolute;left:0;font-weight:800;color:var(--flame)}
.badge-soon{font-family:var(--font-display);font-size:12px;font-weight:800;background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:20px;padding:3px 11px;transform:rotate(-2deg);display:inline-block}
.price.pro .btn-ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:2px 2px 0 var(--paper)}

/* Sample plan */
.sample-niches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;justify-content:center}
.npill{padding:9px 16px;border:2px solid var(--ink);border-radius:20px;font-size:14px;font-weight:700;background:var(--panel);color:var(--ink-soft);cursor:pointer;transition:.14s cubic-bezier(.3,.9,.3,1)}
.npill:hover{background:var(--sun);color:var(--ink)}
.npill.on{background:var(--flame);color:var(--ink)}
.sample-card{background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:26px 28px;box-shadow:var(--sh-lg);max-width:640px;margin-left:auto;margin-right:auto}
.s-label{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--flame-deep);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.s-field{border-top:2px dashed var(--hair);padding:14px 0}
.s-field:first-of-type{border-top:none;padding-top:0}
.s-flabel{font-family:var(--font-display);font-size:13px;font-weight:800;margin-bottom:8px}
.s-hook{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.25}
.s-beat{display:flex;gap:11px;padding:5px 0;font-size:15px;line-height:1.5}
.s-bn{font-family:var(--font-display);font-weight:800;color:var(--flame-deep);flex-shrink:0}
.s-tag{color:var(--blue);font-weight:700;font-size:14px;margin-right:6px}

/* Guarantee */
.guarantee{text-align:center;background:var(--mint-wash);border:2.5px solid var(--ink);border-radius:22px;padding:36px 28px;box-shadow:var(--sh-lg);max-width:720px;margin:0 auto}
.g-badge{display:inline-block;font-family:var(--font-display);font-size:13px;font-weight:800;background:var(--flame);color:var(--ink);border:2px solid var(--ink);border-radius:20px;padding:6px 14px;transform:rotate(-1.5deg)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{background:var(--panel);border:2.5px solid var(--ink);border-radius:16px;padding:20px 22px;box-shadow:var(--sh)}
.faq-item h3{font-size:17px;margin-bottom:8px}
.faq-item p{font-size:14.5px;color:var(--ink-soft)}

/* Lead magnet */
.lead-form{display:flex;gap:12px;max-width:460px;margin:0 auto;justify-content:center;flex-wrap:wrap}
.lead-input{flex:1;min-width:220px;background:var(--panel);border:2.5px solid var(--ink);border-radius:13px;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.lead-input:focus{outline:none;box-shadow:var(--sh);transform:translate(-1px,-1px)}
.lead-thanks{display:none;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--flame-deep);margin-top:16px}

/* Footer */
.foot{border-top:2.5px solid var(--ink);padding:34px 0;text-align:center;color:var(--ink-soft);font-size:14px}
.foot .fl{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink)}

@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}.preview{transform:rotate(0);order:-1}
  .hero h1{font-size:40px}.honesty{grid-template-columns:1fr}.prices{grid-template-columns:1fr}.about{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .hero h1{font-size:33px}
  .section h2{font-size:27px}
  .price .amt{font-size:36px}
  .sub{font-size:16px}
}

/* Single-plan pricing + optional video packs. */
.prices.one{display:flex;justify-content:center}
.prices.one .price{max-width:420px;width:100%}
.vpacks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:22px}
.vpack{position:relative;border:2.5px solid var(--ink);border-radius:16px;padding:20px 18px;background:var(--panel);box-shadow:var(--sh)}
.vpack.best{background:var(--flame-wash)}
.vp-tag{position:absolute;top:-12px;right:14px;background:var(--mint);border:2px solid var(--ink);border-radius:999px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:3px 10px}
.vp-n{font-family:var(--font-display);font-weight:800;font-size:17px}
.vp-p{font-family:var(--font-display);font-weight:800;font-size:28px;margin:4px 0 8px}
.vpack p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}