/* =====================================================================
   Panelab Design System v1
   Netflix structure (billboard, rows of tiles, title pages, play-first CTA)
   on a light, kid-safe canvas. Platform chrome stays neutral; each series'
   art brings the colour, so any comic style fits.
   Depth comes from ink bands, never from a grey canvas: at most one hero band
   per page (.band) plus the ink footer (.pfoot).
   One accent, yellow, always with ink text. It fills the one reading action
   ("Read Episode 1 free", .btn--sun) and small badges. Membership and account
   actions are ink (.btn--ink). Links are ink and underlined.
   ===================================================================== */

@font-face { font-family: "Bricolage"; font-weight: 800; font-display: swap; src: url("/brand/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 400; font-display: swap; src: url("/assets/fonts/lexend-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 600; font-display: swap; src: url("/assets/fonts/lexend-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 700; font-display: swap; src: url("/assets/fonts/lexend-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* colour: neutrals have a neutral, no blue. Ratios are WCAG 2.x. */
  --canvas: #f0f0ee;      /* page background */
  --surface: #ffffff;     /* cards, sheets, fields: white lifts off the canvas */
  --surface-2: #e4e4e1;   /* quiet fills: chips, option rows, hover */
  --line: #d3d3cf;        /* hairlines and outlines */
  --line-strong: #7a7a76; /* control borders (ghost buttons, fields): 3.4:1 on canvas, 4.1:1 on white */
  --ink: #141414;         /* text, membership buttons, the band: 15:1 on canvas */
  --ink-hover: #2e2e2e;
  --ink-2: #3f3f3c;       /* secondary text: 9.3:1 on canvas, 10.6:1 on white, 8.3:1 on surface-2 */
  --ink-3: #545450;       /* meta text: 6.7:1 on canvas, 7.6:1 on white, 6.0:1 on surface-2, 6.8:1 on sun-soft */
  --sun: #ffc21a;         /* the one accent (marigold): the read button, badges, the CTA band. Ink text on it, 11:1 */
  --sun-hover: #f5b400;   /* ink 9.7:1 */
  --sun-soft: #fff1c4;    /* tints: icon chips, hints, selection, notices. Ink 15.8:1 */
  --on-sun: var(--ink);   /* text and icons on --sun: always ink, never white */
  --link: var(--ink);     /* links are ink and underlined */
  --focus: var(--ink);    /* focus ring on light (ink). On the ink footer the ring is --sun */
  --bad: #b8352b;         /* errors only. There is no green: ticks and "met" states are ink */
  --band: #ffffff;        /* light band (white panel): the hero billboard and the footer */
  --on-band: var(--ink);  /* text on the band */
  --on-band-2: var(--ink-2); /* meta on the band: 11.1:1 */
  --band-fill: var(--surface); /* ghost buttons on the band */
  --band-line: var(--line-strong); /* ghost button borders on the band */
  --band-rule: var(--line); /* hairlines on the band */
  --overlay: rgba(0, 0, 0, .45); /* behind sheets */

  /* type: Bricolage only for h1, h2, plan names and the coming-soon posters; Lexend for the rest.
     One scale: 14 / 16 / 17 / 21 / 28 / 44, plus the hero sizes.
     h2 (44) -> subhead (21, .subhead, h3s, ledes, row titles) -> body (17) -> small (16) -> meta (14). */
  --display: "Bricolage", "Arial Black", system-ui, sans-serif;
  --body: "Lexend", system-ui, sans-serif;
  --t-hero: clamp(64px, 11vw, 132px);
  --t-h1: clamp(38px, 5.2vw, 64px);
  --t-h2: clamp(28px, 3.2vw, 44px);
  --t-sub: 21px;          /* the middle level: subheads, section h3s, ledes, catalog row titles */
  --t-h3: var(--t-sub);
  --t-lede: var(--t-sub);
  --t-sheet: 28px;        /* sheet and band headings */
  --t-body: 17px;         /* body and card titles (Lexend 700) */
  --t-small: 16px;        /* descriptions under a bold line, nav links, small buttons */
  --t-meta: 14px;         /* meta lines and badges, always --ink-3 or darker */

  /* space, shape, depth */
  --pad: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right)); /* never under a notch in landscape (viewport-fit=cover) */
  --wrap: 1240px;         /* the one container width: every section, row and grid centres at it through --gut */
  --measure: 760px;       /* the reading column inside the container (/help/, /about/, /terms/) */
  --gut: max(var(--pad), calc((100% - var(--wrap)) / 2)); /* side padding that centres content at --wrap */
  --sec-y: 96px;          /* the one section spacing: 96 desktop, 64 below 861px. Catalog rows sit tighter */
  --row-gap: 14px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-control: 10px;
  --r: 14px;              /* tiles and cards */
  --r-art: 10px;          /* art inside tiles and cards */
  --r-sheet: 18px;
  --e1: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --e2: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.12);
  --tap: 44px;
}
@media (max-width: 860px) { :root { --sec-y: 64px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--t-body)/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }
::selection { background: var(--sun-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
section[id], [id].doc-sec, h2[id] { scroll-margin-top: 76px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 12px; }

/* ---------- ink band: the hero band and the footer ---------- */
.band, .pfoot { background: var(--band); color: var(--on-band); }
.band :focus-visible, .pfoot :focus-visible { outline-color: var(--ink); }
.band a:not(.btn), .pfoot a { color: var(--on-band); }

/* ---------- logo mark: a 2x2 comic page, three ink panels and one yellow (also /brand/favicon.svg) ---------- */
.mark { flex: none; width: 24px; height: 24px; color: var(--ink); }
.mark__sun { fill: var(--sun); }
.pfoot .mark { color: var(--on-band); }
h1, h2, h3 { text-wrap: balance; }

/* ---------- type helpers: the middle level ---------- */
.subhead { margin: 0 0 8px; font: 700 var(--t-sub)/1.3 var(--body); letter-spacing: -.005em; color: var(--ink); }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--ink-2); }
.meta-text { color: var(--ink-3); font-size: var(--t-meta); }

