/* ====================================================================
   Capyo redesign — global responsive layer
   Loaded AFTER each page's inline <style> so it wins the cascade.
   Conservative: prevents overflow, scales type, collapses
   multi-column layouts on tablet (<=1024) and mobile (<=640).
   ==================================================================== */

/* --------------------------------------------------------------------
   1. Universal defenses — apply everywhere, no media query needed
   -------------------------------------------------------------------- */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-width: 0;
}

/* Media never escapes its container */
img,
video,
svg,
picture,
iframe,
canvas,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* SVGs with explicit height attributes shouldn't be auto-shrunk */
svg[width][height] {
  height: revert;
}

/* Long words / URLs shouldn't push layout wide */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dt,
dd,
blockquote,
figcaption,
a,
span {
  overflow-wrap: break-word;
}

/* Tables stay within container, scroll internally if needed */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* --------------------------------------------------------------------
   2. TABLET — max-width: 1024px
   Reduce gutters and 4-up grids to 2-up. Don't touch heros that
   already have their own tablet logic.
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Force any "grid-4" / "grid-3" utility to 2 cols on tablet */
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Reduce huge type at tablet width — only target known headline classes
     to avoid touching well-tuned per-section type. */
  h1.hero-h,
  h1.hero-h1,
  h1.tm-h,
  h1.hero4-h1,
  h1.hero3-h1,
  h1.info-hero-title,
  .hero h1,
  .hero5 h1 {
    font-size: clamp(32px, 4.6vw, 56px) !important;
    line-height: 1.08 !important;
  }
  /* Allow hero headlines to soft-wrap on tablet so long lines don't overflow */
  h1.hero-h1,
  h1.info-hero-title {
    white-space: normal !important;
  }
}

/* --------------------------------------------------------------------
   3. MOBILE — max-width: 640px
   Collapse common grids, shrink type/padding, ensure tap targets.
   -------------------------------------------------------------------- */

/* Disable scroll-reveal opacity transitions on tablet AND mobile so content
   is always visible regardless of intersection observer timing on touch
   devices. Reveal animations are a nice-to-have on desktop only. */
@media (max-width: 1024px) {
  .anim-in,
  [class*='anim-in'],
  .imp-subtests-list li,
  .imp-method-list li,
  .imp-chart-label,
  .imp-eyebrow,
  .imp-h,
  .imp-lead,
  .imp-method-label,
  .imp-foot-line,
  .imp-foot-meta,
  .imp-delta,
  .imp-chart-note,
  .imp-report,
  .ps-h,
  .ps-h .ps-w-i,
  .ps-addr,
  .ps-divider,
  .ps-truth-num span,
  .ps-sig,
  .fbw-note,
  .fbw-row,
  .fbw-h,
  .fbw-lead,
  .phw-head,
  .phw-step,
  .phw-mark,
  .cit-row,
  .cit-bar,
  .cit-report-block,
  .aud-card,
  .lcv-card,
  .liaisons-card,
  .bp-fig,
  .bp-h,
  .bp-lead,
  .tier-card,
  .faq-row,
  .page-allies .chip,
  .page-allies .chip .chip-icon svg,
  .page-allies .chip .chip-label,
  [class*='reveal'],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}
