/* Grown-up pages after the comic (gate, plans, email, confirm, unsubscribe, privacy).
   Their components come from the first prototype and are fully tokenised, so they adopt the
   Panelab Design System by remapping the old tokens to DS values. Load after the page's own CSS. */
@font-face { font-family: "Bricolage"; font-weight: 800; font-display: swap; src: url("/brand/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }

:root {
  /* DS values: a mirror of the brand/panelab.css :root colours. Change both together.
     Never write --line here: on these pages --line is a border width (below). */
  --ds-canvas: #f0f0ee; --ds-surface: #ffffff; --ds-surface-2: #e4e4e1; --ds-line: #d3d3cf; --ds-line-strong: #7a7a76;
  --ds-ink: #141414; --ds-ink-hover: #2e2e2e; --ds-ink-2: #4b4b48; --ds-ink-3: #5e5e5a;
  --ds-sun: #ffc21a; --ds-sun-hover: #f5b400; --ds-sun-soft: #fff1c4;
  --ds-on-sun: var(--ds-ink); /* text and icons on --ds-sun: always ink (--on-sun in panelab.css) */
  --ds-link: var(--ds-ink);   /* links are ink and underlined */
  --ds-focus: var(--ds-ink); /* focus ring on light; on the ink footer it is --ds-sun */
  --ds-band: #ffffff; --ds-on-band: var(--ds-ink); --ds-on-band-2: var(--ds-ink-2); --ds-band-rule: var(--ds-line);
  --ds-e1: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);

  /* legacy tokens -> DS */
  --ink: var(--ds-ink); --ink-soft: var(--ds-ink-2); --ink-muted: var(--ds-ink-3); --ink-faint: var(--ds-ink-3);
  --white: var(--ds-surface); --paper: var(--ds-surface); --paper-page: var(--ds-canvas); --field: var(--ds-line);
  --grape: var(--ds-ink); --grape-dark: var(--ds-link); --grape-100: var(--ds-surface-2); --grape-50: var(--ds-surface-2);
  --sun: var(--ds-sun); --sun-50: var(--ds-sun-soft);
  --success: var(--ds-ink); --success-50: var(--ds-sun-soft); /* no green on the platform: "done" states are ink on marigold tint */
  --font-display: "Bricolage", "Arial Black", system-ui, sans-serif;
  --line-thin: 1px; --line: 1px; --line-heavy: 1.5px;
  --r-panel: 14px; --r-surface: 14px; --r-control: 10px;
  --sh-cap: none; --sh-panel: var(--ds-e1); --sh-cell: none; --sh-hero: var(--ds-e1);
  --sh-press-sm: none; --sh-press: none; --sh-press-lg: none; --sh-pressed: none;
  --ring: var(--ds-focus); /* a colour: tokens.css and parent.css draw outlines with it */
}
body { background: var(--ds-canvas); color: var(--ds-ink); }
::selection { background: var(--ds-sun-soft); color: var(--ds-ink); }
.display, .page-title, h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; text-transform: none; }
a { color: var(--ds-link); }
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 3px; }
.pfoot :focus-visible { outline-color: var(--ds-sun); }
.btn { border-width: 1px; }
/* grown-up actions (Continue, Continue to payment, Send me Episode 2, Unsubscribe) are ink, like the
   platform's membership and account buttons; yellow is kept for reading */
.btn:not(.btn--paper):not(.btn--white):not(.btn--grape):not([aria-disabled="true"]) { background: var(--ds-ink); border-color: var(--ds-ink); color: #fff; }
@media (hover: hover) { .btn:not(.btn--paper):not(.btn--white):not(.btn--grape):not([aria-disabled="true"]):hover { background: var(--ds-ink-hover); } }

/* header: same as the DS nav */
.site-head { background: color-mix(in srgb, var(--ds-canvas) 92%, transparent); border-bottom: 1px solid var(--ds-line); }
.site-head .wordmark:not(img) { display: none; } /* the old SLICE! text mark; the Ahaboom logo image stays */
.pl-mark .wordmark { height: 34px; width: auto; display: block; }
.pl-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--ds-ink); font: 800 24px/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; min-height: 44px; }
/* logo mark: same SVG as the platform pages (.mark in panelab.css) */
.mark { flex: none; width: 22px; height: 22px; color: var(--ds-ink); }
.mark__sun { fill: var(--ds-sun); }
.pl-mark small { font: 600 13px/1 Lexend, system-ui, sans-serif; color: var(--ds-ink-3); margin-left: 6px; }

