/* =========================================================
   WORKFABRIC — MOBILE OVERRIDES
   Layered on top of site.css and any inline component styles.
   Most home-page sections use React inline styles; we target
   them via [style*="…"] substring selectors with !important.
   Breakpoints:
     ≤900px  — tablet / large phone landscape
     ≤640px  — phone portrait
     ≤400px  — small phone (iPhone SE / 360-Android)
   ========================================================= */

/* ---------- Section padding tightening ---------- */
@media (max-width: 900px) {
  section[style*="padding"] {
    /* Sections compose padding via clamp; nothing to do globally. */
  }
  .section-head {
    margin-bottom: 40px !important;
    gap: 20px !important;
  }
  .section-head .meta { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.0 !important; }
  h2 { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.05 !important; }
  .lede { font-size: var(--fs-body) !important; line-height: 1.5 !important; }
  .btn { padding: 12px 18px !important; font-size: var(--fs-body) !important; }
  .section-head { margin-bottom: 32px !important; }
}

/* ---------- HERO (D1HeroOutcomes) ---------- */
@media (max-width: 640px) {
  /* Headline + rotating verb stack */
  [style*="font-size: clamp(56px, 8.4vw, 132px)"] {
    font-size: clamp(40px, 12vw, 64px) !important;
  }
  [style*="height: 1.25em"][style*="font-size: clamp(28px, 3.4vw, 48px)"] {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    height: 1.3em !important;
  }
}

