/* app_pages: the rules the three sales pages (join-ai-lab, join-challenge, join-academy) use and
   pages.css does not carry, ported 2026-09-09 from the prototype's styles.css, hex to tokens. What the
   shell owns (.card, .pill, .badge, .btn, .cap, .sh-dim, .sec, .wrap, the type scale, .faqs since 0635) and what
   pages.css owns (.ytv-poster, .lgl-note) is not repeated. Classes as the prototype has them.
   shell.css is linked AFTER this file, so a rule the prototype won by source order against a shell rule
   of the same specificity (.az-access against .wrap) is written compound here (.wrap.az-access): same
   result, one notch more specific. */

/* ---------- the challenge column: the view is the 1240 column, the wraps sit tighter ---------- */
main > section.vcol{max-width:1240px}
.vcol .wrap{padding-left:clamp(16px,3cqw,40px);padding-right:clamp(16px,3cqw,40px)}

/* ---------- proof bar: dimension strings (64 drafting language); the .sh-dim rows are the shell's ---------- */
.proofd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3.5cqw,48px)}
.pstat{min-width:0;text-align:center}
.pstat > b{display:block;font:600 2.6rem/1 var(--fd);letter-spacing:-.02em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.proofd-chz{margin:44px auto 0;grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.proofd-chz .pstat > b em{font:500 12px/1 var(--fm);color:var(--acc);font-style:normal;margin-left:4px}
/* 64-style dimension rows on Join AI Lab (hero + pricing) */
.az-dims{margin:34px auto}
.az-dims-mid{margin:10px auto 44px}
/* the pricing row carries four stats (0510): the three-column chz row widened, two by two under 820px, one
   column on a phone, where two labels and their dimension lines do not fit side by side */
.proofd-chz.az-dims4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:960px}

/* ---------- grids, chips ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.chip{display:inline-flex;align-items:center;gap:1px;background:var(--canvas);border:1px solid var(--hl2);border-radius:8px;
  color:var(--dim);font:500 12px/1 var(--fm);padding:7px 10px;margin-top:14px}
.linklike{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.linklike:hover{color:var(--acc)}

/* ---------- drifting shapes (the AI Lab hero, the challenge band) ---------- */
.driftbox{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.driftbox i{position:absolute;border:1px solid rgb(from var(--acc) r g b / .14);border-radius:8px;opacity:.7}
.driftbox i:nth-child(1){width:120px;height:120px;left:6%;top:18%;animation:drift1 26s ease-in-out infinite}
.driftbox i:nth-child(2){width:64px;height:64px;right:9%;top:30%;transform:rotate(24deg);animation:drift2 32s ease-in-out infinite}
.driftbox i:nth-child(3){width:36px;height:36px;left:22%;bottom:14%;background:rgba(255,255,255,.03);border-color:transparent;animation:drift1 22s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-20px)}}
@keyframes drift2{0%,100%{transform:translate(0,0) rotate(24deg)}50%{transform:translate(-22px,18px) rotate(38deg)}}
.band .wrap{position:relative}

/* ---------- band ---------- */
.band-in{text-align:center}
.band h2{margin-bottom:24px}
.band .lead{max-width:32rem;margin:0 auto 8px}
.band .cap-note{margin-top:16px}

/* ---------- AI Lab: the headline, the VSL frame, the hand annotation ---------- */
/* the shared headline. It is a long two-line title, so it runs a size below --h1 */
.az-h1{font-size:clamp(1.55rem,2.95cqw,2.35rem);line-height:1.18;text-wrap:pretty}
/* the audience tag rides under the headline as a mono chip, not as heading weight */
.az-h1q{display:block;margin-top:18px;font:500 11px/1 var(--fm);letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.vsl-wrap{position:relative;max-width:720px;margin:40px auto 0}
.vsl{border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;background:var(--s1);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.v-chrome{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--hl1)}
.v-file{flex:1;font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.06em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-len{font:500 11px/1 var(--fm);color:var(--faint)}
.vsl-stage{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;cursor:pointer;padding:0;
  background:radial-gradient(90% 90% at 50% 40%,rgb(21,21,21) 0%,var(--canvas) 75%)}
.vsl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;color:var(--acc-ink);background:var(--acc);border:1px solid var(--acc);transition:transform .16s,background .16s}
.vsl-play svg{width:28px;height:28px;margin-left:2px}
.vsl-stage:hover .vsl-play{transform:translate(-50%,-50%) scale(1.05);background:var(--acc2)}
.vsl-eq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;gap:5px;align-items:flex-end;height:38px}
.vsl-eq i{width:6px;height:100%;background:var(--acc);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.vsl-eq i:nth-child(2){animation-delay:.15s}.vsl-eq i:nth-child(3){animation-delay:.3s}
.vsl-eq i:nth-child(4){animation-delay:.45s}.vsl-eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.vsl-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.vsl-bar i{display:block;height:100%;width:0;background:var(--acc)}
.vsl.playing .vsl-play{display:none}
.vsl.playing .vsl-eq{display:flex}
.vsl.playing .vsl-bar i{width:100%;transition:width 120s linear}
/* Caveat annotation + hand arrow */
.annot{position:absolute;z-index:3;pointer-events:none;width:max-content;max-width:220px;top:-38px;left:-24px;text-align:left}
/* the note lets the pointer through to the video; its words in edit mode take the click (0605) */
.cm-edit .annot .tt-slot{pointer-events:auto}
.annot-txt{display:block;font:700 22px/1.1 var(--fh);color:var(--acc2);transform:rotate(-4deg)}
.annot-arrow{width:86px;height:52px;display:block;margin-left:calc(100% - 12px)}
.annot-arrow path{fill:none;stroke:rgb(from var(--acc) r g b / .8);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.annot.in .annot-arrow path{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease .4s}
.annot.in .annot-arrow path:nth-child(2){transition-delay:1.1s;transition-duration:.3s}

/* ---------- AI Lab: the problem section, the fail rows, the rooms, the building section ---------- */
/* the problem section's paragraphs ran together (Erik 2026-09-24, 0510): one gap between every two, a
   wider one where the story turns (after the first win, after the fail rows). Erik picked this spacing
   in the ai_problem lab, a bit tighter, and "real consequences" in bright bold (0515). */
.az-pb .lead+.lead{margin-top:.8em}
/* a stored run's bold is a bare <b> (0605) */
.az-pb .az-pb-hi,.az-pb-stakes b{color:var(--ink);font-weight:800}
.az-pb .az-pb-win{margin-bottom:44px}
.az-pb .fail-rows{margin-bottom:40px}
.fail-rows{display:flex;flex-direction:column;border:1px solid var(--hl1);border-radius:var(--rc);overflow:hidden;margin-bottom:30px}
.fail{display:flex;gap:20px;align-items:baseline;padding:20px 24px;border-bottom:1px solid var(--hl1)}
.fail:last-child{border-bottom:none}
.fno{font:600 11px/1 var(--fm);color:var(--acc);letter-spacing:.1em;flex:none}
.fail p{color:var(--dim);line-height:1.55;min-width:0}
/* the nine rooms under the building: one panel, Erik's pick 21 of the ai_phases lab (0509, 0556). A small 3x3 map
   in the building's order (L3 on top, the markup runs L1 first) top left. Idle the words name the program; a room of
   the building hovered or focused (the keyboard too: rooms carry tabindex) lights its cell and shows its name over
   its code, WHAT and WHY under the map, and its lessons a column per module right. The map and the words share one
   cell, everything top aligned; each room's grid keeps the map's corner free (::before, the map's 72 by 60: three
   22px cells and two 3px gaps wide, three 18px rows high), so the rooms still stack and swap in place and the panel
   never jumps. A floor hover lights its map row (sales.js puts .hi on #ph-N). No hover at all (a phone, a tablet):
   the map goes and every room is listed. */
.ph-pnl{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:4px;
  padding:22px 24px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1)}
.ph-pnl>:is(.ph-map,.ph-txt){grid-area:1/1}
.ph-map{display:flex;flex-direction:column-reverse;gap:3px;justify-self:start;position:relative;z-index:1}
.ph-mrow{display:grid;grid-template-columns:repeat(3,22px);gap:3px}
.ph-map i{display:block;height:18px;border:1px solid var(--hl3);background:var(--s2);transition:border-color .18s,background-color .18s}
.ph-mrow.hi i{border-color:var(--faint)}
.ph-txt{display:grid;min-width:0}
.ph-txt>*{grid-area:1/1;min-width:0;align-self:start}
.ph-idle{padding-left:96px}
.ph-det{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,2.3fr);grid-template-rows:auto auto auto 1fr;
  column-gap:24px;visibility:hidden}
