/* arcsampling.com/resources — the stylesheet the Resources pages share.
   The :root tokens and the chrome (header islands, brand, nav, footer) are the
   front page's, copied verbatim so the section looks like Arc and not like a
   template about Arc. Everything under "reading" is new: a Resources page is
   a long article with tables, and the front page has none of that.
   One token differs: --dot is lighter here (#e9e1d0, the front page uses
   #dbceb3) because these pages set text straight on the background, where
   the front page never does, and the darker grid fights with it. */

/* the three faces, served from /fonts so every page draws in them at once */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600.woff2) format("woff2")}

:root{
  --bg:#f6f1e7;--dot:#e9e1d0;--paper:#fffdf8;--panel:#fbf7ef;--frame:#fcfaf4;
  --ink:#3b352b;--muted:#7a7060;--faint:#a99e8b;--line:#ece3d3;--line2:#ece2d1;
  --chi:#5c7b52;--exa:#8a8172;--exaBlock:#ac9b7b;--brand:#42592e;--teal:#157f7a;
  --sel:#6e8b5e;--cur:#f5c451;--amber:#c07e3c;
  --disp:"Bricolage Grotesque","Hanken Grotesk",sans-serif;
  --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --island-radius:16px;--island-shadow:0 6px 18px rgba(90,70,40,.1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.6 var(--body);background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:24px 24px;min-height:100vh;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* ---- chrome (from the front page) ---- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px 24px 0;gap:12px}
html{scrollbar-gutter:stable}  /* a short page and a long page keep the same width, so the header and trail do not shift when the scrollbar comes and goes */
.island{background:var(--panel);border:1px solid var(--line);border-radius:var(--island-radius);box-shadow:var(--island-shadow)}
.brand{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;text-decoration:none}
.brand .mark{width:22px;height:22px;color:var(--brand);flex:none}
.brand b{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--brand);letter-spacing:.2px;line-height:1}
.brand span{padding:2px 7px;border-radius:6px;background:#d99a4e;color:#3a2a12;
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em}
.nav{display:flex;gap:6px;height:40px;align-items:center;padding:0 6px}
.nav a{display:flex;align-items:center;height:30px;padding:0 13px;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--muted);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.here{background:var(--brand);color:#fff}
@media (max-width:520px){.top{padding:12px 10px 0;gap:8px}.brand{padding:0 9px;gap:7px}.brand span{display:none}.nav{gap:1px;padding:0 4px}.nav a{padding:0 6px;font-size:12px}}
/* on the narrowest phones the wordmark is the mark alone, so four nav items fit on one line */
@media (max-width:440px){.brand{padding:0 9px}.brand b{display:none}}
/* narrower still, the Home item goes: the mark is the home link, and the other four items name places you cannot otherwise reach */
@media (max-width:400px){.nav > a:first-child{display:none}.top{padding-left:8px;padding-right:8px}.nav a{padding:0 4px;font-size:11.5px}}

/* ---- section menus in the nav: hover or focus on Resources or LSA approaches opens the
   section's pages. The label itself still goes to the landing. No hover on a phone, so
   the menu does not open there; the trail on each article page covers it. ---- */
.nav .menu{position:relative;display:flex;align-items:center}
.nav .drop{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:300px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--island-shadow);z-index:20}
.nav .menu:hover .drop,.nav .menu:focus-within .drop{display:block}
.nav .menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}  /* keeps the menu open while the pointer crosses the gap */
.nav .drop a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px 0 22px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav .drop a:hover{background:var(--paper);color:var(--brand)}
/* the first row is the section's landing: flush left, bold, a rule beneath; the pages
   sit indented under it behind their chips. The A–Z at the foot is its sibling. */
.nav .drop a.head{padding-left:10px;font-weight:700;border-radius:8px 8px 0 0;border-bottom:1px solid var(--line);margin-bottom:4px;height:36px}
.nav .drop a.foot{padding-left:10px;font-weight:700;border-radius:0 0 8px 8px;border-top:1px solid var(--line);margin-top:4px;height:36px}
/* a rule above the overview, so the two landings read as one group and the guides as another */
.nav .drop a.sep{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;height:38px;border-radius:0}
.nav .drop .n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:10px;font-weight:600;color:var(--muted);flex:none}
.nav .drop .sq{width:10px;height:10px;margin:0 4px;border-radius:3px;background:var(--stage);flex:none}
.nav .drop .blank{display:none}
@media (max-width:760px){.nav .drop{display:none !important}}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.narrow{max-width:900px;margin-left:auto;margin-right:auto}

