:root{
--bg:#ffffff;--surface:#fff1f0;--surface-2:#fff1f0;--ink:#1a1418;--muted:#6b5f63;--accent:#DC2626;--accent2:#ffda00;--accent-ink:#dc2626;--on-accent:#ffffff;--shadow-1:0 12px 32px color-mix(in oklab, #1a1418 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #1a1418 18%, transparent);
--radius:999px;
--font-display:'Space Grotesk',sans-serif;--font-body:'Public Sans',sans-serif;--font-utility:'Space Mono',monospace;
--step--1:0.7072rem;--step-0:1.0000rem;--step-1:1.4140rem;--step-2:1.9994rem;--step-3:2.8271rem;--step-4:3.9976rem;--step-5:5.6526rem;--step-6:7.0657rem;
--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:#ffffff;--surface:#fff1f0;--surface-2:#fff1f0;--ink:#1a1418;--muted:#6b5f63;--accent:#DC2626;--accent2:#ffda00;--accent-ink:#dc2626;--on-accent:#ffffff;--shadow-1:0 12px 32px color-mix(in oklab, #1a1418 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #1a1418 18%, transparent);}
:root[data-theme="dark"]{--bg:#151014;--surface:#252023;--surface-2:#252023;--ink:#efeeef;--muted:#a09ea0;--accent:#DC2626;--accent2:#ffda00;--accent-ink:#e14747;--on-accent:#efeeef;--shadow-1:0 12px 32px color-mix(in oklab, #efeeef 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #efeeef 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; } }


:root{--btn-radius:40px;--btn-pad-block:var(--space-4);--btn-pad-inline:var(--space-6);--btn-weight:700;--btn-size:var(--step-0);--btn-shadow:none;--card-radius:24px;--card-pad:var(--space-4);--card-bg:color-mix(in oklab, var(--accent) 6%, var(--bg));--card-border:1px solid transparent;--card-shadow:none;--ph-radius:24px;--field-radius:999px;--field-border:1px solid transparent;--field-bg:color-mix(in oklab, var(--accent) 8%, var(--bg));--tag-radius:999px;--heading-weight:700;--heading-tracking:-0.03em;--eyebrow-transform:uppercase;--eyebrow-tracking:0.06em;--eyebrow-size:var(--step--1);--rule-color:color-mix(in oklab, var(--ink) 10%, transparent);--section-pad:clamp(48px, 4.6vw, 72px);}

/* 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%; }
}


/* soc-logo-marquee */
/* soc-logo-marquee — client wordmarks drifting across the page, each set in
   the display face with a small accent diamond as its mark. Before any JS
   runs the strip is a tidy clipped row with symmetric faded edges; the
   runtime only sets it moving. Distinct from soc-marquee-quotes (cards of
   sentences) and soc-logo-wall (a static lattice): this is pure typography
   in motion. */

.blk-soc-logo-marquee {
  --blk-soc-logo-marquee-gap: clamp(var(--space-7), 6vw, var(--space-9));
  --blk-soc-logo-marquee-name-size: clamp(1.2rem, 2.4vw, var(--step-2));
  background: var(--blk-soc-logo-marquee-bg, var(--bg));
  padding-block: var(--blk-soc-logo-marquee-pad-block, calc(var(--section-pad) / 1.6));
  overflow: clip;
}

.blk-soc-logo-marquee__label {
  margin: 0;
  margin-block-end: var(--space-5);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.blk-soc-logo-marquee__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--blk-soc-logo-marquee-gap);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, currentColor 8%, currentColor 92%, transparent 100%);
  padding-block: var(--space-2);
}

.blk-soc-logo-marquee__mark {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}
.blk-soc-logo-marquee__glyph {
  inline-size: 9px;
  block-size: 9px;
  rotate: 45deg;
  border-radius: 2px;
  background: var(--blk-soc-logo-marquee-glyph, var(--accent));
  flex: none;
}
.blk-soc-logo-marquee__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--blk-soc-logo-marquee-name-size);
  letter-spacing: var(--heading-tracking);
  color: var(--blk-soc-logo-marquee-ink, var(--ink));
  line-height: 1;
}