.ph-det::before{content:"";grid-area:1/1/3/2;height:60px}
.ph-code{font:500 11px/1.3 var(--fm);letter-spacing:.14em;color:var(--faint)}
.ph-det b{display:block;grid-area:1/2;font:800 1.35rem/1.2 var(--fd);color:var(--ink)}
.ph-det .ph-code{grid-area:2/2;margin-top:6px}
.ph-idle p{margin-top:8px;font-size:.95rem;line-height:1.5;color:var(--dim)}
/* WHAT and WHY under the map, the width of the map and the name */
.ph-ww{grid-area:3/1/4/3;margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--dim)}
.ph-k{display:inline-block;width:46px;font:500 10.5px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
/* the modules side by side, each its title over its lessons: the list flows by column, two rows, a module a column;
   a middle dot leads each lesson and a wrapped lesson hangs after it */
.ph-toc{display:grid;grid-area:1/3/-1/4;grid-auto-flow:column;grid-template-rows:auto 1fr;grid-auto-columns:minmax(0,1fr);
  column-gap:14px;padding-left:18px;border-left:1px solid var(--hl2)}
.ph-mod{margin-bottom:3px;font:500 10.5px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ph-toc ol{list-style:none;margin:0;padding:0}
.ph-toc li{position:relative;padding-left:10px;font:400 12.5px/1.5 var(--fd);color:var(--dim)}
.ph-toc li::before{content:"\b7";position:absolute;left:0;color:var(--faint)}
.ph-none{font:400 12.5px/1.5 var(--fd);color:var(--dim)}
.ph-toc a{color:inherit;text-decoration:none}
.ph-toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ph-toc li.ph-wip,.ph-mod.ph-wip{opacity:.45}
.sec:has(.bsec .rm:is(:hover,.on)) .ph-idle{visibility:hidden}
/* the hovered room wins: a selected room (.on, sales.js) shows only while no room is hovered, so moving on from a click
   never lays two rooms over each other (Erik on 21, 0556); a click elsewhere keeps it, so its words can be selected */
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(1):hover) .ph-det[data-r="1-1"],
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(2):hover) .ph-det[data-r="1-2"],
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(3):hover) .ph-det[data-r="1-3"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(1):hover) .ph-det[data-r="2-1"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(2):hover) .ph-det[data-r="2-2"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(3):hover) .ph-det[data-r="2-3"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(1):hover) .ph-det[data-r="3-1"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(2):hover) .ph-det[data-r="3-2"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(3):hover) .ph-det[data-r="3-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(1).on) .ph-det[data-r="1-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(2).on) .ph-det[data-r="1-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(3).on) .ph-det[data-r="1-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(1).on) .ph-det[data-r="2-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(2).on) .ph-det[data-r="2-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(3).on) .ph-det[data-r="2-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(1).on) .ph-det[data-r="3-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(2).on) .ph-det[data-r="3-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(3).on) .ph-det[data-r="3-3"]{visibility:visible}
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(1):hover) .ph-map [data-r="1-1"],
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(2):hover) .ph-map [data-r="1-2"],
.sec:has(.lvl[data-ph="1"]>g.rm:nth-of-type(3):hover) .ph-map [data-r="1-3"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(1):hover) .ph-map [data-r="2-1"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(2):hover) .ph-map [data-r="2-2"],
.sec:has(.lvl[data-ph="2"]>g.rm:nth-of-type(3):hover) .ph-map [data-r="2-3"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(1):hover) .ph-map [data-r="3-1"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(2):hover) .ph-map [data-r="3-2"],
.sec:has(.lvl[data-ph="3"]>g.rm:nth-of-type(3):hover) .ph-map [data-r="3-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(1).on) .ph-map [data-r="1-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(2).on) .ph-map [data-r="1-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="1"]>g.rm:nth-of-type(3).on) .ph-map [data-r="1-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(1).on) .ph-map [data-r="2-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(2).on) .ph-map [data-r="2-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="2"]>g.rm:nth-of-type(3).on) .ph-map [data-r="2-3"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(1).on) .ph-map [data-r="3-1"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(2).on) .ph-map [data-r="3-2"],
.sec:not(:has(.bsec .rm:hover)):has(.lvl[data-ph="3"]>g.rm:nth-of-type(3).on) .ph-map [data-r="3-3"]{border-color:var(--acc);background:var(--s3)}
@media (hover:none){
  .ph-pnl{grid-template-columns:minmax(0,1fr)}
  .ph-map,.ph-idle{display:none}
  .ph-txt{gap:20px}
  .ph-txt>*{grid-area:auto}
  .ph-det{visibility:visible}
  .ph-det::before{display:none}
  .ph-det>:is(.ph-code,b){grid-column:1/3}
  .ph-det b{font-size:1.1rem}
  .ph-ww{margin-top:8px}
}
/* building section svg (ported from p64-academy, Erik pick) */
.bsec{--lw:rgba(255,255,255,.30);border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);
  padding:clamp(10px,2cqw,26px);margin:26px 0 30px}
.bsec svg{display:block;width:100%;max-width:1100px;margin:0 auto;height:auto}
.bs-ground{stroke:var(--lw);stroke-width:1.6}
.bs-wall{fill:var(--s3);stroke:var(--lw);stroke-width:1}
.lvl{cursor:pointer;outline:none}
/* per-ROOM hover (Erik 2026-08-27): each of the 9 rooms highlights on its own;
   the floor group still drives the room-row association via sales.js */
.rm{outline:none}
.rm-hit{fill:transparent;transition:fill .18s}
.rm:hover .rm-hit,.rm:focus-visible .rm-hit{fill:var(--s3)}
.rm:hover .bs-r,.rm:focus-visible .bs-r{fill:var(--ink)}
/* the selected room: filled and framed in the accent until the same room or another is clicked */
.rm.on .rm-hit{fill:var(--s3);stroke:var(--acc);stroke-width:1.4}
.rm.on .bs-r{fill:var(--ink)}
.lvl:hover .bs-ph,.lvl:focus-within .bs-ph,.lvl.hi .bs-ph{fill:var(--acc)}
.bs-ph{fill:var(--dim);font:600 15px var(--fm);letter-spacing:.08em;transition:fill .18s;pointer-events:none}
.bs-elev circle{fill:var(--s1);stroke:var(--lw);stroke-width:1}
.bs-elev path{fill:var(--dim)}
.bs-elev line{stroke:var(--hl3);stroke-width:1}
.bs-elev text{fill:var(--faint);font:500 9.5px var(--fm);letter-spacing:.1em;text-anchor:end}
.bs-dim line{stroke:var(--hl3);stroke-width:1}
.bs-dim text{fill:var(--dim);font:500 10px var(--fm);letter-spacing:.08em}
/* underground P1 + room splits, wall/floor thickness + earth crosshatch */
.bs-soil{fill:rgba(255,255,255,.022)}
.bs-div{stroke:var(--hl2);stroke-width:1}
.bs-r{fill:var(--faint);font:500 8.5px var(--fm);letter-spacing:.1em;text-anchor:middle;transition:fill .18s}
.bs-poche{fill:var(--s3);stroke:var(--lw);stroke-width:1}
/* the crane over the building, Erik's pick 20 of the ai_program lab (0509, 0556): its lines --faint, the
   cabin gray, AI-LAB hanging on a block outlined dark gray with rounded corners, the robot before the word.
   Each 30 DAYS segment of the right chain carries its floor's tagline, lit orange while that floor is
   hovered (sales.js puts .hi on the .lvl, :has reads it); its 30 DAYS stands small left of the line. */
