/* Lesson pages — one idea per screen, visuals beside short text, light tables. */
.topic main{max-width:980px;padding-top:32px}
.topic article,.topic .page-nav,.topic .site-footer{max-width:760px}
.topic main>.site-disclaimer{font-size:12px;color:var(--faint)}
.topic .eyebrow{font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--part-ink,var(--accent-ink))}
.topic .page-header{margin-bottom:1.6rem;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.topic .page-header:has(.page-header-art){grid-template-columns:minmax(0,1fr) 200px}
.page-header-art{margin:6px 0 0;justify-self:end}
.page-header-art img{display:block;width:200px;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(15,31,61,.14)}
.page-header-art figcaption{font-size:10.5px;color:var(--faint);text-align:right;padding:4px 2px 0}
@media(max-width:899px){.topic .page-header:has(.page-header-art){grid-template-columns:minmax(0,1fr)}.page-header-art{justify-self:start;margin-top:0}.page-header-art img{width:150px}}
.flow,.cards,.outcomes,.table-scroll,.shot,.stack,.diagram{clear:both}
.topic h1{font-size:2.1rem;line-height:1.15;letter-spacing:-.025em;margin:6px 0 10px}
.topic .page-meta{margin:0 0 14px;font-size:12.5px;align-items:center}
.lesson-kicker{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-size:11.5px}
.topic .lede{border-left:0;padding:0;font-size:1.15rem;line-height:1.55;color:var(--text-2)}

/* Sections */
.topic h2{font-size:1.4rem;line-height:1.3;margin:2.8rem 0 .9rem;letter-spacing:-.02em}
.topic h2::after{width:36px;height:3px;border-radius:2px;margin-top:10px}
.topic h3{font-size:1.05rem;margin:1.6rem 0 .5rem}
.topic article p{font-size:16.5px;line-height:1.65;max-width:62ch}

/* Tables: quiet, readable */
.topic .table-scroll{border:0;background:transparent;border-radius:0;margin:1rem 0 1.6rem}
.topic table{font-size:15px}
.topic th{background:transparent;color:var(--text-3);font-size:11.5px;letter-spacing:.09em;border-bottom:2px solid var(--line);padding:8px 12px}
.topic td{padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px;line-height:1.5}
.topic tbody tr:nth-child(even) td{background:var(--paper)}
.topic td:first-child{font-weight:650;color:var(--heading)}

/* Cards (icon | title | text) */
.cards{margin:.6rem 0 1.4rem}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards li{padding:16px 16px 18px;gap:12px}
.cards strong{font-size:15px}
.cards li>span:last-child{font-size:14px}

/* Step strips inside lessons */
.topic .steps{margin:.6rem 0 1.4rem}
.topic .steps li{background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,31,61,.05);font-size:14px;padding:12px 12px 12px}

/* Try this: a prompt bubble and what comes back */
.try{margin:1.2rem 0 1.6rem;padding:18px 20px;background:var(--accent-soft);border-radius:18px}
.try-label{font-size:11.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px;padding:0;border:0}
.prompt-bubble{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;background:var(--surface);border-radius:14px 14px 14px 4px;padding:14px 16px;border:1px solid var(--line)}
.prompt-who{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy-700);color:#fff;font-size:11px;font-weight:700}
.prompt-bubble p{margin:0;font-size:15.5px;line-height:1.55;font-family:'JetBrains Mono',monospace;font-size:14px;max-width:none}
.try-result{margin:12px 0 0;font-size:15px;line-height:1.5;display:flex;gap:10px;align-items:flex-start;max-width:none}
.try-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sea);color:#fff;font-size:13px;flex:none;margin-top:1px}

