/* ============================================================
   mobile.css - site-wide mobile/tablet responsive overrides.
   Loaded LAST so it can override product/page-specific styles.

   Breakpoints
     ≤ 1024  small desktop / tablet - tighten side padding
     ≤ 760   small tablet / large phone - heavier collapse
     ≤ 540   phone - full mobile treatment, hamburger menu
   ============================================================ */

/* ====================================================================
   Product suite - horizontal scroll override.
   The user wants all five product cards visible (or scrollable) at any
   width - instead of stacking 2-col / 1-col on narrow screens, let them
   run off the page edge.
   ==================================================================== */
@media (max-width: 1100px) {
  .suite-grid {
    grid-template-columns: none !important;
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    /* Bleed to the viewport edge so users see "more behind the edge" */
    margin-left: calc(var(--pad-x) * -1) !important;
    margin-right: calc(var(--pad-x) * -1) !important;
    padding: 4px var(--pad-x) 12px !important;
    scrollbar-width: thin;
  }
  .suite-grid > .suite-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  .suite-grid::-webkit-scrollbar { height: 6px; }
  .suite-grid::-webkit-scrollbar-thumb {
    background: var(--tap-line-strong);
    border-radius: 4px;
  }
}

/* ====================================================================
   ≤ 1024px - tablet
   ==================================================================== */
@media (max-width: 1024px) {
  :root { --pad-x: 40px; }

  .nav-links { gap: 20px; }
  .nav-link { font-size: 13.5px; }

  /* Hide the hero "preview" pane sooner so the headline can breathe */
  .hero h1 { font-size: clamp(40px, 5.8vw, 64px); }
}

/* ====================================================================
   ≤ 900px - small tablet / large phone landscape
   ==================================================================== */
