/* ============================================================
   MDS components — built on variables.css
   Import order: variables.css first, then this file.
   ============================================================ */

/* ============================================================
   1. Typography
   ------------------------------------------------------------
   Figma: MDS → Typography (node 208-5004)

   Styles:   .d1 .d2 .h1–.h6  (display family)
             .text-p1–.text-p4 .caption (body family)
   Weights:  .fw-light .fw-regular (default) .fw-medium
             .fw-semibold .fw-bold
   Sizes and line-heights come from the responsive alias tokens
   in variables.css, so every style scales automatically at the
   768px / 1440px breakpoints.
   ============================================================ */

/* ── numeric font-weight tokens ──
   The --typography-weight-* tokens hold Figma style names
   ("Bold", "Semibold"…) which are not valid CSS font-weight
   values, so the usable numeric scale lives here. */
:root {
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

  /* responsive weight exceptions (mobile/tablet values) */
  --fw-d2-bold: var(--fw-extra-bold);
  --fw-h5-light: var(--fw-extra-light);
}
@media (min-width: 1440px) {
  :root {
    --fw-d2-bold: var(--fw-bold);
    --fw-h5-light: var(--fw-light);
  }
}

/* ── display styles ── */
.d1,
.d2,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
  font-family: var(--typography-family-display), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-regular);
  color: inherit;
}

.d1 {
  font-size: var(--typography-size-d1);
  line-height: var(--typography-line-height-d1);
}
.d2 {
  font-size: var(--typography-size-d2);
  line-height: var(--typography-line-height-d2);
}
.h1 {
  font-size: var(--typography-size-h1);
  line-height: var(--typography-line-height-h1);
}
.h2 {
  font-size: var(--typography-size-h2);
  line-height: var(--typography-line-height-h2);
}
.h3 {
  font-size: var(--typography-size-h3);
  line-height: var(--typography-line-height-h3);
}
.h4 {
  font-size: var(--typography-size-h4);
  line-height: var(--typography-line-height-h4);
}
.h5 {
  font-size: var(--typography-size-h5);
  line-height: var(--typography-line-height-h5);
}
.h6 {
  font-size: var(--typography-size-h6);
  line-height: var(--typography-line-height-h6);
}

/* ── body styles ── */
.text-p1,
.text-p2,
.text-p3,
.text-p4,
.caption {
  margin: 0;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-regular);
  color: inherit;
}

.text-p1 {
  font-size: var(--typography-size-p1);
  line-height: var(--typography-line-height-p1);
}
.text-p2 {
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
}
.text-p3 {
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
}
.text-p4 {
  font-size: var(--typography-size-p4);
  line-height: var(--typography-line-height-p4);
}
.caption {
  font-size: var(--typography-size-caption);
  line-height: var(--typography-line-height-caption);
}

