/* ============================================================
   Facturation médicale — page styles  (MDS Templates plugin)
   Figma 6365-16917 (desktop 1920). There is no mobile frame for
   this page: the ≤1023 block follows the mobile patterns already
   shipped on acto / alys / à propos for the same sections.

   Loaded only on posts that contain the [mds_facturation] shortcode.
   Typography always comes from the DS classes in the markup
   (.h2/.h4/.h5, .text-p1-.text-p4 + .fw-*) - this file carries
   layout, colour and documented deviations only.
   ============================================================ */
.fact-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* page-scoped border-box: several blocks pair a % width or a min-height with
   padding, and the DS does not set a global box-sizing */
[class^="fact-"], [class*=" fact-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.fact-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}
.fact-pad { padding-block: var(--spacing-step-11); } /* 64px */

/* icon box — exported vectors keep their own aspect ratio inside it */
.fact-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fact-ico svg { display: block; width: 100%; height: 100%; }

/* viewfinder corner brackets (Figma "Vector 20-24": 24px legs, 1px stroke) */
.fact-brackets { position: relative; }
.fact-brackets > .c { position: absolute; width: 24px; height: 24px; pointer-events: none; color: var(--site-accent); }
.fact-brackets > .c svg { width: 100%; height: 100%; display: block; }
.fact-brackets > .tl { top: 0; left: 0; }
.fact-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.fact-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.fact-brackets > .bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* ============================================================
   1. Hero (6365-16920) — one flattened background: photo + medO
   mark + the masked 149.6° gradient, exported text-free.
   ============================================================ */
.fact-hero {
  display: flex;
  align-items: center;
  min-height: 568px;
  padding-bottom: 14px; /* Figma centres the copy 7px above the middle (top 86 / bottom 100) */
  background: var(--fact-hero-bg, url("../img/fact-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.fact-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-10); /* 48px */
  width: 47.96%; /* 681/1420 */
  min-width: 420px;
}
.fact-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); }

/* ============================================================
   2. Derrière chaque acte à facturer (6365-16941)
   Art = one flattened export of the image frame (6365-16943).
   ============================================================ */
.fact-split { display: flex; align-items: center; gap: var(--spacing-step-10); padding-block: var(--spacing-step-11); }
.fact-split-media {
  flex: 0 0 44.37%; /* 630/1420 */
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
  background: linear-gradient(177.76deg, var(--neutrals-400) 5.28%, var(--neutrals-500) 156.72%);
}
.fact-split-media img { display: block; width: 100%; height: auto; aspect-ratio: 630 / 565; object-fit: cover; }
.fact-split-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
/* the DS .check-list li hard-codes P3; this list is P2, so the size rides on the
   .text-p2 that sits on the <ul> and the items simply inherit it */
.fact-split .check-list { gap: var(--spacing-step-4); }
.fact-split .check-list li { font-size: inherit; line-height: inherit; }
/* Figma ticks sit on the "Gradient V1" disc (#017dc8 → #0064c6), not a flat blue */
.fact-split .check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23017dc8'/%3E%3Cstop offset='1' stop-color='%230064c6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   3. Votre facturation part gagnante (6365-16967) — 2-tab
   carousel, component set 6353-35846. CSS-only: 2 radios drive
   the tab chrome and the panels together (sofia rig).
   ============================================================ */
.fact-gain { padding-top: var(--spacing-step-11); padding-bottom: var(--spacing-step-12); } /* 64 / 80 — the Figma frame is 16px taller than its content */
.fact-gain-inner { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.fact-gain-head { display: flex; align-items: flex-start; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.fact-gain-head > * { flex: 1 1 0; min-width: 0; }
.fact-feat { position: relative; }
.fact-feat > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.fact-feat-stage {
  position: relative;
  aspect-ratio: 1420 / 745;
  border-radius: var(--radius-7md);
  overflow: hidden;
  box-shadow: 0 var(--dropshadow-positioning-2xs) var(--dropshadow-blur-2xs-2) var(--opacity-dark-10);
}
.fact-feat-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* the art arrives as an inline background-image (a relative url() inside a
     custom property would resolve against this stylesheet, not the page) */
  background-position: var(--panel-pos, center);
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.35s ease;
}
/* Overlay-Top + Overlay-Bottom from Figma, as scrims behind the live text */
.fact-feat-panel::before,
.fact-feat-panel::after { content: ""; position: absolute; pointer-events: none; }
.fact-feat-panel::before {
  left: 0; right: 0; top: 0;
  height: 17.45%; /* 130/745 */
  background: linear-gradient(180deg, var(--opacity-dark-60) 5.371%, rgb(0 0 0 / 0) 84.156%);
}
/* The two variants blur different discs (559px vs 678px, 250px blur), so each
   panel carries its own profile — sampled off Figma's render of 6353-35990 /
   6353-36260 every 10% of the radius. */
.fact-feat-panel::after { inset: 0; background: var(--panel-scrim); }
.fact-feat-panel:nth-of-type(1) {
  --panel-scrim: radial-gradient(49.3% 93.96% at 10.32% 88.12%,
    rgb(0 0 0 / 0.565) 0%, rgb(0 0 0 / 0.565) 10%, rgb(0 0 0 / 0.508) 20%, rgb(0 0 0 / 0.434) 30%,
    rgb(0 0 0 / 0.339) 40%, rgb(0 0 0 / 0.246) 50%, rgb(0 0 0 / 0.166) 60%, rgb(0 0 0 / 0.1) 70%,
    rgb(0 0 0 / 0.062) 80%, rgb(0 0 0 / 0.03) 90%, rgb(0 0 0 / 0) 100%);
}
.fact-feat-panel:nth-of-type(2) {
  --panel-scrim: radial-gradient(53.52% 102.01% at 14.51% 74.5%,
    rgb(0 0 0 / 0.732) 0%, rgb(0 0 0 / 0.699) 10%, rgb(0 0 0 / 0.644) 20%, rgb(0 0 0 / 0.546) 30%,
    rgb(0 0 0 / 0.428) 40%, rgb(0 0 0 / 0.309) 50%, rgb(0 0 0 / 0.203) 60%, rgb(0 0 0 / 0.129) 70%,
    rgb(0 0 0 / 0.067) 80%, rgb(0 0 0 / 0.034) 90%, rgb(0 0 0 / 0) 100%);
}
.fact-feat-copy {
  position: absolute;
  left: 1.83%;   /* 26/1420 */
  bottom: 6.71%; /* 50/745 */
  width: var(--copy-w, 33.38%); /* 474/1420 — Figma lets the P1 run 27px past its 447 frame */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px; /* Figma text block → button, no token */
  color: var(--neutrals-100-white);
}
.fact-feat-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.fact-feat-desc { color: var(--opacity-light-90); }
.fact-feat-tabs {
  position: absolute;
  left: 1.83%;
  right: 1.83%;
  top: 3.22%; /* 24/745 */
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-7); /* 24px — this set spaces its two tabs wider than acto's */
  z-index: 2;
}
.fact-feat-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-5) var(--spacing-step-7); /* 12px 24px */
  border-radius: 60px; /* no 60px radius token */
  background: var(--opacity-light-20);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  color: var(--neutrals-100-white);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.fact-feat-tab:hover { background: var(--opacity-light-30); }
