/* ═══════════════════════════════════════════════════════════════════════════
   The phone pass.

   The landing page was laid out as columns and then left to collapse. That is
   how a page ends up 22,000 pixels tall on a phone — twenty-six screens of
   scrolling — because every three-across card grid becomes three full-height
   cards stacked, and there are a lot of them. Nothing was broken; there was
   just no version of the page designed for the device most people read it on.

   The fix is not smaller type. It is choosing, per block, between two shapes:

     stack   — when the items are a sequence you read in order, or a pair where
               one explains the other. Vertical is correct; it only needs
               tightening.
     rail    — when the items are alternatives you compare. Three price plans
               are not a list you read top to bottom, they are three things you
               look at side by side, and a phone can do that by swiping. One
               card visible at a time, snapped, with the next one peeking so it
               is obvious there is more.

   Every rule here is inside the media query. Nothing in this file can affect
   a desktop render.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── The rail ──────────────────────────────────────────────────────────
     Bleeds past the page gutter on both sides, so the strip reads as
     scrollable rather than as a list that happens to be clipped. 84% columns
     leave the next card visibly peeking. */
  .nx-price-cards,
  .nxs-crew,
  .nxs-pillars,
  .nxs-why-cards,
  .nxs-layer,
  .nxs-cio-tiles {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-bottom: 0.5rem;
  }
  .nx-price-cards::-webkit-scrollbar,
  .nxs-crew::-webkit-scrollbar,
  .nxs-pillars::-webkit-scrollbar,
  .nxs-why-cards::-webkit-scrollbar,
  .nxs-layer::-webkit-scrollbar,
  .nxs-cio-tiles::-webkit-scrollbar { display: none; }

  .nx-price-cards > *,
  .nxs-crew > *,
  .nxs-pillars > *,
  .nxs-why-cards > *,
  .nxs-layer > *,
  .nxs-cio-tiles > * {
    scroll-snap-align: center;
    /* A rail's cards must agree on height or the strip wobbles as you swipe. */
    height: 100%;
  }

  /* The plan cards carry a feature list that is the tallest thing on the page.
     In a rail it is scrolled past rather than through, so it can stay whole —
     it just must not set the height of the strip on its own. */
  .nx-price-card { height: auto; }

  /* ── The stacks ────────────────────────────────────────────────────────
     These stay vertical because their two halves explain each other. They were
     simply built at desktop proportions. */
  .nxs-cio,
  .nxs-dash,
  .nxs-dash-split,
  .nxs-panels,
  .nxs-why,
  .nxs-gate,
  .nxs-split {
    gap: 1.25rem;
  }

  /* Section rhythm. Seven rem of air above and below reads as generous on a
     desktop and as a blank screen on a phone. */
  .main-wrapper section,
  .main-wrapper .section,
  .nxs-sec {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
  .nxs-head { margin-bottom: 1.75rem; }

  /* Display type set for a 1440px column is not display type at 390px; it is
     four words a line. */
  .nxs-title,
  .nxs-sec h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }
  .nxs-lead,
  .nxs-sec .nxs-sub {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* ── Tap targets ──────────────────────────────────────────────────────
     Anything you are meant to press gets the 44px Apple and Google both ask
     for. These were sized for a cursor, which needs none of it. */
  .mega-nav__bar-link,
  .mega-nav__panel-link,
  .button-wrap,
  .nx-faq-row {
    min-height: 44px;
  }

  /* A full-width primary action, because a 117px button centred in a 390px
     column is a small target surrounded by nothing. */
  .section.is-hero .button-group,
  .section.is-hero .button-slot,
  .section.is-hero .button-wrap,
  .section.is-hero .button {
    width: 100%;
  }
  .section.is-hero .button-content { justify-content: center; }

  /* ── Wide UI mocks ────────────────────────────────────────────────────
     The CIO section embeds a second simulated dashboard — a sidebar rail and a
     main panel, laid out at 523px inside a 358px column. Squashed, it is 1,700
     pixels of illegible interface; it was the single tallest thing left on the
     page.

     It keeps its real width and gets its own scroller. A wide screenshot that
     you pan is honest and readable; the same screenshot crushed to fit is
     neither. The height cap stops one illustration owning two screens, and the
     mask edge is the affordance — a hard clip looks like a rendering bug,
     a fade looks like there is more. */
  .nxs-app {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-height: 26rem;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  }
  .nxs-app::-webkit-scrollbar { display: none; }
  .nxs-app > * { min-width: 34rem; }

  /* ── Cut from the phone, kept on the desktop ──────────────────────────
     Three blocks are marked data-phone-hide in the markup rather than being
     matched by position here, so that moving or renaming one cannot silently
     un-hide it — and so that reading the component tells you it is absent on a
     phone, which a rule buried in a stylesheet does not.

     They are: the central approval inbox, which is a five-column table and a
     table is the one shape that cannot survive a 358px column; the "know what
     needs attention" panel; and the intake-to-payment section. All three are
     untouched on a desktop.

     display:none rather than visibility or a clip, because they should be gone
     from the accessibility tree too — a screen reader on a phone should not
     read out a table nobody can see. */
  [data-phone-hide] { display: none !important; }

  /* ── Horizontal containment ───────────────────────────────────────────
     A page that scrolls sideways by four pixels feels broken in a way people
     notice and cannot name. Wide children get their own scroller instead of
     pushing the document. */
  body { overflow-x: hidden; }
  .nxs-table,
  .nx-cmp-grid,
  pre { overflow-x: auto; }
}

