@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-700-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/doto-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Herr Von Muellerhoff';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/herr-von-muellerhoff-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/roboto-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/roboto-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* generated by font_fallbacks.py */
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 900;size-adjust:124.11%;ascent-override:70.74%;descent-override:16.92%;line-gap-override:0.00%}
@font-face{font-family:"Archivo Narrow Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 900;size-adjust:77.76%;ascent-override:112.91%;descent-override:27.01%;line-gap-override:0.00%}
@font-face{font-family:"Atkinson Fallback";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:98.84%;ascent-override:99.55%;descent-override:31.97%;line-gap-override:0.00%}
@font-face{font-family:"Atkinson Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:99.35%;ascent-override:99.05%;descent-override:31.81%;line-gap-override:0.00%}
@font-face{font-family:"Roboto Mono Fallback";src:local("Courier New"),local("CourierNewPSMT");font-weight:400 700;size-adjust:100.00%;ascent-override:104.79%;descent-override:27.10%;line-gap-override:0.00%}
@font-face{font-family:"Doto Fallback";src:local("Courier New"),local("CourierNewPSMT");font-weight:900;size-adjust:99.98%;ascent-override:95.02%;descent-override:25.00%;line-gap-override:0.00%}
/* Brains over Bots, landing v2. Round-6 palettes: Red & Ink (buyers' pick, default) and Violet Ink & Red (designer's pick).
   One committed light look: every colour is set explicitly. */
:root{
  --stone:#EEEBE6; --ink:#16161C; --accent:#FF0030; --on-accent:#FFFFFF;
  --mist:#CFCDC8; --graphite:#57575F; --field:#F7F6F3; --paper:#FFFFFF;
  --seal-bg:#FF0030; --seal-fg:#FFFFFF; --seal-tick:#FFFFFF;
  --hair:color-mix(in srgb,var(--ink) 18%,transparent);
  --sh:6px 6px 0 var(--ink);
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
  --pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 25l2.2-7.6L19 3.6l5.4 5.4L10.6 22.8z' fill='%23FF0030' stroke='%2316161C' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 25l2.2-7.6 5.4 5.4z' fill='%2316161C'/%3E%3C/svg%3E") 3 25, pointer;
  color-scheme:light;
}
:root[data-palette="violet"]{
  --ink:#1E1330; --mist:#CFC9DA; --graphite:#5C5470; --field:#F6F4F3;
  --seal-bg:#1E1330; --seal-fg:#EEEBE6; --seal-tick:#FF0030;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--stone);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--sans);font-weight:800;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.1rem + 3.7vw,4.4rem);line-height:.95;letter-spacing:-.04em}
h2{font-size:clamp(2.1rem,1.2rem + 3.3vw,4rem);line-height:.98;letter-spacing:-.035em}
h3{font-size:1.3rem;line-height:1.18;letter-spacing:-.015em}
.h2s{font-size:clamp(1.55rem,1.15rem + 1.5vw,2.35rem);line-height:1.04;letter-spacing:-.028em}
p{margin:0;max-width:65ch}
ul,ol{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,44px)}
.mono{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.muted{color:var(--graphite)}
.lead{font-size:clamp(1.12rem,1rem + .5vw,1.36rem);line-height:1.5;max-width:56ch}
.stack{display:grid;gap:var(--gap,20px);align-content:start}
.mt{margin-top:clamp(24px,3vw,44px)}
.red{color:var(--accent)}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent)}
.ph{font-family:var(--mono);font-size:.82em;background:color-mix(in srgb,var(--accent) 14%,var(--stone));color:var(--ink);padding:.05em .35em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ink{background:var(--ink);color:var(--stone)}
.ink .muted{color:var(--mist)}

/* reading progress */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* prototype bar */
.proto{background:var(--ink);color:var(--mist);font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}
.proto .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-block:9px}
.proto .grp{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.proto .lbl{opacity:.75;margin-right:6px}
.proto a,.proto button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#fff;background:none;border:1.5px solid transparent;padding:4px 8px;cursor:pointer;text-decoration:none}
.proto [aria-pressed="true"],.proto [aria-current="page"]{border-color:var(--mist)}
.proto .who{color:#fff}
:root.no-anno .anno{display:none}

/* header */
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--stone);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.wordmark{font:800 1.6rem/1 var(--sans);letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.wordmark b{color:var(--accent);font-weight:800}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:58px;padding:14px 26px;border:2px solid var(--ink);background:var(--accent);color:var(--on-accent);font:800 1.19rem/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;text-align:center;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(5px)}
.btn--ghost{background:var(--paper);color:var(--ink)}
.btn--inv{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 55%,transparent)}
.btn--sm{min-height:42px;padding:8px 14px;font-size:1rem;box-shadow:3px 3px 0 var(--ink)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* sections */
.sec{padding-block:clamp(40px,5.4vw,76px)}
.sec-tight{padding-block:clamp(22px,3vw,40px)}
.sec-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:12px;margin-bottom:clamp(20px,3vw,36px)}
.sec-head .anno{color:var(--graphite)}
.ink .sec-head .anno{color:var(--mist)}

/* kinetic headline */
.kin .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.kin .ln > span{display:inline-block;animation:rise .95s cubic-bezier(.2,.75,.1,1) both}
.kin .ln:nth-child(2) > span{animation-delay:.09s}
.kin .ln:nth-child(3) > span{animation-delay:.18s}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
.scrib{position:relative;white-space:nowrap}
.scrib svg{position:absolute;left:-3%;width:106%;bottom:-.16em;height:.34em;overflow:visible}
.scrib path{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw .75s 1s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* tick seal */
.tick{width:clamp(84px,9vw,140px);height:auto;color:var(--seal-tick);display:block}
.tick path{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;animation:tickdraw .8s cubic-bezier(.55,.1,.3,1) .25s both}
@keyframes tickdraw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
.seal{border:2px solid var(--ink);box-shadow:var(--sh);background:var(--stone)}
.seal-top{background:var(--seal-bg);color:var(--seal-fg);padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
.seal-body{padding:clamp(22px,3vw,40px);display:grid;gap:22px}
.signoff{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;border-top:2px solid var(--ink);padding-top:12px}

/* stamp */
.stamp-seal{display:inline-flex;align-items:center;gap:.4em;border:3px solid var(--accent);color:var(--accent);background:color-mix(in srgb,var(--paper) 70%,transparent);padding:8px 14px;font:800 1.15rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-7deg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.slam{animation:slam .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes slam{0%{transform:rotate(-7deg) scale(2.4);opacity:0}55%{opacity:1}100%{transform:rotate(-7deg) scale(1)}}

/* lists */
.ticks{list-style:none;padding:0;display:grid;gap:8px;font-size:.95rem;line-height:1.45}
.ticks li{position:relative;padding-left:1.55em}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.ticks--row{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:1.02rem}

/* chips / tags */
.tag{display:inline-block;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;border:1.5px solid var(--ink);padding:2px 7px;white-space:nowrap;line-height:1.5}
.tag--dark{background:var(--ink);color:var(--stone)}
.tag--red{background:var(--accent);color:#fff;border-color:var(--accent)}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{display:inline-flex;align-items:baseline;gap:.4em;border:2px solid var(--ink);padding:6px 10px;background:var(--paper)}
.stat b{font:800 1.15rem/1 var(--sans);letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}

/* forms */
.card{border:2px solid var(--ink);background:var(--paper);padding:clamp(20px,2.6vw,32px);box-shadow:var(--sh)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:600;margin-bottom:10px;padding:0}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slot{position:relative;display:grid;gap:1px;border:2px solid var(--ink);padding:10px 12px;background:var(--field);cursor:pointer;transition:transform .12s ease}
.slot:hover{transform:translateY(-2px)}
.slot input,.chip-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.slot .d{font-weight:600;font-size:.95rem}
.slot .t{font:800 1.4rem/1.1 var(--sans);letter-spacing:-.02em}
.slot .z{font-size:.7rem}
.slot--wide{grid-column:1/-1}
.slot--wide .t{font-size:1.05rem}
.slot:has(input:checked),.chip-opt:has(input:checked){background:var(--ink);color:var(--stone)}
.slot:has(input:focus-visible),.chip-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.95rem}
input[type=text],input[type=email],input[type=tel],input[type=number]{font:inherit;font-size:1.05rem;padding:12px 14px;border:2px solid var(--ink);border-radius:0;background:var(--field);color:var(--ink);width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{position:relative;border:1.5px solid var(--ink);padding:8px 12px;font-size:.95rem;line-height:1.3;background:var(--field);cursor:pointer}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.95rem;line-height:1.45;cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}

/* placeholders */
.ph-media,.frame,.photo,.shot{position:relative;border:2px solid var(--ink);max-width:100%;display:grid;place-items:center;padding:18px;text-align:center;margin:0;background:repeating-linear-gradient(135deg,transparent 0 13px,color-mix(in srgb,var(--ink) 7%,transparent) 13px 14px)}
.ph-media{aspect-ratio:16/10}
.frame{aspect-ratio:4/3}
.photo{aspect-ratio:4/5}
.cap{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--stone);padding:4px 8px;font-size:.68rem;text-align:left}

.vq{flex:none;width:min(80vw,420px);border:2px solid var(--ink);background:var(--paper);padding:16px 18px;display:grid;gap:10px;align-content:space-between;box-shadow:4px 4px 0 var(--ink)}
.vq p{font:700 1.08rem/1.35 var(--sans);letter-spacing:-.01em;max-width:none}
.vq p::before{content:"“";color:var(--accent)}
.vq p::after{content:"”";color:var(--accent)}
.vq cite{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:2px solid var(--ink)}
.fact{padding:20px 20px 22px;border-left:2px solid var(--ink);display:grid;gap:6px;align-content:start}
.fact:first-child{border-left:0}
.fact b{font:800 1.3rem/1.15 var(--sans);letter-spacing:-.015em}

/* grids and cards */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--hair);padding-top:24px}
q{quotes:"“" "”" "‘" "’"}
.k{display:block;color:var(--graphite);margin-bottom:4px}

/* two columns, for / not for */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.yes,.no{list-style:none;padding:0;display:grid;margin-top:14px}
.yes li,.no li{position:relative;padding:13px 0 13px 2em;border-top:1px solid var(--hair)}
.yes li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--accent);font-weight:800;font-size:1.15em}
.no li::before{content:"✕";position:absolute;left:0;top:13px;color:var(--graphite);font-weight:800}

