/* shell.css — vidling.app 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 */
}

/* ── Top offer bar (core landing) ───────────────────────────────────────── */
.site-offerbar {
  background: var(--brand);
  color: var(--text-on-brand);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}
.site-offerbar a { color: var(--text-on-brand); text-decoration: underline; font-weight: var(--w-bold); }

/* ── Hero algorithm/curated toggle ──────────────────────────────────────── */
.site-herotoggle { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.site-herotoggle__label { font-size: var(--fs-sm); color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); }
.site-herotoggle__label--active { color: var(--text-body); font-weight: var(--w-semibold); }

/* ── Phone mockup frame (placeholder for real product screenshots) ─────── */
.site-phonemock {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.site-phonemock__notch {
  height: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken);
}
.site-phonemock__notch::before { content: ''; width: var(--sp-8); height: 4px; border-radius: var(--r-pill); background: var(--border-strong); }
.site-phonemock__screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center;
  min-height: 220px; padding: var(--sp-6);
}
.site-phonemock__screen .wo-icon { width: var(--sp-10); height: var(--sp-10); color: var(--brand); }
.site-phonemock__screen p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); margin: 0; }

/* ── Sticky mobile CTA — fixed (always visible), not sticky-in-flow ─────
   Hidden ≥760px, where the full nav (with its own CTA) has room. ──────── */
.site-stickycta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; padding: var(--sp-3) var(--sp-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
}
.site-stickycta .wo-btn { width: 100%; }
@media (max-width: 759px) {
  /* Scoped to :has(.site-stickycta) — shell.css is shared by pages without
     the sticky bar (site/index.html, privacy/terms/delete-data); an
     unscoped `body` rule here would add dead bottom padding to all of them. */
  body:has(.site-stickycta) { padding-bottom: 84px; }
}
@media (min-width: 760px) {
  .site-stickycta { display: none; }
}

/* ── Pain card hover/click reveal (Problem-Aware Hook) ──────────────────── */
.site-paincard { cursor: pointer; }
.site-paincard__solution {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  color: var(--brand-strong); font-weight: var(--w-semibold); font-size: var(--fs-sm);
  transition: max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.site-paincard:hover .site-paincard__solution,
.site-paincard:focus-within .site-paincard__solution,
.site-paincard.is-revealed .site-paincard__solution {
  max-height: 60px; opacity: 1;
}

/* ── Before/after flow row (arrows between stages) ──────────────────────── */
.site-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); justify-content: center; font-size: var(--fs-sm); color: var(--text-muted); }
.site-flow__label { font-weight: var(--w-bold); color: var(--text-body); margin-right: var(--sp-2); }
.site-flow .wo-icon { width: var(--sp-4); height: var(--sp-4); color: var(--text-faint); }
.site-flow--after { color: var(--brand-strong); }
.site-flow--after .site-flow__label { color: var(--brand-strong); }
.site-flow--after .wo-icon { color: var(--brand); }

/* ── Comparison table (Product Positioning) — single <table>; @media
   rewrites it into stacked rows on narrow screens per the spec's
   "all comparison tables become stacked cards" mobile rule. ───────────── */
.site-compare-wrap { overflow-x: auto; }
.site-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.site-compare th, .site-compare td {
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.site-compare th:first-child, .site-compare td:first-child { text-align: left; color: var(--text-body); font-weight: var(--w-medium); }
.site-compare thead th { color: var(--text-muted); font-weight: var(--w-semibold); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--track-caps); }
.site-compare .site-compare__brand-col { background: var(--brand-tint); color: var(--brand-strong); font-weight: var(--w-bold); }

@media (max-width: 759px) {
  .site-compare, .site-compare thead, .site-compare tbody, .site-compare th, .site-compare td, .site-compare tr { display: block; }
  .site-compare thead { display: none; }
  .site-compare tr { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-soft); }
  .site-compare td {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: none; padding: var(--sp-1) 0; text-align: right;
  }
  .site-compare td:first-child { font-weight: var(--w-semibold); padding-bottom: var(--sp-2); justify-content: flex-start; }
  .site-compare td::before { content: attr(data-label); color: var(--text-muted); font-weight: var(--w-regular); }
  .site-compare td:first-child::before { content: ''; }
}

/* ── Site-local icon modifier: chat/request glyph — points at an SVG
   already vendored under design-system/assets/icons/, just not wired
   to a class in the DS's own core.css. Adding the modifier here (not
   in design-system/) keeps the vendored copy untouched. ────────────── */
.wo-icon--request { --wo-icon-src: url(../../assets/icons/chat-bubble-user.svg); }

/* ── How It Works stepper ───────────────────────────────────────────────── */
.site-stepper {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.site-stepper__step {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: none; border-radius: var(--r-lg);
  background: transparent; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.site-stepper__step[aria-selected="true"] { background: var(--brand-tint); }
.site-stepper__num {
  display: grid; place-items: center; flex-shrink: 0;
  width: var(--sp-8); height: var(--sp-8);
  border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-muted);
  font-family: var(--font-display); font-weight: var(--w-bold);
}
.site-stepper__step[aria-selected="true"] .site-stepper__num { background: var(--brand); color: var(--text-on-brand); }
.site-stepper__label { font-size: var(--fs-sm); color: var(--text-body); }

@media (min-width: 760px) {
  .site-stepper { flex-direction: row; }
  .site-stepper__step { flex-direction: column; text-align: center; flex: 1; }
}

/* ── Site-local icon modifier: dashboard glyph (same rationale as
   wo-icon--request above — points at an already-vendored SVG). ───────── */
.wo-icon--dashboard { --wo-icon-src: url(../../assets/icons/statistic.svg); }

/* ── Feature blocks (alternating icon+copy / visual rows) ──────────────── */
.site-featureblock {
  display: flex; flex-direction: column; gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--divider);
}
.site-featureblock:last-child { border-bottom: none; }
.site-featureblock__body { display: flex; flex-direction: column; gap: var(--sp-3); text-align: center; }
.site-featureblock__body h3 { font-size: var(--fs-h3); }
.site-featureblock__body p { color: var(--text-muted); line-height: var(--lh-base); margin: 0; }

@media (min-width: 760px) {
  .site-featureblock { flex-direction: row; text-align: left; gap: var(--sp-10); }
  .site-featureblock__body { text-align: left; flex: 1; }
  .site-featureblock__visual { flex: 1; display: flex; justify-content: center; }
  .site-featureblock:nth-child(even) { flex-direction: row-reverse; }
}

/* ── Topic selector (Why Kids Like It) ──────────────────────────────────── */
.site-topics { display: flex; flex-direction: column; gap: var(--sp-6); align-items: center; }
.site-topics__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ── Pricing: Annual first on mobile per the spec's CRO note ────────────── */
@media (max-width: 759px) {
  .wo-plancard--annual { order: -1; }
}

/* ── Trust badges row (Trust & Safety) ──────────────────────────────────── */
.site-trustbadges { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-10); }

/* ── Site-local icon modifiers: content-safety glyphs (ban / eye-off) —
   point at SVGs already vendored under design-system/assets/icons/, just
   not wired to a class in the DS's own core.css. Same rationale as the
   wo-icon--request / wo-icon--dashboard modifiers above. ────────────── */
.wo-icon--ban    { --wo-icon-src: url(../../assets/icons/ban.svg); }
.wo-icon--eyeoff { --wo-icon-src: url(../../assets/icons/eye/slash.svg); }
.wo-icon--aicheck { --wo-icon-src: url(../../assets/icons/double_check.svg); }