/* ===== shared by the three options (looks-2026-10-29/home, tools/shared.css; copied into each opt.css by tools/css.py) ===== */
/* placeholders: visible, never reader copy (signed words only) */
.ph{background:repeating-linear-gradient(135deg,rgba(44,32,48,.06) 0 6px,transparent 6px 12px);outline:1px dashed rgba(44,32,48,.45);outline-offset:2px;border-radius:4px;padding:0 4px;color:var(--ink)}
/* the Companion in a window: a light frame drawn here, the real screenshot inside it (Notion's blue and green set in ink, tools/prep.py) */
.win{position:relative;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(44,32,48,.10),0 24px 48px -30px rgba(44,32,48,.45)}
.win-bar{display:flex;gap:6px;align-items:center;height:22px;padding:0 11px;background:#fbf7f2;border-bottom:1px solid rgba(44,32,48,.08)}
.win-bar i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(44,32,48,.16)}
.win img,.t.comp .win img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.phone{position:relative;border-radius:26px;background:var(--ink);padding:6px;box-shadow:0 26px 44px -26px rgba(44,32,48,.55)}
.phone img{display:block;width:100%;height:auto;border-radius:20px}
/* the hero tile: the window in the 364 px column, the page under its banner (12.8's line), whole */
.t.comp .win{width:364px;max-width:100%}
@media (min-width:1024px) and (max-width:1439px){ .page .t.comp .win{width:100%} }
@media (max-width:1023px){
 .t.comp .win{width:100%;margin:0 0 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== round 3: the product block, alive (opt-3a, opt-3b). Business Explained's static block (WD-23: the picture big on
   one side, the offer on the other) with Apple's scroll feel (WD-133 the scrubbed open and labels after the parts settle,
   WD-136 real screens in real devices). No pin: the stage reads its own passage (motion/scrub.js v2, followed), so the
   page never stops and something always moves while the stage is on screen. ===== */
.sec.show{padding:40px 0 112px}
.show-grid{display:grid;grid-template-columns:minmax(0,736fr) minmax(0,488fr);column-gap:72px;align-items:center}
/* the stage panel: rounded, its own lit ground (First light: cream to dawn, a floor, light falling on the box) */
.panel{position:relative;aspect-ratio:1/0.96;border-radius:32px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#fffaf3 0%,#fff3e3 56%,#fbe7cf 100%);
  box-shadow:0 0 0 1px rgba(44,32,48,.06),0 30px 60px -40px rgba(44,32,48,.45),inset 0 1px 0 rgba(255,255,255,.8)}
