/* ============================================================
   SAARA — Mobile-First Responsive Styles
   Optimized for phones (320px–768px)
   Stacks cleanly on top of style.css + home.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   GLOBAL — spacing, type scale, utilities
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  :root {
    --section-pad: 64px;
    --section-mid: 52px;
    --section-tight: 44px;
  }

  body { font-size: 15px; }

  .container {
    padding: 0 20px;
  }

  /* Section headings — keep them bold but fit the screen */
  .t-display {
    font-size: clamp(2rem, 8.5vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .t-hero {
    font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
  }

  .eyebrow {
    font-size: .65rem !important;
  }


  /* ═══════════════════════════════════════════════════════════
     NAVBAR
  ═══════════════════════════════════════════════════════════ */
  #navbar { height: 62px; }

  .nav-inner {
    padding: 0 20px;
    height: 62px;
  }

  .nav-logo { font-size: 1.35rem; }
  .nav-logo-svg { height: 26px; width: auto; }
  .nav-logo-img  { height: 26px; width: auto; }

  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; margin-left: auto; }

  /* Drawer — slide down from 62px navbar */
  .nav-drawer {
    top: 62px !important;
    padding: 1rem 20px 1.75rem !important;
    gap: .25rem !important;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Each nav link — bigger tap target */
  .drawer-link {
    font-size: 1rem;
    font-weight: 600;
    padding: .85rem 0;
    min-height: 44px;           /* WCAG touch target */
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  /* CTA button inside drawer — full width */
  .nav-drawer .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
    margin-top: .75rem !important;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent body scroll while drawer is open */
  body.drawer-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }


  /* ═══════════════════════════════════════════════════════════
     § 1 — HERO
  ═══════════════════════════════════════════════════════════ */
  #hero {
    padding-top: 62px;
    min-height: auto !important;
  }

  .hero-container {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
  }

  .hero-copy {
    align-items: center !important;
    text-align: center !important;
  }


  .hero-badge {
    font-size: .62rem;
    padding: .38rem .85rem .38rem .45rem;
    margin-bottom: 1.5rem;
  }

  .headline-line-1 {
    font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
  }

  .headline-accent {
    font-size: clamp(2.2rem, 9.5vw, 3.2rem) !important;
  }

  .hero-sub {
    font-size: 1rem !important;
    margin-top: 1.25rem;
    max-width: 100%;
    text-align: center !important;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
    margin-top: 1.75rem;
  }

  .hero-cta-row .btn {
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  /* Founder quote strip */
  .hero-voice-strip {
    padding: .9rem 1.1rem;
  }
  .hvs-quote { font-size: .88rem; }

  /* Social proof strip */
  .hero-proof-strip {
    gap: 0;
    padding: .85rem 1rem;
    margin-top: 1.25rem;
  }
  .hps-num {
    font-size: 1.1rem !important;
  }
  .hps-label {
    font-size: .58rem !important;
    letter-spacing: .06em;
  }
  .hps-divider {
    height: 1.8rem;
    margin: 0 .1rem;
  }

  /* Scroll indicator — hide on mobile, not enough room */
  .hero-scroll-hint { display: none; }


  /* ═══════════════════════════════════════════════════════════
     § 2 — THE PROBLEM
  ═══════════════════════════════════════════════════════════ */
  #problem { padding: 0; }

  .problem-container {
    padding-top: 72px !important;
    padding-bottom: 64px !important;
    gap: 2.5rem !important;
  }

  .problem-stats-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .problem-headline {
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
  }

  .prob-stat-card {
    padding: 1.5rem 1.5rem 1.2rem;
    margin-bottom: .75rem;
  }

  .prob-stat-card .stat-num {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
  }

  .stat-label { font-size: .82rem; }


  /* ═══════════════════════════════════════════════════════════
     § 2b — EHR SECTION
  ═══════════════════════════════════════════════════════════ */
  .ehr-container {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    gap: 3rem !important;
  }

  /* Comparison — stack vertically */
  .ehr-comparison {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 1.5rem !important;
  }

  .ehr-vs {
    padding: .5rem 0;
  }

  /* Dot grid — smaller on mobile */
  .ehr-click-maze {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 8px !important;
    padding: 1.25rem !important;
  }

  /* Stages — stack vertically, no arrows between */
  .ehr-stages {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .ehr-stage-arrow { display: none !important; }

  .ehr-closing {
    padding: 2rem 1.5rem !important;
  }

  .ehr-closing-text {
    font-size: 1.2rem !important;
  }


  /* ═══════════════════════════════════════════════════════════
     § 3 — THREE PILLARS
  ═══════════════════════════════════════════════════════════ */
  .pillars-section { padding: var(--section-pad) 0; }

  .pillars-header { margin-bottom: 2.25rem; }

  .pillars-headline {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem) !important;
  }

  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .pillar-card {
    padding: 1.75rem 1.5rem;
  }

  /* Stat bar — 2-col grid on mobile */
  .pillars-bar {
    flex-wrap: wrap;
    border-radius: 14px;
  }
  .pillars-bar-item {
    min-width: 50% !important;
    padding: 1.1rem 1rem;
  }
  .pillars-bar-divider { display: none; }


  /* ═══════════════════════════════════════════════════════════
     § 4 — INTELLIGENCE LAYER (Ask / Tell + LLM)
  ═══════════════════════════════════════════════════════════ */
  #resolution { padding: var(--section-pad) 0; }

  /* Ask / Tell big headlines */
  .ja-ask,
  .ja-tell {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }

  .ja-tagline { font-size: .92rem; }

  /* Hero photo — clinical scene */
  .ja-hero-photo {
    border-radius: 16px;
    margin-bottom: 2rem;
  }

  .ja-hero-img {
    height: 260px !important;
    object-position: center 25%;
  }

  .ja-hero-overlay {
    padding: 1.25rem 1.25rem;
    gap: .65rem;
  }

  .ja-hero-caption-text {
    font-size: .92rem !important;
  }

  .ja-hero-badges {
    gap: .45rem;
  }

  .ja-hero-badge {
    font-size: .65rem;
    padding: .28rem .7rem .28rem .5rem;
  }

  /* Language model card — single column */
  .ja-intro {
    grid-template-columns: 1fr !important;
    margin-bottom: 2rem;
  }

  .ja-intro-left {
    padding: 1.5rem 1.25rem;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,132,122,.10);
  }

  .ja-intro-right {
    padding: 1.25rem;
    background: rgba(255,255,255,.6);
  }

  .ja-intro-lead {
    font-size: clamp(1.3rem, 6vw, 1.75rem) !important;
  }

  .ja-intro-body { font-size: .95rem !important; }

  .ja-pills { gap: .35rem; }

  .ja-pill { font-size: .68rem; padding: .25rem .65rem; }

  /* Chat bubbles */
  .ja-bubble { font-size: .8rem; padding: .65rem .85rem; }

  /* Demo chip bar */
  .demo-chip-bar { gap: .35rem; }
  .demo-scenario-chip { font-size: .72rem; padding: .35rem .8rem; }

  /* Chat click hint */
  .chat-click-hint-inner { font-size: .8rem; }

  /* Chat label row */
  .chat-label-interactive { display: none; }
  .chat-label-sub { font-size: .73rem; }

  /* Pain grid — stack rows */
  .pain-grid-head { display: none; }

  .pain-row {
    grid-template-columns: 1fr !important;
    border-bottom: 2px solid var(--border);
  }

  .broken-cell {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    background: rgba(239,68,68,.04);
    color: rgba(17,17,17,.78);
  }

  .pain-cell {
    padding: 1.1rem 1.25rem;
    font-size: .91rem;
    font-weight: 500;
  }

  .ja-subhead {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    font-weight: 800 !important;
    color: rgba(17,17,17,.82) !important;
    margin-bottom: 1.5rem;
  }


  /* ═══════════════════════════════════════════════════════════
     § 5 — GPO SAVINGS
  ═══════════════════════════════════════════════════════════ */
  .gpo-section { padding: var(--section-pad) 0; }

  .gpo-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .gpo-headline {
    font-size: clamp(2rem, 8.5vw, 3rem) !important;
    margin: .65rem 0 1.1rem;
  }

  .gpo-body { font-size: .92rem; }

  .gpo-callout { padding: 1.25rem 1.25rem; }
  .gpo-callout--hero { padding: 1.4rem 1.25rem; }
  .gpo-callout-headline { font-size: 1.25rem !important; }
  .gpo-callout-body { font-size: .85rem; margin-bottom: 1.1rem; }
  .gpo-callout-stat-row { flex-direction: column; }
  .gpo-callout-stat { padding: .75rem 1rem; width: 100%; border-bottom: 1px solid rgba(0,212,200,.15); }
  .gpo-callout-stat:last-child { border-bottom: none; }
  .gpo-callout-stat-div { display: none; }
  .gpo-callout-stat-num { font-size: 1.5rem !important; }
  .gpo-callout-kicker { font-size: .62rem; }

  .gpo-flex-vendor { padding: .9rem 1rem; }
  .gpo-flex-heading { font-size: .88rem; }
  .gpo-flex-body { font-size: .82rem; }

  .gpo-trust-item { font-size: .84rem; }

  /* Savings table — hide middle column on phones */
  .gpo-table-wrap {
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gpo-table { font-size: .8rem; }

  .gpo-table th,
  .gpo-table td { padding: .65rem .9rem; }

  /* Stat bar — wrap to 2 columns */
  .gpo-stat-bar {
    flex-wrap: wrap;
    border-radius: 14px;
    margin-top: 2.5rem;
  }

  .gpo-stat {
    min-width: 50%;
    padding: 1.25rem 1rem;
  }

  .gpo-stat-div { display: none; }

  .gpo-stat-num {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }


  /* ═══════════════════════════════════════════════════════════
     § 6 — MARKETPLACE
  ═══════════════════════════════════════════════════════════ */
  .mkt-section { padding: var(--section-pad) 0; }

  .mkt-headline {
    font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important;
  }

  .mkt-sub { font-size: .92rem; }

  /* Store shell */
  .mkt-store-bar {
    flex-wrap: wrap;
    gap: .6rem;
    padding: .85rem 1rem;
  }

  .mkt-store-cats { gap: .3rem; }

  .mkt-cat {
    font-size: .68rem;
    padding: .28rem .7rem;
  }

  .mkt-store-search { display: none; }

  /* Featured banner — stack on mobile */
  .mkt-featured { padding: 1.25rem; }

  .mkt-featured-content {
    grid-template-columns: auto 1fr !important;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .mkt-featured-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
  }

  .mkt-price { font-size: 1.3rem; margin-bottom: 0; }
  .mkt-btn-get { width: auto; }

  .mkt-featured-text h3 { font-size: .95rem; }
  .mkt-featured-text p { font-size: .8rem; }

  /* Protocol card grid — single column */
  .mkt-grid {
    grid-template-columns: 1fr !important;
  }

  .mkt-card {
    border-right: none !important;
  }

  .mkt-card:nth-child(n+4) {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .mkt-card:last-child { border-bottom: none !important; }

  /* Value props — 2-col on mobile */
  .mkt-props {
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem;
  }

  .mkt-prop { padding: 1.1rem 1rem; }
  .mkt-prop h4 { font-size: .85rem; }
  .mkt-prop p { font-size: .77rem; }

  .mkt-store-footer {
    flex-direction: column;
    gap: .5rem;
    font-size: .68rem;
    padding: .85rem 1.25rem;
  }


  /* ═══════════════════════════════════════════════════════════
     § 7 — THE TEAM
  ═══════════════════════════════════════════════════════════ */
  #team { padding: var(--section-pad) 0; }

  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  .team-card { padding: 1.5rem; }

  /* Stack avatar above name — prevents text wrapping in narrow 2-col grid */
  .tc-top {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .tc-avatar { width: 56px; height: 56px; font-size: .9rem; flex-shrink: 0; }

  .tc-name { font-size: .9rem; white-space: normal; word-break: normal; }
  .tc-role { font-size: .7rem; }

  .tc-bullets li { font-size: .78rem; line-height: 1.45; }

  /* Single column on mobile for clean full-width cards */
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .inst-bar { padding: 2.5rem 1rem 1.75rem; margin-top: 2.5rem; }

  .inst-logo-row { gap: 1.25rem 2rem; }

  .inst-logo-item svg { height: 34px; max-width: 90px; }
  .inst-logo-img { height: 34px; max-width: 90px; }


  /* ═══════════════════════════════════════════════════════════
     § 8 — ROI CALCULATOR
  ═══════════════════════════════════════════════════════════ */
  .roi-section { padding: var(--section-pad) 0; }

  .roi-card {
    grid-template-columns: 1fr !important;
    border-radius: var(--radius-xl);
  }

  .roi-inputs {
    padding: 1.5rem 1rem;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    /* Prevent any child from overflowing */
    overflow: hidden;
  }

  .roi-results { padding: 1.5rem 1rem; }

  /* Stack label above value badge so nothing overflows off-screen */
  .roi-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-bottom: .5rem;
  }

  .roi-val-badge {
    min-width: 0;
    font-size: .85rem;
    padding: .15rem .55rem;
  }

  /* Make slider full width with big touch thumb */
  .roi-slider {
    width: 100%;
    height: 6px;
    touch-action: pan-y; /* let horizontal drag work on iOS */
  }

  .roi-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .roi-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .roi-slider-wrap {
    width: 100%;
    padding: .5rem 0;
  }

  .roi-slider-labels {
    font-size: .68rem;
  }

  /* Select dropdown full width */
  .roi-select { font-size: .85rem; }

  /* Toggles — ensure they don't overflow */
  .roi-toggles { gap: .5rem; }
  .roi-toggle-label { font-size: .78rem; }

  .roi-annual-num {
    font-size: clamp(2.4rem, 9vw, 3.2rem) !important;
  }

  .roi-trust-row { gap: 1rem 1.5rem; }
  .roi-trust-sep { display: none; }
  .roi-trust-num { font-size: 1.2rem; }

  .roi-brow { padding: .75rem .85rem; }
  .roi-brow-title { font-size: .8rem; }

  /* Modal */
  .roi-modal-card {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-xl);
  }


  /* ═══════════════════════════════════════════════════════════
     § 9 — DAY IN THE LIFE
  ═══════════════════════════════════════════════════════════ */
  .ditl-section { padding: var(--section-pad) 0; }

  .ditl-row {
    grid-template-columns: 56px 1fr;
    gap: .75rem;
  }

  .ditl-card { padding: .9rem 1rem; gap: .75rem; }

  .ditl-label { font-size: .84rem; }
  .ditl-desc  { font-size: .77rem; }

  .ditl-summary {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    align-items: flex-start;
  }

  .ditl-sum-stats { gap: 1.25rem; }

  .ditl-toggle-wrap { overflow-x: auto; padding-bottom: .25rem; }

  .ditl-tab { padding: .55rem 1rem; font-size: .8rem; }


  /* ═══════════════════════════════════════════════════════════
     § 10 — THE STORY (accordion)
  ═══════════════════════════════════════════════════════════ */
  .story-teaser-section { padding: var(--section-pad) 0; }

  .story-teaser-section .story-main { padding: 0 20px; }

  /* Founder photo */
  .story-founder-img {
    height: 260px !important;
    object-position: center center;
  }

  .story-teaser-sub { font-size: .92rem; }

  .sacc-author-strip {
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1rem;
  }

  .sacc-author-avatar { width: 38px; height: 38px; font-size: .85rem; }

  .sacc-author-cta {
    width: 100%;
    justify-content: flex-start;
    font-size: .82rem;
  }

  .sacc-trigger {
    grid-template-columns: 2.25rem 1fr auto;
    gap: .6rem;
    padding: 1rem 1.1rem;
  }

  .sacc-roman { font-size: 1.35rem; }
  .sacc-title { font-size: .92rem; }
  .sacc-teaser { font-size: .76rem; }

  .sacc-body {
    padding: 0 1.1rem 1.25rem 3.5rem;
    font-size: .88rem;
  }

  .sacc-stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
  .sacc-stat { padding: .75rem; }
  .sacc-stat-num { font-size: 1.25rem; }


  /* ═══════════════════════════════════════════════════════════
     § 11 — FOUNDING 20
  ═══════════════════════════════════════════════════════════ */
  #founding20 { padding: var(--section-pad) 0; }

  .founding-grid.grid-3 {
    grid-template-columns: 1fr !important;
  }

  .founding-card { padding: 1.5rem 1.25rem; }

  .founding-cta-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.75rem !important;
    gap: 1.25rem;
  }

  .founding-cta-inner .btn {
    width: 100%;
    justify-content: center;
  }


  /* ═══════════════════════════════════════════════════════════
     CHAT WIDGET
  ═══════════════════════════════════════════════════════════ */
  .chat-widget {
    border-radius: 16px;
  }
  .chat-body {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat-bubble { font-size: .82rem; padding: .6rem .85rem; }
  .chat-scenario-btn { font-size: .75rem; padding: .45rem .75rem; }


  /* ═══════════════════════════════════════════════════════════
     STORY TEASER HEADER
  ═══════════════════════════════════════════════════════════ */
  .story-teaser-header { margin-bottom: 1.75rem; }
  .story-teaser-header .t-heading {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    text-align: center;
  }


  /* ═══════════════════════════════════════════════════════════
     TEAM SECTION
  ═══════════════════════════════════════════════════════════ */
  .team-section-header .t-display,
  #team .t-display {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem) !important;
  }


  /* ═══════════════════════════════════════════════════════════
     § 12 — FAQ
  ═══════════════════════════════════════════════════════════ */
  #faq { padding: var(--section-pad) 0; }

  .faq-q {
    padding: 1.1rem 1.25rem;
    font-size: .9rem;
  }

  .faq-a,
  .faq-a.open { padding-left: 1.25rem; padding-right: 1.25rem; }


  /* ═══════════════════════════════════════════════════════════
     FINAL CTA BAND
  ═══════════════════════════════════════════════════════════ */
  .final-band { padding: var(--section-mid) 0; }

  .final-band .t-display {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
  }

  .final-band .btn {
    width: 100%;
    justify-content: center;
    margin-top: .25rem;
  }

  .waitlist-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }


  /* ═══════════════════════════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════════════════════════ */
  #footer { padding: 52px 0 0; }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding-bottom: 40px;
  }

  .footer-logo { font-size: 1.5rem; }

  .footer-bar .container p {
    font-size: .68rem;
    line-height: 1.65;
  }

  /* Sticky mobile CTA */
  #sticky-mobile-cta {
    display: block;
    padding: .85rem 1.25rem;
  }

  body { padding-bottom: 56px; }

  /* Footer SVG logo */
  .footer-logo-svg,
  .footer-logo-img { height: 30px; }

  /* Tap target safety — all buttons/links min 44px */
  .btn { min-height: 44px; }
  .faq-q { min-height: 44px; }

  /* Prevent horizontal overflow from any wide element */
  section, .container { max-width: 100%; overflow-x: hidden; }


  /* ═══════════════════════════════════════════════════════════
     CONTACT SECTION
  ═══════════════════════════════════════════════════════════ */
  .contact-section { padding: 4rem 0 3.5rem; }

  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
  }

  .contact-headline {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    max-width: 100%;
  }

  .contact-sub { max-width: 100%; font-size: .92rem; }

  .contact-trust-list { gap: .7rem; }

  .ct-item { font-size: .86rem; }

  .contact-direct { padding-top: .85rem; }
  .contact-direct-email { font-size: .85rem; }

  .contact-form-card {
    padding: 1.6rem 1.25rem !important;
  }

  .cf-row--2 { grid-template-columns: 1fr !important; }

  .cf-label { font-size: .68rem; }

  .cf-input {
    font-size: .88rem;
    padding: .65rem .9rem;
  }

  .cf-check-grid {
    grid-template-columns: 1fr !important;
    padding: .85rem .9rem;
    gap: .45rem;
  }

  .cf-check-item { font-size: .82rem; }

  .cf-submit {
    font-size: .95rem;
    padding: 1rem 1.5rem;
    min-height: 52px;
  }

  .cf-privacy { font-size: .68rem; }


  /* ═══════════════════════════════════════════════════════════
     TEAM — INSTITUTION BADGES (new)
  ═══════════════════════════════════════════════════════════ */
  .tc-inst-badges {
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .6rem;
  }

  .tc-inst-badge {
    font-size: .55rem !important;
    padding: .18rem .5rem !important;
  }


  /* ═══════════════════════════════════════════════════════════
     GPO CALLOUT HERO (new)
  ═══════════════════════════════════════════════════════════ */
  .gpo-callout--hero {
    padding: 1.4rem 1.1rem !important;
  }

  .gpo-callout-kicker { font-size: .6rem; }

  .gpo-callout-headline {
    font-size: 1.15rem !important;
    line-height: 1.35;
  }

  .gpo-callout-body { font-size: .82rem; }

  .gpo-callout-stat-row {
    flex-direction: column !important;
    gap: 0;
  }

  .gpo-callout-stat {
    padding: .7rem .85rem;
    width: 100%;
    border-bottom: 1px solid rgba(0,212,200,.12);
    border-right: none !important;
  }

  .gpo-callout-stat:last-child { border-bottom: none; }
  .gpo-callout-stat-div { display: none !important; }

  .gpo-callout-stat-num { font-size: 1.35rem !important; }
  .gpo-callout-stat-label { font-size: .7rem; }


  /* ═══════════════════════════════════════════════════════════
     HERO BADGE — "Beta is live"
  ═══════════════════════════════════════════════════════════ */
  .hero-badge {
    font-size: .6rem !important;
    padding: .35rem .8rem .35rem .4rem !important;
    max-width: 90vw;
    white-space: normal;
    line-height: 1.4;
    text-align: center;
    justify-content: center;
  }


  /* ═══════════════════════════════════════════════════════════
     PROOF / PILOT SECTION
  ═══════════════════════════════════════════════════════════ */
  .proof-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .proof-stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem;
  }

  .proof-stat-card { padding: 1.1rem 1rem; }

  .proof-stat-num {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }


  /* ═══════════════════════════════════════════════════════════
     STORY ACCORDION BODY — sacc-cta-row
  ═══════════════════════════════════════════════════════════ */
  .sacc-cta-row {
    flex-direction: column !important;
    gap: .6rem !important;
  }

  .sacc-cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }


  /* ═══════════════════════════════════════════════════════════
     DAY IN THE LIFE — summary stats row
  ═══════════════════════════════════════════════════════════ */
  .ditl-sum-stats {
    flex-direction: column;
    gap: .75rem;
    width: 100%;
  }

  .ditl-sum-stat { width: 100%; }


  /* ═══════════════════════════════════════════════════════════
     MARKETPLACE — props grid on smallest screens
  ═══════════════════════════════════════════════════════════ */
  .mkt-props {
    grid-template-columns: 1fr !important;
  }


  /* ═══════════════════════════════════════════════════════════
     GLOBAL BUTTON SAFETY
     Make sure all CTAs are full-width + min touch target
  ═══════════════════════════════════════════════════════════ */
  .hero-cta-row .btn,
  .founding-cta-inner .btn,
  .ehr-closing .btn,
  .sacc-cta-row .btn,
  .final-band .btn,
  .cf-submit {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Prevent any fixed-width element from overflowing viewport */
  * { max-width: 100%; box-sizing: border-box; }

} /* end @media 767px */