/* ── weight modifiers ── */
.fw-light { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

/* per-style exceptions from the design system:
   D2 bold renders ExtraBold and H5 light renders Extra Light
   below the desktop breakpoint (see tokens above) */
.d2.fw-bold { font-weight: var(--fw-d2-bold); }
.h5.fw-light { font-weight: var(--fw-h5-light); }

/* ── italic modifier ── */
.fw-italic { font-style: italic; }

/* ============================================================
   2. Buttons
   ------------------------------------------------------------
   Figma: MDS → Buttons (nodes 10257-703, 7-52)

   Variants:  .btn-primary      filled pill "blob" button
              .btn-secondary    outlined pill "blob" button
              .btn-ghost        arrow only → label slides in on hover
              .btn-ghost-text   label + arrow, underline on hover
              .btn-link         inline text link + download icon
              .btn-video        round play/pause/close video controls
   Modifier:  .on-dark → white palette for dark/blue surfaces
   States:    :hover  :focus-visible  :disabled / .is-disabled
   All interactions are pure CSS — no JS required.

   Primary/secondary markup (Figma 4949-32856, "Gradient V1" family):
     <button class="btn-pill btn-primary">
       <span class="btn-icon-circle"> arrow svg </span>
       <span class="btn-label">Button</span>
       <span class="btn-icon-pop"> arrow svg </span>
     </button>
   Default: small arrow circle on the left + label.
   Hover:   left circle collapses, the pill shrinks to 24px paddings
            and a 56px arrow circle pops out past the right edge, only
            kissing the pill (the Figma blob). The circle renders ~52px
            outside the button box — leave room to its right.
   Gradient labels/arrows need the .btn-label span (bare text falls
   back to the solid gradient midpoint —pill-grad-mid).
   NOTE: the #017dc8→#0064c6 gradient and #0170b7 hover are the
   Figma component fills, not variables.css tokens — override the
   --pill-* custom properties to re-brand.
   ============================================================ */

/* ── base (pill) ── */
.btn-pill {
  --pill-grad: linear-gradient(90deg, #017dc8 0%, #0064c6 100%);
  --pill-grad-rev: linear-gradient(to left, #017dc8 0%, #0064c6 100%); /* hover lobe, secondary */
  --pill-grad-mid: #0171c7; /* stand-in where a gradient can't apply (currentColor arrows, bare labels) */
  --pill-hover: #0170b7; /* Figma "primary/darker" as drawn in the component set */
  --pill-accent: #006afa; /* legacy accents — still used by ghost/link/video below */
  --pill-accent-dark: #004097;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 56px;
  padding: 8px 24px 8px 8px;
  border: 0;
  border-radius: 100px;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, border-radius 0.25s ease, padding 0.25s ease,
    margin 0.25s ease;
}
/* hover: the pill shrinks to 24px paddings (Figma) from the RIGHT — the
   margin re-reserves the freed 34px so the button's outer footprint never
   changes and the popped circle lands inside it (nothing around moves) */
.btn-pill:hover,
.btn-pill:focus-visible {
  padding: 8px 24px;
  margin-right: 34px;
  background-clip: padding-box;
  border-radius: 28px;
}
.btn-pill:disabled,
.btn-pill.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-pill:focus-visible {
  outline: 2px dashed var(--neutrals-900);
  outline-offset: 2px;
}

/* generic icon helper (ghost/link variants) */
.btn-icon { flex-shrink: 0; display: block; }

/* left arrow circle — collapses on hover */
.btn-icon-circle,
.btn-icon-pop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.btn-icon-circle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}
.btn-icon-circle svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-pill:hover .btn-icon-circle,
.btn-pill:focus-visible .btn-icon-circle {
  width: 0;
  opacity: 0;
  margin-right: -10px; /* cancel the flex gap so the label re-centers */
}

/* right arrow lobe — a full circle attached past the pill's right edge
   (blooms in on hover); absolute, so it never affects layout */
.btn-icon-pop {
  position: absolute;
  top: 0;
  right: -32px; /* outside the pill's right edge */
  width: 56px;
  height: 56px;
  opacity: 0;
  transform: scale(0.4);
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.btn-icon-pop svg { width: 25px; height: 25px; flex-shrink: 0; }
.btn-pill:hover .btn-icon-pop,
.btn-pill:focus-visible .btn-icon-pop {
  opacity: 1;
  transform: scale(1);
}

/* ── primary — gradient pill (blue on light) ── */
.btn-primary {
  background: var(--pill-grad);
  color: #fff;
  filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.btn-primary .btn-icon-circle {
  background: #fff;
  color: var(--pill-grad-mid); /* Figma: gradient arrow */
}
.btn-primary .btn-icon-pop {
  background: var(--pill-hover);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--pill-hover); }

/* primary on dark/blue surfaces — white pill, gradient circle + label */
.btn-primary.on-dark {
  background: #fff;
  color: var(--pill-grad-mid);
}
.btn-primary.on-dark .btn-icon-circle {
  background: var(--pill-grad);
  color: #fff;
}
.btn-primary.on-dark .btn-icon-pop {
  background: #fff;
  color: var(--pill-grad-mid);
}
.btn-primary.on-dark:hover,
.btn-primary.on-dark:focus-visible { background: #fff; }

/* ── secondary — outlined pill ── */
.btn-secondary {
  background: transparent;
  border: 1px solid #017dc8;
  color: var(--pill-grad-mid);
}
.btn-secondary .btn-icon-circle {
  background: var(--pill-grad);
  color: #fff;
}
.btn-secondary .btn-icon-pop {
  background: var(--pill-grad-rev); /* Figma: lobe gradient mirrors the pill's */
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--pill-grad);
  border-color: transparent; /* keep the 1px so height doesn't shift */
  color: #fff;
}

/* secondary on dark/blue surfaces — white outlined pill */
.btn-secondary.on-dark {
  border-color: #fff;
  color: #fff;
}
.btn-secondary.on-dark .btn-icon-circle {
  background: #fff;
  color: var(--pill-grad-mid); /* Figma: gradient arrow */
}
.btn-secondary.on-dark .btn-icon-pop {
  background: #fff;
  color: var(--pill-grad-mid);
}
.btn-secondary.on-dark:hover,
.btn-secondary.on-dark:focus-visible {
  background: #fff;
  border-color: transparent;
  color: var(--pill-grad-mid);
}

/* gradient label text — needs the .btn-label/.btn-label-grad span; the
   states not listed here read the button's solid color instead */
.btn-primary.on-dark .btn-label,
.btn-primary.on-dark .btn-label-grad,
.btn-secondary:not(.on-dark):not(:hover):not(:focus-visible) .btn-label,
.btn-secondary:not(.on-dark):not(:hover):not(:focus-visible) .btn-label-grad,
.btn-secondary.on-dark:hover .btn-label,
.btn-secondary.on-dark:hover .btn-label-grad,
.btn-secondary.on-dark:focus-visible .btn-label,
.btn-secondary.on-dark:focus-visible .btn-label-grad {
  background: var(--pill-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* legacy alias — the gradient look is now the default primary/secondary;
   kept so existing .btn-gradient markup keeps working unchanged */
.btn-pill.btn-gradient {}

/* ── ghost: arrow only, label slides in on hover ── */
.btn-ghost,
.btn-ghost-text,
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-ghost { gap: 0; }
.btn-ghost,
.btn-ghost-text {
  font-weight: var(--fw-semibold);
  color: var(--primary-default);
}
.btn-ghost.on-dark,
.btn-ghost-text.on-dark {
  color: var(--neutrals-100-white);
}

/* ghost sizes: 16/18/20 icons, P3/P2/P1 semibold */
.btn-ghost.btn-sm, .btn-ghost-text.btn-sm,
.btn-ghost.btn-md, .btn-ghost-text.btn-md,
.btn-ghost.btn-lg, .btn-ghost-text.btn-lg {
  height: auto;
  padding: 0;
}
.btn-ghost.btn-sm, .btn-ghost-text.btn-sm {
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
}
.btn-ghost.btn-md, .btn-ghost-text.btn-md {
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
}
.btn-ghost.btn-lg, .btn-ghost-text.btn-lg {
  font-size: var(--typography-size-p1);
  line-height: var(--typography-line-height-p1);
}
.btn-ghost.btn-sm .btn-icon, .btn-ghost-text.btn-sm .btn-icon,
.btn-link .btn-icon { width: 16px; height: 16px; }
.btn-ghost.btn-md .btn-icon, .btn-ghost-text.btn-md .btn-icon { width: 18px; height: 18px; }
.btn-ghost.btn-lg .btn-icon, .btn-ghost-text.btn-lg .btn-icon { width: 20px; height: 20px; }

/* label hidden by default, slides open on hover/focus */
.btn-ghost .btn-ghost-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.3s ease, opacity 0.3s ease, margin-right 0.3s ease;
}
.btn-ghost:hover .btn-ghost-label,
.btn-ghost:focus-visible .btn-ghost-label {
  max-width: 240px;
  opacity: 1;
  margin-right: var(--spacing-2xs);
}
.btn-ghost.on-dark:hover,
.btn-ghost.on-dark:focus-visible {
  color: var(--primary-light);
}

/* ── ghost text: label + arrow, underline on hover ── */
.btn-ghost-text {
  border-bottom: 1px solid transparent;
}
.btn-ghost-text:hover,
.btn-ghost-text:focus-visible {
  color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
}
.btn-ghost-text.on-dark:hover,
.btn-ghost-text.on-dark:focus-visible {
  color: var(--primary-light);
  border-bottom-color: var(--primary-light);
}

/* ── link ── */
.btn-link {
  font-weight: var(--fw-regular);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  color: var(--primary-default);
}
.btn-link:hover,
.btn-link:focus-visible {
  color: var(--primary-dark);
}
.btn-link.on-dark { color: var(--neutrals-100-white); }
.btn-link.on-dark:hover,
.btn-link.on-dark:focus-visible {
  color: var(--primary-light);
}

/* ── video controls (play / pause / close) ── */
.btn-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--overlay-light-30);
  background: var(--primary-dark);
  color: var(--neutrals-100-white);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-video:hover,
.btn-video:focus-visible {
  background: var(--primary-darker);
}
.btn-video.on-dark {
  background: var(--neutrals-100-white);
  color: var(--primary-default);
}
.btn-video.on-dark:hover,
.btn-video.on-dark:focus-visible {
  background: var(--primary-lighter);
  color: var(--primary-dark);
}
.btn-video .btn-video-glyph { display: block; }
/* play triangle sits optically off-center */
.btn-video-play .btn-video-glyph { margin-left: 3px; }
.btn-video-close {
  width: 40px;
  height: 40px;
}

/* ============================================================
   3. Accordion
   ------------------------------------------------------------
   Figma: MDS → Accordions (node 28-608)

   Built on native <details>/<summary> — open/close works with no JS.
   Markup:
     <details class="accordion accordion-lg">
       <summary>
         <span class="accordion-title">
           <svg class="accordion-plus">…</svg> Accordion Title
         </span>
         <svg class="accordion-toggle" viewBox="0 0 24 24">
           <path class="h" d="M5.25 12H18.75"/>
           <path class="v" d="M12 5.25V18.75"/>
         </svg>
       </summary>
       <div class="accordion-body">…</div>
     </details>
   Sizes:     .accordion-lg  .accordion-md  .accordion-sm
   Modifiers: .on-dark   .is-disabled
   The right toggle morphs plus → minus when open; the panel
   animates where ::details-content is supported (graceful
   instant fallback elsewhere).
   ============================================================ */

.accordion {
  box-sizing: border-box;
  background: var(--neutrals-100-white);
  border-radius: var(--radius-2sm); /* 5px */
  /* Elevation 3 */
  box-shadow: var(--dropshadow-positioning-3xs) var(--dropshadow-positioning-sm)
    var(--dropshadow-blur-2xs-2) var(--opacity-dark-4);
  interpolate-size: allow-keywords;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.accordion[open] {
  /* Elevation 5 */
  box-shadow: 0 var(--dropshadow-positioning-2md) var(--dropshadow-blur-md-2)
    var(--opacity-dark-6);
}

.accordion summary {
  display: flex;
  /* first-line alignment: when a question wraps, the +/- must stay on line 1
     rather than drifting to the middle of the block */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  list-style: none;
  cursor: pointer;
  color: var(--neutrals-950);
  font-weight: var(--fw-semibold);
  transition: color 0.25s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover,
.accordion[open] summary { color: var(--primary-default); }

.accordion-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}
.accordion-plus {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* right toggle: plus whose vertical bar collapses when open */
.accordion-toggle { flex-shrink: 0; }
.accordion-toggle .v {
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.accordion[open] .accordion-toggle .v {
  transform: scaleY(0);
  opacity: 0;
}
.accordion[open] .accordion-toggle { color: var(--neutrals-950); }

/* expandable panel — animated where supported */
.accordion::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.accordion[open]::details-content { block-size: auto; }

.accordion-body {
  color: var(--neutrals-850);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-regular);
}

/* ── sizes ── */
.accordion-lg { padding: var(--spacing-lg); }
.accordion-lg summary {
  font-family: var(--typography-family-display), "Helvetica Neue", Arial, sans-serif;
  font-size: var(--typography-size-h6);
  line-height: var(--typography-line-height-h6);
}
.accordion-lg .accordion-toggle { width: 24px; height: 24px; margin-top: calc((var(--typography-line-height-h6) - 24px) / 2); }
.accordion-lg .accordion-body {
  margin-top: var(--spacing-md);
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
}

.accordion-md { padding: var(--spacing-md); }
.accordion-md summary {
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-size: var(--typography-size-p1);
  line-height: var(--typography-line-height-p1);
}
.accordion-md .accordion-toggle { width: 20px; height: 20px; margin-top: calc((var(--typography-line-height-p1) - 20px) / 2); }
.accordion-md .accordion-body {
  margin-top: var(--spacing-sm);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
}

.accordion-sm { padding: var(--spacing-sm) var(--spacing-md); }
.accordion-sm summary {
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
}
.accordion-sm summary { gap: var(--spacing-xs); }
.accordion-sm .accordion-toggle { width: 16px; height: 16px; margin-top: calc((var(--typography-line-height-p3) - 16px) / 2); }
.accordion-sm .accordion-body {
  margin-top: var(--spacing-xs);
  font-size: var(--typography-size-p4);
  line-height: var(--typography-line-height-p4);
}

/* ── dark surface ── */
.accordion.on-dark {
  background: var(--neutrals-900);
  box-shadow: none;
}
.accordion.on-dark:has(summary:hover),
.accordion.on-dark[open] { background: var(--neutrals-850); }
.accordion.on-dark summary { color: var(--neutrals-100-white); }
.accordion.on-dark summary:hover,
.accordion.on-dark[open] summary { color: var(--primary-light); }
.accordion.on-dark[open] .accordion-toggle { color: var(--neutrals-100-white); }
.accordion.on-dark .accordion-body { color: var(--overlay-light-80); }

/* ── disabled ── */
.accordion.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.accordion.on-dark.is-disabled { opacity: 0.4; }

/* ============================================================
   4. Text Input
   ------------------------------------------------------------
   Figma: MDS → Text Input (node 8007-4813)

   Markup:
     <label class="input input-lg">
       <span class="input-header">
         <span class="input-label">
           Label
           <svg class="input-required" viewBox="0 0 7.09 7.36">…</svg>
         </span>
         <span class="input-description">Short description</span>  (optional)
       </span>
       <span class="input-box">
         <svg class="input-icon">…</svg>                           (optional)
         <input type="text" placeholder="Example" />
       </span>
       <span class="input-note">Example of neutral input note</span> (optional)
     </label>
   Sizes:     .input-lg  .input-md  .input-sm
   Modifiers: .on-dark   (disabled via the input's disabled attribute)
   States are pure CSS: Typing = :focus-within, Filled =
   :not(:placeholder-shown), Disabled = :has(input:disabled).
   ============================================================ */

.input {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.input:has(input:disabled),
.input.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.input-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}
.input-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--neutrals-950);
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
}
.input-required {
  width: 7px;
  height: 7.3px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
  color: var(--primary-default);
}
.input-description {
  color: var(--neutrals-700);
  font-size: var(--typography-size-p4);
  line-height: 1.4;
}

.input-box {
  display: flex;
  align-items: center;
  background: var(--neutrals-400);
  border: 1px solid transparent;
  border-radius: var(--radius-2sm); /* 5px */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.input:focus-within .input-box { border-color: var(--neutrals-600); }

/* select/textarea share the input's field styling — the box is the same
   component in Figma, only the control inside it changes */
.input-box :is(input, select, textarea) {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-weight: var(--fw-light);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  color: var(--neutrals-950);
}
.input-box textarea { display: block; }
.input-box :is(input, textarea)::placeholder { color: var(--neutrals-700); opacity: 1; }

.input-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--neutrals-700);
}

.input-note {
  color: var(--neutrals-600);
  font-size: var(--typography-size-step-3);
  line-height: 1.4;
}

/* ── sizes ── */
.input-lg .input-box { padding: var(--spacing-md) var(--spacing-lg); }
.input-md .input-box { padding: var(--spacing-sm) var(--spacing-md); }
.input-sm .input-box { padding: var(--spacing-xs) var(--spacing-md); }
.input-sm .input-label {
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
}
.input-sm .input-box :is(input, select, textarea) {
  font-size: var(--typography-size-step-3); /* 14px fixed */
  line-height: var(--typography-line-height-p4);
}
/* the dropdown trigger's value is a <span>, not a native control, so the -sm
   size variant needs to reach it explicitly — same 14px ramp as the others */
.input-sm .dropdown-value {
  font-size: var(--typography-size-step-3);
  line-height: var(--typography-line-height-p4);
}
/* at -sm the 24px icon is taller than the 21px (p4) text line, so it grows
   the flex row 3px past every other field's box; cancel it */
.input-sm .input-icon { margin-block: -1.5px; }

/* ── dark surface ── */
.input.on-dark .input-label { color: var(--neutrals-100-white); }
.input.on-dark .input-required { color: var(--primary-light); }
.input.on-dark .input-description { color: var(--overlay-light-60); }
.input.on-dark .input-box { background: var(--neutrals-900); }
.input.on-dark:focus-within .input-box,
.input.on-dark .input-box:has(input:not(:placeholder-shown)) {
  background: var(--neutrals-850);
}
.input.on-dark:focus-within .input-box { border-color: var(--overlay-light-40); }
.input.on-dark .input-box :is(input, select, textarea) { color: var(--neutrals-100-white); }
.input.on-dark .input-box :is(input, textarea)::placeholder { color: var(--overlay-light-60); }
.input.on-dark .input-icon { color: var(--overlay-light-60); }
.input.on-dark:has(input:disabled),
.input.on-dark.is-disabled { opacity: 0.4; }

/* ── select / textarea modifiers ──
   The control styling lives with .input-box above; these are the bits only a
   <select>/<textarea> needs. Modifiers, not a fork:
     <span class="input-box"><select>…</select><svg class="input-icon">chevron</svg></span>
     <label class="input input-md input-area">…<span class="input-box"><textarea …></span></label>
   The empty first <option> is the placeholder and keeps the muted colour. */
.input-box select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.input-box select:has(option[value=""]:checked) { color: var(--neutrals-700); }
.input-box select + .input-icon { pointer-events: none; }
.input-box textarea { resize: vertical; }
/* a textarea grows, so its box top-aligns instead of centring */
.input-area .input-box { align-items: flex-start; }

/* ============================================================
   4a. Checkbox
   ------------------------------------------------------------
   MDS: "Checkbox" component set (np3kkLKipiNe6nJxkTimga, 36-225).
   Sizes: X-Small = 18px (default), Small = 24px (.checkbox-lg).
   .on-dark swaps the unchecked fill for the "Background=Dark" variant
   (white instead of neutrals-500); Checked/Hover/Focused are the same
   Figma artwork on both surfaces.

     <input class="checkbox" type="checkbox" />
     <input class="checkbox checkbox-lg on-dark" type="checkbox" />

   States are pure CSS: Default, :hover (Figma draws a 1px ring — a
   border that reserves its space via box-sizing, so it never shifts
   the 18/24px box), :checked (Selected), :focus-visible (Focused).
   Used standalone (a consent line) or inside .dropdown-item, where its
   own box-shadow divider stays untouched by the added border.
   ============================================================ */
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box; /* a real Figma-accurate border stays inside 18/24px */
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0; /* page builders (Bricks) pad bare inputs; this must win */
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm); /* 4px */
  background-color: var(--neutrals-500);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checkbox:hover { border-color: var(--primary-default); }
.checkbox:checked {
  background-color: var(--primary-default);
  border-color: transparent;
  /* exact DS "Ckeckmark" glyph — X-Small size (Figma node 118:1008) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.48528 6.86396' fill='none'%3E%3Cpath d='M0.5 3.32843L3.32843 6.15685L8.98528 0.5' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 9.485px 6.864px;
}
.checkbox:focus-visible {
  outline: 2px dashed var(--neutrals-900);
  outline-offset: 2px;
}
.checkbox.on-dark { background-color: var(--neutrals-100-white); }
.checkbox.on-dark:checked { background-color: var(--primary-default); }

/* Small (24px) — Figma "Size=Small"; the checkmark is its own larger export,
   not a scaled-up copy, so the stroke weight matches Figma at both sizes. */
.checkbox-lg {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}
.checkbox-lg:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.647 9.15195' fill='none'%3E%3Cpath d='M0.666667 4.4379L4.4379 8.20914L11.9804 0.666667' stroke='white' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 12.647px 9.152px;
}

/* ============================================================
   4b. Dropdown Input
   ------------------------------------------------------------
   MDS: "Dropdown Input" component set (np3kkLKipiNe6nJxkTimga,
   118:116) + "Buildeer - List Item" (118:1056).

   A native <select> cannot style its popup, so the DS list panel is
   built from <details> + a radio group — the same toolkit the rest of
   the DS uses. The control reuses .input/.input-box verbatim, so the
   label, required glyph, sizes and on-dark variant all come free.

     <div class="input input-md dropdown">
       <span class="input-header">…label…</span>
       <details class="dropdown-shell">
         <summary class="input-box">
           <span class="dropdown-value is-empty">Placeholder</span>
           <svg class="input-icon dropdown-chevron">chevron-down</svg>
         </summary>
         <div class="dropdown-list">
           <label class="dropdown-item">
             <input class="dropdown-input" type="checkbox" name="…[]" value="…" />
             <span class="dropdown-mark" aria-hidden="true"></span>
             <span class="dropdown-item-label">List Item</span>
           </label>
         </div>
       </details>
     </div>

   States are CSS: closed/open = [open], Hover = :hover, Item Selected
   = :has(:checked). Reflecting the chosen label into the control and
   closing on pick are the two things CSS cannot do — see the small
   script the pages print. Without it the group still submits.
   ============================================================ */
.dropdown-shell {
  position: relative;
  width: 100%;
}
.dropdown-shell > summary {
  cursor: pointer;
  list-style: none;
}
/* kill the native disclosure triangle */
.dropdown-shell > summary::-webkit-details-marker { display: none; }
.dropdown-shell > summary::marker { content: ""; }

.dropdown-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap; /* Figma sets this on the trigger text — truncate, don't wrap */
  text-overflow: ellipsis;
  font-weight: var(--fw-light);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  color: var(--neutrals-950);
  text-align: left;
}
/* nothing picked yet — same muted tone as ::placeholder */
.dropdown-value.is-empty { color: var(--neutrals-700); }