/* teacher */
.teacher{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,4vw,56px);align-items:start}
.pull{margin:0;border-left:5px solid var(--accent);padding-left:18px}
.pull p{font:700 1.35rem/1.35 var(--sans);letter-spacing:-.01em}

/* FAQ */
.faq{max-width:780px}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding-block:18px;font:800 1.2rem/1.28 var(--sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--accent);font-size:1.6rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:20px}

/* big closing block */
.closer{background:var(--seal-bg);color:var(--seal-fg)}
.closer h2{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.2rem);line-height:.95}
.closer .ticks li::before{color:var(--seal-fg)}
.closer .muted{color:inherit;opacity:.85}

/* footer, sticky */
.foot{border-top:2px solid var(--ink);padding-block:26px 48px;font-size:.92rem;color:var(--graphite);display:grid;gap:6px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:var(--stone);border-top:2px solid var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}

/* checked facts */
.fact-card{border:2px solid var(--ink);padding:18px 20px;display:grid;gap:10px;align-content:start;background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.big-fact{font:800 1.35rem/1.22 var(--sans);letter-spacing:-.015em}
.big-num{font:800 clamp(3rem,2rem + 3vw,4.6rem)/.9 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stamp{display:inline-flex;align-items:center;gap:.45em;justify-self:start;border:2px solid var(--ink);padding:3px 9px;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.stamp::before{content:"✓";color:var(--accent);font-weight:800;font-size:1.1em}
.ink .stamp{border-color:var(--mist)}
.quote{margin:0;display:grid;gap:8px}
.quote p{font:700 1.32rem/1.32 var(--sans);letter-spacing:-.01em}
.quote p::before{content:"“";color:var(--accent)}
.quote p::after{content:"”";color:var(--accent)}

/* scroll-linked motion, only where supported and wanted */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:grow linear both;animation-timeline:scroll(root)}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rv{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kin .ln > span{animation:none}
  .scrib path,.tick path{animation:none;stroke-dashoffset:0}
  .slam{animation:none}
  .progress{display:none}
}

/* WebGL halftone layers */
.fx-host{position:relative;isolation:isolate}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block}
.fx-host > :not(.fx){position:relative;z-index:1}
.no-webgl .hero-band{background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1.3px,transparent 1.8px);background-size:13px 13px}
.no-webgl .closer{background-image:radial-gradient(color-mix(in srgb,var(--seal-fg) 18%,transparent) 1.5px,transparent 2px);background-size:13px 13px}

