/* ============================================================
   RESPONSIVE — mobile / small-screen layer. Loaded LAST so it
   overrides. Desktop is the priority design; this only adapts
   spacing, type and the few fixed-size scenes down to phones.
   Prefix: none (targets existing classes). Breakpoints:
     <= 900px  tablet trims
     <= 640px  phone reflow
     <= 460px  small phone
   ============================================================ */

/* ---------- tablet: tighten gutters + scene padding ---------- */
@media (max-width: 900px) {
  .sd-wrap { padding-left: 32px; padding-right: 32px; }
  .clay2-wrap { padding-left: 32px; padding-right: 32px; }
  .clay2-headrow { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .sc-stage { padding-left: 28px; padding-right: 28px; gap: 22px; }
}

/* ============================================================
   HERO on mobile — the desktop float variants (wire/circuit/loop)
   hide < 880px; HeroFloats swaps in <HvMobile/> instead. It's a
   centred "bridge": Clay mark · dashed wire · Claude Code mark,
   pinned to the top of the hero. We top-align the hero copy and
   pad it down so the bridge always sits clear above the headline.
   ============================================================ */
@media (max-width: 900px) {
  .sd-mhero { justify-content: flex-start; padding-top: clamp(154px, 23vh, 250px); padding-bottom: 92px; }

  .sd-hv-mob {
    display: flex; align-items: flex-start; justify-content: center; gap: 14px;
    position: absolute; left: 0; right: 0; top: clamp(44px, 8vh, 84px); z-index: 1;
    pointer-events: none;
  }
  .sd-hv-mob .hvm-obj { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
  .sd-hv-mob .hvm-img img { display: block; height: auto; filter: drop-shadow(0 12px 22px rgba(20, 24, 22, 0.20)); }
  .sd-hv-mob .hvm-clay .hvm-img img { width: 62px; }
  .sd-hv-mob .hvm-cc   .hvm-img img { width: 84px; }
  .sd-hv-mob figcaption {
    font-family: var(--abm-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; color: var(--abm-ink); opacity: 0.6; white-space: nowrap;
  }
  .sd-hv-mob .hvm-link {
    position: relative; width: clamp(34px, 11vw, 58px); height: 0; margin-top: 26px;
    border-top: 1.4px dashed var(--abm-ink); opacity: 0.4;
  }
  .sd-hv-mob .hvm-dot {
    position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
    background: var(--abm-ember); transform: translate(-50%, -50%);
  }
}

/* ---------- phone: reflow ---------- */
@media (max-width: 640px) {
  /* keep the hero headline from crowding the bridge */
  .sd-mhero h1 { font-size: clamp(34px, 8.8vw, 50px); }
  body[data-theme="slate"] .sd-mhero h1,
  body[data-theme="teal"]  .sd-mhero h1 { font-size: clamp(32px, 8.6vw, 46px); }

  /* gutters */
  .sd-wrap, .sd-wrap--wide, .clay2-wrap { padding-left: 20px; padding-right: 20px; }

  /* vertical rhythm — pull the big section pads in */
  .sd-sec { padding-top: 62px; padding-bottom: 62px; }
  .sd-sec--tight { padding-top: 48px; padding-bottom: 48px; }
  .clay2-sec { padding-top: 54px; padding-bottom: 64px; }

  /* headings + lede scale down (desktop uses fixed 42px) */
  .sd-h2 { font-size: clamp(27px, 8vw, 34px); }
  .sd-h3 { font-size: 22px; }
  .sd-lede { font-size: 16.5px; }

  /* hero */
  .sd-mhero { min-height: 92vh; }
  .sd-mhero .sd-lede { font-size: 16.5px; margin-top: 22px; }
  .sd-mhero-cta { margin-top: 30px; }

  /* inline 2-col intro grids (clay head) collapse to one column */
  .u-stack-sm { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; }

  /* asset-scroll intro */
  .sc-intro { padding: 72px 22px 22px; }
  .sc-intro h1 { font-size: clamp(26px, 8vw, 34px); }
  .sc-intro p { font-size: 15.5px; }

  /* differentiation table keeps its width but scrolls — show a nudge */
  .gs-diff-scroll { position: relative; }

  /* founder strip padding */
  .gs-founder { padding: 26px 22px; gap: 20px; }
  .gs-founder-ava { width: 60px; height: 60px; font-size: 30px; }

  /* final CTA panel insets */
  .gs-final-panel { left: 18px; right: 18px; top: 18px; bottom: 18px; }
}

/* ============================================================
   FEEDBACK ORB (§ feedback) — fixed 760px aperture + 520px text
   overlay. Scale the whole centred stage down to fit phones and
   shrink the black section so there's no dead space.
   ============================================================ */
@media (max-width: 820px) {
  #feedback { height: 720px !important; }
  .fo5 .fo2-stage { transform: scale(0.72); transform-origin: center center; }
}
@media (max-width: 640px) {
  #feedback { height: 560px !important; }
  .fo5 .fo2-stage { transform: scale(0.5); }
  .fo5 .fo2-top { left: 20px; top: 22px; }
}
@media (max-width: 460px) {
  #feedback { height: 500px !important; }
  .fo5 .fo2-stage { transform: scale(0.42); }
}

/* ============================================================
   CLAY TABLE on mobile (< 760px) — ClaySweep renders its
   <ClaySweepMobile/> branch: no 240vh pin, the table shown fully
   enriched (run end-state) and scrolling horizontally at real
   column widths so each column stays readable on one swipe,
   instead of 8 columns crushed into 360px.
   ============================================================ */
@media (max-width: 760px) {
  .clay2-mob .clay2-fitwrap { width: 100%; }
  .clay2-mob .clay2-frame { width: 100%; border-radius: 12px; position: relative; }

  /* horizontal scroller holds the table; chrome (bar + progress) stays full width */
  .clay2-mob .clay2-mscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .clay2-mob .clay2-tbl { width: max-content; min-width: 100%; table-layout: auto; }
  /* natural widths come back — undo the clamped fixed-table cell sizing */
  .clay2-mob .clay2-tbl td { height: 56px; overflow: visible; }
  .clay2-mob .clay2-th { min-height: 46px; }

  /* soft right-edge fade hints there's more to swipe */
  .clay2-mob .clay2-frame::after {
    content: ""; position: absolute; top: 54px; bottom: 46px; right: 0; width: 36px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 88%);
    pointer-events: none; z-index: 4;
  }

  .clay2-mob .clay2-cap { justify-content: flex-start; margin-top: 14px; }
  .clay2-mob .clay2-swipe {
    font-family: var(--c-mono, var(--abm-mono)); font-size: 11.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: #9AA0A6;
  }
}

/* ---------- small phone: compact the fixed theme switcher ---------- */
@media (max-width: 460px) {
  .usw { padding: 6px 7px; gap: 3px; }
  .usw-lbl { display: none; }
  .usw-btn { padding: 7px; }
  #theme-switch { bottom: 14px; }
}