/* ═══════════════════════════════════════════════════════════
   TABLET — 768px to 1024px
   Two-column layouts that need help before full desktop
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  .contact-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
  }

  .contact-form-card { padding: 2rem 2rem; }

  .cf-row--2 { grid-template-columns: 1fr 1fr; }

  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem;
  }

  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .gpo-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .gpo-callout-stat-row { flex-direction: column; }
  .gpo-callout-stat { border-right: none; border-bottom: 1px solid rgba(0,212,200,.12); }
  .gpo-callout-stat:last-child { border-bottom: none; }
  .gpo-callout-stat-div { display: none; }

  .cf-check-grid { grid-template-columns: 1fr 1fr; }

  .founding-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .roi-card {
    grid-template-columns: 1fr !important;
  }

  .roi-inputs {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  .mkt-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mkt-props { grid-template-columns: repeat(2, 1fr) !important; }

  .ditl-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   TABLET — 768px–1100px
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1100px) {

  .container { padding: 0 32px; }

  /* Pillars — 2 col on tablet */
  .pillars-grid { grid-template-columns: 1fr 1fr !important; }

  /* Team — 2 col on tablet */
  .team-grid { grid-template-columns: 1fr 1fr !important; }

  /* GPO layout — stack on tablet */
  .gpo-layout { grid-template-columns: 1fr !important; }

  /* ROI card — stack on tablet */
  .roi-card { grid-template-columns: 1fr !important; }
  .roi-inputs { border-right: none !important; border-bottom: 1px solid var(--border); }

  /* Problem stats — 3 col stays but tighter */
  .problem-stats-row { gap: 1rem !important; }

  /* Nav logo */
  .nav-logo-svg { height: 28px; }

}



