/* ===================================================================
   Their Next Chapter, marketing site shared styles.
   Design tokens copied verbatim from prototype/index.html (the other
   thread's warm v2 theme) so the site and the app read as one product.
   Do not fork the palette here; if the prototype's tokens change, mirror
   the change into this block.
   =================================================================== */
/* Web fonts, served from this site (both OFL; licenses in /site/fonts). Each family is one
   variable file per character set, so every weight comes from the same file. */
@font-face{font-family:'Literata'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/literata-v40-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Literata'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/literata-v40-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/hanken-grotesk-v12-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/hanken-grotesk-v12-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Size-matched stand-ins shown until the web fonts arrive, so the swap doesn't shift the page.
   Widths measured against real site text (2026-10-02; the serif's re-measured for Literata, 2026-10-22). Where Arial or Georgia isn't installed,
   the next font in the stack takes over, as before. */
@font-face{font-family:'Hanken Grotesk Fallback'; src:local('Arial'), local('ArialMT'); font-weight:400; size-adjust:100.85%;
  ascent-override:99.16%; descent-override:29.75%; line-gap-override:0%}
@font-face{font-family:'Hanken Grotesk Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'); font-weight:600 700; size-adjust:94.41%;
  ascent-override:105.92%; descent-override:31.78%; line-gap-override:0%}
@font-face{font-family:'Literata Fallback'; src:local('Georgia'); font-weight:400; size-adjust:107.29%;
  ascent-override:109.70%; descent-override:28.71%; line-gap-override:0%}
@font-face{font-family:'Literata Fallback'; src:local('Georgia Bold'), local('Georgia-Bold'); font-weight:600 700; size-adjust:96.07%;
  ascent-override:122.52%; descent-override:32.06%; line-gap-override:0%}
:root{
  --bg:#F4EDE0; --surface:#FCF9F2; --surface-2:#EFE7D6; --raise:#FFFFFF;
  --ink:#2B2A26; --ink-soft:#5E5A50; --ink-faint:#6A6455;
  --line:#E4DBCA; --line-strong:#D2C6B0;
  --accent:#1F5B4E; --accent-ink:#164036; --accent-wash:#E7EEE8;
  --clay:#C06A43; --clay-ink:#9E4E2C; --clay-wash:#F4E5D8;
  --warn:#7A5617; --warn-wash:#F3E7CE;
  --danger:#98413E;
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --maxw:920px;
  --shadow-sm:0 1px 2px rgba(43,42,38,.05);
  --shadow:0 1px 3px rgba(43,42,38,.05), 0 14px 34px rgba(43,42,38,.07);
  --font:"Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
  --btn-on-accent:#FCF9F2;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#221F1A; --surface:#2A2621; --surface-2:#332E27; --raise:#2E2A24;
  --ink:#EFE7D8; --ink-soft:#BCB3A4; --ink-faint:#A29A8D;
  --line:#3A342C; --line-strong:#4A4238;
  --accent:#6FB09B; --accent-ink:#BFE0D4; --accent-wash:#22322C;
  --clay:#D98A63; --clay-ink:#E5AB8E; --clay-wash:#3A2A20;
  --warn:#D8AE63; --warn-wash:#332A18; --danger:#DB8B86;
  --shadow-sm:0 1px 2px rgba(0,0,0,.32);
  --shadow:0 1px 3px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.3);
  --btn-on-accent:#221F1A;   /* dark text on the light pine accent: 6.5:1 */
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#221F1A; --surface:#2A2621; --surface-2:#332E27; --raise:#2E2A24;
  --ink:#EFE7D8; --ink-soft:#BCB3A4; --ink-faint:#A29A8D;
  --line:#3A342C; --line-strong:#4A4238;
  --accent:#6FB09B; --accent-ink:#BFE0D4; --accent-wash:#22322C;
  --clay:#D98A63; --clay-ink:#E5AB8E; --clay-wash:#3A2A20;
  --warn:#D8AE63; --warn-wash:#332A18; --danger:#DB8B86;
  --shadow-sm:0 1px 2px rgba(0,0,0,.32);
  --shadow:0 1px 3px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.3);
  --btn-on-accent:#221F1A;   /* dark text on the light pine accent: 6.5:1 */
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth; scroll-padding-top:120px} /* in-page links land below the sticky header (about 105px tall on phones) */
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}
@media (max-width:520px){ .wrap{padding-inline:16px} }
a{color:var(--accent-ink)}
:where(a):focus-visible, :where(button):focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* -------------------- Header / nav -------------------- */
header.top{position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:16px 20px; padding-block:12px; flex-wrap:wrap; max-width:1000px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.top .btn-primary{margin-left:auto}
.brand .mark{width:30px;height:30px;border-radius:7px;background:var(--accent);
  display:grid;place-items:center;color:var(--bg)}
.brand .mark svg{width:17px;height:17px}
.brand b{font-weight:600; font-size:17px; letter-spacing:-.01em}
.mainnav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.mainnav a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:13.5px;
  padding:7px 11px; border-radius:var(--radius-sm); transition:background .14s,color .14s}
