/* The shop (13 Oct 2026 rebuild): every product is an object on a paper tile with its price as a yellow sticker,
   the jamessinclair.net rule of yellow as a physical thing. Navy ink, plum for small labels, Bebas for names. */

:root{--tile:#F3F6FD;--navy-mute:#B9C0D1;--navy-body:#E6E6E6}
/* ---------- shop head and filters ---------- */
.shophead{padding:clamp(36px,6vw,72px) 0 0}
.sh-top{display:grid;gap:10px 48px;align-items:end;margin-bottom:28px}
.sh-top h1{margin:0}
.sh-top .lede{margin:0;font-size:clamp(17px,2vw,19px);color:var(--mute)}
@media(min-width:900px){.sh-top{grid-template-columns:auto 1fr}.sh-top .lede{max-width:52ch;justify-self:end}}
.filters{border-top:2px solid var(--navy);border-bottom:1px solid var(--line);padding:14px 0;display:grid;gap:12px}
.fgroup{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:2px var(--pad)}
.fgroup::-webkit-scrollbar{display:none}
.chip{flex:none;font:inherit;font-family:var(--head);font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 14px 8px;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip:focus-visible,.fsel select:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.fsel{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}
.fsel select{font:inherit;font-size:15px;color:var(--ink);padding:9px 30px 9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2315264C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none}
.prices{margin:0;padding:2px 0;flex:1 1 auto}
.prices .chip{font-size:15px;padding:9px 12px 7px}
.fcount{margin:0 0 0 auto;font-size:14px;color:var(--mute);white-space:nowrap}
@media(max-width:699px){.prices{margin:0 calc(-1*var(--pad));padding:2px var(--pad);flex-basis:100%}.fcount{margin:0}}
@media(min-width:900px){.filters{grid-template-columns:auto 1fr;align-items:center;gap:20px}.fgroup{margin:0;padding:2px 0}.frow{justify-content:flex-end}}

/* ---------- product cards ---------- */
.shopgrid{padding-top:28px}
.shophead+.shopgrid{border-top:0}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 22px}}
@media(min-width:1080px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px}}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.card[hidden]{display:none}
.tile{position:relative;aspect-ratio:5/4;background:var(--tile);display:grid;place-items:center;overflow:visible;margin-bottom:14px}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8% 10%;transition:transform .3s ease}
.tile.t-course>img{padding:0;object-fit:cover}
/* the book photos are cut out, so each gets a real shadow and reads as an object */
.tile.t-book>img{filter:drop-shadow(0 10px 14px rgba(21,38,76,.22)) drop-shadow(0 1px 1px rgba(21,38,76,.25))}
.tile.t-book>img{padding:5% 6%}
.card:hover .tile>img,.card:hover .tile .phone{transform:translateY(-4px)}
.card:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
/* the phone a tool lives on */
.phone{width:58%;aspect-ratio:390/700;border:5px solid var(--navy);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 1px 0 rgba(21,38,76,.08);transition:transform .3s ease}
/* in a card the phone rises out of the tile's bottom edge, top half showing */
.tile.t-tool{align-items:end}
.tile .phone{position:absolute;left:25%;bottom:0;width:50%;aspect-ratio:auto;height:86%;border-bottom:0;border-radius:16px 16px 0 0}
.phone img{width:100%;height:auto;display:block}
/* the price sticker: the site's round yellow sticker, slapped on the tile's corner */
.card .sticker{top:-12px;right:-8px;left:auto;bottom:auto;width:clamp(58px,6vw,74px);height:clamp(58px,6vw,74px);font-size:clamp(17px,1.8vw,22px);letter-spacing:.02em;padding:6px;transform:rotate(-10deg);box-shadow:1px 2px 0 rgba(21,38,76,.16)}
.card .sticker.sm{font-size:clamp(11px,1.1vw,13px);line-height:1.05;padding:8px}
.card .sticker.out{background:var(--white);color:var(--mute);border:1px solid var(--line);font-size:15px}
.cbody{display:flex;flex-direction:column;gap:6px;flex:1;padding-top:10px}
.ckind{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);font-weight:700}
.card h3{font-size:clamp(22px,2.2vw,27px);line-height:.95;margin:0;color:var(--ink)}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card p{font-size:14.5px;line-height:1.45;color:var(--mute);margin:0}
.cwhat{font-size:13px;color:var(--ink);margin-top:2px}
.cfoot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:auto}
.cbody>p+.cwhat{margin-bottom:12px}
.cprice{font-family:var(--head);font-size:clamp(26px,2.4vw,32px);line-height:1;letter-spacing:.02em;color:var(--pink)}
.cprice.sm{font-size:clamp(18px,1.7vw,22px)}
.cgo{font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);background:var(--yellow);border-radius:999px;padding:9px 13px;white-space:nowrap}
.card:hover .cgo{filter:brightness(.96)}
/* coming soon: navy sticker so it reads as a label, not a price */
.card .sticker.soon{background:var(--navy);color:var(--white)}
.card.is-out{opacity:.62}.card.is-out .cgo{background:var(--light);color:var(--mute)}
@media(max-width:520px){.card .sticker{width:50px;height:50px;font-size:12px;top:-10px}.ctopic{display:none}.card p{font-size:13.5px}.card h3{font-size:21px}.cgo{font-size:11px;padding:8px 10px}.cprice{font-size:24px}}
.fempty{border:1px dashed var(--line);padding:28px;text-align:center}
.fempty p{margin:0 auto 14px}
.courses-more{margin-top:44px}

