/* =============================================================
   SMARTCAT PROMO SITE — Master Stylesheet
   Import order matters: tokens → base → components
   Pages link to this file only:
     <link rel="stylesheet" href="../main.css">
   ============================================================= */

/* ── Tokens ──────────────────────────────────────────────────── */
/* ── tokens/globals.css ── */
/* =============================================================
   GLOBALS — 01 Globals collection
   Source of truth — edit token values directly in this file.
   (Mirrors the Figma "🌐 Smartcat website design system" variables.)
   ============================================================= */

:root {

  /* ── Color / Non-semantic / White Alpha ─────────────────── */
  --color-non-semantic-white-alpha-100: #ffffff;
  --color-non-semantic-white-alpha-90:  #fbfcfff7;
  --color-non-semantic-white-alpha-80:  #f9fafdf5;
  --color-non-semantic-white-alpha-70:  #fafafee8;
  --color-non-semantic-white-alpha-60:  #f3f3fde0;
  --color-non-semantic-white-alpha-50:  #f0f0ffba;
  --color-non-semantic-white-alpha-40:  #e2dffe8a;
  --color-non-semantic-white-alpha-30:  #d8d5fd52;
  --color-non-semantic-white-alpha-20:  #dbe0fd1f;
  --color-non-semantic-white-alpha-10:  #becae412;
  --color-non-semantic-white-alpha-5:   #c2d8e40a;
  --color-non-semantic-white-alpha-0:   #ffffff00;

  /* ── Color / Non-semantic / Gray ────────────────────────── */
  --color-non-semantic-gray-100: #13101c;
  --color-non-semantic-gray-90:  #1a1824;
  --color-non-semantic-gray-80:  #1f1d2a;
  --color-non-semantic-gray-70:  #2b2937;
  --color-non-semantic-gray-60:  #524f64;
  --color-non-semantic-gray-50:  #838096;
  --color-non-semantic-gray-40:  #b1b0c0;
  --color-non-semantic-gray-30:  #d8d8e2;
  --color-non-semantic-gray-20:  #e5e5ea;
  --color-non-semantic-gray-10:  #f0f1f4;
  --color-non-semantic-gray-5:   #f4f5f8;

  /* ── Color / Non-semantic / Gray Alpha ──────────────────── */
  --color-non-semantic-gray-alpha-100: #04010ef0;
  --color-non-semantic-gray-alpha-90:  #03010ee8;
  --color-non-semantic-gray-alpha-80:  #030110e3;
  --color-non-semantic-gray-alpha-70:  #030011d6;
  --color-non-semantic-gray-alpha-60:  #080422b2;
  --color-non-semantic-gray-alpha-50:  #07012d80;
  --color-non-semantic-gray-alpha-40:  #0300344f;
  --color-non-semantic-gray-alpha-30:  #0b0b4a29;
  --color-non-semantic-gray-alpha-20:  #15153e1c;
  --color-non-semantic-gray-alpha-10:  #30325012;
  --color-non-semantic-gray-alpha-5:   #3c445a0a;

  /* ── Color / Non-semantic / Mint ────────────────────────── */
  --color-non-semantic-mint-100: #005951;
  --color-non-semantic-mint-90:  #007266;
  --color-non-semantic-mint-80:  #008778;
  --color-non-semantic-mint-70:  #009d8b;
  --color-non-semantic-mint-60:  #12b39f;
  --color-non-semantic-mint-50:  #35c7b4;
  --color-non-semantic-mint-40:  #6bdccc;
  --color-non-semantic-mint-30:  #97ede0;
  --color-non-semantic-mint-20:  #c2faf1;
  --color-non-semantic-mint-10:  #dcfcf7;
  --color-non-semantic-mint-5:   #edfffc;

  /* ── Color / Non-semantic / Red ─────────────────────────── */
  --color-non-semantic-red-100: #a10716;
  --color-non-semantic-red-90:  #c90d20;
  --color-non-semantic-red-80:  #e51a2f;
  --color-non-semantic-red-70:  #ff2e43;
  --color-non-semantic-red-60:  #ff495b;
  --color-non-semantic-red-50:  #ff808c;
  --color-non-semantic-red-40:  #ffb4bb;
  --color-non-semantic-red-30:  #ffd6da;
  --color-non-semantic-red-20:  #ffe3e6;
  --color-non-semantic-red-10:  #ffedef;
  --color-non-semantic-red-5:   #fff5f6;

  /* ── Color / Non-semantic / Purple ──────────────────────── */
  --color-non-semantic-purple-100: #460996;
  --color-non-semantic-purple-90:  #590bbe;
  --color-non-semantic-purple-80:  #670fda;
  --color-non-semantic-purple-70:  #731ef2;
  --color-non-semantic-purple-60:  #7d39fc;
  --color-non-semantic-purple-50:  #8a59fc;
  --color-non-semantic-purple-40:  #c5b3fc;
  --color-non-semantic-purple-30:  #e2dbfc;
  --color-non-semantic-purple-20:  #eeebfc;
  --color-non-semantic-purple-10:  #f3f1fb;
  --color-non-semantic-purple-5:   #f8f7fc;

  /* ── Color / Non-semantic / Pink ────────────────────────── */
  --color-non-semantic-pink-100: #7b089c;
  --color-non-semantic-pink-90:  #970cbe;
  --color-non-semantic-pink-80:  #ad13d8;
  --color-non-semantic-pink-70:  #c326ed;
  --color-non-semantic-pink-60:  #cf48f4;
  --color-non-semantic-pink-50:  #e084f9;
  --color-non-semantic-pink-40:  #edb7fb;
  --color-non-semantic-pink-30:  #f5d6ff;
  --color-non-semantic-pink-20:  #f7e0fe;
  --color-non-semantic-pink-10:  #faecfe;
  --color-non-semantic-pink-5:   #fcf6fe;

  /* ── Color / Non-semantic / Blue ────────────────────────── */
  --color-non-semantic-blue-100: #0049a3;
  --color-non-semantic-blue-90:  #0160d4;
  --color-non-semantic-blue-80:  #066fed;
  --color-non-semantic-blue-70:  #1c7ef5;
  --color-non-semantic-blue-60:  #3d92f8;
  --color-non-semantic-blue-50:  #7fb8fa;
  --color-non-semantic-blue-40:  #b2d4fc;
  --color-non-semantic-blue-30:  #d5e7fe;
  --color-non-semantic-blue-20:  #e0edfe;
  --color-non-semantic-blue-10:  #ecf4fe;
  --color-non-semantic-blue-5:   #f6fafe;

  /* ── Color / Non-semantic / Orange ──────────────────────── */
  --color-non-semantic-orange-100: #a83700;
  --color-non-semantic-orange-90:  #d14700;
  --color-non-semantic-orange-80:  #ea5400;
  --color-non-semantic-orange-70:  #fa6002;
  --color-non-semantic-orange-60:  #ff771e;
  --color-non-semantic-orange-50:  #ff9e59;
  --color-non-semantic-orange-40:  #ffc59a;
  --color-non-semantic-orange-30:  #ffddc2;
  --color-non-semantic-orange-20:  #ffe6d1;
  --color-non-semantic-orange-10:  #ffefe0;
  --color-non-semantic-orange-5:   #fff6ed;

  /* ── Color / Semantic / Brand (alias → Purple) ──────────── */
  --color-semantic-brand-5:   var(--color-non-semantic-purple-5);
  --color-semantic-brand-10:  var(--color-non-semantic-purple-10);
  --color-semantic-brand-20:  var(--color-non-semantic-purple-20);
  --color-semantic-brand-30:  var(--color-non-semantic-purple-30);
  --color-semantic-brand-40:  var(--color-non-semantic-purple-40);
  --color-semantic-brand-50:  var(--color-non-semantic-purple-50);
  --color-semantic-brand-60:  var(--color-non-semantic-purple-60);
  --color-semantic-brand-70:  var(--color-non-semantic-purple-70);
  --color-semantic-brand-80:  var(--color-non-semantic-purple-80);
  --color-semantic-brand-90:  var(--color-non-semantic-purple-90);
  --color-semantic-brand-100: var(--color-non-semantic-purple-100);

  /* ── Color / Semantic / Negative (alias → Red) ──────────── */
  --color-semantic-negative-5:   var(--color-non-semantic-red-5);
  --color-semantic-negative-10:  var(--color-non-semantic-red-10);
  --color-semantic-negative-20:  var(--color-non-semantic-red-20);
  --color-semantic-negative-30:  var(--color-non-semantic-red-30);
  --color-semantic-negative-40:  var(--color-non-semantic-red-40);
  --color-semantic-negative-50:  var(--color-non-semantic-red-50);
  --color-semantic-negative-60:  var(--color-non-semantic-red-60);
  --color-semantic-negative-70:  var(--color-non-semantic-red-70);
  --color-semantic-negative-80:  var(--color-non-semantic-red-80);
  --color-semantic-negative-90:  var(--color-non-semantic-red-90);
  --color-semantic-negative-100: var(--color-non-semantic-red-100);

  /* ── Spacing ─────────────────────────────────────────────── */
  --spacing-0:  0px;
  --spacing-1:  2px;
  --spacing-2:  4px;
  --spacing-3:  8px;
  --spacing-4:  12px;
  --spacing-5:  16px;
  --spacing-6:  24px;
  --spacing-7:  32px;
  --spacing-8:  40px;
  --spacing-9:  48px;
  --spacing-10: 56px;
  --spacing-11: 64px;
  --spacing-12: 80px;
  --spacing-13: 96px;
  --spacing-14: 120px;
  --spacing-15: 160px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-1:    4px;
  --radius-2:    6px;
  --radius-3:    8px;
  --radius-4:    12px;
  --radius-5:    16px;
  --radius-6:    24px;
  --radius-full: 1000px;

  /* ── Dimensions ──────────────────────────────────────────── */
  --dimension-desktop-max-text-width: 740px;
}

/* ── tokens/colors.css ── */
/* =============================================================
   COLORS — 02 Colors collection (semantic, mode-aware)
   Source of truth — edit token values directly in this file.
   (Mirrors the Figma "🌐 Smartcat website design system" variables.)
   ============================================================= */

/* ── Light mode (default) ────────────────────────────────────── */
:root {

  /* ── Background / Button ────────────────────────────────── */
  --background-button-primary-default:   var(--color-non-semantic-gray-alpha-90);
  --background-button-primary-hover:     var(--color-non-semantic-gray-alpha-70);
  --background-button-primary-active:    var(--color-non-semantic-gray-alpha-60);
  --background-button-secondary-default: var(--color-non-semantic-gray-alpha-10);
  --background-button-secondary-hover:   var(--color-non-semantic-gray-alpha-20);
  --background-button-secondary-active:  var(--color-non-semantic-gray-alpha-30);
  --background-button-ghost-default:     var(--color-non-semantic-white-alpha-0);
  --background-button-ghost-hover:       var(--color-non-semantic-gray-alpha-5);
  --background-button-ghost-active:      var(--color-non-semantic-gray-alpha-10);
  --background-button-gradient-default:  linear-gradient(180deg, #db00ff 0%, #7716ff 100%);
  --background-button-gradient-hover:    linear-gradient(180deg, #ff36fc 0%, #9d1efd 100%);
  --background-button-gradient-active:   linear-gradient(180deg, #c300f4 0%, #6200eb 100%);

  /* ── Background / Static / Gray ────────────────────────── */
  --background-static-gray-layer-0:  var(--color-non-semantic-white-alpha-100);
  --background-static-gray-layer-1:  var(--color-non-semantic-gray-5);
  --background-static-gray-layer-2:  var(--color-non-semantic-gray-10);
  --background-static-gray-layer-3:  var(--color-non-semantic-gray-20);
  --background-static-gray-inverted: var(--color-non-semantic-gray-100);
  --background-static-gray-overlay:  var(--color-non-semantic-gray-alpha-50);

  /* ── Background / Static / Alpha ───────────────────────── */
  --background-static-alpha-layer-1: var(--color-non-semantic-gray-alpha-5);
  --background-static-alpha-layer-2: var(--color-non-semantic-gray-alpha-10);
  --background-static-alpha-layer-3: var(--color-non-semantic-gray-alpha-20);

  /* ── Background / Static / Red ─────────────────────────── */
  --background-static-red-layer-1:  var(--color-non-semantic-red-10);
  --background-static-red-layer-2:  var(--color-non-semantic-red-20);
  --background-static-red-layer-3:  var(--color-non-semantic-red-30);
  --background-static-red-inverted: var(--color-non-semantic-red-90);

  /* ── Background / Static / Orange ──────────────────────── */
  --background-static-orange-layer-1:  var(--color-non-semantic-orange-10);
  --background-static-orange-layer-2:  var(--color-non-semantic-orange-20);
  --background-static-orange-layer-3:  var(--color-non-semantic-orange-30);
  --background-static-orange-inverted: var(--color-non-semantic-orange-90);

  /* ── Background / Static / Mint ────────────────────────── */
  --background-static-mint-layer-1:  var(--color-non-semantic-mint-10);
  --background-static-mint-layer-2:  var(--color-non-semantic-mint-20);
  --background-static-mint-layer-3:  var(--color-non-semantic-mint-30);
  --background-static-mint-inverted: var(--color-non-semantic-mint-90);

  /* ── Background / Static / Blue ────────────────────────── */
  --background-static-blue-layer-1:  var(--color-non-semantic-blue-10);
  --background-static-blue-layer-2:  var(--color-non-semantic-blue-20);
  --background-static-blue-layer-3:  var(--color-non-semantic-blue-30);
  --background-static-blue-inverted: var(--color-non-semantic-blue-80);

  /* ── Background / Static / Brand ───────────────────────── */
  --background-static-brand-layer-1:  var(--color-non-semantic-purple-10);
  --background-static-brand-layer-2:  var(--color-non-semantic-purple-20);
  --background-static-brand-layer-3:  var(--color-non-semantic-purple-30);
  --background-static-brand-inverted: var(--color-non-semantic-purple-70);

  /* ── Background / Static / Pink ────────────────────────── */
  --background-static-pink-layer-1:  var(--color-non-semantic-pink-10);
  --background-static-pink-layer-2:  var(--color-non-semantic-pink-20);
  --background-static-pink-layer-3:  var(--color-non-semantic-pink-30);
  --background-static-pink-inverted: var(--color-non-semantic-pink-90);

  /* ── Background / Interaction ───────────────────────────── */
  --background-interaction-default:        var(--color-non-semantic-white-alpha-0);
  --background-interaction-hover:          var(--color-non-semantic-gray-alpha-5);
  --background-interaction-active:         var(--color-non-semantic-gray-alpha-20);
  --background-interaction-focus:          var(--color-non-semantic-gray-alpha-5);
  --background-interaction-selectedsubtle: var(--color-non-semantic-gray-alpha-10);
  --background-interaction-selectedstrong: var(--background-button-primary-default);
  --background-interaction-selectedbrand:  var(--color-semantic-brand-70);
  --background-interaction-errorblank:     var(--color-non-semantic-white-alpha-0);
  --background-interaction-errorsolid:     var(--color-semantic-negative-80);

  /* ── Background / Illustration ──────────────────────────── */
  --background-illustration-semitrasparent: var(--color-non-semantic-white-alpha-50);

  /* ── Content / Static ───────────────────────────────────── */
  --content-static-primary:  var(--color-non-semantic-gray-alpha-100);
  --content-static-secondary: var(--color-non-semantic-gray-alpha-60);
  --content-static-tertiary:  var(--color-non-semantic-gray-alpha-40);
  --content-static-inverted:  var(--color-non-semantic-white-alpha-100);
  --content-static-brand:     var(--color-semantic-brand-70);
  --content-static-blue:      var(--color-non-semantic-blue-70);
  --content-static-green:     var(--color-non-semantic-mint-60);
  --content-static-pink:      var(--color-non-semantic-pink-70);
  --content-static-orange:    var(--color-non-semantic-orange-80);

  /* ── Content / Interaction ──────────────────────────────── */
  --content-interaction-default: var(--color-non-semantic-gray-alpha-100);
  --content-interaction-hover:   var(--color-non-semantic-gray-alpha-60);
  --content-interaction-active:  var(--color-non-semantic-gray-alpha-40);
  --content-interaction-error:   var(--color-semantic-negative-80);

  /* ── Content / Link ─────────────────────────────────────── */
  --content-link-default: var(--color-semantic-brand-70);
  --content-link-hover:   var(--color-semantic-brand-60);
  --content-link-active:  var(--color-semantic-brand-50);

  /* ── Content / Misc ─────────────────────────────────────── */
  --content-misc-rating: var(--color-non-semantic-orange-70);

  /* ── Border / Button ────────────────────────────────────── */
  --border-button-default: var(--color-non-semantic-gray-alpha-20);
  --border-button-hover:   var(--color-non-semantic-gray-alpha-20);
  --border-button-active:  var(--color-non-semantic-gray-alpha-20);

  /* ── Border / Interaction ───────────────────────────────── */
  --border-interaction-default: var(--color-non-semantic-gray-alpha-20);
  --border-interaction-hover:   var(--color-non-semantic-gray-alpha-20);
  --border-interaction-active:  var(--color-non-semantic-gray-alpha-20);
  --border-interaction-error:   var(--color-semantic-negative-80);

  /* ── Border / Focus ─────────────────────────────────────── */
  --border-focus-default: var(--color-non-semantic-purple-40);

  /* ── Border / Divider ───────────────────────────────────── */
  --border-divider-default: var(--color-non-semantic-gray-alpha-20);

  /* ── Border / Link ──────────────────────────────────────── */
  --border-link-default: var(--color-non-semantic-gray-alpha-50);
  --border-link-purple:  var(--color-semantic-brand-70);
}

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {

  /* ── Background / Button ────────────────────────────────── */
  --background-button-primary-default:   var(--color-non-semantic-white-alpha-100);
  --background-button-primary-hover:     var(--color-non-semantic-white-alpha-70);
  --background-button-primary-active:    var(--color-non-semantic-white-alpha-50);
  --background-button-secondary-default: var(--color-non-semantic-white-alpha-20);
  --background-button-secondary-hover:   var(--color-non-semantic-white-alpha-30);
  --background-button-secondary-active:  var(--color-non-semantic-white-alpha-40);
  --background-button-ghost-default:     var(--color-non-semantic-white-alpha-0);
  --background-button-ghost-hover:       var(--color-non-semantic-white-alpha-20);
  --background-button-ghost-active:      var(--color-non-semantic-white-alpha-30);
  --background-button-gradient-default:  linear-gradient(180deg, #db00ff 0%, #7716ff 100%);
  --background-button-gradient-hover:    linear-gradient(180deg, #ff36fc 0%, #9d1efd 100%);
  --background-button-gradient-active:   linear-gradient(180deg, #c300f4 0%, #6200eb 100%);

  /* ── Background / Static / Gray ────────────────────────── */
  --background-static-gray-layer-0:  var(--color-non-semantic-gray-90);
  --background-static-gray-layer-1:  var(--color-non-semantic-gray-80);
  --background-static-gray-layer-2:  var(--color-non-semantic-gray-70);
  --background-static-gray-layer-3:  var(--color-non-semantic-gray-60);
  --background-static-gray-inverted: var(--color-non-semantic-white-alpha-100);
  --background-static-gray-overlay:  var(--color-non-semantic-white-alpha-30);

  /* ── Background / Static / Alpha ───────────────────────── */
  --background-static-alpha-layer-1: var(--color-non-semantic-white-alpha-5);
  --background-static-alpha-layer-2: var(--color-non-semantic-white-alpha-10);
  --background-static-alpha-layer-3: var(--color-non-semantic-white-alpha-20);

  /* ── Background / Static / Red ─────────────────────────── */
  --background-static-red-layer-1:  var(--color-non-semantic-red-100);
  --background-static-red-layer-2:  var(--color-non-semantic-red-90);
  --background-static-red-layer-3:  var(--color-non-semantic-red-80);
  --background-static-red-inverted: var(--color-non-semantic-red-30);

  /* ── Background / Static / Orange ──────────────────────── */
  --background-static-orange-layer-1:  var(--color-non-semantic-orange-100);
  --background-static-orange-layer-2:  var(--color-non-semantic-orange-90);
  --background-static-orange-layer-3:  var(--color-non-semantic-orange-80);
  --background-static-orange-inverted: var(--color-non-semantic-orange-30);

  /* ── Background / Static / Mint ────────────────────────── */
  --background-static-mint-layer-1:  var(--color-non-semantic-mint-100);
  --background-static-mint-layer-2:  var(--color-non-semantic-mint-90);
  --background-static-mint-layer-3:  var(--color-non-semantic-mint-80);
  --background-static-mint-inverted: var(--color-non-semantic-mint-30);

  /* ── Background / Static / Blue ────────────────────────── */
  --background-static-blue-layer-1:  var(--color-non-semantic-blue-90);
  --background-static-blue-layer-2:  var(--color-non-semantic-blue-80);
  --background-static-blue-layer-3:  var(--color-non-semantic-blue-70);
  --background-static-blue-inverted: var(--color-non-semantic-blue-30);

  /* ── Background / Static / Brand ───────────────────────── */
  --background-static-brand-layer-1:  var(--color-non-semantic-purple-70);
  --background-static-brand-layer-2:  var(--color-non-semantic-purple-60);
  --background-static-brand-layer-3:  var(--color-non-semantic-purple-50);
  --background-static-brand-inverted: var(--color-non-semantic-purple-30);

  /* ── Background / Static / Pink ────────────────────────── */
  --background-static-pink-layer-1:  var(--color-non-semantic-pink-100);
  --background-static-pink-layer-2:  var(--color-non-semantic-pink-90);
  --background-static-pink-layer-3:  var(--color-non-semantic-pink-80);
  --background-static-pink-inverted: var(--color-non-semantic-pink-30);

  /* ── Background / Interaction ───────────────────────────── */
  --background-interaction-default:        var(--color-non-semantic-white-alpha-0);
  --background-interaction-hover:          var(--color-non-semantic-white-alpha-5);
  --background-interaction-active:         var(--color-non-semantic-white-alpha-20);
  --background-interaction-focus:          var(--color-non-semantic-white-alpha-5);
  --background-interaction-selectedsubtle: var(--color-non-semantic-white-alpha-10);
  --background-interaction-selectedstrong: var(--background-button-primary-default);
  --background-interaction-selectedbrand:  var(--color-semantic-brand-70);
  --background-interaction-errorblank:     var(--color-non-semantic-white-alpha-0);
  --background-interaction-errorsolid:     var(--color-semantic-negative-70);

  /* ── Background / Illustration ──────────────────────────── */
  --background-illustration-semitrasparent: var(--color-non-semantic-white-alpha-20);

  /* ── Content / Static ───────────────────────────────────── */
  --content-static-primary:   var(--color-non-semantic-white-alpha-100);
  --content-static-secondary: var(--color-non-semantic-white-alpha-50);
  --content-static-tertiary:  var(--color-non-semantic-white-alpha-30);
  --content-static-inverted:  var(--color-non-semantic-gray-100);
  --content-static-brand:     var(--color-semantic-brand-50);
  --content-static-blue:      var(--color-non-semantic-blue-70);
  --content-static-green:     var(--color-non-semantic-mint-50);
  --content-static-pink:      var(--color-non-semantic-pink-60);
  --content-static-orange:    var(--color-non-semantic-orange-60);

  /* ── Content / Interaction ──────────────────────────────── */
  --content-interaction-default: var(--color-non-semantic-white-alpha-100);
  --content-interaction-hover:   var(--color-non-semantic-white-alpha-50);
  --content-interaction-active:  var(--color-non-semantic-white-alpha-30);
  --content-interaction-error:   var(--color-semantic-negative-70);

  /* ── Content / Link ─────────────────────────────────────── */
  --content-link-default: var(--color-semantic-brand-50);
  --content-link-hover:   var(--color-semantic-brand-40);
  --content-link-active:  var(--color-semantic-brand-30);

  /* ── Content / Misc ─────────────────────────────────────── */
  --content-misc-rating: var(--color-non-semantic-orange-70);

  /* ── Border / Button ────────────────────────────────────── */
  --border-button-default: var(--color-non-semantic-white-alpha-20);
  --border-button-hover:   var(--color-non-semantic-white-alpha-20);
  --border-button-active:  var(--color-non-semantic-white-alpha-20);

  /* ── Border / Interaction ───────────────────────────────── */
  --border-interaction-default: var(--color-non-semantic-white-alpha-20);
  --border-interaction-hover:   var(--color-non-semantic-white-alpha-20);
  --border-interaction-active:  var(--color-non-semantic-white-alpha-20);
  --border-interaction-error:   var(--color-semantic-negative-70);

  /* ── Border / Focus ─────────────────────────────────────── */
  --border-focus-default: var(--color-non-semantic-purple-90);

  /* ── Border / Divider ───────────────────────────────────── */
  --border-divider-default: var(--color-non-semantic-white-alpha-20);

  /* ── Border / Link ──────────────────────────────────────── */
  --border-link-default: var(--color-non-semantic-white-alpha-50);
  --border-link-purple:  var(--color-semantic-brand-50);
}

/* ── tokens/sizes.css ── */
/* =============================================================
   SIZES — 03 Sizes collection (breakpoint-aware)
   Source of truth — edit token values directly in this file.
   (Mirrors the Figma "🌐 Smartcat website design system" variables.)

   Strategy: mobile-first, two-breakpoint model
     :root              → tablet + mobile values (base, < 1280px)
     @media ≥ 1280px    → desktop overrides
   Note: tablet (800–1279px) shares the mobile/base token values;
   only true desktop (≥ 1280px) gets the override. The 800px boundary
   is a section-component breakpoint (see base/website-layout.css), not a token one.
   ============================================================= */

/* ── Tablet + mobile (base) ──────────────────────────────────── */
:root {

  /* ── Spacing / Card ─────────────────────────────────────── */
  --spacing-card-l-top:        var(--spacing-5);
  --spacing-card-l-horizontal: var(--spacing-5);
  --spacing-card-l-bottom:     var(--spacing-6);
  --spacing-card-l-gap:        var(--spacing-5);
  --spacing-card-m-top:        var(--spacing-5);
  --spacing-card-m-horizontal: var(--spacing-5);
  --spacing-card-m-bottom:     var(--spacing-6);
  --spacing-card-m-gap:        var(--spacing-5);
  --spacing-card-s-top:        var(--spacing-5);
  --spacing-card-s-horizontal: var(--spacing-5);
  --spacing-card-s-bottom:     var(--spacing-6);
  --spacing-card-s-gap:        var(--spacing-5);

  /* ── Spacing / Button ───────────────────────────────────── */
  --spacing-button-xl-horizontal:      var(--spacing-9);
  --spacing-button-xl-vertical:        var(--spacing-6);
  --spacing-button-xl-gap:             var(--spacing-4);
  --spacing-button-l-horizontal:       var(--spacing-6);
  --spacing-button-l-vertical:         var(--spacing-5);
  --spacing-button-l-gap:              var(--spacing-4);
  --spacing-button-m-horizontal:       var(--spacing-5);
  --spacing-button-m-vertical:         var(--spacing-3);
  --spacing-button-m-gap:              var(--spacing-3);
  --spacing-between-buttons-horzontal: var(--spacing-3);

  /* ── Spacing / Input ────────────────────────────────────── */
  --spacing-input-l-horizontal: var(--spacing-5);
  --spacing-input-l-vertical:   var(--spacing-5);
  --spacing-input-l-gap:        var(--spacing-4);
  --spacing-input-l-filled:     var(--spacing-3);
  --spacing-input-m-horizontal: var(--spacing-4);
  --spacing-input-m-vertical:   var(--spacing-3);
  --spacing-input-m-gap:        var(--spacing-3);
  --spacing-input-m-filled:     var(--spacing-2);

  /* ── Spacing / Panel ────────────────────────────────────── */
  --spacing-panel-horizontal: var(--spacing-5);
  --spacing-panel-top:        var(--spacing-6);
  --spacing-panel-bottom:     var(--spacing-7);

  /* ── Spacing / Page ─────────────────────────────────────── */
  --spacing-page-sides:      15px;
  --spacing-page-vertical-1: var(--spacing-3);
  --spacing-page-vertical-2: var(--spacing-3);
  --spacing-page-vertical-3: var(--spacing-6);
  --spacing-page-vertical-4: var(--spacing-8);
  --spacing-page-vertical-5: var(--spacing-9);
  --spacing-page-vertical-6: var(--spacing-11);
  --spacing-page-vertical-7: var(--spacing-12);
  --spacing-page-vertical-8: var(--spacing-14);

  /* ── Spacing / Between elements ─────────────────────────── */
  --spacing-between-elements-1:  var(--spacing-1);
  --spacing-between-elements-2:  var(--spacing-2);
  --spacing-between-elements-3:  var(--spacing-3);
  --spacing-between-elements-4:  var(--spacing-3);
  --spacing-between-elements-5:  var(--spacing-4);
  --spacing-between-elements-6:  var(--spacing-5);
  --spacing-between-elements-7:  var(--spacing-6);
  --spacing-between-elements-8:  var(--spacing-7);
  --spacing-between-elements-9:  var(--spacing-8);
  --spacing-between-elements-10: var(--spacing-9);
  --spacing-between-elements-11: var(--spacing-11);

  /* ── Spacing / Gutter ───────────────────────────────────── */
  --spacing-between-gutter-default: var(--spacing-3);

  /* ── Spacing / Dropdown ─────────────────────────────── */
  --spacing-dropdown-item-l-vertical:     10px;
  --spacing-dropdown-item-l-horizontal:   var(--spacing-5);  /* 16px */
  --spacing-dropdown-item-m-vertical:     var(--spacing-3);  /* 8px */
  --spacing-dropdown-item-m-horizontal:   var(--spacing-4);  /* 12px */
  --spacing-dropdown-search-l-vertical:   14px;
  --spacing-dropdown-search-l-horizontal: var(--spacing-5);  /* 16px */
  --spacing-dropdown-search-m-vertical:   var(--spacing-3);  /* 8px */
  --spacing-dropdown-search-m-horizontal: var(--spacing-4);  /* 12px */
  --spacing-dropdown-list-padding:        var(--spacing-2);  /* 4px */

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-button:           var(--radius-2);
  --radius-button-container: var(--radius-3);
  --radius-card-regular:     var(--radius-4);  /* 12px → 16px at ≥1280 */
  --radius-card-contained:   var(--radius-3);
  --radius-panel:            var(--radius-4);  /* 12px → 16px at ≥1280 */
}

/* ── Desktop overrides (≥ 1280px) ────────────────────────────── */
/* Only tokens that differ from tablet/mobile are listed here.    */
@media (min-width: 1280px) {
  :root {

    /* ── Spacing / Card ───────────────────────────────────── */
    --spacing-card-l-top:        var(--spacing-7);
    --spacing-card-l-horizontal: var(--spacing-7);
    --spacing-card-l-bottom:     var(--spacing-9);
    --spacing-card-l-gap:        var(--spacing-6);
    --spacing-card-m-top:        var(--spacing-6);
    --spacing-card-m-horizontal: var(--spacing-6);
    --spacing-card-m-bottom:     var(--spacing-8);
    --spacing-card-m-gap:        var(--spacing-6);

    /* ── Spacing / Panel ─────────────────────────────────── */
    --spacing-panel-horizontal: var(--spacing-9);
    --spacing-panel-top:        var(--spacing-9);
    --spacing-panel-bottom:     var(--spacing-10);

    /* ── Spacing / Page ──────────────────────────────────── */
    --spacing-page-sides:      var(--spacing-12);
    --spacing-page-vertical-2: var(--spacing-5);
    --spacing-page-vertical-5: var(--spacing-10);
    --spacing-page-vertical-6: var(--spacing-12);
    --spacing-page-vertical-7: var(--spacing-14);
    --spacing-page-vertical-8: var(--spacing-15);

    /* ── Spacing / Between elements ──────────────────────── */
    --spacing-between-elements-4:  var(--spacing-4);
    --spacing-between-elements-5:  var(--spacing-5);
    --spacing-between-elements-6:  var(--spacing-6);
    --spacing-between-elements-7:  var(--spacing-7);
    --spacing-between-elements-8:  var(--spacing-8);
    --spacing-between-elements-9:  var(--spacing-10);
    --spacing-between-elements-10: var(--spacing-11);
    --spacing-between-elements-11: var(--spacing-12);

    /* ── Dimensions ──────────────────────────────────────── */
    --dimension-max-text-width: var(--dimension-desktop-max-text-width);

    /* ── Radius ──────────────────────────────────────────── */
    --radius-card-regular: var(--radius-5);
    --radius-panel:        var(--radius-5);
  }
}

/* ── tokens/typography.css ── */
/* =============================================================
   TYPOGRAPHY — 04 Typography collection (breakpoint-aware)
   Source of truth — edit token values directly in this file.
   (Mirrors the Figma "🌐 Smartcat website design system" variables.)

   Strategy: mobile-first, two-breakpoint model
     :root              → tablet + mobile values (base, < 1280px)
     @media ≥ 1280px    → desktop overrides
   (Tablet shares the mobile/base values; only ≥ 1280px overrides.)

   Notes:
     - Weight strings from Figma ("Bold" etc.) are mapped to
       numeric CSS values (700 / 600 / 400).
     - Figma's floating-point letter-spacing values are rounded
       to 2 decimal places (-0.6399...px → -0.64px).
   ============================================================= */

/* ── Mobile (base) ───────────────────────────────────────────── */
:root {

  /* ── Font size ───────────────────────────────────────────── */
  --size-display:    44px;
  --size-h1:         32px;
  --size-h2:         24px;
  --size-h3:         18px;
  --size-h4:         16px;
  --size-h5:         14px;
  --size-paragraph:  16px;
  --size-small-text: 14px;
  --size-caption:    12px;
  --size-label-l:    16px;
  --size-label-m:    14px;
  --size-label-s:    10px;

  /* ── Line height ─────────────────────────────────────────── */
  --line-height-display:    52px;
  --line-height-h1:         40px;
  --line-height-h2:         32px;
  --line-height-h3:         28px;
  --line-height-h4:         24px;
  --line-height-h5:         20px;
  --line-height-paragraph:  26px;
  --line-height-small-text: 22px;
  --line-height-caption:    16px;
  --line-height-label-l:    20px;
  --line-height-label-m:    20px;
  --line-height-label-s:    16px;

  /* ── Font family ─────────────────────────────────────────── */
  --family-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --family-body:    "Inter", system-ui, sans-serif;

  /* ── Font weight ─────────────────────────────────────────── */
  --weight-bold:      700;
  --weight-semi-bold: 600;
  --weight-regular:   400;

  /* ── Letter spacing ──────────────────────────────────────── */
  --letter-spacing-display:    -2px;
  --letter-spacing-h1:         -0.64px;
  --letter-spacing-h2:         -0.24px;
  --letter-spacing-h3:          0px;
  --letter-spacing-h4:          0.16px;
  --letter-spacing-h5:          0.16px;
  --letter-spacing-paragraph:   0px;
  --letter-spacing-small-text:  0px;
  --letter-spacing-caption:     0px;
  --letter-spacing-label-l:     0px;
  --letter-spacing-label-m:     0px;
  --letter-spacing-label-s:     0px;
}

/* ── Desktop overrides (≥ 1280px) ────────────────────────────── */
/* Only tokens that differ from tablet/mobile are listed here.    */
@media (min-width: 1280px) {
  :root {

    /* ── Font size ───────────────────────────────────────────── */
    --size-display:    64px;
    --size-h1:         48px;
    --size-h2:         32px;
    --size-h3:         24px;
    --size-h4:         18px;
    --size-h5:         16px;
    --size-paragraph:  18px;
    --size-small-text: 16px;
    --size-caption:    14px;

    /* ── Line height ─────────────────────────────────────────── */
    --line-height-display:    72px;
    --line-height-h1:         58px;
    --line-height-h2:         40px;
    --line-height-h3:         32px;
    --line-height-h5:         22px;
    --line-height-paragraph:  30px;
    --line-height-small-text: 26px;
    --line-height-caption:    20px;

    /* ── Letter spacing ──────────────────────────────────────── */
    --letter-spacing-display: -2.8px;
    --letter-spacing-h1:      -0.96px;
    --letter-spacing-h2:      -0.64px;
    --letter-spacing-h3:      -0.24px;
    --letter-spacing-h4:       0px;
  }
}

/* ── tokens/effects.css ── */
/* =============================================================
   EFFECTS — 05 Effects collection (shadows)
   Source of truth — edit shadow values directly in this file.
   (Mirrors the Figma "🌐 Smartcat website design system" › FOUNDATIONS.)

   Usage:  box-shadow: var(--shadow-elevation-l);
           box-shadow: var(--shadow-illustration-panel-top);
   ============================================================= */

:root {

  /* ── Elevation shadows ───────────────────────────────────── */
  /* Shadow color is ~rgba(9, 7, 13) — near-black with purple tint */
  --shadow-elevation-l: 0px 16px 64px 0px rgba(9, 7, 13, 0.07);
  --shadow-elevation-m: 0px  8px 16px 0px rgba(9, 7, 13, 0.05);
  --shadow-elevation-s: 0px  4px  8px 0px rgba(9, 7, 13, 0.05);

  /* ── Illustration ────────────────────────────────────────── */
  /* White inset top border — used on illustration panel tops  */
  --shadow-illustration-panel-top: inset 0px 1px 1px 0px rgba(255, 255, 255, 1);
}


/* ── Base ────────────────────────────────────────────────────── */
/* ── base/reset.css ── */
/* =============================================================
   RESET — minimal structural reset
   Clears browser user-agent defaults that would otherwise fight
   the design system's own spacing/layout (components-spacing,
   typography classes, grid). Loads first, before type-styles.css
   and website-layout.css, so later rules can override it.
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ── base/type-styles.css ── */
/* Enforce HTML hidden attribute regardless of component display rules */
[hidden] { display: none !important; }

/* =============================================================
   TYPE STYLES — utility classes mapped to typography tokens
   Source: Figma "🌐 Smartcat website design system" › FOUNDATIONS
   All sizes/line-heights/letter-spacings are responsive via
   tokens/typography.css (tablet+mobile base + ≥1280px desktop overrides).

   Naming mirrors Figma style names:
     Display, H1–H3           → single class (Bold only)
     H4, H5                   → -bold / -reg variants
     Paragraph, Small, Caption → -bold / -reg variants
     Label L / M / S          → -semibold / -reg variants
     (Eyebrow style removed — do not use eyebrow text)
   Link variants are handled with .text-link modifier (underline).
   ============================================================= */

/* ── Display ─────────────────────────────────────────────────── */
.text-display {
  font-family:    var(--family-heading);
  font-size:      var(--size-display);
  line-height:    var(--line-height-display);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-display);
}

/* ── Headings ─────────────────────────────────────────────────── */
.text-h1 {
  font-family:    var(--family-heading);
  font-size:      var(--size-h1);
  line-height:    var(--line-height-h1);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-h1);
}

.text-h2 {
  font-family:    var(--family-heading);
  font-size:      var(--size-h2);
  line-height:    var(--line-height-h2);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-h2);
}

.text-h3 {
  font-family:    var(--family-heading);
  font-size:      var(--size-h3);
  line-height:    var(--line-height-h3);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-h3);
}

.text-h4-bold {
  font-family:    var(--family-heading);
  font-size:      var(--size-h4);
  line-height:    var(--line-height-h4);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-h4);
}

.text-h4-reg {
  font-family:    var(--family-heading);
  font-size:      var(--size-h4);
  line-height:    var(--line-height-h4);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-h4);
}

