/* =====================================================================
   PARENTING TOGETHER · BRAND LAYER (homepage B3)

   Loaded after design.css and app.css on every page. It does two things:
     1. the shared header and footer, on every page;
     2. the homepage, scoped under `main.home` so the form pages, the
        library and the operator page keep their existing layout.

   Two families, fixed roles (self-hosted, SIL OFL 1.1):
     Bricolage Grotesque — headlines, section titles, dialogue
     Figtree             — body, labels, buttons
   ===================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2?v=a97804dc9fbe') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2?v=4ba7d3d09669') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --pt-cream: #FFF6EC; --pt-cream2: #FCEBDD; --pt-peach: #F8DCCF; --pt-peach2: #F3CBB8;
  --pt-coral: #E1503A; --pt-coral2: #C23E2B; --pt-teal: #1F6E69; --pt-teal2: #16524E; --pt-teal-soft: #E3EFED;
  --pt-ink: #241B2F; --pt-muted: #5E5468; --pt-line: #EBD8C8; --pt-white: #FFFDFA;
  --pt-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --pt-sans: 'Figtree', system-ui, sans-serif;
  --pt-h1: clamp(36px, 4.3vw, 58px);
  --pt-h2: clamp(30px, 3.5vw, 44px);
  --pt-h3: 22px;
  --pt-radius: 28px;
}

body { background: var(--pt-cream); color: var(--pt-ink); font-family: var(--pt-sans); }

/* ------------------------------------------------------------- header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1240px, 100% - 36px); margin: 0 auto; padding: 16px 0;
  background: transparent; border: 0; flex-wrap: nowrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 700 19px/1 var(--pt-display); letter-spacing: -.015em; color: var(--pt-ink); text-decoration: none;
}
.wordmark .logo-mark { flex: none; }
.section-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.section-nav a { font: 600 15px var(--pt-sans); color: var(--pt-muted); text-decoration: none; }
.section-nav a:hover { color: var(--pt-ink); }
.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.site-nav .nav-link, .site-nav .linkish { font: 600 16px var(--pt-sans); color: var(--pt-ink); white-space: nowrap; }
.site-nav .nav-library { color: var(--pt-teal); }
.cta-short { display: none; }

/* the one primary button style, everywhere */
.button, .site-header .button {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 54px; padding: 14px 26px; border: 0; border-radius: 16px;
  background: var(--pt-coral); color: #fff; text-decoration: none;
  font: 700 17px/1.2 var(--pt-sans);
  box-shadow: 0 5px 0 var(--pt-coral2), 0 14px 26px -12px #c23e2b88;
  transition: transform .15s, box-shadow .15s;
}
.button:hover { background: var(--pt-coral); transform: translateY(-2px); box-shadow: 0 7px 0 var(--pt-coral2), 0 18px 30px -12px #c23e2b88; }
.site-header .button.cta-small { min-height: 44px; padding: 10px 16px; font-size: 15px; border-radius: 13px; box-shadow: 0 4px 0 var(--pt-coral2); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pt-teal); outline-offset: 4px; }

/* ------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--pt-line); padding: 26px 0 40px; text-align: left; font-size: 15px; color: var(--pt-muted); }
.footer-row { width: min(1240px, 100% - 36px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { color: var(--pt-muted); text-underline-offset: 4px; }

/* =====================================================================
   HOMEPAGE (main.home)
   ===================================================================== */
.home { display: block; width: 100%; padding: 0; }
.home .container { width: min(1240px, 100% - 36px); margin-inline: auto; }
.home section { padding: 96px 0; }
.home h1, .home h2, .home h3 { font-family: var(--pt-display); font-weight: 700; margin: 0; color: inherit; }
.home h2 { font-size: var(--pt-h2); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 14px; }
.home h3 { font-size: var(--pt-h3); line-height: 1.2; letter-spacing: -.015em; }
.home p { margin: 0; }
.home img { display: block; max-width: 100%; }
.home .eyebrow { display: block; font: 600 13px/1.3 var(--pt-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pt-teal); margin: 0 0 12px; }
.home .sub { color: var(--pt-muted); max-width: 36em; font-size: 18px; line-height: 1.6; }
.home .head { margin-bottom: 40px; }
.home .note { font-size: 15px; color: var(--pt-muted); }
.home .label { display: block; font: 700 13px/1 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pt-coral); }