.mainnav a:hover{background:var(--surface-2); color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--accent-ink); background:var(--accent-wash)}
/* Mobile header: keep it to two rows (brand + Start free, then a single
   scrollable nav row) so the sticky header doesn't eat the screen once the
   nav grew to five items. */
@media (max-width:640px){
  .top .wrap{gap:8px 10px}
  .top .btn-primary{order:1; margin-left:auto}
  .mainnav{order:2; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; gap:2px;
    scrollbar-width:none; -ms-overflow-style:none}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{padding:6px 10px; font-size:13px; white-space:nowrap}
  .mainnav{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); padding-right:28px}
  .mainnav.at-end{-webkit-mask-image:none; mask-image:none}
}
/* The menu is four links: How it works, For parents, For teens, Guides. A 360px phone gives them a 328px row (the
   page padding is 16px a side) and they need about 354px with the padding above, so the row scrolled and
   "Guides" sat under the right-edge fade. At 420px and under, tighter link padding and a smaller end pad bring
   them to about 318px: all four fit a 360px row, and anything wider, with a few pixels to spare. Phones narrower
   than 360px still scroll the row, with the fade, as before. */
@media (max-width:420px){
  .mainnav{padding-right:8px}
  .mainnav a{padding:6px 8px}
}

/* -------------------- Buttons -------------------- */
.btn{display:inline-block; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:11px 20px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;
  text-decoration:none; transition:background .14s, border-color .14s}
.btn-primary{background:var(--accent); color:var(--btn-on-accent)}
.btn-primary:hover{background:var(--accent-ink)}
.btn-sec{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-sec:hover{border-color:var(--ink-faint)}
.btn-sm{padding:8px 14px; font-size:13.5px}

/* -------------------- Typography -------------------- */
.eyebrow{font-size:11.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--clay-ink);
  font-weight:600; margin:0 0 10px}
.eyebrow a{color:inherit; text-decoration:none}
/* .prose p and .card p would otherwise turn an eyebrow inside them grey */
.prose p.eyebrow, .card p.eyebrow{color:var(--clay-ink); margin-bottom:10px}
h1.display{font-family:var(--serif); font-weight:600; font-size:clamp(30px,6vw,46px); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 16px; max-width:18ch; text-wrap:balance}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.6vw,28px); line-height:1.2;
  letter-spacing:-.015em; margin:0 0 12px; text-wrap:balance}
h3{font-weight:600; font-size:18px; margin:0 0 8px; letter-spacing:-.01em}
p{margin:0 0 14px}
p.lede{color:var(--ink-soft); font-size:clamp(17px,2.2vw,20px); max-width:60ch; line-height:1.55; margin:0 0 20px}
.muted{color:var(--ink-soft)}
.small{font-size:13px; color:var(--ink-faint); line-height:1.5}
.prose{max-width:64ch}
.prose p{color:var(--ink-soft); margin:0 0 15px}
.prose h2{margin-top:40px}
.prose h3{margin-top:26px}

/* -------------------- Sections -------------------- */
main .wrap{padding-block:44px 40px}
section.band{padding-block:14px}
.hero{padding-block:56px 20px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px}
.divider{border:none; border-top:1px solid var(--line); margin:44px 0}

/* -------------------- Ownership strip -------------------- */
.ownstrip{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  padding:14px 16px; display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:14px; box-shadow:var(--shadow-sm)}
.ownstrip svg{flex:none; width:17px; height:17px; color:var(--accent); margin-top:2px}
.ownstrip b{color:var(--ink); font-weight:600}

/* -------------------- Cards / grids -------------------- */
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){ .grid.two, .grid.three{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:6px}
.card p{color:var(--ink-soft); margin:0}
.step-n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent-wash); color:var(--accent-ink); font-weight:700; font-size:13px; margin-bottom:10px}