/* ---------- shared page components (v2) ---------- */
.hide-sm{}
.band{padding-block:clamp(8px,2vw,24px)}

/* hero, webinar */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"text form" "teaser form";gap:clamp(24px,4vw,56px);padding-block:clamp(8px,2vw,24px) clamp(40px,6vw,72px);align-items:start}
.hero-text{grid-area:text}
.hero-form{grid-area:form}
.teaser{grid-area:teaser}
.kicker{margin:0;display:grid;gap:6px;max-width:46ch;border-left:5px solid var(--accent);padding-left:14px}
.kicker q{font:700 1.1rem/1.35 var(--sans);letter-spacing:-.01em}
.teaser{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;text-decoration:none;color:inherit}
.teaser-doc{display:grid;gap:6px;width:min(300px,60vw);background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh);padding:14px 16px;transform:rotate(-3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-size:.86rem;font-variant-numeric:tabular-nums}
.teaser:hover .teaser-doc{transform:rotate(0) scale(1.03)}
.t-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--hair);padding-top:6px}
.t-total{font-weight:800}
.teaser-cta{font:600 1.08rem/1.35 var(--sans)}
.teaser-cta b{display:block;font-weight:800;font-size:1.55rem;letter-spacing:-.02em}
.teaser-cta .arr{display:inline-block;color:var(--accent);font-weight:800;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* first-screen demo: the teaser corrects itself on a loop */
.td-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.td-stamp{color:var(--accent);border:2px solid var(--accent);padding:2px 6px;font-size:.62rem;transform:rotate(-6deg);opacity:0;animation:tdstamp 7s 3.3s both}
.td-fix{position:relative;font-weight:800;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 58%/0% 2px;animation:tdstrike 7s var(--d,0s) both}
.td-fix::before{content:"";position:absolute;inset:-5px -7px;border:2px solid var(--accent);border-radius:52% 48% 55% 45% / 50% 58% 42% 50%;opacity:0;animation:tdring 7s var(--d,0s) both}
.td-fix::after{content:attr(data-fix);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) rotate(-4deg);background:var(--accent);color:#fff;font:700 .66rem/1 var(--mono);padding:3px 5px;white-space:nowrap;opacity:0;animation:tdlabel 7s var(--d,0s) both}
@keyframes tdstrike{0%,6%{background-size:0% 2px}12%,100%{background-size:100% 2px}}
@keyframes tdring{0%,6%{opacity:0;transform:scale(1.5)}12%,100%{opacity:1;transform:scale(1)}}
@keyframes tdlabel{0%,8%{opacity:0}14%,100%{opacity:1}}
@keyframes tdstamp{0%,4%{opacity:0;transform:rotate(-6deg) scale(2)}10%,100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.teaser-doc{padding-top:22px}
.teaser-doc .t-row{padding-top:14px}
.form-note{font-size:.93rem;color:var(--graphite)}
.host{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:10px;font-size:.92rem;line-height:1.4}
.host-ph{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--ink) 12%,transparent) 5px 6px)}
.voices-src{margin-top:10px}
.slot--wide .d{font-size:.8rem;font-weight:400;color:inherit;opacity:.8}

