/* Mastery guided funnel, coach-eye-v1. Tokens, type and spacing follow funnel-spec.json
   (design_tokens, layout, components, motion). Spacing mirrors funnel/gates/measure_spec.py so
   the rendered page fits the spec's fit table. Light only: it's a paper page. */
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(/mastery-next-step/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(/mastery-next-step/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Mulish;font-weight:400;font-style:normal;font-display:swap;src:url(/mastery-next-step/fonts/mulish-400.woff2) format("woff2")}
@font-face{font-family:Mulish;font-weight:600;font-style:normal;font-display:swap;src:url(/mastery-next-step/fonts/mulish-600.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:400 700;font-style:italic;font-display:swap;src:url(/mastery-next-step/fonts/playfair-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:900;font-style:normal;font-display:swap;src:url(/mastery-next-step/fonts/playfair-900.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:900;font-style:italic;font-display:swap;src:url(/mastery-next-step/fonts/playfair-900-italic.woff2) format("woff2")}

:root{color-scheme:light;
 --paint:#F4F1EC;--sheet:#FFFFFF;--ink:#171712;--ink2:#5A544C;--hair:rgba(23,23,18,.14);
 --pink:#FD3D6B;--pinkd:#C91E4C;--halo:#FFFFFF;
 --shadow:0 1px 2px rgba(23,23,18,.10),0 8px 18px rgba(23,23,18,.12);
 --gold:linear-gradient(135deg,#8C6A22 0%,#E3C987 30%,#9C7A2E 55%,#F1DDA6 78%,#7A5D1E 100%);
 --cta-shadow:0 15px 34px rgba(253,61,107,.28);
 --hdr:64px;--bar:72px;--W:min(350px,calc(100vw - 40px));
 --display:Poppins,"Helvetica Neue",Arial,sans-serif;--text:Mulish,"Helvetica Neue",Arial,sans-serif;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
 --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M3 1 L60 2 L118 0.6 L182 2.2 L240 0.8 L300 2.1 L356 0.7 L397 1.6 L399.2 12 L398 24 L399.4 37 L398.2 49 L399 59 L340 58.2 L276 59.4 L214 58 L150 59.3 L90 58.1 L32 59.2 L1 58.4 L1.8 46 L0.6 33 L2 20 L0.8 9Z'/%3E%3C/svg%3E");
 --torntop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 6 L22 3 L41 7 L63 2 L88 6 L112 1.5 L139 5.5 L166 2 L190 6.5 L214 2.5 L241 6 L266 1.8 L292 5.8 L318 2.4 L343 6.2 L371 2.2 L400 5 L400 400 L0 400Z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paint)}
html,body{margin:0;height:100%}
body{background:var(--ground,var(--paint));transition:background-color .28s ease;color:var(--ink);font:400 17px/25px var(--text);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none;z-index:0}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:3px solid var(--pinkd);outline-offset:3px;box-shadow:0 0 0 3px #fff;border-radius:8px}

/* ------------------------------------------------ app frame */
.app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;height:100svh;max-width:100vw;overflow:hidden}
.hdr{flex:0 0 var(--hdr);position:relative;z-index:5}
.page{flex:1 1 auto;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;perspective:1400px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}
.bar{flex:0 0 calc(var(--bar) + env(safe-area-inset-bottom));padding:8px max(8px,calc((100vw - 390px)/2 + 8px)) calc(8px + env(safe-area-inset-bottom));position:relative;z-index:4;background:linear-gradient(transparent,var(--ground,var(--paint)) 14px)}
html[data-restore] .pg{visibility:hidden;animation:unhide 0s 2.5s forwards}
@keyframes unhide{to{visibility:visible}}

/* ------------------------------------------------ header */
.rail{display:flex;gap:6px;height:8px;margin:4px max(20px,calc((100vw - 350px)/2)) 0}
.seg{position:relative;min-width:40px;height:8px;transition:flex-grow .3s cubic-bezier(.3,.1,.2,1),opacity .2s}
.seg-track,.seg-fill{position:absolute;inset:0;-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat}
.seg-track{background:var(--pink);opacity:.16}
.seg-fill{background:linear-gradient(90deg,#E62F5E,var(--pink) 34%);clip-path:inset(0 calc((1 - var(--f)) * 100%) 0 0);transition:clip-path .42s cubic-bezier(.3,.1,.2,1)}
.seg.is-done .seg-fill{-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat,linear-gradient(90deg,#000 calc(100% - 14px),transparent);-webkit-mask-composite:source-in;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat,linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-composite:intersect}
.seg.is-nominal .seg-track{opacity:.08}
.seg.is-leaving{opacity:0}
.gs{height:8px;min-width:18px;-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;background:var(--pink);opacity:.22}
.gs.is-kept{opacity:.55}.gs.is-cur{opacity:1}
.hdr-row{display:flex;align-items:center;height:44px;gap:6px;margin:4px 0 0;padding:0 max(8px,calc((100vw - 390px)/2 + 8px))}
.back{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:8px}
.logo{display:flex;align-items:center;height:44px;padding:0 8px 0 12px;flex:none}
.logo img{height:22px;width:auto}
.chap{font:600 14px/18px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:clip;flex:1 1 auto;min-width:0}
.hdr-r{display:flex;align-items:center;gap:4px;flex:none}
.hlink{font:600 16px/22px var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:11px 8px;border-radius:8px;white-space:nowrap}
.hlink[aria-current]{text-decoration:none;color:var(--ink2)}
.gtab{position:relative;width:34px;height:40px;margin-right:2px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--shadow);clip-path:polygon(0 0,70% 0,100% 26%,100% 100%,0 100%);display:grid;place-items:center;border-radius:2px}
.gtab-fold{position:absolute;right:0;top:0;width:30%;height:26%;background:linear-gradient(225deg,transparent 50%,#e8e3d8 50%)}
.gtab-n{font:700 15px/1 var(--display);padding-top:6px}
.gtab[hidden]{display:none}
.gtab.is-bump{animation:tab-bump .18s ease-out}
@keyframes tab-bump{50%{transform:scale(1.12)}}
.hdr[data-screen=readiness] .gtab::before,.hdr[data-screen=readiness] .gtab::after{content:"";position:absolute;inset:3px -3px -3px 3px;background:#fff;box-shadow:0 0 0 1px var(--hair);z-index:-1;transform:rotate(2deg);animation:fan .24s ease-out both}
.hdr[data-screen=readiness] .gtab::after{transform:rotate(-2deg);inset:4px 2px -4px -3px}
@keyframes fan{from{transform:rotate(0)}}

/* ------------------------------------------------ page, type */
.pg{position:relative;width:var(--W);margin:0 auto;padding:4px 0 0}
.pg>:last-child{margin-bottom:0}
.pg[data-screen=goal]{padding-top:18px}
.pg[data-screen=plans_pay] .fine{margin-bottom:0}
.title{font:700 28px/32px var(--display);letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);overflow-wrap:break-word;text-wrap:balance}
.title:focus{outline:none;box-shadow:none}
.body{margin:0 0 16px}
.fine,.note,.echo,.cover-line{font:400 15px/21px var(--text);color:var(--ink2);margin:0 0 8px}
.cover-line{color:var(--ink);font-weight:600;text-align:center}
.acc{font:italic 600 1.05em/1 "Playfair Display",Georgia,serif;letter-spacing:0;position:relative;white-space:nowrap}
.acc-ul{position:absolute;left:-6%;right:-8%;bottom:-.2em;height:.32em;background:var(--pink);-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;z-index:-1;clip-path:inset(0 0 0 0);animation:ul-paint .36s cubic-bezier(.3,.1,.2,1) .12s both}
@keyframes ul-paint{from{clip-path:inset(0 100% 0 0)}}
@keyframes hl{from{background-size:0% 100%}}
.lnk{font:600 16px/22px var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--ink);white-space:nowrap;border-radius:8px;padding:8px 2px;min-height:40px}
.lnk-content{display:inline-flex;align-items:center;gap:8px;height:36px;min-height:36px;padding:0 2px;margin:0 16px 0 0}
.lnk-inline{padding:0;min-height:0;font:inherit;white-space:normal;text-align:left}
.lnk-row{display:flex;align-items:center;height:36px;min-height:36px;padding:0 2px;margin:-4px 0 4px}
.lnk.is-sel{text-decoration-color:var(--pinkd)}

/* ------------------------------------------------ paper, tape, decor */
.tape{position:absolute;width:38px;height:14px;background:rgba(237,230,214,.88);box-shadow:0 1px 1px rgba(23,23,18,.06);clip-path:polygon(0 12%,6% 0,12% 14%,20% 2%,30% 10%,42% 0,55% 12%,68% 1%,80% 10%,90% 0,100% 14%,96% 50%,100% 88%,90% 100%,78% 88%,64% 100%,50% 90%,36% 100%,24% 88%,12% 100%,4% 88%,0 50%);z-index:3;pointer-events:none}
.tape-tr{top:-7px;right:-10px;transform:rotate(38deg)}
.tape-tl{top:-7px;left:-10px;transform:rotate(-34deg)}
.tape-t{top:-8px;left:50%;margin-left:-19px;transform:rotate(-3deg)}
.decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.dm{position:absolute;background:var(--m) center/contain no-repeat}
.dm-flick{left:0;top:2px;width:86px;height:15px;opacity:.9}
.dm-splat{right:-14px;bottom:-6px;width:58px;height:78px;opacity:.85}
.dm-loop{left:-17px;bottom:40px;width:14px;height:56px}
.pg>*:not(.decor){position:relative;z-index:1}
.gthumb{float:right;position:relative;shape-outside:margin-box;width:48px;height:48px;margin:4px 3px 6px 12px;transform:rotate(3deg);box-shadow:0 0 0 3px #fff,0 8px 14px -6px rgba(23,23,18,.4);background:#fff;z-index:2}
.gthumb img{width:48px;height:48px;object-fit:cover}
.gthumb-photo{transform:rotate(-2deg)}

/* ------------------------------------------------ answers */
.opts{display:flex;flex-direction:column;gap:9px;margin:0}
.opts-cards{gap:8px}
.opt{position:relative;display:flex;align-items:center;min-height:52px;padding:14px 16px;font:600 17px/24px var(--text);color:var(--ink);background-color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;border-radius:8px;isolation:isolate;transition:transform .09s ease-out}
.opt::before{content:"";position:absolute;inset:0;background:#fff;border-radius:8px;box-shadow:0 0 0 1px rgba(23,23,18,.2),3px 3px 0 var(--ink);transition:box-shadow .09s ease-out;z-index:-2}
/* selected: the card stays white underneath (::before); the element itself lets the paint show through */
.opt.is-sel{background-color:transparent}
.opt.is-press{transform:translate(2px,2px)}
.opt.is-press::before{box-shadow:0 0 0 1px rgba(23,23,18,.2),1px 1px 0 var(--ink)}
.opt .lbl{position:relative;z-index:1}
/* Selected answer: the deep brushstroke wipes in and the label turns white as it passes (Jake 2026-09-28). */
@property --wipe{syntax:'<percentage>';inherits:false;initial-value:0%}
.opt .lbl{--wipe:0%;background:linear-gradient(90deg,#fff var(--wipe),var(--ink) var(--wipe));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:--wipe .12s linear}
.opt.is-sel .lbl{--wipe:100%;transition:--wipe .19s cubic-bezier(.3,.1,.2,1) .07s}
@media (prefers-reduced-motion:reduce){.opt .lbl,.opt.is-sel .lbl{transition:none}}
@media (forced-colors:active){.opt .lbl{background:none;-webkit-text-fill-color:currentColor}}
.opt .hap{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;margin:0}
.swatch{position:absolute;left:2px;right:-10px;top:50%;height:min(56px,calc(100% - 6px));transform:translateY(-50%);z-index:0;background:url(/mastery-next-step/media/mark-s2_00-deep.webp) center/100% 100% no-repeat;clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:0;transition:opacity .12s}
.opt.is-sel .swatch{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.opt.card{min-height:64px;padding:0 16px 0 0;gap:12px}
.thumb{position:relative;flex:0 0 64px;width:64px;height:64px;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(23,23,18,.12),0 8px 14px -6px rgba(23,23,18,.45);background:#eee;z-index:1;transform:rotate(-1.5deg)}
.opt.card:nth-child(even) .thumb{transform:rotate(1.2deg)}
.thumb img{width:64px;height:64px;object-fit:cover}
.opt.card .tape-t{width:30px;height:11px;margin-left:-15px;top:-6px}
.ordnum{position:absolute;right:12px;top:50%;width:24px;height:28px;margin-top:-15px;display:grid;place-items:center;font:italic 900 25px/1 "Playfair Display",Georgia,serif;color:#fff;z-index:1}
.ordnum:empty{display:none}
.opts .opt[role=checkbox] .lbl{padding-right:28px}
.lnk-content .ordnum{position:relative;right:auto;top:auto;margin:0;color:var(--pinkd)}
.u2{background-image:linear-gradient(var(--pink),var(--pink));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .16s}
.u2.is-on{background-size:100% 2px}
.opt.is-wobble{animation:wobble .16s ease-in-out}
@keyframes wobble{33%{transform:rotate(2deg)}66%{transform:rotate(-2deg)}}
html[data-seg=class] .pg[data-prerender] .opt[data-goal=style]{order:-1}
html:not([data-cold]) .v-cold,html[data-cold] .v-def{display:none}

/* ------------------------------------------------ buttons, bar */
.bar-in{display:flex;align-items:center;gap:12px;height:56px;max-width:374px;margin:0 auto}
.bar-in.bar-links{justify-content:center;gap:20px;height:40px}
.app[data-bar=links] .bar{flex-basis:calc(56px + env(safe-area-inset-bottom))}
.app[data-bar=empty] .bar{flex-basis:calc(12px + env(safe-area-inset-bottom));padding-top:0;padding-bottom:0}
.bar-in .lnk{flex:none}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;border-radius:8px;font:700 19px/24px var(--display);padding:0 20px;overflow:hidden;white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none}
.btn-1{flex:1 1 auto;color:#fff;background-color:var(--pink);box-shadow:var(--cta-shadow);transition:transform .22s cubic-bezier(.3,.1,.2,1),box-shadow .22s,color .12s .05s,background-color 0s .22s;transform:translateY(-2px)}
.btn-fill{position:absolute;inset:0;background:var(--pink);transform-origin:left;transition:transform .22s cubic-bezier(.3,.1,.2,1)}
.btn-t{position:relative}
.btn-1.is-off{color:var(--ink);background-color:transparent;transition-delay:0s;box-shadow:inset 0 0 0 1.5px var(--ink);transform:none;cursor:default}
.btn-1.is-off .btn-fill{transform:scaleX(0)}
.btn-1:active:not(.is-off){transform:translateY(0) scale(.99)}
.btn-2{flex:0 1 auto;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bar-two .btn-2{flex:1 1 0}.bar-two .btn-1{flex:1.3 1 0}
.btn-block{display:flex;width:100%;margin:0 0 8px}
.btn-a{display:flex;width:100%;margin:8px 0 12px;background:var(--pink)}
.btn.is-busy .btn-fill{background:linear-gradient(90deg,var(--pink) 40%,#ff7896 50%,var(--pink) 60%);background-size:300% 100%;animation:sweep 1s linear infinite}
@keyframes sweep{from{background-position:100% 0}to{background-position:-100% 0}}
.actions{display:flex;flex-direction:column;gap:8px;margin:8px 0 0}
.actions .btn-block{margin:0}

/* ------------------------------------------------ critique frame + marks */
.frame{position:relative;width:100%;margin:0 0 12px}
.frame-in{position:relative;aspect-ratio:var(--ar);box-shadow:0 0 0 1px var(--hair),var(--shadow);background:#eee}
.frame-whole{width:min(var(--fw),100%);margin-inline:auto}
.frame-in>img{width:100%;height:100%;object-fit:cover}
.marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mk{fill:none;stroke:var(--pinkd);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.mk-halo{stroke:var(--halo);stroke-width:6;opacity:.92}
.mlabel{position:absolute;left:var(--x);top:var(--y);font:600 15px/18px var(--text);color:var(--pinkd);white-space:nowrap;text-shadow:0 0 2px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;pointer-events:none;z-index:2}
.frame.is-drawing .mk{animation:draw var(--d,.26s) ease-in-out calc(.5s + var(--i) * .12s) both}
.frame.is-drawing .mk-circle{--d:.44s}
.frame.is-drawing .mlabel{animation:lab .2s ease-out calc(.62s + var(--i) * .12s) both}
.frame.is-drawing .frame-in>img{animation:settle .5s cubic-bezier(.3,.1,.2,1) both}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes lab{from{opacity:0;transform:translateY(6px)}}
@keyframes settle{from{transform:scale(1.03)}}
.frame.is-done .mk,.frame.is-done .mlabel,.frame.is-done .frame-in>img{animation:none}
.plate{position:absolute;left:10px;bottom:-11px;max-width:calc(100% - 44px);background:#fff;font:600 14px/19px var(--text);color:var(--ink);padding:2px 8px;box-shadow:0 1px 2px rgba(23,23,18,.12);transform:rotate(-1deg);z-index:3}
.plate-below{position:relative;left:auto;bottom:auto;display:inline-block;max-width:88%;margin:-10px 0 8px 10px;white-space:normal}
.frame-tl .plate{bottom:-11px}
.frame-tl{aspect-ratio:var(--ar);background:#fff;box-shadow:0 0 0 1px var(--hair),var(--shadow)}
/* type-led art */
.tl{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 20px;font:700 26px/30px var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.tl-line{white-space:nowrap}
.tl-ring{position:relative;display:inline-block}
.tl-ring::after{content:"";position:absolute;inset:-10px -14px -8px;background:url(/mastery-next-step/media/mark-circle_pink.webp) center/100% 100% no-repeat}
.tl-ten{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,1fr);gap:0 18px;padding:14px 20px;font:700 18px/1 var(--display)}
.tl-row{display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid rgba(23,23,18,.22);padding-bottom:3px}
.tl-row b{width:22px}
.tl-strip{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;font:700 17px/22px var(--display)}
.tl-pink{background:#FDE3E9}
.tl-pink.tl-list span{min-width:18px}
.tl-recipe{background:#fff;font:600 14px/19px var(--text)}
.tl-recipe span{border-bottom:1.5px solid var(--ink);padding-bottom:1px}

/* ------------------------------------------------ try page */
.clipbox{position:relative;width:100%;aspect-ratio:var(--ar);overflow:hidden;background:#f1ede6;box-shadow:0 0 0 1px var(--hair),var(--shadow)}
.clipbox>img,.clipbox>video{width:100%;height:100%;object-fit:cover}
.strip-art{margin:0 0 12px}
.lclip{opacity:1;transition:opacity .2s}
.clip-play{position:absolute;inset:0;display:grid;place-items:center}
.clip-play span{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--shadow);position:relative}
.clip-play span::after{content:"";position:absolute;left:19px;top:15px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.clip-play[hidden]{display:none}
.steps{list-style:none;margin:0 0 4px;padding:0}
.steps li{display:flex;align-items:flex-start;gap:12px;min-height:32px;margin:0 0 10px;font:400 17px/24px var(--text)}
.num{flex:0 0 32px;height:32px;margin-top:-4px;display:grid;place-items:center;font:700 17px/1 var(--display);color:var(--ink);background:url(/mastery-next-step/media/mark-dab_mai.webp) center/100% 100% no-repeat}
.st{padding-top:0}
.quote{position:relative;margin:0 0 8px;padding:0 0 0 28px}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font:600 18px/25px var(--text)}
.quote blockquote p::before{content:"\201C";position:absolute;left:0;top:-4px;font:700 40px/40px var(--display);color:var(--ink)}
.quote figcaption{font:600 14px/19px var(--text);color:var(--ink2);margin-top:4px}
.quote-note::after{content:"";position:absolute;inset:-8px -8px -8px -12px;background:#fff;box-shadow:var(--shadow);-webkit-mask:var(--deckle) center/100% 100% no-repeat;mask:var(--deckle) center/100% 100% no-repeat;transform:rotate(-.6deg);z-index:-1}
.quote-note{z-index:1;margin:6px 0 12px}
.qp{position:absolute;left:-16px;bottom:-4px;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(23,23,18,.2)}
.qp img{width:40px;height:40px;object-fit:cover}
.quote-note blockquote p::before{top:-2px}
.quote-note:has(.qp) figcaption{padding-left:16px}

/* ------------------------------------------------ guide pages */
.landing{position:relative;margin:0 0 12px}
.lesson-art{margin:0}
.torn-note{position:relative;margin:0 0 14px;padding:12px 14px;background:#fff;box-shadow:var(--shadow);transform:rotate(-.5deg)}
.torn-note::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:var(--deckle) center/100% 100% no-repeat;mask:var(--deckle) center/100% 100% no-repeat}
.torn-note p{position:relative;margin:0;font:400 17px/25px var(--text)}
.ask{margin:0 0 12px}
.ask b{font-weight:600}
.ask-q{position:relative}
.ask-q{background-image:linear-gradient(var(--pink),var(--pink));background-size:100% 3px;background-position:0 96%;background-repeat:no-repeat}
.portraits{margin:0 0 8px}
.pr-row{display:flex;gap:18px;margin:0 0 6px 4px}
.pr{position:relative;width:64px;height:64px}
.pr img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.pr-ring{position:absolute;inset:-6px;background:url(/mastery-next-step/media/mark-circle_pink.webp) center/100% 100% no-repeat}
.pair{display:flex;gap:8px;height:96px;margin:0 0 12px}
.pair-i{flex:1 1 0;overflow:hidden;box-shadow:0 0 0 1px var(--hair),var(--shadow)}
.pair-i img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------ proof clipping */
.clipping{margin:0 0 14px}
.clip-label{display:flex;align-items:center;gap:8px;font:600 14px/19px var(--text);color:var(--ink2);margin:0 0 8px}
.clip-label img{height:16px;width:auto}
.clip-paper{position:relative;width:330px;max-width:calc(100% - 8px);margin:0 auto;aspect-ratio:var(--ar);background:#fff;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.clip-paper img{width:100%;height:100%}
.ul{position:absolute;height:8px;margin-top:-3px;background:var(--pink);opacity:.9;-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;z-index:2;mix-blend-mode:multiply}
.clip-cap{display:flex;flex-wrap:wrap;column-gap:10px;font:600 14px/19px var(--text);color:var(--ink2);margin-top:10px}
.clipping+.clip-note{margin-top:-6px}
.clip-cap a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* Google cards: the platform is a text label (no Google logo asset on file); the name is the caption */
.clip-plat{font:700 14px/19px var(--display);letter-spacing:.02em;color:var(--ink);padding:1px 8px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair);background:#fff}
.clip-cap-t{display:flex;flex-wrap:wrap;column-gap:10px;align-items:baseline;min-width:0}
.clip-cap.has-photo{flex-wrap:nowrap;align-items:center;gap:12px}
.clip-photo{position:relative;flex:0 0 40px;width:40px;height:40px;box-shadow:0 0 0 1px var(--hair),var(--shadow);background:#eee;transform:rotate(2deg);margin-left:6px}
.clip-photo img{width:40px;height:40px;object-fit:cover}
.clip-photo .tape{width:26px;height:10px;margin-left:-13px;top:-6px}

/* ------------------------------------------------ answers, plans */
.rows{list-style:none;margin:0 0 8px;padding:0}
.rows li{font:600 17px/24px var(--text);margin:0 0 8px}
.ring-1497{position:relative;white-space:nowrap}
.ring-1497::after{content:"";position:absolute;inset:-7px -10px -6px;background:url(/mastery-next-step/media/mark-circle_pink.webp) center/100% 100% no-repeat;pointer-events:none}
.plans-art{height:80px;box-shadow:0 0 0 1px var(--hair),var(--shadow)}
.plans-art img{width:100%;height:80px;object-fit:cover}
.inc{list-style:none;margin:0 0 6px;padding:0}
.inc li{position:relative;padding-left:28px;margin:0 0 6px;font:400 17px/24px var(--text);background:url(/mastery-next-step/media/mark-underline_mai2.webp) 0 9px/18px 7px no-repeat}
.inc-sheet li{font:400 15px/21px var(--text);margin-bottom:3px}
.inc-sheet li{background-position:0 7px}
.rating{display:flex;align-items:center;gap:8px;min-height:30px;margin:0 0 4px;font:600 14px/19px var(--text)}
.rating img{height:18px;width:auto}
.plans{margin:0 0 8px}
.start-line{font:600 16px/22px var(--text);color:var(--ink);margin:4px 0 8px}
.plan{display:flex;flex-direction:column;justify-content:center;height:80px;padding:0 16px;margin:0 0 8px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px var(--hair),0 1px 2px rgba(23,23,18,.06);color:var(--ink);text-decoration:none;transition:transform .09s,box-shadow .09s}
.plan:active,.plan.is-press{transform:scale(.98);box-shadow:0 0 0 2px var(--pink)}
.plan-p{font:600 17px/24px var(--text);white-space:nowrap}
.plan-p .price{font:700 26px/30px var(--display);font-variant-numeric:tabular-nums;margin-right:2px}
.plan-s{font:400 15px/21px var(--text);color:var(--ink2)}
.plan-s .ring-1497{color:var(--ink)}
.echo .lnk-inline{font-weight:600;color:var(--ink)}

/* ------------------------------------------------ forms */
.cform{margin:0}
.fields{margin:0 0 4px}
.field{position:relative;margin:0 0 10px}
.field label{display:block;font:600 15px/21px var(--text);margin:0 0 4px}
.field input,.field select{height:52px;border-radius:8px;border:1px solid rgba(23,23,18,.36);background:#fff;padding:0 14px;font:400 17px/24px var(--text);width:100%;-webkit-appearance:none;appearance:none}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--pinkd);outline-offset:2px}
.tel{display:flex;gap:8px}
.tel select{flex:0 0 104px;width:104px;padding:0 10px}
.ferr-ul{position:absolute;left:4px;right:4px;height:3px;margin-top:-3px;background:var(--pinkd);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.field.has-err .ferr-ul{transform:scaleX(1)}
.field.has-err input{border-color:var(--pinkd)}
.ferr{font:600 14px/20px var(--text);color:var(--pinkd);margin:6px 0 0}
.consents{margin:0}
.cbox{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;font:400 14px/20px var(--text);color:var(--ink);cursor:pointer}
.cbox input{position:absolute;left:0;top:0;width:24px;height:24px;opacity:0;margin:0}
.cb{position:relative;flex:0 0 24px;height:24px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff;overflow:hidden}
.cb-stroke{position:absolute;left:-2px;top:9px;width:28px;height:7px;background:var(--pink);transform:rotate(-38deg) scaleX(0);transform-origin:left;transition:transform .2s ease-out;-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat}
.cbox input:checked+.cb .cb-stroke{transform:rotate(-38deg) scaleX(1)}
.cbox input:focus-visible+.cb{outline:3px solid var(--pinkd);outline-offset:3px}
.legal{display:flex;gap:16px;margin:0;font:400 14px/20px var(--text);color:var(--ink2)}
.legal a{color:var(--ink2)}
.lnk-legal{font:400 14px/20px var(--text);color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
/* cookie partners sheet */
.partners{margin:0 0 12px}
.partner{margin:0 0 10px}
.partner dt{font:600 15px/21px var(--text);color:var(--ink)}
.partner dd{margin:0;font:400 15px/21px var(--text);color:var(--ink2)}
.partner dd a{color:var(--ink);white-space:nowrap}
.cookie-status:empty{display:none}
.sheet-body[data-sheet=sheet_cookies] .legal{margin:4px 0 12px}
.preview-sheet{position:relative;display:flex;gap:12px;align-items:center;height:90px;margin:0 0 12px;padding:10px 12px;background:#fff;box-shadow:var(--shadow);transform:rotate(-.8deg)}
.preview-sheet img{width:96px;height:54px;object-fit:cover;flex:none}
.pv-rows{display:flex;flex-direction:column;gap:2px;font:600 14px/19px var(--text);min-width:0}
.pv-rows span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
input::placeholder{color:#8a847b}

/* ------------------------------------------------ confirmation, cover */
.cover{position:relative;width:min(var(--fw),100%);margin:0 auto;padding:6px;background:var(--gold);box-shadow:0 0 0 1px #7A5D1E,0 2px 3px rgba(23,23,18,.18),0 18px 26px -8px rgba(23,23,18,.32)}
.cover img{width:100%;aspect-ratio:var(--ar);object-fit:cover;background:#ddd}
.reveal{display:none}
.wall-label{width:fit-content;max-width:100%;margin:10px auto 12px;padding:3px 10px;background:#fff;font:600 14px/19px var(--text);box-shadow:0 1px 2px rgba(23,23,18,.14);text-align:center}
.title-cover{text-align:center;margin-bottom:6px}
.cover.is-revealing{animation:lift 1.2s cubic-bezier(.3,.1,.2,1) both}
.cover.is-revealing img{-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat,url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat,url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat;-webkit-mask-position:-10% 0,110% 50%,-10% 100%;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat,url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat,url(/mastery-next-step/media/mark-underline_mai2.webp) no-repeat;mask-position:-10% 0,110% 50%,-10% 100%;animation:strokes 1.1s cubic-bezier(.3,.1,.2,1) .1s both}
@keyframes strokes{from{-webkit-mask-size:0% 40%,0% 40%,0% 40%;mask-size:0% 40%,0% 40%,0% 40%}to{-webkit-mask-size:240% 46%,240% 46%,240% 46%;mask-size:240% 46%,240% 46%,240% 46%}}
@keyframes lift{from{box-shadow:0 0 0 1px #7A5D1E,0 1px 1px rgba(23,23,18,.1),0 2px 4px -2px rgba(23,23,18,.1);clip-path:inset(0 0 100% 0)}20%{clip-path:inset(0 0 0 0)}}

/* ------------------------------------------------ sheets */
.sheet-root{position:fixed;inset:0;z-index:40}
.sheet-root[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(23,23,18,.34);animation:fade .28s ease-out both}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:85vh;max-height:85svh;overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:18px max(20px,calc((100vw - 350px)/2)) calc(12px + env(safe-area-inset-bottom));-webkit-mask:var(--torntop) top/100% 400px no-repeat,linear-gradient(#000,#000) 0 399px/100% 100% no-repeat;mask:var(--torntop) top/100% 400px no-repeat,linear-gradient(#000,#000) 0 399px/100% 100% no-repeat;animation:sheet-up .28s cubic-bezier(.2,.8,.2,1) both;touch-action:pan-y}
.sheet-grip{display:block;width:44px;height:4px;border-radius:2px;background:rgba(23,23,18,.2);margin:-4px auto 10px}
.sheet .title{font-size:26px;line-height:30px;margin-bottom:6px}
.sheet-cta{margin-top:6px}
.sheet .clipping{margin-bottom:8px}
.sheet .clip-label{margin-bottom:6px}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
.kept{list-style:none;margin:0 0 12px;padding:0}
.kept-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:4px 0;text-align:left;border-radius:8px}
.kept-row img,.kept-thumb{width:56px;height:56px;object-fit:cover;box-shadow:0 0 0 1px var(--hair);flex:none;background:#f1ede6}
.kept-t{flex:1;font:600 16px/22px var(--text)}
.kept-k{display:block;font:italic 900 15px/20px "Playfair Display",Georgia,serif;color:var(--pinkd)}
.menu{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:8px;border-top:1px solid var(--hair)}

/* ------------------------------------------------ motion helpers */
.turn-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.turn-out{position:absolute;left:0;right:0;top:0;transform-origin:left center;background:var(--paint)}
.turn-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,23,18,0),rgba(23,23,18,.10) 60%,rgba(23,23,18,0));opacity:0}
.fly{position:fixed;z-index:60;pointer-events:none;background:#fff;box-shadow:var(--shadow);transform-origin:top left}
.sweep{position:fixed;left:-20%;right:-20%;top:45%;height:60px;z-index:70;pointer-events:none;background:var(--pink);-webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;animation:swipe .42s cubic-bezier(.3,.1,.2,1) both}
@keyframes swipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.clipping.is-drop .clip-paper{animation:drop .32s cubic-bezier(.2,.8,.3,1) both}
.clipping.is-drop .clip-paper .tape{animation:tape .14s ease-out .2s both}
.clipping.is-drop .ul{animation:ulp .38s ease-out calc(.3s + var(--i) * .12s) both}
@keyframes drop{from{transform:translateY(12px) rotate(-3deg);opacity:0}}
@keyframes tape{from{transform:scale(1.25) rotate(-34deg);opacity:0}}
@keyframes ulp{from{clip-path:inset(0 100% 0 0)}}
.is-enter .landing,.is-enter .strip-art,.is-enter .pair{animation:land .18s ease-out both}
.is-enter .title{animation:rise .2s ease-out .06s both}
.is-enter .body,.is-enter .steps li{animation:rise .2s ease-out .12s both}
.is-enter .steps li:nth-child(2){animation-delay:.21s}.is-enter .steps li:nth-child(3){animation-delay:.3s}
.is-enter .quote-note{animation:flip .26s ease-out .36s both;transform-origin:bottom}
@keyframes land{from{transform:scale(1.08)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes flip{from{transform:perspective(600px) rotateX(12deg);opacity:0}}
.is-enter .plan{animation:rise .24s ease-out calc(var(--i) * .04s) both}
.ring-1497::after{clip-path:inset(0 0 0 0)}
.is-ring .ring-1497::after{animation:ring .5s ease-out .2s both}
@keyframes ring{from{clip-path:inset(0 100% 0 0)}}
.is-seen-ring .ring-1497::after{animation:none}
.envelope{position:fixed;left:50%;top:40%;width:120px;height:80px;margin:-40px 0 0 -60px;z-index:60;background:#fff;box-shadow:var(--shadow);pointer-events:none;animation:env .42s ease-in both}
.envelope::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(160deg,#fff 49%,transparent 50%),linear-gradient(200deg,#fff 49%,transparent 50%);border-bottom:3px solid var(--pink)}
@keyframes env{from{transform:scale(1.8);opacity:.2}60%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}

/* ------------------------------------------------ compact mode: short screens and large text */
.compact .gthumb{display:none}
.compact .opt.strip{min-height:48px;padding:12px 16px}
.compact .opts{gap:6px}
.compact .pg{padding-top:4px}
.compact .frame{max-width:max(calc(150px * var(--arn, 2)),calc(var(--fitH, 999px) * var(--arn, 2)))}
/* The goal screen on a small iPhone (375x667 with Safari's toolbars leaves 548px): five 64px cards put the
   fifth half under the button (go page B6), so short screens get 52px cards and tighter type. The media
   query covers the prerendered first paint, before the app adds .compact. */
@media (max-height:663.98px){
 .pg[data-screen=goal]{padding-top:4px}
 .pg[data-screen=goal] .title{margin-bottom:8px}
 .pg[data-screen=goal] .body{margin-bottom:10px}
 .pg[data-screen=goal] .opts-cards{gap:5px}
 .pg[data-screen=goal] .opt.card{min-height:52px;gap:10px}
 .pg[data-screen=goal] .opt.card .thumb{flex-basis:52px;width:52px;height:52px}
 .pg[data-screen=goal] .opt.card .thumb img{width:52px;height:52px}
}
.compact .pg[data-screen=goal] .opt.card{min-height:52px;gap:10px}
.compact .pg[data-screen=goal] .opt.card .thumb{flex-basis:52px;width:52px;height:52px}
.compact .pg[data-screen=goal] .opt.card .thumb img{width:52px;height:52px}
.compact .pg[data-screen=goal] .opts-cards{gap:5px}
/* the em-v1 email line runs a line longer, so the partner form's preview sheet gives back 18px when short */
.compact .preview-sheet{height:72px;padding:8px 12px;margin-bottom:10px}
.compact .preview-sheet img{width:80px;height:45px}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
 .acc-ul{animation:none}
}
@media print{.app{display:none}}

/* ------------------------------------------------ 200% text (page zoom): a 390px phone becomes a 195px viewport */
@media (max-width:300px){
 .chap{display:none}
 .hlink{padding:11px 4px}
 .bar{flex-basis:auto!important;padding-top:4px}
 .bar-in{flex-wrap:wrap;height:auto;row-gap:2px}
 .bar-in .lnk{flex:1 1 100%;text-align:center;min-height:36px;padding:6px 0;white-space:normal}
 .bar-in .btn{flex:1 1 100%;white-space:normal;height:auto;min-height:52px;padding:8px 12px;text-align:center}
 .mlabel{white-space:normal;max-width:calc(100% - 8px)}
 .plan-p{white-space:normal}
 .seg{min-width:20px}
 .lnk,.lnk-row,.lnk-content{white-space:normal;height:auto;text-align:left}
 .rail{margin-inline:12px}
}
@media (max-width:250px){.logo{display:none}}

/* ================= Guide pages: the BAP "not required" device (Jake 2026-10-09) =================
   Each guide page is a chapter on its own ground: a giant Playfair Black word struck through with the
   house paint stroke, a hand-set note with a drawn arrow, then the plain headline that replaces it.
   Prints get a white mat, a tilt and tape. No captions under pictures, no circled prices or numbers. */
:root{--night:#1B1917;--cream:#F4EEE6;--cream2:rgba(244,238,230,.8)}
html{background:var(--ground,var(--paint))}
html[data-ground=night]{--ground:var(--night)}
html[data-ground=paper]{--ground:#F4F1EC}
html[data-ground=sheet]{--ground:#FFFFFF}
html[data-ground=pink]{--ground:var(--pink)}
html[data-ground=night] body{color:var(--cream)}
html[data-ground=night] body::before{opacity:.06}
html[data-ground=night] .hdr,html[data-ground=night] .title,html[data-ground=night] .lnk,html[data-ground=night] .hlink{color:var(--cream)}
html[data-ground=night] .body,html[data-ground=night] .fine,html[data-ground=night] .note{color:var(--cream2)}
html[data-ground=night] .quote figcaption{color:var(--cream2)}
html[data-ground=night] .quote blockquote p::before{color:var(--pink)}
html[data-ground=pink] .body,html[data-ground=pink] .fine,html[data-ground=pink] .note,html[data-ground=pink] .ask{color:var(--ink)}
html[data-ground=pink] .seg-track{background:var(--ink);opacity:.2}
html[data-ground=pink] .seg-fill,html[data-ground=pink] .gs{background:var(--ink)}
html[data-ground=pink] .btn-1{background-color:var(--ink);box-shadow:0 10px 24px rgba(23,23,18,.24)}
html[data-ground=pink] .btn-fill{background:var(--ink)}
html[data-ground=pink] .ask-q{background-image:linear-gradient(var(--ink),var(--ink))}

.gw{--fs:min(104px,calc((var(--W) + 22px) * .97 / var(--em)));position:relative;margin:0 -11px 6px;padding:8px 11px 0}
.gw-lead{display:block;margin:0 0 2px;font:italic 900 23px/1.1 "Playfair Display",Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.gw.has-lead{padding-top:8px}
.gw-w{display:block;margin-left:-.03em;font:900 calc(var(--fs) * var(--k,1))/.88 "Playfair Display",Georgia,serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.gw-l{position:relative;display:block;width:max-content;white-space:nowrap}
.gw-s{position:absolute;left:-.06em;right:-.08em;top:.45em;height:.12em;background:var(--pink);opacity:.88;
  -webkit-mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;mask:url(/mastery-next-step/media/mark-underline_mai2.webp) center/100% 100% no-repeat;
  transform:rotate(-1.6deg);clip-path:inset(0 100% 0 0);animation:gw-paint .44s cubic-bezier(.3,.1,.2,1) calc(.16s + var(--i) * .14s) forwards}
.gw-l:nth-child(even) .gw-s{transform:rotate(1.2deg)}
@keyframes gw-paint{to{clip-path:inset(0 0 0 0)}}
html[data-ground=night] .gw-w,html[data-ground=night] .gw-lead{color:var(--cream)}
html[data-ground=pink] .gw-w{color:#fff}
html[data-ground=pink] .gw-s{background:var(--ink)}
html[data-ground=pink] .gw-lead{color:var(--ink)}

/* prints: white mat, a tilt and tape, like the BAP chapters */
.pg[data-screen=circle] .frame-in,.pg[data-screen=guide_lesson] .clipbox,.pg[data-screen=try] .strip-art{box-shadow:0 0 0 6px #fff,0 14px 28px -6px rgba(23,23,18,.36);transform:rotate(-1.1deg)}
html[data-ground=night] .pg[data-screen=circle] .frame-in{box-shadow:0 0 0 6px #fff,0 16px 30px -4px rgba(0,0,0,.6)}
.pg[data-screen=try] .strip-art{transform:rotate(.8deg);margin:6px 0 16px}
.pg[data-screen=guide_lesson] .print{margin:8px 6px 16px}
.pg[data-screen=circle] .frame{margin:8px 6px 16px}

/* try: the BAP numbered rows, pink Playfair numerals over a pink rule */
.pg[data-screen=try] .steps li{border-top:1.5px solid var(--pink);padding-top:8px;margin:0 0 8px}
.pg[data-screen=try] .num{flex:0 0 26px;height:auto;margin-top:-1px;place-items:start;background:none;font:italic 900 26px/1 "Playfair Display",Georgia,serif;color:var(--pinkd)}

/* quotes on guide pages: the teacher's words, big, in Playfair italic */
.pg[data-screen=circle] .quote blockquote p,.pg[data-screen=try] .quote blockquote p{font:italic 900 20px/26px "Playfair Display",Georgia,serif}

/* stuck page on pink: the stuck line on a white card with a hard ink shadow, coaches as taped prints */
.pg[data-screen=guide_stuck] .torn-note{background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transform:rotate(-.6deg);color:var(--ink)}
.pg[data-screen=guide_stuck] .torn-note::before{display:none}
.pr{transform:rotate(var(--r,0deg))}
.pr img{border-radius:0;box-shadow:0 0 0 4px #fff,0 8px 16px -4px rgba(23,23,18,.34)}
.tl-num{font-weight:700}
.plan-s b{font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.gw-s{animation:none;clip-path:none}}
.compact .gw{padding-top:4px;margin-bottom:4px}
.pg[data-screen=circle] .frame{width:90%;margin:8px auto 14px}
.compact .gw:not(.has-lead){padding-top:6px}
.pg[data-screen=guide_stuck] .pr,.pg[data-screen=guide_stuck] .pr img{width:52px;height:52px}
.pg[data-screen=guide_stuck] .pr-row{gap:16px;margin:2px 0 8px 4px}
.pg[data-screen=guide_stuck] .torn-note{padding:10px 12px;margin:0 0 12px}
.pg[data-screen=guide_stuck] .torn-note p{font-size:16px;line-height:23px}
.gtab,.gtab-n{color:var(--ink)}

/* critic pass 2026-10-09 */
.back{color:var(--ink)}
html[data-ground=night] .back{color:var(--cream)}
/* outreach card: the first three names in pink Playfair italic, no circle (DESIGN-RULES: never circle a number) */
.tl-first b{font:italic 900 21px/1 "Playfair Display",Georgia,serif;color:var(--pinkd)}
.pg[data-screen=circle] .frame-tl{box-shadow:0 0 0 6px #fff,0 16px 30px -4px rgba(0,0,0,.5);transform:rotate(-1.1deg)}
/* the cover's flip: the one thing that IS required, no paint through it */
.pg[data-screen=guide_keep] .title-cover,.pg[data-screen=guide_keep] .cover-line{text-align:left}
.pg[data-screen=guide_keep] .cover{margin:10px 6px 16px;padding:0;background:#fff;box-shadow:0 0 0 6px #fff,0 14px 28px -6px rgba(23,23,18,.36);transform:rotate(-1.1deg);width:min(var(--fw),calc(100% - 12px))}
/* stuck page: the coach's question reads as a question, not a link */
.ask-q{background:none;font-style:italic}
html[data-ground=pink] .ask-q{background:none}
.qp{left:-4px}
.quote figcaption{text-wrap:pretty}
/* try: the steps on a taped white card */
.steps-card{position:relative;margin:4px 4px 14px;padding:12px 14px 2px;background:#fff;transform:rotate(-.5deg);box-shadow:0 12px 24px -10px rgba(23,23,18,.34)}
.pg[data-screen=try] .steps-card .steps li:first-child{border-top:0;padding-top:0}
.pg[data-screen=guide_keep] .actions .lnk-content{align-self:flex-start;margin:4px 0 0}

/* Jake 2026-10-11 */
.multi-hint{margin:-4px 0 10px;font:italic 900 16px/22px "Playfair Display",Georgia,serif;color:var(--pinkd)}
.cover-goal{text-wrap:balance;margin:-2px 0 12px;font:italic 900 21px/27px "Playfair Display",Georgia,serif;color:var(--ink)}
.title-cover{margin-bottom:4px}
.toast{position:fixed;left:50%;top:calc(60px + env(safe-area-inset-top));z-index:30;width:max-content;max-width:min(350px,calc(100vw - 32px));margin:0;padding:10px 16px;
  transform:translateX(-50%) rotate(-.6deg);background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:600 15px/21px var(--text);text-wrap:balance;animation:rise .2s ease-out both}
.toast.is-out{opacity:0;transition:opacity .3s}
.how-line{font:400 15px/21px var(--text);color:var(--ink2);margin:0 0 8px}

/* ================= Question screens join the guide pages' family (2026-10-16) =================
   Same grounds, prints and type as the guide pages, without their struck word: answers are white printed
   cards with a hairline and a hard ink shadow (the stuck note's card, lighter), on warm paper; readiness
   is the night chapter between the guide and the plans; the forms sit on a clean white sheet. Pick order
   reads in Playfair italic like the try page's numerals. */
.opt .lbl{text-wrap:pretty}
.gthumb~.opts{clear:right}
html[data-ground=night] .opt::before{box-shadow:3px 3px 0 var(--pink)}
html[data-ground=night] .opt.is-press::before{box-shadow:1px 1px 0 var(--pink)}
html[data-ground=night] .btn-1.is-off{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream)}
html[data-ground=night] .multi-hint{color:var(--pink)}
html[data-ground=night] .gtab{box-shadow:0 0 0 1px rgba(244,238,230,.3)}
/* forms: ink-edged fields on the white sheet, flat so they never read as buttons */
.field input,.field select{border:1.5px solid var(--ink)}
.field.has-err input{border-color:var(--pinkd);box-shadow:inset 0 0 0 1px var(--pinkd)}
.preview-sheet{border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.multi-only{margin:0 0 12px}