/* ==========================================================================
   Callix sections, pass 10 — feature grid 878:5074 · stats 878:5346 ·
   footer 878:5404 · (second strip 878:5222 shares hero.css §3)
   --------------------------------------------------------------------------
   Every number is a measurement off the Figma frames named above. Figma
   frames draw their 1px stroke INSIDE the box
   without offsetting children, so where a child sits at 32/48 from the frame
   edge the CSS padding is 31/47 + the 1px border (border-box). Widths follow
   the 1280 column (decision 2); heights and insets follow Figma exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Feature grid — 878:5074 · frame 1117 = 70 + box 977 + 70
   box > h2 · divider · 2×2 cells. The cells' COPY is Callix's own; Figma draws
   them empty by design (decision 3).
   -------------------------------------------------------------------------- */
/* Figma has no spacer between the strip and the grid, so the h-16 md:h-40 one goes */
.cx-strip + div[class*="h-16"] { display: none; }

section[data-cx="grid"] { padding: 70px 40px !important; }
section[data-cx="grid"] > div {                 /* 878:5075 — 1223 × 977, white, 1px line, no radius */
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
  border-radius: 0;
  padding: 0 !important;
  overflow: visible;
}
.cx-grid__title {                               /* 878:5076 — header cell 177: text at (48,48) 1032×80 */
  margin: 0;
  padding: 47px 48px 48px 47px;
  max-width: 1032px;
  box-sizing: content-box;
}
/* the divider between the heading and the cells: the width and style are declared here, not left to
   the utility class — without them the rule measured 0 and the card lost a pixel */
section[data-cx="grid"] > div > div.border-t { border-top: 1px solid var(--cx-line); }
section[data-cx="grid"] .cx-grid__cell {  /* 878:5079… — 612 × 400, p-48 */
  box-sizing: border-box;
  height: 400px;
  padding: 47px 48px 48px 47px !important;
  border-color: var(--cx-line) !important;
}
section[data-cx="grid"] .cx-grid__cell:nth-child(even) { padding-left: 48px !important; }
section[data-cx="grid"] .cx-grid__cell:nth-child(n+3) { height: 399px; padding-top: 48px !important; }


/* ---- the grid's own layout (2026-09-17) -----------------------------------------------------------
   This is the only section whose markup still carries utility classes rather than its own, so without the
   rules below it had nothing to lay it out — it stacked, and the page grew 838px. Every value here was
   measured at 1920 / 768 / 390 and is expressed through our own structural selectors, so the markup needs
   no utility vocabulary and the rendering does not move.

   The heading and body colours were two one-off hexes until 2026-09-17; they are --cx-ink and --cx-ink-2
   now, like every other colour on the site. */
section[data-cx="grid"] > div > div.grid { display: grid; grid-template-columns: 1fr 1fr; }
section[data-cx="grid"] .cx-grid__cell {
  display: flex; align-items: flex-start; gap: 32px;
  border-style: solid; border-width: 0 1px 1px 0;        /* the right column and the last row drop theirs */
}
/* both of these describe the TWO-column grid — the right-hand column has no rule beside it and the last
   row none beneath it — so they only hold where there are two columns. Unscoped they also reached the
   phone, where the grid is one column: :nth-child(n+3) outranks mobile.css's rule on specificity and the
   third cell lost the divider under it (measured against the reference at 390). */
@media (min-width: 768px) {
  section[data-cx="grid"] .cx-grid__cell:nth-child(even) { border-right-width: 0; }
  section[data-cx="grid"] .cx-grid__cell:nth-child(n+3) { border-bottom-width: 0; }
}
/* the square media block: 40% of the cell's content box, capped, and never squeezed */
section[data-cx="grid"] .cx-grid__cell > div:last-child {
  flex: 0 0 auto; width: 40%; max-width: 230px; aspect-ratio: 1 / 1;
}
section[data-cx="grid"] .cx-grid__cell > div:first-child { flex: 1 1 0; min-width: 0; padding-top: 24px; }
section[data-cx="grid"] .cx-grid__cell h3 {
  margin: 0; font-size: 20px; line-height: 32px; letter-spacing: -0.4px; color: var(--cx-ink);
}
section[data-cx="grid"] .cx-grid__cell p {
  margin: 16px 0 0; font-size: 16px; line-height: 24px; letter-spacing: -0.192px; color: var(--cx-ink-2);
}

