/* ===== v5: Brains over Bots brand book (colours as the brand recommends; layout and motion are ours) =====
   Loaded after the v2 styles. Grammar: turquoise = what the bot made, red = what a person decided. */
:root{
  --stone:#EEEBE6; --paper:#FFFFFF; --panel:#E4E0D9; --field:#F5F3EF; --lilac-paper:#E6E1EC;
  --ink:#2C1751; --ink-2:#3A2566;
  --human:#BF223E; --signal:#FF0030;
  --bot:#118186; --aqua:#46C6CD; --bot-tint:#CBECEE;
  --mist:#CFC9DA; --graphite:#5C5470;
  --accent:var(--human); --on-accent:#FFFFFF;
  --seal-bg:var(--ink); --seal-fg:var(--stone); --seal-tick:var(--signal);
  --hair:color-mix(in srgb,var(--ink) 16%,transparent);
  --sh:4px 4px 0 var(--ink);
  --sans:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Arial,sans-serif;
  --display:"Archivo","Arial Black",Arial,sans-serif;
  --dots:"Doto","Roboto Mono",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='%23BF223E' stroke='%232C1751' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 25, crosshair;
}
:root[data-palette="signal"]{--human:#FF0030}
/* on Ink Violet the human red is Signal and the bot is Aqua */
.ink,.symband,.closer,.seal-top,.wrong,.think-q,.proto{--human:var(--signal);--bot:var(--aqua);--hair:rgba(238,235,230,.22)}

/* ---------- type ---------- */
body{font-family:var(--sans);font-size:18px;line-height:1.55}
h1,h2,.h2s{font-family:var(--display);font-weight:850;font-stretch:125%;letter-spacing:-.035em}
h1{font-size:clamp(2.3rem,.8rem + 4.3vw,5.1rem);line-height:.95}
h2{font-size:clamp(1.85rem,.9rem + 3vw,3.6rem);line-height:1.01}
.h2s{font-size:clamp(1.35rem,.95rem + 1.35vw,2.1rem);line-height:1.08;font-stretch:112%;letter-spacing:-.025em}
h3{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.012em}
.lead{font-size:clamp(1.1rem,1rem + .45vw,1.32rem)}
.big-num,.big,.stat b,.slot .t,.hunt-count,.demo .num,.mnum,.pkg-name,.pc-price .big,.faq summary,.teaser-cta b,.fact b,.big-fact,.vq p,.pull p,.quote p,.tally,.sorter-verdict{font-family:var(--display);font-stretch:112%}
.big-num,.big{font-weight:850;font-stretch:125%}
.mono,.tag,.stamp,.src,.k{font-family:var(--mono)}
.dots-word{font-family:var(--dots);font-weight:900;font-stretch:normal;color:var(--bot);letter-spacing:.01em;font-size:1.06em}
.nowrap{white-space:nowrap}
.link{text-decoration-color:var(--human)}
:focus-visible{outline-color:var(--human)}
.progress{background:var(--human)}
.ph{background:color-mix(in srgb,var(--mist) 70%,var(--stone));color:var(--ink)}

/* ---------- logo ---------- */
.wordmark{display:inline-flex;align-items:center;line-height:0}
.logo{display:block;height:var(--h,30px);width:calc(var(--h,30px) * var(--ar,1));background:no-repeat center/contain}
.wordmark .logo{--h:clamp(22px,1.2rem + .5vw,30px)}
.foot .logo{--h:24px;margin-bottom:6px}
.lockup .logo{width:100%;height:auto;aspect-ratio:var(--ar)}

/* ---------- buttons: Ink Violet; the hard shadow is the pen's red ---------- */
.btn{background:var(--ink);color:var(--stone);border-color:var(--ink);font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;box-shadow:4px 4px 0 var(--human)}
.btn:hover{box-shadow:6px 6px 0 var(--human)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn--ghost:hover{box-shadow:6px 6px 0 var(--ink)}
.btn--inv{background:var(--stone);color:var(--ink);border-color:var(--stone);box-shadow:4px 4px 0 var(--signal)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.card,.doc,.hunt-panel,.redl,.pkg,.mcard,.seal,.calc,.srcs{box-shadow:var(--sh)}
.seal{box-shadow:6px 6px 0 var(--ink)}

/* ---------- pen marks: filled brand shapes that draw themselves ---------- */
.mk{display:block;color:var(--human);pointer-events:none;line-height:0}
.mk svg{display:block;width:100%;height:100%;overflow:visible}
.fx-on .mk[data-draw] svg{clip-path:inset(-20% 100% -20% -2%);transition:clip-path var(--mk-dur,.75s) var(--mk-delay,0s) cubic-bezier(.65,0,.3,1)}
.fx-on .mk[data-draw].on svg{clip-path:inset(-20% -2% -20% -2%)}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
.fx-on .mk--circle[data-draw] svg{clip-path:none;--sweep:0deg;-webkit-mask-image:conic-gradient(from 35deg,#000 var(--sweep),transparent 0);mask-image:conic-gradient(from 35deg,#000 var(--sweep),transparent 0);transition:--sweep var(--mk-dur,.8s) var(--mk-delay,0s) cubic-bezier(.6,0,.3,1)}
.fx-on .mk--circle[data-draw].on svg{--sweep:360deg}
.pen-word{position:relative;display:inline-block;white-space:nowrap}
.pen-word > .mk{position:absolute;left:-3%;width:106%;bottom:-.2em;height:.3em}
.pen-word > .mk--circle{left:-9%;width:118%;top:-22%;bottom:auto;height:150%}
.tick-mk{width:clamp(70px,8vw,112px);aspect-ratio:196/108;color:var(--seal-tick)}
.seal-top .mk{color:var(--signal)}

/* ---------- the two voices ---------- */
.chip-draft{display:inline-flex;align-items:center;gap:.5em;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--bot-tint);color:var(--ink);padding:6px 8px;white-space:nowrap}
.chip-draft::before{content:"";width:7px;height:7px;background:var(--bot)}
.ink .chip-draft,.symband .chip-draft{background:rgba(70,198,205,.16);color:var(--stone)}
.draft-rule{border-left:5px solid var(--bot)}

/* ---------- hero ---------- */
.hero-band{background:var(--stone)}
.kin .ln > span{animation-duration:1.05s}
.hero .kicker q,.hero2 .kicker q{font-family:var(--display);font-stretch:112%;font-weight:700}
.stat{border-color:var(--ink);background:var(--paper)}
.stat b{font-weight:850;color:var(--ink)}
.hero-form .host,.hero2 .host{border-color:var(--hair)}
.slot{background:var(--paper)}
.slot:has(input:checked),.chip-opt:has(input:checked),.task[aria-pressed="true"],.pain[aria-pressed="true"]{background:var(--ink);color:var(--stone)}
.teaser-doc{border-left:5px solid var(--bot)}
.td-fix::after{background:var(--paper);color:var(--human);font-weight:700;border:1.5px solid var(--human)}
.td-fix::before{border-color:var(--human)}
.teaser-cta .arr{color:var(--human)}

/* ---------- the symbol band: a pen draws the brain, the machine prints the copy ---------- */
.symband{background:var(--ink);color:var(--stone);position:relative;overflow:clip}
.symband-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(56px,8vw,120px)}
.sym{position:relative;width:min(100%,560px);aspect-ratio:1011.5/1055;justify-self:center;touch-action:pan-y;cursor:crosshair}
.sym svg,.sym canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sym .sym-pen{color:var(--signal)}
.sym .sym-dotpath{fill:var(--aqua)}
.sym.dots-live .sym-dotpath{visibility:hidden}
.sym-hint{position:absolute;right:0;bottom:-6px;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);opacity:.8}
.symband h2{font-size:clamp(2.1rem,1rem + 3.6vw,4.3rem);line-height:.98;color:var(--stone)}
.symband .kick{color:var(--aqua)}
.verbs{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid rgba(238,235,230,.22)}
.verbs li{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(238,235,230,.22)}
.verbs b{font:850 clamp(1.45rem,1rem + 1.3vw,2.15rem)/1 var(--display);font-stretch:125%;letter-spacing:-.03em}
.verbs li:nth-child(1) b{color:var(--aqua)}
.verbs li:nth-child(3) b{color:var(--signal)}
.verbs span{color:var(--mist)}

/* ---------- the method rail (demo section) ---------- */
.method{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.method-rail{position:sticky;top:110px;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.method-rail li{display:grid;gap:4px;color:color-mix(in srgb,var(--ink) 28%,var(--stone));transition:color .35s}
.method-rail b{position:relative;display:inline-block;justify-self:start;font:850 clamp(1.7rem,1rem + 2.2vw,3.2rem)/1 var(--display);font-stretch:125%;letter-spacing:-.04em}
.method-rail li.on{color:var(--ink)}
.method-rail li:nth-child(1).on b{color:var(--bot)}
.method-rail .mk{position:absolute;left:-3%;width:106%;bottom:-.24em;height:.28em}
.demo .step-verb{display:none}
.demo{border-top:4px solid var(--ink)}
.demo .num{color:transparent;-webkit-text-stroke:2px var(--mist);font-weight:850;font-stretch:125%}
.srcs{border-left:5px solid var(--bot)}
.srcs .red,.demo .red{color:var(--human)}

/* ---------- the mistake hunt as a brand draft ---------- */
.doc{border-left:6px solid var(--bot)}
.tag--draft{background:var(--bot-tint);border-color:var(--bot-tint);color:var(--ink)}
.spot.found{color:var(--human);text-decoration-color:var(--human)}
.spot.found::before{border:0;background:var(--human);border-radius:0;-webkit-mask:var(--circle-mask) center/100% 100% no-repeat;mask:var(--circle-mask) center/100% 100% no-repeat;inset:-9px -12px}
.spot.found .fix{background:var(--paper);color:var(--human);border:2px solid var(--human);font-weight:700}
.mail-body .spot.found .fix{background:none;border:0;padding:0 2px;font:700 1em/1 var(--sans)}
.hunt-bar i.on{background:var(--human);border-color:var(--human)}
.hunt-count b{color:var(--human)}
.hunt-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--stone)}

/* ---------- pains ---------- */
.pain[aria-pressed="true"] .vo i{color:var(--stone)}
.tally{color:var(--human)}

/* ---------- dark bands ---------- */
.band.ink,.ticker.ink{background:var(--ink)}
.flow .hl .box{background:var(--signal);color:#fff}
.seal-top{background:var(--ink);color:var(--stone)}
.closer{background:var(--ink);color:var(--stone);position:relative;overflow:clip}
.closer-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center}
.closer .lockup{width:min(100%,380px);justify-self:end;opacity:.95}
.closer .lockup svg{display:block;width:100%;height:auto}
.closer h2{font-size:clamp(2.2rem,1rem + 4.2vw,4.9rem)}
.closer .ticks li::before{color:var(--signal)}
.stamp-seal{border-color:var(--human);color:var(--human)}
.ty-h1{color:var(--stone)}

/* ---------- lists and ticks ---------- */
.ticks li::before,.yes li::before,.rules li::before,.have li::before{color:var(--human)}
.no li::before{color:var(--graphite)}

/* ---------- course ---------- */
.hero2 h1{font-size:clamp(2.6rem,.9rem + 5vw,6rem);line-height:.92}
.course-slogan{font:850 clamp(1.35rem,.9rem + 1.7vw,2.4rem)/1.08 var(--display);font-stretch:112%;letter-spacing:-.025em;margin:0}
.pricecard{box-shadow:6px 6px 0 var(--ink)}
.ladder i{background:var(--mist)}
.ladder i.now{background:var(--human)}
.bin h3{font-family:var(--display);font-weight:850;font-stretch:125%;font-size:1.5rem;letter-spacing:-.03em}
.bin[data-bin="over"] h3{color:var(--bot)}
.bin[data-bin="keep"] h3{color:var(--human)}
.bin--check{border-color:var(--ink)}
.redl{border-left:6px solid var(--bot)}
.ed.on del{text-decoration-color:var(--human)}
.ed.on ins{color:var(--human);font-weight:700;background:none}
.red-label{background:var(--bot-tint);color:var(--ink)}
.redl[data-done] .red-label{background:var(--human);color:#fff}
.tag--red{background:var(--mist);border-color:var(--mist);color:var(--ink)}
.tag--dark{background:var(--ink);border-color:var(--ink);color:var(--stone)}
.mcard::after{-webkit-text-stroke-color:var(--mist)}
.pkg--rec{border-width:3px;box-shadow:8px 8px 0 var(--ink)}
.pkg--rec .rec{background:var(--ink);color:var(--stone)}
.pkg--rec .pkg-name{position:relative;display:inline-block;justify-self:start}
.pkg--rec .pkg-name .mk{position:absolute;left:-16%;top:-30%;width:132%;height:160%}
.sched tr.now td{background:color-mix(in srgb,var(--human) 9%,transparent)}
.sig-mk{width:min(260px,70%);aspect-ratio:333/67;color:var(--human)}
.guarantee-sign{display:grid;gap:4px;justify-items:start}
.seal-mark{width:64px;height:auto;display:block}
.wrong{background:var(--ink)}

@media (max-width:900px){
  .symband-in{grid-template-columns:minmax(0,1fr)}
  .sym{width:min(86%,420px)}
  .method{grid-template-columns:minmax(0,1fr)}
  .method-rail{display:none}
  .demo .step-verb{display:block;font:850 1.6rem/1 var(--display);font-stretch:125%;letter-spacing:-.03em}
  .closer-in{grid-template-columns:minmax(0,1fr)}
  .closer .lockup{justify-self:start;width:min(70%,260px)}
}
@media (max-width:560px){
  h1{font-size:clamp(2.05rem,1rem + 6.4vw,2.9rem)}
  .hero2 h1{font-size:clamp(2.3rem,1rem + 7.6vw,3.3rem)}
  .verbs li{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .fx-on .mk[data-draw] svg{clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;transition:none!important}
}

/* Lenis (smooth scroll) needs these; its stylesheet can't load from the CDN inside an artifact */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* v5 pieces placed by patch_v5 */
.tick-mk{display:block}
.tick-mk > .mk,.sig-mk > .mk{width:100%;height:100%}
.sig-mk{display:block}
.guarantee-stamp{margin-left:auto;margin-right:6px;line-height:0}
.guarantee-stamp .logo{--h:clamp(58px,6vw,78px)}
.method .demo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.method .demo .num{display:none}
.method-rail .mono{color:inherit;opacity:.8}
.method-rail li.on b .mk{color:var(--human)}
@media (max-width:900px){.method .demo{grid-template-columns:minmax(0,1fr)}}

/* the hero's small quote: no stamp over the corrections, room for the labels */
.teaser{gap:clamp(40px,4vw,60px)}
.td-stamp{display:none}

/* ===== v6: editorial pass after design panel round 1 =====
   One card species keeps the border and hard shadow: the "document", our own interactive proof (the form, the price
   sheet, the hunt, the redline, the calculator, the signed promises). Everything sourced from outside (quotes, facts,
   cases) is set as type on paper with hairlines. Chapters are numbered in the machine's dots. */

/* no eyebrow bar on every section; numbered chapters instead */
.sec-head{display:none}
main{counter-reset:ch}
.chapter-h::before{counter-increment:ch;content:counter(ch,decimal-leading-zero);display:block;font:900 clamp(1.1rem,.9rem + .5vw,1.45rem)/1 var(--dots);font-stretch:normal;letter-spacing:.06em;margin-bottom:.6em}

/* type scale: one step between h2, h3, h4 and lead */
h3{font-size:clamp(1.2rem,1rem + .6vw,1.6rem);line-height:1.15}
h4{font:800 clamp(1.1rem,1rem + .35vw,1.3rem)/1.2 var(--display);font-stretch:112%;letter-spacing:-.01em;margin:0}

/* shadow scale 4 / 6: documents 4, the three primary sheets 6; accent rules 6 on documents, 4 on callouts */
.hero-form,.pricecard,.seal{box-shadow:6px 6px 0 var(--ink)}
.teaser-doc,.srcs,.draft-rule{border-left-width:6px}
.kicker,.pull{border-left-width:4px}

/* hero */
.hero-kick{font:700 1rem/1.35 var(--sans);color:var(--ink);display:flex;align-items:center;gap:12px;margin:0}
.hero-kick::before{content:"";width:26px;height:4px;background:var(--human);flex:none}
.opt-label{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin:6px 0 0}
.slot--now{grid-column:1/-1;border:0;background:none;box-shadow:none;padding:4px 0;min-height:44px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.slot--now .t{font:700 1rem/1.3 var(--sans);letter-spacing:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--human)}
.slot--now .d{font-size:.9rem;color:var(--graphite)}
.slot.slot--now:has(input:checked){background:none;color:var(--ink)}
.slot--now:has(input:checked) .t::after{content:"  ✓";color:var(--human);text-decoration:none;display:inline-block;margin-left:.3em}

/* sourced content: type on paper, no cards */
.case,.box,.included{border:0;border-top:3px solid var(--ink);background:none;box-shadow:none;padding:18px 0 0}
.task{box-shadow:none}
.bin{border-width:1.5px}
.stamp{border:0;padding:0;color:var(--human);font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;justify-self:start}
.stamp::before{content:"✓ ";font-weight:700}
.case .tag{border:0;padding:0;color:var(--graphite);font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.wrong{--human:inherit;--bot:inherit;background:none;color:var(--ink);border-top:3px solid var(--human);padding:24px 0 0;margin-top:clamp(32px,4vw,56px)}
.wrong .big-num{font-family:var(--mono);font-weight:700;letter-spacing:-.05em}
.wrong-head{color:var(--human)}
.wrong .muted{color:var(--graphite)}

/* quote wall: six real quotes, set big, no boxes */
.voices-note{max-width:62ch;color:var(--graphite);margin-top:18px}
.quote-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(30px,3.6vw,56px) clamp(20px,2.6vw,44px);margin-top:clamp(32px,4vw,56px)}
.qw{margin:0;grid-column:span 4;border-top:1.5px solid var(--ink);padding-top:16px;display:grid;gap:12px;align-content:start}
.quote-wall .qw:nth-child(1){grid-column:span 7}
.quote-wall .qw:nth-child(2){grid-column:span 5}
.quote-wall .qw:nth-child(3){grid-column:span 4}
.quote-wall .qw:nth-child(4){grid-column:span 8}
.quote-wall .qw:nth-child(5),.quote-wall .qw:nth-child(6){grid-column:span 6}
.qw blockquote{margin:0;font:700 clamp(1.12rem,1rem + .45vw,1.4rem)/1.32 var(--sans);text-wrap:pretty}
.qw blockquote::before{content:"\201C";color:var(--human)}
.qw blockquote::after{content:"\201D";color:var(--human)}
.qw--xl blockquote,.qw--l blockquote{font:850 clamp(1.55rem,.9rem + 2.1vw,2.6rem)/1.08 var(--display);font-stretch:112%;letter-spacing:-.022em}
.qw figcaption{font:500 .72rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.receipts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(44px,5vw,80px)}
.receipt{border-top:3px solid var(--ink);padding-top:18px;display:grid;gap:10px;align-content:start}
.r-num{font:700 clamp(3rem,2rem + 3.2vw,4.8rem)/.9 var(--mono);letter-spacing:-.05em;color:var(--ink);margin:0}
.r-fact{font:700 1.18rem/1.35 var(--sans);max-width:36ch;margin:0}
.r-src{font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.r-tick{color:var(--human);font-weight:700}

/* the pains: a list the reader ticks with the pen */
.painlist{list-style:none;padding:0;margin:clamp(28px,3vw,44px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px);border-top:1.5px solid var(--ink)}
.painlist li{border-bottom:1px solid var(--hair)}
.painlist .pain{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 16px;padding:20px 0;width:100%;cursor:pointer;color:var(--ink)}
.pl-box{grid-row:1/span 2;width:32px;height:32px;border:2px solid var(--ink);position:relative;margin-top:2px;transition:background-color .2s}
.pl-box .mk{position:absolute;left:-2px;top:-12px;width:50px;height:32px;color:var(--human)}
.pl-box .mk svg{clip-path:inset(-20% 100% -20% -2%);transition:clip-path .45s cubic-bezier(.65,0,.3,1)}
.painlist .pain[aria-pressed="true"] .pl-box .mk svg{clip-path:inset(-20% -2% -20% -2%)}
.pl-text{font:400 1.06rem/1.45 var(--sans)}
.pl-text b{display:block;font:800 1.22rem/1.2 var(--display);font-stretch:112%;letter-spacing:-.012em;margin-bottom:4px}
.painlist .vo{grid-column:2;font:500 .7rem/1.35 var(--mono);letter-spacing:.06em;color:var(--graphite);border:0;padding:0}
.painlist .vo i{display:block;font:italic 400 .98rem/1.4 var(--sans);letter-spacing:0;color:var(--ink);margin-bottom:3px}
.painlist .pain[aria-pressed="true"]{background:none;color:var(--ink)}
.painlist .pain[aria-pressed="true"] .vo i{color:var(--ink)}
.painlist .pain:hover .pl-box{background:color-mix(in srgb,var(--human) 8%,transparent)}
.painlist .pain:focus-visible{outline:3px solid var(--human);outline-offset:4px}

/* webinar FAQ: two columns, answers visible */
.faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(28px,4vw,64px)}
.faq2 .qa{border-top:1.5px solid var(--ink);padding-top:16px;display:grid;gap:10px;align-content:start}
.faq2 h3{font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
.faq2 p{max-width:56ch}

/* course FAQ in three groups */
.faq-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px);align-items:start}
.fg-h{font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin:0 0 4px}
.faq-group .faq summary{font-size:1.02rem;line-height:1.3}

/* the programme: four weeks, each with its two modules */
.legend-line{color:var(--graphite);margin-top:14px;max-width:70ch}
.prog{display:grid;border-top:3px solid var(--ink)}
.wk{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--hair)}
.wk-head{display:grid;gap:10px;align-content:start;position:sticky;top:104px}
.wk-n{font:900 1.15rem/1 var(--dots);letter-spacing:.04em;margin:0}
.wk-head h3{margin:0}
.wk-qa{font:500 .72rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.mods{display:grid;gap:clamp(24px,2.8vw,36px)}
.mod{display:grid;gap:10px;padding-bottom:clamp(20px,2.2vw,30px);border-bottom:1px dashed var(--hair)}
.mod:last-child{border-bottom:0;padding-bottom:0}
.mod-meta{font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.mod p{margin:0}
.can{margin:0;padding-left:1.15em;display:grid;gap:4px}
.can li::marker{color:var(--human)}

/* pricing: three equal sheets, no badge; the pen circle is the only recommendation */
.pkg{box-shadow:none;border:0;border-top:4px solid var(--ink);background:none;padding:22px 2px 0}
.pkg--rec,.pkg--rec:hover{box-shadow:none;border-top-width:4px}
.pkgs{gap:clamp(24px,3vw,48px)}
.sched tr.now td{background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* dark bands carry the machine's dot texture at rest */
.closer,.seal-top{background-image:radial-gradient(rgba(207,201,218,.14) 1.1px,transparent 1.5px);background-size:16px 16px}
.closer .ticks--row{display:grid;grid-template-columns:repeat(3,max-content);gap:8px 30px}

/* the rest of round 1 */
.teacher{align-items:center}
.teacher .photo{aspect-ratio:4/3}
.spot{padding:6px 4px;margin:-6px -4px}
.calc-step{min-height:44px}
.notice{border-width:2px}
.notice-text{font-size:clamp(1.15rem,1rem + .5vw,1.35rem)}
.ty-topic{display:grid;gap:16px;border-top:1.5px solid var(--ink);padding-top:22px}
.ty-links{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-weight:700}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--stone);padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

@media (max-width:900px){
  .quote-wall .qw:nth-child(n){grid-column:span 12}
  .faq-groups{grid-template-columns:minmax(0,1fr)}
  .wk{grid-template-columns:minmax(0,1fr)}
  .wk-head{position:static}
  .pkg--rec{order:0}
}
@media (max-width:720px){
  .painlist,.faq2,.receipts{grid-template-columns:minmax(0,1fr)}
  .closer .ticks--row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .src-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .src-row > span:first-child{grid-column:1/-1}
}
@media (forced-colors:active){
  .slot:has(input:checked),.chip-opt:has(input:checked),[aria-pressed="true"],[aria-selected="true"]{outline:3px solid CanvasText;outline-offset:2px}
  .btn{border:2px solid ButtonText}
}

/* round 1 follow-ups seen in the v6 shots */
.pkg{grid-template-rows:auto auto auto auto 1fr auto}
.pkg dt{font:400 .98rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);padding-top:0}
.pkg .row{min-height:0;padding-block:12px}
.symband h2{font-size:clamp(2rem,1rem + 2.5vw,3.3rem)}
.onscreen{font-weight:700;font-size:1.06rem}
/* phones: the three times sit in one compact row, so the form starts higher */
@media (max-width:560px){
  .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .slot{padding:10px 8px}
  .slot .t{font-size:1.15rem}
  .slot .d{font-size:.78rem;line-height:1.25}
  .slot--now{grid-column:1/-1}
}

/* ===== v7: design panel round 2 =====
   Buttons: only the money actions keep the pen-red sticker shadow. Turquoise small text gets a text-safe shade.
   New documents: the pricing quote, the deliverables receipt, footnoted sources in the redline. */
:root{--bot-text:#0B5A5E}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* buttons: flat by default, the sticker only on the money actions */
.btn,.btn:hover{box-shadow:none}
.btn--primary{box-shadow:4px 4px 0 var(--human)}
.btn--primary:hover{box-shadow:6px 6px 0 var(--human)}
.btn--inv.btn--primary{box-shadow:4px 4px 0 var(--signal)}
.btn--ghost{border-width:2px}
.btn:not(.btn--primary):hover{background:var(--ink-2)}
.btn--ghost:not(.btn--primary):hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.btn-row .btn{box-shadow:none}

/* text-safe turquoise for small type (4.5:1 on Stone); the brand turquoise stays for large type and graphics */
.chapter-h::before,.fg-h,.wk-n{color:var(--bot-text)}

/* the hunt recap: a plain red caption, no sticker */
.did-it{border:0;padding:0;gap:8px}
.did-tag{font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--human)}

/* the host photo frame is designed, not hatched */
.photo{background:var(--panel);background-image:none;border:0;position:relative;display:grid;place-items:end start;padding:22px}
.photo .mk--bracket{position:absolute;left:18px;top:18px;width:auto;height:46%;aspect-ratio:93/183;color:var(--human)}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}  /* Denis's photo fills the frame */
.photo-note{font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;color:var(--graphite);max-width:30ch}

/* receipts: one number circled by the pen */
.r-num .pen-word > .mk--circle{left:-12%;width:124%;top:-18%;height:136%}

/* webinar FAQ groups with answers visible */
.faq-groups--open .qa{border-top:1px solid var(--hair);padding:14px 0 0;display:grid;gap:8px;margin-top:14px}
.faq-groups--open .qa:first-of-type{border-top:0;margin-top:6px}
.faq-groups--open h3{font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.faq-groups--open p{font-size:.98rem}

/* course FAQ: the pen's caret instead of a plus */
.faq summary::after{content:"";flex:none;width:16px;height:12px;background:var(--human);-webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat;transform:rotate(180deg);transition:transform .2s;font-size:0}
.faq details[open] summary::after{transform:none}

/* course: the jump row and the proof note */
.jump{font-weight:700;display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:6px}
.cases-note{color:var(--graphite);max-width:70ch;margin-top:14px}

/* the pricing quote: one document on wide screens, the three sheets on phones */
.quote-doc{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:clamp(22px,3vw,40px)}
.qd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.qd-brand{font:850 1.25rem/1 var(--display);font-stretch:112%;letter-spacing:-.02em;margin:0}
.qd-meta{font:500 .75rem/1.3 var(--mono);letter-spacing:.06em;color:var(--graphite);margin:0}
table.qd{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.qd th,.qd td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.qd thead th{font:850 clamp(1.3rem,1rem + .8vw,1.7rem)/1.1 var(--display);font-stretch:112%;letter-spacing:-.02em;padding-top:26px;padding-bottom:18px;width:25%}
.qd thead th:first-child{width:25%}
.qd tbody th{font:400 1rem/1.35 var(--sans);color:var(--graphite)}
.qd td{font:700 1.02rem/1.35 var(--sans)}
.qd .qd-price td .big{font-size:clamp(2.1rem,1.4rem + 1.6vw,3rem);line-height:1}
.qd .qd-no{color:var(--graphite);font-weight:400}
.qd .qd-yes{color:var(--human);font-size:1.25rem}
.qd tfoot th,.qd tfoot td{border-bottom:0;padding-top:20px}
.qd .qd-pick,.qd td:nth-child(3){background:color-mix(in srgb,var(--ink) 4%,transparent)}
.qd-note{margin-top:18px;max-width:78ch;border-left:4px solid var(--human);padding-left:14px}
.pkgs{display:none}
@media (max-width:900px){
  .quote-doc{display:none}
  .pkgs{display:grid}
  .pkg--rec{margin-top:18px}
}

/* deliverables: a receipt, each line with its week */
.receipt-doc{background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:clamp(20px,2.6vw,34px);max-width:980px}
.rc-head{display:flex;justify-content:space-between;gap:12px;font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);border-bottom:2px solid var(--ink);padding-bottom:12px;margin:0}
.receipt-doc .have{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none}
.receipt-doc .have li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px dashed var(--hair)}
.receipt-doc .have li::before{display:none}
.receipt-doc .have li:last-child{border-bottom:0}
.rc-t{flex:0 1 auto}
.rc-lead{flex:1 1 20px;border-bottom:2px dotted var(--mist);transform:translateY(-4px);min-width:20px}
.rc-wk{flex:none;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.receipt-doc .tag{margin-left:6px}
.included li::marker{color:var(--human)}

/* redline: sources as footnotes under the email */
.fn{font:700 .7em/0 var(--mono);color:var(--human);margin-left:.15em}
.rm{color:var(--human)}
.fn-list{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 .75rem/1.4 var(--mono);letter-spacing:.04em;color:var(--graphite);border-top:1px solid var(--hair);padding-top:12px;margin-top:6px}
.fn-list sup{color:var(--human);font-weight:700}
.fn-h{text-transform:uppercase;letter-spacing:.1em}

/* modules: plain-language meta */
.mod-meta{font:700 .88rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--graphite)}

/* price steps: later rows fade like the bar chart; the "full" tag never nudges the digits */
.sched td.full{color:var(--ink)}
.sched .full::after{display:block;width:max-content;margin:4px 0 0 auto}
.more-steps{display:none}
@media (max-width:560px){
  .table-wrap:not(.open) tbody tr:nth-child(n+4){display:none}
  .more-steps{display:block;margin-top:10px;background:none;border:0;padding:10px 0;min-height:44px;font:700 1rem/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
}

/* the sorter: empty columns say so, and keep one height on phones */
.bin ul:empty::after{content:"Nothing here yet";display:block;font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;color:var(--graphite)}
.task:hover,.pkg:hover{transform:none;box-shadow:none}
.task:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
@media (max-width:900px){.bin{min-height:140px}}

/* the method rail's resting steps are readable */
.method-rail li{color:color-mix(in srgb,var(--ink) 48%,var(--stone))}

/* closing bands: a live dot field (canvas) instead of the static texture; one lockup size on both pages */
.closer{background-image:none}
.closer .lockup{width:min(100%,300px)}

/* reduced motion: the pain tick appears without drawing */
.pl-box .mk{visibility:hidden}
.painlist .pain[aria-pressed="true"] .pl-box .mk{visibility:visible}
@media (prefers-reduced-motion:reduce){
  .pl-box .mk svg{clip-path:none!important;transition:none!important}
}

.rc-head,.fn-list,.jump,.qd-note{max-width:none}

/* ===== v8: design panel round 3 =====
   One colour code for the method (Hand over = the machine, Check = both, Decide = the pen), one ledger for both FAQs,
   plain rules for reference material, a frame only around what you operate or buy. */

/* the method's colour code, wherever the three words appear */
.t1{color:var(--bot-text)}
.t3{color:var(--human)}
.closer .t1,.symband .t1,.ink .t1{color:var(--aqua)}
.method-rail li:nth-child(3).on b{color:var(--human)}

/* the method rail: readable when resting (3:1 for the big words, 4.5:1 for the numbers); the step names stay in the
   accessibility tree on wide screens, where the rail shows them */
.method-rail li{color:color-mix(in srgb,var(--ink) 58%,var(--stone))}
.method-rail .mono{opacity:1;color:color-mix(in srgb,var(--ink) 70%,var(--stone))}
.method-rail li.on .mono{color:var(--ink)}
.demo{position:relative}
.demo .step-verb{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:900px){.demo .step-verb{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}

/* hero teaser: labels hang from the right edge of their number, so they stay inside the card */
.td-fix::after{left:auto;right:-4px;transform:rotate(-3deg);transform-origin:100% 100%}

/* the hunt: the pen ticks the finished document; the email's corrections are struck, not circled */
.hunt-stamp{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;transform:none;font:800 1.05rem/1 var(--sans);color:var(--human)}
.hunt-stamp[hidden]{display:none}
.hunt-stamp.slam{animation:none}
.hs-mk{display:block;width:46px;height:38px}
.hs-mk > .mk{width:100%;height:100%}
.mail-body .spot.found::before{display:none}

/* who it's for: the pen ticks and strikes, no box */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.fit-list{list-style:none;margin:18px 0 0;padding:0;border-top:2px solid var(--ink)}
.fit-list li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:10px;align-items:start;padding:14px 0;border-bottom:1px solid var(--hair)}
.fit-mk{display:block;width:2.1rem;height:1.2rem;margin-top:.15rem}
.fit-list--no .fit-mk{height:.8rem;margin-top:.45rem}
.fit-list--no .fit-mk > .mk{color:var(--graphite)}
.fit-mk > .mk{width:100%;height:100%}
@media (max-width:900px){.fit{grid-template-columns:minmax(0,1fr)}}

/* the FAQ ledger, the same on both pages: numbered rows under ruled group heads */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px);align-items:start}
.lg-group .fg-h{margin:0;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.lg{border-bottom:1px solid var(--hair)}
.lg > summary,.lg-row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:0 8px;align-items:baseline;margin:0;padding:14px 0;list-style:none;font:inherit}
.ledger--open .lg-row{grid-template-columns:2.2rem minmax(0,1fr);padding-bottom:8px}
.lg > summary{cursor:pointer;min-height:44px}
.lg > summary::-webkit-details-marker{display:none}
.lg > summary::after{content:"";align-self:center;width:20px;height:15px;background:var(--human);-webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat;transform:rotate(180deg);transition:transform .2s}
.lg[open] > summary::after{transform:none}
.lg-n{font:500 .78rem/1 var(--mono);letter-spacing:.04em;color:var(--graphite);font-variant-numeric:tabular-nums}
.lg-q{font:800 1.02rem/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.lg-a{padding:0 0 16px calc(2.2rem + 8px);display:grid;gap:10px}
.lg-a p{margin:0;font-size:.98rem}
.lg-sub{font-weight:800}
.lg-a .yes li,.lg-a .no li{padding-block:8px;font-size:.95rem}
@media (max-width:900px){.ledger{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.lg > summary::after{transition:none}}

/* course evidence: the source type as a plain caption; the pen circles one number in each block */
.src-type{margin:0;font:700 .85rem/1.3 var(--sans);color:var(--bot-text)}
.src-type--open{color:var(--graphite);font-weight:600}
.wrong .big-num .pen-word > .mk--circle{left:-6%;width:112%;top:-18%;height:136%}
.next-link{margin-top:22px;font-weight:700}

/* the objection card sits flat: offset shadows belong to buttons */
.think-q{box-shadow:none}

/* sorter: notes and captions in plain text, a running count on phones (the columns sit below the tasks there) */
.bin-note{margin:0;font-size:.92rem;line-height:1.4;color:var(--graphite)}
.li-cap{display:block;margin-top:4px;font:500 .82rem/1.35 var(--sans);color:var(--graphite)}
.li-cap--you{color:var(--human);font-weight:700}
.bin ul:empty::after{font:400 .9rem/1.4 var(--sans);letter-spacing:0}
.sorter-count{display:none}
@media (max-width:900px){.sorter-count{display:block;margin:14px 0 0;font-weight:700}}

/* redline: the inserted text arrives without a pink flash when motion is off, and in screenshots */
html:not(.fx-on) .ed.on ins{animation:none}
/* the slider: a 44px grip around a 24px thumb */
#red-range{-webkit-appearance:none;appearance:none;background:transparent;height:44px;min-height:44px;cursor:pointer}
#red-range::-webkit-slider-runnable-track{height:4px;background:var(--ink)}
#red-range::-moz-range-track{height:4px;background:var(--ink)}
#red-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin-top:-20px;border-radius:50%;background:var(--human);border:10px solid transparent;background-clip:padding-box}
#red-range::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:var(--human);border:10px solid transparent;background-clip:padding-box;box-sizing:border-box}
#red-range:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the programme ends with the files you keep: a plain ruled list, the week in a fixed column */
.sub-h{margin:clamp(44px,5vw,68px) 0 14px;font:850 clamp(1.4rem,1rem + 1vw,1.9rem)/1.1 var(--display);font-stretch:112%;letter-spacing:-.02em}
.receipt-doc{background:none;border:0;box-shadow:none;padding:0;max-width:none}
.rc-head{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:16px}
.rc-head span:last-child{text-align:right}
.receipt-doc .have li{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:4px 16px;align-items:baseline;border-bottom:1px solid var(--hair)}
.rc-lead{display:none}
.rc-wk{text-align:right}
.rc-pkg{display:block;margin-top:3px;font:500 .84rem/1.3 var(--sans);color:var(--graphite)}

/* pricing: the recommended package is the quote; the other two are a line each; the full table on request */
.offer{background:var(--paper);border:2px solid var(--ink);padding:clamp(22px,3vw,40px)}
.of-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(20px,2.6vw,30px);align-items:start}
.of-main{display:grid;gap:14px;justify-items:start}
.of-pick{margin:0;font:500 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--human)}
.of-name{margin:0;font:850 clamp(2.4rem,1.6rem + 2.6vw,3.8rem)/1 var(--display);font-stretch:118%;letter-spacing:-.035em}
.of-name .pen-word > .mk--circle{left:-8%;width:116%;top:-14%;height:130%}
.of-price{margin:0;display:flex;align-items:baseline;gap:10px}
.of-price .big{font-size:clamp(2.6rem,1.8rem + 2vw,3.6rem);line-height:1}
.of-when{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.of-why{margin:0 0 12px;font:700 1.12rem/1.4 var(--sans)}
.of-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.of-list li{position:relative;padding:12px 0 12px 1.9em;border-bottom:1px solid var(--hair)}
.of-list li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--human);font-weight:800}
.alts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(24px,4vw,64px);margin-top:clamp(24px,3vw,36px)}
.alt{display:grid;gap:8px;align-content:start;border-top:2px solid var(--ink);padding-top:16px}
.alt-name{margin:0;font:850 1.6rem/1 var(--display);font-stretch:118%;letter-spacing:-.03em}
.alt-price{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.alt-for{margin:0}
.alt-go{justify-self:start;font-weight:700}
.compare{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.compare > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;font-weight:700}
.compare > summary::-webkit-details-marker{display:none}
.compare > summary::after{content:"";width:20px;height:15px;background:var(--human);-webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat;transform:rotate(180deg);transition:transform .2s}
.compare[open] > summary::after{transform:none}
.compare .table-wrap{border:0;background:none;margin-bottom:18px}
.compare table.qd{min-width:620px}
@media (max-width:900px){.of-body,.alts{grid-template-columns:minmax(0,1fr)}}

/* price steps: reference, so plain rules; later steps fade row by row (every row keeps 4.5:1); the reason is the caption */
.price-why{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0 clamp(24px,4vw,56px);align-items:start}
.price-why .table-wrap{border:0;background:none}
.price-why .more-steps{grid-column:1}
.price-notes{grid-column:2;grid-row:1 / span 2;list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.price-notes li{padding:12px 0;border-bottom:1px solid var(--hair)}
.sched caption{caption-side:top;text-align:left;padding:0 0 16px;max-width:64ch;line-height:1.5}
.sched thead th{background:none;color:var(--graphite);border-bottom:2px solid var(--ink)}
.sched tbody tr:nth-child(2) td{color:color-mix(in srgb,var(--ink) 94%,var(--stone))}
.sched tbody tr:nth-child(3) td{color:color-mix(in srgb,var(--ink) 88%,var(--stone))}
.sched tbody tr:nth-child(4) td{color:color-mix(in srgb,var(--ink) 83%,var(--stone))}
.sched tbody tr:nth-child(5) td{color:color-mix(in srgb,var(--ink) 78%,var(--stone))}
.sched tbody tr:nth-child(6) td{color:color-mix(in srgb,var(--ink) 74%,var(--stone))}
.sched tbody tr:nth-child(7) td{color:color-mix(in srgb,var(--ink) 70%,var(--stone))}
.sched tbody tr:nth-child(8) td{color:color-mix(in srgb,var(--ink) 68%,var(--stone))}
.sched tbody tr:nth-child(9) td{color:color-mix(in srgb,var(--ink) 66%,var(--stone))}
.sched tbody tr td.full{color:var(--ink)}
@media (max-width:900px){
  .price-why{grid-template-columns:minmax(0,1fr)}
  .price-notes{grid-column:1;grid-row:auto;margin-top:22px}
}

/* the two cost lists: one sheet */
.costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);border-top:2px solid var(--ink);padding-top:18px}
.costs-h{margin:0 0 10px;font:800 1.1rem/1.3 var(--sans)}
.costs ul{margin:0 0 10px;padding-left:1.1em;display:grid;gap:8px}
@media (max-width:900px){.costs{grid-template-columns:minmax(0,1fr)}}

/* the course ends on a signature line */
.closer-in--sign{grid-template-columns:minmax(0,1fr)}
.final--sign{max-width:920px}
.triad{margin:0}
.sign-line{display:flex;align-items:flex-end;gap:14px;width:min(100%,560px);padding-bottom:6px;border-bottom:2px solid color-mix(in srgb,var(--stone) 70%,transparent)}
.sign-line .sig-mk{width:min(78%,380px)}
.sign-line .sig-mk > .mk{color:var(--signal)}
.sl-cap{margin:-12px 0 0;font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}

/* the webinar ends on a timetable you can tap */
.times{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.times li + li{border-left:1px solid var(--hair)}
.times a{display:grid;gap:8px;min-height:44px;padding:16px 16px 18px;color:inherit;text-decoration:none}
.times a:hover,.times a:focus-visible{background:color-mix(in srgb,var(--stone) 9%,transparent)}
.tm-d{font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.tm-t{font:850 clamp(1.9rem,1.3rem + 1.9vw,3rem)/1 var(--display);font-stretch:118%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.times li:last-child .tm-t{color:var(--aqua)}
@media (max-width:560px){
  .times{grid-template-columns:repeat(2,minmax(0,1fr))}
  .times li:nth-child(3){border-left:0}
  .times li:nth-child(n+3){border-top:1px solid var(--hair)}
}

/* the thank-you video slot is framed like the photo, not hatched */
.ph-media{background:var(--panel);background-image:none;border:0;place-items:end start;padding:22px;text-align:left}
.ph-media > .mk--bracket{position:absolute;left:18px;top:18px;width:auto;height:46%;aspect-ratio:93/183;color:var(--human)}
.ph-media .cap{left:auto;right:0}


/* ---- v8b: fixes from my own pass over the round-4 screenshots ---- */
/* long lines end without a lonely last word */
p,li,dd,figcaption{text-wrap:pretty}

/* sentences never sit in monospace capitals; mono stays for labels, codes and dates */
.hunt-tabs .mono,#hunt > p.mono,.calc > p.mono,.red-mail p.mono,.mod > p.mono,.ph-media > .mono{font:400 .95rem/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--graphite)}
.wk-qa{font:700 .88rem/1.35 var(--sans);letter-spacing:0;text-transform:none}
/* the module and demo kickers read as run-in labels */
.mod .k,.demo .k{font:800 .9rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.mod .k::after,.demo .k::after{content:":"}

/* the price table's "full" mark is a word, not a chip */
.sched .full::after{border:0;padding:0;font:500 .7rem/1 var(--mono);color:var(--graphite)}

/* sorter: the note clears the columns; the Check column is not singled out (the colour code does that now) */
#sorter-note{margin-top:16px}
.bin--check{box-shadow:none;border-color:var(--ink)}

/* the refund number: the circle clears the "A" */
.wrong .big-num .pen-word > .mk--circle{left:-10%;width:120%;top:-26%;height:152%}

/* hero teaser: room above each row for its correction */
.teaser-doc{gap:10px}
.teaser-doc .t-row{padding-top:26px}

/* thank-you timeline: reference, so a ruled row instead of a boxed grid */
.timeline{border:0;border-top:2px solid var(--ink);background:none}
.timeline li{border-left:1px solid var(--hair);padding:14px 16px 4px}
.timeline li:first-child{border-left:0;padding-left:0}
@media (max-width:900px){
  .timeline li{border-left:0;border-top:1px solid var(--hair);padding:12px 0}
  .timeline li:first-child{border-top:0}
}

/* ===== v9: design panel round 4 =====
   The pen gets its nib everywhere the symbol appears; the method's three words take one shape (the symbol band's list);
   labels that were chips become plain text; the course ends on paper with a signature and a seal. */

/* system stand-ins sized to the web fonts' metrics (assets/fonts/fallbacks.css): no reflow when the fonts arrive */
:root{
  --sans:"Atkinson Hyperlegible Next","Atkinson Fallback",Arial,sans-serif;
  --display:"Archivo","Archivo Fallback","Arial Black",Arial,sans-serif;
  --mono:"Roboto Mono","Roboto Mono Fallback",ui-monospace,Menlo,Consolas,monospace;
  --dots:"Doto","Doto Fallback","Roboto Mono",monospace;
}
/* brand turquoise (#118186) is text-safe only at large bold sizes (3.9:1 on Stone): .dots-word, the method rail's first
   step and the sorter's "Hand over." stay large; small turquoise text uses --bot-text */

/* the machine prints each chapter number, row by row, when its chapter comes into view (JS adds the classes) */
.print-on .chapter-h::before{clip-path:inset(0 0 100% 0)}
.print-on .chapter-h.printed::before{clip-path:inset(0 0 0 0);transition:clip-path .56s steps(7,end)}

/* the webinar's closing lockup: the nib-drawn symbol over the wordmark */
.lockup--nib{display:grid;justify-items:center;gap:clamp(12px,1.6vw,20px)}
.lockup--nib .logo--nib-dark{width:52%}
.lockup--nib .logo{height:auto;aspect-ratio:var(--ar)}

/* hero teaser: the corrections hang inside the card on narrow phones too */
@media (max-width:560px){
  .teaser-doc{transform:rotate(-1.5deg);padding-right:26px}
  .td-fix::after{right:0}
}
.teaser-cta .arr{animation-iteration-count:2}

/* labels that were chips read as the machine's plain annotations */
.srcs .tag{border:0;padding:0;background:none;color:var(--bot-text);letter-spacing:.06em}
.chip-draft{background:none;padding:0;color:var(--bot-text)}
.ink .chip-draft,.symband .chip-draft{background:none;color:var(--aqua)}

/* the quote hunt on phones: a found number takes its correction inline, like the email, so nothing floats over the row above */

/* sorter: the three columns share the symbol band's shape (a ruled list, the words in their colours), no boxes */
.bin,.bin--check{border:0;border-top:2px solid var(--ink);background:none;box-shadow:none;padding:14px 0 0;min-height:0}
.bin h3{font-size:clamp(1.45rem,1rem + 1.3vw,2.15rem)}
.bin[data-bin="keep"] h3{color:var(--human)}
.more-tasks{display:none}
@media (max-width:900px){
  .task-pool:not(.open) .task--more{display:none}
  .more-tasks{display:block}
}

/* course pricecard: the two notes are plain lines under a hairline, not callout boxes */
.pricecard .why{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:10px}

/* evidence: the unverified case sits lighter and says why it is there */
.case--open h3,.case--open p{color:var(--graphite)}
.case-why{font-size:.88rem;font-style:italic;color:var(--graphite)}
.r-fact .pen-word > .mk{bottom:-.18em}

/* the files you keep: a ledger again, dotted leaders to the week, a double rule where it ends */
.receipt-doc .have li{grid-template-columns:minmax(0,max-content) minmax(24px,1fr) 5.5rem}
.rc-lead{display:block;min-width:24px;border-bottom:2px dotted var(--mist);transform:none}
.receipt-doc .have{border-bottom:4px double var(--ink)}
.receipt-doc .have li:last-child{border-bottom:0}
.rc-head{grid-template-columns:minmax(0,1fr) 5.5rem}

/* pricing: Starter and Complete sit on a tinted sheet (a catalogue, one step below the Cohort quote) */
.alt{background:var(--field);padding:16px 20px 18px}
.sched tr.now td{background:none}

/* the pen caret on questions, a size up and hand-set */
.lg > summary::after,.compare > summary::after{width:24px;height:18px;transform:rotate(176deg)}
.lg[open] > summary::after,.compare[open] > summary::after{transform:rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.compare > summary::after{transition:none}}

/* the self-check inside the course FAQ, and the one-email notice */
.fit-list--sm{margin-top:4px}
.fit-list--sm li{padding:9px 0;font-size:.95rem;grid-template-columns:2.2rem minmax(0,1fr)}
.fit-list--sm .fit-mk{width:1.8rem;height:1rem}
.fit-list--sm.fit-list--no .fit-mk{height:.7rem;margin-top:.4rem}
.notify{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.notify input{flex:1 1 180px;min-height:44px;padding:8px 10px;border:2px solid var(--ink);background:var(--paper);font:inherit}
.notify .btn{min-height:44px}
.notify-ok{flex-basis:100%;margin:0;font-weight:700;color:var(--human)}

/* the course ends on paper: the method, a signature line, the nib-drawn seal */
.finale{border-top:2px solid var(--ink);padding-block:clamp(56px,7vw,112px)}
.finale .final{display:grid;gap:24px;justify-items:start;max-width:980px}
.finale h2{font:850 clamp(2.2rem,1.2rem + 3.4vw,4.2rem)/1 var(--display);font-stretch:118%;letter-spacing:-.035em;margin:0}
.verbs--paper{width:100%;border-top:1px solid var(--hair)}
.verbs--paper li{border-bottom:1px solid var(--hair)}
.verbs--paper li:nth-child(1) b{color:var(--bot-text)}
.verbs--paper li:nth-child(3) b{color:var(--human)}
.verbs--paper span{color:var(--graphite)}
.sign-row{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);width:min(100%,640px)}
.sign-row .sign-line{flex:1;width:auto;border-bottom:2px solid var(--ink)}
.sign-row .sig-mk{width:min(86%,380px)}
.sign-row .sig-mk > .mk{color:var(--human)}
.sign-seal{display:block;flex:none;width:clamp(76px,9vw,112px)}
.sign-seal .logo{width:100%;height:auto;aspect-ratio:var(--ar)}
.finale .sl-cap{margin:-10px 0 0;color:var(--graphite)}

/* thank-you: the calendar as a line of links; the question as a list the pen ticks */
.cal-row{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-weight:700}
.cal-h{font-weight:400;color:var(--graphite)}
.cal-row .link{min-height:44px;display:inline-flex;align-items:center}
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);border-top:2px solid var(--ink);max-width:760px}
.pick{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--hair);cursor:pointer;font-weight:700}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick-box{position:relative;width:26px;height:26px;border:2px solid var(--ink);background:var(--paper)}
.pick-box .mk{position:absolute;left:-2px;top:-12px;width:42px;height:28px;visibility:hidden}
.pick input:checked + .pick-box .mk{visibility:visible}
.pick input:focus-visible + .pick-box{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:560px){.picks{grid-template-columns:minmax(0,1fr)}}

/* v9b: after my own look at the round-5 renders */
/* the method's first word fits its column on one line ("Hand over." wrapped at 11.5rem) */
@media (min-width:561px){.verbs li{grid-template-columns:minmax(0,14.5rem) minmax(0,1fr)}}
/* the open comparison is a reference table: prices at reading size, the big numbers stay in the quote above */
.compare .qd thead th{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);padding-top:16px;padding-bottom:12px}
.compare .qd .qd-price td .big{font-size:1.3rem;line-height:1.2}
/* one rule under the ledger is enough */
.included{border-top:0;padding-top:0;margin-top:34px}
/* the finished hunt on a phone: the pen's tick joins the flow under the document instead of covering its header;
   the quote's note (a sentence, like the email) is struck, not circled */

/* ===== v10: design panel round 5 ===== */
/* the hunt's panel and result stay inside their card: their grid columns may shrink below the big total's width */
.hunt-panel,.hunt-result{grid-template-columns:minmax(0,1fr)}
.hunt-result .big-num{font-size:clamp(2.4rem,1.6rem + 1.5vw,3.3rem)}
/* the finished quote: each correction sits under its struck value in the pen's red; no floating tags, no circles */
#quote-doc .spot.found::before{display:none}
/* (the script puts a line break before each correction; an inline-block label is not struck with its value) */
#quote-doc .spot{text-align:inherit}
#quote-doc .spot.found .fix{position:static;transform:none;display:inline-block;margin-top:5px;font-size:.72rem}
.hunt-stamp{position:static;margin-top:12px}
/* on phones the quote's rows become label and value pairs, so no column is cut off (the before-discount sums stay hidden) */
@media (max-width:560px){
  #quote-doc .doc-scroll{overflow:visible}
  #quote-doc table,#quote-doc tbody,#quote-doc tr,#quote-doc td{display:block;min-width:0}
  #quote-doc thead{display:none}
  #quote-doc tbody tr{padding:10px 0;border-bottom:1px solid var(--hair)}
  #quote-doc td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:3px 0;border:0}
  #quote-doc td:first-child{display:block;font-weight:700;padding-bottom:6px}
  #quote-doc td:nth-child(4){display:none}
  #quote-doc td:nth-child(2)::before{content:"Qty"}
  #quote-doc td:nth-child(3)::before{content:"Rate"}
  #quote-doc td:nth-child(5)::before{content:"After 5% discount"}
  #quote-doc td:not(:first-child)::before{font:500 .7rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);text-align:left}
  .mail-body p{line-height:1.95}  /* room between the tappable words of the email */
}
/* hero teaser: AI's three catches show for a moment and go, so the card never sits solved beside "can you find them?" */
.td-fix{animation:tdstrike 3.6s var(--d,0s) both}
.td-fix::before{animation:tdring 3.6s var(--d,0s) both}
.td-fix::after{animation:tdlabel 3.6s var(--d,0s) both}
@keyframes tdstrike{0%,8%{background-size:0% 2px}18%,70%{background-size:100% 2px}82%,100%{background-size:0% 2px}}
@keyframes tdring{0%,8%{opacity:0;transform:scale(1.5)}18%,70%{opacity:1;transform:scale(1)}82%,100%{opacity:0;transform:scale(1)}}
@keyframes tdlabel{0%,10%{opacity:0}20%,70%{opacity:1}82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .td-fix,.td-fix::before,.td-fix::after{animation:none}
  .td-fix{background-size:0 2px}
  .td-fix::before,.td-fix::after{opacity:0}
}
@media (max-width:560px){.teaser-doc .td-fix::before{inset:-4px -5px}}
/* the thank-you question is pick-one, so its boxes are round */
.pick-box{border-radius:50%}
/* pricing: the quote's list is an inventory (no ticks: ticks are for pledges); the self-check sits by the button;
   the catalogue sheets get a hairline edge; the price steps follow one rule: today in ink, later steps in graphite */
.of-list li{padding-left:0}
.of-list li::before{content:none}
.of-check{font-weight:700}
.alt{border:1px solid var(--mist);border-top:2px solid var(--ink)}
.sched tbody tr:not(.now) td{color:var(--graphite)}
.sched tbody tr td.full{color:var(--ink)}
/* the disclosure mark is a quick pen flick: a heavy down-stroke and a light, longer up-stroke */
:root{--flick-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2.5 4.2C5.2 7 8.1 10.6 11 13.6' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M11 13.6C14.2 9.1 17.9 5 22.4 1.4' stroke='%23000' stroke-width='1.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.lg > summary::after,.compare > summary::after{-webkit-mask:var(--flick-mask) center/contain no-repeat;mask:var(--flick-mask) center/contain no-repeat;transform:rotate(-4deg)}
.lg[open] > summary::after,.compare[open] > summary::after{transform:rotate(176deg)}
#quote-doc .doc-note .spot{vertical-align:top}  /* the struck sentence stays on the line of "Note:", its correction below */

/* ===== v11: epic heroes =====
   Webinar: a dark stage, a headline at poster size, and a live draft the machine writes and the pen signs.
   Course: the hype runs past in giant outline type and the pen strikes each phrase at the middle of the band. */

/* ---------- webinar: the stage ---------- */
.stage-band{background:var(--ink);color:var(--stone);--human:var(--signal);--bot:var(--aqua);--hair:rgba(238,235,230,.22)}
.site--stage{position:relative;top:auto;background:transparent;z-index:3}
.stage{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,5vw,88px);align-items:center;
  min-height:min(calc(100svh - 96px),980px);padding-block:clamp(12px,2.4vw,36px) clamp(64px,8vw,120px)}
.stage-text{display:grid;gap:clamp(18px,2vw,28px);justify-items:start;align-content:center}
.stage .hero-kick{color:var(--stone)}
.stage .hero-kick::before{background:var(--signal)}
.stage-h1{margin:0;font:850 clamp(2.6rem,1rem + 5vw,6.4rem)/.9 var(--display);font-stretch:118%;letter-spacing:-.045em;color:var(--stone)}
.stage-h1 .ln{display:block}
.stage-h1 .dots-word{color:var(--aqua);font-size:1.02em}
.stage-h1 .pen-word > .mk{color:var(--signal)}
.stage .lead{margin:0;max-width:44ch;color:color-mix(in srgb,var(--stone) 84%,transparent)}
.stage .host{border-color:var(--hair);font-size:.9rem;color:color-mix(in srgb,var(--stone) 80%,transparent)}
.stage .host-ph{border-color:var(--stone);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(238,235,230,.18) 5px 6px)}

/* the form: step 1 on the stage (email and the button), step 2 opens as a white sheet */
.reg{width:min(100%,600px);display:grid;gap:10px}
.reg-1{display:flex;flex-wrap:wrap;gap:10px}
.reg-1 input{flex:1 1 240px;min-height:58px;padding:0 18px;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);border:2px solid var(--paper);border-radius:0}
.reg-1 input::placeholder{color:var(--graphite)}
.reg-1 input:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.reg-1 .btn{min-height:58px}
.stage .btn--primary{box-shadow:4px 4px 0 var(--signal)}
.reg-note{margin:0;font-size:.9rem;color:color-mix(in srgb,var(--stone) 72%,transparent)}
.reg-2{--human:#BF223E;--bot:#118186;--hair:color-mix(in srgb,var(--ink) 16%,transparent);background:var(--paper);color:var(--ink);
  padding:clamp(18px,2.2vw,26px);display:grid;gap:16px;box-shadow:6px 6px 0 var(--signal)}
.reg-2 .reg-note{color:var(--graphite)}
.reg-2 legend{font-weight:700;margin-bottom:10px}
.reg--open .reg-1 .btn{display:none}

/* the draft: a sheet of paper on the dark desk */
.draft{margin:0;display:grid;gap:16px;justify-items:center;perspective:1600px}
.draft-doc{--human:#BF223E;--bot:#118186;--hair:color-mix(in srgb,#2C1751 14%,transparent);position:relative;width:min(100%,520px);
  background:var(--paper);color:var(--ink);padding:clamp(20px,2.4vw,32px);border-left:6px solid var(--bot);
  box-shadow:0 60px 100px -40px rgba(0,0,0,.7),0 20px 40px -20px rgba(0,0,0,.45);
  transform:rotateY(calc(-11deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg))) rotateZ(-1.5deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);font-variant-numeric:tabular-nums}
.draft-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px}
.draft-state{font:500 .7rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bot);text-align:right}
.draft-state.is-human{color:var(--human)}
.draft-to{margin:0 0 4px;min-height:1.3em;font:700 1rem/1.3 var(--sans)}
.dr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;margin:0;padding:13px 0;border-bottom:1px solid var(--hair);min-height:3.1em}
.dr b{font:500 .98rem/1.3 var(--mono);text-align:right;white-space:nowrap}
.dr--total{border-bottom:2px solid var(--ink)}
.dr--total > span{font-weight:700}
.dr--total b{font:850 1.3rem/1.2 var(--display);font-stretch:112%}
.dw{position:relative;display:inline-block}
.dw > .mk{position:absolute;left:-8%;width:116%;top:36%;height:.42em;color:var(--human)}
.dw--circle > .mk{left:-16%;width:132%;top:-42%;height:184%}
.dfix{display:inline-block;margin-left:.5em;font:700 1rem/1 var(--sans);color:var(--human);transform:rotate(-3deg)}
.dfix--total{font:850 1.35rem/1 var(--display);font-stretch:112%}
.fx-on .dfix{opacity:0;transform:translateY(6px) rotate(-3deg);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.fx-on .dfix.on{opacity:1;transform:rotate(-3deg)}
.draft-sign{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:20px}
.draft-sig{display:block;width:58%;aspect-ratio:333/67}
.draft-sig > .mk{width:100%;height:100%;color:var(--human);--mk-dur:1.1s}
.draft-by{font:500 .7rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--human);text-align:right}
.fx-on .draft-by{opacity:0;transition:opacity .4s .6s}
.fx-on .draft-by.on{opacity:1}
.draft-caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.16em;background:var(--bot);animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.draft-cap{margin:0;font-size:.9rem;color:color-mix(in srgb,var(--stone) 76%,transparent);text-align:center}
.draft-cap a,.draft-replay{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;background:none;border:0;cursor:pointer;
  color:var(--stone);font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:clamp(48px,10vw,72px)}
  .draft-doc{transform:rotateZ(-1.2deg)}
}
@media (prefers-reduced-motion:reduce){.draft-doc{transition:none}.draft-caret{animation:none}}

/* ---------- course: the hype band ---------- */
.hype{overflow:hidden;display:grid;gap:.05em;padding-block:clamp(4px,.8vw,12px) clamp(8px,1.4vw,18px);border-bottom:1px solid var(--hair)}
.hype-row{white-space:nowrap;line-height:1}
.hype-track{position:relative;display:inline-flex;will-change:transform}
.hp{position:relative;display:inline-block;padding:0 .5em;font:850 clamp(2.2rem,1.2rem + 3.8vw,5.2rem)/1.04 var(--display);font-stretch:125%;
  letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb,var(--ink) 36%,transparent);transition:-webkit-text-stroke-color .5s}
.hp.struck{-webkit-text-stroke-color:color-mix(in srgb,var(--ink) 20%,transparent)}
.hp > .mk{position:absolute;left:.3em;right:.3em;width:auto;top:42%;height:.36em;color:var(--human);--mk-dur:.55s}
.hype .mk[data-draw]:not(.on) svg{transition:none}
.hype-word > .mk{bottom:auto;top:30%;height:.46em;left:-5%;width:110%;--mk-dur:.9s;--mk-delay:.5s}
@media (max-width:560px){.hp{font-size:clamp(1.9rem,1rem + 6vw,2.6rem);-webkit-text-stroke-width:1.2px}}

/* the stage's art: the 2D symbol first; the 3D scene takes over once three.js is ready (desktop, motion allowed) */
.stage-art{position:relative;align-self:stretch;min-height:min(72vh,700px);display:grid;place-items:center}
.stage-art > .sym{width:min(86%,470px);transition:opacity .6s ease}
.stage-3d{position:absolute;left:-2%;top:-6%;width:118%;height:112%;opacity:0;transition:opacity 1s ease;pointer-events:none}
.stage-art.is-3d > .stage-3d{opacity:1}
.stage-art.is-3d > .sym{opacity:0}
@media (max-width:900px){.stage-art{min-height:0;padding-block:8px 0}.stage-art > .sym{width:min(78%,360px)}}

/* film grain over the dark stage: above the dot field, under the words */
.stage-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(5) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:25px -55px}60%{background-position:-60px -20px}80%{background-position:45px 50px}}
@media (prefers-reduced-motion:reduce){.stage-band::after{animation:none}}
/* the hero's endless loops wait while it is off screen (a running loop costs a style pass every frame, seen or not) */
.stage-band.idle::after,.stage-band.idle .stage-scroll > span::after{animation-play-state:paused}
.stage{padding-bottom:clamp(40px,5vw,76px)}

/* the course hero's pen: its ink sits over the page and never takes a click */
.fx-host > .ink-trail{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
/* the draft on a phone: each value under its label, so a correction never runs into the words beside it */
@media (max-width:560px){.dr{grid-template-columns:minmax(0,1fr);gap:4px}.dr b{text-align:left;white-space:normal}}

/* the pen line down the left margin (desktop): drawn as far as you have read, the pen's tip leading */
.pen-line{position:absolute;top:0;left:0;z-index:30;pointer-events:none;overflow:visible}
.pen-line path{fill:none;stroke:var(--human);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pen-tip{position:absolute;top:-4.5px;left:-4.5px;z-index:30;width:9px;height:9px;border-radius:50%;background:var(--human);
  pointer-events:none;opacity:0;will-change:transform;transition:opacity .3s}
/* below 1100px the pen runs down the gutter (v15_pen.js narrow mode); its count stays hidden (v15_pen.css) */

/* ===== v12: the Awwwards pass =====
   One language for both heroes: hollow capitals are the machine's draft and the hype, solid capitals are what a person
   checked, and the red script is the signature that puts a name on it. The headline is poster-size condensed capitals
   anchored bottom left, small mono labels hold the edges, the 3D symbol fills the right half of the stage. */
:root{--cond:"Archivo","Archivo Narrow Fallback","Arial Narrow",Arial,sans-serif;--script:"Herr Von Muellerhoff","Segoe Script","Brush Script MT",cursive}

/* ---------- the poster headline (both pages) ---------- */
.stage-h1{margin:0;font:900 var(--h1,4rem)/.86 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--stone)}
.stage-h1 .ln{padding-bottom:.06em;margin-bottom:-.06em}
.kin .ln:nth-child(4) > span{animation-delay:.27s}
.stage-h1 .dots-word{font-size:.8em;letter-spacing:.02em;color:var(--aqua);-webkit-text-stroke:0}
/* hollow: the stroke is painted under a fill of the stage colour, so only its outer half shows and the joins inside
   each letter stay hidden */
.ln--hollow > span,.hype-word{color:var(--ink);-webkit-text-stroke:max(3px,.034em) var(--stone);paint-order:stroke fill}
.ln--hollow .dots-word{color:var(--aqua);-webkit-text-stroke:0}

/* the signature: the pen writes the word left to right once it is in view (fx-on only; otherwise it is simply there) */
.sig-word{font-family:var(--script);font-weight:400;font-stretch:100%;font-style:normal;letter-spacing:0;text-transform:none;color:var(--signal);-webkit-text-stroke:0}
.stage-h1 .sig-word{display:block;width:max-content;font-size:1.7em;line-height:.56;margin:-.78em 0 -.3em 1.05em;padding:.3em .3em .42em;transform:rotate(-8deg);transform-origin:0 70%}
.fx-on .sig-word[data-sign]{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat;mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat}
.fx-on .sig-word[data-sign].on{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 1.7s cubic-bezier(.55,.1,.35,1),mask-position 1.7s cubic-bezier(.55,.1,.35,1)}

/* the edge labels */
.stage-top{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;max-width:none;margin:0;padding-top:14px;border-top:1px solid var(--hair);
  font:500 .72rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--stone) 74%,transparent)}
.stage-top .anno{color:inherit}

/* ---------- webinar: the stage ---------- */
.stage-band{overflow:clip;background:radial-gradient(ellipse 46% 60% at 76% 46%,color-mix(in srgb,#6A3FB5 36%,var(--ink)) 0%,transparent 72%),var(--ink)}
.stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:end;gap:clamp(18px,2vw,28px);
  min-height:min(calc(100svh - 84px),1040px);padding-block:0 clamp(28px,3.2vw,48px)}
.stage-copy{position:relative;z-index:2;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,20px);justify-items:start}
.stage .stage-h1{--h1:clamp(3rem,min(20cqw,12.6svh),8.8rem)}
.stage-lead{margin:.7em 0 0;max-width:44ch;font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);line-height:1.5;color:color-mix(in srgb,var(--stone) 84%,transparent)}
.stage-foot{position:relative;z-index:2;display:grid;gap:16px}
.stage-scroll{margin:0;max-width:none;display:flex;align-items:center;gap:12px;font:500 .72rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--stone) 64%,transparent)}
.stage-scroll > span{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;font-size:0}
.stage-scroll > span::after{content:"";width:1px;height:16px;background:var(--stone);animation:v12-drip 1.8s cubic-bezier(.6,0,.4,1) infinite;transform-origin:50% 0}
/* the drip keeps its origin at the top: shrinking toward the bottom edge is the same as sliding down by what it loses
   (translateY(100%) with scaleY(0) interpolates pairwise, so the line's top and bottom pass the very same points).
   Animating transform-origin kept this endless cue off the compositor: a page frame on the main thread every vsync */
@keyframes v12-drip{0%{transform:translateY(0) scaleY(0)}45%{transform:translateY(0) scaleY(1)}55%{transform:translateY(0) scaleY(1)}100%{transform:translateY(100%) scaleY(0)}}
@media (min-width:901px){
  .stage{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(28px,3vw,48px)}
  .stage-copy{grid-column:1;grid-row:2 / 4}
  /* the symbol fills the right half and bleeds to the window's edge (the band clips it) */
  .stage .stage-art{position:absolute;z-index:1;top:43%;translate:0 -50%;height:min(100%,880px);right:calc(50% - 50vw + 1vw);width:min(58vw,900px);min-height:0}
  .stage .stage-art > .sym{width:min(76%,620px)}
  .stage-foot{grid-column:2;grid-row:3;justify-self:end;justify-items:end;max-width:380px}
  .stage-foot .host{border:0;padding:0;text-align:left}
}
@media (max-width:900px){
  .stage{min-height:0;padding-bottom:clamp(40px,8vw,64px)}
  .stage-scroll{display:none}
}
@media (max-width:560px){.stage-h1 .sig-word{font-size:1.5em;margin-left:.62em}}
@media (prefers-reduced-motion:reduce){.stage-scroll > span::after{animation:none}}
@media (max-height:760px){.stage-scroll{display:none}}

/* ---------- course: the hype wall ---------- */
.wall-band{background:var(--ink);color:var(--stone)}
/* loud behind the headline, quiet behind the small print */
.wall-band > .hype--wall{position:absolute;inset:clamp(96px,14svh,150px) 0 0;z-index:0;display:flex;flex-direction:column;justify-content:space-around;gap:0;padding:0;border:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0 56%,rgba(0,0,0,.3) 80% 100%);mask-image:linear-gradient(180deg,#000 0 56%,rgba(0,0,0,.3) 80% 100%)}
.hype--wall .hp{font-size:clamp(2.4rem,min(8vw,12svh),9rem);color:var(--ink);-webkit-text-stroke:3px color-mix(in srgb,var(--stone) 24%,transparent);paint-order:stroke fill}
.hype--wall .hp.struck{-webkit-text-stroke-color:color-mix(in srgb,var(--stone) 13%,transparent)}
.hype--wall .hp > .mk{color:var(--signal);opacity:.34;height:.22em}
/* one screen: the title in the middle of the wall, the signature under it, one button */
.hero2--wall{position:relative;z-index:2;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;gap:clamp(20px,2.4vw,34px);
  min-height:min(calc(100svh - 84px),1040px);padding-block:0 clamp(40px,5vw,72px)}
.wall-title{container-type:inline-size;width:100%;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(16px,1.8vw,26px);text-align:center}
/* WP-HERO (2026-10-03): no strips of the stage colour behind the words any more (the owner: the backing must be see-through);
   the wall recedes behind the text instead (its mask, v17_course.css WP-HERO), and the small lines keep a soft halo of
   the stage colour that only darkens the wall's strokes right around the letters */
.wall-band .course-slogan,.wall-micro{background:none;box-shadow:none;text-shadow:0 0 .5em var(--ink),0 0 .16em var(--ink)}
.hero2--wall .wall-h1{--h1:clamp(3.2rem,min(19cqw,23svh),14rem);font-size:var(--h1);line-height:.86}
.wall-h1 .hype-word > .mk{top:18%;height:.5em;left:-4%;width:108%}
.wall-band .course-slogan{margin:.2em 0 0;font-size:clamp(1.3rem,.9rem + 1.3vw,2.1rem);color:var(--stone)}
.course-slogan .sig-word--inline{display:inline-block;font-size:1.9em;line-height:0;padding:.5em .2em .6em;margin:-.5em -.1em -.6em 0;transform:rotate(-5deg);transform-origin:0 60%}
.wall-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px}
.wall-cta .btn{display:inline-block;min-height:58px;padding-block:17px;font-size:1.05rem;line-height:1.3;text-align:center}
.wall-cta .btn .arr{display:inline-block}
.wall-more{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:var(--stone);font-weight:700;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.wall-micro{margin:0;max-width:none;font:500 .72rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--stone) 72%,transparent)}
/* the band under the stage: the promise, the teacher and the price card, on paper */
.hero2-more{align-items:center;padding-block:clamp(48px,6vw,96px)}
.more-h{margin:0;font:900 clamp(2.6rem,1rem + 4.4vw,5.4rem)/.88 var(--cond);font-stretch:68%;text-transform:uppercase;letter-spacing:-.004em;color:var(--ink)}
.more-h em{font-style:normal;color:var(--human)}
@media (max-width:900px){
  .hero2--wall{min-height:min(calc(100svh - 70px),860px);padding-top:clamp(20px,6vw,40px)}
  .hero2--wall .wall-h1{--h1:clamp(3.2rem,25cqw,7rem)}
}

/* both headlines drift up and fade as the page moves on (browsers with scroll-driven animations); the forms stay put */
@supports (animation-timeline:view()){
  @media (min-width:901px) and (prefers-reduced-motion:no-preference){
    .stage-copy .stage-h1,.wall-title .wall-h1{animation:v12-lift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes v12-lift{to{transform:translateY(-12vh);opacity:.25}}

/* ---------- chapter headlines: the heroes' poster capitals, one size down ----------
   Where a headline sets a claim against the truth, the claim is hollow (.hol) and the truth is solid. */
h2:not(.h2s),.chapter-h{font:900 clamp(2.6rem,1rem + 4.2vw,5.4rem)/.9 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;text-wrap:balance}
.h2s.chapter-h{font-size:clamp(2.2rem,1rem + 3vw,4.2rem)}
.closer h2{font-size:clamp(3rem,1rem + 6vw,7.4rem);line-height:.88}
.symband h2{font-size:clamp(2.6rem,1rem + 4.6vw,5.8rem)}
.hol{color:var(--hol-bg,var(--stone));-webkit-text-stroke:max(3px,.05em) var(--hol-ink,var(--ink));paint-order:stroke fill}
/* an outline eats into the gaps, so hollow words get a little more air */
.hol,.ln--hollow > span,.hype-word{letter-spacing:.022em;word-spacing:.1em}
.ink .hol,.symband .hol,.closer .hol,.seal-top .hol,.stage-band .hol{--hol-bg:var(--ink);--hol-ink:var(--stone)}
.ty-h1{font:900 clamp(2.6rem,1rem + 4.6vw,5.6rem)/.9 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;text-wrap:balance}
/* each chapter headline prints in with its number: a wipe from the top, no layout shift */
.print-on .chapter-h{clip-path:inset(0 -6% 100% -6%)}
.print-on .chapter-h.printed{clip-path:inset(-12% -6% -12% -6%);transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1) .12s}
h2 .sig-word--inline{display:inline-block;font-size:1.5em;line-height:0;padding:.5em .2em .6em;margin:-.5em -.1em -.6em .05em;transform:rotate(-6deg);transform-origin:0 60%}

/* ---------- the prototype controls fold into a chip ---------- */
/* desktop: top centre, in the header's empty middle; phones: bottom left, above the sticky bar */
.proto{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:90;max-width:calc(100vw - 24px);border:1px solid rgba(207,201,218,.45);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.proto .wrap{max-width:none;margin:0;padding:6px 8px;gap:6px 16px}
.proto:not(.open) .wrap > :not(.who){display:none}
.proto .who{display:inline-flex;align-items:center;gap:8px;min-height:32px;border:0}
.proto .who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.proto .who::after{content:"+";font-weight:700}
.proto.open .who::after{content:"\2013"}
@media (max-width:720px){.proto{left:auto;right:12px;top:12px;transform:none}.proto:not(.open) .who-page{display:none}}

/* ===== v13: every section gets a moment =====
   A shared kit from the second Awwwards study (darkroom.engineering, Revelo, Lenis, Locomotive, Lusion, Shopify
   Editions, Oryzo): headlines that assemble, quotes that light up as you read, documents with printer's crop marks,
   dark bands that open out of a rounded sheet, a pointer label over the demos, and a full-width wordmark to end on. */

/* ---------- chapter headlines assemble word by word (JS adds .asm, then .in) ---------- */
.asm .w{display:inline-block}
.fx-on .asm .w{opacity:0;transform:translate(0,.5em) rotate(calc(var(--r,0) * 1.4deg));filter:blur(8px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 48ms),transform .95s cubic-bezier(.16,.9,.24,1) calc(var(--i) * 48ms),filter .6s ease calc(var(--i) * 48ms)}
.fx-on .asm.in .w{opacity:1;transform:none;filter:none}
/* the v12 print wipe is replaced by the assembly; the number still prints */
.print-on .chapter-h,.print-on .chapter-h.printed{clip-path:none}

/* ---------- quotes light up as you read (JS sets each word's opacity) ---------- */
.lit .w{transition:opacity .25s linear}

/* ---------- printer's crop marks around the documents ---------- */
.doc,.offer,.redl,.pricecard{position:relative}
.doc::after,.offer::after,.redl::after,.hero2-more .pricecard::after,.teacher .photo::after{content:"";position:absolute;inset:-18px;pointer-events:none;z-index:0;color:color-mix(in srgb,var(--ink) 55%,transparent);
  background:
    linear-gradient(currentColor,currentColor) left 0 top 18px/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) left 18px top 0/1.5px 11px no-repeat,
    linear-gradient(currentColor,currentColor) right 0 top 18px/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) right 18px top 0/1.5px 11px no-repeat,
    linear-gradient(currentColor,currentColor) left 0 bottom 18px/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) left 18px bottom 0/1.5px 11px no-repeat,
    linear-gradient(currentColor,currentColor) right 0 bottom 18px/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) right 18px bottom 0/1.5px 11px no-repeat}
@media (max-width:560px){.doc::after,.offer::after,.redl::after,.hero2-more .pricecard::after,.teacher .photo::after{inset:-12px;background-size:8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px;
  background-position:left 0 top 12px,left 12px top 0,right 0 top 12px,right 12px top 0,left 0 bottom 12px,left 12px bottom 0,right 0 bottom 12px,right 12px bottom 0}}

/* ---------- dark bands open out of a rounded sheet as they arrive ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .symband,.closer{animation:v13-open linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes v13-open{from{clip-path:inset(0 5% 0 5% round 36px)}to{clip-path:inset(0 0 0 0 round 0)}}

/* ---------- the pointer label over the demos ---------- */
.cur-tag{position:fixed;left:0;top:0;z-index:95;pointer-events:none;padding:7px 11px 6px;background:var(--signal);color:#fff;
  font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;scale:.6;transform-origin:0 0;
  transition:opacity .18s ease,scale .25s cubic-bezier(.2,1.4,.4,1)}
.cur-tag.on{opacity:1;scale:1}

/* ---------- the footer: dark, and the wordmark as wide as the page ---------- */
.foot{background:var(--ink);color:color-mix(in srgb,var(--stone) 72%,transparent);border-top:0;box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);
  padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px);gap:8px;--hair:rgba(238,235,230,.18)}
.foot .logo{display:none}
.foot a{color:var(--stone)}
.foot .ph{background:rgba(238,235,230,.14);color:var(--stone)}
.foot-mark{order:9;margin:clamp(24px,4vw,56px) 0 0;max-width:none;width:max-content;white-space:nowrap;font-size:18vw;line-height:.8;letter-spacing:0;color:var(--stone)}
.fm-a{font-family:var(--display);font-weight:850;font-stretch:125%;letter-spacing:-.045em}
.fm-gt{font-family:var(--display);font-weight:850;font-stretch:100%;color:var(--signal);margin:0 .02em}
.fm-b{font-family:var(--dots);font-weight:900;color:var(--aqua);letter-spacing:.01em}
.fx-on .foot-mark .fm-b{clip-path:inset(0 100% 0 0)}
.fx-on .foot-mark.printed .fm-b{clip-path:inset(0 0 0 0);transition:clip-path .9s steps(4,end) .2s}
.foot .foot-row{order:10;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);
  font:500 .7rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* "Follow us:" under the legal links (build.py social_foot): plain words, and each one a 44px tap target. The links are 44px tall boxes on 44px lines, so a
   phone's second line never shares a tap area with the first; the paragraph's negative margin takes back the air above and below one 1.55 line, so
   the footer keeps its rhythm, and its position keeps the paragraph below from taking the bottom of the boxes. Each word keeps its dot (nowrap span):
   a wrapped line never starts with one. The colour is the footer's own (legal.css: .foot-links .link inherits it on the legal pages).
   Keyboard focus: the 44px box would draw a tall ring over the lines above and below (and the site's red ring is 2.6:1 on this dark), so the ring
   is the footer switch's aqua one, drawn tight round the word. */
.foot-social{position:relative;margin-block:calc((1.55em - 44px) / 2)}
.foot-social span{white-space:nowrap}
.foot-social a{position:relative;display:inline-block;line-height:44px}
.foot-social a:focus-visible{outline:0}
.foot-social a:focus-visible::after{content:"";position:absolute;inset:8px -2px;outline:2px solid var(--aqua);pointer-events:none}
/* the machine half of the wordmark on scanlines, like a screen */
.fm-b{-webkit-mask:repeating-linear-gradient(180deg,#000 0 .062em,transparent .062em .082em);mask:repeating-linear-gradient(180deg,#000 0 .062em,transparent .062em .082em)}

/* =====================================================================================================================
   v13b: the page runs its own method. Hollow = the machine's draft or the hype, solid = checked, script = signed.
   ===================================================================================================================== */

/* ---------- the three verbs, each in the hand that does it ----------
   Hand over: the machine's dot matrix · Check: solid capitals · Decide: the signature */
.verbs li:nth-child(1) b,.method-rail li:nth-child(1) b,.bin[data-bin="over"] h3{font-family:var(--dots);font-weight:900;font-stretch:normal;letter-spacing:.01em;text-transform:none}
.verbs li:nth-child(2) b,.method-rail li:nth-child(2) b,.bin[data-bin="check"] h3{font-family:var(--cond);font-weight:900;font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase}
.verbs li:nth-child(3) b,.method-rail li:nth-child(3) b,.bin[data-bin="keep"] h3{font-family:var(--script);font-weight:400;font-stretch:normal;letter-spacing:0;text-transform:none;color:var(--human)}
.verbs li:nth-child(1) b{font-size:clamp(1.3rem,.9rem + 1.1vw,1.95rem);white-space:nowrap}
.verbs li:nth-child(2) b{font-size:calc(1.22 * clamp(1.45rem,1rem + 1.3vw,2.15rem))}
.verbs li:nth-child(3) b{font-size:calc(1.9 * clamp(1.45rem,1rem + 1.3vw,2.15rem));line-height:.62;display:inline-block;transform:rotate(-5deg);transform-origin:0 70%}
.bin[data-bin="check"] h3{font-size:calc(1.2 * clamp(1.45rem,1rem + 1.3vw,2.15rem))}
.bin[data-bin="keep"] h3{font-size:calc(1.9 * clamp(1.45rem,1rem + 1.3vw,2.15rem));line-height:.7;transform:rotate(-4deg);transform-origin:0 70%}

/* the method rail: a stacked list, the step on screen solid, the others out of focus */
@media (min-width:901px){
  .method-rail{gap:clamp(14px,1.6vw,24px)}
  .method-rail li{transition:opacity .45s ease,filter .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  .method-rail li:not(.on){opacity:.3;filter:blur(1.4px)}
  .method-rail li.on{transform:translateX(8px)}
  .method-rail li:nth-child(1) b{font-size:clamp(1.9rem,1rem + 1.7vw,3.1rem)}
  .method-rail li:nth-child(2) b{font-size:clamp(2.8rem,1rem + 3.4vw,5rem);line-height:.88}
  .method-rail li:nth-child(3) b{font-size:clamp(4rem,1.4rem + 5vw,7.6rem);line-height:.56;transform:rotate(-5deg);transform-origin:0 70%}
}

/* ---------- the AI draft: every value carries the model's confidence; the pen replaces it with the source ---------- */
.draft .dw::before{content:"";position:absolute;inset:-5px -7px;pointer-events:none;opacity:0;transition:opacity .35s;color:var(--bot);
  background:
    linear-gradient(currentColor,currentColor) left top/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left top/1.5px 8px no-repeat,
    linear-gradient(currentColor,currentColor) right top/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right top/1.5px 8px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1.5px 8px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1.5px 8px no-repeat}
.draft .dw::after{content:"AI · " attr(data-conf);position:absolute;right:-7px;bottom:calc(100% + 5px);z-index:2;padding:3px 5px 2px;
  font:500 .56rem/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#fff;background:var(--bot);
  opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s}
.draft.ai-done .dw::before{opacity:1}
.draft.ai-done .dw::after{opacity:1;transform:none}
.draft .dw.on::before{opacity:0}
.draft .dw.on::after{content:"src · " attr(data-from);background:var(--human)}
.draft .dw--circle::before{inset:-3px -9px}
.draft .dw[data-fix-n="2"]::after{right:auto;left:-7px}  /* the rate sits right after the quantity: its tag reads rightwards */

/* ---------- headlines that arrive with the hype on top, struck through ---------- */
.hype-line{position:relative;display:block;width:fit-content;margin:0 0 .12em;font-size:.56em;line-height:1;color:var(--hol-bg,var(--stone));
  -webkit-text-stroke:max(2px,.04em) var(--hol-ink,var(--ink));paint-order:stroke fill;letter-spacing:.022em;word-spacing:.1em}
.hype-line > .mk{position:absolute;left:-4%;width:108%;top:30%;height:.42em;--mk-delay:1s;--mk-dur:.6s}

/* ---------- a full stop grows into the closing band (webinar) ---------- */
.zoom-dot{background:var(--stone)}
.zd-stick{display:grid;place-items:center;padding:clamp(56px,9vw,140px) 16px;overflow:hidden}
.zd-line{margin:0;max-width:none;text-align:center;font:900 clamp(2.8rem,1rem + 6.2vw,8.6rem)/.88 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--ink)}
.zd-a{display:block;color:var(--stone);-webkit-text-stroke:max(2px,.035em) var(--ink);paint-order:stroke fill;letter-spacing:.022em;word-spacing:.1em}
.zd-b{display:block}
.zd-dot{display:inline-block;width:.19em;height:.19em;margin-left:.05em;background:var(--ink);transform-origin:50% 50%;will-change:transform}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-on .zoom-dot{height:280vh;view-timeline-name:--zd}
    .fx-on .zd-stick{position:sticky;top:0;height:100vh;padding:0 16px}
    .fx-on .zd-dot{animation:v13-zd linear both;animation-timeline:--zd;animation-range:contain 20% contain 92%}
    .fx-on .zd-a{animation:v13-zd-a linear both;animation-timeline:--zd;animation-range:contain 0% contain 40%}
    .zoom-dot + .closer{animation:none}
  }
}
@keyframes v13-zd{0%{transform:none}30%{transform:scale(2.2)}55%{transform:scale(7)}75%{transform:scale(28)}90%{transform:scale(110)}100%{transform:scale(260)}}
@keyframes v13-zd-a{to{opacity:.12;transform:translateY(-.4em)}}

/* ---------- big numbers: bento cards in condensed capitals ---------- */
.receipts{gap:14px}
.receipt{position:relative;border:0;background:var(--paper);padding:clamp(22px,2.6vw,36px);min-height:clamp(250px,25vw,340px);align-content:space-between}
.receipt:first-child{background:var(--ink);color:var(--stone);--human:var(--signal)}
.receipt:first-child .r-src{color:var(--mist)}
.receipt:first-child .r-num{color:var(--stone)}
.r-num{font:900 clamp(5.4rem,2rem + 8.4vw,11rem)/.8 var(--cond);font-stretch:68%;letter-spacing:-.01em}
.r-num .pen-word > .mk--circle{left:-10%;width:120%;top:-14%;height:128%}
.wrong{border-top:0;padding-top:0}
.wrong .wrong-head{margin-bottom:12px}
.wrong .two-col{gap:14px}
.wrong .two-col > .stack{background:var(--ink);color:var(--stone);padding:clamp(22px,2.6vw,36px);--hair:rgba(238,235,230,.2);--human:var(--signal);--bot-text:var(--aqua)}
.wrong .two-col > .stack .muted{color:var(--mist)}
.wrong .big-num{font:900 clamp(4.4rem,2rem + 6.6vw,9rem)/.82 var(--cond);font-stretch:68%;letter-spacing:-.01em;color:var(--signal)}
.wrong .big-num{margin-bottom:.1em}
.wrong .big-num .pen-word > .mk--circle{color:var(--stone);left:-6%;width:112%;top:-12%;height:124%}
.wrong .big-fact{color:var(--stone)}

/* ---------- the quote wall: big condensed quote marks ---------- */
.qw--xl blockquote::before,.qw--l blockquote::before{display:block;height:.42em;margin-bottom:.06em;font:900 3.4em/.9 var(--cond);font-stretch:68%;color:var(--human)}
.qw--xl blockquote::after,.qw--l blockquote::after{content:none}

/* ---------- the checking desk: a cutting-mat grid behind the hunt and the redline ---------- */
#hunt,.desk{position:relative;isolation:isolate}
#hunt::before,.desk::before{content:"";position:absolute;inset:0 calc(50% - 50vw + var(--sbw,0px) / 2);z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 48.5H96M48.5 0V96' stroke='%232C1751' stroke-opacity='.07'/%3E%3Cpath d='M42 48.5H55M48.5 42V55' stroke='%232C1751' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E") center top/96px 96px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 12% 88%,transparent);mask:linear-gradient(180deg,transparent,#000 12% 88%,transparent)}

/* ---------- the pains: a running count ---------- */
.tally-box{display:grid;gap:10px;justify-items:start}
.tally-n{font:900 clamp(3.6rem,1.6rem + 4.4vw,6.6rem)/.8 var(--cond);font-stretch:68%;letter-spacing:-.01em;color:color-mix(in srgb,var(--ink) 22%,var(--stone))}
.tally-n b{font-weight:inherit;color:var(--ink);transition:color .3s}
.odo{display:inline-block;height:.86em;overflow:hidden;vertical-align:top}
.odo-col{display:grid;transform:translateY(calc(var(--d,0) * -.86em));transition:transform .55s cubic-bezier(.2,1.3,.35,1)}
.odo-col > span{display:block;height:.86em;line-height:.86}
@media (prefers-reduced-motion:reduce){.odo-col{transition:none}}
.tally-box.has .tally-n b{color:var(--human)}

/* ---------- FAQ: an opened question gets a tick ---------- */
.lg[open] > summary::after{width:26px;height:20px;-webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat;transform:none;animation:v13-tick .45s cubic-bezier(.2,1.5,.4,1)}
.lg[open] .lg-n{color:var(--human)}
@keyframes v13-tick{from{transform:scale(.3) rotate(-25deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.lg[open] > summary::after{animation:none}}

/* ---------- the programme: "on screen" is a screen, recording ---------- */
.mod .onscreen{position:relative;margin:4px 0;padding:16px 18px 26px;border-radius:12px;background:var(--ink);color:var(--stone);font:600 1rem/1.5 var(--sans);max-width:62ch}
.mod .onscreen .k{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.mod .onscreen .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)}
/* blinks only while its module is on screen (.live, v16_night.js): an endless animation off screen still costs a style pass every frame */
.mod.live .onscreen .k::before,.no-io .mod .onscreen .k::before{animation:v13-rec 1.6s steps(1) infinite}
.mod .onscreen .k::after{content:none}
.mod .onscreen::before{content:"";position:absolute;left:18px;bottom:12px;height:3px;width:calc(100% - 36px);border-radius:2px;background:var(--signal);transform-origin:0 50%;transform:scaleX(.26);transition:transform 1.6s cubic-bezier(.3,.6,.2,1)}
.mod .onscreen::after{content:"";position:absolute;left:18px;right:18px;bottom:12px;height:3px;border-radius:2px;background:rgba(238,235,230,.16)}
.mod:hover .onscreen::before{transform:none}  /* scaleX, not width: the bar grows on the compositor, no layout per frame */
@keyframes v13-rec{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.mod .onscreen .k::before,.mod.live .onscreen .k::before,.no-io .mod .onscreen .k::before{animation:none}}

/* ---------- the files you keep: a receipt slip that prints ---------- */
.receipt-doc{position:relative;max-width:760px;margin:clamp(18px,2vw,28px) auto 0;padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,34px) 44px;background:var(--paper);rotate:-.8deg;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.fx-on .receipt-doc .have li{clip-path:inset(0 0 100% 0);transition:clip-path .3s steps(3,end) calc(var(--n,0) * 120ms + .15s)}
.fx-on .receipt-doc.printed .have li{clip-path:inset(0 0 0 0)}

/* ---------- the price schedule, as a log: today is the red line ---------- */
.sched tbody td{font-family:var(--mono);font-size:.9rem}
.sched tbody tr.now td{background:var(--human);color:#fff;font-weight:700}
.sched tbody tr.now td:first-child::after{content:"← you are here";margin-left:10px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- the quote you sign: the pen signs when you reach for the button ---------- */
.of-signline{position:relative;display:flex;align-items:flex-end;gap:10px;width:min(100%,340px);height:62px;margin:4px 0 16px;border-bottom:1.5px solid var(--ink)}
.of-x{font:900 1.5rem/1 var(--cond);color:var(--human);padding-bottom:4px}
.of-sig{position:relative;flex:1;height:100%}
.of-sig > .mk{position:absolute;inset:0 0 2px;color:var(--human);--mk-dur:1.05s}
.of-sl-cap{position:absolute;right:0;top:calc(100% + 5px);font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.fx-on .offer.signing .of-sig .mk[data-draw] svg{clip-path:inset(-20% -2% -20% -2%)}  /* .signing: set while the pointer or focus is on the button */
@media (hover:none){.fx-on .of-sig .mk[data-draw] svg{clip-path:inset(-20% -2% -20% -2%)}}

/* ---------- sources shown the way the course shows them: corner brackets, not boxes ---------- */
.src-type{position:relative;display:inline-flex;justify-self:start;align-items:center;gap:6px;padding:5px 9px 4px;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.src-type::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(currentColor,currentColor) left top/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left top/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right top/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right top/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1.5px 7px no-repeat}
.src-type--open{color:var(--human)}

/* ---------- "Check this page": every claim shows where it comes from ---------- */
.check-page{position:fixed;right:18px;bottom:18px;z-index:80;opacity:0;pointer-events:none;translate:0 14px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px 0 12px;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;
  font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:opacity .3s,translate .3s,transform .15s,box-shadow .15s}
.check-page.show{opacity:1;pointer-events:auto;translate:0 0}
.check-page:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.check-page:focus-visible{outline:3px solid var(--human);outline-offset:3px}
.cp-box{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid currentColor}
.checking .cp-box{background:var(--human);border-color:var(--human)}
.checking .cp-box::after{content:"";width:13px;height:10px;background:#fff;-webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
.cp-n{color:var(--human)}
.cp-n:empty{display:none}
.cp-n::before{content:"· "}
@media (max-width:900px){.check-page{display:none}}
.checking [data-src]{position:relative;outline:1.5px dashed var(--bot);outline-offset:4px;background:color-mix(in srgb,var(--bot) 9%,transparent)}
.checking [data-src]::after{content:"✓ " attr(data-src);position:absolute;left:-5px;top:calc(100% + 5px);z-index:6;padding:2px 5px 1px;background:var(--bot);color:#fff;
  font:500 .58rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-shadow:none;-webkit-text-stroke:0;animation:v13-pop .35s cubic-bezier(.2,1.5,.4,1) both}
.checking [data-src-open]{outline-color:var(--human);background:color-mix(in srgb,var(--human) 9%,transparent)}
.checking [data-src-open]::after{content:"? " attr(data-src);background:var(--human)}
.ink .checking [data-src],.checking .ink [data-src],.checking .receipt:first-child [data-src],.checking .wrong .two-col [data-src]{outline-color:var(--aqua)}
@keyframes v13-pop{from{opacity:0;transform:translateY(-4px) scale(.9)}}

/* checking mode opens up the lines that carry a claim, so each source tag sits in the gap under its line */
.has-src{transition:line-height .35s ease}  /* p/li holding a sourced span: marked by JS (a :has() here re-ran on every text change) */
.checking .has-src{line-height:2.55}
.checking span[data-src]::after{top:calc(100% + 2px)}

/* phones */
@media (max-width:560px){
  .draft .dw::after{display:none}  /* no room above the values: the brackets and the state line tell the story */
  .sched tbody tr.now td:first-child::after{content:"←";margin-left:6px}
  .receipts{grid-template-columns:minmax(0,1fr)}
  .receipt{min-height:0;gap:18px}
  .zd-stick{padding-inline:12px}
}

/* FAQ: a closed question shows the pen's caret, an opened one the tick (the flick read as already ticked) */
.lg:not([open]) > summary::after{width:20px;height:15px;-webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat;transform:rotate(180deg)}

/* ===== v14: more motion with meaning =====
   From the third study (studios' code as well as their screens): a pinned horizontal strip, type that skews with
   scroll speed, magnetic buttons, pen-drawn link underlines, machine labels that scramble, hype that falls away,
   paper grain, smooth accordions, documents placed on the desk as they arrive, and a page-turn between the pages. */

/* the browser's 8px body margin framed every full-bleed band in a stone border; bands now reach the edges.
   --sbw (set by v14_more.js) is the scrollbar's width, so full-bleed pieces use the width you can see, not 100vw */
body{margin:0}

/* ---------- the programme: a pinned strip that slides sideways as you scroll (desktop) ---------- */
.prog-label,.prog-bar{display:none}
@supports (animation-timeline:view()){
  @media (min-width:1100px) and (prefers-reduced-motion:no-preference){
    .fx-on .prog-pin{--vw:calc(100vw - var(--sbw,0px));--edge:calc(max(0px,(var(--vw) - 1240px) / 2) + clamp(16px,4vw,44px));view-timeline-name:--prog;position:relative;margin-top:clamp(28px,3vw,44px)}
    .fx-on .prog-stick{position:sticky;top:0;z-index:31;height:100vh;width:var(--vw);margin-left:calc(50% - var(--vw) / 2);overflow:hidden;background:var(--stone);
      display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.2vh,28px)}
    .fx-on .prog-label{display:flex;justify-content:space-between;gap:24px;max-width:none;margin:0;padding-inline:var(--edge);
      font:500 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
    .fx-on .prog-hint{color:var(--human)}
    .fx-on .prog{display:flex;flex-wrap:nowrap;align-items:stretch;width:max-content;margin:0;padding-left:var(--edge);border:0;gap:18px;
      animation:v14-track linear both;animation-timeline:--prog;animation-range:contain 0% contain 100%}
    .fx-on .prog .wk{display:flex;align-items:stretch;gap:18px;padding:0;border:0}
    .fx-on .prog .wk-head{position:relative;top:auto;flex:none;width:clamp(230px,17vw,280px);min-height:min(62vh,560px);padding:26px 24px;
      background:var(--ink);color:var(--stone);display:grid;align-content:space-between;--human:var(--signal)}
    .fx-on .prog .wk-head .wk-n{font:900 clamp(2.4rem,1.2rem + 2.6vw,3.8rem)/1 var(--dots);color:var(--aqua)}
    .fx-on .prog .wk-head h3{font:900 clamp(1.9rem,1rem + 1.7vw,2.8rem)/.92 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--stone)}
    .fx-on .prog .wk-head .wk-qa{color:var(--mist)}
    .fx-on .prog .mods{display:flex;align-items:stretch;gap:18px}
    .fx-on .prog .mod{flex:none;width:clamp(360px,29vw,460px);min-height:min(62vh,560px);padding:26px 24px;background:var(--paper);border:0;align-content:start;gap:10px}
    .fx-on .prog-bar{display:block;height:3px;margin-inline:var(--edge);background:color-mix(in srgb,var(--ink) 14%,transparent)}
    .fx-on .prog-bar i{display:block;height:100%;background:var(--human);transform-origin:0 50%;animation:v14-bar linear both;animation-timeline:--prog;animation-range:contain 0% contain 100%}
  }
}
@keyframes v14-track{to{transform:translateX(calc(var(--vw) - var(--edge) - 100%))}}
@keyframes v14-bar{from{transform:scaleX(0)}}

/* ---------- the three verbs as a band that moves with the scroll and leans with its speed ---------- */
.kin-band{overflow:clip;padding-block:clamp(18px,2.6vw,40px);border-block:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.kin-line{display:flex;align-items:baseline;gap:.34em;width:max-content;max-width:none;margin:0;white-space:nowrap;
  font-size:clamp(3.4rem,1rem + 9vw,12rem);line-height:.9;transform:skewX(calc(var(--vel,0) * -.06deg));transition:transform .25s ease-out}
.kb1{font-family:var(--dots);font-weight:900;font-size:.7em;letter-spacing:.01em;color:var(--bot-text,#118186)}
.kb2{font-family:var(--cond);font-weight:900;font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--ink)}
.kb3{font-family:var(--script);font-weight:400;font-size:1.25em;line-height:.5;padding-inline:.06em;color:var(--human)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .kin-line{animation:v14-kin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes v14-kin{from{translate:6vw 0}to{translate:-58% 0}}

/* ---------- the course hero: as you leave it, the struck hype falls away ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-on .wall-band{view-timeline-name:--wall}
    /* the 40 phrases fall only while the band is near (.near, v11_hero.js: within 1.4 screens above the viewport - they
       fall up to 96vh below it): further down the page their scroll-driven animations and 40 GPU layers are off. The
       observer's first answer comes after the first frame, so the page's first paint doesn't set up 40 animated layers
       either; at the top of the page the fall is at 0%, so nothing moves when they attach */
    .fx-on .wall-band.near .hype--wall .hp{animation:v14-fall linear both;animation-timeline:--wall;animation-range:exit 0% exit 85%}
  }
}
.hype--wall .hp:nth-child(4n+1){--fy:70vh;--fr:-14deg}
.hype--wall .hp:nth-child(4n+2){--fy:96vh;--fr:9deg}
.hype--wall .hp:nth-child(4n+3){--fy:58vh;--fr:21deg}
.hype--wall .hp:nth-child(4n){--fy:84vh;--fr:-7deg}
.hype--wall .hype-row:nth-child(2n) .hp{--fy:78vh}
@keyframes v14-fall{to{translate:0 var(--fy,80vh);rotate:var(--fr,10deg)}}

/* ---------- buttons follow the pointer a little; links get their underline drawn by the pen ---------- */
.btn{transition:transform .12s ease,box-shadow .12s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .link:hover{text-decoration-color:transparent;background:linear-gradient(var(--human),var(--human)) 0 100%/100% 2px no-repeat;animation:v14-pen .42s cubic-bezier(.6,0,.3,1)}
}
@keyframes v14-pen{from{background-size:0 2px}}

/* ---------- paper: a little grain over the whole page, on the paper (it scrolls with it), not on the screen ---------- */
body{position:relative}
body::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- accordions open smoothly (browsers with ::details-content) ---------- */
:root{interpolate-size:allow-keywords}
.lg::details-content,.compare::details-content{block-size:0;overflow-y:clip;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
.lg[open]::details-content,.compare[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.lg::details-content,.compare::details-content{transition:none}}

/* ---------- documents are placed on the desk as they arrive ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-on :is(.doc,.redl,.offer){animation:v14-place linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes v14-place{from{translate:0 64px;rotate:1.6deg;opacity:.35}}

/* ---------- signatures that follow the scroll (after landonorris.com, whose signature.riv has a "signature_scroll"
   state): the pen signs as the block comes up, and unsigns if you scroll back ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-on :is(.sign-row,.guarantee-sign) .mk[data-draw] svg{transition:none;animation:v14-sign linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  }
}
@keyframes v14-sign{from{clip-path:inset(-20% 100% -20% -2%)}to{clip-path:inset(-20% -2% -20% -2%)}}
/* the "osmo" curve (aardvarkbookclub.com's CustomEase) for the headline assembly: a slow start and a decisive landing */
.fx-on .asm .w{transition-timing-function:cubic-bezier(.625,.05,0,1),cubic-bezier(.625,.05,0,1),ease}

/* ---------- HUMAN / MACHINE (after basement.studio): the switch, and the page as a model reads it ---------- */
.hm-switch{position:fixed;left:18px;bottom:18px;z-index:85;display:flex;padding:3px;gap:2px;background:var(--ink);border:1px solid rgba(207,201,218,.4);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.55)}
.hm-switch button{min-height:32px;padding:0 12px;border:0;background:none;color:var(--mist);cursor:pointer;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.hm-switch button[aria-pressed="true"]{background:var(--signal);color:#fff}
.hm-switch button[data-hm="machine"][aria-pressed="true"]{background:var(--aqua);color:var(--ink)}
.hm-switch button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.foot .hm-switch{position:static;order:11;justify-self:start;margin-top:16px;box-shadow:none}
.machine{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto minmax(0,1fr);background:#140a24;color:#d9d4e4}
.machine[hidden]{display:none}
.mc-dither{position:fixed;inset:0;width:100vw;height:100vh;z-index:125;pointer-events:none;image-rendering:pixelated}
.machine::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.mc-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px clamp(16px,3vw,32px);border-bottom:1px solid rgba(70,198,205,.3);
  font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.mc-close{min-height:36px;padding:0 12px;border:1px solid rgba(70,198,205,.5);background:none;color:var(--aqua);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.mc-close:hover,.mc-close:focus-visible{background:var(--aqua);color:#140a24;outline:none}
.mc-scroll{overflow:auto;padding:clamp(18px,3vw,40px) clamp(16px,3vw,40px) 90px;outline:none;overscroll-behavior:contain}
.mc-logo{margin:0 0 26px;font:400 min(13px,calc((100vw - 40px) / 51))/1.05 var(--mono);color:var(--aqua);white-space:pre;letter-spacing:0}
.mc-text{margin:0;max-width:96ch;font:400 clamp(12px,.72rem + .15vw,14px)/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;color:#d9d4e4}
.machine-on{overflow:hidden}
.machine-on .hm-switch{z-index:130}

/* ---------- the slogan's cycling phrase ---------- */
.cycle .cy{display:inline-block}

/* ---------- the machine's lens over the webinar headline ---------- */
.stage-copy{--lx:-999px;--ly:-999px;--lr:0px}
.h1-lens{position:absolute;z-index:3;margin:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 96%,transparent 100%),radial-gradient(circle,#000 36%,transparent 46%);
  -webkit-mask-size:100% 100%,7px 7px;-webkit-mask-repeat:no-repeat,repeat;-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 96%,transparent 100%),radial-gradient(circle,#000 36%,transparent 46%);
  mask-size:100% 100%,7px 7px;mask-repeat:no-repeat,repeat;mask-composite:intersect}
.h1-lens,.h1-lens *{color:var(--aqua)!important;-webkit-text-stroke:0!important}
.h1-lens .ln > span{animation:none!important}
.h1-lens .sig-word{-webkit-mask:none!important;mask:none!important}
.lens-on > .stage-h1:not(.h1-lens){-webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),transparent 96%,#000 100%);
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),transparent 96%,#000 100%)}

/* ---------- between the two pages: the new page comes up over the old one like a sheet torn off a pad ---------- */
@view-transition{navigation:auto}
.site .wordmark{view-transition-name:bob-wordmark}
.proto{view-transition-name:bob-proto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:v14-tear .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes v14-tear{
  from{clip-path:polygon(0% 104%,6% 101%,12% 105%,19% 102%,25% 106%,31% 101%,38% 104%,44% 100%,50% 105%,56% 102%,63% 106%,69% 101%,75% 104%,81% 100%,88% 105%,94% 102%,100% 104%,100% 110%,0% 110%)}
  to{clip-path:polygon(0% -4%,6% -7%,12% -3%,19% -6%,25% -2%,31% -7%,38% -4%,44% -8%,50% -3%,56% -6%,63% -2%,69% -7%,75% -4%,81% -8%,88% -3%,94% -6%,100% -4%,100% 110%,0% 110%)}}
@media (prefers-reduced-motion:reduce){::view-transition-new(root){animation:none}}

/* v15: the count of chapters the pen has checked rides in the margin level with its tip (read bottom to top, ending
   just above it); a ring answers each mark the pen draws; a checked chapter's number takes the pen's ink */
.pen-tally{position:absolute;top:0;left:0;z-index:30;width:0;height:0;pointer-events:none;opacity:0;will-change:transform;transition:opacity .3s}
.pen-tally b{position:absolute;right:0;bottom:16px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--human)}
.pen-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--human);opacity:0;text-decoration:none}
/* the line in a layer of its own: as it draws, only its own tiles re-raster, not the text of the page under it */
.pen-line{will-change:transform}
.pen-tip{transition:opacity .3s,scale .25s ease-out}
.pen-tip.rest{scale:1.45;transition:opacity .3s,scale 2.4s cubic-bezier(.2,.6,.2,1)}
.chapter-h::before{transition:color .6s ease}
.chapter-h.pen-checked::before{color:var(--human)}
/* The hero's convention runs through the page: hollow type is AI's draft, solid is what a person has signed off. A
   chapter's heading stays the machine's draft, outlined, until the pen has circled and ticked it; then it inks in.
   html.pen-on only while the pen runs (desktop, motion allowed); everywhere else headings are simply solid. */
.pen-on .chapter-h{-webkit-text-stroke:1.4px transparent;transition:color .8s ease,-webkit-text-stroke-color .8s ease}
.pen-on .chapter-h:not(.pen-checked){color:transparent;-webkit-text-stroke-color:var(--pen-ink,var(--ink))}
.pen-on :is(.ink,.symband,.closer,.stage-band) .chapter-h{--pen-ink:var(--stone)}
.pen-on .chapter-h::before{-webkit-text-stroke:0}
@media (max-width:1099px){.pen-tally{display:none}}
/* phones and tablets: the documents' crop marks (inset -12/-18px) and "placed" rotation pushed the page 8px wider than
   the screen. clip, unlike hidden, makes no scroll container, so sticky bars and fixed buttons keep working */
@media (max-width:1099px){main{overflow-x:clip}}

/* v15: "Only you can sign it" — reuses the hero's signature look (script font, --signal red, and the same
   left-to-right pen-mask wipe as .sig-word in v12_hero.css) for two more moments a visitor's own name appears:
   1) a live signature line under "First name" (webinar registration, step 2) as they type it
   2) the visitor's name written on the thank-you seal once that view is shown
   Pure CSS masks/animations, no canvas and no per-frame loop. Gated by .fx-on: with it absent (reduced motion,
   or a ?shot=1 screenshot) [data-wipe] is simply unstyled, so the mark is just there, finished. */

/* ---------- the shared ink: script font, signal red; inherits down to any un-classed child span or text node ---------- */
.sig-ink{display:inline-block;font-family:var(--script);font-weight:400;font-style:normal;font-stretch:100%;
  letter-spacing:0;text-transform:none;color:var(--signal);line-height:1;white-space:nowrap;pointer-events:none;
  -webkit-text-stroke:0}

/* the pen-mask wipe: one mask, one keyframe, reused at two speeds via --wipe (a quick nib-flick per typed letter,
   one slow flourish on the seal). Only a freshly-inserted node carries this, so settled letters (and an instant
   delete or replace) are plain text with no mask and never move. */
@keyframes v15-wipe-in{to{-webkit-mask-position:0 0;mask-position:0 0}}
.fx-on [data-wipe]{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat;
  mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat;
  animation:v15-wipe-in var(--wipe,.18s) linear both}

/* ---------- 1. the live signature line under "First name" ---------- */
/* a thin rule with a small "x" at its left, like a line on a paper contract; purely decorative, so the real
   field (label + input) is left exactly as it was */
.sig-line{display:flex;align-items:flex-end;gap:.6em;margin-top:10px;font-size:1.05rem}
.sig-line-x{flex:none;font:700 1.05em/1 var(--sans);color:color-mix(in srgb,var(--ink) 38%,transparent);padding-bottom:.36em}
.sig-rule{position:relative;flex:1 1 auto;min-width:3em;height:1.5em;border-bottom:1.5px solid var(--hair)}
.sig-name{position:absolute;left:.2em;bottom:0;max-width:calc(100% - .2em);font-size:2.2em;
  overflow:clip;overflow-clip-margin:.35em;  /* long names stop at the rule's end; loops below the line still show */
  transform:rotate(-4deg);transform-origin:0 100%}
@media (max-width:420px){.sig-name{font-size:1.9em}}

/* ---------- 2. the signed seal on the thank-you page ---------- */
/* signed on a line, like a contract: the name sits on the rule (its loops may cross it), the caption under it */
.seal-sign{padding:clamp(18px,2.4vw,30px) clamp(22px,3vw,40px) clamp(10px,1.6vw,18px);display:grid;justify-items:start}
.seal-sign-name{--wipe:1.2s;position:relative;z-index:1;font-size:clamp(2.8rem,1.6rem + 3.8vw,4.8rem);margin:0 0 -.12em .1em;
  transform:rotate(-3deg);transform-origin:0 100%;max-width:100%;overflow:clip;overflow-clip-margin:.35em}
.seal-sign-cap{margin:0;width:min(100%,460px);padding-top:10px;border-top:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);color:var(--graphite)}

/* v16 (overnight rounds, 2026-09-28). */

/* The webinar's full stop is a drop of the pen's ink: round, it swells out of the line, and the words give way before
   it reaches them (it used to grow as a square straight over "You put the full stop", which read as a glitch). The
   track is 180vh (was 280vh: the same swell over less scrolling). Phones and tablets get no scroll track at all: the
   drop swells once, in place, when the line is in view (v16_night.js adds .play). */
.zd-dot{border-radius:50%}
.zd-t{display:inline-block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-on .zd-t{animation:v16-zd-t linear both;animation-timeline:--zd;animation-range:contain 24% contain 44%}
  }
}
/* 2026-09-29: phones and tablets get the ink flood back (the one-off swell there read as the effect gone); the sticky
   screen is the visible one, so the drop stays centred under a phone's toolbar */
@media (max-width:1099px){
  .fx-on .zd-stick{height:100svh}
  /* the phrase stays inline so the drop keeps to its last word when the line wraps; inline boxes ignore transform,
     so the same lift runs on top instead (only over its short range) */
  .zd-t{display:inline;position:relative}
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.fx-on .zd-t{animation-name:v16-zd-t-inline}}}
}
@keyframes v16-zd-t-inline{to{opacity:0;top:-.3em}}
@keyframes v16-zd-t{to{opacity:0;transform:translateY(-.3em)}}

/* The signed word reads from the first frame: a faint pencil trace, which the pen then inks (sooner, and a little
   faster). The webinar's H1 used to read "The name on it is" for its first three seconds. Two mask layers: the moving
   wipe, and a constant 22% layer under it. */
.fx-on .sig-word[data-sign]{
  -webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat,linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22));
  mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat,linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22))}
.fx-on .sig-word[data-sign].on{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;
  transition:-webkit-mask-position 1.3s cubic-bezier(.55,.1,.35,1),mask-position 1.3s cubic-bezier(.55,.1,.35,1)}

/* What the session is and who it's for, in plain words above the webinar's poster H1 (the edge label was small caps) */
.stage-top > .stage-offer{font:600 clamp(.92rem,.85rem + .2vw,1.02rem)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--stone)}
/* ... and what the course is, under its slogan */
.wall-band .wall-what{max-width:46ch;margin:.9em auto 0;font:500 clamp(.98rem,.9rem + .25vw,1.12rem)/1.45 var(--sans);color:var(--stone);text-align:center;
  background:var(--ink);box-shadow:0 0 0 .3em var(--ink)}

/* The pen answers the quote wall: under each quote a short reply in the pen's red, with an arrow drawn up to it (the
   brand's arrow mark, drawn by the pen as it reaches it). A two-sided message that doesn't answer the other side
   persuades worse than saying nothing (Allen 1991); now each objection gets its answer where it's raised. */
.pen-reply{display:flex;align-items:flex-end;gap:.55em;margin:1em 0 0;max-width:36ch;font:700 .98rem/1.35 var(--sans);
  letter-spacing:.005em;color:var(--human);transform:rotate(-1.2deg);transform-origin:0 50%}
.pen-reply .pr-arrow{flex:none;width:1.25em;height:1.65em;margin-bottom:.1em}
.pen-reply .pr-arrow > .mk{width:100%;height:100%;--mk-dur:.5s}
.qw--xl .pen-reply{font-size:1.08rem}
.check-note{margin:18px 0 0;font:500 .8rem/1.5 var(--mono);letter-spacing:.04em;color:var(--graphite)}
.check-note .check-now{font:700 .8rem/1.5 var(--sans);letter-spacing:0;text-transform:none;margin-left:.4em;padding:0;border:0;background:none;
  color:var(--ink);cursor:pointer}

/* Hype lines are the claims we strike: faint until the pen strikes them, so none reads as ours in the meantime */
.hype-line{transition:opacity .6s ease}
.fx-on .hype-line:not(:has(> .mk.on)){opacity:.3}

/* The HUMAN/MACHINE switch waits until the first screen has gone (it covered the form's note on short laptops) */
body > .hm-switch{transition:opacity .35s ease,translate .35s ease}
html:not(.past-hero) body > .hm-switch{opacity:0;translate:0 12px;pointer-events:none}

/* Course: the finish line, the checkout, the chapter to watch first, the manager's email */
.by28{margin-top:26px;padding-top:16px;border-top:1px solid var(--hair)}
.by28-h{margin:0 0 8px;font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.by28 ol{margin:0 0 10px;padding-left:1.3em;display:grid;gap:4px}
.by28 li{max-width:48ch}
.checkout-line{margin:.7em 0 0;font-size:.84rem;line-height:1.45;color:var(--graphite)}
.chapter-watch{display:grid;gap:12px;max-width:760px}
.chapter-watch > .mono{margin:0;color:var(--graphite)}
.chapter-watch .h2s{margin:0}
.chapter-watch > p:not(.mono){margin:0;max-width:62ch}
.ph-media--screen{background:var(--ink);color:var(--stone);border-color:var(--ink)}
.ph-media--screen .muted,.ph-media--screen .cap{color:color-mix(in srgb,var(--stone) 72%,transparent)}
.mgr-mail{margin-top:28px;display:grid;gap:12px;max-width:640px}
.mgr-mail > .mono{margin:0;color:var(--graphite)}
.mgr-doc{background:var(--paper);border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:clamp(16px,2.2vw,24px);font-size:.95rem;line-height:1.5}
.mgr-doc p{margin:0 0 .7em;max-width:none}
.mgr-doc p:last-child{margin:0}
.mgr-row{margin:6px 0 0}

/* The machine's word in each hero ("AI's", "AI") at full height and heavier. Doto 900 is its heaviest cut, so the dots
   are fattened with a stroke of their own colour, and the letters get a little air so the fattened dots don't merge. */
.stage-h1 .dots-word{font-size:1em;letter-spacing:.07em;-webkit-text-stroke:.045em currentColor;paint-order:stroke fill}
/* the course title is poster-size: a thinner stroke keeps the gaps between the dots, and it must still fit its line */
.wall-h1 .dots-word{font-size:.9em;letter-spacing:.05em;-webkit-text-stroke:.022em currentColor}

/* the pen's layer (v15_pen.js): the line, the tip and the count, clipped to the page so nothing of it widens it */
.pen-layer{position:absolute;top:0;left:0;width:100%;z-index:30;pointer-events:none;overflow:clip}

/* the pen on phones and tablets: a finer line and nib down the gutter (v15_pen.js narrow mode) */
@media (max-width:1099px){
  .pen-line path{stroke-width:1.6}
  .pen-tip{width:7px;height:7px;top:-3.5px;left:-3.5px}
}

/* The prototype chip (palette, currency, screen numbers) is a team tool: off on the live site unless ?proto=1 */
.no-proto .proto{display:none!important}

/* Headings assemble word by word; on touch screens without the 8px blur (a full repaint per word on a phone GPU) */
@media (pointer:coarse){.fx-on .asm .w{filter:none}}

/* The mistake hunt, by pen. The one place the visitor holds the pen looked like form validation (a CSS line-through
   and a boxed badge). Now a wrong value is struck with the brand's strike, the correction is written in beside it after
   a caret, a correct value the visitor checked gets a small tick, and at five of five the stamp comes down. */
.hunt .spot{position:relative}
.hunt .spot.found{text-decoration:none}
.hunt .spot.found::after{content:"";position:absolute;left:-6%;width:112%;top:34%;height:.5em;pointer-events:none;background:var(--human);
  -webkit-mask:var(--strike-mask) center/100% 100% no-repeat;mask:var(--strike-mask) center/100% 100% no-repeat}
.hunt .spot.found .fix{position:relative;left:auto;top:auto;background:none!important;border:0!important;box-shadow:none;padding:0 0 0 1.15em;margin-top:4px;
  color:var(--human);font:700 .82rem/1.2 var(--sans);letter-spacing:0;text-transform:none;transform:rotate(-4deg);transform-origin:0 60%}
.hunt .spot.found .fix::before{content:"";position:absolute;left:-.1em;bottom:-.1em;width:1.05em;height:1.05em;background:var(--human);
  -webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat}
.hunt .spot.ok-seen::after{content:"";position:absolute;right:-1.05em;top:50%;width:.85em;height:.85em;margin-top:-.5em;pointer-events:none;
  background:var(--ink);-webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){
  .fx-on .hunt .spot.found::after{animation:v16-strike .38s cubic-bezier(.65,0,.3,1) both}
  .fx-on .hunt .spot.found .fix{animation:v16-write .55s .3s cubic-bezier(.5,0,.3,1) both}
  .fx-on .hunt .spot.ok-seen::after{animation:v16-strike .3s cubic-bezier(.65,0,.3,1) both}
  .fx-on .hunt-stamp.slam{animation:v16-stamp .6s cubic-bezier(.2,1.3,.4,1) both}
}
@keyframes v16-strike{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes v16-write{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% 0 -30% 0)}}
@keyframes v16-stamp{0%{opacity:0;transform:scale(1.7) rotate(-9deg)}55%{opacity:1;transform:scale(.95) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}

/* The dark bands (the symband, the closer) tear open as they arrive, with the same torn edge as the page-to-page
   transition, instead of growing out of a rounded card (a stock move). Same cost as before: one clip-path in range. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* backwards, not both: once open, the band drops the clip (the last polygon lies outside its box, so nothing moves).
       A polygon clip left on for good sent every repaint of the live demo inside through a mask */
    .symband,.closer{animation-name:v16-tear-open;animation-fill-mode:backwards}
  }
}
@keyframes v16-tear-open{
  from{clip-path:polygon(0.0% 18.97%,2.5% 21.61%,5.0% 19.11%,7.5% 21.65%,10.0% 19.61%,12.5% 18.91%,15.0% 20.88%,17.5% 20.95%,20.0% 17.83%,22.5% 19.76%,25.0% 21.3%,27.5% 21.47%,30.0% 20.87%,32.5% 19.5%,35.0% 21.43%,37.5% 21.14%,40.0% 20.94%,42.5% 21.31%,45.0% 20.79%,47.5% 20.95%,50.0% 20.56%,52.5% 21.33%,55.0% 21.55%,57.5% 18.63%,60.0% 21.65%,62.5% 20.71%,65.0% 20.56%,67.5% 20.8%,70.0% 20.95%,72.5% 20.61%,75.0% 21.08%,77.5% 21.62%,80.0% 20.86%,82.5% 20.63%,85.0% 21.2%,87.5% 21.67%,90.0% 20.0%,92.5% 18.95%,95.0% 21.19%,97.5% 21.6%,100.0% 20.99%,100% 100%,0% 100%)}
  to{clip-path:polygon(0.0% -4.53%,2.5% -1.89%,5.0% -4.39%,7.5% -1.85%,10.0% -3.89%,12.5% -4.59%,15.0% -2.62%,17.5% -2.55%,20.0% -5.67%,22.5% -3.74%,25.0% -2.2%,27.5% -2.03%,30.0% -2.63%,32.5% -4.0%,35.0% -2.07%,37.5% -2.36%,40.0% -2.56%,42.5% -2.19%,45.0% -2.71%,47.5% -2.55%,50.0% -2.94%,52.5% -2.17%,55.0% -1.95%,57.5% -4.87%,60.0% -1.85%,62.5% -2.79%,65.0% -2.94%,67.5% -2.7%,70.0% -2.55%,72.5% -2.89%,75.0% -2.42%,77.5% -1.88%,80.0% -2.64%,82.5% -2.87%,85.0% -2.3%,87.5% -1.83%,90.0% -3.5%,92.5% -4.55%,95.0% -2.31%,97.5% -1.9%,100.0% -2.51%,100% 100%,0% 100%)}}

/* The stage's film grain moves by transform (the compositor's job) instead of background-position (five re-rasters of
   the whole stage a second, under an overlay blend over two live canvases). Same jumps, same timing; the band clips. */
.stage-band::after{inset:-64px}
@media (prefers-reduced-motion:no-preference){.stage-band::after{animation-name:v16-grain}}
@keyframes v16-grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,30px)}40%{transform:translate(25px,-55px)}60%{transform:translate(-60px,-20px)}80%{transform:translate(45px,50px)}}

/* The programme's spine on phones and tablets (v16_night.js): the four weeks, sticky while you read them */
.prog-spine{display:none}
@media (max-width:1099px){
  .prog-spine{position:sticky;top:4px;z-index:5;display:flex;justify-content:space-between;gap:6px;margin:0 0 14px;padding:10px 0 8px;
    background:var(--stone);border-bottom:1px solid var(--hair);font:900 .92rem/1 var(--dots);letter-spacing:.02em;color:color-mix(in srgb,var(--ink) 38%,transparent)}
  .prog-spine span{position:relative;padding-right:1.1em;transition:color .3s ease}
  .prog-spine span.on{color:var(--bot-text,#118186)}
  .prog-spine span.done{color:var(--ink)}
  .prog-spine span.done::after{content:"";position:absolute;right:0;top:-.1em;width:.95em;height:.95em;background:var(--human);
    -webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
}

/* The course sorter: a picked task flies from its chip into its column (v2_course.js). The page's torn root transition
   sits this one out; the landed line flashes the column's ink once. */
html.vt-sort::view-transition-old(root),html.vt-sort::view-transition-new(root){animation:none}
::view-transition-group(task-fly){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,.7,.2,1);z-index:50}
@media (prefers-reduced-motion:no-preference){
  .bin li.landed{animation:v16-land .9s .45s ease-out both}
}
@keyframes v16-land{from{background:color-mix(in srgb,var(--human) 16%,transparent)}to{background:transparent}}

/* A module plays as it passes the middle (v16_night.js): the recording's playhead runs out, then the pen ticks each
   "You'll be able to" line in turn, where its bullet was */
.fx-on .mod.played .onscreen::before{transform:none;transition:transform 2.6s linear}
.fx-on .mod.played .can{list-style:none}
.fx-on .mod.played .can li{position:relative}
.fx-on .mod.played .can li::before{content:"";position:absolute;left:-1.1em;top:.28em;width:.85em;height:.85em;background:var(--human);
  -webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat;animation:v16-strike .32s cubic-bezier(.65,0,.3,1) both;animation-delay:.9s}
.fx-on .mod.played .can li:nth-child(2)::before{animation-delay:1.25s}
.fx-on .mod.played .can li:nth-child(3)::before{animation-delay:1.6s}
.fx-on .mod.played .can li:nth-child(4)::before{animation-delay:1.95s}

/* The host signs too: under the name, a signature the pen draws when it gets there (the brand's signature mark until
   the host's own is supplied) */
.host-sign{display:grid;gap:6px;justify-items:start;margin-top:4px}
.host-sign .hs-mk{display:block;width:min(240px,62%);height:62px;border-bottom:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);padding-bottom:4px}
.host-sign .hs-mk > .mk{width:100%;height:100%;--mk-dur:1.2s}
.host-sign .hs-cap{margin:0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}

/* r2: the quote wall's seventh quote closes the wall at full width; a ninth pain spans the list's last row */
.quote-wall .qw:nth-child(7){grid-column:1/-1}
.painlist li:last-child:nth-child(odd){grid-column:1/-1}
/* the Cohort 01 receipt: blank lines until the first cohort ends */
.cohort-rc{max-width:620px;margin-top:clamp(18px,2vw,28px)}
.cohort-rc .rc-wk{font-size:1rem;letter-spacing:0}
.rc-foot{margin:14px 0 0;font:500 .72rem/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}

/* r2: phones: the sticky button slides away while a form or a price is on screen (v16_night.js) */
.sticky{transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.sticky.yield{transform:translateY(calc(100% + 8px));pointer-events:none}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}
/* blocks waiting for owner data stay off the live site */
.no-proto [data-needs],.no-proto .proto-only{display:none!important}  /* .proto is the prototype chip's own class */
/* the course's checkout slip: opens under a Join until the Stripe links exist */
.co-slip{display:grid;gap:10px;margin:12px 0 4px;padding:14px 16px;border:1.5px dashed currentColor;max-width:34rem;text-align:left}
.co-slip p{margin:0;font-size:.95rem;line-height:1.45}
.co-row{display:flex;flex-wrap:wrap;gap:10px}
.co-row input{flex:1 1 200px;min-height:48px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:var(--field,#fff);color:var(--ink);font:inherit;font-size:1rem}
.co-row .btn{flex:none;min-height:48px}
.co-err{color:var(--human);font-weight:700}
.co-done{font-weight:700}
@media (max-width:560px){.co-row{flex-direction:column}.co-row input{flex:none}.co-row .btn{width:100%}}

/* r2: the editor's delete. A struck hype line gets the proofreader's delete mark and a note in the pen's hand */
.hype-line[data-dele]::before{content:"";position:absolute;left:100%;top:.02em;width:.62em;height:.62em;margin-left:.18em;background:var(--human);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 33c7-2 13-9 15-17 1.5-6-2-11-6.5-9.5-4.5 1.6-4 8.5 1.5 11 5 2.3 10 .6 13.5-2.6 3-2.7 5.5-1.2 5.8 2.3.4 4.5-2.6 9.2-5.6 12.8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 33c7-2 13-9 15-17 1.5-6-2-11-6.5-9.5-4.5 1.6-4 8.5 1.5 11 5 2.3 10 .6 13.5-2.6 3-2.7 5.5-1.2 5.8 2.3.4 4.5-2.6 9.2-5.6 12.8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0}
.hype-line[data-dele]::after{content:attr(data-dele);position:absolute;left:100%;top:-.05em;margin-left:1.95em;white-space:nowrap;
  font:700 max(.95rem,.46em)/1.1 var(--sans);letter-spacing:0;word-spacing:0;text-transform:none;color:var(--human);-webkit-text-stroke:0;rotate:-2deg;opacity:0}
.hype-line[data-dele]:has(> .mk.on)::before,.hype-line[data-dele]:has(> .mk.on)::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fx-on .hype-line[data-dele]:has(> .mk.on)::before{animation:v16-write .25s 1.45s cubic-bezier(.5,0,.3,1) both}
  .fx-on .hype-line[data-dele]:has(> .mk.on)::after{animation:v16-write .6s 1.6s cubic-bezier(.5,0,.3,1) both}
}
html:not(.fx-on) .hype-line[data-dele]::before,html:not(.fx-on) .hype-line[data-dele]::after{opacity:1}  /* reduced motion: finished */
@media (max-width:760px){.hype-line[data-dele]::after{content:"→ " attr(data-dele);position:static;display:block;margin:.35em 0 0;font-size:max(.9rem,.5em)}.hype-line[data-dele]::before{display:none}}

/* r2: Accepted. The course's Join stamps the quote (v16_night.js): a rubber stamp with uneven ink (baked noise as a mask) */
.offer{position:relative}
.stamp-acc{position:absolute;right:clamp(10px,4%,40px);top:clamp(12px,5%,44px);z-index:3;padding:.5em .75em .42em;border:3px solid currentColor;
  color:var(--human);font:800 clamp(.78rem,.55rem + .6vw,1.12rem)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  rotate:-6deg;pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask:var(--stamp-noise) 0 0/180px 180px;mask:var(--stamp-noise) 0 0/180px 180px}
.stamp-acc--sm{position:relative;right:auto;top:auto;display:inline-block;margin:10px 0 0 10px;font-size:.74rem;mix-blend-mode:normal;vertical-align:middle}
.fx-on .offer.signed .of-sig .mk[data-draw] svg{clip-path:inset(-20% -2% -20% -2%)}
@media (max-width:560px){.stamp-acc{top:auto;bottom:clamp(90px,26vw,140px);right:8px}}

/* r2: the full stop is a blot of the pen's ink (a fibrous edge and a few spatters) instead of a vector circle. The mask box
   is wider than the drop so the spatters fit inside it; the drop itself keeps the full stop's size. */
:root{--blot-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M166.8 100.0C166.8 101.5 166.8 102.9 167.1 104.4C167.3 105.9 168.1 107.5 168.4 109.0C168.6 110.5 168.8 112.2 168.6 113.6C168.3 115.1 167.6 116.6 166.8 117.9C166.1 119.3 164.9 120.5 163.9 121.7C163.0 122.9 162.1 124.2 160.9 125.2C159.8 126.3 158.1 127.1 157.2 128.2C156.3 129.3 156.1 130.8 155.5 132.1C154.9 133.3 154.2 134.6 153.5 135.7C152.7 136.9 152.0 138.2 151.0 139.2C150.0 140.1 148.4 140.6 147.4 141.6C146.5 142.6 146.1 144.2 145.2 145.2C144.3 146.3 142.8 146.7 142.0 147.9C141.1 149.1 141.2 151.3 140.2 152.4C139.2 153.4 137.4 153.5 136.1 154.1C134.9 154.7 133.9 156.0 132.5 156.3C131.0 156.5 129.0 155.8 127.5 155.7C126.0 155.7 124.6 155.9 123.3 156.2C121.9 156.4 120.7 156.9 119.4 157.2C118.1 157.4 116.8 157.6 115.5 157.8C114.2 157.9 112.9 158.0 111.6 158.1C110.3 158.2 109.0 158.4 107.7 158.3C106.4 158.1 105.0 157.2 103.7 157.1C102.5 157.1 101.3 157.4 100.0 158.1C98.7 158.9 97.4 160.7 96.0 161.6C94.6 162.5 93.1 163.2 91.6 163.5C90.2 163.9 88.8 163.6 87.4 163.5C85.9 163.5 84.5 163.3 83.1 163.1C81.6 163.0 80.1 163.0 78.7 162.6C77.3 162.3 76.1 161.5 74.7 161.1C73.3 160.7 71.7 160.6 70.3 160.2C68.9 159.8 67.3 159.6 66.1 158.7C64.9 157.9 64.2 156.2 63.2 155.0C62.3 153.8 61.4 152.6 60.6 151.4C59.7 150.1 59.3 148.6 58.1 147.8C57.0 146.9 55.1 146.9 53.7 146.3C52.3 145.7 50.8 145.1 49.7 144.1C48.6 143.2 47.8 141.9 46.9 140.7C46.1 139.5 45.4 138.2 44.7 136.9C44.0 135.7 43.8 134.1 42.9 133.0C42.0 131.8 40.5 131.0 39.5 129.9C38.4 128.7 37.4 127.5 36.7 126.2C36.0 124.9 35.2 123.5 35.1 122.0C35.0 120.5 35.5 118.8 35.9 117.2C36.2 115.6 37.1 114.0 37.4 112.4C37.8 110.9 37.8 109.6 38.2 108.1C38.5 106.7 39.5 105.3 39.7 104.0C39.8 102.6 38.9 101.3 39.0 100.0C39.0 98.7 39.5 97.3 40.0 96.1C40.6 94.8 41.6 93.6 42.2 92.4C42.8 91.2 43.5 90.1 43.6 88.8C43.7 87.5 43.1 86.1 43.0 84.7C42.9 83.4 43.3 82.2 43.1 80.7C43.0 79.2 42.1 77.5 42.0 76.0C41.9 74.5 42.0 72.9 42.5 71.7C43.1 70.4 44.4 69.5 45.2 68.4C46.1 67.3 47.0 66.2 47.7 65.0C48.4 63.8 48.7 62.4 49.4 61.1C50.0 59.9 50.6 58.5 51.4 57.4C52.2 56.2 53.1 55.1 54.2 54.2C55.2 53.2 56.4 52.4 57.7 51.8C59.0 51.2 60.6 50.9 61.9 50.3C63.1 49.7 64.4 49.2 65.4 48.2C66.4 47.3 67.1 45.8 68.0 44.6C69.0 43.5 70.1 42.5 71.0 41.3C72.0 40.0 72.8 38.0 74.0 37.1C75.2 36.3 76.8 36.4 78.3 36.0C79.7 35.6 81.2 35.5 82.6 34.9C83.9 34.3 85.1 32.8 86.5 32.3C87.9 31.8 89.5 32.2 91.0 31.8C92.5 31.5 93.9 30.3 95.4 30.1C96.9 30.0 98.5 30.2 100.0 30.8C101.5 31.4 102.9 32.7 104.4 33.6C105.8 34.5 107.1 35.2 108.4 35.9C109.8 36.7 111.0 37.5 112.3 38.1C113.6 38.7 115.0 38.9 116.2 39.4C117.5 40.0 118.6 41.0 119.8 41.6C121.1 42.1 122.7 41.7 123.8 42.5C124.9 43.3 125.5 45.2 126.6 46.1C127.6 47.1 128.7 47.6 129.9 48.2C131.1 48.7 132.5 49.0 133.8 49.4C135.2 49.7 136.8 49.8 138.1 50.3C139.4 50.9 140.6 51.6 141.6 52.5C142.6 53.4 143.3 54.8 144.1 55.9C144.9 57.0 145.8 58.0 146.5 59.2C147.1 60.4 147.3 62.0 148.1 63.1C148.8 64.2 150.1 64.9 151.0 65.9C151.9 66.9 153.1 67.8 153.6 69.0C154.2 70.2 153.9 71.9 154.3 73.2C154.7 74.5 155.6 75.6 155.9 76.9C156.2 78.2 155.5 79.8 156.1 81.0C156.7 82.2 158.3 83.0 159.5 84.1C160.6 85.1 162.1 86.2 163.1 87.5C164.1 88.7 164.8 90.0 165.4 91.4C166.0 92.8 166.4 94.2 166.7 95.6C166.9 97.1 166.7 98.5 166.8 100.0Z'/%3E%3Ccircle cx='163.4' cy='143.4' r='5.5'/%3E%3Ccircle cx='59.0' cy='170.2' r='3.2'/%3E%3Ccircle cx='30.5' cy='74.0' r='4.4'/%3E%3Ccircle cx='90.7' cy='17.3' r='2.4'/%3E%3Ccircle cx='155.3' cy='44.9' r='3.6'/%3E%3C/svg%3E")}  /* the pen's ink blot: the full stop, and the ink that takes a button (v16_ink) */
.zd-dot{width:.27em;height:.27em;margin:0 -.04em 0 .01em;vertical-align:-.04em;border-radius:0;
  -webkit-mask:var(--blot-mask) center/100% 100% no-repeat;mask:var(--blot-mask) center/100% 100% no-repeat}
/* 2026-10-01, the owner: the full stop's transition as it was in v15. The drop swells over the whole 280vh track
   (v13: contain 20% to 92%) into a full flood of ink, and the closer prints out of it after the track; the 180vh track
   and the closer's -60vh overlap (v16, "no dead screen") made the swell three times shorter and hid its end */

/* r2: over the hunt's documents the pointer is the pen's nib (mouse and trackpad only) */
@media (pointer:fine){.hunt .doc,.hunt .doc .spot{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29 7.5 18.5 20.5 5.5a3.6 3.6 0 0 1 6 6L13.5 24.5Z' fill='%23FF0030' stroke='%232C1751' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 29 9.8 22.2' stroke='%232C1751' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 29,pointer}}
.pen-tip{will-change:translate,scale}

/* r2: the quote's corrections in proofreader's order: written above the struck value, the caret on its baseline pointing up
   at it (desktop); on phones beside the value on its own row, as the symband's draft does (it read as the next row's) */
#quote-doc .spot.found br{display:none}
#quote-doc .spot.found .fix{position:absolute;right:-.2em;bottom:calc(100% - .1em);left:auto;top:auto;margin:0;white-space:nowrap;
  font-size:.74rem;transform:rotate(-4deg);transform-origin:100% 100%}
@media (max-width:760px){
  #quote-doc .spot.found .fix{position:relative;right:auto;bottom:auto;display:inline-block;margin:0 0 0 .35em;transform:rotate(-3deg);transform-origin:0 60%}
}

/* r2: the corner controls step aside while a button passes under them (v16_night.js); focus keeps them, and the switch
   stays while the machine's view is on (it is the way back) */
.check-page.aside:not(:focus-visible){opacity:0;pointer-events:none;translate:0 14px}
html:not(.machine-on) body > .hm-switch.aside:not(:focus-within){opacity:0;translate:0 12px;pointer-events:none}

/* r2: when the pen's tick lands, ink floods the heading word by word along a wet front, instead of a colour fade; the
   outline (the machine's draft) fades as the ink arrives. Hollow parts (.hol) and struck hype lines stay as they are */
.pen-on .chapter-h .w:not(.hol .w):not(.hype-line .w){color:transparent;
  background:linear-gradient(90deg,var(--pen-ink,var(--ink)) 0 46%,transparent 54%) 100% 0/220% 100% no-repeat;-webkit-background-clip:text;background-clip:text;
  transition:background-position .65s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * 45ms),opacity .6s cubic-bezier(.625,.05,0,1) calc(var(--i,0) * 48ms),
    transform .95s cubic-bezier(.625,.05,0,1) calc(var(--i,0) * 48ms),filter .6s ease calc(var(--i,0) * 48ms)}  /* keeps the assembly's own timing (v13, v14) */
.pen-on .chapter-h.pen-checked .w:not(.hol .w):not(.hype-line .w){background-position:0 0}
/* and a little ink pools where the nib lifted off each tick (v15_pen.js) */
.pen-pool{position:absolute;top:-3.5px;left:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--human);scale:0;pointer-events:none;
  transition:scale .28s cubic-bezier(.3,1.7,.5,1)}
.pen-pool--s{top:-2.5px;left:-2.5px;width:5px;height:5px}
.pen-pool.on{scale:1}

/* r2: "Your week → Cohort": the pen's note beside the package the sorter's verdict names (three picks or more) */
#pricing .alt{position:relative}
#pricing [data-yours]::before{content:attr(data-yours);position:absolute;left:0;bottom:calc(100% + 6px);z-index:2;white-space:nowrap;
  font:700 1rem/1.1 var(--sans);color:var(--human);rotate:-3deg;transform-origin:0 100%;clip-path:inset(-30% 100% -30% 0)}
#pricing [data-yours].seen::before{clip-path:inset(-30% -2% -30% 0);transition:clip-path .6s cubic-bezier(.5,0,.3,1) .2s}
html:not(.fx-on) #pricing [data-yours]::before{clip-path:none}

/* r2: the pinned programme strip offers a way out: straight to the prices (the course's longest scroll) */
.prog-right{display:flex;gap:22px;align-items:baseline}
.prog-skip{color:inherit;text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:1.5px;text-underline-offset:.25em}
.prog-skip:focus-visible{outline:3px solid var(--human);outline-offset:3px}

/* r3: stamps record only what happened. Pencil (graphite, thinner) for a checkout that isn't open yet; ink for the rest */
.stamp-acc--pencil{color:var(--graphite);border-width:2px;border-style:dashed;font-weight:700;mix-blend-mode:multiply;opacity:.9}
.paid-note{margin:0 0 clamp(22px,3vw,34px);padding:14px 18px;border:2px solid var(--human);background:var(--paper);max-width:62ch;line-height:1.5}
.paid-note b{color:var(--human)}
/* the course: what's due at each live Q&A; the receipt a sceptic can ask for */
.due-line{max-width:62ch;margin:10px 0 0;color:var(--graphite)}
.rc-ask{display:grid;gap:10px;max-width:620px;margin:18px 0 0}
.rc-ask p{margin:0}
/* the struck ledger: false claims our research caught, struck with the brand's strike, corrected in the pen's hand */
.ledger{margin-top:16px}
.ledger > p{margin:0 0 8px}
.ledger ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.ledger li{display:grid;gap:3px}
.lg-claim{position:relative;width:fit-content;color:var(--graphite)}
.lg-claim::after{content:"";position:absolute;left:-2%;width:104%;top:38%;height:.5em;background:var(--human);-webkit-mask:var(--strike-mask) center/100% 100% no-repeat;mask:var(--strike-mask) center/100% 100% no-repeat}
.lg-note{font:700 1rem/1.2 var(--sans);color:var(--human);rotate:-1.5deg;width:fit-content;padding-left:1.1em;position:relative}
.lg-note::before{content:"";position:absolute;left:0;bottom:.05em;width:.95em;height:.95em;background:var(--human);-webkit-mask:var(--caret-mask) center/contain no-repeat;mask:var(--caret-mask) center/contain no-repeat}
.ledger small{color:var(--graphite);font-size:.85rem;max-width:60ch}

/* r3: one ink for every stamp (the baked noise, multiplied): Accepted/Pencilled, the hunt's Sent back, the ticket's */
:root{--stamp-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 2.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.hunt-stamp--back,.seat-stamp{-webkit-mask:var(--stamp-noise) 0 0/180px 180px;mask:var(--stamp-noise) 0 0/180px 180px;mix-blend-mode:multiply}
/* the pen kills the tropes: once struck, the fake LIVE light blinks twice more and goes grey */
.tropes.play .fake-live i{animation:blink 1s steps(1) 2 .9s;background:var(--graphite)}
/* the nib is the pointer wherever the visitor writes or signs */
@media (pointer:fine){#pricing .offer,#redline,#mgr-doc,.seat-canvas,#seat-canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29 7.5 18.5 20.5 5.5a3.6 3.6 0 0 1 6 6L13.5 24.5Z' fill='%23FF0030' stroke='%232C1751' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 29 9.8 22.2' stroke='%232C1751' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 29,crosshair}}

/* r3: the nib in the air, between a lifted tick and the margin (v15_pen.js) */
.pen-tip.air{transition:translate .24s cubic-bezier(.3,.7,.2,1),scale .24s,opacity .24s;scale:.8;opacity:.55}
.sticky.yield-2{transform:translateY(calc(100% + 8px));pointer-events:none}

/* r3: step 2 says it's the last step, with the first of two marks already inked (step 1 is done) */
.reg-steps{display:inline-flex;gap:4px;margin-right:10px;vertical-align:.18em}
.reg-steps i{display:block;width:22px;height:5px;border:1.5px solid currentColor}
.reg-steps i.on{background:var(--human);border-color:var(--human)}
.reg-err{margin:8px 0 0;color:var(--human);font-weight:700}

/* r3: tear your seat. The picked time's tile flies into the thank-you heading, tilting as it goes (v2_webinar.js);
   the tiles are perforated along the top like a ticket stub */
::view-transition-group(seat){animation-duration:.8s;z-index:60}
::view-transition-image-pair(seat){animation:v16-seat-tilt .8s cubic-bezier(.3,.7,.2,1) both}
@keyframes v16-seat-tilt{40%{rotate:-4deg}}
#reg-2 .slot{background-image:radial-gradient(circle at 6px 0,var(--stone) 2.6px,transparent 3.2px);background-size:12px 6px;background-repeat:repeat-x;background-position:0 0}

/* r3: the challenge loop. The recipient's first offer is the hunt; the scores side by side after a decision */
.hunt-first{margin:14px 0 4px}
.hunt-try{white-space:nowrap}
.hv-vs{display:block;margin-top:8px;font:600 .82rem/1.4 var(--mono);letter-spacing:.04em;color:var(--ink)}

/* r3: the full stop prints the closer (v16_night.js). The headline waits under a clip, prints in 8 steps behind the head,
   hollow, then floods with paper-coloured ink word by word; the times settle like dropped tickets */
.closer .final{position:relative}
.fx-on .closer:not(.printing) #lp1-s11{clip-path:inset(0 0 100% 0)}
.fx-on .closer.printing #lp1-s11{animation:v16-print-h .9s steps(8,end) both}
@keyframes v16-print-h{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.fx-on .closer.printing #lp1-s11 .w{color:transparent;-webkit-text-stroke:1.2px var(--stone);
  background:linear-gradient(90deg,var(--stone) 0 46%,transparent 54%) 100% 0/220% 100% no-repeat;-webkit-background-clip:text;background-clip:text;
  transition:background-position .6s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * 55ms),-webkit-text-stroke-color .6s ease calc(var(--i,0) * 55ms + .3s),
    opacity .6s cubic-bezier(.625,.05,0,1) calc(var(--i,0) * 48ms),transform .95s cubic-bezier(.625,.05,0,1) calc(var(--i,0) * 48ms),filter .6s ease calc(var(--i,0) * 48ms)}
.fx-on .closer.inked #lp1-s11 .w{background-position:0 0;-webkit-text-stroke-color:transparent}
.fx-on .closer.printing:not(.inked) .final .times li{translate:0 10px;rotate:-2deg}
.fx-on .closer .final .times li{transition:translate .5s cubic-bezier(.3,1.4,.5,1) calc(var(--n,0) * 70ms + .3s),rotate .5s calc(var(--n,0) * 70ms + .3s)}

/* r3: the quote's stamp lands on its signature line, where the visitor acts */
.of-signline{position:relative}
.of-signline > .stamp-acc{top:auto;right:auto;left:22%;bottom:-.2em;font-size:clamp(.9rem,.7rem + .8vw,1.45rem)}
@media (max-width:560px){.of-signline > .stamp-acc{left:14%;bottom:0;right:auto;top:auto}}

/* r3: tablets: the long descender of "yours." crossed the lead's first line; the lead starts below the flourish */
@media (min-width:700px) and (max-width:1099px){.stage-lead{margin-top:clamp(44px,8vw,86px)}}

/* r4: the live site's honest "not open yet" (v16_night.js bobGuard) */
.bob-guard{margin:10px 0 0;font-weight:700;color:var(--human)}

/* r4: the quote is signed only when someone pays, on touch screens too: no hover means no preview signature; the line
   waits (v13 drew it on every phone). The pencilled stamp stays on the signature line, clear of the refund line */
@media (hover:none){.fx-on .offer:not(.signed) .of-sig .mk[data-draw] svg{clip-path:inset(-20% 100% -20% -2%)!important}}
.of-signline > .stamp-acc--pencil{left:6%;bottom:.5em;max-width:92%;white-space:nowrap}

/* r4: the closer says which time its form will book */
.closer-when{margin:0 0 10px;font-size:.95rem;color:color-mix(in srgb,var(--stone) 86%,transparent)}

/* r4: the ad apps' browsers can't reach the calendar; the note sits right under the button */
.cal-inapp{margin:10px 0 4px;font-weight:700;color:var(--ink)}

/* r4: the approver's box on the course page (?a=approve): a paper note with a red rule, in the brief's voice */
.approver{background:var(--paper);color:var(--ink);border-left:4px solid var(--human);padding:16px 20px;max-width:62ch;box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 35%,transparent)}
.approver .mono{margin:0 0 6px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--human)}
.approver p:last-child{margin:0}

/* r4: punch your time. Picking a time punches the tile like a conductor's clipper: a nib-shaped hole bites the
   corner and the chad spins away. Reduced motion: the hole is simply there */
:root{--die-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 24 2.2 11.5C1 5.5 4.6 1 10 1s9 4.5 7.8 10.5z'/%3E%3C/svg%3E")}
#reg-2 .slot:not(.slot--now):has(input:checked)::after,#reg-2 .slot:not(.slot--now):has(input:checked)::before{content:"";position:absolute;top:9px;right:10px;width:13px;height:16px;pointer-events:none;
  -webkit-mask:var(--die-mask) center/contain no-repeat;mask:var(--die-mask) center/contain no-repeat}
#reg-2 .slot:not(.slot--now):has(input:checked)::after{background:var(--stone);animation:v16-punch .18s cubic-bezier(.3,1.5,.5,1) both}
#reg-2 .slot:not(.slot--now):has(input:checked)::before{z-index:1;background:var(--paper);animation:v16-chad .75s cubic-bezier(.45,0,.8,.55) .1s both}
@keyframes v16-punch{from{scale:0}}
@keyframes v16-chad{0%{opacity:1}100%{opacity:0;translate:16px 64px;rotate:230deg}}
@media (prefers-reduced-motion:reduce){#reg-2 .slot:has(input:checked)::before{display:none}#reg-2 .slot:has(input:checked)::after{animation:none}}

/* r4: the closer draws its own brain (v5_fx.js Sym), smaller than the stage's */
.closer .lockup--nib .sym{width:min(100%,260px)}
@media (max-width:767px){.closer .lockup--nib .sym{width:180px}}

/* r4 quick wins: the proofing pass's ticks read at a glance; the thank-you heading takes focus (for screen readers)
   without a red box: the pen's tick marks the arrival */
html.checking [data-src]::before{width:24px;height:24px;top:-12px;right:-12px}  /* html: outranks v16_proof.css, which loads later */
[data-view] h1[tabindex="-1"]:focus{outline:none}
[data-view] h2.ty-h1[tabindex="-1"]:focus{outline:none}  /* the thank-you view's title, an h2 since 29 Oct */

/* r4: every link-looking button reads as a link (the room's "Copy the link" came out as a grey system button) */
button.link{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--human)}
button.link:focus-visible{outline:3px solid var(--human);outline-offset:3px}
/* the failure line takes focus so screen readers hear it; the red words are enough of a mark for everyone else */
.reg-err:focus{outline:none}

/* r4: no more blur (a full repaint per word, and not the brand). Headings assemble without it; the method rail's
   steps that aren't on screen are the machine's hollow draft of themselves, and fill with ink when their demo arrives */
.fx-on .asm .w{filter:none}
@media (min-width:901px){
  .method-rail li:not(.on){filter:none;opacity:.5}
  .method-rail li b{transition:-webkit-text-fill-color .45s ease}
  .method-rail li:not(.on) b{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px currentColor}
}

/* r5 (CRO): short phones see the form on the first screen; the lead follows the form's note. Not for a challenge
   (?a=check / mistakes), where "Find all five" leads */
@media (max-width:480px) and (max-height:760px){
  .stage-copy:not(:has(.hunt-first)) > #reg-form{order:1}
  .stage-copy:not(:has(.hunt-first)) > .stage-lead{order:2;margin-top:20px}
}
/* r5: the paid return answers on the first screen, in place of the hero's Join */
.paid-hero{margin:0;max-width:34rem;background:var(--paper);color:var(--ink);border-left:4px solid var(--human);padding:14px 18px;
  box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 55%,transparent)}
.paid-hero .link{white-space:nowrap}
/* r5: the approver's box reads as a short memo, and ends on its own action */
.approver p{margin:0 0 .55em}
.approver .approver-act{margin:14px 0 10px}
.approver .approver-po{margin:0;font-size:.92rem;color:var(--graphite)}
.mgr-mailto{margin-left:.35em;white-space:nowrap}
.bob-guard .link{margin-left:.2em}
/* r5 (creative): the punch die is the wordmark's ">" (a nib read as a map pin) */
:root{--die-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3 1h6l9 11-9 11H3l9-11z'/%3E%3C/svg%3E")}

/* r5: a long source label wraps inside the page instead of pushing it wider (a 449px pill at 1280) */
html.checking [data-src]::after{white-space:normal;width:max-content;max-width:min(220px,calc(100vw - 48px))}

/* v17: after the pen marks the complaint (v17_print.js), it ticks the answers one by one: the "✓" glyphs become
   pen ticks drawn in sequence. Without .fx-on (reduced motion) the glyphs stay as they are */
.fx-on .think .yes li::before{content:"";top:16px;width:1.05em;height:.9em;background:var(--human);
  -webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat;clip-path:inset(0 100% 0 0)}
.fx-on .think .yes.inked li::before{clip-path:inset(0 0 0 0);transition:clip-path .3s steps(6,end) calc(var(--d,.2s) + var(--i,0) * 130ms)}

/* v17: "the name on it is yours", literally: the first name signs itself under the field when typing pauses */
.name-sig{display:block;min-height:2.1rem;margin:4px 0 -8px 8px;font:400 2rem/1.05 var(--script);color:var(--human);rotate:-2deg;
  transform-origin:0 60%;clip-path:inset(-30% 100% -30% 0);pointer-events:none;white-space:nowrap;overflow:visible}
.name-sig.signing{clip-path:inset(-30% -8% -30% -2%);transition:clip-path .75s cubic-bezier(.5,0,.3,1)}
@media (prefers-reduced-motion:reduce){.name-sig.signing{transition:none}}
/* v17: selecting text is marking it with the red pen */
::selection{background:color-mix(in srgb,var(--human) 26%,transparent)}

/* v16: the closer's and the mistake hunt's own registration rows, plus the hero's step-2 polish.
   Reuses .reg/.reg-1/.reg-note/.btn/.field as-is (light-on-dark on the stage and the closer, dark-on-light
   in the hunt panel); only what those don't already cover lives here. */

/* the closer: same width cap and light-on-dark input treatment as the hero's own step 1 */
.closer #closer-reg{margin-top:28px}

/* the closer's timetable doubles as the inline form's slot pick: a wash + accent bar, no text recolouring
   (the last tile's aqua time already reads fine against it either way) */
.times a[aria-pressed="true"]{background:color-mix(in srgb,var(--seal-fg) 16%,transparent);box-shadow:inset 0 -4px 0 var(--accent)}

/* the mistake hunt's inline row: under the panel's existing content, on its own light card */
#hunt-reg{padding-top:14px;border-top:2px solid var(--ink);display:grid;gap:10px}
.hunt-reg-form{display:flex;flex-wrap:wrap;gap:10px}
.hunt-reg-form input{flex:1 1 200px}
#hunt-reg .reg-2{margin-top:4px;border:2px solid var(--ink);box-shadow:none}
/* while the game has the hero's step 2 on loan (v16_reg.js adds .reg--loan) the hero keeps its "Send me the link", even if step 2 stood open there
   (.reg--open hides the button: step 2's own takes its place, and that is the one that is away) */
.reg.reg--loan .reg-1 .btn{display:inline-flex}

/* typo guard + the hero's "your time" echo: both inherit whatever text colour their own field already
   uses (near-white on the stage and the closer, ink on the hunt panel's paper) */
.typo-hint,.reg-time-hint{margin:6px 0 0;font-size:.88rem;line-height:1.4}
.typo-hint .link,.reg-time-hint .link{font-family:inherit;font-size:inherit;line-height:inherit;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}

/* v16: the thank-you view. No new colours: paper (--stone), ink violet (--ink), the pen's red (--human/--signal),
   mono labels (--mono) and the body sans (--sans) — the same tokens as the rest of the page (v2/v5 brand layers). */

/* ---------- the calendar kit inside the seal: the primary button is the obvious action, full width on phones ---------- */
.cal-kit{display:grid;gap:14px}
.cal-main{justify-self:start}
.cal-note{margin:0;max-width:52ch;color:var(--graphite);font-size:.92rem}
@media (max-width:560px){
  .cal-main{justify-self:stretch}
}

/* ---------- the text-reminder form: input and button in a row on desktop, stacked full-width on phones ---------- */
.ty-sms{display:grid;gap:14px;border-top:1.5px solid var(--ink);padding-top:22px}
.ty-sms-form{display:flex;flex-wrap:wrap;gap:10px}
.ty-sms-form input{flex:1 1 240px;min-height:48px;font-size:1rem}
.ty-sms-form .btn{flex:none;min-height:48px}
.ty-sms-form .ty-err{flex-basis:100%}
@media (max-width:560px){
  .ty-sms-form{flex-direction:column;align-items:stretch}
  .ty-sms-form input{flex:none}
  .ty-sms-form .btn{width:100%}
}

/* ---------- the optional question: the label spans both, the field and button share a row on desktop ---------- */
.ty-q{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:end}
.ty-q-l{grid-column:1/-1;margin:0;font-weight:600;font-size:.95rem}
.ty-q textarea{grid-column:1;width:100%;min-height:48px;padding:12px 14px;border:2px solid var(--ink);border-radius:0;
  background:var(--field);color:var(--ink);font:inherit;font-size:1rem;resize:vertical}
.ty-q .btn{grid-column:2}
.ty-q .ty-err{grid-column:1/-1}
#ty-q-done{grid-column:1/-1}
@media (max-width:560px){
  .ty-q{grid-template-columns:1fr}
  .ty-q textarea,.ty-q .btn{grid-column:1}
  .ty-q .btn{width:100%}
}

/* ---------- shared inline field error: the pen's red, the same voice the mistake hunt uses for "wrong" ---------- */
.ty-err{margin:0;color:var(--human);font-weight:700;font-size:.92rem}

/* ---------- the hunt score recap, in the files list ---------- */
.ty-hunt{font-weight:700;color:var(--ink)}

/* ---------- share: link row plus the reference prices underneath ---------- */
.ty-share{display:grid;gap:14px;border-top:1.5px solid var(--ink);padding-top:22px}
.ty-share-row{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ty-prices{color:var(--graphite);font-size:.95rem}

/* v16 r2: "Your seat" — a printed ticket stub on the thank-you view, under the seal. Paper (--paper), a 2px ink
   border, a perforated top edge and a dashed rule under the header, same shadow as the seal/cards (--sh). The pen
   (--human) ticks four lines as the visitor registers, adds the session to a calendar, says where they'll watch
   and signs; at 4 of 4 a stamp comes down (v16-stamp, from v16_night.css) and a "Save my ticket" PNG appears.
   No new colours, no glassmorphism, no gradients. fx-on gates every transition/animation; the reduced-motion query
   below is a belt-and-suspenders second guard, same pattern as v5_brand.css's marks.
   r4: the stub becomes a real ticket. At 900px the card is a landscape grid — the pass, then a perforated stub
   (aside.seat-stub) holding "KEEP THIS", the date again and the brand mark; below 900px the stub is a bottom strip.
   The whole card prints up out of a slot under the seal (v16_ticket.js's feedIn, a stepped clip-path). Each tick
   punches a hole in the stub, and the stamp lands across the seam at -8°. */

.seat{position:relative;max-width:640px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh)}
.seat::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;pointer-events:none;
  background-image:radial-gradient(circle 7px,var(--stone) 7px,transparent 7.2px);
  background-repeat:repeat-x;background-size:28px 16px}
.seat-pass{padding:clamp(22px,3vw,32px) clamp(20px,3.4vw,34px) clamp(26px,3.4vw,36px)}

/* ---------- r4: the printer feed. The whole card prints down out of the slot once the thank-you view has settled
   (v16_ticket.js: onShow → feedIn, 780ms — just after the page's own .75s tear, v14_more.css). A stepped clip-path
   plus a 1px horizontal shiver per step; reduced motion (folded in with ?shot=1) shows it finished from the start. */
.fx-on .seat{clip-path:inset(0 0 100% 0);translate:0 -32px}
/* r5: fill:backwards, not both -- once the animation ends the element must fall back to .seat.feed's own resting
   rule (clip-path:none) instead of an animation-held inset(-10px...) that never lets go (a lingering non-none
   clip-path keeps costing repaints forever after). backwards still primes the pre-start frame; there is no delay
   here so it has nothing else to do, but it costs nothing either. */
.fx-on .seat.feed{clip-path:none;translate:0 0;
  animation:v16-ticket-feed .9s steps(6,end) backwards,v16-ticket-shiver .9s steps(6,end) backwards}
@keyframes v16-ticket-feed{
  from{clip-path:inset(0 0 100% 0);translate:0 -32px}
  to{clip-path:inset(-10px -10px -10px -10px);translate:0 0}
}
@keyframes v16-ticket-shiver{
  0%{transform:translateX(0)}
  16.6%{transform:translateX(-1px)}
  33.3%{transform:translateX(1px)}
  50%{transform:translateX(-1px)}
  66.6%{transform:translateX(1px)}
  83.3%{transform:translateX(-1px)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .fx-on .seat{clip-path:none!important;translate:none!important}
  .fx-on .seat.feed{animation:none!important}
}

/* ---------- header: dot-matrix, prints left to right the first time the stub is seen; READY n OF 4 in the corner --- */
.seat-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:2px dashed var(--ink);padding-bottom:16px;margin-bottom:18px}
.seat-hdr{margin:0;font-family:var(--dots);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.88rem,.78rem + .4vw,1.02rem);line-height:1.35;color:var(--ink)}
.seat-ready{margin:0;flex:none}
.fx-on .seat-hdr{clip-path:inset(0 100% 0 0)}
.fx-on .seat-hdr.is-printed{clip-path:inset(0 0 0 0);transition:clip-path .6s steps(22,end)}
@media (prefers-reduced-motion:reduce){.fx-on .seat-hdr{clip-path:none!important;transition:none!important}}
/* r7: "would you sign this?" -- a plain-language line under the dot-matrix header, for whoever finds the ticket
   without ever having seen the page (a saved PNG, a screenshot) */
.seat-explain{margin:6px 0 0;color:var(--graphite);font-size:.95rem;max-width:52ch}

/* ---------- r4: the big date, dot-matrix, under the header; echoed on the stub. Omitted (hidden) when nothing's
   picked yet ("watch the recording now" reads THE RECORDING instead of a date) ---------- */
.seat-when{margin:6px 0 0;font-family:var(--dots);font-weight:900;letter-spacing:.01em;color:var(--ink);
  font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);line-height:1.05}
.seat-when[hidden]{display:none}

/* ---------- the four lines ---------- */
.seat-lines{list-style:none;margin:0;padding:0}
.seat-line{display:grid;grid-template-columns:24px 1fr;column-gap:14px;row-gap:10px;padding:16px 0;border-bottom:1px solid var(--hair)}
.seat-line:last-child{border-bottom:0;padding-bottom:4px}
.seat-box{grid-row:1;grid-column:1;align-self:center;width:24px;height:24px;border:2px solid var(--ink);background:var(--paper);
  display:grid;place-items:center}
.seat-box .mk{width:14px;aspect-ratio:196/108}
.seat-box .mk svg{clip-path:inset(-15% 100% -15% -15%)}
.fx-on .seat-box .mk svg{transition:clip-path .3s cubic-bezier(.65,0,.3,1)}
.seat-line.is-on .seat-box .mk svg{clip-path:inset(-15% -15% -15% -15%)}
@media (prefers-reduced-motion:reduce){.fx-on .seat-box .mk svg{transition:none!important}}
.seat-label{grid-row:1;grid-column:2;align-self:center;font-weight:700;font-size:1.03rem}
.seat-chips,.seat-tip,.seat-team,.seat-pad,.seat-pad-row,.seat-type{grid-column:1/-1}

/* ---------- "I'll watch from": three chips, one tip that swaps by choice ---------- */
.seat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.seat-chip{border:1.5px solid var(--ink);background:var(--field);color:var(--ink);padding:8px 14px;max-width:100%;
  font:600 .92rem/1.25 var(--sans);cursor:pointer}
.seat-chip[aria-pressed="true"]{background:var(--ink);color:var(--stone)}
.seat-tip{margin:2px 0 0;color:var(--graphite);font-size:.95rem;max-width:52ch}
.seat-team{margin:2px 0 0;display:grid;gap:8px}
.seat-team p{margin:0;color:var(--graphite);font-size:.95rem}
.seat-team-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- "Signed": the ink pad, the typed fallback ---------- */
.seat-pad{position:relative;display:flex;align-items:flex-end;gap:.5em;margin-top:2px}
.seat-pad-x{flex:none;font:700 1.4rem/1 var(--sans);color:color-mix(in srgb,var(--ink) 38%,transparent);padding-bottom:15px}
.seat-canvas{flex:1 1 auto;width:100%;height:130px;display:block;border-bottom:1.5px solid var(--hair);
  touch-action:none;cursor:crosshair}
.seat-pad-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.seat-pad-cap{color:var(--graphite)}
.seat-type{margin-top:16px;max-width:22em}

/* ---------- the finish: stamp, line, save button, privacy note ---------- */
.seat-done{margin-top:24px;padding-top:22px;border-top:1.5px solid var(--ink);display:grid;gap:14px;justify-items:start}
/* r4: the stamp is taken out of flow and lands across the pass/stub seam (vertical on desktop, horizontal on phones),
   rotated -8° with the shared stamp texture (v16_night.css: --stamp-noise, multiply). The thud itself (scale, WAAPI)
   and its vibrate() live in v16_ticket.js now, so no keyframe class is toggled here any more. */
.seat-stamp{position:absolute;left:50%;top:calc(100% - 116px);translate:-50% -50%;rotate:-8deg;z-index:2;pointer-events:none;
  display:inline-block;border:3px solid var(--human);color:var(--human);background:var(--paper);
  padding:6px 13px;font:800 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;
  -webkit-mask:var(--stamp-noise) 0 0/180px 180px;mask:var(--stamp-noise) 0 0/180px 180px;mix-blend-mode:multiply}
.seat-see{margin:0;font-weight:700;font-size:1.05rem;max-width:46ch}
.seat-privacy{margin:0;font-size:.82rem}
/* r7: "Save my ticket" and the text-only "Copy a caption" sit side by side; wraps to its own line if the row's tight */
.seat-save-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}

/* ---------- focus: the pen's red, not the default accent, on every interactive element in the stub ---------- */
.seat :is(button,input):focus-visible{outline:3px solid var(--human);outline-offset:3px}

@media (max-width:560px){
  .seat-chip{flex:1 1 auto}
}
/* r2 (coordinator): the pen's tick is written in, bigger than its box, as in the saved ticket */
.seat-box{position:relative;overflow:visible}
.seat-box .mk{position:absolute;left:-2px;bottom:1px;width:30px;color:var(--human)}
/* r3: the calendar line adds the event itself; its links sit under the label */
.seat-add{grid-column:2;font-size:.9rem;color:var(--graphite)}
.seat-add .link,.seat-add button.link{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--human);text-underline-offset:.2em}
.seat-added{color:var(--human);font-weight:700}
.seat-hdr{text-wrap:balance}

/* ---------- r4: the stub. "KEEP THIS", the date again, the brand mark; perforated off the pass with two half-moon
   bites (the same paper/stone trick as .seat::before). A bottom strip on phones, the right column at 900px. ---------- */
.seat-stub{position:relative;margin-top:16px;padding:14px clamp(20px,3.4vw,34px) 16px;border-top:2px dashed var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.seat-stub::before,.seat-stub::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--stone)}
.seat-stub::before{left:-2px}
.seat-stub::after{right:-2px}
/* r5: the carbon copy sits in the stub next to (phone) or under (desktop, see the 900px query) the date. Wrapping
   the caption+date in their own column keeps that pair intact either way; flex-wrap on the phone row is a safety
   net if a long date ever leaves too little room beside the 150px canvas -- it drops to a second line, never
   overflows */
.seat-stub-info{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.seat-stub-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.seat-stub-cap{margin:0;color:var(--graphite)}
.seat-stub .seat-when{margin:0;font-size:clamp(1.4rem,1.1rem + 1.4vw,1.8rem)}
/* r7: the stub's own date on two clean lines (a picked slot's day, then its time) rather than one long dot-matrix
   run with the header's "·" glue -- each half stays whole, never wrapping mid-word on a narrow stub */
.seat-stub .seat-when span{display:block;white-space:nowrap}
/* the carbon: a hair of violet ink coming through from the signature pad (v16_ticket.js paints it), not a drawing
   surface of its own -- decorative and aria-hidden, like the rest of the stub */
.seat-carbon{flex:none;display:block;width:150px;height:54px}
.seat-mark{flex:none;margin:0;font-size:1.3rem;line-height:1;white-space:nowrap}
.seat-mark-a{font-family:var(--display);font-weight:800;color:var(--ink)}
.seat-mark-gt{font-family:var(--display);font-weight:800;color:var(--human);margin:0 .02em}
.seat-mark-b{font-family:var(--dots);font-weight:700;color:var(--ink)}

/* the punches: one per ticked line, at a fixed spot along the stub; the chad (::after) falls away once and stays
   gone. r5: the same die (--die-mask, set on :root by v16_night.css for "punch your time") as the webinar step-2
   tile punch, so tile, stub and PNG all agree -- a nib-shaped hole, not a plain dot. Three layers: the element
   itself is the ink ring (full size), ::before is the paper hole inset 1.5px inside it (permanent, reads as a hole
   punched clean through), ::after is the chad -- paper, full size, covering both until it falls away once */
.punch{position:absolute;width:13px;height:16px;background:var(--ink);pointer-events:none;
  -webkit-mask:var(--die-mask) center/contain no-repeat;mask:var(--die-mask) center/contain no-repeat}
.punch::before{content:"";position:absolute;inset:1.5px;background:var(--paper);
  -webkit-mask:var(--die-mask) center/contain no-repeat;mask:var(--die-mask) center/contain no-repeat}
.punch::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:var(--die-mask) center/contain no-repeat;mask:var(--die-mask) center/contain no-repeat}
.punch--0{left:14%;top:50%;translate:-50% -50%}
.punch--1{left:38%;top:50%;translate:-50% -50%}
.punch--2{left:62%;top:50%;translate:-50% -50%}
.punch--3{left:86%;top:50%;translate:-50% -50%}
@media (prefers-reduced-motion:no-preference){
  .fx-on .punch::after{animation:v16-chad-fall .6s cubic-bezier(.4,0,.7,1) both}
}
@media (prefers-reduced-motion:reduce){.punch::after{display:none}}
@keyframes v16-chad-fall{to{translate:14px 70px;rotate:220deg;opacity:0}}

/* ---------- r6 (coordinator): tear off the stub. At 4 of 4, "tear here" prints along the seam and the stub nudges
   once toward the tear. A drag away from the ticket peels it (a torn-fibre edge, the stamp parting at the seam);
   release past 55% flies it into the save and a fresh stub feeds in; short of that, it springs back. The save
   button plays the same tear for keyboard/mouse. Reduced motion: no drag physics, a 150ms fade stands in. ---------- */
.seat-tear{position:absolute;left:50%;top:-1.15em;translate:-50% 0;z-index:3;pointer-events:none;
  font-family:var(--script,cursive);color:var(--human);font-size:1.15rem;white-space:nowrap;
  clip-path:inset(0 100% 0 0);opacity:0}
@media (min-width:900px){.seat-tear{left:-.2em;top:50%;translate:-100% -50%;writing-mode:vertical-rl}}
.seat.can-tear .seat-tear{opacity:1}
.fx-on .seat.tear-shown .seat-tear{clip-path:inset(0 0 0 0);transition:clip-path .5s steps(14,end)}
@media (prefers-reduced-motion:reduce){.seat-tear{transition:none!important}.seat.can-tear .seat-tear{clip-path:inset(0 0 0 0)!important}}

@keyframes v16-stub-nudge{0%{rotate:0deg}40%{rotate:-6deg}100%{rotate:0deg}}
.fx-on .seat.tear-shown .seat-stub{animation:v16-stub-nudge .4s ease-out}
@media (prefers-reduced-motion:reduce){.fx-on .seat.tear-shown .seat-stub{animation:none!important}}

.seat-stub{touch-action:pan-y}  /* r7: the tear is sideways (dx) at every width; the page must still pan vertically,
  so a thumb that lands on the stub (before 4/4, or between drags) never blocks a normal scroll down the page */
.seat.can-tear .seat-stub{cursor:grab}
.seat-stub.tearing{will-change:transform;cursor:grabbing;transform-origin:center top}
.seat-stub.tearing::before,.seat-stub.tearing::after{
  -webkit-mask:var(--stamp-noise) 0 0/46px 46px;mask:var(--stamp-noise) 0 0/46px 46px;border-radius:0}

/* the stamp parting: while tearing, the original shows only its pass-side half and a clone in the stub shows the
   rest -- same box, same rotate, just clipped at the seam from opposite sides */
.seat.tearing .seat-stamp{clip-path:inset(-40% 50% -40% -40%)}
.seat-stamp-clone{position:absolute;left:50%;top:0;translate:-50% -50%;rotate:-8deg;pointer-events:none;z-index:4;
  display:inline-block;border:3px solid var(--human);color:var(--human);background:var(--paper);
  padding:6px 13px;font:800 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;
  -webkit-mask:var(--stamp-noise) 0 0/180px 180px;mask:var(--stamp-noise) 0 0/180px 180px;mix-blend-mode:multiply;
  clip-path:inset(-40% -40% -40% 50%)}

/* a fresh stub feeding in after the tear: the same stepped clip the whole card uses on first reveal, replayed
   on just the stub */
.seat-stub-refeed{animation:v16-ticket-feed .5s steps(6,end) backwards}
@media (prefers-reduced-motion:reduce){.seat-stub-refeed{animation:none!important}}

@media (min-width:900px){
  /* r5: 256px, not 230 -- room for the 190px carbon canvas plus its clamp(18px,2vw,24px) side padding at any width
     in range, with a few px to spare. Keep .seat-stamp's own calc(100% - Npx) in step: it centres on this same seam */
  .seat{max-width:1100px;display:grid;grid-template-columns:1fr 256px;align-items:stretch}
  .seat-stub.tearing{transform-origin:left center}
  .seat-stamp-clone{left:0;top:50%;translate:-50% -50%;clip-path:inset(-40% -40% -40% 50%)}
  .seat-pass{grid-column:1;grid-row:1}
  /* the bigger stamp again (mobile shrinks it for clearance from the stub strip below it); centred on the vertical
     seam. The stub's own info/mark are pushed to its ends (space-between, not centred) so the seam stays clear
     between them for the stamp to cross without landing on either */
  .seat-stamp{left:calc(100% - 256px);top:50%;padding:8px 16px;font-size:1.25rem}
  .seat-stub{grid-column:2;grid-row:1;margin-top:0;border-top:0;border-left:2px dashed var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;
    padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,24px);gap:16px}
  /* the carbon moves from "beside the date" (phone) to "under KEEP THIS" (desktop column) */
  .seat-stub-info{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:10px}
  .seat-carbon{width:190px;height:72px}
  .seat-stub::before,.seat-stub::after{left:-9px;right:auto}
  .seat-stub::before{top:-9px}
  .seat-stub::after{top:auto;bottom:-9px}
  .punch--0,.punch--1,.punch--2,.punch--3{left:50%}
  .punch--0{top:18%}
  .punch--1{top:39%}
  .punch--2{top:61%}
  .punch--3{top:82%}
}

/* v16 r2: the phone hunt dock (v16_dock.js). Sits inside the existing sticky bar (v2_shared.css .sticky) once the
   visible hunt document is a quarter on screen: the count of mistakes found on the left, the hunt's own toast
   echoed in the middle, one action on the right. No new colours or fonts: --ink, --accent (the pen's red, already
   lighting .hunt-bar i.on and .hunt-count b), --graphite, --paper, --sans, --mono, --display. */

.hunt-dock{display:none;align-items:center;gap:8px;width:100%;min-height:42px}
.sticky.is-hunt > .hunt-dock{display:flex}
.sticky.is-hunt > a.btn{display:none}
/* the bar itself is display:none past 720px (v2_components.css); the dock earns it back up to 900px */
@media (max-width:900px){.sticky.is-hunt{display:flex}}

/* left: the count, and under it the five segments. min-width guards against the longer button label (once a
   mistake is found) squeezing it smaller; the toast, not the count, is the one that yields first. */
.hd-count{flex:0 1 auto;min-width:80px}
.hd-n{margin:0;font:600 .7rem/1.3 var(--sans);letter-spacing:.005em;color:var(--graphite)}
.hd-n b{font-family:var(--display);font-weight:850;font-stretch:112%;font-size:1.6rem;line-height:1;color:var(--ink);
  margin-right:.16em;vertical-align:-.05em;transition:color .2s}
.hunt-dock.lit .hd-n b{color:var(--accent)}
.hd-bar{display:flex;gap:3px;margin-top:3px}
.hd-bar i{flex:none;box-sizing:border-box;width:18px;height:4px;border:1px solid var(--ink);background:var(--paper);border-radius:1px}
.hd-bar i.on{background:var(--accent);border-color:var(--accent)}
@keyframes hd-pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
.hd-bar i.pop{animation:hd-pop .16s ease}

/* middle: the hunt's own toast, one line, fades out first under pressure */
.hd-toast{flex:1 1 0;min-width:0;margin:0;font:500 .8rem/1.3 var(--mono);color:var(--graphite);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* right: one compact action, the bar's own primary button made small */
.hd-btn.btn{flex:none;min-height:auto;padding:10px 14px;font-size:.95rem;white-space:nowrap}

@media (max-width:359.98px){.hd-toast{display:none}}
@media (prefers-reduced-motion:reduce){.hd-bar i.pop{animation:none}}

/* v16 r2: the hunt ends on a decision (v16_decide.js). The contract's line under each document, as on the course's
   price quote: a red ×, the line, "Would you sign this?". Signing draws the brand's signature along it. */
.hunt-sign{margin-top:18px;display:grid;gap:10px}
.hsg-line{display:flex;align-items:flex-end;gap:10px;margin:0;max-width:440px;height:54px;border-bottom:1.5px solid var(--ink)}
.hsg-x{font:700 1.3rem/1 var(--sans);color:var(--human);padding-bottom:5px}
.hsg-ink{position:relative;flex:1;height:100%}
.hsg-ink > .mk{position:absolute;inset:0 0 2px;color:var(--human)}
.hsg-ink .mk svg{width:100%;height:100%;clip-path:inset(-20% 100% -20% -2%)}
.hunt-sign.signed .hsg-ink .mk svg{clip-path:inset(-20% -2% -20% -2%);transition:clip-path 1.05s cubic-bezier(.5,0,.3,1)}
.hsg-q{font:600 .74rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);padding-bottom:7px;white-space:nowrap}
.hunt-sign.signed .hsg-q{opacity:.45}
.hsg-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.hunt-sign.signed .hsg-btns{display:none}
/* sent back: the same stamp, in the pen's red, boxed like a rubber stamp */
.hunt-stamp--back{border:3px solid currentColor;padding:5px 10px 4px;rotate:-4deg;width:max-content;font:800 1rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
/* signed with mistakes left: the pen circles each one that went out */
.hunt .spot.missed{position:relative}
.hunt .spot.missed::before{content:"";display:block;position:absolute;inset:-9px -12px;background:var(--human);border:0;border-radius:0;pointer-events:none;
  -webkit-mask:var(--circle-mask) center/100% 100% no-repeat;mask:var(--circle-mask) center/100% 100% no-repeat}
@media (prefers-reduced-motion:no-preference){.fx-on .hunt .spot.missed::before{animation:v16-write .5s cubic-bezier(.5,0,.3,1) both}}
.hunt-verdict{margin:0;font-size:.98rem;line-height:1.5}
.hunt-verdict b{color:var(--human)}
.hunt-challenge{margin:0}
.hunt-challenge .link{text-align:left}
@media (max-width:560px){.hsg-line{max-width:none}.hsg-q{font-size:.66rem}}
/* the panel's text buttons read as the page's links, not as form buttons */
.hunt-verdict button.link,.hunt-challenge button.link{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:.2em}
.hunt-verdict button.link:focus-visible,.hunt-challenge button.link:focus-visible{outline:3px solid var(--human);outline-offset:3px}

/* v16 r3: AI checks the document (v16_scan.js). Tokens only: --paper, --aqua (the machine's turquoise - used only
   for its dot-matrix parts here), --human (the replay link's focus ring, matching the panel's own text-link
   buttons in v16_decide.css), --dots, --sans. No glow, no new colours; the trail is the one allowed gradient,
   and it's a dot pattern under a fading mask, not a colour gradient. */

/* the print head: one absolutely positioned element inside .doc (already position:relative), moved with a
   single compositor transform in JS. The bar is sized to sit at the very top of the wrapper's own 66px box, so
   translateY(0) starts the bar at the document's top edge; the trail hangs 60px above it inside that same box,
   so the two always travel together. */
.ai-sweep-head{position:absolute;left:0;right:0;top:-60px;height:66px;pointer-events:none;z-index:3;will-change:transform}
.ai-sweep-trail{position:absolute;left:0;right:0;top:0;height:60px;
  background-image:radial-gradient(circle,var(--aqua) 1.2px,transparent 1.6px);background-size:6px 6px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.ai-sweep-bar{position:absolute;left:0;right:0;bottom:0;height:6px;
  background-image:repeating-linear-gradient(90deg,var(--aqua) 0 3px,transparent 3px 7px)}

/* a printed flag beside an unfound mistake: small dot-matrix type, uppercase, revealed left to right by a
   steps() clip-path in JS. Positioned and clamped in JS; this rule is the backstop that keeps it from ever
   pushing the document (or the page) wider than it is. */
.ai-flag{position:absolute;z-index:4;display:block;max-width:calc(100% - 8px);overflow:hidden;
  white-space:nowrap;text-overflow:clip;pointer-events:none;background:var(--paper);border:1px solid var(--aqua);
  padding:1px 5px;font:700 .72rem/1.3 var(--dots);letter-spacing:.02em;text-transform:uppercase;color:var(--aqua)}
@media (max-width:760px){.ai-flag{font-size:.68rem}}

/* the replay link, offered once a visitor has found all five by hand: a text link under the stamp, not a
   button - the same reset the panel already uses for its own text-link buttons (.hunt-verdict/.hunt-challenge
   button.link, v16_decide.css), so it reads as the page's links do. */
.ai-replay{display:block;appearance:none;background:none;border:0;padding:0;margin:12px 0 0;font:inherit;
  font-weight:600;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--human);
  text-decoration-thickness:2px;text-underline-offset:.2em}
.ai-replay:focus-visible{outline:3px solid var(--human);outline-offset:3px}

/* phones: the source prints in the flow, on its own line after the struck value (v16_scan.js) */
.ai-flag.ai-flag--flow{position:static;display:block;width:max-content;max-width:100%;margin:5px 0 2px auto;white-space:normal;text-align:right}
.mail-body .ai-flag.ai-flag--flow{margin-left:0;text-align:left}
.doc td:has(> .ai-br),.doc dd:has(> .ai-br){flex-wrap:wrap}
.ai-br{flex-basis:100%;height:0;margin:0;padding:0}

/* v16 r3: the ink takes the button. On hover or finger-down, a drop of the pen's red spreads from under the
   pointer -- or, for a keyboard tab, from the centre -- shaped by the page's ink blot (--blot-mask, set on :root
   in v16_night.css). v16_ink.js only ever sets --bx/--by/--bs and two classes, and only on enter/press/focus,
   never per frame; every animated bit (the spread, the label's colour) lives here. */
.btn--primary,.btn--inv{position:relative;isolation:isolate;overflow:hidden}
.btn--primary .ink,.btn--inv .ink{position:absolute;left:var(--bx,50%);top:var(--by,50%);translate:-50% -50%;
  width:calc(var(--bs,58px) * 2.8);aspect-ratio:1;background:var(--human);
  -webkit-mask:var(--blot-mask) center/contain no-repeat;mask:var(--blot-mask) center/contain no-repeat;
  z-index:-1;scale:0;pointer-events:none;transition:scale .7s cubic-bezier(.35,.1,.25,1)}
/* a button whose own background is already the pen's red gets an ink-coloured drop instead, for contrast
   (v16_ink.js compares computed colours once per button and adds this class) */
.btn--primary.ink-on-red .ink,.btn--inv.ink-on-red .ink{background:var(--ink)}
.btn--primary.inking .ink,.btn--inv.inking .ink{scale:1;will-change:scale}
.btn--primary:focus-visible .ink,.btn--inv:focus-visible .ink{scale:1}
.btn--primary.inking,.btn--inv.inking,.btn--primary:focus-visible,.btn--inv:focus-visible{
  color:var(--stone);transition:color .2s ease}

@media (prefers-reduced-motion:reduce){
  /* no spreading: the drop snaps straight to its end state, but the label still changes colour */
  .btn--primary .ink,.btn--inv .ink{transition:none}
}

/* v16 r3: "Then stop." The no-spam promise becomes a schedule you can check: a postal cancellation mark on each
   email card as the timeline scrolls into view, and the pen's ink-blot full stop on the heading's last word once
   every mark has landed. Tokens only — --human (the pen's red), --ink, --dots, --blot-mask (already on :root, from
   v16_night.css) — no new colours. Built by v16_post.js, which adds/removes the .postmark spans and .post class. */

.timeline li{position:relative}  /* the postmark anchors to its own card, never the page (also keeps phones tidy) */

.postmark{
  position:absolute;top:10px;right:10px;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
  pointer-events:none;
  color:color-mix(in srgb,var(--human) 85%,transparent);
  mix-blend-mode:multiply;
  opacity:0;
  transform:rotate(-9deg) scale(1.5);
  transition:opacity .26s cubic-bezier(.2,1.3,.4,1),transform .26s cubic-bezier(.2,1.3,.4,1);
}
/* staggered 120ms apart, in card order */
.timeline li:nth-child(1) .postmark{transition-delay:0s}
.timeline li:nth-child(2) .postmark{transition-delay:.12s}
.timeline li:nth-child(3) .postmark{transition-delay:.24s}
.timeline li:nth-child(4) .postmark{transition-delay:.36s}
.timeline li:nth-child(5) .postmark{transition-delay:.48s}
.timeline.post .postmark{opacity:1;transform:rotate(-9deg) scale(1)}

.postmark-ring{
  flex:none;width:70px;height:70px;border-radius:50%;border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.postmark-time{
  font:900 .6rem/1.15 var(--dots);letter-spacing:.01em;text-transform:uppercase;
  color:currentColor;padding:0 4px;white-space:nowrap;
}
/* three wavy cancel lines beside the ring, the same red ink, shaped with a mask like the rest of the pen marks */
.postmark-lines{
  flex:none;width:30px;height:70px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M3 12 Q10 4 17 12 T29 12'/%3E%3Cpath d='M3 35 Q10 27 17 35 T29 35'/%3E%3Cpath d='M3 58 Q10 50 17 58 T29 58'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M3 12 Q10 4 17 12 T29 12'/%3E%3Cpath d='M3 35 Q10 27 17 35 T29 35'/%3E%3Cpath d='M3 58 Q10 50 17 58 T29 58'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:560px){
  .postmark{top:6px;right:6px;gap:3px}
  .postmark-ring{width:56px;height:56px}
  .postmark-time{font-size:.5rem}
  .postmark-lines{width:22px;height:56px}
}

@media (prefers-reduced-motion:reduce){
  .postmark{transition:none}  /* stamped in place, no landing animation */
}

/* the heading's final word gets the pen's ink-blot full stop once the last mark lands */
.ty-stop{
  display:inline-block;width:.32em;height:.32em;margin-left:.08em;vertical-align:baseline;
  background:var(--ink);
  -webkit-mask:var(--blot-mask) center/100% 100% no-repeat;mask:var(--blot-mask) center/100% 100% no-repeat;
  animation:v16-post-stop .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes v16-post-stop{
  0%{transform:scale(0)}
  60%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .ty-stop{animation:none}  /* stamped, not swelled in */
}

/* coordinator (r3): the marks never sit on the words. Desktop cards keep a band under their text for the postmark;
   phone rows keep their text clear of the mark on the right */
@media (min-width:561px){
  #ty-next + .timeline li{padding-bottom:88px}
  #ty-next + .timeline .postmark{top:auto;bottom:6px;right:6px}
}
@media (max-width:560px){
  #ty-next + .timeline li{padding-right:118px}
}

/* coordinator (r4): readable marks and plain send times */
.postmark-time{font:700 .66rem/1.15 var(--mono)!important;letter-spacing:.02em}
.postmark-ring{-webkit-mask:var(--stamp-noise) 0 0/180px 180px;mask:var(--stamp-noise) 0 0/180px 180px}
.pm-when{display:block;margin-top:6px;font:500 .78rem/1.3 var(--mono);color:var(--graphite)}
/* the list counts what's left: as many columns as emails still to come (a hidden past send leaves no gap) */
@media (min-width:901px){#ty-next + .timeline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* phones: the date on the readable mark needs a ring a little bigger than 56px */
@media (max-width:560px){.postmark-ring{width:66px;height:66px}.postmark-time{font-size:.54rem!important;letter-spacing:0}.postmark-lines{height:66px}}

/* r5 (creative): postmarks that read as postmarks: a bigger ring, the date small on top and the time big in mono,
   and three long wavy cancel bars inked through the stamp's noise */
.postmark-ring{width:72px;height:72px}
.postmark-time .pm-d{display:block;font:700 .52rem/1.1 var(--mono);letter-spacing:-.02em}
.postmark-time .pm-t{display:block;font:700 .72rem/1.1 var(--mono);letter-spacing:0}
.postmark-lines{width:56px;height:72px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 18 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3Cpath d='M2 36 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3Cpath d='M2 54 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,var(--stamp-noise) 0 0/180px 180px;-webkit-mask-composite:source-in;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 18 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3Cpath d='M2 36 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3Cpath d='M2 54 q6.5 -3.2 13 0 t13 0 t13 0 t13 0'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,var(--stamp-noise) 0 0/180px 180px;mask-composite:intersect}
@media (max-width:560px){.postmark-ring{width:64px;height:64px}.postmark-lines{width:40px;height:64px}}

/* v16 r3: "Check this page" — a proofing pass.
   v13_sections.css already gives every [data-src] an outline and a ::after label the instant html.checking
   lands ("✓ "/"? " + attr(data-src), popped in all at once). This makes that reveal print like someone
   proofing the screen instead of flashing every label on together: the label wipes in left to right, then
   the pen ticks the claim (or, if it's data-src-open, circles it) — staggered by --k, the claim's print
   order (set in v16_proof.js: 0, 1, 2… top to bottom for whatever is on screen, a big number for the rest).
   No js-motion (.fx-on absent — ?shot=1 or prefers-reduced-motion) and it stays exactly as today, mark
   included, just with no wipe and no stagger. No scroll listener: only the two small pseudo-elements
   animate (clip-path), and off-screen claims get a --k large enough to have already finished. */

/* keep the ::after/::before boxes alive outside .checking too (empty, fully clipped): turning checking on
   then becomes a transition on a box that already existed, not a fresh element with nothing to animate from */
[data-src]::after,[data-src]::before{content:"";clip-path:inset(0 100% 0 0)}

/* checking, no motion: v13's label, unchanged, plus the mark — both shown at once, no wipe, no stagger */
.checking [data-src]::after,.checking [data-src]::before{clip-path:inset(0 0 0 0)}
.checking [data-src]::before{
  position:absolute;top:-.5em;right:-.5em;z-index:7;pointer-events:none;
  font-size:1rem;width:.9em;height:.9em;background:var(--human);
  -webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
.checking [data-src-open]::before{-webkit-mask-image:var(--circle-mask);mask-image:var(--circle-mask)}

/* checking + motion allowed: replace v13's pop-in with the proofing pass — label first, the mark .34s
   (its own wipe) later, so the tick lands the moment the label finishes printing. Gated on .proof-ready,
   not just .checking: v16_proof.js only adds that class once every claim's --k is set for this pass. If it
   were keyed on .checking alone, the very act of reading layout to compute --k would force the style
   recalc that starts this transition — before --k had been written — locking every claim to the var(--k,40)
   fallback delay instead of its own place in the pass (every label printing together, staggered by nothing). */
.fx-on.checking.proof-ready [data-src]::after{animation:none;transition:clip-path .34s steps(14,end) calc(var(--k,40) * 60ms)}
.fx-on.checking.proof-ready [data-src]::before{transition:clip-path .3s steps(6,end) calc(var(--k,40) * 60ms + .34s)}

/* belt and braces: if .fx-on ever landed on a reduced-motion visit, still collapse to the static reveal */
@media (prefers-reduced-motion:reduce){
  .fx-on.checking.proof-ready [data-src]::after{animation:v13-pop .35s cubic-bezier(.2,1.5,.4,1) both;transition:none}
  .fx-on.checking.proof-ready [data-src]::before{transition:none}
  .fx-on.checking.proof-ready [data-src] > .src-link{transition:none}
}

/* ---- every source one click away: a claim with data-href gets a real <a> (inserted by v16_proof.js) in
   place of the plain pill label — pen-underlined like the page's .link, not filled, so it reads as a link
   rather than a stamp. Same box, same wipe-in pass as the pill it replaces; the tick/circle mark (::before)
   is untouched, verified and not-verified claims alike still get one. ---- */
.checking [data-src][data-href]::after{content:none}
/* max-width:0 + overflow:hidden do the real containing — clip-path alone only clips paint, not the box's
   own (unwrapped) layout width, so a long "label · domain ↗" would still have pushed out page scrollWidth
   while sitting there invisible, well before anyone ever switches checking on */
[data-src] > .src-link{position:absolute;left:-5px;top:calc(100% + 5px);z-index:6;display:inline-block;
  visibility:hidden;overflow:hidden;max-width:0;padding:0;background:var(--paper);color:var(--ink);
  font:500 .62rem/1.2 var(--mono);font-stretch:normal;letter-spacing:.02em;
  text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:4px;
  clip-path:inset(0 100% 0 0)}
span[data-src] > .src-link{top:calc(100% + 2px)}
[data-src] > .src-link:focus-visible{outline:3px solid var(--human);outline-offset:2px}
.checking [data-src] > .src-link{visibility:visible;overflow:visible;max-width:min(66vw,300px);padding:2px 5px 1px;clip-path:inset(0 0 0 0)}
.fx-on.checking.proof-ready [data-src] > .src-link{transition:clip-path .34s steps(14,end) calc(var(--k,40) * 60ms)}
/* the same dark cards that swap the dashed outline to --aqua (v13_sections.css) would otherwise show a
   white-paper chip on ink: match the card's own colours instead (--human is already --signal in here,
   inherited, so the underline needs no separate override) */
.ink .checking [data-src] > .src-link,.checking .ink [data-src] > .src-link,
.checking .receipt:first-child [data-src] > .src-link,.checking .wrong .two-col [data-src] > .src-link{background:var(--ink);color:var(--stone)}

/* ---- the tally: printed once per checking pass, near "Check this page". Empty (checking off, or no page
   text yet) collapses it entirely, so it never sits there as an empty box. ---- */
.proof-tally{position:fixed;right:18px;bottom:72px;z-index:79;max-width:260px;padding:8px 10px;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font:500 .66rem/1.4 var(--mono)}
.proof-tally:empty{display:none}
@media (max-width:900px){
  /* .check-page itself is hidden at this width (v13_sections.css) — fixed here would float with nothing to
     sit next to and risk sitting over content, so on phones it prints in flow instead, wherever it lands at
     the end of the document, one thin rule and no shadow */
  .proof-tally{position:static;display:block;max-width:none;margin:14px 16px 0;padding:10px 0 0;
    border-width:1.5px 0 0;box-shadow:none}
}

/* v16 r5: the manager's letter folds into its envelope.
   The envelope (.env) is built once by v16_env.js, at load, and reused; only the folding clones
   (.fold-stack) are thrown away after each run. At rest it's .env--waiting: an open flap drawn as a V in
   dashed graphite (.env-flap-wait), a dotted graphite address line (.env-addr-wait) and an empty dashed
   stamp box (.env-stamp-wait) - all three plain 2D, no WAAPI, just shown/hidden with that class. Once the
   letter arrives, .env--waiting comes off and the real, animated flap/address/stamp (built fresh each run
   by v16_env.js) take over: flap closes, address is wiped in in the pen's hand, a perforated stamp drops
   in. No postmark: nothing was sent, it's on the clipboard.
   Tokens only: --paper, --ink, --human (the pen's red), --graphite, --script, --dots. The stamp look is
   built the same way as --stamp-noise (v16_night.css) - an inline SVG mask, here punched with holes
   (9px spacing) instead of noise.
   Reduced motion: .env--done shows the finished look straight away, no WAAPI at all. */

#employer{
  position:relative;
  z-index:0;             /* its own stacking context, so the fold/flap z-indexes below never reach past it */
  perspective:1400px;
}

/* ---------- the envelope ---------- */
.env{
  position:relative;
  z-index:1;
  transform-style:preserve-3d;   /* lets .env-flap's own rotateX share #employer's perspective */
  pointer-events:none;
  width:260px;
  height:165px;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
@media (min-width:900px){
  .env{width:300px;height:190px}
}

/* the V flap: a clip-path triangle hinged at the top edge, rotated shut by v16_env.js (WAAPI, rotateX
   180deg->0deg). It paints behind the address and stamp (DOM order), so it only ever reads as the closed
   seam and never covers them, whatever the geometry. */
.env-flap{
  position:absolute;
  inset:0;
  clip-path:polygon(0 0,100% 0,50% 56%);
  background:var(--paper);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transform-origin:50% 0;
  transform:rotateX(180deg);     /* open/hidden until v16_env.js closes it - WAAPI promotes the layer for its own run */
}
.env-flap-l,.env-flap-r{
  position:absolute;
  top:0;
  height:2px;
  background:var(--ink);
}
.env-flap-l{left:0;width:160px;transform-origin:0 50%;transform:rotate(35deg)}
.env-flap-r{right:0;width:160px;transform-origin:100% 50%;transform:rotate(-35deg)}
@media (min-width:900px){
  .env-flap-l,.env-flap-r{width:184px}
}
.env--done .env-flap{transform:rotateX(0deg)}

/* the address, in the pen's hand; wiped in left to right by v16_env.js (clip-path), never drawn stroke by
   stroke - this is a label, not a signature */
.env-addr{
  position:absolute;
  left:16px;
  bottom:16px;
  margin:0;
  max-width:none;
  font-family:var(--script);
  font-weight:400;
  font-style:normal;
  font-stretch:100%;
  letter-spacing:0;
  text-transform:none;
  color:var(--human);
  font-size:1.3rem;
  line-height:1;
  white-space:nowrap;
  transform:rotate(-2deg);
  transform-origin:0 100%;
  clip-path:inset(0 100% 0 0);   /* hidden until wiped in */
}
@media (min-width:900px){
  .env-addr{left:22px;bottom:24px;font-size:1.55rem}
}
.env--done .env-addr{clip-path:inset(0 0 0 0)}

/* the stamp: a perforated rectangle - real holes cut with an SVG mask (radial, one per notch), not a flat
   dashed edge - showing "brains>bots" in --dots, the ">" small and in the pen's red. Drops in last (scale
   1.4->1, v16_env.js). */
.env-stamp{
  position:absolute;
  top:8px;
  right:8px;
  width:60px;
  height:44px;
  background:var(--paper);
  -webkit-mask:var(--env-stamp-mask) center/100% 100% no-repeat;
  mask:var(--env-stamp-mask) center/100% 100% no-repeat;
  filter:drop-shadow(1px 1px 0 color-mix(in srgb,var(--ink) 30%,transparent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--dots);
  font-weight:700;
  font-size:6px;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  opacity:0;
  transform:scale(1.4);
}
.env-stamp-gt{color:var(--human);font-weight:800;margin:0 .04em}
.env--done .env-stamp{opacity:1;transform:scale(1)}

:root{
  --env-stamp-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44'%3E%3Cmask id='p'%3E%3Crect width='60' height='44' fill='%23fff'/%3E%3Ccircle cx='3' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='12' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='21' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='30' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='39' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='48' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='57' cy='0' r='3' fill='%23000'/%3E%3Ccircle cx='3' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='12' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='21' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='30' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='39' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='48' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='57' cy='44' r='3' fill='%23000'/%3E%3Ccircle cx='0' cy='4' r='3' fill='%23000'/%3E%3Ccircle cx='0' cy='13' r='3' fill='%23000'/%3E%3Ccircle cx='0' cy='22' r='3' fill='%23000'/%3E%3Ccircle cx='0' cy='31' r='3' fill='%23000'/%3E%3Ccircle cx='0' cy='40' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='4' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='13' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='22' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='31' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='40' r='3' fill='%23000'/%3E%3C/mask%3E%3Crect width='60' height='44' fill='%23fff' mask='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- the envelope at rest (.env--waiting, v16_env.js adds this at load, before any click): a flap
   drawn open as a V in dashed graphite, a blank dotted address line, an empty dashed stamp box. Plain 2D,
   no WAAPI - just shown while .env--waiting is on .env and hidden the instant it comes off, which is also
   the moment the real .env-flap/.env-addr/.env-stamp above start closing. Geometry matches the real flap's
   seam lines and stamp box exactly, so the hand-off is seamless. ---------- */
.env-flap-wait,.env-addr-wait,.env-stamp-wait{display:none}
.env--waiting .env-flap-wait,.env--waiting .env-addr-wait,.env--waiting .env-stamp-wait{display:block}

.env-flap-wait{position:absolute;inset:0}
.env-flap-wait i{position:absolute;top:0;height:0;border-top:2px dashed var(--graphite)}
.env-flap-wait i:first-child{left:0;width:160px;transform-origin:0 0;transform:rotate(35deg)}
.env-flap-wait i:last-child{right:0;width:160px;transform-origin:100% 0;transform:rotate(-35deg)}
@media (min-width:900px){
  .env-flap-wait i{width:184px}
}

.env-addr-wait{position:absolute;left:16px;bottom:16px;width:120px;height:0;border-bottom:2px dotted var(--graphite)}
@media (min-width:900px){
  .env-addr-wait{left:22px;bottom:24px;width:150px}
}

.env-stamp-wait{position:absolute;top:8px;right:8px;width:60px;height:44px;box-sizing:border-box;border:1.5px dashed var(--graphite)}

/* ---------- the fold: three clipped clones of #mgr-doc (same .mgr-doc class, so identical paper/border/
   type), stacked exactly over it, that hinge shut in 3D and fly into the envelope (v16_env.js). Each third's
   clip-path is fixed; WAAPI only ever drives rotateX on the thirds and, on the wrapper, translate+scale -
   transforms and opacity throughout, nothing that touches layout, and only ever started from a click. ---------- */
.fold-stack{
  position:absolute;
  z-index:5;
  pointer-events:none;
  transform-style:preserve-3d;   /* shares #employer's perspective with its children below */
}
.fold-third{
  position:absolute;
  inset:0;
  backface-visibility:visible;
}
.fold-third--top{clip-path:inset(0 0 66.667% 0);transform-origin:50% 33.333%}
.fold-third--mid{clip-path:inset(33.333% 0 33.333% 0)}
.fold-third--bottom{clip-path:inset(66.667% 0 0 0);transform-origin:50% 66.667%}
/* past its own half-turn a flap is edge-on to the camera; v16_env.js adds .turned right then, and this
   hides only the letter's text (its direct children), leaving .mgr-doc's own paper background, ink border
   and shadow on .fold-third showing through as blank paper - two creases, the ink border, no text */
.fold-third.turned > *{visibility:hidden}

/* ---------- layout: the letter and its envelope side by side from 900px. #employer normally shares half of
   .costs's two-up grid (v8_final.css); at 900px it takes the full row instead, so there's room for both,
   and becomes its own 2-column grid with the label and the copy row spanning across. Below 900px .costs is
   already a single column, and .env - inserted right after #mgr-doc - simply stacks under the letter with
   no extra rule needed. ---------- */
@media (min-width:900px){
  #employer{
    grid-column:1/-1;
    max-width:920px;
    grid-template-columns:minmax(0,1fr) minmax(280px,300px);
    column-gap:clamp(24px,3vw,40px);
    align-items:start;
  }
  #employer > .mono,#employer > .mgr-row{grid-column:1/-1}
}

/* coordinator (r5): the stamp reads as a stamp: a pale red paper with an ink frame inside the perforation, and a
   legible brains>bots (it was paper on paper at 6px) */
.env-stamp{background:color-mix(in srgb,var(--human) 10%,var(--paper));box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--human) 10%,var(--paper)),inset 0 0 0 6.5px color-mix(in srgb,var(--ink) 45%,transparent);font-size:8px}

/* v16 r4: the quote prints on continuous paper.
   v16_paper.js adds two <i>, .feed--l and .feed--r, inside #pricing .offer (the Cohort quote card only — Starter
   and Complete are plain .alt cards and never get this). Each strip runs 52px taller than the card: a column of
   round sprocket holes over a faint dashed tear line, just inside the 2px ink border.
   First time the card is 30% in view (40% on phones), .paper-armed + .feeding drive one clip-path reveal (the
   card, top to bottom) and one translate reveal (the two strips) in the same nine stepped frames, like a printer
   feeding a sheet. Both are plain transitions, not animation-timeline: v14_more.css already drives .offer's own
   "placed on the desk" entrance off animation-timeline:view(), and a second animation-name on the same element
   would just replace the first. Once fed, .paper-armed is dropped: with no rule left setting it, clip-path (and
   the strips' translate) fall back to their own initial values — nothing stays clipped for the page's own
   checking pass or the custom cursor to paint through, and getComputedStyle(offer).clipPath reads "none".
   Reduced motion: gated by .fx-on like the rest of the page's motion (v5_fx.js only adds it when the visitor
   hasn't asked for less motion), so with no .fx-on the card and strips just sit at rest, already printed — plus
   a belt-and-suspenders media query below, in case the OS preference flips after fx-on was decided.
   Countersigned: only a real ink stamp tears the right strip (v16_paper.js listens for v16_night.js's bob:stamp
   and checks its pencil flag — Pencilled in is a draft and never tears); .torn wins over the feed-in rule below
   via :not(.torn), so a stamp mid-print still tears cleanly instead of losing to the reveal's own transition. */
#pricing .offer{padding-left:36px;padding-right:36px}  /* clears the 20px strip (14px on phones) plus its tear line */
#pricing .offer :is(.feed--l,.feed--r){position:absolute;top:-26px;bottom:-26px;width:20px;  /* coordinator: a short overhang, clear of the heading above and the cards below */
  z-index:1;pointer-events:none;
  background-color:var(--paper);
  background-image:radial-gradient(circle at center,var(--stone) 0 3.4px,color-mix(in srgb,var(--ink) 40%,transparent) 3.4px 4.2px,transparent 4.4px);
  background-repeat:repeat-y;background-size:100% 12px;background-position:center top}
#pricing .offer .feed--l{left:0;border-right:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
#pricing .offer .feed--r{right:0;border-left:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);
  transition:translate .45s ease .3s,rotate .45s ease .3s,opacity .45s ease .3s}  /* the tear; steps below win first, until .paper-armed lets go */
#pricing .offer .feed--r.torn{translate:12px 48px;rotate:6deg;opacity:0}

.fx-on #pricing .offer.paper-armed :is(.feed--l,.feed--r):not(.torn){translate:0 -180px;transition:translate 1s steps(9,end)}
.fx-on #pricing .offer.paper-armed.feeding :is(.feed--l,.feed--r):not(.torn){translate:0 0}

.fx-on #pricing .offer.paper-armed{clip-path:inset(0 0 100% 0);transition:clip-path 1s steps(9,end)}
.fx-on #pricing .offer.paper-armed.feeding{clip-path:inset(0)}

@media (max-width:560px){
  #pricing .offer :is(.feed--l,.feed--r){width:14px}
  #pricing .offer .feed--l{left:14px}
  #pricing .offer .feed--r{right:14px}
}

@media (prefers-reduced-motion:reduce){
  #pricing .offer{clip-path:none!important;transition:none!important}
  #pricing .offer .feed--l,#pricing .offer .feed--r{transition:none!important}
}

/* v16_monday: "Sign your Monday" card in #sorter (see v16_monday.js). Reuses .card for the paper background, ink
   border and offset shadow; adds only what's new — the plan line, the signing pad over a dashed graphite rule, the
   two actions and the email capture. No new colours: --paper/--ink/--human/--graphite/--stone/--mono/--sans only. */

.monday-card{max-width:640px;margin:28px 0 0}

/* entrance: paper feeding out of a printer, gated by v16_monday.js on .fx-on + allowed motion; otherwise it just appears */
.fx-on .monday-card.monday-enter{animation:monday-feed .5s steps(8) both}
@keyframes monday-feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

.monday-label{margin:0 0 12px}
.monday-plan{margin:0;font:700 clamp(1.05rem,.95rem + .4vw,1.28rem)/1.4 var(--sans);letter-spacing:-.01em;max-width:56ch}

/* the signature line: an "x", a canvas pad over a dashed rule, then Clear once there's ink */
.monday-sig{display:flex;align-items:flex-end;gap:14px;margin:20px 0}
.monday-sig-x{flex:none;font:700 1.5rem/1 var(--sans);color:var(--graphite);padding-bottom:11px}
.monday-pad-wrap{position:relative;flex:1 1 auto;min-width:120px;height:64px}
.monday-pad-wrap::before{content:"";position:absolute;left:0;right:0;bottom:14px;border-bottom:2px dashed var(--graphite)}
.monday-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.monday-pad-hint{position:absolute;left:2px;bottom:17px;font:italic 500 .92rem/1 var(--sans);color:var(--graphite);pointer-events:none}
.monday-clear{flex:none;padding-bottom:11px;font-size:.85rem}

/* two actions: side by side on desktop, stacked full-width on phones */
.monday-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
@media (max-width:560px){
  .monday-actions{flex-direction:column;align-items:stretch}
  .monday-actions .btn,.monday-actions .link{width:100%;text-align:center}
}

.monday-emailform{margin-top:16px;max-width:440px}
.monday-emailform .co-done{margin:0;font-weight:700}

.monday-foot{margin:18px 0 0;font-size:.85rem;max-width:60ch}

/* v17_foot: the footer's "bots" wakes up once the machine has printed it (v17_foot.js). The real glyphs are hidden
   (color:transparent) once a particle canvas is drawn in their place - the box, the scanline mask and the layout
   are untouched, so nothing shifts and nothing new is drawn outside the machine's existing look. No new colours:
   the canvas paints in --aqua, the same ink .fm-b always used. The red > leans toward the pointer on desktop. */
.fm-b{position:relative;display:inline-block}
.fm-b.fm-live{color:transparent}
.fm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.fm-gt{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.3,1)}

/* v17 print: the FAQ prints its answer like a dot-matrix printer when opened (both pages); the course page's Reddit
   complaint prints in word by word, then the red pen underlines and circles its three sore points. */

/* ---------- FAQ: the answer prints top to bottom, a print head riding the reveal (v17_print.js) ---------- */
.lg-a{position:relative}
.lg-ph{position:absolute;left:0;right:0;top:0;height:2px;background:var(--aqua);pointer-events:none}
.lg-ph::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1px;opacity:.4;
  background-image:radial-gradient(circle,var(--aqua) 0 .8px,transparent .8px);background-size:4px 100%;background-repeat:repeat-x}

/* ---------- the complaint: words print in, then the pen marks $500 to $2000 / obviously ChatGPT output / a PDF of prompts ---------- */
.tq-w{opacity:0;transition:opacity .15s linear}
.think-q.tq-go .tq-w{opacity:1}
.think-q.tq-instant .tq-w{transition:none}
.tq-caret{display:inline-block;width:1.5px;height:1em;margin-left:1px;background:currentColor;vertical-align:text-bottom;animation:v17-caret 1s steps(1,jump-none) infinite}
@keyframes v17-caret{50%{opacity:0}}
/* the marks live in one overlay over the whole card, each positioned in JS from its own line-fragment rects (a
   phrase can wrap), not from the phrase span's own (possibly multi-line) box - see v17_print.js layoutMarks() */
.think-q.ink{position:relative}
.tq-mark-layer{position:absolute;inset:0;overflow:visible;pointer-events:none}
.tq-mark{position:absolute;overflow:visible}
.tq-mark path{fill:none;stroke:var(--human);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tq-mark path.draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .38s ease-out}
.tq-mark path.draw.go{stroke-dashoffset:0}

/* v17_thanks: two small flourishes on the webinar thank-you view. No new colours - the plane's note is paper on
   ink (the same pair as .card/.vq), its fold line graphite, the tick's ink blot the pen's red already used by
   .mk (color:var(--human), v2_shared.css). Both elements only ever exist when v17_thanks.js creates them, and it
   skips creating either under reduced motion / ?shot=1, so the @media block below is a defensive backstop only. */

/* ---------- 1. "Copy the link" sends a paper plane ---------- */
.ty-plane{position:fixed;pointer-events:none;z-index:200}
.ty-plane-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--paper);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  clip-path:polygon(100% 50%,100% 100%,0% 100%,0% 50%,0% 0%,100% 0%)}
.ty-plane-url{color:var(--ink)}
.ty-plane-fold{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.ty-plane-fold line{stroke:var(--graphite);stroke-width:1.5px}

/* ---------- 2. the optional question: the pen ticks your answer ---------- */
.ty-tick-blot{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--human);
  pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .ty-plane,.ty-tick-blot{display:none}
}

/* v17_course: two pen moments built at runtime by v17_course.js (neither exists in course_v2.body.html).
   Both reuse the brand's own .mk draw mechanics (v5_brand.css): a .mk--tick[data-draw] wipes in via clip-path
   when .on is added; a .mk--circle[data-draw] sweeps in via its --sweep conic-gradient mask. This file only
   sizes and places the new marks; v17_course.js builds the DOM and times the .on classes. */

/* ---------- 1. "7 days to decide": seven days on paper ---------- */
.signoff-strip{padding:0 clamp(22px,3vw,40px)}
.signoff-days{display:grid;grid-template-columns:repeat(7,34px);gap:8px;margin:18px 0 0;padding:0}
.signoff-day{position:relative;width:34px;height:34px;border:1.5px solid var(--signoff-ink,var(--ink))}
.signoff-num{position:absolute;top:2px;left:3px;font:500 .62rem/1 var(--mono);color:var(--signoff-ink,var(--ink))}
.signoff-day .mk{position:absolute}
.signoff-day .mk--tick{left:6px;right:5px;top:11px;bottom:6px;width:auto;height:auto}
.signoff-day .mk--circle{left:-26%;width:152%;top:-26%;height:152%}
.signoff-cap{margin:12px 0 0;color:var(--graphite)}

/* ---------- 2. the comparison table: the pen circles "Cohort", then ticks every included row ---------- */
.qd .qd-yes{position:relative}
.qd-yes-mk{position:absolute;left:12px;top:15px;width:26px;height:15px}
.qd-pick-word{position:relative;display:inline-block}
.qd-pick-mk{position:absolute;left:-14%;width:128%;top:-42%;height:184%}

/* ---------- r1 (CRO round, panel_course): the course page's new and moved blocks, scoped to the course ---------- */
#course del.hype-line{text-decoration:none}  /* the struck eyebrows are real <del>s now; the pen draws the strike */
#course .course-promise{max-width:22ch}
#course .course-promise .sig-word--wrong{display:inline-block;vertical-align:-.45em;margin:-.7em 0 -.7em .15em;transform:rotate(-3deg)}  /* "wrong." in the webinar's hand */
#course .course-promise .sig-word--wrong > .mk{width:4.4em}
#course .more-nudge{margin:0;font-weight:700;max-width:56ch}
#course .think-own{margin:0;font-weight:700}
#course .prog-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px;padding-top:20px;border-top:2px solid var(--ink)}
#course .prog-buy p{margin:0;flex-basis:100%}
#course .sorter-real{margin-top:14px;max-width:70ch;font-size:.95rem;color:var(--graphite)}
#course .ba-module{margin:18px 0 0;font-weight:700}
#course .fit .lg-sub{margin:0;font-weight:800}
#course .chooser{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;max-width:72ch}
#course .chooser li{position:relative;padding-left:1.5em;line-height:1.45}
#course .chooser li::before{content:"→";position:absolute;left:0;color:var(--human)}
#course .of-plus{margin:12px 0 0;font-size:.9rem}
#course .cohort-proof{display:grid;gap:10px}
#course .cohort-proof .sub-h,#course .cohort-proof p{margin:0}
#course .ask-first{font-weight:700}
#course .sticky.yield-p{transform:translateY(calc(100% + 8px));pointer-events:none}
/* the teacher, until the photo exists (live): no empty photo column; the story left, the record right (as the webinar) */
@media (min-width:901px){
  .no-proto #course .teacher--full{grid-template-columns:minmax(0,1fr)}
  .no-proto #course .teacher--full .t-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:start}
}

/* ---------- block 1, the hero (2026-10-02): the button and the risk line fit a laptop's first screen ---------- */
@media (min-width:901px){
  /* the mark shrinks only when the screen is short, never below the struck phrases behind it;
     ponytail: 500px is about the rest of the hero, re-measure if its copy grows */
  #course .hero2--wall .wall-h1{--h1:clamp(5.5rem,min(19cqw,23svh,calc((100svh - 500px) / 1.72)),14rem)}
  #course .course-promise{max-width:none}
  #course .course-promise .cp-a{display:block}  /* two lines: the machine's half, then the person's */
  #course .wall-band .wall-what{max-width:62ch}
}
@media (min-width:901px) and (max-height:820px){  /* a laptop's browser window (1366x650, 1280x600): tighter rhythm */
  #course .wall-title{gap:clamp(10px,2.2svh,20px)}
  #course .wall-band .wall-what{margin-top:0}
}
#course .stage-top [data-utc-day]{white-space:nowrap}  /* "[Sun 1 Nov]" never splits over two lines */

/* ---------- WP-HERO ---------- */
/* 2026-10-03, the owner: "too much text in the hero", "the backing under the letters is not transparent", "it stutters",
   and the price card "must be far more visual".
   1. The wall (.wall-hype, no longer .hype: v11_hero.js Hype() and the falling phrases of v14_more.css leave it alone).
   20 struck claims, 5 rows, no copies, no SVGs: the strike is the brand's strike mark as a CSS mask on ::after, drawn
   once. Each row's track drifts a few per cent and back (transform only, so the compositor runs it: no script, no style
   recalc per frame) and stops while the hero is off screen (.idle, v11_hero.js). The wall recedes where the text sits
   (a soft radial mask), so the phrases show around and between the letters without a box behind them. */
#course .wall-band > .wall-hype{position:absolute;inset:clamp(96px,14svh,150px) 0 0;z-index:0;display:flex;flex-direction:column;justify-content:space-around;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 50%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.5) 58%,#000 100%),linear-gradient(180deg,#000 0 58%,rgba(0,0,0,.5) 86% 100%);-webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 50% 52% at 50% 50%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.5) 58%,#000 100%),linear-gradient(180deg,#000 0 58%,rgba(0,0,0,.5) 86% 100%);mask-composite:intersect}  /* and quieter again under the small print */
#course .wall-hype .hype-row{display:flex;justify-content:center;white-space:nowrap;line-height:1}
#course .wall-hype .hype-track{display:flex;flex:none;will-change:transform}
#course .wall-hype .hp{flex:none;font-size:clamp(2.4rem,min(8vw,12svh),9rem);color:var(--ink);-webkit-text-stroke:3px color-mix(in srgb,var(--stone) 30%,transparent);paint-order:stroke fill;transition:none}
#course .wall-hype .hp::after{content:"";position:absolute;left:.3em;right:.3em;top:40%;height:.24em;background:var(--signal);opacity:.55;
  -webkit-mask:var(--strike-mask) 0 0/100% 100% no-repeat;mask:var(--strike-mask) 0 0/100% 100% no-repeat}
#course .wall-hype .hype-row:nth-child(2n) .hp::after{transform:scaleY(-1)}  /* the pen's stroke the other way on every other row */
@media (prefers-reduced-motion:no-preference){
  #course .wall-hype .hype-track{animation:wph-drift 52s ease-in-out infinite alternate}
  #course .wall-hype .hype-row:nth-child(2n) .hype-track{animation-name:wph-drift-r;animation-duration:61s}
  #course .wall-hype .hype-row:nth-child(3) .hype-track{animation-duration:70s}
  #course .wall-hype .hype-row:nth-child(5) .hype-track{animation-duration:58s}
  #course .wall-band.idle .wall-hype .hype-track{animation-play-state:paused}
}
@keyframes wph-drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}
@keyframes wph-drift-r{from{transform:translate3d(3%,0,0)}to{transform:translate3d(-3%,0,0)}}
@media (max-width:600px){#course .wall-hype .hp{font-size:clamp(2.2rem,11vw,3rem);-webkit-text-stroke-width:2px}}
/* 2. Less text: one top line, the headline and the promise carry the screen, one line of what it is, two facts. */
#course .stage-top{flex-wrap:nowrap;white-space:nowrap;color:color-mix(in srgb,var(--stone) 86%,transparent)}
#course .wall-band .wall-what{max-width:none;background:none;box-shadow:none;text-shadow:0 0 .5em var(--ink),0 0 .16em var(--ink)}
#course .wall-band .wall-micro{font-size:max(13px,.82rem);letter-spacing:.08em;color:color-mix(in srgb,var(--stone) 88%,transparent)}
#course .wall-band .course-promise{text-shadow:0 0 .5em var(--ink),0 0 .16em var(--ink)}
#course .wall-band .course-promise .sig-word{text-shadow:none}
@media (min-width:901px){
  /* about 430px of the screen is the rest of the hero now (was 500): the headline takes what the old copy gave back */
  #course .hero2--wall .wall-h1{--h1:clamp(5.5rem,min(19cqw,25svh,calc((100svh - 430px) / 1.72)),15rem)}
  #course .wall-band .course-promise{font-size:clamp(1.4rem,.9rem + 1.4vw,2.35rem)}
}
@media (max-width:600px){
  #course .stage-top{font-size:clamp(9.5px,2.62vw,.72rem);letter-spacing:.02em}  /* one line on a 390px phone */
  #course .wall-band .wall-micro{letter-spacing:.04em}
}
/* 3. The course in short: "Decide." in the hand, as the webinar (v18_teacher.css #register); the card after the lead on phones */
#course .b-hand{position:relative}  /* keeps its screen-reader text inside the chapter (v18_cv.js) */
#course .verbs li:nth-child(3) b.b-hand{font-size:calc(1.22 * clamp(1.45rem,1rem + 1.3vw,2.15rem));line-height:1;transform:none}
#course .b-hand > .mk--decide{display:inline-block;height:1.2em;width:auto;aspect-ratio:1187/366;vertical-align:-.42em}
#course .verbs .b-hand > .mk--decide{color:var(--human)}  /* the pen's red, as the script word was (.verbs--paper span is graphite, v9_final.css) */
@media (max-width:900px){
  #course .hero2-more > .stack{display:contents}  /* its children join the section's one-column grid, so the card can sit after the lead */
  #course .hero2-more > .stack > .more-h,#course .hero2-more > .stack > .lead{order:-2}
  #course .hero2-more > .pricecard{order:-1}
}
/* 4. The price card: the seven Cohort steps as a staircase. The script marks the step on sale .is-now, its neighbours
   .is-past / .is-next (CONTRACT_prices_dates.md); the markup gives step 0 those classes so it reads without script.
   Heights follow the price (990 to 1690 is 59% to 100%; the pound steps have the same shape). */
#course .pc-v .pc-price{margin:0}
#course .stairs-fig{margin:4px 0 0}
#course .stairs{--sh:118px;list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));align-items:end;gap:0;border-bottom:2px solid var(--ink)}
#course .stairs li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
#course .stairs [data-step="0"]{--k:.483}
#course .stairs [data-step="1"]{--k:.531}
#course .stairs [data-step="2"]{--k:.585}
#course .stairs [data-step="3"]{--k:.644}
#course .stairs [data-step="4"]{--k:.707}
#course .stairs [data-step="5"]{--k:.776}
#course .stairs [data-step="6"]{--k:.825}
#course .stairs [data-step="7"]{--k:.907}
#course .stairs [data-step="8"]{--k:1}
#course .st-bar{display:block;height:calc(var(--k) * var(--sh));background:var(--lilac-paper,#E6E1EC);border-top:3px solid var(--ink);box-shadow:inset 1px 0 0 var(--paper)}
#course .st-p{display:block;margin:0 0 5px;font:500 .7rem/1 var(--mono);letter-spacing:0;text-align:center;white-space:nowrap;color:var(--graphite)}
#course .stairs .is-past .st-bar{background:color-mix(in srgb,var(--lilac-paper,#E6E1EC) 45%,var(--paper));border-top-color:color-mix(in srgb,var(--ink) 35%,transparent)}
#course .stairs .is-past .st-p{opacity:.55}
#course .stairs .is-now .st-bar{background:var(--human);border-top-color:var(--human)}
#course .stairs .is-now .st-p{font-weight:700;font-size:.82rem;color:var(--human)}
#course .stairs .is-now .st-p{position:relative}
#course .stairs .is-now .st-p::after{content:"";position:absolute;left:-30%;right:-30%;top:-70%;bottom:-70%;background:var(--human);pointer-events:none;
  -webkit-mask:var(--circle-mask) 0 0/100% 100% no-repeat;mask:var(--circle-mask) 0 0/100% 100% no-repeat}  /* the pen rings the price on sale */
#course .stairs .is-next .st-p{color:var(--ink)}
#course .st-here,#course .st-last{position:absolute;top:100%;left:0;margin-top:7px;font:700 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#course .st-here{display:none;color:var(--human)}
#course .st-here::before{content:"";position:absolute;left:0;bottom:100%;width:2px;height:7px;background:var(--human)}
#course .stairs .is-now .st-here{display:block}
#course .st-last{left:auto;right:0;font-weight:500;color:var(--graphite)}
#course .stairs [data-step="7"] .st-here,#course .stairs [data-step="8"] .st-here{left:auto;right:0}
#course .stairs [data-step="7"] .st-here::before,#course .stairs [data-step="8"] .st-here::before{left:auto;right:0}
#course .stairs .is-now .st-last,#course .stairs .is-now + li .st-here{display:none}
#course .pc-why{margin:0;font-size:.9rem;line-height:1.45;color:var(--graphite)}
#course .pc-next{margin:0;font-weight:700;line-height:1.4}
#course .pc-remedy{margin:0;font-size:.84rem;line-height:1.45;color:var(--graphite)}
@media (max-width:560px){
  /* seven prices don't fit as labels: the current, the next and the last show; a tap on a step shows its price (v2_course.js) */
  #course .stairs{--sh:92px}
  #course .stairs li{cursor:pointer}
  #course .stairs li:not(.is-now):not([data-step="8"]):not(.is-open) .st-p{visibility:hidden}  /* nine steps: now and last; "Next: …" says the next one */
  #course .stairs .is-open .st-p{color:var(--ink);font-weight:700}
}

/* ---------- block 2, the course in short (2026-10-02) ---------- */
.no-proto #course .host--more{grid-template-columns:minmax(0,1fr)}  /* the photo circle waits for the photo (data-needs) */
@media (min-width:901px) and (min-height:760px){  /* the price stays in view while the left column is read */
  #course .hero2-more{align-items:start}
  #course .hero2-more .pricecard{position:sticky;top:24px}
}

/* ---------- the persona check (2026-10-02): incoming AI work, the seven kinds, the regulator's line ---------- */
#course .wrong-sra{margin:22px 0 0;max-width:86ch;font-size:1.02rem;line-height:1.5;font-weight:700;color:var(--ink)}  /* on paper, under the dark cards */
#course .wrong-sra .mono{display:block;margin-top:6px;font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .in-rows{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--ink)}
#course .in-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px 36px;padding:16px 0;border-bottom:1px solid var(--hair)}
#course .in-case{margin:0;font-weight:700;max-width:none}
#course .in-how{margin:0;color:var(--graphite);max-width:none}
#course .in-stat{margin:18px 0 0;max-width:76ch;font-size:.95rem;color:var(--graphite)}
#course .kinds{margin-top:clamp(28px,4vw,48px)}
#course .kinds-list{margin:14px 0 0;padding-left:1.7em;display:grid;gap:8px;max-width:76ch}
#course .kinds-list li::marker{font:500 .85rem var(--mono);color:var(--human)}
#course .kinds-cap{margin:16px 0 0;font-weight:700;max-width:76ch}
#course .mgr-lead{margin:8px 0 14px;max-width:62ch;font-weight:700}
@media (max-width:700px){#course .in-rows li{grid-template-columns:minmax(0,1fr)}}

.at-foot .check-page:not(:focus-visible),.at-foot body > .hm-switch:not(:focus-within){opacity:0;pointer-events:none;translate:0 14px}  /* v2_course.js */

/* ---------- WP-REST ---------- */
/* 1. chapter headings read solid once 15% of them is on screen (v2_course.js adds .ch-seen; reduced motion: from the start).
   The pen drew them hollow until it reached them (v15_pen.css); its own tick and circle stay as they are */
.pen-on #course .chapter-h.ch-seen:not(.pen-checked){color:var(--pen-ink,var(--ink));-webkit-text-stroke-color:transparent;transition:color .8s ease,-webkit-text-stroke-color .8s ease}
/* each word's ink is a text-clipped fill (v16_night.css r2): it floods in word by word, the same front as when the pen ticks */
.pen-on #course .chapter-h.ch-seen .w:not(.hol .w):not(.hype-line .w){background-position:0 0}
@media (prefers-reduced-motion:reduce){
  .pen-on #course .chapter-h:not(.pen-checked){color:var(--pen-ink,var(--ink));-webkit-text-stroke-color:transparent}
  .pen-on #course .chapter-h .w:not(.hol .w):not(.hype-line .w){background-position:0 0}
}
/* 2. "Fair point": "Show me every source" is a real button, 44px (it was a 19px line of text); v16_night.js still swaps its words */
#course .think .check-note{display:block;margin:12px 0 2px}
#course .think .check-note .check-now{min-height:44px;margin:0;padding:8px 16px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font:800 1rem/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
/* 3. the sorter: eight tasks first on every screen (the five examples among them), "Show 6 more tasks" for the rest */
#course .task-pool:not(.open) .task--more{display:none}
#course .more-tasks{display:block;margin-top:10px;background:none;border:0;padding:10px 0;min-height:44px;font:700 1rem/1.3 var(--sans);color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
/* "Decide." in the hand-drawn mark, as the webinar draws it (v18_teacher.css, #register): it stands on the baseline of "ecide",
   the D's loop hangs below; the negative margins keep the heading's height, so the three columns' notes stay level */
#course .b-hand{position:relative}  /* keeps its screen-reader text inside the chapter (v18_cv.js arms only self-contained chapters) */
#course .bin[data-bin="keep"] h3{font-size:clamp(1.45rem,1rem + 1.3vw,2.15rem);line-height:1.05;transform:none}  /* the script font's 1.9x size and tilt (v13_sections.css) */
#course .bin[data-bin="keep"] h3 .b-hand{display:inline-block;font-size:1.22em;line-height:1;margin-block:-.2em}
#course .b-hand > .mk--decide,#course .kb3--hand > .mk{display:inline-block;height:1.2em;width:auto;aspect-ratio:1187/366;vertical-align:-.42em}
#course .kb3--hand{font-size:1em;line-height:1;padding:0}
@media (max-width:900px){#course .kin-band{display:none}}  /* the running band: laptops only */
/* 4. the before/after demo ends on a way to buy, ruled off like the programme's Join row (#course .prog-buy) */
#course .desk .ba-module{max-width:none;margin-top:28px;padding-top:20px;border-top:2px solid var(--ink)}
#course .ba-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:16px}
@media (max-width:560px){#course .ba-buy .btn{padding-inline:16px;font-size:1.05rem}}  /* one line on a phone */
#course #verdict + .muted{margin-top:18px}  /* the verdict's Join row sat on the line under it */
/* 5. "lands on your desk": one calm, sourced case in the page's small print, then the way to the prices */
#course .in-real{margin:18px 0 0;max-width:76ch;font-size:.95rem;line-height:1.5;color:var(--graphite)}
@media (max-width:900px){#course :is(.ba-buy,.in-next,.sorter-verdict .verdict-go) .link{display:inline-flex;align-items:center;min-height:44px}}
/* 6. the teacher. Prototype (the photo slot shown): a large 4:5 portrait, a third of the block, the name beside it and
   [City] · [LinkedIn] right under the name. Live: the slots stay hidden and the r1 rule above lays the story and the record
   side by side, so no empty photo column */
@media (min-width:901px){#course .teacher--full{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
#course .t-id{display:grid;gap:12px}
/* "How this course was made" now ends the story's column (live, it filled the hole under the shorter story); one column
   (phones, tablets): it still comes last, after the signature, as before */
@media (max-width:900px){#course .teacher--full .t-col{display:contents}#course .teacher--full .t-main > .t-col > .box{order:1}}
/* 7. the FAQ: two columns of two groups (three columns left the fourth group under the first, with a hole beside it) */
#course .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
#course .lg-col{display:grid;gap:clamp(28px,3vw,48px);align-content:start;min-width:0}
@media (max-width:900px){#course .ledger{grid-template-columns:minmax(0,1fr)}}
/* 8. the finale: the visitor's own hand on the line (the webinar's "your signature"), drawn as the block scrolls up (v14_more.css) */
#course .sign-row .sig-mk--you{width:min(80%,340px);aspect-ratio:1033/248}

/* ---------- WP3a (2026-10-02): introductions: "Is this course for you?", four lines before the prices, the guarantee in a sentence ---------- */
/* "Is this course for you?": the promise, what you leave with, a line for owners (the UK fact is hidden until paint() in v2_course.js shows it for GBP) */
#course .fit-intro{display:grid;gap:14px;margin:clamp(18px,2.4vw,28px) 0 clamp(30px,4.4vw,52px)}
#course .fit-intro .in-stat{margin:0}  /* the sourced facts keep the page's small grey line */
#course .fit-lead{max-width:34ch;font:700 clamp(1.45rem,1.05rem + 1.5vw,2.1rem)/1.18 var(--sans);letter-spacing:-.015em;text-wrap:balance}
#course .fit-show-h{margin-top:6px}
#course .fit-show{margin-top:-4px;gap:10px clamp(28px,4vw,72px);font-size:inherit}  /* the .ticks look, at body size */
@media (min-width:901px){#course .fit-show{grid-template-columns:repeat(2,minmax(0,1fr))}}  /* the same break as .fit (v8_final.css), so the columns line up with the two lists below */
#course .fit-biz{margin-top:8px}
#course .fit-biz-q{margin-top:-6px}
#course .vo{display:block;font:500 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}  /* a person's words with their source: the quote in italics, the source in mono */
#course .vo i{display:block;margin-bottom:4px;font:italic 400 1.15rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
/* the package tag, as the programme marks it (.rc-pkg, v8_final.css), here in the page's mono */
#course .fit-show .rc-pkg,#course .price-lead .rc-pkg{margin-top:4px;font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* the prices open with four short lines in a person's voice (not a chapter heading) */
#course .price-lead{max-width:none;margin:0 0 clamp(26px,3.6vw,44px);font:700 clamp(1.4rem,1rem + 1vw,1.9rem)/1.2 var(--sans);letter-spacing:-.01em}
#course .price-lead > span{display:block}
#course .price-lead > span + span{margin-top:.25em}
/* the guarantee, said once before the seal; #refund (the target of the page's refund links) is on this block */
#course .refund-intro{margin-top:clamp(44px,5vw,68px)}
#course .refund-intro .sub-h{margin:0 0 12px}

/* ---------- WP5a programme ---------- */
/* The programme reads as eight results, not a syllabus: a plain grid (the pinned sideways strip and its labels are gone
   from the markup, so v14_more's pin and v16_night's week spine find nothing to hold). Each module card leads with a
   from → to picture in type alone: the mess in faded dots, the pen's arrow, the result in full ink. The outcomes fold
   on every screen (v2_course.js closes them; the markup ships them open). "What you'll be able to do" lists ten skills in
   dots 01–10, and "By day 28" pairs today's problem (greyed, struck by the pen) with what you own (pen tick, week in dots). */
#course .pg-lead{margin:clamp(18px,2vw,26px) 0 0;max-width:44ch;font:700 clamp(1.2rem,1rem + .7vw,1.55rem)/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
#course .pg{--num:clamp(3.3rem,1.6rem + 4vw,5.6rem);display:grid;gap:clamp(30px,3.2vw,46px);margin-top:clamp(24px,2.8vw,38px)}
#course .pg-wk{display:grid;gap:14px}
#course .pg-wk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-top:12px;border-top:3px solid var(--ink)}
#course .pg-wk-n{margin:0;font:900 clamp(1.35rem,1rem + .9vw,1.8rem)/1 var(--dots);letter-spacing:.02em;color:var(--bot-text)}
#course .pg-wk-head h3{margin:0;font:850 clamp(1.15rem,1rem + .5vw,1.45rem)/1.15 var(--display);font-stretch:112%;letter-spacing:-.015em}
#course .pg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
#course .pg-card{display:flex;flex-direction:column;gap:9px;min-width:0;padding:clamp(16px,1.6vw,22px) clamp(16px,1.8vw,24px) 4px;background:var(--paper);border-radius:4px}
/* chips: the format, the length and the packages; a module that is not in every package carries its package in ink */
#course .pg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
#course .pg-chips li,#course .pg-when{margin:0;padding:4px 7px 3px;border:1px solid var(--hair);border-radius:3px;font:500 .66rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .pg-chips li::before{content:none}
#course .pg-chips .pg-pkg{border-color:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--ink)}
#course .pg-card--part .pg-pkg,#course .pg-qa .pg-pkg{background:var(--ink);border-color:var(--ink);color:var(--stone)}
#course .pg-chips .pg-live{border-color:var(--human);color:var(--human)}
#course .pg-card h4{margin:2px 0 0;font:800 clamp(1.08rem,.95rem + .4vw,1.28rem)/1.22 var(--sans);letter-spacing:-.01em;color:var(--ink)}
#course .pg-mn{margin-right:.55em;vertical-align:.18em;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bot-text)}
/* the picture: two numerals in the machine's dots, the pen's arrow between them, one short line under each */
#course .pg-pic{position:relative;margin:0;padding:14px 0 12px;border-block:1px solid var(--hair)}
#course .pg-ft{display:grid;grid-template-columns:fit-content(62%) calc(var(--num) * 1.1) minmax(0,1fr);align-items:start;margin:0}
#course .pg-from,#course .pg-to{display:grid;gap:8px;min-width:0}
#course .pg-num{font:900 var(--num)/.86 var(--dots);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
#course .pg-from .pg-num{color:color-mix(in srgb,var(--ink) 44%,transparent)}
#course .pg-cap{max-width:20ch;font:600 .9rem/1.3 var(--sans);color:var(--graphite)}
#course .pg-to .pg-cap{font-weight:800;color:var(--ink)}
#course .pg-arr{position:relative;height:calc(var(--num) * .86)}
#course .pg-arr .mk{position:absolute;left:50%;top:50%;width:calc(var(--num) * .58);height:calc(var(--num) * .76);translate:-50% -50%;rotate:58deg}
#course .pg-under{margin:10px 0 0;font:700 1rem/1.35 var(--sans);color:var(--ink)}
#course .pg-tag{position:absolute;top:14px;right:0;margin:0;font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
/* the demo's small print, the voice, what you keep, and the fold */
#course .pg-small{margin:0;max-width:none;font:400 .84rem/1.42 var(--sans);color:var(--graphite)}
#course .pg-card .k{display:inline;margin-right:.45em;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
#course .pg-card .k::after{content:none}
#course .pg-vo{margin:0;max-width:none;padding-left:12px;border-left:2px solid var(--human)}
#course .pg-vo i{margin-bottom:2px;font-size:.92rem;line-height:1.4}
#course .pg-keep{margin:auto 0 0;padding-top:2px;font:800 1rem/1.35 var(--sans);color:var(--ink)}
#course .pg-keep .k{display:block;margin:0 0 4px;color:var(--human)}
#course .pg-more{margin:0 -4px;border-top:1px solid var(--hair)}
#course .pg-more > summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 4px;cursor:pointer;list-style:none;
  font:500 .7rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
#course .pg-more > summary::-webkit-details-marker{display:none}
#course .pg-more > summary::after{content:"+";font:700 1.15rem/1 var(--mono);color:var(--human)}
#course .pg-more[open] > summary::after{content:"−"}
#course .pg-more > summary:focus-visible{outline:3px solid var(--human);outline-offset:-3px}
#course .pg-more .can{margin:0 4px 14px;font-size:.95rem;line-height:1.4}
/* each week's live Q&A: one slim row */
#course .pg-qa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:10px 14px;border:1.5px dashed color-mix(in srgb,var(--ink) 38%,transparent);border-radius:4px}
#course .pg-qa-t{margin:0;font:400 .95rem/1.4 var(--sans);color:var(--ink)}
#course .pg-qa-t b{margin-right:.45em;font-weight:800}
#course .pg-when{white-space:nowrap}
/* "What you'll be able to do": ten skills, numbered in dots, two columns read down; then the three that keep control */
#course .abl-lead{margin:0;max-width:62ch;color:var(--graphite)}
#course .abl-list{counter-reset:abl;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:clamp(24px,3vw,48px);margin:18px 0 0;padding:0;list-style:none}
#course .abl-list > li{counter-increment:abl;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:2px 12px;align-content:start;margin:0;padding:11px 0;border-top:1px solid var(--hair)}
#course .abl-list > li::before{content:counter(abl,decimal-leading-zero);grid-row:span 2;font:900 1.55rem/1 var(--dots);color:var(--bot-text)}
#course .abl-list b{font:800 1.04rem/1.3 var(--sans);color:var(--ink)}
#course .abl-list span{font:400 .86rem/1.4 var(--sans);color:var(--graphite)}
#course .abl-band{--human:var(--signal);margin-top:20px;padding:18px clamp(16px,2vw,26px) 20px;background:var(--ink);color:var(--stone);border-radius:4px}
#course .abl-band-h{margin:0 0 14px;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
#course .abl-band ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px clamp(18px,2.4vw,34px);margin:0;padding:0;list-style:none}
#course .abl-band li{display:grid;align-content:start;gap:6px;margin:0;padding:0}
#course .abl-band li::before{content:none}
#course .abl-band b{font:800 1.08rem/1.3 var(--sans);color:var(--stone)}
#course .abl-band .mk{width:min(100%,13em);height:.55em}
#course .abl-band span{font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
/* "By day 28, this is yours": today's problem → what you own, with the package and the week */
#course .own{--own-cols:minmax(0,.82fr) minmax(0,1.4fr) 12.5rem}
#course .own-vo{margin:0 0 18px;max-width:none}
#course .own-vo .vo i{max-width:44ch}
#course .own-head{max-width:none;display:grid;grid-template-columns:var(--own-cols);gap:16px;margin:0;padding-bottom:8px;border-bottom:2px solid var(--ink);font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
#course .own-head span:last-child{text-align:right}
#course .own-rows{margin:0;padding:0;list-style:none}
#course .own-rows > li{display:grid;grid-template-columns:var(--own-cols);gap:6px 16px;align-items:center;margin:0;padding:10px 0;border-bottom:1px solid var(--hair)}
#course .own-rows > li::before{content:none}
#course .own-was{margin:0;font:400 .9rem/1.35 var(--sans);color:var(--graphite)}
#course .own-was s{text-decoration-color:var(--human);text-decoration-thickness:1.5px}
#course .own-was .vo{color:var(--graphite)}
#course .own-was .vo i{margin-bottom:2px;font-size:.9rem;line-height:1.35;color:var(--graphite)}
#course .own-was .vo:has(.own-ctx) i{display:inline}
#course .own-src{display:block;margin-top:2px}
#course .own-ctx{font:400 .9rem/1.35 var(--sans);letter-spacing:0;text-transform:none}
#course .own-is{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;margin:0;font:400 1rem/1.36 var(--sans);color:var(--ink)}
#course .own-is .mk{width:24px;height:20px;margin-top:1px}
#course .own-is b{font-weight:800}
#course .own-wk{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0}
#course .own-pkg{font:500 .64rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-align:right}
#course .own-pkg--part{white-space:nowrap;padding:4px 7px 3px;background:var(--ink);border-radius:3px;color:var(--stone)}
#course .own-n{position:relative;min-width:1.1ch;font:900 2.3rem/.9 var(--dots);color:var(--bot-text);text-align:right}
#course .own-honest{margin-top:22px;max-width:52ch}
#course .own-inc{grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr) 12.5rem;gap:10px 16px;align-items:start;margin-top:30px}
#course .own-inc p{margin:0}
#course .own-extra p{margin-bottom:8px}
#course .own-extra ul{display:block;margin:0;columns:2;column-gap:28px}
#course .own-extra li{margin:0 0 6px;break-inside:avoid}
#course .pg-all{display:none}
@media (max-width:900px){
  #course .pg-cards,#course .pg-qa{grid-template-columns:minmax(0,1fr)}
  #course .pg-card{gap:7px;padding:15px 16px 2px}
  #course .pg-chips{gap:5px}
  #course .pg-chips li,#course .pg-when{padding:3px 6px 2px;font-size:.6rem;letter-spacing:.06em}
  #course .pg-pic{padding:10px 0 9px}
  #course .pg-from,#course .pg-to{gap:5px}
  #course .pg-under{margin-top:7px;font-size:.95rem}
  #course .pg-tag{top:10px}
  #course .pg-wk{gap:12px}
  #course .pg-wk-head{padding-top:10px}
  #course .pg-keep{margin-top:2px}
  /* phones: the voice and the "On screen" line wait behind the same tap as the outcomes, under them */
  #course .pg-card .pg-more{order:4}
  #course .pg-card .pg-small,#course .pg-card .pg-vo{order:5}
  #course .pg-card .pg-vo{margin-bottom:12px}
  #course .pg-card:has(> .pg-more:not([open])) :is(.pg-small,.pg-vo){display:none}
  #course .pg-qa{gap:6px;padding:10px 12px}
  #course .pg-qa-t{font-size:.92rem}
  #course .pg-when{justify-self:start}
  #course .abl-list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  #course .abl-list > li{padding:9px 0}
  #course .abl-band ul{gap:12px}
  #course .abl-band ul{grid-template-columns:minmax(0,1fr)}
  #course .own-head{display:none}
  #course .own-rows > li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"was wk" "is is";align-items:start;gap:10px 14px}
  #course .own-was{grid-area:was}
  #course .own-is{grid-area:is}
  #course .own-wk{grid-area:wk;flex-direction:column-reverse;align-items:flex-end;gap:6px}
  #course .own-inc{grid-template-columns:minmax(0,1fr)}
  #course .own-extra ul{columns:1}
  #course .pg-all:not([hidden]){display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;border:0;background:none;color:var(--ink);font:700 1rem/1 var(--sans);cursor:pointer}
  #course #files-list.short .own-rows > li:nth-child(n+5),#course #abl-list.short > li:nth-child(n+6){display:none}
}

/* ---------- block 9, prices (2026-10-02) ---------- */
/* the struck claims ("Only 3 spots left.") read struck even before the pen gets there: a jump to #pricing used to land
   on them unstruck (r1 verdict fix 5); the pen's own stroke still draws over this faint one */
#course del.hype-line{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--human) 45%,transparent)}

/* ---------- WP5b pricing ---------- */
/* One component instead of the chooser, the quote card, the two small cards and the compare table (course_v2.body.html
   .pk): one list of results, then three ways to take the course. Laptops: the list, then Starter, Cohort and Complete as
   sheets whose rows line up through subgrid; Cohort is the quote sheet (tractor feed, crop marks and the print-in from
   v16_paper/v13_sections, OUR PICK, the circled name, SIGN HERE). Phones: a switch over one list (v2_course.js); the three
   sheets share one grid area and only the chosen one is visible, so switching moves nothing. */
#course .pk{--pk-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 108'%3E%3Cpath d='M4 57c-3-3-3-7 1-9 3-2 7 0 8 3 1 2-1 3-2 2-2-2-4-2-5 0-1 2 1 3 3 4 9 5 20 18 33 31 4 4 7 5 10 1C83 62 116 32 155 17c13-5 25-10 37-13 3-1 4 0 2 2-2 2-8 5-14 9C138 42 99 75 61 103c-7 5-12 5-18-1C28 85 17 68 7 59c-2 1-3 0-4-3Z'/%3E%3C/svg%3E");
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1.6fr) minmax(0,.95fr);
  grid-template-rows:auto repeat(12,auto);column-gap:clamp(10px,1.1vw,14px);margin-top:clamp(52px,5vw,68px)}
#course .pk-switch{display:none}
#course .pk-corner{grid-column:1;grid-row:1;align-self:end;margin:0;padding:0 0 12px;border-bottom:2px solid var(--ink);font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
#course .pk-list,#course .pk-marks{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:subgrid}
#course .pk-list{grid-column:1;grid-row:2 / -1}
#course .pk-list li{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair)}
#course .pk-res{font:600 1rem/1.32 var(--sans);color:var(--ink);transition:color .2s}
#course .pk-note{display:block;font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .pk-col{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;position:relative;min-width:0}
#course .pk-col[data-pk="starter"]{grid-column:2}
#course .pk-col[data-pk="cohort"]{grid-column:3}
#course .pk-col[data-pk="complete"]{grid-column:4}
#course .pk > .paper-sentinel{grid-column:3;grid-row:1 / -1;height:auto!important;margin:0!important}  /* v16_paper.js measures the quote's footprint */
#course .pk-head{grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding-bottom:18px}
#course .pk-marks{grid-row:2 / -1}
#course .pk-marks li{display:grid;place-items:center;min-height:54px;border-bottom:1px solid var(--hair)}
#course .pk-marks li:last-child,#course .pk-list li:last-child{border-bottom:0}
/* the quiet sheets: Starter and Complete (the .alt look: field paper, an ink rule on top), set a little lower */
#course .pk .alt{display:grid;gap:0;align-content:normal;margin:24px 0 18px;padding:18px clamp(12px,1.1vw,16px) 6px;background:var(--field);border:1px solid var(--mist);border-top:2px solid var(--ink)}
/* the quote sheet: Cohort, the strongest of the three */
#course .pk .offer{margin:0;padding:clamp(16px,1.6vw,22px) 30px 10px;background:var(--paper);border:2px solid var(--ink);animation:none}
#course .pk-quote{margin:0 0 2px;font:500 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
#course .pk .of-pick{margin:0}
#course .pk-name{margin:0;font:850 clamp(1.45rem,1.1rem + .7vw,1.8rem)/1 var(--display);font-stretch:118%;letter-spacing:-.03em}
#course .pk .of-name{font-size:clamp(2rem,1.2rem + 1.6vw,2.7rem);margin:2px 0 4px}
#course .pk-hl{margin:0;font:750 clamp(1.02rem,.92rem + .3vw,1.16rem)/1.25 var(--sans);letter-spacing:-.01em;text-wrap:balance}
#course .pk-line{margin:0;font-size:.92rem;line-height:1.45;color:var(--graphite)}
#course .pk-vo{margin:4px 0 0;padding-left:10px;border-left:2px solid var(--human)}  /* one real voice per package, the page's .vo look, smaller for a column */
#course .pk-vo .vo{font-size:.62rem}
#course .pk-vo .vo i{font-size:.94rem;line-height:1.38}
#course .pk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:auto 0 0;padding-top:6px}
#course .pk-price .big{font-size:clamp(1.9rem,1.3rem + 1vw,2.4rem);line-height:1}
#course .pk .of-price .big{font-size:clamp(2.4rem,1.5rem + 1.8vw,3.1rem)}
#course .pk-when{font:500 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .pk .of-signline{width:100%;height:46px;margin:0 0 10px}
#course .pk-go{min-height:48px;padding:10px 16px;font-size:1rem;text-align:center;text-wrap:balance;align-self:stretch}
#course .pk .alt .pk-go{background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}  /* a real button, quieter than Cohort's */
#course .pk .alt .pk-go:hover{box-shadow:6px 6px 0 var(--ink)}
@media (min-width:1181px){#course .pk .alt .pk-go{white-space:nowrap;padding-inline:12px;font-size:.95rem}#course .pk .offer .pk-go{white-space:nowrap}}
/* ticks: the pen's tick (the brand mark) on every row a package has; a quiet dash on a greyed cell where it hasn't */
#course .pk-y::before{content:"";width:30px;height:17px;background:var(--human);-webkit-mask:var(--pk-tick) center/contain no-repeat;mask:var(--pk-tick) center/contain no-repeat}
#course .pk-n{background:color-mix(in srgb,var(--ink) 5%,transparent)}
#course .pk-n::before{content:"";width:14px;height:2px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.fx-on #course .pk-y::before{clip-path:inset(-20% 100% -20% -4%);transition:clip-path .28s cubic-bezier(.5,0,.3,1) calc(var(--i,0) * 40ms + .1s)}
.fx-on #course .pk.inked .pk-y::before{clip-path:inset(-20% -4% -20% -4%)}
/* under the grid, once: the checkout note and the remedy on the left, a real voice on the right */
#course .pk-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);margin-top:clamp(40px,4vw,52px);align-items:start}
#course .pk-foot{display:grid;gap:8px}
#course .pk-foot p{margin:0}
#course .pk-foot .checkout-line{font-size:.9rem}
#course .pk-remedy{font-weight:700}
#course .pk-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px!important}
#course .pk-why{display:grid;gap:12px;padding-top:16px;border-top:2px solid var(--ink)}
#course .pk-why p{margin:0}
#course .pk-voice .vo i{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
#course .pk-us{font-weight:700;max-width:52ch}
/* no JavaScript, on a phone: the Cohort view stays, and a plain table under it shows all three */
#course .pk-plain{margin-top:22px;overflow-x:auto}
#course .pk-plain table{width:100%;border-collapse:collapse;font-size:.88rem}
#course .pk-plain th,#course .pk-plain td{padding:8px 6px;border-bottom:1px solid var(--hair);text-align:center;vertical-align:top}
#course .pk-plain tbody th{text-align:left;font-weight:600}
#course .pk-plain .pk-note{margin-top:2px}
@media (min-width:901px){#course .pk-plain{display:none}}
@media (min-width:901px) and (max-width:1180px){#course .pk .offer{padding-inline:28px}#course .pk-go{font-size:.95rem;padding-inline:10px}}

/* phones and tablets: a switch over one list */
@media (max-width:900px){
  #course .pk-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(22px,6vw,32px) 0 0;border:2px solid var(--ink);background:var(--paper)}
  #course .pk-switch[hidden]{display:none}
  #course .pk-switch button{min-height:48px;padding:6px 4px;border:0;border-left:1.5px solid var(--ink);background:none;color:var(--ink);font:800 1rem/1 var(--display);font-stretch:112%;cursor:pointer}
  #course .pk-switch button:first-child{border-left:0}
  #course .pk-switch button[aria-pressed="true"]{background:var(--ink);color:var(--stone)}
  #course .pk-switch button:focus-visible{outline:3px solid var(--human);outline-offset:-5px}
  #course .pk{grid-template-columns:minmax(0,1fr) 44px;column-gap:0;margin-top:20px}
  #course .pk-corner{display:none}
  #course .pk-list{position:relative;z-index:2;padding-left:30px}
  #course .pk-list li{min-height:50px;padding:10px 10px 10px 0}
  #course .pk-res{font-size:.98rem}
  #course .pk-col,#course .pk-col[data-pk]{grid-column:1 / -1;grid-template-columns:subgrid}
  #course .pk > .paper-sentinel{grid-column:1 / -1}
  #course .pk-head{grid-column:1 / -1;padding-bottom:16px}
  #course .pk-marks{grid-column:2}
  #course .pk-marks li{min-height:50px}
  #course .pk .alt,#course .pk .offer{margin:0;padding:20px 16px 4px 30px;box-shadow:none}
  #course .pk-quote{display:none}  /* the quote's own line: laptops only, the phone's head stays close to the other two */
  #course .pk .of-signline{height:40px}
  #course .pk .offer :is(.feed--l,.feed--r){width:14px}
  #course .pk .offer .feed--l{left:0}
  #course .pk .offer .feed--r{right:0}
  #course .pk .offer.paper-armed{clip-path:none!important}  /* the price and the Join show at once on a phone; the sheet doesn't print in */
  #course .pk .offer.paper-armed :is(.feed--l,.feed--r):not(.torn){translate:none!important}
  #course .pk[data-show="starter"] .pk-col:not([data-pk="starter"]),
  #course .pk[data-show="cohort"] .pk-col:not([data-pk="cohort"]),
  #course .pk[data-show="complete"] .pk-col:not([data-pk="complete"]){visibility:hidden}
  #course .pk[data-show="starter"] li[data-no~="starter"] .pk-res,
  #course .pk[data-show="cohort"] li[data-no~="cohort"] .pk-res,
  #course .pk[data-show="complete"] li[data-no~="complete"] .pk-res{color:color-mix(in srgb,var(--ink) 38%,transparent)}
  #course .pk[data-show="starter"] li[data-no~="starter"] .pk-note,
  #course .pk[data-show="cohort"] li[data-no~="cohort"] .pk-note,
  #course .pk[data-show="complete"] li[data-no~="complete"] .pk-note{opacity:.6}
  #course .pk-n{background:none}
  #course .pk-under{grid-template-columns:minmax(0,1fr);margin-top:30px}
}

/* the guarantee, the receipt and the video voices: closer together, the receipt about half as tall */
#course #pricing .refund-intro{margin-top:clamp(36px,4vw,52px)}
#course .refund-by7{margin:10px 0 0;font-weight:700;max-width:70ch}
#course .cohort-proof{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:clamp(24px,4vw,56px);align-items:center}
#course .cohort-proof > .receipt-doc{grid-column:2;grid-row:1 / span 2;margin:0}
#course .cohort-rc{max-width:380px;padding:14px 18px 16px;font-size:.86rem;rotate:-1.2deg}
#course .cohort-rc .rc-head{padding-bottom:8px;font-size:.62rem}
#course .cohort-rc .have li{padding:6px 0}
#course .cohort-rc .rc-wk{font-size:.86rem}
#course .cohort-rc .rc-foot{margin-top:8px;font-size:.6rem}
@media (max-width:900px){
  #course .cohort-proof{grid-template-columns:minmax(0,1fr)}
  #course .cohort-proof > .receipt-doc{grid-column:1;grid-row:auto;margin-top:8px;width:min(100%,340px)}
}
/* the video voices from the free session: the webinar's .pilots block (v18_teacher.css, #register), same rules */
#course .pilots{margin-top:clamp(28px,4vw,48px);display:grid;gap:14px}
#course .pilots-h{margin:0;font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);line-height:1.05;letter-spacing:-.02em}
#course .pilots-sub{margin:0;max-width:64ch;font-size:1.04rem;line-height:1.5}
#course .pilots-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:6px}
#course .pilot{margin:0;display:grid;gap:8px}
#course .pilot .t-frame{aspect-ratio:4/5}
#course .pilot figcaption{font-size:.95rem;line-height:1.4}
#course .pilot-note{display:block;margin-top:4px;font-size:.68rem;letter-spacing:.06em;color:var(--graphite)}
#course .pilots-foot{margin:0;font-size:.95rem}
/* phones: the three videos in a row you swipe (one and a bit in view), not three screens of frames */
@media (max-width:720px){#course .pilots-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}#course .pilot{scroll-snap-align:start}}

/* the price steps: laptops fold too (today's row and the next three; the button shows the rest) */
#course .more-steps{display:block;margin-top:6px;background:none;border:0;padding:10px 0;min-height:44px;font:700 1rem/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
@media (min-width:561px){#course #sched:not(.open) tbody tr.past,#course #sched:not(.open) tbody tr.now~tr~tr~tr~tr{display:none}}
/* the notes: the first one stays in view, the rest fold under "The small print, in plain words" */
#course .price-notes{border-top:2px solid var(--ink)}
#course .pn-first{margin:0;padding:12px 0;border-bottom:1px solid var(--hair);max-width:none}
#course .pn-fold > summary,#course .mgr-fold > summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 0;list-style:none;cursor:pointer;font-weight:700}
#course .pn-fold > summary::-webkit-details-marker,#course .mgr-fold > summary::-webkit-details-marker{display:none}
#course .pn-fold > summary::after,#course .mgr-fold > summary::after{content:"+";font:700 1.15rem/1 var(--mono);color:var(--human)}
#course .pn-fold[open] > summary::after,#course .mgr-fold[open] > summary::after{content:"−"}
#course .pn-fold{border-bottom:1px solid var(--hair)}
#course .pn-fold ul{list-style:none;margin:0;padding:0}
#course .pn-fold li{padding:10px 0;border-top:1px solid var(--hair);font-size:.95rem}
#course .pn-fold > .muted{margin:0;padding:10px 0 14px;border-top:1px solid var(--hair);font-size:.92rem}
/* the employer part: the list beside the manager's email; the email folds, its Copy and email-app link stay in view; no envelope */
#course #pricing .costs{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);margin-top:clamp(32px,3.6vw,48px)}
#course #employer{grid-column:auto;grid-template-columns:minmax(0,1fr);max-width:none;margin-top:0}
#course .env,#course .fold-stack{display:none!important}
#course .mgr-fold{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
#course .mgr-fold[open] > .mgr-doc{margin:4px 0 16px}
@media (max-width:900px){#course #pricing .costs{grid-template-columns:minmax(0,1fr)}}
#course #pricing .ask-first{margin-top:clamp(24px,3vw,36px)}

/* the laptops' pinned Join (v2_course.js .on): over the page, under the progress line, gone while the prices or the finale show */
#course .pinbar{position:fixed;left:0;right:0;top:0;z-index:58;background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 10%,transparent);
  visibility:hidden;translate:0 -110%;transition:translate .3s cubic-bezier(.3,.7,.2,1),visibility 0s linear .3s}
#course .pinbar.on{visibility:visible;translate:0 0;transition:translate .3s cubic-bezier(.3,.7,.2,1),visibility 0s}
#course .pb-in{display:flex;align-items:center;gap:10px clamp(16px,2vw,28px);min-height:62px;padding-top:4px}  /* the 4px progress line stays on top */
#course .pb-name{margin:0;font:850 1.15rem/1 var(--display);font-stretch:112%;letter-spacing:-.02em;white-space:nowrap}
#course .pb-pkg{margin:0 0 0 auto;font:800 1.05rem/1 var(--sans);white-space:nowrap}
#course .pb-k{margin-right:6px;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
#course .pb-go{min-height:44px;padding:8px 20px;font-size:1rem;box-shadow:3px 3px 0 var(--human)}
#course .pb-cmp{font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#course .pinbar,#course .pinbar.on{transition:none}}
@media (max-width:900px){#course .pinbar{display:none}}

/* ---------- block 5, the sorter (2026-10-02): the verdict ends on the package it names ---------- */
#course .sorter-verdict .verdict-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px}
#course .sorter-verdict .verdict-go .btn{color:var(--stone);font-size:1rem}  /* not the verdict's red link colour */
#course .sorter-verdict .verdict-go .link{font-size:1rem;color:var(--ink)}

/* ---------- block 4, the programme (2026-10-02): about half as long on phones ---------- */
#course .can-more > summary{list-style:none;cursor:pointer}
#course .can-more > summary::-webkit-details-marker{display:none}
#course .files-all{display:none}
@media (min-width:901px){#course .can-more > summary{pointer-events:none}}  /* desktop: a label, always open */
@media (max-width:900px){
  #course .can-more > summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--hair)}
  #course .can-more > summary::after{content:"+";font:700 1.1rem/1 var(--mono);color:var(--human)}
  #course .can-more[open] > summary::after{content:"−"}
  #course .receipt-doc .have:not(.all) li:nth-child(n+5){display:none}
  #course .files-all{display:inline-block;margin-top:14px;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
  /* the dotted leader and a 5.5rem week column squeezed each row into 176px of text (v9_final.css) */
  #course .receipt-doc .rc-lead{display:none}
  #course .receipt-doc .have li{grid-template-columns:minmax(0,1fr) auto}
  #course .receipt-doc .rc-wk{white-space:nowrap}
}
@media (max-width:600px){
  /* phones: the struck phrases stay behind the mark; the lower rows ran into "wrong." and the reading lines
     (visibility, not display, so the first two rows keep their places) */
  #course .hype--wall .hype-row:nth-child(n+3){visibility:hidden}
  #course .wall-cta .cta-sep{display:none}
  #course .wall-cta .cta-price{display:block}  /* "Join the November cohort" / "£849 →" */
}

/* v18_cv arms a chapter only if its absolutely positioned children stay inside it: the hidden source chips (positioned
   only while checking), the comparison table's sr-only header and the finale form's sr-only label hung off ancestors
   outside their sections, so sorter, incoming, pricing and the finale were skipped (found by the webinar chat, 2 Oct) */
#course [data-src],#course .qd th,#course .co-row{position:relative}
/* phones: the short price table starts at today's row (PRICE_STEP in build.py), not at the first one */
@media (max-width:560px){#course .table-wrap:not(.open) tbody tr:nth-child(n+4){display:table-row}#course .table-wrap:not(.open) tbody tr.past,#course .table-wrap:not(.open) tbody tr.now~tr~tr~tr{display:none}}

/* the chapter numbers print from data-ch (v2_course.js): the CSS counter restarts inside every chapter v18_cv.js gives content-visibility */
#course .chapter-h[data-ch]::before{content:attr(data-ch);counter-increment:none}

/* =====================================================================================================================
   WP2 (2 Oct): two blocks after "The course in short". Both keep the page's two voices: the machine in dots and mono
   (turquoise), the person in sans and the red pen. The paper tokens are kept here for the paper sheets that lie on the
   dark band, where .ink switches --human, --bot and --hair to their dark values
   ===================================================================================================================== */
#course{--paper-human:var(--human);--paper-bot:var(--bot);--paper-bot-text:var(--bot-text);--paper-hair:var(--hair)}

/* ---------- C1: a Monday, four weeks from now. The redline's sheet (.redl), tabs (.red-tabs) and slider; v2_course.js
   monday() strikes today's lines and writes day 28's in their place. Without JS: today's list, day 28's under it ---------- */
#course .mday{padding-block:clamp(28px,3vw,40px) clamp(36px,3.4vw,48px)}
#course .mday-sheet{margin-top:clamp(16px,1.8vw,24px);gap:12px}
#course .mday-top{display:none}
#course .mday-on .mday-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
#course .mday-label{margin:0;order:2}
#course .mday-tabs button{min-height:44px}  /* tap targets on touch tablets too (the redline's tabs are 37px) */
#course .mday-h{margin:0;color:var(--graphite)}
#course .mday-h + .mday-list{margin-top:4px}
#course .mday-list + .mday-h{margin-top:18px}
#course .mday-list{list-style:none;margin:0;padding:0}
#course .mday-list > li{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,1fr);column-gap:14px;align-items:baseline;align-content:start;padding:10px 0 11px;border-top:1px solid var(--hair)}
#course .mday-t{justify-self:start;font:900 1rem/1.4 var(--dots);letter-spacing:.03em;color:var(--bot-text)}
#course .mday-now .mday-t{color:var(--graphite)}
#course .mday-l{margin:0;max-width:64ch;font-size:1rem;line-height:1.5;color:var(--ink)}
#course .mday-now .mday-l{color:var(--graphite)}
#course .mday-mv{font-family:var(--mono);font-weight:500;font-size:.88em;letter-spacing:.01em;color:var(--bot-text)}
#course .mday-m{margin-left:.35em;padding:1px 6px;font-size:.6rem;letter-spacing:.08em;vertical-align:.12em;white-space:nowrap}
/* today's voices: pencilled in the margin (under the line on phones) */
#course .mday-q{grid-column:2;margin:6px 0 0;padding-left:10px;border-left:2px solid var(--mist);max-width:52ch}
#course .mday-q .vo{display:block;font:500 .62rem/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .mday-q .vo i{display:block;margin-bottom:2px;font:italic 400 .9rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--graphite)}
/* day 28: the pen's tick in the margin, the visitor's signature under the last line */
#course .mday-tk{position:absolute;left:-30px;top:16px;width:21px;height:12px}
#course .mday-tk > .mk,#course .mday-sig > .mk{width:100%;height:100%}
#course .mday-sig{grid-column:2;display:block;width:min(176px,62%);aspect-ratio:1033/248;margin-top:4px}
/* with JS (and subgrid): both lists share five rows; a row shows today or day 28, so the sheet never changes height */
#course .mday-on .mday-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#course .mday-on .mday-day{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto)}
#course .mday-on .mday-list{grid-column:1;grid-row:1 / span 5;display:grid;grid-template-rows:subgrid;margin:0}
#course .mday-on .mday-now .mday-t,#course .mday-on .mday-now .mday-l > span{background:linear-gradient(var(--human),var(--human)) 0 58%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#course .mday-on .mday-now > li.gone .mday-t,#course .mday-on .mday-now > li.gone .mday-l > span{background-size:100% 2px}
#course .mday-on .mday-now > li.gone{opacity:0}
#course .mday-on .mday-then > li{opacity:0;clip-path:inset(0 100% 0 0)}
#course .mday-on .mday-then > li.on{opacity:1;clip-path:inset(-16px -24px -16px -44px)}
/* the pen strikes the line, the line goes, day 28 is written in, then ticked */
.fx-on #course .mday-on .mday-now > li{transition:opacity .16s ease}
.fx-on #course .mday-on .mday-now > li.gone{transition:opacity .22s ease .26s}
.fx-on #course .mday-on .mday-now .mday-t,.fx-on #course .mday-on .mday-now .mday-l > span{transition:background-size .26s cubic-bezier(.6,0,.3,1)}
.fx-on #course .mday-on .mday-then > li{transition:opacity .12s ease,clip-path .16s ease}
.fx-on #course .mday-on .mday-then > li.on{transition:opacity .12s ease .3s,clip-path .55s cubic-bezier(.6,0,.3,1) .3s}
#course .mday-then > li.on .mk--tick{--mk-delay:.72s;--mk-dur:.28s}
#course .mday-then > li.on .mk--your_signature{--mk-delay:.8s;--mk-dur:1.1s}
#course .mday-snap,#course .mday-snap *,#course .mday-snap .mk svg{transition:none!important}
/* the slider: the redline's (#red-range in v8_final.css), with this block's ends and caption */
#course .mday-ctrl{grid-template-columns:auto minmax(0,1fr) auto auto;padding-top:10px}
#course .mday-drag{margin:0;font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--human);white-space:nowrap}
#course #mday-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;min-height:44px;margin:0;background:transparent;cursor:pointer}
#course #mday-range::-webkit-slider-runnable-track{height:4px;background:var(--ink)}
#course #mday-range::-moz-range-track{height:4px;background:var(--ink)}
#course #mday-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin-top:-20px;border-radius:50%;background:var(--human);border:10px solid transparent;background-clip:padding-box}
#course #mday-range::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:var(--human);border:10px solid transparent;background-clip:padding-box;box-sizing:border-box}
#course #mday-range:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (pointer:fine){#course #mday{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29 7.5 18.5 20.5 5.5a3.6 3.6 0 0 1 6 6L13.5 24.5Z' fill='%23FF0030' stroke='%232C1751' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 29 9.8 22.2' stroke='%232C1751' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 29,crosshair}}
#course .mday-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:clamp(18px,2vw,26px)}
#course .mday-cap{flex:1 1 30rem;margin:0;max-width:72ch;font-size:.95rem;line-height:1.5;color:var(--graphite)}
#course .mday-foot .btn{flex:none}
#course .sticky.yield-m{transform:translateY(calc(100% + 8px));pointer-events:none}  /* v2_course.js monday(): the slider is on screen */
@media (min-width:901px){
  /* the margin is a real margin: today's voices sit beside the line */
  #course .mday-list > li{grid-template-columns:4.4rem minmax(0,1fr) minmax(0,19rem);column-gap:24px}
  #course .mday-then > li > .mday-l{grid-column:2 / -1}
  #course .mday-q{grid-column:3;grid-row:1;margin:2px 0 0}
  #course .mday-tk{left:-34px}
}
@media (max-width:560px){
  #course .mday-sheet{gap:12px}
  #course .mday-list > li{grid-template-columns:2.9rem minmax(0,1fr);column-gap:10px;padding:11px 0 12px}
  #course .mday-t{font-size:.86rem}
  #course .mday-l{font-size:.96rem}
  #course .mday-q .vo i{font-size:.86rem}
  #course .mday-tk{left:-22px;top:14px;width:17px;height:10px}
  #course .mday-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #course .mday-tabs button{min-height:44px;padding:8px 10px;font-size:.9rem;line-height:1.2}
  #course .mday-ctrl{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px}
  #course .mday-drag{grid-column:1 / -1;text-align:center}
  #course .mday-foot .btn{width:100%}
}

/* ---------- C2: the assistant (week 2). The one dark room on the paper page: the machine speaks in dots on its board, and
   nothing leaves until the person says yes on paper with the red pen. v2_course.js assistant() runs the demo ---------- */
#course .ast{position:relative;padding-block:clamp(30px,3.5vw,50px);--bot-text:var(--aqua)}
#course .ast-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.1vw,30px)}
#course .ast-kick{margin:0;color:var(--aqua)}
#course .ast-h{margin:12px 0 0;max-width:24ch;font:900 clamp(2rem,.9rem + 3.1vw,3.7rem)/.92 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--stone)}
#course .ast-h .dots-word{font-size:.8em;letter-spacing:.02em;color:var(--aqua)}
#course .ast-lead{margin:18px 0 0;max-width:46ch;color:color-mix(in srgb,var(--stone) 88%,transparent)}
/* a real person's words, as "Fair point" shows the Reddit post; then ours */
#course .ast-voice{display:grid;gap:14px;align-content:end}
#course .ast-quote{margin:0;display:grid;gap:12px;padding-left:18px;border-left:3px solid var(--signal)}
#course .ast-quote blockquote{margin:0}
#course .ast-quote p{margin:0;max-width:none;font:800 clamp(1.12rem,.95rem + .7vw,1.5rem)/1.3 var(--display);font-stretch:112%;letter-spacing:-.012em;color:var(--stone)}
#course .ast-quote p::before{content:"“";color:var(--signal)}
#course .ast-quote p::after{content:"”";color:var(--signal)}
#course .ast-quote figcaption{color:var(--mist)}
#course .ast-ours{margin:0;padding-left:21px;font:900 clamp(1.4rem,1rem + 1.2vw,2.1rem)/1 var(--cond);font-stretch:68%;letter-spacing:-.004em;text-transform:uppercase;color:var(--stone)}
/* the board: the machine's output in dots */
#course .ast-lbl{margin:0 0 10px;color:var(--mist)}
#course .ast-board{position:relative;display:grid;padding:clamp(16px,2.4vw,30px);background-color:color-mix(in srgb,var(--ink) 72%,#06020e);
  background-image:radial-gradient(rgba(70,198,205,.09) 1px,transparent 1.4px);background-size:8px 8px}
#course .ast-board::before{content:"";position:absolute;inset:0;pointer-events:none;color:var(--aqua);
  background:linear-gradient(currentColor,currentColor) left top/16px 2px no-repeat,linear-gradient(currentColor,currentColor) left top/2px 16px no-repeat,
    linear-gradient(currentColor,currentColor) right top/16px 2px no-repeat,linear-gradient(currentColor,currentColor) right top/2px 16px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/16px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/2px 16px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/16px 2px no-repeat,linear-gradient(currentColor,currentColor) right bottom/2px 16px no-repeat}
#course .ast-top{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;max-width:none;font:500 .74rem/1.35 var(--mono);letter-spacing:.12em;color:var(--aqua)}
#course .ast-big{margin:10px 0 16px;max-width:none;font:900 clamp(1.5rem,.8rem + 2.2vw,2.5rem)/1.08 var(--dots);letter-spacing:.02em;color:var(--aqua);text-shadow:0 0 .45em rgba(70,198,205,.45)}
#course .ast-big > span{display:block}
#course .ast-big > span:first-child{color:var(--stone);text-shadow:0 0 .45em rgba(238,235,230,.3)}
#course .ast-rows{display:grid;gap:8px}
#course .ast-row{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;width:100%;margin:0;padding:12px 14px;
  border:1px solid rgba(70,198,205,.34);border-radius:0;background:rgba(8,3,20,.4);color:var(--stone);font:inherit;text-align:left}
#course button.ast-row{-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
#course button.ast-row:hover{border-color:var(--aqua)}
#course button.ast-row:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
#course .ast-row[aria-expanded="true"]{background:rgba(70,198,205,.14);border-color:var(--aqua);box-shadow:inset 4px 0 0 var(--aqua)}
#course .ast-who{font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;color:var(--aqua)}
#course .ast-sum{grid-column:1 / -1;font:500 .94rem/1.4 var(--mono);color:var(--stone)}
#course .ast-tag{justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:3px 7px 2px;border:1px solid var(--aqua);font:500 .62rem/1.3 var(--mono);letter-spacing:.1em;color:var(--aqua);white-space:nowrap}
#course .ast-tag--check{background:var(--aqua);color:var(--ink)}
#course .ast-tag--sent{border-color:var(--signal);color:var(--stone)}
#course .ast-tag--sent::before{content:"";width:13px;height:8px;background:var(--signal);-webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
#course .ast-foot{margin:16px 0 0;max-width:none;font:500 .7rem/1.5 var(--mono);letter-spacing:.1em;color:color-mix(in srgb,var(--stone) 78%,transparent)}
#course .ast-foot b{font-weight:500;color:var(--stone);background:linear-gradient(var(--signal),var(--signal)) 0 100%/0 2px no-repeat}
#course .ast-foot.ping b{background-size:100% 2px}
.fx-on #course .ast-foot b{transition:background-size .5s cubic-bezier(.6,0,.3,1) .5s}
/* the sheets: what goes out under your name, on paper, lying on the board */
#course .ast-sheet{position:relative;margin:2px 0 4px;padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px);background:var(--paper);color:var(--ink);
  border-left:6px solid var(--paper-bot);box-shadow:7px 7px 0 rgba(6,2,16,.6);rotate:-.5deg;
  --human:var(--paper-human);--bot:var(--paper-bot);--bot-text:var(--paper-bot-text);--hair:var(--paper-hair)}
#course .ast-sheet.sent{border-left-color:var(--paper-human)}
#course .ast-st{display:flex;align-items:center;min-height:1.4em;margin:0 0 12px;max-width:none;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;color:var(--bot-text)}
#course .ast-sheet.editing .ast-st,#course .ast-sheet.sent .ast-st{color:var(--human)}
#course .ast-sheet.sent .ast-st{padding-right:76px}
#course .ast-caret{display:inline-block;flex:none;width:.62em;height:1.15em;margin-left:.45em;background:currentColor}
#course .ast-sheet.sent .ast-caret,#course .ast-sheet.editing .ast-caret{display:none}
.fx-on #course .ast-board.live .ast-caret{animation:ast-blink 1.1s steps(1) infinite}
@keyframes ast-blink{50%{opacity:0}}
#course .ast-draft{display:grid;gap:8px;font-size:1rem;line-height:1.5;color:var(--ink)}
#course .ast-draft p{margin:0;max-width:none;white-space:pre-wrap}
#course .ast-draft[contenteditable]{margin:-8px -10px;padding:8px 10px;outline:none;box-shadow:inset 0 0 0 1.5px var(--human);caret-color:var(--human)}
#course .ast-draft[contenteditable]:focus{box-shadow:inset 0 0 0 2.5px var(--human)}
#course .ast-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin:14px 0 0;max-width:none}
#course .ast-chip{position:relative;display:inline-block;padding:5px 9px 4px;font:500 .68rem/1.3 var(--mono);letter-spacing:.03em;color:var(--bot-text)}
#course .ast-chip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(currentColor,currentColor) left top/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left top/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right top/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right top/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1.5px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1.5px 7px no-repeat}
#course .ast-acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin:18px 0 0;max-width:none}
#course .ast-acts .btn{min-height:44px;padding:9px 18px}
#course .ast-tick{position:absolute;top:10px;right:16px;width:66px;height:37px;visibility:hidden}
#course .ast-sheet.sent .ast-tick{visibility:visible}
#course .ast-tick > .mk{width:100%;height:100%;--mk-dur:.42s}
/* the invoice: no draft, no button; the pen circles the difference */
#course .ast-note{margin:0 0 14px;max-width:none;font:500 .8rem/1.45 var(--mono);letter-spacing:.03em;color:var(--bot-text)}
#course .ast-sums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#course .ast-sums p{margin:0;display:grid;gap:4px;padding:10px 12px 12px;border:1.5px solid var(--hair)}
#course .ast-k{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
#course .ast-sums b{font:900 clamp(1.9rem,1.3rem + 1.4vw,2.6rem)/1 var(--cond);font-stretch:68%;letter-spacing:-.005em;color:var(--ink)}
#course .ast-diff{margin:20px 0 4px 12px;max-width:none;font:800 1.05rem/1.2 var(--display);font-stretch:112%;color:var(--ink)}
#course .ast-diff .pen-word > .mk--circle{left:-9%;width:118%;top:-62%;height:224%;--mk-dur:.7s}
/* "It has read your files": the person asks in words, the machine answers in dots, with the file */
#course .ast-ask{display:grid;gap:8px;margin-top:14px}
#course .ast-q{display:block;font:600 .98rem/1.35 var(--sans);color:var(--stone)}
#course button.ast-q{box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:9px 14px;line-height:1.3;border:1.5px solid rgba(238,235,230,.42);border-radius:0;background:none;
  -webkit-appearance:none;appearance:none;text-align:left;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
#course button.ast-q:hover{border-color:var(--stone)}
#course button.ast-q[aria-pressed="true"]{background:var(--stone);border-color:var(--stone);color:var(--ink)}
#course button.ast-q:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
#course .ast-a{display:grid;justify-items:start;gap:8px;margin:4px 0 6px;max-width:none}
#course .ast-a-t{font:900 clamp(1.05rem,.9rem + .55vw,1.35rem)/1.25 var(--dots);letter-spacing:.03em;color:var(--aqua);text-shadow:0 0 .6em rgba(70,198,205,.35)}
.fx-on #course .ast-a.printing .ast-a-t{animation:ast-print .5s steps(12,end) both}
.fx-on #course .ast-a.printing .ast-chip{animation:ast-in .3s ease .45s both}
@keyframes ast-print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ast-in{from{opacity:0}}
/* the four points */
#course .ast-pts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
#course .ast-pt{padding-top:14px;border-top:1px solid rgba(238,235,230,.22)}
#course .ast-pt > p{margin:0;max-width:60ch;color:color-mix(in srgb,var(--stone) 86%,transparent)}
#course .ast-pt b{font-weight:700;color:var(--stone)}
#course .ast-mv{font-family:var(--mono);font-weight:500;font-size:.9em;color:var(--aqua)}
/* week 4: the company's assistant, calmer */
#course .ast-co{display:grid;gap:14px;padding-top:clamp(18px,2.2vw,28px);border-top:1px solid rgba(238,235,230,.22)}
#course .ast-co-h{margin:0;font:800 clamp(1.3rem,1rem + 1vw,1.9rem)/1.15 var(--display);font-stretch:112%;letter-spacing:-.015em;color:var(--stone)}
#course .ast-co-tag{margin-left:.5em;border-color:var(--aqua);color:var(--aqua);font-size:.62rem;vertical-align:.3em}
#course .ast-co-p{margin:0;max-width:96ch;color:color-mix(in srgb,var(--stone) 86%,transparent)}
#course .ast-co-qa{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
#course .ast-co-qa > li{display:grid;align-content:start;gap:8px;padding:12px 14px;border:1px solid rgba(70,198,205,.3);background:rgba(8,3,20,.3)}
#course .ast-co-q{margin:0;max-width:none;font:600 .95rem/1.35 var(--sans);color:var(--stone)}
#course .ast-by{display:inline-block;margin-left:.3em;padding:1px 6px;border:1px solid rgba(238,235,230,.42);font:500 .6rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist);white-space:nowrap;vertical-align:.1em}
#course .ast-co-a{margin:0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#course .ast-co .ast-a-t{font-size:clamp(.98rem,.85rem + .45vw,1.18rem)}
#course .ast-stamp{justify-self:start;margin:6px 0 0 16px;max-width:none;rotate:-4deg;font:900 1.2rem/1 var(--dots);letter-spacing:.05em;color:var(--aqua);text-shadow:0 0 .5em rgba(70,198,205,.4)}
#course .ast-stamp .pen-word > .mk--circle{left:-12%;width:124%;top:-70%;height:240%}
#course .ast-cap{margin:0;max-width:80ch;font-size:.92rem;line-height:1.5;color:color-mix(in srgb,var(--stone) 74%,transparent)}
@media (min-width:1000px){
  #course .ast-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(36px,4.4vw,72px);grid-template-areas:"head voice" "demo demo" "pts pts" "co co" "cap cap"}
  #course .ast-head{grid-area:head}
  #course .ast-voice{grid-area:voice}
  #course .ast-demo{grid-area:demo}
  #course .ast-pts{grid-area:pts}
  #course .ast-co{grid-area:co}
  #course .ast-cap{grid-area:cap}
  /* the brief and its rows on the left, the open sheet lying on the board to the right */
  #course .ast-board{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:auto auto auto auto auto 1fr auto;column-gap:clamp(28px,3vw,48px)}
  #course .ast-rows{display:contents}
  #course .ast-top{grid-column:1;grid-row:1}
  #course .ast-big{grid-column:1;grid-row:2}
  #course #ast-r1{grid-column:1;grid-row:3}
  #course #ast-r2{grid-column:1;grid-row:4;margin-top:8px}
  #course #ast-r3{grid-column:1;grid-row:5;margin-top:8px}
  #course .ast-sheet{grid-column:2;grid-row:1 / 7;align-self:start;margin:0}
  #course .ast-foot{grid-column:1 / -1;grid-row:7;margin-top:18px}
  /* the files question beside the three points the board has shown */
  #course .ast-pts{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(36px,4.4vw,72px);align-items:start}
  #course .ast-pt--files{grid-row:1 / span 3}
  #course .ast-ask{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start}
  #course .ast-qa{display:contents}
  #course .ast-q{grid-column:1}
  #course .ast-a{grid-column:2;grid-row:1 / span 3;margin:0}
  /* week 4: the three questions in one row, the stamp beside the text */
  #course .ast-co{grid-template-columns:minmax(0,1fr) auto;column-gap:40px}
  #course .ast-co-h,#course .ast-co-p{grid-column:1}
  #course .ast-co-qa{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr))}
  #course .ast-stamp{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0 24px 0 0}
}
@media (max-width:999px){
  /* phones and tablets: the three rows first, the open sheet under them (the board reads at a glance) */
  #course #ast-r1{grid-row:1}
  #course #ast-r2{grid-row:2}
  #course #ast-r3{grid-row:3}
  #course .ast-sheet{grid-row:4;margin-top:8px}
}
@media (max-width:560px){
  #course .ast-kick,#course .ast-lbl{font-size:.72rem;letter-spacing:.07em}
  #course .ast-board{padding:14px 12px}
  #course .ast-quote p{font-size:1.05rem}
  #course .ast-cap{font-size:.86rem}
  /* the company's three answers as a list: the boxes cost a phone screen's worth of padding */
  #course .ast-co-qa{gap:0;border-top:1px solid rgba(238,235,230,.22)}
  #course .ast-co-qa > li{padding:8px 0;border:0;border-bottom:1px solid rgba(238,235,230,.22);background:none}
  #course .ast{padding-bottom:26px}
  #course .ast-big{margin:8px 0 12px}
  #course .ast-co{padding-top:14px;gap:12px}
  #course .ast-co-h{font-size:1.12rem}
  #course .ast-stamp{font-size:1.05rem}
  #course .ast-row{padding:9px 11px}
  #course .ast-who{font-size:.66rem;letter-spacing:.06em}
  #course .ast-ask{gap:6px}
  #course .ast-stamp{margin-top:2px}
  #course .ast-sum{font-size:.88rem}
  #course .ast-sheet{rotate:0deg;margin:8px 2px 2px;padding:14px 14px 16px}
  #course .ast-draft{gap:6px;font-size:.95rem;line-height:1.45}
  #course .ast-chip{font-size:.64rem}
  #course .ast-sums b{font-size:1.8rem}
  #course .ast-pts{gap:10px}
  #course .ast-pt{padding-top:10px}
  #course .ast-pt > p,#course .ast-co-p{font-size:.92rem;line-height:1.48}
}
@media (prefers-reduced-motion:reduce){#course .ast-caret{animation:none!important}}

/* brand rule (brand chat, 3 Oct): red marks a human decision; buttons are ink only, so no red offset shadow under Join (v11_hero.css paints it for the webinar) */
#course .stage .btn--primary,#course .sticky .btn--primary{box-shadow:none}

/* reservations: our own checkout only (v16_night.js unhides [data-mode="custom"] in that mode); the link under each Join is a 44px tap target */
#course [data-mode="custom"][hidden]{display:none}
#course a.pk-res:not([hidden]){display:inline-block;margin-top:6px;padding:10px 0}  /* a. only: span.pk-res labels in the result list are not links */
#course .pk-res-note{font-size:.9rem}

/* one story about the check (4 Oct): the incoming work reads as the second half of the draft above it, not a new chapter;
   a Join after the dark assistant demo */
#course #incoming.sec{padding-top:clamp(4px,1.5vw,16px)}
#course .sec:has(+ #incoming){padding-bottom:clamp(8px,2vw,24px)}
#course #lp2-in{margin-top:clamp(12px,2vw,24px)}
#course .ast-buy{margin-top:clamp(20px,3vw,32px)}
#course .ast-buy .link{color:inherit}

/* ---------- L1A hero + teacher (4 Oct) ---------- */
/* The first screen says what the course is, for whom, and who is behind it. New lines: .wall-for (for whom), .wall-host (Denis:
   his name and one fact; the photo slot inside stays out of the live page until the photo exists, data-needs="host-photo" in
   v16_night.css) and .wall-even (a locked-down laptop, under the Join button). The mini teacher line under the hero is gone,
   so his name is said once on the first screen. The small lines keep the hero's soft halo: no box behind the words. */
#course .wall-band :is(.wall-for,.wall-even){margin:0;max-width:none;text-align:center;text-shadow:0 0 .5em var(--ink),0 0 .16em var(--ink)}
#course .wall-band .wall-for{font:600 clamp(1rem,.94rem + .3vw,1.16rem)/1.42 var(--sans);color:var(--stone)}
#course .wall-band .wall-even{max-width:44ch;font:400 .9rem/1.45 var(--sans);color:color-mix(in srgb,var(--stone) 88%,transparent)}
#course .wall-even b{font-weight:700;color:var(--stone)}
#course .wall-band :is(.wall-even,.wall-micro){text-wrap:balance}  /* no lonely last word */
#course .wall-cta .wall-even{flex:0 0 100%;margin-inline:auto}  /* a row of its own under the buttons (phones: right under Join, see order below) */
#course .wall-cta .wall-host{display:flex;align-items:center;gap:12px;text-align:left;text-decoration:none;color:var(--stone);
  font:400 .84rem/1.35 var(--sans);text-shadow:0 0 .5em var(--ink),0 0 .16em var(--ink)}
#course .wall-host:has(> .host-ph[data-needs]){text-align:center}  /* no photo yet: the two lines sit centred like the rest of the hero; once the slot is a photo they sit left of it */
#course .wall-host .host-ph{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--stone);object-fit:cover;  /* an <img> when the photo exists */
  background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(238,235,230,.2) 5px 6px)}
#course .wall-host-t{display:grid;gap:1px}
#course .wall-host-t b{font-weight:800;font-size:.96rem}
#course .wall-host-t > span{color:color-mix(in srgb,var(--stone) 80%,transparent)}
#course .wall-host-go{font-weight:700;color:var(--stone);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
#course .wall-host:hover .wall-host-go{text-decoration-color:var(--stone)}
/* laptops: Host, Join and "See what's inside" share one row. The new lines cost about 100px, so the groups sit closer (for whom
   + what, the note + the refund line) and the headline gives back a little where the window is short (it was "screen - 430px",
   now the new lines are inside the 455px). */
@media (min-width:901px){
  #course .hero2--wall{gap:clamp(14px,2.2svh,22px);padding-bottom:clamp(28px,4svh,40px)}
  #course .hero2--wall .wall-h1{--h1:clamp(5.5rem,min(19cqw,25svh,calc((100svh - 455px) / 1.72)),15rem)}
  #course .wall-title{gap:clamp(12px,1.8svh,18px)}
  #course .wall-band .wall-for{margin-top:5px}  /* clear of the hand-drawn "wrong." */
  #course .wall-band .wall-what{margin-top:calc(3px - clamp(12px,1.8svh,18px))}
  #course .wall-cta{gap:8px 28px}
  #course .wall-band .wall-micro{margin-top:-6px}
}
/* tablets and phones */
@media (max-width:900px){
  #course .wall-title{gap:12px}
  #course .wall-band .wall-for{margin-top:6px}  /* clear of the hand-drawn "wrong." */
  #course .wall-band .wall-what{margin-top:-6px}
  #course .wall-band .wall-micro{margin-top:-4px}
  #course .wall-cta{gap:10px 20px}
}
@media (max-width:820px){#course .wall-cta .wall-host{flex:0 0 100%;justify-content:center}}  /* Denis on a row above the buttons where the three do not fit side by side */
/* phones: the struck-out wall behind the title is noise next to this much reading, so it goes (muted it was still there as
   ghosts; opacity:.16 instead of display:none brings it back). The title sits on two lines as on a laptop (AI WITHOUT / THE
   HYPE), which pays for the new lines; Join is one line and full width, the note sits right under it. */
@media (max-width:600px){
  #course .wall-band > .wall-hype{display:none}
  #course .hero2--wall .wall-h1{--h1:clamp(3rem,19cqw,5.4rem)}
  #course .hero2--wall{padding-top:14px;padding-bottom:24px}
  #course .stage-top{padding-top:10px;font-size:clamp(10.5px,3.1vw,.78rem)}  /* a shorter line now: it can be larger */
  #course .wall-cta .cta-sep{display:inline}
  #course .wall-cta .cta-price{display:inline}  /* "Join Guided · £849 →" on one line */
  #course .wall-cta .btn{order:1;width:100%}
  #course .wall-cta .wall-even{order:2;margin-top:-2px}
  #course .wall-even b{display:block}
  #course .wall-cta .wall-more{order:3}
}
@media (max-width:600px) and (max-height:760px){  /* a short phone (360x740, 375x667) */
  #course .hero2--wall{padding-top:10px;padding-bottom:16px}
  #course .wall-title{gap:9px}
}

/* ---------- L1C pricing (4 Oct) ---------- */
/* Everything here is scoped to #course. One block, appended last, so it wins ties with the rules above. */

/* 1. The price steps sit behind a fold on every screen: one line says why, "See every price step" opens the table (all nine rows;
   the script still marks today's row and the ones before it). The line steps aside while the table is open: its caption says it. */
#course .price-why .sched-why{grid-column:1;margin:0;padding:8px 0 0;font-size:.9rem;line-height:1.4;color:var(--graphite)}
#course .price-why .sched-why b{color:var(--ink)}
#course .sched-fold{grid-column:1;margin:0}
#course .sched-fold > summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 0;list-style:none;cursor:pointer;font:700 1rem/1.3 var(--sans);color:var(--ink)}
#course .sched-fold > summary::-webkit-details-marker{display:none}
#course .sched-fold .sf-t{text-decoration:underline;text-decoration-color:var(--human);text-decoration-thickness:2px;text-underline-offset:4px}
#course .sched-fold .sf-arr{display:inline-block;color:var(--human)}
#course .sched-fold[open] .sf-arr{rotate:180deg}
#course .sched-fold > summary:focus-visible{outline:3px solid var(--human);outline-offset:2px}
#course .price-why:has(.sched-fold[open]) .sched-why{display:none}
@media (prefers-reduced-motion:no-preference){#course .sched-fold .sf-arr{transition:rotate .2s}}
@media (min-width:901px){#course .price-why{grid-template-rows:auto 1fr}}  /* the notes beside it span both rows: the extra height goes to the second */
@media (max-width:600px){#course .pn-first{padding:10px 0;font-size:.95rem;line-height:1.5}}

/* 2. "7 days to decide": the same words, a little over half the height on a phone */
@media (max-width:600px){
  #course #pricing .seal-top{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:14px 16px}
  #course #pricing .seal-top h2{font-size:clamp(1.5rem,7.2vw,1.85rem);line-height:1}
  #course #pricing .seal-top .tick-mk{width:50px}
  #course #pricing .signoff-strip{padding:0 16px}
  #course #pricing .signoff-days{grid-template-columns:repeat(7,26px);gap:6px;margin-top:12px}
  #course #pricing .signoff-day{width:26px;height:26px}
  #course #pricing .signoff-num{top:1px;left:2px;font-size:.5rem}
  #course #pricing .signoff-day .mk--tick{left:4px;right:3px;top:8px;bottom:4px}
  #course #pricing .signoff-cap{margin-top:8px;font-size:.62rem;line-height:1.35;letter-spacing:.04em}
  #course #pricing .seal-body{padding:6px 16px 14px;gap:8px}
  #course #pricing .seal .rules li{padding:9px 0 9px 1.9em;font-size:.92rem;line-height:1.42}
  #course #pricing .seal .rules li::before{top:7px;font-size:1.15em}
  #course #pricing .guarantee-sign .sig-mk{width:150px}
  #course #pricing .seal .signoff{gap:2px 14px;padding-top:8px;font-size:.62rem;letter-spacing:.06em}
}

/* 3. "No reviews yet": the receipt and its lines a little tighter on phones and tablets */
@media (max-width:900px){
  #course .cohort-proof{gap:6px}
  #course .cohort-proof .sub-h{font-size:clamp(1.3rem,5.8vw,1.55rem)}
  #course .cohort-proof > .receipt-doc{margin-top:2px}
  #course .cohort-rc{padding:10px 14px 12px}
  #course .cohort-rc .have li{padding:4px 0}
  #course .cohort-rc .rc-foot{margin-top:6px}
}

/* 4. Getting an employer to pay: on phones the list folds under its own heading (the script closes it there; the email stays in view) */
#course .costs-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;list-style:none}
#course .costs-fold > summary::-webkit-details-marker{display:none}
#course .costs-fold > summary > .costs-h{margin:0}
@media (min-width:901px){#course .costs-fold > summary{pointer-events:none}}
@media (max-width:900px){
  #course .costs-fold > summary{cursor:pointer;border-bottom:1px solid var(--hair)}
  #course .costs-fold > summary::after{content:"+";font:700 1.15rem/1 var(--mono);color:var(--human)}
  #course .costs-fold[open] > summary::after{content:"−"}
  #course .costs-fold > summary:focus-visible{outline:3px solid var(--human);outline-offset:2px}
  #course .costs-fold[open] > ul{margin-top:10px}
}

/* 5. Free vs this course: the free options named fairly. A ruled list: name, what it is good for, what it doesn't do. */
#course .free-vs{margin-top:clamp(18px,3vw,30px)}
#course .fv-h{margin:0 0 4px;font:800 1.1rem/1.3 var(--sans)}
#course .fv-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
#course .fv-list > li{display:grid;gap:0 20px;padding:0 0 6px;border-bottom:1px solid var(--hair)}
#course .fv-list p{margin:0;font-size:.9rem;line-height:1.38}
#course .fv-head{display:none!important}
#course .fv-n{display:flex;align-items:center;gap:8px;min-height:30px;font-weight:700}
#course .fv-n .link{display:flex;align-items:center;min-height:44px}
#course .fv-free{flex:none;padding:3px 6px 2px;border:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
#course .fv-free > .src-link{left:auto;right:-5px}  /* the source label opens leftwards: the chip sits at the line's right end */
#course .fv-g,#course .fv-x{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:0 10px}
#course .fv-k{font:500 .58rem/2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
#course .fv-list > .fv-us{background:linear-gradient(var(--ink),var(--ink)) no-repeat left top/3px 100%,var(--field);padding-left:12px}  /* the ink bar is a background, not a shadow (v18_cv will not arm a chapter with a shadow at its edge) */
@media (min-width:721px){
  #course .fv-list > li{grid-template-columns:minmax(0,1.7fr) minmax(0,1.45fr) minmax(0,1fr);align-items:center;padding:2px 0}
  #course .fv-head{display:grid!important;padding:8px 0 6px;font:500 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
  #course .fv-n{min-height:44px}
  #course .fv-list > .fv-us{padding-left:0}
  #course .fv-us .fv-n{padding-left:12px}
  #course .fv-g,#course .fv-x{display:block}
  #course .fv-k{display:none}
}

/* the voice and the line under the packages: a notch smaller on phones */
@media (max-width:600px){#course .pk-voice .vo i{font-size:1.05rem}#course .pk-us{font-size:1rem}}

/* 6. The price anchor: three dated comparisons under the packages, each one a source chip ("Check this page" counts it) */
#course .pk-anchor{grid-column:1 / -1;display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--hair)}
#course .pk-anchor-h{margin:0;color:var(--graphite)}
#course .pk-anchor ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#course .pk-anchor li{font-size:.9rem;line-height:1.45}

/* 7. Payment marks (Simple Icons, CC0, inline), the instalment slot, and the door to a person */
#course .pay-marks{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:2px 0 4px;padding:0;color:color-mix(in srgb,var(--ink) 55%,transparent)}
#course .pay-marks li{display:flex;align-items:center}
#course .pm{display:block;fill:currentColor;overflow:visible}
#course .finale .pay-marks{margin-top:-10px}
#course .pay-msg:empty{display:none}
#course .pk-door{display:grid;gap:0;margin:0;font-size:.9rem;line-height:1.45;color:var(--graphite)}
#course .pk-door .link{display:block;box-sizing:border-box;min-height:44px;padding:11px 0;color:var(--ink)}
#course .finale .pk-door{margin-top:-14px;max-width:46ch}
/* laptops: the three heads share one row, so when the door is in Guided's head the other two keep the same room under their
   buttons and all three Join buttons stay level. --door-h is 0 while the door waits for its name and link (live: data-needs). */
@media (min-width:901px){
  #course .pk{--door-h:0px}
  #course .pk:has(.pk-door){--door-h:112px}
  .no-proto #course .pk:has(.pk-door[data-needs]){--door-h:0px}
  #course .pk .alt .pk-head{padding-bottom:calc(18px + var(--door-h))}
  #course .pk .offer .pk-door{min-height:calc(var(--door-h) - 8px);align-content:start}
}

/* 8. Tap targets: 44px tall for every link and button in the prices. The links inside a sentence keep their line (the
   box is 44px through padding that its negative margin takes back). */
#course a.pk-res:not([hidden]){display:inline-block;box-sizing:border-box;min-height:44px;margin-top:6px;padding:11px 0}
#course .pk-links .of-check{display:inline-flex;align-items:center;min-height:44px}
#course .mgr-row .mgr-mailto{display:inline-flex;align-items:center;min-height:44px;margin-left:.35em}
#course .seal .rules a.link,#course .costs li a.link,#course .ask-first a.link,#course .pk-anchor a.link{display:inline-block;box-sizing:border-box;min-height:44px;padding:12px 0;margin:-12px 0;vertical-align:baseline}

/* ---------- L1B compress the middle (4 Oct) ---------- */
/* One fold, used five times: the programme's weeks, "All 10", "Also in Complete", the assistant's Complete part, the seven kinds.
   Native <details>, so nothing needs script: a label you can tap (48px), a red arrow at the end that turns over when it is open,
   ruled above and below; open, the lower rule goes to ink. */
#course .l1-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:8px 2px;border-block:1px solid var(--hair);list-style:none;cursor:pointer;
  font:500 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);-webkit-tap-highlight-color:transparent}
#course .l1-fold > summary::-webkit-details-marker{display:none}
#course .l1-fold > summary::marker{content:""}
#course .l1-fold > summary:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
#course .l1-fold > summary:focus-visible{outline:3px solid var(--human);outline-offset:-3px}
#course .l1-fold[open] > summary{border-bottom:2px solid var(--ink)}
#course .l1-arr{flex:none;font:700 1.3rem/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--human);transition:transform .25s}
#course .l1-fold[open] > summary .l1-arr{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){#course .l1-arr{transition:none}}
/* a fold whose label is a sentence or a heading keeps that type, not the mono label */
#course .l1-fold--text > summary,#course .l1-fold--head > summary{font:700 1rem/1.3 var(--sans);letter-spacing:0;text-transform:none}

/* 1. the programme (#inside). A week is a row: the week, its modules and package; what you keep; a fold holding the two modules
   (cards unchanged); the live Q&A as one slim line. */
#course .pg{gap:clamp(22px,2.6vw,34px);margin-top:clamp(18px,2.2vw,30px)}
#course .pg-wk{gap:10px}
#course .pg-wk-pk{margin-left:auto}
#course .pg-wk-pk--part .pg-pkg{background:var(--ink);border-color:var(--ink);color:var(--stone)}
#course .pg-wk-keep{margin:0;max-width:64ch;font:500 1.02rem/1.4 var(--sans);color:var(--ink)}
#course .pg-wk-keep .k{display:inline;margin-right:.6em;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--human);vertical-align:.1em}
#course .pg-fold[open] > .pg-cards{margin-top:14px}
/* "What you'll be able to do": five, and "All 10", on every screen size (v2_course.js adds .short and shows the button; without
   it all ten stand). The dark band that keeps it under control opens with the rest. */
#course #abl-list.short > li:nth-child(n+6){display:none}
#course #abl-list.short ~ .abl-band{display:none}
@media (min-width:901px){#course #abl-list.short{grid-template-rows:repeat(3,auto)}}
#course .pg-all:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;width:100%;min-height:48px;margin:6px 0 0;padding:8px 2px;border:0;border-block:1px solid var(--hair);border-radius:0;background:none;
  font:500 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--ink);cursor:pointer}
#course .pg-all:not([hidden]){text-decoration:none}
#course .pg-all:not([hidden]):hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
#course .pg-all:not([hidden]):focus-visible{outline:3px solid var(--human);outline-offset:-3px}
/* "Also in Complete" */
#course .own-extra > summary b{font-weight:700}
#course .own-extra[open] > ul{margin-top:14px}

/* 2. the assistant: Complete's week-4 part is a closed fold, its heading the label (dark room: stone on ink, aqua arrow) */
#course .ast-cof{display:block}
#course .ast-cof > summary{min-height:56px;padding:14px 2px;border-block:0;border-top:1px solid rgba(238,235,230,.22);text-transform:none;letter-spacing:0;color:var(--stone)}
#course .ast-cof > summary:hover{background:rgba(238,235,230,.06)}
#course .ast-cof > summary:focus-visible{outline-color:var(--aqua)}
#course .ast-cof > summary .ast-co-h{flex:1;margin:0}
#course .ast-cof .l1-arr{color:var(--aqua)}
#course .ast-cof[open] > summary{border-bottom:1px solid rgba(238,235,230,.22)}
#course .ast-cof .ast-co{margin-top:clamp(14px,1.6vw,20px);padding-top:0;border-top:0}
@media (min-width:1000px){
  #course .ast-cof{grid-area:co}  /* where .ast-co sat in .ast-in's grid */
  #course .ast-cof .ast-stamp{grid-row:1}  /* the heading left the grid: the stamp sits beside the sentence */
}

/* 3. the check story: the seven kinds fold under their heading; the four-step line, the Deloitte case and the way on stay in view */
#course .kinds{margin-top:clamp(18px,3vw,36px)}
#course .kinds-fold > summary{min-height:56px;padding:8px 2px}
#course .kinds-fold > summary .sub-h{flex:1;margin:0}
#course .kinds-fold[open] > .kinds-list{margin-top:18px}

#course .pg-when-all{display:none}
/* the live Q&A row, phones and tablets: the title and its "day and hour" on one line, the sentence under them, the chips last */
@media (max-width:900px){
  #course .pg-qa{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;padding:6px 10px 7px}
  #course .pg-qa-t{display:contents}
  #course .pg-qa-t b{order:1;margin:0;font-size:.95rem}
  #course .pg-when{order:2;justify-self:auto}
  #course .pg-qa-d{order:3;flex:1 0 100%;font-size:.85rem;line-height:1.36}
  #course .pg-qa .pg-chips{order:4;flex:1 0 100%}
}

/* "Is this course for you?": the two statistics are gone; on phones the paragraphs and the two lists set a little tighter (the lists use the compact rows the webinar's lists use) */
@media (max-width:900px){
  #course .fit-intro{gap:7px;margin:14px 0 18px}
  #course .fit-intro > p{font-size:.95rem;line-height:1.42}
  #course .fit-intro > .fit-lead{font-size:1.3rem;line-height:1.2}
  #course .fit-show-h{margin-top:2px}
  #course .fit-show{gap:5px;margin-top:-2px;font-size:.95rem;line-height:1.4}
  #course .fit-show .rc-pkg{margin-top:2px}
  #course .fit-intro > .muted{font-size:.9rem;line-height:1.42}
  #course .fit-biz{margin-top:4px}
  #course .fit-biz-q{margin-top:-4px}
  #course .fit-biz-q .vo i{font-size:1.02rem;line-height:1.38}
  #course .fit{gap:18px}
  #course .fit-list{margin-top:6px}
  #course .fit-list li{grid-template-columns:2.2rem minmax(0,1fr);gap:8px;padding:5px 0;font-size:.93rem;line-height:1.36}
  #course .fit-mk{width:1.8rem;height:1rem}
  #course .fit-list--no .fit-mk{height:.7rem;margin-top:.4rem}
}

/* phones: nothing removed, the gaps smaller and the type a step down (each rule measured in one browser run: lab.py) */
@media (max-width:560px){
  #course :is(#inside,#fit).sec{padding-block:26px}
  #course #inside .chapter-h{font-size:2.2rem}  /* the size the page's other long headings use (.h2s) */
  #course section.desk.sec{padding-top:30px}  /* its lower padding stays the one set for the story that goes on in #incoming */
  /* the programme */
  #course #inside .legend-line{margin-top:8px;font-size:.95rem;line-height:1.45}
  #course .pg-lead{margin-top:12px;font-size:1.06rem;line-height:1.28}
  #course .pg{gap:14px;margin-top:12px}
  #course .pg-wk{gap:6px}
  #course .pg-wk-head{align-items:center;gap:5px 12px;padding-top:4px}
  #course .pg-wk-pk{order:2}
  #course .pg-wk-head h3{order:3;flex:1 0 100%;font-size:1.05rem}
  #course .pg-wk-keep{font-size:.92rem;line-height:1.33}
  #course .l1-fold > summary{min-height:46px;padding:6px 2px}
  #course #inside > .mt.muted{margin-top:12px;font-size:.86rem;line-height:1.4}
  #course .pg-when-all{display:inline}
  /* the Q&A row: its title and its two chips on one line, the sentence under them; the day and hour are said once, in the line under the weeks */
  #course .pg-qa{gap:3px 8px;padding:6px 10px 7px}
  #course .pg-qa .pg-when,#course .pg-qa .pg-live{display:none}
  #course .pg-qa .pg-chips{order:2;flex:0 1 auto}
  #course .abl .sub-h{margin-top:22px;margin-bottom:6px;font-size:1.25rem}
  #course .abl-lead{font-size:.85rem;line-height:1.38}
  #course .abl-list{margin-top:8px}
  #course .abl-list > li{grid-template-columns:1.8em minmax(0,1fr);gap:1px 8px;padding:6px 0}
  #course .abl-list > li::before{font-size:1.2rem}
  #course .abl-list b{font-size:.97rem;line-height:1.28}
  #course .abl-list span{font-size:.82rem;line-height:1.36}
  #course .pg-all:not([hidden]){margin-top:2px}
  #course .included.own-inc{margin-top:14px;gap:8px}
  #course .own-inc > p{font-size:1rem;line-height:1.4}
  #course .prog-buy{margin-top:14px;padding-top:14px;gap:10px 18px}
  #course .prog-buy p{font-size:1rem;line-height:1.35}
  /* the assistant */
  #course .ast{padding-top:20px;padding-bottom:16px}
  #course .ast-in{gap:9px}
  #course .ast-h{font-size:1.7rem;margin-top:8px}
  #course .ast-lead{margin-top:8px;font-size:.93rem;line-height:1.4}
  #course .ast-lbl{margin-bottom:8px}
  #course .ast-board{padding:12px 11px}
  #course .ast-big{margin:6px 0 10px;font-size:1.35rem}
  #course .ast-rows{gap:6px}
  #course .ast-row{padding:7px 10px;gap:4px 10px}
  #course .ast-sum{font-size:.85rem;line-height:1.35}
  #course .ast-sheet{margin:6px 2px 2px;padding:10px 11px 12px}
  #course .ast-st{margin-bottom:8px}
  #course .ast-draft{gap:5px;font-size:.9rem;line-height:1.38}
  #course .ast-chips{margin-top:8px}
  #course .ast-acts{margin-top:10px}
  #course .ast-foot{margin-top:10px}
  #course .ast-voice{gap:4px}
  #course .ast-quote{gap:8px}
  #course .ast-quote p{font-size:.95rem;line-height:1.28}
  #course .ast-ours{font-size:1.2rem}
  #course .ast-pts{gap:4px}
  #course .ast-pt{padding-top:6px}
  #course .ast-pt > p{font-size:.88rem;line-height:1.42}
  #course .ast-ask{margin-top:10px;gap:5px}
  #course .ast-cap{font-size:.82rem;line-height:1.45}
  #course .ast-buy{margin-top:14px}
  #course .ast-cof > summary{min-height:52px;padding:10px 2px}
  #course .ast-cof .ast-co-h{font-size:1.05rem}
  /* the check story */
  #course .desk .ba-module{margin-top:18px;padding-top:12px}
  #course #incoming.sec{padding-bottom:24px}
  #course #lp2-in{font-size:1.3rem}
  #course .in-rows{margin-top:14px}
  #course .in-rows li{padding:9px 0}
  #course .in-case{font-size:.97rem}
  #course .in-how{font-size:.9rem;line-height:1.4}
  #course .kinds-fold > summary .sub-h{font-size:1.2rem}
  #course .kinds-cap,#course .in-real{margin-top:12px;font-size:.93rem;line-height:1.45}
}



/* ---------- L2B (5 Oct) ---------- */
/* Two more folds, both the page's .l1-fold (L1B, above): a bar at least 46px tall, a red arrow that turns over when it opens, a hairline above and
   below, the lower rule in ink when open. */
/* 1. "Free courses vs this one": the comparison sits behind its label (the old heading is now the label); the list opens under it */
#course .free-vs > summary > .fv-h{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
#course .free-vs > .fv-list{border-top:0}  /* the open summary already ends in the ink rule */

/* 2. The FAQ's four groups are folds: the title and its question count; "Money and packages" ships open, the others closed. The bars sit one
   under another and share a hairline. One column at every width: in two columns one side would hold two bars and the other the open group. */
#course .ledger{grid-template-columns:minmax(0,1fr);row-gap:0;max-width:820px}
#course .lg-col{gap:0}
#course .lg-group > summary > .fg-h{margin:0;padding:0;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
#course .lg-group + .lg-group > summary,#course .lg-col + .lg-col > .lg-group:first-child > summary{border-top:0}
#course .lg-group .lg-a p{max-width:70ch}

/* 3. The receipt block, laptops: with its heading's own words gone, the struck line and the sentence under it sit together, level with the receipt */
@media (min-width:901px){
  #course .cohort-proof > .sub-h{align-self:end}
  #course .cohort-proof > p{align-self:start}
}

/* ---------- L2A (5 Oct) ---------- */
/* 1. Desire before price. "The course in short" opens with the promise and what you walk into a review with (moved from "Is this
   course for you?"), then the three verbs, then the price card. On phones the card now follows the whole block (it sat after the
   lead, ahead of the verbs). The spacing is taken from the stack's own gap, so it holds in both layouts. */
@media (max-width:900px){
  #course .hero2-more > .stack{display:grid}
  #course .hero2-more > .pricecard{order:0}
}
#course .hero2-more .stack > .fit-show-h{margin-top:calc(18px - var(--gap,20px))}
#course .hero2-more .stack > .fit-show{margin-top:calc(10px - var(--gap,20px));grid-template-columns:minmax(0,1fr)}
#course .hero2-more .stack > .muted{margin-top:calc(12px - var(--gap,20px));max-width:56ch;font-size:.95rem;line-height:1.45}
#course .hero2-more .stack > :is(.fit-show-h,.muted){text-wrap:balance}  /* no lonely "to show:" or "keep them." */
/* 2. The price card: the reservation line for a company, under "Next: ..." (own checkout only: data-mode="custom", shown by v16_night.js) */
#course .pc-co{margin:0;font-size:.9rem;line-height:1.45;color:var(--graphite)}
#course .pc-co a.link{display:inline-block;box-sizing:border-box;min-height:44px;padding:12px 0;margin:-12px 0;vertical-align:baseline}
@media (min-width:901px) and (max-width:1100px) and (max-height:799px){  /* the card is ~75px taller with that line: in a narrow, short window it would be taller than the window while it sticks */
  #course .hero2-more .pricecard{position:static}
}
/* 3. The assistant: two captions share the one grid cell the first one had */
#course .ast-caps > .ast-cap + .ast-cap{margin-top:6px}
@media (min-width:1000px){#course .ast-caps{grid-area:cap}}
/* 4. The teacher: "How this course was made" is a closed fold now (the page's .l1-fold), last in its column as the box was */
#course .t-made{max-width:62ch}
#course .t-made > p{margin:14px 0 0;font-size:.95rem;line-height:1.55}
#course .t-made a.link{display:inline-block;box-sizing:border-box;min-height:44px;padding:12px 0;margin:-12px 0;vertical-align:baseline}
@media (max-width:900px){#course .teacher--full .t-main > .t-col > .t-made{order:1}}
/* 5. The hero: the for-whom line is a sentence longer, so it sets in balanced lines (two on a laptop). The headline gives back the 26px
   that line cost where the window is short (the "rest of the hero" was 455px, L1A), so the risk line stays on a laptop's first screen */
#course .wall-band .wall-for{text-wrap:balance}
@media (min-width:901px){
  #course .hero2--wall .wall-h1{--h1:clamp(5.5rem,min(19cqw,25svh,calc((100svh - 481px) / 1.72)),15rem)}
}
@media (max-width:600px) and (max-height:760px){  /* a short phone (360x740): the two longer lines a step smaller, the risk line stays in view */
  #course .wall-band .wall-for{font-size:.96rem;line-height:1.36}
  #course .wall-band .wall-what{font-size:.92rem;line-height:1.38}
}

/* ---------- L3 (5 Oct) ---------- */
/* 1. "What you'll be able to do": the quotes line sits under the list's five visible items, before "All 10", in the list's own small type (.abl-list span) */
#course .abl-q{margin:12px 0 0;max-width:72ch;font:400 .86rem/1.4 var(--sans);color:var(--graphite)}
@media (max-width:560px){#course .abl-q{margin-top:8px;font-size:.82rem;line-height:1.36}}
/* 2. The teacher: "How this course was made" is a plain box again (the L2A fold's type and 44px link stay), straight after the story paragraph inside .t-bio,
   so the phone re-ordering of the column's own children does not move it */
#course .t-made > p{margin:0}
/* 3. The record and the marketing paragraph sit behind one closed fold (the page's .l1-fold: its summary is the old "The record" label). Open, the summary's
   ink rule already starts the list, so the list's own top rule goes; the paragraph keeps the list's measure */
#course .t-rec{max-width:62ch}
#course .t-rec > .t-facts{border-top:0}
#course .t-rec > .t-own{margin-top:14px}

/* ===== 5 Oct: the teacher's three figures, as on the webinar (v19_bot.css #register .t-figs) ===== */
#course .t-figs{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:620px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
#course .t-figs li{display:grid;align-content:start;gap:6px;padding:14px 12px 14px 0}
#course .t-figs li + li{padding-left:clamp(12px,1.6vw,20px);border-left:1px solid var(--hair)}
#course .t-fig{font:850 clamp(2rem,1.2rem + 1.8vw,3rem)/.9 var(--display);font-stretch:112%;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
#course .t-figs li:last-child .t-fig{color:var(--human)}
#course .t-fig-l{font-size:.68rem;letter-spacing:.08em;line-height:1.3;color:var(--graphite)}
@media (max-width:420px){#course .t-fig{font-size:clamp(1.6rem,7.6vw,2rem)}#course .t-fig-l{font-size:.62rem}}

/* v17_tilt: the documents are paper you can pick up. Documents tilt toward the pointer like a sheet lifted
   off a desk; the shadow shifts the opposite way. v17_tilt.js writes two custom properties, --tx/--ty
   (-1..1, the pointer's position inside the element), via one rAF per pointermove, and adds .v17-tilt-on to
   <html> only when (pointer:fine), motion is allowed and the URL has no ?shot=1 - everywhere else neither
   selector below matches anything, so the computed transform on these elements stays "none".
   Targets: the two mistake-hunt documents (.hunt .doc, webinar) and .monday-card (webinar, built at runtime
   by v16_monday.js - the script's delegated listeners pick it up whenever it appears); the manager letter
   (#mgr-doc) and the sign-off card (#redline - it already gets .doc's corner marks and hard shadow,
   v13_sections.css/v5_brand.css, so the whole card is "the paper", tabs/slider included, same as .doc's own
   sign/back buttons) on the course page. Not the ticket, the printer-fed price card, the envelope or the
   hero draft: they already have their own transforms or gestures (see v17_tilt.js's header for why).
   The shadow keeps whatever hard offset the element already has (v17_tilt.js reads it once, on pointerenter,
   and rewrites just the offset into a calc() that reads --tx/--ty), so from then on both rules here react to
   the same two custom properties with no extra per-frame JS. */
/* coordinator: only while the pointer is on the sheet or it is settling back (.tilting): at rest there is no
   transform at all, so no compositor layer is kept for four documents nobody is touching */
.v17-tilt-on .hunt .doc.tilting,
.v17-tilt-on #mgr-doc.tilting,
.v17-tilt-on #redline.tilting,
.v17-tilt-on .monday-card.tilting{
  transform:perspective(1400px) rotateX(calc(var(--ty, 0) * -2.2deg)) rotateY(calc(var(--tx, 0) * 2.8deg)) translateZ(0);
}
/* only while resting (pointerleave, or forced flat - scroll/resize/the manager letter mid-fold): eases back
   to flat over 400ms. Never on while the pointer is actively moving over the element, so it tracks with no lag. */
.v17-tilt-on .hunt .doc.tilt-rest,
.v17-tilt-on #mgr-doc.tilt-rest,
.v17-tilt-on #redline.tilt-rest,
.v17-tilt-on .monday-card.tilt-rest{
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

/* v17 receipt: the thank-you view prints a small till-receipt of what the visitor actually did on this page --
   the mistake hunt score, their sign/send-back call, how many sources they opened, the session they picked.
   A paper strip with a torn zigzag bottom (CSS mask, no image), mono type, slightly rotated, like something
   that just came off a small printer. Printed line by line by v17_receipt.js; this stylesheet only has to make
   sure nothing stays invisible if that script never runs (no JS, reduced motion, print, etc.).
   Everything is namespaced ty-receipt-*: v13_sections.css/v6_editorial.css already own a plain .receipt/.receipts
   class for an unrelated card grid, so this stays well clear of it (id #ty-receipt carries the card's own look). */

.ty-receipt-wrap{display:flex;justify-content:center}

#ty-receipt{
  --tooth:16px;
  position:relative;
  width:min(340px,100%);
  margin:0 auto;
  padding:18px 20px calc(16px + var(--tooth) / 2);
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink);
  transform:rotate(-1deg);
  font-family:var(--mono);
  /* the torn edge: a plain rect for the whole card except the bottom half-tooth, unioned with a row of
     downward-pointing triangles (conic-gradient, one per tile) confined to that bottom strip -- together they
     read as a solid card with a zigzag bite taken out of its lower edge. Border and background are cut by it too. */
  -webkit-mask:
    linear-gradient(#000,#000) top / 100% calc(100% - var(--tooth) / 2) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) calc(var(--tooth) / 2) repeat-x;
  mask:
    linear-gradient(#000,#000) top / 100% calc(100% - var(--tooth) / 2) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) calc(var(--tooth) / 2) repeat-x;
}

.ty-receipt-head{text-align:center}
.ty-receipt-brand{margin:0;font:700 .92rem/1.3 var(--mono);letter-spacing:.05em}
.ty-receipt-gt{color:var(--human)}
.ty-receipt-sub{margin:2px 0 0;font:500 .66rem/1.3 var(--mono);letter-spacing:.13em;color:var(--graphite)}

.ty-receipt-rule{height:0;margin:12px 0;border-top:1px dotted color-mix(in srgb,var(--ink) 45%,transparent)}

.ty-receipt-lines{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.78rem}
.ty-receipt-line{display:flex;align-items:flex-end;gap:.3em;clip-path:inset(0 100% 0 0)}
.ty-receipt-label{order:0;white-space:nowrap}
.ty-receipt-value{order:2;white-space:nowrap;font-weight:700;padding-left:.3em}
.ty-receipt-line::after{content:"";order:1;flex:1 1 auto;min-width:.6em;align-self:flex-end;margin-bottom:.3em;
  border-bottom:1px dotted color-mix(in srgb,var(--ink) 45%,transparent)}

/* printing: each line clips in left to right, six dot-matrix-ish steps, staggered 120ms apart by --i (set in JS) */
#ty-receipt.printing .ty-receipt-line{clip-path:inset(0 0 0 0);transition:clip-path .12s steps(6,end);transition-delay:calc(var(--i,0) * .12s)}
#ty-receipt.printed .ty-receipt-line{clip-path:inset(0 0 0 0)}

/* the print head: a thin bar that steps down beside the lines as they print (moved via JS translateY) */
.ty-receipt-ph{position:absolute;left:0;right:0;top:0;height:2px;background:var(--aqua);pointer-events:none;
  transition:transform .12s steps(6,end)}

.ty-receipt-foot{margin:0;text-align:center}
.ty-receipt-foot-text{display:inline-block;font-family:var(--script);font-weight:400;font-style:normal;color:var(--human);
  font-size:1.4rem;line-height:1.25;clip-path:inset(0 100% 0 0)}
.ty-receipt-foot-text.wiping{clip-path:inset(0 0 0 0);transition:clip-path .5s linear}
.ty-receipt-foot-text.wiped{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .ty-receipt-line,.ty-receipt-foot-text{transition:none!important;clip-path:inset(0 0 0 0)!important}
  .ty-receipt-ph{display:none!important}
}

/* v18: the teacher block, a real one. Who they are and what they do with AI; facts you can check, each with where to
   check it, ticked by the pen as you read; their own hand over / check / decide; a video (a placeholder until the file
   comes: self-hosted, poster first, nothing loads before a click). The photo stays in view while the column scrolls. */
.teacher--full{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(28px,5vw,80px)}
.teacher--full > .t-h{grid-column:1 / -1;margin:0}  /* the section's heading first, over both columns (and over the photo on a phone) */
.teacher--full .t-side{display:grid;gap:14px;align-content:start}
@media (min-width:901px){.teacher--full .t-side{position:sticky;top:clamp(84px,12vh,128px)}}
.teacher--full .photo{aspect-ratio:4/5;width:100%}
.t-where{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}

.t-main{display:grid;gap:clamp(18px,2.2vw,26px);min-width:0}
.t-name{margin:0;font:900 clamp(2.5rem,1.3rem + 3.6vw,4.8rem)/.9 var(--display);font-stretch:68%;letter-spacing:-.004em;
  text-transform:uppercase;color:var(--ink)}
.t-name .ph{font-size:.5em;letter-spacing:0;text-transform:none;vertical-align:middle}
.t-role{margin:-6px 0 0;font:700 clamp(1.15rem,1rem + .55vw,1.45rem)/1.35 var(--sans);max-width:40ch;color:var(--ink)}
.t-bio{display:grid;gap:12px;max-width:60ch}
.t-bio p{margin:0;font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.6}

/* facts you can check: a pen tick each (drawn when seen, or by the pen as it passes), and where to check it underneath */
.t-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);max-width:62ch}
.t-facts li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start;padding:12px 0;border-bottom:1px solid var(--hair);
  font-size:1.02rem;line-height:1.45}
.t-tick{grid-row:1 / span 2;width:26px;height:22px;margin-top:1px}
.t-tick > .mk{width:100%;height:100%}
.t-facts small{grid-column:2;font-size:.68rem;letter-spacing:.06em;color:var(--graphite)}
/* the record: the year over each line in mono; the last line, now, in the pen's red */
.t-yr{display:block;margin-bottom:3px;font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.t-record li:last-child .t-yr{color:var(--human)}
.t-main > .t-kicker,.t-col > .t-kicker{margin-bottom:-10px}

/* hand-drawn signatures (webinar): a real hand, drawn by GPT and traced (brand/codex/out_signature, trace_mark.py);
   the same wipes draw them as drew the script font. The hero's "yours." keeps the font's box, so the pen starts at its end */
.sig-word--hand{line-height:0}
.sig-word--hand > .mk{width:2.15em;height:auto;aspect-ratio:1300/290;color:inherit}  /* "minutes." (hand C, like the old "yours.") */
.sig-word--hand path{stroke:currentColor;stroke-width:22;stroke-linejoin:round}  /* a felt-tip next to the poster caps (the user's pick: the boldest); scales with the word */
/* the hand already rises, so less turn; it signs just after "IS", a little under the line; on a phone, under the line */
.stage-h1 .sig-word--hand{transform:rotate(-3deg);margin:-.36em 0 -.56em .95em}  /* its own line under "check it in", signed like a name under typed text */
@media (max-width:560px){.stage-h1 .sig-word--hand{margin-top:-.26em;margin-bottom:-.5em;margin-left:.7em}}
.host-sign .hs-mk--denis{width:min(340px,80%);height:auto;padding-bottom:0}
.host-sign .hs-mk--denis > .mk{height:auto;aspect-ratio:1289/394;margin-bottom:-12px}  /* the signature crosses its line */
.sig-mk--denis{width:min(360px,82%);aspect-ratio:1289/394}

/* their own method, in the brand's three voices (dots / condensed / script), on paper */
.t-method{display:grid;gap:8px;max-width:62ch}
.t-kicker{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.verbs--paper{border-top:1px solid var(--hair)}
.verbs--paper li{border-bottom:1px solid var(--hair);padding:12px 0;color:var(--ink)}
.verbs--paper li:nth-child(3) b{color:var(--human)}

/* the video: a 16:9 paper frame like the other media placeholders (ink play mark, the pen's bracket in the corner); what it
   will show is written underneath, outside the frame, so nothing overlaps on a phone */
.t-video{margin:0;display:grid;gap:10px}
.t-frame{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:var(--panel);overflow:hidden}
.t-frame .mk--bracket{position:absolute;left:18px;top:18px;width:auto;height:40%;aspect-ratio:93/183;color:var(--human)}
.t-play{width:clamp(56px,7vw,84px);aspect-ratio:1;border-radius:50%;background:var(--ink);position:relative;
  box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 22%,transparent)}
.t-play::after{content:"";position:absolute;left:39%;top:30%;width:0;height:0;border-style:solid;border-width:.8em 0 .8em 1.3em;
  border-color:transparent transparent transparent var(--stone);font-size:clamp(14px,1.8vw,21px)}
.t-frame .cap{position:absolute;left:0;bottom:0}
.t-vnote{margin:0;font-size:.72rem;line-height:1.5;letter-spacing:.04em;color:var(--graphite);max-width:62ch}
.t-legal{margin:0}

/* one column below 900px: the photo on top (it doesn't stick there), then the column */
@media (max-width:900px){
  .teacher--full{grid-template-columns:minmax(0,1fr)}
  .teacher--full .t-side{position:static}
  .teacher--full .photo{max-width:440px}
}
@media (max-width:560px){
  .teacher--full .photo{max-width:none}
  .t-vnote{font-size:.68rem}
}

/* ---------- the webinar hero, rewritten for a first-time visitor (2026-09-30): what it is, what you get, the pains it answers.
   "AI writes it in seconds." is the machine's line (hollow); "Learn to check it in" is the person's (solid); "minutes." is
   signed in red. Five lines instead of four, so the poster steps down a size (the form stays on a laptop's first screen) */
.stage .stage-h1{--h1:clamp(2.7rem,min(17.2cqw,10.2svh),7.6rem)}
.stage-h1 .dots-word{letter-spacing:-.04em}
.stage-top{align-items:baseline;font-size:.8rem;color:var(--stone)}
.stage-top > .stage-offer{display:inline-flex;align-items:center;gap:.6em;font:700 .8rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.stage-top > .stage-offer::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)}
.stage-lead{margin-top:.2em;max-width:40ch;color:var(--stone)}
/* the pains it answers: a question in the visitor's words, the answer in bold, a pen tick drawn as each comes into view */
.stage-pains{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-width:54ch}
.stage-pains li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;
  font-size:clamp(.94rem,.9rem + .15vw,1.02rem);line-height:1.4;color:color-mix(in srgb,var(--stone) 72%,transparent)}
.stage-pains .sp-tick{width:20px;height:15px;margin-top:3px}
.stage-pains .sp-tick > .mk{width:100%;height:100%;color:var(--signal)}
.stage-pains b{font-weight:700;color:var(--stone)}
/* phones: the form comes before the pains, so the button stays on the first screen */
@media (max-width:560px){
  .stage-copy:not(:has(.hunt-first)) > .stage-pains{order:3;margin-top:22px}
}
/* short laptop windows (a 1366x768 screen leaves ~650 px to the page): the hero packs tighter so the button can still show */
@media (min-width:901px) and (max-height:820px){
  .stage .stage-h1{--h1:clamp(2.4rem,min(17.2cqw,9.4svh),7.6rem)}
  .stage-copy{gap:11px}
  .stage-lead{font-size:1rem;line-height:1.45}
  .stage-pains{gap:3px}
  .stage-pains li{font-size:.9rem;line-height:1.35}
}

/* ---------- loop round 1 (2026-09-30 night): "Learn AI for work. Know when it's wrong." and the page reordered ---------- */
.sig-word--wrong > .mk{width:1.62em;aspect-ratio:1072/279}
.stage-h1 .sig-word--wrong{margin:-.64em 0 -.5em 1.05em}
@media (max-width:560px){.stage-h1 .sig-word--wrong{margin-top:-.62em;margin-left:.95em}}
/* the game: who it is for, before the document */
.hunt-rel{margin:14px 0 0;max-width:62ch;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.5}
/* the reveal: what the five cost */
.draft-sum{display:block;margin-bottom:6px;font-weight:700}
/* pain cards: the pen's answer under what people say */
.painlist .pl-ans{grid-column:2;margin-top:4px;font:700 .98rem/1.35 var(--sans);color:var(--human)}
.painlist .pl-ans::before{content:"→ "}
.pains-stat{margin:0;font-size:.95rem}
/* what you'll see: what you keep, by the button */
.leave-with{margin:22px 0 16px;max-width:72ch;line-height:1.55}
.rules-cta{margin:6px 0 10px;font-weight:700}
.closer-sub{margin:.4em 0 0;max-width:46ch;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.45}

/* ---------- loop round 2: the game shows its sources, the reveal waits for the pen, the host says the awkward part ---------- */
/* the files AI was given, so each mistake can be checked, not guessed (panel r1: 8 of 9 couldn't find them without) */
.doc-src{margin:12px 0 6px;padding:10px 14px 12px;background:var(--field);border-left:3px solid var(--bot)}
.doc-src > p{margin:0 0 6px;font:500 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.doc-src ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.doc-src li{max-width:none;font-size:.92rem;line-height:1.4}
.doc-src b{margin-right:.45em;font:700 .72rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--bot)}
/* phones: one line per quote row, "20 × €11.00 ... after 5% €209.00", about a screen shorter */
@media (max-width:560px){
  #quote-doc tbody tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;column-gap:8px}
  #quote-doc td:first-child{grid-column:1/-1}
  #quote-doc td:nth-child(2),#quote-doc td:nth-child(3),#quote-doc td:nth-child(5){display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;justify-content:flex-start}
  #quote-doc td:nth-child(2)::before{content:none}
  #quote-doc td:nth-child(3)::before{content:"×";font:inherit;letter-spacing:0;text-transform:none;color:var(--graphite)}
  #quote-doc td:nth-child(5){justify-content:flex-end;text-align:right}
  #quote-doc td:nth-child(5)::before{content:"after 5%"}
}
/* the reveal: the total's verdict appears once the pen has signed, not before */
.rv-next{margin:0;max-width:46ch;font-weight:700;line-height:1.45}
/* sources you can see, not only in "check this page" mode */
.src-note{white-space:nowrap;font-size:.88em}
/* the host: the online-marketing part of the record, said out loud */
.t-own{margin:0;max-width:60ch;font-size:clamp(.98rem,.95rem + .15vw,1.06rem);line-height:1.55;color:var(--graphite)}
/* the hero's small print is the most honest line on the screen: easier to read */
#register .stage #reg-note{color:color-mix(in srgb,var(--stone) 90%,transparent)}
/* thank-you: the extras fold away */
.ty-more > summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none}
.ty-more > summary::-webkit-details-marker{display:none}
.ty-more > summary::before{content:"+ ";color:var(--human)}
.ty-more[open] > summary::before{content:"− "}
/* the host, until the photo exists (live): no empty photo column; the story left, the record right */
.t-col{display:grid;gap:clamp(18px,2.2vw,26px);align-content:start;min-width:0}
@media (min-width:901px){
  .no-proto #register .teacher--full{grid-template-columns:minmax(0,1fr)}  /* webinar only: the course keeps its own teacher layout */
  .no-proto #register .teacher--full .t-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:start}
}
/* the longer "try it first" link wraps (v16_night.css keeps it on one line; on phones that pushed the form past the edge) */
#register .reg-note .hunt-try{white-space:normal}
/* loop round 3: the rules say what the struck-out tropes are */
.tropes-cap{margin:0 0 8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
/* round 3 H1 "AI writes it in seconds. Learn to tell when it's wrong.": "Learn to tell" on one line, "wrong." signs after "it's" */
.stage .stage-h1{--h1:clamp(2.7rem,min(15cqw,10.2svh),7.6rem)}
@media (min-width:901px) and (max-height:820px){.stage .stage-h1{--h1:clamp(2.4rem,min(15cqw,9.4svh),7.6rem)}}
.stage-h1 .sig-word--wrong{margin:-.3em 0 -.5em 2.1em}
@media (max-width:560px){.stage-h1 .sig-word--wrong{margin-top:-.28em;margin-left:1.2em}}
@media (min-width:561px){.stage-h1 .sig-word--wrong{margin:-.62em 0 -.5em 2.1em}}  /* wider screens: on the same line, right after "it's" */
.fx-on .draft:not(.signed) .draft-replay{visibility:hidden}  /* "Watch it again" once there is something to watch again */

/* ---------- loop round 4: the owner's point on line 1, the puzzle as a button, the method once, rules after the reveal ---------- */
#register .stage #reg-note{color:var(--stone);font-size:.95rem}  /* the honest line is body text, not small print */
.stage .reg-try{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.95rem;color:var(--stone)}
.stage .reg-try .btn--ghost{color:var(--stone);background:transparent;border-color:color-mix(in srgb,var(--stone) 70%,transparent);box-shadow:none}
/* block 4 on phones: labels inline, the sources table left to the game above (about a screen shorter) */
@media (max-width:560px){
  #register .demo .k{display:inline;margin-right:.35em}
  #register .demo .srcs{display:none}
}
/* the pains take in "for you / not for you"; their sources open */
#register .after .fit{margin:22px 0 10px}
#register .after .fit h3{margin:0 0 10px}
.pains-src{margin:0;font-size:.85rem}
.pains-stat{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.45}  /* round 5: "You're not behind." reads as a line, not small print */
/* round 5: the reveal's email reads as an email; the pen corrects inside the sentences */
.draft-mail .dm{margin:0 0 .7em;font:400 1rem/2.35 var(--sans);color:var(--ink)}
.draft-mail .dm:last-child{margin-bottom:0}
.draft-mail .dw{font-weight:700}
.draft-mail .dfix{margin-left:.3em;font-size:.95rem}
@media (max-width:560px){.draft-mail .dm{font-size:.95rem;line-height:2}}
/* the corrections are written above the struck words, like a proofreader's; no tags over the lines */
.draft-mail .dw{position:relative}
.draft-mail .dw::after{display:none}
.draft-mail .dw > .dfix{position:absolute;left:50%;bottom:74%;margin:0;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;font-size:.9rem;line-height:1}
.fx-on .draft-mail .dw > .dfix{opacity:0;transform:translate(-50%,6px) rotate(-3deg)}
.fx-on .draft-mail .dw > .dfix.on{opacity:1;transform:translateX(-50%) rotate(-3deg)}
@media (max-width:560px){.draft-mail .dm{line-height:2.35}}
.draft-cap .draft-sum{font-size:clamp(1rem,.96rem + .25vw,1.15rem);line-height:1.45;color:var(--stone)}  /* the reveal's best sentence, readable */

/* ---------- loop round 5 ---------- */
.hunt-tabs .hunt-pick{align-self:center;margin-right:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.s4-kick{margin:0 0 10px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
#register .stage #reg-note{font-size:clamp(1rem,.96rem + .2vw,1.1rem)}  /* the honest line at the sub's size */
@media (max-width:560px){
  #register .take-more{display:none}  /* phones: the checklist's five items live in the guide */
  #quote-doc .doc-src{position:sticky;top:0;z-index:4;box-shadow:0 10px 14px -12px rgba(0,0,0,.4)}  /* the files stay in view while the table scrolls */
}

/* ---------- loop round 6: the must-fix list before shipping ---------- */
.rules .tier-list{display:grid;gap:4px;margin:8px 0}
.rules .tier-list > span{display:block}
@media (max-width:560px){.draft-mail .dw > .dfix{font-size:1rem}}  /* the pen's notes readable on phones */

/* ---------- loop round 8 ---------- */
#register .hunt-dock{flex-wrap:wrap}
#register .hunt-dock .hd-toast:not(:empty){order:-1;flex-basis:100%;white-space:normal;overflow:visible;text-overflow:clip}  /* the game's feedback on its own row */
/* QA after web-p3: the corner controls never sit on the footer's last lines; the pen's notes clear the struck words on phones;
   chapter headings break evenly (no single word alone on the last line) */
@media (min-width:901px){#register .foot,#thanks .foot{padding-bottom:88px}}
@media (max-width:560px){.draft-mail .dm{line-height:2.7}.draft-mail .dw > .dfix{font-size:.95rem;bottom:70%}}
#register .chapter-h,#register .closer h2{text-wrap:balance}
/* the full stop without CSS scroll timelines (Firefox): the same track and sticky screen as the scroll-timeline version
   (v13/v16); v16_night.js sets the drop's scale and the words' fade each frame */
.zd-js .zoom-dot{height:280vh}
.zd-js .zd-stick{position:sticky;top:0;height:100vh;padding:0 16px}
@media (max-width:1099px){.zd-js .zd-stick{height:100svh}}
.zd-js .zd-dot{will-change:auto}  /* repainted at its real size each frame, so the edge stays sharp */

/* ---------- third game document: the AI meeting summary ---------- */
#meet-doc .hunt-stamp{top:auto;bottom:clamp(36px,6vw,60px)}  /* as the email: the stamp clears the short body */

/* ---------- the verbs band rolls in every browser (was scroll-linked only, so it stood still in Firefox) ---------- */
#register .kin-line{padding-right:.34em}  /* three equal periods: one third of the line is one "Hand over. Check. Decide." */
@media (prefers-reduced-motion:no-preference){
  #register .kin-line{animation:v19-roll 42s linear infinite;animation-timeline:auto;animation-range:normal}
}
@keyframes v19-roll{from{translate:0 0}to{translate:-33.3333% 0}}

/* ---------- our rules as a ledger: each trick as other webinars show it, struck by the pen; our rule beside it, ticked ---------- */
#register .rulebook .seal-top{align-items:center;padding-block:clamp(28px,4vw,56px)}
#register .rulebook .seal-top h2{font-size:clamp(2.2rem,.9rem + 4.4vw,5.4rem);line-height:.92;max-width:15ch}
#register .rb-kick{margin:0 0 14px;color:var(--aqua);font-size:.78rem;letter-spacing:.12em}
#register .rulebook .seal-body{gap:0;padding-top:clamp(24px,3vw,40px)}
#register .rb-why{margin:0 0 clamp(22px,3vw,36px);max-width:64ch;font-size:clamp(1.08rem,1rem + .45vw,1.32rem);line-height:1.45}
#register .rb-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);max-width:none;margin:0;padding-bottom:10px;
  border-bottom:2px solid var(--ink);font-size:.72rem;color:var(--graphite)}
#register .rb-cols span + span{padding-left:clamp(44px,4.4vw,64px)}
#register .rb{list-style:none;margin:0;padding:0}
#register .rb-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start;
  padding-block:clamp(20px,2.6vw,34px);border-bottom:1px solid var(--hair)}
/* their side: the trick as they show it, a clipping on the desk */
#register .rb-them.tropes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:0}
#register .rb-them .trope{min-height:0;padding:14px 18px;background:var(--paper);rotate:-1.2deg}
#register .rb-row:nth-child(even) .rb-them .trope{rotate:1deg}
#register .rb-them .trope + .trope{rotate:1.6deg}
#register .rb-them .fake-timer{font-size:clamp(1.8rem,1.2rem + 1.4vw,2.6rem);color:var(--human)}
#register .rb-them .fake-badge{font-size:1.15rem}
#register .fake-say{max-width:22ch;font:700 1.3rem/1.3 var(--sans);font-style:italic}
#register .fake-ticket{display:grid;gap:4px;text-align:left}
#register .fake-ticket b{font:800 1.5rem/1.1 var(--display);font-stretch:112%}
#register .fake-sys{padding:10px 16px;border-radius:999px;background:var(--field);font:500 1.02rem/1.3 var(--mono);color:var(--graphite)}
#register .fake-review{display:grid;gap:4px;font:700 1.3rem/1.25 var(--sans);font-style:italic}
#register .fr-stars{font-style:normal;letter-spacing:.12em;color:var(--ink)}
.fx-on #register .rb-them:not(.play) .strike path{stroke-dashoffset:240}  /* struck when the row is read, not before */
/* our side: the rule, big, with the pen's tick a beat after the strike */
#register .rb-us{position:relative;padding-left:clamp(44px,4.4vw,64px)}
#register .rb-tick{position:absolute;left:0;top:.15em;width:clamp(30px,3.1vw,46px);aspect-ratio:196/108;color:var(--human)}
#register .rb-tick > .mk{width:100%;height:100%;--mk-delay:.45s}
#register .rb-us h3{margin:0 0 8px;font-size:clamp(1.5rem,1rem + 1.7vw,2.5rem);line-height:1.02;letter-spacing:-.02em}
#register .rb-us p{margin:0;max-width:54ch;font-size:1.04rem;line-height:1.5}
#register .rb-prices{list-style:none;margin:4px 0 12px;padding:0;display:grid;grid-template-columns:max-content minmax(0,1fr)}
#register .rb-prices li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:4px 14px;align-items:baseline;padding:8px 0;border-top:1px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
#register .rb-prices b{font:850 1.2rem/1.1 var(--display);font-stretch:112%;white-space:nowrap}
/* the close: the dare, the signature, the button */
#register .rb-sign{display:grid;justify-items:start;gap:14px;margin-top:clamp(28px,4vw,52px)}
#register .rb-hold{margin:0;max-width:20ch;font:850 clamp(1.7rem,1rem + 2.4vw,3.2rem)/.98 var(--display);font-stretch:112%;letter-spacing:-.025em;color:var(--human)}
#register .rb-sign .signoff{width:min(100%,560px)}
#register .rb-sign .sig-mk--denis{width:min(340px,80%)}
@media (max-width:720px){
  #register .rb-cols{display:none}
  #register .rb-row{grid-template-columns:minmax(0,1fr);gap:16px}
  #register .rb-prices,#register .rb-prices li{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the visitor's hand: "your signature" on the lines they sign, "Decide." wherever the three verbs are spelled out ---------- */
#register .hsg-ink > .mk{right:auto;height:calc(100% - 2px);width:auto;max-width:100%;aspect-ratio:1033/248}
#register .draft-sig{aspect-ratio:1033/248}
/* "Decide." stands on the baseline of "ecide" (65% down the mark); the D's loop hangs below it, like a pen's */
#register .kb3--hand{font-size:1em;line-height:1;padding:0}
#register .kb3--hand > .mk,#register .b-hand > .mk--decide{display:inline-block;height:1.2em;width:auto;aspect-ratio:1187/366;vertical-align:-.42em}
#register .method-rail li:nth-child(3) b.b-hand{font-size:clamp(2.8rem,1rem + 3.4vw,5rem);line-height:1;transform:none;margin-bottom:.3em}
#register .method-rail .b-hand > .mk--decide{position:static;left:auto;bottom:auto}
#register .method-rail li:not(.on) .b-hand > .mk--decide{opacity:.45}
#register .b-hand{position:relative}  /* keeps its screen-reader text inside the chapter (v18_cv.js arms only self-contained chapters) */
#register .verbs li:nth-child(3) b.b-hand{font-size:calc(1.22 * clamp(1.45rem,1rem + 1.3vw,2.15rem));line-height:1;transform:none}

/* ---------- 02.10 gaps: pains in two groups, the method both ways, a check figure, the proof band ---------- */
#register .pain-grp{margin:clamp(28px,3vw,44px) 0 0;font-size:.78rem;letter-spacing:.12em;color:var(--human)}
#register .pain-grp + .painlist{margin-top:10px}
#register .s4-both{margin:14px 0 0;max-width:60ch;font:700 clamp(1.1rem,1rem + .5vw,1.35rem)/1.35 var(--sans)}
#register .step-stat{margin:0;padding:12px 14px;border-left:3px solid var(--human);background:var(--field);font-size:.98rem;line-height:1.45}
#register .step-stat a{display:block;margin-top:6px;font-size:.68rem;letter-spacing:.06em;color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
/* the proof band: on the ink, under "Only you can sign it." */
#register .proofband{padding-block:0 clamp(48px,6vw,88px)}
#register .pb-h{margin:0 0 18px;max-width:30ch;font:850 clamp(1.4rem,1rem + 1.6vw,2.3rem)/1.05 var(--display);font-stretch:112%;letter-spacing:-.02em;color:var(--stone)}
#register .pb-list{list-style:none;margin:0;padding:20px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border-top:1px solid rgba(238,235,230,.22)}
#register .pb-list li{display:grid;align-content:start;gap:8px;color:var(--mist);font-size:1rem;line-height:1.45}
#register .pb-big{font:850 clamp(2.6rem,1.6rem + 2.6vw,4.2rem)/.9 var(--display);font-stretch:125%;letter-spacing:-.04em;color:var(--signal)}
#register .pb-q{font:700 1.02rem/1.45 var(--sans);color:var(--stone)}
#register .pb-src{font-size:.66rem;letter-spacing:.06em;color:var(--aqua);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){#register .pb-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- fourth game document: a client's ChatGPT answer, answered with the sources ---------- */
#gpt-doc .hunt-stamp{top:auto;bottom:clamp(36px,6vw,60px)}
#register .gpt-ask{margin:12px 0 0;max-width:62ch;font:600 1.02rem/1.5 var(--sans);font-style:italic}
#register .gpt-answer{margin-top:14px;padding:6px 18px 16px;border:1px solid var(--hair);border-radius:14px;background:var(--field)}
#register .gpt-who{margin:10px 0 -4px;font-size:.68rem;letter-spacing:.1em;color:var(--graphite)}

/* ---------- pilot-session videos next to "No made-up reviews" (hidden live until the videos exist) ---------- */
:root:not(.no-proto) [data-until]{display:none!important}  /* the live line a data-needs block replaces once its data exists */
#register .pilots{margin-top:clamp(28px,4vw,48px);display:grid;gap:14px}
#register .pilots-h{margin:0;font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);line-height:1.05;letter-spacing:-.02em}
#register .pilots-sub{margin:0;max-width:64ch;font-size:1.04rem;line-height:1.5}
#register .pilots-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:6px}
#register .pilot{margin:0;display:grid;gap:8px}
#register .pilot .t-frame{aspect-ratio:4/5}
#register .pilot figcaption{font-size:.95rem;line-height:1.4}
#register .pilot-note{display:block;margin-top:4px;font-size:.68rem;letter-spacing:.06em;color:var(--graphite)}
#register .pilots-foot{margin:0;font-size:.95rem}
@media (max-width:720px){#register .pilots-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- audit fixes, 2 Oct ---------- */
/* chapter numbers come from the markup: content-visibility (v18_cv.js) scopes a CSS counter to its own chapter, so every armed one read "01" */
#register .chapter-h[data-ch]::before{content:attr(data-ch);counter-increment:none}
#register .s4-kick{margin-bottom:clamp(26px,3.4vw,46px)}  /* clear of the pen's circle around the chapter number */
/* FAQ: two short groups share the middle column */
#register .lg-stack{display:grid;gap:clamp(28px,3vw,48px);align-content:start;min-width:0}
/* host: the signature and the company line close the first column on a wide live page, and the whole block everywhere else */
#register .host-sign,#register .t-legal{order:2}
#register .t-col{display:contents}
@media (min-width:901px){.no-proto #register .teacher--full .t-col{display:grid}}
/* the band's "sign it.": a real hand (hand C, traced like the hero's "wrong."), its baseline 54% down the drawing. Signed
   under "ONLY YOU CAN", ending under the end of "CAN", where that line fills the column (two-column desktops: 0.5-2em left
   after it; phones); right after it, a little under its baseline, where there is room (one column, 431-900px). The pen's
   wipe (data-sign) still writes it. */
#register .sig-word--signit{display:block;width:max-content;padding:.05em .1em;margin:.08em 0 0 2.6em;transform:rotate(-3deg);transform-origin:0 50%}
#register .sig-word--signit > .mk{width:3em;aspect-ratio:1104/413}
@media (max-width:430px){#register .sig-word--signit{margin-top:.14em;margin-left:2.3em}#register .sig-word--signit > .mk{width:3.2em}}
@media (min-width:431px) and (max-width:900px){#register .sig-word--signit{display:inline-block;margin:0 0 0 .12em;vertical-align:-.6em}}
/* the rules ledger, two columns: the clipping's paper edge level with the caps of its rule, not with the rule's line box */
@media (min-width:721px){#register .rb-row > .rb-them{margin-top:clamp(4px,.45vw,7px)}}

/* ---------- b17, 3 Oct: the top third after the owner's review (hero, game, email reveal) ---------- */
/* hero: the hand word "wrong." gets more room inside the pen's mask (the wipe masks the word's own box, so ink outside it
   would be cut), the same .2em above and below; equal negative margins keep the layout and the pen's start where they were */
#register .stage-h1 .sig-word--wrong{padding-top:.5em;padding-bottom:.62em;margin-top:-.82em;margin-bottom:-.7em}
@media (max-width:560px){#register .stage-h1 .sig-word--wrong{margin-top:-.48em}}
/* ... and where it signs beside "WHEN IT'S", the g's loop hangs .16em under the headline: the lead starts below it, so the
   pen's flourish (v15_pen.js: 30 px above whatever follows the headline) passes under the loop instead of through it */
@media (min-width:561px){#register .stage-copy > .stage-h1{margin-bottom:calc(.16em + 12px)}}
/* hero: the lead and its terms, three short ticks in a row (wrapped where they don't fit), a two-line note */
#register .stage-lead{max-width:40ch;font-size:clamp(1.08rem,.98rem + .42vw,1.34rem);line-height:1.45;color:var(--stone);text-wrap:balance}
#register .stage-lead .lead-t{display:block;margin-top:.15em;font-weight:700}
#register .stage-pains{display:flex;flex-wrap:wrap;gap:8px 24px;max-width:none}
#register .stage-pains li{display:flex;align-items:center;gap:9px;font:700 clamp(.95rem,.9rem + .18vw,1.05rem)/1.3 var(--sans);color:var(--stone)}
#register .stage-pains .sp-tick{flex:none;margin-top:0}
#register .stage #reg-note{max-width:52ch}
/* a big screen leaves room above the copy: it centres on the stage (beside the brain) instead of sinking to the bottom */
@media (min-width:901px){#register .stage-copy{align-self:center}}
@media (min-width:901px) and (max-height:820px){#register .stage-lead{font-size:1.05rem}}  /* short laptops: the form stays up */
/* the game: each document opens on its scene, a time and a person, in the machine's mono with the time in the pen's red */
#register .doc-scene{margin:0 0 12px;padding:0 0 10px;max-width:none;border-bottom:1px dashed color-mix(in srgb,var(--ink) 32%,transparent);
  font:500 .8rem/1.45 var(--mono);letter-spacing:.02em;color:var(--graphite)}
#register .doc-scene b{font-weight:700;color:var(--human)}

/* v19: the webinar page after the owner's review of 2 Oct 2026: the method, the pains and “what you’ll be able to do”. Webinar only: every rule starts with #register. */

/* ---------- the pains: six cards, one list. The button holds the tick box and the title; the quote and the answer sit
   beside it in the card, outside the button, because "Check this page" turns each quote's source label into a real link
   (v16_proof.js), and a link cannot live inside a button. The grid repeats the button's own columns, so the quote and
   the answer still line up under the title. ---------- */
#register .painlist li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-content:start;padding-bottom:20px}
#register .painlist li > .pain{grid-column:1/-1;padding-bottom:8px}
#register .painlist li > .vo,#register .painlist li > .pl-ans{grid-column:2}

/* ---------- "What you’ll be able to do" (replaces "This is for you if / Not for you if"): the opener, the heading, the
   free session and the course side by side, the course column the larger one; one "not for you" line, the closing line,
   the button. One column, top to bottom (.after was a wrapping row for a line of sources and a button). ---------- */
#register .after{display:grid;justify-items:start;align-items:start;gap:clamp(18px,2.2vw,28px)}
#register .after > .kicker figcaption{color:var(--graphite)}
#register .can-h{max-width:24ch}
#register .after .fit.can-do{width:100%;margin:0;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px)}
#register .can-when{margin:0;font:850 clamp(1.3rem,1rem + 1vw,1.75rem)/1.05 var(--display);font-stretch:112%;letter-spacing:-.02em}
#register .can-when .mono{display:block;margin-top:8px;font-size:.72rem;line-height:1.3;letter-spacing:.1em;color:var(--graphite)}
#register .can-col--course .can-when{font-size:clamp(1.6rem,1rem + 1.9vw,2.5rem);color:var(--human)}
#register .can-sub{margin:12px 0 0;font-weight:700}
#register .can-col .fit-list{margin-top:12px}
#register .can-col--course .fit-list li{font-size:1.06rem;font-weight:600}
#register .can-tag{margin-left:.4em;vertical-align:.12em;background:var(--ink);border-color:var(--ink);color:var(--stone)}
#register .can-link{display:inline-block;margin-top:16px}
#register .fit-not{font-size:.98rem;color:var(--graphite)}
@media (max-width:900px){#register .after .fit.can-do{grid-template-columns:minmax(0,1fr)}}
/* the answer is what you'll do: in ink, the pen's arrow in red */
#register .painlist .pl-ans{color:var(--ink)}
#register .painlist .pl-ans::before{color:var(--human)}
/* a source that becomes a link keeps that link inside the chapter (v18_cv.js arms only self-contained chapters): the
   link is absolute, and without a positioned claim its offset parent was outside the section */
#register .painlist .vo-src,#register .pains-stat [data-src]{position:relative}
/* phones: the quote and the answer use the card's full width under the tick box and the title */
@media (max-width:560px){#register .painlist li > .vo,#register .painlist li > .pl-ans{grid-column:1/-1}}

/* ---------- the inline sign-up rows (5 Oct 2026; v16_reg.js builds them): #cando-reg ends the pains chapter, #rules-reg closes the rules, #draft-reg is in the
   dark reveal band and #session-reg ends the method chapter. They replace "Send me the link" buttons that scrolled the reader to a form far away.
   The closer's row, on paper: the base .reg-1 rules are made for the dark stage (a white field with a white border, an aqua focus ring, light note
   text), so here the field gets an ink border, the ring is red, the note is graphite. The mount stretches, so the row's own width cap applies. ---------- */
#register .reg-row-slot{justify-self:stretch;width:100%;min-width:0}
/* positioned: the field's screen-reader label (.sr-only, absolute) must find its containing block inside the chapter, or v18_cv.js leaves the chapter unarmed */
#register .reg-row{position:relative;width:min(100%,600px);gap:8px}
/* one line while field and button fit side by side (the field takes the spare room, the button keeps its own width); when they wrap, the button is
   alone on its line and fills it, as the closer's does on a phone */
#register .reg-row .reg-1 input{flex:1000 1 240px;border-color:var(--ink)}
#register .reg-row .reg-1 input:focus-visible{outline-color:var(--human)}
#register .reg-row .reg-1 .btn{flex:1 1 auto}
@media (max-width:360px){#register .reg-row .reg-1 .btn{padding-inline:12px;font-size:1.06rem}}  /* 320px phones: the label stays on one line */
#register .reg-row .reg-note{margin:0;font-size:.88rem;line-height:1.4;color:var(--graphite)}
/* the row on the dark reveal band (#draft-reg): v16_reg.js adds reg-row--dark and the sign-up block's button (btn--inv). The base .reg-1 rules are made for
   the dark stage, so what the paper rows above put on (the ink border, the red ring, the graphite note) goes back to the stage's: a white field with a
   white border, an aqua ring, light note text */
#register .reg-row.reg-row--dark .reg-1 input{border-color:var(--paper)}
#register .reg-row.reg-row--dark .reg-1 input:focus-visible{outline-color:var(--aqua)}
#register .reg-row.reg-row--dark .reg-note{color:color-mix(in srgb,var(--stone) 82%,transparent)}
/* the rules close, wide: a row needs more room than the button did, so the dare and the sign-up row share the left column and the signature stands
   beside them (the single column below 1180px stays as v19_rules.css has it) */
@media (min-width:1180px){
  #register .rulebook .rl-sign{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"hold sig" "fix sig" "go sig";align-items:end}
  #register .rulebook .rl-sign .rb-hold{grid-area:hold;align-self:start}
  #register .rulebook .rl-sign .rb-fix{grid-area:fix;align-self:start}
  #register .rulebook .rl-sign .rl-sig{grid-area:sig}
  #register .rulebook .rl-sign .rl-go{grid-area:go;width:100%}
}

/* v19: the webinar page after the owner's review of 2 Oct 2026: the rules, the host, the FAQ and the sign-up block. Webinar only: every rule starts with #register. */

/* ---------- the host: the role line large, then three figures stamped in a row (big numerals, a short mono label) ---------- */
#register .teacher--full .t-role{margin:-2px 0 0;max-width:30ch;font:800 clamp(1.3rem,1rem + 1vw,1.85rem)/1.16 var(--display);font-stretch:112%;letter-spacing:-.015em}
#register .t-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:620px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
#register .t-figs li{display:grid;align-content:start;gap:6px;padding:14px 12px 14px 0}
#register .t-figs li + li{padding-left:clamp(12px,1.6vw,20px);border-left:1px solid var(--hair)}
#register .t-fig{font:850 clamp(2rem,1.2rem + 1.8vw,3rem)/.9 var(--display);font-stretch:112%;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
#register .t-figs li:last-child .t-fig{color:var(--human)}
#register .t-fig-l{font-size:.68rem;letter-spacing:.08em;line-height:1.3;color:var(--graphite)}
@media (max-width:420px){#register .t-fig{font-size:clamp(1.6rem,7.6vw,2rem)}#register .t-fig-l{font-size:.62rem}}
/* the section's h2 "Who’s teaching" is a small label, like "THE RECORD": the name and the role line are the big type */
#register .teacher--full > .t-h{margin:0;max-width:none;font:500 .78rem/1.3 var(--mono);font-stretch:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}

/* ---------- the FAQ: the short answer leads each answer, in bold; two plain lines under the questions ---------- */
#register .lg-a .lg-short{font-family:var(--display);font-weight:800;font-stretch:112%;color:var(--ink)}
#register .faq-more{display:grid;gap:8px;margin-top:clamp(24px,3vw,40px)}
#register .faq-more p{margin:0;font-size:1.02rem}

/* the reveal's band: five things to check instead of the court row (owner, 2 Oct: less fear) */
#register .pb-list--five{grid-template-columns:repeat(5,minmax(0,1fr))}
#register .pb-list--five li span b{color:var(--stone)}
#register .pb-foot{margin:22px 0 0;max-width:60ch;color:var(--mist);font-size:1rem;line-height:1.45}
@media (max-width:1100px){#register .pb-list--five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){#register .pb-list--five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#register .pb-list--five{grid-template-columns:minmax(0,1fr)}}

/* phones: the room under the footer for the sticky "Send me the link" bar is the footer's own, in its colour. main kept it as 84px of page background (v2_components.css:
   main{padding-bottom:84px}), a light strip under the dark footer; now main has none and the footer takes the 84px on top of its own 28px (and the bar's safe-area inset), so
   the footer's last line still clears the bar. The thank-you view has no bar and needs no room at all. */
@media (max-width:720px){
  #register,#thanks{padding-bottom:0}
  #register .foot{padding-bottom:calc(28px + 84px + env(safe-area-inset-bottom,0px))}
}

/* v19: the compact rules grid. Webinar only: every rule starts with #register or #thanks. */
/* Eight tiles (blueprint 7): the trick as others show it, struck by the pen; our rule, ticked; one line.
   Replaces the long ledger: .rb, .rb-row, .rb-them, .rb-us, .rb-tick, .rb-cols, .rb-prices, .rb-sign in v18_teacher.css are unused now. */

/* the head and the intro: smaller, so the whole block reads in about one screen */
#register .rulebook--tiles .seal-top{padding-block:clamp(20px,2.6vw,34px)}
#register .rulebook--tiles .seal-top h2{font-size:clamp(1.9rem,1rem + 2.2vw,3.2rem);line-height:.95;max-width:22ch}
#register .rulebook--tiles .tick-mk{width:clamp(56px,6vw,90px)}
#register .rulebook--tiles .seal-body{gap:0;min-width:0;padding-top:clamp(18px,2.2vw,28px);padding-bottom:clamp(20px,2.4vw,32px)}
#register .rulebook--tiles .rb-why{margin:0 0 clamp(14px,1.8vw,22px);max-width:72ch;font-size:clamp(1rem,.95rem + .3vw,1.18rem);line-height:1.45}

/* the grid: a printed form, ink rules between the cells. Phones: one column of compact rows */
#register .rl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
#register .rl-tile{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:8px;padding:14px 0 16px;overflow-wrap:anywhere}
#register .rl-tile + .rl-tile{border-top:1px solid var(--hair)}
/* tablets: two by four; desktop: four by two. Rows share their tracks (subgrid), so every rule starts on one line */
@media (min-width:721px){
  #register .rl{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0;border-left:2px solid var(--ink)}
  #register .rl-tile{grid-row:span 3;grid-template-rows:auto auto 1fr;grid-template-rows:subgrid;row-gap:10px;padding:14px 14px 16px;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow-wrap:break-word}
  #register .rl-tile + .rl-tile{border-top:0}
}
@media (min-width:1180px){
  #register .rl{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* the trick: a small clipping on the desk (the .tropes hook draws the strike when seen; the timer stays still) */
#register .rl-mock.tropes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;min-width:0;padding:2px 0 6px}
#register .rl-mock .trope{min-height:0;min-width:0;max-width:100%;gap:2px;padding:8px 12px;background:var(--paper);rotate:-1.2deg}
#register .rl-tile:nth-child(even) .rl-mock .trope{rotate:1deg}
#register .rl-mock--pair.tropes{flex-direction:column;flex-wrap:nowrap;gap:0}
#register .rl-mock--pair .trope + .trope{z-index:1;max-width:calc(100% - clamp(28px,24%,72px));margin:-14px 0 0 clamp(28px,24%,72px);rotate:2.2deg}  /* the badge stuck on the timer */
#register .rl-mock .mono{font-size:.62rem}
#register .rl-mock .fake-timer{font-size:clamp(1.2rem,1rem + .45vw,1.45rem);color:var(--human)}
#register .rl-mock .fake-badge{padding:7px 9px;font-size:.82rem}
#register .rl-mock .fake-live{font-size:1rem}
#register .rl-mock .fake-live i{width:10px;height:10px}
#register .rl-mock .fake-say{max-width:22ch;font:700 .98rem/1.25 var(--sans);font-style:italic}
#register .rl-mock .fake-ticket{gap:2px}
#register .rl-mock .fake-ticket b{font:800 1.02rem/1.1 var(--display);font-stretch:112%}
#register .rl-mock .fake-sys{padding:6px 12px;font:500 .8rem/1.3 var(--mono)}
#register .rl-mock .fake-review{gap:2px;font:700 .98rem/1.2 var(--sans);font-style:italic}
#register .rl-mock .fr-stars{font-size:.9rem}
@media (prefers-reduced-motion:no-preference){
  .fx-on #register .rl-mock:not(.play) .strike path{stroke-dashoffset:240}  /* struck when the tile is read, not before */
}
@media (prefers-reduced-motion:reduce){
  #register .rl-mock .strike path{animation:none;stroke-dashoffset:0}  /* simply struck */
}

/* our rule, bold, with the pen's tick a beat after the strike; then one line */
#register .rl-us{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:8px;min-width:0}
#register .rl-tick{display:block;width:26px;aspect-ratio:196/108;margin-top:.18em;color:var(--human)}
#register .rl-tick > .mk{width:100%;height:100%;--mk-delay:.45s}
#register .rl-us h3{min-width:0;margin:0;font:850 clamp(1.12rem,.95rem + .5vw,1.4rem)/1.08 var(--display);font-stretch:112%;letter-spacing:-.015em}
#register .rl-line{min-width:0;display:grid;align-content:start;gap:4px}
#register .rl-line p{margin:0;max-width:46ch;font-size:.93rem;line-height:1.42}
#register .rl-pp{white-space:nowrap}  /* "Starter €499 ·" never splits; the line breaks between the prices */
#register .rl-prices b{font-weight:800}

/* the close: the dare, the signature, the small line and the button. One row on desktop */
#register .rl-sign{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:14px;min-width:0;margin-top:clamp(18px,2.4vw,30px);overflow-wrap:break-word}
#register .rl-sign .rb-hold{margin:0;max-width:22ch;font:850 clamp(1.4rem,.9rem + 1.2vw,2rem)/1 var(--display);font-stretch:112%;letter-spacing:-.02em;color:var(--human)}
/* under the dare: where to report a claim we can't back (the corrections page) */
#register .rl-sign .rb-fix{margin:-4px 0 0;max-width:46ch;font-size:1rem;line-height:1.45;color:var(--ink)}
#register .rl-sign .rb-fix .link{white-space:nowrap}  /* "See the corrections →" stays whole: it moves to the next line, it does not split */
#register .rl-sig{display:grid;gap:2px;min-width:0;width:min(100%,340px)}
#register .rl-sign .sig-mk--denis{width:min(240px,100%)}
#register .rl-sign .signoff{width:100%;gap:4px 14px;font-size:.66rem}
#register .rl-go{display:grid;justify-items:start;gap:8px;min-width:0;max-width:100%}
#register .rl-go .rules-cta{margin:0;font-size:.88rem;font-weight:600;color:var(--graphite)}
#register .rl-go .btn{max-width:100%}
@media (min-width:1180px){
  #register .rl-sign{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);align-items:end;column-gap:clamp(20px,3vw,44px)}
}

/* the early-bird reservation (owner, 3 Oct): shown only with our own checkout (CHECKOUT_MODE 'custom', v16_night.js) */
#register [data-mode="custom"][hidden],#thanks [data-mode="custom"][hidden]{display:none!important}
#register .rl-reserve{margin-top:4px;font-weight:700}
#thanks .ty-reserve{margin:10px 0 0;font-weight:700}
#register .rl-reserve .res-note,#thanks .ty-reserve .res-note{display:block;margin-top:2px;font-weight:400;font-size:.88rem;line-height:1.4;color:var(--graphite)}

/* v19: the one-screen sign-up block with its ticket. Webinar only: every rule starts with #register or #thanks.
   The owner (2 Oct): "it must fit ONE screen and be more interesting; the space there is wasted, and it is boring".
   Left: kicker, a small two-line H2 (the print head of v16_night.js still prints it), one line, the four time tiles,
   the form v16_reg.js inserts after ul.times (#closer-reg: .closer-when, .reg-1, .reg-note). Right (>=1024px): a ticket
   in the thank-you ticket's look (v16_ticket.css .seat: paper, 2px ink rule, perforated edge, dot-matrix date, a stub),
   filled from the picked tile by v19_closer.js; the animated brand symbol is its seal, the wordmark sits on the stub.
   Own class names (.ctk-*), never .seat-*: v16_ticket.js queries .seat-* and the closer comes first in the DOM.

   FOLD BUDGET (no browser tonight, so it is reasoned, not measured; a reviewer must measure it):
   1366x650, left column ~717px wide (.wrap 1240 - 2x44 gutter - 55 gap - 380 ticket): padding 2x21 + kicker 25
   + H2 two balanced lines 88 + line 47 + tiles 75 + form gap 14 + "your pick" line 20-40 + one input row 58
   + note two or three lines 45-64  =  ~440px (worst case ~480px) < 650. The ticket (~312px) is centred beside it.
   1440x900: same stack, ~445px < 900 (the block's own min-height is not forced, so nothing stretches).
   1024x768: the column narrows to ~520px, the button drops under the two inputs (+68px): ~530px < 768.
   390x844: padding 2x20 + kicker 40 + H2 two lines 62 + line three lines 66 + tiles 2x2 128 + form gap 12
   + "your pick" three lines 56 + email 50 + name 50 + button 54 (+2 gaps 16) + note four lines 64  =  ~638px < 844,
   with ~200px to spare for a phone's browser bars and the page's sticky bar; the ticket's slim stub sits below the note. */

/* ---------- the block: tight vertical rhythm instead of .sec's clamp(40px,5.4vw,76px) ---------- */
#register .closer .closer-in{padding-block:clamp(20px,3.2vh,40px);row-gap:18px;align-items:center}
@media (min-width:1024px){
  #register .closer .closer-in{grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:clamp(32px,4vw,64px)}
}
@media (max-width:1023px){
  #register .closer .closer-in{grid-template-columns:minmax(0,1fr)}
}

/* .final is a grid with a 24px gap (v2_components.css): four gaps were ~96px of air; the rhythm is set by margins below */
#register .closer .final{gap:0}

/* the kicker */
#register .closer .final > .mono{margin:0 0 8px;font-size:.78rem;line-height:1.35}

/* the H2: two lines at most, much smaller than v12's clamp(3rem,1rem + 6vw,7.4rem). 2.6rem cap = 41.6px; max-width
   22ch + v18_teacher.css's text-wrap:balance give two even lines at every width ("One real task." / "75 minutes.
   Free."). line-height 1.02 + a hair of bottom padding: the print reveal's clip-path:inset(0) clips to the box, so
   the full stops stay inside it */
#register .closer h2{font-size:clamp(1.9rem,1.2rem + 1.9vw,2.6rem);line-height:1.02;letter-spacing:-.02em;
  margin:0;padding-bottom:.06em;max-width:22ch}

/* the one line that replaces the old sub-paragraph */
#register .closer .closer-sub{margin:8px 0 14px;max-width:52ch;font-size:clamp(.98rem,.92rem + .25vw,1.1rem);line-height:1.4}

/* the four time tiles, shorter: v8's 16/18px padding and up-to-3rem numerals made a ~100px row; this one is ~76px */
#register .closer .times a{gap:5px;padding:10px 14px 12px}
#register .closer .tm-t{font-size:clamp(1.5rem,1rem + 1.3vw,2.1rem)}

/* the form v16_reg.js inserts (#closer-reg): v16_reg.css's 28px top margin becomes 14px; the "your pick" line and the
   note tighten; on phones the inputs drop from 58px to 50px so email, name and button stay above the fold */
#register .closer #closer-reg{margin-top:14px}
#register .closer .closer-when{margin:0 0 8px;font-size:.88rem;line-height:1.4}
#register .closer #closer-reg .reg-note{margin-top:8px;font-size:.8rem;line-height:1.45;max-width:72ch}
@media (max-width:767px){
  #register .closer #closer-reg .reg-1{gap:8px}
  #register .closer #closer-reg .reg-1 input{min-height:50px}
  #register .closer #closer-reg .reg-1 .btn{min-height:54px;width:100%;justify-content:center}
}

/* ---------- the ticket (right column >= 1024px) ---------- */
#register .ctk{position:relative;background:var(--paper);color:var(--ink);border:2px solid var(--stone);
  box-shadow:5px 5px 0 var(--human);max-width:380px;width:100%;justify-self:end}
/* the perforated top edge of the real ticket (.seat::before), bitten in the closer's own ink */
#register .ctk::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;pointer-events:none;
  background-image:radial-gradient(circle 7px,var(--ink) 7px,transparent 7.2px);background-repeat:repeat-x;background-size:28px 16px}
#register .ctk-pass{padding:22px 22px 18px}
#register .ctk-top{margin:0 0 12px;padding-bottom:12px;border-bottom:2px dashed var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
#register .ctk-admit{font-family:var(--dots);font-weight:900;font-size:1.05rem;letter-spacing:.14em;color:var(--ink)}
/* FREE: a rubber stamp in the pen's red */
#register .ctk-free{font:800 .95rem/1 var(--display);letter-spacing:.12em;color:var(--human);
  border:2px solid var(--human);padding:5px 9px 4px;rotate:-6deg}
#register .ctk-title{margin:0;font:800 1.15rem/1.2 var(--display);letter-spacing:-.01em}
/* the date, dot-matrix like .seat-when: day, then time + city */
#register .ctk-when{margin:10px 0 6px;font-family:var(--dots);font-weight:900;line-height:1.05;color:var(--ink);
  transition:opacity .3s ease}
#register .ctk-day{display:block;font-size:1.15rem;letter-spacing:.02em}
#register .ctk-time{font-size:clamp(2rem,1.4rem + 1vw,2.5rem);letter-spacing:.01em;font-variant-numeric:tabular-nums}
#register .ctk-city{font-size:1rem;letter-spacing:.02em;color:var(--graphite)}
/* until the visitor taps a time the ticket shows v16_reg.js's suggestion (or the first tile), lightly */
#register .ctk:not(.ctk--set) .ctk-when{opacity:.5}
#register .ctk-len{margin:0;font:500 .8rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}

/* the stub: torn off along a dashed line with two half-moon bites, dark like the closer, so the animated symbol and
   the wm-dark wordmark keep the colours they were drawn for */
#register .ctk-stub{position:relative;background:var(--ink-2,var(--ink));color:var(--stone);border-top:2px dashed var(--stone);
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"seal leave" "seal wm";align-items:center;gap:6px 14px;
  padding:14px 18px 14px 14px}
#register .ctk-stub::before,#register .ctk-stub::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--ink)}
#register .ctk-stub::before{left:-11px}
#register .ctk-stub::after{right:-11px}
#register .ctk-seal{grid-area:seal;width:74px}
#register .ctk-seal .sym{width:100%;display:block}
#register .ctk-leave{grid-area:leave;margin:0;font:500 .78rem/1.4 var(--mono);letter-spacing:.02em}
#register .ctk-wm{grid-area:wm;justify-self:start;opacity:.9}
#register .ctk-wm .logo{--h:17px}  /* v5_brand.css: .logo is a background image sized by --h and --ar */

/* a new pick prints into the ticket left to right, like the real ticket's dot-matrix header (.seat-hdr) */
@media (prefers-reduced-motion:no-preference){
  #register .ctk-when.ctk-new{animation:v19-ctk-print .5s steps(10,end) both}
}
@keyframes v19-ctk-print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- below 1024px: the ticket collapses to one slim stub line under the form ---------- */
@media (max-width:1023px){
  #register .ctk{max-width:none;justify-self:stretch;box-shadow:3px 3px 0 var(--human);
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  #register .ctk::before{display:none}
  #register .ctk-pass{padding:8px 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  #register .ctk-top{display:contents}
  #register .ctk-admit{order:1;font-size:.82rem;letter-spacing:.1em}
  /* the line may wrap between day, time and city (a long city name must never push the page sideways), never inside them */
  #register .ctk-when{order:2;margin:0;min-width:0}
  #register .ctk-day,#register .ctk-time,#register .ctk-city{display:inline;font-size:.95rem;white-space:nowrap}
  #register .ctk-free{order:3;font-size:.72rem;padding:3px 6px 2px;rotate:-4deg}
  #register .ctk-title,#register .ctk-len,#register .ctk-wm{display:none}
  /* the stub becomes the line's right end: the seal alone, small; the "you leave with" line goes under it */
  #register .ctk-stub{grid-template-columns:auto;grid-template-areas:"seal";border-top:0;border-left:2px dashed var(--stone);padding:6px 10px}
  #register .ctk-stub::before,#register .ctk-stub::after{display:none}
  #register .ctk-seal{width:34px}
  #register .ctk-leave{display:none}
}

/* ---------- the print: when the full stop prints the block (v16_night.js adds .printing to .closer), the ticket
   feeds out of the printer like the thank-you ticket (v16_ticket.css v16-ticket-feed), just after the headline.
   v19_closer.js adds .ctk-wait only when that print will really run (fx-on, IntersectionObserver, no reduced motion,
   no ?shot=1: v16_night.js's own conditions), so the ticket can never stay hidden. fill:backwards, not both: once it
   ends the ticket falls back to no clip-path at all. ---------- */
#register .closer:not(.printing) .ctk.ctk-wait{clip-path:inset(0 0 100% 0)}
#register .closer.printing .ctk.ctk-wait{animation:v19-ctk-feed .9s steps(6,end) .45s backwards}
@keyframes v19-ctk-feed{
  from{clip-path:inset(0 0 100% 0);translate:0 -24px}
  to{clip-path:inset(-14px -14px -14px -14px);translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  #register .closer .ctk.ctk-wait{clip-path:none!important;animation:none!important;translate:none!important}
}

/* v19: the three scenes of the method chapter. Webinar only: every rule starts with #register or #thanks. */
#register .m-pull{margin:16px 0 0;max-width:30ch;font:800 clamp(1.25rem,1.05rem + .9vw,1.75rem)/1.25 var(--display);font-stretch:112%;letter-spacing:-.015em;color:var(--ink)}
#register .m-scenes .demo{align-items:start}
#register .m-scenes .demo > *,#register .m-scenes .stack > *{min-width:0}
#register .m-scenes h3{margin:0;font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.12}
#register .m-line{margin:0;max-width:52ch;line-height:1.5}
#register .m-test{margin:0;max-width:52ch;font-size:.92rem;line-height:1.45;color:var(--graphite)}
#register .m-test .k{color:var(--graphite)}
#register .m-scenes .take{margin:0}
/* scene 01: the pen note, the copy button, the paper panel */
#register .m-note{margin:0;max-width:44ch;padding:8px 0 8px 14px;border-left:3px solid var(--human);font-weight:600;line-height:1.45;transform:rotate(-.6deg);transform-origin:left center}
#register .m-trap{color:var(--human)}
#register .m-copy{justify-self:start;align-self:flex-start;width:auto;max-width:100%}
#register .m-panel{margin:0;border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:16px;display:grid;gap:10px;min-width:0}
#register .m-panel[hidden]{display:none}
#register .m-prompt{margin:0;font:400 .9rem/1.6 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:break-word}
#register .m-panel-note{margin:0;padding-top:10px;border-top:1px solid var(--hair);font-size:.92rem;line-height:1.45;color:var(--graphite)}
/* scene 01 visual: five file chips feed the sourced table */
#register .m-vis{display:grid;gap:12px;min-width:0;align-content:start}
#register .m-files{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
#register .m-files li{margin:0;background:var(--paper)}
#register .m-feed{margin:0;font:700 1.5rem/1 var(--mono);color:var(--bot)}
#register .m-src .src-row{grid-template-columns:minmax(0,1fr) auto auto}
#register .m-src .src-row > *{min-width:0}
#register .m-draft{justify-self:start;margin:0;white-space:normal;background:var(--paper)}
#register .m-src.m-arm .src-row,#register .m-sum.m-arm .m-ln{opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
#register .m-src.m-arm .src-row.m-in,#register .m-sum.m-arm .m-ln.m-in{opacity:1;transform:none}
/* scene 02: the struck total, the checked total, the pen's sum */
#register .m-totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0}
#register .m-was{position:relative;display:inline-block;text-decoration:none;font:800 clamp(1.4rem,1.1rem + 1.2vw,2.1rem)/1.1 var(--display);font-stretch:112%;color:var(--graphite);font-variant-numeric:tabular-nums}
#register .m-was > .mk{position:absolute;left:-6%;width:112%;top:30%;height:.42em}
#register .m-now{text-decoration:none;background:none;font:850 clamp(2.5rem,1.7rem + 3.6vw,4.6rem)/1 var(--display);font-stretch:112%;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
#register .m-sum{margin:0;display:grid;gap:0;max-width:30rem;min-width:0}
#register .m-sum-h{margin:0 0 6px;font-weight:800}
#register .m-lines{margin:0;padding:0;list-style:none;display:grid;gap:0}
#register .m-ln{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:12px;align-items:baseline;margin:0;padding-block:5px;border-top:1px dashed var(--hair);line-height:1.35}
#register .m-ln > *{min-width:0}
#register .m-amt{font:700 .98rem/1.3 var(--mono);letter-spacing:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#register .m-tot{margin-top:4px;padding-top:8px;border-top:2px solid var(--human)}
#register .m-tot .m-amt{color:var(--human);font-size:1.15rem}
#register .m-flag{margin:0;justify-self:start;max-width:36ch;padding:8px 12px;border:2px dashed var(--human);background:var(--paper);font-weight:700;line-height:1.4;transform:rotate(-1deg);transform-origin:left center}
#register .m-scenes .did-it{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:12px 14px}
/* after the scenes: what you leave with, the running order, the Q&A line */
#register .m-leave{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:36px 0 0;padding-top:18px;border-top:2px solid var(--ink)}
#register .m-leave-h{margin:0;font-weight:800}
#register .m-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;min-width:0}
#register .m-tags li{margin:0;padding:6px 10px;border:1.5px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);font-weight:700;font-size:.95rem;line-height:1.3}
#register .m-order{display:grid;gap:12px;margin:26px 0 0;min-width:0}
#register .m-bar{display:flex;margin:0;border:2px solid var(--ink);min-width:0}
#register .m-bar i{flex:var(--m) 1 0;min-width:0;padding:8px 4px;overflow:hidden;background:var(--c);color:var(--paper);font:700 .72rem/1 var(--mono);font-style:normal;text-align:center}
#register .m-bar i + i{border-left:2px solid var(--paper)}
#register .m-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
#register .m-steps li{display:grid;gap:6px;align-content:start;justify-items:start;min-width:0;margin:0;padding-top:10px;border-top:4px solid var(--c)}
#register .m-steps li > *{max-width:100%}
#register .m-steps b{font:800 1.1rem/1.1 var(--display);font-stretch:112%}
#register .m-steps span:not(.tag){line-height:1.35}
#register .m-steps .tag--dark{background:var(--human);border-color:var(--human);color:var(--paper)}
#register .m-bring{margin-bottom:28px}
#register .m-bring p{margin:0}
@media (max-width:900px){
  #register .m-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  #register .demo .srcs{display:grid}  /* v18 left the table to the game on phones; here it is the scene */
  #register .m-src{padding:12px}
  #register .m-src .src-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  #register .m-src .src-row > .tag{grid-column:1 / -1}
  #register .m-bar{display:none}
  #register .m-steps{grid-template-columns:minmax(0,1fr)}
  #register .m-steps li{border-top:0;padding-top:0}
  #register .m-steps li::before{content:"";display:block;width:calc(var(--m) * 100% / 90);min-width:8px;height:8px;background:var(--c)}
}
@media (prefers-reduced-motion:reduce){
  #register .m-src .src-row,#register .m-sum .m-ln{opacity:1;transform:none;transition:none}
}

/* v19: the pains slip 'Your session'. Webinar only: every rule starts with #register or #thanks.
   A paper receipt built by v19_slip.js after the last .painlist: hidden until the first tick, then one printed line per ticked
   card. Paper with a perforated top and a torn zigzag bottom (CSS mask, the same technique as the thank-you receipt in
   v17_receipt.css, no image), dot-matrix heading in the pen's red, lines in ink mono. Phones: under the cards, full width.
   Desktop (>=1024px): while .has-slip is on, the section is a two-column grid; everything spans both columns except the card
   lists (.slip-side, set by the script) and the slip's column (.slip-col, a stretching grid item over the cards' rows), and the
   slip sticks inside that column: it stays beside the cards and leaves with them (a sticky grid item set directly in the
   section's grid is held by the whole grid in Chromium and rode over the lists after the cards). It never leaves the section's
   box (content-visibility arming stays intact: no fixed, no absolute). */

#register .slip{
  --tooth:14px;
  position:relative;
  box-sizing:border-box;
  width:100%;
  margin:clamp(24px,3vw,36px) 0 0;
  padding:18px 20px calc(18px + var(--tooth) / 2);
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-top-style:dashed;
  font-family:var(--mono);
  -webkit-mask:
    linear-gradient(#000,#000) top / 100% calc(100% - var(--tooth) / 2) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) calc(var(--tooth) / 2) repeat-x;
  mask:
    linear-gradient(#000,#000) top / 100% calc(100% - var(--tooth) / 2) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) calc(var(--tooth) / 2) repeat-x;
  transition:opacity .2s ease,transform .2s ease;
}
#register .slip[hidden]{display:none}
#register .slip-h{margin:0;color:var(--human);font:500 .78rem/1.35 var(--mono);letter-spacing:.04em}
#register .slip-h b{display:block;margin-bottom:2px;font-family:var(--dots);font-weight:900;font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.05;letter-spacing:.01em}
#register .slip-sub{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--hair);font:700 .74rem/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
#register .slip-lines{list-style:none;margin:10px 0 0;padding:0;counter-reset:slip}
#register .slip-lines li{
  counter-increment:slip;
  display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:0 6px;
  padding:7px 0;border-bottom:1px dotted var(--hair);
  font:500 .86rem/1.38 var(--mono);color:var(--ink);
  transition:opacity .2s ease,transform .2s ease;
}
#register .slip-lines li::before{content:counter(slip,decimal-leading-zero);font:900 .95rem/1.35 var(--dots);color:var(--graphite)}
#register .slip-lines li.slip-new,#register .slip.slip-new{opacity:0;transform:translateY(-6px)}
#register .slip .btn{margin-top:18px;max-width:100%}

@media (min-width:1024px){
  #register section.has-slip{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,22rem);column-gap:clamp(28px,3vw,48px);align-items:start}
  #register section.has-slip > *{grid-column:1 / -1;min-width:0}
  #register section.has-slip > .slip-side{grid-column:1}
  /* beside the slip the cards' column is narrower: one card per row until there is room for two */
  #register section.has-slip > .painlist{grid-template-columns:minmax(0,1fr)}
  #register section.has-slip > .slip-col{grid-column:2;align-self:stretch}
  #register .slip-col > .slip{position:sticky;top:clamp(72px,12vh,120px);margin-top:clamp(28px,3vw,44px)}
}

@media (min-width:1280px){
  #register section.has-slip > .painlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  #register .slip,#register .slip-lines li{transition:none}
  #register .slip-lines li.slip-new,#register .slip.slip-new{opacity:1;transform:none}
}
@media print{
  #register .slip{-webkit-mask:none;mask:none}
}

/* v19: the sharing loop of the game. Webinar only: every rule starts with #register or #thanks. Paper, pen and stamp:
   square paper panels, tags in the mono face with the network's NAME (no logos), the seal in the pen's red ink. */

/* the recipient's line above the documents: the pen's voice */
#register .share-chain-line{margin:18px 0 0;max-width:60ch;font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.6vw,21px);
  line-height:1.35;color:var(--accent);overflow-wrap:anywhere}

/* "Pass it on": a small paper panel where the single challenge line was */
#register .share-pass{margin:14px 0 0;padding:16px 16px 14px;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--hair);display:grid;gap:10px;min-width:0}
#register .share-pass[hidden]{display:none}
#register .share-pass .sp-h{margin:0;font-family:var(--sans);font-weight:800;font-size:22px;line-height:1.1}
#register .share-pass .sp-line,#register .share-pass .sp-note,#register .share-pass .sp-hint{margin:0;line-height:1.4}
#register .share-pass .sp-note,#register .share-pass .sp-hint{font-family:var(--mono);font-size:12px;color:var(--graphite)}
#register .share-pass .sp-field{display:grid;gap:4px}
#register .share-pass .sp-field label{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
#register .share-pass .sp-field input{font:inherit;font-size:16px;padding:8px 10px;border:0;border-bottom:1.5px solid var(--ink);
  background:var(--field);color:var(--ink);border-radius:0;max-width:100%;min-width:0;width:100%}
#register .share-pass .sp-field input:focus-visible{outline:3px solid var(--human,var(--accent));outline-offset:2px}

/* the share row (block C): paper tags with a punched hole, plain links */
#register .share-row,#thanks .share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
#register .share-tag,#thanks .share-tag{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 10px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease}
#register .share-tag::before,#thanks .share-tag::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink);flex:none}
#register .share-tag:hover,#thanks .share-tag:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
#register .share-tag:focus-visible,#thanks .share-tag:focus-visible{outline:3px solid var(--human,var(--accent));outline-offset:2px}
#register .share-tag--main,#thanks .share-tag--main{background:var(--ink);color:var(--paper);min-height:44px;padding:8px 16px 8px 12px}
#register .share-tag--main::before,#thanks .share-tag--main::before{border-color:var(--paper)}
#register .share-more,#thanks .share-more{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
#register .share-more[hidden],#thanks .share-more[hidden]{display:none}
#register .share-status,#thanks .share-status{font-family:var(--mono);font-size:12px;color:var(--graphite);flex-basis:100%;min-height:1em}
#register .share-status:empty,#thanks .share-status:empty{min-height:0}
/* under a desktop row: Instagram and TikTok take no link from a page, so one small line says how to post there */
#register .share-ig-note,#thanks .share-ig-note{margin:0;flex-basis:100%;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--graphite)}

/* under the verdict: the ending line and the seal */
#register .share-after{margin:12px 0 0;display:grid;gap:10px;justify-items:start;min-width:0}
#register .share-after[hidden]{display:none}
#register .share-end{margin:0;font-family:var(--sans);font-weight:800;font-size:19px;line-height:1.3;color:var(--accent)}
#register .share-seal{display:grid;gap:8px;justify-items:start;padding:6px 0 0;min-width:0}
#register .ss-stamp{margin:4px 0 0 6px;display:inline-grid;gap:4px;justify-items:center;text-align:center;padding:12px 18px 10px;
  color:var(--accent);border:4px double var(--accent);rotate:-5deg;font-family:var(--mono);text-transform:uppercase;max-width:100%}
#register .ss-stamp .ss-l1{font-weight:800;font-size:clamp(18px,2vw,24px);letter-spacing:.08em;line-height:1.05}
#register .ss-stamp .ss-l2{font-size:13px;letter-spacing:.06em}
#register .ss-stamp .ss-by{font-size:11px;letter-spacing:.04em;text-transform:none;overflow-wrap:anywhere}
#register .ss-press{animation:ss-press .42s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ss-press{0%{transform:scale(1.5);opacity:0}55%{transform:scale(.96);opacity:1}100%{transform:scale(1);opacity:1}}
#register .ss-small{margin:0;font-family:var(--mono);font-size:11px;color:var(--graphite)}
#register .ss-save{margin:0;display:flex;flex-wrap:wrap;gap:8px}

/* block D: the prize draw panel (data-needs="draw": hidden on the live site by v16_night.css) */
#register .share-draw,#thanks .share-draw{margin:8px 0 0;padding:16px;border:1.5px dashed var(--ink);background:var(--paper);display:grid;gap:10px;min-width:0}
#register .share-draw .sd-h,#thanks .share-draw .sd-h{margin:0;font-family:var(--sans);font-weight:800;font-size:20px;line-height:1.15}
#register .share-draw .sd-steps,#thanks .share-draw .sd-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
#register .share-draw .sd-done,#thanks .share-draw .sd-done{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
#register .share-draw .sd-cap,#thanks .share-draw .sd-cap{margin:0;padding:10px 12px;background:var(--field);border-left:3px solid var(--accent);
  font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
#register .share-draw .sd-btns,#thanks .share-draw .sd-btns{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#register .share-draw .sd-small,#thanks .share-draw .sd-small{margin:0;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--graphite)}
#register .share-draw .sd-form,#thanks .share-draw .sd-form{display:grid;gap:8px;min-width:0}
#register .share-draw .sd-field,#thanks .share-draw .sd-field{display:grid;gap:3px}
#register .share-draw .sd-field label,#thanks .share-draw .sd-field label{font-family:var(--mono);font-size:12px}
#register .share-draw .sd-field input,#register .share-draw .sd-field select,#thanks .share-draw .sd-field input,#thanks .share-draw .sd-field select{
  font:inherit;font-size:16px;padding:7px 9px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);min-width:0;max-width:100%}
#register .share-draw .sd-check,#thanks .share-draw .sd-check{display:flex;gap:8px;align-items:center}
#register .share-draw .sd-submit,#thanks .share-draw .sd-submit{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#register .share-draw .sd-msg:empty,#thanks .share-draw .sd-msg:empty{display:none}
#register .share-draw :focus-visible,#thanks .share-draw :focus-visible{outline:3px solid var(--human,var(--accent));outline-offset:2px}

/* the thank-you view keeps its old row's spacing */
#thanks .ty-share-row.share-row{margin:4px 0 0}

@media (prefers-reduced-motion: reduce){
  #register .ss-press{animation:none}
  #register .share-tag,#thanks .share-tag{transition:none}
  #register .share-tag:hover,#thanks .share-tag:hover{transform:none}
}

/* v19 (4 Oct 2026): registration-closed state, the email plan, Guided. Webinar only: every rule starts with #register or #thanks. */

/* A1: while nobody can register (.reg-closed: set on <html> in the first frame by build.py BOOT, on <html> and #register by v19_fix.js; taken off
   again when the endpoint is set), no session date, time or "recording now" shows */
/* the hero strip's "Next: ... · or the recording now"; its first span stays. :root.reg-closed is the first frame (build.py BOOT sets the class
   on <html> before #register exists); #register.reg-closed is what v19_fix.js adds later. Either one hides it */
#register:is(.reg-closed, :root.reg-closed *) .stage-top > span:nth-child(2){display:none}
#register.reg-closed #reg-2,
#register.reg-closed .reg-time-hint{display:none!important}  /* the time slots stay shut, whatever opens them; so does "Your time: ... change" */
#register.reg-closed .closer .times,
#register.reg-closed .closer-when{display:none}  /* the sign-up block: the time tiles, and the line naming the picked time */
/* the ticket's date line reads "Dates soon", set like the day it replaces (v19_closer.css) */
#register .ctk-soon{display:block;font-size:1.15rem;letter-spacing:.02em}
#register.reg-closed .ctk .ctk-when{opacity:1}
@media (max-width:1023px){#register .ctk-soon{display:inline;font-size:.95rem;white-space:nowrap}}

/* 5 Oct 2026: the closed-registration line (v16_night.js bobGuard: "Registration opens when the first dates are confirmed. Email us “Add me” ...") is
   information, not an error. On the dark blocks (the hero, the reveal band, the sign-up block) the pen's red on violet was 3.9:1 and read as "you did
   something wrong": it takes the light body-text colour those blocks already use (the hero's note is the same), and its link stays underlined (.link).
   On the paper blocks it stays red (5:1 on the page's stone). */
#register :is(.stage, .symband, .closer) .bob-guard{color:var(--stone)}

/* A2: the one line about the emails under the hero's note (hidden live by data-needs="mail" until the emails go out); it leaves with the note when step 2 opens */
#register .stage .reg-mail{margin:0;font-size:.95rem;color:var(--stone)}
#register .stage .reg--open .reg-mail{display:none}

/* v19 (4 Oct 2026): Denis near the first screen, the pilot-video strip; (5 Oct) the quotes and the sign-up count behind the videos. Webinar only: every rule starts with #register or #thanks. */

/* ---------- B1: Denis under the hero's form (hidden live by data-needs="photo", v16_night.css) ----------
   Compact: a square portrait slot (the host block's .photo, small: panel colour, the pen's bracket), his name, one line,
   and a row of small links. It follows the form as a sibling, so the form's own messages (the live guard, step 2) stay
   right under the email field. On phones the form is moved up in the stack (v16_night.css order:1), so the strip takes
   the same slot and stays right behind it. */
#register .reg-host{width:min(100%,600px);margin-top:2px;display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-areas:"photo text" "photo links";
  column-gap:14px;align-items:start;color:var(--stone)}
#register .stage-copy:not(:has(.hunt-first)) > .reg-host{order:1}
/* live-safe: while it waits for its photo it is never painted before the page knows it is a prototype (v19_host.js adds .rh-show then);
   on the live site v16_night.js only adds .no-proto at DOMContentLoaded, and a first paint before that would flash the strip and move the hero */
#register .reg-host[data-needs]:not(.rh-show){display:none}
/* the older one-line host in the stage's foot (data-needs="host") says the same in fewer words: while this strip is showing, one host
   strip on the first screen, not two (before the photo exists that is the prototype only; after it, the live page too) */
#register .stage:has(.reg-host.rh-show) .host--stage,#register .stage:has(.reg-host:not([data-needs])) .host--stage{display:none}
#register .rh-photo{grid-area:photo;position:relative;display:block;width:60px;aspect-ratio:1;background:var(--panel)}
#register .rh-photo .mk--bracket{position:absolute;left:11px;top:9px;width:auto;height:62%;aspect-ratio:93/183;color:var(--human)}
#register .rh-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
#register .rh-photo::after{content:"";position:absolute;inset:-5px;pointer-events:none;color:color-mix(in srgb,var(--stone) 52%,transparent);
  background:
    linear-gradient(currentColor,currentColor) left 0 top 5px/4px 1px no-repeat,
    linear-gradient(currentColor,currentColor) left 5px top 0/1px 4px no-repeat,
    linear-gradient(currentColor,currentColor) right 0 top 5px/4px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right 5px top 0/1px 4px no-repeat,
    linear-gradient(currentColor,currentColor) left 0 bottom 5px/4px 1px no-repeat,
    linear-gradient(currentColor,currentColor) left 5px bottom 0/1px 4px no-repeat,
    linear-gradient(currentColor,currentColor) right 0 bottom 5px/4px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right 5px bottom 0/1px 4px no-repeat}
#register .rh-text{grid-area:text;display:grid;gap:1px;min-width:0}
#register .rh-name{margin:0;font:700 1rem/1.25 var(--sans);color:var(--stone)}
#register .rh-line{margin:0;font-size:.9rem;line-height:1.3;color:color-mix(in srgb,var(--stone) 84%,transparent)}
#register .rh-links{grid-area:links;margin:3px 0 0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;font-size:.8rem;line-height:1.35}
#register .rh-links > a,#register .rh-links > span{display:inline-flex;align-items:center;gap:.4em;min-height:24px}
#register .rh-links a{color:var(--stone);font-weight:500;text-decoration-thickness:1px;text-underline-offset:3px}
#register .rh-links a:hover{text-decoration-thickness:2px}
#register .rh-links .ph{font-size:1em}
@media (max-width:560px){  /* phones: the links run under the photo, on the strip's full width: two rows, not four */
  #register .reg-host{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"photo text" "links links";column-gap:12px;row-gap:4px}
  #register .rh-photo{width:56px}
  #register .rh-name{font-size:.95rem}
  #register .rh-links{margin-top:0}
}

/* ---------- B2: three short participant videos after the game (hidden live by data-needs="pilots") ----------
   The poster (the pen's bracket on panel colour, like the host block's photo and video) stands until a video can show its
   controls (v19_host.js adds .pv--ready); the video sits over it, out of sight until then. Three in a row; on phones one
   swipe row with the next video peeking in. */
#register .pvs{margin-top:clamp(36px,5vw,64px);padding-top:clamp(18px,2.4vw,28px);border-top:2px solid var(--ink);display:grid;gap:10px}
#register .pvs-kick{margin:0;font-size:.78rem;line-height:1.4;letter-spacing:.1em;font-weight:500;font-stretch:100%;color:var(--graphite)}
#register .pvs-line{margin:0;max-width:60ch;font-size:1.04rem;line-height:1.5}
#register .pvs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:8px}
#register .pv{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
#register .pv-frame{position:relative;aspect-ratio:16/9;background:var(--panel);overflow:hidden}
#register .pv-poster{position:absolute;inset:0;display:block}
#register .pv-poster .mk--bracket{position:absolute;left:18px;top:18px;width:auto;height:40%;aspect-ratio:93/183;color:var(--human)}
#register .pv-cap{position:absolute;left:0;bottom:0;padding:4px 8px;background:var(--ink);color:var(--stone);font-size:.75rem;line-height:1.4;text-align:left}
#register .pv-frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--ink);visibility:hidden}
#register .pv--ready video{visibility:visible}
#register .pv--ready .pv-poster{visibility:hidden}
/* "Check this page" marks every [data-src]; these two attributes hold file addresses, not claims (v13, v14 and v16_proof skip video and track) */
#register .pv video[data-src]{outline:0}
#register .pv video[data-src]::before,#register .pv video[data-src]::after{content:none}
#register .pv figcaption{font-size:.95rem;line-height:1.4}
/* phones: one swipe row (the next video peeks in), not three screens of stacked frames */
@media (max-width:720px){
  #register .pvs-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-width:thin}
  #register .pv{flex:0 0 min(84%,340px);scroll-snap-align:start}
}

/* ---------- Proof slots for the pilot: the quotes and the sign-up count, right behind the videos (hidden live by data-needs="quotes" and "counter") ----------
   Three screens of proof in a row: the videos above, then these two. The quotes open like the video strip (the ink rule, the mono kicker). Each is a square
   paper card with the page's pen bracket beside the quote and the attribution under a dashed line, like the line a signature goes on: no round corners,
   no stars, no photos. Three in a row; one column from 900 px down. The count is one mono line with a pen tick before it (set here, without the .mono class:
   v8_final.css turns every p.mono directly under #hunt into plain sans text). */
#register .pq{margin-top:clamp(28px,4vw,48px);padding-top:clamp(18px,2.4vw,28px);border-top:2px solid var(--ink);display:grid;gap:10px}
#register .pq-kick{margin:0;font-size:.78rem;line-height:1.4;letter-spacing:.1em;font-weight:500;font-stretch:100%;color:var(--graphite)}
#register .pq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:8px}
#register .pq-card{margin:0;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;row-gap:14px;align-content:space-between;
  padding:18px 18px 16px 14px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
#register .pq-br{grid-column:1;grid-row:1;display:block;width:26px;height:52px}
#register .pq-br .mk{width:100%;height:100%}
#register .pq-card blockquote{grid-column:2;grid-row:1;margin:0;min-width:0}
#register .pq-card blockquote p{margin:0;max-width:none;font:700 1.08rem/1.38 var(--sans);letter-spacing:-.01em}
#register .pq-card figcaption{grid-column:1/-1;grid-row:2;padding-top:12px;border-top:1px dashed var(--hair);font-size:.95rem;line-height:1.45}
#register .pq-count{margin:clamp(20px,2.6vw,28px) 0 0;display:flex;align-items:flex-start;gap:10px;max-width:none;font:500 .8rem/1.5 var(--mono);letter-spacing:.04em;color:var(--ink)}
#register .pq-tick{flex:none;display:block;width:24px;height:13px;margin-top:3px}
#register .pq-tick .mk{width:100%;height:100%}
#register .pq-txt{min-width:0}
@media (max-width:900px){
  #register .pq-list{grid-template-columns:minmax(0,1fr);gap:16px}
  #register .pq-card{max-width:640px}
}

/* v19 (4 Oct 2026): the thank-you survey and the funnel events. Webinar only: every rule starts with #register or #thanks. */

/* the optional "what almost stopped you" question: it uses the Q&A question's grid (v16_thanks.css, .ty-q), set apart from it by a hairline;
   its field is two rows, and on a wide screen its button is as wide as the Q&A question's, so both fields end at the same edge */
#thanks .ty-almost{margin-top:12px;padding-top:20px;border-top:1px solid var(--hair)}
@media (min-width:561px){#thanks .ty-almost .btn{min-width:15rem}}
#thanks #ty-almost-done{grid-column:1/-1;margin:0}
#thanks #ty-almost-done:focus{outline:none}

/* 5 Oct 2026: the header's "Send me the link" (cta_click, where: header) must be clickable. Its z-index (v11_hero.css .site--stage: 3) never applied:
   .fx-host > :not(.fx){z-index:1} (v2_shared.css) is more specific, so the header sat level with .stage, and the hero's 3D art (an absolute box that
   reaches up over the header at 1440x900 live, 1366x768, 1280x720 and others) took the click. The first screen looks the same, pixel for pixel. */
#register .site--stage{z-index:3}

/* v19 (4 Oct 2026): tap targets and readable label sizes. Webinar only: every rule starts with #register or #thanks. */
/* Sizes only: no colour, shape, effect or copy changes. Audited by audit_size.py (every state, 1440x900, 390x844, 375x812). */

/* ================= D1: every button, button-like link and tile is at least 44 px tall ================= */

/* the small button (42 px in v2_shared.css): "Find the five mistakes", Sign it / Send it back, the prompt copier, Clear, Copy the invite, the header
   link. The 1 px margin takes back the 2 px it grows, so the hero and every row around it lay out as before */
#register .btn--sm,#thanks .btn--sm{min-height:44px;margin-block:-1px}

/* the game's four document tabs */
#register .hunt-tabs button{min-height:44px}

/* the phone dock's button and its bar */
#register .hunt-dock{min-height:44px}
#register .hd-btn.btn{min-height:44px}

/* the pass-it-on tags (Save image, Copy link...) */
#register .share-tag,#thanks .share-tag{min-height:44px}

/* the game's own sign-up row: the email field; the first-name field of the pass-it-on panel */
#register .hunt-reg-form input{min-height:44px}
#register .share-pass .sp-field input{min-height:44px}

/* the thank-you ticket: the three "I'll watch from" chips */
#thanks .seat-chip{min-height:44px}

/* the logo link: the hit area grows, the logo and the header do not move */
#register .wordmark,#thanks .wordmark{padding-block:11px;margin-block:-11px}

/* the checkboxes and the slider of the calculator */
#register .consent,#thanks .consent{min-height:44px;align-items:center}
#register input[type=range]{height:44px}

/* the prize-draw panel (data-needs="draw": shown in the prototype, on the live site once the owner opens it) */
#register .share-draw .sd-field input,#register .share-draw .sd-field select,#thanks .share-draw .sd-field input,#thanks .share-draw .sd-field select{min-height:44px}
#register .share-draw .sd-check,#thanks .share-draw .sd-check{min-height:44px}
#register .share-draw .sd-check label,#thanks .share-draw .sd-check label{display:flex;align-items:center;min-height:44px}
#register .share-draw .sd-submit .link,#thanks .share-draw .sd-submit .link{display:inline-flex;align-items:center;min-height:44px}

/* the course link under "After four weeks": its own line, so the padding grows the box and the margin takes the growth back (text and neighbours stay put) */
#register .can-link{padding-block:9px;margin-block:7px -9px}

/* the Human / Machine switch and the machine view's close button (appended to the body, or to the footer on phones) */
#register ~ .hm-switch button,#register .hm-switch button,#thanks .hm-switch button{min-height:44px}
#register ~ .machine .mc-close{min-height:44px;white-space:nowrap}  /* its label keeps one line; the title beside it gives way */

/* Inline buttons that sit in a line of text or a table cell (the mistake spots, the small text buttons): the hit area grows by a transparent border,
   and a negative margin of the same size takes the growth back, so no line or cell moves. A border, not padding: the pen's ring, strike and fix note
   are placed from the padding box, which stays as it was. --b is what a one-line button needs to reach 44 px: whole pixels (browsers snap borders to
   device pixels) and half a pixel to spare. Browsers without lh or round() get a flat border that is enough for every line height used here. */
@supports (height:1lh) and (width:round(up,1.5px,1px)){
  #register .spot{--b:round(up,max(0px,calc((44px - 1lh - 12px) / 2 + .5px)),1px);border-block:var(--b) solid transparent;margin-block:calc(-6px - var(--b));background-clip:padding-box}
  #register button.link,#thanks button.link{--b:round(up,max(0px,calc((44px - 1lh) / 2 + .5px)),1px);border-block:var(--b) solid transparent;margin-block:calc(0px - var(--b));background-clip:padding-box}
}
@supports not ((height:1lh) and (width:round(up,1.5px,1px))){
  #register .spot{border-block:7px solid transparent;margin-block:-13px;background-clip:padding-box}
  #register button.link,#thanks button.link{border-block:12px solid transparent;margin-block:-12px;background-clip:padding-box}
}
/* the ticket's own link row ("Add it →", Google · Outlook · Apple): inline links, so vertical padding grows the hit area without moving a line */
#thanks .seat-add a.link{padding-block:13px}
/* the AI replay link under the stamp and the ticket's caption button stand on their own line: a plain 44 px row */
#register button.ai-replay{min-height:44px;display:flex;align-items:center;margin-block:0;border-block:0}
#thanks .seat-save-row button.link{min-height:44px;display:inline-flex;align-items:center;border-block:0;margin-block:0}
/* the hero's host strip (B1; hidden live until Denis's photo exists, so only a prototype shows it): its three links stand in a flex row, not in a
   sentence, so each is a tap target: 44 px rows (the strip grows by 40 px on a laptop and 29 px on a phone, below the email field and button) */
#register .rh-links > a,#register .rh-links > span{min-height:44px}
#register .rh-links a{display:inline-flex;align-items:center;min-height:44px}

/* ================= D2: no text under 12 px (.75rem). Mono labels keep their look; letter-spacing eases where a label has to stay on one line ================= */

/* labels and tags */
#register .tag,#thanks .tag{font-size:.75rem}
#register .chip-draft{font-size:.75rem}
#register .slot .z{font-size:.75rem}
#register .doc-src > p,#register .doc-src b{font-size:.75rem}
#register .gpt-who{font-size:.75rem}
#register .hunt-tabs .hunt-pick{font-size:.75rem}
#register .s4-kick,#register .t-kicker,#thanks .t-kicker{font-size:.75rem}
#register .can-when .mono{font-size:.75rem}
#register .slip-sub{font-size:.75rem}
#register .ctk-free{font-size:.75rem}
#register .painlist .vo{font-size:.75rem}

/* the host */
#register .t-yr{font-size:.75rem}
#register .t-fig-l{font-size:.75rem}
#register .host-sign .hs-cap{font-size:.75rem}

/* the rules tiles */
#register .rl-mock .mono{font-size:.75rem}
#register .rl-sign .signoff{font-size:.75rem}

/* the game */
#register .hsg-q{font-size:.75rem}
#register .hd-n{font-size:.75rem}
#register #quote-doc .spot.found .fix{font-size:.75rem}
#register .ss-small,#register .ss-stamp .ss-by{font-size:.75rem}
#register #quote-doc td:not(:first-child)::before{font-size:.75rem}

/* the hero demo (decoration, aria-hidden, but still read by sighted visitors) */
#register .draft-state,#register .draft-by{font-size:.75rem;letter-spacing:.03em}
#register .stage-scroll{font-size:.75rem}

/* footers */
#register .foot .foot-row,#thanks .foot .foot-row{font-size:.75rem}

/* the thank-you view */
#thanks .ty-receipt-sub{font-size:.75rem}

/* blocks that wait for data (data-needs: the host's photo and links, the videos, the pilot session, the prize draw): the same floor when they appear.
   Placeholders keep their .82em unless that would be under 12 px */
#register .ph,#thanks .ph{font-size:max(.82em,.75rem)}
#register .t-name .ph{font-size:.5em}
#register .t-where,#register .t-vnote,#register .t-facts small,#register .pilot-note{font-size:.75rem}
#register .cap,#thanks .cap{font-size:.75rem}
#register .share-draw .sd-small,#thanks .share-draw .sd-small{font-size:.75rem}

/* the quote table's head, the "Check this page" button, the method bar */
#register .doc th{font-size:.75rem}
#register ~ .check-page{font-size:.75rem}
#register .m-bar i{font-size:.75rem}

/* labels that kept one line (or their line count) at 375 to 390 px before the rise: a little less tracking */
#register .doc-src > p,#register .doc-src b{letter-spacing:.01em}
#register .chip-draft{letter-spacing:.05em}
#register .t-fig-l{letter-spacing:.017em}
@media (max-width:420px){#register .t-fig-l{letter-spacing:0}}
@media (max-width:380px){#register .t-fig-l{letter-spacing:-.03em}}  /* 360 px: "A SUCCESSFUL" has to fit an 84 px column */
#register .tag,#thanks .tag{letter-spacing:.026em}  /* the same width as before: the rows of tags keep their rows */
#register .srcs .tag{letter-spacing:0}
#register .s4-kick{letter-spacing:.07em}

/* the Human / Machine switch and the machine view's bar */
#register ~ .hm-switch button,#register .hm-switch button,#thanks .hm-switch button{font-size:.75rem}
#register ~ .machine .mc-bar{font-size:.75rem}

:root{--circle-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 151%22%3E %3Cpath fill=%22%23000%22 d=%22M218 31C182 12 112 9 65 23 21 36 5 66 12 94c8 31 48 48 99 50 55 2 102-15 121-41 16-22 12-50-10-72-5-5-10-9-15-12-4-3-3-5 2-3 15 6 29 20 36 36 10 23 3 49-16 68-26 26-72 34-119 31C55 149 19 133 5 107-9 79 7 46 41 29 81 8 152 8 198 22c10 3 18 7 24 11 3 2 1 2-4-2Z%22/%3E %3C/svg%3E");--caret-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 68%22%3E %3Cpath fill=%22%23000%22 d=%22M2 61c-2-2 0-6 3-10C18 34 31 18 44 4c3-3 5-5 8-3 3 2 5 5 7 8 11 14 24 32 34 47 3 4 4 7 2 9-2 2-5 0-8-3C75 51 62 36 49 20c-1-2-3-2-4 0C32 34 21 47 8 60c-3 3-5 4-6 1Z%22/%3E %3C/svg%3E");--tick-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 196 108%22%3E %3Cpath fill=%22%23000%22 d=%22M4 57c-3-3-3-7 1-9 3-2 7 0 8 3 1 2-1 3-2 2-2-2-4-2-5 0-1 2 1 3 3 4 9 5 20 18 33 31 4 4 7 5 10 1C83 62 116 32 155 17c13-5 25-10 37-13 3-1 4 0 2 2-2 2-8 5-14 9C138 42 99 75 61 103c-7 5-12 5-18-1C28 85 17 68 7 59c-2 1-3 0-4-3Z%22/%3E %3C/svg%3E");--strike-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 370 35%22%3E %3Cpath fill=%22%23000%22 d=%22M2 28c10-5 27-8 47-11C123 9 207 13 278 5c36-4 69-6 88-5 6 0 4 3-2 4-67 9-133 11-202 16-49 3-111 7-152 11-7 1-11 0-8-3Z%22/%3E %3C/svg%3E")}