/* ==========================================================================
   Callix — mobile pass (pass 23). Two tiers, nothing at ≥1024 (desktop is
   untouched): ≤1023 fixes the layouts that already stack there (tablet + phone),
   ≤767 (the md breakpoint) sizes things for phones. Figma has no mobile frame;
   these are judgement calls. Loaded last.
   ========================================================================== */

/* ---------------------------------------------------------------- tablet + phone */
/* the stacked hero. It reaches 1279 rather than 1023 because the two-column one needs the full
   1280 column to sit in (see hero.css) — between those widths the card stacks under the copy. */
@media (max-width: 1279px) {
  /* No hero artwork anywhere the hero stacks (request 2026-09-19). 1279 rather than 1023 on
     purpose: it is the same line the two-column hero breaks on, so the rule reads as "a
     stacked hero is copy only" and it covers every tablet orientation rather than leaving a
     1024–1279 band with a shot in it. Home: the chat card, the gradient panel and the sticker
     all live inside .cx-hero__visual. /analyze: the dashboard shot. /track: its sticker.
     /compare has no hero art to begin with. */
  .cx-hero__visual { display: none; }
  .cx-phero__stage { display: none; }
  .cx-phero__sticker { display: none; }
  /* with nothing beside it, the copy takes the column instead of sitting in a 553px
     strip against the left edge of a 1024 screen */
  .cx-hero__copy { width: 100%; }

  /* The logo cloud is a ticker from here down, not just on a phone (request 2026-09-19). It used
     to wrap into two rows of three between 768 and 1279, which left no rule between the rows;
     one moving row has no seam to get wrong and costs 56px instead of ~190. The track holds two
     identical halves, so translating it by exactly half its width lands back where it started —
     which is what the duplicate set in the markup is for. */
  .cx-strip { padding: 24px 0; overflow: hidden; }   /* the track is wider than the screen by design */
  .cx-strip__row {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    height: auto; gap: 16px; padding: 16px 0;
    border: 0;                            /* no rules around the cloud once it scrolls */
  }
  .cx-strip__eyebrow { flex: none; padding: 0 20px; border-right: 0; border-bottom: 0;
    justify-content: center; text-align: center; }   /* centred over the ticker */
  .cx-strip__eyebrow > span { width: auto; }
  .cx-strip__track {
    display: flex; width: max-content;
    animation: cx-strip-scroll 32s linear infinite;
  }
  .cx-strip__cell.is-dup { display: flex; }
  .cx-strip__cell { flex: 0 0 auto; width: auto; height: 32px; padding: 0 24px; border-right: 0; }
}

