/* ==================================================================
   A NEW PAGE, marketing pages v2 ("Lamp-lit", design pass 2026-10-14).
   Loaded LAST on every public marketing page except the homepage and /littles:
   after lamplight.css (or the state/country page styles), the page's own <style>,
   and /css/anp-tokens.css. It retokens the Lamplight pages onto the brief's system:
   spacing, widths, type ramp, the dusk-to-night bands, one gold button per screen,
   the "On this page" menu for long pages, breakers and the closing night band.
   Colours come from the token variables only.
   ================================================================== */


/* ---------- 0. header on a phone: hidden in the stylesheet itself, so nothing jumps when anp-chrome.js
   arrives (coordinator, Oct 14: CLS 0.24 at 320px). The Menu button anp-chrome.js adds keeps the links. ---------- */
/* tire-kick 2026-10-15 (2a-P1-8): the header is its final 64px from the first paint (lamplight.css drew it 72px
   until anp-chrome.js arrived and trimmed it: an 8px jump of the whole page on a computer) */
header.anp-home-nav .wrap{min-height:64px}
@media (max-width:860px){
  .anp-home-navlinks{display:none}
  .anp-home-navbtns a[href$="join.html"]{display:none}
}

/* ---------- 1. the Lamplight names point at the brief's tokens ---------- */
:root{
  --ink:var(--anp-ink);
  --ink-soft:color-mix(in srgb,var(--anp-ink) 80%,var(--anp-cream));
  --brand:var(--anp-ink);
  --brand-deep:var(--anp-ink-deep);
  --night:var(--anp-ink);
  --night-deep:var(--anp-ink-deep);
  --gold:var(--anp-gold);
  --gold-ink:var(--anp-ink);
  --paper:var(--anp-cream);
  --cream:var(--anp-paper);
  --card:var(--anp-milk);
  --line:color-mix(in srgb,var(--anp-ink) 12%,transparent);
  --line-strong:color-mix(in srgb,var(--anp-ink) 24%,transparent);
  --anp-h1:var(--t-h1);
  --anp-fs-base:var(--t-body);
  --anp-fs-xs:.875rem;            /* nothing under 14px */
  --anp-fs-sm:.9375rem;
  --read-measure:var(--w-text);   /* text 640 */
  --measure:var(--w-text);
  --toc-w:208px;
  --font-ui:var(--font-sans);     /* Lamplight's names use the same chain, Lexend Fallback included (fresh-eyes P1-1) */
  --font-read:var(--font-sans);
}
body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink)}
:is(main,.anp-home-footer) .wrap{max-width:calc(var(--w-grid) + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- 2. type ramp ---------- */
:where(main) h1{font-size:var(--t-h1);font-weight:500;line-height:var(--lh-tight);letter-spacing:-.01em}
:where(main) h2{font-size:var(--t-h2);font-weight:500;line-height:var(--lh-head)}
:where(main) h3{font-size:var(--t-h3);line-height:1.3}
.lp-hero h1,.anp-home-hero h1{font-size:var(--t-h1);font-weight:500;line-height:var(--lh-tight)}
.lp-hero .lede,.anp-home-hero .lede,.sh p,.sub,.lp-intro{font-size:var(--t-lede)}
.kicker,.hero-k,.anp-eyebrow{font:600 var(--t-small)/1.35 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--anp-text-muted)}
.anp-home-hero .hero-k{color:var(--anp-on-night-muted)}
/* story captions on art: 14px caps like every eyebrow (tire-kick P1-7: nothing under 14px, tracking .06em) */
.story-cap .sc-k{font:700 var(--t-eyebrow)/1.35 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--anp-text-muted)}
/* small print never under 14px */
.fine,.lp-legal,.legal .discl,.sp-legal,.lp-specnote,.free,.lp-msg,.small,small{font-size:var(--t-small)}
.pull-band figcaption,.jump-chips .jc-k,.anp-tapline .hs-role{font-size:var(--t-small)}

/* ---------- 3. hero and section spacing tokens ---------- */
.lp-hero{padding:var(--hero-top) 0 var(--hero-bottom)}
.anp-home-hero.sp-hero{padding:var(--hero-top) 0 var(--hero-bottom)}
@media (max-width:860px){.lp-hero{padding:var(--hero-top) 0 var(--hero-bottom)}}
.sec,.sec.sp-sec,.sec.story-sec{padding:var(--section-y) 0}
.sec.tight{padding:var(--s-7) 0}
@media (min-width:1024px){.sec.tight{padding:var(--s-8) 0}}
.pull-band{padding:var(--section-y) 0}
@media (max-width:860px){.sec,.sec.sp-sec,.sec.story-sec,.pull-band{padding:var(--section-y) 0}}

/* under 360px the hero button comes before the art so it sits on the first screen (320 x 640) */
@media (max-width:359px){
  .lp-hero .wrap{grid-template-areas:"copy" "cta" "art"}
  .lp-hero .lp-hero-cta{margin-top:0}
  .lp-hero h1{margin:6px 0 10px}
  .lp-hero .lede{font-size:17px;line-height:1.5}
}