@media (max-width: 480px) {
  .blk-soc-logo-marquee { --blk-soc-logo-marquee-gap: var(--space-7); }
}


/* 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); }
}


/* 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); }
}


/* feat-device-split */
/* feat-device-split — copy and checklist on the start side, a CSS-drawn
   phone on the end side: ink bezel, speaker pill, standing on a soft accent
   halo. The device is pure CSS around the image slot, so the imagery stage
   only has to paint a tall screenshot. */

.blk-feat-device-split {
  --blk-feat-device-split-cols: minmax(0, 1.1fr) minmax(0, 0.9fr);
  --blk-feat-device-split-gap: var(--space-9);
  --blk-feat-device-split-title-size: clamp(1.8rem, 3.8vw, var(--step-4));
  --blk-feat-device-split-device-w: clamp(230px, 24vw, 300px);
  --blk-feat-device-split-bezel: var(--space-2);
  --blk-feat-device-split-halo: 20%;
  background: var(--blk-feat-device-split-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-feat-device-split__cols {
  display: grid;
  grid-template-columns: var(--blk-feat-device-split-cols);
  gap: var(--blk-feat-device-split-gap);
  align-items: center;
}

.blk-feat-device-split__copy {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  min-inline-size: 0;
}

.blk-feat-device-split__title {
  font-size: var(--blk-feat-device-split-title-size);
  margin: 0;
  max-inline-size: 18ch;
}

.blk-feat-device-split__sub { font-size: var(--step-0); line-height: 1.6; margin: 0; max-inline-size: 48ch; }

.blk-feat-device-split__points {
  list-style: none;
  margin: 0;
  margin-block-start: var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blk-feat-device-split__point {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  min-inline-size: 0;
}

.blk-feat-device-split__check {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent-ink, var(--accent));
  display: grid;
  place-items: center;
  flex: none;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  margin-block-start: calc(var(--space-1) / 2);
}
.blk-feat-device-split__check::before { content: "\2713"; }

.blk-feat-device-split__pointBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.blk-feat-device-split__pointTitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.blk-feat-device-split__pointText {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.55;
  margin: 0;
  max-inline-size: 44ch;
}

.blk-feat-device-split__cta { margin-block-start: var(--space-2); }

.blk-feat-device-split__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
}

/* the halo the phone stands in — symmetric, RTL needs nothing */
.blk-feat-device-split__stage::before {
  content: "";
  position: absolute;
  inset-inline: 4%;
  inset-block: 12%;
  background: radial-gradient(55% 55% at 50% 50%,
    color-mix(in oklab, var(--accent) var(--blk-feat-device-split-halo), transparent) 0%, transparent 72%);
  pointer-events: none;
}

.blk-feat-device-split__device {
  position: relative;
  inline-size: min(100%, var(--blk-feat-device-split-device-w));
  padding: var(--blk-feat-device-split-bezel);
  background: var(--blk-feat-device-split-bezel-color, var(--ink));
  border-radius: calc(var(--space-6) + var(--blk-feat-device-split-bezel));
  box-shadow: var(--blk-feat-device-split-device-shadow, var(--shadow-2));
}

.blk-feat-device-split__device .ph {
  inline-size: 100%;
  border-radius: var(--space-6);
}

/* the speaker pill over the top of the screen */
.blk-feat-device-split__device::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--blk-feat-device-split-bezel) + var(--space-2));
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 28%;
  block-size: var(--space-2);
  border-radius: 999px;
  background: var(--blk-feat-device-split-bezel-color, var(--ink));
}

@media (max-width: 768px) {
  .blk-feat-device-split {
    --blk-feat-device-split-cols: minmax(0, 1fr);
    --blk-feat-device-split-gap: var(--space-7);
  }
  .blk-feat-device-split__stage { grid-row: 1; }
  .blk-feat-device-split__copy { grid-row: 2; }
}