/* Very narrow phones — 320px is still a live width, and it is where anything
   with a fixed minimum finally gives. */
@media (max-width: 380px) {
  .nx-price-cards,
  .nxs-crew,
  .nxs-pillars,
  .nxs-why-cards,
  .nxs-layer,
  .nxs-cio-tiles { grid-auto-columns: 88%; }

  .nxs-title,
  .nxs-sec h2 { font-size: 1.4rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phone pass, second round.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* The headline sat five rem below a fixed header, which is a desktop
     measurement: on a phone that is a screenful of nothing before the first
     word. */
  .main-wrapper .section.is-hero {
    padding-top: calc(var(--nx-header-h) + 1.25rem);
  }

  /* On a phone the funnel opens out almost immediately, so the heading does not
     need to descend to find width — and the space that descent cost was the
     unnecessary gap above the product screen.

     Flat .5rem is right at 375 and wrong by 767. The type stops growing at
     475px, where the clamp tops out at 41px, but the cone at a fixed .5rem of
     descent widens more slowly than the viewport does — so clearance falls
     from 19px at 375 to 2px at 767, which is touching. Growing the descent
     with the viewport keeps it: .5rem where the phone actually is, roughly
     2.7rem by the top of the range, and never more than the 4rem the tablet
     band uses. */
  .nx-tabs-head {
    padding-top: clamp(.5rem, calc(.5rem + (100vw - 375px) * .09), 4rem);
  }

  /* The per-span line break now lives in nx-sections.css and applies at every
     width — it was needed on desktop too, where the heading otherwise sits on
     one line wider than the cone. */
  .nx-tabs-title {
    text-wrap: balance;
    line-height: 1.15;
    /* Brought back down. It had been raised twice — once off the desktop
       clamp's 22px floor, then three pixels beyond that — and ended up at
       34px on a 390px screen, which made it the largest thing on the page
       ahead of the headline itself. It is a section statement, not the
       headline, so it sits between the two now: below the h1, a little above
       the section headings that follow it. */
    font-size: clamp(1.5rem, 7vw, 2.125rem);
  }

  /* The curves start lower, so the heading is not straddling them.
     The two white curves are bottom-aligned at 80% of the section's height,
     which puts their top edge at 3724 while the heading runs 3719-3768 — so
     the first line sits on full-width blue and the second is already inside
     the taper, 31px wider than the beam it is on. The heading cannot move up
     (the eyebrow is 16px above it) and cannot get narrower without breaking
     into three lines that sit even deeper in the taper.

     So the artwork yields instead of the text. Shorter curves start lower,
     the blue stays full-width past the last line, and the V still frames the
     folder below it — which is the only job it has down there. */
  .section:has(.extension_bg) .extension-curve {
    height: 66%;
  }

  /* The globe is the illustration for the section it sits in, and at 16:8 on a
     narrow screen it was a thin strip. A squarer frame gives the sphere the
     width of the phone to fill. */
  #jb-outer {
    aspect-ratio: 4 / 3;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   One type scale for the phone.
   ─────────────────────────────────────────────────────────────────────────
   The landing page is assembled from three sources — the ported Webflow
   markup, the rebuilt .nxs sections, and the .nx-* blocks written for this
   product — and each brought its own idea of how big a section heading is.
   Measured at 390px: 24px, 25px and 28px for the same level, with side
   gutters anywhere from 16px to 59px, and the page's own h1 at 30px, smaller
   than a heading further down it.

   Read on a phone that is not a hierarchy, it is noise. Every section heading
   is one size here, the h1 is the largest thing on the page again, and the
   gutters agree.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* The headline leads. It was 30px against a 34px section heading below it,
     which reads as the page starting quietly and then shouting. */
  .section.is-hero .heading-style-x h1.nx-hero-h1 {
    font-size: min(2.375rem, 8.7vw);
  }

  /* Every other section heading joins the scale this file already sets for
     .nxs-sec h2 — clamp(1.5rem, 6.4vw, 1.9rem) — rather than a second scale
     competing with it. Three of these are styled by <style> blocks inside the
     markup, which sit after this stylesheet in the document and so win at
     equal specificity; each selector below is deliberately one step more
     specific than the inline rule it has to outrank. */
  .nx-cmp-heading .nx-cmp-title,
  .nx-faq-left .nx-faq-heading,
  .nx-price-hero .nx-price-hero-inner h2,
  .section .heading-style-x h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -.022em;
    text-wrap: balance;
  }
  /* The .nxs sections already have the size; they only want the balance. */
  .nxs-sec h2 { text-wrap: balance; }

  /* And one gutter. These headings sat between 16px and 59px from the edge
     depending on which container they happened to be in; the eye reads that
     as the page wobbling from section to section. */
  .nxs-head,
  .nx-cmp-heading,
  .nx-faq-left,
  .nx-price-hero-inner {
    padding-inline: 1.25rem;
  }

  /* Two headings are set left in a column that is narrow on desktop for a
     reason and simply narrow on a phone. "You're probably wondering…" was
     sitting 32px from one edge and 152px from the other, which looks like a
     mistake because it is one at this width. */
  /* Flex, not grid — an earlier attempt set grid-template-columns here and it
     did nothing at all. Two columns side by side is a desktop arrangement;
     below 768 the question column sits above its answers. */
  .nx-faq-wrap { flex-direction: column; }
  .nx-faq-left,
  .nxs-why > div:first-child {
    width: 100%;
    max-width: none;
    text-align: center;
  }
  /* Two columns at 320px is not two columns. */
  .nxs-why { grid-template-columns: 1fr; }
  .nx-faq-left { margin-bottom: 1.25rem; }
}


/* The small-phone step down, last so it wins.
   ─────────────────────────────────────────────────────────────────────────
   The ≤380 block earlier in this file takes .nxs-sec h2 to 1.4rem, and the
   ≤767 block after it holds the other four headings at a 1.5rem floor. Both
   match at the same specificity, so the later one won and 320px reopened the
   split this pass closed: .nxs headings at 22.4px beside everything else at
   24. Restating it here, after both, is the whole fix. */
@media (max-width: 380px) {
  .nx-cmp-heading .nx-cmp-title,
  .nx-faq-left .nx-faq-heading,
  .nx-price-hero .nx-price-hero-inner h2,
  .section .heading-style-x h2 { font-size: 1.4rem; }
}