:root{--bg:#0B0E11;--surface:#141A1F;--surface-2:#141A1F;--ink:#EDF1F3;--muted:#7C8A93;--accent:#2C3E67;--accent-ink:#76829c;--on-accent:#edf1f3;--shadow-1:0 12px 32px color-mix(in oklab, #EDF1F3 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #EDF1F3 18%, transparent);--radius:12px;--font-display:'Sora',sans-serif;--font-body:'Manrope',sans-serif;--step--1:0.7502rem;--step-0:1.0000rem;--step-1:1.3330rem;--step-2:1.7769rem;--step-3:2.3686rem;--step-4:3.1573rem;--step-5:4.2087rem;--step-6:4.6296rem;--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="dark"]{--bg:#0B0E11;--surface:#141A1F;--surface-2:#141A1F;--ink:#EDF1F3;--muted:#7C8A93;--accent:#2C3E67;--accent-ink:#76829c;--on-accent:#edf1f3;--shadow-1:0 12px 32px color-mix(in oklab, #EDF1F3 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #EDF1F3 18%, transparent);}
:root[data-theme="light"]{--bg:#f8fafa;--surface:#e7e9ea;--surface-2:#e7e9ea;--ink:#0a0c0f;--muted:#606264;--accent:#2C3E67;--accent-ink:#2c3e67;--on-accent:#f8fafa;--shadow-1:0 12px 32px color-mix(in oklab, #0a0c0f 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #0a0c0f 18%, transparent);}
html{color-scheme:dark light;}
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-inline */
/* nav-inline — wordmark at the inline start, links and one CTA at the end.
   The default header: a sticky hairline bar that gets out of the way.
   Under 768px the links and the CTA drop into a full-width sheet opened by
   the drawn hamburger (motion.js toggles .nav-open on this <header>). */

.blk-nav-inline {
  --blk-nav-bg: color-mix(in oklab, var(--bg) 88%, transparent);
  --blk-nav-bg-open: var(--bg);
  --blk-nav-rule: 1px solid color-mix(in oklab, var(--ink) 11%, transparent);
  --blk-nav-pad-block: var(--space-4);
  --blk-nav-gap: var(--space-6);
  --blk-nav-mark-size: var(--step-2);
  --blk-nav-link-size: var(--step-0);
  --blk-nav-link-color: var(--muted);
  --blk-nav-link-color-hover: var(--ink);

  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--blk-nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: var(--blk-nav-rule);
}

.blk-nav-inline__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--blk-nav-pad-block);
}

/* the wordmark is type, never a box: display font, tight, optically centred */
.blk-nav-inline__mark {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-inline-end: auto;
  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-inline__nav { display: flex; align-items: center; min-inline-size: 0; }

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

.blk-nav-inline__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--blk-nav-link-size);
  color: var(--blk-nav-link-color);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.blk-nav-inline__link:hover { color: var(--blk-nav-link-color-hover); }

.blk-nav-inline__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: var(--space-5);
}

/* ---- the drawn hamburger: three rules that become an X ---- */
.blk-nav-inline__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  order: 1;
  color: var(--ink);
  border-radius: calc(var(--radius) / 1.6);
}
.blk-nav-inline__burger,
.blk-nav-inline__burger::before,
.blk-nav-inline__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-inline__burger { position: relative; }
.blk-nav-inline__burger::before,
.blk-nav-inline__burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.blk-nav-inline__burger::before { inset-block-start: calc(var(--space-2) * -1); }
.blk-nav-inline__burger::after { inset-block-start: var(--space-2); }

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