.fact-feat-tab .fact-ico { width: 24px; height: 24px; }
/* the blue progress fill sweeps left→right under the label */
.fact-feat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-default);
}
.fact-feat-tab > :not(.fact-feat-fill) { position: relative; z-index: 1; }

/* ── autoplay: 2 slides × 5s, looping (same rig as sofia) ── */
@keyframes fact-panel {
  0%   { opacity: 0; visibility: hidden; }
  1%   { opacity: 1; visibility: visible; }
  50%  { opacity: 1; visibility: visible; }
  53%  { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes fact-fill-1 { 0%      { width: 0; } 50%  { width: 100%; } 100% { width: 100%; } }
@keyframes fact-fill-2 { 0%, 50% { width: 0; } 100% { width: 100%; } }
.fact-feat-panel { animation: fact-panel 10s linear infinite both; }
.fact-feat-panel:nth-of-type(2) { animation-delay: -5s; }
.fact-feat-fill { animation: 10s linear infinite both; }
.fact-feat-tab:nth-of-type(1) .fact-feat-fill { animation-name: fact-fill-1; }
.fact-feat-tab:nth-of-type(2) .fact-feat-fill { animation-name: fact-fill-2; }

/* hovering anywhere in the block freezes the rotation */
.fact-feat:hover .fact-feat-panel,
.fact-feat:hover .fact-feat-fill { animation-play-state: paused; }

/* picking a tab takes over: autoplay stops and that slide stays put.
   Never pre-check a radio here — any checked radio kills the autoplay. */
.fact-feat:has(> input:checked) .fact-feat-panel,
.fact-feat:has(> input:checked) .fact-feat-fill { animation: none; }
.fact-feat:has(> input:checked) .fact-feat-panel { opacity: 0; visibility: hidden; }
.fact-feat:has(> input:checked) .fact-feat-fill { width: 0; }
.fact-feat:has(> input:nth-of-type(1):checked) .fact-feat-tab:nth-of-type(1) .fact-feat-fill,
.fact-feat:has(> input:nth-of-type(2):checked) .fact-feat-tab:nth-of-type(2) .fact-feat-fill { width: 100%; }
.fact-feat:has(> input:nth-of-type(1):checked) .fact-feat-panel:nth-of-type(1),
.fact-feat:has(> input:nth-of-type(2):checked) .fact-feat-panel:nth-of-type(2) { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .fact-feat-panel, .fact-feat-fill { animation: none; }
  .fact-feat-panel { opacity: 0; visibility: hidden; }
  .fact-feat-panel:nth-of-type(1) { opacity: 1; visibility: visible; }
  .fact-feat-tab:nth-of-type(1) .fact-feat-fill { width: 100%; }
}

/* ============================================================
   4. Votre facturation, bien en main (6365-16973) — accolades
   ============================================================ */
.fact-main { display: flex; align-items: stretch; }
.fact-main-intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: var(--spacing-step-10); /* 48px */
  color: var(--neutrals-950);
}
.fact-main-list {
  flex: 0 0 50%; /* 710/1420 */
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0; /* 40px */
  display: flex;
  flex-direction: column;
}
.fact-main-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  /* Figma strokes sit inside the 130px row, so the hairline is an inset shadow
     (a CSS border would add 2px per row); rows overlap by 1px like Figma's mb-[-1px] */
  box-shadow: inset 0 0 0 1px var(--neutrals-400);
}
.fact-main-item + .fact-main-item { margin-top: -1px; }
.fact-main-item .fact-ico { width: 28px; height: 28px; color: var(--primary-default); }
.fact-main-body { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-step-3); }
.fact-main-body .t { color: var(--neutrals-950); }
.fact-main-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. Votre allié en facturation médicale (6365-17033) — blue band.
   ONE full-band background (blue + glow + mark + portrait) — the same art
   as corps médical's band (diff 1.8/255), so the bundled corps-band(-mobile)
   files are shared; the 1px hairline under it is the section's own stroke.
   ============================================================ */
