/* =================================================================
   Willow — Site Design System

   Loaded by all 305 pages. Anything used on more than one page belongs
   here; page-specific rules go in assets/page-<name>.css, and template
   rules in blog.css / course.css / help.css / comparison.css /
   customer-story.css / legal.css.

   Style in the stylesheets, not in the page. Inline <style> blocks were
   removed from every page in July 2026 — they had grown to 816 KB, 96% of
   it duplication, and a fix in one place had to be repeated in up to 62
   files. See TODO.md §0 for the convention and §8 for what it cost.

   Check the tokens below before writing a new rule: type scale, colours,
   radii and layout widths are all declared in :root.
   ================================================================= */

@font-face {
  font-family: "Sailec";
  src: url("fonts/Sailec-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sailec";
  src: url("fonts/Sailec-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sailec";
  src: url("fonts/Sailec-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Manrope — the fallback inside --sans / --mono, self-hosted rather than pulled
   from fonts.googleapis.com. Serving Google's copy would send every visitor's
   IP to Google before any consent is given, which an EU site can't rely on. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* DM Serif Display — pull quotes in blog.css and customer-story.css. Split into
   latin and latin-ext exactly as Google serves it, so the smaller latin file
   covers most pages on its own. */
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/DMSerifDisplay-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/DMSerifDisplay-Regular-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/DMSerifDisplay-Italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/DMSerifDisplay-Italic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand — from Willow Brandbook v1.0 */
  --blue: #0030dd;             /* Electric blue — the site's canonical accent (single source of truth; no longer set by JS) */
  --blue-deep: #0c1338;        /* Dark Blue */
  --blue-soft: #eef1ff;        /* tinted from Soft Blue */
  --blue-mid: #7c9bf2;         /* Soft Blue */

  /* Brand strong accents — used sparingly */
  --punch-red: #ed2733;        /* Punchy Red */
  --punch-orange: #f2623f;     /* Raunchy Orange */
  --punch-yellow: #f5a321;     /* Mucky Yellow */

  /* Ink is Dark Blue (not pure black) per brandbook */
  --ink: #0c1338;
  --ink-2: #353b57;
  --ink-3: #4a4f63;
  --ink-4: #6b7085;
  --rule: rgba(12,19,56,0.12);
  --rule-soft: rgba(12,19,56,0.07);

  /* Solid text tokens for dark (navy/ink) surfaces — AA on --ink, no opacity */
  --on-dark: #e7e3da;          /* primary body on navy */
  --on-dark-2: #c3c1c4;        /* secondary body on navy */
  --on-dark-3: #a8a6ab;        /* tertiary / mono labels on navy */

  /* Surfaces — white-first per brandbook */
  --white: #ffffff;
  --paper: #fbf8f3;            /* near-white for subtle bands */
  --cream: #f4efe7;            /* warm paper — the default page surface */
  --cream-2: #ece5d9;
  --cream-3: #e5dccb;

  /* Legacy accents (kept for back-compat) */
  --sage: #6f7d63;
  --clay: var(--punch-orange);

  /* Type scale (web) */
  --t-micro: 12px;
  --t-small: 14px;
  --t-body: 17px;
  --t-body-lg: 19px;
  --t-h6: 22px;
  --t-h5: 28px;
  --t-h4: 34px;
  --t-h3: 44px;
  --t-h2: 60px;
  --t-h1: 88px;
  --t-display: 124px;

  /* ===== Optical centring =====
     Text in a centred box sits visibly high, and it is not a padding bug —
     the padding is symmetric. `align-items: center` centres the *line box*,
     and Sailec reserves 0.25em below the baseline for descenders that most
     UI labels ("Book a demo", "PRICING") never use. So the visible mass
     lands above centre and the gap underneath looks bigger.

     Measured from the font rather than eyeballed, at 400px to avoid the
     integer rounding Chrome applies to fontBoundingBoxAscent at UI sizes:

       Sailec   cap 0.748em   ascent 0.750em   descent 0.250em
       imbalance = 1 - 2(0.750) + 0.748 = 0.248em   ->  shift half of it

     --optical-text applies to cap-height text (buttons, pills, labels).
     --optical-glyph is for symbol glyphs like ★, which are not in Sailec at
     all — they render from a fallback whose ink sits higher still (ink
     ascent 0.859em), while the line box keeps using Sailec's strut.

     Usage: padding: calc(<pad> + var(--optical-text)) <x> calc(<pad> - var(--optical-text));
     The em resolves against the element's own font-size, so it scales itself.
     For a fixed-size centred box with no padding (a star tile), instead set
     padding-top: calc(2 * var(--optical-glyph)) — with align-items:center
     that shifts the glyph down by half the padding, i.e. one shift unit. */
  --optical-text: 0.124em;
  --optical-glyph: 0.14em;

  /* Radii — geometric per brandbook (avoid rounded corners) */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 6px;               /* deliberately squared off — the brand isn't pill-shaped */

  /* Layout */
  --max: 1320px;
  --gutter: 32px;
  --nav-h: 64px;

  /* Hero scale — every hero on the site draws from these.
     Two families, decided by whether the right half holds anything:

       full   nothing beside the headline (page-head, product, customer-success,
              404) — the headline gets the whole 1320px measure
       split  a proof panel, stat card or device mockup sits on the right
              (home, customers, willow-create, will) — the headline is in a
              narrower column, so it needs a smaller cap or it wraps 3-4 deep

     Before this existed each hero invented its own: five clamp() formulas with
     viewport scalars of 3.5/6.2/6.8/8.4vw, six bottom paddings and three
     line-heights. Reach for a token; add a new one only if neither family fits. */
  --hero-pad-top: 152px;
  --hero-pad-bottom: 64px;
  --hero-lh: 1.05;
  --hero-tracking: -0.038em;
  --hero-h1: clamp(44px, 6.2vw, 90px);
  --hero-h1-split: clamp(36px, 3.6vw, 52px);
  /* 22ch, not 20: at 20ch the longest headline on the site (Academy's
     "Everything we've learned and teach about social media.") had no valid
     two-line break — one candidate overshot by 17px, the other by 36px — so it
     fell to three lines and text-wrap:balance evened them down to 781px, half
     the measure of every other hero. 22ch is the first value that clears it. */
  --hero-max: 22ch;
  --hero-max-split: 26ch;
  /* The sub-headline, same story as --hero-max above. At 60ch the long ledes
     set on three lines with a stub last line (Academy ended on "login. No
     paywall." at 129px); 72ch is the first measure that gets Academy, About,
     Solutions and all 32 comparison pages onto two. 1113px at 24px — inside
     the readable 45-75ch range, and narrower than --hero-max so the hierarchy
     still reads. Product and the comparisons hub stay on three lines; their
     copy is simply longer, and widening past this doesn't change that.

     Measure with document.fonts.ready awaited. Sailec's "0" is 0.644em where
     the fallback is 0.687em, so a ch measured before the webfont lands is ~7%
     too wide and every threshold you derive from it is wrong. */
  --hero-lede-max: 72ch;

  /* Type families — Sailec is Willow's brand typeface */
  --sans: "Sailec", "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* Willow sets its letterspaced "mono" labels in Sailec (not a true monospace) — a deliberate editorial choice; kept as the single source of truth so no extra webfont is required. */
  --mono: "Sailec", "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Any in-page anchor target clears the fixed header when scrolled to */
section[id], [id]:target { scroll-margin-top: calc(var(--nav-h) + 24px); }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);   /* warm paper page; white cards sit on top */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain removed — brandbook prefers clean white surfaces */

a { color: inherit; text-decoration: none; }
/* Carried over from the Webflow site: without this, browsers repaint visited
   links purple and the accent colour breaks up mid-paragraph. */
a:visited { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--blue); color: var(--white); }

/* ========== Typography helpers ========== */
.mono { font-family: var(--mono); font-feature-settings: "ss01"; letter-spacing: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.eyebrow.dark { color: rgba(255,255,255,0.6); }
.eyebrow.dark::before { background: var(--blue-mid); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; line-height: 1.02; }
h3 { font-size: var(--t-h3); letter-spacing: -0.022em; line-height: 1.08; }
h4 { font-size: var(--t-h4); letter-spacing: -0.018em; line-height: 1.15; }
h5 { font-size: var(--t-h5); letter-spacing: -0.014em; line-height: 1.2; }
h6 { font-size: var(--t-h6); letter-spacing: -0.012em; line-height: 1.25; }

p { margin: 0; text-wrap: pretty; }
.lede { font-size: var(--t-body-lg); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.005em; }

.accent { color: var(--blue); }
.muted { color: var(--ink-3); }

/* ========== Layout ========== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-tight { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; position: relative; }
.section + .section { border-top: 1px solid var(--rule); }

.row { display: flex; gap: 24px; align-items: center; }
.col { display: flex; flex-direction: column; }

/* ========== Nav ========== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}
/* Past the hero, firm up the bar so content scrolling under it stays legible */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px -16px rgba(12,19,56,0.5);
}
.nav-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.nav-brand img { height: 22px; }
.nav-links {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.nav-links a {
  font-size: 14px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.nav-links a:hover { color: var(--ink); background: rgba(12,19,56,0.05); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 1px;
  background: var(--blue);
}
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-link-signin { font-size: 14px; color: var(--ink-2); padding: 7px 14px; }
.nav-link-signin:hover { color: var(--ink); }

/* Language toggle (EN / NL) */
.lang-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.lang-opt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  padding: 6px 9px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  transition: background 0.15s, color 0.15s;
}
.lang-opt + .lang-opt { border-left: 1px solid var(--rule); }
.lang-opt:hover { color: var(--ink); }
.lang-opt[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.lang-opt[aria-pressed="true"]:hover { color: var(--cream); }
.nav-mobile .lang-toggle { align-self: flex-start; margin: 12px 6px 4px; }
.footer-lang .lang-opt { color: rgba(255,255,255,0.7); }
.footer-lang .lang-opt + .lang-opt { border-left-color: rgba(255,255,255,0.18); }
.footer-lang .lang-opt:hover { color: #fff; }
.footer-lang .lang-opt[aria-pressed="true"] { background: #fff; color: var(--ink); }
.footer-lang .lang-opt[aria-pressed="true"]:hover { color: var(--ink); }

/* Nav dropdown menus */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { font-size: 9px; line-height: 1; color: var(--ink-3); transition: transform 0.15s ease, color 0.15s ease; }
.nav-item.has-menu:hover .nav-caret,
.nav-item.has-menu:focus-within .nav-caret { transform: rotate(180deg); color: var(--ink); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 224px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(12,19,56,0.22), 0 4px 12px rgba(12,19,56,0.06);
  padding: 6px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
/* invisible hover bridge across the gap */
.nav-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-item.has-menu:hover .nav-dropdown,
.nav-item.has-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 9px 12px;
  border-radius: 6px;
  white-space: nowrap;
  width: 100%;
}
.nav-dropdown a:hover { background: rgba(12,19,56,0.05); color: var(--ink); }
.nav-dropdown a.active::after { display: none; }

/* Announcement bar above nav */
.announce {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 13px;
  padding: 8px 16px;
  letter-spacing: -0.005em;
}
.announce a { border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; }
.announce .mono { color: var(--blue-mid); margin-right: 8px; }
body.has-announce { padding-top: 32px; }
body.has-announce .nav { top: 32px; }

/* ========== Buttons ==========
   System tokens — consistent size / radius / padding / hover / focus.
   Primary   = solid Balsy Blue, the one canonical CTA look (.btn-primary / .btn-blue)
   Secondary = hairline outline (.btn-secondary / .btn-ghost)
   Tertiary  = inline text link (.btn-tertiary)
   Trailing → (.btn-arrow) belongs ONLY on navigating CTAs (go to a page/section),
   never on toggles, tabs, or in-place actions. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--optical-text)) 18px calc(10px - var(--optical-text));
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* Primary */
.btn-primary, .btn-blue, .btn-primary:visited, .btn-blue:visited { background: var(--blue); color: var(--white); }
.btn-primary:hover, .btn-blue:hover { background: var(--blue-deep); color: var(--white); }
/* Secondary */
.btn-secondary, .btn-ghost, .btn-secondary:visited, .btn-ghost:visited { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--ink); }
.btn-tertiary:hover.btn-arrow::after { transform: translateX(3px); }
.btn-arrow::after { content: "→"; transition: transform 0.15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-lg { padding: calc(14px + var(--optical-text)) 24px calc(14px - var(--optical-text)); font-size: 15px; }

/* ========== Skip link + main landmark ========== */
.skip-link {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  transition: top 0.16s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--blue-mid); outline-offset: 2px; }
.site-main:focus { outline: none; }

/* ========== Focus ring — single system ==========
   2px accent ring, 2px offset, on every interactive element.
   Lightened to --blue-mid on dark surfaces so it stays visible on navy/blue. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
.btn:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
:where(.footer, .numbers, .home-cta-card, .campaign, .lp-create, .lp-final-card,
  .lp-film, .lp-deadbar, .lp-obit .obit-card, .card.dark, .qcard.feature,
  .prod-card.featured, .duo-panel.ai, .plan.featured, .agency-col.after, [data-dark])
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--blue-mid);
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Tags / chips ========== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 500;
}
/* EU flag, drawn to spec (3:2, 12 stars on a circle of r = H/3, each star
   r = H/18, one point up) and inlined as a data URI so it costs no request.
   Decorative: always pair it with the words "EU servers"/"EU-servers" and
   leave it aria-hidden, so nothing depends on recognising the flag. */
.eu-flag {
  display: inline-block;
  width: 1.35em;
  height: 0.9em;
  vertical-align: -0.08em;
  margin-right: 0.4em;
  border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2090%2060%22%3E%3Crect%20width%3D%2290%22%20height%3D%2260%22%20fill%3D%22%23039%22%2F%3E%3Cpath%20d%3D%22M45.00%2C6.67L45.75%2C8.97L48.17%2C8.97L46.21%2C10.39L46.96%2C12.70L45.00%2C11.27L43.04%2C12.70L43.79%2C10.39L41.83%2C8.97L44.25%2C8.97ZM55.00%2C9.35L55.75%2C11.65L58.17%2C11.65L56.21%2C13.07L56.96%2C15.38L55.00%2C13.95L53.04%2C15.38L53.79%2C13.07L51.83%2C11.65L54.25%2C11.65ZM62.32%2C16.67L63.07%2C18.97L65.49%2C18.97L63.53%2C20.39L64.28%2C22.70L62.32%2C21.27L60.36%2C22.70L61.11%2C20.39L59.15%2C18.97L61.57%2C18.97ZM65.00%2C26.67L65.75%2C28.97L68.17%2C28.97L66.21%2C30.39L66.96%2C32.70L65.00%2C31.27L63.04%2C32.70L63.79%2C30.39L61.83%2C28.97L64.25%2C28.97ZM62.32%2C36.67L63.07%2C38.97L65.49%2C38.97L63.53%2C40.39L64.28%2C42.70L62.32%2C41.27L60.36%2C42.70L61.11%2C40.39L59.15%2C38.97L61.57%2C38.97ZM55.00%2C43.99L55.75%2C46.29L58.17%2C46.29L56.21%2C47.71L56.96%2C50.02L55.00%2C48.59L53.04%2C50.02L53.79%2C47.71L51.83%2C46.29L54.25%2C46.29ZM45.00%2C46.67L45.75%2C48.97L48.17%2C48.97L46.21%2C50.39L46.96%2C52.70L45.00%2C51.27L43.04%2C52.70L43.79%2C50.39L41.83%2C48.97L44.25%2C48.97ZM35.00%2C43.99L35.75%2C46.29L38.17%2C46.29L36.21%2C47.71L36.96%2C50.02L35.00%2C48.59L33.04%2C50.02L33.79%2C47.71L31.83%2C46.29L34.25%2C46.29ZM27.68%2C36.67L28.43%2C38.97L30.85%2C38.97L28.89%2C40.39L29.64%2C42.70L27.68%2C41.27L25.72%2C42.70L26.47%2C40.39L24.51%2C38.97L26.93%2C38.97ZM25.00%2C26.67L25.75%2C28.97L28.17%2C28.97L26.21%2C30.39L26.96%2C32.70L25.00%2C31.27L23.04%2C32.70L23.79%2C30.39L21.83%2C28.97L24.25%2C28.97ZM27.68%2C16.67L28.43%2C18.97L30.85%2C18.97L28.89%2C20.39L29.64%2C22.70L27.68%2C21.27L25.72%2C22.70L26.47%2C20.39L24.51%2C18.97L26.93%2C18.97ZM35.00%2C9.35L35.75%2C11.65L38.17%2C11.65L36.21%2C13.07L36.96%2C15.38L35.00%2C13.95L33.04%2C15.38L33.79%2C13.07L31.83%2C11.65L34.25%2C11.65Z%22%20fill%3D%22%23FC0%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Used on index + nl/index only ("The #1 social media solution…"). The footer
   once carried a second one with a pulsing dot and an "All systems
   operational" label; that was removed, and with it the `.dot` rules and the
   asymmetric left padding (8px) that made room for the dot. Padding is even
   again because nothing sits to the left of the text any more. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: calc(6px + var(--optical-text)) 12px calc(6px - var(--optical-text));
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
/* `pulse` is still live — page-index.css uses it for .launch-eye::before. */
@keyframes pulse {
  0% { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ========== Cards ========== */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.15s, transform 0.15s;
}
.card.hover:hover { border-color: var(--ink); }
.card.dark { background: var(--ink); color: var(--cream); border-color: transparent; }
.card.blue { background: var(--blue); color: var(--white); border-color: transparent; }
.card.cream { background: var(--cream-2); border-color: transparent; }

/* ========== Footer ========== */
.footer {
  background: var(--ink);
  color: #c5c9d6;
  padding: 80px 0 32px 0;
  margin-top: 0;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px;
  align-items: start;
}
.footer .footer-h {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* inline-block + vertical padding so the tap target is 30px tall rather than
   the 14px of bare text. These are navigation links in a list, not links
   inside a sentence, so WCAG 2.5.8's inline exception doesn't apply to them.
   The list `gap` drops from 10px to 2px to keep the column the same height. */
.footer-col a {
  font-size: 14px;
  color: #cfd2db;
  display: inline-block;
  padding: 8px 0;
  line-height: 1;
}
.footer-col a:hover { color: var(--white); }
.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-brand-row img { height: 34px; filter: brightness(0) invert(1); flex-shrink: 0; }
.footer-brand-row p { font-size: 14px; line-height: 1.5; color: #aab0c0; max-width: 420px; flex: 0 1 auto; margin: 0; }
.footer-bot {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 64px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.footer-bot .socials { display: flex; gap: 8px; }
.footer-bot .socials a {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.footer-bot .socials a:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }

/* ========== Page header (non-home) — full-width hero ========== */
.page-head {
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom) 0;
  position: relative;
}
.page-head h1 {
  font-size: var(--hero-h1);
  letter-spacing: var(--hero-tracking);
  line-height: var(--hero-lh);
  max-width: var(--hero-max);
}
.page-head .lede { margin-top: 24px; max-width: var(--hero-lede-max); font-size: 24px; }

/* ========== Marquee ========== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  background: var(--paper);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: scroll 38s linear infinite;
  align-items: center;
}
.marquee-track span {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 16px;
}
.marquee-track span::after {
  content: "✦";
  color: var(--blue);
  margin-left: 56px;
  font-size: 12px;
}
.marquee-track span:nth-child(3n)::after { color: var(--punch-orange); }
.marquee-track span:nth-child(4n)::after { color: var(--punch-yellow); }
.marquee-track span:nth-child(5n)::after { color: var(--punch-red); }
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* Logo-marquee tooltip — quoted customer testimonial on hover.
   Used by the logo marquee on index and product.

   DO NOT delete as unused: this element exists in no HTML file. The inline
   script beside each marquee creates it and sets `tip.id = 'global-logo-tip'`,
   so a dead-CSS pass that only reads markup and assets/*.js will not see it.
   It lives here rather than in the two page stylesheets because it is one
   component and it is appended to <body>, not to the marquee. */
#global-logo-tip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 14px));
  width: 230px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans, inherit);
  font-size: 13px;
  line-height: 1.45;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  box-shadow: 0 16px 36px -14px rgba(10,10,10,0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
  text-align: left;
}
#global-logo-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
#global-logo-tip em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--on-dark-3);
}
#global-logo-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 24px));
}

/* ========== Section header ========== */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
}
.sec-head .left { max-width: 720px; }
.sec-head h2 { margin-top: 16px; }
.sec-head .right { flex-shrink: 0; }
.sec-head p { margin-top: 18px; max-width: 56ch; }

/* ========== Floating demo CTA ========== */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  background: var(--ink);
  color: var(--cream);
  border-radius: 20px;
  padding: 20px 22px;
  width: 320px;
  box-shadow: 0 16px 40px -12px rgba(10,10,10,0.4), 0 4px 12px -4px rgba(10,10,10,0.18);
  animation: fc-slide 0.5s 1.2s ease both;
  transform-origin: bottom right;
}
.floating-cta.dismissed { display: none; }
@keyframes fc-slide {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.floating-cta .fc-close {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(244,239,231,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; border: 0;
}
.floating-cta .fc-close:hover { background: rgba(255,255,255,0.15); color: var(--cream); }
.floating-cta .fc-lab {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-mid);
}
.floating-cta .fc-title {
  margin-top: 8px;
  font-size: 17px; line-height: 1.25; letter-spacing: -0.012em;
  font-weight: 600;
}
.floating-cta .fc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  background: var(--blue); color: var(--white);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  transition: background 0.15s;
}
.floating-cta .fc-btn:hover { background: var(--white); color: var(--blue); }
@media (max-width: 720px) {
  .floating-cta { right: 12px; left: 12px; width: auto; bottom: 12px; padding: 16px; }
  .floating-cta .fc-title { font-size: 15px; }
}

/* ========== Mobile nav (hamburger + drawer) ========== */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: var(--r-md);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-burger span {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 40px -24px rgba(12,19,56,0.3);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  display: none;
}
body.has-announce .nav-mobile { top: calc(var(--nav-h) + 32px); }
.nav.menu-open .nav-mobile { display: block; }
.nav-mobile-inner { display: flex; flex-direction: column; padding: 8px var(--gutter) 24px; }
.nav-mobile .nm-top {
  font-size: 17px; font-weight: 600; color: var(--ink);
  min-height: 48px; display: flex; align-items: center;
  padding: 10px 6px; border-top: 1px solid var(--rule-soft);
}
.nav-mobile .nm-top:first-child { border-top: 0; }
.nav-mobile .nm-top.active { color: var(--blue); }
.nav-mobile .nm-sub {
  font-size: 14px; color: var(--ink-3);
  min-height: 44px; display: flex; align-items: center;
  padding: 8px 6px 8px 20px;
}
.nav-mobile .nm-sub:hover, .nav-mobile .nm-top:hover { color: var(--blue); }
.nav-mobile-signin {
  font-size: 16px; min-height: 48px; display: flex; align-items: center;
  padding: 10px 6px; border-top: 1px solid var(--rule); margin-top: 6px;
}
.nav-mobile-cta { margin: 14px 6px 0; justify-content: center; }

/* ========== Responsive ========== */
@media (max-width: 1100px) {
  :root { --t-h1: 64px; --t-h2: 44px; --t-h3: 34px; --t-display: 88px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto auto; justify-content: space-between; }
  .nav-actions { white-space: nowrap; gap: 8px; }
  .nav-actions .nav-link-signin { display: none; }
  .nav-actions .lang-toggle { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 720px) {
  :root { --t-h1: 48px; --t-h2: 36px; --t-h3: 28px; --gutter: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 64px 0; }
  .page-head { padding: 120px 0 40px 0; }
  .sec-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 460px) {
  /* keep only the hamburger in the bar so nothing overflows on small phones */
  .nav-actions .btn-primary { display: none; }
}

/* ===== Mobile safety nets ===== */
/* CTA button pairs laid out as inline flex rows wrap instead of clipping the
   second button on narrow screens (hero + dark CTA cards across pages). */
@media (max-width: 560px) {
  div[style*="display:flex"]:has(> .btn),
  div[style*="display: flex"]:has(> .btn) { flex-wrap: wrap; }
}

/* ========== Standard call-to-action card ==========
   The single CTA treatment used site-wide: dark navy card, beige text,
   blue primary button, and a customer testimonial in the right column.
   Copy + quote vary per page; the design does not. */
.cta-card {
  background: var(--ink);
  color: var(--cream);
  border-radius: 28px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-card .cta-main h2 { font-size: 52px; letter-spacing: -0.028em; line-height: 1.02; max-width: 24ch; color: var(--cream); }
.cta-card .cta-main p { color: var(--on-dark-2); margin-top: 18px; max-width: 52ch; font-size: 18px; line-height: 1.5; }
.cta-card .cta-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-quote {
  margin: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cta-quote .cq-stars { color: var(--blue-mid); font-size: 14px; letter-spacing: 3px; }
.cta-quote blockquote { margin: 0; font-size: 19px; line-height: 1.4; letter-spacing: -0.012em; color: var(--cream); }
.cta-quote figcaption { display: flex; align-items: center; gap: 12px; }
.cta-quote .cq-av { width: 40px; height: 40px; border-radius: 50%; background: rgba(124,155,242,0.2); color: var(--blue-mid); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; flex-shrink: 0; }

/* ===== Quote-card photos =====
   Same opt-in pattern as the author avatars in blog.css: the markup carries
   data-photo="<slug>", and one rule per person swaps the initials for a face.
   `color: transparent` stays in the per-person rule so a slug with no rule
   yet still falls back to readable initials rather than an empty circle.

   The source photos are framed differently (Inge is portrait 491x556, Elly
   landscape 716x477, and neither is centred), so each needs its own
   background-position — a single `center` crop cuts Elly off at the shoulder
   and puts Inge's chin at the bottom edge. Positions were set by eye against
   the rendered 40px circle. */
.cta-quote .cq-av[data-photo] {
  background-size: cover;
  background-repeat: no-repeat;
}
.cta-quote .cq-av[data-photo="wouter"]  { background-image: url("customers/slot-acs.webp");           background-position: 50% 28%; color: transparent; }
.cta-quote .cq-av[data-photo="jackie"]  { background-image: url("customers/slot-united-codes.webp");  background-position: 50% 24%; color: transparent; }
/* Inge's source is a wide corridor shot, so `cover` leaves her face small and
   off to one side while the other three are already head-and-shoulders.
   Zooming to 230% brings her framing into line with them. */
.cta-quote .cq-av[data-photo="inge"]    { background-image: url("customers/slot-inge.webp");          background-position: 63% 13%; background-size: 230%; color: transparent; }
.cta-quote .cq-av[data-photo="elly"]    { background-image: url("customers/slot-ezw.webp");           background-position: 40% 22%; color: transparent; }
.cta-quote .cq-who { display: flex; flex-direction: column; font-size: 13px; color: var(--on-dark-3); }
.cta-quote .cq-who strong { color: var(--cream); font-weight: 600; font-size: 14px; }
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; gap: 36px; padding: 44px 32px; }
  .cta-card .cta-main h2 { font-size: 40px; }
}

/* ========== Comparison pages — "second opinion" AI buttons ==========
   Keeps the ChatGPT / Claude CTAs together as one unit inside the
   flex row of .second, wrapping side by side on narrow screens. */
.second-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ========== Consent placeholder button ==========
   All that survives of the old custom cookie banner. CookieYes now renders
   the banner itself (assets/consent-bridge.js translates its choices), so
   .cc, .cc-title, .cc-body, .cc-actions, .cc-eyebrow and .cc-text went with
   assets/consent-banner.js.

   .cc-btn stays because assets/embed-consent.js still uses it for the
   "load this embed" button on blocked third-party embeds — checked before
   deleting, since the class name gives no hint it is shared.

   The note that made these identical is worth keeping: giving "accept" the
   louder button is a dark pattern under EDPB/CNIL guidance and invalidates
   the consent. Whatever CookieYes is configured to show must follow the same
   rule — see TODO §11c. */
.cc-btn {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}
.cc-btn:hover { background: var(--blue-deep); color: var(--cream); }
.cc-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Preference rows */
.cc-prefs {
  margin-top: 22px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.cc-row { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.cc-row:last-child { border-bottom: 0; }
.cc-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-track {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 3px;
  background: var(--cream-3);
  border: 1px solid var(--rule);
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.cc-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.16s ease;
}
.cc-switch input:checked + .cc-track { background: var(--blue); border-color: var(--blue); }
.cc-switch input:checked + .cc-track::after { transform: translateX(14px); }
.cc-switch input:disabled + .cc-track { opacity: 0.55; }
.cc-switch input:disabled ~ .cc-label { color: var(--ink-3); }
.cc-switch input:focus-visible + .cc-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.cc-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cc-label em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.cc-desc {
  margin: 8px 0 0 44px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.cc-policy {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.cc-policy:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .cc { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 22px; }
  .cc-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ========== Click-to-load third-party embeds ==========
   Placeholder rendered by assets/embed-consent.js in place of a YouTube /
   LinkedIn / Instagram / Giphy iframe, so no request reaches them before the
   visitor asks. Absolute-fills the Webflow ratio wrappers by default; the
   .is-sized variant matches iframes that carry width/height attributes. */
.embed-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-align: center;
}
/* Video-style embeds have no intrinsic size, so give them a 16:9 block. */
.embed-consent.is-video { width: 100%; aspect-ratio: 16 / 9; min-height: 220px; }
/* Embeds that declare width/height attributes keep those proportions. */
.embed-consent.is-sized { max-width: 100%; }
/* Everything else: a sensible block rather than a collapsed one. */
.embed-consent:not(.is-video):not(.is-sized) { width: 100%; min-height: 260px; }
.embed-consent .ec-inner { max-width: 42ch; }
.embed-consent .ec-provider {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.embed-consent .ec-lead {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.embed-consent .ec-load { margin-bottom: 14px; }
.embed-consent .ec-open {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  width: fit-content;
  margin: 0 auto;
}
.embed-consent .ec-open:hover { color: var(--ink); border-bottom-color: var(--ink); }
.embed-consent .ec-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-4);
}

/* ========== Rich-text video figures (Webflow markup) ==========
   These figures carry an inline padding-bottom for their aspect ratio, but the
   Webflow CSS that made the hack work never came across with the export — so
   the iframe fell back to its intrinsic 300x150 and left the padding as dead
   space below it. Restoring the original geometry:

     no align class / align-center  -> 60% wide, inline padding-bottom 33.75%
     align-fullwidth                -> 100% wide, inline padding-bottom ~56.25%

   In both cases 16:9, because percentage padding resolves against the parent's
   width, not the element's own. */
figure.w-richtext-figure-type-video {
  position: relative;
  height: 0;
  width: 60%;
  margin: 28px 0;
}
figure.w-richtext-figure-type-video.w-richtext-align-fullwidth { width: 100%; }
figure.w-richtext-figure-type-video.w-richtext-align-center { margin-inline: auto; }
figure.w-richtext-figure-type-video > div { position: absolute; inset: 0; }
figure.w-richtext-figure-type-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* The click-to-load placeholder fills the ratio box instead of sizing itself,
   since the box already has the right shape. */
figure.w-richtext-figure-type-video .embed-consent {
  position: absolute;
  inset: 0;
  width: auto;
  min-height: 0;
  aspect-ratio: auto;
}
@media (max-width: 720px) {
  /* Full width on small screens. The inline padding-bottom assumed a 60% box,
     so it has to be overridden to keep 16:9 — hence !important on an inline
     style, which is the only way to reach it. */
  figure.w-richtext-figure-type-video { width: 100%; padding-bottom: 56.25% !important; }
}