/* text on the accent fill is always ink */
.skip-link, .stamp, .report__tag, .email-preview__cta { color: var(--ds-on-sun); }
.eyebrow { background: var(--ds-sun-soft); color: var(--ds-ink); }

/* paywall plan cards (/parent/plan): same card look and price type as the /pricing/ cards (.pcard).
   The radios and the inert "Continue to payment" stay as they are (PG-4). */
.plan { border: 1px solid var(--ds-line); border-radius: var(--r-panel); background: var(--ds-surface); box-shadow: var(--ds-e1); }
.plan__price { font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; }

/* footer: the ink band, same markup and look as .pfoot in panelab.css, with --ds-* tokens */
.pfoot { margin-top: 48px; background: var(--ds-band); color: var(--ds-on-band-2); font-size: 15px; line-height: 1.55; }
.pfoot__in, .pfoot__legal { padding-inline: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right)); }
.pfoot__in { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: 32px; padding-block: 48px 32px; }
.pfoot .logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ds-on-band); font: 800 26px/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; }
.pfoot .logo .mark { width: 24px; height: 24px; color: var(--ds-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: 24px; }
.pfoot .pfoot__h { margin: 0 0 4px; font: 700 15px/1.3 var(--font-body); letter-spacing: 0; color: var(--ds-on-band); }
.pfoot ul { list-style: none; margin: 0; padding: 0; }
.pfoot__cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ds-on-band-2); text-decoration: none; }
.pfoot__cols a:hover { color: var(--ds-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-block: 8px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-band-rule); font-size: 13px; color: var(--ds-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: 44px; min-width: 44px; color: var(--ds-on-band-2); text-underline-offset: 3px; }
.pfoot__legal a:hover { color: var(--ds-on-band); }
@media (max-width: 819px) {
  .pfoot__in { grid-template-columns: 1fr; gap: 24px; padding-block-start: 32px; }
  .pfoot__cols { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pfoot__legal { flex-direction: column; align-items: flex-start; }
}
.pfoot { --ds-band: var(--ds-ink); --ds-on-band: #fff; --ds-on-band-2: rgba(255,255,255,.78); --ds-band-rule: rgba(255,255,255,.14); }
.pfoot :focus-visible { outline-color: var(--ds-sun); }
.logo .wordmark { height: 34px; width: auto; display: block; }
.pfoot .logo .wordmark { height: 40px; }

/* header: the platform nav (.nav in brand/panelab.css), same markup and menu (panelab.js), with --ds-* tokens.
   /privacy, /confirm and /unsubscribe carry it; the /parent/* grown-up check pages keep the logo-only .site-head. */
.nav { --nav-gut: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right), calc((100% - 1240px) / 2)); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 10px var(--nav-gut); background: color-mix(in srgb, var(--ds-canvas) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ds-line); font-family: var(--font-body); }
.nav .logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-ink-2); font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ds-ink); }
.nav__links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ds-ink); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav__login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--ds-ink); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.nav__login:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav .nav__cta.btn { gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ds-ink); border-radius: 10px; background: var(--ds-ink); color: #fff; font: 700 16px/1.2 var(--font-body); white-space: nowrap; box-shadow: none; transform: none; }
.nav .nav__cta.btn:hover { background: var(--ds-ink-hover); box-shadow: none; transform: none; }
.nav .nav__cta.btn:active { transform: translateY(1px); box-shadow: none; }
.nav__short { display: none; }
.nav__menu { display: none; }
@media (max-width: 1023px) { .nav { gap: 22px; } .nav__links { gap: 18px; } .nav__end { gap: 14px; } .nav__long { display: none; } .nav__short { display: inline; } }
@media (max-width: 819px) {
  .nav { gap: 10px; padding-block: 6px; }
  .nav.open { background: var(--ds-surface); }
  .nav__end { gap: 4px; }
  .nav__login { padding: 0 8px; }
  .nav .nav__cta.btn { padding: 0 14px; }
  .nav__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ds-ink); cursor: pointer; }
  .nav__menu:hover { background: var(--ds-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 clamp(16px, 4vw, 56px) 12px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.12); }
  .nav.open .nav__links { display: flex; }
  .nav__links a { min-height: 52px; font-size: 17px; color: var(--ds-ink); border-bottom: 1px solid var(--ds-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(--ds-ink); padding-left: 12px; }
}
@media (max-width: 359px) { .nav { gap: 4px; } .nav__end { gap: 2px; } .nav__login { padding: 0 6px; } .nav .nav__cta.btn { padding: 0 10px; font-size: 14px; } .nav__menu { margin-right: -8px; } }