/* lesson.css: the stage design shared by every story (from full-lesson.html v2). */
:root{--bg:#07080f;--bg2:#0c0f1c;--card:#11152a;--card2:#171c36;--line:#262c4d;--ink:#f3eee6;--muted:#a9a6bb;
  --or:#F06000;--or2:#ff8a3d;--bad:#E0533D;--badt:#ffb3a6;--good:#3FA46A;--goodt:#8fe0ad;
  --find:#E8B04B;--choose:#3CC6B6;--shape:#A98BFF;--tell:#FF7A59;--land:#6FB6FF;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--head:Montserrat,Inter,sans-serif;--disp:"Archivo Black",Montserrat,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
/* ponytail: no CSS scroll-snap or scroll-behavior here, they fight the Lenis glide; smooth-scroll.css adds a soft snap on touch only */
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans)}
/* stars on their own fixed layer: background-attachment:fixed repaints on every scroll frame and stutters */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff9,transparent 60%),radial-gradient(1px 1px at 68% 42%,#fff7,transparent 60%),radial-gradient(1.5px 1.5px at 38% 76%,#fffa,transparent 60%),radial-gradient(1px 1px at 88% 88%,#fff6,transparent 60%),radial-gradient(1px 1px at 52% 8%,#fff8,transparent 60%);
  background-size:520px 520px}
html:has(dialog[open]){overflow:hidden}
button{font:inherit}