/* -------------------- Path blocks -------------------- */
.path{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:24px; box-shadow:var(--shadow-sm); margin-bottom:16px}
.path h2{font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px}
.path .oneline{color:var(--ink); font-weight:500; margin:0 0 12px}
.path p{color:var(--ink-soft); margin:0 0 12px}
.path .try{display:flex; gap:9px; align-items:flex-start; background:var(--accent-wash); color:var(--accent-ink);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:14px}
.path .try b{font-weight:600}
.path .try svg{flex:none; width:16px; height:16px; margin-top:2px}
/* Each path card ends with its first step (the .try box) and a link to that path's section in the
   guide. The Worth knowing note above the box has no bottom margin, so the box sets the gap. */
.path .note + .try{margin-top:14px}
.path .more{font-size:14px; margin:12px 0 0}
/* Bucket cards: the sub-options inside a next chapter, shown as neutral chips,
   plus a plain "worth knowing" note carrying the honest limits. */
.path .opts{list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 14px}
.path .opts li{font-size:13px; line-height:1.3; color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px}
.path .note{font-size:13.5px; color:var(--ink-faint); margin:0}
.path .note b{color:var(--ink-soft); font-weight:600}
/* A path with kinds under it (Gap year): each kind is its own section with its own anchor, so
   old links to a kind still land on it. */
.path .subpath{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
.path .subpath h3{font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px}
.path:has(.subpath:target){border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.path .subpath:target h3{color:var(--accent-ink)}

/* -------------------- FAQ -------------------- */
details.faq{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  padding:2px 18px; margin-bottom:10px}
details.faq summary{cursor:pointer; font-weight:600; font-size:16.5px; padding:15px 0; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--accent); font-size:22px; font-weight:400; line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq .a{color:var(--ink-soft); padding:0 0 16px; margin:0; max-width:64ch}

/* -------------------- Teen asides / callouts (guide) -------------------- */
.teen{border-left:3px solid var(--clay); background:var(--clay-wash); border-radius:var(--radius-sm); padding:14px 16px; margin:20px 0}
.teen p{margin:0; color:var(--ink-soft)}
.teen b{color:var(--clay-ink)}
.callout{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:16px 18px; margin:22px 0; box-shadow:var(--shadow-sm)}
.callout p{margin:0 0 8px} .callout p:last-child{margin:0}

/* -------------------- Figures / infographics -------------------- */
figure.board, figure.info{margin:26px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
figure.board svg, figure.info svg{display:block; width:100%; height:auto}
/* Board rows link to their path cards: a soft amber bar shows on hover and keyboard focus. */
figure.board a .hit{fill:#E9B44C; opacity:0; transition:opacity .15s}
figure.board a:hover .hit{opacity:.13}
figure.board a:focus{outline:none}
figure.board a:focus-visible .hit{opacity:.18; stroke:#E9B44C; stroke-width:2}
/* A card reached from the board gets a pine ring so the eye lands on it. */
.path:target{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
figure.board figcaption, figure.info figcaption{font-size:13.5px; color:var(--ink-soft); line-height:1.5; padding:13px 16px; background:var(--surface); border-top:1px solid var(--line)}
figure.info svg{background:var(--surface)}
figure.info .dn{fill:var(--surface); stroke:var(--line-strong)}
figure.info .dn-fin{fill:var(--accent-wash); stroke:var(--accent)}
figure.info .dt{fill:var(--ink)}
figure.info .dt-fin{fill:var(--accent-ink)}
figure.info .ds{fill:var(--ink-soft)}
figure.info .ds-fin{fill:var(--accent-ink); opacity:.85}
figure.info .dl, figure.info .dlm{stroke:var(--ink-soft)}
/* reusable infographic tokens */
figure.info .f-ink{fill:var(--ink)} figure.info .f-soft{fill:var(--ink-soft)} figure.info .f-faint{fill:var(--ink-faint)}
figure.info .f-acc{fill:var(--accent)} figure.info .f-clay{fill:var(--clay)} figure.info .f-surface{fill:var(--surface)} figure.info .f-cream{fill:var(--btn-on-accent)}
figure.info .s-line{stroke:var(--line-strong)} figure.info .s-soft{stroke:var(--ink-soft)} figure.info .s-acc{stroke:var(--accent)} figure.info .s-clay{stroke:var(--clay)}

/* -------------------- Guide chapters -------------------- */
.chmeta{font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-faint); font-weight:600; margin:0 0 8px}
.chnav{display:flex; justify-content:space-between; gap:14px; margin-top:34px; flex-wrap:wrap}
.chnav a{flex:1; min-width:210px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:12px 15px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm)}
.chnav a:hover{border-color:var(--line-strong)}
.chnav a.next{text-align:right}
.chnav .dir{display:block; font-size:12px; color:var(--ink-faint); font-weight:600}
.chnav .t{display:block; font-weight:600; color:var(--accent-ink); margin-top:2px; font-size:14.5px}
details.srcs{margin-top:32px; border-top:1px solid var(--line); padding-top:14px}
details.srcs summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--ink-soft)}
details.srcs ol{margin:12px 0 0; padding-left:20px}
details.srcs li{font-size:12.5px; color:var(--ink-soft); margin:0 0 8px; line-height:1.45}
details.srcs .rev{font-size:12.5px; color:var(--ink-faint); margin:10px 0 0}
.toc{display:grid; gap:12px; margin-top:24px}
.toc a{display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px 18px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s}
.toc a:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.toc .n{font-family:var(--serif); color:var(--accent); font-weight:600; font-size:14px}
.toc h2{margin:3px 0 4px; font-size:17px}
.toc p{margin:0; color:var(--ink-soft); font-size:14px}

/* -------------------- Footer -------------------- */
footer.foot{border-top:1px solid var(--line); background:var(--surface); margin-top:24px}
footer.foot .wrap{padding-block:22px 24px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 40px}
footer.foot .fbrand{flex:0 1 38ch}
footer.foot .fbrand .brand{margin-bottom:6px}
footer.foot .fbrand .small{margin:0}
footer.foot nav{display:flex; flex-flow:row wrap; gap:8px 18px; align-content:flex-start; flex:1 1 300px; padding-top:3px}
footer.foot nav a{color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500}
footer.foot nav a:hover{color:var(--ink)}
footer.foot .disclaimer{flex-basis:100%; border-top:1px solid var(--line); padding-top:12px; margin:4px 0 0; font-size:12.5px; color:var(--ink-faint)}

/* Skip-to-content link: visible only on keyboard focus (WCAG 2.4.1) */
.skip{position:absolute; left:8px; top:-52px; z-index:200; padding:9px 14px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow-sm); text-decoration:none; transition:top .15s ease}
.skip:focus{top:8px}

/* -------------------- Paths: jump list -------------------- */
/* Every path as an equal chip under the lede, so a long page can be crossed in one tap. (a11yflow-11) */
.opts.jump{list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:18px 0 0}
.opts.jump a{display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--ink-soft); font-size:13px; text-decoration:none; min-height:30px}
.opts.jump a:hover{color:var(--ink); border-color:var(--line-strong)}