.bs-deco{pointer-events:none}
.bs-ttl{font:900 30px var(--fd);letter-spacing:.02em}
.bs-ai{fill:var(--acc)}
.bs-seg{fill:var(--faint);font:600 7.5px var(--fm);letter-spacing:.12em;text-anchor:middle}
#bs-diag line{stroke:var(--faint);stroke-width:1}
.bs-diag rect{fill:url(#bs-diag);stroke:none}
/* the earth under and beside the building, one layer: the tile at 2x, a heavier stroke, dimmed (Erik's pick 13 of ai_earth, 0599) */
#bs-tile path{fill:none;stroke:var(--hl3);stroke-width:1.6;vector-effect:non-scaling-stroke}
.bs-tiles rect,.bs-ex{fill:url(#bs-tile);stroke:none;opacity:.45}
/* the words over the earth keep a halo in the card's own ground */
.bs-elev text,.bs-seg,.bs-t text{paint-order:stroke;stroke:var(--s1);stroke-width:5px;stroke-linejoin:round}
.bs-crane line,.bs-crane polyline{fill:none;stroke:var(--faint);stroke-width:1}
.bs-cw{fill:var(--s3);stroke:var(--lw)}
.bs-cab{fill:var(--faint);stroke:none}
.bs-cable{fill:none;stroke:var(--faint);stroke-width:1}
.bs-block{fill:var(--s2);stroke:var(--hl3);stroke-width:1.4;rx:4px}
.bs-blk{font-size:20px}
.bs-rob{color:var(--dim2)}
.bs-ta{fill:var(--faint);font:500 10px var(--fm)}
.bs-tb{fill:var(--ink);font:600 10px var(--fm);transition:fill .18s}
.bsec:has(.lvl[data-ph="1"].hi) .bs-t[data-ph="1"] .bs-tb,
.bsec:has(.lvl[data-ph="2"].hi) .bs-t[data-ph="2"] .bs-tb,
.bsec:has(.lvl[data-ph="3"].hi) .bs-t[data-ph="3"] .bs-tb{fill:var(--acc)}
/* the phone: the svg's taglines would be 6px there, so the same words draw as HTML under the card */
.bs-tags{display:none;list-style:none;margin:-14px 0 30px;padding:0;gap:10px;flex-direction:column}
.bs-tags li{display:flex;gap:12px;align-items:baseline;min-width:0;font:600 .95rem/1.4 var(--fd);color:var(--ink)}
.bs-tags b{flex:none;font:600 11px/1 var(--fm);letter-spacing:.14em;color:var(--acc)}
@container page (max-width:640px){
  .bs-st{display:none}
  .bs-tags{display:flex}
}
/* the block sways on its cable: app_courses' `.tic-sway` (ticons.css), the robot's one motion sheet (0618) */

/* ---------- the access card (join-academy), the fit lists ---------- */
.wrap.az-access{max-width:820px}
.card.access{padding:34px}
.access h2{margin:16px 0 12px}
.card.access p{font-size:1rem;max-width:38rem}
.access-mods{display:flex;gap:10px;flex-wrap:wrap}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.fit-yes{color:var(--green)} .fit-no{color:var(--red)}
.ticks,.crosses{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li,.crosses li{font-size:.9rem;line-height:1.5;color:var(--dim);padding-left:22px;position:relative;min-width:0}
.ticks li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:600}
.crosses li::before{content:"\2715";position:absolute;left:0;color:var(--red);font-weight:600}

/* ---------- pricing: the cards, the comparison table, the guarantee ---------- */
/* AI Lab: two ways to pay one price (0510, 0509 round 3): two columns centred at a card's reading width, not
   stretched over the whole wrap; the guarantee under them keeps the same width */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:760px;margin:0 auto}
.prices+.card.guarantee{max-width:760px;margin-left:auto;margin-right:auto}
/* the early note under the curriculum's room panel, as wide as the prices: Erik's pick 28 of the ai_early lab (0610), a stamp over
   the title the way a drawing is stamped, the two halves as columns, the lifetime line at the foot; 48px clear of the curriculum's
   card ("two cards are competing"). Its barrier is the rooms' WIP mark (.b-bar below). */
.ae-st{max-width:760px;margin:48px auto 0;padding:24px 24px 20px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);text-align:center}
.ae-stamp{display:inline-block;margin-bottom:14px;padding:6px 10px;border:1.5px solid var(--acc);border-radius:4px;font:700 11px/1 var(--fm);
  letter-spacing:.16em;color:var(--acc);transform:rotate(-5deg)}
.ae-h{display:block;font:700 1.2rem/1.3 var(--fd);color:var(--ink);text-wrap:balance}
.ae-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:20px;text-align:left}
.ae-k{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 10px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
.ae-k-now{color:var(--acc)}
.ae-bar{flex:none;width:14px;height:12px}
.ae-sec ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.ae-sec li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.45;color:var(--dim);text-wrap:pretty}
.ae-sec-n li{color:var(--dim2)}
.ae-sec-n li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:600}
.ae-sec-w li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:1px;background:var(--faint)}
/* the AI Lab's buy key as a pill in the titlebar's middle (0666; Erik 2026-10-04, centred 2026-10-06):
   Resume's look, the titlebar buttons' frame */
.bar .bar-buy{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 7px 5px 9px;background:none;
  border:1px solid var(--hl1);border-radius:7px;cursor:pointer;
  font:600 10px/1 var(--fm);letter-spacing:.06em;color:var(--dim);white-space:nowrap;transition:color .16s,border-color .16s}
.bar .bar-buy:hover,.bar .bar-buy:focus-visible{color:var(--ink);border-color:var(--hl3)}
.bar .bar-buy kbd{color:var(--ink)}
@media (max-width:820px){ .bar .bar-buy{display:none} }
.ae-life{margin:18px 0 0;font-size:.88rem;line-height:1.5;color:var(--dim);text-wrap:pretty}
@container page (max-width:640px){ .ae-cols{grid-template-columns:minmax(0,1fr)} }
.price b{display:block;font:600 2rem/1 var(--fd);letter-spacing:-.02em;margin:6px 0 10px}
.price b em{font:500 11px/1 var(--fm);color:var(--faint);font-style:normal;margin-left:8px;letter-spacing:.14em}
/* inline-block and centred text: the prototype's data-nav buttons are real <a> links here, a button is unchanged */
.price .btn{display:inline-block;margin-top:18px;width:100%;text-align:center}
/* no accent line along the best card's top edge: the shell's .card::before is its old hover line, which the
   shell itself no longer shows (the .ctrace outline took over), so held open here it read as a stray bright rule
   beside the badge (0509 round 3) */
