/* shell.css — kiddotube.tv marketing-site scaffold (layout primitives on top of the DS)
   ──────────────────────────────────────────────────────────────────────────────
   NOT components — the page frame for a WIDE, responsive marketing site:
   full-bleed bands, a centred content column, nav, grids, footer. Mirrors the role
   of artifacts/app/prototype-r4/shell.css (the app shell), but for a desktop+mobile
   web page instead of a phone frame. Colours / spacing come from DS semantic tokens;
   only the absolute layout invariants (column width, breakpoints, hero scale) are
   raw — exactly as the app shell hardcodes the 420px phone width. Link AFTER the DS
   styles.css. All `wo-*` UI on the page stays pure design-system.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Content column — the only absolute widths on the site ─────────────── */
.site-wrap {
  width: 100%;
  max-width: 1080px;          /* wide marketing column (DS --container is 420px / mobile-only) */
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.site-wrap--prose { max-width: 760px; }   /* legal / long-form reading column */

/* ── Full-bleed bands (alternating surfaces) ───────────────────────────── */
.site-band        { padding-block: var(--sp-16); }
.site-band--tight { padding-block: var(--sp-12); }
.site-band--sunken { background: var(--surface-sunken); }
.site-band--card   { background: var(--surface-card); }
.site-band--brand  { background: var(--brand); color: var(--text-on-brand); }
.site-band--brand .site-head h2 { color: var(--text-on-brand); }
.site-band--brand .site-head p  { color: color-mix(in srgb, var(--text-on-brand) 78%, transparent); }

/* ── Sticky top nav ────────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.site-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.site-nav__links { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav__links a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  color: var(--text-muted); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--w-semibold);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__links a:hover { color: var(--brand); }
.site-nav__inner .wo-btn { width: auto; }    /* DS buttons are full-width by default */

/* ── Brand lockup (nav + footer + hero) ────────────────────────────────── */
/* Mark = the official DS asset (assets/brand/logo-mark.svg). drop-shadow
   follows the rounded-square alpha, so no square halo behind the corners. */
.site-brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.site-logo     { display: block; width: 36px; height: 36px; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent)); }
.site-logo--lg { width: 72px; height: 72px; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--brand) 34%, transparent)); }
.site-brand__wm { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text-body); }
.site-brand__wm .tube { color: var(--accent-strong); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.site-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-5);
}
.site-hero__title {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  max-width: 16ch;
}
.site-hero__title .accent { color: var(--brand); }
.site-hero__lede {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: var(--lh-base); color: var(--text-muted);
  max-width: 52ch;
}
.site-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.site-hero__cta .wo-btn { width: auto; }       /* DS buttons are full-width by default */
.site-hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  justify-content: center; align-items: center;
  color: var(--text-faint); font-size: var(--fs-caption);
}

/* ── Icon tile (brand-tinted square holding a wo-icon) ─────────────────── */
.site-ico {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--sp-12); height: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--brand-tint); color: var(--brand);
}

/* ── Section heading block ─────────────────────────────────────────────── */
.site-head {
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: center; text-align: center;
  max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-10);
}
.site-head h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.15; }
.site-head p  { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-base); }

/* ── Responsive grids ──────────────────────────────────────────────────── */
.site-grid   { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.site-grid--2,
.site-grid--3 { grid-template-columns: 1fr; }
.site-pillars { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

/* ── Step card (How it works) ──────────────────────────────────────────── */
.site-step { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-step__n {
  display: grid; place-items: center;
  width: var(--sp-10); height: var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-strong);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
}

/* ── Pricing rail ──────────────────────────────────────────────────────── */
.site-pricing { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: start; }
.site-pricing .wo-plancard { height: 100%; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot { padding-block: var(--sp-12) var(--sp-10); border-top: 1px solid var(--border-soft); }
.site-foot__cols {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-8);
}
.site-foot__col   { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-foot__col h4 { font-size: var(--fs-sm); color: var(--text-body); }
.site-foot__col a  { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.site-foot__col a:hover { color: var(--brand); }
.site-foot__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  padding-top: var(--sp-6); border-top: 1px solid var(--divider);
  color: var(--text-faint); font-size: var(--fs-caption);
}

/* ── Stack utility (vertical rhythm inside a wrap) ─────────────────────── */
.site-stack > * + * { margin-top: var(--sp-5); }

/* ── Long-form prose (privacy / terms) ─────────────────────────────────── */
.site-doc { color: var(--text-body); line-height: var(--lh-relaxed); }
.site-doc h2 { font-size: var(--fs-h2); margin-top: var(--sp-10); margin-bottom: var(--sp-3); }
.site-doc h3 { font-size: var(--fs-h3); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.site-doc p  { margin-bottom: var(--sp-4); }
.site-doc ul { margin: 0 0 var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.site-doc li { line-height: var(--lh-base); }
.site-doc a  { color: var(--brand); }
.site-doc__updated { color: var(--text-faint); font-size: var(--fs-caption); margin-top: var(--sp-2); }

/* ── Breakpoints — raw widths are infra invariants (like the app shell) ── */
@media (min-width: 760px) {
  .site-band        { padding-block: 88px; }
  .site-grid--2     { grid-template-columns: repeat(2, 1fr); }
  .site-grid--3     { grid-template-columns: repeat(3, 1fr); }
  .site-pillars     { grid-template-columns: repeat(3, 1fr); }
  .site-pricing     { grid-template-columns: repeat(3, 1fr); }
  .site-foot__cols  { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-nav__links { display: none; }     /* keep only logo + CTA on small screens */
}