:root{
--bg:#FCFAF7;--surface:#F4EEE6;--surface-2:#F4EEE6;--ink:#241F1A;--muted:#7b7165;--accent:#C6790E;--accent-ink:#9e6311;--on-accent:#241f1a;--shadow-1:0 12px 32px color-mix(in oklab, #241F1A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #241F1A 18%, transparent);
--radius:0px;
--font-display:'Sora',sans-serif;--font-body:'Manrope',sans-serif;
--step--1:0.8333rem;--step-0:1.0000rem;--step-1:1.2000rem;--step-2:1.4400rem;--step-3:1.7280rem;--step-4:2.0736rem;--step-5:2.4883rem;--step-6:1.8662rem;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--section-pad:clamp(56px, 7vw, 112px);--measure:62ch;--measure-sm:34rem;--measure-lg:76rem;
--ease:cubic-bezier(.4,0,.2,1);--dur-1:.45s;--dur-2:.9s;
}
:root[data-theme="light"]{--bg:#FCFAF7;--surface:#F4EEE6;--surface-2:#F4EEE6;--ink:#241F1A;--muted:#7b7165;--accent:#C6790E;--accent-ink:#9e6311;--on-accent:#241f1a;--shadow-1:0 12px 32px color-mix(in oklab, #241F1A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #241F1A 18%, transparent);}
:root[data-theme="dark"]{--bg:#1e1915;--surface:#2c2824;--surface-2:#2c2824;--ink:#eceae7;--muted:#a29f9c;--accent:#C6790E;--accent-ink:#c6790e;--on-accent:#1e1915;--shadow-1:0 12px 32px color-mix(in oklab, #eceae7 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #eceae7 18%, transparent);}
html{color-scheme:light dark;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);}
[dir="rtl"] body{font-family:var(--font-body-ar,var(--font-body));}
[dir="rtl"] .title,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--font-display-ar,var(--font-display));}
section{padding-block:var(--section-pad);}

/* Forge primitives — the shared vocabulary every block composes from.
   Written once, tuned by hand, skinned per design system through the
   documented custom properties. Blocks NEVER redefine these classes; they
   set the properties inside their own scope.

   Loaded after reset.css, before the page's styles.css.

   CONTRAST-SAFE ACCENT PAIR: the engine emits --accent-ink (the accent
   shifted until it reads ≥4.5:1 on --bg) and --on-accent (the text colour
   that survives ON an accent fill). Primitives read them with a fallback so
   the engine's computed values always win. Blocks must use --accent-ink for
   accent TEXT and --on-accent for text on an accent fill — never --accent. */

:root {
  /* button skin */
  --btn-radius: var(--radius);
  --btn-pad-block: var(--space-3);
  --btn-pad-inline: var(--space-5);
  --btn-weight: 600;
  --btn-shadow: none;
  --btn-border-width: 1px;
  /* the primary button's fill is a kit decision: heritage and couture
     systems forbid filled buttons outright, so a kit can hollow it out
     without any block knowing. */
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--on-accent, var(--bg));
  --btn-primary-border: transparent;
  --btn-size: var(--step-0);
  /* card skin */
  --card-radius: min(var(--radius), var(--space-6));
  --card-pad: var(--space-6);
  --card-bg: var(--surface);
  --card-border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  --card-shadow: none;
  /* media + fields + tags */
  --ph-radius: min(var(--radius), var(--space-6));
  --field-radius: var(--radius);
  --field-border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  --field-bg: var(--bg);
  --tag-radius: 999px;
  --tag-bg: color-mix(in oklab, var(--ink) 7%, transparent);
  --tag-ink: var(--ink);
  --field-label-color: var(--muted);
  --lead-done-color: var(--accent-ink, var(--accent));
  --scrim-veil: 86%;        /* how much --bg the scrim holds back */
  --measure-sm: 34rem;      /* element-scale max width: forms, capsules */
  --measure-lg: 76rem;
  /* typography accents */
  /* several systems (Medium, Revolut, Mercury, Elementor) ban chromatic text
     outright — the eyebrow must be able to go achromatic. */
  --eyebrow-color: var(--accent-ink, var(--accent));
  --eyebrow-transform: uppercase;
  --eyebrow-tracking: 0.12em;
  --eyebrow-size: var(--step--1);
  --heading-tracking: -0.02em;
  --heading-weight: 700;
  --rule-color: color-mix(in oklab, var(--ink) 12%, transparent);
}