@media (max-width: 900px) {
  /* Most product heros already stack at 980 - make sure */
  .prod-hero-inner,
  .feat-hero-inner,
  .role-hero-inner,
  .ai-hero-inner,
  .dev-hero-inner,
  .workflow-hero-inner,
  .act-hero-inner,
  .about-hero-inner,
  .trust-hero-inner,
  .report-hero-inner,
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* When these heros collapse to one column, their grid items keep a
     min-content width (the Ask Hank widget / preview cards don't shrink),
     which blows the column — and the whole hero — wider than the
     viewport. Allow the items to shrink so the column tracks the
     viewport instead of the content. Fixes the homepage Hank widget +
     hero CTA buttons overflowing on phones. */
  .hero-grid,
  .prod-hero-inner,
  .feat-hero-inner,
  .role-hero-inner,
  .ai-hero-inner,
  .dev-hero-inner,
  .workflow-hero-inner { max-width: 100% !important; }
  .hero-grid > *,
  .hero-copy,
  .hero .preview,
  .hero .preview.ask-hank {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
  .footer-brand-block { grid-column: 1 / -1; }
}

/* ====================================================================
   ≤ 760px - small phone / tablet portrait
   ==================================================================== */
@media (max-width: 760px) {
  :root {
    --pad-x: 20px;
    --type-h1: 44px;
    --type-h2: 32px;
  }

  /* Section breathing room shrinks */
  .hero,
  .section,
  .press,
  .retail-deep,
  .impact-band .impact-inner,
  .workflows-section .workflows-inner,
  .features-section .features-inner,
  .roles-section .roles-inner,
  .industries-section .industries-inner,
  .knowledge-section .knowledge-inner,
  .pos-section .pos-inner,
  .rollout-section .rollout-inner,
  .pricing-section .pricing-inner,
  .collab-section .collab-inner,
  .ia-band .ia-inner,
  .prod-quote .prod-quote-inner,
  .closer .closer-inner,
  .footer-newsletter-inner,
  .footer-main {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero hides the heavy preview card on small screens */
  .prod-hero-right,
  .feat-hero-right,
  .ai-hero-right,
  .dev-hero-right,
  .role-hero-right,
  .workflow-hero-right {
    display: none !important;
  }
  .prod-hero,
  .feat-hero,
  .role-hero,
  .workflow-hero,
  .ai-hero,
  .dev-hero,
  .act-hero {
    padding: 48px 20px 56px !important;
  }
  .prod-hero-inner,
  .feat-hero-inner,
  .ai-hero-inner,
  .role-hero-inner,
  .workflow-hero-inner,
  .dev-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* All multi-column content grids collapse to one column */
  .pr-tiers,
  .impact-grid,
  .pricing-grid,
  .workflows-grid,
  .roles-grid,
  .features-grid,
  .industries-grid,
  .knowledge-grid,
  .rollout-grid,
  .wf-feats-grid,
  .other-feats-grid,
  .news-grid,
  .team-grid,
  .investors-grid,
  .dev-pillars-grid,
  .dev-caps-grid,
  .ai-pillars-grid,
  .ai-caps-grid,
  .ai-products-grid,
  .trust-cards-inner,
  .cross-roles-grid,
  .day-compare,
  .feat-support-inner,
  .feat-day,
  .impact-inner,
  .knowledge-cards,
  .act-hero-stats,
  .act-team-grid,
  .pillars-grid,
  .loop-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* POS row: 2-col instead of 4 to keep logos legible */
  .pos-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Compare / negotiations / suite cards */
  .suite-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Hero typography */
  .hero h1,
  .prod-h1,
  .feat-h1,
  .role-h1,
  .workflow-h1,
  .ai-h1,
  .dev-h1,
  .act-h1,
  .pr-hero h1,
  .about-h1,
  .trust-h1,
  .news-h1,
  .report-h1 {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .prod-deck,
  .feat-deck,
  .role-deck,
  .workflow-deck,
  .hero p,
  .pr-hero p {
    font-size: 16px !important;
  }

  /* CTA rows: stack and fill */
  .prod-hero-ctas,
  .feat-hero-ctas,
  .role-hero-ctas,
  .workflow-hero-ctas,
  .ai-hero-ctas,
  .dev-hero-ctas,
  .closer-ctas,
  .context-ctas,
  .hero-ctas,
  .model-ctas,
  .hank-head-ctas,
  .feat-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .prod-hero-ctas .btn,
  .feat-hero-ctas .btn,
  .role-hero-ctas .btn,
  .workflow-hero-ctas .btn,
  .ai-hero-ctas .btn,
  .dev-hero-ctas .btn,
  .closer-ctas .btn,
  .context-ctas .btn,
  .model-ctas .btn,
  .hank-head-ctas .btn,
  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero stat strip: 3 stats sit in a flex row. Their default
     min-width:auto stops them shrinking, so the row (and a clipped
     third stat) spills past the viewport. Let them shrink and trim
     the figure + padding so all three fit across a phone. */
  .hero-stat-strip > div {
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .hero-stat-strip > div .num { font-size: 21px !important; }

  /* Footer collapses fully */
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .footer-newsletter-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .footer-form {
    flex-direction: column !important;
    /* The newsletter variant sets flex-wrap:wrap (enhancements.css). On a
       column flex container that wraps the inputs into side-by-side
       *columns* that run off the viewport (≈1800px). Force nowrap so the
       column stacking actually stacks. */
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .footer-form input,
  .footer-form .btn,
  .footer-form button { width: 100% !important; }

  /* Pricing picker - pills wrap onto multiple rows */
  .pr-picker-inner { gap: 8px !important; }
  .pr-pick { font-size: 13px !important; padding: 8px 12px 8px 10px !important; }
  .pr-pick-for { display: none !important; }

  /* Pricing tier: featured doesn't elevate */
  .pr-tier { padding: 24px 22px !important; }
  .pr-tier-price strong { font-size: 38px !important; }

  /* Comparison table: ensure horizontal scroll & smaller padding */
  .pr-compare table, table { font-size: 13px; }
  .pr-compare th,
  .pr-compare td { padding: 12px 14px !important; }

  /* Subnav: tighter padding, slightly smaller links */
  .prod-subnav-inner {
    padding: 0 16px !important;
    gap: 14px !important;
    height: 52px !important;
  }
  .prod-subnav-name { display: none !important; } /* mark only on phone */
  .prod-subnav-divider { display: none !important; }
  .prod-subnav-link { font-size: 13px !important; padding: 16px 0 !important; }
  .prod-subnav-cta { display: none !important; }

  /* Sticky CTA bar: ensure usable */
  .sticky-cta {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
  .sticky-cta-text { display: none !important; }

  /* Trust ribbon brand cells: smaller */
  .brand-cell { font-size: 14px !important; padding: 14px 10px !important; }

  /* Stat numbers */
  .impact-num,
  .stat-num,
  .kpi-num { font-size: 38px !important; }

  /* Press logo row wraps */
  .press {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .press-row { flex-wrap: wrap; gap: 16px 24px; }

  /* Trust ribbon - single column */
  .trust-ribbon {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  /* IA band - single column */
  .ia-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ia-avatar-stack { width: 220px !important; height: 220px !important; }

  /* News article body content */
  .article-section-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .article-rail { position: static !important; }

  /* Roles grid: collapse with borders */
  .role-card { border-right: none !important; border-bottom: 1px solid var(--tap-line) !important; }
  .role-card:last-child { border-bottom: none !important; }

  /* Body padding fix: avoid horizontal overflow */
  body, html { overflow-x: hidden; }

  /* Main nav: hide desktop link strip, show hamburger */
  .nav-links { display: none !important; }
  .nav-cta .btn-ghost { display: none !important; }
  .nav-cta { gap: 6px !important; }
  .nav-mobile-toggle { display: inline-flex !important; }
}

/* ====================================================================
   ≤ 540px - phone
   ==================================================================== */
@media (max-width: 540px) {
  .nav-inner { gap: 12px !important; padding: 0 16px !important; height: 56px !important; }
  /* Match subnav offset to shorter nav */
  .prod-subnav { top: 56px !important; }
  .nav-mobile-drawer { top: 56px !important; max-height: calc(100dvh - 56px) !important; }

  /* Slightly smaller logo */
  .nav-brand .lockup { height: 22px !important; }

  /* Stack pricing picker label visible */
  .pr-trust { font-size: 11.5px !important; gap: 8px 14px !important; padding: 10px 16px !important; }
  .pr-trust span { gap: 5px; }

  /* Reduce h1 again */
  .pr-hero h1,
  .prod-h1,
  .feat-h1 { font-size: clamp(28px, 9vw, 38px) !important; }

  /* Subnav: smaller */
  .prod-subnav-mark { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  .prod-subnav-links { gap: 18px !important; }

  /* No animation on mobile sticky CTA bar */
  .sticky-cta .btn { padding: 8px 14px !important; font-size: 13px !important; }

  /* Tier flag positioning on full-width card */
  .pr-tier.featured { padding-top: 28px !important; }

  /* Form rows: stack */
  .pr-form-row { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Hide the activator's heavy timeline accents */
  .act-timeline-rail { display: none !important; }

  /* Compare table horizontal scroll friendly */
  .pr-compare-wrap { margin: 0 -20px; padding: 0 20px; }
}

/* ============================================================
   Mobile nav drawer (injected by enhancements.js)
   Shown on small screens. The toggle button is hidden by default
   and surfaced via media query above.
   ============================================================ */
.nav-mobile-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--tap-line-strong);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--tap-ink);
  padding: 0;
  transition: background 120ms ease;
}
.nav-mobile-toggle:hover { background: var(--tap-bg-warm); }
.nav-mobile-toggle svg { width: 18px; height: 18px; }

/* Drawer is mobile-only - completely removed from layout above the
   mobile breakpoint so it can never present as a "second header". */
.nav-mobile-drawer { display: none; }
@media (max-width: 760px) {
  .nav-mobile-drawer { display: flex; }
}

/* The drawer panel - fixed below the nav, slides down */
/* The drawer panel - fixed below the nav, slides down.
   Layout properties only; display is handled by the gate above. */
.nav-mobile-drawer {
  position: fixed;
  top: 56px;
  left: 0; right: 0;
  background: rgba(250,250,248,0.98);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--tap-line);
  z-index: 60;
  transform: translateY(-110%);
  transition: transform 250ms cubic-bezier(0.2,0.9,0.3,1);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  padding: 18px 20px 28px;
  flex-direction: column;
  gap: 18px;
}
body.nav-open .nav-mobile-drawer { transform: translateY(0); }
body.nav-open { overflow: hidden; }
/* Hide sticky elements behind the drawer */
body.nav-open .prod-subnav,
body.nav-open .sticky-cta { opacity: 0; pointer-events: none; }

.nav-mobile-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-section-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  padding: 8px 0 6px;
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tap-ink);
  padding: 12px 4px;
  border-radius: 8px;
  text-decoration: none;
}
.nav-mobile-link:active,
.nav-mobile-link:hover { background: var(--tap-bg-warm); }
.nav-mobile-link .nav-mobile-link-for {
  font-size: 12px;
  font-weight: 400;
  color: var(--tap-ink-3);
  margin-left: 2px;
}
.nav-mobile-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.nav-mobile-cta-row .btn { flex: 1; justify-content: center; }

/* ============================================================
   Live status badge - injected into footer-bottom by enhancements.js
   ============================================================ */
.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20,178,121,0.10);
  color: #14B279;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(20,178,121,0.18);
  transition: background 120ms, transform 120ms;
}
.live-status:hover { background: rgba(20,178,121,0.16); transform: translateY(-1px); }
.live-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #14B279;
  box-shadow: 0 0 0 4px rgba(20,178,121,0.18);
  animation: live-status-pulse 2.4s ease-in-out infinite;
}
@keyframes live-status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(20,178,121,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(20,178,121,0.08); }
}

/* ============================================================
   Cmd-K command palette - injected by enhancements.js
   ============================================================ */
.cmdk-trigger {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  background: #fff;
  border: 1px solid var(--tap-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--tap-ink-2);
  cursor: pointer;
  box-shadow: var(--tap-shadow-md);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), bottom 180ms var(--ease);
}
.cmdk-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  color: var(--tap-ink);
}
.cmdk-trigger svg { width: 15px; height: 15px; color: var(--tap-ink-3); }
.cmdk-trigger.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.cmdk-trigger kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 5px;
  background: var(--tap-bg);
  color: var(--tap-ink-2);
  border: 1px solid var(--tap-line);
  border-radius: 4px;
}
@media (max-width: 760px) {
  .cmdk-trigger { bottom: 14px; right: 14px; padding: 9px 12px; }
  .cmdk-trigger-label { display: none; }
}