/* ---------- icons: Phosphor Bold subset in /brand/icons.svg (MIT) ----------
   <svg class="ic" aria-hidden="true"><use href="/brand/icons.svg#i-book-open"/></svg>
   Filled glyphs on a 256 grid, painted currentColor. Use them only where they help scanning (safety, what's included,
   subject tags, badges, row arrows), never on every heading. Steps are numbered, not iconned.
   .ic-chip: a 40px marigold-tint circle that holds one icon, for the safety lists only. */
.ic { flex: none; width: 24px; height: 24px; fill: currentColor; vertical-align: middle; }
.ic-chip { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun-soft); color: var(--ink); }
.ic-chip .ic { width: 22px; height: 22px; }
/* icon list: <ul class="ic-list"><li><span class="ic-chip"><svg class="ic">…</svg></span><div><b>Title</b><span>Line</span></div></li></ul> */
.ic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.ic-list > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.ic-list b { display: block; margin: 8px 0 2px; line-height: 1.3; }
.ic-list li span:not(.ic-chip) { display: block; color: var(--ink-2); font-size: var(--t-small); }
/* choice buttons in a story preview ([data-demo], panelab.js): the home "One choice" block and the /parents/ demos */
.demo__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo__opt { min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 600 var(--t-small)/1.3 var(--body); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.demo__opt:hover { background: var(--surface-2); }
.demo__opt[aria-pressed="true"] { background: var(--sun-soft); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- nav: Logo · Series · How it works · For parents · Pricing · Log in · [CTA] ----------
   Below 820px the four links fold into a disclosure menu (.nav__menu, wired in panelab.js). */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 10px var(--gut); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.solid, .nav.solid-always, .nav.open { border-bottom-color: var(--line); }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: var(--tap); font: 800 26px/1 var(--display); letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { position: relative; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--t-small); min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ink); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav__login { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 2px; color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration: none; white-space: nowrap; }
.nav__login:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav__cta { white-space: nowrap; }
.nav__menu { display: none; }
@media (max-width: 1023px) { .nav { gap: 22px; } .nav__links { gap: 18px; } .nav__end { gap: 14px; } .nav__long { display: none; } }
@media (max-width: 819px) {
  .nav { gap: 10px; padding-block: 6px; }
  .nav.open { background: var(--surface); }
  .logo { font-size: 22px; gap: 8px; }
  .logo .mark { width: 20px; height: 20px; }
  .nav__end { gap: 4px; }
  .nav__login { padding: 0 8px; }
  .nav__cta.btn--sm { padding: 0 14px; }
  .nav__cta svg { display: none; }
  .nav__menu { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -6px; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer; }
  .nav__menu:hover { background: var(--surface-2); }
  .nav__menu svg { width: 24px; height: 24px; }
  .nav__menu .i-close, .nav__menu[aria-expanded="true"] .i-open { display: none; }
  .nav__menu[aria-expanded="true"] .i-close { display: block; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 4px var(--pad) 12px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--e2); }
  .nav.open .nav__links { display: flex; }
  .nav__links a { min-height: 52px; font-size: var(--t-body); color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a[aria-current]::after { display: none; }
  .nav__links a[aria-current] { font-weight: 700; box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
}
@media (max-width: 359px) { .nav { gap: 4px; } .logo { font-size: 19px; gap: 6px; } .logo .mark { width: 18px; height: 18px; } .nav__end { gap: 2px; } .nav__login { padding: 0 6px; } .nav__cta.btn--sm { padding: 0 10px; font-size: 14px; } .nav__menu { margin-right: -8px; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: var(--r-control); border: 1px solid transparent; font: 700 var(--t-body)/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 20px; height: 20px; }
/* the one reading action: "Read Episode 1 free" -> /play/, with the book-open icon (a triangle reads as video) */
.btn--sun { background: var(--sun); color: var(--on-sun); }
.btn--sun:hover { background: var(--sun-hover); }
/* membership and account actions: Choose monthly / yearly, Create account, Log in, Email me the link */
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-hover); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.band .btn--ghost { background: var(--band-fill); color: var(--on-band); border-color: var(--band-line); }
.band .btn--ghost:hover { background: var(--surface-2); }
.btn--sm { min-height: var(--tap); padding: 0 16px; font-size: var(--t-small); }
.btn--sm .ic { width: 18px; height: 18px; }

/* ---------- badge: the one badge component ----------
   <span class="badge badge--free"><svg class="ic" aria-hidden="true"><use href="/brand/icons.svg#i-book-open"/></svg>Free</span>
   <span class="badge badge--members"><svg class="ic" aria-hidden="true"><use href="/brand/icons.svg#i-lock"/></svg>Members</span>
   Plain .badge (marigold, no icon) is for small facts such as "Save 38%". On a tile it sits 8px from the art's corner. */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: var(--sun); color: var(--on-sun); font: 700 13px/1.3 var(--body); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.badge .ic { width: 14px; height: 14px; }
.badge--members { background: var(--ink); color: #fff; }

/* ---------- comic crops: [data-crop] boxes with one <img data-gen> ----------
   prototypes/tools/export-crops.mjs cuts each crop to WebP (demo/brand/crops/) and writes the <img>.
   Each crop is cut to the ratio of the box that shows it (tiles 16:10, panels about 1:1, subject tiles 3:2),
   so object-fit has nothing to trim and no speech balloon is ever cut. Boxes that change ratio with the
   viewport (the /slice/ hero) anchor the top, where the balloons are. */
[data-crop] { overflow: hidden; background-color: var(--surface-2); }
[data-crop] > img[data-gen] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- billboard (series hero): full-bleed art, Netflix style ----------
   Desktop: the art fills the band; the copy sits bottom-left over a fade that covers only the text corner
   (an ellipse from the bottom-left), so faces and speech balloons elsewhere stay clear.
   Below 861px the art stands on its own (data-crop-m) and the copy sits under it on the canvas,
   with a short fade on the art's bottom edge only.
   Override the height per page with --bill-h (e.g. the /slice/ title page uses a lower hero). */
.bill { position: relative; display: flex; align-items: flex-end; min-height: var(--bill-h, min(80svh, 780px)); padding: 0; overflow: hidden; background: var(--canvas); }
.bill__art { position: absolute; inset: 0; }
.bill::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 48px; pointer-events: none; background: linear-gradient(0deg, var(--canvas), color-mix(in srgb, var(--canvas) 0%, transparent)); }
/* left padding --gut lines the copy up with the container; the right side needs only --pad (a --gut there ate the
   whole column on wide screens: at 2560px the copy was squeezed to one word per line) */
.bill__body { position: relative; z-index: 2; padding: 0 var(--pad) clamp(40px, 7vh, 72px) var(--gut); max-width: calc(620px + var(--gut) + var(--pad)); }
/* the fade follows the copy block: an ellipse from its bottom-left corner, a little larger than the text */
.bill__body::before { content: ""; position: absolute; z-index: -1; inset: -140px -220px 0 0; pointer-events: none;
  background: radial-gradient(farthest-side at 0 100%, var(--canvas) 0, color-mix(in srgb, var(--canvas) 94%, transparent) 55%, color-mix(in srgb, var(--canvas) 60%, transparent) 78%, color-mix(in srgb, var(--canvas) 0%, transparent) 100%); }
.title { font: 800 var(--t-hero)/.86 var(--display); letter-spacing: -.035em; margin: 0 0 14px; color: inherit; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--ink-2); font-size: var(--t-small); margin: 0 0 16px; padding: 0; list-style: none; }
.logline { font-size: var(--t-lede); line-height: 1.45; margin: 0 0 24px; max-width: 44ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.after { font-size: var(--t-small); color: var(--ink-2); margin: 14px 0 0; }
.band .meta, .band .after { color: var(--on-band-2); }

/* ---------- sections ----------
   .sec: editorial sections, --sec-y apart. .sec--row: catalog shelves, tight so rows group.
   Content is centred at --wrap (1240px) through --gut. .split: heading in 4 columns, content in 8. */
.sec { padding: calc(var(--sec-y) / 2) var(--gut); }
.sec--row { padding-block: 20px 8px; }
.sec--row + .sec:not(.sec--row) { padding-top: calc(var(--sec-y) / 2 + 12px); }
.sec h2 { font: 800 var(--t-h2)/1.05 var(--display); letter-spacing: -.015em; margin: 0 0 10px; }
.sec .sub { color: var(--ink-2); margin: 0 0 24px; max-width: 62ch; }
.sub a { color: var(--link); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.split__head .sub { margin-bottom: 0; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; } .split__head { margin-bottom: 24px; } }

/* ---------- catalog rows (shelves) ----------
   <div class="row"><a class="tile">…</a>…</div> (or <ul class="row"><li><a class="tile">): one tile width on
   every row, with a peek of the next tile. The row bleeds into the right gutter so tiles run to the screen edge.
   panelab.js wraps each .row in .rowbox, fades the right edge while more tiles are off-screen (.rowbox--more)
   and adds prev/next buttons, shown at >=1024px only while there is more to scroll that way. */
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.sec--row h2, .row-head h2 { font: 700 var(--t-sub)/1.2 var(--body); letter-spacing: 0; margin: 0; }
.sec--row .sub { margin: -6px 0 14px; font-size: var(--t-small); }
.rowbox { position: relative; margin-right: calc(-1 * var(--gut)); }
.row { list-style: none; margin: 0 0 0 -8px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--row-gap)) / 4.3); gap: var(--row-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 8px var(--gut); padding: 8px var(--gut) 18px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; min-width: 0; }
.rowbox::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: max(40px, var(--gut)); background: linear-gradient(90deg, color-mix(in srgb, var(--canvas) 0%, transparent), var(--canvas) 85%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.rowbox--more::after { opacity: 1; }
.row__btn { display: none; }
@media (min-width: 1024px) {
  .row__btn:not([hidden]) { display: grid; place-items: center; position: absolute; z-index: 2; top: var(--row-art-mid, 40%); width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--e2); cursor: pointer; transform: translateY(-50%); transition: background .15s, transform .15s; }
  .row__btn:hover { background: var(--sun); border-color: var(--ink); }
  .row__btn:active { transform: translateY(-50%) scale(.96); }
  .row__btn--prev { left: -24px; }
  .row__btn--next { right: calc(var(--gut) - 24px); }
  .row__btn .ic { width: 24px; height: 24px; }
}

