/* ==========================================================================
   intelligems.ai — local prototype
   Editorial-scientific direction. Explorer + Sage archetype.
   Typography: Inter (brand) + IBM Plex Mono (scientific annotations).
   ========================================================================== */

:root {
  --brand-blue:   #2962FF;   /* accent only (buttons, dots, eyebrows) */
  --dark-blue:    #1A47B8;
  --light-blue:   #4A7FFF;

  --brand-navy:   #00052E;   /* primary hero / CTA surface — matches intelligems.io */
  --brand-navy-2: #030831;   /* subtle gradient depth partner */

  --dark-bg:      #0C1526;
  --dark-surface: #141E30;
  --dark-surface-2: #0F1A2D;

  /* Warm neutrals — per brand team ("beige framing color") */
  --ivory:        #F6F1E6;
  --cream:        #EFE8D8;
  --parchment:    #E6DFC9;

  --ink:          #0F172A;
  --ink-muted:    #475569;
  --ink-quiet:    #94A3B8;

  --on-dark:      #F1F5F9;
  --on-dark-muted:#94A3B8;
  --on-dark-quiet:rgba(241,245,249,0.55);

  --border-light: rgba(15, 23, 42, 0.10);
  --border-dark:  rgba(241, 245, 249, 0.08);
  --border-hair:  rgba(15, 23, 42, 0.06);
}

/* Base reset + typography */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
}
body, h1, h2, h3, h4, h5, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; }

.font-display { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.025em; }
.font-mono    { font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-weight: 400; }
.font-body    { font-family: 'Inter', sans-serif; font-weight: 300; }
.font-subhead { font-family: 'Inter', sans-serif; font-weight: 600; }

/* ==========================================================================
   Branded background — near-black navy (matches intelligems.io hero).
   Keeps the concentric white ripple motif from the Remotion brand system,
   at lower opacity to preserve a ghostly editorial feel on the darker surface.
   ========================================================================== */
.brand-bg {
  position: relative;
  background: linear-gradient(180deg, var(--brand-navy-2) 0%, var(--brand-navy) 55%, #000218 100%);
  overflow: hidden;
  isolation: isolate;
}
.brand-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center,
      transparent 0,
      transparent 99px,   rgba(255,255,255,0.050) 100px, rgba(255,255,255,0.050) 102px, transparent 103px,
      transparent 179px,  rgba(255,255,255,0.045) 180px, rgba(255,255,255,0.045) 182px, transparent 183px,
      transparent 259px,  rgba(255,255,255,0.040) 260px, rgba(255,255,255,0.040) 262px, transparent 263px,
      transparent 339px,  rgba(255,255,255,0.035) 340px, rgba(255,255,255,0.035) 342px, transparent 343px,
      transparent 419px,  rgba(255,255,255,0.030) 420px, rgba(255,255,255,0.030) 422px, transparent 423px,
      transparent 499px,  rgba(255,255,255,0.026) 500px, rgba(255,255,255,0.026) 502px, transparent 503px,
      transparent 579px,  rgba(255,255,255,0.022) 580px, rgba(255,255,255,0.022) 582px, transparent 583px,
      transparent 659px,  rgba(255,255,255,0.018) 660px, rgba(255,255,255,0.018) 662px, transparent 663px,
      transparent 739px,  rgba(255,255,255,0.014) 740px, rgba(255,255,255,0.014) 742px, transparent 743px,
      transparent 819px,  rgba(255,255,255,0.010) 820px, rgba(255,255,255,0.010) 822px, transparent 823px
    );
  pointer-events: none;
  z-index: 0;
}
.brand-bg > * { position: relative; z-index: 1; }

/* ==========================================================================
   Topographic contour — for section dividers and the How It Works spine.
   Uses an SVG path with dashed stroke, echoes the brand "topography" motif.
   ========================================================================== */