.cmdk-palette {
  position: fixed; inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-start; justify-content: center;
}
.cmdk-palette.is-open { display: flex; }
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,16,12,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cmdk-fade 200ms ease;
}
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-panel {
  position: relative;
  margin-top: 12vh;
  width: min(620px, 92vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cmdk-rise 220ms cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes cmdk-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tap-line);
}
.cmdk-input-row svg { width: 16px; height: 16px; color: var(--tap-ink-3); flex: none; }
.cmdk-input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--tap-ink);
}
.cmdk-input::placeholder { color: var(--tap-ink-3); }
.cmdk-input-row kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 7px;
  background: var(--tap-bg);
  color: var(--tap-ink-3);
  border: 1px solid var(--tap-line);
  border-radius: 4px;
}
.cmdk-results {
  list-style: none; margin: 0; padding: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.cmdk-results li {
  list-style: none;
  border-radius: 8px;
}
.cmdk-results li[aria-selected="true"] {
  background: var(--tap-bg-warm);
}
.cmdk-results li a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 8px;
}
.cmdk-r-title {
  font-size: 14.5px; font-weight: 600; color: var(--tap-ink);
  grid-column: 1;
}
.cmdk-r-desc {
  font-size: 12.5px; color: var(--tap-ink-2);
  grid-column: 1;
}
.cmdk-r-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tap-ink-3);
  grid-column: 2; grid-row: 1 / -1;
  align-self: center;
  padding: 3px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
}
.cmdk-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px; color: var(--tap-ink-3);
}
.cmdk-foot {
  display: flex; gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--tap-line);
  background: var(--tap-bg);
  font-size: 11.5px; color: var(--tap-ink-3);
}
.cmdk-foot kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; padding: 2px 5px;
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 3px;
  color: var(--tap-ink-2);
  margin-right: 4px;
}

