/* =====================================================================
   FunnelX — mobile view (<= 760px)
   Loaded LAST on every page. Owns the phone experience:
   · decorative graphics removed (blurs and masks are the expensive ones)
   · card groups become left-to-right snap scrollers instead of long stacks
   · vertical rhythm tightened so a section is one or two thumb-scrolls
   · hamburger + full-screen overlay menu for primary nav
   ===================================================================== */

/* ---------- Primary nav: hamburger instead of the inline links ---------- */
/* 920px is where .mega and .dd-menu stop rendering, so the header has to hand
   over to the burger at exactly that width or the nav has no working state. */
@media (max-width: 920px) {
  .site-header .links { display: none; }
  /* the burger draws at 28x18 — pad the hit area out to ~44px without moving it */
  .site-header .burger { display: flex; box-sizing: content-box; padding: 13px 10px; margin: -13px -10px; }
}
/* the overlay menu carries its own Book a demo, so once the bar gets tight the
   header keeps only Sign in — which the overlay does not repeat — and the burger */
@media (max-width: 600px) {
  .site-header .right .btn { display: none; }
  .site-header .right { gap: 14px; }
}
/* The announce bar wraps to three lines on a phone and outranks the header on
   z-index, so it covers the burger. design-language.css / homepage.css / feature.css
   each drop it below 760px, but a page that inlines all of its CSS (demo-request)
   misses every one of those — pin it here so no page can be left out. */
@media (max-width: 760px) {
  .announce { display: none; }
  body:has(> .announce) .site-header { top: 0; }
}
/* the open overlay is navy, so the header has to switch to its light form for as
   long as it sits on top of it, whatever state (.on-light, .scrolled) it was in */
