/* ============================================================
   AlphaPods — RESPONSIVE

   ⚠ EVERY VALUE IN THIS FILE IS DERIVED [D].
   The Figma file QZzsgyQVbzexHu5It59Jlu contains ONE page and TWO
   frames, both 1920px desktop (634:244 and the target 641:980).
   There are no tablet or mobile frames, so nothing here is a Figma
   value. Breakpoints, reflow order and scaled type are engineering
   choices that preserve the desktop design's proportions and
   hierarchy. Replace with real values if those frames get designed.

   Breakpoints [D]:
     >= 1920   exact desktop, 1:1 with the artboard
     1440-1919 content column holds 1520, gutters compress
     1024-1439 type steps down, hero stops being absolutely placed
     768-1023   tablet — single column
     < 768      mobile
   ============================================================ */

/* ---- 1440-1919: keep 1520 content, shrink the 200px gutters [D] ---- */
@media (max-width:1919px){
  :root{ --gutter:clamp(40px,10.42vw,200px); }   /* 200/1920 = 10.42% [F ratio] */
  .header__inner{ padding-inline:clamp(24px,3.125vw,60px); } /* 60/1920 = 3.125% [F ratio] */
  /* The nav is pinned to x=680.5 only while the 1920 artboard grid holds.
     Below it, that absolute x collides with the CTA, so it returns to flow. [D] */
  /* the base rule already centres the nav on the header; letting it fall back
     to a flex item with auto margins centred it in the space LEFT OVER between
     the logo (248) and the CTA (174), which reads visibly off-centre */
}

/* ---- 1440-1919, continued: the fixed Figma widths must become caps ----
   BUG THIS FIXES: the gutter above shrinks the content column as soon as
   the viewport drops below 1920, but every width traced off the artboard
   (.pcard__body 385.6, .problem__quote's 916px column, .meet's 507/601
   grid, the stats' 118/110 inset, .testimonial's 284 indent ...) stayed
   at its desktop pixel value until the 1439 breakpoint. Between 1440 and
   1919 nothing capped them, so the third problem card and the pull-quote
   ran outside the section. Each fixed width below is turned into a
   min(desktop, available) cap; the type scale is untouched and still
   steps down at 1439. [D] */
@media (max-width:1919px){
  .hero__title{ width:min(957px,100%); }
  .hero__lede{ width:min(800px,100%); }
  .hero__pills{ width:min(757px,100%); }

  .problem__title{ width:min(953px,100%); }
  .problem__cards{ height:auto; }
  .pcard__body{ width:100%; }
  .pcard__body .card-title{ width:100%; }
  .pcard__body .body2{ width:100%; }
  .problem__quote{
    grid-template-columns:minmax(0,1fr) minmax(0,580px);
    height:auto;
  }
  .problem__quote blockquote{ width:100%; }

  .meet{
    /* [F] the frame insets the whole block 180 inside its 1520 column — the
       heading starts at the same distance from the section edge on every
       screen, so it is carried as a percentage rather than zeroed. */
    padding-inline:11.84%;                 /* 180 / 1520 */
    grid-template-columns:minmax(0,507fr) minmax(0,601fr);
    min-height:0;
  }
  .meet__lede{ width:min(403px,100%); }
  .meet__feature{ grid-template-columns:60px minmax(0,1fr); }
  /* the pair is placed at artboard x=1548/1587 against the 1520 column;
     anchor them to its right edge instead so they stay inside it */
  .meet__dot--sm{ left:auto;right:-28px; }
  .meet__dot--lg{ left:auto;right:-67px; }

  .ways__head,.ways__title{ width:min(934px,100%); }
  .ways__lede{ width:min(521px,100%); }
  .ways__grid{ width:min(1360px,calc(100% - 80px)); }

  /* the 120 inset plus three 401 cards only fits the full 1520 column */
  .pods{ padding-inline:0; }

  .stats{ padding-left:0;padding-right:0; }
  .stat:nth-child(1) .body2,
  .stat:nth-child(2) .body2,
  .stat:nth-child(3) .body2,
  .stat:nth-child(4) .body2{ max-width:none; }

  /* hold the 284 indent only while the quote still fits beside it */
  .testimonial{ padding-left:max(0px,min(284px,calc(100% - 920px))); }
}