/* ============================================================
   Hero demo conversation - animated Hank chat feed.
   Sits inside the existing `.preview.ask-hank` next to the
   idle "Ask Hank / Suggested" screen. Hidden by default; the
   sequencer in enhancements.js cycles through every suggested
   question, appending typed user bubbles and bespoke Hank
   responses to the feed. The feed scrolls as it grows.
   ============================================================ */

/* Smooth cross-fade between idle and feed states */
.preview.ask-hank .ask-hero,
.preview.ask-hank .ask-suggested-label,
.preview.ask-hank .ask-suggest-list {
  transition: opacity 360ms cubic-bezier(0.2,0.9,0.3,1), transform 360ms cubic-bezier(0.2,0.9,0.3,1);
}
.preview.ask-hank.is-demo .ask-hero,
.preview.ask-hank.is-demo .ask-suggested-label,
.preview.ask-hank.is-demo .ask-suggest-list {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.ask-body { position: relative; }
.ask-demo {
  position: absolute;
  inset: 0;
  padding: 14px 12px 12px;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms cubic-bezier(0.2,0.9,0.3,1) 80ms, transform 360ms cubic-bezier(0.2,0.9,0.3,1) 80ms;
  pointer-events: none;
}
.preview.ask-hank.is-demo .ask-demo { opacity: 1; transform: none; }

.ask-demo-feed {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 4px 4px 12px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
}
.ask-demo-feed::-webkit-scrollbar { display: none; }

/* Entry animation reused by both user + Hank messages */
@keyframes ask-demo-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* User message - sits on the right, blue gradient */
.ask-demo-msg-user {
  align-self: flex-end;
  max-width: 84%;
  padding: 9px 13px;
  background: var(--tap-grad-user);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(74,144,217,0.20);
  animation: ask-demo-pop 320ms cubic-bezier(0.2,0.9,0.3,1) both;
}
.ask-demo-caret {
  display: inline-block;
  width: 1px; height: 0.95em;
  background: rgba(255,255,255,0.9);
  margin-left: 1px;
  vertical-align: -2px;
  animation: ask-demo-blink 0.7s infinite;
}
@keyframes ask-demo-blink { 50% { opacity: 0; } }

/* Hank message - left side with avatar */
.ask-demo-msg-hank {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
  animation: ask-demo-pop 320ms cubic-bezier(0.2,0.9,0.3,1) both;
}
.ask-demo-hank-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--tap-grad-hank);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: var(--tap-shadow-orange);
  flex: none;
}
.ask-demo-hank-avatar svg { width: 14px; height: 14px; }
.ask-demo-hank-body {
  background: var(--tap-orange-bubble);
  border: 1px solid rgba(242,122,46,0.10);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Thinking dots - shown briefly before a response renders */
.ask-demo-thinking {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 2px;
}
.ask-demo-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tap-orange-deep);
  opacity: 0.4;
  animation: ask-demo-bounce 1.2s infinite;
}
.ask-demo-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ask-demo-thinking span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ask-demo-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* Response content */
.ask-demo-intro {
  font-size: 12.5px; line-height: 1.45; color: var(--tap-ink-on-orange);
  font-weight: 500;
}