/* ---------- tiles: art on top, title and meta under it (WEBTOON anatomy) ----------
   One ratio for every tile: 16:10. A .badge placed right after .tile__art sits 8px from its top-left corner. */
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; color: var(--ink); text-decoration: none; }
.tile__art { aspect-ratio: 16 / 10; border-radius: var(--r-art); box-shadow: var(--e1); margin-bottom: 8px; transition: transform .2s ease-out, box-shadow .2s ease-out; }
a.tile:hover .tile__art, a.tile:focus-visible .tile__art { transform: scale(1.03); box-shadow: var(--e2); }
a.tile:focus-visible { outline: 0; }
a.tile:focus-visible .tile__art { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the badge sits at the art's bottom-left corner: balloons and the covers' painted titles are at the top.
   The tile is an inline-size container, so 62.5cqw is the height of its 16:10 art. */
.tile { container-type: inline-size; }
.tile > .badge { position: absolute; z-index: 1; top: calc(62.5cqw - 8px); left: 8px; transform: translateY(-100%); pointer-events: none; }
.tile__title { font-weight: 700; font-size: var(--t-body); line-height: 1.3; }
.tile__meta { color: var(--ink-3); font-size: var(--t-meta); }
a.tile:hover .tile__title { text-decoration: underline; text-underline-offset: 3px; }
/* coming soon: ink poster tiles, no art. "Coming soon" sits once, in the row heading. */
.tile--soon { aspect-ratio: 16 / 10; height: auto; width: 100%; justify-content: flex-end; gap: 4px; padding: 16px 18px; border: 0; border-radius: var(--r-art); background: var(--band); color: var(--on-band); font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out, background .15s; }
.tile--soon:hover { background: var(--ink-hover); transform: scale(1.03); box-shadow: var(--e2); }
.tile--soon:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile__kind { color: var(--on-band-2); font-size: var(--t-meta); font-weight: 600; }
.tile__name { font: 800 44px/.95 var(--display); letter-spacing: -.02em; }
.tile__sub { color: var(--on-band-2); font-size: var(--t-small); }
.row__more { display: flex; align-items: center; }
.row__more a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 4px; font-weight: 700; }
.row__more svg { width: 16px; height: 16px; }