/* --------------------------------------------------------------------------
   2. Stats — 878:5346 · frame 644 = 96 + 452 + 96 · gap-112
   -------------------------------------------------------------------------- */
.cx-stats {
  display: flex;
  align-items: flex-start;
  gap: 112px;
  padding: 96px 40px;
  background: var(--cx-page);
  color: var(--cx-ink);
}
.cx-stats__left {                               /* 878:5347 — w-374, gap-32 */
  flex: 0 0 374px; width: 374px;
  display: flex; flex-direction: column; gap: 32px;
}
.cx-stats__title { margin: 0; }
/* 878:5349 draws one 111×111 sticker. It is replaced by the two badges callix.io
   actually serves — SOC 2 and HIPAA, from Oneleet, at their own 212×321 aspect.
   They are hotlinked rather than downloaded on purpose: the artwork carries a live
   status word (both currently read IN PROGRESS), so a copy saved into this repo would
   keep asserting whatever was true the day it was saved. */
.cx-stats__badge { display: flex; align-items: flex-start; gap: 16px; }
.cx-stats__badge > img { display: block; width: 104px; height: 158px; max-width: none; }
.cx-stats__rows {                               /* 878:5373 — flex-1, gap-48 */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 48px;
}
.cx-stats__row {                                /* 878:5374 — py-24, gap-33, items-start */
  display: flex; align-items: flex-start; gap: 33px;
  padding: 24px 0;
}
.cx-stats__row + .cx-stats__row { border-top: 1px solid var(--cx-line); }
/* 387 + 33 + 318 needs a 738px row, which the 1280 column gives and a 1024 one does not — these used
   to be flex: 0 0 and pushed the page sideways below it. 0 1 keeps them from overflowing, and the
   block below wraps the row before the shrinking gets far enough to run a 96px numeral into its
   caption (fixed 2026-09-18). */
.cx-stats__num { flex: 0 1 387px; width: 387px; min-width: 0; margin: 0; color: var(--cx-ink); }
.cx-stats__cap { flex: 0 1 318px; width: 318px; min-width: 0; margin: 0; color: var(--cx-ink); }

/* --------------------------------------------------------------------------
   3. Footer — 878:5404 · frame 586 = 80 + 370 + 32 + 24 + 80 · ground #262626
   -------------------------------------------------------------------------- */
.cx-footer {
  background: var(--cx-dark);
  color: var(--cx-inverse);
  margin: 0 !important;
}
.cx-footer__inner {
  display: flex; flex-direction: column; gap: 32px;
  padding: 80px 40px;
}
.cx-footer__cols {                              /* 891:10571 — 1218 × 370, 1px rgba(255,255,255,.08) */
  display: flex;
  box-sizing: border-box; height: 370px;
  border: 1px solid var(--cx-line-dark-2);
}
.cx-footer__col {                               /* 891:10572 — flex-1, p-32, gap-16 */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 31px 32px 32px 32px;
}
.cx-footer__col:first-child { padding-left: 31px; }
.cx-footer__col:not(:last-child) { border-right: 1px solid var(--cx-line-dark-2); }
.cx-footer__heading { margin: 0; color: var(--cx-inverse); }
.cx-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
/* the row is the link's own box, not a line box: an inline link leaves the li's invisible strut to set the
   height, and the strut is whatever font-size happens to be inherited — a 1px drift per row, measured.
   Making the li a flex container drops the strut, so the row is 24 whatever is inherited. */
.cx-footer__links li { display: flex; }
.cx-footer__links a { color: inherit; text-decoration: none; }
.cx-footer__links a:hover { opacity: 1; }        /* undesigned; restrained */
.cx-footer__bottom {                            /* 891:10610 — h-24, justify-between */
  display: flex; align-items: center; justify-content: space-between; height: 24px;
}
.cx-footer__mark { display: block; width: 24px; height: 24px; }
.cx-footer__copy { margin: 0; color: var(--cx-inverse); }