/* Figma ships a separate Chevron_Up_MD for the open state; it is the
   down glyph mirrored, so one icon flips instead of two in the sprite. */
.dropdown-chevron { transition: transform 0.2s ease; }
.dropdown-shell[open] .dropdown-chevron { transform: scaleY(-1); }

/* Figma draws the panel in flow (it is a spec sheet); in a real form it
   must overlay what follows, or opening it would reflow the page. */
.dropdown-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + var(--spacing-xs));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2sm); /* 5px */
  overflow: hidden;
  background: var(--neutrals-300);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--neutrals-300);
  /* the row divider is a Figma stroke: drawn inside, no layout cost */
  box-shadow: inset 0 -1px 0 var(--neutrals-500);
  cursor: pointer;
  color: var(--neutrals-700);
  font-weight: var(--fw-regular);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-item:hover { background: var(--neutrals-400); }
.dropdown-item:has(.dropdown-input:checked) {
  background: var(--neutrals-400);
  color: var(--neutrals-950);
}
.dropdown-item:has(.dropdown-input:focus-visible) {
  outline: 2px dashed var(--neutrals-900);
  outline-offset: -2px;
}
.dropdown-item-label { flex: 1; min-width: 0; }

/* the input drives state; the visible mark is .dropdown-mark. A checkbox makes
   the list multi-select ("séléctionnez une ou des …"), a radio single-select —
   the mark follows the input type, no extra class needed. */