.price.best{border-color:var(--hl3)}
.price .badge{margin-bottom:14px}
.price-alt{font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.08em;margin-bottom:6px}
.price-alt s{opacity:.7}
.price ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:9px}
.price li{font-size:.82rem;line-height:1.4;color:var(--dim);padding-left:14px;position:relative;min-width:0}
.price li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;background:var(--hl3)}
/* the AI Lab cards (0510): the badge floats on the best card's top edge, so the figures line
   up; the spots line sits over the button, a still dot and mono words */
.price.best .badge{position:absolute;top:-11px;left:24px;margin:0;background:var(--s2);color:var(--ink);border-color:var(--hl3)}
.price-spots{display:flex;align-items:center;gap:8px;margin-top:18px;font:500 11px/1 var(--fm);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.price-spots .cdot{background:var(--acc)}
.price-spots+.btn{margin-top:14px}
.guarantee{margin-top:var(--gap);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.card.guarantee p{flex:1;min-width:16rem;font-size:.95rem}

/* ---------- Academy (join-academy): the narrow hero ---------- */
.wrap.az-hero{position:relative;max-width:780px}

/* ---------- challenge port (EF-Challenge export, 69 skin) ---------- */
.wrap.chz-hero{max-width:var(--hero-w);margin:0 auto;text-align:center;position:relative}
.chz-kick{font:500 14px/1.4 var(--fd);color:var(--dim);margin:-6px 0 22px}
.chz-skip{font:600 1.35rem/1 var(--fd);color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(239,68,68,.75);text-decoration-thickness:2px;margin-bottom:10px}
.chz-hero h1{font-size:3rem}
/* the pill is the orange mark's in the two challenge headings, so a heading saved from edit mode (a plain .hl) keeps it */
.chz-own,.chz-hero h1 .hl,.chz-brand-c ~ h2 .hl{color:var(--acc);background:var(--s3);padding:0 10px;border-radius:9px}
.chz-hero .sub{margin-left:auto;margin-right:auto;max-width:44rem}
.chz-social{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.chz-avs{display:inline-flex;flex:none}
.chz-avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--canvas);margin-left:-8px;object-fit:cover;background:var(--s3)}
.chz-avs img:first-child{margin-left:0}
.chz-social-tx{font:400 12.5px/1.4 var(--fd);color:var(--dim);min-width:0}
.chz-social-tx b{color:var(--ink);font-weight:600}
.card.chz-tldr{padding:30px}
.chz-tldr h2{margin-bottom:22px}
.chz-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.chz-brand-c{justify-content:center;margin-bottom:18px}
.chz-logo{flex:none}
.chz-logo img{width:30px;height:30px;object-fit:contain;display:block}
.chz-brand b{font:600 1.1rem/1 var(--fd)}
.chz-cohort{font:400 11px/1 var(--fm);color:var(--faint)}
.chz-rows{display:flex;flex-direction:column;margin-bottom:8px}
.chz-row{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--hl1);font-size:.92rem;line-height:1.55;color:var(--dim);min-width:0}
.chz-row:last-child{border-bottom:none}
.chz-row::before{content:"\2192";position:absolute;left:0;top:13px;color:var(--acc);font:400 13px/1.5 var(--fm)}
.chz-row b{color:var(--ink)}
.chz-bonush{margin:22px 0 16px;font-size:1.05rem}
.chz-bonus li b{color:var(--ink)}
/* its own width, the narrow column's: the same card closes the page inside the full-width band too (0619) */
.card.chz-wait{max-width:700px;margin-inline:auto;padding:36px;text-align:center}
.chz-wait h2{margin:18px 0 10px}
.chz-wait .lead{max-width:34rem;margin:0 auto 24px}
/* 3 explicit columns mirroring the live pyrevit-challenge page order */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.tcol{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.tcard{background:var(--s1);border:1px solid var(--hl1);border-radius:var(--rc);padding:22px;min-width:0}
.tcard h3{font-size:1.02rem;line-height:1.35;margin-bottom:12px}
.tcard blockquote{margin:0;font-size:.88rem;line-height:1.62;color:var(--dim)}
.tcard blockquote b{color:var(--acc);font-weight:600}
.tcard figcaption,.tvid figcaption{display:flex;align-items:center;gap:11px;margin-top:16px}
.tcard figcaption img,.tvid figcaption img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:var(--s3)}
.tcard figcaption b,.tvid figcaption b{display:block;font:600 12.5px/1.2 var(--fd)}
.tcard figcaption em,.tvid figcaption em{display:block;font:400 10.5px/1.2 var(--fm);font-style:normal;color:var(--faint);margin-top:3px}
/* a face nobody picked yet: the initials on the disc the picture would fill (0671) */
.t-ini{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;background:var(--s3);font:600 11px/1 var(--fm);color:var(--dim)}
.cm-edit .tt-img>.t-ini{outline:1px dashed var(--hl2);outline-offset:-1px;cursor:context-menu}
.cm-edit .tt-img>.t-ini:hover{outline-color:var(--acc)}
.tvid{margin:0;background:var(--s1);border-radius:var(--rc);overflow:hidden;border:1px solid rgb(from var(--acc) r g b / .4);box-shadow:0 0 26px -8px rgb(from var(--acc) r g b / .22)}
.tvid figcaption{margin:0;padding:14px 22px}
/* a video testimonial is Bunny's player paused on its thumbnail. Per-video aspect-ratio inline, 9/13 fallback. */
.tvid iframe{display:block;width:100%;aspect-ratio:9/13;border:none;background:radial-gradient(80% 70% at 50% 40%,rgb(22,22,22),var(--canvas))}

/* ---------- AI Lab support, four sections (0599): community + calls, EF-Apps, deep dives, the Academy bonus ---------- */
/* the divider (lab ai_flow 18, 0604): a dotted rule, the section's name on it behind an orange dot, more air above than below */
#az-community,#az-apps,#az-deep,#az-acad{margin-top:calc(var(--secpad) * .35);padding:calc(var(--secpad) * .75) 0 calc(var(--secpad) * 1.55);
  border-top-color:transparent}
:is(#az-community,#az-apps,#az-deep,#az-acad){--az-rule:max(clamp(20px,4cqw,56px),calc((100% - 1240px) / 2 + clamp(20px,4cqw,56px)))}
:is(#az-community,#az-apps,#az-deep,#az-acad)::before{content:"";position:absolute;top:-1px;left:var(--az-rule);right:var(--az-rule);height:2px;
  background:radial-gradient(circle,var(--hl3) 1px,transparent 1.3px) 0 0/8px 2px;mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.eyebrow.az-eb::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 1px 0;border-radius:50%;background:var(--acc);vertical-align:middle}
/* the name centred on the rule: -.6 of its size is half its line; a slot on the page (`brk.*`), so edit mode reaches it (Erik 2026-10-03) */
.az-name{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  padding:0 14px 0 28px;background:radial-gradient(circle,var(--acc) 2.5px,transparent 3px) 14px 50%/6px 6px no-repeat,var(--canvas);
  font:500 10px/1.2 var(--fm);letter-spacing:.2em;color:var(--faint);white-space:nowrap}
.az-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4cqw,56px);align-items:start}
.az-split-tx .lead{margin:0 0 22px}
/* the line under the community title, muted like a section subtitle (Erik 2026-09-29) */
.az-comm-sub{margin:-6px 0 24px;font-size:1rem;line-height:1.6;color:var(--faint);text-wrap:pretty}
/* the drawn community, Erik's pick 07 of the ai_community lab (0610): the live calls with Erik across the full width, five faces
   a row of small tiles under him and a +17 members tile last; then the LRA-Community title over the posts as stacked cards, the
   older ones stepping in, with likes, comments and the people in them, a video and a GIF attached; placeholders until Erik
   fills the photos */
