/* ══════════ GUIDE PAGES (design pass Lane 3; round 1 2026-10-23, round 3 2026-10-24 on system v3) ══════════
   The Ultimate Guide, the Applied ID Portfolio Method, the LEAD AI Framework and /llm/ (a utility page: light design only).
   Loaded after lsd-refresh.css. Builds on its DESIGN SYSTEM (v1 to v3) and doesn't redefine it: containers, the answer card,
   the quote component, FAQ rows, "Show all", phone tabs, swipe rows, back to top, the phone "On this page" pill, the ending
   (author box, related list, CTA band, podcast band) and the footer all belong to the system.
   What this file adds:
   - one 720px reading column (--ds-read) for every text block, list, card and FAQ; wide pieces use 1136px (--ds-wide)
   - numbered, left-aligned section heads; a plain contents list (folds behind one button on phones)
   - a fixed "On this page" rail beside the column on screens 1320px and wider (assets/guides.js)
   - the definition-table pattern for named items (label column + text column; stacked on phones)
   - one before/after pattern (Method and LEAD AI), one quote component use (.ds-quote.g-quote, monogram avatars)
   - the Guide: one contrasting band, the slider recomposed for phones, the 11 steps as a grid on phones
   - LEAD AI: the loop graphic flat with stronger arrows, two text sizes in its components */