/* ---------- branching explainer ---------- */
.how { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); font: 700 var(--t-body)/1 var(--body); color: var(--on-sun); }
.steps h3 { margin: 6px 0 2px; font-size: var(--t-h3); line-height: 1.25; }
.steps p { margin: 0; color: var(--ink-2); }
/* Two drawings of one tree: horizontal from 600px, vertical below, so labels render at 12px or more. */
.tree { display: block; width: 100%; height: auto; }
.tree--v { display: none; max-width: 420px; margin-inline: auto; }
@media (max-width: 599px) { .tree--h { display: none; } .tree--v { display: block; } }
.tree .t-line { stroke: var(--line); } .tree .t-hot { stroke: var(--ink); } .tree .t-node { fill: var(--surface); stroke: var(--line-strong); } .tree .t-node-hot { fill: var(--sun); stroke: var(--ink); } .tree text { fill: var(--ink); font-family: var(--body); font-weight: 600; } .tree .t-node-hot + text:not(.t-label) { fill: var(--on-sun); } .tree .t-label { fill: var(--ink-3); font-weight: 400; }

/* ---------- facts: a borderless list with hairlines ---------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.fact { padding: 16px 0 20px; border-top: 1px solid var(--line); }
.fact b { display: block; margin-bottom: 4px; }
.fact span { color: var(--ink-2); font-size: var(--t-small); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ---------- "What we never do": one honest row on / and /parents/, linked to /privacy#kids ---------- */
.never { margin-top: 32px; padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.never__h { margin: 0 0 16px; font: 700 var(--t-body)/1.3 var(--body); }
.never ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; }
.never li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.never li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.never b { display: block; font-size: var(--t-small); line-height: 1.35; }
.never li span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-small); }
.never__link { margin: 18px 0 0; font-size: var(--t-small); font-weight: 600; }
@media (max-width: 1023px) { .never ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .never { padding: 20px; } .never ul { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; font-weight: 600; font-size: var(--t-body); line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-2); max-width: 70ch; }
.faq details p a { color: var(--link); }