/* ---- phone: a deliberate sheet, not a leftover ---- */
@media (max-width: 768px) {
  .blk-nav-inline { --blk-nav-pad-block: var(--space-3); }
  .blk-nav-inline.nav-open { background: var(--blk-nav-bg-open); }
  .blk-nav-inline__toggle { display: inline-flex; }
  .blk-nav-inline__mark { margin-inline-end: auto; }

  .blk-nav-inline__nav,
  .blk-nav-inline__actions {
    display: none;
    flex-basis: 100%;
    order: 2;
    margin-inline-start: 0;
  }
  .blk-nav-inline.nav-open .blk-nav-inline__nav { display: block; animation: blk-nav-inline-sheet var(--dur-1) var(--ease) both; }
  .blk-nav-inline.nav-open .blk-nav-inline__actions { display: flex; animation: blk-nav-inline-sheet var(--dur-1) var(--ease) both; }

  .blk-nav-inline__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-block-end: var(--blk-nav-rule);
  }
  .blk-nav-inline__item { border-block-start: var(--blk-nav-rule); }
  .blk-nav-inline__link {
    min-block-size: 56px;
    inline-size: 100%;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--ink);
  }
  .blk-nav-inline__actions { padding-block: var(--space-4) var(--space-5); }
  .blk-nav-inline__actions .btn { flex: 1 1 auto; }
}

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


/* hero-product-frame */
/* hero-product-frame — the software hero. Text is anchored to the start
   edge and kept narrow; the product sits in a browser frame that runs past
   the container toward the end edge, so the screen reads as a window onto
   something larger. A hairline proof row closes the text column. */

.blk-hero-product-frame {
  --blk-hero-cols: 0.92fr 1.08fr;
  --blk-hero-gap: var(--space-8);
  --blk-hero-title-size: clamp(2.1rem, 5.4vw, var(--step-6));
  --blk-hero-leading: 1.05;
  --blk-hero-media-bleed: calc(var(--space-8) * -1);
  --blk-hero-media-radius: min(var(--radius), var(--space-4));
  --blk-hero-media-shadow: var(--shadow-2);
  --blk-hero-pad-block: calc(var(--section-pad) * 1.1);
  background: var(--blk-hero-bg, var(--bg));
  padding-block: var(--blk-hero-pad-block);
  overflow: clip;
}

.blk-hero-product-frame__grid {
  display: grid;
  grid-template-columns: var(--blk-hero-cols);
  gap: var(--blk-hero-gap);
  align-items: center;
}

.blk-hero-product-frame__text {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-5);
  min-inline-size: 0;
}

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

.blk-hero-product-frame__title {
  font-size: var(--blk-hero-title-size);
  line-height: var(--blk-hero-leading);
  max-inline-size: 15ch;
}

.blk-hero-product-frame__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  max-inline-size: 40ch;
}

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

.blk-hero-product-frame__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--rule-color);
  inline-size: 100%;
}

.blk-hero-product-frame__proof-item {
  color: var(--muted);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.blk-hero-product-frame__media {
  min-inline-size: 0;
  margin-inline-end: var(--blk-hero-media-bleed);
}

.blk-hero-product-frame__media .ph {
  inline-size: 100%;
  border: 0;
  border-radius: var(--blk-hero-media-radius);
  box-shadow: var(--blk-hero-media-shadow);
}

@media (max-width: 900px) {
  .blk-hero-product-frame__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .blk-hero-product-frame { --blk-hero-title-size: clamp(2rem, 8.2vw, 3.2rem); --blk-hero-media-bleed: 0px; }
  .blk-hero-product-frame__title { max-inline-size: 100%; }
  .blk-hero-product-frame__sub { max-inline-size: 52ch; }
}

@media (max-width: 480px) {
  .blk-hero-product-frame { --blk-hero-pad-block: var(--section-pad); }
  .blk-hero-product-frame__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); }
}


/* show-split-detail */
/* show-split-detail — a tall photograph beside a specification list. The rows
   are separated by hairlines only (Exo Monument list discipline): the data is
   the ornament, so nothing else is allowed to compete with it. */

.blk-show-split-detail {
  --blk-show-split-detail-cols: 0.9fr 1.1fr;
  --blk-show-split-detail-gap: var(--space-8);
  --blk-show-split-detail-title-size: clamp(1.8rem, 4vw, var(--step-4));
  --blk-show-split-detail-label-inline: 40%;
  background: var(--blk-show-split-detail-bg, var(--bg));
  padding-block: var(--blk-show-split-detail-pad-block, var(--section-pad));
  overflow: clip;
}

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