/* ---------- layout helpers ---------- */
.wrap { inline-size: min(100% - var(--space-6) * 2, var(--wrap-max, 1200px)); margin-inline: auto; }
.wrap--narrow { --wrap-max: 860px; }
.wrap--wide { --wrap-max: 1440px; }
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--eyebrow-color, var(--accent-ink, var(--accent)));
  font-weight: 500;
}
.title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.08;
  color: var(--ink);
}
.lede { color: var(--muted); font-size: var(--step-1); max-inline-size: var(--measure); }
.body { color: var(--muted); max-inline-size: var(--measure); }
.rule { border: 0; border-block-start: 1px solid var(--rule-color); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px;
  padding-block: var(--btn-pad-block);
  padding-inline: var(--btn-pad-inline);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: 1;
  text-decoration: none;
  border: var(--btn-border-width) solid transparent;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn--primary {
  background: var(--btn-primary-bg, var(--accent));
  color: var(--btn-primary-ink, var(--on-accent, var(--bg)));
  border-color: var(--btn-primary-border, transparent);
  box-shadow: var(--btn-shadow);
}
.btn--primary:hover { background: color-mix(in oklab, var(--btn-primary-bg, var(--accent)) 86%, var(--ink)); }
.btn--ink { background: var(--ink); color: var(--bg); box-shadow: var(--btn-shadow); }
.btn--ink:hover { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
.btn--ghost {
  border-color: var(--btn-ghost-border, color-mix(in oklab, var(--ink) 28%, transparent));
  background: var(--btn-ghost-bg, transparent);
  color: var(--btn-ghost-ink, var(--ink));
  box-shadow: var(--btn-shadow);
}
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.btn--quiet { color: var(--ink); padding-inline: 0; min-block-size: 44px; }
.btn--quiet::after { content: "→"; transition: transform var(--dur-1) var(--ease); }
.btn--quiet:hover::after { transform: translateX(0.25em); }
[dir="rtl"] .btn--quiet::after { content: "←"; }
.btn:active { transform: translateY(1px); }

/* ---------- cards ---------- */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
}
.card--flat { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; }
.card--tinted { background: color-mix(in oklab, var(--accent) 10%, var(--bg)); border-color: transparent; }
.card--ink { background: var(--ink); border-color: transparent; }
.card--ink .title, .card--ink .card__title { color: var(--bg); }
.card--ink .body, .card--ink .card__text { color: color-mix(in oklab, var(--bg) 72%, var(--ink)); }
.card__title { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: var(--step-1); color: var(--ink); letter-spacing: var(--heading-tracking); line-height: 1.2; }
.card__text { color: var(--muted); margin-block-start: var(--space-2); font-size: var(--step-0); }
.card__meta { color: var(--muted); font-family: var(--font-utility, var(--font-body)); font-size: var(--step--1); letter-spacing: 0.04em; }

/* ---------- media placeholder (imagery paints into this) ---------- */
.ph {
  /* reset.css gives the bare .ph an accent edge so an unstyled page still
     reads as designed; inside the block library the primitive owns it. */
  border: 0;
  position: relative;
  border-radius: var(--ph-radius);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%,
                            color-mix(in oklab, var(--accent) 6%, transparent) 55%,
                            color-mix(in oklab, var(--accent) 16%, transparent) 100%),
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--ink) 7%, transparent) 0 14px, transparent 14px 30px),
    var(--surface);
  background-size: cover;
  background-position: center;
  min-block-size: var(--ph-min, 120px);
  overflow: hidden;
}
.ph--frame {
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  padding: var(--space-2);
  background-clip: content-box;
}
/* browser-chrome frame for product shots: pure CSS, no assets */
.ph--browser::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 26px;
  background: color-mix(in oklab, var(--ink) 88%, var(--bg));
}
.ph--browser::after {
  content: "";
  position: absolute; inset-block-start: 9px; inset-inline-start: 12px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  box-shadow: 14px 0 0 color-mix(in oklab, var(--bg) 40%, transparent),
              28px 0 0 color-mix(in oklab, var(--bg) 28%, transparent);
}
[dir="rtl"] .ph--browser::after { box-shadow: -14px 0 0 color-mix(in oklab, var(--bg) 40%, transparent), -28px 0 0 color-mix(in oklab, var(--bg) 28%, transparent); }

/* a scrim for the rare case text must sit over media */
.scrim { position: relative; }
.scrim > * { position: relative; z-index: 1; }
.scrim::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in oklab, var(--bg) var(--scrim-veil, 86%), transparent);
  border-radius: inherit;
}

/* ---------- icons: drawn, never empty ---------- */
.icon {
  inline-size: var(--icon-size, 40px); block-size: var(--icon-size, 40px);
  border-radius: var(--icon-radius, calc(var(--radius) / 1.6));
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent-ink, var(--accent));
  position: relative;
  flex: none;
}
.icon::before {
  content: ""; inline-size: 42%; block-size: 42%;
  border: 2px solid currentColor; border-radius: 2px;
}
.icon--dot::before { border-radius: 50%; background: currentColor; border: 0; }
.icon--bar::before { block-size: 2px; inline-size: 55%; background: currentColor; border: 0; border-radius: 2px; }
.icon--corner::before { border-inline-end: 0; border-block-end: 0; border-radius: 3px 0 0 0; }
.icon--plus::before { border: 0; background:
  linear-gradient(currentColor, currentColor) center/2px 100% no-repeat,
  linear-gradient(currentColor, currentColor) center/100% 2px no-repeat; }
.icon--glyph::before { content: none; }
.icon--glyph { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }

/* numerals for process/step blocks */
.numeral {
  font-family: var(--font-display);
  font-size: var(--numeral-size, var(--step-5));
  font-weight: var(--heading-weight);
  line-height: 0.9;
  color: var(--numeral-color, color-mix(in oklab, var(--accent-ink, var(--accent)) 55%, transparent));
  letter-spacing: -0.04em;
}
/* Outlined numerals are drawn ONLY by their stroke — the fill is transparent.
   A skin that takes the stroke to 0 must also give the glyph a fill, or the
   numeral silently disappears. --numeral-fill is how a system says "solid". */
.numeral--outline {
  color: var(--numeral-fill, transparent);
  -webkit-text-stroke: var(--numeral-stroke, 1.5px) var(--numeral-stroke-color, var(--accent-ink, var(--accent)));
}

/* ---------- tags / badges ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-block: var(--space-1); padding-inline: var(--space-3);
  border-radius: var(--tag-radius);
  font-size: var(--step--1);
  font-family: var(--font-utility, var(--font-body));
  background: var(--tag-bg, color-mix(in oklab, var(--ink) 7%, transparent));
  color: var(--tag-ink, var(--ink));
  border: 1px solid transparent;
}
.tag--accent { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-ink, var(--accent)); }
.tag--ghost { background: transparent; border-color: color-mix(in oklab, var(--ink) 20%, transparent); color: var(--muted); }

/* ---------- form fields ---------- */
.field { display: block; }
.field__label { display: block; font-size: var(--step--1); color: var(--field-label-color, var(--muted)); margin-block-end: var(--space-1); }
.field__input,
.field__area,
.field__select {
  inline-size: 100%;
  min-block-size: 46px;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--field-radius);
  border: var(--field-border);
  /* a kit may set --field-border: 0 and only an inline-end rule, which is
     how couture and editorial systems draw an input */
  border-block-end: var(--field-border-block-end, var(--field-border));
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--step-0);
}
.field__area { min-block-size: 120px; resize: vertical; }
.field__input::placeholder, .field__area::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.field__input:focus-visible, .field__area:focus-visible, .field__select:focus-visible { border-color: var(--accent); }

/* the lead form's success line — the runtime unhides it */
.lead-done { color: var(--lead-done-color, var(--accent-ink, var(--accent))); font-weight: 600; }