.dropdown-input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Same artwork as .checkbox (MDS "Checkbox" set, np3kkLKipiNe6nJxkTimga
   36-225) — a <span> here rather than that class directly because the real
   control is the visually-hidden .dropdown-input beside it; state is
   driven via :has() on the row instead of :hover/:checked on itself. */
.dropdown-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid transparent; /* reserves the Hover ring's space */
  border-radius: var(--radius-sm); /* 4px */
  background-color: var(--neutrals-500);
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* ▸ Radio Indicator: same slot, round */
.dropdown-item:has(.dropdown-input[type="radio"]) .dropdown-mark { border-radius: 50%; }

.dropdown-item:hover .dropdown-mark { border-color: var(--primary-default); }
.dropdown-item:has(.dropdown-input:checked) .dropdown-mark {
  background-color: var(--primary-default);
  border-color: transparent;
  /* exact DS "Ckeckmark" glyph — X-Small size (Figma node 118:1008) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.48528 6.86396' fill='none'%3E%3Cpath d='M0.5 3.32843L3.32843 6.15685L8.98528 0.5' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 9.485px 6.864px;
}

/* ── dark surface ── */
.input.on-dark .dropdown-value { color: var(--neutrals-100-white); }
.input.on-dark .dropdown-value.is-empty { color: var(--overlay-light-60); }
.input.on-dark .dropdown-list { background: var(--neutrals-900); }
.input.on-dark .dropdown-item {
  background: var(--neutrals-900);
  box-shadow: inset 0 -1px 0 var(--overlay-light-20);
  color: var(--overlay-light-60);
}
.input.on-dark .dropdown-item:hover { background: var(--neutrals-850); }
.input.on-dark .dropdown-item:has(.dropdown-input:checked) {
  background: var(--neutrals-850);
  color: var(--neutrals-100-white);
}
.input.on-dark .dropdown-mark { background-color: var(--overlay-light-20); }

/* ============================================================
   5. Tag / chip
   ------------------------------------------------------------
   medO Website UI: "tag" (used 20×)
   <span class="tag">Organisation clinique</span>
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-step-2) var(--spacing-sm); /* 4px 12px */
  background: var(--neutrals-400);
  border-radius: var(--radius-round);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--typography-size-p4);
  line-height: var(--typography-line-height-p4);
  color: var(--neutrals-950);
  white-space: nowrap;
}