/* ---------- 4. the dusk-to-night bands (never the same band twice in a row) ---------- */
.lp-hero.band-light,.sec.band-light{background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--anp-gold) 10%,transparent),transparent 70%),var(--anp-cream);box-shadow:none}
.sec.band-paper{background:var(--anp-paper);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--anp-ink) 6%,transparent)}
.sec.band-white{background:var(--anp-white)}
.lp-hero.band-night,.sec.band-night,.pull-band.band-night{background:radial-gradient(40% 60% at 80% 20%,color-mix(in srgb,var(--anp-gold-soft) 18%,transparent),transparent 70%),linear-gradient(180deg,var(--anp-dusk),var(--anp-ink) 45%,var(--anp-ink-deep));color:var(--anp-on-night)}
.sec.band-white :is(.card,.anchor,.opt,.lp-bubble,.step-cards > li,.icon-row.cards > li,details.lp-spec,.anp-home-faq details){background:var(--anp-milk)}
.sec.band-white .lp-iconcard .orb,.sec.band-white .icon-row .orb{background:var(--anp-paper)}
.sec.band-night > .wrap > :is(h2,h3),.sec.band-night .sh :is(h2,h3),.sec.band-night .sh .kicker,.lp-hero.band-night h1{color:var(--anp-milk)}
.sec.band-night .sh p,.sec.band-night > .wrap > p,.lp-hero.band-night .lede{color:var(--anp-on-night-muted)}
.sec.band-night > .wrap > p a:not([class]),.sec.band-night .sh p a:not([class]){color:var(--anp-gold-text)}

/* ---------- 5. buttons: one gold primary per screen, everything else a link ---------- */
.anp-home-btn1{min-height:56px;height:auto;padding:12px 28px;border-radius:var(--r-pill);background:var(--anp-gold);color:var(--anp-ink);
  font:700 17px/1.25 var(--font-sans);box-shadow:var(--shadow-btn);white-space:normal;text-align:center}
.anp-home-btn1:hover{background:var(--anp-gold);color:var(--anp-ink);transform:translateY(-2px)}
.anp-home-btn1:active{transform:translateY(2px);box-shadow:0 1px 0 var(--anp-gold-edge)}
.anp-home-btn1:focus-visible,.anp-btn:focus-visible{outline:3px solid var(--anp-gold-soft);outline-offset:3px}
@media (max-width:1023px){main .anp-home-btn1,main .anp-btn{width:100%;max-width:360px}}
@media (min-width:1024px){.anp-home-btn1{min-height:52px}}
main .anp-btn{height:auto;min-height:56px;padding:12px 28px;text-align:center;line-height:1.25}
@media (min-width:1024px){main .anp-btn{min-height:52px}}
main .anp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--anp-ink)}
main .anp-link-quiet{display:inline-flex;align-items:center;min-height:44px}
.band-night .anp-link,.band-night .anp-link-quiet{color:var(--anp-gold-text)}
/* the outline button (Share on the story pages) */
.anp-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 24px;border-radius:var(--r-pill);
  background:transparent;color:var(--anp-ink);border:2px solid var(--anp-ink);font:600 16px/1.2 var(--font-sans);text-decoration:none;cursor:pointer}
.anp-btn-outline:hover{background:color-mix(in srgb,var(--anp-ink) 6%,transparent);color:var(--anp-ink)}
.anp-btn-outline:focus-visible{outline:3px solid var(--anp-gold-soft);outline-offset:3px}
/* the white pills left in the page body are real buttons (copy, print, send): quiet outline */
main .anp-home-btn2{background:transparent;border:2px solid var(--line-strong);color:var(--anp-ink)}
main .anp-home-btn2:hover{border-color:var(--anp-ink)}
.btnrow{gap:8px 20px}

/* ---------- 6. cards and quiet blocks on the tokens ---------- */
.card,.anchor,.opt,.step-cards > li,.icon-row.cards > li,.lp-bubble{border-radius:var(--r-card);border-color:var(--line);box-shadow:var(--shadow-card)}
details.lp-spec,.anp-home-faq details{border-radius:var(--r-card)}
.lp-what{border-radius:var(--r-card)}

/* ---------- 7. "On this page": chips on a phone (sticky), a left menu on a computer ---------- */
.anp-toc{position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--anp-milk) 94%,transparent);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.anp-toc-in{display:flex;align-items:center;gap:8px;max-width:calc(var(--w-grid) + 2 * var(--gutter));margin:0 auto;padding:8px var(--gutter);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.anp-toc-in::-webkit-scrollbar{display:none}
.anp-toc-k{flex:none;margin:0 4px 0 0;font:600 var(--t-small)/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--anp-text-muted);white-space:nowrap}
.anp-toc ol{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.anp-toc li{flex:none;margin:0}
.anp-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--anp-white);border:1px solid var(--line-strong);
  font:600 var(--t-small)/1.2 var(--font-sans);color:var(--anp-ink);text-decoration:none;white-space:nowrap}
.anp-toc a:hover,.anp-toc a[aria-current="true"]{border-color:var(--anp-ink)}
@media (min-width:861px) and (max-width:1023px){.anp-toc{top:64px}}  /* under the sticky 64px header */
:target{scroll-margin-top:80px}
.has-toc main [id]{scroll-margin-top:80px}
@media (min-width:1024px){
  .has-toc main [id]{scroll-margin-top:104px}
  /* the menu floats in the left margin while the page body is on screen (anp-marketing.js shows it) */
  .anp-toc{position:fixed;top:112px;left:max(16px,calc((100% - var(--w-shell)) / 2));width:var(--toc-w);z-index:12;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
  html.anp-toc-on .anp-toc{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-out)}
  .anp-toc-in{display:block;max-width:none;margin:0;padding:20px 16px;background:var(--anp-milk);border-radius:16px;box-shadow:var(--shadow-card);max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow:auto}
  .anp-toc-k{margin:0 0 8px 8px}
  .anp-toc ol{display:block}
  .anp-toc li + li{margin-top:2px}
  .anp-toc a{display:flex;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:none;white-space:normal;line-height:1.3;font-weight:500;border-left:3px solid transparent}
  .anp-toc a:hover{background:color-mix(in srgb,var(--anp-ink) 5%,transparent)}
  .anp-toc a[aria-current="true"]{border-left-color:var(--anp-gold-accent);font-weight:700;background:color-mix(in srgb,var(--anp-gold) 10%,transparent)}
  /* the page body moves right of the menu; the hero and the closing stay centred */
  .has-toc main > .sec:not(.anp-closing) > .wrap,.has-toc main > .pull-band > .wrap,.has-toc main > .anp-toc-scope > .sec > .wrap{padding-left:calc(var(--toc-w) + 48px + var(--gutter))}
}
@media (prefers-reduced-motion:reduce){.anp-toc{transition:none!important}}