.fact-band-wrap { border-bottom: 1px solid var(--neutrals-400); }
.fact-band {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 375px; /* 376 incl. the 1px hairline */
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--fact-band-bg, url("../img/corps-band.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.fact-band-text { display: flex; flex-direction: column; gap: var(--spacing-step-4); width: 30.28%; min-width: 300px; } /* 430/1420 */
/* only exists for the mobile flow: reserves the portrait area of the card */
.fact-band-art { display: none; }

/* ============================================================
   6. Avant, pendant, après la consultation (6365-17051)
   Same step cluster as à propos, on white with blue chrome.
   ============================================================ */
.fact-steps-sec { padding-block: 77.5px; } /* Figma 13.5 frame inset + 64 padding, no token */
.fact-steps-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-8); }
.fact-steps-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  max-width: 826px;
  text-align: center;
  color: var(--neutrals-950);
}
.fact-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 37px; /* Figma 198 + 37 + 154 + 37 + 198 … cluster, centred */
  width: 100%;
  height: 164px; /* Figma's fixed row: the alys bullet list hangs 6.5px past it */
  padding-top: 2px; /* badges sit at y=2 in the 164px row */
}
.fact-step { display: flex; flex-direction: column; align-items: center; gap: 38.5px; flex: 0 0 198px; } /* badge bottom 44 → logo 82.5 */
.fact-step-badge {
  display: flex;
  width: 198px;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-step-4) var(--spacing-step-7);
  background: rgb(0 106 250 / 0.1); /* Figma tint, not a token */
  color: var(--primary-default);
  white-space: nowrap;
}
.fact-step-caption { display: flex; flex-direction: column; align-items: center; gap: 11px; color: var(--neutrals-950); white-space: nowrap; }
.fact-step-logo { display: block; height: 29px; }
a.fact-step-logo { transition: opacity 0.2s ease; } /* logo links to its product page */
a.fact-step-logo:hover { opacity: 0.75; } /* Figma 29px logo frame; marcus/acto artwork is 24 tall inside it */
.fact-step-logo img { display: block; height: 24px; width: auto; }
.fact-step-logo.is-tall img { height: 29px; }
.fact-step-list { margin: 0; padding-left: 24px; }
.fact-step-divider {
  flex: 0 1 154px;
  min-width: 40px;
  align-self: flex-start;
  margin-top: 22px;
  height: 1px;
  /* Figma stroke: primary/Default, 2px dash / 2px gap */
  background-image: repeating-linear-gradient(to right, var(--primary-default) 0 2px, transparent 2px 4px);
}