.text-h5-bold {
  font-family:    var(--family-heading);
  font-size:      var(--size-h5);
  line-height:    var(--line-height-h5);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-h5);
}

.text-h5-reg {
  font-family:    var(--family-heading);
  font-size:      var(--size-h5);
  line-height:    var(--line-height-h5);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-h5);
}

/* ── Paragraph ────────────────────────────────────────────────── */
.text-paragraph-bold {
  font-family:    var(--family-body);
  font-size:      var(--size-paragraph);
  line-height:    var(--line-height-paragraph);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-paragraph);
}

.text-paragraph-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-paragraph);
  line-height:    var(--line-height-paragraph);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-paragraph);
}

/* ── Small text ───────────────────────────────────────────────── */
.text-small-bold {
  font-family:    var(--family-body);
  font-size:      var(--size-small-text);
  line-height:    var(--line-height-small-text);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-small-text);
}

.text-small-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-small-text);
  line-height:    var(--line-height-small-text);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-small-text);
}

/* ── Caption ──────────────────────────────────────────────────── */
.text-caption-bold {
  font-family:    var(--family-body);
  font-size:      var(--size-caption);
  line-height:    var(--line-height-caption);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--letter-spacing-caption);
}

.text-caption-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-caption);
  line-height:    var(--line-height-caption);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-caption);
}

/* ── Label ────────────────────────────────────────────────────── */
.text-label-l-semibold {
  font-family:    var(--family-body);
  font-size:      var(--size-label-l);
  line-height:    var(--line-height-label-l);
  font-weight:    var(--weight-semi-bold);
  letter-spacing: var(--letter-spacing-label-l);
}

.text-label-l-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-label-l);
  line-height:    var(--line-height-label-l);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-label-l);
}

.text-label-m-semibold {
  font-family:    var(--family-body);
  font-size:      var(--size-label-m);
  line-height:    var(--line-height-label-m);
  font-weight:    var(--weight-semi-bold);
  letter-spacing: var(--letter-spacing-label-m);
}

.text-label-m-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-label-m);
  line-height:    var(--line-height-label-m);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-label-m);
}

.text-label-s-semibold {
  font-family:    var(--family-body);
  font-size:      var(--size-label-s);
  line-height:    var(--line-height-label-s);
  font-weight:    var(--weight-semi-bold);
  letter-spacing: var(--letter-spacing-label-s);
}

.text-label-s-reg {
  font-family:    var(--family-body);
  font-size:      var(--size-label-s);
  line-height:    var(--line-height-label-s);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--letter-spacing-label-s);
}

/* ── Link modifier ────────────────────────────────────────────── */
/* Combine with any text-* class: <a class="text-h4-bold text-link"> */
.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── base/website-layout.css ── */
/* =============================================================
   LAYOUT GRID — page structure & responsive column grid
   Source: "Default website system" / Layout grid spec.

   Two-breakpoint model:
     mobile  (< 800px)        → 4 columns,  16px page / 16px column padding
     tablet  (800–1279px)     → 12 columns, 32px page / 16px column padding
     desktop (≥ 1280px)       → 12 columns, 80px page / 24px column padding
   Columns AND page padding flip at the 800px (section) breakpoint; page
   padding flips again — along with column padding and max-width — at the
   1280px (token) breakpoint. See tokens/sizes.css.

   Page padding therefore has three steps (16 / 32 / 80), matching the
   three Figma variables Dimension/Page padding/Mobile|Tablet|Desktop.
   It is the one grid parameter that changes at BOTH breakpoints.

   Nesting model (A → B → C → D):
     A. Page              — the browser viewport
     B. .section-band     — full-bleed row that carries BOTH the Section's
                            background (data-layer / data-theme) AND its
                            side padding (--grid-page-padding). Every
                            component lives inside one — components never
                            carry their own side padding. Background still
                            spans edge-to-edge (padding doesn't clip it).
     C. .container        — max-width 1540px, centered; every component
                            wraps its own content in one for its max-width.
     D. .grid > *         — individual components; column-padding inside
                            each cell; gutters between cells
   ============================================================= */

/* ── Grid parameters (responsive) ────────────────────────────── */

:root {
  --grid-columns:        4;
  --grid-gutter:         8px;
  --grid-page-padding:   16px;
  --grid-column-padding: 16px;
  --grid-max-width:      1540px;
}

/* Tablet + desktop: 12 columns (section breakpoint) + the tablet page-padding
   step. Figma: Dimension/Page padding/Tablet = 32. */
@media (min-width: 800px) {
  :root {
    --grid-columns:      12;
    --grid-page-padding: 32px;
  }
}

/* Desktop only: wider page & column padding (token breakpoint) */
@media (min-width: 1280px) {
  :root {
    --grid-page-padding:   80px;
    --grid-column-padding: 24px;
  }
}

/* ── B. Section band (full-bleed background + page padding) ────── */
/* Every Section on a page is wrapped in a .section-band so it carries an
   explicit background — even the default one — AND the side padding for
   every component inside it. This is the ONLY place side padding is
   applied: components never carry their own padding-inline, so a
   .section-band is required around any component (rule: components
   cannot exist outside of a Section). Padding doesn't clip the
   background — it still paints edge-to-edge under the padding, so the
   band remains full-bleed. Vertical rhythm comes from Components spacing
   (size 8) placed inside, top and bottom.
   Background layer — data-layer="0".."3" selects the gray layer (default 0).
   Adjacent same-mode Sections may differ by layer for contrast. All layer
   tokens flip automatically to dark under data-theme="dark". */
.section-band {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--grid-page-padding);
  background: var(--background-static-gray-layer-0);
}
.section-band[data-layer="0"] { background: var(--background-static-gray-layer-0); }
.section-band[data-layer="1"] { background: var(--background-static-gray-layer-1); }
.section-band[data-layer="2"] { background: var(--background-static-gray-layer-2); }
.section-band[data-layer="3"] { background: var(--background-static-gray-layer-3); }

/* Brand gradient — HERO BACKGROUNDS ONLY. CLAUDE.md sanctions brand
   gradients for heroes and nowhere else; do not reach for this on an
   ordinary content Section. Holds flat gray-layer-2 through the upper
   part of the band, then ramps to saturated brand purple at the bottom
   edge, so a full-bleed hero visual can sit in a purple wash.
   The 55% hold point is a general-purpose default. Where a specific
   hero's Figma anchors the ramp to one of its own blocks rather than to
   the whole section, the hero overrides --brand-gradient-hold — see
   NOTE 2 in output/hero-blocks-2026/centered/centered.css. */
.section-band[data-layer="brand-gradient"] {
  background: linear-gradient(
    to bottom,
    var(--background-static-gray-layer-2) 0,
    var(--background-static-gray-layer-2) var(--brand-gradient-hold, 55%),
    var(--background-static-brand-inverted) 100%
  );
}

/* ── C. Component container ───────────────────────────────────── */
/* Every page-level component wraps its own content in a .container to
   apply the shared 1540px max-width + centering — the ONLY place
   max-width/centering logic lives. Nested inside a .section-band, whose
   padding has already inset it from the viewport edges. */

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

/* ── Column grid ──────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* Column padding = inner padding on each cell (content inset within a column) */
.grid > * {
  box-sizing: border-box;
  padding-inline: var(--grid-column-padding);
}

/* ── Column-span helper ───────────────────────────────────────── */
/* Mobile (4-col): every spanned item stacks full width.
   At ≥ 800px (12-col): the explicit span applies. */

[data-grid-span] { grid-column: 1 / -1; }

@media (min-width: 800px) {
  [data-grid-span="1"]  { grid-column: span 1;  }
  [data-grid-span="2"]  { grid-column: span 2;  }
  [data-grid-span="3"]  { grid-column: span 3;  }
  [data-grid-span="4"]  { grid-column: span 4;  }
  [data-grid-span="5"]  { grid-column: span 5;  }
  [data-grid-span="6"]  { grid-column: span 6;  }
  [data-grid-span="7"]  { grid-column: span 7;  }
  [data-grid-span="8"]  { grid-column: span 8;  }
  [data-grid-span="9"]  { grid-column: span 9;  }
  [data-grid-span="10"] { grid-column: span 10; }
  [data-grid-span="11"] { grid-column: span 11; }
  [data-grid-span="12"] { grid-column: span 12; }
}

/* ── base/deck-layout.css ── */
/* =============================================================
   DECK LAYOUT — fixed-canvas grid for presentation decks
   See CLAUDE.md "Presentation decks" → "Deck layout grid".
   Numbers verified against the reference Smartcat Google Slides
   template (exact PPTX shape geometry), not guessed.

   Nesting model:
     .deck-slide          — fixed 1280×720px canvas, no responsive
                            behavior. Provides the 32px page padding
                            and the 80px heading→content gap. Neutralizes
                            --grid-page-padding for reused page-level
                            components (heading, cards, numbers) so they
                            don't double the inset.
     direct children      — either ONE reused/dedicated component filling
                            the full content width (the reference deck's
                            own single-purpose slide types), OR a `.grid`
                            row (same class as web, from base/website-layout.css)
                            for freeform multi-component composition —
                            e.g. a stacked-cards column next to a
                            testimonial, via data-grid-span, exactly like
                            composing a web page. Slides are NOT limited
                            to one component each — see CLAUDE.md
                            "Presentation decks" → "Composing a slide".

   --grid-page-padding is zeroed (not just left alone) because reused
   page-level components (heading, cards, numbers) apply it as their
   OWN horizontal inset — .deck-slide already provides the 32px inset
   via its own padding, so the token must be neutralized here to avoid
   doubling it. --spacing-page-vertical-6 is pinned to its desktop
   (80px) value directly, rather than relying on the ambient viewport
   being ≥1280px, so the gap stays fixed even if a slide is ever
   embedded in a narrower container (e.g. a smaller preview panel).
   Other tokens (typography, card/panel spacing) are NOT locked here —
   deck pages are expected to be viewed at ≥1280px, where the existing
   @media(min-width:1280px) desktop-tier values are already active.
   ============================================================= */

.deck-slide {
  --grid-page-padding: 0;
  --grid-max-width: 1216px;
  --grid-columns: 12;           /* lock to desktop's 12-column grid, fixed */
  --grid-column-padding: 0;     /* no column inset — grid content sits flush to
                                   the 32px slide padding on both edges, aligned
                                   with the title's origin. Columns are separated
                                   by the 8px --grid-gutter only (deck grid spec). */
  --spacing-page-vertical-6: var(--spacing-12); /* lock to 80px — never the 64px mobile value */
  box-sizing: border-box;
  position: relative;
  width: 1280px;
  height: 720px;
  padding: var(--spacing-7); /* 32px */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-page-vertical-6); /* 80px — heading→content gap, fixed */
  overflow: hidden;
  background: var(--background-static-gray-layer-0);
}

.deck-slide[data-layer="1"] { background: var(--background-static-gray-layer-1); }
.deck-slide[data-layer="2"] { background: var(--background-static-gray-layer-2); }
.deck-slide[data-layer="3"] { background: var(--background-static-gray-layer-3); }

/* Brand background — one of the sanctioned Section backgrounds. Every
   `*-inverted` background token (gray, red, orange, mint, blue, brand, pink)
   is a SELF-CONTAINED, theme-aware pair with `--content-static-inverted` —
   NOT with `--content-static-primary`/`secondary`, and NOT via `data-theme`.
   `--content-static-inverted` already flips correctly on its own: white in
   light mode (pairing with brand-inverted's dark purple-70), near-black in
   dark mode (pairing with brand-inverted's pale purple-30). Do NOT combine
   this with `data-theme="dark"` — that flips the background to the pale
   dark-mode value while independently flipping content-static-primary to
   white, giving white-on-pale (illegible), the opposite of the fix. The
   correct fix repoints primary/secondary to the inverted content token,
   which is already theme-correct in either ambient theme. There is no
   dedicated "secondary-inverted" token, so secondary uses the same solid
   inverted color as primary here — a known loss of the primary/secondary
   hierarchy inside this one band, not a workaround to remove later. */
.deck-slide[data-layer="brand"] {
  background: var(--background-static-brand-inverted);
  --content-static-primary: var(--content-static-inverted);
  --content-static-secondary: var(--content-static-inverted);
}

/* ── base/onepagers-layout.css ── */
/* =============================================================
   ONE-PAGER LAYOUT — fixed-width, variable-height document canvas
   See CLAUDE.md "One-pagers" → "One-pager layout".

   A one-pager is a printed/PDF-style document, not a responsive page
   and not a fixed-height slide: constant WIDTH, variable HEIGHT.
   Width 1280px (same fixed width validated for the deck canvas).
   Height is auto — grows with content — with a 1656px floor, which is
   the exact proportion of a US Letter page (8.5:11) at this width
   (1280 × 11/8.5 ≈ 1656), so a one-pager that stops at minimum length
   still prints/exports at a familiar document ratio. Taller documents
   are expected and normal.

   Nesting model:
     .op-page      — the document canvas: fixed 1280px width, auto height.
                     No padding of its own — every band supplies its own.
     .op-band      — a full-bleed row, exactly like the web .section-band
                     and the deck's data-layer axis, but WITHOUT any
                     responsive behavior: fixed 48px inline padding
                     (--spacing-9, the same value validated for the deck
                     canvas) and fixed vertical padding. Background is set
                     by data-layer (gray steps, brand tint, or solid brand)
                     × data-theme (light/dark) — same two composable axes
                     used by the deck canvas.
     component     — one onepager-tier component (components/onepager/*)
                     sits inside a band and never carries its own side
                     padding or background.

   Two components are self-sufficient, exactly like hero-block on web and
   the cover/closing treatment on decks: .op-hero (opens every one-pager)
   and .op-cta-band (closes most of them). Both carry their own solid
   brand-purple background directly and must never be wrapped in .op-band.
   ============================================================= */

.op-page {
  box-sizing: border-box;
  width: 1280px;
  min-height: 1656px;
  height: auto;
  display: flex;
  flex-direction: column;
  background: var(--background-static-gray-layer-0);
  overflow-x: hidden; /* clip intentional edge-bleed decoration only */

  /* Scope the shared grid system (base/website-layout.css) to a fixed
     12-column, no-column-padding grid — same technique as .deck-slide —
     so a `.grid` row used inside a band sits flush to the band's own
     48px padding, aligned with every other band's content edge. */
  --grid-columns: 12;
  --grid-gutter: 8px;
  --grid-page-padding: 0;
  --grid-column-padding: 0;
}

/* ── Band (full-bleed background + fixed page padding) ──────────
   The only place side padding is ever applied. Vertical padding is a
   fixed constant (documents don't reflow across breakpoints) — override
   per instance with data-padding="compact" for tighter bands (e.g. a
   logo strip) where the default rhythm reads as too loose. */

.op-band {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--spacing-9);   /* 48px */
  padding-block: var(--spacing-13);   /* 96px */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);              /* heading → content gap */
  background: var(--background-static-gray-layer-0);
}

.op-band[data-padding="compact"] { padding-block: var(--spacing-9); /* 48px */ }

.op-band[data-layer="0"] { background: var(--background-static-gray-layer-0); }
.op-band[data-layer="1"] { background: var(--background-static-gray-layer-1); }
.op-band[data-layer="2"] { background: var(--background-static-gray-layer-2); }
.op-band[data-layer="3"] { background: var(--background-static-gray-layer-3); }

/* Brand-tint — a soft accent band (e.g. the platform-pillars block).
   Light enough in both themes that default content tokens stay legible
   with no repointing. */
.op-band[data-layer="brand-tint"] { background: var(--background-static-brand-layer-1); }

/* Brand — solid, saturated brand-purple. Self-contained pairing with
   --content-static-inverted, same mechanism as the deck canvas's
   data-layer="brand" (see base/deck-layout.css for the full rationale).
   Do NOT combine with data-theme="dark" — background-static-brand-inverted
   already has its own (different) dark-mode value, and flipping both
   independently breaks contrast. */
.op-band[data-layer="brand"] {
  background: var(--background-static-brand-inverted);
  --content-static-primary: var(--content-static-inverted);
  --content-static-secondary: var(--content-static-inverted);
}

/* ── Buttons on a brand-purple surface ───────────────────────────
   A saturated brand-purple ground is a DARK surface, but it is not a
   data-theme="dark" context — and must not be made one, because
   --background-static-brand-inverted resolves to a LIGHT purple in
   dark mode (see the warning on data-layer="brand" above). An .op-band
   with data-theme="dark" needs none of this: that attribute matches
   tokens/colors.css's own [data-theme="dark"] block, so every nested
   atomic already reads dark-mode values. The three brand-purple
   surfaces are the only place the pairing breaks — a nested
   .btn[data-type="secondary"] there keeps its LIGHT-mode fill (a
   translucent dark gray) and near-black label, i.e. a light-mode
   button sitting on a dark ground.

   Repointed ON THE BUTTON, not on the surface, and deliberately so:
   .op-hero__tag is a WHITE pill that also reads
   --content-static-primary, so flipping that token surface-wide would
   render those tag labels white-on-white. Custom properties inherit,
   so declaring them here reaches the button and nothing else.

   Values mirror tokens/colors.css's [data-theme="dark"] block exactly
   — this re-declares semantic tokens (the semantic layer's own job,
   the same move data-layer="brand" makes above), it does not style
   anything with a primitive.

   Excluded: .op-hero[data-theme="dark"], the near-black internal
   masthead — a genuine dark context that already gets these values. */

.op-band[data-layer="brand"] .btn,
.op-hero:not([data-theme="dark"]) .btn,
.op-cta-band .btn {
  --content-static-primary: var(--content-static-inverted);

  --background-button-primary-default:   var(--color-non-semantic-white-alpha-100);
  --background-button-primary-hover:     var(--color-non-semantic-white-alpha-70);
  --background-button-primary-active:    var(--color-non-semantic-white-alpha-50);
  --background-button-secondary-default: var(--color-non-semantic-white-alpha-20);
  --background-button-secondary-hover:   var(--color-non-semantic-white-alpha-30);
  --background-button-secondary-active:  var(--color-non-semantic-white-alpha-40);
  --background-button-ghost-hover:       var(--color-non-semantic-white-alpha-20);
  --background-button-ghost-active:      var(--color-non-semantic-white-alpha-30);

  --border-button-default: var(--color-non-semantic-white-alpha-20);
  --border-button-hover:   var(--color-non-semantic-white-alpha-20);
  --border-button-active:  var(--color-non-semantic-white-alpha-20);
}

/* ── Shared section heading ──────────────────────────────────────
   Onepager sections compose their heading directly from the type-style
   utility classes (.text-h1 etc., see base/type-styles.css) rather than
   reusing the web's `heading` page-level component — per the "don't
   reuse page-level components" rule (see CLAUDE.md "One-pagers"). Those
   utility classes carry font metrics only, no color, so pair every
   heading with .op-heading (and .op-heading-intro for the optional
   supporting paragraph) to pick up the correct color automatically —
   including the flip to white inside a data-layer="brand" or
   data-theme="dark" band, since both read the same --content-static-*
   custom properties every band already sets.
   Usage: <h2 class="text-h1 op-heading">Title</h2>
          <p class="text-paragraph-reg op-heading-intro">Supporting line.</p> */

/* ── Reading measure ─────────────────────────────────
   No line of one-pager prose runs past ~80 characters. --op-measure is
   that measure in `ch`, which scales with each paragraph's own font size.
   54ch rather than 80ch because 1ch is the width of "0", much wider than
   an average letter; measured across every one-pager in output/, 54ch
   keeps the longest line at or under 80 characters in both Inter and
   Plus Jakarta Sans (58ch still let an H3 Jakarta line reach 85).

   The rule is wrapped in :where() so it has zero specificity: it caps
   every paragraph that sets no measure of its own, and a component that
   deliberately sets a narrower one (the hero's 480px) still wins. A
   component that needs a cap should point at var(--op-measure), never a
   wider pixel value. */
.op-page { --op-measure: 54ch; }
:where(.op-page) p { max-width: var(--op-measure); }

.op-heading {
  margin: 0;
  color: var(--content-static-primary);
}

.op-heading-intro {
  margin: 0;
  max-width: var(--op-measure);
  color: var(--content-static-secondary);
}

/* ── Shared column-pair utility ───────────────────────
   Two side-by-side columns within one band.

   The shared .grid system is scoped and available inside a band (see
   .op-page above) and remains the right tool when columns must line up
   with a 12-column rhythm. It is the WRONG tool for a simple pair of
   text columns: --grid-gutter is 8px, a page-grid gutter meant to
   separate cards, and two columns of dense body copy set 8px apart
   read as one ragged column. This utility supplies a real 48px column
   gap instead, and needs no span bookkeeping to sit flush at both band
   edges.

   Properties (data attributes):
     data-split on .op-columns : even (default) | wide-narrow
       wide-narrow gives the first column ~1.4x the second, for a
       narrative paired with a supporting .op-callout.

   Elements:
     .op-columns__col — a column that stacks several blocks vertically
                        (a heading over a list over a call-out). Omit it
                        when the column is a single component, which
                        already handles its own internal layout. */

.op-columns {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-9);
}

.op-columns > * {
  flex: 1 1 0;
  min-width: 0;
}

.op-columns[data-split="wide-narrow"] > :first-child { flex: 1.4 1 0; }

.op-columns__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* ── Shared prose utility ────────────────────────────────────────
   The body-copy sibling of .op-heading / .op-heading-intro, for a
   flowing narrative paragraph that is NOT a heading's supporting
   intro line — e.g. the multi-paragraph problem narrative that sits
   beside a supporting .op-callout. Same reason for existing: the
   .text-* utility classes carry font metrics only, no color.
   Usage: <p class="text-paragraph-reg op-prose">…</p> */

.op-prose {
  margin: 0;
  color: var(--content-static-secondary);
}

/* ── Shared chain utility ────────────────────────────────────────
   The recurring "A → B → C" / "A × B × C" typographic device: a run
   of short terms joined by a brand-purple separator glyph, used by
   both .op-callout (the workflow / complexity line) and .op-flow
   (the middle panel's process chain). Shared here rather than
   duplicated in both components.

   The separator is a real character supplied by the author (→, ×, ·)
   inside .op-chain__sep, marked aria-hidden so a screen reader reads
   the terms as a plain sequence.
   Usage: <p class="op-chain">
            <span>Figma</span>
            <span class="op-chain__sep" aria-hidden="true">&#8594;</span>
            <span>handoff</span>
          </p> */

.op-chain {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2) var(--spacing-3);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-chain__sep {
  color: var(--content-static-brand);
  font-weight: var(--weight-regular);
}

/* ── Shared media utility ────────────────────────────────────────
   The recurring "product-UI screenshot" visual type (see CLAUDE.md
   "Visual type per media slot"): a rounded image floating on a soft
   lavender-gradient backdrop. Used by op-hero and op-steps. */

.op-media {
  box-sizing: border-box;
  border-radius: var(--radius-5);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-non-semantic-purple-10), var(--color-non-semantic-purple-20));
}

.op-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* A slot holding a real image takes the image's own shape. The promo UI
   mockups (images/promo-ui-mockups/) are square, full-bleed compositions
   with UI running to the edges — forcing them into a 4:3 box crops real
   content, so they are shown whole. The fixed ratio only shapes an empty
   placeholder slot. */
.op-media:has(img) { aspect-ratio: auto; }

/* ── base/document-layout.css ── */
/* =============================================================
   DOCUMENT LAYOUT — fixed-width, fixed-height, paginated canvas
   New output-format tier, alongside web / decks / one-pagers.
   See CLAUDE.md "Documents".

   Unlike a one-pager (single scrolling canvas, auto height), a document
   is genuinely paginated — it prints or exports to PDF as a sequence of
   discrete physical pages, each repeating a running header and footer,
   exactly like the source PDF this format replaces. Width AND height are
   both fixed per page.

   Page size: 1290px wide × 1670px tall (≈ US-Letter 8.5:11 proportion
   at this width). Every .doc-page is one physical page.

   Nesting model:
     .doc-page       — one physical page: fixed 1290×1670, flex column.
     .doc-header     — self-sufficient, repeats on every .doc-page (logo).
     .doc-content    — the page's content area: fixed side padding,
                       vertical flex rhythm between components. Direct
                       children default to a centered 800px text column;
                       .doc-screenshot/.doc-divider breathe wider (960px).
     .doc-footer     — self-sufficient, repeats on every .doc-page
                       (document title + page number).

   The one exception is the cover page: a .doc-page[data-theme="dark"]
   containing only .doc-hero (no .doc-header/.doc-content/.doc-footer) —
   see components/document/doc-hero. Every document defaults to opening
   with one, per CLAUDE.md "Documents → Cover page".
   ============================================================= */

.doc-page {
  box-sizing: border-box;
  width: 1290px;
  height: 1670px;
  display: flex;
  flex-direction: column;
  background: var(--background-static-gray-layer-0);
  overflow: hidden; /* safety clip — content is authored to fit one page */
  break-after: page;
  page-break-after: always;
}

.doc-page:last-child {
  break-after: auto;
  page-break-after: avoid;
}

/* ── Header (self-sufficient, repeats every page) ─────────────── */

.doc-header {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6) var(--spacing-9);
  border-bottom: 1px solid var(--border-divider-default);
}

.doc-header__logo {
  height: 20px;
  width: auto;
}

.doc-header__tag {
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  color: var(--content-static-secondary);
}

/* ── Content area ──────────────────────────────────────────────── */

.doc-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
  padding: var(--spacing-7) var(--spacing-9);
}

/* Default content measure — a centered reading column, narrower than
   the full content width, for every text-bearing block.

   Deliberately qualified with .doc-page for the extra specificity (0,2,0):
   most block roots reset their browser-default margins with the `margin: 0`
   SHORTHAND, which also zeroes margin-inline. At a plain `.doc-content > *`
   (0,1,0) those resets tie on specificity and win on source order — every
   one of them lands flush against the content-box's left edge while the
   blocks that don't reset margins stay centered, so the column's left edge
   goes ragged. The extra class settles the cascade here, in the one rule
   that owns the measure, instead of depending on each component avoiding
   the shorthand. The max-width overrides below are (0,2,0) too and still
   win on source order, as intended. */
.doc-page .doc-content > * {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

/* Section dividers breathe wider than the text column — up to 960px,
   still centered and still inside the page's normal content padding
   (never full-bleed past it). */
.doc-content > .doc-divider {
  max-width: 960px;
}

/* A comparison/reference table needs more measure than the 800px text
   column — a row-label column plus two value columns doesn't fit it.
   Same 960px as .doc-divider, still centered inside the page padding. */
.doc-content > .doc-table {
  max-width: 960px;
}

/* Screenshot CONTAINERS span the full content width — page width minus
   the 48px page padding on each side, same as everything else's outer
   bound. The 960px cap applies to the image itself, not this container
   — see doc-screenshot's .doc-screenshot__frame. */
.doc-content > .doc-screenshot {
  max-width: none;
}

/* A step's own screenshot (components/document/doc-steps) is nested
   inside .doc-steps__body, not a direct .doc-content child, so the rule
   above never reaches it — left alone it inherits .doc-steps's 800px
   text-column width instead of the full content area, rendering visibly
   narrower than every other screenshot on the page. Breaks it out to the
   same full width: escapes the text column's own inset within the fixed
   1194px content area ((1194 − 800) / 2 = 197px each side), plus, on the
   left only, the 32px number badge and its gap. Fixed pixel values, not
   tokens, since this canvas is a fixed (non-responsive) size — see
   CLAUDE.md "Document layout grid". */
.doc-steps__body > .doc-screenshot {
  margin-left: calc(-197px - 32px - var(--spacing-4));
  margin-right: -197px;
}

/* Section heading — composed directly from type-style utility classes,
   exactly like the one-pager tier's .op-heading. */
.doc-heading {
  margin: 0;
  color: var(--content-static-primary);
}

/* H1 = a new top-level Section — its spacing comes entirely from the
   preceding .doc-divider (see components/document/doc-divider), so it
   carries no margin-top rule of its own.

   H2/H3 = a subsection within a Section — proportional top margin,
   expressed as a top-up over .doc-content's ambient 32px gap so the
   total lands on a clean value: 32 + 48 = 80px (H2), 32 + 24 = 56px (H3). */
h2.doc-heading { margin-top: var(--spacing-9); }
h3.doc-heading { margin-top: var(--spacing-6); }

/* Safety: a heading that opens the page (or opens a .doc-block that
   opens the page) shouldn't inherit the extra top margin — there's
   nothing above it on the page to separate from. */
.doc-content > *:first-child,
.doc-content > *:first-child > h2.doc-heading:first-child,
.doc-content > *:first-child > h3.doc-heading:first-child {
  margin-top: 0;
}

.doc-heading-intro {
  margin: 0;
  color: var(--content-static-secondary);
}

/* ── Footer (self-sufficient, repeats every page) ─────────────── */

.doc-footer {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-9);
  border-top: 1px solid var(--border-divider-default);
}

.doc-footer__title,
.doc-footer__page {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  color: var(--content-static-tertiary);
}

/* ── Print ──────────────────────────────────────────────────────
   Each .doc-page IS one PDF page — no browser-added margins, no
   scaling. Preview-only chrome (page background, centering, gap
   between pages) must live in the consuming page's own <style>,
   never here. */
@media print {
  @page { size: 1290px 1670px; margin: 0; }
  html, body { margin: 0; padding: 0; }
}

/* ── base/social-layout.css ── */
/* =============================================================
   SOCIAL LAYOUT — the fixed canvas for social-media assets
   See CLAUDE.md "Social assets" and docs/social-design-brain.md.
   Source of truth: the Figma file "2026 Social media redesign".

   A social asset is a single fixed-size graphic exported as an image
   for Instagram / LinkedIn / X. This file owns the canvas only: its
   size, its pinned token tier and its background. What goes on it is
   a template from components/social/*.

   HALF-SIZE CANVAS, @2x EXPORT. Every canvas is authored at HALF its
   platform size and exported at device scale factor 2. Platform sizes
   are too large for the design system's type and spacing scales — at
   1080px wide, H1 reads like a caption — so instead of a separate
   social type scale, the canvas is halved and the system's own tokens
   are used unchanged. data-format names the EXPORT size:

     data-format     canvas (1x)   export (@2x)
     1080x1350       540×675       1080×1350   4:5 portrait feed post
     1080x1080       540×540       1080×1080   square feed post
     1380x1280       690×640       1380×1280
     1920x1080       960×540       1920×1080   16:9

   The desktop token tier is pinned on the canvas rather than left to
   the ambient viewport: a 540px canvas sits far below the 1280px
   token breakpoint and would otherwise pick up the mobile type scale
   and mobile radii.
   ============================================================= */

.social-canvas {
  /* Scope the shared grid system (base/website-layout.css) to a fixed
     12-column, no-column-padding grid — same technique as .deck-slide
     and .op-page. */
  --grid-columns: 12;
  --grid-gutter: 8px;
  --grid-page-padding: 0;
  --grid-column-padding: 0;

  /* Desktop token tier, pinned. Mirrors the @media (min-width:1280px)
     blocks in tokens/typography.css and tokens/sizes.css — only the
     tokens that differ from the mobile/tablet base are restated. */
  --size-display:    64px;
  --size-h1:         48px;
  --size-h2:         32px;
  --size-h3:         24px;
  --size-h4:         18px;
  --size-h5:         16px;
  --size-paragraph:  18px;
  --size-small-text: 16px;
  --size-caption:    14px;

  --line-height-display:    72px;
  --line-height-h1:         58px;
  --line-height-h2:         40px;
  --line-height-h3:         32px;
  --line-height-h5:         22px;
  --line-height-paragraph:  30px;
  --line-height-small-text: 26px;
  --line-height-caption:    20px;

  --letter-spacing-display: -2.8px;
  --letter-spacing-h1:      -0.96px;
  --letter-spacing-h2:      -0.64px;
  --letter-spacing-h3:      -0.24px;
  --letter-spacing-h4:       0px;

  --radius-card-regular: var(--radius-5);
  --radius-panel:        var(--radius-5);

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-primary);
  font-family: var(--family-body);
}