/* the stat row keeps its two columns only while they fit side by side. Below 1280 it wraps — the
   numeral does not scale with the column, so shrinking alone ran "$25M+" into its caption. */
@media (max-width: 1279px) {
  .cx-stats__row { flex-wrap: wrap; gap: 16px; }
  .cx-stats__num, .cx-stats__cap { flex-basis: 100%; width: 100%; }
}

@media (max-width: 1023px) {
  section[data-cx="grid"] { padding: 40px 20px !important; }
  section[data-cx="grid"] .cx-grid__cell { height: auto; }
  .cx-stats { flex-direction: column; gap: 48px; padding: 64px 20px; }
  .cx-stats__left { width: 100%; flex-basis: auto; }
  .cx-stats__row { flex-wrap: wrap; gap: 16px; }
  .cx-stats__num, .cx-stats__cap { flex-basis: 100%; width: 100%; }
  .cx-footer__inner { padding: 48px 20px; }
  .cx-footer__cols { flex-direction: column; height: auto; }
  .cx-footer__col:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--cx-line-dark-2); }
}

/* --------------------------------------------------------------------------
   4. How it works — 878:5084 · frame 1151 = 152 + title 80 + 56 + box 711 + 152
   Box 894:11535 1224×711: its children are inset by (1,1) in Figma, so here the
   1px border is the inset. Top bar 81 (80 cells + its own bottom line), slide 628.
   Figma has no carousel; the track/counter/arrows are new (site/callix/how.js).
   Slide 01 is Figma's; slides 02–04 carry stand-in copy pending real content.
   The gradient-art ground (#589bde + blur 84) is a flat fill for now (decision 5).
   -------------------------------------------------------------------------- */
.cx-how {
  display: flex; flex-direction: column; gap: 56px;
  padding: 152px 40px;
  background: var(--cx-page); color: var(--cx-ink);
}
.cx-how__title { margin: 0; }
.cx-how__box {
  box-sizing: border-box; height: 711px;
  border: 1px solid var(--cx-line);
  overflow: hidden;
}
.cx-how__bar {                                  /* 894:11461 — 1222 × 81 */
  display: flex; box-sizing: border-box; height: 81px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-how__counter {                              /* 894:11462 — flex-1 · "01" at (56,20) · Inter 24/40 */
  flex: 1 1 0; min-width: 0; margin: 0;
  padding: 20px 32px 20px 56px;
  font-family: var(--cx-sans); font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: -0.18px;
}
.cx-how__arrow {                                /* 894:11505 / 11512 — 80 × 80, 24px icon centred */
  flex: 0 0 80px; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; border-left: 1px solid var(--cx-line);
  background: transparent; color: var(--cx-ink); cursor: pointer;
}
.cx-how__arrow > img { display: block; width: 24px; height: 24px; }
.cx-how__arrow:hover { background: var(--cx-subtle); }             /* undesigned; restrained */
.cx-how__arrow:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: -2px; }
.cx-how__viewport { height: 628px; overflow: hidden; }
.cx-how__track {
  display: flex; height: 628px;
  transition: transform .6s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}