/* mistake hunt */
.hunt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end}
.hunt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(20px,3vw,40px);align-items:start}
.doc{position:relative;background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:clamp(18px,2.4vw,30px);font-size:.95rem;cursor:var(--pen)}
.doc *{cursor:inherit}
.doc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.doc-brand{font:800 1.2rem/1.1 var(--sans);letter-spacing:-.02em}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.tag--draft{background:var(--stone)}
.doc-scroll{overflow-x:auto;padding-top:22px}
.doc table{width:100%;min-width:540px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.doc th{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-align:right;padding:10px 6px;border-bottom:1px solid var(--ink);vertical-align:bottom}
.doc td{padding:14px 6px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
.doc th:first-child,.doc td:first-child{text-align:left;white-space:normal}
.doc-sum{display:grid;margin:16px 0 0 auto;max-width:430px;font-variant-numeric:tabular-nums}
.doc-sum div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--hair)}
.doc-sum dt{color:var(--graphite)}
.doc-sum dd{margin:0;font-weight:600}
.doc-sum .grand{border-bottom:2px solid var(--ink);font-size:1.1rem}
.doc-sum .grand dt,.doc-sum .grand dd{color:var(--ink);font-weight:800}
.doc-note{margin-top:22px;font-style:italic;max-width:none}
.doc-foot{margin-top:14px}
.spot{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;background:none;border:0;padding:1px 3px;margin:-1px -3px;position:relative;border-radius:2px;text-align:inherit;cursor:inherit;transition:background .15s}
.spot:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.spot.found{color:var(--accent);text-decoration:line-through;text-decoration-thickness:2px}
.spot.found::before{content:"";position:absolute;inset:-7px -9px;border:2.5px solid var(--accent);border-radius:52% 48% 55% 45% / 50% 58% 42% 50%;transform:rotate(-3deg);animation:ring .45s cubic-bezier(.2,1.4,.4,1) both;pointer-events:none}
@keyframes ring{from{transform:rotate(-3deg) scale(1.7);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
.fix{display:none}
.spot.found .fix{display:inline-block;position:absolute;left:50%;top:-1.55em;transform:translateX(-50%) rotate(-4deg);font:700 .8rem/1 var(--mono);color:#fff;background:var(--accent);padding:4px 6px;white-space:nowrap;text-decoration:none;animation:fixin .35s .15s both;z-index:2;font-style:normal}
@keyframes fixin{from{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}
/* in running text the correction sits after the struck words, like an editor's mark, so it never covers the line above */
.mail-body .spot.found .fix{position:static;transform:rotate(-2deg);margin-left:.45em;vertical-align:.12em}
#mail-doc .hunt-stamp{top:auto;bottom:clamp(36px,6vw,60px)}
.spot.ok-flash{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.hunt-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hunt-tabs button{font:600 .95rem/1 var(--sans);padding:9px 14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.hunt-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--stone);box-shadow:none;transform:translate(3px,3px)}
.hunt-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mail-body{display:grid;gap:14px;padding-top:22px;font-size:1.02rem;line-height:1.75}
.hunt-stamp{position:absolute;right:clamp(14px,3vw,40px);top:clamp(64px,9vw,96px);font-size:1.7rem;pointer-events:none}
.hunt-panel{position:sticky;top:96px;border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:clamp(18px,2.2vw,26px);display:grid;gap:14px}
.hunt-count{font:800 1.3rem/1.1 var(--sans)}
.hunt-count b{font-size:3.2rem;letter-spacing:-.05em;color:var(--accent);margin-right:.1em}
.hunt-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.hunt-bar i{height:10px;border:1.5px solid var(--ink);background:var(--stone);transition:background .3s,border-color .3s}
.hunt-bar i.on{background:var(--accent);border-color:var(--accent)}
.hunt-list{padding-left:1.2em;display:grid;gap:12px;font-size:.95rem}
.hunt-list:empty{display:none}
.hunt-list li{animation:up .35s both}
.hunt-list b{display:block}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hunt-toast{min-height:2.8em;font-size:.93rem;color:var(--graphite)}
.hunt-result{display:grid;gap:12px;border-top:2px solid var(--ink);padding-top:14px}
.hunt-result .big-num s{font-size:.42em;color:var(--graphite);text-decoration-thickness:3px;text-decoration-color:var(--accent);margin-right:.2em;letter-spacing:-.02em}

/* pains to tap */
.pains-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,56px);align-items:end}
.tally{font:800 clamp(1.25rem,1rem + .9vw,1.75rem)/1.2 var(--sans);letter-spacing:-.02em;color:var(--accent);max-width:22ch}
.pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pain{all:unset;box-sizing:border-box;position:relative;display:grid;gap:10px;align-content:start;border:2px solid var(--ink);background:var(--paper);padding:22px 20px 18px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease,background-color .2s,color .2s}
.pain:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.pain:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pain h3{font-size:1.38rem}
.pain .vo{font-size:.9rem;border-top:1px solid var(--hair);padding-top:10px;color:var(--graphite);font-family:var(--mono);letter-spacing:.02em}
.pain .vo i{display:block;font:600 .98rem/1.35 var(--sans);font-style:normal;color:var(--ink);margin-bottom:4px;letter-spacing:0}
.pain[aria-pressed="true"]{background:var(--ink);color:var(--stone)}
.pain[aria-pressed="true"] .vo{color:var(--mist);border-top-color:color-mix(in srgb,var(--stone) 25%,transparent)}
.pain[aria-pressed="true"] .vo i{color:var(--stone)}

/* demos */
.demo{display:grid;grid-template-columns:96px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);border-top:2px solid var(--ink);padding-block:32px;align-items:start}
.demo .num{font:800 4.2rem/.85 var(--sans);letter-spacing:-.06em}
.take{font-weight:600}
.srcs{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:18px;display:grid;gap:0}
.src-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;border-top:1px solid var(--hair);padding-block:10px;font-variant-numeric:tabular-nums}
.srcs .mono{margin-bottom:8px}
.did-it{display:grid;gap:16px;justify-items:start;text-decoration:none;color:inherit;border:2px dashed var(--ink);padding:22px;font-weight:600}
.did-it .arr{color:var(--accent)}
.calc{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:18px;display:grid;gap:14px}
.calc-in{display:grid;gap:10px}
.calc-qty{display:grid;grid-template-columns:48px 1fr 48px;border:2px solid var(--ink)}
.calc-qty input{border:0;text-align:center;font:800 1.5rem/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--field)}
.calc-step{font:800 1.4rem/1 var(--sans);background:var(--stone);border:0;cursor:pointer;color:var(--ink)}
.calc-step:hover{background:var(--accent);color:#fff}
input[type=range]{width:100%;accent-color:var(--accent)}
.calc-out{display:grid;margin:0;font-variant-numeric:tabular-nums}
.calc-out div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--hair)}
.calc-out dt{color:var(--graphite)}
.calc-out dd{margin:0;font-weight:700}
.calc-out .grand dd{font:800 1.6rem/1 var(--sans);letter-spacing:-.03em;color:var(--accent)}
.calc-out.is-off{opacity:.35}
.calc-err{font-weight:700;color:var(--accent)}
.qa-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;border-block:2px solid var(--ink);padding-block:18px;margin-bottom:28px}