/* ═══════════════════════════════════════════════════════════
   SMALL PHONES — 480px and below
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .container { padding: 0 16px; }

  /* Hero */
  .headline-line-1 {
    font-size: clamp(2rem, 10.5vw, 2.8rem) !important;
  }
  .headline-accent {
    font-size: clamp(1.9rem, 10vw, 2.6rem) !important;
  }

  .hero-badge { font-size: .58rem; }

  /* Ask / Tell */
  .ja-ask, .ja-tell {
    font-size: clamp(1.75rem, 9.5vw, 2.6rem) !important;
  }

  .ja-intro-lead {
    font-size: clamp(1.15rem, 6vw, 1.5rem) !important;
  }

  /* GPO table — horizontal scroll */
  .gpo-table th:nth-child(2),
  .gpo-table td:nth-child(2) { display: none; }

  /* Mkt props — single column on tiny screens */
  .mkt-props {
    grid-template-columns: 1fr !important;
  }

  /* Pillars bar — single column */
  .pillars-bar-item { min-width: 100% !important; }

  /* Story photo */
  .story-founder-img { height: 210px !important; }

  /* Proof hero photo */
  .proof-hero-photo {
    border-radius: 16px;
    margin: 1.75rem 0 2.25rem;
  }

  .proof-hero-img {
    height: 260px !important;
    object-position: 60% 25%;
  }

  .proof-hero-overlay {
    padding: 1.25rem 1.25rem;
    gap: .65rem;
  }

  .proof-hero-text { font-size: .92rem !important; }

  .proof-hero-badges { gap: .45rem; }

  .proof-hero-badge {
    font-size: .65rem;
    padding: .28rem .7rem .28rem .5rem;
  }

  /* Proof stats */
  .proof-stats.grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* FAQ */
  .faq-q { font-size: .85rem; }

  /* Founding CTA */
  .founding-cta-inner { padding: 1.25rem !important; }

  .sacc-stats { grid-template-columns: 1fr 1fr !important; gap: .4rem; }

} /* end @media 480px */