.topo-divider {
  width: 100%;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'><path d='M0,16 Q150,4 300,16 T600,16 T900,16 T1200,16' fill='none' stroke='%232962FF' stroke-width='1' stroke-opacity='0.25' stroke-dasharray='2 4'/><path d='M0,22 Q150,10 300,22 T600,22 T900,22 T1200,22' fill='none' stroke='%232962FF' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='2 6'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* How-it-works spine (vertical dashed contour, not a solid line) */
.howit-spine {
  width: 1px;
  background-image: linear-gradient(to bottom, var(--border-light) 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}

/* ==========================================================================
   Scroll reveal (JS-driven via IntersectionObserver)
   Uses translate + opacity, no decorative stagger on every block.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entry animation (one purposeful moment, matches Scene 1 of the video) */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.hero-badge   { animation: heroFade 900ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-title   { animation: heroFade 900ms 250ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-sub     { animation: heroFade 900ms 450ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-actions { animation: heroFade 900ms 650ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-trust   { animation: heroFade 900ms 850ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ==========================================================================
   Button styles
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-radius: 2px;
  transition: transform 200ms, background-color 200ms, color 200ms, border-color 200ms;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  border: 1px solid var(--brand-blue);
}
.btn-primary:hover { background: var(--dark-blue); border-color: var(--dark-blue); }
.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--border-dark);
}
.btn-ghost:hover { border-color: rgba(241,245,249,0.25); background: rgba(241,245,249,0.04); }
.btn-white {
  background: #fff;
  color: var(--dark-blue);
  border: 1px solid #fff;
}
.btn-white:hover { background: var(--ivory); }
.btn-lg { padding: 0.9rem 1.75rem; font-size: 1rem; }

/* Arrow flourish on primary buttons — one subtle micro-interaction */
.btn-primary .arrow,
.btn-white .arrow {
  transition: transform 200ms ease-out;
}
.btn-primary:hover .arrow,
.btn-white:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Editorial marginalia (mono labels, small caps section markers)
   ========================================================================== */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.eyebrow-on-dark  { color: rgba(241,245,249,0.60); }  /* near-black surfaces (--dark-bg) */
.eyebrow-on-brand { color: rgba(255,255,255,0.80); }  /* brand-blue surfaces (--brand-bg) */

.section-number {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-quiet);
}

/* ==========================================================================
   Rules, dividers, field-notebook hairlines
   ========================================================================== */
.rule-hair { height: 1px; background: var(--border-hair); }
.rule-dark { height: 1px; background: var(--border-dark); }
.rule-dash {
  height: 1px;
  background-image: linear-gradient(to right, var(--border-light) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* ==========================================================================
   Step timeline nodes — ripple concentric (brand motif)
   ========================================================================== */
.step-node {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 6px rgba(41, 98, 255, 0.08), 0 0 0 14px rgba(41, 98, 255, 0.04);
  flex-shrink: 0;
}

/* ==========================================================================
   Video frame
   ========================================================================== */
.video-frame {
  background: var(--dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px rgba(0,0,0,0.4);
}
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
}
.video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  pointer-events: none;
}

/* ==========================================================================
   Carousel — stacked / fanned cards. Cards share a single position and
   each one transforms by its offset from the active. Clicking any card
   makes it active; the deck rearranges fluidly.
   ========================================================================== */
.carousel {
  position: relative;
  width: 100%;
}

/* The stage holds absolutely-positioned cards on top of each other.
   Height is tied to card aspect (~5:4) so layout stays stable during transforms. */
.carousel-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 44vw, 520px);
  perspective: 1400px;       /* gentle depth for subtle 3D tilt */
  margin: 2rem 0 1.5rem;
}

.carousel-slide {
  --rel: 0;
  --abs: 0;
  --dir: 0;                  /* sign of rel (-1 / 0 / 1) so left/right styles differ */

  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 42vw, 500px);
  margin: 0;
  cursor: pointer;

  /* Transform cascade:
     - translate out from center by offset
     - small rotate leaning away from center
     - shrink further cards
     - pull inward toward the viewer a touch when active
  */
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--rel) * 30%))
    rotate(calc(var(--rel) * 4deg))
    scale(calc(max(0.55, 1 - var(--abs) * 0.14)));
  opacity: calc(max(0.08, 1 - var(--abs) * 0.4));
  z-index: calc(10 - var(--abs));

  transition:
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: auto;
}
.carousel-slide.is-active {
  cursor: default;
}
.carousel-slide:not(.is-active):hover {
  opacity: calc(max(0.35, 1 - var(--abs) * 0.3));
}

.slide-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect, 5 / 4);   /* per-slide aspect via inline --aspect */
  background: var(--brand-navy);
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;                   /* force stacking context — fixes corner-clip on videos under transformed parents */
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari belt-and-suspenders */
  box-shadow:
    0 40px 90px -24px rgba(0, 0, 0, 0.7),
    0 12px 36px -10px rgba(0, 5, 46, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: box-shadow 500ms;
}
.carousel-slide.is-active .slide-frame {
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.85),
    0 16px 44px -12px rgba(0, 5, 46, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* Meta slot below the stage — all 4 metas stacked absolutely, only active shows.
   min-height must be > the tallest slide's pill + h3 + paragraph to avoid overlap
   with the controls below. */
.carousel-meta-stack {
  position: relative;
  min-height: 10rem;
  margin-bottom: 1rem;
}
.carousel-meta-stack .slide-meta {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 400ms, transform 400ms;
}
.carousel-meta-stack .slide-meta.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.slide-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* frame aspect matches video aspect → no letterbox */
  display: block;
  background: var(--brand-navy);
  border-radius: inherit; /* belt-and-suspenders for WebKit corner clipping under transformed parents */
}