/* ---------- final call to action: the marigold band ----------
   <section class="cta-band" aria-labelledby="…">
     <div class="cta-band__in">
       <div class="cta-band__art cta-band__art--tally"><img src="/brand/art/tally-waving-480.webp" …></div>   (spot art slot)
       <div class="cta-band__body">
         <h2>…</h2><p>…</p>
         <div class="cta-band__actions">
           <a class="btn btn--ink" href="/play/" data-ev="cta_start_click" data-position="final">[book-open .ic]Read Episode 1 free</a>
           <a class="cta-band__link" href="#" data-sheet="later" data-position="final">Email me the link</a>
         </div>
       </div>
     </div>
   </section>
   Full-width marigold strip, ink text. On the band the reading button is ink (yellow on yellow would vanish);
   "Email me the link" is a text link. The art slot holds Tally waving (owner's spot art, transparent), unframed;
   a framed comic crop still works in it without --tally. Place it as the last section of <main>. */
.cta-band { margin-top: calc(var(--sec-y) / 2); background: var(--sun); color: var(--on-sun); }
.cta-band__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(40px, 5vw, 64px) var(--gut); }
.cta-band__art { aspect-ratio: var(--crop-ar, 2 / 1); border-radius: var(--r); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background-color: var(--sun-soft); overflow: hidden; }
.cta-band__art img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__art--tally { justify-self: center; width: min(100%, 300px); aspect-ratio: 1; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.cta-band__art--tally img { object-fit: contain; }
.cta-band h2 { margin: 0 0 10px; font: 800 var(--t-h2)/1.05 var(--display); letter-spacing: -.015em; }
.cta-band p { margin: 0 0 24px; max-width: 46ch; font-size: var(--t-lede); line-height: 1.45; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cta-band__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; }
.cta-band__link:hover { text-decoration-thickness: 3px; }
.cta-band :focus-visible { outline-color: var(--ink); }
.cta-band + .pfoot, main:has(> .cta-band:last-child) + .pfoot, main:has(> .cta-band:last-child) ~ .pfoot { margin-top: 0; }
@media (max-width: 860px) {
  .cta-band__in { grid-template-columns: 1fr; }
  .cta-band__art { max-width: 520px; }
  .cta-band__art--tally { justify-self: start; width: 150px; margin: -8px 0 -12px -10px; }
  .cta-band p { font-size: var(--t-body); }
}
@media (max-width: 480px) { .cta-band__actions .btn { width: 100%; } .cta-band__actions { justify-content: center; } }

/* ---------- share action ([data-share], panelab.js) and its toast ----------
   The share control is a <button> that wears a text-link class (.cta-band__link, .p-textlink): reset the button
   look at zero specificity so the class decides, and underline it like the links it replaced. */
:where(button[data-share]:not(.ibtn)) { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--r-control); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--t-small); overflow-wrap: anywhere; box-shadow: var(--e2); pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast:empty { padding: 0; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- sticky mobile CTA (/, /parents/, /slice/) ----------
   Shown below 861px once the hero has scrolled away; hidden again while the final CTA or the footer is in view. */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta { display: block; position: fixed; z-index: 15; inset: auto 0 0 0; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--canvas); border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
  .sticky-cta.on { transform: none; visibility: visible; transition: transform .2s; }
  .sticky-cta .btn { width: 100%; }
}