.lt{position:absolute;pointer-events:none;display:block}
.floor{left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(242,165,74,0) 0%,rgba(242,165,74,.06) 40%,rgba(242,165,74,.12) 100%)}
/* one ground: a soft shared shadow under the whole group, and a contact shadow under each standing object */
.scene::before{content:"";position:absolute;left:8%;right:6%;top:62%;height:26%;border-radius:50%;background:radial-gradient(closest-side,rgba(44,32,48,.16),rgba(44,32,48,0));filter:blur(6px);opacity:calc(.25 + var(--pse,1) * .75)}
.p3 .pic::after,.p4 .pic::after{content:"";position:absolute;left:10%;right:10%;bottom:-4%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(44,32,48,.22),rgba(44,32,48,0));z-index:-1}
.scene{position:absolute;inset:4% 3% 3%}
.obj{position:absolute;margin:0;will-change:transform,opacity}
.obj .pic{position:relative;aspect-ratio:5/4}
.obj .pic > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.box{z-index:3}
.drw{position:absolute;inset:0;display:block}
.drw img,.drw canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.drw.ready img{opacity:0}
.p3{left:0;top:3%;width:47%;z-index:1}
.p4{left:59%;top:0;width:41%;z-index:1}
.box{left:21%;top:24%;width:58%}
.p1{left:1%;top:58%;width:41%;z-index:4}
.p5{left:64%;top:55%;width:30%;z-index:4}
.p1 .pic > img,.p4 .pic > img{transform:scale(1.2)}
.pic img.sheet{position:absolute;inset:4% 0 0;margin:0 auto;width:auto;height:96%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(44,32,48,.22));transform:rotate(-3deg)}
/* the Companion as a product: real screen, full colour, a window with depth and a phone; the screens turn on as it lands */
.dev{position:absolute;inset:0}
.dev .win{position:absolute;left:0;top:6%;width:80%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(44,32,48,.10),0 2px 4px rgba(44,32,48,.06),0 22px 44px -16px rgba(44,32,48,.32),0 60px 90px -50px rgba(44,32,48,.38)}
.dev .win-bar{display:flex;gap:5px;align-items:center;height:16px;padding:0 8px;background:#fbf7f2;border-bottom:1px solid rgba(44,32,48,.08)}
.dev .win-bar i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(44,32,48,.16)}
.scr{position:relative}
.scr img{display:block;width:100%;height:auto}
.scr .off{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#3a2c40 0%,#241a28 60%);opacity:var(--off,0)}
.dev .phone{position:absolute;right:0;bottom:4%;width:27%;padding:3.2%;border-radius:22%/11%;background:#241a28;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 2px 3px rgba(44,32,48,.2),0 26px 40px -18px rgba(44,32,48,.5)}
.dev .phone .scr{border-radius:16%/8%;overflow:hidden}
.dev .phone .isl{position:absolute;left:50%;top:5.2%;width:26%;height:3%;border-radius:999px;background:#241a28;transform:translateX(-50%);z-index:2}
/* the offer side */
.side h2{margin-top:2px}
.side .price{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.side .price b{font:600 52px/1 "Instrument Sans";letter-spacing:-.04em}
.side .price span{font:500 15px/1.2 "Instrument Sans";color:var(--ink-soft)}
.side .then{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:8px}
.side .then.tax{margin-top:2px}
.inlist{margin-top:26px;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.ln{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--hair);font:500 16px/1.45 "Instrument Sans";color:var(--ink-soft);transition:color var(--scrub-dur) var(--scrub-ease)}
.ln .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--ink-soft);font:600 11px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums;transition:background var(--scrub-dur) var(--scrub-ease),color var(--scrub-dur) var(--scrub-ease),box-shadow var(--scrub-dur) var(--scrub-ease)}
.ln.on{color:var(--ink)}
.ln.on .n{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.3px var(--ink)}
.buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:12px;font:600 15px/1.35 "Instrument Sans";color:var(--ink)}
.chip .ring{width:48px;height:48px;border-radius:50%;border:1.6px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.chip .ring b{font:600 17px/1 "Instrument Sans";letter-spacing:-.03em}
.chip .ring small{font:600 7.5px/1 "Instrument Sans";letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
@media (prefers-reduced-motion:reduce){ .obj{transform:none!important;opacity:1!important;filter:none!important} .ln{transition:none} }
@media (min-width:1024px) and (max-width:1439px){
 .page .ln{font-size:max(16px,calc(15px / var(--k)))}
 .page .side .price b{font-size:max(52px,calc(40px / var(--k)))}
 .page .side .price span,.page .side .then,.page .chip{font-size:max(15px,calc(14px / var(--k)))}
 .page .bd,.page .ln .n{font-size:max(11px,calc(11px / var(--k)))}
}
@media (max-width:1023px){
 .sec.show{padding:16px 0 64px}
 .show-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .side{display:contents}
 .side .kick{order:1}.side h2{order:2}.side .price{order:3;margin-top:14px}.side .then{order:4}.stage{order:5;margin-top:20px}.inlist{order:6;margin-top:20px}.buy{order:7}
 .panel{border-radius:22px;aspect-ratio:1/1.02}
 .dev .win-bar{height:10px;padding:0 5px;gap:3px}
 .dev .win-bar i{width:4px;height:4px}
 .bd{width:20px;height:20px;font-size:11px}
 .side .price b{font-size:40px}
 .side .price span,.side .then{font-size:14px}
 .ln{font-size:15px}
 .buy{flex-direction:column;align-items:stretch;gap:18px}
 .buy .btn{width:100%}
}
/* kept from round 1's option 2: the hero's crop whole, the guides' stage sets */
.t.comp .win img,.page .t.comp .win img{height:auto;aspect-ratio:auto}
.shelf .set{margin:-6px -8px 14px;aspect-ratio:1.45/1;overflow:hidden;border-radius:12px}
.shelf .set img{width:100%;height:100%;object-fit:cover;object-position:42% 62%;transform:scale(1.18)}
@media (max-width:1023px){ .shelf .set{margin:4px 0 10px;aspect-ratio:2.2/1} .shelf .set img{transform:scale(1.05);object-position:42% 60%} }

/* ===== round 4: 3b refined (Jay: "big and centered and closed at first ... then as i scroll it would sort of shrink
   open and the things would fly out of it ... the number labels in the final thing ... i dont like the look of the
   iphone"). Read after r3.css and r3-b.css. ===== */
/* the opening: the panel starts in the middle of the block, the offer arrives beside it as the box shrinks open */
.panel{transform:translateX(var(--px,0px)) scale(var(--psc,1));transform-origin:50% 50%}
.side{opacity:var(--side,1);transform:translateX(calc((1 - var(--side,1)) * 48px))}
.side:focus-within{opacity:1;transform:none}
/* the drawer through motion/frames.js (alpha, direct) */
.drw.frames-ready img{opacity:0}
/* the phone: thin and modern; a metal rim, a thin black bezel, the island, the Companion's sharp 3x screen */
.dev .iph{position:absolute;right:1%;bottom:3%;width:24%;aspect-ratio:71.6/147.6;border-radius:16%/7.8%;padding:1.4%;
  background:linear-gradient(140deg,#efebee 0%,#a29aa5 20%,#dcd7db 44%,#857d88 70%,#d3cdd1 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 1px 2px rgba(44,32,48,.18),0 16px 28px -12px rgba(44,32,48,.42),0 40px 60px -38px rgba(44,32,48,.4)}
.iph .bez{position:relative;width:100%;height:100%;border-radius:14.6%/7.1%;background:#0e0b10;padding:3.4%;overflow:hidden}
.iph .scr{position:relative;width:100%;height:100%;border-radius:11.8%/5.7%;overflow:hidden;background:#fff;padding-top:13%}
.iph .scr img{width:100%;height:auto}
.iph .isl{position:absolute;left:50%;top:4.6%;width:30%;height:3.4%;transform:translateX(-50%);border-radius:999px;background:#0e0b10;z-index:2}
.iph .btn-l,.iph .btn-r{position:absolute;display:block;width:1.8%;border-radius:1px;background:linear-gradient(90deg,#8a828d,#c9c3c7)}
.iph .btn-l{left:-1.2%;top:21%;height:8%}
.iph .btn-r{right:-1.2%;top:27%;height:13%}
/* the markers: one per part, the number of its line; they appear as each part lands */
.mk{position:absolute;z-index:6;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:#fffaf3;box-shadow:0 0 0 1.4px var(--ink),0 4px 10px -4px rgba(44,32,48,.35);font:600 12px/1 "Instrument Sans";color:var(--ink);
  font-variant-numeric:tabular-nums;opacity:var(--lt,1);transform:scale(calc(.7 + var(--lt,1) * .3));transition:background .3s,color .3s}
.p3 .mk{left:3%;top:13%}.p4 .mk{left:19%;top:19%}.box .mk{left:57%;top:71%}.p1 .mk{left:22%;top:27%}.p5 .mk{right:19%;top:9%}
/* a line and its part light together (hover or focus on either, on a computer) */
.obj .pic{transition:transform .35s var(--scrub-ease),opacity .35s var(--scrub-ease)}
.scene.hl-any .obj:not(.hl) .pic{opacity:.42}
.obj.hl .pic{transform:translateY(-6px)}
.obj.hl .mk{background:var(--ink);color:#fff}
.ln{cursor:default;border-radius:6px}
.ln.hl{color:var(--ink)}
.ln.hl .n{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.3px var(--ink)}
.ln:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* the value line's slot (card 6991; no struck "was" price: we never charged one) */
.vslot{margin-top:6px;font:400 13px/1.4 "Instrument Sans";color:var(--ink-soft)}
@media (min-width:1024px) and (max-width:1439px){ .page .vslot{font-size:max(13px,calc(13px / var(--k)))} .page .mk{font-size:max(12px,calc(12px / var(--k)))} }
@media (max-width:1023px){
 .panel{transform:none}
 .side{opacity:1;transform:none}
 .mk{width:20px;height:20px;font-size:11px}
 .side .vslot{order:4}
}
@media (prefers-reduced-motion:reduce){ .panel{transform:none} .side{opacity:1;transform:none} .obj .pic{transition:none} }
html:not(.js) .panel{transform:none}
html:not(.js) .side{opacity:1;transform:none}
/* round 4b (the judge's timing pass): a panel no taller than 62% of the screen, so the closed box and the finished shot
   are each seen whole; the phone moved clear of the box; a marker fills with ink as its line lights */
.v-4 .stage{display:flex;justify-content:center}
.v-4 .panel{width:min(100%, calc(62vh / .96))}
.v-4 .p3{left:-1%;top:2%;width:45%}
.v-4 .dev .win{left:auto;right:0}
.v-4 .dev .iph{right:auto;left:0;bottom:-2%}
.obj.on .mk{background:var(--ink);color:#fff}
.v-4 .p3 .mk{left:30%;top:13%}
@media (min-width:1024px) and (max-width:1439px){ .page .v-4 .panel{width:min(100%, calc(62vh / var(--k) / .96))} }
@media (max-width:1023px){ .v-4 .panel{width:100%} }

/* ===== round 5 (opt-5): Business Explained's product block made bigger and alive (WD-23: the product on a shape with an
   eye-catching ground, breaking out past its edge), the box centred the whole time, everything at least 2x sharp.
   Read after shared.css, r3.css, r4.css. ===== */
.sec.show{padding:56px 0 112px}
.show-grid{grid-template-columns:minmax(0,60fr) minmax(0,40fr);column-gap:64px}
/* the stage: 4:3, a dawn ground with a large oval, and room for the objects to break past its edge */
.v-5 .panel{position:relative;aspect-ratio:4/3;width:100%;max-height:none;border-radius:0;overflow:visible;background:none;box-shadow:none;transform:none;isolation:isolate}
.v-5 .ground{position:absolute;inset:0;border-radius:36px;overflow:hidden;
  background:linear-gradient(180deg,#fffaf2 0%,#fff1de 58%,#fbe3c6 100%);
  box-shadow:0 0 0 1px rgba(44,32,48,.06),0 40px 80px -50px rgba(44,32,48,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.v-5 .ground i{position:absolute;display:block;pointer-events:none}
.v-5 .oval{left:50%;top:50%;width:74%;aspect-ratio:1.18/1;border-radius:50%;transform:translate(-50%,-46%) translateY(var(--gy,0px)) scale(var(--os,1));
  background:radial-gradient(closest-side,rgba(255,236,206,1) 0%,rgba(255,217,166,.95) 46%,rgba(255,198,107,.42) 78%,rgba(255,198,107,0) 100%)}
.v-5 .oring{left:50%;top:50%;width:84%;aspect-ratio:1.18/1;border-radius:50%;transform:translate(-50%,-46%) translateY(calc(var(--gy,0px) * .6));
  box-shadow:inset 0 0 0 1px rgba(44,32,48,.07);opacity:.9}
.v-5 .floor{left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(242,165,74,0),rgba(242,165,74,.1))}
.v-5 .scene{position:absolute;inset:-5% -4% -4%;transform:none}
.v-5 .obj{position:absolute;margin:0}
.v-5 .pic > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* the box: one slot in the middle; the closed still (2x) shows until the drawer starts, then the frames */
.v-5 .box{left:30%;top:28.7%;width:40%;z-index:3;transform-origin:50% 50%;pointer-events:none;will-change:auto}
.v-5 .box .closed-hi{position:absolute;left:15.6%;top:9.31%;width:54.75%;height:62.94%;object-fit:fill;opacity:var(--ch,1)}
.v-5 .drw{opacity:var(--cv,0)}
.v-5 .p3{left:0;top:3%;width:35%;z-index:1}
.v-5 .p4{left:66%;top:-1%;width:33%;z-index:1}
.v-5 .p1{left:3%;top:56%;width:31%;z-index:4}
.v-5 .p5{left:70%;top:52%;width:22%;z-index:4}
.v-5 .p1 .pic > img,.v-5 .p4 .pic > img{transform:scale(1.18)}
.v-5 .mk{opacity:var(--lt,1)}
.v-5 .p3 .mk{left:30%;top:13%}.v-5 .p4 .mk{left:19%;top:19%}.v-5 .box .mk{left:61%;top:70%}.v-5 .p1 .mk{left:22%;top:27%}.v-5 .p5 .mk{right:18%;top:9%}
/* hover dims the others gently, and only on a real pointer move (scrolling under a resting cursor never dims anything) */
.v-5 .scene.hl-any .obj:not(.hl) .pic{opacity:.6}
@media (max-width:1023px){
 .show-grid{display:flex;flex-direction:column;align-items:stretch}
 .v-5 .panel{aspect-ratio:1/1}
 .v-5 .ground{border-radius:24px}
 .v-5 .scene{inset:-4% -3% -3%}
 .v-5 .box{left:26%;top:30.8%;width:48%}
 .v-5 .p3{left:0;top:2%;width:44%}.v-5 .p4{left:58%;top:0;width:42%}.v-5 .p1{left:0;top:63%;width:44%}.v-5 .p5{left:66%;top:61%;width:30%}
}
@media (prefers-reduced-motion:reduce){ .v-5 .box .closed-hi{opacity:0} .v-5 .drw{opacity:1} }
html:not(.js) .v-5 .box .closed-hi{opacity:0}
html:not(.js) .v-5 .drw{opacity:1}
.sec.show.v-5{overflow-x:clip}   /* the parts break past the stage edge, never past the page edge */

/* ===== round 6 (opt-6a, 6b, 6c; 30 Oct): Jay's seven notes on opt-5. Read after shared.css, r3.css, r4.css, r5.css.
   Tokens only (§11.1, 12.3): white, cream, ink, ink-soft, ink at an alpha. No hover state anywhere (12.5). ===== */

/* ---- the System display's stage, quieter (Jay: "i dont like the background on the oval"): a white tile (12.6's ring and
   shadow, the quiz card's depth), a flat cream oval with a crisp edge (Business Explained's shape, WD-23, without its
   loud fill), one hairline ring; the warm glow and the dawn floor are gone. The group's soft ink shadow stays. */
.v-6 .ground{background:var(--white);box-shadow:0 0 0 1px rgba(44,32,48,.07),0 24px 48px -30px rgba(44,32,48,.35)}
.v-6 .oval{background:var(--cream);width:72%;transform:translate(-50%,-46%)}
.v-6 .oring{width:84%;box-shadow:inset 0 0 0 1px rgba(44,32,48,.08);opacity:1}
.v-6 .floor{display:none}
.v-6 .scene::before{background:radial-gradient(closest-side,rgba(44,32,48,.13),rgba(44,32,48,0))}

/* ---- phone outline (r6) ----------------------------------------------------------------------------------------
   The phone drawn as a line outline, in the same language as the window (.dev .win: white, a thin ink ring, the same
   layered soft shadow): no metal, no black bezel. Markup (shared with the result page):
     div.pho > div.scr > (the screen picture, at least 2x) + i.off
       then span.isl, i.k1, i.k2 inside div.pho
   .pho is positioned by its parent (here inside .dev: bottom right of the window, 24% of the device group's width);
   everything inside is in % of the phone itself, so it scales to any size. The screen keeps its picture's own pixels
   (phone-full.webp, 780 px wide: 14x at 1440). Selectors: .pho .pho .scr .pho .isl .pho .k1 .pho .k2 */
.pho{position:absolute;right:1%;bottom:3%;width:24%;aspect-ratio:71.6/147.6;border-radius:16%/7.8%;background:var(--white);
  box-shadow:0 0 0 1px rgba(44,32,48,.16),0 2px 4px rgba(44,32,48,.06),0 22px 44px -16px rgba(44,32,48,.32),0 60px 90px -50px rgba(44,32,48,.38)}
.pho .scr{position:absolute;left:6.4%;right:6.4%;top:3.1%;bottom:3.1%;border-radius:12.5%/5.9%;overflow:hidden;background:var(--white);
  box-shadow:0 0 0 1px rgba(44,32,48,.10);padding-top:13%}
.pho .scr img{display:block;width:100%;height:auto}
.pho .isl{position:absolute;left:50%;top:5.2%;width:27%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(44,32,48,.22);z-index:2}
.pho .k1,.pho .k2{position:absolute;display:block;width:1.8%;border-radius:2px;background:var(--white);box-shadow:0 0 0 1px rgba(44,32,48,.16)}
.pho .k1{left:-1.8%;top:20%;height:8%}
.pho .k2{right:-1.8%;top:26%;height:13%}
/* ---- /phone outline (r6) -------------------------------------------------------------------------------------- */

/* ---- the hero's stage rows open their stage in the explorer below */
.stg li a{display:grid;grid-template-columns:20px 1fr auto;align-items:baseline;gap:6px;color:inherit;text-decoration:none;border-radius:6px}
.stg li a > span:nth-child(2){text-decoration:underline;text-decoration-color:rgba(44,32,48,.3);text-decoration-thickness:1px;text-underline-offset:3px}
.stg li{display:block}

/* ---- the hero, option c: the Today page set in the page's own type (crisp at any size; the real page's words) */
.t.comp .win.live{width:364px;max-width:100%}
.tdy{padding:18px 20px 18px;background:var(--white)}
.tdy-h{font:700 28px/1.05 "Instrument Sans";letter-spacing:-.025em;color:var(--ink)}
.tdy-s{font:400 14px/1.4 "Instrument Sans";color:var(--ink-soft);margin-top:8px}
.tdy-card{margin-top:14px;border-radius:10px;padding:12px 14px 13px;box-shadow:0 0 0 1px rgba(44,32,48,.12),0 8px 16px -12px rgba(44,32,48,.3)}
.tdy-t{font:600 14px/1.3 "Instrument Sans";color:var(--ink)}
.tdy-m{font:500 13px/1.3 "Instrument Sans";color:var(--ink-soft);margin-top:6px}
.tdy-q{font:400 13px/1.45 "Instrument Sans";color:var(--ink);margin-top:8px;text-wrap:pretty}
.tdy-bar{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 13px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tdy-bar i{flex:1;height:5px;border-radius:3px;background:rgba(44,32,48,.08);overflow:hidden}
.tdy-bar b{display:block;width:52.4%;height:100%;border-radius:3px;background:var(--ink)}
.tdy-row{display:grid;grid-template-columns:auto 18px minmax(0,1fr);gap:14px;align-items:center;margin-top:14px;padding:10px 2px 0;border-top:1px solid var(--hair);font:600 14px/1.3 "Instrument Sans";color:var(--ink)}
.tdy-row .bx{display:flex;width:18px;height:18px;border-radius:4px;background:var(--ink);color:var(--white);padding:1px}
.tdy-row .bx svg{width:100%;height:100%}
.tdy-row .l{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the five stages, an explorer (Jay: "may be presented better and have some click throughs") */
.t.stx{margin-top:56px;padding:0}
.stx-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.stx-tab{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"no nm" "no sl" "no ct";column-gap:12px;row-gap:3px;align-items:start;padding:22px 22px 20px}
.stx-tab + .stx-tab{box-shadow:inset 1px 0 0 var(--hair)}
.stx-tab .no{grid-area:no;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--ink-soft);
  font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.stx-tab .nm{grid-area:nm;font:600 17px/1.3 "Instrument Sans";padding-top:3px}
.stx-tab .sl{grid-area:sl;font:400 14px/1.35 "Instrument Sans";color:var(--ink-soft)}
.stx-tab .ct{grid-area:ct;font:500 13px/1.3 "Instrument Sans";color:var(--ink-soft);margin-top:6px}
.stx-tab[aria-selected="true"]{background:var(--cream)}
.stx-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.stx-tab[aria-selected="true"] .no{background:var(--ink);color:var(--white);box-shadow:none}
.stx-tab:focus-visible{outline:3px solid var(--ink);outline-offset:-5px;border-radius:14px}
.stx-panel{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:44px;padding:34px 32px 36px}
.stx-panel[hidden]{display:none}
.stx-panel:focus-visible{outline:3px solid var(--ink);outline-offset:-6px;border-radius:18px}
.stx-panel.in{animation:stx-in .4s var(--scrub-ease) both}
@keyframes stx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stx-n{font:600 104px/.82 "Instrument Sans";letter-spacing:-.06em;color:var(--ink)}
.stx-k{font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:26px}
.stx-l{font:500 24px/1.25 "Instrument Sans";letter-spacing:-.015em;color:var(--ink);margin-top:10px}
.stx-lead .ghost{display:inline-block;margin-top:26px;font-size:16px}
.stx-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
.gc{display:block;color:var(--ink);text-decoration:none;border-radius:12px}
.gc .cv{display:block;aspect-ratio:1.2/1;border-radius:12px;background:var(--cream);overflow:hidden}
.gc .cv img{width:100%;height:100%;object-fit:contain;transform:scale(1.04)}
.gc .gt{display:block;font:600 16px/1.3 "Instrument Sans";margin-top:12px;text-decoration:underline;text-decoration-color:rgba(44,32,48,.3);text-decoration-thickness:1px;text-underline-offset:4px}
.gc .gs{display:block;font:400 14px/1.45 "Instrument Sans";color:var(--ink-soft);margin-top:5px;text-wrap:pretty}
.gc:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
html:not(.js) .stx-tabs{display:none}
html:not(.js) .stx-panel[hidden]{display:grid}
html:not(.js) .stx-panel + .stx-panel{border-top:1px solid var(--hair)}

/* ---- Look inside a guide (the reference pass: BestSelf's "Inside the Self Journal", WD-149; Ultimate Brain's part by
   part, WD-151): one real guide open, its seven parts, its day 1 */
.look .grid2{align-items:center}
.lk-pics{position:relative;padding-bottom:12%}
.lk-a img{width:100%;height:auto}
.lk-b{position:absolute;right:-7%;bottom:-2%;width:48%}
.lk-b img{width:100%;height:auto}
.parts{margin-top:28px;border-top:1px solid var(--hair)}
.parts li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);font:400 16px/1.4 "Instrument Sans";color:var(--ink-soft)}
.parts .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.parts b{font-weight:600;color:var(--ink);margin-right:4px}
.d1{margin-top:22px;font:400 17px/1.55 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.d1 b{font-weight:600;color:var(--ink)}
.lk-go{margin-top:28px}

/* ---- a note from Jay (the founder's letter: Ship 30's, WD-155; Forte's and Ali Abdaal's "Hi, I'm", WD-159, WD-154).
   Placeholder until Jay writes it: no face (DBY's rule), a written signature and the entity line's own words. */
.sec.note{padding:104px 0 112px}
.note-in{max-width:calc(880px + 2 * var(--g));text-align:center}
.note-in .kick{margin-bottom:28px}
.nt{font:500 32px/1.35 "Instrument Sans";letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.sig{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sg{font:italic 400 52px/1 "Instrument Serif",serif;color:var(--ink)}
.who{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.who b{font-weight:600;color:var(--ink)}

/* ---- Questions, answered (the sales page's own words) with the guarantee beside them (FAQ on 5 of 10 rows; Ship 30's
   refund block before its FAQ, WD-155) */
.faq .grid2{align-items:start}
.gtee{margin-top:40px;display:flex;align-items:center;gap:20px;padding:22px 26px 22px 22px;max-width:460px}
.gtee .ring{width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.gtee .ring b{font:600 28px/1 "Instrument Sans";letter-spacing:-.03em}
.gtee .ring small{font:600 9.5px/1 "Instrument Sans";letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.gt-h{font:600 19px/1.35 "Instrument Sans";color:var(--ink)}
.gt-l{margin-top:8px;font:500 15px/1.4 "Instrument Sans"}
.gt-l a{text-decoration-thickness:1px;text-underline-offset:3px}
.qa{border-top:1px solid var(--hair)}
.qi{border-bottom:1px solid var(--hair)}
.qi summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:18px;align-items:center;padding:22px 0;cursor:pointer;font:600 19px/1.35 "Instrument Sans";color:var(--ink);border-radius:8px}
.qi summary::-webkit-details-marker{display:none}
.qi summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.qi .pl{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--ink);transition:transform .3s var(--scrub-ease)}
.qi .pl svg{width:16px;height:16px}
.qi[open] .pl{transform:rotate(45deg)}
.qi p{padding:0 48px 26px 0;font:400 17px/1.6 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}

/* ---- the close, now white: the cream footer closes the page as the cream band opens it (12.13's alternative) */
.close .t.offer{box-shadow:0 0 0 1px rgba(44,32,48,.07),0 24px 48px -30px rgba(44,32,48,.35)}

/* ---- the footer, rebuilt (the reference pass: a free first step above the links, Forte Labs WD-159 and Ali Abdaal
   WD-154; numbered or labelled link columns, Intelligent Change WD-148 and BestSelf WD-149; the small print last).
   Ours has no newsletter: the Diagnostic is the free first step. The words under the rule are 12.4's, unchanged. */
.foot6{background:var(--cream);padding-top:88px}
.f-top{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px;padding-bottom:72px}
.f-brand .brand img{height:38px;margin-left:-4.8px}
.f-brand .brand span{font-size:19px}
.f-line{font:600 40px/1.06 "Instrument Sans";letter-spacing:-.035em;color:var(--ink);margin-top:30px;max-width:11.5em;text-wrap:balance}
.f-go{margin-top:30px}
.f-mi{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:14px}
.f-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;column-gap:28px;padding-top:6px}
.fh{font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.fc ul{display:flex;flex-direction:column;gap:12px}
.fc a{font:500 15px/1.35 "Instrument Sans";color:var(--ink);text-decoration:none;border-radius:4px}
.f-small{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px;row-gap:12px;padding:26px 0 34px;border-top:1px solid var(--hair)}
.f-small .fd,.f-small .fe{grid-column:1}
.f-small .fr{grid-column:2;grid-row:1 / span 2;align-self:end;text-align:right}

/* ---- 1024 to 1439: the 1440 page drawn smaller, no text under its phone size (§12.1) */
@media (min-width:1024px) and (max-width:1439px){
 .page .stx-tab .nm{font-size:max(17px,calc(16px / var(--k)))}
 .page .stx-tab .sl,.page .gc .gs,.page .tdy-s{font-size:max(14px,calc(14px / var(--k)))}
 .page .stx-tab .ct,.page .tdy-m,.page .tdy-q,.page .tdy-bar{font-size:max(13px,calc(13px / var(--k)))}
 .page .stx-tab .no,.page .stx-k,.page .parts .no,.page .fh{font-size:max(12px,calc(12px / var(--k)))}
 .page .stx-l{font-size:max(24px,calc(20px / var(--k)))}
 .page .stx-lead .ghost,.page .gc .gt{font-size:max(16px,calc(15px / var(--k)))}
 .page .parts li{font-size:max(16px,calc(15px / var(--k)))}
 .page .d1,.page .qi p{font-size:max(17px,calc(16px / var(--k)))}
 .page .nt{font-size:max(32px,calc(23px / var(--k)))}
 .page .who,.page .gt-l,.page .f-mi,.page .fc a{font-size:max(15px,calc(14px / var(--k)))}
 .page .qi summary,.page .gt-h{font-size:max(19px,calc(17px / var(--k)))}
 .page .f-line{font-size:max(40px,calc(28px / var(--k)))}
 .page .tdy-h{font-size:max(28px,calc(24px / var(--k)))}
 .page .tdy-t,.page .tdy-row{font-size:max(14px,calc(13px / var(--k)))}
 .page .t.comp .win.live{width:100%}
 .page .gtee .ring{width:max(76px,calc(64px / var(--k)));height:max(76px,calc(64px / var(--k)))}
 .page .gtee .ring b{font-size:max(28px,calc(23px / var(--k)))}
 .page .gtee .ring small{font-size:max(9.5px,calc(9.5px / var(--k)))}
 .page .f-brand .brand img{height:calc(38px / var(--k));margin-left:calc(-4.8px / var(--k))}
 .page .f-brand .brand span{font-size:calc(19px / var(--k))}
}

/* ---- phones, 1023 and below (§12.11) */
@media (max-width:1023px){
 .stg li a{grid-template-columns:16px 1fr}
 .t.stx{margin-top:32px}
 .stx-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .stx-tabs::-webkit-scrollbar{display:none}
 .stx-tab{flex:0 0 auto;min-width:148px;padding:14px 16px 13px;scroll-snap-align:start;grid-template-areas:"no nm" "no ct";row-gap:1px}
 .stx-tab .nm{font-size:16px;padding-top:4px}
 .stx-tab .sl{display:none}
 .stx-tab .ct{margin-top:2px}
 .stx-panel{grid-template-columns:minmax(0,1fr);row-gap:22px;padding:22px 16px 24px}
 .stx-n{display:none}
 .stx-k{margin-top:0}
 .stx-l{font-size:20px;margin-top:8px}
 .stx-lead .ghost{margin-top:16px;font-size:16px}
 .stx-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .gc .gt{font-size:15px;margin-top:10px}
 .gc .gs{font-size:14px}
 .look .grid2{row-gap:36px}
 .lk-pics{padding-bottom:16%;margin-right:4%}
 .lk-b{right:-4%;width:46%}
 .parts li{font-size:15px;padding:9px 0}
 .d1{font-size:16px}
 .sec.note{padding:64px 0 72px}
 .nt{font-size:23px}
 .sg{font-size:42px}
 .who{font-size:14px;text-wrap:balance}
 .gtee{margin-top:26px;padding:16px 18px 16px 16px;gap:16px}
 .gtee .ring{width:64px;height:64px}
 .gtee .ring b{font-size:23px}
 .gt-h{font-size:17px}
 .qi summary{font-size:17px;padding:18px 0;gap:14px}
 .qi p{font-size:16px;padding:0 0 22px}
 .foot6{padding-top:56px}
 .f-top{grid-template-columns:minmax(0,1fr);row-gap:44px;padding-bottom:44px}
 .f-line{font-size:30px;margin-top:22px}
 .f-mi{font-size:14px}
 .f-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;column-gap:16px}
 .fc a{font-size:15px;display:inline-block;padding:3px 0}
 .f-small{grid-template-columns:minmax(0,1fr);padding:24px 0 30px}
 .f-small .fd,.f-small .fe,.f-small .fr{grid-column:1;grid-row:auto;text-align:left;font-size:14px}
 .tdy{padding:14px 16px 16px}
 .tdy-h{font-size:24px}
 .tdy-s{font-size:13px}
 .tdy-t,.tdy-row{font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .stx-panel.in{animation:none} .qi .pl{transition:none} }

/* ===== round 7 (opt-7; 30 Oct): the final polish on 6c. Read after shared.css, r3.css, r4.css, r5.css, r6.css.
   Tokens only (§11.1, 12.3): white, cream, ink, ink-soft, ink at an alpha. No hover state anywhere (12.5).
   One light: the sun sits high, so every shadow falls straight down, soft and layered (a 1px ring, a short contact
   shadow, a long ambient one). ===== */

/* ---- phone screen (r7) -----------------------------------------------------------------------------------------
   Jay (30 Oct): "remove the outerlayer of the iphone thing ... just keep the screen thing with like maybe some front
   camera outline so people can tell its an iphone similar to what you did for the mac".
   The phone is ONLY its screen: the screen picture with iPhone corners, a hairline at the screen's edge in the laptop
   window's own line (.dev .win: 1px of ink at .10) and its same layered shadow, and the Dynamic Island, a small ink
   pill at the top centre, over a thin white status strip so it never covers the page's own bar. No body, no bezel,
   no side keys (the r6 i.k1/i.k2 are hidden if the markup still carries them).
   Markup (the r6 shape, shared with the result page):
     div.pho > div.scr > (the screen picture, at least 2x) + i.off      then span.isl inside div.pho
   .pho is placed by its parent (here inside .dev: bottom right, 24% of the device group's width; override left/right/
   bottom/width to place it elsewhere). Everything inside is in % of the phone, so it scales to any size.
   The proportions are an iPhone 15's screen: 393 x 852 pt, corners 55 pt, the island 126 x 37 pt, 11 pt from the top.
   Selectors: .pho .pho .scr .pho .scr img .pho .isl (.pho .k1 .pho .k2 hidden) */
.pho{position:absolute;right:1%;bottom:3%;width:24%;aspect-ratio:393/852;border-radius:14%/6.46%;background:var(--white,#fff);
  overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(44,32,48,.10),0 2px 4px rgba(44,32,48,.06),0 22px 44px -16px rgba(44,32,48,.32),0 60px 90px -50px rgba(44,32,48,.38)}
.pho .scr{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:var(--white,#fff);box-shadow:none;padding-top:13.2%}
.pho .scr img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.pho .isl{position:absolute;left:50%;top:1.29%;width:32%;height:4.34%;transform:translateX(-50%);border-radius:999px;
  background:var(--ink,#2c2030);box-shadow:none;z-index:2}
.pho .isl::after{content:"";position:absolute;right:11%;top:50%;width:22%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.22),rgba(255,255,255,.06) 60%,rgba(255,255,255,0) 72%)}
.pho .k1,.pho .k2{display:none}
/* ---- /phone screen (r7) --------------------------------------------------------------------------------------- */

/* ---- one shadow for the whole page (the sun overhead: every shadow falls straight down; a hairline ring, a short
   contact shadow, a long soft ambient one). Tiles, windows and the stage share it; the lifted objects keep their own. */
:root{--sh7:0 0 0 1px rgba(44,32,48,.07),0 1px 2px rgba(44,32,48,.05),0 10px 22px -14px rgba(44,32,48,.20),0 34px 64px -38px rgba(44,32,48,.32);
  --sh7-lo:0 0 0 1px rgba(44,32,48,.07),0 1px 2px rgba(44,32,48,.04),0 8px 18px -12px rgba(44,32,48,.16)}
.t,.v-6 .ground,.close .t.offer{box-shadow:var(--sh7)}
.t.comp .win,.win{box-shadow:0 0 0 1px rgba(44,32,48,.10),0 1px 2px rgba(44,32,48,.05),0 12px 26px -16px rgba(44,32,48,.24)}
.tdy-card{box-shadow:var(--sh7-lo)}

/* ---- a tighter rhythm (Jay: "not much dead space"): sections 112/120 -> 88/96, the show's bottom 112 -> 88 */
.sec{padding:88px 0 96px}
.sec.show{padding:48px 0 88px}
.sec .hd .kick{margin-bottom:18px}

/* ---- 2. the System display, symmetrical (Jay: "the square its in should match the thing next to it"): on a computer
   the stage tile takes the offer column's full height, top to top and bottom to bottom. The parts keep their places in
   % of the tile, so the composition only breathes a little taller. */
@media (min-width:1024px){
 .v-6 .show-grid{align-items:stretch}
 .v-6 .stage{display:flex;flex-direction:column}
 .v-6 .panel{aspect-ratio:auto;flex:1 1 auto;min-height:520px}
 .v-6 .side{display:flex;flex-direction:column;justify-content:center}
}

/* ---- 1. the five stages: round 5's stage sets, one card each (Jay: "the one before was better with the multiple guides
   in one pic ... make the display a bit better and give people the ability to click"). The set sits whole inside a cream
   frame (the picture is cropped to everything the render draws, its shadow included, so nothing touches a rounded
   corner). The picture and "All N in <stage>" open /shop#<stage>; every guide name opens /shop/<slug>. */
.g7 .sets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:52px}
.sc{display:flex;flex-direction:column;background:var(--white);border-radius:22px;padding:10px 10px 0;box-shadow:var(--sh7);scroll-margin-top:32px}
.sc-pic{display:flex;align-items:center;justify-content:center;aspect-ratio:1.2/1;border-radius:14px;background:var(--cream);padding:7% 5% 6%}
.sc-pic img{display:block;width:100%;height:100%;object-fit:contain}
.sc-tx{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 12px 20px}
.sc-n{display:flex;align-items:center;gap:10px;font:600 20px/1.2 "Instrument Sans";letter-spacing:-.01em;color:var(--ink)}
.sc-n .no{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--white);
  font:600 12px/1 "Instrument Sans";font-variant-numeric:tabular-nums;letter-spacing:0}
.sc-l{font:400 15px/1.4 "Instrument Sans";color:var(--ink-soft);margin-top:6px;padding-left:36px}
.sc-g{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:7px}
.sc-g a{font:500 15px/1.35 "Instrument Sans";color:var(--ink);text-decoration:underline;text-decoration-color:rgba(44,32,48,.22);text-decoration-thickness:1px;text-underline-offset:3px;text-wrap:balance;border-radius:4px}
.sc-all{margin-top:auto;padding-top:18px;align-self:flex-start;font:600 15px/1.2 "Instrument Sans";color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;border-radius:4px}
.sc-pic:focus-visible,.sc-g a:focus-visible,.sc-all:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sc:target,.sc.hit{box-shadow:0 0 0 2px var(--ink),var(--sh7)}

/* ---- 4. four picked guides (Business Explained's best-seller row, WD-18/WD-23/WD-25: one closed book per card on the
   same flat ground, the title and the price under it, the whole card a link), as an honest editorial pick */
.pks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:52px}
.pks > li{display:flex}
.pk{display:flex;flex-direction:column;width:100%;background:var(--white);border-radius:22px;padding:10px 10px 22px;box-shadow:var(--sh7);color:var(--ink);text-decoration:none}
.pk-v{display:flex;align-items:center;justify-content:center;aspect-ratio:1.12/1;border-radius:14px;background:var(--cream);padding:5% 6% 4%}
.pk-v img{display:block;width:100%;height:100%;object-fit:contain}
.pk-s{font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:20px 12px 0}
.pk-t{font:600 21px/1.2 "Instrument Sans";letter-spacing:-.015em;margin:10px 12px 0;text-decoration:underline;text-decoration-color:rgba(44,32,48,.28);text-decoration-thickness:1px;text-underline-offset:4px}
.pk-l{font:400 15px/1.45 "Instrument Sans";color:var(--ink-soft);margin:8px 12px 0;text-wrap:pretty}
.pk-p{margin:auto 12px 0;padding-top:16px;font:500 15px/1 "Instrument Sans";color:var(--ink-soft)}
.pk-p b{font:600 24px/1 "Instrument Sans";letter-spacing:-.02em;color:var(--ink);margin-right:4px}
.pk-p.free{font:600 17px/1.2 "Instrument Sans";color:var(--ink)}
.pk:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.pk-all{margin-top:40px;text-align:center}

/* ---- 5. the polish: the questions' left column rides beside the answers; the close's two columns centre on each other */
@media (min-width:1024px){
 .faq .hd{position:sticky;top:40px}
 .close .grid2{align-items:center}
 .close .hd{padding-top:0}
}

/* ---- 1024 to 1439: the 1440 page drawn smaller, no text under its phone size (§12.1) */
@media (min-width:1024px) and (max-width:1439px){
 .page .sc-n{font-size:max(17px,calc(18px / var(--k)))}
 .page .sc-l,.page .sc-g a,.page .sc-all,.page .pk-l,.page .pk-p{font-size:max(14px,calc(14px / var(--k)))}
 .page .sc-n .no,.page .pk-s{font-size:max(12px,calc(12px / var(--k)))}
 .page .sc-n .no{width:max(26px,calc(24px / var(--k)));height:max(26px,calc(24px / var(--k)))}
 .page .sc-l{padding-left:calc(36px / var(--k))}
 .page .pk-t{font-size:max(19px,calc(18px / var(--k)))}
 .page .pk-p b{font-size:max(22px,calc(22px / var(--k)))}
 .page .pk-p.free{font-size:max(16px,calc(16px / var(--k)))}
}

/* ---- phones, 1023 and below (§12.11) */
@media (max-width:1023px){
 .sec{padding:52px 0 60px}
 .sec.show{padding:16px 0 56px}
 .g7 .sets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:12px;
   margin:28px calc(-1 * var(--g)) 0;padding:6px var(--g) 26px;scroll-padding-left:var(--g)}
 .g7 .sets::-webkit-scrollbar{display:none}
 .sc{flex:0 0 74%;scroll-snap-align:start;padding:8px 8px 0;border-radius:20px}
 .sc-pic{border-radius:13px}
 .sc-tx{padding:16px 10px 18px}
 .sc-n{font-size:19px}
 .pks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
 .pk{padding:6px 6px 16px;border-radius:18px}
 .pk-v{border-radius:12px}
 .pk-s{font-size:11px;letter-spacing:.12em;margin:14px 8px 0}
 .pk-t{font-size:17px;margin:8px 8px 0}
 .pk-l{font-size:14px;margin:6px 8px 0}
 .pk-p{margin:auto 8px 0;padding-top:12px;font-size:14px}
 .pk-p b{font-size:20px}
 .pk-p.free{font-size:15px}
 .pk-all{margin-top:28px}
}

/* ---- the stage cards' "+ N more" (gx7.js): four names show, the rest open in place */
.sc-g li.x{display:none}
.sc.open .sc-g li.x{display:list-item}
.sc-more{appearance:none;-webkit-appearance:none;background:none;border:0;margin:8px 0 0;padding:0;align-self:flex-start;cursor:pointer;
  font:600 14px/1.3 "Instrument Sans";color:var(--ink-soft);border-radius:4px}
.sc-more:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
html:not(.js) .sc-g li.x{display:list-item}
html:not(.js) .sc-more{display:none}
.g7 .sets{align-items:start}
.sc{min-height:100%}
@media (min-width:1024px) and (max-width:1439px){ .page .sc-more{font-size:max(14px,calc(13px / var(--k)))} }
/* phones: the four picks as rows, the cover beside its words */
@media (max-width:1023px){
 .pks{grid-template-columns:minmax(0,1fr)}
 .pk{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:14px;padding:8px 12px 8px 8px;align-items:start}
 .pk-v{grid-row:1 / span 4;aspect-ratio:auto;align-self:stretch;position:relative;min-height:150px;padding:0}
 .pk-v img{position:absolute;left:6%;top:6%;width:88%;height:88%}
 .pk-s{margin:10px 0 0}
 .pk-t{margin:8px 0 0}
 .pk-l{margin:6px 0 0}
 .pk-p{margin:0;padding:12px 0 8px}
}

/* ---- a note from Jay: his own words (signed 30 Oct), three short paragraphs set as a letter, the last one his point */
.nt7{max-width:700px;margin:0 auto;text-align:left}
.nt7 p{font:400 21px/1.6 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.nt7 p + p{margin-top:18px}
.nt7 p:last-child{font-weight:600;color:var(--ink)}
.note .sig{margin-top:30px}
@media (min-width:1024px) and (max-width:1439px){ .page .nt7 p{font-size:max(19px,calc(19px / var(--k)))} .page .nt7{max-width:calc(700px / var(--k))} }
@media (max-width:1023px){ .nt7 p{font-size:17px} .nt7 p + p{margin-top:14px} .note .sig{margin-top:24px} }
/* the letter reads left to right, so its kicker and signature line up with it */
.note .note-in{max-width:calc(700px + 2 * var(--g));text-align:left}
.note .note-in .kick{margin-bottom:24px}
.note .sig{align-items:flex-start}
.nt7 p:last-child{text-wrap:balance}
@media (min-width:1024px) and (max-width:1439px){ .page .note .note-in{max-width:calc(700px / var(--k) + 2 * var(--g))} }