/* Self-check */
.selfcheck{margin:.6rem 0 1.6rem;display:grid;gap:8px}
.selfcheck details{border:1px solid var(--line);border-radius:12px;padding:0;background:var(--surface)}
.selfcheck summary{cursor:pointer;padding:12px 16px;font-weight:650;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.selfcheck summary::-webkit-details-marker{display:none}
.selfcheck summary::after{content:'+';color:var(--accent-ink);font-weight:700;font-size:18px;line-height:1}
.selfcheck details[open] summary::after{content:'−'}
.selfcheck details p{margin:0;padding:0 16px 14px;font-size:15px;color:var(--text-2)}

/* Callouts inside lessons */
.topic .callout{border-radius:16px;padding:18px 20px}
.topic .callout p{max-width:none}
.outcomes li,.cards li{align-content:start}
.try-result strong{white-space:nowrap}
.topic .callout-rule{font-size:16px;background:var(--brick-soft);border-left:4px solid var(--brick)}
.topic .callout-rule .callout-label{color:var(--brick)}
.topic .callout-takeaway{background:var(--sea-soft);border-left:4px solid var(--sea);border-radius:12px;padding:14px 18px;font-size:1.05rem}
.topic .callout-note{border-left:1px solid var(--line)}

/* Screenshots */
.topic .shot img{max-width:540px;max-height:none;border-radius:12px;box-shadow:0 8px 24px rgba(15,31,61,.14)}
.topic .shot:not(.tour) img{max-height:600px;width:auto;max-width:min(760px,100%)}
.topic .shot-frame{max-width:540px;border-radius:12px}
.topic .shot-frame{box-shadow:none;padding:2rem 1rem}

/* Footnote stamp and nav */
.facts-checked{font-size:12px;color:var(--faint);margin:2.4rem 0 0;max-width:none}
.topic .path-next{display:none}
.topic .page-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;margin-top:1.4rem;padding-top:0}
.topic .page-nav a{display:block;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.topic .page-nav a:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(15,31,61,.1);text-decoration:none}
.topic .page-nav .next{grid-column:2;background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.topic .page-nav .next span{color:#C9D6E8}
.topic .page-nav .next:hover{background:var(--navy-800)}
.topic .page-nav strong{font-size:15px;font-weight:650}
.topic .page-nav span{font-size:12px}

@media(max-width:719px){
  .topic h1{font-size:1.65rem}
  .cards-2,.cards-3,.cards-4{grid-template-columns:1fr}
  .prompt-bubble{grid-template-columns:1fr}
  .prompt-who{display:none}
}

/* Small photographs that draw the eye, never banners */
.photo{margin:.4rem 0 1.2rem;max-width:100%}
.photo img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(15,31,61,.14)}
.photo figcaption{font-size:12.5px;line-height:1.45;color:var(--text-3);padding:6px 2px 0}
.photo-credit{display:block;font-size:11px;color:var(--faint)}
.photo-right{float:right;width:260px;margin:.2rem 0 1rem 24px}
.photo-left{float:left;width:260px;margin:.2rem 24px 1rem 0}
.photo-wide{clear:both;max-width:400px}
.cards,.outcomes,.steps,.try,.selfcheck,.table-scroll{clear:both}
.topic h2{clear:both}
@media(max-width:719px){.photo-right,.photo-left{float:none;width:100%;margin:.4rem 0 1rem}}
/* Vendor logos beside their names */
.logo{width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.4em}
.cards .logo{width:26px;height:26px;margin:0}
/* Data flow: stops with arrows, an accredited boundary, and the thing that never happens */
.flow{margin:.6rem 0 1.6rem}
.flow-nodes,.flow-inner{list-style:none;display:flex;align-items:stretch;gap:0;padding:0;margin:0}
.flow-nodes{gap:0}
.flow-node{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-right:30px}
.flow-node:last-child,.flow-inner .flow-node:last-child{margin-right:0}
.flow-node::after{content:'→';position:absolute;right:-26px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;color:var(--accent-ink)}
.flow-node:last-child::after,.flow-inner .flow-node:last-child::after{content:none}
.flow-step{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy-700);color:#fff;font-size:12px;font-weight:700}
.flow-node strong{font-size:14.5px;line-height:1.3;color:var(--heading)}
.flow-node span:not(.flow-step){font-size:12.5px;line-height:1.4;color:var(--text-2)}
.flow-boundary{position:relative;flex:2 1 0;min-width:0;display:flex;flex-direction:column;padding:34px 14px 14px;border:2px dashed var(--accent);border-radius:16px;background:var(--accent-soft);margin-right:30px}
.flow-boundary:last-child{margin-right:0}
.flow-boundary::after{content:'→';position:absolute;right:-26px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;color:var(--accent-ink)}
.flow-boundary:last-child::after{content:none}
.flow-boundary-label{position:absolute;top:10px;left:14px;right:14px;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-inner{gap:0}
.flow-inner .flow-node{margin-right:30px}
.flow-back{margin:12px 0 0;font-size:14px;color:var(--sea);font-weight:600;display:flex;gap:10px;align-items:center;max-width:none}
.flow-back-arrow{font-size:20px}
.flow-never{margin:10px 0 0;padding:12px 16px;border-radius:12px;background:var(--brick-soft);color:var(--brick);font-weight:650;font-size:14.5px;display:flex;gap:10px;align-items:flex-start;max-width:none}
.flow-never-mark{font-size:16px;flex:none}
@media(max-width:719px){
  .flow-nodes,.flow-inner{flex-direction:column}
  .flow-node,.flow-boundary{margin-right:0;margin-bottom:26px}
  .flow-node::after,.flow-boundary::after{content:'↓';right:auto;left:50%;top:auto;bottom:-24px;transform:translateX(-50%)}
  .flow-inner .flow-node{margin-bottom:26px}
  .flow-inner .flow-node:last-child{margin-bottom:0}
  .flow-boundary-label{white-space:normal;position:static;margin-bottom:10px}
  .flow-boundary{padding-top:14px}
}
/* Path view instead of a directory */
.nav-collapsed{margin-bottom:10px}
.nav-tier-link{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px;border-radius:8px;color:var(--muted);text-decoration:none}
.nav-tier-link:hover{background:var(--surface);color:var(--text)}
.nav-tier-link .nav-label{margin:0}
.nav-tier-count{font-size:11px;color:var(--sidebar-text)}
.lesson-progress{display:block;flex:1 1 120px;height:6px;border-radius:3px;background:var(--elev);overflow:hidden;min-width:80px}
.lesson-progress-fill{display:block;height:100%;background:var(--accent);border-radius:3px;width:0}
.outcome-logo svg{width:26px;height:26px;fill:currentColor;stroke:none}
.home .sidebar{display:none}
.home main{margin-left:0}
@media(min-width:1024px){.home main{margin-left:auto;margin-right:auto;border-right:0}}

.lesson-progress-fill[data-pct="0"]{width:0%}.lesson-progress-fill[data-pct="1"]{width:1%}.lesson-progress-fill[data-pct="2"]{width:2%}.lesson-progress-fill[data-pct="3"]{width:3%}.lesson-progress-fill[data-pct="4"]{width:4%}.lesson-progress-fill[data-pct="5"]{width:5%}.lesson-progress-fill[data-pct="6"]{width:6%}.lesson-progress-fill[data-pct="7"]{width:7%}.lesson-progress-fill[data-pct="8"]{width:8%}.lesson-progress-fill[data-pct="9"]{width:9%}.lesson-progress-fill[data-pct="10"]{width:10%}.lesson-progress-fill[data-pct="11"]{width:11%}.lesson-progress-fill[data-pct="12"]{width:12%}.lesson-progress-fill[data-pct="13"]{width:13%}.lesson-progress-fill[data-pct="14"]{width:14%}.lesson-progress-fill[data-pct="15"]{width:15%}.lesson-progress-fill[data-pct="16"]{width:16%}.lesson-progress-fill[data-pct="17"]{width:17%}.lesson-progress-fill[data-pct="18"]{width:18%}.lesson-progress-fill[data-pct="19"]{width:19%}.lesson-progress-fill[data-pct="20"]{width:20%}.lesson-progress-fill[data-pct="21"]{width:21%}.lesson-progress-fill[data-pct="22"]{width:22%}.lesson-progress-fill[data-pct="23"]{width:23%}.lesson-progress-fill[data-pct="24"]{width:24%}.lesson-progress-fill[data-pct="25"]{width:25%}.lesson-progress-fill[data-pct="26"]{width:26%}.lesson-progress-fill[data-pct="27"]{width:27%}.lesson-progress-fill[data-pct="28"]{width:28%}.lesson-progress-fill[data-pct="29"]{width:29%}.lesson-progress-fill[data-pct="30"]{width:30%}.lesson-progress-fill[data-pct="31"]{width:31%}.lesson-progress-fill[data-pct="32"]{width:32%}.lesson-progress-fill[data-pct="33"]{width:33%}.lesson-progress-fill[data-pct="34"]{width:34%}.lesson-progress-fill[data-pct="35"]{width:35%}.lesson-progress-fill[data-pct="36"]{width:36%}.lesson-progress-fill[data-pct="37"]{width:37%}.lesson-progress-fill[data-pct="38"]{width:38%}.lesson-progress-fill[data-pct="39"]{width:39%}.lesson-progress-fill[data-pct="40"]{width:40%}.lesson-progress-fill[data-pct="41"]{width:41%}.lesson-progress-fill[data-pct="42"]{width:42%}.lesson-progress-fill[data-pct="43"]{width:43%}.lesson-progress-fill[data-pct="44"]{width:44%}.lesson-progress-fill[data-pct="45"]{width:45%}.lesson-progress-fill[data-pct="46"]{width:46%}.lesson-progress-fill[data-pct="47"]{width:47%}.lesson-progress-fill[data-pct="48"]{width:48%}.lesson-progress-fill[data-pct="49"]{width:49%}.lesson-progress-fill[data-pct="50"]{width:50%}.lesson-progress-fill[data-pct="51"]{width:51%}.lesson-progress-fill[data-pct="52"]{width:52%}.lesson-progress-fill[data-pct="53"]{width:53%}.lesson-progress-fill[data-pct="54"]{width:54%}.lesson-progress-fill[data-pct="55"]{width:55%}.lesson-progress-fill[data-pct="56"]{width:56%}.lesson-progress-fill[data-pct="57"]{width:57%}.lesson-progress-fill[data-pct="58"]{width:58%}.lesson-progress-fill[data-pct="59"]{width:59%}.lesson-progress-fill[data-pct="60"]{width:60%}.lesson-progress-fill[data-pct="61"]{width:61%}.lesson-progress-fill[data-pct="62"]{width:62%}.lesson-progress-fill[data-pct="63"]{width:63%}.lesson-progress-fill[data-pct="64"]{width:64%}.lesson-progress-fill[data-pct="65"]{width:65%}.lesson-progress-fill[data-pct="66"]{width:66%}.lesson-progress-fill[data-pct="67"]{width:67%}.lesson-progress-fill[data-pct="68"]{width:68%}.lesson-progress-fill[data-pct="69"]{width:69%}.lesson-progress-fill[data-pct="70"]{width:70%}.lesson-progress-fill[data-pct="71"]{width:71%}.lesson-progress-fill[data-pct="72"]{width:72%}.lesson-progress-fill[data-pct="73"]{width:73%}.lesson-progress-fill[data-pct="74"]{width:74%}.lesson-progress-fill[data-pct="75"]{width:75%}.lesson-progress-fill[data-pct="76"]{width:76%}.lesson-progress-fill[data-pct="77"]{width:77%}.lesson-progress-fill[data-pct="78"]{width:78%}.lesson-progress-fill[data-pct="79"]{width:79%}.lesson-progress-fill[data-pct="80"]{width:80%}.lesson-progress-fill[data-pct="81"]{width:81%}.lesson-progress-fill[data-pct="82"]{width:82%}.lesson-progress-fill[data-pct="83"]{width:83%}.lesson-progress-fill[data-pct="84"]{width:84%}.lesson-progress-fill[data-pct="85"]{width:85%}.lesson-progress-fill[data-pct="86"]{width:86%}.lesson-progress-fill[data-pct="87"]{width:87%}.lesson-progress-fill[data-pct="88"]{width:88%}.lesson-progress-fill[data-pct="89"]{width:89%}.lesson-progress-fill[data-pct="90"]{width:90%}.lesson-progress-fill[data-pct="91"]{width:91%}.lesson-progress-fill[data-pct="92"]{width:92%}.lesson-progress-fill[data-pct="93"]{width:93%}.lesson-progress-fill[data-pct="94"]{width:94%}.lesson-progress-fill[data-pct="95"]{width:95%}.lesson-progress-fill[data-pct="96"]{width:96%}.lesson-progress-fill[data-pct="97"]{width:97%}.lesson-progress-fill[data-pct="98"]{width:98%}.lesson-progress-fill[data-pct="99"]{width:99%}.lesson-progress-fill[data-pct="100"]{width:100%}
@media(max-width:719px){.photo img{max-height:230px;object-fit:cover;object-position:center}.topic .shot:not(.tour) img{max-height:390px}}
/* Vendor logos inside a flow stop */
.flow-logos{display:flex;gap:8px;margin:2px 0 4px}
.flow-logos .logo{width:22px;height:22px;fill:currentColor;color:var(--heading)}

.topic .shot .shot-credit{font-size:11px;line-height:1.4;color:var(--faint);margin:.15rem 0 0}
.topic .shot figcaption{font-size:13px;color:var(--text-2)}
/* Click-through tours (2026-09-16): one cropped screenshot, numbered pins, Next/Back */
.tour .tour-stage{position:relative;display:block;width:fit-content;max-width:min(760px,100%);overflow:hidden;border-radius:12px}
.tour .tour-stage img{display:block;width:100%;max-width:none;height:auto}
.tour-pin{position:absolute;display:block;margin:0;padding:0;border:2px dashed var(--brick);border-radius:8px;background:transparent;cursor:pointer;box-sizing:border-box}
.tour-pin span{position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:50%;background:var(--brick);color:#FFFFFF;font:700 12px/22px Inter,system-ui,sans-serif;text-align:center;box-shadow:0 1px 3px rgba(15,31,61,.35)}
.tour-pin.is-active{border-style:solid;border-width:3px;box-shadow:0 0 0 4px rgba(166,61,56,.28),0 0 0 999px rgba(15,31,61,.28)}
.tour-pin:focus-visible{outline:3px solid var(--link-hover);outline-offset:2px}
.tour-steps{list-style:none;margin:.6rem 0 0;padding:0;max-width:760px;display:grid;gap:4px}
.tour-step .tour-go{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start;width:100%;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;line-height:1.45;text-align:left;cursor:pointer}
.tour-step .tour-go strong{color:var(--heading)}
.tour-step .tour-go .tour-text{display:inline}
.tour-step .tour-n{width:22px;height:22px;border-radius:50%;background:var(--brick);color:#FFFFFF;font:700 12px/22px Inter,system-ui,sans-serif;text-align:center;grid-row:1/span 2}
.tour-step .tour-go strong{grid-column:2}
.tour-step .tour-go .tour-text{grid-column:2;color:var(--text-2)}
.tour-ready .tour-step:not(.is-active) .tour-go{opacity:.78}
.tour-ready .tour-step.is-active .tour-go{background:var(--accent-soft);border-color:var(--accent)}
.tour-nav{display:none;align-items:center;gap:12px;margin:.5rem 0 0;max-width:760px}
.tour-ready .tour-nav{display:flex}
.tour-nav button{padding:6px 14px;border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--accent);font:600 13px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
.tour-nav button:disabled{opacity:.45;cursor:default}
.tour-nav .tour-count{font-size:13px;color:var(--text-2);margin-left:auto}
@media(max-width:719px){.tour-pin span{width:18px;height:18px;line-height:18px;font-size:11px;top:-9px;left:-9px}}

/* The assembled request (2026-09-16): a tall document of layers beside a legend */
.stack{margin:1rem 0 1.4rem}
.stack-body{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:20px;align-items:start}
.stack-doc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;box-shadow:0 8px 24px rgba(15,31,61,.10)}
.stack-title{margin:0 0 8px;font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.stack-bands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;height:420px}
.stack-band{position:relative;display:flex;align-items:center;gap:8px;min-height:26px;padding:0 10px;border-radius:6px;background:var(--accent-soft);color:var(--heading);font-size:13px;font-weight:600;border:1px solid rgba(47,95,148,.25)}
.stack-band.is-yours{background:var(--navy-800);color:#FFFFFF;border-color:var(--navy-800)}
.stack-band .stack-n{width:18px;height:18px;border-radius:50%;background:var(--surface);color:var(--heading);font:700 11px/18px Inter,system-ui,sans-serif;text-align:center;flex:none}
.stack-band.is-yours .stack-n{background:#FFFFFF;color:var(--navy-800)}
.stack-foot{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.stack-arrow{display:inline-block;margin-right:6px;color:var(--brick);font-weight:700}
.stack-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stack-item{display:grid;grid-template-columns:22px 1fr;column-gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13.5px;line-height:1.45}
.stack-item.is-yours{background:var(--accent-soft);border-color:var(--accent)}
.stack-item .stack-n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#FFFFFF;font:700 12px/22px Inter,system-ui,sans-serif;text-align:center;grid-row:1/span 3}
.stack-item strong{grid-column:2;color:var(--heading)}
.stack-item .stack-who{grid-column:2;font-size:12px;color:var(--text-2)}
.stack-item .stack-note{grid-column:2;color:var(--text-2)}
.stack figcaption{margin-top:.5rem;font-size:13px;color:var(--text-2)}
@media(max-width:719px){.stack-body{grid-template-columns:1fr}.stack-bands{height:360px}}
.stack-band.share-1{flex:1 1 0}
.stack-band.share-2{flex:2 1 0}
.stack-band.share-3{flex:3 1 0}
.stack-band.share-4{flex:4 1 0}
.stack-band.share-5{flex:5 1 0}
.stack-band.share-6{flex:6 1 0}
.stack-band.share-7{flex:7 1 0}
.stack-band.share-8{flex:8 1 0}
.stack-band.share-9{flex:9 1 0}
.stack-band.share-10{flex:10 1 0}
.stack-band.share-11{flex:11 1 0}
.stack-band.share-12{flex:12 1 0}
.stack-band.share-13{flex:13 1 0}
.stack-band.share-14{flex:14 1 0}
.stack-band.share-15{flex:15 1 0}
.stack-band.share-16{flex:16 1 0}
.stack-band.share-17{flex:17 1 0}
.stack-band.share-18{flex:18 1 0}
.stack-band.share-19{flex:19 1 0}
.stack-band.share-20{flex:20 1 0}
.stack-band.share-21{flex:21 1 0}
.stack-band.share-22{flex:22 1 0}
.stack-band.share-23{flex:23 1 0}
.stack-band.share-24{flex:24 1 0}
.stack-band.share-25{flex:25 1 0}
.stack-band.share-26{flex:26 1 0}
.stack-band.share-27{flex:27 1 0}
.stack-band.share-28{flex:28 1 0}
.stack-band.share-29{flex:29 1 0}
.stack-band.share-30{flex:30 1 0}
.stack-band.share-31{flex:31 1 0}
.stack-band.share-32{flex:32 1 0}
.stack-band.share-33{flex:33 1 0}
.stack-band.share-34{flex:34 1 0}
.stack-band.share-35{flex:35 1 0}
.stack-band.share-36{flex:36 1 0}
.stack-band.share-37{flex:37 1 0}
.stack-band.share-38{flex:38 1 0}
.stack-band.share-39{flex:39 1 0}
.stack-band.share-40{flex:40 1 0}
.shot-grok-sidebar .tour-stage{max-width:300px}
.shot-chatgpt-sidebar .tour-stage{max-width:260px}
.topic .shot-chatgpt-sidebar-public img,.topic .shot-grok-sidebar-public img{max-width:300px}
.topic .shot-grok-create-project img,.topic .shot-chatgpt-create-project-memory img{max-width:460px}
.topic pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}

/* Owner review 2026-09-17: proportions and wrapping.
   - the lesson column may use more of a wide window;
   - three-card sets stack as wide rows (icon, title, text across) instead of three tall narrow boxes;
   - two-by-two cards put the text under the title at full card width;
   - short boxes balance their lines so no word dangles alone. */
.topic main{max-width:1180px}
.topic article,.topic .page-nav,.topic .site-footer{max-width:900px}
.topic article p{max-width:72ch}
.topic h1,.topic h2,.topic h3,.cards strong,.cards li>span:last-child,.steps li,.flow-node strong,.flow-node span,.tour-go,.stack-item,.topic figcaption,.topic th,.topic td,.callout p,.doors li,.outcomes li{text-wrap:balance}
.topic article p,.topic article li{text-wrap:pretty}
.cards.cards-3{grid-template-columns:minmax(0,1fr);gap:10px}
.cards.cards-3 li{grid-template-columns:44px minmax(150px,210px) minmax(0,1fr);grid-template-rows:auto;align-items:center;column-gap:16px;padding:12px 18px}
.cards.cards-3 li .outcome-icon{grid-row:1;grid-column:1}
.cards.cards-3 li strong{grid-row:1;grid-column:2}
.cards.cards-3 li>span:last-child{grid-row:1;grid-column:3}
.cards.cards-2 li,.cards.cards-4 li{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
.cards.cards-2 li .outcome-icon,.cards.cards-4 li .outcome-icon{grid-row:1;grid-column:1}
.cards.cards-2 li strong,.cards.cards-4 li strong{grid-row:1;grid-column:2}
.cards.cards-2 li>span:last-child,.cards.cards-4 li>span:last-child{grid-row:2;grid-column:1 / 3;margin-top:4px}
.topic .steps li{font-size:14.5px;line-height:1.4;padding:12px 14px}
@media(max-width:719px){
 .cards.cards-3 li{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
 .cards.cards-3 li strong{grid-column:2}
 .cards.cards-3 li>span:last-child{grid-row:2;grid-column:1 / 3;margin-top:4px}
}

/* Context-window page (2026-09-17): every section keeps room for its label; hover or tap shows what it is */
.stack-body{grid-template-columns:minmax(240px,300px) 1fr}
.stack-bands{height:auto;gap:3px}
.stack-band{display:block;padding:0;min-height:0;border:0;background:transparent}
.stack-hit{display:flex;align-items:center;gap:8px;width:100%;height:100%;min-height:34px;margin:0;padding:4px 10px;border:1px solid rgba(47,95,148,.25);border-radius:6px;background:var(--accent-soft);color:var(--heading);font:600 13px/1.25 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.stack-band.is-yours .stack-hit{background:var(--navy-800);color:#FFFFFF;border-color:var(--navy-800)}
.stack-hit .stack-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stack-hit:hover,.stack-hit:focus-visible,.stack-band.is-active .stack-hit{outline:2px solid var(--brick);outline-offset:1px}
.stack-band .stack-n{width:18px;height:18px;border-radius:50%;background:var(--surface);color:var(--heading);font:700 11px/18px Inter,system-ui,sans-serif;text-align:center;flex:none}
.stack-band.is-yours .stack-n{background:#FFFFFF;color:var(--navy-800)}
.stack-compaction{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--brick);background:var(--brick-soft);font-size:12.5px;line-height:1.4;color:var(--text)}
.stack-ready .stack-item{opacity:.78}
.stack-ready .stack-item.is-active{opacity:1;background:var(--accent-soft);border-color:var(--accent)}
.shot-gemini-grounded-answer .tour-stage{max-width:min(760px,100%)}
.stack-band.share-1{flex:none;height:39px}
.stack-band.share-2{flex:none;height:44px}
.stack-band.share-3{flex:none;height:49px}
.stack-band.share-4{flex:none;height:54px}
.stack-band.share-5{flex:none;height:59px}
.stack-band.share-6{flex:none;height:64px}
.stack-band.share-7{flex:none;height:69px}
.stack-band.share-8{flex:none;height:74px}
.stack-band.share-9{flex:none;height:79px}
.stack-band.share-10{flex:none;height:84px}
.stack-band.share-11{flex:none;height:89px}
.stack-band.share-12{flex:none;height:94px}
.stack-band.share-13{flex:none;height:99px}
.stack-band.share-14{flex:none;height:104px}
.stack-band.share-15{flex:none;height:109px}
.stack-band.share-16{flex:none;height:114px}
.stack-band.share-17{flex:none;height:119px}
.stack-band.share-18{flex:none;height:124px}
.stack-band.share-19{flex:none;height:129px}
.stack-band.share-20{flex:none;height:134px}
.stack-band.share-21{flex:none;height:139px}
.stack-band.share-22{flex:none;height:144px}
.stack-band.share-23{flex:none;height:149px}
.stack-band.share-24{flex:none;height:154px}
.stack-band.share-25{flex:none;height:159px}
.stack-band.share-26{flex:none;height:164px}
.stack-band.share-27{flex:none;height:169px}
.stack-band.share-28{flex:none;height:174px}
.stack-band.share-29{flex:none;height:179px}
.stack-band.share-30{flex:none;height:184px}
.stack-band.share-31{flex:none;height:189px}
.stack-band.share-32{flex:none;height:194px}
.stack-band.share-33{flex:none;height:199px}
.stack-band.share-34{flex:none;height:204px}
.stack-band.share-35{flex:none;height:209px}
.stack-band.share-36{flex:none;height:214px}
.stack-band.share-37{flex:none;height:219px}
.stack-band.share-38{flex:none;height:224px}
.stack-band.share-39{flex:none;height:229px}
.stack-band.share-40{flex:none;height:234px}

/* Tables (2026-09-17): one size and rhythm in every cell, top-aligned, a steady first column */
.topic table td,.topic table th{vertical-align:top;line-height:1.5}
.topic table td{font-size:15px}
.topic table td:first-child{width:24%;font-size:15px}
.topic table th{font-size:11.5px}

/* Exhibits (2026-09-17): illustrative mock-ups of an email and a long document carrying a hidden instruction */
.exhibit{margin:1rem 0 1.4rem;clear:both}
.exhibit-sheet{position:relative;max-width:620px;padding:18px 22px 20px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(15,31,61,.12)}
.exhibit-document .exhibit-sheet{border-radius:4px;padding:24px 34px 28px}
.exhibit .exhibit-sheet p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--text-2);max-width:none}
.exhibit .exhibit-head{font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.exhibit .exhibit-meta{font-size:13px;color:var(--text);margin-bottom:4px}
.exhibit .exhibit-inject{position:relative;margin:14px 0 6px;padding:22px 12px 10px;border:2px dashed var(--brick);border-radius:8px;background:var(--brick-soft);color:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px}
.exhibit-email .exhibit-inject{color:#8A8F99}
.exhibit-tag{position:absolute;top:-11px;left:10px;padding:2px 8px;border-radius:999px;background:var(--brick);color:#FFFFFF;font:700 10.5px/1.5 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.exhibit-figure{height:90px;border:1px solid var(--line);border-radius:4px;background:repeating-linear-gradient(135deg,var(--accent-soft) 0 10px,#FFFFFF 10px 20px)}
.exhibit .exhibit-figcap{font-size:12px;font-style:italic;color:var(--text-3)}
.exhibit-lens{position:absolute;right:-14px;bottom:34px;width:64px;height:64px;border:5px solid var(--navy-700);border-radius:50%;background:rgba(230,238,247,.35);box-shadow:0 4px 12px rgba(15,31,61,.25)}
.exhibit-lens::after{content:'';position:absolute;right:-26px;bottom:-22px;width:34px;height:8px;border-radius:4px;background:var(--navy-700);transform:rotate(45deg)}
.exhibit figcaption{margin-top:.5rem;font-size:13px;color:var(--text-2);max-width:620px}
@media(max-width:719px){.exhibit-lens{display:none}}
/* A lone node beside a boundary keeps its natural height and sits on the arrow's midline */
.flow-nodes:has(>.flow-boundary)>.flow-node{align-self:center;min-height:120px;justify-content:flex-start}
@media(max-width:719px){.stack-body{grid-template-columns:minmax(0,1fr)}.stack-hit .stack-label{white-space:normal}}
.flow-nodes>.flow-node,.flow-nodes>.flow-boundary,.flow-inner>.flow-node{margin-top:0}