/* ── Formats (named by export size; canvas is half) ─────────── */

.social-canvas[data-format="1080x1350"] { width: 540px; height: 675px; }
.social-canvas[data-format="1080x1080"] { width: 540px; height: 540px; }
.social-canvas[data-format="1380x1280"] { width: 690px; height: 640px; }
.social-canvas[data-format="1920x1080"] { width: 960px; height: 540px; }

/* [data-grid-span] in base/website-layout.css only applies its span above
   an 800px VIEWPORT — and a fixed canvas must not depend on the viewport.
   Restate the spans unconditionally inside the canvas. */
.social-canvas [data-grid-span="1"]  { grid-column: span 1;  }
.social-canvas [data-grid-span="2"]  { grid-column: span 2;  }
.social-canvas [data-grid-span="3"]  { grid-column: span 3;  }
.social-canvas [data-grid-span="4"]  { grid-column: span 4;  }
.social-canvas [data-grid-span="5"]  { grid-column: span 5;  }
.social-canvas [data-grid-span="6"]  { grid-column: span 6;  }
.social-canvas [data-grid-span="7"]  { grid-column: span 7;  }
.social-canvas [data-grid-span="8"]  { grid-column: span 8;  }
.social-canvas [data-grid-span="9"]  { grid-column: span 9;  }
.social-canvas [data-grid-span="10"] { grid-column: span 10; }
.social-canvas [data-grid-span="11"] { grid-column: span 11; }
.social-canvas [data-grid-span="12"] { grid-column: span 12; }

/* ── Background layers ───────────────────────────────────────── */
/* data-layer picks the surface, data-theme="dark" flips the token set
   underneath it. A template may set its own background instead — the
   customer-proof templates do (brand-layer-1 under data-theme="dark"). */

.social-canvas[data-layer="0"] { background: var(--background-static-gray-layer-0); }
.social-canvas[data-layer="1"] { background: var(--background-static-gray-layer-1); }
.social-canvas[data-layer="2"] { background: var(--background-static-gray-layer-2); }
.social-canvas[data-layer="3"] { background: var(--background-static-gray-layer-3); }

/* Brand purple. Under data-theme="dark", brand-layer-1 is purple-70 and
   content-static-primary is white — the pairing every 2026 template uses,
   with no repointing of content tokens needed. */
.social-canvas[data-layer="brand"] { background: var(--background-static-brand-layer-1); }

/* ── Export preview ──────────────────────────────────────────── */
/* The page that hosts one canvas. Not part of the asset: export by
   screenshotting the .social-canvas element at device scale factor 2. */
.social-preview {
  margin: 0;
  padding: var(--spacing-7);
  background: var(--background-static-gray-layer-3);
}

/* ── base/webinar-layout.css ── */
/* =============================================================
   WEBINAR LAYOUT — the fixed canvas for webinar promo assets
   See CLAUDE.md "Webinar assets" and docs/webinar-design-brain.md.
   Source of truth: the Figma file "2026 redesign elements", section
   "Ready" (figma.com/design/zObRyygmN4ipsqnceZjT4P, node 9:1905).

   A webinar asset is a single fixed-size graphic that announces one
   webinar in one placement: an in-app notification, an email banner,
   a website hero. This file owns the canvas only: its size and its
   pinned token tier. What goes on it is a template from
   components/webinar/*.

   FULL-SIZE CANVAS, 1x EXPORT. Unlike social assets, the canvas is
   authored at its export size: the Figma frames use the desktop type
   scale at 1:1 (H1 48px on the 1400px hero, H2 32px on the banners).
   data-format names the canvas and export size:

     data-format     canvas = export   placement
     1080x450        1080×450          in-app notification
     1200x400        1200×400          email banner
     1400x780        1400×780          website hero
     1080x1350       1080×1350         LinkedIn post
     1200x628        1200×628          ad, landscape
     1200x1200       1200×1200         ad, square
     1080x1080       1080×1080         ad, square
     628x1200        628×1200          ad, portrait
     300x250         300×250           ad, medium rectangle
     728x90          728×90            ad, leaderboard

   The desktop token tier is pinned on the canvas rather than left to
   the ambient viewport, so a canvas previewed in a narrow window keeps
   its real type sizes and radii.

   Adding a format: add its size rule below, then its spacing and
   per-speaker-count rules in the template's CSS (see
   components/webinar/webinar-banner/webinar-banner.css).
   ============================================================= */

.webinar-canvas {
  /* Desktop token tier, pinned. Mirrors the @media (min-width:1280px)
     blocks in tokens/typography.css and tokens/sizes.css. */
  --size-display:    64px;
  --size-h1:         48px;
  --size-h2:         32px;
  --size-h3:         24px;
  --size-h4:         18px;
  --size-h5:         16px;
  --size-paragraph:  18px;
  --size-small-text: 16px;
  --size-caption:    14px;

  --line-height-display:    72px;
  --line-height-h1:         58px;
  --line-height-h2:         40px;
  --line-height-h3:         32px;
  --line-height-h4:         24px;
  --line-height-h5:         22px;
  --line-height-paragraph:  30px;
  --line-height-small-text: 26px;
  --line-height-caption:    20px;

  --letter-spacing-display: -2.8px;
  --letter-spacing-h1:      -0.96px;
  --letter-spacing-h2:      -0.64px;
  --letter-spacing-h3:      -0.24px;
  --letter-spacing-h4:       0px;
  --letter-spacing-h5:       0.16px;

  --radius-card-regular: var(--radius-5);
  --radius-panel:        var(--radius-5);

  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  font-family: var(--family-body);
}

/* ── Formats (canvas = export size) ─────────────────────────── */

/* --webinar-w / --webinar-h expose the canvas size to the template
   (the side compositions size their visual from the canvas height). */
.webinar-canvas { width: var(--webinar-w); height: var(--webinar-h); }
.webinar-canvas[data-format="1080x450"]  { --webinar-w: 1080px; --webinar-h: 450px; }
.webinar-canvas[data-format="1200x400"]  { --webinar-w: 1200px; --webinar-h: 400px; }
.webinar-canvas[data-format="1400x780"]  { --webinar-w: 1400px; --webinar-h: 780px; }
.webinar-canvas[data-format="1080x1350"] { --webinar-w: 1080px; --webinar-h: 1350px; }
.webinar-canvas[data-format="1200x628"]  { --webinar-w: 1200px; --webinar-h: 628px; }
.webinar-canvas[data-format="1200x1200"] { --webinar-w: 1200px; --webinar-h: 1200px; }
.webinar-canvas[data-format="1080x1080"] { --webinar-w: 1080px; --webinar-h: 1080px; }
.webinar-canvas[data-format="628x1200"]  { --webinar-w: 628px;  --webinar-h: 1200px; }
.webinar-canvas[data-format="300x250"]   { --webinar-w: 300px;  --webinar-h: 250px; }
.webinar-canvas[data-format="728x90"]    { --webinar-w: 728px;  --webinar-h: 90px; }

/* ── Export preview ──────────────────────────────────────────── */
/* The page that hosts one or more canvases. Not part of the asset:
   export by screenshotting the .webinar-canvas element at device scale
   factor 1. */
.webinar-preview {
  margin: 0;
  padding: var(--spacing-7);
  background: var(--background-static-gray-layer-3);
}


/* ── Components / Atomic ─────────────────────────────────────── */
/* ── components/atomic/avatar/avatar.css ── */
/* ── Avatar ────────────────────────────────────────────
   Figma: Components / Atomic / Avatar
   Visual variant properties (data attributes):
     data-type : icon | photo
     data-size : 24 | 32 | 48 | 64 | 80 | 104
   Content:
     icon  → no child elements needed, icon is rendered via CSS
     photo → <img class="avatar__photo" src="…" alt="Person name">
   Notes:
     icon  = placeholder, used when no real photo is available yet
     photo = real person photo, always provide a descriptive alt text
   ──────────────────────────────────────────────────── */

.avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* ── Sizes ──────────────────────────────────────────── */

.avatar[data-size="104"] { width: 104px; height: 104px; }
.avatar[data-size="80"]  { width: 80px;  height: 80px;  }
.avatar[data-size="64"]  { width: 64px;  height: 64px;  }
.avatar[data-size="48"]  { width: 48px;  height: 48px;  }
.avatar[data-size="32"]  { width: 32px;  height: 32px;  }
.avatar[data-size="24"]  { width: 24px;  height: 24px;  }

/* ── Icon type ──────────────────────────────────────── */

.avatar[data-type="icon"] {
  background-color: var(--background-static-gray-layer-3);
}

.avatar[data-type="icon"]::before {
  content: '';
  position: absolute;
  top: 18.75%;
  left: 18.75%;
  right: 18.75%;
  bottom: -25%;
  background-color: var(--color-non-semantic-gray-40);
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTcwIiBmaWxsPSJub25lIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MiIgcj0iMzQiIGZpbGw9IiNiMWIwYzAiLz4NCiAgPGVsbGlwc2UgY3g9IjUwIiBjeT0iMTQ2IiByeD0iNTQiIHJ5PSI0NCIgZmlsbD0iI2IxYjBjMCIvPg0KPC9zdmc+DQo=');
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTcwIiBmaWxsPSJub25lIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MiIgcj0iMzQiIGZpbGw9IiNiMWIwYzAiLz4NCiAgPGVsbGlwc2UgY3g9IjUwIiBjeT0iMTQ2IiByeD0iNTQiIHJ5PSI0NCIgZmlsbD0iI2IxYjBjMCIvPg0KPC9zdmc+DQo=');
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
}

/* ── Photo type ─────────────────────────────────────── */

.avatar[data-type="photo"] .avatar__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── components/atomic/badge/badge.css ── */
/* ── Badge ───────────────────────────────────────────────────────
   Figma: Components / Atomic / Badge (node-id=3503-5269)
   Visual variant properties (data attributes on .badge):
     data-size  : l (default) | m
     data-style : bordered (default) | filled | blank | text
     data-interactive : present — enables hover/active states
                        (Figma "interactive=true"). Omit for a static,
                        read-only badge; a static badge never reacts to
                        the pointer.
   Element presence (include or omit, never display:none):
     .badge__leading-icon — leadingIcon=true (16×16 inline svg)
     .badge__clear        — deletable=true
   CSS-driven states (only when data-interactive is present):
     :hover / :active     — interaction background / content colors
     :focus-visible       — purple focus ring
   Notes:
     - Render an interactive badge as a <button> (or <a>) so it is
       focusable and announced correctly; a static one is a <span>.
     - The border is an inset box-shadow, not a real border, so every
       style shares the exact same height — same technique the Button
       atomic uses for its outlined type. Figma strokes don't affect
       auto-layout size either, so this matches the design 1:1.
     - Figma draws the focused state as a 4px border, which would shift
       layout. We use the shared 2px outline + 2px offset ring instead,
       identical to .btn:focus-visible.
     - The filled style layers the interaction color OVER its alpha
       fill via background-image, since both are translucent tokens and
       the fill must stay visible underneath.
     - Heights: L = 36px (20 line-height + 2×8), M = 28px (20 + 2×4),
       matching the Input chip atomic.
   ──────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.badge {
  /* reset (no global reset.css for interactive elements yet) */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: var(--radius-full);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  background: var(--background-interaction-default);
  color: var(--content-static-secondary);

  transition-property: background, color, box-shadow;
  transition-duration: 120ms;
  transition-timing-function: ease;
}

.badge[data-interactive] {
  cursor: pointer;
  user-select: none;
}

/* ── Size variants ───────────────────────────────────────────── */

.badge[data-size="l"],
.badge:not([data-size]) {
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.badge[data-size="m"] {
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Style: bordered (default) ───────────────────────────────── */

.badge[data-style="bordered"],
.badge:not([data-style]) {
  box-shadow: inset 0 0 0 1px var(--border-interaction-default);
}

.badge[data-style="bordered"][data-interactive]:hover,
.badge:not([data-style])[data-interactive]:hover {
  background: var(--background-interaction-hover);
  box-shadow: inset 0 0 0 1px var(--border-interaction-hover);
}

.badge[data-style="bordered"][data-interactive]:active,
.badge:not([data-style])[data-interactive]:active {
  background: var(--background-interaction-active);
  box-shadow: inset 0 0 0 1px var(--border-interaction-active);
}

/* ── Style: filled ───────────────────────────────────────────── */

.badge[data-style="filled"] {
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-primary);
  overflow: hidden;
}

.badge[data-style="filled"][data-interactive]:hover {
  background-image: linear-gradient(var(--background-interaction-hover), var(--background-interaction-hover));
}

.badge[data-style="filled"][data-interactive]:active {
  background-image: linear-gradient(var(--background-interaction-active), var(--background-interaction-active));
}

/* ── Style: blank ────────────────────────────────────────────── */

.badge[data-style="blank"] {
  background: var(--background-interaction-default);
}

.badge[data-style="blank"][data-interactive]:hover {
  background: var(--background-interaction-hover);
}

.badge[data-style="blank"][data-interactive]:active {
  background: var(--background-interaction-active);
}

/* ── Style: text ─────────────────────────────────────────────── */
/* No padding, no fill, no border — a bare label with its own gap. */

.badge[data-style="text"] {
  padding: 0;
  gap: var(--spacing-3);
  background: none;
  box-shadow: none;
}

.badge[data-style="text"][data-interactive] {
  color: var(--content-interaction-default);
}

.badge[data-style="text"][data-interactive]:hover {
  color: var(--content-interaction-hover);
}

.badge[data-style="text"][data-interactive]:active {
  color: var(--content-interaction-active);
}

/* ── Focus ring (matches .btn) ───────────────────────────────── */

.badge[data-interactive]:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 2px;
}

/* ── Leading icon ────────────────────────────────────────────── */
/* Inherits color from the badge via stroke="currentColor". */

.badge__leading-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
}

.badge__leading-icon svg { display: block; }

/* ── Label ───────────────────────────────────────────────────── */

.badge__label {
  color: inherit;
}

/* ── Clear button (same spec as node-id=5138-6913) ──────────── */

.badge__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  background: var(--background-interaction-default);
  cursor: pointer;
  color: inherit;
  transition: background 120ms ease;
}

.badge__clear:hover  { background: var(--background-interaction-hover);  }
.badge__clear:active { background: var(--background-interaction-active); }

.badge__clear:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 1px;
}

/* ── components/atomic/button/button.css ── */
/* ── Button ────────────────────────────────────────────
   Figma: Components / Atomic / Button
   Visual variant properties (data attributes):
     data-type : primary | secondary | outlined | ghost | gradient
                 | text-purple | text-black
     data-size : l | m
   State (handled by CSS, no attribute needed):
     :hover            — Hover
     :active           — Active
     :focus-visible    — Focused (purple focus ring)
     :disabled / [disabled] — Disabled (30% opacity)
   Content (element presence):
     .btn__icon (leading)   — include before .btn__label for has-leading-icon
     .btn__icon (trailing)  — include after  .btn__label for has-trailing-icon
     .btn__chevron          — include for split-button (chevron-down)
   Notes:
     - Icons use inline SVG from ../icon/svg/20x20/ with stroke="currentColor",
       so they automatically match the button's text color in every type/state.
     - text-purple / text-black have no background, border, or padding.
     - Outlined uses an inset box-shadow (not border) so it shares the
       exact height of the filled types — no layout shift.
   ──────────────────────────────────────────────────── */

.btn {
  /* reset (no global reset.css yet) */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;

  border-radius: var(--radius-button);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);

  transition-property: background, color, box-shadow, opacity;
  transition-duration: 120ms;
  transition-timing-function: ease;
}

/* ── Sizes ──────────────────────────────────────────── */

.btn[data-size="l"] {
  gap: var(--spacing-button-l-gap);
  padding: var(--spacing-button-l-vertical) var(--spacing-button-l-horizontal);
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.btn[data-size="m"] {
  gap: var(--spacing-button-m-gap);
  padding: var(--spacing-button-m-vertical) var(--spacing-button-m-horizontal);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Label & icons ──────────────────────────────────── */

.btn__label {
  color: inherit;
}

.btn__icon,
.btn__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Type: Primary ──────────────────────────────────── */

.btn[data-type="primary"] {
  background: var(--background-button-primary-default);
  color: var(--content-static-inverted);
}
.btn[data-type="primary"]:hover  { background: var(--background-button-primary-hover); }
.btn[data-type="primary"]:active { background: var(--background-button-primary-active); }

/* ── Type: Secondary ────────────────────────────────── */

.btn[data-type="secondary"] {
  background: var(--background-button-secondary-default);
  color: var(--content-static-primary);
}
.btn[data-type="secondary"]:hover  { background: var(--background-button-secondary-hover); }
.btn[data-type="secondary"]:active { background: var(--background-button-secondary-active); }

/* ── Type: Outlined ─────────────────────────────────── */
/* Transparent fill + inset 1px border (box-shadow → no size shift). */

.btn[data-type="outlined"] {
  background: var(--background-button-ghost-default);
  color: var(--content-static-primary);
  box-shadow: inset 0 0 0 1px var(--border-button-default);
}
.btn[data-type="outlined"]:hover {
  background: var(--background-button-ghost-hover);
  box-shadow: inset 0 0 0 1px var(--border-button-hover);
}
.btn[data-type="outlined"]:active {
  background: var(--background-button-ghost-active);
  box-shadow: inset 0 0 0 1px var(--border-button-active);
}

/* ── Type: Ghost ────────────────────────────────────── */

.btn[data-type="ghost"] {
  background: var(--background-button-ghost-default);
  color: var(--content-static-primary);
}
.btn[data-type="ghost"]:hover  { background: var(--background-button-ghost-hover); }
.btn[data-type="ghost"]:active { background: var(--background-button-ghost-active); }

/* ── Type: Gradient ─────────────────────────────────── */

.btn[data-type="gradient"] {
  background: var(--background-button-gradient-default);
  color: var(--content-static-inverted);
}
.btn[data-type="gradient"]:hover  { background: var(--background-button-gradient-hover); }
.btn[data-type="gradient"]:active { background: var(--background-button-gradient-active); }

/* ── Type: Text Purple ──────────────────────────────── */

.btn[data-type="text-purple"] {
  padding: 0;
  background: none;
  color: var(--content-link-default);
}
.btn[data-type="text-purple"]:hover  { color: var(--content-link-hover); }
.btn[data-type="text-purple"]:active { color: var(--content-link-active); }

/* ── Type: Text Black ───────────────────────────────── */

.btn[data-type="text-black"] {
  padding: 0;
  background: none;
  color: var(--content-interaction-default);
}
.btn[data-type="text-black"]:hover  { color: var(--content-interaction-hover); }
.btn[data-type="text-black"]:active { color: var(--content-interaction-active); }

/* ── State: Focused ─────────────────────────────────── */

.btn:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 2px;
}

/* ── State: Disabled ────────────────────────────────── */

.btn:disabled,
.btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── components/atomic/btn-icon/btn-icon.css ── */
/* ── Button Icon ───────────────────────────────────────
   Figma: Components / Atomic / Button Icon
   Visual variant properties (data attributes):
     data-type  : primary | secondary | outlined | ghost | gradient
     data-size  : l | m
     data-shape : square | circle
   State (handled by CSS, no attribute needed):
     :hover            — Hover
     :active           — Active
     :focus-visible    — Focused (purple focus ring)
     :disabled         — Disabled (30% opacity)
   Content:
     .btn-icon__icon — one 20×20 inline SVG with stroke="currentColor"
   Notes:
     - Padding is equal on all sides (vertical spacing token) to keep
       the tap area square; shape only toggles border-radius.
     - Icon inherits color from the root element via currentColor.
   ──────────────────────────────────────────────────── */

.btn-icon {
  /* reset */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;

  border-radius: var(--radius-button);

  transition-property: background, color, box-shadow, opacity;
  transition-duration: 120ms;
  transition-timing-function: ease;
}

/* ── Sizes ──────────────────────────────────────────── */

.btn-icon[data-size="l"] { padding: var(--spacing-button-l-vertical); }
.btn-icon[data-size="m"] { padding: var(--spacing-button-m-vertical); }

/* ── Shape ──────────────────────────────────────────── */

.btn-icon[data-shape="circle"] { border-radius: var(--radius-full); }

/* ── Icon slot ──────────────────────────────────────── */

.btn-icon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ── Type: Primary ──────────────────────────────────── */

.btn-icon[data-type="primary"] {
  background: var(--background-button-primary-default);
  color: var(--content-static-inverted);
}
.btn-icon[data-type="primary"]:hover  { background: var(--background-button-primary-hover); }
.btn-icon[data-type="primary"]:active { background: var(--background-button-primary-active); }

/* ── Type: Secondary ────────────────────────────────── */

.btn-icon[data-type="secondary"] {
  background: var(--background-button-secondary-default);
  color: var(--content-static-primary);
}
.btn-icon[data-type="secondary"]:hover  { background: var(--background-button-secondary-hover); }
.btn-icon[data-type="secondary"]:active { background: var(--background-button-secondary-active); }

/* ── Type: Outlined ─────────────────────────────────── */
/* Transparent fill + inset 1px border (box-shadow → no size shift). */

.btn-icon[data-type="outlined"] {
  background: var(--background-button-ghost-default);
  color: var(--content-static-primary);
  box-shadow: inset 0 0 0 1px var(--border-button-default);
}
.btn-icon[data-type="outlined"]:hover {
  background: var(--background-button-ghost-hover);
  box-shadow: inset 0 0 0 1px var(--border-button-hover);
}
.btn-icon[data-type="outlined"]:active {
  background: var(--background-button-ghost-active);
  box-shadow: inset 0 0 0 1px var(--border-button-active);
}

/* ── Type: Ghost ────────────────────────────────────── */

.btn-icon[data-type="ghost"] {
  background: var(--background-button-ghost-default);
  color: var(--content-static-primary);
}
.btn-icon[data-type="ghost"]:hover  { background: var(--background-button-ghost-hover); }
.btn-icon[data-type="ghost"]:active { background: var(--background-button-ghost-active); }

/* ── Type: Gradient ─────────────────────────────────── */

.btn-icon[data-type="gradient"] {
  background: var(--background-button-gradient-default);
  color: var(--content-static-inverted);
}
.btn-icon[data-type="gradient"]:hover  { background: var(--background-button-gradient-hover); }
.btn-icon[data-type="gradient"]:active { background: var(--background-button-gradient-active); }

/* ── State: Focused ─────────────────────────────────── */

.btn-icon:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 2px;
}

/* ── State: Disabled ────────────────────────────────── */

.btn-icon:disabled,
.btn-icon[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── components/atomic/btn-play/btn-play.css ── */
/* ── Button Play ──────────────────────────────────────
   Figma: Components / Atomic / Button Play
   Visual variant properties (data attributes):
     data-style : black | gradient
   Content toggle (element presence, not attribute):
     .btn-play__icon  — for video usage; contains a 32×32 inline SVG
     .btn-play__label — for demo usage; contains "LAUNCH\nDEMO" text
   State (handled by CSS, no attribute needed):
     :hover            — Hover
     :active           — Active
     :focus-visible    — Focused (purple focus ring)
   Notes:
     - Always circle (radius-full); padding equal on all sides.
     - The play icon uses the design system play.svg path rendered
       as fill="currentColor" (solid triangle, not stroked).
     - .btn-play__label font-size (8px) is bespoke to this component:
       no system token maps to it, but it is the only size that fits
       "LAUNCH DEMO" inside the 40×40 content area.
   ──────────────────────────────────────────────────── */

.btn-play {
  /* reset */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;

  border-radius: var(--radius-full);
  padding: var(--spacing-button-l-vertical);

  transition-property: background, box-shadow;
  transition-duration: 120ms;
  transition-timing-function: ease;
}

/* ── Style: Black ───────────────────────────────────── */

.btn-play[data-style="black"] {
  background: var(--background-button-primary-default);
  color: var(--content-static-inverted);
}
.btn-play[data-style="black"]:hover  { background: var(--background-button-primary-hover); }
.btn-play[data-style="black"]:active { background: var(--background-button-primary-active); }

/* ── Style: Gradient ────────────────────────────────── */

.btn-play[data-style="gradient"] {
  background: var(--background-button-gradient-default);
  color: var(--content-static-inverted);
}
.btn-play[data-style="gradient"]:hover  { background: var(--background-button-gradient-hover); }
.btn-play[data-style="gradient"]:active { background: var(--background-button-gradient-active); }

/* ── State: Focused ─────────────────────────────────── */

.btn-play:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 2px;
}

/* ── Icon slot (video usage) ────────────────────────── */

.btn-play__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* ── Label (demo usage) ─────────────────────────────── */

.btn-play__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--family-body);
  font-size: 8px; /* bespoke: fits "LAUNCH DEMO" in the 40×40 content area */
  font-weight: var(--weight-bold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: var(--content-static-inverted);
}

/* ── components/atomic/icon/icon.css ── */
/* ── Icon ────────────────────────────────────────────────
   Figma: Components / Atomic / Icon
   Visual variant properties (data attributes):
     data-size : 16 | 20 | 24
   Content:
     src — path to the SVG: svg/<size>x<size>/<name>.svg
     alt — always set to "" (decorative) or a descriptive string
   Notes:
     181 icons available across three sizes.
     SVG stroke color is baked in from Figma; icons are not
     tintable via CSS unless the SVGs are inlined.
   ──────────────────────────────────────────────────── */

.icon {
  display: inline-block;
  flex-shrink: 0;
}

.icon[data-size="16"] { width: 16px; height: 16px; }
.icon[data-size="20"] { width: 20px; height: 20px; }
.icon[data-size="24"] { width: 24px; height: 24px; }

/* ── components/atomic/link/link.css ── */
/* ── Link ────────────────────────────────────────────────
   Figma: Components / Atomic / Link
   Visual variant properties (data attributes):
     data-variant : default | high-contrast | heading
   State (handled by CSS, no attribute needed):
     :hover         — Hover
     :active        — Active
     :focus-visible — Focused (purple focus ring)
     :visited       — Visited (opacity: 0.6; heading: 0.7)
   Notes:
     - Inline only — inherits font-size, font-weight, and
       line-height from the parent element.
     - default and high-contrast are for body/UI text sizes.
     - heading is for h1–h4 styles only.
   ──────────────────────────────────────────────────────── */

.link {
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 2px;
  cursor: pointer;
  transition-property: color, opacity;
  transition-duration: 120ms;
  transition-timing-function: ease;
}

/* ── Variant: Default ─────────────────────────────────── */

.link[data-variant="default"] {
  color: var(--content-interaction-hover);
  text-decoration-color: var(--border-link-default);
}
.link[data-variant="default"]:hover  { color: var(--content-interaction-hover); }
.link[data-variant="default"]:active { color: var(--content-interaction-active); }
.link[data-variant="default"]:visited { opacity: 0.6; }

/* ── Variant: High contrast ───────────────────────────── */

.link[data-variant="high-contrast"] {
  color: var(--content-link-default);
  text-decoration-color: var(--border-link-purple);
}
.link[data-variant="high-contrast"]:hover  { color: var(--content-link-hover); }
.link[data-variant="high-contrast"]:active { color: var(--content-link-active); }
.link[data-variant="high-contrast"]:visited { opacity: 0.6; }

/* ── Variant: Heading ─────────────────────────────────── */

.link[data-variant="heading"] {
  color: var(--content-interaction-hover);
  text-decoration-color: var(--border-link-default);
}
.link[data-variant="heading"]:hover  { color: var(--content-interaction-hover); }
.link[data-variant="heading"]:active { color: var(--content-interaction-active); }
.link[data-variant="heading"]:visited { opacity: 0.7; }

/* ── State: Focused ───────────────────────────────────── */

.link:focus-visible {
  outline: 2px solid var(--border-focus-default);
  outline-offset: 2px;
}

/* ── components/atomic/control/control.css ── */
/* ── Control ────────────────────────────────────────────
   Figma: Components / Atomic / Control
   Properties (data attributes on .control):
     data-control    : checkbox | radio
     data-label-size : l | m
     data-state      : error
   Native input drives all other states:
     type="checkbox" always — shape driven by data-control
     :checked            — Checked
     :indeterminate      — Indeterminate (checkbox only, set via JS)
     :disabled           — Disabled (opacity + pointer-events off)
   CSS-driven interactive states:
     .control:hover      — Hover
     .control:active     — Active
     input:focus-visible — Focus ring on indicator
   ──────────────────────────────────────────────────── */

/* ── Wrapper ─────────────────────────────────────────── */

.control {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

/* ── Native input (semantically present, visually hidden) */

.control__native {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* ── Indicator — the visible box / circle ────────────── */

.control__indicator {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--background-interaction-default);
  border: 1.5px solid var(--border-interaction-default);
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

/* Shape — driven by data-control on the wrapper */
.control[data-control="checkbox"] .control__indicator { border-radius: var(--radius-1); }
.control[data-control="radio"]    .control__indicator { border-radius: 50%; }

/* ── Checked / Indeterminate — filled dark background ── */

.control__native:checked + .control__indicator,
.control__native:indeterminate + .control__indicator {
  background: var(--background-button-primary-default);
  border-color: transparent;
}

/* ── Check icon (checkbox checked) ──────────────────── */

.control[data-control="checkbox"] .control__native:checked + .control__indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--content-static-inverted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.4167L7.00502 14.9218C7.27839 15.1951 7.72161 15.1951 7.99497 14.9218L17.5 5.41675' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.4167L7.00502 14.9218C7.27839 15.1951 7.72161 15.1951 7.99497 14.9218L17.5 5.41675' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Dash icon (checkbox indeterminate) ──────────────── */

.control[data-control="checkbox"] .control__native:indeterminate + .control__indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--content-static-inverted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16675 10L15.8334 10' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16675 10L15.8334 10' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Inner dot (radio checked) ───────────────────────── */

.control[data-control="radio"] .control__native:checked + .control__indicator::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--content-static-inverted);
}

/* ── Hover ───────────────────────────────────────────── */

.control:not([data-state="error"]):hover
  .control__native:not(:checked):not(:indeterminate) + .control__indicator {
  background: var(--background-interaction-hover);
  border-color: var(--border-interaction-hover);
}

.control:not([data-state="error"]):hover
  .control__native:checked + .control__indicator,
.control:not([data-state="error"]):hover
  .control__native:indeterminate + .control__indicator {
  background: var(--background-button-primary-hover);
  opacity: 0.8;
}

/* ── Active ──────────────────────────────────────────── */

.control:not([data-state="error"]):active
  .control__native:not(:checked):not(:indeterminate) + .control__indicator {
  background: var(--background-interaction-active);
  border-color: var(--border-interaction-active);
}

.control:not([data-state="error"]):active
  .control__native:checked + .control__indicator,
.control:not([data-state="error"]):active
  .control__native:indeterminate + .control__indicator {
  background: var(--background-button-primary-active);
  opacity: 0.6;
}

/* ── Focus ───────────────────────────────────────────── */

/* outline renders outside the element — not clipped by overflow:hidden */
.control__native:focus-visible + .control__indicator {
  outline: 4px solid var(--border-focus-default);
  outline-offset: 0;
}

/* ── Disabled ────────────────────────────────────────── */

.control:has(.control__native:disabled) {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Error ───────────────────────────────────────────── */

/* Error + unchecked checkbox */
.control[data-state="error"][data-control="checkbox"]
  .control__native:not(:checked):not(:indeterminate) + .control__indicator {
  background: var(--background-interaction-default);
  border-color: var(--border-interaction-error);
}

/* Error + unchecked radio (additional 60% opacity per Figma) */
.control[data-state="error"][data-control="radio"]
  .control__native:not(:checked) + .control__indicator {
  background: var(--background-interaction-default);
  border-color: var(--border-interaction-error);
  opacity: 0.6;
}

/* Error + checked / indeterminate — solid error fill */
.control[data-state="error"] .control__native:checked + .control__indicator,
.control[data-state="error"] .control__native:indeterminate + .control__indicator {
  background: var(--background-interaction-errorsolid);
  border-color: transparent;
  opacity: 1;
}

/* ── Label ───────────────────────────────────────────── */

.control__label {
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-interaction-default);
}

/* Size L (default when no attribute) */
.control[data-label-size="l"] .control__label,
.control:not([data-label-size]) .control__label {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

/* Size M */
.control[data-label-size="m"] .control__label {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* Label state colors — listed after hover/active so error stays red */
.control:hover .control__label  { color: var(--content-interaction-hover);  }
.control:active .control__label { color: var(--content-interaction-active); }
.control[data-state="error"] .control__label,
.control[data-state="error"]:hover .control__label,
.control[data-state="error"]:active .control__label { color: var(--content-interaction-error); }

/* ── components/atomic/dropdown-list/dropdown-list-item.css ── */
/* ── Dropdown List Item ─────────────────────────────────
   Figma: Components / Atomic / Dropdown list / Dropdown list item
   Visual variant properties (data attributes):
     data-size  : l | m
     data-state : hover | active | focused | selected
   Content (element presence):
     .dropdown-item__checkbox      — include for has-checkbox;
                                     shows tick when data-state="selected"
     .dropdown-item__leading-icon  — include for has-leading-icon (16×16)
     .dropdown-item__label         — always present
     .dropdown-item__trailing-icon — include for has-trailing-icon (16×16)
   Notes:
     - :hover / :active / :focus-visible drive real interaction;
       data-state="hover|active|focused" exist for static preview only.
     - data-state="selected" is persistent; hover does not override it.
   ──────────────────────────────────────────────────── */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  background: var(--background-interaction-default);
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background 100ms ease;
}

/* ── Sizes ──────────────────────────────────────────── */

.dropdown-item[data-size="l"] {
  padding: var(--spacing-dropdown-item-l-vertical) var(--spacing-dropdown-item-l-horizontal);
}

.dropdown-item[data-size="m"] {
  padding: var(--spacing-dropdown-item-m-vertical) var(--spacing-dropdown-item-m-horizontal);
}

/* ── Label ──────────────────────────────────────────── */

.dropdown-item__label {
  flex: 1 0 0;
  min-width: 0;
  word-break: break-word;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-primary);
}

.dropdown-item[data-size="l"] .dropdown-item__label {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.dropdown-item[data-size="m"] .dropdown-item__label {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Icons (leading & trailing) ─────────────────────── */

.dropdown-item__leading-icon,
.dropdown-item__trailing-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-static-secondary);
}

/* ── Checkbox indicator ─────────────────────────────── */

.dropdown-item__checkbox {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  background: var(--background-interaction-default);
  border: 1.5px solid var(--border-interaction-default);
  transition: background 100ms ease, border-color 100ms ease;
}

.dropdown-item[data-state="selected"] .dropdown-item__checkbox {
  background: var(--background-button-primary-default);
  border-color: transparent;
}