/* ---------- light / dark switcher ---------- */
/* One button, one drawn glyph: a filled disc in light, a crescent in dark
   (carved by an offset box-shadow rather than a second element). It inherits
   the page's own tokens, so every design system gets its own switcher. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--theme-toggle-radius, 999px);
  border: var(--btn-border-width) solid var(--theme-toggle-border, color-mix(in oklab, var(--ink) 18%, transparent));
  background: var(--theme-toggle-bg, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.theme-toggle:hover { border-color: color-mix(in oklab, var(--ink) 42%, transparent); }
.theme-toggle__disc {
  inline-size: 15px; block-size: 15px; border-radius: 50%;
  background: currentColor;
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
/* in the dark theme the disc is carved into a crescent */
:root[data-theme="dark"] .theme-toggle__disc {
  background: transparent;
  box-shadow: inset -4px -1px 0 0 currentColor;
  transform: rotate(-24deg);
}
@media (prefers-reduced-motion: reduce) { .theme-toggle__disc { transition: none; } }


/* nav-floating-pill */
/* nav-floating-pill — a capsule of chrome floating clear of the page edge.
   Airbnb's rule: elevation belongs to floating chrome only, and it is a
   three-layer stack (hairline ring, close contact shadow, wide ambient one),
   never a single blurry drop. On a phone the capsule swells into a cushion
   sheet rather than snapping to a full-bleed bar — the float is the block. */

.blk-nav-floating-pill {
  --blk-nav-inset: var(--space-4);
  --blk-nav-pill-radius: 999px;
  --blk-nav-pill-radius-open: var(--space-6);
  --blk-nav-pill-bg: color-mix(in oklab, var(--bg) 92%, transparent);
  --blk-nav-pill-ring: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  --blk-nav-pill-shadow:
    0 1px 2px color-mix(in oklab, var(--ink) 7%, transparent),
    0 10px 28px color-mix(in oklab, var(--ink) 11%, transparent);
  --blk-nav-gap: var(--space-5);
  --blk-nav-mark-size: var(--step-1);
  --blk-nav-link-size: var(--step-0);
  --blk-nav-link-color: var(--muted);
  --btn-radius: 999px;
  --btn-pad-block: var(--space-2);
  --btn-pad-inline: var(--space-5);

  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  padding-block: var(--blk-nav-inset);
}

.blk-nav-floating-pill__pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-3) var(--space-2);
  border: var(--blk-nav-pill-ring);
  border-radius: var(--blk-nav-pill-radius);
  background: var(--blk-nav-pill-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: var(--blk-nav-pill-shadow);
  transition: border-radius var(--dur-1) var(--ease);
}

.blk-nav-floating-pill__mark {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  margin-inline-end: auto;
  padding-inline: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--blk-nav-mark-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.blk-nav-floating-pill__nav { display: flex; align-items: center; min-inline-size: 0; }

.blk-nav-floating-pill__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding-inline: 0;
}

/* each link is its own small capsule — the hover target is the shape */
.blk-nav-floating-pill__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--blk-nav-gap);
  border-radius: 999px;
  font-size: var(--blk-nav-link-size);
  color: var(--blk-nav-link-color);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.blk-nav-floating-pill__link:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}

.blk-nav-floating-pill__actions { display: flex; align-items: center; gap: var(--space-2); }

.blk-nav-floating-pill__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  color: var(--ink);
}
.blk-nav-floating-pill__burger,
.blk-nav-floating-pill__burger::before,
.blk-nav-floating-pill__burger::after {
  display: block;
  inline-size: calc(var(--space-5) - var(--space-1));
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.blk-nav-floating-pill__burger { position: relative; }
.blk-nav-floating-pill__burger::before,
.blk-nav-floating-pill__burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.blk-nav-floating-pill__burger::before { inset-block-start: calc(var(--space-2) * -1); }
.blk-nav-floating-pill__burger::after { inset-block-start: var(--space-2); }

.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger { background: transparent; }
.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger::before { transform: translateY(var(--space-2)) rotate(45deg); }
.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger::after { transform: translateY(calc(var(--space-2) * -1)) rotate(-45deg); }

@media (max-width: 768px) {
  .blk-nav-floating-pill { --blk-nav-inset: var(--space-3); }
  .blk-nav-floating-pill__toggle { display: inline-flex; }
  .blk-nav-floating-pill__pill { padding-inline: var(--space-3) var(--space-2); }

  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__pill {
    border-radius: var(--blk-nav-pill-radius-open);
    background: var(--bg);
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
  }

  .blk-nav-floating-pill__nav,
  .blk-nav-floating-pill__actions {
    display: none;
    flex-basis: 100%;
  }
  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__nav { display: block; animation: blk-nav-floating-pill-sheet var(--dur-1) var(--ease) both; }
  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__actions { display: flex; animation: blk-nav-floating-pill-sheet var(--dur-1) var(--ease) both; }

  .blk-nav-floating-pill__links { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .blk-nav-floating-pill__link {
    display: flex;
    min-block-size: 52px;
    padding-inline: var(--space-4);
    border-radius: calc(var(--blk-nav-pill-radius-open) / 1.6);
    background: color-mix(in oklab, var(--ink) 4%, transparent);
    color: var(--ink);
    font-size: var(--step-1);
  }
  .blk-nav-floating-pill__actions { padding-block-start: var(--space-3); }
  .blk-nav-floating-pill__actions .btn { flex: 1 1 auto; }
}

@keyframes blk-nav-floating-pill-sheet {
  from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
  to { opacity: 1; transform: none; }
}


/* hero-gradient-ribbon */
/* hero-gradient-ribbon — one luminous diagonal band, mixed entirely from
   --accent and --accent2, skewed across an otherwise serene canvas. The
   headline answers it with restraint: light weight, open measure. The band
   and the glow both mirror under RTL through their own angle tokens, so the
   light always falls from the same side of the reading direction. */

.blk-hero-gradient-ribbon {
  --blk-hero-ribbon-angle: 112deg;
  --blk-hero-ribbon-skew: -7deg;
  --blk-hero-ribbon-strength: 52%;
  --blk-hero-ribbon-start: 26%;
  --blk-hero-glow-x: 88%;
  --blk-hero-cols: 1.05fr 0.95fr;
  --blk-hero-title-size: clamp(2.2rem, 5.6vw, var(--step-6));
  --blk-hero-title-weight: 400;
  --blk-hero-leading: 1.07;
  --blk-hero-measure: 42ch;
  --blk-hero-media-radius: min(var(--radius), var(--space-5));
  --blk-hero-pad-block: calc(var(--section-pad) * 1.3);
  position: relative;
  isolation: isolate;
  background: var(--blk-hero-bg, var(--bg));
  padding-block: var(--blk-hero-pad-block);
  overflow: clip;
}

.blk-hero-gradient-ribbon::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--space-9) * -1);
  inset-inline-start: var(--blk-hero-ribbon-start, 26%);
  inset-inline-end: calc(var(--space-9) * -1);
  z-index: -1;
  transform: skewY(var(--blk-hero-ribbon-skew));
  /* currentColor carries alpha only — the band dissolves before the section
     edge instead of ending on a hard horizontal cut */
  mask-image: linear-gradient(to bottom, currentColor 52%, transparent 94%);
  background: linear-gradient(
    var(--blk-hero-ribbon-angle),
    transparent 16%,
    color-mix(in oklab, var(--accent) var(--blk-hero-ribbon-strength), transparent) 38%,
    color-mix(in oklab, var(--accent2, var(--accent)) var(--blk-hero-ribbon-strength), transparent) 56%,
    color-mix(in oklab, var(--accent) 18%, transparent) 68%,
    transparent 80%
  );
}

