/* Parent landing (/parents/), the Meta ad landing. Seven stops: hero with a playable panel, homework vs story,
   one episode in four steps, what the comics build, subjects, report + safety, price + FAQ + the marigold band.
   Everything sits on the canvas; white is only for cards (the demo, the comic, the report, the plans).
   Tokens, .sec, .tile, .badge, .ic-chip, .ic-list, .demo__opt, .faq, .cta-band and .sticky-cta come from panelab.css;
   the [data-demo] choice logic is in panelab.js. */

/* ---------- 1. hero ---------- */
.p-hero { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding: var(--s7) var(--gut) calc(var(--sec-y) / 2); }
.p-hero__copy { padding-top: 0; }
.p-title { margin: 0 0 18px; font: 800 clamp(36px, 4.3vw, 60px)/1.02 var(--display); letter-spacing: -.025em; }
.p-lede { margin: 0 0 28px; max-width: 44ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.45; }
.p-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.p-textlink { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; }
.p-textlink:hover { text-decoration-thickness: 3px; }

/* the playable panel: a whole comic panel (about square), the question, two real choices, then the consequence
   and the math. From 1100px the panel sits left of the question so the hero stays short; below that it stacks. */
.demo { border-radius: var(--r-sheet); overflow: hidden; background: var(--surface); box-shadow: var(--e2); }
.demo__art { position: relative; aspect-ratio: 716 / 708; background: var(--surface-2); }
.demo__pane { position: absolute; inset: 0; }
@media (min-width: 1100px) {
  .demo { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); align-items: start; }
  .demo .demo__opts { grid-template-columns: 1fr; }
}
.demo__ui { display: grid; gap: 12px; padding: 18px 20px 20px; }
.demo__q { margin: 0; font: 700 var(--t-sub)/1.3 var(--body); }
.demo__out { display: grid; gap: 10px; justify-items: start; }
.demo__then { margin: 0; font-size: var(--t-small); line-height: 1.45; }
.demo__hint { margin: 0; width: 100%; padding: 10px 12px; border-radius: var(--r-control); background: var(--sun-soft); color: var(--ink-2); font-size: var(--t-small); }
.demo__hint b { color: var(--ink); }
.demo__go { margin-top: 2px; }
.demo [hidden] { display: none; }

/* ---------- 2. homework, then the story: two equal pictures, an ink arrow between (a down arrow when stacked) ---------- */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.6vw, 20px); margin-top: var(--s2); }
.vs img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.vs__arrow { width: clamp(32px, 3vw, 44px); height: auto; color: var(--ink); }