.dropdown-item[data-state="selected"] .dropdown-item__checkbox::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--content-static-inverted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.4167L7.00502 14.9218C7.27839 15.1951 7.72161 15.1951 7.99497 14.9218L17.5 5.41675' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.4167L7.00502 14.9218C7.27839 15.1951 7.72161 15.1951 7.99497 14.9218L17.5 5.41675' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Interactive & static states ────────────────────── */

.dropdown-item:hover:not([data-state="selected"]),
.dropdown-item[data-state="hover"] {
  background: var(--background-interaction-hover);
}

.dropdown-item:active:not([data-state="selected"]),
.dropdown-item[data-state="active"] {
  background: var(--background-interaction-active);
}

.dropdown-item:focus-visible,
.dropdown-item[data-state="focused"] {
  background: var(--background-interaction-default);
  outline: 2px solid var(--border-focus-default);
  outline-offset: -2px;
}

.dropdown-item[data-state="selected"] {
  background: var(--background-interaction-selectedsubtle);
}

/* ── components/atomic/dropdown-list/dropdown-search.css ── */
/* ── Dropdown Search ─────────────────────────────────────
   Figma: Components / Atomic / Dropdown list / Dropdown search
   Visual variant properties (data attributes):
     data-size  : l | m
   Content: always a text input + trailing search icon
   States driven by CSS pseudo-classes on .dropdown-search.
   ──────────────────────────────────────────────────── */

.dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: var(--background-interaction-default);
  border-bottom: 1px solid var(--border-interaction-default);
  transition: background 100ms ease;
}

.dropdown-search[data-size="l"] {
  padding: var(--spacing-dropdown-search-l-vertical) var(--spacing-dropdown-search-l-horizontal);
}

.dropdown-search[data-size="m"] {
  padding: var(--spacing-dropdown-search-m-vertical) var(--spacing-dropdown-search-m-horizontal);
}

/* ── Input ──────────────────────────────────────────── */

.dropdown-search__input {
  flex: 1 0 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
  color: var(--content-static-primary);
}

.dropdown-search__input::placeholder {
  color: var(--content-static-tertiary);
}

/* ── Search icon ────────────────────────────────────── */

.dropdown-search__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-static-secondary);
  pointer-events: none;
}

/* ── States ─────────────────────────────────────────── */

.dropdown-search:hover,
.dropdown-search:focus-within {
  background: var(--background-interaction-hover);
}

.dropdown-search:active {
  background: var(--background-interaction-active);
}

/* ── components/atomic/dropdown-list/dropdown-list.css ── */
/* ── Dropdown List ──────────────────────────────────────
   Figma: Components / Atomic / Dropdown list / Dropdown list
   Visual variant properties (data attributes):
     data-size : l | m
       Set matching data-size on each child .dropdown-search and .dropdown-item.
   Content (element presence):
     .dropdown-search (first child) — include for has-search
     .dropdown-item (one or more)   — list items
   ──────────────────────────────────────────────────── */

.dropdown-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--spacing-dropdown-list-padding);
  border-radius: var(--radius-3);
  border: 1px solid var(--border-interaction-default);
  background: var(--background-static-gray-layer-0);
  box-shadow: var(--shadow-elevation-m);
  overflow: hidden;
  box-sizing: border-box;
}

/* ── components/atomic/text-field/text-field.css ── */
/* ── Text field ─────────────────────────────────────────────────
   Figma: Components / Atomic / Text field
   Properties (data attributes on .text-field):
     data-size  : l (default) | m
     data-state : error | disabled
   Element presence (include or omit, never display:none):
     .text-field__leading-icon   — leadingIcon=true
     .text-field__prefix         — prefix=true
     .text-field__suffix         — suffix=true
     .text-field__trailing-icon  — trailingIcon=true, no clear button
     .text-field__clear          — clearable=true; `hidden` toggled by JS
   CSS-driven states:
     :hover on .text-field        — hover background
     :focus-within on .text-field — focus ring + border color
     :disabled on native input    — drives disabled via :has()
   Clear button (subcomponent, Figma node-id=5138-6913):
     always in DOM when clearable=true; visibility via `hidden` attr
     20×20px total (16px icon + 2px padding all sides), border-radius: 2px
   ──────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.text-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-interaction-default);
  border-radius: 6px;
  background: var(--background-interaction-default);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* ── Size variants ───────────────────────────────────────────── */

.text-field[data-size="l"],
.text-field:not([data-size]) {
  padding: var(--spacing-input-l-vertical) var(--spacing-input-l-horizontal);
  gap: var(--spacing-input-l-gap);
}

.text-field[data-size="m"] {
  padding: var(--spacing-input-m-vertical) var(--spacing-input-m-horizontal);
  gap: var(--spacing-input-m-gap);
}

/* ── Native input ────────────────────────────────────────────── */

.text-field__native {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  /* The UA default on <input> is padding: 1px 2px, which appearance:none
     does NOT clear — left in, it makes every text field 2px taller and
     insets the text 2px, so the container no longer matches its Figma
     frame. Reset it the same way .dropdown-search__input already does. */
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.text-field__native::placeholder {
  color: var(--content-static-tertiary);
}

.text-field[data-size="l"] .text-field__native,
.text-field:not([data-size]) .text-field__native {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.text-field[data-size="m"] .text-field__native {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Icon slots ──────────────────────────────────────────────── */

.text-field__leading-icon,
.text-field__trailing-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--content-interaction-default);
}

/* ── Prefix / suffix ─────────────────────────────────────────── */

.text-field__prefix,
.text-field__suffix {
  flex-shrink: 0;
  color: var(--content-interaction-default);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.text-field[data-size="l"] .text-field__prefix,
.text-field:not([data-size]) .text-field__prefix,
.text-field[data-size="l"] .text-field__suffix,
.text-field:not([data-size]) .text-field__suffix {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
}

.text-field[data-size="m"] .text-field__prefix,
.text-field[data-size="m"] .text-field__suffix {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
}

/* ── Clear button ────────────────────────────────────────────── */

.text-field__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  background: var(--background-interaction-default);
  cursor: pointer;
  color: var(--content-interaction-default);
  transition: background 120ms ease;
}

.text-field__clear:hover  { background: var(--background-interaction-hover);  }
.text-field__clear:active { background: var(--background-interaction-active); }

/* ── Interactive states ──────────────────────────────────────── */

.text-field:not([data-state="error"]):not([data-state="disabled"]):hover {
  background: var(--background-interaction-hover);
}

.text-field:focus-within {
  border-color: var(--border-focus-default);
  box-shadow: 0 0 0 3px var(--border-focus-default);
  background: var(--background-interaction-focus);
}

/* ── Error ───────────────────────────────────────────────────── */

.text-field[data-state="error"] {
  border-color: var(--border-interaction-error);
}

.text-field[data-state="error"]:focus-within {
  border-color: var(--border-interaction-error);
  box-shadow: 0 0 0 3px var(--border-interaction-error);
}

/* ── Disabled ────────────────────────────────────────────────── */

.text-field[data-state="disabled"],
.text-field:has(.text-field__native:disabled) {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── components/atomic/input-chip/input-chip.css ── */
/* ── Input chip ──────────────────────────────────────────────────
   Figma: Components / Atomic / Input chip (node-id=5138-6770)
   Properties (data attributes on .input-chip):
     data-size : l (default) | m
   Element presence (include or omit, never display:none):
     .input-chip__leading-icon — leadingIcon=true
     .input-chip__clear        — deletable=true
   ──────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.input-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--background-static-alpha-layer-2);
  white-space: nowrap;
}

/* ── Size variants ───────────────────────────────────────────── */

.input-chip[data-size="l"],
.input-chip:not([data-size]) {
  height: 36px;
  padding: 0 8px;
  gap: 6px;
}

.input-chip[data-size="m"] {
  height: 28px;
  padding: 0 4px;
  gap: 2px;
}

/* ── Leading icon ────────────────────────────────────────────── */

.input-chip__leading-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--content-static-secondary);
}

/* ── Label ───────────────────────────────────────────────────── */

.input-chip__label {
  padding: 0 6px;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-chip[data-size="l"] .input-chip__label,
.input-chip:not([data-size]) .input-chip__label {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.input-chip[data-size="m"] .input-chip__label {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Clear button (same spec as node-id=5138-6913) ──────────── */

.input-chip__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  background: var(--background-interaction-default);
  cursor: pointer;
  color: var(--content-static-secondary);
  transition: background 120ms ease;
}

.input-chip__clear:hover  { background: var(--background-interaction-hover);  }
.input-chip__clear:active { background: var(--background-interaction-active); }

/* ── components/atomic/select/select.css ── */
/* ── Select ─────────────────────────────────────────────────────
   Figma: Components / Atomic / Select (node-id=3493-4239)
   Properties (data attributes on .select):
     data-size  : l (default) | m
     data-mode  : single (default) | multi
     data-state : error | disabled
     data-open  : present when dropdown is open (JS-managed)
   Element presence (include or omit, never display:none):
     .select__leading-icon   — leadingIcon=true
     .select__prefix         — prefix=true
     .select__placeholder    — no selection; JS toggles `hidden`
     .select__value          — single-select complete; JS inserts + toggles `hidden`
     .select__chips          — multi-select mode; always present when data-mode="multi"
     .select__overflow-count — overflow indicator; JS inserts "+N" text + toggles `hidden`
     .select__clear          — clearable=true; always in DOM, JS toggles `hidden`
     .select__dropdown       — reuses .dropdown-list; JS toggles `hidden`
   CSS-driven states:
     :hover on .select        — hover background
     [data-open] on .select   — focus ring, border color, chevron flip
     [data-state="error"]     — red border
     [data-state="disabled"]  — 60% opacity, pointer-events off
   ──────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.select {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-interaction-default);
  border-radius: 6px;
  background: var(--background-interaction-default);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* ── Size variants ───────────────────────────────────────────── */

.select[data-size="l"],
.select:not([data-size]) {
  padding: var(--spacing-input-l-vertical) var(--spacing-input-l-horizontal);
  gap: var(--spacing-input-l-gap);
}

.select[data-size="m"] {
  padding: var(--spacing-input-m-vertical) var(--spacing-input-m-horizontal);
  gap: var(--spacing-input-m-gap);
}

/* Multi-select padding.
   Empty (placeholder shown): inherits the size's default padding above, which
   matches single-select height (52px L / 36px M).
   Filled (chips present): chips are 36px (L) / 28px (M) tall — taller than the
   placeholder line — so switch vertical + left padding to the smaller "filled"
   token. This keeps the total row height constant when chips are added,
   matching the Figma "Complete" state (node 5672:13958 / 5674:11398). */
.select[data-mode="multi"][data-size="l"]:has(.input-chip),
.select[data-mode="multi"]:not([data-size]):has(.input-chip) {
  padding-top: var(--spacing-input-l-filled);
  padding-bottom: var(--spacing-input-l-filled);
  padding-left: var(--spacing-input-l-filled);
}

.select[data-mode="multi"][data-size="m"]:has(.input-chip) {
  padding-top: var(--spacing-input-m-filled);
  padding-bottom: var(--spacing-input-m-filled);
  padding-left: var(--spacing-input-m-filled);
}

/* ── Icon slot ───────────────────────────────────────────────── */

.select__leading-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--content-interaction-default);
}

/* ── Prefix ──────────────────────────────────────────────────── */

.select__prefix {
  flex-shrink: 0;
  color: var(--content-interaction-default);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.select[data-size="l"] .select__prefix,
.select:not([data-size]) .select__prefix {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
}

.select[data-size="m"] .select__prefix {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
}

/* ── Placeholder ─────────────────────────────────────────────── */

.select__placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--content-static-tertiary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.select[data-size="l"] .select__placeholder,
.select:not([data-size]) .select__placeholder {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.select[data-size="m"] .select__placeholder {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Selected value (single-select) ─────────────────────────── */

.select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.select[data-size="l"] .select__value,
.select:not([data-size]) .select__value {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.select[data-size="m"] .select__value {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Chips row (multi-select) ────────────────────────────────── */

.select__chips {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

/* ── Overflow count ──────────────────────────────────────────── */

.select__overflow-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-label-l);
  white-space: nowrap;
}

.select[data-size="m"] .select__overflow-count {
  height: 28px;
  font-size: var(--size-label-m);
}

/* ── Clear button ────────────────────────────────────────────── */

.select__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  background: var(--background-interaction-default);
  cursor: pointer;
  color: var(--content-interaction-default);
  transition: background 120ms ease;
}

.select__clear:hover  { background: var(--background-interaction-hover);  }
.select__clear:active { background: var(--background-interaction-active); }

/* ── Chevron ─────────────────────────────────────────────────── */

.select__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--content-interaction-default);
  transition: transform 120ms ease;
}

.select[data-open] .select__chevron {
  transform: rotate(180deg);
}

/* ── Interactive states ──────────────────────────────────────── */

.select:not([data-state="error"]):not([data-state="disabled"]):not([data-open]):hover {
  background: var(--background-interaction-hover);
}

.select[data-open] {
  border-color: var(--border-focus-default);
  box-shadow: 0 0 0 3px var(--border-focus-default);
  background: var(--background-interaction-focus);
}

/* ── Error ───────────────────────────────────────────────────── */

.select[data-state="error"] {
  border-color: var(--border-interaction-error);
}

.select[data-state="error"][data-open] {
  border-color: var(--border-interaction-error);
  box-shadow: 0 0 0 3px var(--border-interaction-error);
}

/* ── Disabled ────────────────────────────────────────────────── */

.select[data-state="disabled"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Dropdown ────────────────────────────────────────────────── */

.select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  z-index: 100;
}

/* ── components/atomic/text-area/text-area.css ── */
/* ── Text area ───────────────────────────────────────────────────
   Figma: Components / Atomic / Text area (node-id=11986-6006)
   Properties (data attributes on .text-area):
     data-size  : l (default) | m
     data-state : error | disabled
   CSS-driven states:
     :hover on .text-area         — hover background
     :focus-within on .text-area  — focus ring + border color
     :disabled on native textarea — drives disabled via :has()
   Resize: the container carries `resize: vertical` (height-only drag, width
   fixed). It requires `overflow: hidden`. The browser draws the native resize
   grip at the bottom-right corner — that is the interactive handle. The native
   <textarea> has `resize: none` so only one grip appears.
   ──────────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.text-area {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-interaction-default);
  border-radius: 6px;
  background: var(--background-interaction-default);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  /* Height-only resize lives on the container so the native grip lands at the
     corner. `overflow: hidden` is required for `resize` to take effect. */
  resize: vertical;
  overflow: hidden;
}

/* ── Size variants ───────────────────────────────────────────── */

.text-area[data-size="l"],
.text-area:not([data-size]) {
  padding: var(--spacing-input-l-vertical) var(--spacing-input-l-horizontal);
  min-height: 156px;
}

.text-area[data-size="m"] {
  padding: var(--spacing-input-m-vertical) var(--spacing-input-m-horizontal);
  min-height: 108px;
}

/* ── Native textarea ─────────────────────────────────────────── */

.text-area__native {
  flex: 1;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  /* Same UA-default reset as .text-field__native / .dropdown-search__input
     — <textarea> ships with its own padding, which appearance:none does
     not clear. */
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  resize: none;
}

.text-area__native::placeholder {
  color: var(--content-static-tertiary);
}

.text-area[data-size="l"] .text-area__native,
.text-area:not([data-size]) .text-area__native {
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
  letter-spacing: var(--letter-spacing-label-l);
}

.text-area[data-size="m"] .text-area__native {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* ── Interactive states ──────────────────────────────────────── */

.text-area:not([data-state="error"]):not([data-state="disabled"]):hover {
  background: var(--background-interaction-hover);
}

.text-area:focus-within {
  border-color: var(--border-focus-default);
  box-shadow: 0 0 0 3px var(--border-focus-default);
  background: var(--background-interaction-focus);
}

/* ── Error ───────────────────────────────────────────────────── */

.text-area[data-state="error"] {
  border-color: var(--border-interaction-error);
}

.text-area[data-state="error"]:focus-within {
  border-color: var(--border-interaction-error);
  box-shadow: 0 0 0 3px var(--border-interaction-error);
}

/* ── Disabled ────────────────────────────────────────────────── */

.text-area[data-state="disabled"],
.text-area:has(.text-area__native:disabled) {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}


/* ── components/atomic/input-group/input-group.css ── */
/* ── Input group ─────────────────────────────────────────────────
   Figma: Components / Atomic / Input group (node-id=3638-6279)

   Wraps an input control (Text field, Select, or Text area) with an
   optional label, an optional message (hint OR error), and an optional
   character counter. This is the PRIMARY, accessible way to use those
   inputs — the <label> gives them an accessible name. Use a bare input
   only when there is genuinely no room for a label.

   Element presence (include or omit, never display:none):
     .input-group__label    — label=true; a real <label for="…"> for a11y
       .input-group__suffix             — mandatory: "*"  (semi-bold)
       .input-group__suffix--optional   — optional: "(optional)"
       .input-group__suffix--applicable — "(if applicable)"
       (suffixes are mutually exclusive — include at most one)
     <input control>        — Text field / Select / Text area, always present
     .input-group__hints    — hints=true; the row below the input
       .input-group__message            — hint text (hintText=true)
       .input-group__message--error     — error message (errorText=true);
                                           replaces the hint, colored red
       .input-group__counter            — character counter "0/1000"

   Accessibility:
     - Give the input's native control an id and point the <label for> at it
       (Text field / Text area: the native <input>/<textarea>).
     - Select has no native control: set aria-labelledby on .select to the
       label's id, and id the label instead of using `for`.
     - Link the message to the control with aria-describedby for hints/errors.
   ──────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────── */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  /* Own stacking context so a focused input's ring layers cleanly over
     the adjacent label / hints rows. */
  isolation: isolate;
}

/* The wrapped input stretches to the group width (default flex stretch). */

/* ── Label ───────────────────────────────────────────────────── */

.input-group__label {
  display: flex;
  gap: var(--spacing-1);
  align-items: flex-start;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
  color: var(--content-static-primary);
}

/* Label suffixes — all tertiary; "*" stays semi-bold, words are regular */
.input-group__suffix {
  flex-shrink: 0;
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-tertiary);
}

.input-group__suffix--optional,
.input-group__suffix--applicable {
  font-weight: var(--weight-regular);
}

/* ── Hints row (message + counter) ───────────────────────────── */

.input-group__hints {
  display: flex;
  gap: var(--spacing-5);
  align-items: flex-start;
  justify-content: flex-end;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* Hint / error message — takes remaining width, pushing the counter right */
.input-group__message {
  flex: 1;
  min-width: 0;
  color: var(--content-static-secondary);
}

.input-group__message--error {
  color: var(--content-interaction-error);
}

/* Character counter — never wraps; sits at the right edge */
.input-group__counter {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--content-static-secondary);
}


/* ── Components / Page-level ─────────────────────────────────── */
/* ── components/page-level/heading/heading.css ── */
/* ── Heading (section) ───────────────────────────────────────────
   Figma: Sections / Heading (node-id=4464-3642)
   Properties:
     data-level : h1 | h2 | h3 | display   (default h1) — visual type
                                  style of the title, chosen by hierarchy
                                  level. Sets style only; pick the matching
                                  semantic tag (<h1>/<h2>/<h3>) for
                                  accessibility. "display" is for standalone
                                  divider/statement moments (e.g. a deck's
                                  section-heading slide) — not used on
                                  ordinary web pages.
     data-paragraph (presence)  — split layout: title left, supporting
                                  paragraph + CTAs right (desktop+tablet)
   Elements (presence):
     .heading__title    — always present (H1 type style by default)
     .heading__body     — paragraph + actions (include for the split layout)
     .heading__actions  — CTA buttons: reuse .btn (primary + optional secondary)

   Full-width row, content centered at 1120px. Type size shifts
   mobile→desktop via tokens (≥1280px); layout flips at ≥800px.
   Root .heading is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"). Nest the reference template's .container
   around .heading__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.heading {
  box-sizing: border-box;
  width: 100%;
}

.heading__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-7);
}

.heading__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  /* Default level: H1 */
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.heading[data-level="h2"] .heading__title {
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.heading[data-level="h3"] .heading__title {
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.heading[data-level="display"] .heading__title {
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.heading__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
}

.heading__paragraph {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  letter-spacing: var(--letter-spacing-small-text);
}

.heading__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-3);
}

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  /* Stacked: title reserves a right gutter so it doesn't span full width
     (Figma: 240px of the 1120px content area). */
  .heading:not([data-paragraph]) .heading__title {
    padding-right: 240px;
  }

  /* Split: title left (fills), body right (~415px), wide gap */
  .heading[data-paragraph] .heading__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-between-elements-11);
  }
  .heading[data-paragraph] .heading__title {
    flex: 1 1 0;
    min-width: 0;
  }
  .heading[data-paragraph] .heading__body {
    width: 415px;
    flex-shrink: 0;
    padding-top: var(--spacing-between-elements-4);
  }
}

/* ── components/page-level/text-block/text-block.css ── */
/* ── Text block (section) ────────────────────────────────────────
   Figma: Sections / Text block (node-id=4912-6652)
   Properties (data attributes on .text-block):
     data-size : default (paragraph) | small (small text)
   Full-width row; the text column is centered and capped at a
   readable measure (740px). Type size shifts mobile→desktop
   automatically via tokens (≥1280px) — no per-size media query needed.
   Root .text-block is a plain full-width wrapper (no padding of its own
   — see CLAUDE.md "Sections"). Nest the reference template's .container
   around .text-block__text for the shared 1540px max-width — the 740px
   reading measure below is a separate, narrower cap nested inside that,
   now centered via its own margin-inline instead of the parent's flex
   (it's no longer a direct flex child once .container sits between them).
   ──────────────────────────────────────────────────────────── */

.text-block {
  box-sizing: border-box;
  width: 100%;
}

.text-block__text {
  width: 100%;
  max-width: var(--dimension-desktop-max-text-width); /* 740 — readable measure */
  margin: 0 auto;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}

.text-block[data-size="default"] .text-block__text,
.text-block:not([data-size]) .text-block__text {
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.text-block[data-size="small"] .text-block__text {
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  letter-spacing: var(--letter-spacing-small-text);
}

/* ── components/page-level/image/image.css ── */
/* ── Image (section) ─────────────────────────────────────────────
   Figma: Sections / Image (node-id=4499-3894)
   Properties (data attributes on .image):
     data-layout : wide (default) | narrow
   Full-width row; the picture is centered and capped at the content
   width (1120px). `narrow` insets the picture to a readable measure on
   desktop+tablet (≥800px); on mobile it renders full-width like `wide`.
   Root .image is a plain full-width wrapper (no padding of its own — see
   CLAUDE.md "Sections"). Nest the reference template's .container around
   .image__inner for its 1540px max-width and centering — that replaces
   the centering this used to do via flex justify-content.
   ──────────────────────────────────────────────────────────── */

.image {
  box-sizing: border-box;
  width: 100%;
}

.image__inner {
  box-sizing: border-box;
  width: 100%;
}

.image__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--background-static-alpha-layer-2);
  border-radius: var(--radius-5);
  color: var(--content-static-tertiary);
}

/* Real usage: replace .image__placeholder with this image element */
.image__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image__placeholder {
  display: flex;
}

.image__placeholder svg {
  width: 28px;
  height: 28px;
}

/* Desktop + tablet: narrow caps the picture to the readable measure */
@media (min-width: 800px) {
  .image[data-layout="narrow"] .image__frame {
    max-width: var(--dimension-desktop-max-text-width); /* 740 */
    margin-inline: auto;
    border-radius: var(--radius-6); /* 24 */
  }
}

/* ── components/page-level/testimonial/testimonial.css ── */
/* ── Testimonial (section) ───────────────────────────────────────
   Figma: Sections / Testimonial (node-id=8786-13272)
   Properties (data attributes on .testimonial):
     data-mode : single | multi (default)
   Elements (presence):
     .testimonial__slide      — one per testimonial; multi shows one at a time
     .testimonial__quote      — the quote (H3)
     .testimonial__cta        — optional CTA, reuse .link
     .testimonial__author     — contained card: avatar + name/role + logo
     .testimonial__pagination — multi only: prev/next (btn-icon) + dots
   Reuses atomics: avatar, link, btn-icon. Carousel wired by testimonial.js.
   Mobile: stacked, dots centered. Desktop+tablet (≥800): row with the
   pagination column on the right.
   Root .testimonial is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"); .testimonial__inner is the visual card. Nest
   the reference template's .container around .testimonial for its
   1540px max-width.
   ──────────────────────────────────────────────────────────── */

.testimonial {
  box-sizing: border-box;
  width: 100%;
}

.testimonial__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-5);
  padding: var(--spacing-panel-top) var(--spacing-panel-horizontal) var(--spacing-panel-bottom);
}

.testimonial__track { min-width: 0; }

.testimonial__slide {
  display: none;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
}
.testimonial__slide[data-active] { display: flex; }
.testimonial[data-mode="single"] .testimonial__slide { display: flex; }

/* ── Quote + CTA ─────────────────────────────────────────────── */

.testimonial__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-5);
}

.testimonial__quote {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.testimonial__cta {
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-label-l);
  line-height: var(--line-height-label-l);
}

/* ── Author (contained card) ─────────────────────────────────── */

.testimonial__author {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-between-elements-7);
  background: var(--background-static-alpha-layer-1);
  border-radius: var(--radius-3);
  padding: var(--spacing-card-l-horizontal);
}

.testimonial__author-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
}

.testimonial__name {
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.testimonial__role {
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

.testimonial__logo {
  margin-top: var(--spacing-between-elements-3);
  font-family: var(--family-body);
  font-weight: var(--weight-bold);
  color: var(--content-static-tertiary);
  font-size: var(--size-caption);
}

/* ── Pagination (multi only) ─────────────────────────────────── */

.testimonial[data-mode="single"] .testimonial__pagination { display: none; }

.testimonial__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-between-elements-5);
}

.testimonial__nav { display: none; } /* chevrons appear on desktop+tablet only */

.testimonial__dots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

.testimonial__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--background-static-alpha-layer-2);
  cursor: pointer;
  transition: background 120ms ease;
}
.testimonial__dot[data-state="selected"] {
  background: var(--background-static-gray-inverted);
}

/* ── Desktop + tablet ────────────────────────────────────────── */

@media (min-width: 800px) {
  .testimonial__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  .testimonial__track { flex: 1; }
  .testimonial__pagination {
    width: 200px;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .testimonial__nav { display: inline-flex; }
}

/* ── components/page-level/cta/cta.css ── */
/* ── CTA (section) ───────────────────────────────────────────────
   Figma: Sections / CTA (node-id=8525-2437)
   Properties (data attributes on .cta):
     data-type      : regular (gray card) | blank (no background)
     data-alignment : default (left) | center
     data-paragraph (presence) — split layout w/ supporting paragraph
                                  (default alignment, desktop+tablet)
   Elements (presence):
     .cta__heading   — H1, always present
     .cta__body      — wrap paragraph + actions
     .cta__paragraph — supporting text (include for has-paragraph)
     .cta__actions   — CTA buttons: reuse .btn (primary + optional secondary)

   Full-width row, content centered at 1120px. Type shifts via tokens
   (≥1280px); layout flips at ≥800px. Reuses the Button atomic.
   Root .cta is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"); nest the reference template's .container
   around .cta__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.cta {
  box-sizing: border-box;
  width: 100%;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-7);
}

/* Filled gray-card variant */
.cta[data-type="regular"] .cta__inner {
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-5);
  padding: var(--spacing-panel-top) var(--spacing-panel-horizontal) var(--spacing-panel-bottom);
}

/* Centered variant */
.cta[data-alignment="center"] .cta__inner {
  align-items: center;
  text-align: center;
}

.cta__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
}
.cta[data-alignment="center"] .cta__body { align-items: center; }

.cta__paragraph {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-3);
}
.cta[data-alignment="center"] .cta__actions { justify-content: center; }

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  /* Split: title left (fills), body right (~415px) — default alignment only */
  .cta[data-paragraph][data-alignment="default"] .cta__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-between-elements-11);
  }
  .cta[data-paragraph][data-alignment="default"] .cta__heading {
    flex: 1 1 0;
    min-width: 0;
  }
  .cta[data-paragraph][data-alignment="default"] .cta__body {
    width: 415px;
    flex-shrink: 0;
  }
}

/* ── components/page-level/numbers/numbers.css ── */
/* ── Numbers (section) ───────────────────────────────────────────
   Figma: Sections / Numbers (node-id=8946-46793)
   Properties (data attributes on .numbers):
     data-stats         : 2 | 3 | 4  (cards per row, desktop+tablet)
     data-case-studies  : true | false (default) — adds logo + CTA footer
   Elements (presence):
     .numbers__item        — one stat card per stat (match count to data-stats)
     .numbers__description — supporting text under the label
     .numbers__footer      — logo + "Read case study" CTA (case-studies only)

   Each stat is a gray rounded card: big display value, bold label,
   optional description. Mobile: stacked. Desktop+tablet: equal-width row.
   Reuses the Button atomic (.btn).
   Root .numbers is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"); nest the reference template's .container
   around .numbers__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.numbers {
  box-sizing: border-box;
  width: 100%;
}

.numbers__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
}

.numbers__item {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-5);
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
}

.numbers__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
}

.numbers__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
}

.numbers__value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.numbers__label {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.numbers__description {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}

.numbers__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-between-elements-4);
}

.numbers__logo {
  font-family: var(--family-body);
  font-weight: var(--weight-bold);
  color: var(--content-static-tertiary);
  font-size: var(--size-caption);
}

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .numbers__inner {
    flex-direction: row;
    align-items: stretch;
  }
}

/* ── components/page-level/case-study/case-study.css ── */
/* ── Case study (section) ────────────────────────────────────────
   Figma: Sections / Case study (node-id=9507-16912)
   A gray panel: large metric + caption + paragraph + primary CTA on
   the left; a contained white author card (avatar + name/role + logo)
   on the right. Mostly content toggles — no visual variant attributes.
   Elements (presence):
     .case-study__figure    — metric + caption
     .case-study__paragraph — supporting text
     .btn (in __content)    — primary CTA
     .case-study__card      — author card (avatar + name/role + logo)
   Mobile: stacked. Desktop+tablet (≥800): content left, card right.
   Reuses atomics: button (.btn), avatar (.avatar).
   Root .case-study is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"); nest the reference template's .container
   around .case-study__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.case-study {
  box-sizing: border-box;
  width: 100%;
}

.case-study__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-5);
  padding: var(--spacing-panel-top) var(--spacing-panel-horizontal) var(--spacing-panel-bottom);
}

.case-study__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-7);
}

.case-study__figure {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
}

.case-study__metric {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.case-study__caption {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.case-study__paragraph {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.case-study__card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
  background: var(--background-static-gray-layer-0);
  border-radius: var(--radius-3);
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
}

.case-study__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-between-elements-5);
}

.case-study__author-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
}

.case-study__name {
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.case-study__role {
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

.case-study__logo {
  font-family: var(--family-body);
  font-weight: var(--weight-bold);
  color: var(--content-static-tertiary);
  font-size: var(--size-caption);
}

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .case-study__inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-between-elements-11);
  }
  .case-study__content {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: var(--spacing-between-elements-8);
  }
  .case-study__card {
    width: 400px;
    flex-shrink: 0;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: var(--spacing-between-elements-7);
  }
  .case-study__author {
    flex-direction: column;
  }
  .case-study__author-info {
    align-items: center;
  }
}

/* ── components/page-level/customer-logos/customer-logos.css ── */
/* ── Customer logos (section) ────────────────────────────────────
   Figma: Sections / Client logos chain (node-id=9499-13645)
   Properties (data attributes on .customer-logos):
     data-type : carousel (auto-marquee, centered) | 1-line | 2-line
   Elements (presence):
     .customer-logos__header — label (omit for carousel? — present in all
                               three here; carousel + 1-line use "Trusted by:",
                               2-line uses a brand-led sentence)
     .customer-logos__logo   — one per logo (placeholder box)

   carousel: infinite horizontal marquee (duplicate the logo set in markup
   so the -50% loop is seamless). 1-line: single row. 2-line: wrapping grid.
   Mobile: full-width, logos wrap; desktop: max-width 1120 centered.
   No atomics reused. Logos are placeholder boxes (swap for <img> with real assets).
   Root .customer-logos is a plain full-width wrapper (no padding of its
   own — see CLAUDE.md "Sections"); nest the reference template's
   .container around .customer-logos__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.customer-logos {
  box-sizing: border-box;
  width: 100%;
}

.customer-logos__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-6);
}

.customer-logos__header {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}
.customer-logos__brand { color: var(--content-static-brand); }

.customer-logos__viewport { width: 100%; }

.customer-logos__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-between-elements-6) var(--spacing-between-elements-8);
}

.customer-logos__logo {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 40px;
  border: 1px dashed var(--border-divider-default);
  border-radius: var(--radius-2);
  color: var(--content-static-tertiary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
}

/* ── Carousel (auto-marquee) ─────────────────────────────────── */
.customer-logos[data-type="carousel"] .customer-logos__inner { align-items: center; }
.customer-logos[data-type="carousel"] .customer-logos__viewport {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.customer-logos[data-type="carousel"] .customer-logos__track {
  flex-wrap: nowrap;
  width: max-content;
  animation: customer-logos-marquee 40s linear infinite;
}
@keyframes customer-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .customer-logos[data-type="1-line"] .customer-logos__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-between-elements-8);
  }
  .customer-logos[data-type="1-line"] .customer-logos__header { flex-shrink: 0; }
  .customer-logos[data-type="1-line"] .customer-logos__viewport { flex: 1; }
  .customer-logos[data-type="1-line"] .customer-logos__track { flex-wrap: nowrap; }

  .customer-logos[data-type="2-line"] .customer-logos__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-between-elements-9);
  }
  .customer-logos[data-type="2-line"] .customer-logos__header { width: 280px; flex-shrink: 0; }
  .customer-logos[data-type="2-line"] .customer-logos__track { flex: 1; }
}

/* ── components/page-level/faq/faq.css ── */
/* ── FAQ (section) ───────────────────────────────────────────────
   Figma: Sections / FAQ (node-id=5229-9528)
   A title plus a list of question/answer pairs. Static — all answers
   are always visible (no expand/collapse).
   Elements (presence):
     .faq__title — H1 (section title)
     .faq__item  — one per Q&A; .faq__question (H3) + .faq__answer (paragraph)
   Mobile: question stacked above answer. Desktop+tablet (≥800): two
   columns — question left (~40%), answer right. Divider above each item.
   No atomics reused, no JS.
   Root .faq is a plain full-width wrapper (no padding of its own — see
   CLAUDE.md "Sections"). Nest the reference template's .container around
   .faq__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.faq {
  box-sizing: border-box;
  width: 100%;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
}

.faq__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
  padding-block: var(--spacing-between-elements-6);
  border-top: 1px solid var(--border-divider-default);
}

.faq__question {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.faq__answer {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .faq__item {
    flex-direction: row;
    gap: var(--spacing-between-elements-9);
    padding-block: var(--spacing-between-elements-7);
  }
  .faq__question {
    flex: 0 0 40%;
    max-width: 40%;
  }
  .faq__answer {
    flex: 1;
    min-width: 0;
  }
}

/* ── components/page-level/accordion-carousel/accordion-carousel.css ── */
/* ── Accordion carousel (section) ────────────────────────────────
   Figma: Sections / Accordion carousel (node-id=9027-10787)
          item subcomponent (node-id=9027-3759)
   A list of expandable items paired with a media pane.
   Desktop+tablet (≥800): accordion list on the left, media on the right;
     all items visible, the active item expanded (shows its body) and
     its matching media shown. Single-open.
   Mobile (<800): one item shown at a time (media on top, active item's
     heading + body, then pagination dots to switch).
   Elements (presence):
     .accordion-carousel__item       — repeat per item (button)
     .accordion-carousel__body       — shown only when item is expanded
     .accordion-carousel__media-item — one per item; active one shown
     .accordion-carousel__pagination — dots (mobile only)
   State: .accordion-carousel__item[data-state="expanded"|"default"].
   Wired by accordion-carousel.js. No atomics reused.
   Root .accordion-carousel is a plain full-width wrapper (no padding of
   its own — see CLAUDE.md "Sections"). Nest the reference template's
   .container around .accordion-carousel__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.accordion-carousel {
  box-sizing: border-box;
  width: 100%;
}

.accordion-carousel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-4);
}

/* ── Items ───────────────────────────────────────────────────── */
.accordion-carousel__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-4);
}