.az-comm{display:flex;flex-direction:column;gap:10px;min-width:0}
.az-call{border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.az-feed{display:flex;flex-direction:column;gap:10px}
/* the feed's title reads as the call bar's LIVE CALLS */
.az-feed-h{margin:8px 0 0 2px;font:600 11px/1 var(--fm);letter-spacing:.14em;color:var(--ink)}
.cg-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hl1)}
.cg-bar b{font:600 11px/1 var(--fm);letter-spacing:.14em;color:var(--ink)}
.cg-bar span{font:500 11px/1 var(--fm);color:var(--dim)}
.cg-bar em{margin-left:auto;font:500 10.5px/1 var(--fm);font-style:normal;color:var(--faint)}
.cg-grid{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:12px}
.cg-t{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hl2);border-radius:8px;
  background:radial-gradient(70% 70% at 50% 40%,var(--s3),var(--s2));font:600 12px/1 var(--fm);color:var(--ink)}
.cg-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.cg-t em{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:4px;background:rgb(0 0 0 / .55);font:500 9.5px/1 var(--fm);font-style:normal;color:var(--ink)}
.cg-on{grid-column:1 / -1;aspect-ratio:16/9;border-color:var(--acc);border-radius:10px;box-shadow:0 0 0 3px rgb(from var(--acc) r g b / .15)}
.cg-on em{left:10px;bottom:10px;padding:5px 9px;font-size:11px}
.cg-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-style:dashed;border-color:var(--hl3);background:var(--s2)}
.cg-more b{font:600 14px/1 var(--fm);color:var(--ink)}
.cg-more small{font:500 9.5px/1 var(--fm);letter-spacing:.08em;color:var(--dim)}
.az-fp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 14px;
  border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1)}
.az-fp:nth-of-type(2){margin-inline:8px}
.az-fp:nth-of-type(3){margin-inline:16px}
/* an attachment as a 16:9 thumbnail on the post's right (lab ai_community 02, 0604): a video that never plays, a GIF from KLIPY over a light
   sweeping across while it loads (never a diagonal hatch, brand test 10) */
.az-fp-att{grid-column:3;grid-row:1 / 3;width:112px;aspect-ratio:16/9;position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid var(--hl2);border-radius:8px;
  background:radial-gradient(80% 90% at 30% 30%,var(--s3),var(--s2))}
.az-fp-att img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.az-fp-att em{position:absolute;right:5px;bottom:5px;padding:2px 5px;border-radius:4px;background:rgb(0 0 0 / .55);font:500 8.5px/1 var(--fm);font-style:normal;color:var(--ink)}
.az-fp-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0 / .55);border:1px solid var(--hl3)}
.az-fp-play::after{content:"";margin-left:2px;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
/* the scan: a point cloud drawn in near-black dots until a real screenshot goes in (blue read as noise, Erik 2026-09-29) */
.az-fp-pc{background:radial-gradient(circle,var(--canvas) .9px,transparent 1.3px) 0 0/5px 5px,radial-gradient(80% 90% at 30% 30%,var(--s3),var(--s2))}
.az-fp-gif{background:linear-gradient(90deg,var(--s2) 20%,var(--s3) 50%,var(--s2) 80%) 0 0/200% 100%}
.az-fp-gif em{top:5px;bottom:auto;left:5px;right:auto;letter-spacing:.12em}
/* the GIF's caption sits at its foot: the crop keeps the foot */
.az-fp-gif img{object-position:center bottom}
.az-fp-tx b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:600 .86rem/1.35 var(--fd);color:var(--ink);overflow:hidden}
.az-fp-tx b i{font-style:normal;color:var(--acc)}
.az-fp-tx em{display:block;margin-top:4px;font:500 10.5px/1 var(--fm);font-style:normal;color:var(--faint)}
.az-fp-m{grid-column:2;grid-row:2;display:flex;align-items:center;gap:12px}
.az-fp-n{display:inline-flex;align-items:center;gap:4px;font:500 11px/1 var(--fm);color:var(--dim)}
.az-fp-n svg{width:13px;height:13px;fill:none;stroke:var(--faint);stroke-width:1.4;stroke-linejoin:round}
.az-fp-n:first-child svg{fill:rgb(from var(--red) r g b / .7);stroke:none}
.az-av{position:relative;grid-row:1 / 3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--s3);border:1px solid var(--hl2);
  font:600 10px/1 var(--fm);color:var(--ink)}
.az-av img,.az-ppl img{width:100%;height:100%;object-fit:cover}
.az-ppl{display:flex}
.az-ppl i{position:relative;width:22px;height:22px;margin-left:-7px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:2px solid var(--s1);
  background:var(--s3);font:600 8px/1 var(--fm);font-style:normal;color:var(--ink)}
/* the full package (Erik 2026-09-29, 0610): his pick 51 of the ai_package lab, baked. One sheet of hairline cells with
   shared walls: every week left (community, the calls), the bonuses right (Academy, the EF-Apps, the templates), the
   curriculum's building in the middle (sales.css' .bs-* and .rm rules, the same hover) under its AI-LAB and lifetime signs,
   the deep dives on a dotted band and lifetime the foot line. A phone draws the rooms as HTML floors (.apk-html). */
.apk{--lw:rgba(255,255,255,.30);display:grid;margin-top:8px;grid-template-columns:minmax(0,.9fr) minmax(0,2.9fr) minmax(0,.9fr);
  grid-template-areas:"kl main kr" "community main academy" "calls main apps" "calls main tpl" "deep deep deep" "life life life"}
