/* Style F – "Sketch": napkin sketch on graph paper – marker, ballpoint, highlighter, sticky notes. 2026-11-03 */
[data-theme=f]{
  --paper:#fdfbf4;--grid:#e1eaf4;--ink:#1f1d1a;--muted:#5d5850;--pen:#2453c6;--red:#e2412f;--green:#2f9e57;
  --hl:rgba(255,222,40,.85);--sticky:#fff27a;--tape:rgba(232,216,172,.82);
  --marker:"Permanent Marker","Comic Sans MS",cursive;--hand:Caveat,"Segoe Print",cursive;--body:"Shantell Sans","Segoe UI",system-ui,sans-serif;
  --rough:255px 15px 225px 15px/15px 225px 15px 255px;--box:18px 6px 22px 8px/8px 20px 6px 18px;
  --track:linear-gradient(#1f1d1a,#1f1d1a) 0 50%/100% 2px no-repeat;--fill-img:linear-gradient(rgba(255,222,40,.9),rgba(255,222,40,.9));
  --thumb:#fff;--th:24px;--trk-h:14px;--trk-r:3px;--th-r:50% 45% 55% 50%;--th-b:2.5px solid #1f1d1a;--th-sh:2px 2px 0 #1f1d1a;
  --focus:#2453c6;--calc-sep:2px dashed rgba(31,29,26,.35);--catch-ok:#2f9e57;color-scheme:light}
[data-theme=f] body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;color:var(--ink);font:400 17px/1.6 var(--body)}
[data-theme=f] body::before{content:"";position:fixed;left:58px;top:0;bottom:0;width:2px;background:rgba(226,65,47,.32);z-index:1;pointer-events:none}

/* top bar */
[data-theme=f] .topbar{background:rgba(253,251,244,.95);border-bottom:2.5px solid var(--ink)}
[data-theme=f] .switcher{background:#f1e6c8;border-bottom:2px dashed rgba(31,29,26,.28);--sw-ico:#e2412f}
[data-theme=f] .sw-claim{font:600 19px/1.15 var(--hand)}
[data-theme=f] .sw-claim strong{font-weight:700}
[data-theme=f] .sw-tabs{gap:6px}
[data-theme=f] .sw-tabs button{font:700 19px/1 var(--hand);border:2px solid var(--ink);border-radius:var(--rough);background:#fff}
[data-theme=f] .sw-tabs button:hover{transform:rotate(-2deg)}
[data-theme=f] .sw-tabs button[aria-checked=true]{background:var(--sticky);transform:rotate(-1.5deg)}
[data-theme=f] .wordmark{font:400 25px/1 var(--marker)}
[data-theme=f] .mark-box{width:42px;height:42px;border:2.5px solid var(--ink);border-radius:var(--rough);background:var(--sticky);transform:rotate(-4deg)}
[data-theme=f] .mark{width:19px;height:24px;fill:var(--ink)}
[data-theme=f] .nav-links{gap:22px;font:700 22px/1 var(--hand)}
[data-theme=f] .nav-links a:hover{color:var(--red);text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:5px}
[data-theme=f] .btn{padding:13px 22px;font:400 17px/1.1 var(--marker);border:2.5px solid var(--ink);border-radius:var(--rough)}
[data-theme=f] .btn:hover{transform:rotate(-1.5deg) translateY(-2px)}
[data-theme=f] .btn-primary{background:var(--ink);color:var(--paper);box-shadow:3px 4px 0 var(--red)}
[data-theme=f] .btn-secondary{background:#fff}
[data-theme=f] .btn-secondary:hover{background:var(--sticky)}
[data-theme=f] .nav-cta{padding:10px 16px;font-size:15px}

/* hero: napkin with a sketch, sticky note, coffee ring */
[data-theme=f] .hero{padding:66px 0 20px}
[data-theme=f] .hero-in{grid-template-columns:1.05fr .95fr;gap:44px}
[data-theme=f] .badge{display:inline-block;font:700 25px/1.1 var(--hand);color:var(--pen);transform:rotate(-2deg)}
[data-theme=f] h1{font:400 clamp(44px,6.2vw,86px)/1.02 var(--marker);margin:16px 0 24px}
[data-theme=f] h1 em{font-style:normal;padding:0 .1em;margin:0 -.04em;background:linear-gradient(176deg,transparent 40%,var(--hl) 42%,var(--hl) 86%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme=f] .lead{font-size:19px;max-width:600px;margin-bottom:30px;color:#35322d}
[data-theme=f] .lead strong{font-weight:700;text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:5px}
[data-theme=f] .f-stain{position:absolute;top:40px;right:2%;width:150px;height:150px;border-radius:50%;border:9px solid rgba(166,112,52,.15);border-top-color:rgba(166,112,52,.06);box-shadow:inset 0 0 0 3px rgba(166,112,52,.07);transform:rotate(25deg) scale(1,.93)}
[data-theme=f] .f-art{position:relative;padding:6px 26px 46px 6px}
[data-theme=f] .f-napkin{position:relative;padding:14px;border-radius:4px;transform:rotate(-2.5deg);
  background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(31,29,26,.05) 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),rgba(31,29,26,.05) 50%,transparent calc(50% + 1px)),#fffefa;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 34px -12px rgba(70,45,10,.3);outline:1.5px dashed rgba(31,29,26,.13);outline-offset:-11px}
[data-theme=f] .f-sketch{width:100%;height:auto;overflow:visible}
[data-theme=f] .f-l1{fill:none;stroke:var(--ink);stroke-width:4.6;stroke-linejoin:round;stroke-linecap:round}
[data-theme=f] .f-l2{fill:none;stroke:var(--ink);stroke-width:2;opacity:.42}
[data-theme=f] .f-hl{fill:rgba(255,222,40,.85)}
[data-theme=f] .f-mane path{fill:none;stroke-width:19;stroke-linecap:round;opacity:.5}
[data-theme=f] .f-mane .m1{stroke:#ff5fb0}[data-theme=f] .f-mane .m2{stroke:#3fb2ff}[data-theme=f] .f-mane .m3{stroke:#3ddc84}
[data-theme=f] .f-pen path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
[data-theme=f] .f-eye{fill:var(--ink)}
[data-theme=f] .f-ink path{fill:none;stroke:var(--pen);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme=f] .f-ink .f-red{stroke:var(--red);stroke-width:3}
[data-theme=f] .f-t{font:700 31px var(--hand);fill:var(--pen)}
[data-theme=f] .f-list{font-size:27px;fill:#1d3f9a}
[data-theme=f] .f-red-t{fill:var(--red);font-size:30px}
[data-theme=f] .f-sticky{position:absolute;right:0;bottom:0;width:200px;padding:20px 16px 16px;background:var(--sticky);font:700 28px/1 var(--hand);transform:rotate(5deg);box-shadow:0 12px 18px -10px rgba(0,0,0,.4)}
[data-theme=f] .f-sticky small{display:block;margin-top:6px;font:600 18px/1.1 var(--hand)}
[data-theme=f] .f-sticky::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;background:var(--tape);transform:translateX(-50%) rotate(-4deg)}
[data-theme=f] .facts{gap:18px;margin-top:44px}
[data-theme=f] .fact{padding:20px 18px 18px;background:var(--sticky);box-shadow:0 12px 16px -12px rgba(0,0,0,.45);transform:rotate(-1.4deg)}
[data-theme=f] .fact:nth-child(2){background:#ffcbe6;transform:rotate(1.2deg)}
[data-theme=f] .fact:nth-child(3){background:#cdeaff;transform:rotate(-.8deg)}
[data-theme=f] .fact:nth-child(4){background:#cdf6cf;transform:rotate(1.6deg)}
[data-theme=f] .fact .v{font:400 30px/1.05 var(--marker);white-space:nowrap}
[data-theme=f] .fact .l{font:700 21px/1.1 var(--hand)}

/* sections */
[data-theme=f] .sec{padding:100px 0 0}
[data-theme=f] .kicker{display:inline-block;font:700 26px/1 var(--hand);color:var(--pen);margin-bottom:10px;transform:rotate(-2deg)}
[data-theme=f] .kicker::after{content:" ↘"}
[data-theme=f] h2{font:400 clamp(32px,4.4vw,56px)/1.1 var(--marker);max-width:900px}
[data-theme=f] h2 .soft{font:700 1.12em/1 var(--hand);color:var(--pen)}
[data-theme=f] .sub{font-size:18px;color:var(--muted);max-width:680px;margin-top:14px}
[data-theme=f] .needs-try{background:#fff;border:2px dashed var(--ink);border-radius:var(--box);padding:14px 16px 14px 20px}
[data-theme=f] .needs-try p{font:700 25px/1.15 var(--hand);color:var(--red)}

/* calculator */
[data-theme=f] .calc{background:#fff;border:2.5px solid var(--ink);border-radius:var(--box);box-shadow:6px 7px 0 rgba(31,29,26,.16)}
[data-theme=f] .calc-in,[data-theme=f] .calc-out{padding:30px}
[data-theme=f] .ctl label,[data-theme=f] .ctl .lbl{font:700 24px/1 var(--hand)}
[data-theme=f] .ctl output{font:400 17px/1.2 var(--marker);color:var(--pen)}
[data-theme=f] .ctl-scale{font:700 18px/1 var(--hand);opacity:.8}
[data-theme=f] .tier-btn{border:2px solid var(--ink);border-radius:var(--rough);padding:7px 12px;font:700 20px/1 var(--hand);background:#fff}
[data-theme=f] .tier-btn:hover{background:#fffbd6}
[data-theme=f] .tier-btn[aria-checked=true]{background:var(--sticky);transform:rotate(-1.5deg)}
[data-theme=f] .res .k{font:700 22px/1 var(--hand);color:var(--muted)}
[data-theme=f] .res .v{font:400 36px/1.05 var(--marker)}
[data-theme=f] .bar{height:18px;border:2px solid var(--ink);border-radius:5px 9px 4px 8px}
[data-theme=f] .bar-old{background:repeating-linear-gradient(45deg,rgba(31,29,26,.5) 0 2px,transparent 2px 7px)}
[data-theme=f] .bar-new{background:rgba(61,220,132,.85)}
[data-theme=f] .bar-lab{font:700 21px/1.1 var(--hand)}
[data-theme=f] .bar-lab span:last-child{font:400 16px/1.3 var(--marker)}
[data-theme=f] .save{font-size:18px}
[data-theme=f] .save b{display:inline-block;padding:2px 10px;font:400 22px/1.2 var(--marker);color:var(--red);border:2.5px solid var(--red);border-radius:50% 45% 55% 48%/55% 50% 45% 50%;transform:rotate(-2deg)}
[data-theme=f] .ai-note{font-size:15px;color:var(--muted);margin-top:16px;padding-top:16px;border-top:2px dashed rgba(31,29,26,.3)}
[data-theme=f] .ai-note a{color:var(--pen);text-decoration:underline}
[data-theme=f] .fine{font-size:14px;color:var(--muted);margin-top:16px}

/* cards: taped index cards */
[data-theme=f] .cards{gap:24px;counter-reset:fcard}
[data-theme=f] .card{position:relative;counter-increment:fcard;background:#fff;border:2px solid var(--ink);border-radius:var(--box);padding:30px 22px 22px;transform:rotate(-.7deg);transition:transform .2s}
[data-theme=f] .card:nth-child(even){transform:rotate(.6deg)}
[data-theme=f] .card:hover{transform:rotate(0) translateY(-4px)}
[data-theme=f] .card::after{content:"";position:absolute;top:-11px;left:50%;width:70px;height:22px;background:var(--tape);transform:translateX(-50%) rotate(3deg)}
[data-theme=f] .card .ic::before{content:counter(fcard);display:grid;place-items:center;width:44px;height:44px;border:2.5px solid var(--red);border-radius:50% 45% 52% 48%/50% 55% 45% 50%;font:400 22px/1 var(--marker);color:var(--red);transform:rotate(-6deg)}
[data-theme=f] .card h3{font:400 21px/1.2 var(--marker);margin:14px 0 8px}
[data-theme=f] .card p{font-size:15.5px;color:var(--muted)}

/* compare */
[data-theme=f] .compare-wrap{background:#fff;border:2.5px solid var(--ink);border-radius:var(--box)}
[data-theme=f] .compare{font-size:16px}
[data-theme=f] .compare th,[data-theme=f] .compare td{padding:16px 20px;border-bottom:2px dashed rgba(31,29,26,.22)}
[data-theme=f] .compare tr:last-child td{border-bottom:0}
[data-theme=f] .compare th{font:700 24px/1 var(--hand)}
[data-theme=f] .compare th.us{color:var(--red)}
[data-theme=f] .compare td:first-child{font:700 21px/1.2 var(--hand)}
[data-theme=f] .compare td:nth-child(2){color:var(--muted)}
[data-theme=f] .compare td.us{font-weight:700}
[data-theme=f] .compare td.us::before{content:"✓ ";color:var(--green);font:700 24px/1 var(--hand)}

/* steps */
[data-theme=f] .steps{gap:34px}
[data-theme=f] .step{position:relative}
[data-theme=f] .step::before{content:counter(step);display:grid;place-items:center;width:60px;height:60px;margin-bottom:16px;border:3px solid var(--ink);border-radius:50% 45% 55% 48%/52% 50% 48% 50%;background:var(--sticky);font:400 28px/1 var(--marker);transform:rotate(-5deg)}
[data-theme=f] .step::after{content:"⟶";position:absolute;top:8px;right:-30px;font:700 40px/1 var(--hand);color:var(--pen)}
[data-theme=f] .step:last-child::after{content:none}
[data-theme=f] .step h3{font:400 22px/1.2 var(--marker);margin-bottom:6px}
[data-theme=f] .step p{color:var(--muted);font-size:15.5px}

/* pricing */
[data-theme=f] .tiers{gap:18px}
[data-theme=f] .tier{position:relative;background:#fff;border:2px solid var(--ink);border-radius:var(--box);padding:24px 18px 20px;transform:rotate(.6deg)}
[data-theme=f] .tier:nth-child(even){transform:rotate(-.8deg)}
[data-theme=f] .tier::before{content:"";position:absolute;top:-11px;left:22px;width:58px;height:22px;background:var(--tape);transform:rotate(-6deg)}
[data-theme=f] .tier .p{font:400 34px/1 var(--marker)}
[data-theme=f] .tier .p small{font:700 20px/1 var(--hand);color:var(--muted)}
[data-theme=f] .tier .t{display:inline-block;align-self:flex-start;margin:12px 0 6px;font:700 23px/1 var(--hand);color:var(--pen);background:linear-gradient(transparent 55%,var(--hl) 55% 90%,transparent 90%)}
[data-theme=f] .tier p{font-size:14.5px;color:var(--muted)}
[data-theme=f] .tier .spd{font:700 20px/1.1 var(--hand);color:var(--red)}
[data-theme=f] .price-note{font-size:15px;color:var(--muted);margin-top:22px}
[data-theme=f] .catch{margin-top:30px;background:var(--sticky);padding:30px 32px;transform:rotate(-.5deg);box-shadow:0 18px 26px -18px rgba(0,0,0,.5)}
[data-theme=f] .catch .one{display:grid;place-items:center;width:96px;height:96px;font:400 54px/1 var(--marker);color:var(--red);border:3px solid var(--red);border-radius:50% 45% 55% 48%/52% 50% 48% 50%;transform:rotate(-6deg)}
[data-theme=f] .catch h3{font:400 27px/1.1 var(--marker);margin-bottom:10px}
[data-theme=f] .catch p{font-size:16.5px}
[data-theme=f] .catch .catch-total{font:700 25px/1.15 var(--hand);color:var(--red)}

/* investors */
[data-theme=f] .chart{background:#fff;border:2.5px solid var(--ink);border-radius:var(--box);padding:26px 28px;transform:rotate(.6deg);box-shadow:6px 7px 0 rgba(31,29,26,.16)}
[data-theme=f] .chart-t{font:700 23px/1.1 var(--hand);color:var(--pen);margin-bottom:8px}
[data-theme=f] .chart-row{margin:14px 0;font:700 21px/1.1 var(--hand)}
[data-theme=f] .chart-row > span:last-child{font:400 16px/1 var(--marker)}
[data-theme=f] .chart-track{height:18px;border:2px solid var(--ink);border-radius:4px 9px 5px 8px;overflow:hidden}
[data-theme=f] .chart-b{height:100%;background:repeating-linear-gradient(45deg,rgba(31,29,26,.5) 0 2px,transparent 2px 7px)}
[data-theme=f] .chart-b.hl{background:rgba(61,220,132,.85)}

/* extras */
[data-theme=f] .extras{gap:24px}
[data-theme=f] .extra{background:#fff;border:2px solid var(--ink);border-radius:var(--box);padding:26px;transform:rotate(-.5deg)}
[data-theme=f] .extra:nth-child(2){transform:rotate(.7deg)}
[data-theme=f] .extra .yr{display:inline-block;font:700 24px/1 var(--hand);color:var(--red);transform:rotate(-3deg)}
[data-theme=f] .extra .yr::before{content:"★ "}
[data-theme=f] .extra h3{font:400 21px/1.2 var(--marker);margin:12px 0 8px}
[data-theme=f] .extra p{font-size:15.5px;color:var(--muted)}

/* about + FAQ */
[data-theme=f] .sig{font-size:15px;color:var(--muted)}
[data-theme=f] .sig b{font:700 38px/1 var(--hand);color:var(--pen);transform:rotate(-3deg);transform-origin:left;margin-bottom:6px}
[data-theme=f] .sig a{color:var(--pen)}
[data-theme=f] .faq details{border-bottom:2px dashed rgba(31,29,26,.3);padding:16px 0}
[data-theme=f] .faq details:first-child{border-top:2px dashed rgba(31,29,26,.3)}
[data-theme=f] .faq summary{font-weight:700;font-size:17px}
[data-theme=f] .faq summary::after{font:700 32px/1 var(--hand);color:var(--red)}
[data-theme=f] .faq details p{color:var(--muted);margin-top:10px;font-size:15.5px}
[data-theme=f] .faq details a{color:var(--pen)}

/* CTA on a napkin + footer */
[data-theme=f] .sec-cta{margin-top:110px;padding:20px 0 100px;text-align:center}
[data-theme=f] .sec-cta .wrap{max-width:880px;padding:58px 44px;border-radius:4px;transform:rotate(-1deg);background:#fffefa;box-shadow:0 1px 2px rgba(0,0,0,.08),0 22px 40px -16px rgba(70,45,10,.32);outline:1.5px dashed rgba(31,29,26,.13);outline-offset:-13px}
[data-theme=f] .sec-cta h2,[data-theme=f] .sec-cta .sub{margin-left:auto;margin-right:auto}
[data-theme=f] .sec-cta .ctas{justify-content:center;margin-top:30px}
[data-theme=f] .foot{font:700 20px/1.3 var(--hand);color:var(--muted);padding:24px 0 40px;border-top:2px dashed rgba(31,29,26,.3);background:var(--paper)}
[data-theme=f] .foot a:hover{color:var(--red)}

@media (max-width:1300px){
  html[data-theme=f] body::before{display:none}
}
@media (max-width:900px){
  html[data-theme=f] .f-art{max-width:520px;width:100%;margin:0 auto}
  html[data-theme=f] .f-stain{width:100px;height:100px;top:18px;right:-20px}
  html[data-theme=f] .step:nth-child(2n)::after{content:none}
  html[data-theme=f] .facts{gap:16px}
}
@media (max-width:600px){
  html[data-theme=f] .step::after{content:none}
  html[data-theme=f] .fact .v{font-size:24px}
  html[data-theme=f] .fact .l{font-size:19px}
  html[data-theme=f] .f-sticky{width:158px;font-size:22px;padding:16px 12px 12px}
  html[data-theme=f] .f-sticky small{font-size:15px}
  html[data-theme=f] .f-art{padding:4px 10px 40px 0}
  html[data-theme=f] .calc-in,html[data-theme=f] .calc-out{padding:22px}
  html[data-theme=f] .catch{padding:24px 20px}
  html[data-theme=f] .sec-cta .wrap{margin:0 12px;padding:40px 20px}
  html[data-theme=f] .needs-try p{font-size:22px}
}