.accordion-carousel__item {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-5);
  background: var(--background-static-gray-layer-1);
  border: 0;
  border-radius: var(--radius-3);
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}
.accordion-carousel__item:hover { background: var(--background-interaction-hover); }
.accordion-carousel__item:focus-visible {
  outline: 4px solid var(--border-focus-default);
  outline-offset: 0;
}
.accordion-carousel__item[data-state="expanded"] {
  background: var(--background-interaction-selectedsubtle);
}

/* mobile: only the active item is shown */
.accordion-carousel__item:not([data-state="expanded"]) { display: none; }

.accordion-carousel__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.accordion-carousel__body {
  display: none;
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  letter-spacing: var(--letter-spacing-small-text);
}
.accordion-carousel__item[data-state="expanded"] .accordion-carousel__body { display: block; }

/* ── Media ───────────────────────────────────────────────────── */
.accordion-carousel__media {
  order: -1; /* mobile: media on top */
  border-radius: var(--radius-5);
  background: var(--background-static-gray-layer-1);
  overflow: hidden;
}
.accordion-carousel__media-item {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  color: var(--content-static-tertiary);
}
.accordion-carousel__media-item[data-active] { display: flex; }

/* ── Pagination (mobile only) ────────────────────────────────── */
.accordion-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-between-elements-5);
}
.accordion-carousel__dots { display: flex; align-items: center; gap: 4px; height: 36px; }
.accordion-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--background-static-alpha-layer-2);
  cursor: pointer;
  transition: background 120ms ease;
}
.accordion-carousel__dot[data-state="selected"] { background: var(--background-static-gray-inverted); }

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .accordion-carousel__inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-between-elements-6);
  }
  .accordion-carousel__items { flex: 1 1 0; min-width: 0; }
  .accordion-carousel__item:not([data-state="expanded"]) { display: flex; } /* all items visible */
  .accordion-carousel__item {
    padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
  }
  .accordion-carousel__media {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }
  .accordion-carousel__media-item { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .accordion-carousel__pagination { display: none; }
}

/* ── components/page-level/cards/cards.css ── */
/* ── Cards (section) ─────────────────────────────────────────────
   Figma: Sections / Cards - big image (node-id=9295-6180)
          Card - big image subcomponent (node-id=8509-12281)
          Card - small image (node-id=9295-8117)
          Card - icon (node-id=9295-10411)
   A responsive grid of cards. One component for all three visual
   variants — switch the media slot with data-media.
   Properties (data attributes on .cards):
     data-cards          : 1 | 2 | 3 | 4 | 5-6  (grid columns + card size tier:
                           1→single-column vertical stack (M tier, no desktop
                           override exists so it never goes multi-column —
                           for a narrow composed grid cell, e.g. a stacked-
                           cards column next to a testimonial), 2→L, 3→M,
                           4→M, 5-6→S; 5-6 lays out in a single row)
     data-media          : big-image (full-bleed 3:2 banner, flush to the card
                           edges) | small-image (contained ~120px box) | icon
                           (24px icon in a 64px circular container) | none
                           (no media slot — text-only card: omit .cards__media
                           entirely from markup, same as has-image=false)
                           — the .cards__media <svg> is a placeholder; swap
                           for a real image / design-system icon
     data-image-position : top (default) | bottom   (big-image only)
   Per-card content toggles (element presence, applied to every card):
     .cards__media     — include for has-image
     .cards__number    — include for has-number
     .cards__heading   — include for has-heading
     .cards__paragraph — include for has-paragraph
     .cards__actions   — include for has-cta (primary .btn + optional secondary)
   Anatomy: .cards__card (no padding, clips media) → .cards__media (big-image
   full-bleed) + .cards__content (padding + card gap) → .cards__text wraps the
   heading+paragraph at a tight 8px gap. For small-image / icon the .cards__media
   sits inside .cards__content so the padding insets it.
   Card visuals reuse the Button atomic. Mobile: single column.
   Root .cards is a plain full-width wrapper (no padding of its own — see
   CLAUDE.md "Sections"). Nest the reference template's .container around
   .cards__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────── */

.cards {
  box-sizing: border-box;
  width: 100%;
}

.cards__grid {
  display: grid;
  grid-template-columns: 1fr;        /* mobile: single column */
  gap: var(--spacing-between-elements-6);
}

/* ── Card ────────────────────────────────────────────────────── */
.cards__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
  overflow: hidden;                  /* clips the full-bleed image corners */
}

/* Text content region — holds the card padding + gap (set per size tier). */
.cards__content {
  display: flex;
  flex-direction: column;
  /* size-tier padding/gap set below via data-cards (base = M) */
  gap: var(--spacing-card-m-gap);
  padding: var(--spacing-card-m-top) var(--spacing-card-m-horizontal) var(--spacing-card-m-bottom);
}

/* Heading + paragraph group — tighter 8px gap, independent of the card gap. */
.cards__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.cards__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--background-static-gray-inverted);
  color: var(--content-static-inverted);
  font-family: var(--family-body);
  font-weight: var(--weight-bold);
  font-size: var(--size-caption);
  line-height: 1;
}

.cards__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.cards__paragraph {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  letter-spacing: var(--letter-spacing-small-text);
}

.cards__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-3);
}

/* ── Size tiers (driven by data-cards) ───────────────────────── */
/* L — 2 cards */
.cards[data-cards="2"] .cards__content {
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
  gap: var(--spacing-card-l-gap);
}
/* M — 3 & 4 cards (base values already M; explicit for clarity) */
.cards[data-cards="3"] .cards__content,
.cards[data-cards="4"] .cards__content {
  padding: var(--spacing-card-m-top) var(--spacing-card-m-horizontal) var(--spacing-card-m-bottom);
  gap: var(--spacing-card-m-gap);
}
/* S — 5-6 cards */
.cards[data-cards="5-6"] .cards__content {
  padding: var(--spacing-card-s-top) var(--spacing-card-s-horizontal) var(--spacing-card-s-bottom);
  gap: var(--spacing-card-s-gap);
}
.cards[data-cards="5-6"] .cards__heading {
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}
.cards[data-cards="5-6"] .cards__paragraph {
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}
/* S: CTAs stack vertically, left-aligned at their content width */
.cards[data-cards="5-6"] .cards__actions {
  flex-direction: column;
  align-items: flex-start;
}

/* ── Media variants (data-media) ─────────────────────────────── */
/* big-image: full-bleed 3:2 banner, flush to the card's top + side edges.
   It is a direct child of .cards__card; the card's overflow:hidden rounds
   the top corners to match the card. */
.cards[data-media="big-image"] .cards__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-tertiary);
}
.cards[data-media="big-image"] .cards__media svg { width: 16px; height: 16px; }
/* image at the bottom of the card */
.cards[data-media="big-image"][data-image-position="bottom"] .cards__media { order: 1; }

/* small-image: a contained square box, inset by the .cards__content padding. */
.cards[data-media="small-image"] .cards__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--background-static-alpha-layer-2);
  border-radius: var(--radius-card-contained);
  color: var(--content-static-tertiary);
}
.cards[data-cards="5-6"][data-media="small-image"] .cards__media { width: 104px; height: 104px; } /* S */
.cards[data-media="small-image"] .cards__media svg { width: 16px; height: 16px; }

/* icon: a 24px icon centered in a 64px circular tinted container. */
.cards[data-media="icon"] .cards__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--background-static-alpha-layer-1);
  border-radius: var(--radius-full);
  color: var(--content-static-primary);
}
.cards[data-media="icon"] .cards__media svg { width: 24px; height: 24px; }

/* ── Desktop + tablet ─────────────────────────────────────────── */
@media (min-width: 800px) {
  .cards[data-cards="2"] .cards__grid { grid-template-columns: repeat(2, 1fr); }
  .cards[data-cards="3"] .cards__grid { grid-template-columns: repeat(3, 1fr); }
  .cards[data-cards="4"] .cards__grid { grid-template-columns: repeat(4, 1fr); }
  /* 5-6: a single row of equal columns (works for either 5 or 6 cards) */
  .cards[data-cards="5-6"] .cards__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* ── components/page-level/hero-block/hero-block.css ── */
/* ── Hero block (section) ─────────────────────────────────────────
   Figma: Sections / Hero block (node-id=9384-4137)
   The top-of-page hero. One component, four layouts via data-type.
   Properties (data attributes on .hero-block):
     data-type : simple-center (default) | simple-left
                 | image-center | image-right
   Content toggles (element presence, include/omit the element):
     .hero-block__badges    — trust badges pill (G2 / Fortune / SOC)
     .hero-block__paragraph — supporting paragraph
     .hero-block__buttons   — CTA group (reuses the Button atomic)
       second .btn          — secondary CTA
     .hero-block__caption   — small caption under the buttons
     .hero-block__media     — image (image-center) / .hero-block__media-col (image-right)
       .btn-play (atomic)   — play / "Launch demo" overlay on the image-center banner
   Title is Display for the simple types, H1 for the image types.
   Full-bleed gray section. Mobile-first; layout switches at ≥800px;
   type sizes shift at ≥1280px via tokens. Reuses the Button + Button Play atomics.
   ──────────────────────────────────────────────────────────────── */

.hero-block {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--background-static-gray-layer-2);
  padding: var(--spacing-page-vertical-7) var(--grid-page-padding);
  overflow: hidden;
}

/* ── Content wrapper (centered at the content width; the .container
   ancestor in the reference template owns the 1540px max-width) ───── */
.hero-block__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-between-elements-9);
  width: 100%;
}

/* ── Text block (badges + title + paragraph) ─────────────────────── */
.hero-block__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-between-elements-6);
  width: 100%;
}

.hero-block__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  text-align: center;
}

.hero-block__paragraph {
  margin: 0;
  max-width: 740px;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  text-align: center;
}

/* ── Buttons + caption ───────────────────────────────────────────── */
.hero-block__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-between-elements-5);
  width: 100%;
}
.hero-block__buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-3);
  width: 100%;
}
/* Mobile: CTAs stack full-width */
.hero-block__buttons-row .btn { flex: 1 1 100%; }

.hero-block__caption {
  margin: 0;
  max-width: 740px;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-align: center;
}

/* ── Badges pill ─────────────────────────────────────────────────── */
.hero-block__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-5);
  padding: var(--spacing-button-m-vertical) var(--spacing-button-m-horizontal);
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-panel);
}
.hero-block__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-button-l-gap);
}
.hero-block__badge-logo {              /* placeholder for a brand logo asset */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-1);
  background: var(--background-static-alpha-layer-2);
}
.hero-block__badge-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--content-static-primary);
}
.hero-block__badge-stars svg { width: 16px; height: 16px; }
.hero-block__badge-text {
  margin: 0;
  max-width: 96px;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}
/* Third badge (SOC) hides on mobile */
.hero-block__badge--soc { display: none; }

/* ── Image media ─────────────────────────────────────────────────── */
.hero-block__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-tertiary);
}
.hero-block__image svg { width: 48px; height: 48px; }

/* image-center banner + bottom fade + optional play button */
.hero-block__media {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.hero-block[data-type="image-center"] .hero-block__image { aspect-ratio: 2 / 1; }
.hero-block__media::after {            /* bottom fade into the section bg */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, var(--background-static-gray-layer-2));
  pointer-events: none;
}
/* Play overlay reuses the Button Play atomic, centered over the banner. */
.hero-block__media .btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ── data-type: image-center (banner below the centered content) ──── */
.hero-block[data-type="image-center"] {
  gap: var(--spacing-page-vertical-5);
  padding-top: var(--spacing-page-vertical-6);
  padding-bottom: 0;                   /* image bleeds to the section edge */
}
.hero-block[data-type="image-center"] .hero-block__title {
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

/* ── data-type: simple-left (left-aligned; two columns on desktop) ── */
.hero-block[data-type="simple-left"] .hero-block__content { align-items: flex-start; }
.hero-block[data-type="simple-left"] .hero-block__text { align-items: flex-start; }
.hero-block[data-type="simple-left"] .hero-block__title { text-align: left; }
.hero-block[data-type="simple-left"] .hero-block__paragraph { text-align: left; max-width: none; }
.hero-block[data-type="simple-left"] .hero-block__buttons { align-items: flex-start; }
.hero-block[data-type="simple-left"] .hero-block__buttons-row { justify-content: flex-start; }

/* ── data-type: image-right (full-bleed two-column split) ─────────── */
.hero-block[data-type="image-right"] {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.hero-block__content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-7);
  padding: var(--spacing-between-elements-10) var(--grid-page-padding);
}
.hero-block__media-col {
  display: flex;
  background: var(--background-static-alpha-layer-1);
  padding: var(--grid-page-padding);
}
.hero-block[data-type="image-right"] .hero-block__text { align-items: flex-start; }
.hero-block[data-type="image-right"] .hero-block__title {
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  text-align: left;
}
.hero-block[data-type="image-right"] .hero-block__paragraph { text-align: left; }
.hero-block[data-type="image-right"] .hero-block__buttons { align-items: flex-start; }
.hero-block[data-type="image-right"] .hero-block__buttons-row { justify-content: flex-start; }
.hero-block[data-type="image-right"] .hero-block__image { aspect-ratio: 1 / 1; }

/* ── Desktop + tablet (≥800px) ───────────────────────────────────── */
@media (min-width: 800px) {
  .hero-block {
    padding-block: var(--spacing-page-vertical-7);
  }

  /* CTAs sit inline (auto width) once there's room */
  .hero-block__buttons-row .btn { flex: 0 0 auto; }

  /* third badge appears */
  .hero-block__badge--soc { display: flex; }

  /* simple-center & image-center: tighter content gap on desktop */
  .hero-block[data-type="simple-center"] .hero-block__content,
  .hero-block[data-type="image-center"] .hero-block__content {
    gap: var(--spacing-between-elements-7);
  }

  /* ── simple-left: title + buttons left column, paragraph right ───── */
  /* Flat DOM (text, paragraph, buttons) placed with grid so it reflows to a
     single left-aligned column on mobile without reordering. */
  .hero-block[data-type="simple-left"] .hero-block__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 415px;
    column-gap: var(--spacing-between-elements-11);
    align-items: start;
  }
  .hero-block[data-type="simple-left"] .hero-block__text {
    grid-column: 1;
    grid-row: 1;
    max-width: 880px;
  }
  .hero-block[data-type="simple-left"] .hero-block__paragraph {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-top: var(--spacing-between-elements-4);
  }
  .hero-block[data-type="simple-left"] .hero-block__buttons {
    grid-column: 1;
    grid-row: 2;
    padding-top: var(--spacing-between-elements-8);
  }

  /* ── image-right: row split, content right-half, image left-half ── */
  .hero-block[data-type="image-right"] {
    flex-direction: row;
    align-items: stretch;
  }
  .hero-block__content-col {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-end;
    padding: var(--spacing-between-elements-10);
    padding-left: 0;
  }
  .hero-block__content-col > * { width: 496px; max-width: 100%; }
  .hero-block__media-col {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-between-elements-10);
    padding-right: 0;
  }
  .hero-block[data-type="image-right"] .hero-block__image {
    width: 496px;
    max-width: 100%;
  }
}

/* ── components/page-level/zigzag/zigzag.css ── */
/* ── Zigzag (section) ─────────────────────────────────────────────
   Figma: Sections / Zigzag (node-id=8789-2093)
   A two-up card row: an image on one side, text (H2 + paragraph + CTAs)
   on the other. Stack several with alternating image sides for the
   classic "zigzag" page rhythm.
   Properties (data attribute on .zigzag):
     data-image-position : left (default) | right   (desktop+tablet)
   Content toggles (element presence):
     .zigzag__heading
     .zigzag__paragraph
     .zigzag__actions   — CTA buttons: reuse .btn (primary + optional secondary)
   Single rounded card (min-height 320) centered at the content width.
   Mobile: the image stacks on top of the text. Type size shifts at
   ≥1280px via tokens; layout flips at ≥800px. Reuses the Button atomic.
   Root .zigzag is a plain full-width wrapper (no padding of its own —
   see CLAUDE.md "Sections"); nest the reference template's .container
   around .zigzag__inner for its 1540px max-width.
   ──────────────────────────────────────────────────────────────── */

.zigzag {
  box-sizing: border-box;
  width: 100%;
}

.zigzag__inner {
  display: flex;
  flex-direction: column;          /* mobile: image on top, text below */
  min-height: 320px;
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
  overflow: hidden;
}

/* ── Image half ──────────────────────────────────────────────────── */
.zigzag__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;             /* mobile: full-width 3:2 banner */
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-tertiary);
}
.zigzag__image svg { width: 48px; height: 48px; }

/* ── Text half ───────────────────────────────────────────────────── */
.zigzag__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
  padding: var(--spacing-panel-top) var(--spacing-panel-horizontal) var(--spacing-panel-bottom);
}
.zigzag__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-5);
}
.zigzag__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}
.zigzag__paragraph {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}
.zigzag__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-between-buttons-horzontal);
}

/* ── Desktop + tablet (≥800px): side-by-side halves ──────────────── */
@media (min-width: 800px) {
  .zigzag__inner {
    flex-direction: row;
    align-items: stretch;
  }
  .zigzag__image {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;            /* fill the full height of the row */
  }
  .zigzag__content {
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
    justify-content: space-between; /* text top, buttons bottom */
  }
  .zigzag__actions { padding-top: var(--spacing-between-elements-6); }

  /* image on the right */
  .zigzag[data-image-position="right"] .zigzag__image { order: 1; }
}

/* ── components/page-level/components-spacing/components-spacing.css ── */
/* ── Components spacing (page-level) ──────────────────────────────
   Figma: Smartcat website design system / Spacing (node-id=9505-14100)
   Property (data attribute on .components-spacing):
     data-size : 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8   (default 1)
   Contentless full-width vertical spacer placed between page-level
   components to structure Sections. Height maps to the responsive
   --spacing-page-vertical-* tokens, so mobile→desktop sizing is
   automatic (≥1280px) — no media query, and no Desktop/Mobile
   variant (the Figma breakpoint variant collapses into the tokens).
   Sizes (mobile → desktop): 1 8→8 · 2 8→16 · 3 24→24 · 4 40→40 ·
     5 48→56 · 6 64→80 · 7 80→120 · 8 120→160
   See CLAUDE.md "Components spacing" for when to use each size.
   ──────────────────────────────────────────────────────────── */

.components-spacing { width: 100%; height: var(--spacing-page-vertical-1); }
.components-spacing[data-size="1"] { height: var(--spacing-page-vertical-1); }
.components-spacing[data-size="2"] { height: var(--spacing-page-vertical-2); }
.components-spacing[data-size="3"] { height: var(--spacing-page-vertical-3); }
.components-spacing[data-size="4"] { height: var(--spacing-page-vertical-4); }
.components-spacing[data-size="5"] { height: var(--spacing-page-vertical-5); }
.components-spacing[data-size="6"] { height: var(--spacing-page-vertical-6); }
.components-spacing[data-size="7"] { height: var(--spacing-page-vertical-7); }
.components-spacing[data-size="8"] { height: var(--spacing-page-vertical-8); }


/* ── Components / Onepager ────────────────────────────────────── */
/* ── components/onepager/hero/hero.css ── */
/* ── One-pager / Hero ─────────────────────────────────────────
   Opens every one-pager. Self-sufficient — carries its own background
   directly and is never wrapped in .op-band (same rule as hero-block
   on web). See CLAUDE.md "One-pagers".

   Properties (data attributes):
     data-layout on .op-hero : split (default) | stacked | bar
       split   — headline + paragraph beside a product screenshot. The
                 product pitch: the reader should see the thing.
       stacked — headline + paragraph across the full width, no
                 screenshot, at H1 rather than Display scale. For a
                 document whose argument is the subject (a solution
                 brief); a full-width Display headline would dwarf the
                 dense sections beneath it.
       bar     — a slim masthead: title and meta pill on one line, no
                 paragraph and no .op-hero__row at all. For an internal
                 reference sheet that needs identifying, not selling.
                 The title sits at H2, not H1: it has to share one line
                 with the pill, and a document title is not competing
                 for attention the way a pitch headline is.
     data-theme="dark" on .op-hero : swaps the brand-purple ground for
       the same near-black the footer uses, so an internal document
       reads as internal at a glance. Pair it with data-layout="bar".

   Elements (presence):
     .op-hero__topbar        — the thin top row. In split/stacked it
                               holds the brand lockup and optional meta
                               pill; in bar layout it IS the hero and
                               holds the headline + pill instead.
     .op-hero__brand         — logo, optionally + .op-hero__tagline
     .op-hero__tagline       — the product tagline set beside the logo.
                               Only the tagline is text: the wordmark is
                               always the real asset (CLAUDE.md "Logo").
     .op-hero__label         — meta pill ("Solution brief",
                               "Internal only"); mirrors .doc-hero__tag
     .op-hero__title-accent  — wrap a fragment of the headline to render
                               it in brand purple (a display-title
                               accent, not prose emphasis)
     .op-hero__row           — content column + media column; omit
                               entirely in bar layout
     .op-hero__content       — headline + paragraph
     .op-hero__media         — .op-media-wrapped screenshot, optional
                               .op-hero__tag floating annotations (0-2
                               typical); split layout only. Drop the tags
                               once a real promo screenshot fills the
                               slot — those images are finished
                               compositions, and a chip on top repeats
                               or covers what the UI already shows.

   Notes:
     - Headline line breaks are authored with <br>, one short phrase
       per line, as a stylistic device — see the deck DNA precedent
       which this one-pager DNA shares.
     - Headline/paragraph/tagline take --content-static-inverted, which
       is white against the default brand ground. Under
       data-theme="dark" the ambient tokens flip, so those three switch
       to --content-static-primary (white in dark mode) instead. The
       tokens are NOT repointed wholesale on .op-hero, because
       .op-hero__tag is a genuine white surface that must keep the
       ambient values — see its note below.
     - .op-hero__tag mimics a small floating UI annotation over the
       screenshot (e.g. "Translation review") — a real white surface,
       NOT tinted by the hero background, so it intentionally uses
       ambient (untouched) content tokens rather than the inverted ones
       used by the headline/paragraph.
   ──────────────────────────────────────────────────────────── */

.op-hero {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-11) var(--spacing-9) var(--spacing-12);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
  background: var(--background-static-brand-inverted);
}

.op-hero[data-theme="dark"] {
  /* No semantic token exists for an always-near-black surface
     (background-static-gray-inverted flips to white in dark mode), so
     this is the same deliberate primitive reference .op-footer makes,
     and for the same reason — the two must match exactly, since a
     document with a dark masthead always closes on a dark footer. */
  background: var(--color-non-semantic-gray-100);
}

.op-hero__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
}

.op-hero__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.op-hero__logo {
  height: 24px;
  width: auto;
}

.op-hero__tagline {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.75;
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-hero[data-theme="dark"] .op-hero__tagline { color: var(--content-static-primary); }

.op-hero__label {
  flex-shrink: 0;
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-inverted);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* Only the text color flips. The default alpha-layer-2 fill is a faint
   WHITE translucency in dark mode, so it already reads correctly over
   near-black — whereas background-static-brand-inverted resolves to a
   LIGHT purple in dark mode, which would put white text on a pale pill
   and make the label disappear. */
.op-hero[data-theme="dark"] .op-hero__label { color: var(--content-static-primary); }

.op-hero__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-9);
}

.op-hero__content {
  flex: 0 0 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.op-hero__headline {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-inverted);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.op-hero[data-theme="dark"] .op-hero__headline { color: var(--content-static-primary); }

.op-hero__title-accent { color: var(--content-static-brand); }

.op-hero__paragraph {
  margin: 0;
  max-width: 480px;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.8;
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

.op-hero[data-theme="dark"] .op-hero__paragraph { color: var(--content-static-primary); }

.op-hero__media {
  flex: 1;
  min-width: 0;
  position: relative;
}

.op-hero__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-primary);
  box-shadow: var(--shadow-elevation-m);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* ── Stacked layout ─────────────────────────────────────────────
   One full-width column: no media, headline dropped to H1 so it can
   run the full 1184px without overwhelming the sections below. */

.op-hero[data-layout="stacked"] { gap: var(--spacing-8); }

.op-hero[data-layout="stacked"] .op-hero__content {
  flex: 1 1 auto;
  gap: var(--spacing-5);
}

.op-hero[data-layout="stacked"] .op-hero__headline {
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.op-hero[data-layout="stacked"] .op-hero__paragraph { max-width: var(--op-measure); }

/* ── Bar layout ─────────────────────────────────────────────────
   The topbar is the whole hero: title left, meta pill right. */

.op-hero[data-layout="bar"] {
  padding: var(--spacing-8) var(--spacing-9);
}

.op-hero[data-layout="bar"] .op-hero__headline {
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

/* ── components/onepager/lead/lead.css ── */
/* ── One-pager / Lead ─────────────────────────────────────────
   The document's opening statement — the single paragraph that says
   what this whole page is arguing, placed immediately under the hero
   before any section gets its own heading. Typically sits in a
   brand-tint band with data-padding="compact", so it reads as an
   extension of the hero rather than the first content section.
   Elements (presence):
     .op-lead__label     — a real heading naming the statement ("The
                            pitch"); a semantic <h2>, NOT an eyebrow
                            (see CLAUDE.md "Text casing")
     .op-lead__text      — the statement itself, paragraph scale
     .op-lead__emphasis  — optional closing line carrying the one
                            takeaway, brand-purple. This is how the
                            tier handles source copy that used inline
                            bold: promote the phrase to its own line at
                            its own weight instead of bolding it mid-
                            sentence (CLAUDE.md forbids inline bold).
   ──────────────────────────────────────────────────────────── */

.op-lead {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.op-lead__label {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-brand);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

/* Both lines cap their measure at the shared --op-measure (~80
   characters): the band is 1184px wide, and 18px copy run edge to edge is
   ~110 characters a line. */
.op-lead__text {
  margin: 0;
  max-width: var(--op-measure);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-primary);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

.op-lead__emphasis {
  margin: 0;
  max-width: var(--op-measure);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-brand);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

/* ── components/onepager/logo-strip/logo-strip.css ── */
/* ── One-pager / Logo strip ───────────────────────────────────
   Customer trust signal — logos only, no attribution, no quote.
   Sits inside .op-band (typically data-layer="0" data-padding="compact",
   directly beneath the hero). See CLAUDE.md "One-pagers".
   Elements:
     .op-logo-strip__intro — one supporting sentence (regular paragraph,
                              NOT an eyebrow — plain body copy)
     .op-logo-strip__grid  — 5-6 logos per row, 1-2 rows
   Logos are monochrome (grayscale), per CLAUDE.md's "Monochrome customer
   logo" visual-type rule — apply via the grayscale filter below so a
   full-color source logo still renders correctly.
   ──────────────────────────────────────────────────────────── */

.op-logo-strip {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

.op-logo-strip__intro {
  margin: 0;
  max-width: var(--op-measure);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-primary);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

.op-logo-strip__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-9);
}

.op-logo-strip__logo {
  /* Customer logos (images/customer-logos/) are cropped tight to the mark;
     below ~32px the thinner wordmarks (Smith+Nephew, Clarins) stop
     reading. */
  height: 32px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
}

/* ── components/onepager/comparison/comparison.css ── */
/* ── One-pager / Comparison ───────────────────────────────────
   Before/after or problem/solution narrative. Two columns, each a
   stack of icon+text rows; the "solution" column is the one visual
   highlight in the pair. Sits inside .op-band (typically light,
   layer-0), directly beneath a plain section heading (see
   docs/onepagers-design-brain.md for the heading composition pattern).
   Properties (data attributes):
     data-variant on .op-comparison__column : problem | solution
   Elements:
     .op-comparison__summary — optional bold closing line(s); wrap the
                                emphasized fragment in <mark> to color it
                                brand-purple (see .op-comparison__summary mark)
   Color rule (one-pager specific — do not use semantic red/green here):
     problem = neutral gray column + tertiary-colored icon.
     solution = brand-tint column + brand-purple icon.
     This mirrors the live reference decks: contrast is gray-vs-purple,
     not red-vs-green — semantic red/green is reserved for genuinely
     positive/negative meaning elsewhere (see CLAUDE.md Icons/DNA notes).
   ──────────────────────────────────────────────────────────── */

.op-comparison {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

.op-comparison__columns {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-6);
}

.op-comparison__column {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  background: var(--background-static-gray-layer-1);
}

.op-comparison__column[data-variant="solution"] {
  background: var(--background-static-brand-layer-1);
}

.op-comparison__column-title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.op-comparison__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.op-comparison__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.op-comparison__icon {
  flex-shrink: 0;
  display: flex;
  width: 20px;
  height: 20px;
  color: var(--content-static-tertiary);
}

.op-comparison__column[data-variant="solution"] .op-comparison__icon {
  color: var(--content-static-brand);
}

.op-comparison__text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-comparison__summary {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-comparison__summary mark {
  background: none;
  color: var(--content-static-brand);
}

/* ── components/onepager/callout/callout.css ── */
/* ── One-pager / Callout ──────────────────────────────────────
   A supporting brand-tint card that sits BESIDE a narrative column,
   not on its own: it carries the one compressed fact the prose is
   arguing around — the status-quo workflow chain, or the complexity
   formula. Never a standalone band; always the minor column of a
   two-column band (compose with .grid + data-grid-span inside
   .op-band, per docs/onepagers-design-brain.md).
   Elements (presence):
     .op-callout__title  — the card's own heading (always present)
     .op-chain           — optional chain/formula line (shared base
                            utility, see base/onepagers-layout.css)
     .op-callout__note   — optional closing note, separated by a dashed
                            rule; the dash is what marks it as an aside
                            to the chain above rather than a second
                            statement of equal weight
   Notes:
     - Brand-tint as a CARD fill (not a band background) is already
       established by .op-comparison__column[data-variant="solution"];
       the brand-tint BAND stays reserved for .op-platform-pillars.
   ──────────────────────────────────────────────────────────── */

.op-callout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  background: var(--background-static-brand-layer-1);
}

.op-callout__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.op-callout__note {
  margin: 0;
  padding-top: var(--spacing-5);
  border-top: 1px dashed var(--border-divider-default);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── components/onepager/flow/flow.css ── */
/* ── One-pager / Flow ─────────────────────────────────────────
   A left-to-right "input → process → output" diagram: three panels
   joined by arrow connectors, with the middle (process) panel
   highlighted as the one that carries the product's actual work.
   Use it when the argument is genuinely a pipeline whose MIDDLE is
   the point — the surrounding panels only name what goes in and what
   comes out. For a sequential list of things the product does with no
   input/output framing, use .op-numbered-cards; for a mechanics
   walkthrough with screenshots, use .op-steps.
   Properties (data attributes):
     data-variant on .op-flow__panel : plain (default) | highlight
   Elements (presence):
     .op-flow__panel-title — the panel's heading
     .op-chain             — optional process chain (shared base
                              utility); belongs to the highlight panel
     .op-flow__panel-text  — the panel's body copy
     .op-flow__connector   — a 20px arrow icon between two panels;
                              decorative, always aria-hidden
   Notes:
     - Panels stretch to equal height (align-items: stretch) so the
       connectors stay on the shared vertical centre line regardless
       of how much copy each panel holds.
     - The highlight panel fills with background-static-brand-inverted
       and repoints --content-static-primary/secondary to inverted, the
       same self-contained pairing .op-band[data-layer="brand"] uses.
       For exactly that reason it inherits the same restriction: do NOT
       place this component in a data-theme="dark" band. In dark mode
       --content-static-inverted is near-black, so the highlight panel
       would render black text on brand purple. Put Flow on a light
       band and let the purple panel supply the contrast — which is
       also how the source documents draw it.
   ──────────────────────────────────────────────────────────── */

.op-flow {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-5);
}

.op-flow__panel {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  /* Layer-0 (white) plus a shadow rather than an alpha tint: the side
     panels have to read as distinct surfaces, and an alpha tint over a
     gray band is nearly invisible. The shadow is what lets the
     component sit on a layer-0 band too. */
  background: var(--background-static-gray-layer-0);
  box-shadow: var(--shadow-elevation-s);
}

.op-flow__panel[data-variant="highlight"] {
  flex: 1.25 1 0;
  background: var(--background-static-brand-inverted);
  box-shadow: none;
  --content-static-primary: var(--content-static-inverted);
  --content-static-secondary: var(--content-static-inverted);
  /* --content-static-brand has to be repointed too, or an .op-chain
     inside this panel loses its separators entirely: the chain glyphs
     read the brand token, and brand purple on brand purple is
     invisible. Inverted keeps them visible; the opacity below is what
     still marks them as separators rather than terms, since both are
     now white and only the terms carry semi-bold weight. */
  --content-static-brand: var(--content-static-inverted);
}

.op-flow__panel[data-variant="highlight"] .op-chain__sep { opacity: 0.6; }

.op-flow__panel-title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.op-flow__panel-text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-flow__connector {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  color: var(--content-static-brand);
}

.op-flow__connector svg { width: 20px; height: 20px; }

/* ── components/onepager/numbered-cards/numbered-cards.css ── */
/* ── One-pager / Numbered cards ───────────────────────────────
   An ENUMERATED set as a single row of cards, each led by a numbered
   badge and topped by a brand accent rule. Reach for it when the
   items are counted — a 5-stage "how it works", the "four problems we
   solve" — where the number itself is part of the message.
   How it differs from its neighbours:
     .op-benefit-cards  — parallel, UNcounted value props (icon, no
                          number); if reordering the items would change
                          nothing, use that instead.
     .op-steps          — the same sequence told at length, one row per
                          step with a screenshot each, always dark.
                          Use Steps when each stage needs a visual;
                          Numbered cards when the whole sequence has to
                          fit one scannable row.
   Properties (data attributes):
     data-cards on .op-numbered-cards : 3 | 4 | 5
       — 5 tightens padding and gap, since five cards across the
         1184px content width leave little room inside each.
   Notes:
     - The card fill is layer-0, so place this component on a band of
       data-layer="1" or higher. On a layer-0 band the cards would have
       the same fill as the band and only the shadow would separate
       them, which is not enough at this card size.
     - The brand top rule is a ::before block using a BACKGROUND token
       as a background, rather than a border-color (no brand border
       token exists) — see the same reasoning in .op-signals.
   ──────────────────────────────────────────────────────────── */

.op-numbered-cards {
  display: flex;
  gap: var(--spacing-6);
}

.op-numbered-cards[data-cards="5"] { gap: var(--spacing-5); }

.op-numbered-cards__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  overflow: hidden;
  background: var(--background-static-gray-layer-0);
  box-shadow: var(--shadow-elevation-s);
}

.op-numbered-cards[data-cards="5"] .op-numbered-cards__card {
  padding: var(--spacing-6);
}

.op-numbered-cards__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--background-static-brand-inverted);
}