/* ---------- James band: bio and numbers, no quotes ---------- */
.whois .teacher-lead{font-family:var(--head);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--white);max-width:22ch;margin:6px 0 18px}
.whois .teacher-bio{max-width:52ch;font-size:clamp(17px,1.9vw,19px);line-height:1.5}
.whois .stats>div{border-left-color:rgba(255,255,255,.25)}
.whois .stats{grid-template-columns:repeat(2,auto);justify-content:start;gap:22px 48px;margin:30px 0 0}
@media(min-width:760px){.whois .stats>div{border-left-color:rgba(255,255,255,.25)}
.whois .stats{grid-template-columns:repeat(4,auto)}}
.whois .stats b{color:var(--yellow)}
.whois .stats span{color:var(--navy-mute)}

/* ---------- sales pages ---------- */
.phero{padding:clamp(24px,4vw,48px) 0 clamp(56px,7vw,96px)}
.phero h1{font-size:clamp(46px,5.6vw,78px);margin:8px 0 14px}
.phero .promise{border-left:3px solid var(--pink);padding-left:14px;font-size:19px;margin:0 0 14px;max-width:44ch}
.phero .buybox{max-width:440px;background:var(--white)}
.buybox .note{font-size:14px;color:var(--mute);margin:10px 0 0}
.buybox .price small{display:block;margin:6px 0 0}
@media(min-width:900px){.prodhero{grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}}
.toolstage{background:var(--tile);aspect-ratio:1;display:grid;place-items:center;max-height:560px}
.phone.big{width:min(52%,290px);margin:0;border-width:7px;border-radius:26px}
section h2{font-size:clamp(34px,4.4vw,56px)}
.story-grid,.wb-grid,.bte,.sf,.fc,.tb-head{display:grid;gap:28px 64px}
@media(min-width:900px){.story-grid{grid-template-columns:1.15fr 1fr;align-items:start}.wb-grid{grid-template-columns:1fr 1fr}.bte{grid-template-columns:1fr 1.1fr;align-items:start}.sf{grid-template-columns:1fr auto;align-items:center}.fc{grid-template-columns:1fr 440px;align-items:center}.tb-head{grid-template-columns:1fr 1fr;align-items:end}}
.pullq{margin:0 0 30px}
.pullq p{font-family:var(--head);font-size:clamp(34px,3.8vw,50px);line-height:.98;color:var(--ink);max-width:16ch;margin:0}
.pullq p:before{content:"\201C";color:var(--pink)}.pullq p:after{content:"\201D";color:var(--pink)}
.comments{border-top:1px solid var(--line)}
.clabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px;font-weight:700}
.comments figure{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.comments blockquote{margin:0;font-size:16px;line-height:1.45}
.comments figcaption{font-size:12.5px;color:var(--mute);margin-top:4px}
.pages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start}
.pages figure{margin:0}
.pages img{width:100%;height:auto;border:1px solid var(--line);background:var(--white);box-shadow:0 1px 0 rgba(21,38,76,.06)}
.pages figure:nth-child(2n) img{transform:rotate(1deg)}.pages figure:nth-child(3n) img{transform:rotate(-1deg)}
.pages figcaption{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.3}
.pages-cap{grid-column:1/-1;margin:4px 0 0}
.mgrid{display:grid;gap:0;margin-top:22px;border-top:2px solid var(--navy)}
@media(min-width:760px){.mgrid{grid-template-columns:1fr 1fr;column-gap:48px}}
.mitem{padding:20px 0;border-bottom:1px solid var(--line)}
.mitem h3{margin:0 0 6px}
.mitem p{font-size:16px;margin:0 0 10px}
.mdo{font-family:var(--head);font-size:17px;letter-spacing:.06em;text-transform:uppercase;background:var(--yellow);padding:4px 8px 2px;display:inline-block}
.toolsband h2{color:var(--white);margin:0}
.tb-head p{color:var(--navy-body);margin:0}
.tb-list{display:grid;gap:18px;margin-top:40px}
@media(min-width:900px){.tb-list{grid-template-columns:repeat(3,1fr);gap:24px}}
.tb-item{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;text-decoration:none;color:var(--white);border-top:1px solid rgba(255,255,255,.2);padding-top:20px}
.tb-item .phone{width:100%;border-color:var(--white);border-width:4px;border-radius:14px;margin:0}
.tb-item h3{color:var(--white);margin:4px 0 6px}
.tb-item p{font-size:15px;color:var(--navy-mute);margin:0}
.tb-item:hover h3{text-decoration:underline}
.tb-price{font-family:var(--head);font-size:22px;letter-spacing:.04em;color:var(--yellow)}
.tb-price s{color:var(--navy-mute);margin-right:6px;text-decoration-thickness:2px}
.checks{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.checks li{padding:14px 0 14px 40px;border-bottom:1px solid var(--line);position:relative;font-size:18px}
.checks li:before{content:"";position:absolute;left:2px;top:15px;width:20px;height:20px;border:2px solid var(--navy);border-radius:3px}
.promise.big{font-family:var(--head);font-size:clamp(30px,3.4vw,44px);line-height:1;border:0;padding:0;margin-top:22px;max-width:18ch;color:var(--ink)}
.startfree{padding:clamp(40px,5vw,64px) 0}
.sf{background:var(--yellow);padding:clamp(24px,4vw,40px)}
.sf h2{margin:0 0 8px;font-size:clamp(30px,3.4vw,44px)}
.sf p{margin:0;max-width:56ch}
.sf .btn.ghost{color:var(--ink);background:var(--white);box-shadow:none}
.guarantee{border:2px solid var(--navy);padding:24px;align-self:start}
.guarantee h3{margin:0 0 8px}
.guarantee p{margin:0;font-size:16px}
.finalcta h2{margin:0 0 10px}
.related h2{margin:0 0 28px}
.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1080px){.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rel-foot{margin-top:36px}
.inside-card{display:grid;gap:24px;text-decoration:none;color:inherit;align-items:center}
@media(min-width:900px){.inside-card{grid-template-columns:1fr 1.2fr;gap:56px}}
.ic-img img{width:100%;height:auto;border:1px solid var(--navy);background:var(--white);padding:8px;transform:rotate(-1.5deg)}
.inside-card h2{margin:0 0 12px}
.ic-price{display:block;font-family:var(--head);font-size:28px;letter-spacing:.03em;color:var(--pink);margin:6px 0 8px}
.inside-card:hover h2{text-decoration:underline}

/* the band without a portrait (the hero already shows him): name and bio left, numbers right */
@media(min-width:900px){.whois.noportrait .teacher-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:end}
.whois.noportrait .teacher-copy>.kicker,.whois.noportrait .teacher-copy>h2,.whois.noportrait .teacher-copy>.teacher-lead{grid-column:1}
.whois.noportrait .teacher-copy>.teacher-bio{grid-column:2;grid-row:1/4;align-self:end;margin-bottom:6px}}
@media(min-width:900px){.twelve .lessonlist{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}}
@media(max-width:899px){.whois .teacher-cut{max-width:220px}}