.blk-hero-gradient-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60% 70% at var(--blk-hero-glow-x) 6%,
    color-mix(in oklab, var(--accent2, var(--accent)) 30%, transparent),
    transparent 68%
  );
}

[dir="rtl"] .blk-hero-gradient-ribbon {
  --blk-hero-ribbon-angle: 248deg;
  --blk-hero-ribbon-skew: 7deg;
  --blk-hero-glow-x: 12%;
}

.blk-hero-gradient-ribbon__grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--blk-hero-cols);
  gap: var(--space-8);
  align-items: center;
}

.blk-hero-gradient-ribbon__text {
  /* the headline is sized against ITS OWN column, not the viewport:
     a 74px title in a 520px column wraps two words to a line. */
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-5);
  min-inline-size: 0;
}

.blk-hero-gradient-ribbon__eyebrow { margin-block-end: calc(var(--space-2) * -1); }

.blk-hero-gradient-ribbon__title {
  font-size: min(var(--blk-hero-title-size), var(--blk-hero-title-cap, 11cqi));
  font-weight: var(--blk-hero-title-weight);
  line-height: var(--blk-hero-leading);
  letter-spacing: -0.02em;
  max-inline-size: 15ch;
}

.blk-hero-gradient-ribbon__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  max-inline-size: var(--blk-hero-measure);
  color: var(--ink);
}

.blk-hero-gradient-ribbon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.blk-hero-gradient-ribbon__note {
  color: var(--ink);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.blk-hero-gradient-ribbon__media { min-inline-size: 0; }

.blk-hero-gradient-ribbon__media .ph {
  inline-size: 100%;
  border-radius: var(--blk-hero-media-radius);
  box-shadow: var(--shadow-2);
  background-color: var(--bg);
}

@media (max-width: 900px) {
  .blk-hero-gradient-ribbon::before { inset-inline-start: 0; inset-block-start: 42%; }
  .blk-hero-gradient-ribbon::after { background: none; }
  .blk-hero-gradient-ribbon__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .blk-hero-gradient-ribbon { --blk-hero-title-size: clamp(2rem, 8.4vw, 3.2rem); }
  .blk-hero-gradient-ribbon__title { max-inline-size: 100%; }
  .blk-hero-gradient-ribbon__sub { max-inline-size: 52ch; }
}

@media (max-width: 480px) {
  .blk-hero-gradient-ribbon { --blk-hero-pad-block: var(--section-pad); --blk-hero-ribbon-strength: 40%; }
  .blk-hero-gradient-ribbon__actions { inline-size: 100%; }
}


/* util-trust-strip */
/* util-trust-strip — the reassurance row that sits under a hero or above a
   footer. Every mark is drawn in CSS from the .icon primitive: there is no
   image, no font icon and never an empty box. Items are separated by vertical
   hairlines on one line, and by horizontal ones once they stack. */

.blk-util-trust-strip {
  --blk-uts-col-min: 160px;
  --blk-uts-quiet: color-mix(in oklab, var(--muted) 84%, var(--ink));
  --icon-size: 34px;
  --icon-radius: 999px;
  background: var(--blk-uts-bg, var(--bg));
  padding-block: var(--blk-uts-pad-block, calc(var(--section-pad) * 0.5));
  border-block: 1px solid var(--blk-uts-rule, var(--rule-color));
  overflow: clip;
}

.blk-util-trust-strip__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-uts-col-min), 1fr));
}

/* start-aligned on purpose: a two-line title must not push its mark and its
   neighbours off the shared top line */
.blk-util-trust-strip__item {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  min-inline-size: 0;
}

.blk-util-trust-strip__item:first-child { padding-inline-start: 0; }
.blk-util-trust-strip__item:last-child { padding-inline-end: 0; }
.blk-util-trust-strip__item + .blk-util-trust-strip__item {
  border-inline-start: 1px solid var(--rule-color);
}

.blk-util-trust-strip__body { min-inline-size: 0; }

.blk-util-trust-strip__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: var(--heading-tracking);
  line-height: 1.25;
  color: var(--ink);
}

.blk-util-trust-strip__text {
  margin-block-start: calc(var(--space-1) / 2);
  color: var(--blk-uts-quiet);
  font-size: var(--step--1);
  line-height: 1.35;
}

/* ---- drawn marks -------------------------------------------------------- */
/* the default .icon glyph (a bordered square) stays as the fallback */

.blk-util-trust-strip__mark[data-mark="check"]::before {
  content: "✓";
  inline-size: auto;
  block-size: auto;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
}

.blk-util-trust-strip__mark[data-mark="shield"]::before {
  content: "";
  inline-size: 42%;
  block-size: 48%;
  border: 2px solid currentColor;
  /* physical radius on purpose: a crest must not mirror under dir="rtl" */
  border-radius: 24% 24% 46% 46% / 16% 16% 62% 62%;
}

.blk-util-trust-strip__mark[data-mark="clock"]::before {
  content: "";
  inline-size: 46%;
  block-size: 46%;
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) 50% 24% / 2px 28% no-repeat,
    linear-gradient(currentColor, currentColor) 68% 50% / 22% 2px no-repeat;
}

.blk-util-trust-strip__mark[data-mark="box"]::before {
  content: "";
  inline-size: 50%;
  block-size: 42%;
  border: 2px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) 50% 34% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
}

.blk-util-trust-strip__mark[data-mark="chat"]::before {
  content: "";
  inline-size: 50%;
  block-size: 42%;
  border: 2px solid currentColor;
  border-radius: 30% 30% 30% 0;
}