.blk-show-split-detail__media { min-inline-size: 0; }
.blk-show-split-detail__media .ph {
  inline-size: 100%;
  border-radius: var(--blk-show-split-detail-radius, min(var(--ph-radius), var(--space-5)));
}

.blk-show-split-detail__panel { display: grid; gap: var(--space-4); justify-items: start; min-inline-size: 0; }
.blk-show-split-detail__title { font-size: var(--blk-show-split-detail-title-size); margin: 0; }
.blk-show-split-detail__text { color: var(--muted); font-size: var(--step-0); line-height: 1.6; max-inline-size: 52ch; margin: 0; }

.blk-show-split-detail__list { inline-size: 100%; margin: 0; margin-block-start: var(--space-2); }
.blk-show-split-detail__row {
  display: grid;
  grid-template-columns: var(--blk-show-split-detail-label-inline) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
  align-items: baseline;
}
.blk-show-split-detail__row:last-child { border-block-end: 1px solid var(--rule-color); }
.blk-show-split-detail__label {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: var(--blk-show-split-detail-label-transform, uppercase);
  color: var(--muted);
  margin: 0;
}
.blk-show-split-detail__value {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.blk-show-split-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }

@media (max-width: 768px) {
  .blk-show-split-detail__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .blk-show-split-detail { --blk-show-split-detail-label-inline: 34%; }
}
@media (max-width: 480px) {
  .blk-show-split-detail__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .blk-show-split-detail__actions > .btn { flex: 1 1 auto; }
}


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


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


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


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* util-hours-table */
/* util-hours-table — opening hours as a description list, with a dotted
   leader carrying the eye from the day to the time. Days and hours never
   collide: the leader takes all the slack, so long Arabic and French day
   names behave identically. */

.blk-util-hours-table {
  --blk-hrs-card-bg: color-mix(in oklab, var(--ink) 3%, var(--bg));
  --blk-hrs-quiet: color-mix(in oklab, var(--muted) 82%, var(--ink));
  --blk-hrs-pad: var(--space-6);
  background: var(--blk-hrs-bg, var(--bg));
  padding-block: var(--blk-hrs-pad-block, calc(var(--section-pad) * 0.8));
  overflow: clip;
}

.blk-util-hours-table__card {
  padding: var(--blk-hrs-pad);
  background: var(--blk-hrs-card-bg);
  border: var(--blk-hrs-card-border, 1px solid var(--rule-color));
  border-radius: var(--blk-hrs-radius, var(--card-radius));
}

.blk-util-hours-table__title {
  font-size: clamp(var(--step-2), 3.2vw, var(--step-3));
  margin-block-end: var(--space-2);
}

.blk-util-hours-table__sub {
  color: var(--blk-hrs-quiet);
  font-size: var(--step-0);
  line-height: 1.5;
  margin-block-end: var(--space-5);
}

.blk-util-hours-table__rows {
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
}

.blk-util-hours-table__row {
  display: grid;
  grid-template-columns: auto minmax(var(--space-5), 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  min-block-size: 40px;
  align-content: center;
  padding-block: var(--space-2);
}

.blk-util-hours-table__day {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
}

.blk-util-hours-table__leader {
  border-block-end: 1px dotted var(--blk-hrs-leader, color-mix(in oklab, var(--ink) 26%, transparent));
  transform: translateY(-0.25em);
}

.blk-util-hours-table__hours {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: end;
}

.blk-util-hours-table__hours--closed {
  color: var(--blk-hrs-quiet);
  font-style: italic;
}

.blk-util-hours-table__note {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
  color: var(--blk-hrs-quiet);
  font-size: var(--step--1);
  line-height: 1.45;
}

@media (max-width: 480px) {
  .blk-util-hours-table { --blk-hrs-pad: var(--space-5); }
  .blk-util-hours-table__row { gap: var(--space-2); }
}