/* ---- 1024-1439: hero leaves absolute positioning [D] ---- */
@media (max-width:1439px){
  :root{
    --h1-size:64px; --h1-lh:70px; --h1-ls:-2px;
    --h2-size:60px; --h2-lh:66px; --h2-ls:-2px;
    --section-gap:120px;
  }
  .nav{ gap:40px; }

  .hero{ height:auto; padding-block:96px 104px; }
  .hero__copy{
    position:static;
    width:100%;height:auto;
    padding-inline:var(--gutter);
  }
  .hero__title,.hero__lede{ width:min(100%,720px); }
  .hero__lede{ position:static;margin-top:28px; }
  .hero__pills{ position:static;margin-top:44px;width:100%; }
  .hero__actions{ position:static;margin-top:44px; }
  .hero__art{
    left:auto;right:-160px;top:40px;
    width:560px;opacity:.55;
  }
  .hero__grid{ width:70%;height:100%; }
}

/* ---- Problem + Meet reflow, all derived [D] ---- */
@media (max-width:1439px){
  .problem__title{ width:min(100%,760px); }
  .problem__cards{ height:auto; }
  .pcard__body,.pcard__body .card-title,.pcard__body .body2{ width:100%; }
  .problem__quote{ grid-template-columns:1fr 480px;height:auto; }
  .problem__quote blockquote{ width:100%; }
  .meet{ padding-left:0;grid-template-columns:1fr 1fr;gap:64px;min-height:0; }
  .meet__lede{ width:100%; }
  .meet__feature{ grid-template-columns:60px 1fr; }

  .ways{ height:auto;padding-bottom:80px; }
  /* the scattered pair is placed in px against the 1920 grid; below it the
     card row shifts and they would drift onto the card [D] */
  .ways__dot--a,.ways__dot--b{ display:none; }
  .ways__head,.ways__title{ width:100%;max-width:100%;padding-inline:var(--gutter); }
  .ways__lede{ width:min(100%,521px); }
  .ways__grid{ width:100%;grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:var(--gutter);max-width:100%; }

  .pods{ padding-inline:0; }
  /* the pair hangs 92 and 57 to the LEFT of the row; once the row loses the
     120 inset there is no room for them, and below 1024 the rows dissolve
     into one grid so the row is no longer their containing block [D] */
  .pods__dot{ display:none; }
  .pods__head,.pods__sub{ width:100%; }
  .pods__row{ gap:24px; }
  .pod{ min-height:0; }
  /* NOTE: this block used to re-anchor .pod__badge to right:14px and
     .pod__notch to right:7px, from when the badge's hole was a painted
     box. Both are gone. The hole is now baked into the artwork, which
     stretches with the card, so the badge's percentage position tracks
     it at every width — an override pinning it to the right edge pulled
     it off-centre in the hole. .pod__notch no longer exists at all. */
  /* THE NOTCH IS A 401px-CARD DEVICE. The cut is a fixed 200x71 and the
     button a fixed 172x47, both correct only while the card is 401 wide.
     Once the cards shrink — 345 at 1366, 349 at 917 — the cut eats most
     of the width and leaves a thin stub at the bottom-left, which reads
     as a broken corner rather than a notch. Below 1440 the cut is dropped
     and the button simply sits in flow at the bottom-right of the body,
     keeping its exact 172x47 box. */
  .pod:after{ display:none; }
  .pod__cta{
    position:static;
    align-self:flex-end;
    margin-top:auto;                       /* pin to the bottom so the buttons
                                              line up across a row, whatever
                                              the tag rows do */
    padding-top:0;
  }
  .pod__tags{ margin-bottom:20px; }
  .pod__body{ padding-bottom:26px; }
  /* The desktop 207px is the width that reproduces Figma's tag wrapping on
     a 401 card — it is a wrapping value, not clearance for the button (the
     button sits below the tags, not beside them). Carrying it down starved
     the row: at 917 the cards are ~349 wide, so 100%-180 left 169px and
     every tag took its own line. The row now uses the full width, and the
     body gains bottom room so a third line still clears the notch. */
  .pod__tags{ width:100%;min-width:0; }
  .way{ height:auto;min-height:480px;padding:40px; }
  .way__title{ font-size:44px;line-height:56px; }
  .way__body{ width:100%; }
}