/* ============================================================
   6. Cards
   ------------------------------------------------------------
   medO Website UI repeated cards:
     .card-case-study  (54×)   .card-product (9×)
     .card-module      (22×)   .card-insight / -horizontal (6×)
   Shared bits: .card-meta (type | date), .card-arrow (ghost arrow).
   Site-specific accent colors are exposed as custom properties
   (--card-type-gradient, --card-category-color) for re-theming.
   ============================================================ */

/* Ghost button at a card's bottom.
   Figma names this element "Ghost" in every card — it is the .btn-ghost
   component (arrow at rest, label slides in), NOT a bare arrow. Because the
   whole card is already an <a>, the ghost renders as a <span> and the CARD's
   hover/focus drives the label reveal instead of the ghost's own :hover.

   Markup:
     <span class="btn-ghost btn-sm card-ghost">
       <span class="btn-ghost-label">En savoir plus</span>
       <svg class="btn-icon">…</svg>
     </span> */
.card-ghost { margin-top: auto; }
.card-case-study:hover .card-ghost .btn-ghost-label,
.card-product:hover .card-ghost .btn-ghost-label,
.card-module:hover .card-ghost .btn-ghost-label,
.card-insight:hover .card-ghost .btn-ghost-label,
.card-case-study:focus-visible .card-ghost .btn-ghost-label,
.card-product:focus-visible .card-ghost .btn-ghost-label,
.card-module:focus-visible .card-ghost .btn-ghost-label,
.card-insight:focus-visible .card-ghost .btn-ghost-label {
  max-width: 240px;
  opacity: 1;
  margin-right: var(--spacing-2xs);
}