body.menu-open .site-header .logo .l-light { display: block; }
body.menu-open .site-header .logo .l-dark { display: none; }
body.menu-open .site-header .signin { color: #fff; }
/* above 760px the announce bar still shows and the header keeps its full height,
   which together reach 120px — the menu's default 96px of top padding would put
   its first row under them, so tapping it would hit the header instead */
@media (min-width: 761px) and (max-width: 920px) {
  .mobile-menu { padding-top: calc(var(--utilbar-h, 0px) + 96px); }
  .mobile-menu::before { height: calc(var(--utilbar-h, 0px) + 92px); }
}

@media (max-width: 760px) {

  /* ---------- 1 · strip decoration ---------- */
  .ab-mesh, .ab-orb, .ab-mark, .cta-mark, .funnelfield, .mm-funnel,
  .f2-media::before, .f2-herovis::before, .hv-badge,
  .bd-fly, .bd-fly2, .bd-fly3, .bd-avph,
  .hero-glow, .sl-glow, .stats-burst, .qslide.active::before,
  .f2-howsec::before, .f2-howsec::after,
  .pl::before, .ind-art .ring, .ih-ov { display: none !important; }
  /* blurs and masks are the expensive part, drop them even where the layer stays */
  .ab-glow, .f2-hero::before, .ab-careers::before, .f2-proof::before { filter: none !important; opacity: 0.8; }
  * { background-attachment: scroll !important; }

  /* ---------- 2 · vertical rhythm ---------- */
  .section { padding: var(--space-14, 56px) 0; }
  .sec-head { margin-bottom: var(--space-8); }
  .sec-head h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; }
  .sec-head p { font-size: var(--fs-16); }
  h1 { text-wrap: balance; }
  .f2-hero { padding: 104px 0 var(--space-12); }
  .f2-hero h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .f2-hero .lead { font-size: var(--fs-16); }
  .f2-hero .cta-row .btn, .cta-band .cta-row .btn, .f2-ctarow .btn, .res-ctarow .btn { width: 100%; justify-content: center; }
  .f2-trust { gap: 10px 18px; font-size: 12px; }
  .f2-rows { gap: var(--space-12); }
  .f2-row h3 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .f2-row .f2-copy > p { font-size: var(--fs-16); }

  /* ---------- 3 · left-to-right instead of endless stacking ---------- */
  .m-rail { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: 80% !important; gap: 14px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px var(--space-5) 16px; margin: 0 calc(var(--space-5) * -1); scrollbar-width: none; }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail > * { scroll-snap-align: start; margin: 0 !important; width: auto !important; transform: none !important; }
  .m-rail.tight { grid-auto-columns: 68% !important; }
  .m-rail.wide { grid-auto-columns: 88% !important; }
  /* a rail is a horizontal region, so kill the sideways entrance animations inside it */
  .m-rail .reveal { opacity: 1 !important; transform: none !important; }
  .m-hint { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin: 2px 0 12px; }
  .m-hint::after { content: ""; width: 16px; height: 1px; background: var(--border-2); position: relative; }
  .m-hint .ar { width: 6px; height: 6px; border: solid var(--border-2); border-width: 2px 2px 0 0; transform: rotate(45deg); animation: m-nudge 1.8s var(--ease-in-out) infinite; }
  @keyframes m-nudge { 0%,100%{ transform: rotate(45deg) translateX(0) } 50%{ transform: rotate(45deg) translateX(3px) } }

  /* tab rails scroll sideways rather than wrapping into a block; centered
     justification must go, or the overflow spills off the left edge where no
     amount of scrolling can reach it */
  .ind-tabs, .pt-tabs, .blog-cats { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; gap: 8px; padding: 2px var(--space-5) 12px; margin: 0 calc(var(--space-5) * -1); scrollbar-width: none; scroll-snap-type: x proximity; }
  .ind-tabs::-webkit-scrollbar, .pt-tabs::-webkit-scrollbar, .blog-cats::-webkit-scrollbar { display: none; }
  .ind-tabs > *, .pt-tabs > *, .blog-cats > * { flex: none; scroll-snap-align: start; }

  /* the Without / With switch fills the width so both targets are thumb-sized */
  .f2-batrack { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .f2-batrack button { padding: 13px 10px; font-size: var(--fs-14); }
  .f2-bathumb { width: calc(50% - 5px) !important; }
  .f2-batrack.on-fx .f2-bathumb { transform: translateX(100%) !important; }


  /* the challenge cards and the capability grid swipe sideways on a phone */
  .challenge-grid.m-rail { grid-auto-rows: none !important; align-items: stretch; }
  .challenge-grid.m-rail > .ch-card { height: auto !important; backdrop-filter: none; background: #fff !important; }
  .ind-cg.m-rail > .ind-cgcard.wide { flex-direction: column; }
  .ind-cg.m-rail > .ind-cgcard.wide .ind-cgart { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--border-1); }

  /* ---------- 4 · component tuning ---------- */
  .ind-panel { grid-template-columns: 1fr; gap: var(--space-8); }
  .ind-panel h3 { font-size: var(--fs-24); }
  .f2-ui-body { padding: var(--space-5); gap: 10px; }
  .f2-step { padding: var(--space-6); }
  .f2-related { grid-auto-columns: 80%; }
  .f2-relnav { display: none; }
  .hwd-ring, .fxloop-stage { max-width: 300px; }
  .qslide.active { grid-template-columns: 1fr; }
  .q-portrait { min-height: 220px; }
  .qslide p { font-size: var(--fs-20); max-width: none; }
  .qdots { gap: 8px; }
  .qdot { padding: 6px 12px 6px 6px; }

  /* ---------- 5 · CTA band ---------- */
  /* the band and the footer are both dark, so they read as one block unless
     the gap is deliberate; the section's own padding alone left them touching */
  .cta-band { padding: var(--space-8) var(--space-6); gap: var(--space-6); text-align: left; margin-bottom: var(--space-6); }
  .cta-band h2 { font-size: clamp(1.5rem, 6.6vw, 1.9rem); max-width: none; text-wrap: balance; }
  .cta-band .cta-action p { font-size: var(--fs-16); max-width: none; text-wrap: pretty; }
  .cta-band .cta-row { flex-direction: column; align-items: stretch; }

  /* ---------- 6 · tables and wide media never cause sideways page scroll ---------- */
  html, body { overflow-x: hidden; }
  /* cells keep wrapping (nowrap turned sentence-length cells into a mile of
     sideways scrolling); a minimum column width keeps narrow tables readable */
  table { display: block; overflow-x: auto; }
  table th, table td { min-width: 8em; white-space: normal; }
  .f2-heroshot { padding: 0 var(--space-5); }

  /* ---------- 7 · hit targets ---------- */
  .btn { min-height: 48px; }
  .site-header .bar { height: 62px; }
  .faq-q, .f2-faq .faq-q { min-height: 56px; }

  /* every remaining touch target clears 44px */
  .site-header .links a, .site-header .mega-trigger, .site-header .signin { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .ind-tab, .pt-tab, .blog-cat { min-height: 44px; display: inline-flex; align-items: center; }
  /* footer links are block-level in the desktop CSS; inline-flex here made them
     run together on one line ("InsuranceFinancial services"), so keep them flex */
  .foot-col a { display: flex; align-items: center; min-height: 44px; }
  .foot-contact a, .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-social { min-height: 44px; }
  .article-share a, .sh-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* min-height only — the menu items lay themselves out as column flex, so
     forcing display/align-items here would centre their labels */
  .mobile-menu a { min-height: 44px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .m-hint .ar { animation: none; }
  .foot-panel, .foot-chev { transition: none; }
}

/* =====================================================================
   Mobile audit fixes — every rule below exists because a real page broke
   at 390px or 320px. Grouped by component, narrowest concerns last.
   ===================================================================== */

/* ---------- 8 · page heroes ---------- */
@media (max-width: 760px) {
  /* the homepage hero kept its desktop 188px/128px padding, leaving almost a
     full screen of blank space between the CTAs and the dashboard */
  .hero-sl { padding: 116px 0 var(--space-12); }
  .bigdash { padding-top: var(--space-8); }
  .hero-sl .cta-row .btn { width: 100%; justify-content: center; }

  /* "See all resources / Book a demo" refused to wrap on small phones */
  .bm-ctarow { flex-direction: column; align-items: stretch; }
  .bm-ctarow .btn { width: 100%; justify-content: center; }

  /* decorative layers that spilled past the viewport edge */
  .ptour-hero .glow, .fxloop-bloom { display: none; }
}

/* ---------- 9 · forms: inputs must never set the column width ---------- */
@media (max-width: 960px) {
  /* an unconditional 0.9fr/1.1fr rule in the page CSS beat the stacking media
     query, so the demo page kept two columns and clipped its copy off screen */
  .demo-top { grid-template-columns: 1fr !important; }
  .demo-top > * { min-width: 0; }
  .demo-top .demo-copy { order: -1; }
}
@media (max-width: 760px) {
  /* a text input's intrinsic size (~20 characters) was forcing 1fr grid tracks
     to 331px on a 320px phone; min-width: 0 lets the track win */
  .support-grid > *, .demo-top > *, .bm-grid > * { min-width: 0; }
  .field input, .field select, .field textarea,
  .contact-card input, .contact-card select, .contact-card textarea { width: 100%; max-width: 100%; min-width: 0; }
  .contact-card { padding: var(--space-6); }
}
@media (max-width: 560px) {
  .form-row, .row2 { grid-template-columns: 1fr !important; }
}

/* ---------- 10 · footer: collapsible link groups on a phone ---------- */
/* Two columns on a phone gave each link 159px, so every label in the footer
   wrapped onto two lines, and the four groups stacked out to 1240px — a
   screen and a half of footer. mobile.js folds each group behind its own
   heading; these rules style that, and the block below neutralises it again
   above 760px so the desktop footer is untouched. */
.foot-panel, .foot-panel > div { display: contents; }
.foot-toggle {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: default;
}
.foot-chev { display: none; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 0; }
  .foot-grid > * { min-width: 0; }
  .foot-brand { margin-bottom: var(--space-7); }
  /* a rule per group, so the headings read as a list of dividers */
  .foot-col { border-top: 1px solid rgba(255,255,255,0.13); }
  .foot-col h5 { margin: 0; }
  .foot-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px; cursor: pointer;
  }
  .foot-chev {
    display: block; flex: none; width: 9px; height: 9px; margin-bottom: 3px;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
    opacity: 0.85; transition: transform 260ms var(--ease-in-out);
  }
  .foot-col.open .foot-chev { transform: rotate(-135deg); margin-bottom: -3px; }
  /* 0fr -> 1fr animates to the panel's own height, so no max-height guesswork.
     Browsers that cannot animate it still open and close the panel. */
  .foot-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-in-out); }
  .foot-col.open .foot-panel { grid-template-rows: 1fr; }
  /* visibility, not just clipping: a collapsed panel must be out of the tab
     order too, or a keyboard lands on links nobody can see */
  .foot-panel > div {
    display: block; min-height: 0; overflow: hidden;
    visibility: hidden; transition: visibility 0s 300ms;
  }
  .foot-col.open .foot-panel > div { visibility: visible; transition: visibility 0s; padding-bottom: 10px; }
  /* 64px of desktop breathing room under the last group read as dead space
     once the groups collapsed to four short rows */
  .foot-bottom { margin-top: var(--space-8); }
}

