:root{
--bg:#FAF9F8;--surface:#F2F0EE;--surface-2:#F2F0EE;--ink:#1C1B1A;--muted:#746e6a;--accent:#D6473F;--accent-ink:#c3433b;--on-accent:#faf9f8;--shadow-1:0 12px 32px color-mix(in oklab, #1C1B1A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #1C1B1A 18%, transparent);
--radius:24px;
--font-display:'Space Grotesk',sans-serif;--font-body:'Public Sans',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="light"]{--bg:#FAF9F8;--surface:#F2F0EE;--surface-2:#F2F0EE;--ink:#1C1B1A;--muted:#746e6a;--accent:#D6473F;--accent-ink:#c3433b;--on-accent:#faf9f8;--shadow-1:0 12px 32px color-mix(in oklab, #1C1B1A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #1C1B1A 18%, transparent);}
:root[data-theme="dark"]{--bg:#171615;--surface:#262524;--surface-2:#262524;--ink:#eae9e8;--muted:#9e9d9c;--accent:#D6473F;--accent-ink:#da5952;--on-accent:#171615;--shadow-1:0 12px 32px color-mix(in oklab, #eae9e8 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #eae9e8 18%, transparent);}
html{color-scheme:light dark;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);}
[dir="rtl"] body{font-family:var(--font-body-ar,var(--font-body));}
[dir="rtl"] .title,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--font-display-ar,var(--font-display));}
section{padding-block:var(--section-pad);}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


/* nav-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 {
  /* 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-product-frame__eyebrow { margin-block-end: calc(var(--space-2) * -1); }

.blk-hero-product-frame__title {
  font-size: min(var(--blk-hero-title-size), var(--blk-hero-title-cap, 11cqi));
  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%; }
}


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


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


/* 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-signup-card */
/* contact-signup-card — one wide card split in two: the pitch pane on an
   accent-tinted field with hand-drawn tick marks selling the account, the
   form pane on the plain surface. Sign-up as a single object, not a page.
   Ticks are drawn with borders (no glyph fonts, no images). */

.blk-contact-signup-card {
  --blk-contact-signup-pad-block: var(--section-pad);
  --blk-contact-signup-cols: 0.95fr 1.05fr;
  --blk-contact-signup-pitch-bg: color-mix(in oklab, var(--accent) 12%, var(--bg));
  --blk-contact-signup-pane-bg: var(--bg);
  --blk-contact-signup-pad: clamp(var(--space-6), 4vw, var(--space-8));
  --blk-contact-signup-title-size: clamp(var(--step-2), 3.4vw, var(--step-4));
  --blk-contact-signup-radius: min(var(--radius), var(--space-6));
  --blk-contact-signup-max: var(--measure-lg);
  background: var(--blk-contact-signup-bg, var(--bg));
  padding-block: var(--blk-contact-signup-pad-block);
  overflow: clip;
}

.blk-contact-signup-card__inner { display: grid; justify-items: center; }

.blk-contact-signup-card__shell {
  inline-size: min(100%, var(--blk-contact-signup-max));
  display: grid;
  grid-template-columns: var(--blk-contact-signup-cols);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: var(--blk-contact-signup-radius);
  box-shadow: var(--blk-contact-signup-shadow, var(--shadow-1));
  overflow: hidden;
  background: var(--blk-contact-signup-pane-bg);
}

.blk-contact-signup-card__pitch {
  background: var(--blk-contact-signup-pitch-bg);
  padding: var(--blk-contact-signup-pad);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  min-inline-size: 0;
}

.blk-contact-signup-card__eyebrow { color: var(--ink); }

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

.blk-contact-signup-card__lede {
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.55;
}

.blk-contact-signup-card__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-2);
  display: grid;
  gap: var(--space-3);
}

.blk-contact-signup-card__benefit {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.45;
}

/* a tick drawn from two borders, rotated into place */
.blk-contact-signup-card__tick {
  flex: none;
  inline-size: var(--space-3);
  block-size: calc(var(--space-3) * 1.6);
  border-inline-end: 1px solid var(--ink);
  border-block-end: 1px solid var(--ink);
  box-shadow: inset -1px -1px 0 0 var(--ink);
  transform: rotate(45deg) translateY(calc(var(--space-1) * -1));
}

.blk-contact-signup-card__pane {
  padding: var(--blk-contact-signup-pad);
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-inline-size: 0;
}

.blk-contact-signup-card__paneTitle {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--step-1);
  letter-spacing: var(--heading-tracking);
  line-height: 1.2;
  color: var(--ink);
}

.blk-contact-signup-card__form { display: grid; gap: var(--space-4); }

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

.blk-contact-signup-card__submitRow { display: grid; }

.blk-contact-signup-card__note {
  color: var(--muted);
  font-size: var(--step--1);
}

@media (max-width: 768px) {
  .blk-contact-signup-card__shell { grid-template-columns: 1fr; }
}


/* 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){
  [data-motion]{opacity:1 !important;transform:none !important;clip-path:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}