/* ---------- footer: the ink band at the end of every platform page ----------
   Same markup on the funnel pages, mirrored with --ds-* tokens in funnel.css. Keep both in sync. */
.pfoot { margin-top: calc(var(--sec-y) / 2); color: var(--on-band-2); font-size: var(--t-small); }
.pfoot__in { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: var(--s6); padding: var(--s7) var(--gut) var(--s6); }
.pfoot .logo { color: var(--on-band); }
.pfoot__brand p { margin: 10px 0 0; max-width: 32ch; }
.pfoot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.pfoot__h { margin: 0 0 4px; font: 700 var(--t-small)/1.3 var(--body); color: var(--on-band); }
.pfoot ul { list-style: none; margin: 0; padding: 0; }
.pfoot__cols a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--on-band-2); text-decoration: none; }
.pfoot__cols a:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 4px; }
.pfoot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; padding: var(--s2) var(--gut) calc(var(--s5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--band-rule); font-size: var(--t-meta); color: var(--on-band-2); }
.pfoot__legal p { margin: 0; padding: 12px 0; }
.pfoot__legal ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pfoot__legal a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--on-band-2); }
.pfoot__legal a:hover { color: var(--on-band); }
@media (max-width: 819px) {
  .pfoot__in { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s6); }
  .pfoot__cols { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .pfoot__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- sheet: a native <dialog> opened with showModal() (focus stays inside, Esc closes) ---------- */
.sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: auto; }
.sheet[open] { display: grid; place-items: end center; }
.sheet::backdrop { background: var(--overlay, rgba(0, 0, 0, .45)); }
html:has(.sheet[open]) { overflow: hidden; }
.sheet__box { width: min(560px, 100%); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 24px var(--pad) calc(28px + env(safe-area-inset-bottom)); box-shadow: var(--e2); }
@media (min-width: 700px) { .sheet[open] { place-items: center; } .sheet__box { border-radius: var(--r-sheet); } }
.sheet h2 { margin: 0 0 8px; font: 800 var(--t-sheet)/1.1 var(--display); }
.sheet h2:focus { outline: 0; }
.sheet p { color: var(--ink-2); margin: 0 0 16px; }
.sheet form { display: grid; gap: 10px; }
.sheet label { font-weight: 600; }
.sheet input[type=email] { min-height: 50px; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 14px; font: inherit; }
.sheet input[type=email]:focus { border-color: var(--focus); }
.check { display: flex; gap: 10px; align-items: center; min-height: var(--tap); color: var(--ink-2); }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }
.err { color: var(--bad); margin: 0; font-weight: 600; }
.sheet__close { float: right; min-width: var(--tap); min-height: var(--tap); border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); font-size: 22px; cursor: pointer; }
.mail { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; font-size: var(--t-small); }
.mail small { color: var(--ink-3); }