/* ---------- 11 · industry pages: card grids forced wide by inline styles ---------- */
/* the navy band under each industry hero carries an inline
   style="grid-template-columns:repeat(3,1fr)" that no stylesheet can outrank
   without !important, so the third tile was clipped off screen; the
   financial-services solution cards do the same with "1fr 1fr" */
@media (max-width: 760px) {
  .feat-grid:not(.m-rail) { grid-template-columns: 1fr !important; }
  .challenge-grid:not(.m-rail), .ind-cg:not(.m-rail) { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr !important; }
}

/* ---------- 12 · homepage app dashboard mock ---------- */
/* .appdash clips its overflow, so every row that refused to shrink was cut
   off at the right edge (welcome row, stat tiles, leaderboard) */
@media (max-width: 760px) {
  .appdash { font-size: 13px; }
  .ad-main { padding: 16px 14px 20px; }
  .ad-welcome { flex-wrap: wrap; row-gap: 8px; }
  .ad-welcome h3 { font-size: 21px; }
  .ad-select { flex-wrap: wrap; }
  .ad-select .adbox { gap: 12px; }
  .ad-mini { gap: 12px; }
  .ad-stats { gap: 10px; }
  .ad-stat { min-height: 92px; padding: 12px 14px; }
  .ad-stat .adnum { font-size: 27px; }
  .ad-panels { gap: 12px; }
  .ad-panel { padding: 14px; }
  .ad-pies { gap: 8px; }
  .ad-pie { width: 128px; height: 128px; }
  .ad-lb { padding: 14px; }
  .ad-lbrow { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 10px 8px; }
  .ad-lbrow > :nth-child(4), .ad-lbrow > :nth-child(5) { display: none; }
  .ad-lbrow .adav { width: 26px; height: 26px; margin-right: 6px; font-size: 10px; }
  .ad-ph { flex-wrap: wrap; row-gap: 6px; }
  .ad-legend { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  /* two 128px pies plus their titles cannot share a 320px screen */
  .ad-pies { grid-template-columns: 1fr; }
}

/* ---------- 13 · coaching loop ring ---------- */
/* the three labels around the ring have a 168px minimum and sit partly outside
   it, so they ran off both edges and the top one overlapped the intro copy;
   on a phone they become short single-word captions kept inside the viewport */
@media (max-width: 760px) {
  .fxloop { margin-top: 92px; max-width: 320px; }
  /* the halo glow reached ~40px past both screen edges; tucking it in keeps
     the look and keeps the ring inside the viewport */
  .fxloop-halo { inset: -2%; }
  .fxloop-lab { width: 40%; min-width: 0; }
  .fxloop-lab p { display: none; }
  .fxloop-lab h4 { font-size: var(--fs-16); }
  .fxloop .f1 { top: -8%; }
  .fxloop .f2 { left: 80%; }
  .fxloop .f3 { left: 20%; }
}

/* ---------- 14 · feature hero product mock ---------- */
@media (max-width: 760px) {
  /* nothing inside the hero may dictate the column width: the mock's window
     title alone was holding the whole hero at 336px on a 320px screen */
  .f2-hero .wrap > * { min-width: 0; }
  /* the window title ("Live call · Northwind Group") never wrapped and forced
     the whole mock wider than a 320px screen — truncate it instead */
  .hv-bar { min-width: 0; }
  .hv-bar b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- 15 · certifications hero ---------- */
/* the four-step track needed 425px, clipping the hero copy and the score */
@media (max-width: 760px) {
  .chero { padding: 24px 0 40px; }
  .chcred { padding: 20px 16px; gap: 14px; }
  .chcred .tx b { font-size: 1.2rem; }
  .chscore b { font-size: 34px; }
  .chtrack { padding: 24px 14px 28px; }
  .chnode { padding: 0 4px; gap: 9px; }
  .chnode b { font-size: 12.5px; }
  .chnode small { font-size: 11px; }
  .chpeople { gap: 10px; padding: 10px 16px 10px 12px; }
  .chfaces img, .chfaces .more { width: 32px; height: 32px; }
}
@media (max-width: 430px) {
  /* four steps cannot fit across a small phone at any legible size */
  .chtk { grid-template-columns: 1fr 1fr; gap: 18px 8px; }
  .chnode::before { display: none; }
  /* credential header: badge and score share the top row, title gets the
     full width below instead of being pinched between them */
  .chcred { flex-wrap: wrap; }
  .chcred .chscore { margin-left: auto; }
  .chcred .tx { order: 3; flex: 1 1 100%; }
}

/* ---------- 16 · legibility floor in the miniature product art ---------- */
/* the decorative UI mocks carry text down to 7px; nudge the worst of it up to
   the edge of readable without breaking the miniatures */
@media (max-width: 760px) {
  .script .who { font-size: 11px; }
  .pui-chip, .pui-sub { font-size: 10px; }
  .pui-tile small, .pui-tile em, .pui-rt small, .pui-lbr .nm small { font-size: 9.5px; }
  .pui-rt b { font-size: 11px; }
  .pui-lbr .nm { font-size: 11px; }
  .pui-live { font-size: 9px; }
  .rl-h b { font-size: 10px; }
  .rl-h .tag { font-size: 8.5px; }
  .rl-cue { font-size: 10px; }
  .rl-b { font-size: 9.5px; }
  .rl-st { font-size: 10px; }
  .rl-tile small { font-size: 8px; }
  .hv-who, .hv-tag { font-size: 10px; }
  .hv-spname { font-size: 11px; }
  .cv-ax, .lp-curve .cv-ax { font-size: 10px; }
}

/* =====================================================================
   17 · Homepage, phone layout
   Ported from the "FunnelX website 2" mobile homepage deliverable. That
   file is served only to phones, so its rules are unconditional; here the
   homepage shares one document with the desktop build, so every rule is
   scoped to body.home inside the 760px breakpoint and the desktop
   homepage renders exactly as it did.
   Two DOM pieces are built by mobile.js at this width: the industries
   select and the .fxloop-labs stack.
   ===================================================================== */
@media (max-width: 760px) {

  /* ---------- 17.1 · the animated dashboard does not survive the width ----------
     A 1000x560 app UI is illegible below 400px at any scale that fits, and
     scaling it down left a dead band. The desktop section is untouched. */
  .home .bigdash { display: none; }

  /* ---------- 17.2 · hero ---------- */
  /* the full headline wraps to four lines on a phone, so the design drops one
     word; the span keeps a single H1 in the document for search and desktop */
  .home .h1-wide { display: none; }
  .home .hero-sl { padding: 104px 0 var(--space-4); }
  .home .sl-hero-copy h1 { font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.02em; max-width: none; }
  .home .sl-hero-copy .sub { font-size: 1.02rem; line-height: 1.55; max-width: none; }

  /* ---------- 17.3 · section type and gutters ---------- */
  .home .wrap { padding-left: 20px; padding-right: 20px; }
  .home .sec-head h2 { font-size: 1.6rem; line-height: 1.14; letter-spacing: -0.02em; }
  .home .sec-head p { font-size: 0.98rem; }

  /* ---------- 17.4 · trust band: logos carry it, the headline is noise ---------- */
  .home .trustband .eyebrow-trust { display: none; }
  .home .trustband { padding-top: var(--space-4); padding-bottom: var(--space-6); }

  /* ---------- 17.5 · industries: a native select, not a scrolling tab row ----------
     Five tabs overflow a phone, and a scrolled-out tab reads as missing. The
     tabs stay in the DOM (the panel script owns them) but hand over to the
     select that mobile.js builds from them. */
  .home .ind-tabs { display: none !important; }
  .home .ind-select { margin: 0 0 var(--space-6); }
  .home .ind-select select {
    -webkit-appearance: none; appearance: none; width: 100%; height: 52px;
    padding: 0 44px 0 16px; border: 1px solid var(--border-2); border-radius: var(--radius-md);
    background: #fff; color: var(--fx-navy); font-family: var(--font-sans);
    font-size: var(--fs-16); font-weight: var(--fw-medium);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230331F3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  }
  .home .ind-select select:focus { outline: none; border-color: var(--fx-light-blue); box-shadow: 0 0 0 3px rgba(50,101,255,0.14); }

  /* the photo pushed the panel copy below the fold; the headline repeats the
     eyebrow. Both stay in the DOM — the panel script writes into the headline. */
  .home .ind-panel .ind-art { display: none; }
  .home .ind-panel [data-ind-name] { display: none; }
  .home .ind-panel [data-ind-eyebrow] { margin-bottom: var(--space-3); }
  .home .ind-panel { grid-template-columns: 1fr; }
  /* the closing CTA band carries the same action a screen further down */
  .home .ind-panel .section-cta { display: none; }

  /* ---------- 17.6 · the coaching loop reads as a list ----------
     Three 168px labels around a 328px ring collide at 390px. mobile.js moves
     them out of the ring into .fxloop-labs; the ring stays as a compact mark. */
  .home .loopwrap .sec-head { margin-bottom: var(--space-6); }
  .home .loopwrap .sec-head p { display: none; }
  .home .loopwrap .fxloop { display: block; max-width: 210px; margin: var(--space-6) auto var(--space-8); }
  .home .loopwrap .fxloop-bloom { inset: -30%; filter: blur(28px); }
  .home .loopwrap .fxloop-halo { filter: blur(16px); }
  .home .loopwrap .fxloop-labs { display: block; }
  .home .loopwrap .fxloop-lab {
    position: static; width: auto; min-width: 0; transform: none; text-align: left;
    display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .home .loopwrap .fxloop-lab:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.14); }
  /* dot and tinted ring are one gradient: the labels are position: static, so an
     absolutely positioned marker would resolve against .wrap and land in the gutter */
  .home .loopwrap .fxloop-lab::before {
    content: ""; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 999px;
    background: radial-gradient(circle at center, var(--c) 0 4px, transparent 4px),
                color-mix(in srgb, var(--c) 18%, transparent);
  }
  .home .loopwrap .fxloop-lab h4 { margin: 0 0 4px; font-size: var(--fs-16); color: #fff; line-height: 1.25; animation: none; }
  /* section 13 hides these captions for the ring layout that /ai-coaching-loop/
     still uses; in the stacked list they are the substance, so bring them back */
  .home .loopwrap .fxloop-lab p { display: block; margin: 0; font-size: var(--fs-14); line-height: 1.5; color: rgba(255,255,255,0.78); max-width: none; }

  /* ---------- 17.7 · the impact band gets more air than a normal section ----------
     Deliberately not a blanket .home .section override: that has the same
     specificity as the existing per-section rules (.loopwrap's zero top
     padding among them) and, coming later, would silently flatten them. */
  .home .statburst[data-screen-label="Bold stats"] { padding-top: var(--space-20); padding-bottom: var(--space-20); }

  /* ---------- 17.8 · the impact stats swipe instead of squashing ----------
     Four figures in a 2x2 grid gave each a 151px column; as cards on a rail
     each gets 265px, so the number and its sentence stay on one card. */
  .home .statburst-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%;
    gap: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding: 4px 20px 18px; margin-left: -20px; margin-right: -20px; scrollbar-width: none;
  }
  .home .statburst-grid::-webkit-scrollbar { display: none; }
  .home .statburst-grid .sb {
    scroll-snap-align: center; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5); display: flex; flex-direction: column;
    justify-content: center; min-height: 158px;
  }
  .home .statburst-grid .sb .n { font-size: 2.5rem; }
  .home .statburst-grid .sb .c { max-width: none; }
}

/* the labels only leave the ring below 760px, so above it they are exactly
   where the desktop build puts them and need no rules of their own */