/* 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-quote-large */
/* soc-quote-large — one sentence at display scale. Impact Field logic: the
   statement IS the section, so nothing shares the stage with it except a
   small portrait and two lines of attribution. */

.blk-soc-quote-large {
  --blk-soc-quote-large-size: clamp(1.6rem, 4.4vw, var(--step-4));
  --blk-soc-quote-large-leading: 1.25;
  --blk-soc-quote-large-portrait: clamp(76px, 9vw, 104px);
  --blk-soc-quote-large-align: center;
  background: var(--blk-soc-quote-large-bg, var(--bg));
  padding-block: var(--blk-soc-quote-large-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-soc-quote-large__inner {
  display: grid;
  justify-items: var(--blk-soc-quote-large-align);
  text-align: var(--blk-soc-quote-large-align);
  gap: var(--space-5);
}

.blk-soc-quote-large__portrait { inline-size: var(--blk-soc-quote-large-portrait); }
.blk-soc-quote-large__portrait .ph {
  inline-size: 100%;
  min-block-size: 0;
  border-radius: var(--blk-soc-quote-large-portrait-radius, 50%);
}

.blk-soc-quote-large__block { margin: 0; display: grid; gap: var(--space-5); justify-items: var(--blk-soc-quote-large-align); }
.blk-soc-quote-large__quote {
  font-size: var(--blk-soc-quote-large-size);
  line-height: var(--blk-soc-quote-large-leading);
  margin: 0;
  text-wrap: balance;
}
.blk-soc-quote-large__quote::before { content: "\201C"; }
.blk-soc-quote-large__quote::after { content: "\201D"; }

.blk-soc-quote-large__by {
  display: grid;
  gap: var(--space-1);
  justify-items: var(--blk-soc-quote-large-align);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
  min-inline-size: min(100%, 28ch);
}
.blk-soc-quote-large__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-quote-large__role {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.blk-soc-quote-large__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 480px) {
  .blk-soc-quote-large { --blk-soc-quote-large-size: clamp(1.4rem, 7vw, 2rem); }
  .blk-soc-quote-large__actions > .btn { flex: 1 1 auto; }
}


/* price-tiers-3 */
/* price-tiers-3 — the tier grid. Emphasis is DATA-driven (items[].featured),
   never :nth-child, so the block reads right at 2, 3 or 4 tiers.
   The price is a text slot: "45 000 DA" and "Sur devis" must both look
   deliberate, so the amount balances its wrap instead of shrinking. */

.blk-price-tiers-3 {
  --blk-pt3-gap: var(--space-5);
  --blk-pt3-col-min: 250px;
  --blk-pt3-amount-size: clamp(var(--step-2), 6vw, var(--step-3));
  --blk-pt3-quiet: color-mix(in oklab, var(--muted) 82%, var(--ink));
  --blk-pt3-card-bg: color-mix(in oklab, var(--ink) 3%, var(--bg));
  --blk-pt3-featured-bg: color-mix(in oklab, var(--accent) 9%, var(--bg));
  --blk-pt3-featured-shadow: 0 16px 40px color-mix(in oklab, var(--accent) 20%, transparent);
  --card-bg: var(--blk-pt3-card-bg);
  background: var(--blk-pt3-bg, var(--bg));
  padding-block: var(--blk-pt3-pad-block, var(--section-pad));
  overflow: clip;
  overflow-clip-margin: var(--space-8);
}

.blk-price-tiers-3__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: var(--blk-pt3-head-items, start);
  text-align: var(--blk-pt3-head-align, start);
  margin-block-end: var(--space-7);
}

.blk-price-tiers-3__title { font-size: clamp(var(--step-3), 4.4vw, var(--step-5)); }
.blk-price-tiers-3__sub { line-height: 1.55; }

.blk-price-tiers-3__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--blk-pt3-col-min)), 1fr));
  gap: var(--blk-pt3-gap);
  align-items: stretch;
}

.blk-price-tiers-3__tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.blk-price-tiers-3__tier--featured {
  --card-bg: var(--blk-pt3-featured-bg);
  --card-border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: var(--blk-pt3-featured-shadow);
}

