/* ==========================================================================
   FILE: css/responsive.css
   Breakpoints that cross section boundaries. Section-local rules stay in
   their own files.
========================================================================== */

/* ---------- REVEAL ANIMATION --------------------------------------------- */

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
[data-reveal-stagger].is-in > *{ opacity:1; transform:none; }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay:.00s; }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:.06s; }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:.12s; }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:.18s; }
[data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:.24s; }
[data-reveal-stagger].is-in > *:nth-child(6){ transition-delay:.30s; }
[data-reveal-stagger].is-in > *:nth-child(7){ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; }
}

/* ---------- LAPTOP -------------------------------------------------------- */

@media (max-width:1120px){
  .assistant-panel{ grid-template-columns:1fr; gap:var(--s5); }
  .proof-grid{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .price-lead{ text-align:center; }
  .price-lead .ticks{ align-items:center; }
  .price-card.is-featured{ order:-1; }
}

/* six-across only survives on wide screens; step down 6 -> 3 -> 2 -> 1 */
@media (max-width:1240px){
  .feature-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
}

/* ---------- TABLET --------------------------------------------------------- */

@media (max-width:940px){
  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
  .trust-lead{ grid-column:1 / -1; border-right:0; max-width:none; padding-right:0; }
  .pipeline-rail{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:var(--s4); }
  .pipeline-rail::before{ display:none; }
}

/* ---------- COMPARE STACK ---------------------------------------------------- */

@media (max-width:860px){
  .compare-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .vs-badge{ top:50%; }
  .compare-card h3{ min-height:0; }
}

/* ---------- MOBILE ------------------------------------------------------------ */

@media (max-width:680px){
  .feature-grid{ grid-template-columns:1fr; }
  .chat-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bubble{ max-width:none; }
  .assistant-panel{ padding:var(--s4) var(--s3); }
  .pipeline-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote{ flex-direction:column; text-align:center; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .trust{ grid-template-columns:1fr; }
  .vs-badge{ width:44px; height:44px; font-size:12px; }
}

@media (max-width:480px){
  .tool{ font-size:10px; padding:6px 9px; }
  .tool img{ width:16px; height:16px; }
  .spoke{ font-size:10px; padding:6px 9px; }
  .hub{ width:126px; height:84px; font-size:13px; }
  .price-fig b{ font-size:36px; }
}

/* .abp mobile rescue — external override, block untouched */
@media (max-width:940px){
  section.abp .abp-frame{ -webkit-mask:none!important; mask:none!important; }
  section.abp .abp-box::before{ display:none!important; }
  section.abp .abp-title,
  section.abp .abp-caption{ background:var(--abp-page)!important; }
  section.abp .abp-title{ font-size:calc(var(--abp-title) * .77)!important; white-space:normal!important;
    width:min(88%,420px)!important; text-align:center!important; }
  section.abp .abp-rail{ grid-template-columns:repeat(4,1fr)!important; row-gap:26px!important; }
  section.abp .abp-seg{ display:none!important; }
}

/* ==========================================================================
   MOBILE PASS — phone findings from Leon's device, 2026-08-16.
   Everything below is additive and scoped to stacked/narrow layouts.
========================================================================== */

/* 1 ── Feature cards: the art must never paint under the text.
   .feature-thumb img{max-height:100%} silently fails (percentage against a
   centered grid item), so the art overflowed its 96px area at every width
   below ~1300px. Cap it in px instead. */
.feature-thumb img{ max-height:96px; }
@media (max-width:680px){
  .feature-thumb{ height:128px; }
  .feature-thumb img{ max-height:128px; }
}

/* 2 ── Hero, stacked layouts: neutralise the desktop composition block.
   The editor-tuned values at the foot of hero.css are unconditional and
   were measured on the 880px desktop stage. In the stacked layout they
   clipped the panel to 624px (amputating the dashboard and cards), shrank
   the dashboard to 80%, and left 53-83px of ghost space under the copy. */
@media (max-width:1180px){
  .hero-panel{ height:auto; }
  .dash-shot{ left:auto; top:auto; scale:none; }
  .hero-floats{ scale:none; margin-bottom:0; }
  .float-card.f1,.float-card.f2,.float-card.f3,.float-card.f4{ scale:none; }
  .float-card.f4{ width:auto; }
  .hero h1,.hero-sub,.hero-cta,.hero .ticks{ left:0; top:0; }
}
@media (max-width:680px){
  /* glow positions are percentages of the desktop panel; on a tall narrow
     panel they land on the headline text. Off on phones. */
  .hero-glows{ display:none; }
}
@media (max-width:440px){
  /* keep the metric cards as a 2x2 cluster like the desktop composition,
     not a single tall stack */
  .hero-floats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .float-card{ padding:11px 12px 10px; }
}

/* 3 ── .abp on phones: title and caption sit in the flow instead of
   straddling the frame (the knockout rectangles read as glitches on the
   gradient background), and the icon rail centres its rows. */
@media (max-width:940px){
  section.abp .abp-title{ position:static!important; transform:none!important;
    translate:none!important; margin:0 auto 6px!important; background:none!important;
    padding:0 8px!important; text-align:center!important; }
  section.abp .abp-caption{ position:static!important; transform:none!important;
    translate:none!important; margin:14px auto 0!important; background:none!important;
    white-space:normal!important; text-align:center!important; }
  section.abp .abp-rail{ display:flex!important; flex-wrap:wrap!important;
    justify-content:center!important; gap:26px 26px!important; }
  section.abp .abp-node{ flex:0 0 auto!important; }
}

/* 4 ── .abc: bring the VS badge back when the two cards stack. The block
   hides it at <=860px; centred on the seam it still reads correctly. */
@media (max-width:860px){
  section.abc .abc-vs{ display:grid!important; }
}

/* 5 ── Pricing: heading and lead first, cards after. The order:-1 above
   was written for the side-by-side layout; once everything stacks it put
   the Pro card in front of the section heading. */
@media (max-width:1120px){
  .price-card.is-featured{ order:0; }
}

/* 6 ── Mechanical: anchor jumps clear the fixed header, and the burger
   meets the 44px tap-target floor. */
[id]{ scroll-margin-top:84px; }
.nav-toggle{ width:44px; height:44px; }

/* 3b ── .abp phone sizing: smaller icons/labels so the rail fits 4+3 on a
   390px screen, and a tighter frame. The block reads everything through its
   own CSS variables, so resizing from outside uses its intended knobs. */
@media (max-width:480px){
  section.abp{ --abp-icon:34px; --abp-label:11.5px; --abp-pad-y:28px; }
  section.abp .abp-rail{ gap:22px 12px!important; }
}

/* ==========================================================================
   MOBILE PASS v2 — Leon's review of the first pass, 2026-08-16.
========================================================================== */

/* A ── Hero: dashboard leads. First thing on the page, wider than the
   panel padding, tilted like the desktop composition, glows behind it. */
@media (max-width:680px){
  .hero-stage{ order:-1; }
  .hero-grid{ gap:var(--s4); }
  .hero-stage-inner{ perspective:1100px; }
  .dash-shot{
    position:relative; z-index:2;
    width:calc(100% + 30px); margin-left:-15px;
    transform:rotateY(-8deg) rotateX(2deg) rotateZ(1.2deg);
  }
  /* glows return, repositioned behind the dashboard at the top of the
     panel instead of scattered over the headline */
  .hero-glows{ display:block; }
  .dg-1{ --x:18%; --y:5%;  --w:55%; --o:.75; z-index:0; }
  .dg-2{ --x:62%; --y:3%;  --w:70%; --o:.70; z-index:0; }
  .dg-3{ --x:92%; --y:8%;  --w:45%; --o:.75; z-index:0; }
  .dg-4,.dup-1{ display:none; }
}

/* B ── .abc VS badge: card heights differ when stacked, so dead-centre
   misses the seam. Open the seam up and pad both card edges so the badge
   always sits in clear space, never on text. */
@media (max-width:860px){
  section.abc .abc-grid{ gap:30px!important; }
  section.abc .abc-card--bad{ padding-bottom:44px!important; }
  section.abc .abc-card--good{ padding-top:58px!important; }
}

/* C ── the metric cards sat flush against the tick list above them (the
   stacked layout zeroes the cluster's top padding). Give them air. */
@media (max-width:1180px){
  .hero-floats{ margin-top:22px; }
}

/* ==========================================================================
   MOBILE PASS v3 — Leon's review round three, 2026-08-16.
========================================================================== */

/* A ── .abc VS badge, third attempt: absolute centring can never track the
   seam because the stacked cards differ in height. Flatten the grid into
   the wrap (display:contents) and let the badge sit in the flow between
   the two cards, pulled over both edges so it visibly joins them. */
@media (max-width:860px){
  section.abc .abc-wrap{ display:grid!important; grid-template-columns:1fr!important; gap:0!important; }
  section.abc .abc-grid{ display:contents!important; }
  section.abc .abc-card--bad{ order:1!important; }
  section.abc .abc-vs{ order:2!important; position:static!important;
    transform:none!important; justify-self:center!important;
    margin:-16px auto!important; }
  section.abc .abc-card--good{ order:3!important; }
  /* the seam padding from the first pass stays, so the overlap covers
     card padding, never text */
}

/* B ── picture slots on phones: stop reserving a ratio the artwork does
   not have. The slot hugs the image instead, so every graphic runs the
   full width of the screen with no letterboxing. Element-prefixed to
   outrank the per-page ratio overrides regardless of load order. */
@media (max-width:900px){
  figure.mod-figure,
  figure.mod-figure.is-wide,
  figure.mod-figure.is-tall,
  figure.mod-figure.ct-figure,
  figure.sec-figure{ aspect-ratio:auto; padding:10px; }
  figure.mod-figure img,
  figure.sec-figure img{ height:auto; }
}

/* C ── resources: the hero image was hidden entirely on phones; show it,
   inheriting the capped, centred stacked treatment. */
@media (max-width:640px){
  .hub-fig{ display:block; }
}

/* v3 addendum ── module pacing on phones: flipped modules have their
   figure first in the DOM, so stacked pages showed two images
   back-to-back across module boundaries. Text first, image last, in
   every module. */
@media (max-width:900px){
  .mod > .mod-figure{ order:2; }
}

/* v3 addendum 2 ── phone menu polish: Log in reads as a real button in
   its own colour (site blue, vs the purple primary), and the open menu
   extends to the bottom of the screen so the page's own wait-list
   button no longer shows stacked beneath the menu's. */
.nav-mobile{ inset:70px 0 0 0; }
.nav-mobile .btn--quiet{
  border:1.5px solid rgba(59,130,246,.55);
  background:rgba(59,130,246,.10);
  color:#8FB8FA;
  text-align:center;
}
.nav-mobile .btn--quiet:hover{
  border-color:rgba(59,130,246,.85);
  background:rgba(59,130,246,.16);
  color:#B9D4FC;
}