/* ---------- 8. breakers and the mid-page call to action ---------- */
.anp-breaker{display:block;width:96px;height:24px;margin:32px 0;background:url("/icons/anp/anp-gold-thread.svg") center/contain no-repeat;opacity:.9}
.center .anp-breaker,.sh.center + .anp-breaker{margin-left:auto;margin-right:auto}
.anp-midcta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:48px;padding:24px;max-width:var(--w-text);background:var(--anp-milk);border-radius:var(--r-card);box-shadow:var(--shadow-card);border-top:3px solid var(--anp-gold-accent)}
.sec .anp-midcta,.sec > .wrap > .anp-midcta{margin-top:48px;margin-bottom:48px}
.sec > .wrap > .anp-midcta:first-child{margin-top:0}
.sec .anp-midcta:last-child{margin-bottom:0}
.anp-midcta-t{flex:1 1 220px;margin:0;font:500 var(--t-h3)/1.3 var(--font-serif);color:var(--anp-ink)}
.anp-midcta .anp-btn{flex:none}
.anp-midcta .anp-small{flex-basis:100%;margin:0;color:var(--anp-text-muted)}
.band-night .anp-midcta-t{color:var(--anp-ink)}

/* ---------- 9. the closing night band ---------- */
.sec.anp-closing{position:relative;overflow:hidden;text-align:center}
.sec.anp-closing > .wrap{position:relative;z-index:2}
.sec.anp-closing h2{color:var(--anp-milk);margin:0 auto var(--s-5);max-width:22ch}
.sec.anp-closing .anp-closing-fine{margin:12px auto 0;font-size:var(--t-small);color:var(--anp-on-night-muted)}
.sec.anp-closing .anp-closing-fine a{color:var(--anp-gold-text)}
.anp-closing .gold-thread{color:var(--anp-gold-text)}
.sec.anp-closing .note{background:none;padding:0;border:0;margin:12px auto 0;max-width:none;font-size:var(--t-small);color:var(--anp-on-night-muted)}
.sec.anp-closing .tr-after{display:flex;flex-direction:column;align-items:center;gap:4px}
@media (max-width:767px){.sec.anp-closing{padding-bottom:88px}}  /* room for the help bubble */
/* state and country pages: the existing closing card sits on the night band */
.sec.anp-closing .final{text-align:left;box-shadow:0 0 0 1px color-mix(in srgb,var(--anp-gold-soft) 30%,transparent)}
.sec.anp-closing .final .anp-btn{margin-top:24px}
.sec.anp-closing .sp-more{text-align:left}
.sec.anp-closing .sp-more p,.sec.anp-closing .sp-more .row a,.sec.anp-closing .sp-legal{color:var(--anp-on-night-muted)}
.sec.anp-closing .sp-more .row .lbl{color:var(--anp-milk)}
.sec.anp-closing .sp-more .row a:hover{color:var(--anp-gold-text)}
.sec.anp-closing .sp-others summary{color:var(--anp-milk)}
.sec.anp-closing .sp-others summary .ico{color:var(--anp-gold-soft)}
.sec.anp-closing .sp-others .row a{color:var(--anp-on-night-muted)}
/* the teen lane: grown-up, no fireflies, a plain gold rule */
.lane-teen .fireflies{display:none}
.lane-teen .sec.anp-closing h2::before{content:"";display:block;width:64px;height:2px;margin:0 auto 24px;background:var(--anp-gold-accent)}


/* ---------- 11. page details ---------- */
/* the reassurance line under a hero button is plain small text, never a blue box */
.lp-hero-cta .note,.anp-home-hero .note{background:none;padding:0;border:0;border-radius:0;max-width:var(--w-hero-text);font-size:var(--t-small);color:var(--anp-text-muted)}
.anp-home-hero .note{color:var(--anp-on-night-muted)}
/* a night hero (the teen lane) */
.lp-hero.band-night .kicker{color:var(--anp-on-night-muted)}
.lp-hero.band-night .note{color:var(--anp-on-night-muted)}
.lp-hero.band-night .note a,.lp-hero.band-night .lede a{color:var(--anp-gold-text)}
.lane-teen .lp-hero.band-night h1{color:var(--anp-milk)}
.lane-teen .lp-hero.band-night .lp-hero-copy::after{content:"";display:block;width:64px;height:2px;margin-top:24px;background:var(--anp-gold-accent)}
/* the closing on /the-science stays in daylight (night is for the pull quote only) */
.sec.anp-closing-day h2{color:var(--anp-ink)}
.sec.anp-closing-day .anp-closing-fine{color:var(--anp-text-muted)}
.sec.anp-closing-day .gold-thread{color:inherit}
/* citations: a 640px numbered list at 14px */
.anp-refs-h{margin-top:40px;font-size:var(--t-h3)}
.anp-refs,ol.refs{max-width:var(--w-text);margin:12px 0 0;padding-left:1.6em;font-size:var(--t-small);line-height:1.55;color:var(--anp-text-muted);list-style:decimal}
.anp-refs li,ol.refs li{margin:8px 0;padding-left:4px;max-width:none}
.anp-refs li::marker,ol.refs li::marker{color:var(--anp-ink);font-weight:600}
/* the reading specialist's credit: a quiet signed card */
.card.lp-advisor{background:transparent;box-shadow:none;border:0;border-left:3px solid var(--anp-gold-accent);border-radius:0;padding:4px 0 4px 20px}
.card.lp-advisor img{border-radius:12px}
.card.lp-advisor h3{font:italic 500 var(--t-h3)/1.3 var(--font-serif);color:var(--anp-ink)}
@media (hover:hover){.card.lp-advisor:hover{transform:none}}