body.guide{--g-col:var(--ds-read,720px);--g-wide:1040px;--g-label:var(--sienna,#8A4F2E)}

/* ---------- Reading column and type ---------- */
body.guide .sec div[style*="max-width:760px"]:not(.g-cards),
body.guide .sec div[style*="max-width: 760px"]:not(.g-cards),
body.guide .sec div[style*="max-width:820px"],
body.guide .sec .container[style*="max-width:760px"],
html body.guide section.sec .lead-prose,
body.guide .lead-task{max-width:var(--g-col) !important;margin-left:auto !important;margin-right:auto !important}
body.guide .sec div[style*="max-width:760px"] p,
body.guide .sec div[style*="max-width:820px"] p,
body.guide .sec div[style*="max-width:760px"] li,
body.guide .lead-prose > p,
body.guide .lead-task,
body.guide article.legal p{font-size:17px;line-height:1.75;color:var(--ink-soft)}
body.guide .sec .container p + p,
body.guide .sec .container p + ul,
body.guide .sec .container ul + p,
body.guide .sec .container ol + p,
body.guide .sec .container figure + p{margin-top:1em}
body.guide .sec div[style*="max-width:760px"] > .reveal + .reveal{margin-top:36px}
body.guide .sec div[style*="max-width:760px"] h3,
body.guide .m-host h3,
body.guide article.legal h3{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.3;color:var(--navy);margin:0 0 10px;letter-spacing:0}
body.guide .sec div[style*="max-width:760px"] ul,
body.guide article.legal ul{margin:14px 0 18px 0 !important;padding-left:22px;line-height:1.7 !important}
body.guide .sec div[style*="max-width:760px"] li + li,
body.guide article.legal li + li{margin-top:8px}
/* review notes for Jill: readable, on the column, left-aligned */
body.guide .anat-draft{opacity:1 !important;color:var(--ink-faint);font-size:13px !important;text-align:left !important;max-width:var(--g-col);margin-left:auto !important;margin-right:auto !important}
/* hero intro: a wider measure so it reads in fewer lines */
body.guide .pg-hero .pg-sub{max-width:720px}

/* ---------- Hero step bars (no "You are here": every step is a step) ---------- */
body.guide .pg-hero .trail{max-width:min(var(--trail-w,860px),900px)}
body.guide .pg-hero .trail b{font-size:14.5px}
body.guide .pg-hero .trail small{font-size:12px;color:rgba(255,255,255,.66)}
body.guide .pg-hero .trail li:first-child .t-dot{background:#16333F;border-color:var(--sky);box-shadow:0 0 0 5px rgba(22,51,63,.9)}
body.guide .pg-hero .t-protect{font-size:14.5px;color:rgba(255,255,255,.82);margin-top:18px}
body.guide .pg-hero .t-protect a{color:var(--sky);font-weight:600}
@media (max-width:720px){
  /* the Guide's 11 steps: a numbered grid, all visible, nothing clipped */
  body.guide .pg-hero .trail[style*="--n:11"]{overflow:visible;margin:30px 0 0;padding:0}
  body.guide .pg-hero .trail[style*="--n:11"] ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;min-width:0;padding:0;counter-reset:gst}
  body.guide .pg-hero .trail[style*="--n:11"] ol::before{display:none}
  body.guide .pg-hero .trail[style*="--n:11"] li{counter-increment:gst;text-align:left}
  body.guide .pg-hero .trail[style*="--n:11"] li a{flex-direction:row;align-items:center;gap:8px}
  body.guide .pg-hero .trail[style*="--n:11"] .t-dot{width:26px;height:26px;flex:0 0 auto;border-radius:8px;border-width:1.5px;box-shadow:none !important;display:grid;place-items:center;font:600 12px/1 var(--font-body);color:var(--sky)}
  body.guide .pg-hero .trail[style*="--n:11"] .t-dot::before{content:counter(gst)}
  body.guide .pg-hero .trail[style*="--n:11"] b{font-size:13.5px;padding:0;letter-spacing:.01em;line-height:1.2}
  body.guide .pg-hero .trail b{font-size:13.5px}
}

@media (min-width:721px){
  body.guide .pg-hero .trail[style*="--n:11"]{max-width:980px}
  body.guide .pg-hero .trail[style*="--n:11"] b{font-size:13px;letter-spacing:.005em;white-space:nowrap;padding:0 2px}
}

/* ---------- Section dividers: one hairline the width of the reading column (not the container) ---------- */
body.guide.calm section.sec:not(.sec-navy) + section.sec:not(.sec-navy) > .container{border-top-color:transparent !important;
  background:linear-gradient(rgba(22,51,63,.12),rgba(22,51,63,.12)) top center / min(var(--g-col),calc(100% - 64px)) 1px no-repeat}
body.guide.calm section.sec.ds-band + section.sec > .container,
body.guide.calm section.sec + section.sec.ds-band > .container,
body.guide.calm section.sec.calm-zone + section.sec > .container,
body.guide.calm section.sec + section.sec.calm-zone > .container,
body.guide.calm section.sec.g-toc-sec > .container,
body.guide.calm section.sec > .container.ep-in,
body.guide.calm section.sec:has(> .container > .byline) > .container{background:none !important;border-top:0 !important}
/* answer cards and quotes on the contrasting band are white, so they still read as surfaces */
body.guide .ds-band .tldr .frame-card{background:#fff !important}

/* ---------- The Guide's AI section: the LEAD AI steps, drawn the way the LEAD AI page draws them ---------- */
body.guide .g-lead{position:relative;margin:34px 0 6px;padding:42px 26px 26px;background:var(--navy);border-radius:var(--ds-radius);box-shadow:0 30px 60px -40px rgba(5,15,22,.55)}
body.guide .g-lead::before{content:"";position:absolute;inset:14px;border:1px solid rgba(143,232,237,.35);border-radius:14px;pointer-events:none}
body.guide .g-lead-p{position:absolute;top:14px;left:50%;transform:translate(-50%,-50%);z-index:1;background:#8FE8ED;color:var(--navy);font:600 13px/1 var(--font-body);letter-spacing:.04em;padding:7px 14px;border-radius:8px}
body.guide .g-lead ol{list-style:none;margin:0 !important;padding:0 !important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
body.guide .g-lead li{position:relative;margin:0 !important;padding:18px 16px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff !important;font:500 15px/1.35 var(--font-display) !important}
body.guide .g-lead li b{display:block;margin-bottom:10px;font:400 34px/1 var(--font-display);color:#8FE8ED}
body.guide .g-lead li + li::before{content:"\2192";position:absolute;left:-11px;top:50%;transform:translate(-50%,-50%);color:#8FE8ED;font:700 17px/1 var(--font-body)}
@media (max-width:720px){
  body.guide .g-lead{padding:40px 20px 20px}
  body.guide .g-lead ol{grid-template-columns:1fr 1fr;gap:12px}
  body.guide .g-lead li + li::before{display:none}
}

/* ---------- The quote component on these pages: the system's .ds-quote as a light card, monogram avatar ---------- */
body.guide .g-quote{margin:26px 0 28px;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
body.guide .g-quote blockquote{margin:0;padding:0}
/* "Show all" in sentence case, like every other label */
/* (10/24 coordinator) the system's outline button is the one secondary button; no override here */
body.guide .g-quote .qa{flex-wrap:wrap;row-gap:10px}
body.guide .g-quote .qa .ds-more{margin-left:auto}
body.guide .g-mono{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--ds-tint);border:1px solid var(--ds-tint-line);color:var(--ds-teal-text);font:600 14px/1 var(--font-body);letter-spacing:.04em}
/* one avatar shape: circles */
body.guide .byline .mj-photo,body.guide .byline .mj-photo img{border-radius:50% !important}

/* ---------- Section heads: left-aligned on the column, numbered from the page's contents list ---------- */
body.guide section.sec[id]:not(.sec-navy) > .container > .head,
body.guide #applied-id-portfolio-method > .head{max-width:var(--g-col);margin:0 auto 32px;text-align:left}
body.guide section.sec[id]:not(.sec-navy) > .container > .head h2,
body.guide #applied-id-portfolio-method > .head h2{text-align:left;max-width:none}
body.guide section.sec[id]:not(.sec-navy) > .container > .head p,
body.guide #applied-id-portfolio-method > .head p{text-align:left;margin-left:0;margin-right:0;max-width:none;font-size:17px;line-height:1.75}
body.guide .head[data-num]{display:flex;flex-direction:column;align-items:stretch}
body.guide .head[data-num]::before{content:attr(data-num);order:-2;display:block;font:600 13px/1 var(--font-body);letter-spacing:.08em;color:var(--g-label);margin-bottom:14px}
body.guide .head[data-num] > h2{order:-1}
body.guide .head[data-num]::after{content:"";order:0;display:block;width:44px;height:2px;border-radius:2px;background:var(--teal);margin-top:20px;opacity:.75}
body.guide .head[data-num] > :not(h2){order:1}
body.guide .head[data-num] > p{margin-top:20px}
body.guide section.sls .head{text-align:center}
body.guide .lead-task{text-align:left}

/* ---------- Short answers: the system's answer card (tinted, no shadow), on the column ---------- */
body.guide .tldr.frame-wrap{max-width:var(--g-col);margin-left:auto;margin-right:auto}
body.guide .tldr .frame-card p{font-size:17px;line-height:1.72;color:var(--ink)}
body.guide .tldr .frame-card p + p{margin-top:.9em}
body.guide section.sec[id] .tldr.frame-wrap{margin-bottom:36px !important}
/* LEAD AI: its lead-in answers sit in the same card as the Method's short answers */
body.guide .g-ans{margin:0 0 32px !important}
body.guide .g-ans .lead-answer{font:400 17px/1.72 var(--font-body) !important;color:var(--ink) !important;border:0 !important;padding:0 !important;margin:0 !important}
body.guide .g-ans .lead-answer b{font-weight:600;color:var(--navy)}

/* ---------- The Guide's workshop card: a slim row on the column, not a third box ---------- */
body.guide .tool-cards.one{grid-template-columns:1fr !important;max-width:var(--g-col) !important;margin:30px auto 0 !important}
body.guide .tool-cards.one .res-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;background:none !important;border:0 !important;border-top:1px solid rgba(22,51,63,.14) !important;border-bottom:1px solid rgba(22,51,63,.14) !important;border-radius:0 !important;box-shadow:none !important;padding:22px 0 !important;transform:none !important}
body.guide .tool-cards.one .res-card > *{grid-column:1}
body.guide .tool-cards.one .res-card .r-tag{font:600 13px/1.3 var(--font-body) !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--g-label) !important;margin:0 0 6px}
body.guide .tool-cards.one .res-card .r-tag::first-letter{text-transform:uppercase}
body.guide .tool-cards.one .res-card h3{font-size:20px;margin:0 0 6px}
body.guide .tool-cards.one .res-card p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
body.guide .tool-cards.one .res-card > .arrow-link{grid-column:2;grid-row:1 / span 3;margin:0;white-space:nowrap}
@media (max-width:600px){body.guide .tool-cards.one .res-card{grid-template-columns:1fr}body.guide .tool-cards.one .res-card > .arrow-link{grid-column:1;grid-row:auto;margin-top:12px}}

/* ---------- Podcast episode card: the full column width ---------- */
body.guide .container.ep-in{max-width:calc(var(--g-col) + 64px) !important}
body.guide .ep-in .ep-card{max-width:none;width:100%}

/* ---------- The contents list: plain, on the column (no card) ---------- */
body.guide .g-toc-sec{padding-top:12px !important;padding-bottom:64px !important}
body.guide .sec.g-toc-sec > .container.container{max-width:calc(var(--g-col) + 64px) !important;background:none;border:0 !important;box-shadow:none;padding-top:0 !important}
body.guide .g-toc-sec .head{margin:0 0 4px !important;text-align:left !important;max-width:none}
body.guide .g-toc-sec .head h2{font:600 13px/1.3 var(--font-body) !important;letter-spacing:.02em;color:var(--g-label) !important;text-align:left !important;margin:0}
body.guide .g-toc-sec .head h2 *{font:inherit !important;color:inherit !important}
body.guide .g-toc-sec :is(.toc-list,.lead-toc){margin:14px 0 0 !important;padding:0 !important;list-style:none;counter-reset:gtoc;columns:2;column-gap:48px;max-width:none;border-top:1px solid rgba(22,51,63,.12);line-height:1.4 !important}
body.guide .g-toc-sec :is(.toc-list,.lead-toc) li{counter-increment:gtoc;break-inside:avoid;display:grid;grid-template-columns:30px minmax(0,1fr);padding:11px 0;margin:0;border-bottom:1px solid rgba(22,51,63,.08)}
body.guide .g-toc-sec :is(.toc-list,.lead-toc) li::before{content:counter(gtoc,decimal-leading-zero);font:600 12.5px/1.6 var(--font-body);color:var(--ink-faint);letter-spacing:.04em}
/* (the extra classes outrank the system's inline-link rule, which is meant for links in copy, not a contents list) */
html body.guide.guide.guide .g-toc-sec.g-toc-sec.g-toc-sec :is(.toc-list,.lead-toc) li a{color:var(--navy) !important;text-decoration:none !important;font:500 15px/1.45 var(--font-body);transition:color .2s}
html body.guide.guide.guide .g-toc-sec.g-toc-sec.g-toc-sec :is(.toc-list,.lead-toc) li a:hover{color:var(--ds-teal-text) !important;text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:4px}
body.guide .g-toc-toggle{display:none}
@media (max-width:720px){
  body.guide .g-toc-sec{padding-bottom:40px !important}
  body.guide .g-toc-sec > .container{padding:0 32px !important}
  body.guide section.sls .head{text-align:left}
  body.guide section.sls .head :is(h2,p){margin-left:0;margin-right:0}
  body.guide .g-toc-sec .head{display:none}
  body.guide .g-toc-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:#fff;border:1px solid rgba(22,51,63,.16);border-radius:14px;font:600 15px/1.2 var(--font-body);color:var(--navy);text-align:left;cursor:pointer}
  body.guide .g-toc-toggle .g-tt-n{color:var(--ink-faint);font-weight:500}
  body.guide .g-toc-toggle .g-tt-i{width:9px;height:9px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  body.guide .g-toc-sec.open .g-toc-toggle{border-radius:14px 14px 0 0;border-bottom-color:transparent}
  body.guide .g-toc-sec.open .g-toc-toggle .g-tt-i{transform:rotate(-135deg) translate(-2px,-2px)}
  body.guide .g-toc-sec :is(.toc-list,.lead-toc){columns:1;display:none;margin:0 !important;padding:2px 18px 8px !important;background:#fff;border:1px solid rgba(22,51,63,.16);border-top:0;border-radius:0 0 14px 14px}
  body.guide .g-toc-sec :is(.toc-list,.lead-toc) li:last-child{border-bottom:0}
  body.guide .g-toc-sec.open :is(.toc-list,.lead-toc){display:block}
}

/* ---------- The fixed "On this page" rail (screens 1320px and wider) ---------- */
.g-rail{position:fixed;z-index:30;top:128px;left:max(24px,calc(50vw - 636px));width:224px;max-height:calc(100vh - 156px);overflow:auto;padding:2px 0;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .25s,transform .25s;scrollbar-width:thin}
.g-rail.on{opacity:1;pointer-events:auto;transform:none}
.g-rail .g-rail-h{font:600 13px/1.3 var(--font-body);letter-spacing:.02em;color:var(--sienna,#8A4F2E);margin:0 0 10px 14px}
.g-rail .g-rail-l{border-left:1px solid rgba(22,51,63,.14)}
.g-rail .g-rail-l a{display:block;padding:5px 8px 5px 14px;margin-left:-1px;border-left:2px solid transparent;font:500 13px/1.38 var(--font-body);color:var(--ink-soft);text-decoration:none;transition:color .2s,border-color .2s}
.g-rail .g-rail-l a:hover{color:var(--navy)}
.g-rail .g-rail-l a.cur{color:var(--navy);font-weight:600;border-left-color:var(--teal)}
@media (max-width:1319px){.g-rail{display:none}}
/* where the rail shows, the system's floating pill would repeat it */
@media (min-width:1320px){body.guide .ds-toc-pill{display:none !important}}
@media (prefers-reduced-motion:reduce){.g-rail{transition:none}}

/* ---------- Named items as a definition table (Guide: ways to work, kinds of training, job titles, learning paths) ---------- */
body.guide .sec .container > div.g-cards{display:block;max-width:var(--g-col) !important}
body.guide .g-cards > .reveal{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:40px;margin:0 !important;padding:28px 0 30px;border-top:1px solid var(--line)}
body.guide .g-cards > .reveal > h3{grid-column:1;grid-row:1 / span 4;align-self:start;font-size:20px !important;line-height:1.3 !important;margin:2px 0 0 !important}
body.guide .g-cards > .reveal > :not(h3){grid-column:2}
body.guide .g-cards > .reveal p{font-size:17px;line-height:1.72}
body.guide .g-cards > .reveal p + p{margin-top:1em}
@media (max-width:720px){
  body.guide .g-cards > .reveal{grid-template-columns:1fr;padding:22px 0 24px}
  body.guide .g-cards > .reveal > h3{grid-row:auto;margin:0 0 8px !important}
  body.guide .g-cards > .reveal > :not(h3){grid-column:1}
  body.guide .g-cards.ds-tabbed{border-bottom:0}
  body.guide .g-cards.ds-tabbed > .reveal{border-top:0;padding-top:6px}
}

/* ---------- The Guide's one contrasting band: why become a corporate ID (six cards, a swipe row on phones) ---------- */
body.guide #why-become-id > .container{max-width:calc(var(--ds-wide) + 64px) !important}
body.guide #why-become-id > .container > .head{max-width:var(--ds-wide) !important}
body.guide .card-row.g-why{max-width:var(--ds-wide) !important;margin:8px auto 0 !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:20px !important}
body.guide .card-row.g-why .frame-card{background:#fff !important;border:1px solid var(--ds-line) !important;border-radius:var(--ds-radius) !important;box-shadow:var(--ds-shadow) !important;padding:28px 28px 30px !important}
body.guide .card-row.g-why .frame-card .lbl{font:500 20px/1.3 var(--font-display) !important;color:var(--navy) !important;text-transform:none;letter-spacing:0 !important;margin:0 0 10px}
body.guide .card-row.g-why .frame-card p{font-size:16px;line-height:1.7;color:var(--ink-soft)}
@media (max-width:1100px){body.guide .card-row.g-why{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:720px){
  body.guide .card-row.g-why{margin-left:-32px !important;margin-right:-32px !important;max-width:none !important}
  body.guide .card-row.g-why > .frame-card{flex-basis:84%}
  body.guide .g-quote .qa .ds-more{margin-left:56px}
  body.guide .card-row.g-why .frame-card{padding:24px 22px 26px !important}
}

/* ---------- Before and after: one pattern on the Method and LEAD AI (stacked on the column, accent rule on top) ---------- */
body.guide .xrow,
body.guide .lead-ba{display:grid !important;grid-template-columns:1fr !important;gap:18px !important;max-width:var(--g-col) !important;margin:0 auto !important}
body.guide .lead-ba{margin-top:40px !important}
body.guide :is(.xrow .frame-card,.lead-card){position:relative;background:#fff !important;border:1px solid var(--ds-line) !important;border-radius:var(--ds-radius) !important;box-shadow:var(--ds-shadow) !important;padding:26px 30px 28px !important;overflow:hidden}
body.guide :is(.xrow .frame-card,.lead-card)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#E9B595}
body.guide :is(.xrow .frame-card:last-child,.lead-card.after)::before{background:var(--teal)}
body.guide :is(.xrow .frame-card,.lead-card){border-top:1px solid var(--ds-line) !important}
body.guide :is(.xrow .lbl,.lead-lbl){font:600 13px/1.3 var(--font-body) !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--g-label) !important;margin:0 0 10px !important}
body.guide :is(.xrow .frame-card,.lead-card) :is(p,li){font-size:16px;line-height:1.7;color:var(--ink-soft)}

/* ---------- The Guide: the slider (desktop: framed, labels in sentence case; phones: the two slides stacked) ---------- */
body.guide .sls-stage{border:1px solid rgba(255,255,255,.16)}
@media (min-width:721px){body.guide .sls-after{padding-left:8.5% !important}}
body.guide .sls-labels span{font:600 12.5px/1 var(--font-body);letter-spacing:.02em;text-transform:none;padding:7px 12px}
body.guide .sls-after .meta{letter-spacing:.08em}
body.guide .sls-hint{text-transform:none;letter-spacing:.01em;font-size:13.5px;color:rgba(255,255,255,.72)}
body.guide .sls-callouts{max-width:var(--ds-wide);gap:20px}
body.guide .sls-co{padding:24px 22px}
body.guide .sls-co .n{font:600 13px/1 var(--font-body);letter-spacing:.06em;color:var(--sky)}
body.guide .sls-co h3{font-size:18px;line-height:1.3}
body.guide .sls-co p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
body.guide .sls-co:hover{transform:none}
@media (max-width:720px){
  body.guide .sls-stage{aspect-ratio:auto !important;display:flex;flex-direction:column;gap:14px;background:none !important;box-shadow:none !important;border:0;overflow:visible !important;border-radius:0 !important}
  body.guide .sls-slide{position:relative !important;inset:auto !important;border-radius:16px;overflow:hidden;padding:54px 20px 20px !important}
  body.guide .sls-after{clip-path:none !important;border:1px solid rgba(255,255,255,.16)}
  body.guide :is(.sls-divider,.sls-handle,.sls-range,.sls-hint,.sls-labels){display:none !important}
  body.guide .sls-slide::before{position:absolute;top:16px;left:16px;font:600 12.5px/1 var(--font-body);letter-spacing:.02em;padding:7px 12px;border-radius:999px}
  body.guide .sls-before::before{content:"Before";background:rgba(0,0,0,.6);color:#fff}
  body.guide .sls-after::before{content:"After";background:rgba(31,195,204,.9);color:var(--navy)}
  body.guide .sls-before .ttl{font-size:16px}
  body.guide .sls-before .cols{grid-template-columns:1fr}
  body.guide .sls-before ul{font-size:13px;line-height:1.45}
  body.guide .sls-before .bar{font-size:12px;margin-top:14px}
  body.guide .sls-before .nxt{font-size:11.5px}
  body.guide .sls-after .meta{font-size:11px}
  body.guide .sls-after .mail{max-width:100%;font-size:13.5px;margin-top:16px;padding:14px 16px}
  body.guide .sls-after .q{font-size:19px;margin-top:18px}
  body.guide .sls-after .opts{grid-template-columns:1fr;gap:8px;margin-top:16px}
  body.guide .sls-after .opt{font-size:13.5px;padding:11px 14px}
  body.guide .sls-callouts{margin-top:28px}
  body.guide .sls-callouts.ds-swipe > *{flex-basis:80%}
}

/* ---------- The Guide: the 11 steps keep the warm band; the method that follows has its own section ---------- */
body.guide .g-method-sec > .container{border-top:0 !important}
body.guide p.g-stage{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:32px;margin:0 !important;padding:22px 0;border-top:1px solid var(--line)}
body.guide p.g-stage > b{font:500 22px/1.35 var(--font-display);color:var(--navy)}
body.guide p:not(.g-stage) + p.g-stage{margin-top:22px !important}
body.guide p.g-stage:has(+ .s-links){border-bottom:1px solid var(--line)}
body.guide p.g-stage + .s-links{margin-top:24px !important}
@media (max-width:720px){body.guide p.g-stage{grid-template-columns:1fr;row-gap:6px}}
/* the six portfolio pieces as a checklist */
body.guide #portfolio ul{list-style:none;padding:0 !important;margin:22px 0 26px !important;border-top:1px solid var(--line)}
body.guide #portfolio ul li{position:relative;margin:0 !important;padding:15px 0 15px 42px;border-bottom:1px solid var(--line)}
body.guide #portfolio ul li::before{content:"";position:absolute;left:2px;top:17px;width:24px;height:24px;border-radius:8px;background:#DFF5F6;border:1px solid rgba(31,195,204,.45)}
body.guide #portfolio ul li::after{content:"";position:absolute;left:11px;top:21px;width:6px;height:11px;border:solid #0B6F76;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Method: the five stages as rows on the column; the hosting question after them ---------- */
body.guide .m-stages > .container > div[id]{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;max-width:var(--g-col);margin:0 auto !important;padding:44px 0;border-top:1px solid var(--line)}
body.guide .m-stages > .container > div[id]:first-child{border-top:0;padding-top:8px}
body.guide .m-stages .head{margin:0 !important;text-align:left !important;max-width:none}
body.guide .m-stages .head::before{content:attr(data-n);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:30%;background:#DFF5F6;border:1px solid rgba(31,195,204,.45);color:#0B6F76;font-family:var(--font-display);font-size:20px;margin-bottom:18px}
body.guide .m-stages .head h2{font-size:34px;line-height:1.1;text-align:left;margin:0}
body.guide .m-stages .head::after{content:attr(data-sub);display:block;margin-top:10px;font:400 14.5px/1.5 var(--font-body);color:var(--ink-soft)}
body.guide .m-stages > .container > div[id] > div[style]{max-width:none !important;margin:0 !important}
body.guide .m-host{max-width:var(--g-col);margin:8px auto 0;padding:44px 0 8px;border-top:1px solid var(--line)}
body.guide .m-host p{font-size:17px;line-height:1.75;color:var(--ink-soft)}
@media (max-width:820px){
  body.guide .m-stages > .container > div[id]{grid-template-columns:1fr;gap:16px;padding:34px 0}
  body.guide .m-stages .head{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  body.guide .m-stages .head::before{margin:0;grid-row:1 / span 2}
  body.guide .m-stages .head h2{font-size:28px}
  body.guide .m-stages .head::after{margin-top:2px}
  body.guide .m-host{padding-top:34px}
}
/* the stage diagram under "What are the five stages": one line on wide screens, a column on phones */
body.guide #five-stages div[role="img"] > span:not([style*="color:var(--teal)"]){font-size:15px}
body.guide #five-stages div[role="img"] > span[style*="color:var(--teal)"]{color:var(--ds-teal-text) !important;font-weight:700}
@media (max-width:600px){
  body.guide #five-stages div[role="img"]{flex-direction:column;flex-wrap:nowrap !important;gap:6px !important;margin-top:32px !important}
  body.guide #five-stages div[role="img"] > span:not([style*="color:var(--teal)"]){min-width:200px;text-align:center}
  body.guide #five-stages div[role="img"] > span[style*="color:var(--teal)"]{transform:rotate(90deg);line-height:1}
}

/* ---------- LEAD AI: the loop graphic (flat, stronger arrows) and its components (two text sizes: 16 and 13.5) ---------- */
body.guide .lv-frame{background:var(--navy) !important;box-shadow:0 30px 60px -40px rgba(5,15,22,.55) !important}
body.guide .lv-frame::before{box-shadow:none !important;border-color:rgba(143,232,237,.35) !important}
body.guide .lv-protect{background:#8FE8ED !important;box-shadow:none !important;font:600 13px/1 var(--font-body) !important;letter-spacing:.04em !important;text-transform:none !important}
body.guide .lv-step{box-shadow:none !important;background:rgba(255,255,255,.05) !important}
body.guide .lv-l{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#8FE8ED !important}
body.guide .lv-n{font-size:16px !important}
body.guide .lv-arrow{text-shadow:none !important;color:#8FE8ED !important;opacity:1 !important;font-size:22px !important;font-weight:700 !important}
body.guide .lead-vis figcaption{font-size:13.5px;color:var(--ink-faint)}
body.guide .lead-list li{font-size:17px !important;line-height:1.65 !important}
body.guide :is(.step,.lead-card) .lead-list li{font-size:16px !important}
body.guide .step .lead-p{font-size:16px}
/* the prompt flip: the system's segmented toggle, one surface, two sizes */
body.guide .pf{max-width:var(--g-col) !important}
body.guide .pf-tabs{display:inline-flex !important;gap:4px;background:#F4F1EC;border:1px solid var(--ds-line);border-radius:12px;padding:4px}
body.guide .pf-tabs button{font:600 14px/1 var(--font-body) !important;color:var(--navy) !important;background:transparent !important;border:0 !important;border-radius:9px !important;padding:11px 16px !important;box-shadow:none !important}
body.guide .pf-tabs button[aria-selected="true"]{background:var(--teal) !important;color:#0F2A35 !important;font-weight:700 !important;box-shadow:0 4px 12px -6px rgba(11,111,118,.8) !important}
body.guide .pf-panel{grid-template-columns:1fr !important;gap:16px}
body.guide .pf-col{background:#fff;border:1px solid var(--ds-line) !important;border-radius:var(--ds-radius) !important;box-shadow:var(--ds-shadow) !important;padding:24px 26px 22px}
body.guide .pf-h{font:600 13.5px/1.3 var(--font-body) !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--g-label) !important}
body.guide :is(.pf-intro,.pf-out li){font-size:16px !important;line-height:1.6 !important}
body.guide .pf-prompt{font-size:13.5px !important;line-height:1.6 !important}
body.guide .pf-note{font-size:16px !important;line-height:1.6 !important;color:var(--ink-soft) !important;text-align:left !important}
body.guide .pf-flag{font:600 13px/1.2 var(--font-body) !important;padding:3px 9px !important;background:#FBE6DA !important;color:#8A4F2E !important;border-radius:6px}
body.guide .pf-flag.ok{background:#DDF3F4 !important;color:#0A6870 !important}
body.guide .pf-cap{font-size:13.5px !important;color:var(--ink-faint) !important}

/* ---------- FAQ on the column ---------- */
body.guide #faq .faq{display:block;width:100%;max-width:var(--g-col);margin-left:auto;margin-right:auto}

/* ---------- Facts page (/llm/): a utility page, set as a clean document ---------- */
body.guide-facts section.sec{background:#fff !important}
body.guide-facts article.legal{max-width:var(--g-col);margin:0 auto}
body.guide-facts article.legal h2{font:500 28px/1.25 var(--font-display);color:var(--navy);margin:56px 0 16px;padding-top:30px;border-top:1px solid rgba(22,51,63,.14)}
body.guide-facts article.legal h2:first-of-type{margin-top:40px}
body.guide-facts article.legal > p:first-child{font:400 20px/1.6 var(--font-display);color:var(--ink)}
body.guide-facts article.legal ul{list-style:none;padding-left:0}
body.guide-facts article.legal ul li{position:relative;padding-left:22px}
body.guide-facts article.legal ul li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
body.guide-facts article.legal p > b:first-child > a{color:var(--navy) !important;text-decoration-color:rgba(10,104,112,.45) !important}
body.guide-facts .pg-hero h1{text-wrap:balance}
/* the jump list (assets/guides.js builds it from the h2s) */
body.guide-facts .g-jump{margin:28px 0 0;padding:20px 0 4px;border-top:1px solid rgba(22,51,63,.14)}
body.guide-facts .g-jump .g-jump-h{font:600 13px/1.3 var(--font-body);letter-spacing:.02em;color:var(--sienna);margin:0 0 10px}
body.guide-facts .g-jump .g-jump-l{columns:2;column-gap:40px}
body.guide-facts .g-jump .g-jump-l a{display:block;break-inside:avoid;padding:6px 0;font:500 15px/1.4 var(--font-body);color:var(--ds-teal-text);text-decoration:none}
body.guide-facts .g-jump .g-jump-l a:hover{color:var(--ds-teal-text);text-decoration:underline;text-underline-offset:4px}
@media (max-width:600px){body.guide-facts .g-jump .g-jump-l{columns:1}}

/* ---------- Wide screens with the rail: nothing on the reading column runs under it ---------- */
@media (min-width:1320px){
  body.guide{--g-wide:min(1040px, calc(100vw - 2 * (max(24px, 50vw - 636px) + 248px)))}
  body.guide section.sec:not(.sec-navy):not(.g-toc-sec):not(.ds-band) > .container:not(.ep-in){max-width:calc(var(--g-wide) + 64px)}
}

/* ---------- Phones ---------- */
@media (max-width:720px){
  body.guide .sec div[style*="max-width:760px"] p,
  body.guide .lead-prose > p,
  body.guide .m-host p,
  body.guide article.legal p{font-size:16.5px}
  body.guide .head[data-num]::after{margin-top:16px}
  body.guide :is(.xrow .frame-card,.lead-card){padding:22px 20px 24px !important}
  body.guide .pf-col{padding:20px 18px}
  body.guide-facts article.legal h2{font-size:24px}
}
/* ══════════ ROUND 4 (2026-10-24b, after independent round 1) ══════════ */
/* Hero step bars: small labels readable */
body.guide .pg-hero .trail small{font-size:13px !important;color:rgba(255,255,255,.72)}
/* Wide screens: the rail is the contents list, so the in-body list steps aside (phones and tablets keep it) */
@media (min-width:1320px){body.guide .g-toc-sec{display:none !important}}
/* Morgan / Laura: name and link stacked beside the monogram */
body.guide .g-quote .qa{display:grid !important;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center}
body.guide .g-quote .qa .g-mono{grid-row:1 / span 2}
body.guide .g-quote .qa .ds-more{margin:0 !important;justify-self:start;font-size:14.5px}
body.guide .g-quote .qa:not(:has(.ds-more)) .g-mono{grid-row:1}
/* Two links in a group read as two links */
body.guide .s-links{gap:10px 0 !important}
body.guide .s-links a + a{margin-left:20px;padding-left:20px;border-left:1px solid rgba(22,51,63,.18)}
/* The episode card keeps clear of the slider band */
body.guide .container.ep-in{margin-bottom:24px}
/* Step headings on these pages: a clear step up from body text */
body.guide .steps .step h3{font-size:21px !important;line-height:1.3}

/* One card elevation: the system shadow token for cards; answer boxes, rows and FAQ rows stay flat */
body.guide :is(.g-quote,.xrow .frame-card,.lead-card,.pf-col,.g-pair > div,.card-row.g-why .frame-card,.g-shot,.g-pf-strip figure){box-shadow:var(--ds-shadow) !important}

/* Kinds of training: a real screen under the label in the rows that have one */
body.guide .g-cards > .reveal:has(.g-row-img) > h3{grid-row:1 !important}
body.guide .g-cards > .reveal > .g-row-img{grid-column:1 !important;grid-row:2;align-self:start;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;margin-top:14px;border-radius:10px;border:1px solid var(--ds-line);box-shadow:0 12px 26px -20px rgba(22,51,63,.5)}
body.guide .g-cards > .reveal:has(.g-row-img) > p{grid-row:1 / span 2}
@media (max-width:720px){
  body.guide .g-cards > .reveal > .g-row-img{grid-row:auto;max-width:320px;margin:4px 0 14px}
  body.guide .g-cards > .reveal:has(.g-row-img) > p{grid-row:auto}
}
/* Step 6: the storyboard screen */
body.guide .g-shot{margin:22px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--ds-line);background:#fff}
body.guide .g-shot img{display:block;width:100%;height:auto}

/* Steps 7 to 11 continue the timeline in the same warm band, as on the hero's step bar */
body.guide #steps-to-becoming-id{padding-bottom:28px !important}
body.guide .g-method-sec{padding-top:8px !important}
body.guide .g-method-sec > .container{background:none !important;padding-top:0 !important}
body.guide .g-step-rest{list-style:none;margin:0 auto 40px !important;padding:0 !important;max-width:var(--g-col);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
body.guide .g-step-rest::before{content:"";position:absolute;left:26px;right:calc(20% - 26px);top:25px;height:2px;background:rgba(31,195,204,.30)}
body.guide .g-step-rest li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 !important;font:500 15px/1.3 var(--font-display);color:var(--navy)}
body.guide .g-step-rest b{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:30%;background:#DFF5F6;border:1px solid rgba(31,195,204,.45);color:#0B6F76;font:400 20px/1 var(--font-display)}
body.guide #applied-id-portfolio-method > .head::before{display:none !important}
@media (max-width:720px){
  body.guide .g-step-rest{margin-bottom:28px !important}
  body.guide .g-step-rest::before{left:18px;top:17px}
  body.guide .g-step-rest li{font-size:12.5px;gap:8px}
  body.guide .g-step-rest b{width:36px;height:36px;font-size:15px}
}

/* The five stages as one visual (Guide 12 and the Method's stage section) */
body.guide .g-stagefig{position:relative;margin:28px 0 30px !important;padding:30px 26px;background:var(--navy);border-radius:var(--ds-radius);max-width:var(--g-col);margin-left:auto !important;margin-right:auto !important;box-shadow:none}
body.guide .g-stagefig::before{content:"";position:absolute;inset:12px;border:1px solid rgba(143,232,237,.28);border-radius:14px;pointer-events:none}
body.guide .g-stagefig ol{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;align-items:stretch;justify-content:center;gap:26px;position:relative}
body.guide .g-stagefig li{position:relative;margin:0 !important;display:flex;flex-direction:column;justify-content:center;min-width:92px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff !important;font:500 17px/1.2 var(--font-display) !important}
body.guide .g-stagefig li b{display:block;margin-bottom:6px;font:600 12.5px/1 var(--font-body);letter-spacing:.06em;color:var(--sky)}
body.guide .g-stagefig li + li::before{content:"\2192";position:absolute;left:-13px;top:50%;transform:translate(-50%,-50%);color:var(--sky);font:700 16px/1 var(--font-body)}
body.guide .g-stagefig li.g-loop{flex-direction:row;align-items:center;gap:14px;border:1.5px solid var(--teal);background:rgba(31,195,204,.10)}
body.guide .g-stagefig li.g-loop span{display:flex;flex-direction:column}
body.guide .g-stagefig li.g-loop i{font-style:normal;color:var(--teal);font:400 22px/1 var(--font-body)}
body.guide #five-stages .g-stagefig + p{text-align:center !important;font-size:14.5px !important;margin-top:4px !important}
@media (max-width:720px){
  body.guide .g-stagefig{padding:26px 20px}
  body.guide .g-stagefig ol{flex-direction:column;align-items:stretch;gap:22px}
  body.guide .g-stagefig li{min-width:0}
  body.guide .g-stagefig li + li::before{content:"\2193";left:50%;top:-11px}
  body.guide .g-stagefig li.g-loop{justify-content:flex-start}
}

/* Portfolio: three AIDA grads' portfolio home pages, in a browser frame */
body.guide .g-pf-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 6px}
body.guide .g-pf-strip figure{margin:0;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--ds-line)}
body.guide .g-pf-strip figure::before{content:"";display:block;height:16px;background:#F1EEEA radial-gradient(circle at 10px 8px,#E2A68A 2.5px,transparent 3px),#F1EEEA;background-image:radial-gradient(circle at 10px 8px,#D9A48B 2.5px,transparent 3px),radial-gradient(circle at 20px 8px,#E3C48C 2.5px,transparent 3px),radial-gradient(circle at 30px 8px,#9FCFC6 2.5px,transparent 3px);border-bottom:1px solid var(--ds-line)}
body.guide .g-pf-strip img{display:block;width:100%;height:auto}
@media (max-width:720px){
  body.guide .g-pf-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-32px;margin-right:-32px;padding:4px 32px 16px;scrollbar-width:none}
  body.guide .g-pf-strip::-webkit-scrollbar{display:none}
  body.guide .g-pf-strip figure{flex:0 0 78%;scroll-snap-align:center}
}

/* Before and after: side by side on wide screens (Method and LEAD AI), a short accent tab instead of a full top rule */
body.guide :is(.xrow .frame-card,.lead-card)::before{left:30px !important;right:auto !important;width:44px !important;height:4px !important;border-radius:0 0 4px 4px}
body.guide :is(.xrow .frame-card,.lead-card){padding-top:30px !important}
body.guide :is(.xrow .frame-card,.lead-card) :is(p,li){font-size:17px !important;line-height:1.7 !important}
body.guide :is(.step,.lead-card) .lead-list li{font-size:16.5px !important}
@media (min-width:900px){
  body.guide :is(.xrow,.lead-ba){grid-template-columns:1fr 1fr !important;max-width:1040px !important;gap:22px !important;align-items:stretch}
}

/* LEAD AI 07: the method and LEAD AI side by side; the shared word highlighted */
body.guide .g-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:4px 0 30px}
body.guide .g-pair > div{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px 22px 20px}
body.guide .g-pair-h{font:600 13.5px/1.3 var(--font-body) !important;color:var(--sienna) !important;margin:0 0 12px !important}
body.guide .g-pair ol{list-style:none;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:6px}
body.guide .g-pair li{margin:0 !important;padding:8px 12px;border-radius:9px;background:#F6F3EF;font:500 15.5px/1.3 var(--font-display) !important;color:var(--navy) !important}
body.guide .g-pair li.hl{background:var(--ds-tint);border:1.5px solid var(--teal);color:var(--ds-teal-text) !important}
@media (max-width:600px){body.guide .g-pair{grid-template-columns:1fr}}
/* LEAD AI 08: the five levels, with LEAD AI running across all of them */
body.guide .g-levels{margin:4px 0 30px}
body.guide .g-levels ol{list-style:none;margin:0 !important;padding:0 !important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
body.guide .g-levels li{margin:0 !important;padding:14px 8px;border-radius:10px;background:#fff;border:1px solid var(--ds-line);text-align:center;font:500 15px/1.2 var(--font-display) !important;color:var(--navy) !important}
body.guide .g-levels li:nth-child(1){background:#F3FAFA}body.guide .g-levels li:nth-child(2){background:#E8F6F6}body.guide .g-levels li:nth-child(3){background:#DCF1F2}body.guide .g-levels li:nth-child(4){background:#CFEBED}body.guide .g-levels li:nth-child(5){background:#C2E5E8}
body.guide .g-levels-bar{position:relative;margin:10px 0 0 !important;padding:11px 16px;border-radius:10px;background:var(--navy);color:#fff !important;text-align:center;font:600 14px/1 var(--font-body) !important;letter-spacing:.04em}
body.guide .g-levels-bar::before,body.guide .g-levels-bar::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;transform:translateY(-50%)}
body.guide .g-levels-bar::before{left:10px;border-right-color:var(--sky)}
body.guide .g-levels-bar::after{right:10px;border-left-color:var(--sky)}
@media (max-width:600px){body.guide .g-levels li{font-size:13px;padding:12px 4px}}
/* LEAD AI 09: the skills next to LEAD AI as four flat tiles */
body.guide #outside-lead .lead-list{list-style:none !important;padding:0 !important;margin:6px 0 0 !important;display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.guide #outside-lead .lead-list li{margin:0 !important;padding:18px 20px !important;border-radius:14px;background:#fff;border:1px solid var(--ds-line);font-size:16px !important}
body.guide #outside-lead .lead-list li::before,body.guide #outside-lead .lead-list li::marker{content:none;display:none}
body.guide #outside-lead .lead-list li b{display:block;margin-bottom:4px;color:var(--navy)}
@media (max-width:600px){body.guide #outside-lead .lead-list{grid-template-columns:1fr}}
/* LEAD AI: the loop's arrows carry */
body.guide .lv-arrow{-webkit-text-stroke:1px #8FE8ED}
/* The prompt flip toggle fits on phones */
@media (max-width:600px){body.guide .pf-tabs{display:flex !important}body.guide .pf-tabs button{flex:1 1 0;white-space:nowrap;padding:11px 8px !important;font-size:13.5px !important}}
/* round 4b */
/* The page ground matches the sections, so the ending never shows a seam (calm pages are #FFFDF9; the system's ground is #FBF7F2) */
body.guide.calm{background:#FFFDF9 !important}
/* LEAD AI: the related list sits on the page, not on a peach band against the author box */
html body.guide section.sec.series-block.series-block{background:transparent !important;border-top:0 !important}
html body.guide section:has(> .container > .byline){padding-bottom:28px !important}
/* The five stages fill the column */
body.guide .g-stagefig li{flex:1 1 0}
body.guide .g-stagefig li.g-loop{flex:2.1 1 0;justify-content:center}
body.guide .g-lead{margin-bottom:30px !important}
/* A section's big line, in the column */
body.guide .g-big{display:block;margin:0 0 .6em;padding-left:18px;border-left:3px solid var(--teal);font:400 23px/1.45 var(--font-display);color:var(--navy)}
@media (max-width:720px){body.guide .g-big{font-size:20px}}
/* Learning paths: the practical program row on a tinted panel */
body.guide #learning-paths .g-cards > .reveal:last-child{background:var(--ds-tint);border:1px solid var(--ds-tint-line);border-radius:18px;padding:28px 26px 30px;margin-top:8px !important}
@media (max-width:720px){
  body.guide .g-levels li{font-size:12px !important;white-space:nowrap;padding:12px 2px}
  body.guide .g-stagefig li.g-loop{justify-content:flex-start}
  body.guide .s-links{flex-direction:column;align-items:flex-start}
  body.guide .s-links a + a{margin-left:0;padding-left:0;border-left:0}
}
/* END GUIDE PAGES */
/* Method page (Jill 10/27, S192): one left edge down the whole page. Every section uses the same container, and text
   blocks, short answers, lists and cards start at its left edge instead of centering at their own widths. */
@media (min-width:901px){
html body.pg-method section.sec:not(#_):not(#_a):not(#_b) > .container{max-width:1200px !important;padding-left:32px !important;padding-right:32px !important;margin-left:auto !important;margin-right:auto !important}
html body.pg-method section.sec:not(#_):not(#_a):not(#_b) > .container > :is(.head,.tldr,.faq-list,.steps,.reveal,.m-host,figure){margin-left:0 !important;margin-right:auto !important}
html body.pg-method section.sec:not(#_):not(#_a):not(#_b) > .container > :is(.head,.tldr,.faq-list,.steps,.m-host,.reveal){max-width:820px !important}
html body.pg-method section.sec:not(#_):not(#_a):not(#_b) > .container > .reveal > p{margin-left:0 !important}
html body.pg-method section.sec:not(#_):not(#_a):not(#_b) > .container > :is(figure,.xrow){max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important}
html body.pg-method section.m-stages:not(#_):not(#_a):not(#_b) > .container > div{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
html body.pg-method section.m-stages:not(#_):not(#_a):not(#_b) > .container > .m-host{max-width:none !important}
html body.pg-method section.m-stages:not(#_):not(#_a):not(#_b) > .container > .m-host > p{max-width:820px !important}
html body.pg-method #origin:not(#_) > .container.ep-in{max-width:1200px !important;padding-left:32px !important;padding-right:32px !important}
html body.pg-method #origin:not(#_) > .container.ep-in > .ep-card{margin-left:0 !important}
html body.pg-method section.sec-paper:not(#_):not(#_a) > .container > .byline{margin-left:0 !important;margin-right:auto !important}
}
@media (min-width:901px){html body.pg-method #origin:not(#_) > .container.ep-in > .ep-card{width:auto !important;max-width:520px !important}}
/* Section numbers off (Jill 10/27 late night, S194): the "01", "02" above section headings on the guide pages. guides.js still sets data-num; this hides it. */
html body.guide .head[data-num]::before{display:none !important;content:none !important}
/* One left edge on the Ultimate Guide and LEAD AI (Jill 10/27 evening, S201), the same treatment as the Method page (S192).
   Every section uses the same 1200px container, and headings, short answers, cards, steps and FAQs start at its left edge.
   Side-by-side sections keep their two columns. The dark closing panel stays centered (S133). */
@media (min-width:901px){
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container{max-width:1200px !important;padding-left:32px !important;padding-right:32px !important;margin-left:auto !important;margin-right:auto !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > :is(.head,.tldr,.faq-list,.steps,.g-cards,.reveal,.tool-cards,.byline,.lead-task,.series-in,div[style*="max-width:760px"]){margin-left:0 !important;margin-right:auto !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > :is(.head,.tldr,.faq-list,.steps,.g-cards,.lead-task,div[style*="max-width:760px"]){max-width:820px !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > .head{text-align:left !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > .head :is(h2,p){margin-left:0 !important;text-align:left !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > .head h2::after{margin-left:0 !important;margin-right:auto !important}
html body.pg-edge :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b) > .container > .tool-cards{justify-content:flex-start !important}
html body.pg-edge section.sls:not(#_) > .container > .sls-callouts{margin-left:0 !important;margin-right:0 !important;max-width:none !important}
/* The before/after slider at a smaller size (Jill 10/27 evening, S205): about 2/3 of the page width so it fits on one screen, on the left edge with the rest. */
html body.pg-edge section.sls:not(#_) > .container > .sls-stage{margin-left:0 !important;margin-right:0 !important;max-width:760px !important}
html body.pg-edge section.sls:not(#_) > .container > .sls-hint{max-width:760px !important;margin-left:0 !important}
html body.pg-edge section.sls:not(#_) > .container > .sls-hint{text-align:left !important}
}

/* S287 (Jill 11/1): a section is either two columns (full width) or centered. On the Ultimate Guide, Method and LEAD AI
   (S288: and every other pg-edge page),
   single-column blocks that sat on the left edge center: the quick answer and workshop card, the bio, the series block.
   Supersedes S201/S192's one left edge for these blocks and S278's left bio. Two-column sections are unchanged. */
@media (min-width:901px){
html body:is(.pg-centered,.pg-edge) :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b):not(#_c) > .container > :is(.tldr,.tool-cards,.byline,.series-in){margin-left:auto !important;margin-right:auto !important}
html body:is(.pg-centered,.pg-edge) :is(section.sec,section.sls):not(.sec-navy):not(#_):not(#_a):not(#_b):not(#_c) > .container > .tool-cards{justify-content:center !important}
}