.blk-util-trust-strip__mark[data-mark="circle"]::before {
  content: "";
  inline-size: 44%;
  block-size: 44%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .blk-util-trust-strip__items { grid-template-columns: minmax(0, 1fr); }
  .blk-util-trust-strip__item { padding-inline: 0; padding-block: var(--space-4); }
  .blk-util-trust-strip__item + .blk-util-trust-strip__item {
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule-color);
  }
}


/* feat-bento */
/* feat-bento — one hero tile and its satellites on a six-column field.
   The asymmetry is authored, not random: tile 1 always takes four columns
   and two rows; the tail re-balances itself for 3, 4 or 5 items, and the
   whole thing degrades to a single column on phones. */

.blk-feat-bento {
  --blk-feat-bento-gap: var(--space-4);
  --blk-feat-bento-row: 168px;
  --blk-feat-bento-head-gap: var(--space-7);
  --blk-feat-bento-title-size: clamp(1.7rem, 3.6vw, var(--step-4));
  --blk-feat-bento-lead-tint: 12%;
  --card-bg: var(--blk-feat-bento-card-bg, var(--bg));
  --card-shadow: var(--blk-feat-bento-card-shadow, none);
  background: var(--blk-feat-bento-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-feat-bento__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  margin-block-end: var(--blk-feat-bento-head-gap);
}

.blk-feat-bento__title { font-size: var(--blk-feat-bento-title-size); margin: 0; }
.blk-feat-bento__sub { font-size: var(--step-0); line-height: 1.55; }

.blk-feat-bento__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--blk-feat-bento-row), auto);
  gap: var(--blk-feat-bento-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blk-feat-bento__tile {
  position: relative;
  display: flex;
  align-items: end;
  grid-column: span 2;
  min-inline-size: 0;
  overflow: hidden;
}

/* the hero tile */
.blk-feat-bento__tile:first-child {
  grid-column: span 4;
  grid-row: span 2;
  background: color-mix(in oklab, var(--accent) var(--blk-feat-bento-lead-tint), var(--bg));
  border-color: transparent;
}

/* a soft aura anchored to the top edge — symmetric, so RTL needs nothing */
.blk-feat-bento__tile:first-child::before {
  content: "";
  position: absolute;
  inset-block-start: -35%;
  inset-inline: -10%;
  block-size: 90%;
  background: radial-gradient(60% 100% at 50% 0%,
    color-mix(in oklab, var(--accent) 32%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.blk-feat-bento__tile:first-child .blk-feat-bento__tileTitle { font-size: var(--step-3); }
.blk-feat-bento__tile:first-child .blk-feat-bento__tileText {
  font-size: var(--step-0);
  max-inline-size: 46ch;
  color: color-mix(in oklab, var(--muted) 72%, var(--ink));
}
.blk-feat-bento__tile:first-child .blk-feat-bento__meta { color: color-mix(in oklab, var(--ink) 74%, var(--bg)); }

/* a fourth tile that ends the run stretches to close the row */
.blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(4):last-child) > .blk-feat-bento__tile:nth-child(4) {
  grid-column: span 6;
}
.blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(4),
.blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(5) {
  grid-column: span 3;
}

.blk-feat-bento__tileBody {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
}

.blk-feat-bento__meta { margin: 0; text-transform: var(--eyebrow-transform); letter-spacing: 0.08em; }
.blk-feat-bento__tileTitle { font-size: var(--step-1); }
.blk-feat-bento__tileText { margin-block-start: 0; line-height: 1.55; }

@media (max-width: 768px) {
  .blk-feat-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-feat-bento__tile { grid-column: span 1; }
  .blk-feat-bento__tile:first-child { grid-column: span 2; grid-row: auto; }
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(4):last-child) > .blk-feat-bento__tile:nth-child(4) { grid-column: span 2; }
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(4),
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(5) { grid-column: span 1; }
  .blk-feat-bento { --blk-feat-bento-head-gap: var(--space-6); --blk-feat-bento-row: 150px; }
}

@media (max-width: 480px) {
  .blk-feat-bento__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .blk-feat-bento__tile,
  .blk-feat-bento__tile:first-child,
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(4):last-child) > .blk-feat-bento__tile:nth-child(4),
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(4),
  .blk-feat-bento__grid:has(> .blk-feat-bento__tile:nth-child(5)) > .blk-feat-bento__tile:nth-child(5) { grid-column: span 1; }
  .blk-feat-bento__tile:first-child .blk-feat-bento__tileTitle { font-size: var(--step-2); }
}


/* feat-compare-two */
/* feat-compare-two — the before/after pair. Panel one is deliberately flat
   and grey; panel two carries the tint, the accent edge and the lift, so the
   eye lands on it without a word of instruction. Marks are glyphs set by the
   stylesheet, so the copy never has to carry an × or a ✓. */

.blk-feat-compare-two {
  --blk-feat-compare-two-gap: var(--space-5);
  --blk-feat-compare-two-head-gap: var(--space-7);
  --blk-feat-compare-two-title-size: clamp(1.7rem, 3.6vw, var(--step-4));
  --blk-feat-compare-two-mark-size: 30px;
  --blk-feat-compare-two-tint: 12%;
  --card-pad: var(--blk-feat-compare-two-card-pad, var(--space-6));
  --card-bg: var(--blk-feat-compare-two-card-bg, var(--bg));
  background: var(--blk-feat-compare-two-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-feat-compare-two__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  margin-block-end: var(--blk-feat-compare-two-head-gap);
}

.blk-feat-compare-two__title { font-size: var(--blk-feat-compare-two-title-size); margin: 0; }
.blk-feat-compare-two__sub { font-size: var(--step-0); line-height: 1.55; }

.blk-feat-compare-two__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--blk-feat-compare-two-gap);
  align-items: stretch;
}