.blk-price-tiers-3__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.blk-price-tiers-3__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--step-1);
  letter-spacing: var(--heading-tracking);
  color: var(--ink);
}

/* the emphasis pill uses a solid accent fill so it survives every palette */
.blk-price-tiers-3 .tag--accent {
  background: var(--accent);
  color: var(--on-accent, var(--bg));
}

.blk-price-tiers-3__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-start: calc(var(--space-1) * -1);
}

.blk-price-tiers-3__amount {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--blk-pt3-amount-size);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

.blk-price-tiers-3__period {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  color: var(--blk-pt3-quiet);
}

.blk-price-tiers-3__blurb {
  color: var(--blk-pt3-quiet);
  font-size: var(--step-0);
  line-height: 1.5;
}

.blk-price-tiers-3__rule { margin-block: calc(var(--space-1) * -1); }

.blk-price-tiers-3__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* the list takes the slack so every CTA sits on the same baseline */
  flex: 1 1 auto;
}

.blk-price-tiers-3__features li {
  position: relative;
  padding-inline-start: calc(var(--space-5) + var(--space-1));
  color: var(--blk-pt3-quiet);
  font-size: var(--step-0);
  line-height: 1.45;
}

.blk-price-tiers-3__features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--accent-ink, var(--accent));
}

.blk-price-tiers-3__cta { display: flex; }
.blk-price-tiers-3__cta > .btn { inline-size: 100%; }

.blk-price-tiers-3__note {
  margin-block-start: var(--space-5);
  color: var(--blk-pt3-quiet);
  font-size: var(--step--1);
  font-family: var(--font-utility, var(--font-body));
  text-align: var(--blk-pt3-head-align, start);
}

@media (max-width: 768px) {
  .blk-price-tiers-3 { --blk-pt3-gap: var(--space-4); }
  .blk-price-tiers-3__head { margin-block-end: var(--space-6); }
}

@media (max-width: 480px) {
  .blk-price-tiers-3 { --card-pad: var(--space-5); }
}


/* 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-split-form */
/* contact-split-form — the default contact block: the reasons to trust you
   (address, hours, phone) inline-start, the lead form on its own tinted plane
   inline-end. The plane is what makes the form read as a place to type: the
   fields keep the page background, the plane sits one step off it. */

.blk-contact-split-form {
  --blk-contact-split-cols: 0.9fr 1.1fr;
  --blk-contact-split-gap: var(--space-8);
  --blk-contact-split-pad-block: var(--section-pad);
  --blk-contact-split-plane: color-mix(in oklab, var(--ink) 4%, var(--bg));
  --blk-contact-split-plane-pad: clamp(var(--space-5), 3vw, var(--space-7));
  --blk-contact-split-plane-radius: var(--radius);
  --blk-contact-split-plane-border: 1px solid transparent;
  --blk-contact-split-title-size: clamp(var(--step-3), 4.2vw, var(--step-5));
  background: var(--blk-contact-split-bg, var(--bg));
  padding-block: var(--blk-contact-split-pad-block);
  overflow: clip;
}

.blk-contact-split-form__grid {
  display: grid;
  grid-template-columns: var(--blk-contact-split-cols);
  gap: var(--blk-contact-split-gap);
  align-items: start;
}

.blk-contact-split-form__intro {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  min-inline-size: 0;
}

.blk-contact-split-form__title {
  font-size: var(--blk-contact-split-title-size);
  margin: 0;
}

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

.blk-contact-split-form__details {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-block-start: var(--space-3);
  inline-size: 100%;
  display: grid;
  gap: var(--space-4);
}

.blk-contact-split-form__detail {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
}

.blk-contact-split-form__label {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.blk-contact-split-form__value {
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.blk-contact-split-form__form {
  min-inline-size: 0;
  display: grid;
  gap: var(--space-4);
  background: var(--blk-contact-split-plane);
  border: var(--blk-contact-split-plane-border);
  border-radius: var(--blk-contact-split-plane-radius);
  padding: var(--blk-contact-split-plane-pad);
  box-shadow: var(--blk-contact-split-plane-shadow, none);
}

.blk-contact-split-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.blk-contact-split-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-1);
}