.carousel-slide.is-placeholder .slide-frame {
  background:
    radial-gradient(ellipse at center, rgba(41,98,255,0.05) 0%, transparent 60%),
    var(--dark-surface-2);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-slide.is-placeholder .slide-frame::after {
  content: '';
  width: 88px; height: 88px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.22);
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.6;
}

.slide-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0;
}
.slide-meta h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 0.25rem;
}
.slide-meta p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
}

.pill-live,
.pill-coming {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: fit-content;
}
.pill-live {
  border: 1px solid rgba(92, 225, 163, 0.35);
  background: rgba(92, 225, 163, 0.08);
  color: #8FEEB9;
}
.pill-live::before {
  content: '';
  width: 5px; height: 5px; border-radius: 999px;
  background: #5CE1A3;
  box-shadow: 0 0 8px rgba(92, 225, 163, 0.7);
}
.pill-coming {
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
}
.pill-coming::before {
  content: '';
  width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.3);
}

/* Nav prev/next arrows — compact pair, inline with dots row, left-aligned */
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.carousel-nav {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms, opacity 200ms;
}
.carousel-nav:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.carousel-nav:disabled { opacity: 0.25; cursor: default; }

/* Pagination dots — left-aligned, editorial */
.carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.carousel-dots li { list-style: none; }
.carousel-dots button {
  width: 28px; height: 4px;
  border: 0;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  transition: background-color 300ms, width 300ms;
  color: transparent;   /* hide the literal bullet character */
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.carousel-dots button:hover { background: rgba(255,255,255,0.35); }
.carousel-dots button.is-active {
  background: var(--brand-blue);
  width: 40px;
}

/* ==========================================================================
   Nav states
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 300ms, border-color 300ms, backdrop-filter 300ms;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(0, 5, 46, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-dark);
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */
@media (max-width: 768px) {
  .hide-mobile { display: none; }
}
@media (min-width: 769px) {
  .show-mobile { display: none; }
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive overrides — iPad portrait (≤1024px), phones (≤768px, ≤480px)
   ========================================================================== */

/* iPad portrait & below — keep the editorial feel, reduce horizontal density */
@media (max-width: 1024px) {
  .carousel-slide {
    width: clamp(260px, 60vw, 480px);
  }
  .carousel-stage {
    height: clamp(360px, 58vw, 480px);
  }
}

/* Phone & small tablet — single-column where it makes sense, no wrapped borders */
@media (max-width: 768px) {
  /* Typographic scale trims */
  body { font-size: 15px; }

  /* Section padding — tighten vertical rhythm */
  header,
  section,
  footer > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  header.brand-bg { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

  /* Nav: hide the secondary links and hamburger, keep only logo + CTA */
  .nav .hide-mobile { display: none !important; }
  .nav .show-mobile { display: none !important; }
  .nav .mobile-cta {
    display: inline-flex !important;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
  }

  /* Hero — tighter line-length, tidier stacked actions */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .hero-actions .btn { justify-content: center; }

  /* Problem + Differentiators + What-it-optimizes — kill side borders that break on wrap,
     stack as one column with hairline rules between items */
  .problem-grid,
  .differentiators-grid {
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--border-light);
  }
  .problem-grid > article,
  .differentiators-grid > article {
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
    border-bottom: 1px solid var(--border-light);
  }
  .differentiators-grid { border-top-color: var(--border-dark); }
  .differentiators-grid > article { border-bottom-color: var(--border-dark); }

  .optimizes-list li {
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto;
    gap: 0.4rem 1rem !important;
    padding: 1.25rem 0 !important;
  }
  .optimizes-list li > *:first-child { grid-row: span 2; align-self: center; }
  .optimizes-list li h3 { grid-column: 2; }
  .optimizes-list li p  { grid-column: 2; }

  /* Video carousel — wider cards, shorter stage, tighter controls */
  .carousel-slide { width: clamp(240px, 82vw, 420px); }
  .carousel-stage { height: clamp(320px, 72vw, 440px); margin: 1.25rem 0 1rem; }
  .slide-frame { border-radius: 18px; }
  .carousel-slide.is-placeholder .slide-frame { border-radius: 18px; }

  .carousel-meta-stack { min-height: 12rem; }
  .slide-meta h3 { font-size: 1rem; }
  .slide-meta p  { font-size: 0.88rem; }

  .carousel-controls {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
  }
  .carousel-nav { width: 38px; height: 38px; }
  .carousel-dots { margin-left: auto; }

  /* How It Works — align step node tighter; don't let the topo divider intrude */
  .howit-step {
    grid-template-columns: auto 1fr !important;
    gap: 1rem !important;
  }
  .step-node { width: 44px; height: 44px; font-size: 0.75rem; }

  /* Footer — stack columns */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  /* Section header row — the "02 / See it in action ─────" — keep rule visible */
  .section-head-row {
    grid-template-columns: auto 1fr !important;
    gap: 1rem !important;
  }

  /* Pull-quote and CTA — keep content centered, lighter vertical padding */
  .pullquote-section { padding: 5rem 0 !important; }
  .cta-section { padding: 5rem 0 !important; }
}

/* Small phones — further compress type to keep headlines at 2-3 lines max */
@media (max-width: 480px) {
  .carousel-slide { width: 88vw; }
  .carousel-stage { height: 82vw; }
  .slide-meta h3 { font-size: 0.95rem; }
  .slide-meta p  { font-size: 0.85rem; }
  .step-node { width: 40px; height: 40px; font-size: 0.72rem; }
}

/* ==========================================================================
   v1 REVAMP — new section patterns
   (bottleneck, decision grid, strike list, is/does, social proof, FAQ, form)
   ========================================================================== */

/* --- Bottleneck 3-col grid (02) --- */
@media (max-width: 768px) {
  .bottleneck-grid {
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--border-dark);
  }
  .bottleneck-grid > article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-dark);
    padding: 2rem 0 !important;
  }
  .bottleneck-grid > article:last-child { border-bottom: 0; }
}