/* ============================================================
   7. Intégrations et certifications (6365-17085) — flattened
   gradient background + the TGV accolade
   ============================================================ */
.fact-integr {
  display: flex;
  align-items: center;
  min-height: 460px;
  padding-block: var(--spacing-step-11);
  background: var(--fact-integr-bg, url("../img/fact-integrations.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.fact-integr-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-10); }
.fact-integr-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 826px; text-align: center; }
.fact-cert {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 81.9%; /* 1163/1420 */
  min-height: 132px;
  padding: var(--spacing-step-7);
  background: var(--opacity-light-20);
}
.fact-cert > .c { color: var(--neutrals-100-white); }
.fact-cert-row { display: flex; align-items: flex-end; gap: 91px; } /* Figma gap, no token */
.fact-cert-l { display: flex; align-items: center; gap: var(--spacing-step-7); }
.fact-cert-ico {
  width: 58.022px;
  height: 58.022px;
  border-radius: 50%;
  border: 1.209px solid var(--opacity-light-10);
  background: var(--opacity-light-30);
  color: var(--neutrals-100-white);
}
.fact-cert-ico svg { width: 29.465px; height: 34.488px; }
.fact-cert-txt { display: flex; flex-direction: column; gap: var(--spacing-step-3); max-width: 566px; }

/* ============================================================
   8. La confiance, ça se mérite (6365-17108) — DS .testimonials,
   acto's component set with this page's tab labels
   ============================================================ */
.fact-testi-wrap { display: flex; flex-direction: column; gap: var(--spacing-step-8); } /* title y64 → card y146 */
.fact-trust-title { color: var(--neutrals-950); }
/* page art-direction only: the shared illustration export is square, the
   Figma box is 485×369.33 — a centre crop. Tabs pack left (Figma gap 10). */
.fact-testi .testimonial-photo { aspect-ratio: 485 / 369.33; }
.fact-testi .testimonial-photo img { height: 100%; object-fit: cover; }
.fact-testi .testimonial-tabs { justify-content: flex-start; }

/* ============================================================
   9. Le soin, la gestion, la facturation (6365-17113)
   ============================================================ */
.fact-solutions-pad { padding-top: 49px; padding-bottom: var(--spacing-step-11); } /* Figma 49/64, no 49px token */
.fact-solutions { display: flex; align-items: flex-start; gap: var(--spacing-step-6); }
.fact-solutions-head { flex: 0 0 36.76%; color: var(--neutrals-950); } /* 522/1420 */
.fact-solutions-cards { flex: 1 1 0; min-width: 0; display: flex; gap: var(--spacing-step-6); }
.fact-solutions-cards .card-product { flex: 1 1 0; min-width: 0; }
.fact-solutions-cards .card-ghost .btn-icon { width: 16px; height: 16px; }

/* ============================================================
   10. CTA (6365-17121) — flattened gradient + colour-burn texture
   (identical to acto's: mean diff 0.9/255), copy centred
   ============================================================ */
.fact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-step-6);
  min-height: 494px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--fact-cta-bg, url("../img/acto-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
  text-align: center;
}
.fact-cta .h4 { max-width: 612px; }
.fact-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-step-6); }