.apk-kl{grid-area:kl}
.apk-kr{grid-area:kr}
.apk-community{grid-area:community}
.apk-calls{grid-area:calls}
.apk-academy{grid-area:academy}
.apk-apps{grid-area:apps}
.apk-tpl{grid-area:tpl}
.apk-k{align-self:end;padding:0 16px 10px;font:600 10.5px/1 var(--fm);letter-spacing:.16em;color:var(--dim2)}
/* a cell: the title with its icon, the tag, a list or chips */
.apk-c{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--lw);background:var(--s1)}
.apk-community,.apk-calls{justify-content:flex-start;border-right:0}
.apk-academy,.apk-apps,.apk-tpl{border-left:0}
.apk-calls,.apk-apps,.apk-tpl{border-top:0}
.apk-t{display:flex;align-items:center;gap:10px;font:700 1.02rem/1.3 var(--fd);color:var(--ink)}
.apk-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--dim2)}
.apk-ic svg{width:20px;height:20px}
.apk-ic .cy-i{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.apk-ic .az-live-dot{display:block}
.apk-c em{font:600 10px/1.3 var(--fm);font-style:normal;letter-spacing:.14em;color:var(--acc)}
.apk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.apk-chips li{padding:4px 9px;border:1px solid var(--hl2);border-radius:999px;background:var(--s3);font:600 .76rem/1.2 var(--fd);color:var(--dim)}
.apk-chips small{font:600 9px/1 var(--fm);letter-spacing:.1em;color:var(--faint)}
/* community a line each, the calls a slot each */
.apk-ln,.apk-when{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.apk-ln li{display:flex;align-items:center;gap:9px;font-size:.9rem;line-height:1.3;color:var(--dim2)}
.apk-ln li::before{content:"";flex:none;width:5px;height:5px;background:var(--acc)}
.apk-when li{display:flex;align-items:center;gap:8px}
.apk-when span{padding:5px 8px;border:1px solid var(--hl2);background:var(--s3);font:600 11px/1 var(--fm);color:var(--dim2)}
.apk-when small{font:600 9px/1 var(--fm);letter-spacing:.12em;color:var(--faint)}
/* the deep dives: a row for the one that is ready, a rounded READY badge, then one quiet line for the next ones */
.apk-dd{grid-area:deep;justify-content:flex-start;gap:0;padding:4px 26px;border-top:0;
  background:radial-gradient(circle,var(--hl1) 1px,transparent 1.4px) 0 0/8px 8px,var(--s1)}
.apk-dd-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:16px 0}
.apk-dd .apk-t{font-size:1.12rem}
.apk-dd .apk-t small{font:inherit;color:var(--dim)}
.apk-dd-r p{order:1;flex-basis:100%;margin:0;font-size:.92rem;line-height:1.5;color:var(--dim2)}
.apk-c .apk-dd-st{padding:4px 9px;border:1px solid var(--acc);border-radius:999px}
.apk-dd-more{margin:0;padding:10px 0 12px;border-top:1px solid var(--hl2);font-size:.86rem;line-height:1.4;color:var(--dim)}
.apk-life{grid-area:life;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;padding-top:18px;text-align:center}
.apk-life b{font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.apk-life p{font-size:.9rem;line-height:1.5;color:var(--dim2)}
/* the middle: the building, no day marks, dimension chain or from-to lines, its room words a size down */
.apk-main{grid-area:main;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:clamp(10px,2cqw,24px);border:1px solid var(--lw);background:var(--s1)}
.apk-svg{display:block;width:100%;height:auto}
.apk-svg :is(.bs-elev,.bs-dim,.bs-st){display:none}
.apk-svg .bs-r{font-size:8.5px;fill:var(--dim)}
.apk-svg .rm:is(:hover,:focus-visible) .bs-r{fill:var(--ink)}
.apk-post{stroke:var(--lw);stroke-width:1.2}
.apk-svg .apk-rob{color:var(--ink)}
.apk-roof{transform:scale(.78);transform-box:fill-box;transform-origin:50% 100%}
.apk-rsign{fill:var(--s2);stroke:var(--acc);stroke-width:1.2}
.apk-rt{fill:var(--acc);font:700 10.5px var(--fm);letter-spacing:.1em;text-anchor:middle}
.apk-rs{fill:var(--dim);font:600 8px var(--fm);letter-spacing:.2em;text-anchor:middle}
/* the same rooms as HTML floors, a phone only: the sign, then L3 on top, a room lights under the pointer */
.apk-html{display:none;flex-direction:column;align-items:center}
.apk-hd{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 14px;padding:10px 20px;border:1.4px solid var(--hl3);border-radius:var(--rb);background:var(--s2)}
.apk-hd .apk-rob{grid-row:span 2;width:56px;height:auto;color:var(--ink);--tic-sw:2}
.apk-hd b{align-self:end;font:800 1.7rem/1.1 var(--fd);color:var(--ink)}
.apk-hd em{align-self:start;font:600 10px/1.3 var(--fm);font-style:normal;letter-spacing:.14em;color:var(--acc)}
.apk-fls{align-self:stretch;display:grid;gap:5px;margin-top:10px;padding:5px;border:1px solid var(--lw);background:var(--s3)}
.apk-fl{display:grid;grid-template-columns:26px repeat(3,minmax(0,1fr));background:var(--s1)}
.apk-fl>span{padding:10px 4px;font:600 13px/1 var(--fm);color:var(--dim);transition:color .18s}
.apk-fl:hover>span{color:var(--acc)}
.apk-fl p{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 6px;border-left:1px solid var(--hl2);outline:none;transition:background .18s}
.apk-fl p:is(:hover,:focus-visible){background:var(--s3)}
.apk-fl i{font:600 10px/1.2 var(--fm);font-style:normal;color:var(--acc)}
.apk-fl b{font:700 .74rem/1.3 var(--fd);color:var(--dim2);hyphens:auto;overflow-wrap:break-word;transition:color .18s}
.apk-fl p:is(:hover,:focus-visible) b{color:var(--ink)}
.apk-wip{position:absolute;top:7px;right:7px;line-height:0}
.apk-wip svg{width:14px;height:12px}
/* the window narrower: two columns, every cell its own box; a phone: one column, the HTML floors */
@container page (max-width:980px){
  .apk{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"main main" "kl kr" "community academy" "calls apps" "calls tpl" "deep deep" "life life"}
  .apk .apk-c{border:1px solid var(--lw)}
}
@container page (max-width:640px){
  .apk{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "kl" "community" "calls" "kr" "academy" "apps" "tpl" "deep" "life"}
  .apk-svg{display:none}
  .apk-html{display:flex}
  .apk-dd{padding:4px 18px}
}
/* the placeholder people: a tone each, the initials filling the face so the whole face takes the edit mode right click,
   until Erik picks a photo (site slots ailab.member.*, Erik 2026-09-29) */
.az-ini{position:absolute;inset:0;display:grid;place-items:center}
.cm-edit .tt-img>.az-ini{outline:1px dashed var(--hl2);outline-offset:-1px;cursor:context-menu}
.cm-edit .tt-img>.az-ini:hover{outline-color:var(--acc)}
.az-comm .az-tn1{background:rgb(from var(--c-docs) r g b / .35)}
.az-comm .az-tn2{background:rgb(from var(--c-blog) r g b / .3)}
.az-comm .az-tn3{background:rgb(from var(--c-forum) r g b / .35)}
.az-comm .az-tn4{background:rgb(from var(--c-video) r g b / .35)}
.az-comm .az-tn5{background:rgb(from var(--c-ai) r g b / .35)}
.az-live-dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .az-live-dot{animation:az-live 1.6s ease-in-out infinite}
  .cg-on{animation:cg-talk 1.8s ease-in-out infinite}
  .az-fp-gif{animation:az-gif 3s linear infinite}
}
@keyframes az-live{50%{opacity:.35}}
@keyframes cg-talk{50%{box-shadow:0 0 0 6px rgb(from var(--acc) r g b / .06)}}
@keyframes az-gif{to{background-position:-100% 0}}
/* the five apps (Erik on ai_apps 09, 0599): a bento, RVTDocs MCP big and square on the left, the four others 16:9 two by
   two; each cover the dot grid and the app's short code until Erik puts its picture in (1:1 for MCP, 16:9 the rest); an
   app still being built wears WIP and a barrier in the cover's corner, the words on hover. Only b and p take the side
   margin, never every child: the shell's hover outline (.ctrace) is a child of the card too, and a margin on it pushed it 20px right */
.az-app-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:var(--gap)}
.az-app-grid>.az-app:first-child{grid-row:span 2}
.card.az-app{display:flex;flex-direction:column;gap:10px;min-width:0;padding:0 0 18px;overflow:hidden}
.az-app-ic{position:relative;display:block;aspect-ratio:16/9;margin-bottom:6px;border-bottom:1px solid var(--hl1);
  background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/14px 14px,var(--s2)}