.op-numbered-cards__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--background-static-brand-inverted);
  color: var(--content-static-inverted);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

.op-numbered-cards__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.op-numbered-cards__paragraph {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── components/onepager/checklist/checklist.css ── */
/* ── One-pager / Checklist ────────────────────────────────────
   A scannable list of short, single-idea lines — the shape that
   carries most of an internal sales cheat sheet: what to listen for,
   questions to ask, the criteria a qualified opportunity has to meet.
   One component covers both readings via data-marker:
     caret  — an open bullet list; the items are prompts to read
              through, order is not meaningful.
     number — counted criteria; each item gets a numbered badge and its
              own card surface, so "at least 4 of 6" is countable at a
              glance.
   Properties (data attributes):
     data-marker  on .op-checklist : caret (default) | number
     data-columns on .op-checklist : 1 (default) | 2
       — 2 lays the items out row-wise (1,2 / 3,4 / …), matching how
         the source documents pair them.
   Elements (presence):
     .op-checklist__marker — a 20px caret icon, or the item's numeral
     .op-checklist__note   — optional closing note under the list
                              (e.g. "Best-fit accounts: …"), for
                              qualifying detail that isn't itself an item
   Notes:
     - Only the number marker gets a card surface: a caret list reads
       as prose and boxing every line would fight the density the
       format wants.
   ──────────────────────────────────────────────────────────── */

.op-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.op-checklist__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.op-checklist[data-columns="2"] .op-checklist__list {
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4) var(--spacing-5);
}

.op-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.op-checklist__marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-static-brand);
}

.op-checklist__marker svg { width: 20px; height: 20px; }

.op-checklist__text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* Secondary, not tertiary: this note carries real qualifying detail a
   rep is expected to read (the best-fit account profile), so it has to
   be legible body copy set quieter than the items — not a disclaimer.
   Tertiary at caption size on a gray band is effectively unreadable. */
.op-checklist__note {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── Number marker ───────────────────────────────────────────────
   Counted criteria: a numbered badge on its own card surface. The
   item becomes the card, so alignment shifts to centre — every line
   here is short enough to sit on one or two lines. */

.op-checklist[data-marker="number"] .op-checklist__item {
  box-sizing: border-box;
  align-items: center;
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-4);
  background: var(--background-static-gray-layer-0);
  box-shadow: var(--shadow-elevation-s);
}

.op-checklist[data-marker="number"] .op-checklist__marker {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--background-static-brand-inverted);
  color: var(--content-static-inverted);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-caption);
  line-height: 1;
}

.op-checklist[data-marker="number"] .op-checklist__text {
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);
}

/* ── components/onepager/signals/signals.css ── */
/* ── One-pager / Signals ──────────────────────────────────────
   Verbatim things a customer says, quoted as evidence rather than as
   testimony. Distinct from .op-quote in both purpose and attribution:
   a Quote is one named customer vouching for Smartcat; a Signal is an
   anonymous line a rep should recognise in a discovery call ("We
   manage it in spreadsheets."). Signals are therefore never attributed
   and never centred — they are a dense, scannable set.
   Properties (data attributes):
     data-columns on .op-signals      : 1 (default) | 2
     data-variant on .op-signals__item : labeled (default) | pill
       labeled — a left-ruled box under its own heading, for the two or
                 three signals that carry the most weight.
       pill    — a compact tinted row with no heading, for a longer
                 list where the lines speak for themselves.
   Elements (presence):
     .op-signals__label — the item's heading; required on labeled,
                           omitted on pill
   Notes:
     - Pink is the tier's "overheard in the field" tint, deliberately
       distinct from the brand-purple used everywhere Smartcat is
       speaking in its own voice. It carries no positive/negative
       meaning — see the comparison component's note on why this tier
       avoids semantic red/green.
     - The left rule uses --content-static-pink as a border color
       because the palette has no pink border token; same pragmatic
       choice already made in .doc-callout's checkbox marker.
   ──────────────────────────────────────────────────────────── */

.op-signals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.op-signals[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4) var(--spacing-5);
}

.op-signals__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-5) var(--spacing-6);
  border-left: 3px solid var(--content-static-pink);
  border-radius: 0 var(--radius-4) var(--radius-4) 0;
  background: var(--background-static-pink-layer-1);
}

.op-signals__label {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-pink);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

.op-signals__text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-style: italic;
  color: var(--content-static-primary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── Pill variant ────────────────────────────────────────────────
   No heading, no left rule — a plain tinted row, so a list of ten
   reads as one block rather than ten separate call-outs. */

.op-signals__item[data-variant="pill"] {
  padding: var(--spacing-4) var(--spacing-5);
  border-left: 0;
  border-radius: var(--radius-4);
}

/* ── components/onepager/roster/roster.css ── */
/* ── One-pager / Roster ──────────────────────────────────────
   Who to talk to, grouped by function: a definition list pairing a
   function name with the titles inside it. Use it wherever the content
   is genuinely label-and-members — buying committee, stakeholder map,
   channel owners — and NOT for value props (.op-benefit-cards) or
   counted criteria (.op-checklist).
   Properties (data attributes):
     data-columns on .op-roster : 1 | 2 (default)
   Structure:
     A real <dl>, with each pair wrapped in a <div class="op-roster__group">
     (valid in HTML5 and required to keep a dt+dd pair together in the
     grid). Using <dt> for the function name is what lets the label sit
     at its own typographic level WITHOUT inline bold, which CLAUDE.md
     forbids.
   Notes:
     - Groups flow down columns, not across rows (column-count), so
       each function's titles stay next to it and the two columns
       balance to roughly equal height.
   ──────────────────────────────────────────────────────────── */

.op-roster {
  margin: 0;
  column-count: 2;
  column-gap: var(--spacing-9);
}

.op-roster[data-columns="1"] { column-count: 1; }

.op-roster__group {
  break-inside: avoid;
  margin-bottom: var(--spacing-5);
}

.op-roster__group:last-child { margin-bottom: 0; }

.op-roster__label {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-brand);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-roster__value {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── components/onepager/benefit-cards/benefit-cards.css ── */
/* ── One-pager / Benefit cards ────────────────────────────────
   Parallel, independent value props — use instead of Comparison when
   the content is NOT a before/after narrative (see docs/
   onepagers-design-brain.md, "Comparison vs. Benefit cards"). Sits
   inside .op-band, directly beneath a plain section heading.
   Properties (data attributes):
     data-cards on .op-benefit-cards : 2 | 3 | 4 | 5
       — 5 tightens the gap, padding and icon tile: five cards across
         the 1184px content width leave ~224px each, and the default
         32px padding would swallow most of that. Reach for 5 only when
         the props genuinely are five parallel one-liners; anything that
         needs a real paragraph per item wants 3 or 4.
   Elements:
     .op-benefit-cards__icon — 24px design-system icon in a brand-tint
                               circular tile (40px tile at 5-up)
   Band requirement:
     The card fill is layer-1, so place this component on a layer-0
     band. On a layer-1 band the cards share the band's own fill and
     vanish — the component carries no shadow or border to fall back
     on. (.op-numbered-cards is the mirror case: layer-0 fill, so it
     needs a layer-1+ band.)
   ──────────────────────────────────────────────────────────── */

.op-benefit-cards {
  display: flex;
  gap: var(--spacing-6);
}

.op-benefit-cards__card {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  background: var(--background-static-gray-layer-1);
}

.op-benefit-cards__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--background-static-brand-layer-2);
  color: var(--content-static-brand);
}

.op-benefit-cards__icon svg { width: 24px; height: 24px; }

.op-benefit-cards__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.op-benefit-cards__paragraph {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── 5-up row ────────────────────────────────────────────────────
   Same anatomy, compressed: the cards keep their icon and hierarchy,
   they just stop being able to afford the default breathing room. */

.op-benefit-cards[data-cards="5"] { gap: var(--spacing-5); }

.op-benefit-cards[data-cards="5"] .op-benefit-cards__card {
  gap: var(--spacing-4);
  padding: var(--spacing-6);
}

.op-benefit-cards[data-cards="5"] .op-benefit-cards__icon {
  width: 40px;
  height: 40px;
}

.op-benefit-cards[data-cards="5"] .op-benefit-cards__icon svg {
  width: 20px;
  height: 20px;
}

/* ── components/onepager/steps/steps.css ── */
/* ── One-pager / Steps ────────────────────────────────────────
   Sequential "how it works" mechanics — numbered rows, each pairing a
   short explanation with a product screenshot. Always sits inside a
   dark .op-band (data-theme="dark") — see docs/onepagers-design-brain.md.
   Properties (data attributes):
     data-image-position on .op-steps__step : right (default) | left
   Elements:
     .op-steps__summary — optional closing pill (checkmark icon + bold
                           line), e.g. "Review cycles shorten. Expertise
                           scales."
   Notes:
     - Each .op-steps__step is one filled card spanning the whole row
       (gray layer-2 on the dark band, --radius-5). The screenshot sits
       flush against the card's top, bottom and outer edge; the text gets
       the card's padding. One rectangle behind the whole row, so it also
       exports to Canva as a single shape.
     - .op-steps__number's purple-on-purple-circle pairing relies on
       .op-steps always living in a dark band, where ambient
       --content-static-primary is white — do not use this component
       outside a dark band without re-checking that contrast.
   ──────────────────────────────────────────────────────────── */

.op-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
}

.op-steps__step {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-5);
  overflow: hidden;
  background: var(--background-static-gray-layer-2);
}

.op-steps__step[data-image-position="left"] {
  flex-direction: row-reverse;
}

.op-steps__content {
  flex: 0 0 46%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
}

.op-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--content-static-brand);
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-small-text);
}

.op-steps__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.op-steps__paragraph {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-steps__media {
  flex: 1;
  min-width: 0;
}

/* With square promo shots (images/promo-ui-mockups/) the image column
   narrows to ~44% of the row, so a square image doesn't make the row
   towering. Applied to the whole component as soon as any step has a real
   image, and any step still on its placeholder goes square too, so every
   row keeps the same split and height. */
.op-steps:has(.op-media img) .op-steps__content { flex-basis: 56%; }
.op-steps:has(.op-media img) .op-media { aspect-ratio: 1; }

.op-steps__summary {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-full);
  background: var(--background-static-alpha-layer-2);
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-steps__summary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── components/onepager/quote/quote.css ── */
/* ── One-pager / Quote ────────────────────────────────────────
   Single customer testimonial. Sits inside .op-band — the surrounding
   band's data-layer/data-theme decides its background (light-purple
   tint is the common choice; a dark band works too, see
   docs/onepagers-design-brain.md for the decorative-dark variant).
   Properties (data attributes):
     data-layout on .op-quote : standalone (default, centered)
                                 | with-stats | with-response
   Elements:
     .op-quote__text     — the quote itself, wrapped in real curly quotes
                            (&ldquo; &rdquo;) in the text. There is no
                            decorative quote-mark graphic: it came out
                            garbled in the Canva export, and the
                            punctuation does the same job.
     .op-quote__stats    — content toggle: only present in the
                            with-stats layout, a stack of big proof
                            numbers beside the quote (reuses the same
                            value/label pattern as op-stat-band, at a
                            smaller scale)
     .op-quote__response — content toggle: only present in the
                            with-response layout, Smartcat answering
                            the quote in its own voice
     .op-quote__author   — omit it in the with-response layout: that
                            layout quotes a pain every buyer recognises,
                            so naming one customer would narrow it
   ──────────────────────────────────────────────────────────── */

.op-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.op-quote__text {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.op-quote__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.op-quote__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  text-align: left;
}

.op-quote__name {
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
}

.op-quote__role {
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* ── with-stats layout ───────────────────────────────────────── */

.op-quote[data-layout="with-stats"] {
  flex-direction: row;
  align-items: flex-start;
  max-width: none;
  margin-inline: 0;
  text-align: left;
  gap: var(--spacing-11);
}

.op-quote[data-layout="with-stats"] .op-quote__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
}

.op-quote__stats {
  flex: 0 0 auto;
  display: flex;
  gap: var(--spacing-9);
}

.op-quote__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.op-quote__stat-value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-brand);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.op-quote__stat-label {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* ── with-response layout ────────────────────────────────────────
   A quote the reader is meant to recognise in themselves, answered
   directly beside it. Unlike the other two layouts this one is
   deliberately UNattributed (see the .op-quote__author note above) —
   the point is "you have heard this too", not "this customer said it".
   The quote keeps a brand rule down its left edge so it still reads as
   quoted speech without the dropped quote-mark glyph.

   Sizing: the quote drops from H2 to H3 because it now shares the row
   with a response instead of owning a centred band. */

.op-quote[data-layout="with-response"] {
  flex-direction: row;
  align-items: center;
  max-width: none;
  margin-inline: 0;
  text-align: left;
  gap: var(--spacing-9);
}

.op-quote[data-layout="with-response"] .op-quote__body {
  flex: 0 0 55%;
  min-width: 0;
  padding-left: var(--spacing-6);
  border-left: 3px solid var(--content-static-brand);
}

.op-quote[data-layout="with-response"] .op-quote__text {
  font-style: italic;
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.op-quote__response {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.op-quote__response-text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

/* ── components/onepager/impact-tiles/impact-tiles.css ── */
/* ── One-pager / Impact tiles ─────────────────────────────────
   Aggregate outcomes across the organization — 3-5 short icon+title+
   caption tiles in a row. Sits inside .op-band (typically light,
   layer-0 or layer-1). See docs/onepagers-design-brain.md.
   Properties (data attributes):
     data-tiles on .op-impact-tiles : 3 | 4 | 5
   Elements:
     .op-impact-tiles__summary — optional closing pill, same pattern as
                                  .op-steps__summary
   ──────────────────────────────────────────────────────────── */

.op-impact-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.op-impact-tiles__row {
  display: flex;
  gap: var(--spacing-7);
}

.op-impact-tiles__tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.op-impact-tiles__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-3);
  background: var(--background-static-gray-layer-2);
  color: var(--content-static-primary);
}

.op-impact-tiles__icon svg { width: 20px; height: 20px; }

.op-impact-tiles__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
}

.op-impact-tiles__text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-impact-tiles__summary {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-full);
  background: var(--background-static-gray-layer-2);
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

.op-impact-tiles__summary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--content-static-brand);
}

/* ── components/onepager/stat-band/stat-band.css ── */
/* ── One-pager / Stat band ────────────────────────────────────
   A standalone proof moment — 2-4 big brand-purple numbers, no cards,
   no borders. Always wrap in .op-band data-layer="brand" (see
   docs/onepagers-design-brain.md) — the band's repointing of
   --content-static-primary/secondary to inverted is what turns these
   values and labels white; this component sets no color of its own
   beyond that.
   Properties (data attributes):
     data-stats on .op-stat-band : 2 | 3 | 4
   ──────────────────────────────────────────────────────────── */

.op-stat-band {
  display: flex;
  gap: var(--spacing-9);
}

.op-stat-band__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.op-stat-band__value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.op-stat-band__label {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

/* ── components/onepager/rating-tiles/rating-tiles.css ── */
/* ── One-pager / Rating tiles ─────────────────────────────────
   G2-style rating/scale proof — small tiles combining a CSS-only
   conic-gradient gauge ring with a big number, or a wide combo tile
   (icon + stat + short paragraph). Industry/vertical one-pagers only
   (see docs/onepagers-design-brain.md). Typically sits on a dark
   .op-band (data-theme="dark").
   Properties (data attributes):
     data-variant on .op-rating-tiles__tile : gauge (default) | wide
   Custom property (set inline per gauge tile):
     --op-rating-value : 0-100 — the filled percentage of the ring
   ──────────────────────────────────────────────────────────── */

.op-rating-tiles {
  display: flex;
  gap: var(--spacing-6);
}

.op-rating-tiles__tile {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
  border-radius: var(--radius-5);
  background: var(--background-static-gray-layer-1);
}

.op-rating-tiles__tile[data-variant="wide"] {
  flex: 1.4 1 0;
}

/* ── Gauge ────────────────────────────────────────────────────── */

.op-rating-tiles__ring {
  --op-rating-value: 0;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: conic-gradient(var(--content-static-brand) calc(var(--op-rating-value) * 1%), var(--background-static-gray-layer-3) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-rating-tiles__ring-inner {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--background-static-gray-layer-0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-rating-tiles__ring-value {
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
}

.op-rating-tiles__label {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* ── Wide combo tile ──────────────────────────────────────────── */

.op-rating-tiles__wide-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-3);
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-primary);
}

.op-rating-tiles__wide-icon svg { width: 20px; height: 20px; }

.op-rating-tiles__wide-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.op-rating-tiles__value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
}

/* ── components/onepager/platform-pillars/platform-pillars.css ── */
/* ── One-pager / Platform pillars ─────────────────────────────
   Fixed, recurring content block: Smartcat's 4 AI-platform pillars,
   verbatim the same across every reference one-pager (Intelligence
   Fabric, Agents & Orchestration, Expert Collaboration, Smartcat AI
   Visibility & Control). Always wrap in .op-band data-layer="brand-tint"
   (see docs/onepagers-design-brain.md) — never dark-themed in any
   reference.
   Reuse the reference template's copy verbatim unless Smartcat's
   platform messaging changes; this is marketing copy, not placeholder
   lorem ipsum.
   ──────────────────────────────────────────────────────────── */

.op-platform-pillars {
  display: flex;
  gap: var(--spacing-6);
}

.op-platform-pillars__pillar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.op-platform-pillars__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-3);
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-brand);
}

.op-platform-pillars__icon svg { width: 20px; height: 20px; }

.op-platform-pillars__title {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-primary);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
}

.op-platform-pillars__text {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* ── components/onepager/cta-band/cta-band.css ── */
/* ── One-pager / CTA band ──────────────────────────────────────
   Closes most one-pagers. Self-sufficient — carries its own solid
   brand-purple background directly, like .op-hero, and is never
   wrapped in .op-band.
   Notes:
     - Unlike decks (no interactive UI), one-pagers are viewed as
       documents, so a real .btn is correct here — see CLAUDE.md
       "One-pagers".
     - The button uses data-type="secondary" as-is, and renders as the
       near-white pill the reference one-pagers show. That pairing is
       NOT automatic: a brand-purple ground is a dark surface but not a
       data-theme="dark" context, so the button token group is
       repointed to its dark-mode values in base/onepagers-layout.css
       ("Buttons on a brand-purple surface") — see the note there
       before changing this component's background.
   ──────────────────────────────────────────────────────────── */

.op-cta-band {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-12) var(--spacing-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  text-align: center;
  background: var(--background-static-brand-inverted);
}

.op-cta-band__heading {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-inverted);
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.op-cta-band__paragraph {
  margin: 0;
  max-width: 560px;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.85;
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
}

/* ── components/onepager/footer/footer.css ── */
/* ── One-pager / Footer ────────────────────────────────────────
   Closes every one-pager — a fixed near-black bar. Self-sufficient, no
   theme dependency: assumes the .op-page root is in its default light
   mode, the only case one-pagers are built for (see CLAUDE.md
   "One-pagers"). No semantic token exists for an always-near-black bar
   (background-static-gray-inverted flips to white in dark mode), so the
   background is the one deliberate primitive reference in the onepager
   tier — flagged here rather than silently treated as a normal semantic
   token. .op-hero[data-theme="dark"] references the same primitive so a
   dark masthead and this bar match exactly.

   Properties (data attributes):
     data-layout on .op-footer : default | statement | ask
       default   — a slim bar: logo left, URL right. Nothing to say
                   beyond the sign-off, because the document already
                   closed on an .op-cta-band.
       statement — the document's own closing claim left, contact and
                   trust line right. For a document with no CTA band:
                   the footer has to do the closing work itself.
       ask       — a labelled question, for an internal document that
                   ends on the one thing the reader should go and do.
     Both statement and ask grow the bar's vertical padding, since a
     slim bar cannot hold multiple lines legibly.

   Elements (presence):
     .op-footer__logo          — default layout
     .op-footer__url           — default and statement layouts
     .op-footer__statement     — the closing claim (statement layout);
                                 wrap the final phrase in
                                 .op-footer__statement-accent to render
                                 it in brand purple
     .op-footer__note          — small trust/qualifier line under the URL
     .op-footer__label         — names the ask (ask layout); a real
                                 heading, not an eyebrow
     .op-footer__ask           — the question itself
     .op-footer__follow-up     — optional line under the question

   Note: --content-static-* tokens are NOT usable here — the bar is
   always near-black while the page around it is in light mode, so
   ambient --content-static-primary would be near-black too. Content
   colors therefore use --content-static-inverted (white in light
   mode), the same approach .op-hero takes against its brand ground.
   ──────────────────────────────────────────────────────────── */

.op-footer {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-6) var(--spacing-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-9);
  background: var(--color-non-semantic-gray-100);
}

.op-footer__logo {
  height: 18px;
  width: auto;
}

.op-footer__url {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.7;
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* The URL is a real link (https://www.smartcat.com) — in the HTML, the
   PDF and the Canva copy — but it keeps the plain footer look. */
.op-footer__url a {
  color: inherit;
  text-decoration: none;
}

/* ── Statement layout ───────────────────────────────────────────
   The closing claim carries the weight, so it sits at H3 scale on the
   left; the URL block right-aligns beside it as sign-off, not as the
   point. */

.op-footer[data-layout="statement"] {
  padding-block: var(--spacing-9);
  align-items: flex-end;
}

.op-footer__statement {
  margin: 0;
  max-width: var(--op-measure);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-inverted);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.op-footer__statement-accent { color: var(--content-static-brand); }

.op-footer[data-layout="statement"] .op-footer__meta,
.op-footer[data-layout="ask"] .op-footer__meta {
  flex-shrink: 0;
  /* Capped so the trust line wraps instead of holding one long line and
     squeezing the statement — the statement is the point of this
     layout, the meta block is the sign-off. */
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-2);
  text-align: right;
}

.op-footer[data-layout="statement"] .op-footer__url {
  opacity: 1;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
}

.op-footer__note {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.6;
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
}

/* ── Ask layout ─────────────────────────────────────────────────
   A narrow label column beside the question, so the label reads as a
   margin note on the ask rather than a heading above it. */

.op-footer[data-layout="ask"] {
  padding-block: var(--spacing-9);
  align-items: flex-start;
  gap: var(--spacing-8);
}

.op-footer__label {
  flex: 0 0 160px;
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  color: var(--content-static-brand);
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

.op-footer__ask-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.op-footer__ask {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--content-static-inverted);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.op-footer__follow-up {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  color: var(--content-static-inverted);
  opacity: 0.7;
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}


/* ── Components / Document ───────────────────────────────────── */
/* ── components/document/doc-hero/doc-hero.css ── */
/* ── Document / Hero (cover page) ─────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   Self-sufficient — like .op-hero (one-pagers) / hero-block (web), this
   is the page's only element: never wrapped in .doc-header/.doc-content/
   .doc-footer. Place a .doc-page[data-theme="dark"] containing only
   .doc-hero as every document's default opening page — skip only when
   a specific document has an explicit reason not to.

   Left-aligned layout: a topbar (logo + optional tag) pinned to the
   top, then the title block and an optional table-of-contents each
   pinned a fixed distance below the previous element — whatever space
   remains settles naturally at the bottom of the page.

   Dark theme is free: every color below is a --content-static-* token,
   already re-declared under [data-theme="dark"] in tokens/colors.css.
   The logo is not token-driven, so the white SVG variant is referenced
   explicitly in markup — see CLAUDE.md "Logo".

   No page number is shown on this page (no .doc-footer); numbering
   starts at 2 on the next physical page.

   Elements:
     .doc-hero__tag           — include for has-tag (e.g. "Internal guide")
     .doc-hero__title-accent  — wrap a key word/phrase in the title to
                                 render it in brand purple
     .doc-hero__meta          — include for has-audience-line (e.g. "For Linguists")
     .doc-hero__meta-accent   — wrap the audience/customer name to render
                                 it in brand purple
     .doc-hero__subtitle      — include for has-description
     .doc-hero__toc           — include for has-table-of-contents; holds
                                 1–2 .doc-hero__toc-column children
     .doc-hero__toc-page      — include for has-page-number, on a
                                 .doc-hero__toc-item; right-aligned via
                                 the label's flex:1 1 auto
     .doc-hero__toc-subitem   — include for has-subsection; an indented
                                 row nested directly under a .doc-hero__toc-item,
                                 for a sub-section within that top-level entry
   ──────────────────────────────────────────────────────────── */

.doc-hero {
  flex: 1 1 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-9);
}

.doc-hero__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-hero__logo {
  height: 20px;
  width: auto;
}

.doc-hero__tag {
  margin: 0;
  padding: var(--spacing-1) var(--spacing-3);
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-full);
  color: var(--content-static-secondary);
}

.doc-hero__body {
  margin-top: var(--spacing-15); /* 160px — fixed distance below the topbar */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  max-width: 800px;
}

.doc-hero__title {
  margin: 0;
  color: var(--content-static-primary);
}

.doc-hero__title-accent {
  color: var(--content-static-brand);
}

.doc-hero__meta {
  margin: 0;
  color: var(--content-static-secondary);
}

.doc-hero__meta-accent {
  color: var(--content-static-brand);
}

.doc-hero__subtitle {
  margin: 0;
  color: var(--content-static-secondary);
}

.doc-hero__toc {
  margin-top: var(--spacing-13); /* 96px — fixed distance below the body */
  display: flex;
  gap: var(--spacing-9);
  max-width: 960px;
}

.doc-hero__toc-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.doc-hero__toc-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-divider-default);
}

.doc-hero__toc-item-main {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding-block: var(--spacing-3);
}

.doc-hero__toc-item:has(.doc-hero__toc-subitem) .doc-hero__toc-item-main {
  padding-bottom: var(--spacing-1);
}

.doc-hero__toc-item .doc-hero__toc-subitem:last-child {
  padding-bottom: var(--spacing-3);
}

.doc-hero__toc-number {
  color: var(--content-static-brand);
}

.doc-hero__toc-label {
  flex: 1 1 auto;
  color: var(--content-static-secondary);
}

.doc-hero__toc-page {
  color: var(--content-static-tertiary);
}

/* Nested sub-section row — indented under its parent .doc-hero__toc-item,
   with a dotted leader filling the gap before the page number. */
.doc-hero__toc-subitem {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding-block: var(--spacing-2);
  padding-left: var(--spacing-9); /* 48px indent under the number+label above */
}

.doc-hero__toc-subitem-label {
  flex: 0 0 auto;
  color: var(--content-static-tertiary);
}

.doc-hero__toc-subitem-leader {
  flex: 1 1 auto;
  min-width: var(--spacing-6);
  border-bottom: 1px dotted var(--border-divider-default);
  margin-bottom: 4px; /* lifts the dotted rule to sit mid-line, not on the text baseline */
}

.doc-hero__toc-subitem-page {
  flex: 0 0 auto;
  color: var(--content-static-tertiary);
}

/* ── components/document/doc-meta/doc-meta.css ── */
/* ── Document / Meta table ────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A property table for document metadata (status, audience, category,
   tags…) — mirrors the property-table pattern common to knowledge-base
   articles. Two-column rows: label (icon + text) | value.
   Value properties (element presence):
     .doc-meta__value           — plain text value
     .doc-meta__pill            — tag-style value, use data-color
   Pill properties (data attributes):
     data-color : gray | blue | orange | pink
   ──────────────────────────────────────────────────────────── */

.doc-meta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-3);
  overflow: hidden;
}

.doc-meta__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-divider-default);
}

.doc-meta__row:last-child {
  border-bottom: none;
}

.doc-meta__label {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  color: var(--content-static-secondary);
}

.doc-meta__label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--content-static-tertiary);
}

.doc-meta__values {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-5);
  border-left: 1px solid var(--border-divider-default);
}

.doc-meta__value {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  color: var(--content-static-primary);
}

.doc-meta__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-2);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  background: var(--background-static-gray-layer-2);
  color: var(--content-static-primary);
}

.doc-meta__pill[data-color="blue"]   { background: var(--background-static-blue-layer-1);   color: var(--content-static-blue); }
.doc-meta__pill[data-color="orange"] { background: var(--background-static-orange-layer-1); color: var(--content-static-orange); }
.doc-meta__pill[data-color="pink"]   { background: var(--background-static-pink-layer-1);    color: var(--content-static-pink); }

/* ── components/document/doc-steps/doc-steps.css ── */
/* ── Document / Steps ─────────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A numbered instruction list — each step pairs a number badge with a
   short instruction paragraph, and may carry its own screenshot below
   the text (full width, wrap it in .doc-screenshot).
   Elements:
     .doc-steps__heading — include for a step that names itself before
                           its explanation (a titled practice or option,
                           rather than a bare instruction); place it
                           above .doc-steps__text inside .doc-steps__body
     .doc-steps__media — include for a step with its own screenshot
   Step-list properties (data attributes, on .doc-steps):
     data-marker : number (default) | icon — icon replaces the solid
                   numbered badge with a light brand-tint circle holding
                   a 18×18 inline svg (stroke="currentColor"); use for
                   an unordered row list (options, checks) rather than
                   a literal ordered sequence — sequential instructions
                   should keep the numbered badge
   ──────────────────────────────────────────────────────────── */

.doc-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.doc-steps__step {
  display: flex;
  gap: var(--spacing-4);
}

.doc-steps__number {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--background-static-brand-inverted);
  color: var(--content-static-inverted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-small-text);
}

.doc-steps[data-marker="icon"] .doc-steps__number {
  background: var(--background-static-brand-layer-1);
  color: var(--content-static-brand);
}

.doc-steps[data-marker="icon"] .doc-steps__number svg {
  width: 18px;
  height: 18px;
}

.doc-steps__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Optional step title. Carries the badge-alignment padding itself so
   that a titled step still optically centers against its number; the
   .doc-steps__text below it then sits flush. */
.doc-steps__heading {
  margin: 0;
  padding-top: 2px;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  color: var(--content-static-primary);
}

.doc-steps__heading + .doc-steps__text {
  padding-top: 0;
}

.doc-steps__text {
  margin: 0;
  padding-top: 2px; /* optically centers the first line against the number badge */
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  color: var(--content-static-secondary);
}

/* ── components/document/doc-callout/doc-callout.css ── */
/* ── Document / Callout ───────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A tinted box for a bulleted list of tips/notes/shortcuts — each item
   is a bullet followed by inline text; pair a .doc-callout__term with
   a description, or with a .doc-kbd chip, on the same line.
   Elements:
     .doc-callout__head    — wrap heading with .doc-callout__icon; omit
                              the wrapper and use .doc-callout__heading
                              alone when there's no icon
     .doc-callout__icon    — include for has-icon; a single 20×20 inline
                              svg (stroke="currentColor"), never a photo
                              or decorative graphic
     .doc-callout__heading — include for has-heading
   Callout properties (data attributes):
     data-color  : gray (default) | blue | orange | pink — mirrors
                   .doc-meta__pill's color system, for grouping callouts
                   by category (tip vs. warning vs. shortcut, etc.)
     data-marker : dot (default) | checkbox — checkbox renders each
                   .doc-callout__item with an outlined square instead of
                   a dot bullet, for a scannable checklist
   ──────────────────────────────────────────────────────────── */

.doc-callout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-4);
  background: var(--background-static-gray-layer-1);
}

.doc-callout[data-color="blue"]   { background: var(--background-static-blue-layer-1); }
.doc-callout[data-color="orange"] { background: var(--background-static-orange-layer-1); }
.doc-callout[data-color="pink"]   { background: var(--background-static-pink-layer-1); }

.doc-callout__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.doc-callout__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--content-static-primary);
}

.doc-callout__heading {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  color: var(--content-static-primary);
}

.doc-callout__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.doc-callout__item {
  display: flex;
  gap: var(--spacing-3);
}

.doc-callout__item::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  background: var(--content-static-tertiary);
}

.doc-callout[data-marker="checkbox"] .doc-callout__item::before {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: var(--spacing-2);
  border-radius: var(--radius-1);
  background: none;
  border: 1.5px solid var(--content-static-tertiary);
}

.doc-callout__item-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  color: var(--content-static-secondary);
}

/* A separate structural term — e.g. an action name preceding its
   description or shortcut — not inline emphasis of a word mid-sentence. */
.doc-callout__term {
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);
}

/* A keyboard key/shortcut chip, e.g. <kbd class="doc-kbd">Ctrl+Enter</kbd> */
.doc-kbd {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-1);
  background: var(--background-static-gray-layer-0);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  color: var(--content-static-primary);
}

/* ── components/document/doc-screenshot/doc-screenshot.css ── */
/* ── Document / Screenshot ────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   Frames a product-UI screenshot inside a tinted, padded container —
   the container caps at 1080px and centers itself on the page (never
   stretching to the full content width), and separately horizontally
   centers the frame inside it. The bordered frame never crops or
   re-annotates the source image — callout arrows/highlights already
   baked into a screenshot stay as-is.

   Sizing (see CLAUDE.md "Image containers"): the frame is never
   distorted or stretched past the source image's own resolution.
   width:auto sizes the frame to the image's natural pixels (centered by
   the container), up to a 960px ceiling that only ever caps DOWN, never
   stretches UP. If a source image is under 40px on both sides, the
   author must render it at 2x by setting the <img>'s width/height HTML
   attributes to exactly double the source file's real pixel dimensions
   (this doubles both dimensions equally, so proportions stay intact) —
   there is no automatic way to detect "the original was tiny" in CSS.
   Elements:
     .doc-screenshot__caption — include for has-caption
   ──────────────────────────────────────────────────────────── */

.doc-screenshot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.doc-screenshot__container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  padding-block: var(--spacing-8); /* 40px */
  background: var(--background-static-gray-layer-2);
  border-radius: var(--radius-5); /* 16px */
}

.doc-screenshot__frame {
  width: auto;
  max-width: 960px;
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-elevation-s);
  overflow: hidden;
}

.doc-screenshot__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%; /* only ever caps the frame's own 960px ceiling down, never stretches up to it */
}

.doc-screenshot__caption {
  margin: 0;
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  color: var(--content-static-tertiary);
}

/* ── components/document/doc-divider/doc-divider.css ── */
/* ── Document / Divider ───────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   Marks a top-level Section boundary and carries the new Section's H1
   inside it — place between the end of one H1 section's content and
   the next H1, when both fall on the same page. Spans wider than the
   text column (max-width 960px override lives in base/document-layout.css).

   Author-placed: this tier has no automatic section detection. Skip it
   when the new Section instead starts at the top of a fresh page —
   the page break already separates them; a divider with nothing above
   or below it on the same page is a broken pattern.
   ──────────────────────────────────────────────────────────── */

.doc-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-divider-default);
  /* Ambient .doc-content gap (--spacing-7, 32px) + this top-up = 120px
     total between the previous section's content and the line. */
  margin-top: calc(var(--spacing-14) - var(--spacing-7));
  /* 120px between the line and the H1 heading inside it. */
  padding-top: var(--spacing-14);
}

/* ── components/document/doc-pullquote/doc-pullquote.css ── */
/* ── Document / Pull-quote ────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A lightweight emphasized statement pulled out of the running text —
   a left border rule and large primary-colored text, no quote-mark
   glyph (glyph ornaments are a dropped pattern for this tier — see
   docs/document-design-brain.md). Use sparingly, for a genuine
   pull-out statement, not as a generic "important paragraph" box —
   that's what .doc-callout is for.
   Elements:
     .doc-pullquote__attribution — include for has-attribution
   ──────────────────────────────────────────────────────────── */