@media (max-width: 1023px) {

  /* the pill (now the Cal.com booking CTA — pass 25) sits inside the gutter on a phone */
  .cx-pill__box { max-width: calc(100vw - 40px); }
  /* …and the whole pill is the tap target, not just the 24px-tall row of text inside it: the padding moves
     from the pill onto the link. Same box, 44px of it now tappable. */
  .cx-pill__box { padding: 0; }
  .cx-pill__link { padding: 10px 20px 10px 12px; }

  /* footer links are 17px tall in a 16px-gap column: pad them to ~29 and take the space back off the gap,
     so the rhythm is unchanged and the targets are not 17px slivers */
  .cx-footer__links { gap: 4px; }
  .cx-footer__links a { display: inline-block; padding: 6px 0; }

  /* header: the hamburger below 1024, not just below 768 (request 2026-09-16: "use the hamburger on
     tablet too"). nav.css hides the desktop links and buttons and shows the burger; this only narrows
     the gutter to match .container. */
  .cx-nav__bar { padding: 8px 20px !important; }

  /* the bar is transparent by design (Figma, 1920); below 1024 it overlaps every section
     while sticky, so once scrolled it gets a translucent ground in the page colour — or
     the dark ground over the dark hosts (nav.js sets html.cx-nav-dark). */

  /* hero product card: Figma's card is 661 tall with the issues list pinned to its
     bottom — once the lime panel is gone (≤1023) that is ~500px of white. In flow, hugs. */

  /* feature grid: copy full width, the dot illustration under it (as a 40% column it
     left the copy ~130px wide) */
  section[data-cx="grid"] .cx-grid__cell { flex-direction: column; gap: 24px; }
  /* measured at 768 and 390 — the type steps down and the copy's top padding with it */
  section[data-cx="grid"] .cx-grid__cell > div:first-child { padding-top: 20px; }
  section[data-cx="grid"] .cx-grid__cell > div:last-child { width: 45%; max-width: 160px; align-self: flex-end; }

  /* how it works: the gradient art becomes a banner at the top of each slide and the copy
     sits under it on the page ground (with the desktop layout stacked, the ink copy was
     sitting on the blue art). how.js sizes the viewport to the active slide. */
  .cx-how__slide { padding: 292px 32px 40px; background: var(--cx-page); }
  .cx-how__slide > .cx-art { bottom: auto; height: 260px; }
  .cx-how__panel { display: none; }
  .cx-how__copy { margin: 0; }
  .cx-how__bullets { margin-top: 28px; }
  .cx-how__track { align-items: flex-start; transition: transform .6s cubic-bezier(.19, 1, .22, 1), height .4s ease; }
  .cx-how__viewport { transition: height .4s ease; }

  /* dark features: the 362px text stack made the single column 425px wide (text ran off
     the right edge); cells hug their content; one line between cells. */
  .cx-dark__stack { width: auto; }
  .cx-dark__cell-desc { width: auto; }
  .cx-dark__cell { width: auto; height: auto; min-height: 0; padding: 32px; gap: 48px; border-left-width: 1px; }
  .cx-dark__cell:nth-child(n+4) { height: auto; padding-top: 32px; }
  .cx-dark__cell:nth-child(-n+3) { border-top-width: 0; }
  .cx-dark__cell:first-child { border-top-width: 1px; }


  /* closing CTA: the row's flex-basis widths (797 / 391) became heights when it stacked —
     a 797px-tall title over 500px of empty gradient. */
  .cx-cta__title { flex: none; width: auto; }
  .cx-cta__sub { flex: none; width: auto; margin: 0; }
  .cx-cta__head { padding: 64px 0 40px; }
  .cx-cta__row { gap: 24px; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {

  /* the pill is not on the first screen any more — it arrives once the page moves (request
     2026-09-18). site/callix/nav.js sets `is-held` while the page is still at the top; the class is
     set at every width but only does anything here, so the desktop pill is untouched. */
  .cx-pill { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .cx-pill.is-held { opacity: 0; visibility: hidden; transform: translateY(12px); }

  /* the booking pill sits lower and inside a 16 gutter on a phone, and its label steps down one size
     (measured off the running page at 767 → 390: bottom 24→16, padding 0→0 16px, text 16→14). */
  .cx-pill { bottom: 16px; padding: 0 16px; }
  .cx-pill__text { font-size: 14px; }

  /* the grid's 48px inset is a 1920 number: on a 350px box it left the copy 253px and broke every
     heading over four lines. 16 here (request 2026-09-18), on the title cell and the cells alike. */
  .cx-grid__title { padding: 16px; }
  section[data-cx="grid"] .cx-grid__cell { padding: 16px !important; }
  section[data-cx="grid"] .cx-grid__cell:nth-child(even) { padding-left: 16px !important; }
  section[data-cx="grid"] .cx-grid__cell:nth-child(n+3) { padding-top: 16px !important; }

  /* the grid is one column here (measured), so the borders run bottom-only and the last cell drops its */
  section[data-cx="grid"] > div > div.grid { grid-template-columns: 1fr; }
  section[data-cx="grid"] .cx-grid__cell { border-right-width: 0; border-bottom-width: 1px; }
  section[data-cx="grid"] .cx-grid__cell:last-child { border-bottom-width: 0; }
  section[data-cx="grid"] .cx-grid__cell > div:first-child { padding-top: 12px; }

  /* hero (request 2026-09-18). The product card is desktop-only on a phone: at 390 it was 295px of
     illustration below the fold-line, and dropping it leaves the copy the whole section. So the copy
     stops sitting against the top and centres in what it now has to itself. STIX 80 → 52 on a 350
     column (4 lines instead of 5). */
  .cx-hero.container {
    padding-left: 20px !important; padding-right: 20px !important;
    display: flex; align-items: center;
    /* the hero stops short of the fold so the logo cloud clears it (request 2026-09-18): the header
       is 72, the strip is ~152, and 20 keeps it off the very edge. The copy still centres in what is
       left, and min-height is a floor — a long headline pushes the strip down rather than clipping. */
    min-height: calc(100vh - 244px);
    min-height: calc(100svh - 244px);     /* the stable viewport unit where it is supported */
  }
  .cx-hero__copy { width: 100%; padding-top: 0; padding-bottom: 32px; }
  .cx-h1 { font-size: 52px; letter-spacing: -1px; }
  /* the only call to action on the screen, so it takes the column rather than hugging its label */
  .cx-hero__cta { display: flex; width: 100%; justify-content: center; }

  /* the logo cloud ticker now starts at 1279, not here — see the block above. */

  /* ---- the scale, mobile half (set 2026-09-18) ----------------------------------------------
     P1 subtitle 20 -> 16, P2 body 16 -> 14, H3 body header 20 -> 18. Desktop sides are in
     tokens.css. Buttons, the mono eyebrows, the mock product UI and the artwork text are
     deliberately not here — they are not content type and do not follow the scale. */

  /* P2 — body text. .cx-body is 16 on desktop now, so it needs the mobile size stated. */
  .cx-body, .cx-body-16, .cx-q, .cx-quote { font-size: 14px; line-height: 24px; }
  .cx-how__copy p, .cx-how__bullet span { font-size: 14px; line-height: 24px; }
  section[data-cx="grid"] .cx-grid__cell p { font-size: 14px; line-height: 24px; }

  /* P1 — the page subtitles, the four of them. .cx-lead itself is not the role: 28 of its uses
     are legal section headings and 16 are carousel bullets, which are H3 and P2 respectively. */
  .cx-hero__lead, .cx-phero__lead, .cx-integ__lead, .cx-cmp__hero-lead { font-size: 16px; line-height: 24px; }

  /* H3 — body headers. The feature cells are already 18 further down; these are the legal
     documents' section headings, which ride .cx-lead and would otherwise have taken P1. */
  .cx-legal__h2 { font-size: 18px; line-height: 24px; }

  /* ---- type pass (request 2026-09-18) -------------------------------------------------------
     A phone was carrying eleven distinct type sizes. These four rules take it to seven by removing
     the sizes that existed only once, rather than by inventing a mobile scale.

       35 → 20   .cx-title is the section-title role, used by six sections. At 35 on a 350 column
                 "Unlock hidden context." ran to four lines; 20/28 is a heading again.
       24 → 20   the carousel counter was the only 24 on the page, and it is a numeral, not a role.
       19.8 → 24 the feature cells' headings kept a one-off leading; 18/24 is already on the scale.
       15 → 16   the feature cells' copy was the only 15. It joins .cx-body-16, which is what the
                 rest of the body copy on the page already is. The only body size that moves. */
  .cx-title { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; }
  .cx-how__counter { font-size: 20px; line-height: 28px; }
  section[data-cx="grid"] .cx-grid__cell h3 { font-size: 18px; line-height: 24px; letter-spacing: -0.36px; }
  section[data-cx="grid"] .cx-grid__cell p { margin-top: 12px; font-size: 14px; line-height: 24px; letter-spacing: -0.18px; }

  /* how it works: 200px banner, 20px gutters */
  .cx-how { padding: 64px 20px; gap: 32px; }
  .cx-how__counter { padding: 20px 24px; }
  .cx-how__slide { padding: 224px 20px 32px; }
  .cx-how__slide > .cx-art { height: 200px; }

  /* dark features. The cells carry the grid's lines themselves, and the single-column rule in
     sections.css drops the right-hand one — which on a phone is the OUTER edge, so the table read as
     though it had been cut off down the right. It closes here (request 2026-09-18); padding unchanged. */
  .cx-dark__inner { padding: 64px 20px; }
  .cx-dark__cell { padding: 24px; gap: 40px; }
  .cx-dark__cell:last-child { border-bottom-width: 1px; }
  .cx-dark__cell:nth-child(n+4) { padding-top: 24px; }


  /* integrations: 96px tiles, tighter run */
  .cx-integ__inner { padding: 64px 20px; gap: 32px; }
  .cx-integ__marquee { height: 96px; }
  .cx-integ__tile { box-sizing: border-box; width: 96px; height: 96px; flex: 0 0 96px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .cx-integ__tile > img { width: 48px; height: 48px; }
  .cx-integ__group { gap: 20px; padding-right: 20px; }
  .cx-integ__track { animation-duration: 30s; }

  /* stats: 96 → 64 */
  .cx-stats .cx-stat { font-size: 64px; line-height: 64px; }
  .cx-stats__row { padding: 24px 0; }

  /* FAQ + closing CTA: STIX 60 → 44; the dashboard render is dropped on phones (request)
     and the stage with it; questions get a 48px hit area without moving the layout. */
  .cx-h2-display { font-size: 44px; letter-spacing: -0.6px; }
  .cx-faq__inner { padding: 64px 20px; }
  .cx-faq__q { height: auto; min-height: 24px; padding: 12px 0; margin: -12px 0; }

  /* NOTE: the same rule is repeated for coarse pointers at the end of this file — a tablet is a touch
     device with no hover and no keyboard, and at 768 it was landing on the 24px desktop target. */
  .cx-cta__head { padding: 64px 0 56px; }
  .cx-cta__row { padding: 0 20px; }
  .cx-cta__stage, .cx-cta__dash { display: none; }

  /* footer + band */
  .cx-footer__inner { padding: 48px 20px 32px; }
  :root { --cx-band-h: 120px; }   /* band + runway (effects.css) */
}

/* ---------------------------------------------------------------- touch, at any width -------------
   The phone block above stops at 767, which left a tablet tapping a 24px-high accordion question. The
   question is the only control in that section, so it gets the same 48px on every coarse pointer. */
@media (pointer: coarse) and (min-width: 768px) {
  .cx-faq__q { height: auto; min-height: 24px; padding: 12px 0; margin: -12px 0; }
}

/* the logo ticker's loop. Two identical halves, so half a turn is a whole cycle. */
@keyframes cx-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-strip__track { animation: none; }
  .cx-pill { transition: none; }
  .cx-pill.is-held { transform: none; }
}