.ask-demo-card {
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-sm);
  font-size: 11.5px;
}
.ask-demo-card-head {
  padding: 7px 12px;
  border-bottom: 1px solid var(--tap-line);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.015);
}
.ask-demo-card-head > :first-child {
  font-size: 11px; font-weight: 700; color: var(--tap-ink);
}
.ask-demo-conf {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tap-ink-3);
  font-variant-numeric: tabular-nums;
}
.ask-demo-card-rows { display: flex; flex-direction: column; }
.ask-demo-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--tap-line);
  font-size: 11.5px;
  opacity: 0;
  animation: ask-demo-pop 280ms cubic-bezier(0.2,0.9,0.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 200ms);
}
.ask-demo-row:last-child { border-bottom: none; }
.ask-demo-row .rk {
  font-weight: 700; font-size: 10px;
  color: var(--tap-ink-3);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ask-demo-row .nm {
  color: var(--tap-ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ask-demo-row .vl {
  color: var(--tap-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ask-demo-row .dlt {
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 4px;
}
.ask-demo-row .dlt.up   { color: #065F46; background: rgba(20,178,121,0.14); }
.ask-demo-row .dlt.down { color: #B91C1C; background: rgba(220,38,38,0.12); }
.ask-demo-row .dlt.warn { color: #92400E; background: rgba(245,158,11,0.16); }

/* Compact bar chart for "department sales" answer */
.ask-demo-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.ask-demo-bar {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center;
  font-size: 11.5px;
}
.ask-demo-bar-nm { color: var(--tap-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-demo-bar-track {
  height: 6px; border-radius: 3px;
  background: rgba(0,0,0,0.05);
  overflow: hidden;
}
.ask-demo-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--tap-orange);
  transform-origin: left center;
  transform: scaleX(0);
  animation: ask-demo-bar-grow 700ms cubic-bezier(0.2,0.9,0.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}
@keyframes ask-demo-bar-grow {
  to { transform: scaleX(var(--w, 1)); }
}
.ask-demo-bar-vl { font-weight: 700; color: var(--tap-ink); font-variant-numeric: tabular-nums; }

/* Comparison stat (vs last month) */
.ask-demo-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  padding: 8px 0 4px;
}
.ask-demo-compare-side { text-align: center; }
.ask-demo-compare-num {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: var(--tap-ink);
  font-variant-numeric: tabular-nums;
}
.ask-demo-compare-lbl { font-size: 10.5px; color: var(--tap-ink-3); margin-top: 2px; }
.ask-demo-compare-arrow {
  font-size: 11px; color: var(--tap-orange-deep);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ask-demo-compare-arrow strong { font-size: 12.5px; font-weight: 800; }

.ask-demo-next {
  font-size: 12px; line-height: 1.5;
  color: var(--tap-ink);
  padding-top: 2px;
}
.ask-demo-next strong { color: var(--tap-orange-deep); font-weight: 700; }
.ask-demo-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 2px;
}
.ask-demo-chip {
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(242,122,46,0.08);
  color: var(--tap-orange-deep);
  border: 1px solid rgba(242,122,46,0.20);
  cursor: pointer;
}
.ask-demo-chip.primary {
  background: var(--tap-grad-hank); color: #fff;
  border-color: transparent;
  box-shadow: var(--tap-shadow-orange);
}

@media (prefers-reduced-motion: reduce) {
  .preview.ask-hank.is-demo .ask-hero,
  .preview.ask-hank.is-demo .ask-suggested-label,
  .preview.ask-hank.is-demo .ask-suggest-list,
  .ask-demo, .ask-demo-msg-user, .ask-demo-msg-hank,
  .ask-demo-row, .ask-demo-bar-fill {
    transition: none !important; animation: none !important;
    transform: none !important; opacity: 1 !important;
  }
}

/* ============================================================
   Cookie consent banner (injected by enhancements.js)
   ============================================================ */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 760px;
  margin: 0 auto;
  background: var(--tap-ink);
  color: rgba(255,255,255,0.92);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.16);
  z-index: 80;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 260ms cubic-bezier(0.2,0.9,0.3,1), transform 260ms cubic-bezier(0.2,0.9,0.3,1);
  font-size: 13.5px;
  line-height: 1.5;
}
.consent-banner.is-in { opacity: 1; transform: translateY(0); }
.consent-banner-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 14px 14px 18px;
}
.consent-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(242,122,46,0.18);
  color: var(--tap-orange);
  display: grid; place-items: center;
  flex: none;
}
.consent-banner-icon svg { width: 18px; height: 18px; }
.consent-banner-text strong {
  display: block;
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}
.consent-banner-text a {
  color: var(--tap-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-banner-text a:hover { color: #FFB37A; }
.consent-banner-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.consent-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.consent-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.consent-btn-accept {
  background: var(--tap-orange);
  border-color: var(--tap-orange);
  color: #fff;
}
.consent-btn-accept:hover {
  background: var(--tap-orange-deep);
  border-color: var(--tap-orange-deep);
}
.consent-banner-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: grid; place-items: center;
}
.consent-banner-close:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.consent-banner-close svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
  .consent-banner-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "actions actions";
    padding: 14px 16px;
    gap: 12px 12px;
  }
  .consent-banner-icon { grid-area: icon; }
  .consent-banner-text { grid-area: text; }
  .consent-banner-actions {
    grid-area: actions;
    width: 100%;
    flex-direction: row;
  }
  .consent-banner-actions .consent-btn { flex: 1; justify-content: center; }
  .consent-banner-close { display: none; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  .consent-banner { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   Skip-to-content link
   Visually hidden until focused (Tab from URL bar lands here).
   Pinned over the nav so users can jump straight to <main>.
   ============================================================ */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--tap-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: var(--tap-shadow-md);
}
.skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--tap-orange);
  outline-offset: 2px;
}

/* ============================================================
   READABILITY PASS - appended.

   The blocks above are largely structural (collapse N-column grids
   to 1, hide preview panes, shrink padding). This pass focuses on
   *readability* and *safety* on phones: type rhythm, tap targets,
   form-input zoom on iOS, and overflow defense against long words,
   URLs, emails or wide inline children.

   Loaded last → wins over per-page CSS without !important except
   where the per-page rule is itself !important.
   ============================================================ */

/* --- Universal safety net (≤ 760px) -------------------------- */
@media (max-width: 760px) {
  /* Long words, hyphenated phrases, URLs and emails should never
     blow the viewport. balance is already applied to many headings
     elsewhere; pretty keeps body copy from leaving lonely orphans. */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  p, li {
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
  /* Inline children of cards (URL strings, code, customer names) */
  code, pre, kbd, samp,
  .news-feature-card h2,
  .article-body p, .article-body li {
    overflow-wrap: anywhere;
  }

  /* iOS auto-zooms on focus when an input is < 16px. Bump every text
     input/textarea/select up to 16px so the form-fill flow stays put. */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Tap targets - every button must be at least 44px on a touch
     surface. Existing `.btn-lg` already hits this; the base `.btn`
     is shorter (≈36px). Bump on mobile without changing the visual
     line-height. */
  .btn {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  /* Icon-only / dense controls keep their compact form */
  .icon-btn,
  .news-cta,
  .nav-dropdown-all,
  .composer-send,
  .ai-composer-send,
  .hank-live-send,
  .sticky-cta-close {
    min-height: 0;
    padding-top: initial;
    padding-bottom: initial;
  }

  /* Body line-height for long-read pages */
  body { line-height: 1.5; }
  .article-body p { font-size: 17px; line-height: 1.65; }
}

/* --- Nav chrome on phone - region toggle + Account fit cleanly */
@media (max-width: 760px) {
  /* The promotional CTAs (Book a demo / Sign up) crowd the bar on
     narrow phones and push the Account button off-screen. Hide them
     here — they're cloned into the mobile drawer's CTA row — leaving
     just the region toggle and the Account/Login control in the bar. */
  .nav-cta .btn-primary,
  .nav-cta .btn-secondary { display: none !important; }
  /* The Account button used to share the bar with Sign in. Now it's
     the only CTA, so we tighten its label and trim padding to keep
     the right edge from collapsing onto the hamburger. */
  .nav-cta { gap: 6px !important; }
  .nav-cta .btn-dark {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
  }
  /* Region toggle sits right next to Account; trim it down. */
  .region-toggle-btn {
    padding: 6px 8px 6px 10px !important;
    height: 36px !important;
  }
}
@media (max-width: 420px) {
  /* Sub-iPhone-mini widths - hide the Account text label, keep the
     person glyph so the action is still discoverable; the drawer
     also carries Account, so we don't lose the affordance. */
  .nav-cta .btn-dark { font-size: 0 !important; padding: 9px 10px !important; gap: 0 !important; }
  .nav-cta .btn-dark svg { width: 16px !important; height: 16px !important; }
}

/* --- Refined type scale + section rhythm at phone -------------- */
@media (max-width: 540px) {
  /* H1 across all page types - slightly tighter than the 760 rule
     so titles don't dominate the viewport. */
  .hero h1,
  .prod-h1,
  .feat-h1,
  .role-h1,
  .workflow-h1,
  .ai-h1,
  .dev-h1,
  .act-h1,
  .pr-hero h1,
  .about-h1,
  .trust-h1,
  .news-h1,
  .report-h1,
  .article-h1 {
    font-size: clamp(30px, 9.5vw, 40px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  /* H2 / section heads */
  .section-head h2,
  .feat-day h2,
  .news-subscribe h2,
  .closer h2,
  .report-h2,
  .ia-band h2 {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.1 !important;
  }
  /* Body deck - readable, not heroic */
  .hero p,
  .prod-deck,
  .feat-deck,
  .role-deck,
  .workflow-deck,
  .ai-deck,
  .dev-deck,
  .pr-deck,
  .news-deck,
  .about-deck,
  .trust-deck,
  .report-deck {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   SECTION VERTICAL RHYTHM (mobile)
   One custom property drives the vertical padding on every page's
   section wrappers, so stacked sections read as distinct without
   the cavernous gaps. Tightens further on phones. Replaces the old
   partial 56px list, which missed most homepage/product sections
   and left the 541-760px band un-reduced entirely.
   ============================================================ */
@media (max-width: 760px) { :root { --m-secpad: 52px; } }
@media (max-width: 540px) { :root { --m-secpad: 40px; } }
@media (max-width: 760px) {
  .section, .hero, .prod-hero, .prod-quote, .closer,
  .retail-deep, .network, .pos, .hank-section, .hank-live, .quote-cards-band,
  .model-section, .sized, .thesis, .test-band, .investors, .size-examples, .press,
  .price-anchor, .final-cta-inner,
  .news, .news-grid-section, .news-featured, .news-subscribe, .news-filter,
  .feat-day, .feat-support, .other-feats-section,
  .ai-hero, .ai-pillars, .ai-demo, .ai-caps, .ai-loop, .ai-trust, .ai-products, .ia-band,
  .dev-hero, .dev-pillars, .dev-sdk, .dev-caps, .dev-flow, .dev-revenue, .dev-apply, .dev-trust,
  .pr-hero, .pr-section, .pr-tiers-section, .pr-compare, .pr-demo, .pr-faq,
  .workflows-section, .features-section, .roles-section, .industries-section,
  .knowledge-section, .pos-section, .rollout-section, .impact-band,
  .trust-hero, .trust-cards, .legal-hero,
  .report-hero, .report-pillars, .report-loop, .report-estimate, .report-proof, .report-main,
  .act-timeline-section, .act-kpis, .act-team, .act-faq, .act-apply,
  .role-land-hero, .role-land-curated, .role-land-value,
  .wfh-hero, .wfh-library, .wfh-value,
  .cmp-hero, .shell-hero, .shell-section,
  .ct-hero-inner, .ct-channels, .ct-form-inner,
  .about-hero, .about-section,
  .article-section, .article-related {
    padding-top: var(--m-secpad, 48px) !important;
    padding-bottom: var(--m-secpad, 48px) !important;
  }
}

/* --- News page polish --------------------------------------- */
@media (max-width: 760px) {
  /* Featured card on the news page - tightens to phone padding so
     the headline doesn't hug the screen edge. */
  .news-feature-card {
    padding: 28px 22px !important;
    border-radius: 16px !important;
  }
  .news-feature-card h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .news-feature-card p { font-size: 15px !important; }

  /* Filter chips overflow-scroll instead of wrapping into 3 rows */
  .news-filter-inner { gap: 10px !important; }
  .news-filter-chips {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    margin: 0 -20px;
    padding: 4px 20px;
    scrollbar-width: none;
  }
  .news-filter-chips::-webkit-scrollbar { display: none; }
  .news-filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .news-filter-count { display: none !important; }

  /* Newsletter chips stay wrapped (it's a form, not a row) */
  .news-subscribe-form { padding: 20px !important; border-radius: 14px !important; }
  .news-subscribe-chips { justify-content: flex-start !important; }
}

/* --- Hero metrics / KPI rows ------------------------------------ */
@media (max-width: 540px) {
  /* Hero meta rows on every product hero - keep them in 2 columns
     instead of stacking 4 rows of huge numbers that push the CTA
     below the fold. */
  .hero-meta,
  .prod-hero-metrics,
  .feat-hero-metrics,
  .dev-hero-metrics,
  .ai-hero-metrics,
  .act-hero-stats,
  .role-hero-metrics,
  .trust-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 24px !important;
  }
  .hero-meta > *,
  .prod-hero-metrics > *,
  .feat-hero-metrics > *,
  .dev-hero-metrics > *,
  .ai-hero-metrics > *,
  .act-hero-stats > *,
  .role-hero-metrics > *,
  .trust-hero-stats > * {
    border: none !important;
    padding: 0 !important;
  }
  /* The numbers themselves - slightly smaller so 2 fit per row */
  .hero-meta-num,
  .impact-num,
  .stat-num,
  .kpi-num,
  .dev-hero-metric-num,
  .ai-hero-metric-num,
  .act-hero-stat-num,
  .trust-hero-stat-num { font-size: 28px !important; line-height: 1 !important; }
}

/* --- Pricing tier card ----------------------------------------- */
@media (max-width: 540px) {
  .pr-tier { padding: 22px 20px !important; border-radius: 14px !important; }
  .pr-tier-price strong { font-size: 36px !important; }
  /* Pricing comparison: keep table scrollable inside a clear gutter */
  .pr-compare-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pr-compare-wrap::after {
    content: "";
    display: block;
    text-align: right;
    font-size: 11px;
    color: var(--tap-ink-3);
    padding: 8px 4px 0;
  }
}

/* --- Cards / tiles dense edge fixes ---------------------------- */
@media (max-width: 760px) {
  /* News cards keep their rail but pull margin so headlines breathe */
  .news-card { padding: 22px 22px 18px 24px !important; }
  .news-card h3 { font-size: 18px !important; }

  /* Trust ribbon press logos - wrap into a sensible row */
  .trust-ribbon-c { gap: 22px !important; row-gap: 16px !important; }
  .trust-ribbon-c .press-img { max-width: 40vw; }
}

/* --- Footer polish --------------------------------------------- */
@media (max-width: 540px) {
  .footer-main { padding: 48px 20px !important; gap: 32px !important; }
  .footer-brand-block p { font-size: 14px !important; line-height: 1.55 !important; }
  .footer-col h4 { font-size: 12px !important; letter-spacing: 0.12em !important; }
  .footer-col ul { gap: 10px !important; }
  .footer-bottom {
    padding: 24px 20px !important;
    font-size: 12px !important;
  }
}

/* --- Tables - universal horizontal scroll wrapper ------------- */
@media (max-width: 760px) {
  /* Generic safety for any table that isn't already wrapped by its
     page CSS. Forces a scrollable container so wide tables don't
     blow the viewport. Targets *table elements that aren't inside
     an explicit -wrap container. .rb-table is excluded because
     report.css already wraps it in .rb-table-wrap (overflow-x:auto)
     with a proper min-width; the display:block override here was
     double-wrapping the scroll and breaking that layout. */
  table:not(.pr-compare-wrap table):not(.chat-table):not(.rb-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Wrapped report/legal tables (Cookies, Privacy, Terms): let the
     bordered wrapper own the horizontal scroll and tighten cells so
     the four columns read comfortably on a phone. */
  .rb-table-wrap { -webkit-overflow-scrolling: touch; }
  .rb-table th, .rb-table td { padding: 10px 12px !important; }
}

/* --- Article body line-height & images ------------------------- */
@media (max-width: 760px) {
  .article-body { font-size: 17px !important; line-height: 1.65 !important; }
  .article-body h2 { font-size: clamp(24px, 6vw, 32px) !important; margin-top: 32px !important; }
  .article-body h3 { font-size: clamp(20px, 5vw, 24px) !important; margin-top: 24px !important; }
  /* Standalone inline article photos go full-bleed edge-to-edge on phones. */
  .article-body > img,
  .article-body > p > img,
  .article-body > figure:not(.article-figure) {
    margin: 24px -20px !important;
    max-width: calc(100% + 40px) !important;
    border-radius: 0 !important;
  }
  /* Framed thesis figures (.article-figure) manage their own layout via the
     aspect-ratio frame + object-fit. The blanket rule above was forcing the
     negative full-bleed margins onto the inner <img>, knocking it off-centre
     inside the clipped frame. Keep these in-column with their rounded frame
     and reset the inner media so they scale cleanly on mobile. */
  .article-body figure.article-figure {
    margin: 28px 0 !important;
    max-width: 100% !important;
  }
  .article-body figure.article-figure img,
  .article-body figure.article-figure svg {
    margin: 0 !important;
    max-width: 100% !important;
  }
  .article-pullquote { font-size: 22px !important; line-height: 1.3 !important; }
}

/* --- Subnav (product pages) - keep the mark + cta layout sane -- */
@media (max-width: 540px) {
  .prod-subnav-inner {
    height: 48px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
  .prod-subnav-links {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .prod-subnav-links::-webkit-scrollbar { display: none; }
  .prod-subnav-link { white-space: nowrap !important; flex: 0 0 auto !important; }
}

/* --- iOS safe-area (notch / home indicator) -------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .sticky-cta {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .nav-mobile-drawer {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}