/* responsive.css — device adaptation. Loaded LAST so it wins where needed.
   Tiers: mobile nav (≤1080), tablet spacing (≤900, grids stay multi-column),
   tablet layout tuning (721–1024), phone (≤720 — collapses + restructures),
   tiny (≤400). Grids collapse to one column at 720 (base.css), so 721–1024
   keeps the PC layout. */

/* ════════════ MOBILE NAV (burger) ════════════ */
.nav-burger{ display:none; width:42px; height:42px; padding:0; cursor:pointer;
  border:1px solid var(--border); background:var(--paper); border-radius:10px;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:border-color .2s ease; }
.nav-burger:hover{ border-color:var(--steel); }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .25s ease, opacity .2s ease; }

@media (max-width:1080px){
  .nav-inner{ flex-wrap:wrap; column-gap:12px; }
  .nav-logo{ order:1; }
  .nav-burger{ display:inline-flex; order:2; margin-left:auto; }
  .nav-links{ order:3; flex-basis:100%; display:none; }
  .nav-ctas{ order:4; flex-basis:100%; display:none; }

  .nav.nav-open .nav-inner{ height:auto; padding-bottom:14px; }
  .nav.nav-open .nav-links{
    display:flex; flex-direction:column; gap:0; width:100%; margin-top:6px;
    padding-top:6px; border-top:1px solid var(--border);
    max-height:calc(100vh - 140px); overflow-y:auto;
  }
  .nav.nav-open .nav-links a{ padding:14px 6px; font-size:16px;
    border-bottom:1px solid var(--border); width:100%; }
  .nav.nav-open .nav-links a::after{ display:none; }   /* drop underline-grow in menu */
  .nav.nav-open .nav-ctas{ display:flex; gap:10px; width:100%; padding-top:14px; }
  .nav.nav-open .nav-ctas .btn{ flex:1; padding:13px 16px; font-size:15px; }

  /* burger → X */
  .nav.nav-open .nav-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.nav-open .nav-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* ════════════ TABLET / STACKED (≤900) ════════════ */
@media (max-width:900px){
  /* trim oversized vertical rhythm */
  .hero{ padding-top:48px; }
  .hero-frame{ margin-top:36px; }
  .coverage{ padding-top:40px; }
  .problem{ padding-top:64px; padding-bottom:32px; }
  .platform{ padding-top:64px; padding-bottom:40px; }
  .platform-head{ margin-bottom:28px; }
  .layers{ padding-top:32px; padding-bottom:40px; }
  .live{ padding-top:64px; padding-bottom:64px; }
  .how{ padding-top:60px; padding-bottom:48px; }
  .who{ padding-top:60px; padding-bottom:48px; }
  .approach{ padding-top:64px; padding-bottom:64px; }
  .case{ padding-top:60px; padding-bottom:48px; }
  .pricing{ padding-top:60px; padding-bottom:48px; }
  .faq{ padding-top:60px; padding-bottom:48px; }
  .team{ padding-top:60px; padding-bottom:48px; }
  .finalcta{ padding-top:76px; padding-bottom:84px; }

  /* sticky columns make no sense once stacked */
  .problem-lead{ position:static; top:auto; }
  .faq-lead{ position:static; top:auto; }

  /* tighten gaps on the now single-column grids */
  .problem-grid{ gap:32px; }
  .platform-grid{ gap:28px; }
  .how-head, .who-head, .team-head{ gap:24px; align-items:start; }
  .case-headrow{ gap:20px; align-items:start; }
  .case-stat{ justify-content:flex-start; }
  .case-quote-grid{ gap:24px; align-items:start; }
  .team-main{ gap:32px; }

  /* the live demo answer row narrows */
  .live-a-row{ gap:12px; }
}

/* ════════════ TABLET LAYOUT (721–1024 — keeps PC grids) ════════════ */
@media (max-width:1024px) and (min-width:721px){
  /* shrink the oversized team portrait so the quote column keeps room */
  .team-main{ grid-template-columns:320px 1fr; gap:36px; }
  .team-portrait{ height:440px; }
  /* problem split a touch tighter */
  .problem-grid{ gap:40px; }
  .faq-grid{ gap:44px; }
}

/* ════════════ PHONE (≤720) ════════════ */
@media (max-width:720px){
  .wrap{ padding-left:16px; padding-right:16px; }

  .announce{ padding:9px 38px; font-size:12px; gap:8px; }
  .announce-text{ flex-direction:column; text-align:center; gap:5px; }
  .announce-mid{ display:none; }          /* drop the orphan separator when stacked */
  .announce-flag{ font-size:10px; }
  .announce-link{ margin-left:0; }

  /* section spacing one notch tighter */
  .hero{ padding-top:36px; }
  .problem, .platform, .how, .who, .case, .pricing, .faq, .team{ padding-top:52px; }
  .live, .approach{ padding-top:52px; padding-bottom:52px; }
  .finalcta{ padding-top:60px; padding-bottom:64px; }

  /* hero / final CTAs become full-width tap targets */
  .hero-cta, .finalcta-ctas{ width:100%; flex-direction:column; }
  .hero-cta .btn, .finalcta-ctas .btn{ width:100%; }

  /* keep the hero eyebrow pill on a single line */
  .hero-tag{ white-space:nowrap; font-size:10.5px; padding:6px 13px; gap:7px; max-width:100%; }
  .hero-tag .tag-sep{ height:11px; }

  /* problem cards: stack tag above text */
  .problem-card{ flex-direction:column; gap:8px; padding:18px 18px; }
  .problem-tag{ flex:0 0 auto; }

  /* live example — tighten the gap under the heading and balance the
     question→answer rhythm so blocks don't drift apart */
  .live-head{ margin-bottom:24px; }
  .live-sub{ margin-top:12px; }
  .live-selector{ margin-bottom:30px; }
  .live-q-row{ justify-content:flex-start; margin-bottom:14px; }
  .live-q{ padding:14px 16px; font-size:15px; min-height:0; max-width:100%; }
  .live-a-avatar{ width:34px; height:34px; flex-basis:34px; }
  .live-a-avatar .logo{ width:17px; height:14px; }
  .live-a-card{ padding:18px 16px; }
  .live-domain{ min-width:0; }

  /* case study quote mark + stat */
  .case-quote{ padding:30px 20px 24px; }
  .case-quote-mark{ font-size:130px; top:-22px; right:14px; }
  .case-quote-text{ font-size:20px; }
  .case-stat-from, .case-stat-to{ font-size:30px; }
  .case-stat-arrow{ font-size:18px; }
  .case-band-co{ flex-wrap:wrap; }

  /* unified pricing panel — tighten + stack buttons */
  .price-solo{ padding:32px 20px 34px; }
  .price-solo-actions{ flex-direction:column; align-items:stretch; }
  .price-solo-actions .btn{ width:100%; }

  /* faq alignment */
  .faq-q{ font-size:17px; gap:10px; }
  .faq-q-n{ min-width:0; }
  .faq-a{ padding-left:0; }

  /* how banner */
  .how-banner{ padding:20px; gap:16px; }
  .how-banner .btn{ width:100%; }

  /* team */
  .team-head h2{ max-width:100%; }
  .team-main{ grid-template-columns:1fr; }
  .team-portrait{ height:340px; }
  .team-quote-mark{ left:-10px; top:-18px; font-size:78px; }
  .team-byline{ flex-wrap:wrap; gap:14px; }
  .team-byline-link{ margin-left:0; width:100%; justify-content:center; }

  /* footer aligns left when stacked */
  .footer-top{ gap:28px; }
  .footer-links{ justify-content:flex-start; gap:16px 20px; }
  .footer-legal{ gap:10px; }
  .footer-legal-links{ margin-left:0; order:-1; flex-basis:100%; }

  /* approach rows */
  .approach-row{ padding:22px 0; }
  .approach-watermark{ width:300px; right:-60px; }

  /* back-to-top a touch smaller / inset */
  .to-top{ right:18px; bottom:18px; width:44px; height:44px; }
}

/* ════════════ TINY (≤400) ════════════ */
@media (max-width:400px){
  .nav-logo-text{ font-size:17px; }
  .billing{ flex-direction:column; gap:4px; border-radius:16px; }
  .billing-pill{ display:none; }            /* column layout — pill can't track */
  .billing-btn{ width:100%; border-radius:999px; }
  .billing-btn.is-active{ background:var(--ink); }
  .case-stat-from, .case-stat-to{ font-size:26px; }
}

/* ════════════ MOBILE RESTRUCTURE (denser blocks) ════════════ */
/* Preview affordances hidden by default; approach wrapper is transparent to the
   desktop grid (display:contents) so n/tag/title/body stay 4 columns. */
.opt-dots, .opt-hint{ display:none; }
.opt-approach-top{ display:contents; }

@media (max-width:720px){
  /* APPROACH — number + tag inline above the title (compact rows) */
  .opt-approach-top{ display:flex; align-items:center; gap:12px; }
  .opt-approach-top .approach-n{ padding-top:0; }
  .opt-approach-top .approach-tag{ padding-top:0; }
  .approach-row{ gap:6px; }

  /* FAQ — heading stays on top; intro + CTA + enterprise card drop below
     the questions. display:contents lets the lead's children reorder
     independently around the questions list. */
  .faq-grid{ gap:20px; }
  .faq-lead{ display:contents; }
  .faq-lead h2{ order:1; }
  .faq-list{ order:2; }
  .faq-lead-body{ order:3; margin-top:0; }
  .faq-lead-cta{ order:4; margin-top:0; justify-self:start; }
  .faq-ent{ order:5; margin-top:0; }
}

@media (max-width:720px){
  /* PRICING — horizontal swipe carousel, one plan per screen.
     overflow-x:auto forces overflow-y to clip, so the carousel needs top
     padding or it shears off the RECOMMENDED badge that sits above the card. */
  .pricing-grid{
    position:relative;
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; gap:14px; margin:14px -16px 0; padding:18px 16px 4px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .pricing-grid::-webkit-scrollbar{ height:0; }
  .pricing-grid .price-card{ flex:0 0 86%; scroll-snap-align:center; margin-top:0; }
  .opt-dots{ display:flex; gap:7px; justify-content:center; margin-top:18px; }
  .opt-dots i{ width:7px; height:7px; border-radius:999px; background:var(--border);
    display:block; transition:width .2s ease, background .2s ease; }
  .opt-dots i.on{ background:var(--ink); width:20px; }
  .opt-hint{ display:block; text-align:center; color:var(--ink-mute); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; margin-top:8px; }

  /* WHO — two compact columns, hero full-width */
  .who-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .who-card{ grid-column:auto !important; min-height:148px !important; padding:18px 16px !important; }
  .who-card.who-hero{ grid-column:span 2 !important; min-height:0 !important; }
  .who-card-role{ font-size:16px !important; }
  .who-hero .who-card-role{ font-size:20px !important; }
  .who-card-body{ font-size:12.5px !important; }

  /* PLATFORM tabs — horizontal scroll. Show every card's description up-front
     (no expand-on-active) so scroll-cards aren't half-empty, and keep them
     equal height. */
  .platform-tabs{ flex-direction:row !important; overflow-x:auto; gap:10px;
    margin:0 -16px; padding:0 16px 10px; scroll-snap-type:x mandatory; align-items:stretch; }
  .platform-tabs::-webkit-scrollbar{ height:0; }
  .platform-tabs .plat-tab{ flex:0 0 82%; scroll-snap-align:start; }
  .platform-tabs .plat-tab-lead{ max-height:none !important; opacity:1 !important;
    padding-left:22px; margin-top:6px; color:var(--ink-mute); }
  .platform-tabs .plat-tab-arrow{ opacity:1; transform:none; }

  /* LIVE domain selector — horizontal scroll */
  .live-selector{ flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -16px 30px; padding:0 16px 8px; }
  .live-selector::-webkit-scrollbar{ height:0; }
  .live-domain{ flex:0 0 72% !important; min-width:0 !important; scroll-snap-align:start; }
}