/* ---------- 3. one episode, four steps: a 4-up row, a 2x2 grid on phones ---------- */
.walk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.walk li { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
/* whole panels (716x708 crops), so every balloon stays in */
.walk__art { aspect-ratio: 716 / 708; }
.walk__n { display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; font: 700 var(--t-body)/1.25 var(--body); }
/* the step number: a marigold circle with a Bricolage numeral (no icons on the steps) */
.step-n { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font: 800 18px/1 var(--display); }
.walk__t { margin: 0 16px 18px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }

/* ---------- 4. subjects: six covers grouped Math / Science / Code ---------- */
.subjects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.subj { display: grid; grid-template-columns: subgrid; align-content: start; }
.subj--3 { grid-column: span 3; } .subj--2 { grid-column: span 2; } .subj--1 { grid-column: span 1; }
.subj__h { grid-column: 1 / -1; margin: 0 0 14px; padding-top: 10px; border-top: 2px solid var(--ink); font: 700 var(--t-body)/1.3 var(--body); }
.subj__list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.subj .tile__art { position: relative; aspect-ratio: 3 / 2; }
/* the covers carry their titles top-left, so the badge sits bottom-left, 6px in */
.subj .tile__art .badge { position: absolute; left: 6px; bottom: 6px; }
.topic { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.3; }
.topic .ic { width: 16px; height: 16px; }
.skills { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: center; margin-top: var(--s6); padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.skills__h { margin: 0; font-weight: 700; }
.skills__list { grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.skills__list b { display: block; font: 800 var(--t-sub)/1.2 var(--display); }
.skills__list span { color: var(--ink-2); font-size: var(--t-small); }
.skills__more { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); font-weight: 700; }
.skills__more .ic { width: 18px; height: 18px; }

/* ---------- 5. what a parent sees + safety: the centred head and wide report document of how.css section 4
   (same class names; rules copied so /how-it-works/ keeps its own sheet), then the safety list at the report's width ---------- */
.rep-head { max-width: 760px; margin: 0 auto; text-align: center; }
.rep-head .sub { max-width: 54ch; margin-inline: auto; }
.rep { max-width: 820px; margin: var(--s7) auto 0; }
.report { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "top top" "facts side"; gap: 20px 40px; padding: 28px 40px 32px; border: 1px solid var(--line); border-radius: var(--r-sheet); background: var(--surface); box-shadow: var(--e1); }
.report__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.report__tag { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: var(--t-meta); font-weight: 700; }
.report__tag .ic { width: 18px; height: 18px; }
.report h3 { order: -1; margin: 0; font: 800 var(--t-sheet)/1.15 var(--display); }
.report dl { grid-area: facts; display: grid; gap: 10px; margin: 0; }
.report dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.report dt { color: var(--ink-2); }
.report dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.report__side { grid-area: side; display: flex; flex-direction: column; gap: 12px; }
.report__skills { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.report__skills b { color: var(--ink); }
.report__next { margin: 0; padding: 12px 14px; border-radius: var(--r-control); background: var(--sun-soft); font-size: var(--t-small); line-height: 1.5; }
/* the safety list under the report: two columns at the report's width, one on phones */
.seen__safe { margin-top: var(--s7); scroll-margin-top: 76px; }
.seen__safe .subhead { margin-bottom: 20px; }
.seen__safe .ic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.seen__link { margin: 8px 0 0; font-size: var(--t-small); font-weight: 600; }
.seen__link a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- 6. price + questions (the .cta-band follows) ---------- */
.p-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 64px); margin-top: var(--s8); }
.p-faq .subhead { margin-top: 16px; }

@media (max-width: 1023px) {
  .rep { max-width: 760px; }
  .report { padding: 24px; }
  .p-faq { grid-template-columns: 1fr; }
  .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .p-hero { grid-template-columns: 1fr; gap: 28px; padding-top: var(--s5); }
  .p-lede { font-size: var(--t-body); }
  .vs { grid-template-columns: 1fr; justify-items: center; gap: 6px; margin-top: 0; }
  .vs__arrow { width: 24px; transform: rotate(90deg); }
  /* subjects: one compact row per series, grouped under its subject */
  .subjects { display: block; }
  .subj + .subj { margin-top: var(--s5); }
  .subj, .subj__list { display: grid; grid-template-columns: 1fr; }
  .subj__list { row-gap: 12px; }
  .subj .tile { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 2px; }
  .subj .tile__art { grid-row: 1 / span 2; margin: 0; }
  .subj .tile__title { align-self: end; }
  .subj .topic { align-self: start; }
  .skills { grid-template-columns: 1fr; padding: 18px; }
  .skills__list { grid-template-columns: 1fr; }
  .skills__more { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .rep { margin-top: var(--s5); }
  .report { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "facts" "side"; gap: 16px; padding: 18px; }
  .report__top { flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
  .report h3 { font-size: var(--t-sub); }
  .seen__safe { margin-top: var(--s6); }
  .seen__safe .ic-list { grid-template-columns: minmax(0, 1fr); }
  .walk { gap: 10px; }
  .walk__n { gap: 8px; margin: 10px 10px 4px; font-size: var(--t-small); }
  .step-n { width: 26px; height: 26px; font-size: 15px; }
  .walk__t { margin: 0 10px 12px; font-size: var(--t-meta); }
  .demo__ui { padding: 14px 14px 16px; }
  .demo__q { font-size: var(--t-body); }
  .demo__opt { min-height: 48px; padding: 8px 10px; font-size: var(--t-meta); }
  .demo__go { width: 100%; }
}
@media (max-width: 480px) {
  .p-hero__actions { justify-content: center; gap: 4px; }
  .p-hero__actions .btn { width: 100%; }
}

/* homework vs comic: one speech balloon per panel (owner, 2026-10-16). brand/balloons.js draws the oval and the tail
   around the measured words (one ink outline, no seam at the tail) and aims the tail at Alexa's mouth; the custom
   properties below place it, as fractions of the picture. Lettering scales with the picture (cqw), 13px at the least,
   and the oval grows round the words, so nothing clips. Without the script the words keep a plain CSS oval. */
.vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); justify-items: stretch; }
.vs__p { position: relative; width: 100%; margin: 0; container-type: inline-size; --paper: #fff; }
.vs__p img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 6px; }
.vs__p .bl { position: absolute; z-index: 2; left: 3%; top: 4%; width: max-content; margin: 0; padding: .6em 1.1em; box-sizing: content-box;
  border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
  font: 800 clamp(13px, 3cqw, 19px)/1.06 var(--display); letter-spacing: 0; text-align: center; text-transform: uppercase; }
.vs__p .bl[data-anchor="right"] { left: auto; right: 3%; }
.vs__p.is-drawn .bl { padding: 0; border: 0; background: none; }
.bl-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bl-art__ink { fill: var(--ink); stroke: var(--ink); stroke-linejoin: round; }
.bl-art__paper { fill: var(--paper); }
/* Alexa's mouth sits near (45%, 40%) in the homework picture and (43%, 38%) in the comic one; the faces span about
   38-56% and 35-48% across, so the ovals keep to the window (left) and the wall (right) */
.vs__bl--hw    { --ax: .025; --ay: .04; --tip-x: .37; --tip-y: .35; --bend: -.12; }
.vs__bl--comic { --ax: .05;  --ay: .04; --tip-x: .50;  --tip-y: .33; --bend: .12; }
@container (max-width: 480px) {
  .vs__bl--hw    { --ax: .02; --ay: .03; }
  .vs__bl--comic { --ax: .02; --ay: .03; }
}
/* phones: 13px lettering is a bigger share of a small picture, so the balloon breaks out over the panel's top
   border (as comics do) and stays off her face */
@media (max-width: 440px) {
  .vs__p { margin-top: 5vw; }
  .vs__bl--hw, .vs__bl--comic { --ay: -.1; }
}
@media (max-width: 349px) { .vs__p .bl { font-size: 12px; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- 3b. what the comics build: five skills on a dashed story path. Across from 960px (nodes zig-zag on the
   wave), a vertical list below it with a dashed wiggle from each node down to the next ---------- */
.grows__map { position: relative; margin-top: var(--s6); }
.grows__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.grows__list li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; text-align: center; }
.grows__list li:nth-child(even) { padding-top: 36px; }
.grows__node { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--surface); box-sizing: border-box; }
.grows__node .ic { width: 28px; height: 28px; color: var(--ink); }
.grows__list b { font: 800 var(--t-sub)/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.grows__list span:not(.grows__node) { max-width: 22ch; color: var(--ink-2); font-size: var(--t-small); line-height: 1.4; text-wrap: balance; }
.grows__path { position: absolute; overflow: visible; pointer-events: none; }
.grows__path path { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 7 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grows__path--x { left: 0; top: 0; width: 100%; height: 96px; }
@media (max-width: 959px) {
  .grows__map { max-width: 560px; }
  .grows__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .grows__list li, .grows__list li:nth-child(even) { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 0; text-align: left; }
  .grows__node { grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
  .grows__node .ic { width: 26px; height: 26px; }
  .grows__list b { align-self: end; padding-top: 4px; font-size: 19px; }
  .grows__list span:not(.grows__node) { max-width: none; font-size: var(--t-small); text-wrap: pretty; }
  .grows__path--x { display: none; }
  .grows__list li { position: relative; }
  .grows__list li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 58px; bottom: -22px; width: 16px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath d='M8 0C3 8 3 8 8 16s5 8 0 16' fill='none' stroke='%23141414' stroke-width='2' stroke-dasharray='6 5' stroke-linecap='round'/%3E%3C/svg%3E") center top / 16px 32px repeat-y; }
}