.az-app:first-child .az-app-ic{aspect-ratio:1}
.az-app-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.az-app-code{position:absolute;left:12px;top:11px;font:600 10px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
/* a picture carries its own name: the code steps back, the WIP badge stays over it (0599) */
.az-app-ic img+.az-app-code{display:none}
.az-app b{margin:0 20px;font:600 1rem/1.3 var(--fd);color:var(--ink)}
.az-app:first-child b{font-size:1.4rem}
.az-app p{margin:0 20px;font-size:.88rem;line-height:1.5;color:var(--dim)}
/* one card lit at a time (Erik 2026-10-03, 0702): RVTDocs MCP until another is hovered or focused, then
   that one; the rest darker. A screen without hover keeps every card lit. */
.az-app-trace{display:none}
@media (hover:hover){
  .az-app{--lit:0}
  .az-app:first-child,.az-app:not(:first-child):is(:hover,:focus-within){--lit:1}
  .az-app-grid:has(.az-app:not(:first-child):is(:hover,:focus-within)) .az-app:first-child{--lit:0}
  .az-app .az-app-ic{filter:brightness(calc(.4 + .6 * var(--lit))) saturate(calc(.6 + .4 * var(--lit)));transition:filter .25s}
  .az-app :is(b,p){opacity:calc(.45 + .55 * var(--lit));transition:opacity .25s}
  /* the lit RVTDocs card wears the hover trace too (Erik 2026-10-03): its own copy of the shell's .ctrace,
     gone while the pointer is on it (the shell's one is there then) or another card holds the light */
  .az-app-trace{display:block;opacity:var(--lit);transition:opacity .25s}
  .az-app-trace rect{rx:calc(var(--rc) - .8px)}
  .az-app:first-child:hover .az-app-trace{display:none}
}
.az-app-wip{position:absolute;right:10px;top:9px;display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid var(--hl2);border-radius:5px;
  background:var(--s1);font:600 9.5px/1 var(--fm);letter-spacing:.12em;color:color-mix(in srgb,var(--faint),var(--dim));cursor:default}
.az-app-wip svg{width:14px;height:12px}
/* the same barrier marks a room of the building still being built (room_wip.html, the package's floors, 0610), a size up
   on a phone; dark gray, never orange (Erik on ai_package 51: "the construction icon make it dark gray") */
:is(.az-app-wip,.rm-wip,.apk-wip,.ae-bar) .b-bar{fill:var(--faint)}
:is(.az-app-wip,.rm-wip,.apk-wip,.ae-bar) .b-str{fill:var(--s1)}
:is(.az-app-wip,.rm-wip,.apk-wip,.ae-bar) .b-leg{stroke:var(--faint);stroke-width:1.2}
@container page (max-width:640px){ .rm-wip>g{transform:scale(1.7)} }
@container page (max-width:820px){
  .az-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-app-grid>.az-app:first-child{grid-row:auto;grid-column:1 / -1}
}
@container page (max-width:520px){
  .az-app-grid{grid-template-columns:minmax(0,1fr)}
}
/* the deep dives: the one that exists, then a quieter card for what comes */
.az-wiki{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(22px,3cqw,44px);align-items:center;margin-bottom:var(--gap);
  border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);padding:clamp(18px,3cqw,34px)}
.az-wiki-art{min-width:0;order:2}
.az-wg{display:block;width:100%;height:auto}
.az-wiki-tx{display:flex;flex-direction:column;gap:12px;min-width:0}
.az-wiki-n{font:800 clamp(1.7rem,3cqw,2.3rem)/1.1 var(--fd);color:var(--ink)}
.az-wiki-k{margin-top:-6px;font:500 12px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.az-wiki-tx p{margin:0;font-size:.95rem;line-height:1.6;color:var(--dim)}
.az-wiki-tx .ticks{margin:0}
.az-wiki-tx .az-dd-m{margin-top:4px}
/* the graph: P.21 L01 slide 06 small, the dashes flowing, the nodes breathing, a source lighting up in turn */
.wg-raw{fill:none;stroke:var(--hl3);stroke-width:1.2;stroke-dasharray:6 8}
.wg-wiki{fill:rgb(from var(--acc) r g b / .03);stroke:rgb(from var(--acc) r g b / .55);stroke-width:1.2;stroke-dasharray:5 6}
.wg-tagbg{fill:var(--s1)}
.wg-tag{font:500 9px/1 var(--fm);letter-spacing:.12em;fill:var(--faint)}
.wg-tag-w{fill:var(--acc)}
.wg-feeds line{stroke:var(--hl3);stroke-width:1;stroke-dasharray:2 6}
.wg-edges line{stroke:rgb(from var(--acc) r g b / .5);stroke-width:1;stroke-dasharray:3 6}
.wg-chips rect{fill:var(--s2);stroke:var(--hl2)}
.wg-chips text{font:500 9.5px/1 var(--fm);fill:var(--dim)}
.wg-nodes circle{fill:var(--acc);transform-box:fill-box;transform-origin:center}
.wg-nodes .wg-dim{fill:var(--dim)}
.wg-lbl{font:500 9.5px/1 var(--fm);fill:var(--dim)}
.wg-link{stroke:rgb(from var(--acc) r g b / .75);stroke-width:1.3;stroke-dasharray:4 5}
.wg-head{fill:var(--acc)}
.wg-agent{fill:var(--s2);stroke:rgb(from var(--acc) r g b / .45)}
.wg-an{font:600 9.5px/1 var(--fm);letter-spacing:.12em;fill:var(--acc)}
.wg-at{font:400 10px/1 var(--fd);fill:var(--dim)}
@media (prefers-reduced-motion:no-preference){
  .wg-feeds line{animation:wg-flow 2.6s linear infinite;animation-delay:calc(var(--i) * -.37s)}
  .wg-edges line{animation:wg-flow 1.9s linear infinite;animation-delay:calc(var(--i) * -.29s)}
  .wg-link{animation:wg-flow 1.6s linear infinite}
  .wg-nodes circle{animation:wg-breathe 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
  .wg-chips g rect{animation:wg-new 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1s)}
}
@keyframes wg-flow{to{stroke-dashoffset:-18}}
@keyframes wg-breathe{50%{transform:scale(1.35)}}
@keyframes wg-new{0%,8%{stroke:var(--hl2)}3%{stroke:var(--acc)}}
.card.az-dd{display:flex;flex-direction:column;gap:10px;min-width:0}
.az-dd b{font:600 1.3rem/1.2 var(--fd);color:var(--ink)}
.az-dd p{margin:0;font-size:.92rem;line-height:1.55;color:var(--dim)}
.az-dd-m{margin-top:auto;font:500 11px/1 var(--fm);letter-spacing:.12em;color:var(--faint)}
.card.az-dd-soon{background:transparent}
.az-dd-soon b{color:var(--dim)}
/* Academy, the big bonus: its head on the left, the courses as a bento, Advanced tall (Erik's pick 07 of ai_acad, 0599);
   the number before the name on one line, every course with its modules, no lesson counts */
.az-acad{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(22px,3cqw,40px);align-items:start;
  border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);padding:clamp(20px,3cqw,34px)}
.az-acad-hd h2{margin:16px 0 12px}
.az-acad-hd p{font-size:.95rem;line-height:1.6;color:var(--dim)}
.az-acad-was{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.az-acad-was s{font:700 2rem/1 var(--fd);color:var(--faint)}
.az-acad-was b{font:600 13px/1 var(--fm);letter-spacing:.14em;color:var(--acc);padding:8px 11px;border:1px solid rgb(from var(--acc) r g b / .6);border-radius:7px}
.az-acad-tot{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font:500 10.5px/1 var(--fm);letter-spacing:.12em;color:var(--faint)}
.az-acad-tot b{font:600 1.3rem/1 var(--fd);color:var(--ink);letter-spacing:0;margin-right:4px}
.az-acad-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.az-ac-big{grid-column:1;grid-row:1/3}
.az-ac{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--hl2);border-radius:var(--rc);padding:18px;
  background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/14px 14px,var(--canvas)}