/* ---------- HERO SCENARIO ANIMATION (D1HeroScenarioV2) ---------- */
@media (max-width: 900px) {
  .hs-streams-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .hs-streams-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Goal bar — stack vertically: title above, metric below */
  [style*="padding: 16px 22px"][style*="linear-gradient(90deg, var(--twin-softer)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  /* The right-side metric block — push to its own row, full width */
  [style*="padding: 16px 22px"][style*="linear-gradient(90deg, var(--twin-softer)"] > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--rule-2) !important;
  }
  /* The left side: allow wrap so kicker + title stack cleanly */
  [style*="padding: 16px 22px"][style*="linear-gradient(90deg, var(--twin-softer)"] > div:first-child {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }
  /* Feed header */
  [style*="padding: 10px 22px"] { padding: 8px 14px !important; }
  /* Feed inner padding */
  [style*="padding: 4px 22px 16px"] {
    padding: 4px 14px 12px !important;
  }
  /* Card body padding — drop the 64px left indent (timeline rail) */
  [style*="padding: 18px 0 14px 64px"] {
    padding: 16px 0 12px 44px !important;
  }
  /* Timeline rail position adjusts with the smaller indent */
  [style*="position: absolute"][style*="left: 30"][style*="border-left: 1px dashed"] {
    left: 22px !important;
  }
  /* Timeline node — smaller, tighter */
  [style*="position: absolute"][style*="left: 16"][style*="width: 28"][style*="height: 28"] {
    left: 8px !important;
    width: 24px !important;
    height: 24px !important;
    top: 18px !important;
  }
  /* stepRow: 86px 1fr → stack label above text */
  [style*="grid-template-columns: 86px 1fr"] {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 2px !important;
  }
  /* Recommended step (ACTION) inset */
  [style*="padding: 10px 12px"][style*="margin: 4px -12px 0"] {
    margin: 4px 0 0 !important;
    padding: 10px 12px !important;
  }
  /* Signals inline — they live in column 2; reset to column 1 when stacked */
  [style*="grid-column: 2 / 3"] {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }
  /* Step text — shrink */
  [style*="font-family: var(--font-display)"][style*="font-size: 15.5"] {
    font-size: var(--fs-body) !important;
  }
  [style*="font-family: var(--font-display)"][style*="font-size: 17"][style*="font-weight: 600"] {
    font-size: var(--fs-body) !important;
  }
  /* Card head — let twin label + time wrap */
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 12"][style*="margin-bottom: 12"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  /* Twin label smaller on mobile */
  [style*="font-family: var(--font-display)"][style*="font-size: 18"][style*="letter-spacing: -0.01em"] {
    font-size: var(--fs-body) !important;
  }
  /* Subgoal pill row — stack the SUBGOAL label above the text */
  [style*="display: inline-flex"][style*="align-items: baseline"][style*="gap: 8"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

/* ---------- IN-PAGE NAV (sticky pill bar) ---------- */
@media (max-width: 640px) {
  /* The On-this-page rail already uses overflow-x:auto. Just make
     sure pills don't wrap and the label hides on narrow screens. */
  nav[style*="position: sticky"][style*="top: 64"] [style*="margin-right: 16px"] {
    display: none !important;
  }
  nav[style*="position: sticky"][style*="top: 64"] {
    top: 56px !important;
  }
}

/* ---------- TWINS (5-col composer) ---------- */
@media (max-width: 1100px) {
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 640px) {
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Flip cards have minHeight: 320; relax on small */
  [style*="perspective: 1400"] {
    min-height: 280px !important;
  }
}

/* ---------- MODES (depth diagram 2-col) ---------- */
@media (max-width: 980px) {
  [style*="grid-template-columns: minmax(420px, 1fr) minmax(0px, 1.1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 640px) {
  /* Twin Capabilities list: 120px 1fr → stack */
  [style*="grid-template-columns: 120px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* Depth stratum row: keep horizontal but tighten */
  [style*="padding: 20px 18px 20px 36px"] {
    padding: 14px 12px 14px 32px !important;
  }
  /* Hide the trailing verb on the depth strata to save horizontal room */
  [style*="max-width: 20ch"][style*="font-style: italic"][style*="text-align: right"] {
    display: none !important;
  }
}

/* ---------- CONTEXT (RecordVsTrace) ---------- */
@media (max-width: 880px) {
  /* rvtCols: 1fr 1.4fr → stack */
  [style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  /* contrast / seqCases / 1fr 1fr panels in context — stack */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  /* Day ruler / day track 180px 1fr 130px → stack */
  [style*="grid-template-columns: 180px 1fr 130px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Stream rows */
  [style*="grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1.3fr)"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* Day outputs 3-col → 1-col */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Strip 4-col → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Record rows: 100px 1fr → stack */
  [style*="grid-template-columns: 100px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  /* Trace rows 44px 100px 12px 1fr → 2-col compact */
  [style*="grid-template-columns: 44px 100px 12px 1fr"] {
    grid-template-columns: auto auto 1fr !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  /* Trace rows hide the dot column on tiny screens */
  [style*="grid-template-columns: 44px 100px 12px 1fr"] > :nth-child(3) {
    display: none !important;
  }
  /* Conclusion 28px 1fr stays */
  /* Section row 240px minmax(0,1.4fr) minmax(0,1fr) → stack */
  [style*="grid-template-columns: 240px minmax(0px, 1.4fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* seqMeansRow 20px 1fr — keep */
}

/* ---------- PROOF cards ---------- */
@media (max-width: 880px) {
  [style*="grid-template-columns: minmax(0px, 0.55fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  [style*="padding: 28px 28px"] { padding: 20px 18px !important; }
  [style*="padding: 28px 32px"] { padding: 20px 18px !important; }
}

/* ---------- CONTEXTFABRIC (Sense/Extract/Synthesize 5-col card) ---------- */
@media (max-width: 880px) {
  /* The 1fr auto 1fr auto 1fr layout — stack vertically with arrow rotated */
  [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 18px !important;
  }
  /* Rotate the inline arrows to point down */
  [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] > [aria-hidden="true"] {
    transform: rotate(90deg) !important;
    width: 32px !important;
    height: 12px !important;
    margin: 4px auto !important;
  }
}

/* ---------- NEWS row (already has its own MQ; reinforce) ---------- */
@media (max-width: 640px) {
  [style*="grid-template-columns: 120px 140px 1fr 90px 20px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ---------- CTA ---------- */
@media (max-width: 640px) {
  [style*="font-size: clamp(40px, 6vw, 80px)"] {
    font-size: clamp(32px, 9vw, 48px) !important;
  }
}

/* CTAStrip mobile — stack the heading above the buttons */
@media (max-width: 720px) {
  [style*="grid-template-columns: minmax(0px, 1fr) auto"] {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 20px !important;
  }
}
@media (max-width: 480px) {
  section [style*="max-width: 22ch"] {
    max-width: none !important;
  }
}

/* ---------- Page nav rail tightening ---------- */
@media (max-width: 640px) {
  .nav-inner { gap: 8px !important; }
  .logo span:not(.logo-mark) { font-size: var(--fs-body) !important; }
}

/* ---------- Mobile hamburger nav ---------- */
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-burger-bar {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav.menu-open .nav-burger-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.menu-open .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile-sheet {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--bone);
  border-top: 1px solid var(--rule);
  padding: 24px 20px 32px;
  flex-direction: column;
  gap: 4px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  overflow-y: auto;
}
.nav-mobile-sheet.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-mobile-sheet a:not(.btn) {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile-sheet a:not(.btn).active { color: var(--twin-ink); }
.nav-mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.nav-mobile-ctas .btn { justify-content: center; padding: 14px 18px !important; font-size: var(--fs-body) !important; }

@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
  .nav-cta .btn-primary { display: none; }
  .nav-mobile-sheet { display: flex; }
}
@media (max-width: 640px) {
  .nav-mobile-sheet { inset: 56px 0 0 0; }
}

/* ---------- About / Global Locations map: dark-mode filter ---------- */
html[data-theme="dark"] .world-map-img {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95);
}

/* ---------- D1 Twins flipcards: enough room for back-face content ---------- */
@media (max-width: 720px) {
  .d1-flip-card { min-height: 360px !important; }
  .d1-flip-card [style*="min-height"] { min-height: 360px !important; }
  .d1-composer-custom { min-height: 220px !important; }
}
@media (max-width: 480px) {
  .d1-flip-card { min-height: 380px !important; }
  .d1-flip-card [style*="min-height"] { min-height: 380px !important; }
  .d1-composer-custom { min-height: 200px !important; }
}

/* ---------- D1 Hero intro: collapse 4-col sub-goals to 2x2 + hide tree on narrow viewports ---------- */
@media (max-width: 720px) {
  .intro-twins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .intro-tree { display: none !important; }
}

/* ---------- D1 Context: Record vs Trace — stack on mobile ---------- */
@media (max-width: 720px) {
  .rvt-cols { grid-template-columns: 1fr !important; }
  .rvt-col-left { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
  .rvt-col-right { border-top: 0; }
  .rvt-trace-row { flex-wrap: wrap; }
  .rvt-what { white-space: normal !important; min-width: 0; }
}

/* ---------- About: closing "Join us" CTA — stack on mobile ---------- */
@media (max-width: 880px) {
  .about-closing-grid { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
  .about-closing-ctas { width: 100% !important; }
  .about-closing-ctas .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  .about-closing-ctas { flex-direction: column !important; }
  .about-closing-ctas .btn { width: 100%; }
}

/* ---------- ABOUT / RESEARCH / NEWS catch-alls ---------- */
/* The page-level inline @media rules use minmax(0,...) but the DOM
   serializes as minmax(0px,...) — substring selectors miss. Repeat
   here with the 0px form. Also covers grids that had no mobile rule. */
@media (max-width: 880px) {
  /* about — hero & body 2-col */
  [style*="grid-template-columns: minmax(0px, 1.6fr) minmax(0px, 1fr)"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.4fr)"],
  [style*="grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1.2fr)"],
  [style*="grid-template-columns: minmax(0px, 1.4fr) auto"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* news — featured card 2-col */
  [style*="grid-template-columns: minmax(0px, 1.5fr) minmax(0px, 0.5fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
@media (max-width: 720px) {
  /* about — team 4-col headcount strip */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  /* about — sidebar/body 260px 1fr → stack */
  [style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* about — dense 5-col table 120px 110px 1fr 200px 24px → stack */
  [style*="grid-template-columns: 120px 110px 1fr 200px 24px"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px 14px !important;
  }
  /* research — row 120px 1fr auto → stack */
  [style*="grid-template-columns: 120px 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* about — team 4-col → 1-col on small phones */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- PLATFORM page (platform.html) ---------- */
@media (max-width: 560px) {
  .pf-cloud-grid { grid-template-columns: 1fr !important; }
  .pf-cloud-grid > div:nth-child(2),
  .pf-cloud-grid > div:nth-child(5) { display: none !important; }
  .pf-demo-kv-grid { grid-template-columns: 1fr !important; }
  .pf-agents-grid { grid-template-columns: 1fr !important; }
  .ax-outcome-body { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  /* Live-feed row: drop the trailing time column, let body span */
  .pf-feed-row {
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  .pf-feed-time { display: none !important; }
  /* CF stage rows: 24px 90px 1fr is too tight at 360 — drop the label col */
  .hs-cf-stage {
    grid-template-columns: 24px 1fr !important;
    gap: 10px !important;
  }
  .hs-cf-stage-name { display: none !important; }
}

/* ---------- LEARNING (D1Learning) section-head h2 ---------- */
/* Full heading is "Twins continually learn from your teams, to become
   productive co-workers." On phones that wraps to four jagged lines and
   the "co-workers" twinned span gets squeezed. Mobile shows only the
   first clause so the heading reads as two clean lines. */
.d1l-h2-end-mobile { display: none; }
@media (max-width: 640px) {
  .d1l-h2-tail,
  .d1l-h2-end-desktop { display: none !important; }
  .d1l-h2-end-mobile { display: inline !important; }
}

/* ---------- Generic safety: prevent horizontal overflow ---------- */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; height: auto; }
}