.blk-contact-split-form__note {
  color: var(--muted);
  font-size: var(--step--1);
  max-inline-size: 30ch;
}

@media (max-width: 768px) {
  .blk-contact-split-form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

@media (max-width: 480px) {
  .blk-contact-split-form__submit { inline-size: 100%; }
  .blk-contact-split-form__note { max-inline-size: none; }
}


/* footer-columns */
/* footer-columns — the sitemap footer, done with restraint.
   A brand column that can breathe, three or four link columns that collapse
   by intrinsic sizing rather than by breakpoint, and one hairline separating
   the map from the fine print. Column heads are utility-face and small so the
   links stay the loudest thing in the block. */

.blk-footer-columns {
  --blk-footer-bg: var(--bg);
  --blk-footer-pad-block: var(--section-pad);
  --blk-footer-rule: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  --blk-footer-cols: minmax(0, 1fr) minmax(0, 1.6fr);
  --blk-footer-gap: var(--space-8);
  --blk-footer-mark-size: var(--step-2);
  --blk-footer-col-min: 140px;
  --blk-footer-link-color: var(--muted);

  background: var(--blk-footer-bg);
  border-block-start: var(--blk-footer-rule);
  padding-block: var(--blk-footer-pad-block) var(--space-6);
}

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

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

.blk-footer-columns__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(--ink);
  text-decoration: none;
}

.blk-footer-columns__blurb {
  margin-block-start: var(--space-4);
  color: var(--muted);
  font-size: var(--step-0);
  max-inline-size: 34ch;
}

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

.blk-footer-columns__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-columns__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(--ink);
  margin-block-end: var(--space-3);
}

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

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

/* ---- the fine print: quieter than everything above it ---- */
.blk-footer-columns__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-columns__copy {
  color: var(--muted);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
}

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

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

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

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


.blk-nav-floating-pill { --blk-nav-pill-radius: 999px; --blk-nav-pill-shadow: none; --blk-nav-pill-bg: color-mix(in oklab, var(--accent) 8%, var(--bg)); --blk-nav-pill-ring: 1px solid transparent; } .blk-hero-poster-type { --blk-hero-title-size: clamp(3rem, 11vw, calc(var(--step-6) * 1.1)); --blk-hero-leading: 1; --blk-hero-tracking: -0.03em; --blk-hero-bg: color-mix(in oklab, var(--accent) 7%, var(--bg)); } .blk-feat-bento { --blk-feat-bento-card-shadow: none; --blk-feat-bento-lead-tint: 12%; --blk-feat-bento-gap: var(--space-2); --blk-feat-bento-card-bg: color-mix(in oklab, var(--accent) 7%, var(--bg)); } .blk-feat-numbered-grid { --blk-feat-numbered-grid-card-shadow: none; --blk-feat-numbered-grid-card-bg: color-mix(in oklab, var(--accent) 7%, var(--bg)); --blk-feat-numbered-grid-gap: var(--space-2); } .blk-show-tile-captions { --blk-show-tile-captions-radius: 24px; --blk-show-tile-captions-gap: var(--space-2); } .blk-show-grid-3 { --blk-show-grid-3-radius: 24px; --blk-show-grid-3-gap: var(--space-2); } .blk-cta-statement-big { --blk-cta-title-tracking: -0.03em; --blk-cta-title-leading: 1; --blk-cta-title-weight: 700; --blk-cta-bg: color-mix(in oklab, var(--accent) 8%, var(--bg)); } .blk-contact-centered-form { --blk-contact-centered-plane-radius: 24px; --blk-contact-centered-plane: color-mix(in oklab, var(--accent) 7%, var(--bg)); --blk-contact-centered-plane-shadow: none; } .blk-proc-big-numerals { --blk-proc-big-numerals-stroke: 0; --blk-proc-big-numerals-fill: var(--accent-ink); } .blk-footer-big-wordmark { --blk-footer-word-tracking: -0.03em; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}