/* --- Prediction callout --- */
.prediction-callout blockquote {
  position: relative;
}
@media (max-width: 768px) {
  .prediction-callout {
    padding: 2rem 1.5rem !important;
    margin-top: 3rem !important;
  }
}

/* --- Decision grid (03) — two questions --- */
@media (max-width: 768px) {
  .decision-grid {
    grid-template-columns: 1fr !important;
  }
  .decision-grid > article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-light);
    padding: 2.25rem 0 !important;
  }
  .decision-grid > article:last-child { border-bottom: 0; }
}

/* --- Strike list (04) --- */
.strike-list li.strike-item p {
  transition: color 300ms;
}
@media (max-width: 1024px) {
  .strike-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}
@media (max-width: 768px) {
  .strike-list { gap: 1.25rem !important; }
  .strike-list li.strike-item {
    grid-template-columns: 28px 1fr !important;
    gap: 1rem !important;
  }
  .strike-list li.strike-item p { font-size: 0.97rem !important; }
  .strike-list li.strike-item--final p { font-size: 1.15rem !important; }
  .named-role-card { padding: 1.75rem 1.5rem !important; }
}

/* --- IS vs DOES (05) --- */
.is-list li,
.does-list li {
  position: relative;
  padding-left: 1.25rem;
}
.is-list li::before,
.does-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-blue);
}
@media (max-width: 768px) {
  .is-does-grid {
    grid-template-columns: 1fr !important;
  }
  .is-does-grid > article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-light);
    padding: 2.25rem 0 !important;
  }
  .is-does-grid > article:last-child { border-bottom: 0; }
}

/* --- Social proof (09) --- */
@media (max-width: 768px) {
  .logo-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .logo-row .logo-cell:nth-child(2n) { border-right: 0 !important; }
  .logo-row .logo-cell { border-bottom: 1px solid var(--border-light); }
  .stat-strip {
    grid-template-columns: 1fr !important;
  }
  .stat-strip > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-light);
  }
  .stat-strip > div:last-child { border-bottom: 0; }
}

/* --- FAQ accordion (10) --- */
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item {
  border-bottom: 1px solid var(--border-light);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.75rem 0;
  text-align: left;
  color: var(--ink);
  transition: color 200ms;
}
.faq-q:hover { color: var(--brand-blue); }
.faq-q-text {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  flex: 1;
}
.faq-icon {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--brand-blue);
  line-height: 1;
  width: 20px;
  text-align: center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-a p {
  padding: 0 0 1.75rem 0;
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 56ch;
}
@media (max-width: 768px) {
  .faq-q { padding: 1.4rem 0; gap: 1rem; }
  .faq-q-text { font-size: 1rem; }
}