footer.wrap{margin:96px auto 48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer a{text-decoration:none}
.fbrand{display:flex;align-items:center;gap:10px}
.fbrand .mark{width:26px;height:26px;color:var(--faint)}
footer a:hover{color:var(--ink)}

/* ---- shared type ---- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.eyebrow a{text-decoration:none;color:inherit}
.eyebrow a:hover{color:var(--ink)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.4vw,42px);line-height:1.1;letter-spacing:-.01em;margin:0 0 18px;max-width:22ch;color:var(--ink)}
.fullname{margin:-10px 0 14px;font-size:15.5px;color:var(--muted)}
.lede{font-size:19px;line-height:1.55;max-width:66ch;margin:0;color:var(--ink)}
h2{font-family:var(--disp);font-weight:700;font-size:25px;line-height:1.2;margin:0 0 14px;letter-spacing:-.005em}

/* ---- the trail: where this page sits in the process ---- */
/* the trail is the top edge of the article card: a tab strip. The current tab is filled
   with the page's colour, the same colour that runs down the card's rail below it. */
.trail{position:relative;z-index:1;margin-top:32px;padding:8px 8px 0;display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end;
  background:#e9dfcc;border-bottom:0;border-radius:var(--island-radius) var(--island-radius) 0 0;box-shadow:none}
.trail a,.trail span.step{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:10px 10px 0 0;font-size:13.5px;font-weight:500;text-decoration:none;color:var(--muted);white-space:nowrap}
.trail a:hover{color:var(--ink)}
/* the leading item is the section's landing, the parent of the tabs: a label in the site's small caps, not a sixth tab */
.trail a.home,.trail span.step.home{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:12px}
.trail a.home:hover{color:var(--ink)}
.trail span.here.home{color:#fff}
.trail a:hover{background:rgba(255,253,248,.6)}
.trail .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--paper);border:1px solid #d9cdb4;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--muted)}
.trail span.here{--stage:var(--brand);background:var(--stage);color:#fff;font-weight:700}
.trail span.here .n{background:rgba(255,255,255,.92);border-color:transparent;color:var(--stage)}
.trail .sep{flex:1;min-width:6px}
@media (max-width:760px){.trail{gap:2px}.trail a,.trail span.step{font-size:12.5px;padding:0 10px 0 7px;height:34px}}

/* ---- the article ---- */
.article{margin-top:24px;padding:44px 56px 48px}
.trail + .article{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
@media (max-width:760px){.article{padding:26px 22px 30px}}
.article header{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--line)}
/* on this page: a labelled list, one heading per line, two columns on a desktop.
   The square before each line is the page's colour (the stage's or the approach's). */
.onpage-label{margin:26px 0 8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.onpage{margin:0;padding:0;list-style:none;columns:2;column-gap:28px;font-size:14.5px;line-height:1.4}
@media (max-width:640px){.onpage{columns:1}}
.onpage li{margin:0 0 5px;position:relative;padding-left:16px;break-inside:avoid}
.onpage li::before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border-radius:2px;background:var(--stage,var(--exa));opacity:.8}
.onpage a{text-decoration:none;color:var(--ink)}
.onpage a:hover{color:var(--brand);text-decoration:underline;text-decoration-color:#cbbfa6;text-underline-offset:3px}

/* reading */
.reading{max-width:72ch}
.reading h2{margin:40px 0 14px;scroll-margin-top:90px}
.reading h2:first-child{margin-top:0}
.reading h3{font-family:var(--disp);font-weight:700;font-size:18.5px;line-height:1.3;margin:28px 0 10px;scroll-margin-top:90px}
.reading p{margin:0 0 18px}
.reading p:last-child{margin-bottom:0}
.reading a,.msec p a,.msec td a{color:var(--ink);text-decoration:underline;text-decoration-color:#cbbfa6;text-decoration-thickness:1px;text-underline-offset:3px}
.reading a:hover,.msec p a:hover,.msec td a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.reading ul,.reading ol{margin:0 0 18px;padding-left:22px}
.reading li{margin:0 0 6px}
.reading li:last-child{margin-bottom:0}
.reading strong,.msec strong{font-weight:700}
.reading code{font-family:var(--mono);font-size:.92em;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.reading pre{margin:0 0 18px;padding:14px 16px;background:var(--paper);border:1px solid var(--line2);border-radius:12px;overflow-x:auto;font-family:var(--mono);font-size:14.5px;line-height:1.5}
.reading pre code{background:none;border:0;padding:0;font-size:inherit}
.reading blockquote{margin:0 0 18px;padding:12px 18px;border-left:3px solid var(--chi);background:var(--paper);border-radius:0 12px 12px 0;color:var(--ink)}
.reading blockquote p{margin:0 0 8px}
.reading blockquote p:last-child{margin:0}

/* tables: set like a table in a book. No box, no stripes, no header band: the table
   sits on the island's own colour and rows are separated by hairlines alone, with a
   firmer rule under the header in the page's colour (the rail's colour, the squares'
   colour). The label column is sized to its content so a value sits next to its label. */
.reading .tbl,.msec .tbl{margin:4px 0 24px;overflow-x:auto}
.reading table,.msec table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.5}
.reading th,.reading td,.msec th,.msec td{text-align:left;vertical-align:top;padding:12px 18px 12px 0;border-top:1px solid var(--line)}
.reading thead th,.msec thead th{border-top:0;border-bottom:2px solid var(--stage,var(--exa));font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 18px 8px 0}
.reading td:first-child,.msec td:first-child{font-weight:700;width:30%}
.cols2 td:first-child{width:34%}
.keyed td:first-child{width:1%;white-space:nowrap}
.keyed.cols3 td:nth-child(n+2),.keyed.cols3 th:nth-child(n+2){width:50%}
.reading td:first-child strong,.msec td:first-child strong{font-weight:700}
.reading td:last-child,.reading th:last-child,.msec td:last-child,.msec th:last-child{padding-right:0}
.reading tbody tr:last-child td,.msec tbody tr:last-child td{border-bottom:1px solid var(--line)}
@media (max-width:760px){.reading table,.msec table{font-size:14.5px}.reading th,.reading td,.msec th,.msec td{padding:10px 12px 10px 0}}

/* sources: an APA list at the bottom, the way an SLP expects to see one */
.sources{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.sources h2{font-size:20px;margin:0 0 14px}
.sources ol{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.sources li{margin:0 0 9px;padding-left:2em;text-indent:-2em}
.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:#cbbfa6;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.sources a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.sources em{font-style:italic}

/* ---- the Arc line: one sentence, the same on every page ---- */
.arcline{margin-top:24px;padding:22px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.arcline p{margin:0;max-width:56ch;font-size:16px;color:var(--ink)}
.arcline p b{color:var(--brand);font-weight:600}
.arcline a.go{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:10px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.arcline a.go:hover{background:#365023}

/* ---- previous / next ---- */
.pn{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.pn{grid-template-columns:1fr}}
.pn a{display:block;padding:14px 18px;text-decoration:none;color:var(--ink)}
.pn a:hover{background:var(--paper)}
.pn a.next{text-align:right}
.pn small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.pn b{font-family:var(--disp);font-weight:700;font-size:16px}
.pn b .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--stage);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:600;vertical-align:2px;margin-right:8px}


/* ---- the landing page and the overview ---- */
.hero{margin-top:32px;padding:40px 56px}
@media (max-width:760px){.hero{padding:26px 22px}}
.hero h1{max-width:18ch}
.section{margin-top:24px;padding:30px 56px 34px}
@media (max-width:760px){.section{padding:22px 22px 26px}}
.section h2{margin-bottom:8px}
.section > p{margin:0 0 20px;max-width:72ch;color:var(--muted)}
.section > p:last-child{margin-bottom:0}
.section p a{color:var(--ink);text-decoration:underline;text-decoration-color:#cbbfa6;text-underline-offset:3px}
.section p a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.start{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.start p{margin:0;max-width:68ch;color:var(--ink)}
.start a.go{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.start a.go:hover{border-color:#cbbfa6;background:#fff}

/* stage list: five rows, each a door to one guide */
.stages{list-style:none;margin:0;padding:0;counter-reset:s}
.stages li{border-top:1px solid var(--line)}
.stages li:first-child{border-top:0}
.stages a{display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:start;padding:18px 8px;text-decoration:none;color:var(--ink);border-radius:10px;margin:0 -8px}
.stages a:hover{background:var(--paper)}
.stages .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand);margin-top:1px}
.stages b{display:block;font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:3px}
.stages span.d{display:block;font-size:15.5px;color:var(--muted);max-width:80ch}
.stages .arrow{color:var(--faint);font-size:18px;margin-top:2px}
@media (max-width:640px){.stages a{grid-template-columns:34px 1fr}.stages .arrow{display:none}}

/* the overview's stage sections */
.stage-section{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.stage-section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.stage-section .eyebrow{margin-bottom:8px}
.reading .stage-section h2{margin:0 0 10px}
.stage-section p{margin:0 0 12px;max-width:64ch}
.stage-section a.more{display:inline-block;font-size:15px;font-weight:600;color:var(--brand);text-decoration:none}
.stage-section a.more:hover{text-decoration:underline}

/* the A–Z index */
.az{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
@media (max-width:640px){.az{columns:1}}
.az li{break-inside:avoid;padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.4}
.az li:first-child{border-top:0}
.az a{text-decoration:none;color:var(--ink)}
.az a:hover{color:var(--brand)}
.az small{display:block;font-size:13px;color:var(--muted)}
.az .letter{break-after:avoid;padding:22px 0 4px;border:0;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--faint)}
.az .letter:first-child{padding-top:0}

/* ---- the Resources landing ---- */
.hero-r{margin-top:40px;padding:0 8px}
.hero-r h1{font-size:clamp(34px,4.8vw,50px);max-width:20ch;margin-bottom:16px}
.hero-r .lede{max-width:64ch}

/* five stages across: each one a transcript card with a coloured rail */
.stages-row{margin-top:32px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1000px){.stages-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.stages-row{grid-template-columns:1fr}}
.stage{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px 30px;
  background:var(--paper);border:1px solid var(--line2);border-radius:14px;text-decoration:none;color:var(--ink);
  box-shadow:var(--island-shadow);transition:transform .15s ease,box-shadow .15s ease}
.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--stage);opacity:.55}
.stage:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,70,40,.14)}
.stage:hover::before{opacity:1}
.stage .glyph{width:52px;height:36px;display:block;margin:2px 0 6px}
.stage .chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;
  background:var(--stage);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600}
.stage b{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.2}
.stage .d{font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.stage .go{font-size:13px;font-weight:600;color:var(--stage);margin-top:6px}
.overview-line{margin:18px 8px 0;font-size:15px;color:var(--muted)}
.overview-line a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid #cbbfa6}
.overview-line a:hover{color:var(--brand);border-color:var(--brand)}

/* topics: the A–Z, on the first screen */
.topics{margin-top:40px;padding:26px 32px 28px}
.topics-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.topics-head h2{margin:0;font-size:22px}
.topics-head .all{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.topics-head .all:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:10px;background:var(--paper);border:1px solid var(--line);
  font-size:14px;color:var(--ink);text-decoration:none}
.chips a:hover{border-color:#cbbfa6;background:#fff;color:var(--brand)}

/* excerpts: real pieces of the guides, not descriptions of them */
.excerpts{margin-top:44px}
.excerpts > .eyebrow{margin:0 8px 14px}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.ex-grid{grid-template-columns:1fr}}
.ex{display:flex;flex-direction:column;gap:12px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.ex:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,70,40,.14)}
.ex-tag{align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stage)}
.ex p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.ex .go{font-size:13px;font-weight:600;color:var(--stage)}
.ex-code{margin:0;padding:12px 14px;background:var(--paper);border:1px solid var(--line2);border-radius:10px;font-family:var(--mono);font-size:14px;white-space:pre-wrap}
.ex-table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.45;background:var(--paper);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.ex-table td{padding:8px 10px;vertical-align:top;border-top:1px solid var(--line)}
.ex-table tr:first-child td{border-top:0}
.ex-table td:first-child{width:44%;color:var(--ink);font-weight:600}
.ex-table td:last-child{color:var(--muted)}
.ex-lines{display:flex;flex-direction:column;gap:6px}
.ex-lines .ln{position:relative;padding:8px 12px 8px 22px;border-radius:10px;background:var(--paper);border:1px solid var(--line2);font-size:14.5px;display:flex;align-items:center;gap:10px}
.ex-lines .ln::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:#CBDCB4}
.ex-lines .ln.cli::before{background:#DFD2B4}
.ex-lines .sp{font-size:9.5px;font-weight:700;letter-spacing:.5px;border-radius:6px;padding:2px 8px;background:#CBDCB4;color:#3A5230}
.ex-lines .cli .sp{background:#DFD2B4;color:#6E6350}

/* the guide's stage colour on its own page */
.article.railed{position:relative;overflow:hidden}
.article.railed::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--stage);opacity:.75}
.article.railed{padding-left:calc(56px + 14px)}
@media (max-width:760px){.article.railed{padding-left:calc(22px + 14px)}}

.stage-section .eyebrow{color:var(--stage);display:flex;align-items:center;gap:8px}
.stage-section .eyebrow .dot{width:10px;height:10px;border-radius:3px;background:var(--stage)}
.stage-section a.more{color:var(--stage)}

/* ---- /try ---- */
.try{margin-top:40px;padding:40px 48px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
@media (max-width:760px){.try{grid-template-columns:1fr;padding:26px 22px}}
.try h1{max-width:14ch}
.try .lede{max-width:44ch}
.try-demo{margin:18px 0 0;font-size:15px;color:var(--muted);max-width:44ch}
.try-demo a{color:var(--ink);text-decoration:underline;text-decoration-color:#cbbfa6;text-underline-offset:3px}
.try-demo a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.try form{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
/* the line under the button: what the address is for, with the privacy page one click away */
.try .fine{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.try .fine a{color:var(--ink);text-decoration:underline;text-decoration-color:#cbbfa6;text-underline-offset:2px}
.try label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.try input{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px;width:100%}
.try input:focus{outline:2px solid #C9D6B8;outline-offset:0;border-color:#cbbfa6}
.try .btn{align-self:flex-start;background:var(--brand);color:#fff;border:0;border-radius:11px;padding:11px 20px;font-weight:600;font-size:15px}
.try .btn:hover{background:#365023}
.try .thanks{display:none;padding:14px 16px;border-radius:12px;background:#EEF3E6;color:#3A5230;font-size:15px}
.try .fields{display:contents}
.try form.done .thanks{display:block}
.try form.done .fields{display:none}

/* stacked tables: on a phone every table becomes one card per row. The first cell is
   the card's title; every other cell is labelled with its column heading, so nothing is
   lost and nothing scrolls sideways. Cards are separated by the same hairlines. */
@media (max-width:640px){
  .tbl.stack table,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack thead{display:none}
  .tbl.stack{border-top:2px solid var(--stage,var(--exa))}
  .tbl.stack tr{padding:14px 0 6px;border-top:1px solid var(--line)}
  .tbl.stack tr:first-child{border-top:0}
  .tbl.stack tbody tr:last-child{border-bottom:1px solid var(--line)}
  .tbl.stack td,.tbl.stack td:first-child,.tbl.stack td:last-child{border:0;padding:0 0 10px;font-size:15px;white-space:normal;width:auto}
  .tbl.stack td:first-child{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.25;padding-bottom:10px}
  .tbl.stack td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
}

/* ---- LSA approaches ---- */
/* the trail marks each method with a square of its colour instead of a stage number */
.approaches-trail .n{width:10px;height:10px;border:0;border-radius:3px;background:var(--stage);opacity:.8}
.approaches-trail a:hover .n{opacity:1}
.approaches-trail .here .n{background:#fff;opacity:1}

/* the landing: hero, the four doors, then the comparison in islands */
.approaches-hero .intro{max-width:66ch;margin-top:18px}
.approaches-hero .intro p{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--ink)}
.approaches-hero .intro p:last-child{margin-bottom:0}
.approach-row{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.approach-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.approach-row{grid-template-columns:1fr}}
.stage.method{padding:18px 18px 16px 30px}
.stage.method b{font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:var(--ink)}
.stage.method .d{font-size:14px;color:var(--muted)}
.msec{margin-top:24px}
.msec:first-of-type{margin-top:32px}
.msec > p{color:var(--ink);max-width:72ch}
.msec .tbl{margin:4px 0 20px}
.msec .tbl:last-child{margin-bottom:0}
.msec{--stage:var(--brand)}
.msec h2{margin-bottom:14px}
.msec table{font-size:15px}
.note{margin:0;padding:16px 20px;background:var(--bg);border-left:4px solid var(--brand);border-radius:0 12px 12px 0}
.note p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.msec .note p{max-width:none}
.explore .approach-row{margin-top:18px}
/* a method's name in the first column of a landing table is the door to its page */
.msec a.mlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.msec a.mlink .n{width:10px;height:10px;border-radius:3px;background:var(--stage);flex:none}
.msec a.mlink strong{border-bottom:1px solid #cbbfa6}
.msec a.mlink:hover strong{color:var(--brand);border-color:var(--brand)}
@media (max-width:640px){.tbl.stack td:first-child a.mlink{font-family:var(--disp);font-size:17px;gap:10px}.tbl.stack td:first-child a.mlink strong{border:0;text-decoration:underline;text-decoration-color:#cbbfa6;text-underline-offset:3px}}

/* a lone "back to the overview" island under a method page */
/* under an approach page: previous, the overview, next. The four run in a ring in the
   order the tables list them, so every page has all three. Previous and next carry
   the destination's colour as a rail, the way its own article does. */
.pn.across{grid-template-columns:1fr 1.2fr 1fr}
.pn.across.two{grid-template-columns:1fr 1fr}
.pn.across a.up{text-align:center}
.pn.across a.prev,.pn.across a.next{position:relative;overflow:hidden}
.pn.across a.prev::before,.pn.across a.next::before{content:"";position:absolute;top:0;bottom:0;width:10px;background:var(--stage);opacity:.55}
.pn.across a.prev::before{left:0}
.pn.across a.next::before{right:0}
.pn.across a.prev{padding-left:26px}
.pn.across a.next{padding-right:26px}
.pn.across a.prev:hover::before,.pn.across a.next:hover::before{opacity:1}
@media (max-width:760px){.pn.across,.pn.across.two{grid-template-columns:1fr}.pn.across a.next,.pn.across a.up{text-align:left}.pn.across a.next{padding-right:18px;padding-left:26px}.pn.across a.next::before{right:auto;left:0}}

/* ---- What's new (added 2026-09-25): the overview's entry list, the entry page's dates line and figures ---- */
.article .dates{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted)}
.reading figure{margin:6px 0 26px}
.reading figure img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--line2);border-radius:12px;background:var(--paper)}  /* never upscaled: a small capture stays its own size */
.reading figcaption{margin:10px 2px 0;font-size:14px;line-height:1.5;color:var(--muted)}
.stage-note{margin-top:32px;padding:24px 32px 26px}
.stage-note .eyebrow{margin-bottom:10px}
.stage-note p{margin:0 0 12px;max-width:66ch;font-size:16.5px;line-height:1.55}
.stage-note p:last-child{margin:0}
.stage-note a.go{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none}
.stage-note a.go:hover{text-decoration:underline}
.wn-list{margin-top:44px}
.wn-list > .eyebrow{margin:0 8px 6px}
.wn-note{margin:0 8px 16px;font-size:14px;color:var(--muted);max-width:70ch}
.wn-grid{display:grid;grid-template-columns:1fr;gap:14px}
.wn{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:20px 22px 18px 34px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.wn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--stage);opacity:.55}
.wn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,70,40,.14)}
.wn:hover::before{opacity:1}
.wn-date{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wn b{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25}
.wn p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.wn .go{font-size:13px;font-weight:600;color:var(--stage);margin-top:4px}
.trail span.step.here{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pdoors{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.pdoors{grid-template-columns:1fr}}
.pdoor{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:22px 24px 20px 36px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.pdoor::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--stage);opacity:.55}
.pdoor:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,70,40,.14)}
.pdoor:hover::before{opacity:1}
.pdoor b{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.25}
.pdoor p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.pdoor .go{font-size:13px;font-weight:600;color:var(--stage)}
.reading .dates{margin-top:28px}
.wn-grid.in-article{margin-top:18px}
.wn-note{margin:0 0 4px;font-size:15px;color:var(--muted)}
.cta{font-weight:600}
.cta a{color:var(--brand);text-decoration:none}
.cta a:hover{text-decoration:underline}
.reading .cta a{color:var(--brand);text-decoration:none}

/* ---- the Resources landing, September 28: three sections, each with a heading line ---- */
.sect{margin-top:40px}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 8px 14px}
.sect-head h2{margin:0;font-size:22px}
.sect-head .all,.sect-foot a{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.sect-head .all:hover,.sect-foot a:hover{text-decoration:underline}
.sect-line{margin:-6px 8px 14px;font-size:15px;color:var(--muted)}
.sect-foot{margin:14px 8px 0}
/* one tool, one card: the excerpt card's shape, not stretched across a grid */
.tool{display:flex;flex-direction:column;gap:10px;max-width:520px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.tool:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,70,40,.14)}
.tool .ex-tag{color:var(--teal)}
.tool b{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25}
.tool p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tool .go{font-size:13px;font-weight:600;color:var(--teal)}
.soon{margin:18px 8px 0;font-size:14.5px;color:var(--faint)}

/* ---- site footer: brand line, four short columns of links, legal row ---- */
footer.wrap.sitefoot{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px 32px;margin:96px auto 40px;padding-top:32px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.sitefoot .fb{display:flex;flex-direction:column;gap:10px;max-width:30ch}
.sitefoot .fb a{display:flex;align-items:center;gap:9px;color:var(--brand);font-family:var(--disp);font-weight:700;font-size:17px;text-decoration:none}
.sitefoot .fb .mark{width:24px;height:24px;color:var(--brand)}
.sitefoot .fb p{margin:0;line-height:1.5}
.sitefoot h3{margin:4px 0 12px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sitefoot li a{color:var(--muted);text-decoration:none}
.sitefoot li a:hover{color:var(--ink)}
.sitefoot a.soc{display:inline-flex;align-items:center;gap:9px}
.sitefoot a.soc .chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--muted);flex:none}
.sitefoot a.soc:hover .chip{background:var(--ink)}
.sitefoot a.soc .chip img{display:block;height:12px;width:auto}

.sitefoot .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.sitefoot .legal a{color:var(--muted);text-decoration:none}
.sitefoot .legal a:hover{color:var(--ink)}
@media (max-width:820px){footer.wrap.sitefoot{grid-template-columns:1fr 1fr}.sitefoot .fb{grid-column:1/-1}}

/* ---- alpha card: the dark plum bar that ends each page ----
   Always the width of the page's content: the full column, or .narrow on article pages.
   Fixed heights (208 full, 240 narrow) keep every card's octopus in the same place: the
   square campaign image is anchored to the card's bottom edge, its lower arms cut off
   there and its head rising above the top edge. The PNG is 1254 square with the drawing
   at x 180-1104, y 218-1070; the img offsets below are that box at each scale.
   Copy is in the campaign brief (~/code/lsa/docs/go-to-market/campaigns/alpha-interest/brief.md). */
.promo{position:relative;height:208px;margin-top:96px;padding:0 48px;display:flex;align-items:center;
  background:#33242f;border-radius:var(--island-radius);box-shadow:var(--island-shadow)}
.promo.narrow{height:240px}
.promo-text{max-width:560px}
.promo.narrow .promo-text{max-width:480px}
.promo h2{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1.12;letter-spacing:-.01em;margin:0 0 8px;color:#f6f1e7;text-wrap:balance}
.promo p{margin:0 0 16px;font-size:16px;line-height:1.5;color:#dccfd2;max-width:60ch}
.promo.narrow p{font-size:15.5px}
.promo .btn{text-decoration:none;display:inline-flex;align-items:center;background:#f6f1e7;color:#33242f;border:0;border-radius:11px;padding:11px 20px;font-weight:600;font-size:15px}
.promo .btn:hover{background:#fffdf8}
.promo .art{position:absolute;right:56px;bottom:0;width:340px;height:290px;overflow:hidden;pointer-events:none}
.promo .art img{position:absolute;width:441px;height:auto;left:-56px;bottom:-93px;max-width:none}
.promo.narrow .art{right:20px;width:340px;height:300px}
.promo.narrow .art img{width:450px;left:-61px;bottom:-86px}
@media (max-width:820px){
  .promo,.promo.narrow{height:auto;flex-direction:column;align-items:flex-start;padding:28px 24px 0;margin-top:48px}
  .promo .art,.promo.narrow .art{position:relative;right:auto;align-self:center;width:280px;height:170px;margin-top:8px}
  .promo .art img,.promo.narrow .art img{width:363px;left:-46px;top:-63px;bottom:auto}
}