.wblist{list-style:none;margin:18px 0;padding:0;border-top:2px solid var(--navy)}
.wblist li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45}
.wblist .pg{flex:none;font-family:var(--head);font-size:17px;letter-spacing:.04em;color:var(--pink);white-space:nowrap;padding-top:1px}
.proof-head{display:grid;gap:8px 64px;margin-bottom:28px}
@media(min-width:900px){.proof-head{grid-template-columns:1fr 1fr;align-items:end}}
.proof-head h2{margin:0}.proof-head p{margin:0}
.proof-grid{display:grid;gap:18px}
@media(min-width:760px){.proof-grid{grid-template-columns:1fr 1fr;gap:22px}}
.proof-grid figure{margin:0;background:var(--white);border:1px solid var(--line);padding:24px}
.proof-grid blockquote{margin:0;font-size:18px;line-height:1.45}
.proof-grid blockquote:before{content:"\201C";font-family:var(--head);color:var(--pink);font-size:40px;line-height:0;vertical-align:-14px;margin-right:4px}
.proof-grid figcaption{font-size:13px;color:var(--mute);margin-top:12px}
.td-grid{display:grid;gap:36px 72px}
@media(min-width:900px){.td-grid{grid-template-columns:1fr 1fr;align-items:start}}
.td-grid h3{margin:28px 0 8px}
.pullq cite{display:block;font-style:normal;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.crit{margin:0;border-top:2px solid var(--navy)}
.crit>div{padding:12px 0;border-bottom:1px solid var(--line)}
.crit dt{font-family:var(--head);font-size:24px;letter-spacing:.02em;line-height:1}
.crit dd{margin:4px 0 0;color:var(--mute);font-size:15.5px}
/* tools band: phones big enough to read */
.tb-list{gap:36px}
.tb-item{grid-template-columns:1fr;gap:16px;border-top:0;padding-top:0}
.tb-item .phone{width:auto;max-width:220px;height:300px;aspect-ratio:auto;border-bottom:0;border-radius:18px 18px 0 0;border-width:5px}
.tb-shot{background:rgba(255,255,255,.07);display:flex;justify-content:center;align-items:flex-end;padding-top:28px;overflow:hidden}
.tb-item:hover .phone{transform:translateY(-4px)}

/* ---------- product template v2 (13 Oct, late): wall hero, lesson grid, toast, James band ---------- */
.phero.haswall{background:var(--tile);overflow:hidden;padding-bottom:clamp(48px,6vw,88px)}
.phero.haswall+section{border-top:0}
.phero .with{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.phero .with span{font-family:var(--head);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.phero .with img{width:clamp(150px,16vw,210px);height:auto}
.phero-copy{position:relative;z-index:2}
@media(min-width:900px){.phero.haswall .prodhero{grid-template-columns:1fr 1.05fr;gap:40px}}
/* the wall: real lesson frames, tilted and running off the right edge, the workbook on top */
.lwall{position:relative;min-height:340px}
.lwall-grid{position:absolute;top:-6%;left:-4%;width:150%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-7deg);transform-origin:left top}
.lwall-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:3px solid var(--white);box-shadow:0 6px 16px rgba(21,38,76,.18)}
.lwall:after{content:"";position:absolute;inset:auto -50vw -2px -20px;height:34%;background:linear-gradient(transparent,var(--tile));z-index:1;pointer-events:none}
.lwall-feature{position:absolute;z-index:3;left:24%;top:4%;width:min(46%,280px);background:var(--white);padding:6px;box-shadow:0 22px 50px rgba(21,38,76,.32)}
.lwall-feature img{display:block;width:100%;height:auto}
@media(min-width:900px){.lwall{min-height:560px}.lwall-feature{left:26%;top:6%;width:min(48%,300px)}}
@media(max-width:899px){.phero.haswall .prodhero{display:flex;flex-direction:column;gap:22px}.phero.haswall .lwall{order:-1}.lwall{height:300px;min-height:0;overflow:hidden;margin:0 calc(-1*var(--pad))}.lwall-grid{width:170%;left:-10%;top:-10%}.lwall-feature{left:30%;top:6%;width:40%}}
/* the lessons, as a 4 by 2 grid of real frames */
.lessons-head2{display:grid;gap:6px 40px;margin-bottom:26px;align-items:end}
@media(min-width:900px){.lessons-head2{grid-template-columns:auto 1fr}}
.lessons-head2 h2{margin:0}
.note-hand{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.05;color:var(--pink);transform:rotate(-2deg);max-width:30ch}
@media(min-width:900px){.note-hand{justify-self:end;text-align:right}}
.lgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
@media(min-width:900px){.lgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}}
@media(min-width:900px){.lgrid.lgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lshot{position:relative;margin-bottom:12px}
.lshot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.lnum{position:absolute;left:-8px;bottom:-12px;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--head);font-size:21px;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:1px 2px 0 rgba(21,38,76,.16)}
.lgrid h3{font-size:clamp(21px,1.9vw,25px);line-height:1;margin:16px 0 6px}
.lgrid p{font-size:15px;color:var(--mute);margin:0}
/* bonus lessons you can watch today, then the lessons still being filmed (100 Ways, 21 Oct 2026) */
.ltag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;line-height:1.2}
.lgrid.lgrid-now{grid-template-columns:1fr}
@media(min-width:900px){.lgrid.lgrid-now{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}}
.lsoon-wrap{margin-top:56px;padding-top:28px;border-top:2px solid var(--ink)}
.lsoon-h{margin:0 0 22px;font-size:clamp(24px,2.4vw,32px);line-height:1.05}
.lsoon{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media(min-width:900px){.lsoon{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
.lsoon li{display:grid;grid-template-columns:72px 1fr;gap:4px 18px;align-items:start}
.ls-pic{position:relative;padding-top:2px}
.ls-pic img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--white);box-shadow:0 6px 16px rgba(21,38,76,.12);transform:rotate(-2deg)}
.ls-pic .lnum{left:-10px;bottom:-12px;width:40px;height:40px;font-size:18px}
.lsoon h3{font-size:clamp(20px,1.8vw,24px);line-height:1;margin:2px 0 6px}
.lsoon p{font-size:15px;color:var(--mute);margin:0}
.ls-ref{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink)}
@media(min-width:900px){.lsoon li{grid-template-columns:96px 1fr}.ls-pic .lnum{width:46px;height:46px;font-size:21px}}
/* dual readership: the bold first sentence carries the skim */
.story p strong{color:var(--ink)}
/* "where to start" toast */
.stoast{position:fixed;left:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 40px));background:var(--white);border:2px solid var(--navy);padding:20px 20px 18px;box-shadow:0 16px 40px rgba(14,27,58,.2)}
.stoast[hidden]{display:none}
.st-h{font-family:var(--head);font-size:28px;line-height:1;margin:0 0 8px;color:var(--ink)}
.stoast p{font-size:15px;margin:0 0 14px}
.st-x{position:absolute;right:8px;top:4px;border:0;background:none;font-size:26px;color:var(--mute);cursor:pointer}
@media(max-width:899px){.stoast{bottom:84px}}
/* you're getting me */
.getme{padding:clamp(56px,8vw,112px) 0}
.gm-grid{display:grid;gap:32px 64px;align-items:center}
@media(min-width:900px){.gm-grid{grid-template-columns:1fr 1fr}}
.gm-photo{margin:0;position:relative}
.gm-photo img{width:100%;height:auto;display:block;border:6px solid var(--white);transform:rotate(-1.5deg);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.getme h2{color:var(--white);font-size:clamp(44px,5vw,72px);margin:4px 0 12px}
.getme .teacher-lead{font-family:var(--head);font-size:clamp(26px,2.6vw,36px);line-height:1;color:var(--yellow);margin:0 0 18px;max-width:24ch}
.getme p{color:var(--navy-body)}
.getme p strong{color:var(--white)}
/* final call to action carries the workbook */
.finalcta.hasfeat .fc{grid-template-columns:auto 1fr 440px;align-items:center}
.fc-feat{width:150px;height:auto;background:var(--white);padding:5px;box-shadow:0 16px 36px rgba(21,38,76,.22);transform:rotate(-3deg)}
@media(max-width:899px){.finalcta.hasfeat .fc{grid-template-columns:1fr}.fc-feat{width:120px}}
.proof-grid{grid-template-columns:1fr}
@media(min-width:760px){.proof-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-grid figcaption b{display:block;font-family:var(--head);font-weight:400;font-size:22px;letter-spacing:.03em;color:var(--ink);margin-bottom:2px}
.proof-grid figure{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.story-img{margin:8px 0 0}
.story-img img{width:100%;height:auto;display:block;border:5px solid var(--white);box-shadow:0 14px 34px rgba(21,38,76,.2);transform:rotate(1.2deg)}
.story-img figcaption{font-size:24px;margin-top:12px;color:var(--pink)}
.tile.t-ext>img{object-fit:contain;padding:6%}
/* the Letter card in the grid */
.optcard{background:var(--navy);color:#fff;grid-column:span 2;padding:0}
@media(max-width:759px){.optcard{grid-column:1/-1}}
.oc-in{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;height:100%}
.oc-count{font-size:13px;color:var(--navy-mute)}
.oc-count b{font-family:var(--head);font-size:26px;color:var(--yellow);font-weight:400;margin-right:4px;vertical-align:-3px}
.optcard h3{color:#fff;font-size:clamp(30px,2.8vw,42px);line-height:.95;margin:0}
.optcard p{color:var(--navy-body);font-size:15.5px;margin:0}
.oc-minute{border-left:3px solid var(--yellow);padding:4px 0 4px 12px;font-size:14.5px;color:#fff}
.oc-minute span{display:block;font-family:var(--head);font-size:15px;letter-spacing:.08em;color:var(--yellow)}
.oc-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.oc-form[hidden]{display:none}
.oc-form input[type=email]{flex:1 1 180px;font:inherit;font-size:16px;padding:13px 16px;border:0;border-radius:999px;min-width:0}
.oc-form input[type=email]:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.oc-msg{font-size:12.5px;color:var(--navy-mute)}

/* the shop headline is a sentence now, so it gets the width */
.sh-top h1{font-size:clamp(44px,5.4vw,76px);max-width:18ch}
@media(min-width:900px){.sh-top{grid-template-columns:1.25fr 1fr}.sh-top .lede{max-width:44ch}}
/* odd lesson counts: the last card spans the row on the two-column phone grid (no orphan) */
@media(max-width:899px){.lgrid li:last-child:nth-child(odd){grid-column:1/-1}}
/* long related-card prices stack above the button on small phones */
@media(max-width:420px){.cfoot{flex-wrap:wrap}.cfoot .cprice{flex-basis:100%}}

/* bundle images are drawn on the tile colour, so show them whole */
.tile.t-bundle>img{padding:0;object-fit:contain}

/* coming-soon pages (status waitlist): the "Get it first" box sits where the buy box would */
.wlbox .wl-h{font-size:28px;margin:0 0 4px}
.wl-form{display:grid;gap:10px;margin-top:16px}
.wl-form[hidden]{display:none}
.wl-form input[type=text],.wl-form input[type=email]{font:inherit;font-size:16px;padding:13px 16px;border:1px solid var(--line,#d8d8d8);border-radius:8px;min-width:0}
.wl-form input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.wl-form .btn{width:100%}
.wl-msg{margin:10px 0 0;color:var(--mute)}
.wl-img img{width:100%;height:auto;border-radius:6px;object-fit:cover}
.prodhero .wl-img.cover-mock{transform:none;box-shadow:none;background:#F1F4FB;border:0;padding:0;aspect-ratio:auto;border-radius:10px;overflow:hidden}
.prodhero .wl-img.cover-mock>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

/* ---------- book pages (15 Oct 2026): the cut-out cover on the shop's paper tile, shadowed like the shop card ---------- */
.bookstage{background:var(--tile);aspect-ratio:1;display:grid;place-items:center;max-height:560px}
.bookstage img{width:auto;height:auto;max-width:72%;max-height:84%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(21,38,76,.24)) drop-shadow(0 1px 1px rgba(21,38,76,.25))}

/* ---------- included tools strip (20 Oct 2026): under the hero's buy button, in the tools band's navy and yellow ---------- */
.tstrip{background:var(--navy);color:var(--white);margin-top:14px;padding:14px 18px 10px}
.ts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.22)}
.ts-h{font-family:var(--head);font-size:22px;letter-spacing:.04em;line-height:1.05;text-transform:uppercase;color:var(--yellow);margin:0 0 10px}
.ts-h span{white-space:nowrap}
.ts-fan{display:flex;flex:none;padding-left:8px}
.ts-phone{display:block;width:34px;height:50px;margin-left:-7px;border:2px solid var(--white);border-bottom:0;border-radius:7px 7px 0 0;overflow:hidden;background:var(--white)}
.ts-phone:nth-child(2){height:56px}
.ts-phone img{display:block;width:100%;height:auto}
.ts-list{list-style:none;margin:0;padding:6px 0 0}
.ts-list li{display:flex;align-items:baseline;gap:10px;padding:5px 0 5px 24px;position:relative;font-size:15.5px;line-height:1.3;color:var(--white)}
.ts-list li:before{content:"";position:absolute;left:5px;top:.45em;width:6px;height:11px;border:solid var(--yellow);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ts-list s{flex:none;margin-left:auto;font-family:var(--head);font-size:18px;letter-spacing:.04em;color:var(--navy-mute);text-decoration-thickness:2px}
/* the tools band, now straight after the hero: two tools fill the row; text blocks line up whatever their length */
.tb-item{align-content:start}
@media(min-width:900px){.tb-list.tb-n2{grid-template-columns:repeat(2,1fr)}}
/* phone: the thumbnails are too small to read there, so the header gets the full width and breaks after "tools," */
@media(max-width:560px){.ts-fan{display:none}.ts-head{display:block}}
/* struck prices: a lighter strike so a 9 never reads as a 0 */
.tb-price s,.ts-list s{text-decoration-thickness:1.5px}
/* one tool: the card takes the full row, phone on the left and its text beside it, lined up with the header's columns */
@media(min-width:900px){.tb-list.tb-n1{grid-template-columns:1fr}.tb-n1 .tb-item{grid-template-columns:1fr 1fr;gap:28px 64px;align-items:center}.tb-n1 .tb-item h3{font-size:clamp(30px,2.6vw,40px)}.tb-n1 .tb-item p{font-size:17px;max-width:30em}}
/* long titles (class from build.mjs): smaller on desktop so the Buy button stays above the fold at 1440x900 */
@media(min-width:900px){.phero h1.h1-long{font-size:clamp(40px,4.3vw,62px);max-width:20ch;text-wrap:balance}}

/* ---------- cookie bar (Fish, 22 Oct 2026): the Letter site's bar in the shop's clothes. The pixel waits for OK. ---------- */
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--r);padding:12px 14px;font-family:var(--body);font-size:14px;line-height:1.4;max-width:720px;margin:0 auto;box-shadow:0 8px 30px rgba(21,38,76,.16)}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;flex:1 1 240px;max-width:none}
.cookiebar a{color:var(--mute)}
.cb-btns{display:flex;gap:8px;margin-left:auto}
.cookiebar button{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em;padding:11px 18px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--navy);color:var(--navy);text-align:center;white-space:nowrap}
.cookiebar button.ok{background:var(--yellow);box-shadow:none;color:var(--ink)}
.cookiebar button:hover{filter:brightness(.96)}
.cookiebar button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* room under the page while the bar is open, so the Pay button and the sticky buy bar can scroll clear of it */
html.cb-open body{padding-bottom:var(--cb-h,140px)}
html.cb-open .stickybuy{bottom:var(--cb-h,140px)}
html.cb-open .jf-launcher{bottom:var(--cb-h,140px)}
/* proof toast (6 Nov 2026): recent real orders, bottom left */
.ptoast{position:fixed;left:20px;bottom:20px;z-index:55;width:min(340px,calc(100vw - 32px));background:var(--white);border:2px solid var(--navy);box-shadow:0 14px 34px rgba(14,27,58,.18);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.ptoast.on{opacity:1;transform:none}
.ptoast[hidden]{display:none}
.pt-in{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:12px 38px 12px 12px;color:var(--ink);text-decoration:none}
.pt-img{width:56px;height:56px;background:var(--light);overflow:hidden}
.pt-img img{width:100%;height:100%;object-fit:cover;display:block}
.pt-txt{display:flex;flex-direction:column;font-size:14px;line-height:1.3}
.pt-txt b{font-size:15px}
.pt-what{margin-top:1px}
.pt-in:hover .pt-what{text-decoration:underline}
.pt-when{margin-top:4px;font-size:12.5px;color:var(--mute)}
.pt-x{position:absolute;right:6px;top:2px;border:0;background:none;font-size:24px;line-height:1;padding:4px;color:var(--mute);cursor:pointer}
@media(max-width:899px){.ptoast{left:16px;bottom:16px}body:has(.stickybuy.show) .ptoast{bottom:84px}}
@media(prefers-reduced-motion:reduce){.ptoast{transition:opacity .2s;transform:none}}
@media(max-width:899px){.pt-in{grid-template-columns:44px 1fr;gap:12px;padding:10px 36px 10px 10px}.pt-img{width:44px;height:44px}.pt-txt{font-size:13.5px}.pt-txt b{font-size:14px}.pt-what{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.pt-when{margin-top:2px;font-size:12px}}