/* --- Demo form --- */
.demo-form {
  color: #fff;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.form-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form input[type="url"],
.demo-form textarea {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  line-height: 1.45;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
  width: 100%;
  box-sizing: border-box;
}
.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.demo-form input:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.18);
}
.demo-form textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: 'Inter', sans-serif;
}
.demo-form input[aria-invalid="true"] {
  border-color: rgba(255, 120, 120, 0.6);
}
.demo-form[data-state="submitting"] button[data-demo-submit] {
  opacity: 0.7;
  pointer-events: none;
}
.form-status[data-variant="success"] { color: #8FEEB9; }
.form-status[data-variant="error"]   { color: #FF9A9A; }

@media (max-width: 768px) {
  .demo-form .form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   v1 RESPONSIVE REFINEMENT (2026-04-17)
   - Tablet band (769-1024px): trim vertical rhythm
   - Touch-target bumps on mobile
   - Small-phone (≤480px) fine-tuning for the v1 sections
   - Overflow safety + form full-width on narrow phones
   ========================================================================== */

/* --- Tablet band (iPad portrait down to ~769px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  section, footer > div {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
  header.brand-bg { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
  section { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
  .pullquote-section { padding: 6rem 0 !important; }
  .cta-section        { padding: 6rem 0 !important; }
}

/* --- Touch targets on mobile --- */
@media (max-width: 768px) {
  /* Carousel nav buttons meet iOS 44px minimum */
  .carousel-nav { width: 44px !important; height: 44px !important; }

  /* Dot buttons: visual stays 28x4px, but hit area extends via padding + negative margin */
  .carousel-dots button {
    padding: 14px 0 !important;
    margin: -14px 0 !important;
    background-clip: content-box;
  }
  /* restore the visible bar color on the content-box */
  .carousel-dots button          { background-color: rgba(255,255,255,0.18); }
  .carousel-dots button:hover    { background-color: rgba(255,255,255,0.35); }
  .carousel-dots button.is-active{ background-color: var(--brand-blue); }
}

/* --- Overflow safety --- */
.faq-a p { overflow-wrap: break-word; word-break: break-word; }

/* --- Small-phone refinements (≤480px) for v1 sections --- */
@media (max-width: 480px) {
  /* Hero badge — don't let the philosophy name wrap awkwardly */
  .hero-badge span:last-child {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap;
  }

  /* Prediction callout (section 02) — tighten padding further */
  .prediction-callout {
    padding: 1.5rem 1.25rem !important;
    margin-top: 2.5rem !important;
  }
  .prediction-callout blockquote {
    font-size: 1.25rem !important;
    line-height: 1.25;
  }

  /* Strike list — slightly smaller body to avoid a 4-line wrap */
  .strike-list li.strike-item p { font-size: 0.92rem !important; }
  .strike-list li.strike-item--final p { font-size: 1.1rem !important; }

  /* Named-role card — tighter padding */
  .named-role-card { padding: 1.5rem 1.25rem !important; }
  .named-role-card p.font-display { font-size: 1.15rem !important; }

  /* FAQ question a touch tighter */
  .faq-q-text { font-size: 0.95rem !important; line-height: 1.3 !important; }
  .faq-a p    { font-size: 0.93rem !important; }

  /* Bottleneck cards — trim padding on narrowest phones */
  .bottleneck-grid > article { padding: 1.75rem 0 !important; }
  .bottleneck-grid > article h3.font-subhead { font-size: 1.1rem !important; }

  /* Decision grid cards */
  .decision-grid > article h3.font-display { font-size: 1.35rem !important; }

  /* IS / DOES cards */
  .is-list li,
  .does-list li { font-size: 1rem !important; }

  /* Social proof — keep 2-col logo grid readable */
  .logo-row .logo-cell { min-height: 4rem !important; padding: 1.5rem 0.75rem !important; }

  /* Mid-CTA bridge tighter */
  section.brand-bg[style*="5rem 0"] { padding: 3.5rem 1.25rem !important; }

  /* Form submit button full-width for easier thumb reach */
  .demo-form .form-actions { align-items: stretch !important; }
  .demo-form .btn-lg {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }

  /* Make sure inputs don't overflow horizontally */
  .demo-form input,
  .demo-form textarea { max-width: 100% !important; }
}