/* -------------------- For parents board on phones -------------------- */
/* The picture board shrinks to unreadable text on a phone, so below 640px the same rows show as
   plain links in the same colors. Only one version is ever displayed. (visual-3, a11yflow-6) */
figure.board .board-list{display:none}
@media (max-width:640px){
  figure.board svg{display:none}
  figure.board .board-list{display:block}
}
.board-list{background:#17150e; border-top:5px solid #E9B44C; padding:14px 14px 10px;
  font-family:ui-monospace,"DejaVu Sans Mono","Courier New",monospace}
.board-list .bl-head{color:#E9B44C; font-size:18px; font-weight:700; letter-spacing:.18em; margin:0 4px 8px}
.board-list a{display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline; padding:10px 4px;
  border-top:1px solid #2b271c; color:#EFE3C4; text-decoration:none; min-height:44px}
.board-list a:focus-visible{outline:2px solid #E9B44C; outline-offset:-2px}
.board-list .bl-name{font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.board-list .bl-gate{font-size:13px; color:#c9bd94}
.board-list .bl-status{grid-column:1 / -1; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.board-list .bl-foot{color:#9d9370; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  border-top:1px solid #2b271c; padding-top:9px; margin:4px 4px 0}

/* ---- How it works: the parent map (drawing, "where is your teen" rows, one line per stage) ---- */
.mapsec{margin:22px 0 30px}
.maph{font-family:var(--serif); font-size:clamp(22px,3.4vw,28px); font-weight:600; letter-spacing:-.01em; margin:0 0 8px}
.maph3{font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; margin:28px 0 8px}
.mapintro{color:var(--ink-soft); max-width:68ch; margin:0 0 12px}
figure.info.map{margin:14px 0 6px; max-width:440px}
figure.map .v-spine{stroke:var(--line-strong); stroke-width:2.5; stroke-linecap:round}
figure.map .v-node{fill:var(--surface); stroke:var(--ink-soft); stroke-width:1.5}
figure.map .v-node-teen{fill:var(--accent); stroke:var(--accent)}
figure.map .v-node-start{stroke:var(--accent); stroke-width:2}
figure.map .v-dot{fill:var(--accent)}
figure.map .v-n{font-size:13px; font-weight:700; fill:var(--ink)}
figure.map .v-n-teen{fill:var(--btn-on-accent)}
figure.map .v-t{font-family:var(--serif); font-size:16px; font-weight:600; fill:var(--ink)}
figure.map .v-s{font-size:12.5px; fill:var(--ink-soft)}
figure.map .v-s-teen{fill:var(--accent-ink); font-weight:600}
figure.map .v-warn{font-size:12.5px; font-weight:600; fill:var(--warn)}
figure.map .v-band{fill:var(--accent-wash); fill-opacity:.6; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:4 4}
figure.map .v-legend{fill:var(--surface); stroke:var(--accent); stroke-width:1.2}
figure.map .v-legend-t{font-size:12.5px; font-weight:700; fill:var(--accent-ink)}
figure.map .v-legend-s{font-size:12px; fill:var(--ink-soft)}
figure.map .v-off{fill:var(--surface); stroke:var(--ink-faint); stroke-width:1.3; stroke-dasharray:4 3}
figure.map .v-off-link{stroke:var(--ink-faint); stroke-width:1.3; stroke-dasharray:3 3}
figure.map .v-off-t{font-size:13px; font-weight:700; fill:var(--ink)}
figure.map .v-tw{fill:var(--clay-wash); stroke:var(--clay); stroke-width:1.3}
figure.map .v-tw-dot{fill:var(--surface); stroke:var(--clay-ink); stroke-width:1.5}
figure.map .v-tw-n{font-size:12px; font-weight:700; fill:var(--clay-ink)}
figure.map .v-tw-t{font-size:13.5px; font-weight:700; fill:var(--clay-ink)}
figure.map .v-tw-link{stroke:var(--clay); stroke-width:1.5; stroke-dasharray:5 4; fill:none}
figure.map .v-loop{stroke:var(--accent); stroke-width:1.6; stroke-dasharray:5 4; fill:none}
figure.map .v-pill{fill:var(--surface); stroke:var(--accent); stroke-width:1}
figure.map .v-pill-t{font-size:11.5px; font-weight:600; fill:var(--accent-ink)}
figure.map .v-ah-loop{fill:var(--accent)} figure.map .v-ah-tw{fill:var(--clay)}
.sorter{list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.sorter li{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:6px 18px; padding:12px 16px; border-top:1px solid var(--line); font-size:15px}
.sorter li:first-child{border-top:none}
.sorter .hear{color:var(--ink)}
.sorter .kind{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:2px}
.sorter .go{color:var(--ink-soft); font-size:14.5px}
.sorter .go a{white-space:nowrap}
.stagelist{margin:0; padding-left:0; list-style:none; display:grid; gap:8px}
.stagelist li{border-left:3px solid var(--line-strong); padding:4px 0 4px 12px; color:var(--ink-soft); font-size:15px}
.stagelist li b{color:var(--ink); font-weight:600}
.stagelist li.teenstep{border-left-color:var(--accent)}
@media (max-width:700px){
  .sorter li{grid-template-columns:1fr}
}

/* ---- How it works: tap areas and the way back to the list ---- */
/* The guide links under each row of "Where is your teen right now?" ("The shrug", "Not now", "Leave me alone") used to
   share one line of small type, 19px tall, and a thumb hit the neighbour. Each is now its own 44px-tall tap area with
   space between. This is the line they sit on: side by side where there is room, wrapping like words. */
.sorter .entries{display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:4px; font-size:14.5px}
/* One guide link: .72em above and below a 1.6 line at 14.5px is 44.08px tall, and it grows with the text size. It stays
   on one line so a title never splits. */
.sorter .entries a{padding:.72em 0; white-space:nowrap}
/* When the list drops to one column (700px and under, a phone), one guide link per line, 4px apart. */
@media (max-width:700px){
  .sorter .entries{flex-direction:column; gap:4px}
}
/* "Back to the list", the last line of each stage card a row points to. A negative bottom margin takes back some of its
   own padding so the card keeps about its usual space below the text. */
.path .backtolist{font-size:14.5px; margin:6px 0 -6px}
/* Its tap area is 44px tall as well, by the same sum as the guide links. */
.path .backtolist a{display:inline-block; padding:.72em 0}
/* On paper there is no link to follow. */
@media print{ .path .backtolist{display:none} }

/* -------------------- Share buttons (share.js) -------------------- */
/* share.js swaps each "send this page" link for a <button> inside span.share, followed by a status line and a
   copy field that stays hidden until the clipboard refuses. A <button> doesn't take the page's line-height or
   lose its margin the way the <a> did, so match the link buttons beside it. */
button.btn{line-height:inherit; margin:0; text-align:center; -webkit-appearance:none; appearance:none}
.share{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 12px; position:relative; max-width:100%}
.share-status{font-size:14px; line-height:1.45; color:var(--ink-soft)}
/* Empty, the status line stays in the accessibility tree (so its first message is read out) but takes no room
   and adds no gap beside the button. */
.share-status:empty{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.share-field{flex-basis:100%; width:100%; max-width:27rem; font:inherit; font-size:14px; line-height:1.4; padding:8px 10px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-xs)}
.share-field[hidden]{display:none}
.share-field:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* A share button on its own line inside the page text (For parents' first step, For teens' friend section). */
.share-line{margin:0 0 15px}
li .share-line{margin:8px 0 2px}
/* In a row of buttons (.cta-row), share.js puts the status line and copy field in div.share-out, on a line of their
   own just after the row, so a message never moves the buttons in it. An empty status line still takes no room
   (see .share-status:empty), and neither does the hidden field, so the empty div adds no space. Off paper, like
   the buttons. */
.share-out .share-status:not(:empty){display:block; margin-top:10px}
.share-out .share-field{display:block; margin-top:10px}
.share-out .share-field[hidden]{display:none}
@media print{ .share-out{display:none!important} }

/* -------------------- Guide orienting line -------------------- */
/* One quiet line under the label on every guide page and on the complete guide's contents page, for a parent
   who lands there from search: what the site is, and where to start. It stays off paper, where "start with how
   it works" has no link to follow. */
.prose p.orient, p.orient{font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0 0 14px}
@media print{ p.orient{display:none!important} }

/* -------------------- Print -------------------- */
/* The checklists and chapters get printed. Paper always gets the light palette, even when the
   screen is in dark mode (the selector outranks the dark blocks above), and the site chrome stays
   off the page. (critic-4) */

@media print{
  html:root:not([data-theme="print"]){
    --bg:#fff; --surface:#fff; --surface-2:#F4EFE5; --raise:#fff;
    --ink:#2B2A26; --ink-soft:#5E5A50; --ink-faint:#6A6455;
    --line:#E4DBCA; --line-strong:#D2C6B0;
    --accent:#1F5B4E; --accent-ink:#164036; --accent-wash:#E7EEE8;
    --clay:#C06A43; --clay-ink:#9E4E2C; --clay-wash:#F4E5D8;
    --warn:#7A5617; --warn-wash:#F3E7CE; --btn-on-accent:#FCF9F2; color-scheme:light}
  header.top, footer.foot, .skip, .cta-row, .opts.jump, .share-line, .share{display:none!important}
  body{background:#fff}
  .card, .path, figure{box-shadow:none!important; break-inside:avoid}
  a{color:inherit}
}

/* ---- One page width (D, 2026-10-21) ----
   Every page sits in the same 920px frame, the header included (it was 1000px, so the logo and the page title
   started at different edges). Reading pages keep a narrower text column, about 66 characters a line, and it now
   starts at the frame's left edge on every page instead of being centered on its own. Before this, each reading
   page set its own width inline (64ch, 66ch or 760px), so the column moved from page to page. A short page with no
   scrollbar also sat half a scrollbar to the right of a long one; the reserved gutter stops that shift. */
html{scrollbar-gutter:stable}
.top .wrap{max-width:var(--maxw)}
.wrap.prose, .wrap.reading{max-width:calc(34rem + 48px); margin-left:max(0px, calc((100% - var(--maxw)) / 2)); margin-right:auto}

/* A lone text link that needs a 44px tap area without moving the line (Home's "There's a page written to
   you", sim test 2026-10-14, issue 9). Vertical padding on an inline link widens what a finger can hit and leaves the
   line height alone. */
a.tap44{padding:13px 0}