/* B. banner with Nell: no actions inside, by decision */
.home .home-hero { padding: 6px 0 0; }
.home .banner { position: relative; margin: 0; border-radius: var(--pt-radius); overflow: hidden; background: #F4E6D6; }
.home .banner img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
.home .banner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff7eef2 0%, #fff7eee6 38%, #fff7ee99 46%, #fff7ee00 56%); }
.home .hero-copy { position: absolute; z-index: 2; left: 4.5%; top: 50%; transform: translateY(-50%); width: 40%; }
.home .home-hero h1 { font-size: var(--pt-h1); line-height: 1.03; letter-spacing: -.03em; }
.home .home-hero h1 span { display: block; color: var(--pt-coral); }
.home .home-hero .lede { margin-top: 20px; color: var(--pt-muted); font-size: 18px; line-height: 1.6; max-width: 30em; }

/* C. ages */
.home .ages { display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; }
.home .age { display: grid; gap: 18px; align-content: start; }
.home .frame { position: relative; aspect-ratio: 3/2; border-radius: 24px; overflow: hidden; background: #EAD8C8; box-shadow: 0 24px 46px -30px #6b2f2277; }
.home .frame img { width: 100%; height: 100%; object-fit: cover; }
.home .tag { font: 700 13px/1 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pt-teal); }
.home .tag i { font-style: normal; color: var(--pt-coral); }
.home .age h3 { margin: 8px 0 10px; }
.home .themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.home .themes li { font: 600 14px var(--pt-sans); background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 999px; padding: 6px 12px; color: var(--pt-muted); }

/* D. the parent in the picture — teal band, light text, warm accents */
.home .parent { background: var(--pt-teal); color: #EAF4F2; }
.home .parent .eyebrow { color: #F7C6B6; }
.home .parent h2 { color: #fff; }
.home .parent .sub { color: #CFE5E1; }
.home .parent-grid { display: grid; gap: 34px; }
.home .feelings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.home .feelings li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid #ffffff2b; }
.home .feelings li:last-child { border-bottom: 1px solid #ffffff2b; }
.home .feelings .mark { width: 28px; height: 28px; border-radius: 50%; background: var(--pt-peach); color: var(--pt-teal2); display: grid; place-items: center; font: 700 14px var(--pt-sans); margin-top: 4px; }
.home .feelings q { display: block; font: 600 24px/1.25 var(--pt-display); letter-spacing: -.01em; color: #fff; quotes: "“" "”"; }
.home .feelings p { margin-top: 6px; color: #D5E8E5; font-size: 17px; line-height: 1.55; }
.home .parent .aside { margin-top: 22px; font-size: 15px; color: #B7D6D1; }

/* E. sound familiar */
.home .moments { background: var(--pt-white); border-block: 1px solid var(--pt-line); }
.home .lead { display: grid; gap: 28px; align-items: center; margin-bottom: 64px; }
.home .lead .art { margin: 0; border-radius: var(--pt-radius); overflow: hidden; background: #FBF1E6; box-shadow: 0 28px 54px -32px #6b2f2277; }
.home .lead .art img { width: 100%; height: auto; aspect-ratio: 3/2; }
.home .lead h3 { margin: 10px 0 18px; }
.home .exchange { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.home .exchange li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: baseline; }
.home .exchange .who { font: 700 13px/1 var(--pt-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-muted); }
.home .exchange .line { font: 600 22px/1.3 var(--pt-display); letter-spacing: -.01em; }
.home .exchange .nell .line { color: var(--pt-teal); }
.home .why { font-size: 16px; line-height: 1.55; color: var(--pt-muted); border-left: 3px solid var(--pt-peach2); padding-left: 14px; }
.home .duo { display: grid; gap: 28px; }
.home .ex { display: grid; gap: 20px; align-content: start; background: var(--pt-cream); border: 1px solid var(--pt-line); border-radius: var(--pt-radius); padding: 18px; }
.home .ex h3 { margin: 10px 0 8px; }
.home .talk { list-style: none; margin: -4px 0 4px; padding: 0; display: grid; gap: 10px; }
.home .talk li { display: grid; gap: 4px; max-width: 82%; }
.home .talk .kid { justify-self: end; justify-items: end; }
.home .talk .nell { justify-self: start; }
.home .talk .who { font: 700 12px/1 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pt-muted); }
.home .talk p { background: var(--pt-white); border: 1px solid var(--pt-line); color: var(--pt-ink); font: 600 19px/1.3 var(--pt-display); padding: 11px 16px; border-radius: 18px 18px 6px 18px; box-shadow: 0 10px 22px -16px #3a1e1466; }
.home .talk .nell p { background: var(--pt-teal-soft); border-color: #cfe3df; border-radius: 18px 18px 18px 6px; color: var(--pt-teal2); }

/* F. ideas — warm band (the teal band belongs to the parent section) */
.home .ideas { background: var(--pt-peach); }
.home .three { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
.home .idea { padding: 26px 24px 24px; border-radius: 24px; background: #FFF4EC; border: 1px solid var(--pt-peach2); }
.home .idea svg { width: 44px; height: 44px; margin-bottom: 16px; }
.home .idea h3 { margin-bottom: 8px; }
.home .idea p { color: var(--pt-muted); font-size: 17px; line-height: 1.55; }
.home .ideas .small { margin-top: 26px; font-size: 15px; color: #6f5a59; }

/* G. your next small step */
.home .steps { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.home .step { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: var(--pt-white); border: 1px solid var(--pt-line); }
.home .step .when { font: 700 13px/1 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pt-teal); }
.home .step .ctx { color: var(--pt-muted); font-size: 16px; line-height: 1.55; }
.home .step blockquote { margin: 0; font: 600 23px/1.3 var(--pt-display); letter-spacing: -.01em; }
.home .step blockquote span { display: block; margin-bottom: 4px; color: var(--pt-muted); font: 500 16px var(--pt-sans); }
.home .step.pause { background: var(--pt-peach); }
/* the step for the parent: its own row, its own tone */
.home .step.self { background: var(--pt-teal-soft); border-color: #cfe3df; }
.home .step.self .when { color: var(--pt-teal2); }
.home .step.self blockquote { color: var(--pt-teal2); }

/* H. guide — the tilted card is approved; keep its rotation and shadow */
.home .guide { background: linear-gradient(180deg, var(--pt-cream2), var(--pt-cream)); }
.home .guide-grid { display: grid; gap: 40px; align-items: center; }
.home .sheet { background: #FCF8F1; color: #33263A; border-radius: 12px; padding: 30px 30px 34px; box-shadow: 0 34px 60px -30px #6b2f2288; transform: rotate(-1.5deg); max-width: 520px; width: 100%; margin-inline: auto; }
.home .sheet .k { color: #A3442C; font: 700 11px/1.3 var(--pt-sans); letter-spacing: .06em; text-transform: uppercase; }
.home .sheet .t { font: 400 40px/1 Georgia, serif; margin: 14px 0 6px; }
.home .sheet .i { font: italic 17px/1.4 Georgia, serif; margin: 0 0 14px; }
.home .sheet p { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
.home .sheet .n { color: #A3442C; font: 700 11px/1.3 var(--pt-sans); letter-spacing: .05em; text-transform: uppercase; margin-top: 16px; }
.home .sheet .q { font: italic 19px/1.35 Georgia, serif; margin: 4px 0; }
.home .sheet .more { margin-top: 18px; font: 600 13px var(--pt-sans); color: #8a7a80; }
.home .facts { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home .facts li { background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 16px; padding: 12px 14px; font-size: 15px; color: var(--pt-muted); }
.home .facts b { display: block; font: 700 20px var(--pt-display); color: var(--pt-ink); }
.home .cta-note { margin-top: 14px; }

/* I. closing */
.home .closing { text-align: center; padding: 96px 0 80px; }
.home .portrait { width: 128px; height: 128px; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 0 0 6px var(--pt-white), 0 18px 34px -14px #6b2f2288; }
.home .portrait img { position: absolute; max-width: none; width: 354.8%; height: auto; left: -193%; top: -11%; }
.home .closing h2 { max-width: 16em; margin-inline: auto; }
.home .closing h2 span { color: var(--pt-coral); }
.home .closing .actions { margin-top: 24px; display: flex; justify-content: center; }
.home .closing .actions .button { width: auto; }

/* =====================================================================
   ACCOUNT PAGES (main.wrap): sign in, register, recovery, new password,
   library, account, operator and every message/refusal page.

   Same type, colours and buttons as the homepage. No banner, no scenes:
   on these pages the form and its button come first.
   ===================================================================== */
main.wrap { width: min(1240px, 100% - 36px); margin-inline: auto; padding: 24px 0 72px; }

/* titles: the B3 display family replaces the remaining Georgia headings */
main.wrap h1, main.wrap h2, main.wrap h3 { font-family: var(--pt-display); font-weight: 700; color: var(--pt-ink); }
main.wrap .panel h1 { font-size: clamp(28px, 2.2vw + 18px, 36px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 10px; }
main.wrap .panel.narrow h1 { font-size: clamp(26px, 1.6vw + 18px, 32px); }
main.wrap .panel h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.015em; margin: 28px 0 10px; }
main.wrap p { font-size: 17px; line-height: 1.6; }
main.wrap .lede { font-size: 17px; color: var(--pt-muted); margin: 0 0 6px; }
main.wrap .muted { color: var(--pt-muted); }

/* the card every one of these pages sits in */
main.wrap .panel {
  background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 24px;
  padding: 32px; margin: 0 auto 24px; box-shadow: 0 24px 50px -36px #6b2f2255;
}
main.wrap .panel.narrow { max-width: 480px; }

/* forms: compact, labelled, obvious focus */
main.wrap .stack { display: grid; gap: 16px; margin-top: 18px; }
main.wrap .field { display: grid; gap: 6px; }
main.wrap .field-label { font: 600 15px/1.3 var(--pt-sans); color: var(--pt-ink); }
main.wrap .field input {
  min-height: 50px; padding: 12px 14px; font: 400 17px var(--pt-sans); color: var(--pt-ink);
  background: var(--pt-cream); border: 1.5px solid #E0CBB9; border-radius: 12px;
}
main.wrap .field input:hover { border-color: #CDB3A0; }
main.wrap .field input:focus-visible { outline: 3px solid var(--pt-teal); outline-offset: 2px; border-color: var(--pt-teal); background: #fff; }
main.wrap .hint { font-size: 14px; line-height: 1.45; color: var(--pt-muted); }
main.wrap .check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--pt-ink); }
main.wrap .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pt-teal); flex: none; }
main.wrap .check input:focus-visible { outline: 3px solid var(--pt-teal); outline-offset: 2px; }
main.wrap .stack .button { width: 100%; margin-top: 4px; }
main.wrap .form-aside { margin: 18px 0 0; }
main.wrap .text-link, main.wrap .panel a:not(.button):not(.button-secondary) {
  color: var(--pt-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}

/* the problems with what was submitted, above the form */
main.wrap .issues {
  margin: 16px 0 0; padding: 14px 16px 14px 34px; border-radius: 14px;
  background: #FDE9E3; border: 1px solid #F3BFB1; color: #7A2416; font-size: 16px; line-height: 1.5;
}
main.wrap .issues li + li { margin-top: 4px; }

/* flash messages */
main.wrap .flash { max-width: 480px; margin: 0 auto 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--pt-line); font-size: 16px; }
main.wrap .panel .flash { max-width: none; margin: 0 0 16px; }
main.wrap .flash-ok { background: #FFF1CF; border-color: #F1D98E; }
main.wrap .flash-error { background: #FDE9E3; border-color: #F3BFB1; }
main.wrap .flash-info { background: var(--pt-teal-soft); border-color: #cfe3df; color: var(--pt-teal2); }

/* a secondary action: real, quieter than the primary one */
.button-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px;
  border: 1.5px solid var(--pt-teal); border-radius: 14px; background: transparent; color: var(--pt-teal);
  font: 700 16px/1.2 var(--pt-sans); text-decoration: none; text-align: center;
}
.button-secondary:hover { background: var(--pt-teal-soft); }
main.wrap .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0; }
/* side by side with a primary button, the outline one matches its height */
main.wrap .actions .button-secondary { min-height: 54px; padding-inline: 22px; border-radius: 16px; }

/* the library: the guide as an object, the download obvious */
main.wrap .materials { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
main.wrap .material {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 20px; align-items: center;
  padding: 18px; border: 1px solid var(--pt-line); border-radius: 20px; background: var(--pt-cream);
}
main.wrap .material-cover {
  aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 9px; background: #FCF8F1; border-radius: 6px; transform: rotate(-3deg);
  box-shadow: 0 14px 26px -14px #6b2f2288, 0 0 0 1px #E8DDCD;
}
main.wrap .cover-kicker { font: 700 7px/1.2 var(--pt-sans); letter-spacing: .06em; text-transform: uppercase; color: #A3442C; }
main.wrap .cover-title { font: 400 17px/1.05 Georgia, serif; color: #33263A; }
main.wrap .material h2 { font-size: 22px; margin: 0 0 6px; }
main.wrap .material p { margin: 0 0 6px; font-size: 16px; }
main.wrap .material .meta { font-size: 14px; color: var(--pt-muted); margin: 0; }
main.wrap .material .button { width: auto; }
/* Download first and solid; Read online beside it in outline, so the two never look alike */
main.wrap .material-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
main.wrap .material-actions .button-secondary { min-height: 54px; padding-inline: 22px; border-radius: 16px; }
main.wrap .footnote { font-size: 15px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--pt-line); }

/* the account */
main.wrap .facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 18px 0 6px; font-size: 16px; }
main.wrap .facts dt { font-weight: 600; color: var(--pt-muted); }
main.wrap .facts dd { margin: 0; color: var(--pt-ink); overflow-wrap: anywhere; }
main.wrap .data-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
main.wrap .panel form:last-child { margin-top: 24px; }

/* operator tables keep their structure; only type and colour change */
main.wrap .admin-table th { font-family: var(--pt-sans); }
/* The per-row select labels are .sr-only (position: absolute). Without a
   positioned ancestor they escaped the scrolling box and widened the whole
   phone page to 432px. Anchoring them here keeps them inside it. */
main.wrap .table-scroll { position: relative; }
main.wrap .button.small { min-height: 38px; padding: 6px 14px; font-size: 14px; border-radius: 10px; box-shadow: 0 3px 0 var(--pt-coral2); }
main.wrap select { min-height: 38px; border-radius: 10px; border: 1.5px solid #E0CBB9; padding: 4px 8px; font: 500 15px var(--pt-sans); background: #fff; }

/* =====================================================================
   CONTACT AND FREE GUIDES (main.wrap): same type, colours, buttons and
   spacing as the account pages. No new font, no animation.
   ===================================================================== */
main.wrap .panel.contact { max-width: 620px; }
main.wrap .field textarea {
  min-height: 170px; padding: 12px 14px; font: 400 17px/1.5 var(--pt-sans); color: var(--pt-ink); resize: vertical;
  background: var(--pt-cream); border: 1.5px solid #E0CBB9; border-radius: 12px; width: 100%; box-sizing: border-box;
}
main.wrap .field textarea:hover { border-color: #CDB3A0; }
main.wrap .field textarea:focus-visible { outline: 3px solid var(--pt-teal); outline-offset: 2px; border-color: var(--pt-teal); background: #fff; }
/* the honeypot: off screen for people, still in the form for scripts */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.home .text-link { color: var(--pt-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* the library of free guides */
main.wrap .resources { max-width: 1040px; margin: 0 auto; }
/* design.css pads every <section> by 70px; the library's plain sections space themselves */
main.wrap .resources > section:not([class]) { padding: 0; }
main.wrap .res-related { padding: 0; margin: 44px 0 0; }
main.wrap .resources h1 { font-size: var(--pt-h1); line-height: 1.05; letter-spacing: -.03em; margin: 6px 0 12px; }
main.wrap .resources h2 { font-size: clamp(24px, 2vw + 14px, 32px); line-height: 1.15; letter-spacing: -.02em; margin: 44px 0 14px; }
main.wrap .resources h3 { font-size: var(--pt-h3); line-height: 1.25; margin: 6px 0 10px; }
main.wrap .resources .lede { font-size: 19px; max-width: 680px; }
main.wrap .resources .tag { font: 700 13px/1.2 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pt-teal); }
main.wrap .resources .themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
main.wrap .resources .themes li { font: 600 14px var(--pt-sans); background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 999px; padding: 6px 12px; color: var(--pt-muted); }
main.wrap .resources a:not(.button):not(.button-secondary) { color: var(--pt-teal); font-weight: 600; text-underline-offset: 4px; }

main.wrap .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 15px; color: var(--pt-muted); }
main.wrap .crumbs li + li::before { content: "/"; margin-right: 6px; color: #C9B6A6; }

/* the paper cover: the cover sheet and its text tilt together; a second
   sheet lies behind it, nearly straight, for depth.
   Both sheets are pseudo-elements at z-index -1 inside the cover's own
   stacking context (the transform creates one). A z-index -1 child paints
   ABOVE its parent's background, so with the paper colour on the cover
   itself the back sheet covered it and the text seemed to float, tilted,
   over a straight card. The cover's paper is therefore ::after, painted
   after the back sheet and under the text. */
main.wrap .paper-cover {
  position: relative; z-index: 0; aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px; background: transparent; border-radius: 6px; transform: rotate(-3deg);
  box-shadow: 0 1px 0 #E8DDCD, 0 10px 18px -12px #6b2f2266, 0 26px 44px -26px #6b2f2288, 0 0 0 1px #E8DDCD;
}
main.wrap .paper-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #F4EADC;
  transform: rotate(4deg) translate(5px, 3px); box-shadow: 0 0 0 1px #E2D4C1;
}
main.wrap .paper-cover::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #FCF8F1;
  box-shadow: 0 0 0 1px #E8DDCD;
}
main.wrap .paper-cover .cover-kicker { font: 700 8px/1.2 var(--pt-sans); letter-spacing: .06em; text-transform: uppercase; color: #A3442C; }
main.wrap .paper-cover .cover-title { font: 400 20px/1.05 Georgia, serif; color: #33263A; margin-top: auto; }
main.wrap .paper-cover .cover-sub { font: italic 11px/1.3 Georgia, serif; color: #5b4b55; }
main.wrap .paper-small { width: 120px; flex: none; }
main.wrap .paper-large { width: min(240px, 60vw); margin: 10px auto 18px; }
main.wrap .paper-large .cover-kicker { font-size: 10px; }
main.wrap .paper-large .cover-title { font-size: 34px; }
main.wrap .paper-large .cover-sub { font-size: 15px; }

main.wrap .res-grid { display: grid; gap: 18px; }
main.wrap .res-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: start;
  padding: 26px; background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 24px;
  box-shadow: 0 24px 50px -36px #6b2f2255;
}
main.wrap .res-card h3 { font-size: 26px; margin: 8px 0 8px; }
main.wrap .res-card h3 a { color: var(--pt-ink); text-decoration: none; }
main.wrap .res-card h3 a:hover { text-decoration: underline; }
main.wrap .res-card p { margin: 0 0 8px; }
main.wrap .res-card .actions { margin-top: 14px; }
main.wrap .res-who { color: var(--pt-ink); }
main.wrap .res-meta { font-size: 14px; color: var(--pt-muted); }
main.wrap .res-ages { display: grid; gap: 16px; }
main.wrap .res-age { padding: 22px; background: var(--pt-cream); border: 1px solid var(--pt-line); border-radius: 20px; }
main.wrap .res-fits { margin: 4px 0 0; font-size: 16px; }
main.wrap .res-cta {
  margin: 44px 0 0; padding: 28px; border-radius: 24px; background: linear-gradient(180deg, var(--pt-cream2), var(--pt-cream));
  border: 1px solid var(--pt-line);
}
main.wrap .res-cta h2 { margin-top: 0; }
main.wrap .res-note { font-size: 15px; }

/* the guide itself: one heading font (display), one reading font (Figtree)
   for every line of dialogue; one card per exchange, nothing nested in it */
main.wrap .guide-head { display: grid; gap: 10px; align-items: center; margin-top: 10px; }
main.wrap .guide-sub { font: 500 19px/1.5 var(--pt-sans); color: var(--pt-muted); margin: 0 0 14px; }
main.wrap .guide-read { margin: 56px 0 0; max-width: 720px; color: var(--pt-ink); }
main.wrap .guide-read h2 { font-size: clamp(28px, 2vw + 18px, 36px); line-height: 1.15; letter-spacing: -.02em; margin: 52px 0 10px; }
main.wrap .guide-read h2:first-child { margin-top: 0; }
main.wrap .guide-read h3 { font-size: 21px; margin: 40px 0 10px; }
main.wrap .guide-read p, main.wrap .guide-read li { font-size: 18px; line-height: 1.6; }
main.wrap .examples { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
main.wrap .ex { padding: 24px 26px; background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 20px; }
main.wrap .ex p { margin: 0; }
main.wrap .ex-when { font-weight: 700; color: var(--pt-teal); }
main.wrap .ex-n { display: inline-block; min-width: 2.2em; color: var(--pt-muted); font-weight: 600; }
main.wrap .ex-say { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--pt-coral); }
main.wrap .speaker { display: block; font: 700 13px/1.3 var(--pt-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-coral2); }
main.wrap .guide-read .ex-line { font-size: 21px; line-height: 1.45; font-weight: 600; margin-top: 4px; }
main.wrap .ex-note { color: var(--pt-muted); }
main.wrap .guide-prompt { margin: 14px 0 0; padding-left: 16px; border-left: 3px solid var(--pt-line); color: var(--pt-muted); }
main.wrap .guide-prompt + .guide-prompt { margin-top: 8px; }
main.wrap .guide-follow { margin: 0; padding-left: 1.2rem; }
main.wrap .guide-read .guide-small { font-size: 15px; line-height: 1.55; color: var(--pt-muted); margin-top: 28px; }

/* premium guides: the approved cover as the same tilted paper card */
main.wrap .photo-cover { position: relative; z-index: 0; transform: rotate(-3deg); border-radius: 6px; flex: none; }
main.wrap .photo-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #F4EADC;
  transform: rotate(4deg) translate(5px, 3px); box-shadow: 0 0 0 1px #E2D4C1;
}
main.wrap .photo-cover img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 1px 0 #E8DDCD, 0 10px 18px -12px #6b2f2266, 0 26px 44px -26px #6b2f2288, 0 0 0 1px #E8DDCD;
}
main.wrap .photo-small { width: 120px; }
main.wrap .material-photo { width: 100%; }

/* the online reader: the guide's pages one under the other, fitted to the page */
main.wrap .reader { max-width: 860px; margin: 0 auto; }
main.wrap .reader-head { margin: 4px 0 22px; }
main.wrap .reader-head h1 { margin: 10px 0 12px; }
main.wrap .reader-back { margin: 0 0 12px; }
main.wrap .reader-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
main.wrap .reader-page img {
  display: block; width: 100%; height: auto; border-radius: 6px; background: #FCF8F1;
  box-shadow: 0 0 0 1px #E8DDCD, 0 18px 36px -24px #6b2f2266;
}
main.wrap .reader-end { margin: 26px 0 0; text-align: center; font-size: 16px; }
main.wrap .photo-large { width: min(280px, 60vw); margin: 10px auto 18px; }
main.wrap .premium-notice {
  margin: 18px 0 10px; padding: 16px 18px; border-radius: 16px; background: var(--pt-cream);
  border: 1px solid var(--pt-line); border-left: 4px solid var(--pt-coral);
}
main.wrap .premium-notice p { margin: 0; }
main.wrap .premium-notice .premium-notice-title { font: 700 15px/1.3 var(--pt-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pt-coral2); margin-bottom: 6px; }
main.wrap .guide-head .actions + .res-note { margin-top: 12px; }
main.wrap .premium-buy { display: grid; gap: 12px; margin: 14px 0 6px; max-width: 560px; }
main.wrap .premium-buy .actions { margin: 6px 0 0; }
main.wrap .premium-price .price { font: 700 26px/1.2 var(--pt-sans); color: var(--pt-ink); }
main.wrap .premium-inside { margin: 0 0 14px; padding-left: 1.2rem; max-width: 720px; }
main.wrap .premium-inside li { font-size: 18px; line-height: 1.6; }
main.wrap .premium-shelf { margin-top: 24px; }
main.wrap .premium-shelf h2 { font-size: 20px; margin: 0 0 8px; }
main.wrap .premium-shelf ul { margin: 0; padding-left: 1.2rem; }
main.wrap .premium-shelf a { color: var(--pt-teal); font-weight: 600; }

@media (max-width: 560px) {
  main.wrap { padding: 14px 0 56px; }
  main.wrap .panel { padding: 22px 18px; border-radius: 20px; }
  main.wrap .material { grid-template-columns: 76px 1fr; gap: 14px; padding: 14px; }
  main.wrap .material .button { grid-column: 1 / -1; width: 100%; }
  main.wrap .material-actions { grid-column: 1 / -1; }
  main.wrap .material-actions .button, main.wrap .material-actions .button-secondary { width: 100%; }
  main.wrap .cover-title { font-size: 12px; }
  main.wrap .cover-kicker { font-size: 6px; }
  main.wrap .facts { grid-template-columns: 1fr; gap: 2px; }
  main.wrap .facts dd { margin-bottom: 10px; }
  main.wrap .data-actions .button-secondary, main.wrap .actions .button, main.wrap .actions .button-secondary { width: 100%; }
  main.wrap .res-card { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  main.wrap .res-card .paper-small { width: 104px; margin: 4px 0 0 6px; }
  main.wrap .res-card .photo-small { width: 104px; margin: 4px 0 0 6px; }
  main.wrap .photo-large { width: 170px; margin: 6px 0 18px 8px; }
  main.wrap .premium-inside li { font-size: 17px; line-height: 1.55; }
  main.wrap .res-age, main.wrap .res-cta { padding: 20px 18px; }
  main.wrap .paper-large { width: 150px; margin: 6px 0 18px 8px; }
  main.wrap .paper-large .cover-title { font-size: 22px; }
  main.wrap .paper-large .cover-sub { font-size: 11px; }
  main.wrap .paper-large .cover-kicker { font-size: 8px; }
  main.wrap .guide-read p, main.wrap .guide-read li { font-size: 17px; line-height: 1.55; }
  main.wrap .ex { padding: 18px 18px; }
  main.wrap .guide-read .ex-line { font-size: 19px; line-height: 1.45; }
}

/* ------------------------------------------------------------- wide screens */
@media (min-width: 900px) {
  main.wrap .guide-head { grid-template-columns: 260px 1fr; gap: 48px; }
  main.wrap .guide-head .paper-large { margin: 10px 0; }
  main.wrap .guide-head .photo-large { margin: 10px 0; width: 100%; }
  main.wrap .res-ages { grid-template-columns: repeat(3, 1fr); }
  .home .ages { grid-template-columns: repeat(3, 1fr); }
  .home .parent-grid { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
  .home .lead { grid-template-columns: 1.45fr 1fr; gap: 48px; }
  .home .duo { grid-template-columns: 1fr 1fr; }
  .home .three { grid-template-columns: repeat(3, 1fr); }
  .home .steps { grid-template-columns: 1fr 1fr 1fr; }
  .home .step.self { grid-column: 1 / -1; grid-template-columns: 220px 1fr; column-gap: 32px; align-items: start; }
  .home .step.self .when { grid-row: span 3; padding-top: 6px; line-height: 1.5; }
  .home .guide-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .home section { padding: 110px 0; }
}

/* the banner copy no longer fits beside Nell: stack it under the photo */
@media (max-width: 1079px) {
  .home .banner::after { display: none; }
  .home .hero-copy { position: static; transform: none; width: auto; padding: 24px 20px 26px; }
  .home .banner img { aspect-ratio: 4/3; object-position: 100% 30%; }
  .home .home-hero { padding-bottom: 10px; }
}

@media (max-width: 899px) {
  .section-nav { display: none; }
  /* A member's header (Library, Account, Operator, Sign out) is wider than a
     phone: it moves to a second row instead of pushing the page sideways.
     The visitor's header (Sign in + one button) still fits on one row. */
  .site-header { gap: 10px; flex-wrap: wrap; }
  .site-nav { flex-wrap: wrap; gap: 8px 16px; }
  .home section { padding: 72px 0; }
}

@media (max-width: 420px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .site-nav { gap: 10px; }
  .site-nav .nav-link, .site-nav .linkish { font-size: 15px; }
  .wordmark { font-size: 16px; gap: 8px; }
  .wordmark .logo-mark { width: 30px; height: 30px; }
  .site-header .button.cta-small { padding: 10px 13px; }
  .home .home-hero h1 { font-size: 36px; }
  .home .facts li { padding: 10px 12px; font-size: 14px; }
  .home .facts b { font-size: 18px; }
}