/* legacy bare-arrow slot — kept so older markup keeps rendering; prefer
   .btn-ghost .card-ghost above */
.card-arrow {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--primary-default);
}
.card-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
a:hover .card-arrow svg,
.card-arrow:hover svg { transform: translateX(4px); }

/* meta row: gradient type | date */
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.card-meta-type {
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-step-3);
  line-height: var(--typography-line-height-p4);
  /* "Gradient/Primary Gradient" (Figma 8301-8589): primary-500 → primary-light */
  background: var(--card-type-gradient,
    linear-gradient(118deg, var(--primary-default) 2.25%, var(--primary-light) 102%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-meta-sep,
.card-meta-date {
  font-weight: var(--fw-semibold);
  font-size: var(--typography-size-step-2);
  line-height: var(--typography-line-height-caption);
  color: var(--neutrals-700);
}

/* ── case-study card (Figma "Case Study", full + compact variants) ──
   Full:     thumb + head(meta, title) + text + arrow   (blog / news grids)
   Compact:  head only                                  (small teaser lists)
     <a class="card-case-study">
       <span class="card-case-study-thumb"><img …></span>      (optional)
       <span class="card-case-study-inner">
         <span class="card-case-study-head">
           <span class="card-meta">…</span>
           <span class="card-case-study-title h6 fw-semibold">…</span>
         </span>
         <span class="card-case-study-text text-p3">…</span>   (optional)
         <span class="card-arrow">…</span>                     (optional)
       </span>
     </a>                                                              */
.card-case-study {
  display: flex;
  flex-direction: column;
  background: var(--neutrals-100-white);
  /* Elevation 4 */
  box-shadow: 0 var(--dropshadow-positioning-2sm) var(--dropshadow-blur-3xs-2)
    var(--opacity-dark-4);
  text-decoration: none;
}
.card-case-study-thumb {
  aspect-ratio: 463 / 258; /* Figma thumbnail ratio */
  background: var(--neutrals-100-white);
  overflow: hidden;
  flex-shrink: 0;
}
.card-case-study-thumb img,
.card-case-study-thumb > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-case-study-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  flex: 1;
  padding: var(--spacing-lg);
  background: var(--overlay-light-50);
}
.card-case-study-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}
.card-case-study-title {
  color: var(--neutrals-950);
  transition: color 0.2s ease;
}
/* Figma fixes the description box at 4 lines (h-[112px]) so every card in a
   row aligns and long excerpts clamp instead of pushing the ghost down.
   Height is derived from the p3 token so it tracks the responsive scale. */
.card-case-study-text {
  color: var(--neutrals-950);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: calc(var(--typography-line-height-p3) * 4);
}
.card-case-study .card-arrow { margin-top: auto; }

/* Hover variant — Figma "Master card insights=Hover" (8301-8611):
   the inner panel lifts from overlay-light-50 to neutrals-200 and the title
   turns accent blue. The ghost's label reveal is handled by .card-ghost. */
.card-case-study:hover .card-case-study-inner,
.card-case-study:focus-visible .card-case-study-inner {
  background: var(--neutrals-200);
}
.card-case-study:hover .card-case-study-title,
.card-case-study:focus-visible .card-case-study-title {
  color: var(--primary-default);
}

/* optional "Industry" line above the meta row (industryName in Figma) */
.card-case-study-industry {
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-step-3);
  line-height: var(--typography-line-height-p4);
  background: var(--card-type-gradient,
    linear-gradient(124deg, var(--primary-default) 2.25%, var(--primary-light) 102%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* optional bookmark, right-aligned on the meta row (bookmark in Figma) */
.card-case-study-head .card-meta { width: 100%; }
.card-case-study-bookmark {
  width: 14px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--neutrals-950);
}
.card-case-study-bookmark svg { width: 100%; height: 100%; display: block; }

/* ── product card ── */
.card-product {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-500);
  text-decoration: none;
}
.card-product-logo { height: 29px; }
.card-product-logo img { height: 100%; width: auto; display: block; }
.card-product-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.card-product-title {
  color: var(--neutrals-950);
}
.card-product-desc {
  color: var(--neutrals-800);
}
/* Hover (State=Hover, 4527-27529): the card takes a 10% primary-blue fill and
   the title flips to primary. The tint rides as a background-IMAGE layer so it
   composites over whatever background-color the consumer gave the card — white
   in the default component, transparent on the home grid (.home-scard). */
.card-product {
  transition: background-image 0.2s ease;
}
.card-product:hover,
.card-product:focus-visible {
  background-image: linear-gradient(rgba(0, 106, 250, 0.1), rgba(0, 106, 250, 0.1));
}
.card-product:hover .card-product-title,
.card-product:focus-visible .card-product-title {
  color: var(--primary-default);
}

/* ── module card ──
   Redesigned per the updated "Module Card/Ofys *" component (3388-14897 /
   3388-14929): white card with a 1px neutral border, square corners, 16px
   padding, 8px stack gap, P2-bold title + P4 desc, bare arrow at the bottom.
   Optional .card-module-media (expanded state) bleeds a product render to
   1px inside the border. */
.card-module {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-4); /* 8px, fixed at all breakpoints like the component */
  padding: var(--spacing-step-6); /* 16px */
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-400);
  text-decoration: none;
}
.card-module-media {
  align-self: stretch;
  /* Figma parks the render at -15px: 1px inside the border on every side,
     and 15px + the 8px stack gap = the component's 23px block gap below */
  margin: calc(1px - var(--spacing-step-6)) calc(1px - var(--spacing-step-6)) 15px;
  aspect-ratio: 365 / 213;
  overflow: hidden;
}
.card-module-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-accent, #006afa);
  color: var(--neutrals-100-white);
}
.card-module-icon svg { width: 20px; height: 20px; }
.card-module-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.card-module-title {
  color: var(--neutrals-950);
}
.card-module-desc {
  color: var(--neutrals-800);
}