@media (max-width: 860px) {
  .bill { display: block; min-height: 0; }
  .bill::after, .bill__body::before { display: none; }
  .bill__art { position: relative; inset: auto; height: var(--bill-art-h, min(62svh, 118vw)); }
  .bill__art::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(0deg, var(--canvas), color-mix(in srgb, var(--canvas) 0%, transparent)); }
  .bill__body { max-width: none; margin-top: -40px; padding: 0 var(--pad) 28px; }
  .logline { font-size: var(--t-body); }
  .row { grid-auto-columns: 78%; }
  .how { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .actions .btn { width: 100%; } }

/* ---------- plan cards (markup from brand/pricing-ui.js, numbers from brand/pricing.js) ----------
   .plans-box: two equal cards (neither preselected) and a side column with "Both plans include" (unless
   data-incl="off"), the free line and a "Read Episode 1 free" text link, so the block fills the container.
   Rows line up across cards through subgrid. */
.plans-box { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px clamp(24px, 3vw, 48px); align-items: start; }
.plans-side { padding: 22px 0 0; }
.plans-side__h { margin: 0 0 12px; font: 700 var(--t-body)/1.3 var(--body); color: var(--ink); }
.plans-read { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: 4px; font-weight: 700; color: var(--link); }
.plans-read .ic { width: 20px; height: 20px; }
@media (max-width: 1023px) { .plans-box { grid-template-columns: 1fr; } .plans-side { padding: 4px 0 0; } }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--e1); }
.pcard__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pcard__name { margin: 0; font: 800 var(--t-h3)/1.15 var(--display); letter-spacing: -.01em; }
.pcard__price { margin: 16px 0 0; }
.pcard__amount { font: 700 44px/1 var(--body); letter-spacing: -.03em; color: var(--ink); }
.pcard__per { margin-left: 6px; color: var(--ink-2); font-weight: 600; }
.pcard__equiv { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.pcard__billed { margin: 10px 0 22px; color: var(--ink-2); font-size: var(--t-small); }
.pcard__cta { width: 100%; align-self: end; }
/* ticks: ink, never green (the site has no green). Same tick in auth.css (.auth-incl). */
.plans-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: var(--t-small); }
.plans-incl li { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; }
.plans-incl li::before { content: ""; width: 6px; height: 12px; margin: 3px 0 0 6px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.plans-free { margin: 18px 0 0; font-weight: 600; color: var(--ink); }
.plans-free a { color: var(--link); font-weight: 600; margin-left: 4px; }
@media (max-width: 1023px) { .plans-incl { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; } }
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .pcard { padding: 20px; }
  .plans-incl { grid-template-columns: 1fr 1fr; }
}