.doc-pullquote {
  margin: 0;
  border-left: 1px solid var(--border-divider-default);
  padding-left: var(--spacing-6);
}

.doc-pullquote__text {
  margin: 0;
  color: var(--content-static-primary);
}

.doc-pullquote__attribution {
  margin: 0;
  margin-top: var(--spacing-3);
  color: var(--content-static-secondary);
}

/* ── components/document/doc-footnotes/doc-footnotes.css ── */
/* ── Document / Footnotes ─────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A closing citations/notes block — a top divider rule followed by a
   small, tertiary-colored numbered list. Place at the end of the
   section or document that the notes belong to, never as a standalone
   page. Superscript reference markers in the running text (e.g. a
   plain <sup>1</sup>) point back to these items.
   ──────────────────────────────────────────────────────────── */

.doc-footnotes {
  margin: 0;
  padding: 0;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border-divider-default);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.doc-footnotes__item {
  display: flex;
  gap: var(--spacing-2);
  color: var(--content-static-tertiary);
}

.doc-footnotes__number {
  flex: 0 0 auto;
}

/* ── components/document/doc-chapter-opener/doc-chapter-opener.css ── */
/* ── Document / Chapter opener ────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   Self-sufficient — like .doc-hero, this is the page's only element:
   never wrapped in .doc-header/.doc-content/.doc-footer. Place on a
   .doc-page (dark-themed, or a light page for a brand-tint variant —
   see data-color) as an interior part/chapter divider for long,
   multi-part documents (roughly 30+ pages across several distinct
   parts). Skip it for shorter or single-part documents — a plain
   .doc-divider is enough there.

   Unlike .doc-hero (top-pinned, repeats once per document), this
   page's title block vertically centers — the conventional book/report
   "part opener" placement — and it still carries its own page number,
   since it has no .doc-footer.

   Elements:
     .doc-chapter-opener__label   — include for has-part-label (e.g. "Part 2")
     .doc-chapter-opener__summary — include for has-summary-card; a
                                     floating card previewing what the
                                     part covers
   ──────────────────────────────────────────────────────────── */

.doc-chapter-opener {
  flex: 1 1 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-9);
}

.doc-chapter-opener__pagenum {
  margin: 0;
  align-self: flex-end;
  color: var(--content-static-tertiary);
}

.doc-chapter-opener__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 800px;
}

.doc-chapter-opener__label {
  margin: 0;
  color: var(--content-static-brand);
}

.doc-chapter-opener__title {
  margin: 0;
  margin-top: var(--spacing-3);
  color: var(--content-static-primary);
}

.doc-chapter-opener__summary {
  margin-top: var(--spacing-13); /* 96px — same fixed-distance-below pattern as .doc-hero__toc */
  max-width: 640px;
  padding: var(--spacing-7);
  border-radius: var(--radius-5);
  background: var(--background-static-gray-layer-1);
}

.doc-chapter-opener__summary-text {
  margin: 0;
  color: var(--content-static-secondary);
}

/* ── components/document/doc-timeline/doc-timeline.css ── */
/* ── Document / Timeline ───────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A horizontal milestone/roadmap strip: a pill label above a dot on a
   connecting line, with a boxed caption below. Each .doc-timeline__milestone
   is an equal-width grid column, so the connecting line renders as one
   continuous rule across the strip; the first/last dots trim it flush.
   Use for a small number of milestones (roughly 3–5) — more than that,
   prefer a plain list.
   Elements:
     .doc-timeline__pill    — the milestone's label (date, phase, version…)
     .doc-timeline__dot     — sits on the connecting line
     .doc-timeline__caption — boxed description below the dot
   ──────────────────────────────────────────────────────────── */

.doc-timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-4);
}

.doc-timeline__milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  text-align: center;
}

.doc-timeline__pill {
  margin: 0;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--background-static-brand-layer-1);
  color: var(--content-static-brand);
}

.doc-timeline__dot-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-timeline__dot-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border-divider-default);
}

.doc-timeline__milestone:first-child .doc-timeline__dot-row::before { left: 50%; }
.doc-timeline__milestone:last-child .doc-timeline__dot-row::before { right: 50%; }

.doc-timeline__dot {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--content-static-brand);
}

.doc-timeline__caption {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-4);
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-3);
  background: var(--background-static-gray-layer-0);
}

.doc-timeline__caption-text {
  margin: 0;
  color: var(--content-static-secondary);
}

/* ── components/document/doc-table/doc-table.css ── */
/* ── Document / Table ─────────────────────────────────────────
   Figma: n/a (document tier is code-authored, no Figma source)
   A comparison / reference table — a row-label column followed by two
   or more value columns, ruled with hairline dividers and no fill.
   Use it for genuinely tabular reference content (a side-by-side
   comparison, a parameter list); a bulleted set of tips is .doc-callout
   and an ordered procedure is .doc-steps.

   Authored as a real <table> — a document is printed and read like a
   manual, so the semantic element (and its header cells) is correct.

   Elements:
     .doc-table__corner   — the empty top-left cell above the row labels;
                            include whenever the table has row labels
     .doc-table__col-head — a value column's header cell
     .doc-table__row-head — a row's label cell (leftmost column)
     .doc-table__cell     — a value cell
   Table properties (data attributes):
     data-columns : 2 (default) | 3 — number of VALUE columns, excluding
                    the row-label column; sets the label column's width
   Width: 960px, matching .doc-divider — set in base/document-layout.css,
   since a 3-column table doesn't fit the 800px text column.
   ──────────────────────────────────────────────────────────── */

.doc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--family-body);
}

/* Row-label column — fixed, so the value columns divide the remainder
   evenly on their own. */
.doc-table__corner,
.doc-table__row-head {
  width: 160px;
}

.doc-table[data-columns="3"] .doc-table__corner,
.doc-table[data-columns="3"] .doc-table__row-head {
  width: 140px;
}

.doc-table__corner,
.doc-table__col-head {
  padding: 0 var(--spacing-5) var(--spacing-4);
  border-bottom: 1px solid var(--border-divider-default);
}

.doc-table__col-head {
  text-align: left;
  vertical-align: bottom;
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
  color: var(--content-static-primary);
}

.doc-table__row-head,
.doc-table__cell {
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-divider-default);
  font-size: var(--size-small-text);
  line-height: var(--line-height-small-text);
}

/* A structural row label, not inline emphasis — same reasoning as
   .doc-callout__term. */
.doc-table__row-head {
  font-weight: var(--weight-semi-bold);
  color: var(--content-static-primary);
}

.doc-table__cell {
  font-weight: var(--weight-regular);
  color: var(--content-static-secondary);
}

/* The label column carries no rule of its own — the row rules read as
   continuous across the whole table. */
.doc-table__corner {
  border-bottom-color: transparent;
}

.doc-table tbody tr:last-child .doc-table__row-head,
.doc-table tbody tr:last-child .doc-table__cell {
  border-bottom: none;
}


/* ── Components / Social ─────────────────────────────────────── */
/* ── components/social/customer-proof/customer-proof.css ── */
/* ── Social / Customer proof ──────────────────────────────────
   Figma: 2026 Social media redesign — "Testimonial + person's photo",
          "Testimonial + office", "Statement + office"
   Canvas: .social-canvas[data-format="1080x1350"] (540×675, export @2x)
   Reasoning, inputs and the text-style judgement call:
     docs/social-design-brain.md → "B. Template catalog", templates 1–3.

   Component properties (data attributes):
     data-variant : testimonial-photo | testimonial-office | statement-office
                    | text-background
   Required on the root, alongside .social-canvas:
     data-theme="dark"  — makes primary/secondary content white and the
                          alpha/border tokens white tints; the root sets the
                          brand-layer-1 (purple-70) background itself.

   Elements (element presence):
     .social-proof__photo         — always; the full-bleed photo + bottom gradient
     .social-proof__lockup        — testimonial-office: direct child of the root
                                    (top, own gradient); statement-office: first
                                    child of __content
     .social-proof__content       — always; the bottom block
     .social-proof__quote         — testimonials; quote group (gap 16)
     .social-proof__pull          — testimonial-office only, optional pull line
     .social-proof__quote-text    — testimonials; text style is a judgement call:
                                    text-h1|h2|h3|text-h4-bold (photo), text-h2|h3|text-h4-bold
                                    (office), text-small-reg under a pull line
     .social-proof__attribution   — testimonial-photo: one H5 line inside __quote
     .social-proof__tiles         — testimonial-photo: Smartcat + customer logo tiles
     .social-proof__person        — testimonial-office: headshot + name block
     .social-proof__statement     — statement-office: H1 statement
     .social-proof__facts         — statement-office: one-line facts, optional
     .social-proof__bg            — text-background: brand background image,
                                    first child of the root (no __photo)
     .social-proof__stat          — text-background "numbers": figure + caption
     .social-proof__quote-text--continued — a quote piece with no opening mark
   text-background puts __tiles as a direct child of the root (bottom).
   ──────────────────────────────────────────────────────────── */

.social-proof {
  justify-content: flex-end;
  background: var(--background-static-brand-layer-1);
  color: var(--content-static-primary);
}

/* ── Photo + bottom gradient ─────────────────────────────────── */
/* Fills everything above the content block, then runs 120px UNDER it.
   The 160px gradient on its bottom edge starts 40px above the first
   line of text and ends where the photo ends, so the photo blends into
   the purple base with no seam and the text sits on near-solid purple. */

.social-proof__photo {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: calc(-1 * var(--spacing-14));            /* −120px */
  overflow: hidden;
}

.social-proof__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A person's photo crops from the bottom, never above the head. */
.social-proof[data-variant="testimonial-photo"] .social-proof__photo img {
  object-position: center top;
}

.social-proof__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--spacing-15);                               /* 160px */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--background-static-brand-layer-1) 0%, transparent) 0%,
    color-mix(in srgb, var(--background-static-brand-layer-1) 83%, transparent) 61.767%,
    var(--background-static-brand-layer-1) 100%);
}

/* ── Content block ───────────────────────────────────────────── */

.social-proof__content {
  position: relative;                                      /* above the photo */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);                                   /* 32px */
  padding: 0 var(--spacing-6) var(--spacing-6);            /* 0 24 24 */
}

/* Template 1: quote → logo tiles is 24px, tighter than template 2's 32px. */
.social-proof[data-variant="testimonial-photo"] .social-proof__content {
  gap: var(--spacing-6);                                   /* 24px */
}

.social-proof[data-variant="statement-office"] .social-proof__content {
  gap: 0;
  padding-bottom: var(--spacing-8);                        /* 40px */
}

.social-proof__quote {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);                                   /* 16px */
}

/* Quote text and pull line: curly quotes in the copy, the opening mark
   hung into the margin so the first letters align with the lines below. */
.social-proof__quote-text,
.social-proof__pull {
  margin: 0;
  padding-right: var(--spacing-6);
  text-indent: -0.45em;
  color: var(--content-static-primary);
}

/* ── Template 1: attribution line + logo tiles ───────────────── */

.social-proof__attribution {
  margin: 0;
  color: var(--content-static-primary);
}

.social-proof__attribution-role { color: var(--content-static-secondary); }

.social-proof__tiles {
  display: flex;
  gap: var(--grid-gutter);                                 /* 8px */
}

.social-proof__tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5) var(--spacing-6);              /* 16 24 */
  border-radius: var(--radius-card-regular);               /* 16px, pinned */
  background: var(--background-static-alpha-layer-3);
  /* No blur token exists; 15px is the Figma value. */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.social-proof__tile img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.social-proof__tile-smartcat { height: var(--spacing-7); }          /* 32px */
.social-proof__tile-customer   { height: var(--spacing-9); }          /* 48px box */

/* ── Lockup: Smartcat × customer ───────────────────────────────── */

.social-proof__lockup {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);                                   /* 24px */
}

.social-proof__lockup-smartcat {
  display: block;
  height: var(--spacing-7);                                /* 32px */
  width: auto;
}

.social-proof__lockup-cross {
  display: flex;
  flex: 0 0 auto;
  color: var(--content-static-tertiary);
}

.social-proof__lockup-customer {
  display: block;
  height: calc(var(--spacing-8) + var(--spacing-2));       /* 44px box */
  width: auto;
  min-width: 0;
  object-fit: contain;
}

/* Template 2: lockup pinned to the top on its own mirrored gradient. */
.social-proof > .social-proof__lockup {
  position: absolute;
  inset: 0 0 auto 0;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-7); /* 24 24 32 */
  background: linear-gradient(to bottom,
    var(--background-static-brand-layer-1) 0%,
    color-mix(in srgb, var(--background-static-brand-layer-1) 83%, transparent) 38.233%,
    color-mix(in srgb, var(--background-static-brand-layer-1) 0%, transparent) 100%);
}

/* Customer logos are black in images/customer-logos/ — white on purple. */
.social-proof__tile-customer,
.social-proof__lockup-customer {
  filter: brightness(0) invert(1);
}

/* ── Template 2: person row ──────────────────────────────────── */

.social-proof__person {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);                                   /* 24px */
  padding: var(--spacing-6) var(--spacing-12) 0 0;         /* top 24, right 80 */
  border-top: 2px solid var(--border-interaction-default);
}

.social-proof__headshot {
  flex: 0 0 auto;
  width: calc(var(--spacing-11) + var(--spacing-3));       /* 72px */
  height: calc(var(--spacing-11) + var(--spacing-3));
  border-radius: 50%;
  object-fit: cover;
}

.social-proof__person-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.social-proof__person-name { display: block; color: var(--content-static-primary); }
.social-proof__person-role { display: block; color: var(--content-static-secondary); }

/* ── Template 4: text + background ───────────────────────────── */
/* No photo: a brand background (images/brand-backgrounds/) fills the
   canvas, the text block pins to the top, the logo tiles to the bottom. */

.social-proof[data-variant="text-background"] {
  justify-content: space-between;
}

.social-proof__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-proof[data-variant="text-background"] .social-proof__content {
  gap: var(--spacing-5);                                   /* 16px */
  padding: var(--spacing-7);                               /* 32px */
}

.social-proof[data-variant="text-background"] > .social-proof__tiles {
  position: relative;
  padding: 0 var(--spacing-7) var(--spacing-7);            /* 0 32 32 */
}

/* No rule above the person here; 16px top padding instead. */
.social-proof[data-variant="text-background"] .social-proof__person {
  padding-top: var(--spacing-5);
  border-top: 0;
}

/* Numbers layout: a big figure with its caption bottom-aligned beside it. */
.social-proof__stat {
  display: flex;
  align-items: flex-end;
}

.social-proof__stat-number {
  margin: 0;
  padding-right: var(--spacing-6);                         /* 24px */
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  /* No type token this large; 120px is the Figma value. */
  font-size: 120px;
  line-height: 1;
  color: var(--content-static-primary);
}

.social-proof__stat-caption {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding-bottom: var(--spacing-3);                        /* 8px: sits on the figure's baseline */
  text-wrap: balance;
  color: var(--content-static-primary);
}

/* The big piece of a split or sandwich quote. */
.social-proof__pull { text-wrap: balance; }

/* A quote piece that continues the previous one: no opening mark, so no
   hanging indent (the third piece of a sandwich). */
.social-proof__quote-text--continued { text-indent: 0; }

/* ── Template 3: statement + facts ───────────────────────────── */

.social-proof__statement {
  margin: 0;
  padding: var(--spacing-5) var(--spacing-6) var(--spacing-5) 0;   /* 16 24 16 0 */
  color: var(--content-static-primary);
}

.social-proof__facts {
  margin: 0;
  white-space: nowrap;
  color: var(--content-static-secondary);
}


/* ── Components / Webinar ────────────────────────────────────── */
/* ── components/webinar/webinar-banner/webinar-banner.css ── */
/* ── Webinar / Banner ─────────────────────────────────────────
   Figma: 2026 redesign elements → section "Ready" (node 9:1905):
          every placement frame, each for 1, 2 and 3 speakers.
   Canvas: .webinar-canvas (base/webinar-layout.css), 1x export.
   Reasoning, inputs and the heading-size judgement call:
     docs/webinar-design-brain.md.

   Component properties (data attributes):
     on the root
       data-format   : 1080x450 | 1200x400 | 1400x780 | 1200x628 | 1080x1350
                       | 628x1200 | 1200x1200 | 1080x1080 | 300x250 | 728x90
       data-speakers : 1 | 2 | 3
     on .webinar-banner__speakers
       data-layout   : single | single-stack | rows | columns | photos
   The format sets the composition (where intro, card and visual sit);
   the format and speaker count together pick the card layout:

                   composition   1 speaker      2 speakers   3 speakers
     1080x450      side          single         rows         columns
     1200x400      side          single         columns      columns
     1400x780      side          single         rows         rows
     1200x628      side          single         rows         rows
     1080x1350     overlay       single         columns      columns
     628x1200      stack         single         rows         columns
     1200x1200     square        single-stack   columns      columns
     1080x1080     square        single-stack   columns      columns
     300x250       compact       photos         photos       photos
     728x90        strip         photos         photos       photos

   Elements (element presence):
     .webinar-banner__intro     — always; carries data-theme="dark" so its text is white
     .webinar-banner__series    — always; the Smartcat Webinars lockup
                                  (images/webinar/smartcat-webinars-lockup.svg)
     .webinar-banner__headline  — always; wraps the title and the optional date
     .webinar-banner__title     — always; type style is a judgement call (brain doc)
     .webinar-banner__date      — optional date/time line; omitted on 300x250 and 728x90
     .webinar-banner__speakers  — always; the white speaker card
     .webinar-banner__speaker   — one per speaker (1–3)
     .webinar-banner__photo     — always; square, duotone (see the brain doc)
     .webinar-banner__text      — name + role; not shown in the photos layout
     .webinar-banner__name      — always
     .webinar-banner__role      — always; "Role at Company"
     .webinar-banner__logo      — the speaker's company logo, black monochrome
                                  SVG (images/customer-logos/ or the Smartcat
                                  wordmark), softened here; not shown in the
                                  photos layout
     .webinar-banner__visual    — always; the square image,
                                  default images/webinar/sphere.jpg
   ──────────────────────────────────────────────────────────── */

.webinar-banner {
  /* Composition */
  --wb-pad:        var(--spacing-6);                        /* 24 */
  --wb-gap:        var(--spacing-3);                        /* 8 */
  --wb-intro-gap:  var(--spacing-5);                        /* 16 */
  --wb-series-h:   var(--spacing-6);                        /* 24 */
  --wb-visual-r:   var(--radius-card-regular);

  /* Speaker card */
  --wb-card-pad:   var(--spacing-4);                        /* 12 */
  --wb-card-gap:   var(--spacing-4);                        /* 12 */
  --wb-photo:      var(--spacing-12);                       /* 80 */
  --wb-photo-r:    var(--radius-2);                         /* 6 */
  --wb-photo-gap:  var(--spacing-5);                        /* 16 */
  --wb-logo-h:     var(--spacing-6);                        /* 24 */
  --wb-logo-gap:   0px;
  --wb-rule:       1px;

  /* Speaker type (name: heading bold; role: body or heading regular) */
  --wb-name-size:  var(--size-h4);
  --wb-name-lh:    var(--line-height-h4);
  --wb-name-ls:    var(--letter-spacing-h4);
  --wb-role-font:  var(--family-body);
  --wb-role-size:  var(--size-label-m);
  --wb-role-lh:    var(--line-height-label-m);
  --wb-role-ls:    var(--letter-spacing-label-m);

  display: grid;
  gap: var(--wb-gap);
  padding: var(--wb-pad);
  background: var(--background-static-gray-inverted);
  color: var(--content-static-primary);
}

.webinar-banner__intro    { grid-area: intro; }
.webinar-banner__speakers { grid-area: speakers; }
.webinar-banner__visual   { grid-area: visual; }

/* ── Compositions ────────────────────────────────────────────── */

/* side — intro and card stacked on the left, a full-height square on
   the right. The empty middle row keeps the card at the bottom. */
.webinar-banner[data-format="1080x450"],
.webinar-banner[data-format="1200x400"],
.webinar-banner[data-format="1400x780"],
.webinar-banner[data-format="1200x628"] {
  grid-template-columns: minmax(0, 1fr) calc(var(--webinar-h) - 2 * var(--wb-pad));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "intro visual" ". visual" "speakers visual";
  row-gap: var(--spacing-3);
}

.webinar-banner[data-format="1080x450"] { --wb-gap: var(--spacing-14); }                 /* 120 */
.webinar-banner[data-format="1080x450"][data-speakers="3"] {
  --wb-gap: var(--spacing-7);                                                             /* 32 */
  --wb-series-h: calc(var(--spacing-5) + var(--spacing-2));                               /* 20 */
}
.webinar-banner[data-format="1200x400"] {
  --wb-pad: var(--spacing-5);                                                             /* 16 */
  --wb-gap: var(--spacing-7);                                                             /* 32 */
  --wb-series-h: calc(var(--spacing-5) + var(--spacing-2));                               /* 20 */
}
.webinar-banner[data-format="1200x400"] .webinar-banner__speakers { justify-self: start; }
.webinar-banner[data-format="1400x780"],
.webinar-banner[data-format="1200x628"] {
  --wb-intro-gap: var(--spacing-6);                                                       /* 24 */
  --wb-series-h:  var(--spacing-7);                                                       /* 32 */
}

/* overlay — intro on top, a full-width square below with the card
   floating over its top-left corner. */
.webinar-banner[data-format="1080x1350"] {
  --wb-pad: var(--spacing-7);                                                             /* 32 */
  --wb-intro-gap: var(--spacing-6);
  --wb-series-h: var(--spacing-7);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "intro" "." "visual";
  row-gap: 0;
}
.webinar-banner[data-format="1080x1350"] .webinar-banner__speakers {
  grid-area: visual;
  z-index: 1;
  align-self: start;
  justify-self: start;
  margin: var(--spacing-7);
}

/* stack — intro on top; card and a full-width square at the bottom. */
.webinar-banner[data-format="628x1200"] {
  --wb-intro-gap: var(--spacing-6);
  --wb-series-h: var(--spacing-7);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "intro" "." "speakers" "visual";
}

/* square — 1 speaker: intro across the top, card beside a square
   below. 2 speakers: intro | visual over . | card (3:4 grid).
   3 speakers: intro | visual over a full-width card (2:3 grid). */
.webinar-banner[data-format="1200x1200"],
.webinar-banner[data-format="1080x1080"] {
  --wb-pad: var(--spacing-7);
  --wb-intro-gap: var(--spacing-6);
  --wb-series-h: var(--spacing-7);
}
.webinar-banner[data-format="1200x1200"][data-speakers="1"],
.webinar-banner[data-format="1080x1080"][data-speakers="1"] {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "intro intro" "speakers visual";
}
.webinar-banner[data-format="1200x1200"][data-speakers="1"] .webinar-banner__speakers,
.webinar-banner[data-format="1080x1080"][data-speakers="1"] .webinar-banner__speakers { align-self: start; }
.webinar-banner[data-format="1200x1200"][data-speakers="1"] .webinar-banner__headline,
.webinar-banner[data-format="1080x1080"][data-speakers="1"] .webinar-banner__headline { padding-right: var(--spacing-12); }  /* 80 */
.webinar-banner[data-format="1200x1200"][data-speakers="2"],
.webinar-banner[data-format="1080x1080"][data-speakers="2"] {
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  grid-template-rows: minmax(0, 4fr) minmax(0, 3fr);
  grid-template-areas: "intro visual" ". speakers";
}
.webinar-banner[data-format="1200x1200"][data-speakers="3"],
.webinar-banner[data-format="1080x1080"][data-speakers="3"] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "intro visual" "speakers speakers";
}
.webinar-banner[data-format="1200x1200"]:not([data-speakers="1"]) .webinar-banner__intro,
.webinar-banner[data-format="1080x1080"]:not([data-speakers="1"]) .webinar-banner__intro { padding-right: var(--spacing-6); }
.webinar-banner[data-format="1200x1200"]:not([data-speakers="1"]) .webinar-banner__visual,
.webinar-banner[data-format="1080x1080"]:not([data-speakers="1"]) .webinar-banner__visual { aspect-ratio: auto; height: 100%; }

/* compact (300x250) — intro on the left; a square over the photo
   strip on the right. */
.webinar-banner[data-format="300x250"] {
  --wb-pad: var(--spacing-3);                                                             /* 8 */
  --wb-gap: var(--spacing-5);                                                             /* 16 */
  --wb-intro-gap: var(--spacing-3);
  --wb-series-h: var(--spacing-4);                                                        /* 12 */
  --wb-visual-r: var(--radius-3);                                                         /* 8 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "intro visual" "intro speakers";
}
.webinar-banner[data-format="300x250"] .webinar-banner__speakers { align-self: end; justify-self: end; }
.webinar-banner[data-format="300x250"]:not([data-speakers="1"]) .webinar-banner__speakers { justify-self: stretch; }

/* strip (728x90) — intro, photo strip and a small square in one row. */
.webinar-banner[data-format="728x90"] {
  --wb-pad: var(--spacing-3);
  --wb-gap: var(--spacing-3);
  --wb-intro-gap: var(--spacing-3);
  --wb-series-h: var(--spacing-4);
  --wb-visual-r: var(--radius-3);
  grid-template-columns: minmax(0, 1fr) auto calc(var(--webinar-h) - 2 * var(--wb-pad));
  grid-template-areas: "intro speakers visual";
  align-items: center;
}
.webinar-banner[data-format="728x90"] .webinar-banner__intro { align-self: stretch; padding-right: var(--spacing-6); }
.webinar-banner[data-format="728x90"] .webinar-banner__speakers { align-self: stretch; }

/* ── Intro ───────────────────────────────────────────────────── */

.webinar-banner__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wb-intro-gap);
  min-width: 0;
  min-height: 0;
  color: var(--content-static-primary);
}
.webinar-banner__series { display: block; height: var(--wb-series-h); width: auto; }
.webinar-banner__headline { display: flex; flex-direction: column; gap: var(--spacing-3); align-self: stretch; }
.webinar-banner__title { margin: 0; color: var(--content-static-primary); text-wrap: balance; overflow-wrap: break-word; }
.webinar-banner__title.text-display { text-wrap: wrap; }   /* as in Figma: Display titles fill the line */
.webinar-banner__date { margin: 0; color: var(--content-static-secondary); }

/* ── Speaker card ────────────────────────────────────────────── */

.webinar-banner__speakers {
  display: flex;
  gap: var(--wb-card-gap);
  min-width: 0;
  min-height: 0;
  padding: var(--wb-card-pad);
  border-radius: var(--radius-card-regular);
  background: var(--background-static-gray-layer-0);
  color: var(--content-static-primary);
}
.webinar-banner__speaker { display: flex; min-width: 0; gap: var(--wb-photo-gap); }
.webinar-banner__photo {
  flex: 0 0 auto;
  display: block;
  width: var(--wb-photo);
  height: var(--wb-photo);
  border-radius: var(--wb-photo-r);
  object-fit: cover;
  background: var(--background-static-brand-layer-1);
}
.webinar-banner__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-2); overflow-wrap: break-word; }
.webinar-banner__name {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--wb-name-size);
  line-height: var(--wb-name-lh);
  letter-spacing: var(--wb-name-ls);
  text-wrap: pretty;
}
.webinar-banner__role {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--wb-role-font);
  font-weight: var(--weight-regular);
  font-size: var(--wb-role-size);
  line-height: var(--wb-role-lh);
  letter-spacing: var(--wb-role-ls);
}
.webinar-banner__logo {
  flex: 0 0 auto;
  display: block;
  height: var(--wb-logo-h);
  width: auto;
  max-width: calc(var(--spacing-15) + var(--spacing-12));     /* 240 */
  object-fit: contain;
  object-position: left center;
  /* The logo files are black monochrome; Figma softens them to
     #08042E at 47% — the same treatment the customer-logos README
     describes for light surfaces. */
  filter: brightness(0);
  opacity: 0.47;
}

/* single — one speaker: photo, name and role top-left, logo bottom-right. */
.webinar-banner__speakers[data-layout="single"] .webinar-banner__speaker {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--wb-photo-gap);
  row-gap: 0;
  padding-right: var(--spacing-5);
}
.webinar-banner__speakers[data-layout="single"] .webinar-banner__photo { grid-row: 1 / 3; }
.webinar-banner__speakers[data-layout="single"] .webinar-banner__logo { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }

/* single-stack — one speaker as a column: big photo, name, role, logo. */
.webinar-banner__speakers[data-layout="single-stack"] .webinar-banner__speaker {
  flex-direction: column;
  width: var(--wb-photo);
}
.webinar-banner__speakers[data-layout="single-stack"] .webinar-banner__logo { margin-top: var(--wb-logo-gap); }

/* rows — speakers stacked, each photo · text · logo, divided by a rule. */
.webinar-banner__speakers[data-layout="rows"] { flex-direction: column; }
.webinar-banner__speakers[data-layout="rows"] .webinar-banner__speaker { align-items: center; padding-right: var(--spacing-5); }
.webinar-banner__speakers[data-layout="rows"] .webinar-banner__text { padding-right: var(--spacing-5); }
.webinar-banner__speakers[data-layout="rows"] .webinar-banner__speaker + .webinar-banner__speaker {
  padding-top: var(--wb-card-gap);
  border-top: var(--wb-rule) solid var(--border-divider-default);
}

/* columns — speakers side by side, each photo / text / logo, divided
   by a vertical rule; logos align along the bottom. */
.webinar-banner__speakers[data-layout="columns"] .webinar-banner__speaker {
  flex: var(--wb-col-flex, 1 1 0);
  width: var(--wb-col-w, auto);
  max-width: var(--wb-col-max, none);
  flex-direction: column;
  align-items: flex-start;
  padding-right: var(--wb-col-pr, var(--spacing-5));
}
.webinar-banner__speakers[data-layout="columns"] .webinar-banner__text { flex: 1 1 auto; align-self: stretch; }
.webinar-banner__speakers[data-layout="columns"] .webinar-banner__logo { margin-top: var(--wb-logo-gap); }
.webinar-banner__speakers[data-layout="columns"] .webinar-banner__speaker + .webinar-banner__speaker {
  padding-left: var(--wb-card-gap);
  border-left: var(--wb-rule) solid var(--border-divider-default);
}

/* photos — small ads: a strip of photos only, no names or logos. */
.webinar-banner__speakers[data-layout="photos"] {
  --wb-card-pad: var(--spacing-2);                                                        /* 4 */
  --wb-card-gap: var(--spacing-2);
  border-radius: var(--radius-3);                                                         /* 8 */
}
.webinar-banner__speakers[data-layout="photos"] .webinar-banner__text,
.webinar-banner__speakers[data-layout="photos"] .webinar-banner__logo { display: none; }
.webinar-banner__speakers[data-layout="photos"] .webinar-banner__speaker { flex: 0 0 auto; }

/* ── Card sizes per format and speaker count ─────────────────── */
/* Type presets used below: name H2 / H3 / H4; role Label L, Label M,
   or H4 regular (heading face). */

/* 1080x450 */
.webinar-banner[data-format="1080x450"][data-speakers="1"] {
  --wb-photo: var(--spacing-14); --wb-photo-r: var(--radius-3);                          /* 120 */
  --wb-name-size: var(--size-h3); --wb-name-lh: var(--line-height-h3); --wb-name-ls: var(--letter-spacing-h3);
  --wb-role-size: var(--size-label-l); --wb-role-lh: var(--line-height-label-l); --wb-role-ls: var(--letter-spacing-label-l);
}
.webinar-banner[data-format="1080x450"][data-speakers="2"] { --wb-photo-gap: var(--spacing-6); }
.webinar-banner[data-format="1080x450"][data-speakers="3"] { --wb-logo-h: calc(var(--spacing-5) + var(--spacing-2)); }  /* 20 */

/* 1200x400 */
.webinar-banner[data-format="1200x400"][data-speakers="1"] {
  --wb-photo: var(--spacing-14); --wb-photo-r: var(--radius-3);
  --wb-name-size: var(--size-h3); --wb-name-lh: var(--line-height-h3); --wb-name-ls: var(--letter-spacing-h3);
  --wb-role-size: var(--size-label-l); --wb-role-lh: var(--line-height-label-l); --wb-role-ls: var(--letter-spacing-label-l);
}
.webinar-banner[data-format="1200x400"][data-speakers="1"] .webinar-banner__speakers { width: calc(3 * var(--spacing-15)); }  /* 480 */
.webinar-banner[data-format="1200x400"]:not([data-speakers="1"]) {
  --wb-logo-h: calc(var(--spacing-5) + var(--spacing-2));
  --wb-col-flex: 0 0 auto; --wb-col-w: calc(var(--spacing-15) + var(--spacing-6));      /* 184 */
}

/* 1400x780 and 1200x628 */
.webinar-banner[data-format="1400x780"][data-speakers="1"],
.webinar-banner[data-format="1200x628"][data-speakers="1"] {
  --wb-photo: calc(var(--spacing-15) + var(--spacing-8)); --wb-photo-r: var(--radius-4); /* 200 */
  --wb-logo-h: var(--spacing-7);
  --wb-name-size: var(--size-h2); --wb-name-lh: var(--line-height-h2); --wb-name-ls: var(--letter-spacing-h2);
  --wb-role-size: var(--size-label-l); --wb-role-lh: var(--line-height-label-l); --wb-role-ls: var(--letter-spacing-label-l);
}
.webinar-banner[data-format="1200x628"][data-speakers="1"] {
  --wb-role-font: var(--family-heading); --wb-role-size: var(--size-h4); --wb-role-lh: var(--line-height-h4); --wb-role-ls: var(--letter-spacing-h4);
}
.webinar-banner[data-format="1400x780"]:not([data-speakers="1"]),
.webinar-banner[data-format="1200x628"]:not([data-speakers="1"]) {
  --wb-card-pad: var(--spacing-5); --wb-card-gap: var(--spacing-5); --wb-photo-gap: var(--spacing-6);
  --wb-logo-h: var(--spacing-7); --wb-rule: 2px;
  --wb-name-size: var(--size-h3); --wb-name-lh: var(--line-height-h3); --wb-name-ls: var(--letter-spacing-h3);
  --wb-role-size: var(--size-label-l); --wb-role-lh: var(--line-height-label-l); --wb-role-ls: var(--letter-spacing-label-l);
}
.webinar-banner[data-format="1400x780"][data-speakers="2"] { --wb-photo: calc(var(--spacing-14) + var(--spacing-6)); --wb-photo-r: var(--radius-4); }  /* 144 */
.webinar-banner[data-format="1400x780"][data-speakers="3"] { --wb-photo: calc(var(--spacing-13) + var(--spacing-3)); --wb-photo-r: var(--radius-3); }  /* 104 */
.webinar-banner[data-format="1200x628"][data-speakers="2"] { --wb-photo: var(--spacing-14); --wb-photo-r: var(--radius-4); }                          /* 120 */
.webinar-banner[data-format="1200x628"][data-speakers="3"] {
  --wb-photo: var(--spacing-12); --wb-photo-r: var(--radius-3);                                                                                       /* 80 */
  --wb-role-size: var(--size-label-m); --wb-role-lh: var(--line-height-label-m); --wb-role-ls: var(--letter-spacing-label-m);
}