.blk-feat-compare-two__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.blk-feat-compare-two__panelHead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.blk-feat-compare-two__mark {
  inline-size: var(--blk-feat-compare-two-mark-size);
  block-size: var(--blk-feat-compare-two-mark-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: var(--step-0);
  line-height: 1;
}

/* panel one — the status quo */
.blk-feat-compare-two__panel:first-child {
  background: color-mix(in oklab, var(--ink) 4%, var(--bg));
  border-color: transparent;
}
.blk-feat-compare-two__panel:first-child .blk-feat-compare-two__mark {
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  color: var(--muted);
}
.blk-feat-compare-two__panel:first-child .blk-feat-compare-two__mark::before { content: "\00d7"; }
.blk-feat-compare-two__panel:first-child .blk-feat-compare-two__panelTitle { color: var(--muted); }

/* panel two — the offer */
.blk-feat-compare-two__panel:nth-child(2) {
  background: color-mix(in oklab, var(--accent) var(--blk-feat-compare-two-tint), var(--bg));
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: var(--blk-feat-compare-two-lead-shadow, none);
}
.blk-feat-compare-two__panel:nth-child(2) .blk-feat-compare-two__mark {
  background: var(--accent);
  color: var(--on-accent, var(--bg));
}
.blk-feat-compare-two__panel:nth-child(2) .blk-feat-compare-two__mark::before { content: "\2713"; }
.blk-feat-compare-two__panel:nth-child(2) .blk-feat-compare-two__panelText {
  color: color-mix(in oklab, var(--muted) 70%, var(--ink));
}
.blk-feat-compare-two__panel:nth-child(2) .blk-feat-compare-two__tag {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent-ink, var(--accent));
}

.blk-feat-compare-two__panelTitle { font-size: var(--step-2); line-height: 1.2; }
.blk-feat-compare-two__panelText { margin-block-start: 0; line-height: 1.6; font-size: var(--step-0); }

@media (max-width: 768px) {
  .blk-feat-compare-two { --blk-feat-compare-two-head-gap: var(--space-6); }
}


/* proc-numbered-rail */
/* proc-numbered-rail — the vertical rail. The connecting line is the step's
   own inline-start border, so under rtl the whole rail moves to the right
   edge with the badges still sitting on it: nothing to override, nothing to
   remember. The last step drops the line so the sequence ends cleanly. */

.blk-proc-numbered-rail {
  --blk-proc-numbered-rail-cols: minmax(0, 0.8fr) minmax(0, 1.2fr);
  --blk-proc-numbered-rail-gap: var(--space-8);
  --blk-proc-numbered-rail-badge: 52px;
  --blk-proc-numbered-rail-step-gap: var(--space-7);
  --blk-proc-numbered-rail-line: 2px;
  --blk-proc-numbered-rail-title-size: clamp(1.7rem, 3.6vw, var(--step-4));
  --numeral-size: var(--step-1);
  --numeral-color: var(--accent-ink, var(--accent));
  background: var(--blk-proc-numbered-rail-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-proc-numbered-rail__grid {
  display: grid;
  grid-template-columns: var(--blk-proc-numbered-rail-cols);
  gap: var(--blk-proc-numbered-rail-gap);
  align-items: start;
}

.blk-proc-numbered-rail__head {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-3);
  position: sticky;
  inset-block-start: var(--space-7);
}

.blk-proc-numbered-rail__title { font-size: var(--blk-proc-numbered-rail-title-size); margin: 0; }
.blk-proc-numbered-rail__sub { font-size: var(--step-0); line-height: 1.6; }
.blk-proc-numbered-rail__actions { margin-block-start: var(--space-3); }

.blk-proc-numbered-rail__rail {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-inline-start: calc(var(--blk-proc-numbered-rail-badge) / 2);
}

.blk-proc-numbered-rail__step {
  position: relative;
  padding-inline-start: calc(var(--blk-proc-numbered-rail-badge) / 2 + var(--space-5));
  padding-block-end: var(--blk-proc-numbered-rail-step-gap);
  border-inline-start: var(--blk-proc-numbered-rail-line) solid
    var(--blk-proc-numbered-rail-line-color, color-mix(in oklab, var(--ink) 14%, transparent));
}

.blk-proc-numbered-rail__step:last-child { border-color: transparent; padding-block-end: 0; }

.blk-proc-numbered-rail__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin-inline-start: calc(var(--blk-proc-numbered-rail-badge) / -2 - var(--blk-proc-numbered-rail-line) / 2);
  inline-size: var(--blk-proc-numbered-rail-badge);
  block-size: var(--blk-proc-numbered-rail-badge);
  border-radius: var(--blk-proc-numbered-rail-badge-radius, 50%);
  display: grid;
  place-items: center;
  background: var(--blk-proc-numbered-rail-badge-bg, var(--bg));
  border: var(--blk-proc-numbered-rail-line) solid
    var(--blk-proc-numbered-rail-badge-border, color-mix(in oklab, var(--accent) 45%, transparent));
}

.blk-proc-numbered-rail__numeral { line-height: 1; }

.blk-proc-numbered-rail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3) 0;
  min-inline-size: 0;
}

.blk-proc-numbered-rail__stepTitle {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.blk-proc-numbered-rail__stepText {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.65;
  margin: 0;
  max-inline-size: 54ch;
}

.blk-proc-numbered-rail__meta {
  margin: 0;
  text-transform: var(--eyebrow-transform);
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .blk-proc-numbered-rail {
    --blk-proc-numbered-rail-cols: minmax(0, 1fr);
    --blk-proc-numbered-rail-gap: var(--space-6);
    --blk-proc-numbered-rail-badge: 44px;
    --blk-proc-numbered-rail-step-gap: var(--space-6);
  }
  .blk-proc-numbered-rail__head { position: static; }
  .blk-proc-numbered-rail__stepTitle { font-size: var(--step-1); }
}


/* soc-stats-row */
/* soc-stats-row — numbers at display scale over a small utility label, ruled
   top and bottom so the band holds together however many columns wrap. The
   figures count up once, when the band is first seen. */

.blk-soc-stats-row {
  --blk-soc-stats-row-min: 170px;
  --blk-soc-stats-row-gap: var(--space-6);
  --blk-soc-stats-row-value-size: clamp(2.2rem, 6vw, var(--step-6));
  --blk-soc-stats-row-title-size: clamp(1.6rem, 3.2vw, var(--step-3));
  background: var(--blk-soc-stats-row-bg, var(--bg));
  padding-block: var(--blk-soc-stats-row-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-soc-stats-row__head:not(:has(*)) { display: none; }
.blk-soc-stats-row__head { display: grid; gap: var(--space-3); max-inline-size: 56ch; margin-block-end: var(--space-6); }
.blk-soc-stats-row__title { font-size: var(--blk-soc-stats-row-title-size); margin: 0; }
.blk-soc-stats-row__lede { font-size: var(--step-0); margin: 0; }

.blk-soc-stats-row__row {
  list-style: none;
  margin: 0;
  padding-block: var(--space-6);
  padding-inline: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--blk-soc-stats-row-min)), 1fr));
  gap: var(--blk-soc-stats-row-gap);
  border-block-start: 1px solid var(--rule-color);
  border-block-end: 1px solid var(--rule-color);
}