/* hover states reproduced for headless screenshots — mirrors the CURRENT :hover
   rules (components.css .btn-pill:hover, mds-templates.css .mds-nav-cta:hover):
   the pill drops its icon circle and re-reserves the freed width as margin-right,
   so the footprint (width + margin) is what must stay constant */
.qa-hover.btn-pill { padding: 8px 24px; margin-right: 34px; background-clip: padding-box; border-radius: 28px; }
.qa-hover.btn-pill .btn-icon-circle { width: 0; opacity: 0; margin-right: -10px; }
.qa-hover.btn-pill .btn-icon-pop { opacity: 1; transform: scale(1); }
.qa-hover.btn-secondary { border-color: transparent; }
.qa-hover.mds-nav-cta { padding: 7px 21px; margin-right: 31px; border-radius: 25px; }

/* ============================================================
   Tablet — 1024-1439: the 1420-tuned blocks get room to breathe
   ============================================================ */
@media (max-width: 1439px) and (min-width: 1024px) {
  .fact-feat-copy { --copy-w: 46%; gap: var(--spacing-step-6); }
  .fact-feat-head { gap: var(--spacing-step-3); }
  .fact-cert { width: 100%; }
  .fact-cert-row { gap: var(--spacing-step-10); }
  .fact-main-list { flex-basis: 55%; }
  .fact-main-intro { padding-right: var(--spacing-step-7); }
}

/* ============================================================
   Mobile — no Figma frame: acto (hero, split, carousel,
   accolades, band card, testimonials, cards, CTA), à propos
   (step cluster) and alys (TGV accolade) mobile patterns.
   ============================================================ */