/* top bar: steps turn green when fixed, stars for rules kept */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:14px;padding:9px 16px;background:rgba(7,8,15,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar b{font:800 11px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--or2);white-space:nowrap}
.acts{display:flex;gap:4px;margin:0 auto}
.acts span{font:600 12px var(--sans);padding:4px 10px;border-radius:999px;color:var(--muted);border:1px solid var(--line);transition:all .3s;white-space:nowrap}
.acts span.on{color:var(--bg);background:var(--c);border-color:var(--c);font-weight:700}
.acts span.fixed{color:#fff;background:var(--good);border-color:var(--good)}
.acts span.fixed::after{content:" \2713"}
.sky{display:flex;align-items:center;gap:3px}
.sky svg{width:15px;height:15px;fill:var(--line);transition:fill .5s,transform .5s}
.sky svg.lit{fill:var(--c);transform:scale(1.25);filter:drop-shadow(0 0 4px var(--c))}
.sky em{font:600 12px var(--sans);font-style:normal;color:var(--muted);margin-left:6px;white-space:nowrap}
@media(max-width:900px){.bar b{display:none}.acts span{padding:4px 7px;font-size:11px}}
@media(max-width:600px){.acts{display:none}.sky{margin-left:auto}}

/* slides */
.slide{min-height:100svh;display:flex;align-items:center;position:relative}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:96px 28px 64px}
@media(max-width:600px){.wrap{padding:84px 16px 48px}}
.lbl{font:700 12px var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.slide h3{font:400 clamp(30px,4.4vw,56px)/1.06 var(--disp);margin:.25em 0 .4em}
.lead{font-size:clamp(17px,1.9vw,21px);max-width:740px;opacity:.9;margin:0 0 26px}
.small{font-size:13px;color:var(--muted)}

/* where am I: step label + the 6 screens */
.where{margin:0 0 22px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pills span{font:600 11.5px var(--sans);padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:rgba(7,8,15,.5)}
.pills span.on{background:var(--c);border-color:var(--c);color:var(--bg)}
.pills span.on.r{background:var(--bad);border-color:var(--bad);color:#fff}
.pills span.on.g{background:var(--good);border-color:var(--good);color:#fff}
.scene .pills{justify-content:center}

/* scene = the question, with moving background */
.scene{justify-content:center;text-align:center;overflow:hidden}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,8,15,.25),rgba(7,8,15,.82) 78%),linear-gradient(180deg,rgba(7,8,15,.55),transparent 28%,transparent 70%,var(--bg));pointer-events:none}
.scene .wrap{position:relative;z-index:2;max-width:980px}
.scene h2{font:400 clamp(46px,8.5vw,112px)/.98 var(--disp);margin:.15em 0 .25em;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.scene .sub{font-size:clamp(17px,2.1vw,23px);max-width:680px;margin:0 auto;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.cue{margin-top:30px;font-size:13px;color:var(--muted);animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* verdict badges */
.badge{display:inline-flex;align-items:center;gap:8px;font:800 12px var(--head);letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.badge.ok{background:rgba(63,164,106,.2);border:1px solid var(--good);color:var(--goodt)}
.badge.no{background:rgba(224,83,61,.18);border:1px solid var(--bad);color:var(--badt)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}
.in .rv{opacity:1;transform:none}
.in .d1{transition-delay:.2s}.in .d2{transition-delay:.45s}.in .d3{transition-delay:.7s}.in .d4{transition-delay:.95s}.in .d5{transition-delay:1.2s}.in .d6{transition-delay:1.45s}.in .d7{transition-delay:1.7s}

.tl{font:400 clamp(24px,3.4vw,40px)/1.25 var(--disp);margin:0 0 .35em}
.tl.q{font-family:var(--sans);font-weight:500;font-style:italic;color:var(--or2)}

/* corporate slide mock */
.deck{background:#f4f3ef;color:#26262b;border-radius:10px;padding:28px 34px;font-family:Calibri,Arial,sans-serif;max-width:620px;box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative;transform:rotate(-1deg)}
.deck h4{margin:0 0 12px;font:700 24px Arial,sans-serif;color:#1d3b6b;border-bottom:3px solid #1d3b6b;padding-bottom:6px}
.deck ul{margin:0;padding-left:20px;font-size:17px;line-height:1.7}
.deck .foot{font-size:11px;color:#888;margin-top:12px}
.noted{position:absolute;right:-20px;bottom:-26px;background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:15px;transform:rotate(2deg);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.noted b{display:block;font:700 10px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:34px}}

/* the map */
.mapw{overflow-x:auto}
.map{display:grid;grid-template-columns:110px repeat(5,minmax(130px,1fr));gap:8px;font-size:14px;line-height:1.4;min-width:780px}
.map .sh{border-radius:10px;padding:9px 8px;text-align:center;font:800 14px var(--head);color:var(--bg);background:var(--c)}
.map .rh{display:flex;align-items:center;font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.map .c{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--card)}
.map .fx s{display:block;color:var(--badt);text-decoration-color:var(--bad)}
.map .fx span{display:block;color:var(--goodt);margin-top:3px}
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:26px}
.how > div{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card)}
.how b{font:800 13px var(--head);letter-spacing:.06em}
@media(max-width:760px){.how{grid-template-columns:1fr}}

/* the mistake */
.bad{border:1px solid color-mix(in srgb,var(--bad) 55%,var(--line));background:linear-gradient(160deg,rgba(224,83,61,.1),var(--card));border-radius:16px;padding:24px 24px 22px;max-width:740px;position:relative}
.tag{position:absolute;top:-12px;left:18px;font:800 10.5px var(--head);letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.tag.r{background:var(--bad);color:#fff}
.tag.g{background:var(--good);color:#fff}
.bad .say{font-size:clamp(19px,2.2vw,25px);font-weight:500;line-height:1.45}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.7;color:#cfd3e6}
.why{margin-top:18px;max-width:740px;font-size:18px}
.why b{color:var(--badt)}

/* rob explains */
.rob2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center}
.phone{position:relative;width:min(270px,62vw);aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:2px solid var(--line);background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.playov{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65))}
.playov span{width:74px;height:74px;border-radius:50%;background:var(--or);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(240,96,0,.25)}
.playov svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.playov i{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:600 13px var(--sans);font-style:normal}
.playov:focus-visible span{outline:3px solid #fff}
.quote{font:400 clamp(24px,3vw,38px)/1.22 var(--disp);margin:.3em 0 .5em}
.quote::before{content:"\201C";color:var(--c);display:block;font-size:1.6em;line-height:.6}
@media(max-width:820px){.rob2{grid-template-columns:1fr;gap:24px}.phone{width:200px}}

/* drawings */
.g svg{width:100%;height:auto;overflow:visible;display:block}
.g .dr{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1)}
.g .ft{stroke:var(--muted);opacity:.5;stroke-width:1.6}
.g .dot{fill:var(--c);opacity:0;transition:opacity .6s 1.2s;filter:drop-shadow(0 0 6px var(--c))}
.g .fd{fill:var(--muted);opacity:0;transition:opacity .6s .3s}
.g text{fill:var(--ink);font:600 14px var(--sans);opacity:0;transition:opacity .6s 1.3s}
.g text.mu{fill:var(--muted);font-size:12px;font-weight:500}
.g text.cc{fill:var(--c);font:700 13px var(--head);letter-spacing:.06em}
.in .g .dr{stroke-dashoffset:0}
.in .g .dot,.in .g text{opacity:1}
.in .g .fd{opacity:.5}
.drop{transform:translateY(-70px);opacity:0;transition:transform 1s 1.6s cubic-bezier(.3,1.5,.5,1),opacity .4s 1.6s}
.in .drop{transform:none;opacity:1}
.mine{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:6px}
.mine div{display:flex;flex-direction:column;gap:6px}
.mine span{font-size:12.5px;line-height:1.35;padding:7px 9px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:#d9d6e6}
.mine span.me{border-color:var(--or2);background:rgba(240,96,0,.16);color:#fff;font-weight:600;box-shadow:0 0 18px rgba(240,96,0,.35)}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted);margin-top:14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
@media(max-width:760px){.mine{grid-template-columns:1fr 1fr}}
.beats4{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin-top:8px}
.beats4 div{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.beats4 i{font:400 22px var(--disp);font-style:normal;color:var(--c);min-width:26px}
.beats4 b{font:800 16px var(--head)}
.beats4 span{display:block;font-size:13px;color:var(--muted)}
@media(max-width:700px){.beats4{grid-template-columns:1fr}}

/* the fix: what he did vs what works */
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:stretch}
.ba .card{border-radius:16px;padding:26px 22px 20px;border:1px solid var(--line);background:var(--card);position:relative}
.ba .wrong{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:linear-gradient(160deg,rgba(224,83,61,.08),var(--card))}
.ba .wrong .txt{color:var(--badt)}
.ba .right{border-color:var(--good);background:linear-gradient(160deg,rgba(63,164,106,.16),var(--card));box-shadow:0 0 40px rgba(63,164,106,.18)}
.ba .arrow{display:grid;place-items:center;font:400 34px var(--disp);color:var(--good)}
.ba .txt{font-size:18px;line-height:1.55}
.ba ul{margin:0;padding-left:18px}
.ba li{margin:4px 0}
.ba li strong{color:#fff}
.bank{font-size:16px;line-height:1.7}
.bank span{display:inline-block;background:rgba(232,176,75,.14);border:1px solid rgba(232,176,75,.35);border-radius:8px;padding:1px 8px;margin:2px 2px}
.words{border-collapse:collapse;width:100%}
.words td{padding:7px 4px;border-bottom:1px solid var(--line);font-size:16px}
.wrong .words td{text-decoration:line-through;text-decoration-color:rgba(224,83,61,.7)}
.right .words td{color:#fff}
@media(max-width:820px){.ba{grid-template-columns:1fr}.ba .arrow{transform:rotate(90deg)}}

/* the story so far: 5 parts, red until fixed, green after */
.repair{border:1px solid var(--line);border-radius:18px;padding:18px 22px 10px;background:rgba(17,21,42,.85);margin-top:28px;max-width:960px}
.repair .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.repair .hd b{font:700 11px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.repair .hd em{font-style:normal;font:700 13px var(--sans)}
.segs{display:flex;gap:4px;align-items:center}
.segs i{width:30px;height:7px;border-radius:4px;background:rgba(224,83,61,.55)}
.segs i.ok{background:var(--good)}
.row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline}
.row .p{font:800 12px var(--head);letter-spacing:.04em;text-transform:uppercase}
.row .p small{display:block;font:500 11.5px var(--sans);letter-spacing:0;text-transform:none;margin-top:2px}
.row.no .p{color:var(--badt)}
.row.no .p small{color:var(--muted)}
.row.no .t{color:var(--badt);opacity:.85;text-decoration:line-through;text-decoration-color:rgba(224,83,61,.7)}
.row.ok .p{color:var(--goodt)}
.row.ok .p small{color:var(--goodt);opacity:.8}
.row.ok .t{color:#fff}
.row.now{animation:pulse 1.6s ease-in-out 2;border-radius:8px}
@keyframes pulse{50%{background:rgba(63,164,106,.18)}}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:2px}}

/* your turn: a take-home card, not an example */
.take{background:#f5efe0;color:#2b2722;border-radius:6px;padding:30px 30px 24px;max-width:780px;margin:34px auto 0;transform:rotate(-.6deg);box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative}
.take::before{content:"";position:absolute;top:-13px;left:50%;width:130px;height:26px;margin-left:-65px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55);transform:rotate(-2deg)}
.take h4{font:800 12px var(--head);letter-spacing:.2em;text-transform:uppercase;color:#a0461a;margin:0 0 6px}
.take .rule{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed #cfc5ad;flex-wrap:wrap}
.take .rule svg{width:24px;height:24px;fill:#d98a1c;flex:none}
.take .rule .n{font:400 17px var(--disp);color:#a0461a;min-width:24px}
.take .rule b{font:800 19px/1.25 var(--head)}
.take .rob{all:unset;cursor:pointer;font:600 12px var(--sans);color:#a0461a;border:1px solid #d9a17f;border-radius:999px;padding:4px 11px}
.take .rule .rob{margin-left:auto}
.take .rob:hover{background:#efdcc4}
.take .rob:focus-visible{outline:2px solid #a0461a}
.take .sec{margin-top:18px}
.take ul{margin:4px 0 0;padding-left:22px}
.take li{margin:8px 0;font-size:17px}
.take li small{color:#7d7367;font-size:13px}

/* finale */
.story{font-size:clamp(17px,1.8vw,20px);line-height:1.95}
.story span{border-radius:5px;padding:1px 4px;transition:background .4s,color .4s,box-shadow .4s}
.xm{background:rgba(232,176,75,.22);color:#ffd88f}
.xp{background:rgba(60,198,182,.2);color:#8ff0e3}
.xs{background:rgba(224,83,61,.22);color:#ffb3a6}
.xf{background:rgba(169,139,255,.22);color:#d6c8ff}
.xn{background:rgba(111,182,255,.2);color:#b9dcff}
.xc{background:rgba(240,96,0,.3);color:#fff;font-weight:600}
.xd{border-bottom:2px dotted var(--ink);border-radius:0!important;padding:0!important;font-style:italic}
.xo{box-shadow:0 0 0 1.5px var(--or2)}
.story.plain span{background:none!important;color:inherit!important;box-shadow:none!important;border-bottom:none!important;font-weight:inherit}
.keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.keys span{font-size:12px;padding:3px 10px;border-radius:999px}
.box{border:1px solid var(--line);border-radius:18px;padding:22px 26px;background:rgba(17,21,42,.75)}
.tog{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:18px}
.tog button{all:unset;cursor:pointer;padding:6px 16px;border-radius:999px;font:600 13px var(--sans);color:var(--muted)}
.tog button[aria-pressed=true]{background:var(--c);color:var(--bg)}
.tog button.r[aria-pressed=true]{background:var(--bad);color:#fff}
.tog button.g[aria-pressed=true]{background:var(--good);color:#fff}
.tog button:focus-visible{outline:2px solid #fff}
.line{font:400 clamp(22px,2.8vw,34px)/1.25 var(--disp);min-height:2.6em;margin:0 0 16px}
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.checks div{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);transition:all .4s}
.checks div b{display:block;font:700 15px var(--head)}
.checks div span{font-size:12.5px;color:var(--muted)}
.checks div.ok{border-color:var(--good);background:rgba(63,164,106,.14)}
.checks div.ok b::after{content:" \2713";color:var(--goodt)}
.mbar{height:8px;border-radius:4px;background:var(--line);margin:16px 0 6px;overflow:hidden}
.mbar i{display:block;height:100%;width:0;background:var(--good);transition:width .8s cubic-bezier(.3,.8,.3,1)}
@media(max-width:700px){.checks{grid-template-columns:1fr 1fr}}
.cheat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;margin-top:20px;text-align:left}
.cheat div{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.cheat i{font:400 22px var(--disp);font-style:normal;color:var(--c);min-width:34px}
.cheat b{font:800 16px var(--head)}
.cheat span{display:block;font-size:13px;color:var(--muted)}
@media(max-width:700px){.cheat{grid-template-columns:1fr}}
.doors{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.doors a{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:12px 20px;background:var(--card);font-weight:600}
.doors a.main{background:var(--or);border-color:var(--or);color:#fff}
footer{padding:50px 20px 80px;text-align:center;font-size:12px;color:var(--muted)}

/* clip modal */
.modal{border:0;padding:20px;background:transparent;color:var(--ink);overflow:visible;max-width:none;max-height:none}
.modal::backdrop{background:rgba(3,4,8,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box2{position:relative;width:min(360px,92vw)}
.modal video{width:100%;max-height:76vh;border-radius:16px;background:#000;display:block}
.modal .cap{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.modal .x{all:unset;cursor:pointer;position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:20px;line-height:1}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.drop{opacity:1;transform:none;transition:none}
  .g .dr{transition:none;stroke-dashoffset:0}.g .dot,.g text,.g .fd{transition:none}
  .cue,.row.now{animation:none}
}

/* situation card: whose story, which room, what goal (first screen, above the finished story) */
.ctx{max-width:760px;margin:0 auto 30px;padding:20px 24px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(7,8,15,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scene h2.ctxt{font:400 clamp(30px,4.6vw,52px)/1.05 var(--disp);margin:.2em 0 .45em}
.ctxrows{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.ctxrows p{margin:0;font-size:16px;line-height:1.45}
.ctxrows b{display:block;font:800 11px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--or2);margin-bottom:3px}
@media(max-width:640px){.ctxrows{grid-template-columns:1fr}}

/* before and after: the start version next to the finished story */
.bna{align-items:start;margin-top:22px}
.bna .badge{margin-bottom:14px}
.bna .deck{margin-bottom:34px;padding:22px 26px}
.bna .deck ul{font-size:15px}
.bna .story{font-size:clamp(15px,1.4vw,17px);line-height:1.75;margin:0}
.cmp{border:1px solid var(--line);border-radius:18px;padding:14px 22px 6px;background:rgba(17,21,42,.85);margin-top:30px}
.cmp .hd,.cmp .r{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:18px;padding:10px 0}
.cmp .hd{padding-top:0}
.cmp .hd b,.cmp .hd span{font:700 11px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cmp .r{border-top:1px solid var(--line);align-items:baseline}
.cmp .r b{font:800 12px var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.cmp .r s{color:var(--badt);opacity:.85;text-decoration-color:rgba(224,83,61,.7)}
.cmp .r span{color:var(--goodt)}
@media(max-width:820px){.cmp .hd span{display:none}.cmp .hd,.cmp .r{grid-template-columns:1fr;gap:4px}}
.cmp .r s::before{content:"✗\00a0";display:inline-block;text-decoration:none}.cmp .r span::before{content:"✓ "}
.bna .story span,.bna .badge span{padding:0;margin:0;border:0;background:none}

/* take it home: the 10 rules, each with this story's own line. Solid cards, big type: no background behind the text */
.thm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.thm-card{background:#121731;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:14px;padding:18px 22px 20px}
.thm-card:last-child{grid-column:1/-1}
.thm-hd{display:flex;justify-content:space-between;gap:10px;font:700 11px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.thm-hd em{font-style:normal;color:var(--muted)}
.thm-t{display:block;font:800 clamp(18px,1.7vw,21px)/1.3 var(--head);color:#fff;margin:10px 0 10px}
.thm-no{display:block;color:var(--badt);font-size:15px;line-height:1.5;margin-bottom:8px;text-decoration-color:rgba(224,83,61,.7)}
.thm-no::before{content:"✗\00a0";display:inline-block;text-decoration:none}
.thm-ok{margin:0;color:#fff;font-size:clamp(17px,1.5vw,19px);line-height:1.55}
.thm-ok strong{color:var(--goodt);font-weight:700}
.thm-door{margin-top:26px;background:#1a1f3d;border:1px solid var(--or);border-radius:16px;padding:24px 26px;text-align:center}
.thm-door b{font:800 13px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--or2)}
.thm-door p{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:#fff;margin:10px auto 0;max-width:640px}
@media(max-width:820px){.thm-grid{grid-template-columns:1fr}}