/* session flow */
.flow-wrap{position:relative}
.flow-line{position:absolute;left:0;right:0;top:58px;height:4px;background:var(--accent);transform-origin:0 50%}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.4vw,48px);position:relative}
.flow li{display:grid;gap:12px;align-content:start}
.flow .box{border:2px solid var(--mist);background:var(--ink);padding:14px 16px 16px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;font:800 1.3rem/1.15 var(--sans);letter-spacing:-.015em;position:relative}
.flow .box .mono{color:var(--mist)}
.flow li.hl .box{background:var(--accent);border-color:var(--accent);color:#fff}
.flow li.hl .box .mono{color:#fff}

/* crossed-out funnel tropes */
.tropes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:6px 0 10px}
.trope{position:relative;display:grid;place-items:center;gap:4px;min-height:92px;border:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);padding:12px;text-align:center}
.fake-timer{font:800 2rem/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.fake-badge{background:var(--ink);color:var(--stone);font:800 1.05rem/1 var(--sans);padding:10px 12px;transform:rotate(-2deg)}
.fake-live{display:inline-flex;align-items:center;gap:8px;font:800 1.3rem/1 var(--sans);letter-spacing:.06em}
.fake-live i{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.strike{position:absolute;inset:8% 4%;width:92%;height:84%;overflow:visible;pointer-events:none}
.strike path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:0}
.tropes.play .strike path{animation:strike .5s cubic-bezier(.6,.1,.3,1) both}
.tropes.play .trope:nth-child(2) .strike path{animation-delay:.25s}
.tropes.play .trope:nth-child(3) .strike path{animation-delay:.5s}
@keyframes strike{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.tropes-stamp{position:absolute;right:-6px;top:-18px;font-size:1.25rem;background:var(--paper)}
.tropes.play .tropes-stamp{animation:slam .5s .9s cubic-bezier(.2,1.5,.4,1) both}
.rules{list-style:none;padding:0;display:grid}
.rules li{position:relative;padding:14px 0 14px 2.1em;border-top:1px solid var(--hair);font-size:1.05rem}
.rules li::before{content:"✓";position:absolute;left:0;top:10px;color:var(--accent);font-weight:800;font-size:1.3em}

/* proof */
.proof{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}

/* closer */
.final{display:grid;gap:24px;justify-items:start}
.closer .mono{opacity:.9}

/* thank-you */
.ty-h1{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.5rem);line-height:1;letter-spacing:-.035em}
.notice{border:4px solid var(--ink);padding:clamp(18px,2.6vw,28px);display:grid;gap:12px;justify-items:start;background:var(--paper)}
.notice-text{font:800 clamp(1.4rem,1.1rem + 1.3vw,2.1rem)/1.15 var(--sans);letter-spacing:-.02em;max-width:30ch}
.timeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:2px solid var(--ink);background:var(--paper)}
.timeline li{padding:16px;border-left:2px solid var(--ink);display:grid;gap:8px;align-content:start}
.timeline li:first-child{border-left:0}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .flow-line{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
  }
}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "form" "teaser"}
  .hunt-head,.pains-head{grid-template-columns:minmax(0,1fr)}
  .hunt{grid-template-columns:minmax(0,1fr)}
  .hunt-panel{position:static}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:2px solid var(--ink)}
  .pains,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .host{max-width:520px}
  .demo{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-line{display:none}
  .tropes{grid-template-columns:minmax(0,1fr)}
  .timeline{grid-template-columns:minmax(0,1fr)}
  .timeline li{border-left:0;border-top:2px solid var(--ink)}
  .timeline li:first-child{border-top:0}
}
@media (max-width:720px){
  .two-col,.teacher,.proof{grid-template-columns:minmax(0,1fr)}
  .photo{max-width:320px}
  main{padding-bottom:84px}
  .site{position:static}
  .hide-sm{display:none}
}
@media (min-width:721px){ .sticky{display:none} }
@media (max-width:560px){
  .doc table{min-width:0}
  .doc th:nth-child(4),.doc td:nth-child(4){display:none}
  .doc th,.doc td{padding-left:4px;padding-right:4px}
  .pains,.grid3,.flow{grid-template-columns:minmax(0,1fr)}
  .slots,.two{grid-template-columns:minmax(0,1fr)}
  .seal-top{grid-template-columns:minmax(0,1fr)}
  .teaser{grid-template-columns:minmax(0,1fr)}
  .demo .num{font-size:3rem}
}
@media (prefers-reduced-motion:reduce){
  .td-fix,.td-fix::before,.td-fix::after,.td-stamp{animation:none}
  .td-fix{background-size:100% 2px}
  .td-fix::before,.td-fix::after,.td-stamp{opacity:1}
  .teaser-cta .arr,.fake-live i{animation:none}
  .tropes.play .strike path,.tropes.play .tropes-stamp{animation:none}
  .spot.found::before,.spot.found .fix,.hunt-list li{animation:none}
}