/* ---- 768-1023: tablet [D] ---- */
@media (max-width:1023px){
  :root{
    --h1-size:52px; --h1-lh:58px;
    --h2-size:46px; --h2-lh:52px;
    --header-h:88px;
    --section-gap:96px;
  }
  .nav{ display:none; }
  /* drawer button + CTA: see "mobile nav drawer" below */
  .hero{ padding-block:64px 80px; }
  .hero__art{ right:-220px;width:460px;opacity:.4; }
  .hero__grid{ width:100%;opacity:.5; }
  .pill{ height:44px;padding:9px 18px;font-size:18px; }
  .hero__pills{ height:44px; }

  .problem__cards{ grid-template-columns:1fr; }
  .pcard + .pcard{ border-left:0;border-top:.6px solid var(--card-line); }
  .problem__quote{ grid-template-columns:1fr;gap:20px; }
  .problem__rule{ display:none; }
  .meet{ grid-template-columns:1fr;gap:48px; }
  .meet__stat{ margin-top:40px; }
  .meet:after{ width:520px;height:500px;left:-220px;opacity:.12; }   /* [D] */

  .ways__grid{ grid-template-columns:1fr;gap:24px; }
  .way{ min-height:0; }
  /* .pods__row is a row of THREE. Two-up turns each into 2+1, so cards 3
     and 6 sat alone with an empty cell beside them. Dissolving the rows
     into one grid lets all six flow evenly. */
  .pods{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
  .pods__head{ grid-column:1 / -1; }
  .pods__row{ display:contents; }
}

/* ---- < 768: mobile [D] ---- */
@media (max-width:767px){
  :root{
    --h1-size:38px; --h1-lh:44px; --h1-ls:-1.2px;
    --h2-size:34px; --h2-lh:40px; --h2-ls:-1px;
    --b2-size:16px; --body-lh:24px;
    --gutter:20px;
    --header-h:72px;
    --section-gap:72px;
  }
  .logo img{ width:176px; }              /* [D] lockup scales with the header */

  .hero{ padding-block:40px 56px; }
  .hero__art,.hero__grid{ display:none; }   /* [D] no room at phone width */
  .logo img{ width:150px; }
  .hero__lede{ margin-top:20px; }
  .hero__pills{ margin-top:32px; }
  .hero__actions{
    margin-top:32px;
    flex-direction:column;align-items:stretch;gap:12px;
  }
  .btn--primary,.btn--ghost{ justify-content:center;font-size:16px; }
  .pill{ height:40px;padding:8px 16px;font-size:15px; }
  .hero__pills{ height:40px; }

  .pcard{ padding:32px 24px; }
  .pcard__body{ margin-top:28px; }
  .card-title{ font-size:22px;line-height:30px; }
  .meet__figure{ font-size:52px;line-height:58px; }
  .meet__stat{ gap:20px;height:auto;align-items:center; }
  .meet__feature + .meet__feature{ margin-top:36px; }

  .meet:after{ display:none; }            /* [D] no room at phone width */
  .meet__figure{ width:140px;height:63px; }
  .pods{ grid-template-columns:1fr; }
  .pod__title{ font-size:22px;line-height:30px; }
  .way{ padding:28px 24px; }
  .way__title{ font-size:36px;line-height:46px; }
  .way__list li{ font-size:16px;height:auto; }
  .way__cta{ font-size:16px; }
}

/* ---- mobile nav drawer [D] — no Figma mobile frame defines this ----
   Tablet (768-1023): compact Get Started stays in the header beside the
   menu button. Phone (<768): no room for both, so the CTA moves into the
   drawer as a full-width button (.nav__cta). The drawer hangs off the
   header (absolute, top:100%) so it lines up under it with or without the
   WP admin bar. */
@media (max-width:1023px){
  .header{ z-index:40; }                   /* above the backdrop */

  .btn--header{
    min-width:0;height:40px;
    padding:0 14px;gap:10px;
    font-size:16px;line-height:22px;
    border-radius:11px;
  }
  .btn--header .btn__icon{ width:12px;height:12px; }

  /* hamburger -> close, drawn in CSS so it renders the same on every phone */
  .menu{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:none;
    width:44px;height:44px;               /* touch target */
    margin-left:12px;margin-right:-10px;  /* bars line up with the gutter */
    border-radius:12px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu:focus-visible{ outline:2px solid var(--grad-from);outline-offset:0; }
  .menu__bar{
    display:block;width:22px;height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .25s ease, opacity .2s ease;
  }
  .menu[aria-expanded="true"] .menu__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu__bar:nth-child(2){ opacity:0; }
  .menu[aria-expanded="true"] .menu__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    /* undo the desktop centring (left/top 50% + translate) */
    position:absolute;left:0;right:0;top:100%;transform:none;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;overscroll-behavior:contain;
    margin:0;
    padding:8px clamp(24px,3.125vw,60px) 28px;   /* same inset as .header__inner, so links align with the logo */
    background:#121212;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px rgba(0,0,0,.45);
  }
  .nav.is-open > a:not(.btn){
    display:block;
    padding:16px 0;
    font-size:20px;line-height:26px;
    border-bottom:1px solid var(--line);
  }
  .nav.is-open > a:not(.btn):hover{ opacity:1;color:#FFFFFF; }

  /* dim the page behind the drawer; tapping it closes the menu (main.js) */
  body.nav-open::after{
    content:"";position:fixed;inset:0;z-index:39;
    background:rgba(0,0,0,.55);
  }
  body.nav-open{ overflow:hidden; }
}

@media (max-width:767px){
  .btn--header{ display:none; }
  .menu{ margin-left:auto; }
  .nav.is-open .nav__cta{
    display:inline-flex;justify-content:center;
    width:100%;height:50px;margin-top:24px;
    font-size:17px;
  }
}

@media (prefers-reduced-motion:reduce){
  .menu__bar{ transition:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .pill-track{ animation:none; }
}


/* ============================================================
   F · JOURNEY + STATS — [D], as the rest of this file.
   The desktop block is measured 1:1 off the Figma export, but there is
   still no tablet or mobile frame, so everything below is an
   engineering choice that preserves the desktop hierarchy.
   ============================================================ */
@media (max-width:1919px){
  /* the dot is pinned to the 1920 grid; hold it to the column's right edge */
  .journey__dot{ left:auto;right:36px; }
}

@media (max-width:1439px){
  .journey{ --jstep-step:24px; }
  .jstep{ padding:64px 28px 0; }
  .jstep--1{ height:470px; }
  .jstep--2{ height:calc(470px - var(--jstep-step)); }
  .jstep--3{ height:calc(470px - (var(--jstep-step) * 2)); }
  .jstep--4{ height:calc(470px - (var(--jstep-step) * 3)); }
  .jstep__title{ font-size:22px;line-height:30px; }

  /* The four measured text-box widths only fit inside the 323px desktop
     column. Below that they collide with the rule, so the copy simply
     fills its column instead. */
  .stats{ padding-left:0;padding-right:0; }
  .stat{ padding-right:24px; }
  .stat:nth-child(1) .body2,
  .stat:nth-child(2) .body2,
  .stat:nth-child(3) .body2,
  .stat:nth-child(4) .body2{ max-width:none; }
  .stat__figure{ font-size:64px;line-height:70px; }
  .stat__label{ font-size:22px;line-height:30px;margin-top:20px; }
  .stat .body2{ font-size:17px; }
  .stat:nth-child(even){ margin-top:80px; }
}

/* Two-up. The staircase and its connectors only read across one row,
   so both are dropped and every card squares up. */
@media (max-width:1023px){
  .journey__steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:56px 24px;
    align-items:stretch;
  }
  .jstep,
  .jstep--1,.jstep--2,.jstep--3,.jstep--4{ height:auto;padding-bottom:40px; }
  .jstep:not(:last-child):after{ display:none; }
  .journey__dot{ display:none; }

  .stats{ grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px; }
  .stat:nth-child(even){ margin-top:0; }
  .stat{ padding-right:0; }
}

@media (max-width:767px){
  .journey__steps{ grid-template-columns:1fr;gap:48px;margin-top:44px; }
  .jstep{ padding:56px 24px 32px; }
  .jstep__badge{ left:24px;width:36px;height:36px;border-radius:10px;font-size:13px; }
  .jstep__title{ font-size:20px;line-height:28px;margin-top:28px; }

  .stats{ grid-template-columns:1fr;gap:40px;margin-top:72px; }
  .stat__figure{ font-size:52px;line-height:58px; }
  .stat__label{ font-size:20px;line-height:28px; }
  .stat .body2{ font-size:16px; }
  .stat__foot{ margin-top:24px; }
}

/* ============================================================
   G · SECURITY + H · TESTIMONIAL — [D], as the rest of this file.
   ============================================================ */
@media (max-width:1439px){
  .sfeat{ padding-right:32px; }
  .sfeat + .sfeat{ padding-left:32px; }
  .sfeat__title{ font-size:19px;line-height:26px;margin-top:32px; }

  .testimonial{ padding-left:0; }
  .testimonial__quote{ font-size:32px;line-height:44px;max-width:100%; }
  .testimonial__rule{ width:100%; }
  .testimonial__dot{ display:none; }
}

@media (max-width:1023px){
  .security__grid{ grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px; }
  .sfeat{ padding-right:24px; }
  .sfeat + .sfeat{ padding-left:24px; }
  /* on two-up the divider must reset on each row's first column */
  .sfeat:nth-child(odd){ padding-left:0;border-left:0; }
  .testimonial__quote{ font-size:28px;line-height:38px; }
  .testimonial__mark{ width:40px;height:28px;background-size:17px 28px; }
}

@media (max-width:767px){
  .security__grid{ grid-template-columns:1fr;row-gap:36px;margin-top:40px; }
  .sfeat,.sfeat + .sfeat{ padding-left:0;padding-right:0;border-left:0; }
  .sfeat + .sfeat{ border-top:1px solid rgba(214,219,220,.16);padding-top:36px; }
  .security__lede{ font-size:15px; }

  .testimonial__quote{ font-size:22px;line-height:32px;margin-top:22px; }
  .testimonial__mark{ margin-top:28px; }
  .testimonial__by{ margin-top:32px; }
  .testimonial__rule{ margin-top:32px; }
}

/* ============================================================
   I · CTA + FOOTER — [D], as the rest of this file.
   ============================================================ */
@media (max-width:1439px){
  .cta__card{ height:auto; }
  .cta__copy{ padding:0 56px 0 64px;max-width:62%; }
  .cta__title{ padding-top:44px; }
  .cta__card{ padding-bottom:48px; }
  .cta__title{ font-size:52px;line-height:66px; }
  .cta__art{ width:46%;opacity:.7; }
  .footer__inner{ padding-inline:clamp(24px,5.2vw,76px); }
}

@media (max-width:1023px){
  .cta__copy{ max-width:100%;padding:0 40px; }
  .cta__title{ padding-top:40px; }
  .cta__title{ font-size:42px;line-height:54px; }
  .cta__art{ display:none; }              /* [D] no room beside the copy */
  .footer__inner{
    grid-template-columns:1fr;
    justify-items:start;
    gap:28px;
    padding-block:44px 48px;
  }
  .footer__copy{ justify-self:start; }
}

@media (max-width:767px){
  .cta__card{ border-radius:18px; }
  .cta__copy{ padding:0 24px; }
  .cta__title{ padding-top:32px; }
  .cta__card{ padding-bottom:34px; }
  .cta__title{ font-size:32px;line-height:42px;letter-spacing:-.8px; }
  .cta__lede{ font-size:15px;line-height:23px; }
  .cta__btn{ font-size:16px; }
  .footer__brand img{ width:176px; }
  .footer__links{ flex-wrap:wrap;gap:10px;font-size:15px; }
  .footer__copy,.footer__tag{ font-size:14px; }
}

/* The bloom is now real artwork stretched to the card, so it can no
   longer be re-tuned with smaller radii. On a phone the card is narrow
   and tall, which pushes the bright corner straight under the headline —
   so a dark scrim goes over the bloom but under the copy. [D] */
@media (max-width:767px){
  .cta__card{
    background:
      linear-gradient(rgba(19,17,20,.48),rgba(19,17,20,.48)),
      url(../images/cta-bloom.png) left top / 100% 100% no-repeat,
      #131114;
  }
  .cta__title{ padding-top:0; }
}