@media (max-width: 1023px) {
  .fact-in { width: 88.406%; } /* 366/414 */
  .fact-pad { padding-block: var(--spacing-step-10); } /* 48px */

  /* hero: own composite — wash on top for the copy, portrait below */
  .fact-hero {
    min-height: 750px;
    align-items: flex-start;
    padding-bottom: 0;
    background: var(--fact-hero-bg-mobile, url("../img/fact-hero-mobile.jpg")) center bottom / cover no-repeat;
  }
  .fact-hero .fact-in { padding-top: var(--spacing-step-10); }
  .fact-hero-copy { width: 100%; min-width: 0; gap: var(--spacing-step-8); }

  /* split: title → art → text → checklist */
  .fact-split { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--spacing-step-10); }
  .fact-split-content { display: contents; }
  .fact-split-title { order: 1; }
  .fact-split-media { order: 2; flex: none; margin-top: var(--spacing-step-6); }
  .fact-split-text { order: 3; margin-top: var(--spacing-step-6); }
  .fact-split .check-list { order: 4; margin-top: var(--spacing-step-8); }

  .fact-gain { padding-block: var(--spacing-step-10); }
  .fact-gain-inner { gap: var(--spacing-step-7); }
  .fact-gain-head { flex-direction: column; }
  .fact-gain-head > * { flex: none; }
  .fact-feat-stage { aspect-ratio: 366 / 687; }
  .fact-feat-panel { background-position: var(--panel-pos-m, 62% center); }
  .fact-feat-panel::before { height: 18.92%; } /* 130/687 */
  /* mobile: one shared scrim sized for the full-width copy block (acto's) */
  .fact-feat-panel::after { background: radial-gradient(201.09% 123.87% at 39.89% 78.75%, var(--feat-scrim-stops)); }
  .fact-feat-tabs {
    left: 0; right: 0; top: 24px;
    padding-inline: var(--spacing-step-6);
    gap: var(--spacing-step-4);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fact-feat-tabs::-webkit-scrollbar { display: none; }
  .fact-feat-tab { padding: 10px var(--spacing-step-6); }
  .fact-feat-copy { left: var(--spacing-step-6); right: var(--spacing-step-6); width: auto; bottom: var(--spacing-step-7); gap: var(--spacing-step-7); }
  .fact-feat-desc br { display: none; } /* panel 2's hard breaks are tuned to the 526px desktop column */

  /* accolades: head → button → list */
  .fact-main { flex-direction: column; }
  .fact-main-intro { padding-block: 0; gap: var(--spacing-step-7); }
  .fact-main-list { flex: none; padding: 0; margin-top: var(--spacing-step-8); }

  /* band becomes an inset card: copy, button, then the portrait inside the bg */
  .fact-band-wrap { border-bottom: 0; padding-block: var(--spacing-step-10); }
  .fact-band {
    min-height: 0;
    padding: var(--spacing-step-7) var(--spacing-step-7) 0;
    gap: var(--spacing-step-7);
    background-image: var(--fact-band-bg-mobile, url("../img/corps-band-mobile.jpg"));
    background-position: center bottom;
  }
  .fact-band-text { width: 100%; min-width: 0; }
  /* transparent spacer over the portrait at the bottom of the shared mobile art */
  .fact-band-art { display: block; width: calc(100% + 2 * var(--spacing-step-7)); margin-inline: calc(-1 * var(--spacing-step-7)); aspect-ratio: 549 / 356; }

  .fact-steps-sec { padding-block: var(--spacing-step-10); }
  .fact-steps-inner { gap: var(--spacing-step-9); }
  .fact-steps-head { text-align: left; }
  .fact-steps-head p br { display: none; }
  .fact-steps { flex-direction: column; align-items: center; gap: var(--spacing-step-6); height: auto; }
  .fact-step { flex: 1 1 auto; gap: var(--spacing-step-7); }
  .fact-step-divider {
    flex: 0 0 53px;
    align-self: center;
    margin-top: 0;
    width: 1px;
    min-width: 0;
    height: 53px;
    background-image: repeating-linear-gradient(to bottom, var(--primary-default) 0 2px, transparent 2px 4px);
  }

  .fact-integr { min-height: 0; padding-block: var(--spacing-step-10); background-position: 23.5% center; }
  .fact-integr-head { text-align: left; }
  .fact-cert {
    width: 100%;
    /* alys mobile accolade: 39 / 28 / 36 / 20 */
    padding: 39px 28px 36px 20px;
  }
  .fact-cert-row { flex-direction: column; align-items: flex-start; gap: 35.978px; width: 100%; }
  .fact-cert-l { align-items: flex-start; }
  .fact-cert-ico { flex: 0 0 58.022px; }

  .fact-solutions-pad { padding-top: var(--spacing-step-10); padding-bottom: var(--spacing-step-10); }
  .fact-solutions { flex-direction: column; gap: var(--spacing-step-8); }
  .fact-solutions-head { flex: none; }
  .fact-solutions-cards { flex-direction: column; width: 100%; }

  .fact-cta {
    min-height: 560px;
    background-image: var(--fact-cta-bg-mobile, url("../img/acto-cta-mobile.jpg"));
  }
  /* stacked pills share one width: a single max-content track sized by the
     wider button, both stretched to it (hover still trades padding for the
     34px margin, so the footprint holds); content stays left-aligned (icon + label at the start) */
  .fact-cta-actions { display: grid; grid-template-columns: max-content; justify-content: center; }
}