/* the comparison table (/how-we-compare): a real table; on a phone each row stacks into a card */
.anp-cmp-wrap{max-width:var(--w-grid);border-radius:var(--r-card);background:var(--anp-milk);box-shadow:var(--shadow-card);overflow:hidden}
.anp-cmp{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.55;color:var(--anp-ink)}
.anp-cmp th,.anp-cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.anp-cmp thead th{font:600 var(--t-small)/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--anp-text-muted);background:var(--anp-paper)}
.anp-cmp tbody th{font:600 17px/1.35 var(--font-serif);width:26%}
.anp-cmp tbody td:last-child{width:28%;font-weight:600}
.anp-cmp .anp-cmp-eg{display:block;margin-top:4px;font:400 var(--t-small)/1.4 var(--font-sans);color:var(--anp-text-muted)}
.anp-cmp tbody tr:last-child > *{border-bottom:0}
@media (max-width:767px){
  .anp-cmp-wrap{background:none;box-shadow:none;border-radius:0;overflow:visible}
  .anp-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .anp-cmp,.anp-cmp tbody,.anp-cmp tr,.anp-cmp th,.anp-cmp td{display:block;width:auto!important}
  .anp-cmp tr{background:var(--anp-milk);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:6px 0;margin-bottom:16px}
  .anp-cmp th,.anp-cmp td{border:0;padding:10px 18px}
  .anp-cmp td::before{content:attr(data-label);display:block;margin-bottom:4px;font:600 var(--t-small)/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--anp-text-muted)}
}
.lp-table{font-size:var(--t-small)}
.lp-tablewrap{border-radius:var(--r-card)}


/* the story share pages (/share/<world>): hero tokens, the share pill as an outline button */
.sw{padding:var(--hero-top) 0 var(--hero-bottom);background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--anp-gold) 10%,transparent),transparent 70%),var(--anp-cream)}
@media (max-width:899px){.sw{padding:var(--hero-top) 0 var(--hero-bottom)}}
.sw h1{font:500 var(--t-h1)/var(--lh-tight) var(--font-serif)}
.sw-kicker{font:600 var(--t-small)/1.35 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--anp-text-muted)}
.sw-ages{font-size:var(--t-small)}
.sw-free,.sw-how{font-size:var(--t-small)}
.anp-share-btn{min-height:48px;padding:10px 24px;border:2px solid var(--anp-ink);color:var(--anp-ink);background:transparent;font:600 16px/1.2 var(--font-sans)}
.sw-quote{max-width:34ch}
@media (max-width:359px){.sw .sw-art{order:2}.sw h1{margin-bottom:10px}.sw-quote{margin-bottom:12px;font-size:19px}.sw-ages{margin-bottom:16px}}
.anp-share-btn:hover{background:color-mix(in srgb,var(--anp-ink) 6%,transparent)}

/* ---------- 10. print ---------- */
@media print{.anp-toc,.anp-midcta,.anp-closing,.anp-breaker{display:none!important}}
/* Oct 18 (items 320, 321): a printed page is the checklist, not the website. No buttons, links to the next step, menus or footer;
   the site address once at the bottom. Black on white. */
@media print{
  body.mkt-v2 .lp-hero-cta,body.mkt-v2 .anp-cta-stack,body.mkt-v2 .btnrow,body.mkt-v2 .btn,body.mkt-v2 .cta,
  body.mkt-v2 a.anp-home-btn1,body.mkt-v2 a.anp-home-btn2,body.mkt-v2 a.anp-btn,body.mkt-v2 a.anp-nightfree,
  body.mkt-v2 header,body.mkt-v2 nav,body.mkt-v2 footer,body.mkt-v2 .fmore,body.mkt-v2 .skip,body.mkt-v2 .anp-skip{display:none!important}
  body.mkt-v2{background:#fff!important;color:#000!important}
  body.mkt-v2::after{content:"anewpagereading.com";display:block;text-align:center;margin:18pt 0 0;font:12pt/1.4 Georgia,serif;color:#000}
}


/* ---------- 12. privacy and terms (tire-kick 2026-10-15, P0-6 + P1-9): the shared shell, Lexend body on the tokens.
   The legal words are untouched; only the look moved onto the system. ---------- */
.anp-legal{background:var(--anp-cream);color:var(--anp-text)}
.anp-legal-in{max-width:calc(var(--w-text) + 2 * var(--gutter));margin:0 auto;padding:var(--s-5) var(--gutter) var(--s-8)}
.anp-legal-back{margin:0 0 var(--s-4)}
.anp-legal-back a{display:inline-flex;align-items:center;min-height:44px;font:600 var(--t-small)/1.2 var(--font-sans);color:var(--anp-text);text-decoration:underline;text-underline-offset:4px}
.anp-legal h1{font:500 var(--t-h1)/var(--lh-tight) var(--font-serif);color:var(--anp-text);margin:0 0 var(--s-3)}
.anp-legal h2{font:500 var(--t-h3)/1.3 var(--font-serif);color:var(--anp-text);margin:var(--s-7) 0 var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.anp-legal h3{font:700 17px/1.35 var(--font-sans);color:var(--anp-text);margin:var(--s-5) 0 var(--s-2)}
.anp-legal p,.anp-legal li{font:400 var(--t-body)/var(--lh-body) var(--font-sans);color:var(--anp-text);max-width:var(--w-text)}
.anp-legal p{margin:0 0 var(--s-4)}
.anp-legal ul{padding-left:22px;margin:0 0 var(--s-4)}
.anp-legal li{margin:6px 0}
.anp-legal a{color:var(--anp-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.anp-legal .sub{font-size:var(--t-lede);color:var(--anp-text-muted);margin:0 0 6px}
.anp-legal .eff,.anp-legal .note,.anp-legal .anp-legal-foot{font-size:var(--t-small);line-height:1.55;color:var(--anp-text-muted)}
.anp-legal .eff{margin:0 0 var(--s-6)}
.anp-legal .note{border-left:3px solid var(--anp-gold-accent);padding:6px 0 6px 14px;margin:var(--s-5) 0}
.anp-legal .tldr,.anp-legal .plainbox{background:var(--anp-milk);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:var(--s-5);margin:0 0 var(--s-4)}
.anp-legal .plainbox{border-left:4px solid var(--anp-gold-accent);padding:var(--s-4) var(--s-5)}
.anp-legal .plainbox a{font-weight:600}
.anp-legal .pill{display:inline-flex;align-items:center;min-height:32px;margin:0 6px 8px 0;padding:4px 12px;border-radius:var(--r-pill);background:var(--anp-paper);border:1px solid var(--line);
  font:600 var(--t-small)/1.3 var(--font-sans);color:var(--anp-text)}
.anp-legal .jump{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s-5) 0 var(--s-4)}
.anp-legal .jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--anp-white);
  font:600 var(--t-small)/1.2 var(--font-sans);color:var(--anp-text);text-decoration:none}
.anp-legal .jump a:hover{border-color:var(--anp-ink)}
.anp-legal h2[id],.anp-legal details.fold{scroll-margin-top:80px}
.anp-legal details.fold{border-top:1px solid var(--line);margin-top:var(--s-7)}
.anp-legal details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;padding-top:var(--s-4)}
.anp-legal details.fold > summary::-webkit-details-marker{display:none}
.anp-legal details.fold > summary h2{border-top:0;margin:0;padding:0}
.anp-legal .fold-hint{flex:none;font:600 var(--t-small)/1.3 var(--font-sans);color:var(--anp-text)}
.anp-legal .fold-hint::after{content:" \25BE"}
.anp-legal details.fold[open] .fold-hint{display:none}
.anp-legal .anp-legal-foot{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line)}
.anp-legal .anp-legal-foot a{color:var(--anp-text-muted)}