.az-ac-h{display:flex;align-items:baseline;gap:7px;min-width:0}
.az-ac-no{flex:none;font:600 11px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
.az-ac-no::after{content:"/";margin-left:1px;letter-spacing:0;color:var(--hl3)}
.az-ac-n{font:700 1.2rem/1.2 var(--fd);color:var(--ink)}
.az-ac-big .az-ac-n{font-size:1.55rem}
.az-ac-t{margin:0;font-size:.84rem;line-height:1.5;color:var(--dim)}
.az-ac-s{display:flex;gap:14px;font:500 10.5px/1 var(--fm);letter-spacing:.08em;color:var(--faint)}
.az-ac-s b{color:var(--ink)}
.az-ac-m{list-style:none;margin:6px 0 0;padding:10px 0 0;border-top:1px solid var(--hl1);display:flex;flex-wrap:wrap;gap:6px;counter-reset:azm}
.az-ac-m li{counter-increment:azm;font-size:.8rem;line-height:1.35;color:var(--dim);padding:5px 9px;border:1px solid var(--hl2);border-radius:6px;background:var(--s1)}
.az-ac-m li::before{content:counter(azm);margin-right:7px;font:600 10px/1 var(--fm);color:var(--faint)}
/* the beam around the course under the pointer (Erik on ai_acad 10): the long orange body behind, the short red-orange head in
   front (the head's dash runs 17 of the body's 26 ahead, so it leads); the Academy-wide trace stays hidden */
.az-trace{display:none}
.az-ac:hover>.az-trace{display:block}
.az-trace .ct-glow{stroke:var(--acc);stroke-width:1.8}
.az-trace .ct-head{stroke:color-mix(in srgb,var(--acc) 60%,red);stroke-width:1.6;animation-delay:calc(-4.6s * .17)}
/* the laptop left of the problem's title, its own column so the title's lines keep their spacing (Erik's pick 06 of
   ai_lap, 0599): a prompt types at the bottom, sends, the code comes out, the orange button, the green tick */
.az-pb h2{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
.az-lap{display:block;order:-1;width:70px;height:auto}
.lp-scr{fill:var(--s2);stroke:var(--hl3);stroke-width:1.5}
.lp-base{fill:var(--s3);stroke:var(--hl3);stroke-width:1.5;stroke-linejoin:round}
.lp-code rect{fill:var(--dim)}
.lp-btn{fill:var(--acc)}
.lp-ok circle{fill:var(--green)}
.lp-ok path{fill:none;stroke:var(--canvas);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-bar{fill:var(--s3);stroke:var(--hl3);stroke-width:1}
.lp-typed,.lp-send{fill:var(--faint)}
.az-lap *{transform-box:fill-box}
.lp-typed,.lp-code rect{transform-origin:left center}
.lp-btn,.lp-ok,.lp-send{transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  /* one 6s loop: 0 to 16% the prompt types, 20% send, 26 to 44% four lines of code, 52% the button, 62% the tick, 92% reset */
  .lp-typed{animation:lp-typed 6s linear infinite}
  .lp-send{animation:lp-send 6s ease-out infinite}
  .lp-code rect{animation:lp-code 6s ease-out infinite}
  .lp-code rect:nth-child(2){animation-delay:.3s}
  .lp-code rect:nth-child(3){animation-delay:.6s}
  .lp-code rect:nth-child(4){animation-delay:.9s}
  .lp-btn{animation:lp-btn 6s ease-out infinite}
  .lp-ok{animation:lp-ok 6s ease-out infinite}
}
@keyframes lp-typed{0%{transform:scaleX(0)}16%{transform:scaleX(1)}20%,100%{transform:scaleX(0)}}
@keyframes lp-send{0%,17%{fill:var(--faint);transform:none}20%{fill:var(--acc);transform:translateX(2px)}24%,100%{fill:var(--faint);transform:none}}
@keyframes lp-code{0%,26%{transform:scaleX(0)}32%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes lp-btn{0%,48%{transform:scale(0)}54%{transform:scale(1.12)}58%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes lp-ok{0%,60%{transform:scale(0)}66%{transform:scale(1.2)}70%,92%{transform:scale(1)}100%{transform:scale(0)}}

/* ---------- container breakpoints (the site window, not the browser) ---------- */
@container page (max-width:820px){
  .grid3,.prices{grid-template-columns:minmax(0,1fr)}
  .proofd{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .fit{grid-template-columns:minmax(0,1fr)}
  .az-split,.az-acad,.az-wiki{grid-template-columns:minmax(0,1fr)}
  .annot{display:none}
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .chz-hero h1{font-size:2.25rem}
  .proofd-chz{grid-template-columns:minmax(0,1fr);gap:26px}
  .proofd-chz.az-dims4{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
}
@container page (max-width:640px){
  /* a phone: a post's thumbnail under its likes, the words keep the width; the call's faces wrap three a row */
  .az-fp-att{grid-column:2 / -1;grid-row:auto;width:min(100%,240px)}
  .cg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cg-on{aspect-ratio:16/10}
  .proofd-chz.az-dims4{grid-template-columns:minmax(0,1fr);gap:26px}
  .az-acad-list{grid-template-columns:minmax(0,1fr)}
  .az-ac-big{grid-column:auto;grid-row:auto}
  .ph-pnl{gap:16px;padding:18px 16px}
  /* the map keeps its corner, WHAT and WHY run the full width under it, the modules stack under them */
  .ph-det{grid-template-columns:72px minmax(0,1fr);grid-template-rows:none;column-gap:16px}
  .ph-idle{padding-left:88px}
  .ph-ww{line-height:1.5}
  .ph-k{display:block;width:auto;margin:10px 0 3px}
  .ph-toc{grid-area:4/1/5/-1;grid-auto-flow:row;grid-template-rows:none;margin-top:12px;padding:12px 0 0;
    border-left:none;border-top:1px solid var(--hl2)}
  .ph-toc ol{margin-bottom:10px}
}

/* ---------- reduced motion: every loop of these pages stops, the final state shows ---------- */
@media (prefers-reduced-motion:reduce){
  /* !important: the loops sit on more specific selectors (.driftbox i:nth-child(1) and friends) */
  .vsl-eq i,.driftbox i{animation:none !important}
  .annot-arrow path{stroke-dashoffset:0;transition:none}
  .vsl.playing .vsl-bar i{transition:none}
}


/* ================================================================
   ACADEMY WAITLIST (prototype styles.css L2417-2431 and the .kf-* field
   parts at L923-931). A short variation of the Join page: one promise, one
   form. Every rule here is a narrow wrapper around the .cap parts the shell
   already owns, so the fields, the beam and the sent state behave as they do
   on every other capture form (0139).
   ================================================================ */
/* the .kf-* field parts live in shell.css beside .cap, where every capture fragment reads them (0369) */
/* the card is the StarterKit's (rs-kitcard, app_resources): only its place on this page is ours */
.wl-card{max-width:30rem;margin:36px auto 0;text-align:left}
.wl-card .cap{max-width:none}
/* the email sits in a .cap-fields so it keeps the capture beam; on success the shell adds .ok to the
   form and the whole field group goes, not just the row */
.wlform .cap-fields{margin-bottom:18px}
.wlform .cap-fields input{background:var(--canvas)}
.cap.ok .wl-fields{display:none}
.wlform .cap-note{margin-top:14px;text-align:center}
.wl-list{max-width:42rem;margin-top:26px}
.wl-lead{margin-top:26px;max-width:42rem}
/* the AI Lab hero's subheading: three lines, not four (Erik 2026-10-04, 0713) */
.hero-c .az-sub{max-width:44rem}
/* the same hero inside a lesson (courses.pitch, Erik 0752): framed and spaced where the lesson's video frame stands, compound
   because shell.css loads after this sheet and owns .hero-c */
.hero-c.az-pitch{max-width:none;margin-top:24px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);
  padding:40px clamp(16px,4cqw,40px) 36px}