.cx-how__slide {                                /* 878:5086 — 1222 × 628, ground #589bde */
  position: relative; flex: 0 0 100%; height: 628px;
  background: #589bde; overflow: hidden;
}
.cx-how__panel {                                /* 878:5105 — 1027 × 628, #fafaf9 81.9% → transparent */
  position: absolute; left: 0; top: 0; width: 1027px; height: 628px;
  background: linear-gradient(90deg, #fafaf9 81.9%, rgba(250, 250, 249, 0) 100%);
}
.cx-how__copy {                                 /* 878:5106 — (56,56) w-450: title 80 · +101 lead */
  position: absolute; left: 56px; top: 56px; width: 450px;
  display: flex; flex-direction: column; gap: 21px;
}
.cx-how__copy > * { margin: 0; }
.cx-how__bullets {                              /* 878:5109 — (56,396) w-580, rows 32, gap 16; anchored to the
                                                   bottom edge (396 + 176 = 572 → 56 from the bottom) so the
                                                   longer callix.io bullets grow upward, and slide 01 measures
                                                   exactly as before */
  position: absolute; left: 56px; bottom: 56px; width: 720px;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.cx-how__bullet { display: flex; align-items: flex-start; gap: 16px; min-height: 24px; }
/* 16px like every other icon on the site (request 2026-09-19); the 4px top margin
   re-centres it on the bullet's 24px line box. */
.cx-how__bullet > img { display: block; width: 16px; height: 16px; margin-top: 4px; flex: 0 0 16px; }
/* pass 24 (request 2026-09-16: "the body text here does not match … the section above or other sections"):
   the slide's lead and bullets carry Figma's 20/32 lead role; every other section's body copy is the 16/24
   body role (stats captions, FAQ answers, CTA sub). Deliberate deviation from 878:5106 — the site's body
   scale wins over the slide's own. The bullet icon re-centres on the 24 line box (was 32). */
.cx-how__copy p, .cx-how__bullet span { font-size: 16px; line-height: 24px; letter-spacing: -0.18px; }
@media (prefers-reduced-motion: reduce) { .cx-how__track, .cx-how__viewport { transition: none; } }

/* --------------------------------------------------------------------------
   5. Dark features — 878:5122 · frame 1135 = 130 + head 80 + 56 + grid 739 + 130 · #262626
   Grid 878:5136 1278×739: rows 370 / 369 × 3 cells, p-32, lines rgba(255,255,255,.1).
   Frame strokes sit inside without offsetting children → border 1 + padding 31.
   The two script-text ground masks (soft-light) are deferred with the effects pass.
   -------------------------------------------------------------------------- */
.cx-dark { background: var(--cx-dark); color: var(--cx-inverse); }
.cx-dark__inner { display: flex; flex-direction: column; gap: 56px; padding: 130px 40px; }
.cx-dark__head {                                /* 878:5132 — 1278 × 80, justify-between */
  display: flex; align-items: center; justify-content: space-between; height: 80px;
}
.cx-dark__title { margin: 0; width: 1050px; max-width: 100%; }
.cx-dark__grid {                                /* 878:5136 — 1278 × 739; the cells own every line */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cx-dark__cell {                                /* 878:5138 — 426 × 370 · p-32 · justify-between */
  box-sizing: border-box; height: 370px;
  padding: 31px 32px 31px 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 0 solid var(--cx-line-dark);
  border-right-width: 1px; border-bottom-width: 1px;          /* Figma: stroke inside, cells flush */
}
.cx-dark__cell:nth-child(3n+1) { border-left-width: 1px; padding-left: 31px; }
.cx-dark__cell:nth-child(-n+3) { border-top-width: 1px; }
.cx-dark__cell:nth-child(n+4) { height: 369px; padding-top: 32px; }
.cx-dark__icon { display: block; width: 16px; height: 16px; }
.cx-dark__stack { display: flex; flex-direction: column; gap: 6px; width: 362px; max-width: 100%; }
.cx-dark__stack > * { margin: 0; }
.cx-dark__cell-title { color: var(--cx-inverse); }
.cx-dark__cell-desc  { color: var(--cx-inverse); }

@media (max-width: 1279px) {
  .cx-how__slide, .cx-how__panel { width: 100%; }
}
@media (max-width: 1023px) {
  .cx-how { padding: 64px 20px; gap: 32px; }
  .cx-how__box, .cx-how__viewport, .cx-how__track, .cx-how__slide, .cx-how__panel { height: auto; min-height: 0; }
  .cx-how__slide { padding: 32px 24px; }
  .cx-how__copy, .cx-how__bullets { position: static; width: auto; }
  .cx-how__bullets { margin-top: 32px; }
  .cx-how__bullet { height: auto; white-space: normal; }
  .cx-dark__inner { padding: 64px 20px; gap: 32px; }
  .cx-dark__head { flex-direction: column; align-items: flex-start; height: auto; gap: 24px; }
  .cx-dark__grid { grid-template-columns: 1fr; }
  /* one column: the right-hand border is the table's OUTER edge here, not an inner divider, so it
     stays. Dropping it left the table looking cut off down the right (fixed 2026-09-18 — first below
     768, and this is the 768-1023 half that was missed). */
  .cx-dark__cell, .cx-dark__cell:nth-child(n+4) { height: auto; min-height: 240px; padding: 31px; border-right-width: 1px; border-bottom-width: 1px; }
  .cx-dark__cell:last-child { border-bottom-width: 0; }
}

/* --------------------------------------------------------------------------
   7. Integrations marquee — 878:5296 · frame 646.4 = 130 + 80 + 56 + 250.4 + 130 · ground #f7f6f5
   Tiles 134.1 × 130.4, white, 1px rgba(0,0,0,.1), logo 66.4 at (33.85, 32), gap 56;
   the 2415 px row starts 595.65 left of the column and runs off both edges → marquee.
   Motion is Callix Web's own logo marquee (HeroLockup.astro): two copies, translateX(-50%),
   45 s linear, pause on hover — without its edge fade, which Figma does not show.
   -------------------------------------------------------------------------- */
.cx-integ { background: var(--cx-surface-2); color: var(--cx-ink); overflow: hidden; }
.cx-integ__inner { display: flex; flex-direction: column; gap: 56px; padding: 130px 40px; }
.cx-integ__title { margin: 0; }
.cx-integ__body { display: flex; flex-direction: column; gap: 56px; }
.cx-integ__marquee { height: 130.4px; margin-left: -595.65px; width: max-content; }
.cx-integ__track { display: flex; width: max-content; animation: cx-marquee 45s linear infinite; will-change: transform; }
.cx-integ__group { display: flex; gap: 56px; padding-right: 56px; }
@keyframes cx-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .cx-integ__marquee:hover .cx-integ__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .cx-integ__track { animation: none; } }
.cx-integ__tile {                                                  /* 878:5300 — 134.1 × 130.4 */
  /* square (request 2026-09-18). Figma drew 134.1 x 130.4; the tile takes the shorter side on both
     axes, so the marquee's height is unchanged and only the horizontal rhythm tightens by 3.7px. */
  box-sizing: border-box; width: 130.4px; height: 130.4px; flex: 0 0 130.4px;
  padding: 31px;                                                   /* + the 1px border = the 66.4 mark, centred */
  background: var(--cx-surface); border: 1px solid rgba(0, 0, 0, 0.1);
}
.cx-integ__tile > img { display: block; width: 66.4px; height: 66.4px; object-fit: contain; }
.cx-integ__foot {                                                  /* 878:5342 — h-64, lead w-655 + button */
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.cx-integ__lead { width: 655px; max-width: 100%; margin: 0; }

@media (max-width: 1023px) {
  .cx-integ__inner { padding: 64px 20px; gap: 32px; }
  .cx-integ__marquee { margin-left: -20px; }
  .cx-integ__foot { flex-direction: column; align-items: flex-start; height: auto; gap: 24px; }
}

/* --------------------------------------------------------------------------
   8. FAQ — 878:5383 · frame 684 = 150 + list 384 + 150 · ground #262626
   Title STIX 60 in a 389 column, gap 48, list flex-1 (781 in Figma's 1218).
   Items: py-24 (first pt-0), 1px rgba(250,250,249,.08) bottom line drawn inside
   the 24 (border-box → pb 23 + 1), gap 24; open item: question 24 · 24 · answer 24.
   Only item 1 is designed open; all four questions are Figma's placeholder copy.
   -------------------------------------------------------------------------- */
.cx-faq { background: var(--cx-dark); color: var(--cx-inverse); }
.cx-faq__inner { display: flex; align-items: flex-start; gap: 48px; padding: 150px 40px; }
.cx-faq__title { flex: 0 0 389px; width: 389px; margin: 0; color: var(--cx-inverse); }
.cx-faq__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cx-faq__item {
  box-sizing: border-box; padding: 24px 0 23px;
  border-bottom: 1px solid rgba(250, 250, 249, 0.08);
}
.cx-faq__item:first-child { padding-top: 0; }
.cx-faq__q {                                                       /* 878:5387 — h-24, justify-between, 16px icon at y-4 */
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; height: 24px; padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--cx-inverse); text-align: left; cursor: pointer;
}
.cx-faq__q:focus-visible { outline: 2px solid var(--cx-inverse); outline-offset: 4px; }
.cx-faq__icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.cx-faq__icon > img { position: absolute; inset: 0; width: 16px; height: 16px; display: block; }
.cx-faq__icon > .minus { display: none; }
.is-open .cx-faq__icon > .plus  { display: none; }
.is-open .cx-faq__icon > .minus { display: block; }
.cx-faq__a {                                                       /* collapses via grid rows (Callix Web FAQ.astro) */
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .3s ease, opacity .3s ease;
}
.is-open .cx-faq__a { grid-template-rows: 1fr; opacity: 1; }
.cx-faq__a > div { min-height: 0; overflow: hidden; }
.cx-faq__a p { margin: 0; padding-top: 24px; color: var(--cx-inverse); }

/* --------------------------------------------------------------------------
   9. Closing CTA — 891:9398 · frame 708 = headline 291 + dashboard 427
   Headline block: py-96, row gap-32 justify-end items-start: STIX 60 (flex-1) + Inter 16/24
   #fff6ff w-391. Dashboard block: 1218 × 620 mock at the column edge, clipped to 427.
   Ground: gradient-art recipe deferred (decision 5) — a sampled 3-stop stand-in for now.
   -------------------------------------------------------------------------- */
.cx-cta {
  position: relative; overflow: hidden; height: 708px;
  color: var(--cx-inverse);
  /* STAND-IN: Figma's gradient art for this section could not be read off the file, so this is a
     three-stop approximation of what the render shows. Re-read it from Figma before launch. */
  background: linear-gradient(100deg, #e0591b 0%, #ed0a2b 50%, #e83410 100%);
}
.cx-cta__head { box-sizing: border-box; height: 291px; padding: 96px 0; }
.cx-cta__row { display: flex; align-items: flex-start; justify-content: flex-end; gap: 32px; padding: 0 40px; }
.cx-cta__title { flex: 0 0 797px; width: 797px; max-width: 100%; margin: 0; color: var(--cx-inverse); }   /* Figma's text box → same line break */
.cx-cta__sub { flex: 0 0 391px; width: 391px; margin: 0 0 0 auto; color: #fff6ff; }
.cx-cta__stage { height: 427px; overflow: hidden; }
.cx-cta__stage > .container { padding: 0 40px; }
.cx-cta__dash {                                                    /* 907:3753 — Figma's SVG export, scaled to the column (1219→1280) */
  width: 100%; margin-top: 3px;
}
.cx-cta__dash > img { display: block; width: 100%; height: auto; }
/* the answer fills the column. Figma drew it to a 551px measure (878:5390); the column it sits in is
   843 at 1920, and holding the text to two thirds of that left an obvious ragged gap beside every open
   answer (request 2026-09-18). */

@media (max-width: 1279px) {
  .cx-cta__dash, .cx-cta__dash > img { width: 100%; height: auto; }
}
@media (max-width: 1023px) {
  .cx-faq__inner { flex-direction: column; padding: 64px 20px; gap: 56px; }   /* 32 + 24 wherever the title stacks above the questions (request 2026-09-18) */
  .cx-faq__title { width: auto; flex-basis: auto; }
  .cx-cta { height: auto; }
  .cx-cta__head { height: auto; padding: 64px 0 32px; }
  .cx-cta__row { flex-direction: column; padding: 0 20px; }
  .cx-cta__sub { width: auto; flex-basis: auto; }
  .cx-cta__stage { height: auto; }
  .cx-cta__stage > .container { padding: 0 20px; }
}

.cx-dark__icon { display: block; width: 16px; height: 16px; }