/* ── insight card (vertical default, add .card-insight-horizontal) ── */
.card-insight {
  display: flex;
  flex-direction: column;
  background: var(--neutrals-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Elevation 3 */
  box-shadow: var(--dropshadow-positioning-3xs) var(--dropshadow-positioning-sm)
    var(--dropshadow-blur-2xs-2) var(--opacity-dark-4);
  text-decoration: none;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.card-insight-thumb {
  height: 200px;
  background: var(--neutrals-100-white);
  flex-shrink: 0;
}
.card-insight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-insight-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  flex: 1;
}
.card-insight-details {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-step-3);
  line-height: var(--typography-line-height-p4);
}
.card-insight-category { color: var(--card-category-color, #a333ea); }
.card-insight-date { color: var(--neutrals-700); }
.card-insight-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.card-insight-title {
  color: var(--neutrals-950);
}
.card-insight-desc {
  color: var(--neutrals-850);
}
.card-insight .card-arrow { padding-top: var(--spacing-md); }
/* optional author strip */
.card-insight-profile {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.card-insight-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-3xs);
  background: var(--neutrals-100-white);
  overflow: hidden;
  flex-shrink: 0;
}
.card-insight-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-insight-name {
  font-weight: var(--fw-semibold);
  font-size: var(--typography-size-p3);
  color: var(--neutrals-950);
}
.card-insight-role {
  font-size: var(--typography-size-step-2);
  color: var(--neutrals-700);
}
/* horizontal variant: image left, text right */
.card-insight-horizontal { flex-direction: row; }
.card-insight-horizontal .card-insight-thumb {
  width: 37%;
  height: auto;
}

/* ============================================================
   7. Testimonials (tabs + slides carousel)
   ------------------------------------------------------------
   medO Website UI: "Testimonials (updated)" + "Testimonils Tab"
   CSS-only switching — pair each hidden radio with a tab label
   and a slide (up to 6):
     <div class="testimonials">
       <input type="radio" name="t" id="t1" checked /> <input … id="t2" />
       <div class="testimonial-tabs">
         <label class="testimonial-tab" for="t1">Clinic A</label> …
       </div>
       <div class="testimonial-slides">
         <div class="testimonial-slide"> … </div> …
       </div>
     </div>
   ============================================================ */
/* One component, used verbatim by every page (alys, acto, apropos, home …).
   Geometry is Figma "Testimonials (updated)" 5147-17790 — every page frame is
   an instance of it, so pages must NOT re-declare any of this; a page-level
   `.x-testi .testimonial-*` override is by definition a deviation. Only
   art-direction that belongs to a specific photo (an object-position nudge)
   has any business living in a page stylesheet. */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl); /* 48px — Figma tabs y=24+40 → slide y=112 */
  padding: var(--spacing-lg); /* 24px */
  overflow: hidden; /* Figma `overflow-clip` — clips the tab row to the radius */
  background: var(--neutrals-400); /* #eff0f6 */
  border-radius: var(--radius-7md); /* 16px */
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.testimonials > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* One row, always — Figma (5147-17791) deliberately clips the sixth tab at the
   frame edge instead of wrapping it, and the row is dragged to reach the rest.
   So never let it wrap, and keep the scrollbar hidden: the design shows none.
   The ±4px bleed keeps the corner brackets off the scroll edge. */
/* space-between is a deliberate call: Figma's row is a plain flex with
   `gap-[10px]` packed left, so the tabs spread here once they fit (≥~1600).
   Below that the row overflows, there is no free space, and 10px is what you
   get — identical to the design. The row is exactly the content width (Figma
   `w-full`, 1372 at the 1420 frame) and carries no inline bleed, which is what
   puts the clip in the right place. Each tab's corner brackets are drawn inside
   the tab, so none of them is lost to the scroll edge. */
.testimonial-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* Figma: tab x=257 → next x=267 */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.testimonial-tabs::-webkit-scrollbar { display: none; }
/* States come from Figma "Testimonils Tab" (node 248-2891), values confirmed
   against 5147-17791:
     Default  no fill, P3 bold neutrals-700 (#6e7191), 8px neutrals-500 (#d9dbe9) brackets
     Hover    10% primary tint, neutrals-950 text, 8px primary brackets
     Active   solid primary/Default (#0c67e9), white text, 24px primary brackets
   The fill is `--primary-default`, NOT `--site-accent`: Figma's primary/Default
   is #0c67e9 and --site-accent is #006afa, a visibly different blue.
   --bracket-arm keeps the eight gradient slices in sync across the states. */
.testimonial-tab {
  --bracket: var(--neutrals-500);
  --bracket-arm: 8px;
  padding: var(--spacing-xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  color: var(--neutrals-700);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* viewfinder corner brackets */
  background-image:
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket));
  background-position: left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size:
    var(--bracket-arm) 1px, 1px var(--bracket-arm),
    var(--bracket-arm) 1px, 1px var(--bracket-arm),
    var(--bracket-arm) 1px, 1px var(--bracket-arm),
    var(--bracket-arm) 1px, 1px var(--bracket-arm);
  background-repeat: no-repeat;
}
.testimonial-tab:hover {
  --bracket: var(--primary-default);
  background-color: rgb(12 103 233 / 0.1); /* Figma 10% primary tint, no token */
  color: var(--neutrals-950);
}

.testimonial-slides { width: 100%; }
.testimonial-slide {
  display: none;
  gap: var(--spacing-3xl); /* 48px — Figma: text col 839 + 48 + photo 485 = 1372 */
  align-items: center; /* Figma: the row is `items-center` */
}
/* radio n ⇒ activate tab n + show slide n */
.testimonials:has(> input:nth-of-type(1):checked) .testimonial-tab:nth-of-type(1),
.testimonials:has(> input:nth-of-type(2):checked) .testimonial-tab:nth-of-type(2),
.testimonials:has(> input:nth-of-type(3):checked) .testimonial-tab:nth-of-type(3),
.testimonials:has(> input:nth-of-type(4):checked) .testimonial-tab:nth-of-type(4),
.testimonials:has(> input:nth-of-type(5):checked) .testimonial-tab:nth-of-type(5),
.testimonials:has(> input:nth-of-type(6):checked) .testimonial-tab:nth-of-type(6) {
  --bracket: var(--primary-default);
  --bracket-arm: 24px; /* Figma grows the brackets on the active tab */
  background-color: var(--primary-default); /* #0c67e9 */
  color: var(--neutrals-100-white);
}
.testimonials:has(> input:nth-of-type(1):checked) .testimonial-slide:nth-of-type(1),
.testimonials:has(> input:nth-of-type(2):checked) .testimonial-slide:nth-of-type(2),
.testimonials:has(> input:nth-of-type(3):checked) .testimonial-slide:nth-of-type(3),
.testimonials:has(> input:nth-of-type(4):checked) .testimonial-slide:nth-of-type(4),
.testimonials:has(> input:nth-of-type(5):checked) .testimonial-slide:nth-of-type(5),
.testimonials:has(> input:nth-of-type(6):checked) .testimonial-slide:nth-of-type(6) {
  display: flex;
}