.blk-soc-stats-row__stat { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; }
.blk-soc-stats-row__value {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--blk-soc-stats-row-value-size);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blk-soc-stats-row-value-color, var(--ink));
}
.blk-soc-stats-row__label {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: var(--blk-soc-stats-row-label-transform, uppercase);
  color: var(--ink);
}
.blk-soc-stats-row__note { color: var(--muted); font-size: var(--step--1); line-height: 1.45; max-inline-size: 32ch; }

.blk-soc-stats-row__footnote {
  margin-block-start: var(--space-4);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  color: var(--muted);
}

@media (max-width: 768px) {
  .blk-soc-stats-row { --blk-soc-stats-row-min: 140px; --blk-soc-stats-row-gap: var(--space-5); }
}
@media (max-width: 480px) {
  .blk-soc-stats-row { --blk-soc-stats-row-min: 100%; }
  .blk-soc-stats-row__stat { grid-template-columns: minmax(0, 1fr); }
}


/* soc-testimonial-3 */
/* soc-testimonial-3 — quote cards that stay quotes: the mark is drawn, the
   attribution is ruled off, and the card surface is a tint of the page rather
   than the raw --surface token (which some palettes set to near-ink). */

.blk-soc-testimonial-3 {
  --blk-soc-testimonial-3-min: 320px;
  --blk-soc-testimonial-3-gap: var(--space-5);
  --blk-soc-testimonial-3-quote-size: var(--step-1);
  --blk-soc-testimonial-3-title-size: clamp(1.7rem, 3.4vw, var(--step-4));
  --card-bg: var(--blk-soc-testimonial-3-card-bg, color-mix(in oklab, var(--ink) 4%, var(--bg)));
  --card-radius: var(--blk-soc-testimonial-3-card-radius, min(var(--radius), var(--space-6)));
  --card-pad: var(--blk-soc-testimonial-3-card-pad, var(--space-6));
  background: var(--blk-soc-testimonial-3-bg, var(--bg));
  padding-block: var(--blk-soc-testimonial-3-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-soc-testimonial-3__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-6);
  align-items: end;
  margin-block-end: var(--space-7);
}
.blk-soc-testimonial-3__headline { display: grid; gap: var(--space-3); min-inline-size: 0; }
.blk-soc-testimonial-3__title { font-size: var(--blk-soc-testimonial-3-title-size); margin: 0; }
.blk-soc-testimonial-3__lede { font-size: var(--step-0); margin: 0; max-inline-size: 46ch; }

.blk-soc-testimonial-3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--blk-soc-testimonial-3-min)), 1fr));
  gap: var(--blk-soc-testimonial-3-gap);
  align-items: stretch;
}

.blk-soc-testimonial-3__card {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-5);
  min-inline-size: 0;
}
.blk-soc-testimonial-3__card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 0.7;
  color: color-mix(in oklab, var(--accent-ink, var(--accent)) 60%, transparent);
  display: block;
  block-size: 0.5em;
}
.blk-soc-testimonial-3__quote {
  font-size: var(--blk-soc-testimonial-3-quote-size);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.blk-soc-testimonial-3__by {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
}
.blk-soc-testimonial-3__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--step-0);
  letter-spacing: var(--heading-tracking);
  color: var(--ink);
}
.blk-soc-testimonial-3__role {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 768px) {
  .blk-soc-testimonial-3__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .blk-soc-testimonial-3 { --blk-soc-testimonial-3-min: 240px; }
}
@media (max-width: 480px) {
  .blk-soc-testimonial-3 { --blk-soc-testimonial-3-min: 100%; --blk-soc-testimonial-3-quote-size: var(--step-0); }
}


/* faq-accordion */
/* faq-accordion — the standard one. Hairline rows, the question set in the
   display face, a drawn plus that becomes a minus. Behaviour comes from the
   runtime's [data-accordion] hook; the block ships no javascript. */

.blk-faq-accordion {
  --blk-faq-pad-block: var(--section-pad);
  --blk-faq-title-size: clamp(var(--step-3), 4.6vw, var(--step-5));
  --blk-faq-q-size: var(--step-1);
  --blk-faq-row-pad: var(--space-5);
  --blk-faq-rule: var(--rule-color);
  background: var(--blk-faq-bg, var(--bg));
  padding-block: var(--blk-faq-pad-block);
  overflow: clip;
}

.blk-faq-accordion__inner {
  display: grid;
  gap: var(--space-7);
}

.blk-faq-accordion__intro {
  display: grid;
  justify-items: var(--blk-faq-align, start);
  text-align: var(--blk-faq-text-align, start);
  gap: var(--space-3);
}

.blk-faq-accordion__title {
  font-size: var(--blk-faq-title-size);
  margin: 0;
}

.blk-faq-accordion__lede { font-size: var(--step-1); line-height: 1.5; }

.blk-faq-accordion__list { border-block-end: 1px solid var(--blk-faq-rule); }

.blk-faq-accordion__item { border-block-start: 1px solid var(--blk-faq-rule); }

.blk-faq-accordion__q { margin: 0; }

.blk-faq-accordion__button {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--blk-faq-row-pad);
  text-align: start;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--blk-faq-q-size);
  line-height: 1.3;
  transition: color var(--dur-1) var(--ease);
}

.blk-faq-accordion__button:hover { color: var(--accent-ink, var(--accent)); }

.blk-faq-accordion__qText { min-inline-size: 0; }

.blk-faq-accordion__mark {
  position: relative;
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}

.blk-faq-accordion__mark::before,
.blk-faq-accordion__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  margin-block-start: -1px;
  background: currentColor;
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}

.blk-faq-accordion__mark::after { transform: rotate(90deg); }

.blk-faq-accordion__item.is-open .blk-faq-accordion__mark::after {
  transform: rotate(0deg);
  opacity: 0;
}

.blk-faq-accordion__panel {
  display: none;
  padding-block-end: var(--blk-faq-row-pad);
  padding-inline-end: var(--space-7);
}