/* ═══════════════════════════════════════════════════════════
   INVESTORS PAGE — mobile overrides
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hide the sidebar deck nav on mobile */
  #deck-nav { display: none !important; }

  /* Investor hero */
  .inv-hero { padding-top: 100px; }

  .inv-s-num {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
  }

  /* Business model cards */
  .biz-card { padding: 1.5rem 1.25rem; }

  /* Terms table — allow scroll */
  .ct-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  /* Capital table */
  .cap-table-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Team strip */
  .inv-team-grid,
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  .pre-seed-note { padding: 1.1rem 1rem; gap: .75rem; }

} /* end investors mobile */


/* ═══════════════════════════════════════════════════════════
   STORY PAGE — mobile overrides
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .story-main {
    padding: var(--section-pad) 20px !important;
  }

  .story-master-headline {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .story-ch-title {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .story-p { font-size: .95rem; }
  .story-p--lead { font-size: 1.02rem !important; }

  .story-pullquote { padding: 1.25rem 1.25rem; margin: 1.75rem 0; }
  .story-pullquote p { font-size: .95rem !important; }

  .story-pullquote--featured {
    padding: 1.5rem 1.25rem;
  }
  .story-pullquote--featured p {
    font-size: 1rem !important;
  }

  .story-inline-stat-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: .65rem;
  }

  .sis-num { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .sis-label { font-size: .7rem; }

  .story-feature-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }

  .story-team-strip { margin: 1.75rem 0; }

  .sts-card { padding: .85rem 1rem; gap: 1rem; }

  .story-final-cta { flex-direction: column; gap: .75rem; }
  .story-final-cta .btn { width: 100%; justify-content: center; }

  /* Chapters sidebar — hide on mobile */
  .story-chapters { display: none !important; }

  .sp-chapter-strip { display: none; }

} /* end story mobile */