.testimonial-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Figma centres the quote column against the taller photo */
  gap: 36px; /* Figma: title h=30 at y=0 → body at y=66 */
}
.testimonial-title {
  color: var(--neutrals-950);
}
.testimonial-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl); /* 32px — Figma: icon 44 → quote y=76 → source y=+32 */
}
/* Figma is a 44×44 box holding a 38.5×33 glyph (`inset-[12.5%_6.25%]`), and the
   32px body gap is measured from the BOX, not the glyph — so the box must stay
   44 tall or the quote rides up ~6px. border-box + those insets as padding make
   the SVG viewport exactly the glyph. */
.testimonial-quote-icon {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 5.5px 2.75px; /* 12.5% / 6.25% of 44 */
  color: var(--primary-default);
}
/* Figma wraps the quote at 707px inside the 839px column (5147:17837 and the
   apropos instance both measure 707) — the title and source stay full width. */
.testimonial-quote {
  max-width: 707px;
  color: var(--neutrals-950);
}
/* Some quotes (Hampstead) are an intro line + a bullet list. Figma keeps ONE
   uniform 26px baseline pitch across the whole block — no extra gap before the
   list or between items — so every margin here is 0 and the inherited p2
   line-height does all the vertical work. Measured off 5147:17998 at 1:1: the
   bullet glyph inks x=11..15 (centre 13) and the item text starts at x=28. */
.testimonial-quote p,
.testimonial-quote ul {
  margin: 0;
}
.testimonial-quote ul {
  padding: 0;
  list-style: none;
}
.testimonial-quote li {
  position: relative;
  padding-left: 28px;
}
/* Drawn as a shape rather than a • glyph or an ::marker: both are placed from
   the font's advance width, which put the dot ~6px left of Figma in the fallback
   face and would drift again once the webfont loads. Figma's dot is a 5px disc
   centred at x=13 and vertically centred in the 26px line box, so the top offset
   is (line-height - 5) / 2 and follows the p2 token across breakpoints. */
.testimonial-quote li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: calc((var(--typography-line-height-p2) - 5px) / 2);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.testimonial-source {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.testimonial-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 53.333px; /* Figma h-[53.333px] */
  border-radius: var(--radius-sm); /* 4px */
  background: var(--neutrals-100-white);
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-logo img { display: block; }
.testimonial-role {
  color: var(--neutrals-700);
}
/* 485px wide in every Figma variant; the HEIGHT comes from the image itself.
   Each photo is exported from its own Figma frame, so the designed box is
   already baked into the file (485×369.333 on most slides, 485×655.333 on
   Hampstead). Letting the intrinsic aspect set the height reproduces every
   variant exactly and — unlike stretch + cover — never re-crops or zooms the
   art when the quote column happens to run taller than the design's. */
.testimonial-photo {
  width: 370px;
  max-width: 40%;
  align-self: center; /* Figma: the slide row is `items-center` */
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
/* absolute so the image's intrinsic size never feeds back into the row height */
.testimonial-photo img {
  width: 100%;
  height: auto; /* intrinsic — the export already carries the designed crop */
  display: block;
}

/* Mobile: one column in the Figma order — title, quote, photo, source. The
   `display: contents` on the two wrappers is what lets the photo sit between
   the quote and the source without moving it in the DOM. */
@media (max-width: 1023px) {
  .testimonial-slide {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-lg);
  }
  .testimonial-content,
  .testimonial-body { display: contents; }
  .testimonial-title { order: 1; }
  .testimonial-quote-icon { order: 2; }
  .testimonial-quote { order: 3; }
  /* Mobile crops to the Figma 414 ratio rather than showing the desktop box,
     so here the image does fill a fixed-ratio frame. */
  .testimonial-photo {
    order: 4;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 318 / 293;
  }
  .testimonial-photo img {
    height: 100%;
    object-fit: cover;
  }
  .testimonial-source { order: 5; }
}

/* ============================================================
   8. Breadcrumbs + dividers
   ------------------------------------------------------------
   medO Website UI: "Breadcrumbs - Section" (24×), "Basic Divider"
   ============================================================ */
/* The trail sits in the SAME container as every page section — 1420/1920 on
   desktop, 366/414 on mobile. It used to pad with --grid-system-margin, which
   is 295px at ≥1440 (45px right of the 250px content edge) and only 32px from
   1024–1439 (far left of it), so the breadcrumbs never lined up with the page
   below them at any width. Figma caps the trail at 1742px, but aligning with
   the content container is what keeps the two edges flush past 1920. */
.breadcrumbs-bar {
  display: flex;
  justify-content: center;
  background: var(--neutrals-300);
  box-shadow: inset 0 -1px 0 var(--neutrals-400);
  padding: 6px 0px;
}
/* % width, not px: .breadcrumbs is a flex ITEM here, and a fixed px width is
   only a flex-basis — with the default flex-shrink:1 the browser shrinks it
   to fit whenever the bar is narrower than 1420px (+ padding), which is
   every width from 1024 to 1439 and even eats into 1920. A % basis resolves
   against the container directly and can never need to shrink, so it can't
   hit that trap — same recipe as .demo-in/.section-inner, no padding needed
   since the trail's edges ARE the container's edges. */
.breadcrumbs {
  box-sizing: border-box;
  width: 88.406%; /* 366/414 */
  max-width: var(--section-container, 1420px);
  height: 20px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 1024px) {
  .breadcrumbs { width: 100%; } /* 1420/1920 */
}
.breadcrumbs a {
  color: var(--neutrals-700);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--neutrals-950); }
.breadcrumbs-chevron {
  width: 20px;
  height: 20px;
  color: var(--neutrals-600);
  flex-shrink: 0;
}
.breadcrumbs-current {
  font-weight: var(--fw-medium);
  font-size: var(--typography-size-step-3);
  background: var(--breadcrumb-gradient, linear-gradient(90deg, #017dc8, #0064c6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.divider-h {
  border: 0;
  height: 1px;
  width: 100%;
  background: var(--neutrals-500);
}
.divider-v {
  width: 1px;
  height: 20px;
  align-self: center;
  background: var(--neutrals-500);
}
.faq-in .accordion-body a{
    color: #2583ffd0;
    text-decoration: underline;
}