/* ---------- /pricing/ ---------- */
.pp { width: min(100% - 2 * var(--pad), var(--wrap)); margin: 0 auto; }
.pp-hero { padding: var(--s7) 0 0; }
.pp-hero h1 { margin: 0 0 14px; font: 800 var(--t-h1)/1.02 var(--display); letter-spacing: -.025em; text-align: center; }
.pp-hero .lede { margin: 0 auto 32px; max-width: 50ch; text-align: center; }
.pp-note { margin: 10px 0 0; color: var(--ink-3); font-size: var(--t-meta); }
.pp-sec { padding-top: var(--sec-y); }
.pp-sec > h2 { margin: 0 0 10px; font: 800 var(--t-h2)/1.05 var(--display); letter-spacing: -.015em; }
.pp-sec > .sub { margin: 0 0 8px; color: var(--ink-2); max-width: 62ch; }
.pp .faq details { max-width: none; }
/* what's included: icon chips (.ic-chip) in three columns */
.incl { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.incl li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.incl b { display: block; margin: 8px 0 2px; line-height: 1.3; }
.incl div > span { display: block; color: var(--ink-2); font-size: var(--t-small); }
.incl a { color: var(--link); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 1023px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-free { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: var(--sec-y); padding: 28px 32px; border-radius: var(--r-sheet); background: var(--surface); border: 1px solid var(--line); }
.pp-free h2 { margin: 0 0 4px; font: 800 var(--t-sheet)/1.1 var(--display); }
.pp-free p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .pp-hero { padding-top: var(--s6); }
  .pp-hero .lede { font-size: var(--t-body); }
  .incl { grid-template-columns: 1fr; }
  .pp-free { padding: 22px 20px; }
  .pp-free .btn { width: 100%; }
}

/* ---------- reading pages: /help/, /about/, /terms/ ---------- */
.doc { width: min(100% - 2 * var(--pad), var(--measure)); margin: 0 auto; padding: var(--s7) 0 0; }
.doc h1 { margin: 0 0 14px; font: 800 var(--t-h1)/1.04 var(--display); letter-spacing: -.025em; }
.doc .lede { margin: 0; max-width: 58ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.45; }
.doc h2 { margin: 0 0 12px; font: 800 var(--t-sheet)/1.1 var(--display); letter-spacing: -.01em; }
.doc h3 { margin: 24px 0 6px; font-size: var(--t-h3); line-height: 1.3; }
.doc p { margin: 0 0 14px; max-width: 68ch; }
.doc ul:not([class]), .doc ol:not([class]) { margin: 0 0 14px; padding-left: 1.3em; max-width: 66ch; }
.doc ul:not([class]) > li + li, .doc ol:not([class]) > li + li { margin-top: 6px; }
.doc a:not(.btn) { color: var(--link); text-underline-offset: 3px; }
.doc-sec { padding-top: var(--s7); }
.doc-sec > :last-child { margin-bottom: 0; }
.doc .faq details:first-of-type { border-top: 1px solid var(--line); }
.doc .steps { margin: 18px 0 20px; }
.doc .steps h3 { margin: 8px 0 2px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration: none; }
.doc .toc a { color: var(--ink); }
.toc a:hover { background: var(--surface-2); }
.card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card + .card { margin-top: 12px; }
@media (max-width: 640px) {
  .doc { padding-top: var(--s6); }
  .doc .lede { font-size: var(--t-body); }
  .card { padding: 18px; }
}

/* ---------- light theme, dark only as accents (owner, 2026-10-15) ----------
   The hero billboard is a light panel; the footer stays an ink block as the page's dark accent. */
.pfoot { --band: var(--ink); --on-band: #fff; --on-band-2: rgba(255,255,255,.78); --band-rule: rgba(255,255,255,.14); }
.pfoot :focus-visible { outline-color: var(--sun); }
.tile__art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.tile__art { overflow: hidden; background: var(--surface-2); }
.logo .wordmark { height: 34px; width: auto; display: block; }
.pfoot .logo .wordmark { height: 40px; }
.bill + .sec { padding-top: var(--s6); }
@media (max-width: 860px) { .bill + .sec { padding-top: var(--s5); } }
.featured { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 var(--t-small)/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.featured::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--sun); }
/* sheets are <div hidden> opened by panelab.js: give the open sheet its overlay and position on every page */
div.sheet:not([hidden]) { z-index: 40; display: grid; place-items: end center; background: var(--overlay); }
div.sheet[hidden] { display: none; }
@media (min-width: 700px) { div.sheet:not([hidden]) { place-items: center; } }
.nav__short { display: none; }
@media (max-width: 1023px) { .nav__short { display: inline; } }
/* share buttons: icon + "Share", secondary weight (owner, 2026-10-16) */
.share-btn:not(.ibtn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: var(--r-control); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 var(--t-body)/1 var(--body); text-decoration: none; cursor: pointer; }
.share-btn:not(.ibtn):hover { background: var(--surface-2); }
.share-btn .ic { width: 20px; height: 20px; }
.cta-band .share-btn:not(.ibtn) { background: transparent; border-color: var(--ink); }
/* any Tally cut-out in the CTA band: no frame (owner, 2026-10-16) */
.cta-band__art:has(> img[src*="/tally-"]) { justify-self: center; width: min(100%, 300px); aspect-ratio: 1; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.cta-band__art:has(> img[src*="/tally-"]) img { object-fit: contain; }