/* ---------- 13. tire-kick fixes 2026-10-15 ---------- */
/* P0-8: the printable-version card on /coach-card and /first-week-playbook sits in a band that sets --ink to cream,
   so its heading painted milk on milk (1.0:1). The card resets its own colours to the light pair. */
.anp-gc{--ink:var(--anp-ink);--ink-soft:var(--anp-text-muted);--card:var(--anp-milk);--brand:var(--anp-ink);color:var(--anp-text)}
section.anp-gc h2.anp-gc-h,.anp-gc .anp-gc-h{color:var(--anp-text)}

/* P0-9 approved pairs only (tokens v3). Text on a dark band: cream #FFF8EC, muted #D9D2C4 or gold text #FFCF6E. */
/* state and country pages: their own sheet paints hero and closing-card copy in --brand-tint (#E8ECF4), not an approved pair */
.anp-home-hero.sp-hero,.sp-sec .final,.sec.anp-closing .final{--brand-tint:var(--anp-on-night)}
.anp-home-hero.sp-hero :is(.lede,.anp-home-price,.trust,.hs-counter,.hs-wrong),.sp-sec .final :is(p,.lede2),.sec.anp-closing .final :is(p,.lede2){color:var(--anp-on-night)}
.anp-home-hero.sp-hero .note{color:var(--anp-on-night-muted)}
.anp-home-hero.sp-hero .new{color:var(--anp-ink);background:var(--anp-on-night)}
/* story captions on night art and bands: gold text, never the button gold */
.pull-band figcaption{color:var(--anp-gold-text)}
/* the printable-version card is a light card wherever it lands */
.anp-gc .anp-gc-k{color:var(--anp-text)}
.anp-gc .anp-gc-p,.anp-gc .anp-gc-consent{color:var(--anp-text-muted)}
.anp-gc .anp-gc-f label{color:var(--anp-text)}
/* "say this" lines and status words were green or red text on light: ink, with the meaning carried by the words and a tint */
.anp-say,.anp-ok-text{color:var(--anp-text)}
ol.moves li i,.praise b,.say b,.night .say b,.notes h2,.notes h3,.notes p,.notes .rm-in p,.ladder .st.live,.recl,.lp-msg.ok{color:var(--anp-text)}
.badge.wait{color:var(--anp-text)}
.badge.worry{background:var(--anp-peach);color:var(--anp-text)}
/* P1-3 / P1-4: no sideways scroll at 360 (ESA, country, state pages) or 320 (/reading-check). A one-column grid track
   grew to its widest unbreakable child (an email address), 6 to 17px past the gutter. Grid children may shrink, long
   addresses wrap. */
.wrap.two > *,.two > *,.anp-home-faq > *{min-width:0}
main a[href^="mailto:"],.anp-home-footer a[href^="mailto:"]{overflow-wrap:anywhere}
.ticks li,.ticks li > *{min-width:0}
.anp-home-faq summary > *{min-width:0;overflow-wrap:anywhere}
.anp-chips,.rc-chips,.chips{flex-wrap:wrap}
/* P2-18: guides breadcrumb "Guides › Title" at the top of the hero (a "where am I" cue, and it helps search) */
.anp-crumbs{margin:0 0 var(--s-2)}
.anp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;list-style:none;font:500 var(--t-small)/1.35 var(--font-sans);color:var(--anp-text-muted)}
.anp-crumbs li{display:flex;align-items:center;min-width:0;margin:0}
.anp-crumbs li + li::before{content:"\203A";margin-right:8px;color:var(--anp-text-muted)}
.anp-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--anp-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.anp-crumbs [aria-current]{display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){.anp-crumbs{margin:-8px 0 0}.anp-crumbs [aria-current]{max-width:22ch}}
/* P1-24: the check marks are a drawn symbol, not a text glyph */
.anp-glyph{display:block;width:18px;height:18px;flex:none}
/* the ESA "Email me the <state> steps" button wraps instead of pushing the page sideways at 320 */
#fund-btn,main .anp-home-btn2{max-width:100%;white-space:normal;height:auto;min-height:48px;text-align:center}
/* share pages: "Open this world in Ages 5-10 · Ages 11-18" (P0-4, Appendix A) */
.sw-open{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:4px 0 0;font-size:var(--t-small);color:var(--anp-text-muted)}
.sw-open a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--anp-text);text-decoration:underline;text-underline-offset:3px}
/* handover v5 M2 (2026-10-15): the "as of" date beside each funding status, from js/anp-funding-status.js */
.fp-asof{margin-top:14px;font-size:var(--t-small);color:var(--anp-text-muted)}
.fp-paused{margin-top:18px}
.sp-asof{font-size:var(--t-small);color:var(--anp-text-muted)}
.band-night .sp-asof,.band-night .fp-asof{color:var(--anp-on-night-muted)}