.blk-faq-accordion__item.is-open .blk-faq-accordion__panel { display: block; }

.blk-faq-accordion__a {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.6;
  max-inline-size: var(--measure);
}

@media (max-width: 480px) {
  .blk-faq-accordion { --blk-faq-q-size: var(--step-0); --blk-faq-row-pad: var(--space-4); }
  .blk-faq-accordion__panel { padding-inline-end: var(--space-5); }
}


/* contact-inline-simple */
/* contact-inline-simple — one line to fill in. Name, phone, send: the lowest
   possible cost of getting in touch, for pages that already made the case.
   The row is a flex line that folds to full-width fields at 390px. */

.blk-contact-inline-simple {
  --blk-contact-inline-pad-block: var(--section-pad);
  --blk-contact-inline-max: 640px;
  --blk-contact-inline-gap: var(--space-3);
  --blk-contact-inline-title-size: clamp(var(--step-3), 5vw, var(--step-5));
  --blk-contact-inline-align: center;
  background: var(--blk-contact-inline-bg, var(--bg));
  padding-block: var(--blk-contact-inline-pad-block);
  overflow: clip;
}

.blk-contact-inline-simple__inner {
  display: flex;
  flex-direction: column;
  align-items: var(--blk-contact-inline-align);
  text-align: var(--blk-contact-inline-text-align, center);
  gap: var(--space-3);
}

.blk-contact-inline-simple__title {
  font-size: var(--blk-contact-inline-title-size);
  margin: 0;
  max-inline-size: 20ch;
}

.blk-contact-inline-simple__lede { font-size: var(--step-1); line-height: 1.5; }

.blk-contact-inline-simple__form {
  inline-size: min(100%, var(--blk-contact-inline-max));
  display: flex;
  flex-wrap: wrap;
  gap: var(--blk-contact-inline-gap);
  align-items: center;
  margin-block-start: var(--space-3);
  text-align: start;
}

.blk-contact-inline-simple__field {
  flex: 1 1 200px;
  min-inline-size: 0;
}

.blk-contact-inline-simple__submit { flex: 0 0 auto; }

.blk-contact-inline-simple .lead-done {
  flex: 1 0 100%;
  text-align: var(--blk-contact-inline-text-align, center);
}

.blk-contact-inline-simple__note {
  color: var(--muted);
  font-size: var(--step--1);
  margin-block-start: var(--space-1);
}

@media (max-width: 480px) {
  .blk-contact-inline-simple__field { flex: 1 1 100%; }
  .blk-contact-inline-simple__submit { flex: 1 1 100%; }
}


/* footer-dark-band */
/* footer-dark-band — the page ends on an inverted field.
   Every colour in here is derived from --bg over the ink surface, never from
   --ink or --muted, so the block inverts correctly in dark themes too (where
   "ink" is the light tone and this band becomes the bright one). The tone
   ladder is three steps: the mark, the links, the fine print. */

.blk-footer-dark-band {
  --blk-footer-band: var(--ink);
  --blk-footer-pad-block: var(--section-pad);
  --blk-footer-rule: 1px solid color-mix(in oklab, var(--bg) 22%, transparent);
  --blk-footer-cols: minmax(0, 1fr) minmax(0, 1.4fr);
  --blk-footer-gap: var(--space-8);
  --blk-footer-mark-size: var(--step-2);
  --blk-footer-col-min: 150px;
  --blk-footer-strong: var(--bg);
  --blk-footer-quiet: color-mix(in oklab, var(--bg) 74%, var(--ink));
  --blk-footer-faint: color-mix(in oklab, var(--bg) 66%, var(--ink));

  background: var(--blk-footer-band);
  color: var(--blk-footer-strong);
  padding-block: var(--blk-footer-pad-block) var(--space-6);
}

.blk-footer-dark-band__grid {
  display: grid;
  grid-template-columns: var(--blk-footer-cols);
  gap: var(--blk-footer-gap);
}

.blk-footer-dark-band__brand { min-inline-size: 0; }

.blk-footer-dark-band__mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--blk-footer-mark-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.1;
  color: var(--blk-footer-strong);
  text-decoration: none;
}

.blk-footer-dark-band__blurb {
  margin-block-start: var(--space-4);
  color: var(--blk-footer-quiet);
  font-size: var(--step-0);
  max-inline-size: 36ch;
}

.blk-footer-dark-band__act { margin-block-start: var(--space-5); }

/* the ghost button has to be re-lit for the inverted field */
.blk-footer-dark-band__act .btn--ghost {
  color: var(--blk-footer-strong);
  border-color: color-mix(in oklab, var(--bg) 40%, transparent);
}
.blk-footer-dark-band__act .btn--ghost:hover {
  border-color: var(--blk-footer-strong);
  background: color-mix(in oklab, var(--bg) 12%, transparent);
}

.blk-footer-dark-band__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-footer-col-min), 1fr));
  gap: var(--space-6) var(--space-5);
  min-inline-size: 0;
}

.blk-footer-dark-band__colTitle {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: var(--blk-footer-head-transform, uppercase);
  color: var(--blk-footer-strong);
  margin-block-end: var(--space-3);
}

.blk-footer-dark-band__list { list-style: none; padding-inline: 0; }

.blk-footer-dark-band__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  color: var(--blk-footer-quiet);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.blk-footer-dark-band__link:hover { color: var(--blk-footer-strong); text-decoration: underline; text-underline-offset: 0.25em; }

.blk-footer-dark-band__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: var(--blk-footer-rule);
}

.blk-footer-dark-band__copy {
  color: var(--blk-footer-faint);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
}

.blk-footer-dark-band__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding-inline: 0;
}

.blk-footer-dark-band__legalLink {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--blk-footer-faint);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  text-decoration: none;
}
.blk-footer-dark-band__legalLink:hover { color: var(--blk-footer-strong); }

@media (max-width: 768px) {
  .blk-footer-dark-band { --blk-footer-gap: var(--space-7); }
  .blk-footer-dark-band__grid { grid-template-columns: 1fr; }
  .blk-footer-dark-band__link { min-block-size: 44px; }
}

@media (max-width: 480px) {
  .blk-footer-dark-band { --blk-footer-col-min: 130px; }
  .blk-footer-dark-band__fine { justify-content: flex-start; }
}


@media (prefers-reduced-motion: reduce){
  [data-motion]{opacity:1 !important;transform:none !important;clip-path:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}