/* 1080x1350 */
.webinar-banner[data-format="1080x1350"] {
  --wb-card-pad: var(--spacing-6); --wb-card-gap: var(--spacing-6);
  --wb-photo: var(--spacing-15); --wb-photo-r: var(--radius-4);                           /* 160 */
  --wb-logo-h: var(--spacing-7); --wb-rule: 2px;
  --wb-role-font: var(--family-heading); --wb-role-size: var(--size-h4); --wb-role-lh: var(--line-height-h4); --wb-role-ls: var(--letter-spacing-h4);
}
.webinar-banner[data-format="1080x1350"][data-speakers="1"] {
  --wb-photo-gap: var(--spacing-6);
  --wb-name-size: var(--size-h2); --wb-name-lh: var(--line-height-h2); --wb-name-ls: var(--letter-spacing-h2);
}
.webinar-banner[data-format="1080x1350"][data-speakers="1"] .webinar-banner__speakers {
  width: calc(3 * var(--spacing-15) + var(--spacing-12) + var(--spacing-4));              /* 572 */
}
.webinar-banner[data-format="1080x1350"]:not([data-speakers="1"]) {
  --wb-logo-gap: var(--spacing-6);
  --wb-col-flex: 0 0 auto; --wb-col-w: calc(var(--spacing-15) + var(--spacing-12));      /* 240 */
  --wb-name-size: var(--size-h3); --wb-name-lh: var(--line-height-h3); --wb-name-ls: var(--letter-spacing-h3);
}

/* 628x1200 */
.webinar-banner[data-format="628x1200"][data-speakers="1"] {
  --wb-card-pad: var(--spacing-6); --wb-card-gap: var(--spacing-6);
  --wb-photo: var(--spacing-15); --wb-photo-r: var(--radius-4); --wb-photo-gap: var(--spacing-6);
  --wb-logo-h: var(--spacing-7);
  --wb-name-size: var(--size-h2); --wb-name-lh: var(--line-height-h2); --wb-name-ls: var(--letter-spacing-h2);
  --wb-role-font: var(--family-heading); --wb-role-size: var(--size-h4); --wb-role-lh: var(--line-height-h4); --wb-role-ls: var(--letter-spacing-h4);
}
.webinar-banner[data-format="628x1200"][data-speakers="2"] {
  --wb-card-pad: var(--spacing-5); --wb-card-gap: var(--spacing-5); --wb-photo-gap: var(--spacing-6);
  --wb-logo-h: var(--spacing-7); --wb-rule: 2px;
}
.webinar-banner[data-format="628x1200"][data-speakers="3"] {
  --wb-logo-gap: var(--spacing-3);
  --wb-col-max: calc(var(--spacing-15) + var(--spacing-6));                               /* 184 */
}

/* 1200x1200 and 1080x1080 */
.webinar-banner[data-format="1200x1200"],
.webinar-banner[data-format="1080x1080"] {
  --wb-card-pad: var(--spacing-6); --wb-card-gap: var(--spacing-6);
  --wb-logo-gap: var(--spacing-6); --wb-rule: 2px;
  --wb-role-font: var(--family-heading); --wb-role-size: var(--size-h4); --wb-role-lh: var(--line-height-h4); --wb-role-ls: var(--letter-spacing-h4);
}
.webinar-banner[data-format="1200x1200"][data-speakers="1"],
.webinar-banner[data-format="1080x1080"][data-speakers="1"] {
  --wb-photo: calc(2 * var(--spacing-15)); --wb-photo-r: var(--radius-4);                 /* 320 */
  --wb-logo-h: var(--spacing-9);                                                          /* 48 */
  --wb-name-size: var(--size-h2); --wb-name-lh: var(--line-height-h2); --wb-name-ls: var(--letter-spacing-h2);
}
.webinar-banner[data-format="1200x1200"]:not([data-speakers="1"]),
.webinar-banner[data-format="1080x1080"]:not([data-speakers="1"]) {
  --wb-photo: calc(3 * var(--spacing-12) - var(--spacing-6)); --wb-photo-r: var(--radius-3);  /* 216 */
  --wb-logo-h: var(--spacing-8);                                                              /* 40 */
  --wb-col-pr: 0px;
  --wb-name-size: var(--size-h3); --wb-name-lh: var(--line-height-h3); --wb-name-ls: var(--letter-spacing-h3);
}
/* 1080x1080 with 3 speakers: Figma pulls the logo up against the role
   so the card fits its 2fr row. */
.webinar-banner[data-format="1080x1080"][data-speakers="3"] { --wb-logo-gap: calc(-1 * var(--spacing-5)); }
.webinar-banner[data-format="1200x1200"]:not([data-speakers="1"]) .webinar-banner__speaker + .webinar-banner__speaker,
.webinar-banner[data-format="1080x1080"]:not([data-speakers="1"]) .webinar-banner__speaker + .webinar-banner__speaker { padding-left: var(--spacing-6); }

/* 300x250 and 728x90 */
.webinar-banner[data-format="300x250"] { --wb-photo-r: var(--radius-1); }                /* 4 */
.webinar-banner[data-format="300x250"][data-speakers="1"] { --wb-photo: var(--spacing-12); }  /* 80 */
.webinar-banner[data-format="300x250"]:not([data-speakers="1"]) .webinar-banner__speaker { flex: 1 1 0; }
.webinar-banner[data-format="300x250"]:not([data-speakers="1"]) .webinar-banner__photo { width: 100%; height: auto; aspect-ratio: 1; }
.webinar-banner[data-format="728x90"] { --wb-photo: calc(var(--spacing-11) + var(--spacing-1)); --wb-photo-r: var(--radius-2); }  /* 66 */

/* ── Visual ──────────────────────────────────────────────────── */
/* A square, the 2px divider border drawn over the image as in Figma. */

.webinar-banner__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--wb-visual-r);
  /* Same near-black as the canvas: the antialiased rounded edge then
     blends into the page instead of showing a light hairline. */
  background: var(--background-static-gray-inverted);
}
.webinar-banner[data-format="1080x450"] .webinar-banner__visual,
.webinar-banner[data-format="1200x400"] .webinar-banner__visual,
.webinar-banner[data-format="1400x780"] .webinar-banner__visual,
.webinar-banner[data-format="1200x628"] .webinar-banner__visual,
.webinar-banner[data-format="728x90"] .webinar-banner__visual { height: 100%; width: auto; }
.webinar-banner__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.webinar-banner__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--border-divider-default);
  border-radius: inherit;
  pointer-events: none;
}



/* ── hero: executive-awareness ── */
/* ── Hero 2026 · Executive awareness ──────────────────────────────
   Figma: Executive awareness campaign / Hero container
          (file 3RMw1XvAJpG7Yhd7Fn5fDL, node-id=40-3108)
     · Hero container   1700 wide (content 1540), desktop only

   Exploratory hero (hero-blocks-2026 collection) — scoped to this page,
   tokens only, no changes to the shared system. An ORDINARY page-level
   component: side padding comes from the enclosing .section-band, which
   here is data-layer="1" data-theme="dark". Vertical rhythm stays
   internal (top and bottom 120px at desktop, as in Figma).

   Built from tokens and the Button atomic; it does not reuse a web
   page-level component. The chart is plain markup + one inline SVG; the
   script only moves things (see executive-awareness.js).

   NOTE 1 — plot units. The chart plot is 975 × 454: 45 day columns of
   21.667px and 17 market rows of 26.7px. The SVG viewBox, the CSS grid
   and the script all use those units, so everything scales together.

   NOTE 2 — the paths. Their coordinates are the Figma exports with the
   horizontal axis scaled by 3.2862 (the exports are stretched to the
   plot width). Colors are tokens, not the exported hex.

   NOTE 3 — Figma colors the primary button brand purple here; the design
   system's primary button is white in dark mode, so the system button is
   used as is.
   ──────────────────────────────────────────────────────────────── */

.exec-hero {
  box-sizing: border-box;
  width: 100%;
}

.exec-hero__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-11);
  width: 100%;
  padding-block: var(--spacing-page-vertical-7);
}

/* ── Text block ──────────────────────────────────────────────────── */
.exec-hero__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-9);
}
.exec-hero__title {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}
.exec-hero__lead {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}
.exec-hero__paragraph {
  margin: 0;
  padding-top: var(--spacing-between-elements-4);
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}
.exec-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-between-buttons-horzontal);
  padding-top: var(--spacing-between-elements-6);
}

@media (min-width: 800px) {
  .exec-hero__text {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: 0;
  }
  .exec-hero__title { padding-right: var(--spacing-between-elements-11); }
}

/* ── Chart section ───────────────────────────────────────────────── */
.exec-chart-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--spacing-between-elements-8) var(--spacing-between-elements-7);
  /* Panel color from Figma (56:5849), a dark purple-black; not a token. The
     hatch, the legend swatch and the badge reuse it so they blend in. */
  --exec-chart-card: #0e071e;
  background: var(--exec-chart-card);
  border-radius: var(--radius-card-regular);
}
@media (min-width: 800px) {
  .exec-chart-section { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}

/* Info panel */
.exec-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-between-elements-6);
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
  border-bottom: 1px solid var(--border-divider-default);
  align-content: start;
}
.exec-info__legend { grid-column: 1 / -1; }
@media (min-width: 800px) {
  .exec-info {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--border-divider-default);
  }
}
.exec-info__figure + .exec-info__figure,
.exec-info__legend {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
}
@media (min-width: 800px) {
  .exec-info__figure + .exec-info__figure,
  .exec-info__legend {
    padding-top: var(--spacing-between-elements-6);
    border-top: 1px solid var(--border-divider-default);
  }
}
.exec-info__figure { display: flex; flex-direction: column; gap: var(--spacing-between-elements-3); }

.exec-info__value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-variant-numeric: tabular-nums;
}
.exec-info__value[data-tone="brand"]  { color: var(--content-static-brand); }
.exec-info__value[data-tone="orange"] { color: var(--content-static-orange); }
.exec-info__label,
.exec-info__note {
  margin: 0;
  color: var(--content-static-secondary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
}
.exec-info__label {
  font-size: var(--size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}
.exec-info__note {
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
  letter-spacing: var(--letter-spacing-label-m);
}

/* Legend swatch: same hatch as the chart area */
.exec-info__swatch { display: block; }
.exec-info__swatch-fill { fill: var(--exec-chart-card); }
.exec-info__swatch-edge { fill: none; stroke: var(--content-static-orange); stroke-width: 0.5; }

/* Hatch shared by the area and the swatch: three 1px diagonals per
   10px tile, orange at 25% over the card color. */
.exec-hatch__fill { fill: var(--exec-chart-card); }
.exec-hatch__line {
  fill: none;
  stroke: var(--content-static-orange);
  stroke-opacity: 0.25;
  stroke-width: 1;
}

/* ── Chart ───────────────────────────────────────────────────────── */
.exec-chart {
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal) var(--spacing-card-l-bottom);
  min-width: 0;
}
.exec-chart__title {
  margin: 0;
  padding-bottom: var(--spacing-between-elements-3);
  color: var(--content-static-primary);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  font-size: var(--size-label-s);
  line-height: var(--line-height-label-s);
  letter-spacing: var(--letter-spacing-label-m);
}

/* Y axis column and plot sit in the same 1 : 18 : 1 split as Figma, so the
   plot's left edge lines up with the "Day 0" label. */
.exec-chart__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18fr) minmax(0, 1fr);
}
.exec-chart__yaxis {
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr)) minmax(0, 0.5fr);
  grid-column: 1;
  grid-row: 1;
}
/* Row k is centred on the market-gridline it names */
.exec-chart__ytick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-between-elements-2);
  color: var(--content-static-tertiary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-label-s);
  line-height: var(--line-height-label-s);
  letter-spacing: var(--letter-spacing-label-m);
}
.exec-chart__ytick::after {
  content: "";
  width: 4px;
  border-top: 1px solid var(--content-static-tertiary);
}
/* Rows run top (16) → bottom (2); labels are written 2 → 16, so flip. */
.exec-chart__ytick:nth-child(1) { grid-row: 8; }
.exec-chart__ytick:nth-child(2) { grid-row: 7; }
.exec-chart__ytick:nth-child(3) { grid-row: 6; }
.exec-chart__ytick:nth-child(4) { grid-row: 5; }
.exec-chart__ytick:nth-child(5) { grid-row: 4; }
.exec-chart__ytick:nth-child(6) { grid-row: 3; }
.exec-chart__ytick:nth-child(7) { grid-row: 2; }
.exec-chart__ytick:nth-child(8) { grid-row: 1; }

.exec-chart__plot {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 975 / 454;
}
/* Grid: 45 day columns and 17 market rows, drawn with gradients. */
.exec-chart__plot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-divider-default) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-divider-default) 1px, transparent 1px);
  background-size: calc(100% / 45) 100%, 100% calc(100% / 17);
  box-shadow: inset -1px 0 0 var(--border-divider-default);
}
/* Baseline */
.exec-chart__plot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  border-bottom: 1px solid var(--content-static-secondary);
}

.exec-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.exec-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.exec-chart__line[data-tone="brand"] { stroke: var(--content-static-brand); }
.exec-chart__line[data-tone="today"] { stroke: var(--content-static-orange); }

/* Dots, chips and the badge ride on the plot; the script sets left/top. */
.exec-chart__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}
.exec-chart__dot[data-tone="brand"]  { background: var(--content-static-brand); }
.exec-chart__dot[data-tone="orange"] { background: var(--content-static-orange); }

.exec-chart__chip,
.exec-chart__badge {
  position: absolute;
  padding: var(--spacing-between-elements-2) var(--spacing-between-elements-3);
  border-radius: var(--radius-button);
  font-family: var(--family-body);
  font-weight: var(--weight-semi-bold);
  letter-spacing: var(--letter-spacing-label-m);
  white-space: nowrap;
}
/* NOTE 4 — the chips are the saturated light-mode brand and orange with
   white text (Figma binds them to the light values), but this band is dark
   and no semantic token holds "white on a saturated chip" in dark mode, so
   the chips take the primitives directly. Flagged as a token gap. */
.exec-chart__chip {
  transform: translate(10px, calc(-100% - 6px));
  color: var(--color-non-semantic-white-alpha-100);
  font-size: var(--size-label-s);
  line-height: var(--line-height-label-s);
}
.exec-chart__chip[data-tone="brand"]  { background: var(--color-semantic-brand-70); }
.exec-chart__chip[data-tone="orange"] { background: var(--color-non-semantic-orange-80); }

.exec-chart__badge {
  transform: translate(-50%, -50%);
  background: var(--exec-chart-card);
  color: var(--content-static-orange);
  font-size: var(--size-label-m);
  line-height: var(--line-height-label-m);
}

/* X axis: ten equal cells, each label centred under its tick */
.exec-chart__xaxis {
  display: flex;
  padding-top: 0;
}
.exec-chart__xtick {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-between-elements-2);
  min-width: 0;
  color: var(--content-static-tertiary);
  font-family: var(--family-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-label-s);
  line-height: var(--line-height-label-s);
  letter-spacing: var(--letter-spacing-label-m);
  white-space: nowrap;
}
.exec-chart__xtick::before {
  content: "";
  height: 4.5px;
  border-left: 1px solid var(--content-static-tertiary);
}

/* Narrow: thin the day labels to every second one */
@media (max-width: 799px) {
  .exec-chart__xtick:nth-child(even) { visibility: hidden; }
  .exec-chart { padding-inline: 0; }
}

/* ── Background: dotted globe ────────────────────────────────────────
   A live dotted globe (globe.js) rising from the bottom of the hero, as in
   Figma (hero container 56:5836) but in the brand purple. Two canvases sit
   behind the content: the atmosphere glow (drawn once) and the dots (turning).
   --exec-hero-base is the darkest color of the background, #04010E as
   specified; it is the one value here that is not a token. The chart card
   sits on gray layer-1, as in Figma. */
.section-band.exec-hero-band {
  --exec-hero-base: #04010e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--exec-hero-base);
}
.exec-globe {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.exec-globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ── page: executive-awareness ── */
/* ── Page · Executive awareness campaign ──────────────────────────
   Figma: Executive awareness campaign / Page template
          (file 3RMw1XvAJpG7Yhd7Fn5fDL, node-id=40-3106) — desktop 1700.
   Navigation and footer are intentionally not built.

   Exploratory page: its stylesheet lives beside it and is scoped with
   .ea-*, so nothing shared is touched. The hero is the separate
   hero-blocks-2026/executive-awareness component and brings its own CSS
   and script. Tokens only; text uses the type-style utility classes.

   Figma has desktop only. Everything below is mobile-first with the
   system's two breakpoints: 800 (columns appear) and 1280 (wide layouts).

   NOTE 1 — Figma's Section containers carry only a top padding, with the
   last one running into the footer. Here each band owns its own top and
   bottom size-8 Components spacing as the system requires.

   NOTE 2 — the calculator result card is LIGHT inside a DARK band. The
   system has no nested light mode (only :root and [data-theme="dark"]),
   so .ea-calc__result re-declares the handful of light-mode tokens it
   uses, copied from tokens/colors.css. If those light values change,
   change them here too.

   NOTE 3 — the big figure ($35.8M) is 88px in Figma, which is not a
   scale step. It is derived from the Display token (× 1.375) so it still
   tracks the type scale.

   NOTE 4 — the Content Market Adaptation Platform tiles and divider use
   white at 12% and 20% on brand purple. No semantic token holds that, so
   they take the white-alpha primitives directly.
   ──────────────────────────────────────────────────────────────── */

/* Anchor links (#calculator, #system) scroll smoothly; people who ask for
   reduced motion get the instant jump. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Shared section pieces ───────────────────────────────────────── */
.ea-section { width: 100%; }

.ea-section__head {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-between-elements-11);
}
.ea-section__head--tight { padding-bottom: var(--spacing-between-elements-6); }

.ea-heading {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.ea-intro {
  margin: 0;
  max-width: 640px;
  padding-top: var(--spacing-between-elements-6);
  color: var(--content-static-secondary);
}
@media (min-width: 800px) {
  .ea-heading { padding-right: var(--spacing-between-elements-11); }
}

/* Photo: one image, cropped to its slot */
.ea-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card-regular);
}
.ea-photo[data-ratio="4-3"] { aspect-ratio: 4 / 3; }
.ea-photo[data-ratio="3-2"] { aspect-ratio: 3 / 2; }
.ea-photo[data-ratio="fill"] { aspect-ratio: 1 / 1; }
@media (min-width: 800px) {
  .ea-photo[data-ratio="4-3"],
  .ea-photo[data-ratio="3-2"] { align-self: start; }
  .ea-photo[data-ratio="fill"] {
    aspect-ratio: auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }
}

/* Two equal columns: list/text and photo */
.ea-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-10);
}
@media (min-width: 800px) {
  .ea-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ea-split__text { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 800px) {
  .ea-split[data-align="center"] { align-items: center; }
}

/* Feature list: rule above each item */
.ea-list { display: flex; flex-direction: column; min-width: 0; }
.ea-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-4);
  padding-block: var(--spacing-between-elements-7);
  padding-right: var(--spacing-between-elements-10);
  border-top: 1px solid var(--border-divider-default);
}
.ea-list--compact { padding-top: var(--spacing-between-elements-6); }
.ea-list--compact .ea-list__item {
  gap: var(--spacing-between-elements-2);
  padding-block: var(--spacing-button-l-horizontal);
}
.ea-list--compact .ea-list__body { gap: var(--spacing-between-elements-2); }

/* Check variant (Faster section): small icon tile on the layer-1 tint,
   vertically centered with its text. */
.ea-list--check .ea-list__item[data-icon] {
  align-items: center;
  gap: var(--spacing-between-elements-6);
}
.ea-list--check .ea-list__icon {
  padding: var(--spacing-between-elements-5);
  background: var(--background-static-gray-layer-1);
}
.ea-list--check .ea-list__icon svg { width: 24px; height: 24px; }
.ea-list__title {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.ea-list__title-muted { color: var(--content-static-tertiary); }

/* Variant with a leading icon tile (board numbers). The icon is the 24px
   system icon shown at 32px; the tile is a white card on the layer-1 band. */
.ea-list__item[data-icon] {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-between-elements-6);
}
.ea-list__icon {
  display: flex;
  flex-shrink: 0;
  padding: var(--spacing-between-elements-6);
  background: var(--background-static-gray-layer-0);
  border-radius: var(--radius-card-contained);
  color: var(--content-static-primary);
}
.ea-list__icon svg { display: block; width: 32px; height: 32px; }
.ea-list__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
  min-width: 0;
}
.ea-list__text {
  margin: 0;
  max-width: 480px;
  color: var(--content-static-secondary);
}

/* ── 2 · Manifesto ───────────────────────────────────────────────── */
.ea-manifesto__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-8);
  max-width: 840px;
  margin-inline: auto;
}
.ea-manifesto__line {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
}
.ea-manifesto__line {
  text-wrap: balance;
  letter-spacing: var(--letter-spacing-h2);
}
.ea-manifesto__line[data-tone="muted"] { color: var(--content-static-tertiary); }

/* Last line: a purple highlight runs through the text from left to right,
   every 2 seconds, while the line is on screen (Figma 56:5967 shows the
   band mid-run). The text is clipped to two backgrounds: the moving
   purple band over the solid primary color. Without background-clip:text, or
   with reduced motion, it stays plain primary. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ea-manifesto__line[data-sweep] {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 32% 100%, 100% 100%;
    background-position: -47% 0, 0 0;       /* band parked off the left edge */
    background-image:
      linear-gradient(90deg, transparent 0%, var(--color-non-semantic-purple-60) 50%, transparent 100%),
      linear-gradient(var(--content-static-primary), var(--content-static-primary));
  }
  .ea-manifesto__line[data-sweep].is-sweeping {
    animation: ea-sweep 2s ease-in-out infinite;
  }
}
@keyframes ea-sweep {
  from { background-position: -47% 0, 0 0; }
  to   { background-position: 147% 0, 0 0; }  /* band parked off the right edge */
}
@media (prefers-reduced-motion: reduce) {
  .ea-manifesto__line[data-sweep].is-sweeping { animation: none; }
}
.ea-manifesto__action { display: flex; }

/* ── 4 · Calculator ──────────────────────────────────────────────── */
.ea-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-button-l-horizontal);
}
@media (min-width: 1280px) {
  .ea-calc { grid-template-columns: minmax(0, 530px) minmax(0, 1fr); gap: var(--spacing-3); }
}
.ea-calc__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-buttons-horzontal);
}
.ea-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-5);
  /* Figma: card/m/top = 32, card/s/horizontal = 24 (120px-high fields). The
     repo's desktop values for those two are 24 and 16, so the tokens with the
     same values are used instead. */
  padding: var(--spacing-card-l-top) var(--spacing-card-m-horizontal);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
}
.ea-field__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-between-elements-5); }
.ea-field__label { color: var(--content-static-secondary); }
.ea-field__value {
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
  font-variant-numeric: tabular-nums;
}

/* Range input: 6px track filled up to --fill, 16px thumb */
.ea-slider {
  --fill: 15%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.ea-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--content-static-brand) var(--fill),
    var(--background-static-alpha-layer-2) var(--fill));
}
.ea-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--content-static-brand) var(--fill),
    var(--background-static-alpha-layer-2) var(--fill));
}
.ea-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: var(--radius-full);
  border: 2px solid var(--content-static-brand);
  background: var(--content-static-primary);
  box-sizing: border-box;
}
.ea-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--content-static-brand);
  background: var(--content-static-primary);
  box-sizing: border-box;
}
.ea-slider:focus-visible { outline: 2px solid var(--border-focus-default); outline-offset: 4px; border-radius: 3px; }

/* Result card — light tokens inside the dark band, see NOTE 2 */
.ea-calc__result {
  --background-static-gray-layer-1: var(--color-non-semantic-gray-5);
  --background-static-alpha-layer-1: var(--color-non-semantic-gray-alpha-5);
  --background-static-alpha-layer-2: var(--color-non-semantic-gray-alpha-10);
  --content-static-primary:   var(--color-non-semantic-gray-alpha-100);
  --content-static-secondary: var(--color-non-semantic-gray-alpha-60);
  --content-static-tertiary:  var(--color-non-semantic-gray-alpha-40);
  --content-static-inverted:  var(--color-non-semantic-white-alpha-100);
  --content-static-brand:     var(--color-semantic-brand-70);
  --content-static-orange:    var(--color-non-semantic-orange-80);
  --border-divider-default:   var(--color-non-semantic-gray-alpha-20);
  --background-button-primary-default: var(--color-non-semantic-gray-alpha-90);
  --background-button-primary-hover:   var(--color-non-semantic-gray-alpha-70);
  --background-button-primary-active:  var(--color-non-semantic-gray-alpha-60);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-between-elements-8);
  padding: var(--spacing-between-elements-6);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-6);
  color: var(--content-static-primary);
}
@media (min-width: 800px) {
  .ea-calc__result { padding: var(--spacing-8); }
}
.ea-calc__numbers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-8);
}
@media (min-width: 1440px) {
  .ea-calc__numbers { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--spacing-between-elements-11); }
}
.ea-calc__main { display: flex; flex-direction: column; gap: var(--spacing-between-elements-6); }
.ea-calc__label {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.ea-calc__big { display: flex; flex-direction: column; gap: var(--spacing-between-elements-5); }
.ea-calc__total {
  margin: 0;
  color: var(--content-static-orange);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: calc(var(--size-display) * 1.375);
  line-height: 1;
  letter-spacing: calc(var(--letter-spacing-display) * 1.25);
  font-variant-numeric: tabular-nums;
}
.ea-calc__bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--background-static-alpha-layer-2);
}
.ea-calc__bar-late { flex: 0 0 auto; background: var(--content-static-orange); }
.ea-calc__bar-forward { flex: 1 1 0; background: var(--content-static-brand); }

.ea-calc__pair { display: flex; flex-direction: column; gap: var(--spacing-between-buttons-horzontal); }
.ea-calc__stat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: var(--spacing-between-elements-3);
  padding: var(--spacing-button-m-vertical) var(--spacing-button-m-horizontal);
  background: var(--background-static-alpha-layer-1);
  border-radius: var(--radius-4);
}
.ea-calc__stat-label { margin: 0; color: var(--content-static-tertiary); }
.ea-calc__stat-value {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-variant-numeric: tabular-nums;
}
.ea-calc__stat-value[data-tone="orange"] { color: var(--content-static-orange); }
.ea-calc__stat-value[data-tone="brand"]  { color: var(--content-static-brand); }
@media (min-width: 800px) and (max-width: 1439px) {
  .ea-calc__pair { flex-direction: row; }
}

.ea-calc__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-between-elements-6);
}
.ea-calc__note { margin: 0; color: var(--content-static-tertiary); }
@media (min-width: 800px) {
  .ea-calc__foot { flex-direction: row; align-items: center; gap: var(--spacing-between-elements-8); }
  .ea-calc__note { flex: 1 1 0; }
  .ea-calc__foot .btn { flex: 0 0 auto; }
}

/* ── 5 · Leaders (tabs) ──────────────────────────────────────────── */
.ea-leaders {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-buttons-horzontal);
}
@media (min-width: 800px) {
  .ea-leaders { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
}
.ea-leaders__tabs {
  display: flex;
  flex-direction: column;
  align-self: start;
  padding: var(--spacing-between-elements-5);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
}
@media (min-width: 800px) { .ea-leaders__tabs { align-self: stretch; } }
.ea-leaders__tab {
  appearance: none;
  margin: 0;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: var(--spacing-button-xl-vertical) var(--spacing-button-xl-horizontal);
  border-radius: var(--radius-button);
  background: var(--background-interaction-default);
  color: var(--content-static-tertiary);
  transition: background 120ms ease, color 120ms ease;
}
.ea-leaders__tab:hover { background: var(--background-interaction-hover); }
.ea-leaders__tab:focus-visible { outline: 2px solid var(--border-focus-default); outline-offset: 2px; }
.ea-leaders__tab[aria-selected="true"] {
  background: var(--background-interaction-selectedstrong);
  color: var(--content-static-inverted);
}
.ea-leaders__panel {
  min-width: 0;
  /* Figma: card/m/top = 32 (repo desktop value is 24), horizontal 24 */
  padding: var(--spacing-card-l-top) var(--spacing-card-m-horizontal);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
}
.ea-leaders__panel[data-inactive],
.ea-leaders > .ea-photo[data-inactive] { display: none; }
/* From 800px all four panels sit in one grid cell and all four photos in
   another, only one of each visible. The row is as tall as the tallest panel
   whichever tab is open, so the photo never changes size. */
@media (min-width: 800px) {
  .ea-leaders__tabs { grid-column: 1; grid-row: 1; }
  .ea-leaders__panel { grid-column: 2; grid-row: 1; }
  .ea-leaders > .ea-photo { grid-column: 3; grid-row: 1; }
  .ea-leaders__panel[data-inactive],
  .ea-leaders > .ea-photo[data-inactive] { display: block; visibility: hidden; }
}
.ea-leaders__title {
  margin: 0;
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

/* ── 5 · The system in the middle ────────────────────────────────── */
.ea-arch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-between-elements-5);
}
.ea-arch__side { display: flex; flex-direction: column; gap: var(--spacing-between-buttons-horzontal); }
.ea-arch__label { margin: 0; color: var(--content-static-tertiary); }
.ea-arch__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-between-elements-3);
  min-height: 48px;
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--background-static-gray-layer-0);
  border: 1px solid var(--border-divider-default);
  border-radius: var(--radius-3);
  color: var(--content-static-primary);
  white-space: nowrap;
}
.ea-arch__icon { display: flex; flex-shrink: 0; }
.ea-arch__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-static-tertiary);
  transform: rotate(90deg);
}

.ea-arch__core {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-5);
  padding: var(--spacing-card-l-top) var(--spacing-card-l-horizontal);
  background: var(--background-static-brand-inverted);
  border-radius: var(--radius-6);
  color: var(--content-static-inverted);
}
.ea-arch__logo { display: block; width: 100px; height: 20px; }
.ea-arch__name { margin: 0; font-family: var(--family-heading); font-weight: var(--weight-bold); }
.ea-arch__pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-buttons-horzontal);
}
@media (min-width: 800px) {
  .ea-arch__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ea-arch__pillar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-button-m-horizontal);
  background: var(--color-non-semantic-white-alpha-20);
  border-radius: var(--radius-4);
}
.ea-arch__pillar p { margin: 0; }
.ea-arch__pillar p:first-child { font-family: var(--family-heading); }
.ea-arch__pillar p:last-child { opacity: 0.8; }
.ea-arch__note {
  margin: 0;
  padding-top: var(--spacing-between-elements-4);
  border-top: 1px solid var(--color-non-semantic-white-alpha-20);
  opacity: 0.8;
}

/* Wide: each side is as tall as the platform card; its four items share the
   height and the label hangs above, outside the flow. */
@media (min-width: 1280px) {
  .ea-arch__side { position: relative; align-self: stretch; }
  .ea-arch__item { flex: 1 1 0; }
  .ea-arch__label { position: absolute; top: -24px; left: 0; width: 100%; }
}
@media (min-width: 1280px) {
  .ea-arch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 2.46fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .ea-arch__arrow { transform: none; }
}

/* ── 5 · Comparison ──────────────────────────────────────────────── */
.ea-compare {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-divider-default);
}
.ea-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-3);
  align-items: center;
  padding: var(--spacing-button-l-horizontal);   /* 24px all round (Figma 56:6092) */
  border-bottom: 1px solid var(--border-divider-default);
}
.ea-compare__row p { margin: 0; }
.ea-compare__who { color: var(--content-static-tertiary); }
.ea-compare__gap {
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
}
.ea-compare__text { color: var(--content-static-secondary); }
.ea-compare__who img { display: block; }
.ea-compare__row[data-us] {
  background: var(--background-static-brand-inverted);
  border-radius: var(--radius-card-regular);
}
.ea-compare__row[data-us] .ea-compare__gap { color: var(--content-static-inverted); }
.ea-compare__row[data-us] .ea-compare__text { color: var(--content-static-inverted); opacity: 0.75; }
@media (min-width: 800px) {
  .ea-compare__row {
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spacing-7);
  }
}

/* ── 6 · Research ────────────────────────────────────────────────── */
.ea-research__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-8);
}
@media (min-width: 800px) {
  .ea-research__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}
.ea-research__text { display: flex; flex-direction: column; }
@media (min-width: 800px) {
  .ea-research__text { padding-right: var(--spacing-between-elements-10); }
}
.ea-research__lead {
  margin: 0;
  padding-top: var(--spacing-between-elements-7);
  color: var(--content-static-secondary);
}
.ea-research__ask {
  margin: 0;
  padding-top: var(--spacing-between-elements-7);
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
}
.ea-research__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-between-buttons-horzontal);
  padding-top: var(--spacing-between-elements-6);
}
.ea-research__form .text-field { flex: 1 1 220px; max-width: 279px; }
.ea-research__msg { margin: 0; padding-top: var(--spacing-between-elements-3); min-height: calc(var(--line-height-caption) + var(--spacing-between-elements-3)); color: var(--content-static-secondary); }

/* One composed image of the product screens on its own purple glow; it is an
   opaque rectangle, so it gets the card radius. */
.ea-research__visual { width: 100%; }
.ea-research__image { display: block; width: 100%; height: auto; border-radius: var(--radius-card-regular); }

/* ── 7 · The executive ask ───────────────────────────────────────── */
.ea-ask__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-elements-4);
}
@media (min-width: 800px) {
  .ea-ask__head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: start; }
  .ea-ask__head .ea-heading { padding-right: var(--spacing-between-elements-11); }
}
.ea-ask__intro {
  margin: 0;
  max-width: 640px;
  padding-top: var(--spacing-between-elements-4);
  color: var(--content-static-primary);
}
.ea-ask__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-between-buttons-horzontal);
  margin: 0;
  padding: var(--spacing-between-elements-11) 0 0;
  list-style: none;
}
@media (min-width: 800px) {
  .ea-ask__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .ea-ask__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ea-ask__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-elements-3);
  padding: var(--spacing-6);
  background: var(--background-static-gray-layer-1);
  border-radius: var(--radius-card-regular);
}
.ea-ask__step p, .ea-ask__step h3 { margin: 0; }
.ea-ask__when { color: var(--content-static-tertiary); }
.ea-ask__title {
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.ea-ask__text { color: var(--content-static-secondary); }
.ea-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-between-buttons-horzontal);
  padding-top: var(--spacing-between-elements-6);
}

/* ── 8 · Closing ─────────────────────────────────────────────────────
   Dark band with the hero's globe (class exec-hero-band + canvases, driven
   by globe.js). Buttons are re-toned for it: lighter purple primary, the
   dark theme's translucent secondary as is (Figma 56:6132). */
.ea-band-cta {
  --background-button-primary-default: var(--color-non-semantic-purple-60);
  --background-button-primary-hover:   var(--color-non-semantic-purple-50);
  --background-button-primary-active:  var(--color-non-semantic-purple-40);
}
.ea-band-cta .btn[data-type="primary"] { color: var(--color-non-semantic-white-alpha-100); }
.ea-closing .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ea-closing__statement {
  margin: 0;
  color: var(--content-static-primary);
  opacity: 0.73;
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
/* 144px / 141px / -6.48px at desktop — derived from Display so it scales */
.ea-closing__big {
  margin: 0;
  padding-block: var(--spacing-between-elements-6);
  color: var(--content-static-primary);
  font-family: var(--family-heading);
  font-weight: var(--weight-bold);
  font-size: min(calc(var(--size-display) * 2.25), 15vw);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.ea-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-between-buttons-horzontal);
  padding-top: var(--spacing-between-elements-6);
}