/* =====================================================================================================================
   A1 + review #47 (2026-10-17, Joel): NO GOLD TEXT ON NAVY. On navy every word is white #FFFFFF (13.29:1), the lede
   #E8EDF8 (11.33:1) or an eyebrow #C9D6F2 (9.10:1). Gold stays a FILL (the primary button, navy text 7.26:1) or a
   STROKE (the 4px bar under an emphasised phrase). Links on navy are white with a 2px underline.
   The navy grounds redefine the old night tokens, so every rule that painted --anp-gold-text, --anp-milk or
   --anp-on-night-muted on navy now paints the approved colour without being rewritten one by one. */
:root{--on-navy:#FFFFFF;--on-navy-2:#E8EDF8;--on-navy-eyebrow:#C9D6F2;--navy:#1F2E55;--navy-2:#2A3D6E;--ink-2:#3D4868;--amber-text:#8A4B08;
  --sky:#EAF2FF;--butter:#FFF3BF;--mint:#D3F9D8;--peach:#FFE8CC;--pink:#FFDEEB;--skyblue:#D0EBFF;--ocean:#1D6FB8;--plum:#6741D9;--gold-edge:#C98E1C}
.band-night,.sec.anp-closing,.anp-home-hero,.hero-v2,.pull-band.band-night,.lp-hero.band-night{--anp-gold-text:#FFFFFF;--anp-milk:#FFFFFF;--anp-on-night:#FFFFFF;--anp-on-night-muted:#E8EDF8;--brand-tint:#E8EDF8;--cap-cream:#FFFFFF;--on-night-muted:#E8EDF8}
/* the emphasised phrase on navy: italic white with a gold bar under it, drawn once, never animated */
:is(.band-night,.sec.anp-closing:not(.anp-closing-day):not(.band-white),.anp-home-hero,.hero-v2,.lp-hero.band-night) .gold-thread{color:var(--on-navy);font-style:italic}
:is(.band-night,.sec.anp-closing:not(.anp-closing-day):not(.band-white),.anp-home-hero,.hero-v2,.lp-hero.band-night) .gold-thread::after{bottom:-.1em;height:4px;border-radius:2px;background:var(--anp-gold);box-shadow:none;animation:none}
.gold-thread::after{animation:none}
:is(.band-night,.sec.anp-closing,.anp-home-hero,.hero-v2,.lp-hero.band-night) h1 em,
:is(.band-night,.sec.anp-closing,.lp-hero.band-night) h2 em{color:var(--on-navy);font-style:italic;background:linear-gradient(var(--anp-gold),var(--anp-gold)) 0 100%/100% 4px no-repeat;padding-bottom:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* links on navy: white, 2px underline */
.sec.band-night > .wrap > p a:not([class]),.sec.band-night .sh p a:not([class]),.band-night .anp-link,.band-night .anp-link-quiet,
.sec.anp-closing .anp-closing-fine a,.sec.anp-closing a.anp-link,.sec.anp-closing a.anp-link-quiet,.lp-hero.band-night .note a,.lp-hero.band-night .lede a,
.anp-home-hero .note a,.anp-home-hero .lede a,.anp-home-hero .link,.hero-v2 .hv2-see,.hero-v2 .anp-home-price a,.hero-v2 .ha-worlds a{color:var(--on-navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sec.anp-closing .sp-more .row a:hover{color:var(--on-navy);text-decoration:underline}
/* eyebrows on navy */
.lp-hero.band-night .kicker,.sec.band-night .sh .kicker,.sec.band-night .anp-eyebrow,.anp-home-hero .hero-k,.hero-v2 .hero-k,.hero-v2 .hero-k *{color:var(--on-navy-eyebrow)}
/* story captions on a night band */
.pull-band figcaption{color:var(--on-navy-2)}
/* 8.4: the hero status chip reads on its own ground, whatever sits behind it (white on #2A3D6E, 10.4:1) */
.anp-home-hero .sp-chip{background:var(--navy-2);color:var(--on-navy);border-color:transparent}
.anp-home-hero .sp-chip .ico{color:var(--anp-gold)}
/* A4: the closing band's button is the primary: gold fill, navy text (7.26:1), never a gold outline on navy */
.sec.anp-closing :is(a.anp-btn,a.anp-home-btn1,a.anp-btn-outline,.final .anp-btn){background:var(--anp-gold);color:var(--anp-ink);border:0;box-shadow:0 3px 0 var(--gold-edge)}
.sec.anp-closing :is(a.anp-btn,a.anp-home-btn1,a.anp-btn-outline):hover{background:var(--anp-gold);color:var(--anp-ink)}

/* =====================================================================================================================
   A5 + review #48 (2026-10-17, Joel): STORY PICTURES ARE NEVER COVERED AND NEVER CROPPED. A caption or quote card sits
   BELOW its picture as a white strip with navy words (13.29:1; the kicker in amber #8A4B08, 6.68:1). Pictures keep
   their own shape (object-fit:contain), capped at min(80vh,640px). The kicker's parts sit side by side with a dot only
   BETWEEN two parts on the same line: each part carries a leading dot, and the row is shifted left by one dot inside a
   left-clipped box, so the part that starts a line never shows its dot (review #44). */
.story-moment{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(31,46,85,.10)}
.story-moment > img,.story-moment > :where(picture) > img{display:block;width:100%;height:auto;aspect-ratio:auto;aspect-ratio:revert-layer;max-height:min(80vh,640px);object-fit:contain;border-radius:0;box-shadow:none;background:#1F2E55}
/* a picture without width/height attributes keeps a reserved 16:10 box (no layout shift), shown whole inside it */
.story-moment > img:not([height]),.story-moment > :where(picture) > img:not([height]){aspect-ratio:16/10}
/* the tilted hero book keeps its own sizing (16:9 on a computer, 210px tall on a phone), but never crops */
.lp-book img{object-fit:contain;background:#1F2E55}
/* Oct 17 item 68: the hero book's box is sized to the picture (its width and height attributes reserve the space), so no empty bars */
.lp-book img,.lp-hero-art.square .lp-book img{aspect-ratio:auto;aspect-ratio:revert-layer;height:auto;max-height:min(80vh,640px)}
@media (max-width:860px){.lp-book img,.lp-hero-art.square .lp-book img{aspect-ratio:auto;aspect-ratio:revert-layer;height:auto;max-height:min(56vh,380px)}}
/* a hero picture with no width/height attributes still reserves a 16:10 box, so nothing jumps when it loads */
.lp-book img:not([height]){aspect-ratio:16/10}
.story-moment > img:not([height]),.story-moment > :where(picture) > img:not([height]){background:#fff}
.anp-tapline .story-moment > picture > img,.anp-tapline .story-moment > img{aspect-ratio:auto;aspect-ratio:revert-layer}
.story-cap,.story-moment .story-cap,.lp-book .story-cap,.lp-book figcaption.story-cap,.final .story-cap,.side .story-cap,.book .art .story-cap,.story-band .story-cap{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;z-index:auto;max-width:none;margin:0;padding:14px 18px;background:#FFFFFF;color:#1F2E55;border:0;border-radius:0;box-shadow:none;text-align:left}
.story-cap .sc-k,.story-moment .story-cap .sc-k{display:block;font-family:inherit;font-style:normal;font-weight:700;font-size:.875rem;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:#8A4B08}
.story-cap .sc-q{display:block;margin-top:4px;font-style:italic;font-weight:500;font-size:1.0625rem;line-height:1.45;color:#1F2E55}
.sc-k .sc-kw{display:flex;flex-wrap:wrap;margin-left:-1.4em}
.sc-k{clip-path:inset(-4px -4px -4px 0)}
.sc-k .sc-kw > span::before{content:"\00B7";content:"\00B7" / "";display:inline-block;width:1.4em;text-align:center}
/* the closing card on the state pages: the picture whole on one side, the words on navy on the other (it was text over
   a cropped picture behind a scrim); stacked on a phone, picture first */
.final{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;justify-content:stretch;min-height:0;background:#1F2E55}
.final > img,.final > :where(picture) > img{position:static;inset:auto;width:100%;height:auto;max-height:min(80vh,640px);object-fit:contain;object-position:50% 50%}
.final::after{display:none}
.final .in{max-width:none}
@media (max-width:860px){.final{grid-template-columns:1fr}}
/* A5: a video poster's play button sits bottom-left (64px), never on a face, the egg or a title */
.vposter .vplay,.tr-poster .tr-play,.anp-film .play{position:absolute;left:20px;bottom:20px;top:auto;right:auto;width:64px;height:64px;margin:0;transform:none}
.lp-video .play{top:auto;right:auto;left:10px;bottom:10px;margin:0;width:44px;height:44px}
.lp-video img{aspect-ratio:auto;aspect-ratio:revert-layer;height:auto;object-fit:contain}
span.sc-k{display:block}
/* A6 (2026-10-17): the illustrated card, details behind a tap. White card, a coloured top edge, an icon on a light
   band, a 2 to 5 word title, one line, and the long text unchanged inside <details>. Navy on white 13.29:1. */
.tip-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:32px}
@media (max-width:600px){.tip-grid{gap:16px}}
.tip-card{background:#FFFFFF;border:1px solid #E6DCC8;border-top:6px solid var(--tc,var(--anp-gold));border-radius:20px;padding:24px;box-shadow:0 6px 18px rgba(31,46,85,.08);color:#1F2E55;text-align:left}
@media (max-width:600px){.tip-card{padding:20px}}
.tip-card:nth-child(5n+1){--band:var(--sky);--tc:var(--ocean)}
.tip-card:nth-child(5n+2){--band:var(--butter);--tc:var(--anp-gold)}
.tip-card:nth-child(5n+3){--band:var(--mint);--tc:#2F9E44}
.tip-card:nth-child(5n+4){--band:var(--peach);--tc:#C2410C}
.tip-card:nth-child(5n){--band:var(--pink);--tc:#A61E4D}
.tip-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--band,var(--sky));color:#1F2E55;margin-bottom:16px}
.tip-ico .ico{width:28px;height:28px}
.tip-card h3{margin:0 0 8px;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.25;color:#1F2E55}
.tip-card > p{margin:0;font-size:1.125rem;line-height:1.5;color:#3D4868;max-width:none}
.tip-card details{margin-top:12px}
.tip-card summary{min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:#1F2E55;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tip-card details > :not(summary){margin-top:8px;font-size:1rem;line-height:1.6;color:#1F2E55}
.tip-card details p,.tip-card details li{color:#1F2E55}
/* 6.3: uniform state tiles with status chips (funding and the ESA hub look the same) */
.fp-states,.states{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.fp-states a,.states .state{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:76px;background:#FFFFFF;border:1px solid #E6DCC8;border-radius:14px;padding:12px 14px;color:#1F2E55;box-shadow:none}
.fp-states a b{font-size:1.0625rem}
.fp-states a span:not(.chip){font-size:1rem;color:#3D4868}
.chip{display:inline-block;font:700 .875rem/1 var(--font-sans,system-ui);padding:5px 9px;border-radius:999px;color:#1F2E55}
.chip.pay{background:var(--mint)}.chip.back{background:var(--skyblue)}.chip.review{background:var(--butter)}.chip.wait{background:#E9ECEF}
/* 9.2 (2026-10-17): the state status chip above the H1, 16px, in the 6.3 chip colours, navy words (10.7 to 11.9:1) */
.anp-home-hero .sp-status{margin:14px 0 6px;gap:8px 14px}
.anp-home-hero .sp-status .sp-chip[data-anp-fund]{font-size:1rem;min-height:36px;background:#E9ECEF;color:#1F2E55;border:0}
.anp-home-hero .sp-status .sp-chip[data-anp-fund="direct"]{background:var(--mint)}
.anp-home-hero .sp-status .sp-chip[data-anp-fund="reimburse"]{background:var(--skyblue)}
.anp-home-hero .sp-status .sp-chip[data-anp-fund="review"]{background:var(--butter)}
.anp-home-hero .sp-status .sp-chip .ico{color:#1F2E55}
.anp-home-hero .sp-status .sp-asof{font-size:1rem;color:#E8EDF8}
.fp-states .amt-line{font-size:1rem;color:#3D4868}
/* 9.3 (2026-10-17): the three steps on a state page wear 56px coloured circles (navy icons on a light band, 10.7:1+) */
.sp-sec .step .orb{width:56px;height:56px;border:0;box-shadow:none;background:var(--sky);color:#1F2E55}
.sp-sec .step:nth-child(2) .orb{background:var(--butter)}
.sp-sec .step:nth-child(3) .orb{background:var(--mint)}
.sp-sec .step .orb .ico{width:28px;height:28px}
.sp-court summary{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 8.1: the hub's secondary button on navy: white outline, white words (13.29:1) */
.anp-home-hero a.sp-second{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;background:transparent;color:#FFFFFF;border:2px solid #FFFFFF;font-weight:700;text-decoration:none}
/* A4: the primary button is full width on a phone, everywhere */
@media (max-width:480px){main .anp-home-btn1,main .anp-btn{width:100%;max-width:none}}

/* ===== Part 8 marketing (2026-10-17) ===== */

/* 233: the quiet door to one free night, 16px navy, underlined, 8px under the main start button; never a second gold button */
.anp-nightfree{display:flex;width:fit-content;align-items:center;min-height:44px;margin:8px 0 0;font-size:16px;line-height:1.4;font-weight:500;color:#1F2E55;text-decoration:underline;text-underline-offset:3px}
.anp-nightfree:hover{text-decoration-thickness:2px}
.anp-nightfree:focus-visible{outline:3px solid #F2B544;outline-offset:3px;border-radius:4px}
.lp-hero-cta > .anp-nightfree,.ctas > .anp-nightfree,.sw-cta > .anp-nightfree{margin-top:-4px}
.anp-cta-stack{display:flex;flex-direction:column;align-items:flex-start}
:is(.band-night,.anp-closing,.anp-home-hero,.final) .anp-nightfree{color:#fff}
.sec.anp-closing > .wrap > .anp-nightfree{margin:8px auto 0}
.anp-closing .anp-nightfree{text-decoration-thickness:2px;text-underline-offset:4px}   /* the closing band's links are white and underlined at 2px (trailer rule 11.4) */
.sec.anp-closing .final .anp-nightfree{margin:8px 0 0}
.sec.anp-closing.anp-closing-day .anp-nightfree,.sec.anp-closing.band-white .anp-nightfree,.anp-midcta .anp-nightfree,.pricecard .anp-nightfree{color:#1F2E55}   /* a light box inside a dark band keeps navy */
/* O7: the pricing card's first bullet says what the free week includes */
.pc-inc{display:block;margin-top:2px;font-size:15px;font-weight:400;line-height:1.45;color:#1F2E55}
/* 43/80: the footer lists, a flex row with a 16px gap and no separator dots, navy on cream */
footer.anp-home-footer .fgrid .f-ages{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;list-style:none;margin:0;padding:0}
footer.anp-home-footer .f-ages li{margin:0;padding:0;list-style:none}
footer.anp-home-footer .f-ages > span[aria-hidden="true"]{display:none}
footer.anp-home-footer .fgrid .f-ages li a:not(.anp-home-brand):not(.anp-home-btn2),
footer.anp-home-footer .fmore .by-state.abroad a:not(.anp-home-brand),
footer.anp-home-footer .legal .links a:not(.anp-home-brand){color:#1F2E55}
footer.anp-home-footer .fmore .by-state.abroad,footer.anp-home-footer .legal .links{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}

/* ===== end Part 8 marketing ===== */

/* 275 (Joel, Oct 18): the quiet in-between line under each age page's strip. Navy on paper (kids), pale on navy (teen); AA both. */
.why-between{margin:20px auto 0;max-width:46ch;text-align:center;font:500 16px/1.5 var(--w-sans,"Lexend",system-ui,sans-serif);color:#1F2E55}
.why-steps--teen .why-between{color:#E8EDF8}

/* beauty pass Oct 19 (walkthrough): on phones the "On this page" chip row scrolled its last chip flush against the
   right edge. A trailing space the width of the page gutter, so the row ends with the same breathing room it starts with. */
@media (max-width:1023px){.anp-toc ol::after{content:"";flex:0 0 var(--gutter,20px)}}