@media (max-width: 640px) {
  /* All known grid utilities → 1 col */
  .grid-2,
  .grid-3,
  .grid-4,
  .tm-grid,
  .paths-grid,
  .pricing-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Common multi-column flex rows — let them wrap */
  .row,
  .flex-row,
  .columns,
  .cols {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Type scale */
  h1,
  .h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }
  h2,
  .h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }
  h3,
  .h3 {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.2 !important;
  }
  p,
  li {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Hero sections — give viewport-locked sections breathing room without
     killing them entirely. .hero3/4/5 keep their own logic; only the
     general full-viewport sections get clamped. */
  .cinema,
  .plate-portrait,
  .waitlist-section,
  .impact-test,
  .fbw,
  .three-modes,
  .process-section,
  .plate-c-sponsor {
    min-height: auto !important;
  }
  /* Heroes with background imagery — preserve a tall presence */
  .hero {
    min-height: 88svh !important;
  }

  /* Common section padding reduction */
  section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Touch targets */
  a.btn,
  button,
  .btn-primary,
  .btn-secondary,
  .nav .talk,
  .hero4-cta,
  .cta,
  [class*='-cta'],
  [class$='-button'],
  .drawer-cta {
    min-height: 44px;
  }

  /* Inputs — don't auto-zoom on iOS */
  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Forms full width */
  form {
    max-width: 100%;
  }
  form input,
  form select,
  form textarea,
  form button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Common dashboard / stat grids — break to single col */
  .stats,
  [class*='stat-grid'],
  [class*='stats-grid'] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------
   4. Per-page targeted fixes
   Specific overflow / layout bugs that need direct selectors.
   -------------------------------------------------------------------- */

/* About: hero4 media used aspect-ratio + min-height combo that forced
   width > viewport at narrow widths. Fixed inline; defensive guard here. */
.hero4-media,
.hero4-video,
.hero4-caption {
  max-width: 100%;
}
.hero4-media {
  box-sizing: border-box;
}

/* About: math equation .eq-line could overflow at mobile */
@media (max-width: 640px) {
  .eq-line {
    font-size: 13px !important;
    flex-wrap: wrap !important;
  }
}

/* Home: three-modes uses grid-row placement to span tiles across rows;
   reset row placement on tablet+mobile so they stack normally. */
@media (max-width: 1024px) {
  .tm-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .tm-mode,
  .tm-mode[data-mode='01'],
  .tm-mode[data-mode='02'],
  .tm-mode[data-mode='03'] {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

/* Partner: container customizer is a complex 3D widget — hide preview
   on phones, show controls only */
@media (max-width: 640px) {
  .c3d-preview,
  .c3d-stage,
  .builder-preview {
    max-width: 100% !important;
  }
}

/* Allies marquee — preserve intentional overflow behavior, just confirm
   the parent clips properly */
.allies-marquee,
[class*='marquee'] {
  overflow: hidden;
}

/* ====================================================================
   5. PAGE-SCOPED FIXES
   ==================================================================== */

/* --- page-home --------------------------------------------------- */

/* Tablet (≤1024) — collapse home's complex multi-col layouts to 2-up or 1 */
@media (max-width: 1024px) {
  .page-home .imp-subtests {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .page-home .imp-subtests-label {
    grid-column: 1 / -1;
  }
  .page-home .imp-chart-stage {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .page-home .imp-method {
    grid-template-columns: 1fr !important;
  }
  .page-home .spec-list {
    grid-template-columns: 1fr 1fr !important;
  }
  .page-home .three-modes .tm-stage,
  .page-home .three-modes .tm-stage-icons {
    flex-wrap: wrap;
  }
  /* Dispatch (plate-portrait) goes single col */
  .page-home .plate-portrait .video-document {
    display: block !important;
  }
  /* Cinema (video) section — drop fixed aspect demands */
  .page-home .cinema-screen {
    max-width: 100%;
  }
  /* Process forms */
  .page-home .process-section .wl-grid,
  .page-home .waitlist-grid {
    grid-template-columns: 1fr !important;
  }
  /* Feedback / impact dashboards */
  .page-home .fbw .fbw-grid,
  .page-home [class*='-grid']:not(.allies-track):not([class*='marquee']) {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile (≤640) — single col everywhere, smaller type, tight padding */
@media (max-width: 640px) {
  .page-home .imp-subtests {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .page-home .imp-chart-stage {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 16px !important;
  }
  .page-home .imp-bar {
    min-height: 180px !important;
  }
  .page-home .spec-list {
    grid-template-columns: 1fr !important;
  }
  .page-home .spec-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .page-home .plate-portrait {
    padding: 56px 0 !important;
  }
  .page-home .video-document {
    padding: 24px 16px !important;
  }
  .page-home .pull {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .page-home .waitlist-section,
  .page-home .three-modes,
  .page-home .impact-test,
  .page-home .plate-c-sponsor,
  .page-home .plate-allies,
  .page-home .fbw,
  .page-home .process-section,
  .page-home .cinema {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-home .cinema-inner,
  .page-home .tm-inner,
  .page-home .plate-c-inner,
  .page-home .imp-inner,
  .page-home .waitlist-grid,
  .page-home .fbw-inner,
  .page-home .process-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* Big display type */
  .page-home .tm-h,
  .page-home .imp-h,
  .page-home .fbw-h,
  .page-home .waitlist-eyebrow + h2,
  .page-home .waitlist-header h2 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }
  /* GI strip stacks */
  .page-home .gi-strip {
    flex-direction: column !important;
    text-align: left;
    gap: 16px !important;
  }
  /* Sticky notes section — let them stack */
  .page-home .fbw-notes,
  .page-home .fbw-row {
    flex-direction: column !important;
  }
}

/* --- page-platform ----------------------------------------------- */
@media (max-width: 1024px) {
  .page-platform [class*='-grid']:not([class*='marquee']):not(.allies-track) {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .page-platform [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-platform .games-grid,
  .page-platform .subjects-grid {
    grid-template-columns: 1fr !important;
  }
  .page-platform section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-platform [class$='-inner'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
}

/* --- page-about -------------------------------------------------- */
@media (max-width: 1024px) {
  .page-about [class*='-grid']:not(.allies-track) {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .page-about [class*='-grid']:not(.allies-track),
  .page-about .principles-grid,
  .page-about .realities-grid,
  .page-about .founders-grid {
    grid-template-columns: 1fr !important;
  }
  .page-about section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-about [class$='-inner'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
}

/* --- page-partner ------------------------------------------------ */
@media (max-width: 1024px) {
  .page-partner [class*='-grid']:not([class*='marquee']):not(.allies-track) {
    grid-template-columns: 1fr 1fr !important;
  }
  .page-partner .c3d-stage {
    transform: scale(0.7);
    transform-origin: top center;
  }
}
@media (max-width: 640px) {
  .page-partner [class*='-grid']:not([class*='marquee']):not(.allies-track) {
    grid-template-columns: 1fr !important;
  }
  .page-partner section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-partner [class$='-inner'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* Reset the ≤1024 scale(0.7) on phones — the canvas is aspect-ratio
     responsive, so the scale only left dead whitespace below 640px.
     (Replaces a dead hide-rule that targeted non-existent
     .c3d-preview/.builder-preview selectors.) */
  .page-partner .c3d-stage {
    transform: none;
  }
  /* Colour row: the 24px swatches were stretched into ellipses by the
     `button { min-height: 44px }` tap-target floor above, and the custom
     colour input orphaned onto its own line. Give the label its own row and
     make every control a true 44×44 circle that wraps evenly. */
  .page-partner .c3d-color-label {
    flex-basis: 100%;
  }
  .page-partner .c3d-swatches {
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-partner .c3d-swatch,
  .page-partner .c3d-color-picker {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
}

/* --- page-allies / impact / textbooks / contact / privacy / cookies --- */
@media (max-width: 640px) {
  .page-allies [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-impact [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-textbooks [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-contact [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-legal [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-privacy [class*='-grid']:not([class*='marquee']):not(.allies-track),
  .page-cookies [class*='-grid']:not([class*='marquee']):not(.allies-track) {
    grid-template-columns: 1fr !important;
  }
  .page-allies section,
  .page-impact section,
  .page-textbooks section,
  .page-contact section,
  .page-legal section,
  .page-privacy section,
  .page-cookies section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-allies [class$='-inner'],
  .page-impact [class$='-inner'],
  .page-textbooks [class$='-inner'],
  .page-contact [class$='-inner'],
  .page-legal [class$='-inner'],
  .page-privacy [class$='-inner'],
  .page-cookies [class$='-inner'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   NO DOTS — brand directive, applied site-wide (responsive.css is
   loaded by every page). Capyo UI uses no decorative dots and no
   round bullet markers. Eyebrow leading pips, status/live/pulse
   blips, fake-browser traffic-lights and loading dots are removed;
   round bullet markers were flattened to short ticks at the source.
   Round avatars and icon badges (+/check/arrow, and icon chips that
   hold an SVG) are intentional affordances and are kept.
   ============================================================ */
/* (1) Eyebrow / tag / label / step leading pips (decorative ::before/::after dots) */
[class*='eyebrow']::before,
[class*='-eb']::before,
.eyebrow-pip::before,
.eyebrow .dot,
.tm-shared-chip::before,
.hero3-tag::before,
.hero5-tag::before,
.tier-tag::before,
.books-num::before,
.books-step-num::before,
.pill-col-label::before,
.lbl::before,
.wa-card .lab::before,
.label::before,
.cap-mono::before,
.p-flow-line::after,
.cinema-tc-sep {
  display: none !important;
}

/* (2) Status / live / pulse / chrome / loading / tag dots (decorative blips) */
.dot,
[class*='-dot'],
[class*='pulse'],
[class*='live-dot'],
.live::before,
.tcp-preview-head .live,
.tcp-chrome .dots,
.p-loading-dots,
.voice-bar-pip,
.sw-dot,
.hero6-tag-dot,
.unit-counter-dot,
[class*='ticker'] span {
  display: none !important;
}

/* (3) Timeline node — keep the marker, just not round */
.tl-step::before {
  border-radius: 0 !important;
}

/* ============================================================
   CONSISTENT HEADING FONT (site-wide). One typeface for every
   section heading. Sizes stay as each page designed them.
   ============================================================ */
h2 {
  font-family: var(--sans) !important;
  text-wrap: balance;
}

/* --------------------------------------------------------------------
   Wordmark — remove the orange dot, give the logotype real presence.
   Global so every page's nav reads identically.
   -------------------------------------------------------------------- */
.nav .wordmark::after {
  content: none !important;
  display: none !important;
}
.nav .wordmark {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  gap: 0 !important;
}