/* tokens.css */
/**
 * Do not edit directly, this file was auto-generated.
 */

/*
 * Gold: buttons use Colors/Yellow/500 #FFD364 (--colors-yellow-500), decision 2026-09-17.
 * primary/background #F9C238 is not a Figma variable and is not generated.
 * Excluded kit leftovers: Font-Families/DM-Sans, Font-Families/DM-Serif-text, Font-Families/Playfair-Display
 */
:root {
  /* Primitives */
  --font-family-title: "Newsreader";
  --font-family-body: "Geist";
  --font-weight-light-300: 300;
  --font-weight-light-italic-300: 300;
  --font-weight-regular-400: 400;
  --font-weight-regular-italic-400: 400;
  --font-weight-medium-500: 500;
  --font-weight-medium-italic-500: 500;
  --font-weight-semi-bold-600: 600;
  --font-weight-semi-bold-italic-600: 600;
  --font-weight-bold-700: 700;
  --font-weight-bold-italic-700: 700;
  --font-weight-extra-bold-800: 800;
  --font-weight-extra-bold-italic-800: 800;
  --font-size-10px: 10px;
  --font-size-12px: 12px;
  --font-size-14px: 14px;
  --font-size-16px: 16px;
  --font-size-18px: 18px;
  --font-size-20px: 20px;
  --font-size-24px: 24px;
  --font-size-32px: 32px;
  --font-size-48px: 48px;
  --font-size-56px: 56px;
  --font-size-64px: 64px;
  --font-size-72px: 72px;
  --font-size-80px: 80px;
  --font-size-96px: 96px;
  --font-size-104px: 104px;
  --font-size-120px: 120px;
  --font-size-144px: 144px;
  --font-size-66px: 66px;
  --font-line-height-10px: 10px;
  --font-line-height-12px: 12px;
  --font-line-height-14px: 14px;
  --font-line-height-16px: 16px;
  --font-line-height-18px: 18px;
  --font-line-height-20px: 20px;
  --font-line-height-24px: 24px;
  --font-line-height-28px: 28px;
  --font-line-height-32px: 32px;
  --font-line-height-36px: 36px;
  --font-line-height-40px: 40px;
  --font-line-height-48px: 48px;
  --font-line-height-56px: 56px;
  --font-line-height-60px: 60px;
  --font-line-height-64px: 64px;
  --font-line-height-72px: 72px;
  --font-line-height-80px: 80px;
  --font-line-height-90px: 90px;
  --font-line-height-96px: 96px;
  --font-line-height-104px: 104px;
  --font-line-height-112px: 112px;
  --font-line-height-120px: 120px;
  --font-line-height-144px: 144px;
  --font-letter-spacing-0: 0em;
  --font-letter-spacing-1: 0.01em;
  --font-letter-spacing-2: 0.02em;
  --font-letter-spacing-3: 0.03em;
  --font-letter-spacing-4: 0.04em;
  --font-letter-spacing-8: 0.08em;
  --font-letter-spacing-12: 0.12em;
  --font-letter-spacing--3: -0.03em;
  --font-letter-spacing--2: -0.02em;
  --font-letter-spacing--1: -0.01em;
  --font-letter-spacing--0-8: -0.008em;
  --font-letter-spacing--0-4: -0.004em;
  --font-letter-spacing-0-4: 0.004em;
  --font-letter-spacing-0-8: 0.008em;
  --font-paragraph-spacing-12px: 12px;
  --font-paragraph-spacing-14px: 14px;
  --font-paragraph-spacing-16px: 16px;
  --font-paragraph-spacing-24px: 24px;
  --font-paragraph-spacing-32px: 32px;
  --font-paragraph-spacing-40px: 40px;
  --font-paragraph-spacing-48px: 48px;
  --font-paragraph-indent-0px: 0px;
  --font-paragraph-indent-8px: 8px;
  --font-paragraph-indent-16px: 16px;
  --font-paragraph-indent-24px: 24px;
  --font-paragraph-indent-32px: 32px;
  --font-paragraph-indent-40px: 40px;
  --font-paragraph-indent-48px: 48px;
  --font-paragraph-indent-56px: 56px;
  --font-paragraph-indent-64px: 64px;
  --library-neutral-dark-100: #1a1a17;
  --library-neutral-dark-gray: #6b695f;
  --library-button-icon: #1a1a17;
  --library-spacing-8: 8px;
  --library-spacing-64: 64px;
  --spacing-0px: 0px;
  --spacing-1px: 1px;
  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-6px: 6px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-40px: 40px;
  --spacing-48px: 48px;
  --spacing-56px: 56px;
  --spacing-64px: 64px;
  --spacing-72px: 72px;
  --spacing-80px: 80px;
  --spacing-88px: 88px;
  --spacing-96px: 96px;
  --spacing-104px: 104px;
  --spacing-112px: 112px;
  --spacing-120px: 120px;
  --spacing-128px: 128px;
  --spacing-136px: 136px;
  --spacing-144px: 144px;
  --spacing-152px: 152px;
  --spacing-160px: 160px;
  --spacing-168px: 168px;
  --spacing-176px: 176px;
  --spacing-184px: 184px;
  --spacing-192px: 192px;
  --spacing-200px: 200px;
  --spacing-224px: 224px;
  --spacing-256px: 256px;
  --spacing-320px: 320px;
  --spacing-375px: 375px;
  --spacing-384px: 384px;
  --spacing-480px: 480px;
  --spacing-560px: 560px;
  --spacing-640px: 640px;
  --spacing-720px: 720px;
  --spacing-768px: 768px;
  --spacing-1024px: 1024px;
  --spacing-1080px: 1080px;
  --spacing-1128px: 1128px;
  --spacing-1200px: 1200px;
  --spacing-1280px: 1280px;
  --spacing-1440px: 1440px;
  --spacing-1600px: 1600px;
  --spacing-1920px: 1920px;
  --spacing-9999px: 9999px;
  --library-spacing-md: 8px;
  --library-small: 8px;
  --library-radius-1: 32px;
  --library-line-height-button-1: 20px;
  --library-spacing-xs: 4px;
  --library-spacing-lg: 12px;
  --colors-base-white: #ffffff;
  --colors-base-black: #1a1a17;
  --colors-base-white-opacity-white-opacity-0: rgb(255 255 255 / 0);
  --colors-base-white-opacity-white-opacity-5: rgb(255 255 255 / 0.05);
  --colors-base-white-opacity-white-opacity-10: rgb(255 255 255 / 0.1);
  --colors-base-white-opacity-white-opacity-15: rgb(255 255 255 / 0.15);
  --colors-base-white-opacity-white-opacity-20: rgb(255 255 255 / 0.2);
  --colors-base-white-opacity-white-opacity-25: rgb(255 255 255 / 0.25);
  --colors-base-white-opacity-white-opacity-30: rgb(255 255 255 / 0.3);
  --colors-base-white-opacity-white-opacity-35: rgb(255 255 255 / 0.35);
  --colors-base-white-opacity-white-opacity-40: rgb(255 255 255 / 0.4);
  --colors-base-white-opacity-white-opacity-45: rgb(255 255 255 / 0.45);
  --colors-base-white-opacity-white-opacity-50: rgb(255 255 255 / 0.5);
  --colors-base-white-opacity-white-opacity-55: rgb(255 255 255 / 0.55);
  --colors-base-white-opacity-white-opacity-60: rgb(255 255 255 / 0.6);
  --colors-base-white-opacity-white-opacity-65: rgb(255 255 255 / 0.65);
  --colors-base-white-opacity-white-opacity-70: rgb(255 255 255 / 0.7);
  --colors-base-white-opacity-white-opacity-75: rgb(255 255 255 / 0.75);
  --colors-base-white-opacity-white-opacity-80: rgb(255 255 255 / 0.8);
  --colors-base-white-opacity-white-opacity-85: rgb(255 255 255 / 0.85);
  --colors-base-white-opacity-white-opacity-90: rgb(255 255 255 / 0.9);
  --colors-base-white-opacity-white-opacity-95: rgb(255 255 255 / 0.95);
  --colors-base-black-opacity-black-opacity-0: rgb(26 26 23 / 0);
  --colors-base-black-opacity-black-opacity-5: rgb(26 26 23 / 0.05);
  --colors-base-black-opacity-black-opacity-10: rgb(26 26 23 / 0.1);
  --colors-base-black-opacity-black-opacity-15: rgb(26 26 23 / 0.15);
  --colors-base-black-opacity-black-opacity-20: rgb(26 26 23 / 0.2);
  --colors-base-black-opacity-black-opacity-25: rgb(26 26 23 / 0.25);
  --colors-base-black-opacity-black-opacity-30: rgb(26 26 23 / 0.3);
  --colors-base-black-opacity-black-opacity-35: rgb(26 26 23 / 0.35);
  --colors-base-black-opacity-black-opacity-40: rgb(26 26 23 / 0.4);
  --colors-base-black-opacity-black-opacity-45: rgb(26 26 23 / 0.45);
  --colors-base-black-opacity-black-opacity-50: rgb(26 26 23 / 0.5);
  --colors-base-black-opacity-black-opacity-55: rgb(26 26 23 / 0.55);
  --colors-base-black-opacity-black-opacity-60: rgb(26 26 23 / 0.6);
  --colors-base-black-opacity-black-opacity-65: rgb(26 26 23 / 0.65);
  --colors-base-black-opacity-black-opacity-70: rgb(26 26 23 / 0.7);
  --colors-base-black-opacity-black-opacity-75: rgb(26 26 23 / 0.75);
  --colors-base-black-opacity-black-opacity-80: rgb(26 26 23 / 0.8);
  --colors-base-black-opacity-black-opacity-85: rgb(26 26 23 / 0.85);
  --colors-base-black-opacity-black-opacity-90: rgb(26 26 23 / 0.9);
  --colors-base-black-opacity-black-opacity-95: rgb(26 26 23 / 0.95);
  --colors-red-25: #fff9f9;
  --colors-red-50: #fef2f2;
  --colors-red-100: #ffe2e2;
  --colors-red-200: #ffc9c9;
  --colors-red-300: #ffa2a2;
  --colors-red-400: #ff6467;
  --colors-red-500: #fb2c36;
  --colors-red-600: #e7000b;
  --colors-red-700: #c10007;
  --colors-red-800: #9f0712;
  --colors-red-900: #82181a;
  --colors-red-950: #460809;
  --colors-orange-25: #f9f8f8;
  --colors-orange-50: #f4f1f0;
  --colors-orange-100: #ede1de;
  --colors-orange-200: #e5c5bd;
  --colors-orange-300: #de9887;
  --colors-orange-400: #e36445;
  --colors-orange-500: #f0522c;
  --colors-orange-600: #be300e;
  --colors-orange-700: #992a0f;
  --colors-orange-800: #732111;
  --colors-orange-900: #541c12;
  --colors-orange-950: #2f140f;
  --colors-yellow-25: #fffaf0;
  --colors-yellow-50: #fff6e0;
  --colors-yellow-100: #ffeec7;
  --colors-yellow-200: #ffe5a8;
  --colors-yellow-300: #ffdc8a;
  --colors-yellow-400: #ffd675;
  --colors-yellow-500: #ffd364;
  --colors-yellow-600: #fac13d;
  --colors-yellow-700: #f3b116;
  --colors-yellow-800: #cb9310;
  --colors-yellow-900: #9c7211;
  --colors-yellow-950: #30250d;
  --colors-green-25: #f8f9f9;
  --colors-green-50: #f1f4f2;
  --colors-green-100: #e1eae5;
  --colors-green-200: #c5ddcf;
  --colors-green-300: #99ccaf;
  --colors-green-400: #65c38e;
  --colors-green-500: #34a364;
  --colors-green-600: #319b5f;
  --colors-green-700: #2b7d4f;
  --colors-green-800: #255f3c;
  --colors-green-900: #1f472f;
  --colors-green-950: #15281d;
  --colors-blue-25: #f8f8f9;
  --colors-blue-50: #f1f2f4;
  --colors-blue-100: #e1e3ea;
  --colors-blue-200: #c5cddd;
  --colors-blue-300: #98a9cd;
  --colors-blue-400: #6382c4;
  --colors-blue-500: #3d68c4;
  --colors-blue-600: #30529c;
  --colors-blue-700: #29457f;
  --colors-blue-800: #243960;
  --colors-blue-900: #1f2d47;
  --colors-blue-950: #151c28;
  --colors-neutral-25: #fdfcfa;
  --colors-neutral-50: #f9f8f5;
  --colors-neutral-100: #f2f0e9;
  --colors-neutral-200: #e7e6e0;
  --colors-neutral-300: #d5d3cb;
  --colors-neutral-400: #a8a69c;
  --colors-neutral-500: #8a8880;
  --colors-neutral-600: #6b695f;
  --colors-neutral-700: #55534a;
  --colors-neutral-800: #3d3c36;
  --colors-neutral-900: #2a2926;
  --colors-neutral-950: #1a1a17;
  --colors-bg-bg-light: #fffdf4;
  --colors-bg-bg-dark: #f2f0e9;
  --blur-none: 0px;
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  --opacity-0: 0%;
  --opacity-5: 5%;
  --opacity-10: 10%;
  --opacity-15: 15%;
  --opacity-20: 20%;
  --opacity-25: 25%;
  --opacity-30: 30%;
  --opacity-35: 35%;
  --opacity-40: 40%;
  --opacity-45: 45%;
  --opacity-50: 50%;
  --opacity-55: 55%;
  --opacity-60: 60%;
  --opacity-65: 65%;
  --opacity-70: 70%;
  --opacity-75: 75%;
  --opacity-80: 80%;
  --opacity-85: 85%;
  --opacity-90: 90%;
  --opacity-95: 95%;
  --opacity-100: 100%;
  --typography-display-xl-regular-font-family: "Newsreader";
  --typography-display-xl-regular-font-size: 64px;
  --typography-display-xl-regular-letter-spacing: -0.03em;
  --typography-display-xl-regular-line-height: 1;
  --typography-display-xl-medium-font-family: "Newsreader";
  --typography-display-xl-medium-font-size: 64px;
  --typography-display-xl-medium-letter-spacing: -0.03em;
  --typography-display-xl-medium-line-height: 1;
  --typography-display-xl-semi-bold-font-family: "Newsreader";
  --typography-display-xl-semi-bold-font-size: 64px;
  --typography-display-xl-semi-bold-letter-spacing: -0.03em;
  --typography-display-xl-semi-bold-line-height: 1;
  --typography-display-xl-bold-font-family: "Newsreader";
  --typography-display-xl-bold-font-size: 64px;
  --typography-display-xl-bold-letter-spacing: -0.03em;
  --typography-display-xl-bold-line-height: 1;
  --typography-display-xl-extra-bold-font-family: "Newsreader";
  --typography-display-xl-extra-bold-font-size: 64px;
  --typography-display-xl-extra-bold-letter-spacing: -0.03em;
  --typography-display-xl-extra-bold-line-height: 1;
  --typography-display-lg-regular-font-family: "Newsreader";
  --typography-display-lg-regular-font-size: 46px;
  --typography-display-lg-regular-letter-spacing: -0.03em;
  --typography-display-lg-regular-line-height: 1;
  --typography-display-lg-medium-font-family: "Newsreader";
  --typography-display-lg-medium-font-size: 46px;
  --typography-display-lg-medium-letter-spacing: -0.03em;
  --typography-display-lg-medium-line-height: 1;
  --typography-display-lg-semi-bold-font-family: "Newsreader";
  --typography-display-lg-semi-bold-font-size: 46px;
  --typography-display-lg-semi-bold-letter-spacing: -0.03em;
  --typography-display-lg-semi-bold-line-height: 1;
  --typography-display-lg-bold-font-family: "Newsreader";
  --typography-display-lg-bold-font-size: 46px;
  --typography-display-lg-bold-letter-spacing: -0.03em;
  --typography-display-lg-bold-line-height: 1;
  --typography-display-lg-extra-bold-font-family: "Newsreader";
  --typography-display-lg-extra-bold-font-size: 46px;
  --typography-display-lg-extra-bold-letter-spacing: -0.03em;
  --typography-display-lg-extra-bold-line-height: 1;
  --typography-display-md-regular-font-family: "Newsreader";
  --typography-display-md-regular-font-size: 42px;
  --typography-display-md-regular-letter-spacing: -0.03em;
  --typography-display-md-regular-line-height: 1.1;
  --typography-display-md-medium-font-family: "Newsreader";
  --typography-display-md-medium-font-size: 42px;
  --typography-display-md-medium-letter-spacing: -0.03em;
  --typography-display-md-medium-line-height: 1.1;
  --typography-display-md-semi-bold-font-family: "Newsreader";
  --typography-display-md-semi-bold-font-size: 42px;
  --typography-display-md-semi-bold-letter-spacing: -0.03em;
  --typography-display-md-semi-bold-line-height: 1.1;
  --typography-display-md-bold-font-family: "Newsreader";
  --typography-display-md-bold-font-size: 42px;
  --typography-display-md-bold-letter-spacing: -0.03em;
  --typography-display-md-bold-line-height: 1.1;
  --typography-display-md-extra-bold-font-family: "Newsreader";
  --typography-display-md-extra-bold-font-size: 42px;
  --typography-display-md-extra-bold-letter-spacing: -0.03em;
  --typography-display-md-extra-bold-line-height: 1.1;
  --typography-display-sm-regular-font-family: "Newsreader";
  --typography-display-sm-regular-font-size: 32px;
  --typography-display-sm-regular-letter-spacing: -0.03em;
  --typography-display-sm-regular-line-height: 1.2;
  --typography-display-sm-medium-font-family: "Newsreader";
  --typography-display-sm-medium-font-size: 32px;
  --typography-display-sm-medium-letter-spacing: -0.03em;
  --typography-display-sm-medium-line-height: 1.2;
  --typography-display-sm-semi-bold-font-family: "Newsreader";
  --typography-display-sm-semi-bold-font-size: 32px;
  --typography-display-sm-semi-bold-letter-spacing: -0.03em;
  --typography-display-sm-semi-bold-line-height: 1.2;
  --typography-display-sm-bold-font-family: "Newsreader";
  --typography-display-sm-bold-font-size: 32px;
  --typography-display-sm-bold-letter-spacing: -0.03em;
  --typography-display-sm-bold-line-height: 1.2;
  --typography-display-sm-extra-bold-font-family: "Newsreader";
  --typography-display-sm-extra-bold-font-size: 32px;
  --typography-display-sm-extra-bold-letter-spacing: -0.03em;
  --typography-display-sm-extra-bold-line-height: 1.2;
  --typography-display-xs-regular-font-family: "Newsreader";
  --typography-display-xs-regular-font-size: 26px;
  --typography-display-xs-regular-letter-spacing: -0.03em;
  --typography-display-xs-regular-line-height: 1.2;
  --typography-display-xs-medium-font-family: "Newsreader";
  --typography-display-xs-medium-font-size: 26px;
  --typography-display-xs-medium-letter-spacing: -0.03em;
  --typography-display-xs-medium-line-height: 1.2;
  --typography-display-xs-semi-bold-font-family: "Newsreader";
  --typography-display-xs-semi-bold-font-size: 26px;
  --typography-display-xs-semi-bold-letter-spacing: -0.03em;
  --typography-display-xs-semi-bold-line-height: 1.2;
  --typography-display-xs-bold-font-family: "Newsreader";
  --typography-display-xs-bold-font-size: 26px;
  --typography-display-xs-bold-letter-spacing: -0.03em;
  --typography-display-xs-bold-line-height: 1.2;
  --typography-display-xs-extra-bold-font-family: "Newsreader";
  --typography-display-xs-extra-bold-font-size: 26px;
  --typography-display-xs-extra-bold-letter-spacing: -0.03em;
  --typography-display-xs-extra-bold-line-height: 1.2;
  --typography-text-xl-regular-font-family: "Geist";
  --typography-text-xl-regular-font-size: 20px;
  --typography-text-xl-regular-letter-spacing: -0.02em;
  --typography-text-xl-regular-line-height: 1.6;
  --typography-text-xl-medium-font-family: "Geist";
  --typography-text-xl-medium-font-size: 20px;
  --typography-text-xl-medium-letter-spacing: -0.02em;
  --typography-text-xl-medium-line-height: 1.6;
  --typography-text-xl-semi-bold-font-family: "Geist";
  --typography-text-xl-semi-bold-font-size: 20px;
  --typography-text-xl-semi-bold-letter-spacing: -0.02em;
  --typography-text-xl-semi-bold-line-height: 1.6;
  --typography-text-xl-bold-font-family: "Geist";
  --typography-text-xl-bold-font-size: 20px;
  --typography-text-xl-bold-letter-spacing: -0.02em;
  --typography-text-xl-bold-line-height: 1.6;
  --typography-text-xl-bold-italic-font-family: "Geist";
  --typography-text-xl-bold-italic-font-size: 20px;
  --typography-text-xl-bold-italic-letter-spacing: -0.02em;
  --typography-text-xl-bold-italic-line-height: 1.6;
  --typography-text-xl-extra-bold-font-family: "Geist";
  --typography-text-xl-extra-bold-font-size: 20px;
  --typography-text-xl-extra-bold-letter-spacing: -0.02em;
  --typography-text-xl-extra-bold-line-height: 1.6;
  --typography-text-lg-regular-font-family: "Geist";
  --typography-text-lg-regular-font-size: 18px;
  --typography-text-lg-regular-letter-spacing: -0.02em;
  --typography-text-lg-regular-line-height: 1.6;
  --typography-text-lg-medium-font-family: "Geist";
  --typography-text-lg-medium-font-size: 18px;
  --typography-text-lg-medium-letter-spacing: -0.02em;
  --typography-text-lg-medium-line-height: 1.6;
  --typography-text-lg-semi-bold-font-family: "Geist";
  --typography-text-lg-semi-bold-font-size: 18px;
  --typography-text-lg-semi-bold-letter-spacing: -0.02em;
  --typography-text-lg-semi-bold-line-height: 1.6;
  --typography-text-lg-bold-font-family: "Geist";
  --typography-text-lg-bold-font-size: 18px;
  --typography-text-lg-bold-letter-spacing: -0.02em;
  --typography-text-lg-bold-line-height: 1.6;
  --typography-text-lg-extra-bold-font-family: "Geist";
  --typography-text-lg-extra-bold-font-size: 18px;
  --typography-text-lg-extra-bold-letter-spacing: -0.02em;
  --typography-text-lg-extra-bold-line-height: 1.6;
  --typography-text-md-light-font-family: "Geist";
  --typography-text-md-light-font-size: 16px;
  --typography-text-md-light-letter-spacing: -0.02em;
  --typography-text-md-light-line-height: 1.6;
  --typography-text-md-regular-font-family: "Geist";
  --typography-text-md-regular-font-size: 16px;
  --typography-text-md-regular-letter-spacing: -0.02em;
  --typography-text-md-regular-line-height: 1.6;
  --typography-text-md-medium-font-family: "Geist";
  --typography-text-md-medium-font-size: 16px;
  --typography-text-md-medium-letter-spacing: -0.02em;
  --typography-text-md-medium-line-height: 1.6;
  --typography-text-md-semi-bold-font-family: "Geist";
  --typography-text-md-semi-bold-font-size: 16px;
  --typography-text-md-semi-bold-letter-spacing: -0.02em;
  --typography-text-md-semi-bold-line-height: 1.6;
  --typography-text-md-bold-font-family: "Geist";
  --typography-text-md-bold-font-size: 16px;
  --typography-text-md-bold-letter-spacing: -0.02em;
  --typography-text-md-bold-line-height: 1.6;
  --typography-text-md-extra-bold-font-family: "Geist";
  --typography-text-md-extra-bold-font-size: 16px;
  --typography-text-md-extra-bold-letter-spacing: -0.02em;
  --typography-text-md-extra-bold-line-height: 1.6;
  --typography-text-sm-regular-font-family: "Geist";
  --typography-text-sm-regular-font-size: 14px;
  --typography-text-sm-regular-letter-spacing: -0.02em;
  --typography-text-sm-regular-line-height: 1.6;
  --typography-text-sm-medium-font-family: "Geist";
  --typography-text-sm-medium-font-size: 14px;
  --typography-text-sm-medium-letter-spacing: -0.02em;
  --typography-text-sm-medium-line-height: 1.5;
  --typography-text-sm-semi-bold-font-family: "Geist";
  --typography-text-sm-semi-bold-font-size: 14px;
  --typography-text-sm-semi-bold-letter-spacing: -0.02em;
  --typography-text-sm-semi-bold-line-height: 1.6;
  --typography-text-sm-bold-font-family: "Geist";
  --typography-text-sm-bold-font-size: 14px;
  --typography-text-sm-bold-letter-spacing: -0.02em;
  --typography-text-sm-bold-line-height: 1.6;
  --typography-text-sm-extra-bold-font-family: "Geist";
  --typography-text-sm-extra-bold-font-size: 14px;
  --typography-text-sm-extra-bold-letter-spacing: -0.02em;
  --typography-text-sm-extra-bold-line-height: 1.6;
  --typography-caption-caption-12px-font-family: "Geist";
  --typography-caption-caption-12px-font-size: 12px;
  --typography-caption-caption-12px-font-weight: 500;
  --typography-caption-caption-12px-letter-spacing: -0.02em;
  --typography-caption-caption-12px-line-height: 1;
  --typography-caption-caption-10px-font-family: "Geist";
  --typography-caption-caption-10px-font-size: 10px;
  --typography-caption-caption-10px-letter-spacing: -0.02em;
  --typography-caption-caption-10px-line-height: 1;

  /* Semantic (aliases) */
  --typography-display-xl-regular-font-weight: var(--font-weight-regular-400);
  --typography-display-xl-medium-font-weight: var(--font-weight-medium-500);
  --typography-display-xl-semi-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-display-xl-bold-font-weight: var(--font-weight-bold-700);
  --typography-display-xl-extra-bold-font-weight: var(--font-weight-extra-bold-800);
  --typography-display-lg-regular-font-weight: var(--font-weight-regular-400);
  --typography-display-lg-medium-font-weight: var(--font-weight-medium-500);
  --typography-display-lg-semi-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-display-lg-bold-font-weight: var(--font-weight-bold-700);
  --typography-display-lg-extra-bold-font-weight: var(--font-weight-extra-bold-800);
  --typography-display-md-regular-font-weight: var(--font-weight-regular-400);
  --typography-display-md-medium-font-weight: var(--font-weight-medium-500);
  --typography-display-md-semi-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-display-md-bold-font-weight: var(--font-weight-bold-700);
  --typography-display-md-extra-bold-font-weight: var(--font-weight-extra-bold-800);
  --typography-display-sm-regular-font-weight: var(--font-weight-regular-400);
  --typography-display-sm-medium-font-weight: var(--font-weight-medium-500);
  --typography-display-sm-semi-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-display-sm-bold-font-weight: var(--font-weight-bold-700);
  --typography-display-sm-extra-bold-font-weight: var(--font-weight-extra-bold-800);
  --typography-display-xs-regular-font-weight: var(--font-weight-regular-400);
  --typography-display-xs-medium-font-weight: var(--font-weight-medium-500);
  --typography-display-xs-semi-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-display-xs-bold-font-weight: var(--font-weight-bold-700);
  --typography-display-xs-extra-bold-font-weight: var(--font-weight-extra-bold-800);
  --typography-text-xl-regular-font-weight: var(--font-weight-light-300);
  --typography-text-xl-medium-font-weight: var(--font-weight-regular-400);
  --typography-text-xl-semi-bold-font-weight: var(--font-weight-medium-500);
  --typography-text-xl-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-text-xl-bold-italic-font-weight: var(--font-weight-semi-bold-600);
  --typography-text-xl-extra-bold-font-weight: var(--font-weight-bold-700);
  --typography-text-lg-regular-font-weight: var(--font-weight-light-300);
  --typography-text-lg-medium-font-weight: var(--font-weight-regular-400);
  --typography-text-lg-semi-bold-font-weight: var(--font-weight-medium-500);
  --typography-text-lg-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-text-lg-extra-bold-font-weight: var(--font-weight-bold-700);
  --typography-text-md-light-font-weight: var(--font-weight-light-300);
  --typography-text-md-regular-font-weight: var(--font-weight-light-300);
  --typography-text-md-medium-font-weight: var(--font-weight-regular-400);
  --typography-text-md-semi-bold-font-weight: var(--font-weight-medium-500);
  --typography-text-md-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-text-md-extra-bold-font-weight: var(--font-weight-bold-700);
  --typography-text-sm-regular-font-weight: var(--font-weight-light-300);
  --typography-text-sm-medium-font-weight: var(--font-weight-regular-400);
  --typography-text-sm-semi-bold-font-weight: var(--font-weight-medium-500);
  --typography-text-sm-bold-font-weight: var(--font-weight-semi-bold-600);
  --typography-text-sm-extra-bold-font-weight: var(--font-weight-bold-700);
  --typography-caption-caption-10px-font-weight: var(--font-weight-medium-500);
  --radius-0: var(--spacing-0px);
  --radius-1: var(--spacing-1px);
  --radius-2: var(--spacing-2px);
  --radius-4: var(--spacing-4px);
  --radius-6: var(--spacing-6px);
  --radius-8: var(--spacing-8px);
  --radius-12: var(--spacing-12px);
  --radius-16: var(--spacing-16px);
  --radius-20: var(--spacing-20px);
  --radius-24: var(--spacing-24px);
  --radius-32: var(--spacing-32px);
  --radius-40: var(--spacing-40px);
  --radius-48: var(--spacing-48px);
  --radius-56: var(--spacing-56px);
  --radius-64: var(--spacing-64px);
  --radius-9999: var(--spacing-9999px);
  --spacing-0: var(--spacing-0px);
  --spacing-1: var(--spacing-1px);
  --spacing-2: var(--spacing-2px);
  --spacing-4: var(--spacing-4px);
  --spacing-6: var(--spacing-6px);
  --spacing-8: var(--spacing-8px);
  --spacing-12: var(--spacing-12px);
  --spacing-16: var(--spacing-16px);
  --spacing-20: var(--spacing-20px);
  --spacing-24: var(--spacing-24px);
  --spacing-32: var(--spacing-32px);
  --spacing-40: var(--spacing-40px);
  --spacing-48: var(--spacing-48px);
  --spacing-56: var(--spacing-56px);
  --spacing-64: var(--spacing-64px);
  --spacing-72: var(--spacing-72px);
  --spacing-80: var(--spacing-80px);
  --spacing-88: var(--spacing-88px);
  --spacing-96: var(--spacing-96px);
  --spacing-104: var(--spacing-104px);
  --spacing-112: var(--spacing-112px);
  --spacing-120: var(--spacing-120px);
  --spacing-128: var(--spacing-128px);
  --spacing-136: var(--spacing-136px);
  --spacing-144: var(--spacing-144px);
  --spacing-152: var(--spacing-152px);
  --spacing-160: var(--spacing-160px);
  --spacing-168: var(--spacing-168px);
  --spacing-176: var(--spacing-176px);
  --spacing-184: var(--spacing-184px);
  --spacing-192: var(--spacing-192px);
  --spacing-200: var(--spacing-200px);
  --spacing-224: var(--spacing-224px);
  --spacing-256: var(--spacing-256px);
  --spacing-320: var(--spacing-320px);
  --spacing-384: var(--spacing-384px);
  --spacing-480: var(--spacing-480px);
  --spacing-560: var(--spacing-560px);
  --spacing-640: var(--spacing-640px);
  --spacing-720: var(--spacing-720px);
  --spacing-768: var(--spacing-768px);
  --spacing-1024: var(--spacing-1024px);
  --spacing-1080: var(--spacing-1080px);
  --spacing-1128: var(--spacing-1128px);
  --spacing-1200: var(--spacing-1200px);
  --spacing-1280: var(--spacing-1280px);
  --spacing-1440: var(--spacing-1440px);
  --spacing-1600: var(--spacing-1600px);
  --spacing-1920: var(--spacing-1920px);
  --spacing-9999: var(--spacing-9999px);
  --library-primary-text: var(--colors-base-black);
  --library-primary-stroke: var(--colors-base-white-opacity-white-opacity-30);

  /* Derived semantic (docs/decisions.md) */
  --color-surface-card: var(--colors-bg-bg-dark); /* bg-dark = sections and cards; Figma binds it on 349:2269, 349:2176, 349:2441 */
  --color-hairline: var(--colors-base-black-opacity-black-opacity-10); /* Neutral/950 at 10%; Figma binds Black-opacity-10 on 349:2269, 349:2176, 349:2441 */
  --color-text-muted: var(--colors-neutral-700); /* Figma binds Colors/Neutral/700 on 349:2410 */
}

/* base.css */
/* Base: modern reset and document defaults. Values come from src/styles/tokens.css. */

/*
 * Motion (owner decision 2026-09-17): every hover transition uses 200ms with the curve 0, 0, 0.58, 1
 * (Figma easing "Ease out"). Components reference these variables, never raw values.
 * prefers-reduced-motion below shortens all transitions to 0.01ms.
 */
:root {
  --motion-duration-hover: 200ms;
  /* image zoom on card hover; not in Figma, see docs/decisions.md */
  --motion-duration-media: 800ms;
  --motion-ease-media: cubic-bezier(0.16, 1, 0.3, 1);
  /* button icon dots sequence; owner decision, see docs/decisions.md */
  --motion-duration-icon: 600ms;
  --motion-ease-out: cubic-bezier(0, 0, 0.58, 1);
}

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

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  /* anything without a type class falls back to the body font, never the browser's default serif */
  font-family: var(--font-family-body), system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--colors-bg-bg-light);
  color: var(--colors-base-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

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

/* Accessible-name helper: hidden visually, available to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Manual line breaks copied from the 1440 Figma frame. They only hold at desktop widths, so below 1200 the text
   wraps on its own (docs/responsive-spec.md). */

/* anchors stop below the sticky header (components/header.css) */
html {
  scroll-padding-top: var(--header-height);
  /* owner (2026-10-01): in-page links glide to their section; reduced-motion users jump (rule above) */
  scroll-behavior: smooth;
}

/* the page does not scroll while the menu sheet is open (src/js/menu.js) */
.is-menu-open {
  overflow: hidden;
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Manual line breaks copied from the 1440 frame; below 1200 headings wrap on their own. */
  .br-desktop {
    display: none;
  }
}

/* Manual line breaks for phones only (owner, 2026-10-01: hero headline in three even lines) */
.br-mobile {
  display: none;
}

@media (max-width: 767px) {
  .br-mobile {
    display: inline;
  }
}

/* typography.css */
/*
 * Text styles from Figma (file O7cGxVL91GZtfLrJfRdPU9, 49 local text styles, checked 2026-09-17).
 * Class = "text-" + Figma style name in kebab case, camelCase split like the token names:
 *   "Display xl/Regular" -> .text-display-xl-regular, "Text md/SemiBold" -> .text-text-md-semi-bold
 * Every value is a token from tokens.css; each resolved value was checked against the Figma style.
 * font-style is always normal (CLAUDE.md known issues), including "Text xl/Bold Italic".
 * Figma has only 1440 frames, so no style has a 768 variant and there are no media queries yet.
 *
 * Fonts are self-hosted variable fonts (src/fonts, built from fonts/, see docs/decisions.md), so every
 * weight used by a style is real, not synthesized. Rendering was matched to Figma by measurement:
 *   Newsreader: optical size follows the font size (font-optical-sizing: auto), kerning on.
 *   Geist: kerning off (font-kerning: none). With kerning on, text is 1-1.5% narrower than in Figma
 *   and 349:2274 wraps to 3 lines instead of 4.
 */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-latin-opsz-wght.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 200 800;
}

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-wght.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

/* Geist Mono for eyebrow labels (owner, 2026-10-01). Google Fonts Latin subset, variable 100-900, OFL. */
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin-wght.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

:root {
  --font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-fallback-serif: Georgia, 'Times New Roman', serif;
  --font-fallback-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Display xl/Regular: Newsreader Regular, 64px, line-height 100%, letter-spacing -3% */
.text-display-xl-regular {
  font-family: var(--typography-display-xl-regular-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xl-regular-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xl-regular-font-weight);
  letter-spacing: var(--typography-display-xl-regular-letter-spacing);
  line-height: var(--typography-display-xl-regular-line-height);
  text-transform: none;
}

/* Display xl/Medium: Newsreader Medium, 64px, line-height 100%, letter-spacing -3% */
.text-display-xl-medium {
  font-family: var(--typography-display-xl-medium-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xl-medium-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xl-medium-font-weight);
  letter-spacing: var(--typography-display-xl-medium-letter-spacing);
  line-height: var(--typography-display-xl-medium-line-height);
  text-transform: none;
}

/* Display xl/SemiBold: Newsreader SemiBold, 64px, line-height 100%, letter-spacing -3% */
.text-display-xl-semi-bold {
  font-family: var(--typography-display-xl-semi-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xl-semi-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xl-semi-bold-font-weight);
  letter-spacing: var(--typography-display-xl-semi-bold-letter-spacing);
  line-height: var(--typography-display-xl-semi-bold-line-height);
  text-transform: none;
}

/* Display xl/Bold: Newsreader Bold, 64px, line-height 100%, letter-spacing -3% */
.text-display-xl-bold {
  font-family: var(--typography-display-xl-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xl-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xl-bold-font-weight);
  letter-spacing: var(--typography-display-xl-bold-letter-spacing);
  line-height: var(--typography-display-xl-bold-line-height);
  text-transform: none;
}

/* Display xl/ExtraBold: Newsreader ExtraBold, 64px, line-height 100%, letter-spacing -3% */
.text-display-xl-extra-bold {
  font-family: var(--typography-display-xl-extra-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xl-extra-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xl-extra-bold-font-weight);
  letter-spacing: var(--typography-display-xl-extra-bold-letter-spacing);
  line-height: var(--typography-display-xl-extra-bold-line-height);
  text-transform: none;
}

/* Display lg/Regular: Newsreader Regular, 46px, line-height 100%, letter-spacing -3% */
.text-display-lg-regular {
  font-family: var(--typography-display-lg-regular-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-lg-regular-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-lg-regular-font-weight);
  letter-spacing: var(--typography-display-lg-regular-letter-spacing);
  line-height: var(--typography-display-lg-regular-line-height);
  text-transform: none;
}

/* Display lg/Medium: Newsreader Medium, 46px, line-height 100%, letter-spacing -3% */
.text-display-lg-medium {
  font-family: var(--typography-display-lg-medium-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-lg-medium-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-lg-medium-font-weight);
  letter-spacing: var(--typography-display-lg-medium-letter-spacing);
  line-height: var(--typography-display-lg-medium-line-height);
  text-transform: none;
}

/* Display lg/SemiBold: Newsreader SemiBold, 46px, line-height 100%, letter-spacing -3% */
.text-display-lg-semi-bold {
  font-family: var(--typography-display-lg-semi-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-lg-semi-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-lg-semi-bold-font-weight);
  letter-spacing: var(--typography-display-lg-semi-bold-letter-spacing);
  line-height: var(--typography-display-lg-semi-bold-line-height);
  text-transform: none;
}

/* Display lg/Bold: Newsreader Bold, 46px, line-height 100%, letter-spacing -3% */
.text-display-lg-bold {
  font-family: var(--typography-display-lg-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-lg-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-lg-bold-font-weight);
  letter-spacing: var(--typography-display-lg-bold-letter-spacing);
  line-height: var(--typography-display-lg-bold-line-height);
  text-transform: none;
}

/* Display lg/ExtraBold: Newsreader ExtraBold, 46px, line-height 100%, letter-spacing -3% */
.text-display-lg-extra-bold {
  font-family: var(--typography-display-lg-extra-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-lg-extra-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-lg-extra-bold-font-weight);
  letter-spacing: var(--typography-display-lg-extra-bold-letter-spacing);
  line-height: var(--typography-display-lg-extra-bold-line-height);
  text-transform: none;
}

/* Display md/Regular: Newsreader Regular, 42px, line-height 110%, letter-spacing -3% */
.text-display-md-regular {
  font-family: var(--typography-display-md-regular-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-md-regular-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-md-regular-font-weight);
  letter-spacing: var(--typography-display-md-regular-letter-spacing);
  line-height: var(--typography-display-md-regular-line-height);
  text-transform: none;
}

/* Display md/Medium: Newsreader Medium, 42px, line-height 110%, letter-spacing -3% */
.text-display-md-medium {
  font-family: var(--typography-display-md-medium-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-md-medium-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-md-medium-font-weight);
  letter-spacing: var(--typography-display-md-medium-letter-spacing);
  line-height: var(--typography-display-md-medium-line-height);
  text-transform: none;
}

/* Display md/SemiBold: Newsreader SemiBold, 42px, line-height 110%, letter-spacing -3% */
.text-display-md-semi-bold {
  font-family: var(--typography-display-md-semi-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-md-semi-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-md-semi-bold-font-weight);
  letter-spacing: var(--typography-display-md-semi-bold-letter-spacing);
  line-height: var(--typography-display-md-semi-bold-line-height);
  text-transform: none;
}

/* Display md/Bold: Newsreader Bold, 42px, line-height 110%, letter-spacing -3% */
.text-display-md-bold {
  font-family: var(--typography-display-md-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-md-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-md-bold-font-weight);
  letter-spacing: var(--typography-display-md-bold-letter-spacing);
  line-height: var(--typography-display-md-bold-line-height);
  text-transform: none;
}

/* Display md/ExtraBold: Newsreader ExtraBold, 42px, line-height 110%, letter-spacing -3% */
.text-display-md-extra-bold {
  font-family: var(--typography-display-md-extra-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-md-extra-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-md-extra-bold-font-weight);
  letter-spacing: var(--typography-display-md-extra-bold-letter-spacing);
  line-height: var(--typography-display-md-extra-bold-line-height);
  text-transform: none;
}

/* Display sm/Regular: Newsreader Regular, 32px, line-height 120%, letter-spacing -3% */
.text-display-sm-regular {
  font-family: var(--typography-display-sm-regular-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-sm-regular-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-sm-regular-font-weight);
  letter-spacing: var(--typography-display-sm-regular-letter-spacing);
  line-height: var(--typography-display-sm-regular-line-height);
  text-transform: none;
}

/* Display sm/Medium: Newsreader Medium, 32px, line-height 120%, letter-spacing -3% */
.text-display-sm-medium {
  font-family: var(--typography-display-sm-medium-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-sm-medium-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-sm-medium-font-weight);
  letter-spacing: var(--typography-display-sm-medium-letter-spacing);
  line-height: var(--typography-display-sm-medium-line-height);
  text-transform: none;
}

/* Display sm/SemiBold: Newsreader SemiBold, 32px, line-height 120%, letter-spacing -3% */
.text-display-sm-semi-bold {
  font-family: var(--typography-display-sm-semi-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-sm-semi-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-sm-semi-bold-font-weight);
  letter-spacing: var(--typography-display-sm-semi-bold-letter-spacing);
  line-height: var(--typography-display-sm-semi-bold-line-height);
  text-transform: none;
}

/* Display sm/Bold: Newsreader Bold, 32px, line-height 120%, letter-spacing -3% */
.text-display-sm-bold {
  font-family: var(--typography-display-sm-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-sm-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-sm-bold-font-weight);
  letter-spacing: var(--typography-display-sm-bold-letter-spacing);
  line-height: var(--typography-display-sm-bold-line-height);
  text-transform: none;
}

/* Display sm/ExtraBold: Newsreader ExtraBold, 32px, line-height 120%, letter-spacing -3% */
.text-display-sm-extra-bold {
  font-family: var(--typography-display-sm-extra-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-sm-extra-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-sm-extra-bold-font-weight);
  letter-spacing: var(--typography-display-sm-extra-bold-letter-spacing);
  line-height: var(--typography-display-sm-extra-bold-line-height);
  text-transform: none;
}

/* Display xs/Regular: Newsreader Regular, 26px, line-height 120%, letter-spacing -3% */
.text-display-xs-regular {
  font-family: var(--typography-display-xs-regular-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xs-regular-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xs-regular-font-weight);
  letter-spacing: var(--typography-display-xs-regular-letter-spacing);
  line-height: var(--typography-display-xs-regular-line-height);
  text-transform: none;
}

/* Display xs/Medium: Newsreader Medium, 26px, line-height 120%, letter-spacing -3% */
.text-display-xs-medium {
  font-family: var(--typography-display-xs-medium-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xs-medium-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xs-medium-font-weight);
  letter-spacing: var(--typography-display-xs-medium-letter-spacing);
  line-height: var(--typography-display-xs-medium-line-height);
  text-transform: none;
}

/* Display xs/SemiBold: Newsreader SemiBold, 26px, line-height 120%, letter-spacing -3% */
.text-display-xs-semi-bold {
  font-family: var(--typography-display-xs-semi-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xs-semi-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xs-semi-bold-font-weight);
  letter-spacing: var(--typography-display-xs-semi-bold-letter-spacing);
  line-height: var(--typography-display-xs-semi-bold-line-height);
  text-transform: none;
}

/* Display xs/Bold: Newsreader Bold, 26px, line-height 120%, letter-spacing -3% */
.text-display-xs-bold {
  font-family: var(--typography-display-xs-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xs-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xs-bold-font-weight);
  letter-spacing: var(--typography-display-xs-bold-letter-spacing);
  line-height: var(--typography-display-xs-bold-line-height);
  text-transform: none;
}

/* Display xs/ExtraBold: Newsreader ExtraBold, 26px, line-height 120%, letter-spacing -3% */
.text-display-xs-extra-bold {
  font-family: var(--typography-display-xs-extra-bold-font-family), var(--font-fallback-serif);
  font-size: var(--typography-display-xs-extra-bold-font-size);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--typography-display-xs-extra-bold-font-weight);
  letter-spacing: var(--typography-display-xs-extra-bold-letter-spacing);
  line-height: var(--typography-display-xs-extra-bold-line-height);
  text-transform: none;
}

/* Text xl/Regular: Geist Regular, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-regular {
  font-family: var(--typography-text-xl-regular-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-regular-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-regular-font-weight);
  letter-spacing: var(--typography-text-xl-regular-letter-spacing);
  line-height: var(--typography-text-xl-regular-line-height);
  text-transform: none;
}

/* Text xl/Medium: Geist Medium, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-medium {
  font-family: var(--typography-text-xl-medium-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-medium-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-medium-font-weight);
  letter-spacing: var(--typography-text-xl-medium-letter-spacing);
  line-height: var(--typography-text-xl-medium-line-height);
  text-transform: none;
}

/* Text xl/SemiBold: Geist SemiBold, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-semi-bold {
  font-family: var(--typography-text-xl-semi-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-semi-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-semi-bold-font-weight);
  letter-spacing: var(--typography-text-xl-semi-bold-letter-spacing);
  line-height: var(--typography-text-xl-semi-bold-line-height);
  text-transform: none;
}

/* Text xl/Bold: Geist Bold, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-bold {
  font-family: var(--typography-text-xl-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-bold-font-weight);
  letter-spacing: var(--typography-text-xl-bold-letter-spacing);
  line-height: var(--typography-text-xl-bold-line-height);
  text-transform: none;
}

/* Text xl/Bold Italic: Geist Bold, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-bold-italic {
  font-family: var(--typography-text-xl-bold-italic-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-bold-italic-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-bold-italic-font-weight);
  letter-spacing: var(--typography-text-xl-bold-italic-letter-spacing);
  line-height: var(--typography-text-xl-bold-italic-line-height);
  text-transform: none;
}

/* Text xl/ExtraBold: Geist ExtraBold, 20px, line-height 160%, letter-spacing -1% */
.text-text-xl-extra-bold {
  font-family: var(--typography-text-xl-extra-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-xl-extra-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-xl-extra-bold-font-weight);
  letter-spacing: var(--typography-text-xl-extra-bold-letter-spacing);
  line-height: var(--typography-text-xl-extra-bold-line-height);
  text-transform: none;
}

/* Text lg/Regular: Geist Regular, 18px, line-height 160%, letter-spacing -1% */
.text-text-lg-regular {
  font-family: var(--typography-text-lg-regular-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-lg-regular-font-size);
  font-style: normal;
  font-weight: var(--typography-text-lg-regular-font-weight);
  letter-spacing: var(--typography-text-lg-regular-letter-spacing);
  line-height: var(--typography-text-lg-regular-line-height);
  text-transform: none;
}

/* Text lg/Medium: Geist Medium, 18px, line-height 160%, letter-spacing -1% */
.text-text-lg-medium {
  font-family: var(--typography-text-lg-medium-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-lg-medium-font-size);
  font-style: normal;
  font-weight: var(--typography-text-lg-medium-font-weight);
  letter-spacing: var(--typography-text-lg-medium-letter-spacing);
  line-height: var(--typography-text-lg-medium-line-height);
  text-transform: none;
}

/* Text lg/SemiBold: Geist SemiBold, 18px, line-height 160%, letter-spacing -1% */
.text-text-lg-semi-bold {
  font-family: var(--typography-text-lg-semi-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-lg-semi-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-lg-semi-bold-font-weight);
  letter-spacing: var(--typography-text-lg-semi-bold-letter-spacing);
  line-height: var(--typography-text-lg-semi-bold-line-height);
  text-transform: none;
}

/* Text lg/Bold: Geist Bold, 18px, line-height 160%, letter-spacing -1% */
.text-text-lg-bold {
  font-family: var(--typography-text-lg-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-lg-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-lg-bold-font-weight);
  letter-spacing: var(--typography-text-lg-bold-letter-spacing);
  line-height: var(--typography-text-lg-bold-line-height);
  text-transform: none;
}

/* Text lg/ExtraBold: Geist ExtraBold, 18px, line-height 160%, letter-spacing -1% */
.text-text-lg-extra-bold {
  font-family: var(--typography-text-lg-extra-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-lg-extra-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-lg-extra-bold-font-weight);
  letter-spacing: var(--typography-text-lg-extra-bold-letter-spacing);
  line-height: var(--typography-text-lg-extra-bold-line-height);
  text-transform: none;
}

/* Text md/Light: Geist Light, 16px, line-height 160%, letter-spacing -1% */
.text-text-md-light {
  font-family: var(--typography-text-md-light-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-light-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-light-font-weight);
  letter-spacing: var(--typography-text-md-light-letter-spacing);
  line-height: var(--typography-text-md-light-line-height);
  text-transform: none;
}

/* Text md/Regular: Geist Regular, 16px, line-height 160%, letter-spacing -1% */
.text-text-md-regular {
  font-family: var(--typography-text-md-regular-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-regular-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-regular-font-weight);
  letter-spacing: var(--typography-text-md-regular-letter-spacing);
  line-height: var(--typography-text-md-regular-line-height);
  text-transform: none;
}

/* Text md/Medium: Geist Medium, 16px, line-height 160%, letter-spacing -2% */
.text-text-md-medium {
  font-family: var(--typography-text-md-medium-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-medium-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-medium-font-weight);
  letter-spacing: var(--typography-text-md-medium-letter-spacing);
  line-height: var(--typography-text-md-medium-line-height);
  text-transform: none;
}

/* Text md/SemiBold: Geist SemiBold, 16px, line-height 160%, letter-spacing -1% */
.text-text-md-semi-bold {
  font-family: var(--typography-text-md-semi-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-semi-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-semi-bold-font-weight);
  letter-spacing: var(--typography-text-md-semi-bold-letter-spacing);
  line-height: var(--typography-text-md-semi-bold-line-height);
  text-transform: none;
}

/* Text md/Bold: Geist Bold, 16px, line-height 160%, letter-spacing -1% */
.text-text-md-bold {
  font-family: var(--typography-text-md-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-bold-font-weight);
  letter-spacing: var(--typography-text-md-bold-letter-spacing);
  line-height: var(--typography-text-md-bold-line-height);
  text-transform: none;
}

/* Text md/ExtraBold: Geist ExtraBold, 16px, line-height 160%, letter-spacing -1% */
.text-text-md-extra-bold {
  font-family: var(--typography-text-md-extra-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-md-extra-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-md-extra-bold-font-weight);
  letter-spacing: var(--typography-text-md-extra-bold-letter-spacing);
  line-height: var(--typography-text-md-extra-bold-line-height);
  text-transform: none;
}

/* Text sm/Regular: Geist Regular, 14px, line-height 160%, letter-spacing -1% */
.text-text-sm-regular {
  font-family: var(--typography-text-sm-regular-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-sm-regular-font-size);
  font-style: normal;
  font-weight: var(--typography-text-sm-regular-font-weight);
  letter-spacing: var(--typography-text-sm-regular-letter-spacing);
  line-height: var(--typography-text-sm-regular-line-height);
  text-transform: none;
}

/* Text sm/Medium: Geist Medium, 14px, line-height 150%, letter-spacing -1% */
.text-text-sm-medium {
  font-family: var(--typography-text-sm-medium-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-sm-medium-font-size);
  font-style: normal;
  font-weight: var(--typography-text-sm-medium-font-weight);
  letter-spacing: var(--typography-text-sm-medium-letter-spacing);
  line-height: var(--typography-text-sm-medium-line-height);
  text-transform: none;
}

/* Text sm/SemiBold: Geist SemiBold, 14px, line-height 160%, letter-spacing -1% */
.text-text-sm-semi-bold {
  font-family: var(--typography-text-sm-semi-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-sm-semi-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-sm-semi-bold-font-weight);
  letter-spacing: var(--typography-text-sm-semi-bold-letter-spacing);
  line-height: var(--typography-text-sm-semi-bold-line-height);
  text-transform: none;
}

/* Text sm/Bold: Geist Bold, 14px, line-height 160%, letter-spacing -1% */
.text-text-sm-bold {
  font-family: var(--typography-text-sm-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-sm-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-sm-bold-font-weight);
  letter-spacing: var(--typography-text-sm-bold-letter-spacing);
  line-height: var(--typography-text-sm-bold-line-height);
  text-transform: none;
}

/* Text sm/ExtraBold: Geist ExtraBold, 14px, line-height 160%, letter-spacing -1% */
.text-text-sm-extra-bold {
  font-family: var(--typography-text-sm-extra-bold-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-text-sm-extra-bold-font-size);
  font-style: normal;
  font-weight: var(--typography-text-sm-extra-bold-font-weight);
  letter-spacing: var(--typography-text-sm-extra-bold-letter-spacing);
  line-height: var(--typography-text-sm-extra-bold-line-height);
  text-transform: none;
}

/* Caption/Caption 12px: Geist SemiBold, 12px, line-height 100%, letter-spacing -1%, uppercase */
.text-caption-caption-12px {
  font-family: var(--typography-caption-caption-12px-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-caption-caption-12px-font-size);
  font-style: normal;
  font-weight: var(--typography-caption-caption-12px-font-weight);
  letter-spacing: var(--typography-caption-caption-12px-letter-spacing);
  line-height: var(--typography-caption-caption-12px-line-height);
  text-transform: uppercase;
}

/* Caption/Caption 10px: Geist SemiBold, 10px, line-height 100%, letter-spacing -1%, uppercase */
.text-caption-caption-10px {
  font-family: var(--typography-caption-caption-10px-font-family), var(--font-fallback-sans);
  font-kerning: none;
  font-size: var(--typography-caption-caption-10px-font-size);
  font-style: normal;
  font-weight: var(--typography-caption-caption-10px-font-weight);
  letter-spacing: var(--typography-caption-caption-10px-letter-spacing);
  line-height: var(--typography-caption-caption-10px-line-height);
  text-transform: uppercase;
}

/*
 * Display xxs/Medium — Newsreader Medium 20 / 24 / -1%. Added on the owner's request (2026-09-19) for the news
 * card title on mobile (Figma 421:4803). It is not one of the Figma text styles: the file has no display style
 * below Display xs (26), so the size, weight and line height are taken from that node.
 */
.text-display-xxs-medium {
  font-family: var(--font-family-title), var(--font-fallback-serif);
  font-optical-sizing: auto;
  font-size: var(--font-size-20px);
  font-style: normal;
  font-weight: var(--font-weight-medium-500);
  letter-spacing: var(--font-letter-spacing--1);
  line-height: var(--spacing-24px);
}

/* effects.css */
/*
 * Effect styles from Figma.
 *
 * The Figma file has no effect styles (getLocalEffectStylesAsync() returned 0 on 2026-09-17). Effects in the
 * design are set directly on layers; they are listed in docs/figma-audit.md, section 4. An effect is added here
 * only on owner request, as a named approximation (see docs/decisions.md).
 *
 * Conversion rules, for when effect styles are added in Figma:
 *   Drop shadow        -> box-shadow: x y blur spread color
 *   Inner shadow       -> box-shadow: inset x y blur spread color
 *   Layer blur         -> filter: blur(radius)
 *   Background blur    -> backdrop-filter: blur(radius)
 *   Several effects in one style -> comma-separated, in the same order as the Figma effects list
 *   Class name: "effect-" + Figma style name in kebab case (e.g. "Shadow/Card" -> .effect-shadow-card)
 */

/*
 * Glass — Figma GLASS effect on button type=secondary (364:2721, 364:2719, 364:2720). Owner request 2026-09-17.
 * Figma: frost (radius) 66.36, refraction 0.39, depth 9.90, dispersion 0.24, light angle -45°, light intensity 0.4.
 * CSS approximation (refraction, depth and dispersion bend the backdrop at the edges and have no CSS equivalent):
 *   frost -> backdrop-filter: blur(33.18px). Figma blur radius ≈ 2 × CSS blur, so 66.36 / 2. Unbound, no token.
 *   light -> 1px inset rim highlight from the top-left (-45°). Its strength was calibrated against the Figma
 *            render of each variant: with the 40% default fill the rim is clearly lit (White-opacity-50 top-left,
 *            White-opacity-25 bottom-right); hover (70% fill, stroke Black-opacity-35) shows a faint rim
 *            (White-opacity-10 top-left, White-opacity-5 bottom-right); disabled (90% fill) shows no light, so it uses frost only.
 */
:root {
  --effect-glass-frost: 33.18px;
  /* hover (70% fill): Figma rim is lit faintly, stronger from the top-left; calibrated to White-opacity-10 top-left, White-opacity-5 bottom-right */
  --effect-glass-light-dense:
    inset var(--spacing-1px) var(--spacing-1px) 0 0 var(--colors-base-white-opacity-white-opacity-10),
    inset calc(-1 * var(--spacing-1px)) calc(-1 * var(--spacing-1px)) 0 0
      var(--colors-base-white-opacity-white-opacity-5);
  /* no light, same shadow structure (two insets) so transitions between states interpolate */
  --effect-glass-light-none:
    inset var(--spacing-1px) var(--spacing-1px) 0 0 transparent,
    inset calc(-1 * var(--spacing-1px)) calc(-1 * var(--spacing-1px)) 0 0 transparent;
  --effect-glass-light:
    inset var(--spacing-1px) var(--spacing-1px) 0 0 var(--colors-base-white-opacity-white-opacity-50),
    inset calc(-1 * var(--spacing-1px)) calc(-1 * var(--spacing-1px)) 0 0
      var(--colors-base-white-opacity-white-opacity-25);
}

.effect-glass {
  -webkit-backdrop-filter: blur(var(--effect-glass-frost));
  backdrop-filter: blur(var(--effect-glass-frost));
}

/*
 * Header and menu overlay. None of these is a Figma effect style:
 * the sticky header is bg-light at 80% over a uniform 24px background blur (owner, 2026-09-19);
 * the menu backdrop is an 8px background blur behind Black-opacity-20, and the sheet uses Shadows/shadow-lg.
 */
:root {
  --effect-header-blur: 24px;
  --effect-menu-blur: 8px;
  --effect-shadow-lg: 0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03);
}

/* layout.css */
/*
 * Layout grid and breakpoints.
 *
 * Source: Figma layout grid on the desktop frame 06-Homepage -v1 (349:2155, 1440 wide), checked 2026-09-17.
 * The grid is not a Figma grid style and is not bound to variables.
 *   Columns 12 · Gutter 24 · Margin 80 · Alignment stretch · Content width at 1440: 1280
 *
 * Breakpoints (use exactly these values in every component, see docs/decisions.md):
 *   Desktop  default (no media query)   Figma frame 1440
 *   Tablet   @media (max-width: 1199px)  no Figma frame; built from docs/responsive-spec.md
 *   Mobile   @media (max-width: 767px)   no Figma frame; not built yet
 *
 * The desktop layout needs 1359px at minimum (priced data: 80 + 518 + 24 + 737), so the tablet rules start at
 * 1200 even though the tablet design target is 768–1024 (docs/responsive-spec.md).
 *
 * Between widths, Figma describes no behavior. The container is fluid: fixed margins, content width
 * shrinks below 1440 and is capped at 1280 above it. There is no clamp() and no fluid typography.
 */

:root {
  --grid-columns: 12;
  --grid-gutter: var(--spacing-24);
  --grid-margin: var(--spacing-80);
  --container-max: var(--spacing-1280);

  /* section rhythm: one step down per breakpoint on the spacing ladder (docs/responsive-system.md) */
  --section-rhythm: var(--spacing-120px);

  /* the sticky header: 12 + 44 (small button) + 12 on desktop, 12 + 32 (menu icon) + 12 below 1200 */
  --header-height: 68px;
}

/* Content container: 1280 max, centered, 80px side margins from the grid. */
.container {
  box-sizing: content-box;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Column grid: the Figma layout grid as CSS grid. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* Span utilities: number of grid columns an item covers. */
.span-1 {
  grid-column: span 1;
}
.span-2 {
  grid-column: span 2;
}
.span-3 {
  grid-column: span 3;
}
.span-4 {
  grid-column: span 4;
}
.span-5 {
  grid-column: span 5;
}
.span-6 {
  grid-column: span 6;
}
.span-7 {
  grid-column: span 7;
}
.span-8 {
  grid-column: span 8;
}
.span-9 {
  grid-column: span 9;
}
.span-10 {
  grid-column: span 10;
}
.span-11 {
  grid-column: span 11;
}
.span-12 {
  grid-column: span 12;
}
.span-full {
  grid-column: 1 / -1;
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  :root {
    --grid-margin: var(--spacing-32);
    --grid-gutter: var(--spacing-16);
    --section-rhythm: var(--spacing-64px);
    --header-height: 56px;
  }

  .grid {
    row-gap: var(--grid-gutter);
  }

  .grid > [class*='span-'] {
    grid-column: span 6;
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-margin: var(--spacing-16);
  }

  .grid > [class*='span-'] {
    grid-column: 1 / -1;
  }
}

/* Anchor targets (owner, 2026-10-01): a jump lands with the section title 48px from the top of the screen instead of
   behind the section's full top padding. The header hides on the way down (js/header.js), so its scroll-padding is
   taken back out as well. */
main > section[id] {
  scroll-margin-top: calc(var(--spacing-48px) - var(--section-rhythm) - var(--header-height));
}

/* one corner radius for every boxed control: buttons, inputs, tiles, option cards (owner, 2026-10-01) */
:root {
  --radius-control: var(--radius-16);
}

/* components/article-card.css */
/*
 * article-card — Figma frames "Article" 349:2379 (For operators) and 349:2390 (For model builders).
 * 628 × 645.2, radius radius-24, clip. Photo fills the card. Top gradient 175 tall and bottom gradient 153 tall,
 * #1A1A17 (Colors/Base/black) from the edge inwards:
 *   operators:      top 70% -> 60% (50%) -> 0,  bottom 100% -> 70% (50%) -> 0
 *   model builders: top 100% -> 60% (50%) -> 0, bottom 100% -> 60% (50%) -> 0
 * Header: padding 32 / 24 / 0, gap 12 (spacing-12), centered: title Display md/Regular, subtitle Text md/Medium, white.
 * Footer: padding 24 (Spacing/24px), full-width primary button at the bottom.
 * Progressive background blur (owner decision 2026-09-17, Figma "Background blur / Progressive, start 48, end 0"):
 * one layer per edge, over the same 175 / 153 bands as the gradients. CSS has no progressive blur, so each layer
 * stacks three masked backdrop-filters (48 / 24 / 12) that fade towards the middle of the card.
 * Hover (owner decision, not in Figma): the photo scales 1 -> 1.1 over --motion-duration-media (800ms,
 * easeOutExpo).
 */

.article-card {
  --article-card-top: var(--colors-base-black-opacity-black-opacity-70);
  --article-card-top-mid: var(--colors-base-black-opacity-black-opacity-60);
  --article-card-bottom: var(--colors-base-black);
  --article-card-bottom-mid: var(--colors-base-black-opacity-black-opacity-70);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-width: 0;
  /* Figma: 628 × 645.2 (unbound, no token) */
  aspect-ratio: 628 / 645.2;
  border-radius: var(--radius-24);
  color: var(--colors-base-white);
  isolation: isolate;
}

.article-card > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.article-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-duration-media) var(--motion-ease-media);
}

.article-card:hover .article-card__image,
.article-card--hover .article-card__image {
  transform: scale(1.1);
}

/* progressive blur: three stacked masked backdrop-filters per edge */
.article-card__blur {
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.article-card__blur::before,
.article-card__blur::after {
  content: '';
  position: absolute;
  inset: 0;
}

.article-card__blur::before {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.article-card__blur::after {
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
}

.article-card__blur--top {
  top: 0;
  height: 175px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
}

.article-card__blur--top::before {
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 65%);
}

.article-card__blur--top::after {
  mask-image: linear-gradient(to bottom, #000 0%, transparent 40%);
}

.article-card__blur--bottom {
  bottom: 0;
  height: 153px;
  mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
}

.article-card__blur--bottom::before {
  mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 65%);
}

.article-card__blur--bottom::after {
  mask-image: linear-gradient(to top, #000 0%, transparent 40%);
}

/* gradients: Figma rectangles 175 (top) and 153 (bottom), unbound heights */
.article-card::before,
.article-card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
}

.article-card::before {
  top: 0;
  height: 175px;
  background: linear-gradient(
    to bottom,
    var(--article-card-top) 0%,
    var(--article-card-top-mid) 50%,
    var(--colors-base-black-opacity-black-opacity-0) 100%
  );
}

.article-card::after {
  bottom: 0;
  height: 153px;
  background: linear-gradient(
    to top,
    var(--article-card-bottom) 0%,
    var(--article-card-bottom-mid) 50%,
    var(--colors-base-black-opacity-black-opacity-0) 100%
  );
}

.article-card--model-builders {
  --article-card-top: var(--colors-base-black);
  --article-card-bottom-mid: var(--colors-base-black-opacity-black-opacity-60);
}

.article-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-32px) var(--spacing-24px) 0;
  text-align: center;
}

.article-card__footer {
  display: flex;
  padding: var(--spacing-24px);
}

.article-card__footer .button {
  flex: 1 1 0;
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 420:3952: 344 × 481, header padding 24 / 16, gap 6, title Display sm, footer padding 16 */
  .article-card {
    aspect-ratio: 344 / 481;
  }

  .article-card__header {
    gap: var(--spacing-6px);
    padding: var(--spacing-24px) var(--spacing-16px) 0;
  }

  .article-card__header h2 {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }

  .article-card__footer {
    padding: var(--spacing-16px);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 421:4756: 343 × 412 */
  .article-card {
    aspect-ratio: 343 / 412;
  }
}

/* components/blog-card.css */
/*
 * blog-card — Figma frames 349:2413 / 349:2422 / 349:2431 (Recent news).
 * Vertical, gap 32 (Spacing/32px), Fill width. Image 410.67 × 330, radius 16 (gradient and inner shadow are baked
 * into the image files). Text block vertical gap 24 (Spacing/24px): title Display xs/Regular Colors/Base/black and
 * the meta row (category Caption 12px Orange/500, 6 × 6 dot Colors/Base/black at 20%, date Caption 12px
 * neutral/dark-gray, gap 8).
 * The meta row sits ABOVE the title, as in Figma (owner decision 2026-09-17, overrides the no-eyebrow rule here:
 * category and date are metadata, not an eyebrow label).
 * Hover (owner decision, not in Figma): the image scales 1 -> 1.1 over --motion-duration-media (800ms, easeOutExpo)
 * and an underline fades in under the title, which stays Colors/Base/black (owner decision 2026-09-18, replacing
 * the earlier orange title). The underline is a real text-decoration, so it follows every line of the title and
 * the descenders, like the reference the owner sent.
 */

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32px);
  min-width: 0;
}

/* the media wrapper clips the zoom */
.blog-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-16);
}

.blog-card__image {
  /* Figma: 410.67 × 330 image frame (unbound, no token) */
  display: block;
  aspect-ratio: 410.67 / 330;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--motion-duration-media) var(--motion-ease-media);
}

.blog-card:hover .blog-card__image,
.blog-card--hover .blog-card__image {
  transform: scale(1.1);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24px);
}

.blog-card__title {
  color: var(--colors-base-black);
}

.blog-card__link {
  /* not bound in Figma: the rule sits at 5% of the font size, 8% below the baseline */
  --blog-card-underline: 0.05em;
  --blog-card-underline-offset: 0.08em;

  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--blog-card-underline);
  text-underline-offset: var(--blog-card-underline-offset);
  transition: text-decoration-color var(--motion-duration-hover) var(--motion-ease-out);
}

.blog-card:hover .blog-card__link,
.blog-card--hover .blog-card__link {
  text-decoration-color: currentColor;
}

/* whole card clickable through the title link */
.blog-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
}

.blog-card__link:focus-visible {
  outline: none;
}

.blog-card:has(.blog-card__link:focus-visible) {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-4px);
  border-radius: var(--radius-16);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8px);
}

.blog-card__category {
  color: var(--colors-orange-500);
}

.blog-card__dot {
  width: var(--spacing-6px);
  height: var(--spacing-6px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-black);
  opacity: var(--opacity-20);
}

.blog-card__date {
  color: var(--library-neutral-dark-gray);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2774: image 224 × 171.42, 24 to the text, 16 between the meta row and the title, title underlined */
  .blog-card {
    gap: var(--spacing-24px);
  }

  .blog-card__image {
    aspect-ratio: 224 / 171.42;
  }

  .blog-card__body {
    gap: var(--spacing-16px);
  }

  .blog-card__link {
    text-decoration-color: currentColor;
  }
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:3228: image 335 × 240, title Newsreader Medium 20 / 24 (see typography.css) */
  .blog-card__image {
    aspect-ratio: 335 / 240;
  }

  /* Display xxs/Medium, see typography.css */
  .blog-card__title {
    font-family: var(--font-family-title), var(--font-fallback-serif);
    font-optical-sizing: auto;
    font-size: var(--font-size-20px);
    font-weight: var(--font-weight-medium-500);
    letter-spacing: var(--font-letter-spacing--1);
    line-height: var(--spacing-24px);
  }
}

/*
 * placeholder (Figma "blog-card/placeholder" 429:4833, owner 2026-09-20): stands in for a missing post under an
 * article while there are fewer than four of them, so the row of three is never short. The media is the owner's
 * export (assets/blog/blog-soon.png), which already has the bg-dark surface, the 1px Black-opacity-20 stroke and
 * the corner radius in it; the card has no link and no hover, and the eyebrow reads "Publishing soon".
 */
/* Same corner as every other card: the radius and the 1px stroke are CSS, so they stay 16 and 1 at any width
   (owner, 2026-09-20). The export carries its own baked radius and stroke, so the image is blown up a little and
   clipped by this box — what is left inside is the drawing on the bg-dark surface. */
.blog-card__placeholder {
  display: block;
  overflow: hidden;
  aspect-ratio: 410.67 / 330;
  width: 100%;
  border: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-20);
  border-radius: var(--radius-16);
  background-color: var(--color-surface-card);
}

.blog-card__placeholder-image {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.06);
  object-fit: cover;
}

.blog-card--placeholder .blog-card__title {
  color: var(--colors-base-black);
}

/* components/button.css */
/*
 * button — Figma component set 364:2789 (components page)
 * Variants: type = primary | secondary × state = default | hover | disabled
 *   primary:   default 364:2657, hover 364:2656, disabled 364:2655
 *   secondary: default 364:2721, hover 364:2719, disabled 364:2720
 * Plus .button--small: "button/primary-small" (364:2876, used in the header). It is an orphaned component
 * outside the set with a default state only. Owner decision 2026-09-17: modifier with the same states as the
 * regular button (hover and disabled fills from its type); its own stroke (Black-opacity-5) is kept on hover.
 *
 * Layout: horizontal auto layout, Hug × Hug, padding 16 / 20 (Spacing/16px, Spacing/20px), gap 6,
 * main + cross CENTER, radius radius-16, stroke 1px INSIDE -> inset box-shadow.
 * Text: Text md/SemiBold, Colors/Base/black. Icon: 18 × 18 (src/partials/icons/dots.svg, currentColor).
 *
 * Colors (tokens as bound in Figma):
 *   primary    default Yellow/500 + White-opacity-10 stroke · hover Yellow/600 · disabled Neutral/300 + Black-opacity-5
 *   secondary  default White-opacity-40 + Black-opacity-20 · hover White-opacity-70 + Black-opacity-35 (both updated in Figma 2026-09-17)
 *              disabled White 90% (unbound in Figma, same value as White-opacity-90) + Black-opacity-10,
 *              label and icon at 50% opacity
 *   secondary glass: Figma GLASS -> frost blur + rim light on default (effects.css, owner request 2026-09-17)
 *
 * Icon animation on hover (owner decision 2026-09-17, not in Figma): the three dots fade out and back in one after
 * another, top to bottom, 600ms for the whole run (--motion-duration-icon); on hover out the same sequence plays
 * backwards. It is driven by
 * one registered custom property, --button-dots, that transitions 0 -> 1 on hover, so reversing it needs no JS.
 * Each dot owns a 60% wide window of that progress, staggered by 20%: it fades out over the first half of its
 * window and back in over the second (600ms x 0.6 = 360ms per dot, 120ms apart).
 *
 * Not implemented / not in Figma (see docs/figma-issues.md):
 *   - active/pressed and focus states; focus-visible uses the blue "selected" color for accessibility
 */

@property --button-dots {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.button {
  --button-dots: 0;
  /* per-dot window inside the progress: 0.6 wide, 0.2 apart, each half fade-out, half fade-in */
  --button-dot-window: 0.3;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6px);
  padding: var(--spacing-16px) var(--spacing-20px);
  border-radius: var(--radius-control);
  background-color: var(--button-fill);
  /* optional glass light first (drawn above the stroke), then the 1px inside stroke */
  box-shadow:
    var(--button-light, var(--effect-glass-light-none)),
    inset 0 0 0 var(--spacing-1px) var(--button-stroke);
  color: var(--colors-base-black);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    box-shadow var(--motion-duration-hover) var(--motion-ease-out),
    --button-dots var(--motion-duration-icon) linear;
}

.button:not(:disabled, [aria-disabled='true'], .button--disabled):hover,
.button.button--hover {
  --button-dots: 1;
}

/* dot i fades out from --button-dot-start to +window, then back in over the next window */
.button__icon circle {
  --button-dot-start: 0;

  opacity: max(
    clamp(
      0,
      calc((var(--button-dot-start) + var(--button-dot-window) - var(--button-dots)) / var(--button-dot-window)),
      1
    ),
    clamp(
      0,
      calc((var(--button-dots) - var(--button-dot-start) - var(--button-dot-window)) / var(--button-dot-window)),
      1
    )
  );
}

.button__icon circle:nth-child(2) {
  --button-dot-start: 0.2;
}

.button__icon circle:nth-child(3) {
  --button-dot-start: 0.4;
}

.button__label {
  flex-shrink: 0;
}

.button__icon {
  flex-shrink: 0;
}

.button:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-2px);
}

/* Disabled: native [disabled], aria-disabled links, or the Figma variant class */
.button:is(:disabled, [aria-disabled='true'], .button--disabled) {
  cursor: default;
  pointer-events: none;
}

/* type = primary */
.button--primary {
  --button-fill: var(--colors-yellow-500);
  --button-stroke: var(--colors-base-white-opacity-white-opacity-10);
}

.button--primary:not(:disabled, [aria-disabled='true'], .button--disabled):hover,
.button--primary.button--hover {
  --button-fill: var(--colors-yellow-600);
}

.button--primary:is(:disabled, [aria-disabled='true'], .button--disabled) {
  --button-fill: var(--colors-neutral-300);
  --button-stroke: var(--colors-base-black-opacity-black-opacity-5);
}

/* type = secondary */
.button--secondary {
  --button-fill: var(--colors-base-white-opacity-white-opacity-40);
  --button-stroke: var(--colors-base-black-opacity-black-opacity-20);
  --button-light: var(--effect-glass-light);

  -webkit-backdrop-filter: blur(var(--effect-glass-frost));
  backdrop-filter: blur(var(--effect-glass-frost));
}

.button--secondary:not(:disabled, [aria-disabled='true'], .button--disabled):hover,
.button--secondary.button--hover {
  --button-fill: var(--colors-base-white-opacity-white-opacity-70);
  --button-stroke: var(--colors-base-black-opacity-black-opacity-35);
  --button-light: var(--effect-glass-light-dense);
}

.button--secondary:is(:disabled, [aria-disabled='true'], .button--disabled) {
  --button-fill: var(--colors-base-white-opacity-white-opacity-90);
  --button-stroke: var(--colors-base-black-opacity-black-opacity-10);
  --button-light: var(--effect-glass-light-none);
}

.button--secondary:is(:disabled, [aria-disabled='true'], .button--disabled) :is(.button__label, .button__icon) {
  opacity: var(--opacity-50);
}

/* button/primary-small (364:2876): Hug × Fixed 44, radius-12, stroke Black-opacity-5, no icon */
.button--small {
  /* Figma: height Fixed 44, not bound to a variable and no 44 token */
  --button-small-height: 44px;
  --button-stroke: var(--colors-base-black-opacity-black-opacity-5);

  height: var(--button-small-height);
  border-radius: var(--radius-control);
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Owner, 2026-09-19: every button is 52 tall on mobile (no token for 52) */
  .button {
    height: 52px;
    padding-block: 0;
  }
}

/* Owner (2026-10-01): wherever two buttons sit together they stay on one row, phones included. Below 768 each
   takes half the width, with tighter padding and a label that may wrap to two centred lines. */
@media (max-width: 767px) {
  .hero__actions,
  .cta__actions,
  .paid__actions,
  .header__menu-cta {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  .hero__actions .button,
  .cta__actions .button,
  .paid__actions .button,
  .header__menu-cta .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--spacing-12px);
    white-space: normal;
    text-align: center;
  }

  .hero__actions .button .button__label,
  .cta__actions .button .button__label,
  .paid__actions .button .button__label,
  .header__menu-cta .button .button__label {
    flex-shrink: 1;
    min-width: 0;
    /* 14px: a two-line label ("I want to earn / on my data") sits inside the 52px button with room */
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
  }
}

/* components/check-list.css */
/*
 * check-list — Figma "Check items" 429:4657 (news article). Every bullet list in an article is one of these.
 * Rows 16 apart, icon 24 and text 12 to the right, text Text lg/SemiBold.
 * The icon is drawn here rather than exported: a 24 circle in Colors/Yellow/500 with the shared check mark
 * (partials/icons/check.svg is a stroke-only path, so it is inlined as a mask to keep one source for the shape).
 */

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12px);
}

.check-list__icon {
  display: block;
  flex-shrink: 0;
  width: var(--spacing-24px);
  height: var(--spacing-24px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-yellow-500);
  /* the check mark of partials/icons/check.svg, 12 × 9 in the middle of the circle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'%3E%3Cpath d='M17 1L6 12L1 7' stroke='%231a1a17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
}

.check-list__text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--colors-base-black);
}

/* Mobile, 320–767 (no Figma frame): the text follows the article body down to Text md (owner, 2026-09-20). */
@media (max-width: 767px) {
  .check-list__text {
    font-size: var(--typography-text-md-semi-bold-font-size);
    letter-spacing: var(--typography-text-md-semi-bold-letter-spacing);
    line-height: var(--typography-text-md-semi-bold-line-height);
  }
}

/* components/faq.css */
/*
 * faq — Figma 467:4073 (operators). Native <details>, one open by default. Title Display lg centred, list 846 wide,
 * gap 16. Item: rgb(242 240 233 / 0.7), hairline, radius 16, padding 16 16 16 24. Question Text xl/Medium; toggle
 * 48 circle, white, hairline (open: Orange/200 stroke, orange minus; closed: black plus). Answer Text lg/Medium at
 * Black 70%, 729 wide, 8 below the question, padding-bottom 16.
 */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-48px);
  padding-block: var(--section-rhythm);
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  width: 846px;
  max-width: 100%;
  text-align: left;
}

.faq-item {
  padding: var(--spacing-16px) var(--spacing-16px) var(--spacing-16px) var(--spacing-24px);
  border-radius: var(--radius-16);
  background-color: rgb(242 240 233 / 0.7);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16px);
  color: var(--colors-base-black);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__toggle {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-9999);
  background: var(--colors-base-white) no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.29v11.42M2.29 8h11.42' stroke='%231a1a17' stroke-width='2.06' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.faq-item[open] .faq-item__toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.29 8h11.42' stroke='%23f0522c' stroke-width='2.06' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-orange-200);
}

.faq-item__question:hover .faq-item__toggle {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-30);
}

.faq-item__question:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-4px);
  border-radius: var(--radius-8);
}

.faq-item__answer {
  max-width: 729px;
  margin: var(--spacing-8px) 0 0;
  padding-bottom: var(--spacing-16px);
  color: var(--colors-base-black-opacity-black-opacity-70);
}

@media (max-width: 767px) {
  .faq-item {
    padding-left: var(--spacing-16px);
  }
}

/* owner (2026-10-01): straight after Recent news, one section rhythm between them instead of two */
.news + .faq {
  padding-top: 0;
}

/* components/footer.css */
/*
 * footer — Figma component 365:3010 (components page)
 *
 * footer: vertical, Fixed 1440 (full width) × Hug, padding 120 / 80 / 32 (Spacing/120px, spacing-80, spacing-32;
 *   padding-top updated in Figma 2026-09-17, was 96),
 *   fill Colors/Base/black, clip content. Content width 1280 = .container.
 * Footer Wrapper (365:2962): vertical, gap 160 (updated in Figma 2026-09-17, was 140; unbound but equal to
 *   spacing-160). Total height 120 + 366 + 32 = 518.
 *   links (365:2963): horizontal, SPACE_BETWEEN, cross MIN.
 *     ft-column (365:2964): logo 101.75 × 31.8.
 *     links (365:2969): horizontal, Fixed 849, gap Spacing/24px.
 *       2 × links column (Fill): vertical, gap Spacing/24px, label Text sm/SemiBold white 50%,
 *         list vertical gap spacing-16, Text md/Medium white.
 *       Newsletter (365:2980): vertical, Fixed 386, gap Spacing/24px; label "Stay up to date"
 *         (no text style in Figma: Geist SemiBold 14 / 160% / -1% uppercase = Text sm/SemiBold + uppercase),
 *         body vertical gap Spacing/16px: description Text md/Medium white + subscribe-field.
 *   Footer Information > Subsection > Content (365:2994): horizontal SPACE_BETWEEN, cross CENTER,
 *     padding-top 32, top stroke 1px INSIDE White-opacity-5; copyright Text md/Medium white 50%;
 *     legal links horizontal gap 12, Text md/Medium white.
 *
 * Link hover (owner decision 2026-09-17, not in Figma): color Colors/Base/white -> Colors/Yellow/500.
 * Not in Figma (see docs/figma-issues.md): link focus state, unbound values below.
 */

.footer {
  padding-block: var(--spacing-120px) var(--spacing-32);
  overflow: hidden;
  background-color: var(--colors-base-black);
  color: var(--colors-base-white);
}

.footer__wrapper {
  /* Figma: unbound values (links block 849, newsletter 386, ft-logo 101.75 have no token; the 160 gap is unbound
     but equals spacing-160) */
  --footer-wrapper-gap: var(--spacing-160);
  --footer-columns-width: 849px;
  --footer-newsletter-width: 386px;
  --footer-logo-width: 101.75px;

  display: flex;
  flex-direction: column;
  gap: var(--footer-wrapper-gap);
}

.footer__links {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer__brand {
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-4);
}

.footer__logo {
  width: var(--footer-logo-width);
  height: auto;
  color: var(--colors-base-white);
}

.footer__columns {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: var(--spacing-24px);
  width: var(--footer-columns-width);
}

.footer__column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24px);
  min-width: 0;
}

.footer__label {
  color: var(--colors-base-white-opacity-white-opacity-50);
}

.footer__label--uppercase {
  text-transform: uppercase;
}

.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.footer__link {
  color: var(--colors-base-white);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-4);
  transition: color var(--motion-duration-hover) var(--motion-ease-out);
}

/* hover (not in Figma, owner decision 2026-09-17): white -> Yellow/500, same motion as every hover */
.footer__link:hover,
.footer__link--hover {
  color: var(--colors-yellow-500);
}

.footer__link:focus-visible,
.footer__brand:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-4px);
}

.footer__newsletter {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--spacing-24px);
  width: var(--footer-newsletter-width);
}

.footer__newsletter-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Figma: padding-top 32 and gap 12 are unbound; values equal to spacing-32 and spacing-12 */
  padding-top: var(--spacing-32px);
  box-shadow: inset 0 var(--spacing-1px) 0 0 var(--colors-base-white-opacity-white-opacity-5);
}

.footer__copyright {
  color: var(--colors-base-white-opacity-white-opacity-50);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--spacing-12px);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2832: padding 64 / 40 / 24, wrapper gap 96; logo row, the two link columns, then the newsletter */
  .footer {
    padding-block: var(--spacing-64px) var(--spacing-24px);
  }

  .footer__wrapper {
    --footer-wrapper-gap: var(--spacing-96px);
  }

  .footer__links {
    flex-direction: column;
    gap: var(--spacing-48px);
  }

  .footer__columns {
    flex-wrap: wrap;
    row-gap: var(--spacing-48px);
    column-gap: var(--spacing-24px);
    width: 100%;
  }

  .footer__column {
    flex: 1 1 var(--spacing-200px);
  }

  .footer__newsletter {
    width: 100%;
    max-width: var(--footer-newsletter-width);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:3286: padding 64 / 20 / 16, wrapper gap 64, everything in one column */
  .footer {
    padding-block: var(--spacing-64px) var(--spacing-16px);
  }

  .footer__wrapper {
    --footer-wrapper-gap: var(--spacing-64px);
  }

  .footer__links {
    gap: var(--spacing-40px);
  }

  .footer__columns {
    row-gap: var(--spacing-32px);
  }

  /* Figma 419:3297: 16 between a label and its list, and inside the newsletter block */
  .footer__column,
  .footer__newsletter {
    gap: var(--spacing-16px);
  }

  .footer__column {
    flex-basis: 100%;
  }
}

/* components/header.css */
/*
 * header — Figma component 364:2833 (components page)
 *
 * Layout: horizontal auto layout, Fixed 1440 (full width) × Hug, padding 12 / 24 (Spacing/12px, Spacing/24px),
 * fill Colors/bg/bg-light. Container: Fill × Hug, SPACE_BETWEEN, cross CENTER (the 472 gap is ignored by
 * space-between in Figma and is not applied). Logo: 74 × 23.13 (partials/logo.svg, Colors/Base/black). Menu: horizontal, gap 0,
 * four menu-link instances. CTA: button/primary-small -> .button.button--primary.button--small.
 *
 * Not in Figma: active page state. Sticky: the bar stays at the top of the viewport at every width and its fill is
 * bg-light at 80% over a 24px background blur (owner, 2026-09-19); its height is published as --header-height so
 * anchors can scroll clear of it. It slides out of the viewport while the page scrolls down and comes back on the
 * way up (src/js/header.js toggles .header--hidden).
 *
 * Below 1200 (Figma: tablet 419:2552, mobile 419:2875, mobile-menu-open 421:4879): the bar is 56 tall and holds
 * only the logo and a 32 × 32 menu icon; the links and the CTA live in a sheet that drops from under the bar,
 * rounded at the bottom, with a 1px Black-opacity-20 top stroke and the Shadows/shadow-lg effect. While it is open
 * a Black-opacity-20 layer with an 8px backdrop blur covers the page and the page does not scroll.
 * src/js/menu.js toggles .header--open.
 */

.header {
  /* the height itself comes from the content; --header-height (layout.css) mirrors it for scroll-padding */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-12px) var(--spacing-24px);
  /* bg-light at 80% over a 24px background blur, so the page shows through the bar (owner, 2026-09-19) */
  background-color: color-mix(in srgb, var(--colors-bg-bg-light) 80%, transparent);
  -webkit-backdrop-filter: blur(var(--effect-header-blur));
  backdrop-filter: blur(var(--effect-header-blur));
  transition: transform var(--motion-duration-hover) var(--motion-ease-out);
}

/* scrolling down moves the bar out of the viewport, scrolling up brings it back (src/js/header.js) */
.header--hidden {
  transform: translateY(-100%);
}

.header__container {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.header__logo {
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-4);
}

.header__logo-image {
  /* Figma: logo frame Fixed 74 × 23.13 (unbound, no token) = viewBox of the wordmark */
  width: 74px;
  height: auto;
  color: var(--colors-base-black);
}

.header__logo:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-4px);
}

.header__menu-list {
  display: flex;
  align-items: center;
  /* owner (2026-09-18): 24px gap on top of the 12px link padding, so items sit 48 apart instead of 24 */
  gap: var(--spacing-24px);
}

/* the menu button, its backdrop and the CTA inside the open menu exist only below 1200 */
.header__menu-button,
.header__menu-cta,
.header__backdrop {
  display: none;
}

/* Desktop (v2): the menu sits at the exact centre of the bar, whatever the widths of the logo and the actions */
@media (min-width: 1200px) {
  .header__container {
    position: relative;
  }

  .header__menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .header__menu-list {
    gap: var(--spacing-48px);
  }
}

/* Tablet and mobile, below 1200 (Figma 419:2552 / 419:2875 / 421:4879). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* the bar keeps the logo and the menu button: 12 + 32 + 12 = 56 tall */
  .header__actions {
    display: none;
  }

  .header__logo {
    margin-inline-end: auto;
  }

  /* Sits under the bar (which is why it is a sibling of .header, not a child: the bar's own backdrop-filter
     would otherwise become the backdrop root and this blur would have nothing to sample). */
  .header__backdrop {
    display: block;
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: var(--colors-base-black-opacity-black-opacity-20);
    -webkit-backdrop-filter: blur(var(--effect-menu-blur));
    backdrop-filter: blur(var(--effect-menu-blur));
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--motion-duration-hover) var(--motion-ease-out),
      visibility 0s linear var(--motion-duration-hover);
  }

  .header--open + .header__backdrop {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  /* No transitions while the window is being resized (src/js/menu.js): crossing 1200 downwards changes the sheet
     from the desktop nav to its closed state, which the opacity transition would otherwise play as a fade-out. */
  .header--no-transition,
  .header--no-transition .header__menu,
  .header--no-transition + .header__backdrop {
    transition: none;
  }

  /* the sheet */
  .header__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-20);
    border-radius: 0 0 var(--radius-24) var(--radius-24);
    background-color: var(--colors-bg-bg-light);
    box-shadow: var(--effect-shadow-lg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(-1 * var(--spacing-8px)));
    transition:
      opacity var(--motion-duration-hover) var(--motion-ease-out),
      transform var(--motion-duration-hover) var(--motion-ease-out),
      visibility 0s linear var(--motion-duration-hover);
  }

  .header--open .header__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  /* Figma 421:8097: the list has 24 above and below, each row 12 / 16.
     Scoped through .header__menu because base.css resets ul[role='list'] padding with higher specificity. */
  .header__menu .header__menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-8px) var(--spacing-16px) 0;
  }

  .header__menu .header__menu-list li + li {
    border-top: var(--spacing-1px) solid var(--color-hairline);
  }

  /* no hover state inside the sheet (owner, 2026-09-19) */
  .header__menu .menu-link:hover,
  .header__menu .menu-link--hover {
    background-color: transparent;
  }

  .header__menu .menu-link {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: var(--spacing-16px) 0;
    border-radius: 0;
    font-size: var(--typography-text-lg-medium-font-size);
    font-weight: var(--typography-text-lg-medium-font-weight);
    letter-spacing: var(--typography-text-lg-medium-letter-spacing);
    line-height: var(--typography-text-lg-medium-line-height);
  }

  .header__menu-cta {
    display: flex;
    gap: var(--spacing-8px);
    padding: var(--spacing-16px) var(--spacing-16px) var(--spacing-20px);
  }

  .header__menu-cta .button {
    justify-content: center;
    width: 100%;
  }

  .header__menu-button {
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--spacing-32px);
    height: var(--spacing-32px);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--colors-base-black);
    cursor: pointer;
  }

  /* the icon is 32 as drawn, with a 44 hit area around it (WCAG target size) */
  .header__menu-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .header__menu-button:focus-visible {
    outline: var(--spacing-2px) solid var(--colors-blue-500);
    outline-offset: var(--spacing-2px);
  }

  .header__menu-icon {
    width: var(--spacing-32px);
    height: var(--spacing-32px);
  }

  /* burger -> cross: each line turns around its own centre and meets the other at y 11.5 */
  .menu-icon__line {
    transform-box: view-box;
    transition: transform var(--motion-duration-hover) var(--motion-ease-out);
  }

  .menu-icon__line--top {
    transform-origin: 12px 8.5px;
  }

  .menu-icon__line--bottom {
    transform-origin: 12px 14.5px;
  }

  .header--open .menu-icon__line--top {
    transform: translateY(3px) rotate(45deg);
  }

  .header--open .menu-icon__line--bottom {
    transform: translateY(-3px) rotate(-45deg);
  }
}

/* Mobile, 320–767 (Figma 419:2875): the bar keeps 16 side padding. */
@media (max-width: 767px) {
  .header {
    padding-inline: var(--spacing-16px);
  }
}

/* contact flow: logo and a single text link, no menu. Same bar height as the full header (44px small button). */
.header--minimal .header__container {
  justify-content: space-between;
  min-height: var(--button-small-height, 44px);
}

.header__home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8px);
  color: var(--colors-base-black);
  text-decoration: none;
  transition: opacity var(--motion-duration-hover) var(--motion-ease-out);
}

.header__home-link:hover {
  opacity: 0.6;
}

/* desktop only (below 1200 the menu sheet carries both): "Book a call" text link, then Get an estimate */
@media (min-width: 1200px) {
  .header__actions {
    display: flex;
  }
}

.header__actions {
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-24px);
}

.header__text-link {
  color: var(--colors-base-black);
  text-decoration: none;
  transition: opacity var(--motion-duration-hover) var(--motion-ease-out);
}

.header__text-link:hover {
  opacity: 0.6;
}

/* components/horizontal-tabs.css */
/*
 * horizontal-tabs — Figma 429:3391 ("Horizontal tabs", news page). Topic filter above the card list.
 * Row of _Tab button base 32 tall, gap spacing-lg (12), each tab padding-inline spacing-xs (4) with the label
 * (Caption 12px, uppercase) at the top; the row sits on a 1px Black-opacity-10 bottom line (drawn inside the 32,
 * so the row stays 32 tall). Figma binds a remote #e4e7ec there; the owner confirmed on 2026-09-20 that this was
 * a mistake and the line is the Arloh hairline, Black-opacity-10.
 * Active tab Colors/Base/black, the rest Black-opacity-40 (the only difference between the states in Figma —
 * there is no underline indicator). Hover on an inactive tab is not in Figma: it goes to black over
 * --motion-duration-hover, like the other text hovers.
 * Behaviour lives in src/js/topic-filter.js: buttons in a group, aria-pressed on the active one.
 */

.horizontal-tabs {
  display: flex;
  gap: var(--library-spacing-lg);
  width: 100%;
  /* the line is drawn inside the 32, as in Figma, so it does not add to the height */
  box-shadow: inset 0 calc(-1 * var(--spacing-1px)) 0 0 var(--colors-base-black-opacity-black-opacity-10);
}

.horizontal-tabs__tab {
  /* Figma: the label sits 2 from the top of the 32 tall tab, the rest is the space above the line */
  display: flex;
  align-items: flex-start;
  gap: var(--library-spacing-md);
  height: var(--spacing-32px);
  padding: var(--spacing-2px) var(--library-spacing-xs) 0;
  border: 0;
  background: none;
  color: var(--colors-base-black-opacity-black-opacity-40);
  cursor: pointer;
  transition: color var(--motion-duration-hover) var(--motion-ease-out);
}

.horizontal-tabs__tab:hover,
.horizontal-tabs__tab--hover {
  color: var(--colors-base-black);
}

.horizontal-tabs__tab[aria-pressed='true'] {
  color: var(--colors-base-black);
}

/* components/icon-wrapper.css */
/*
 * icon-wrapper — Figma frames 349:2245 / 349:2251 / 349:2258 (operators section list).
 * Vertical, padding 24 (Spacing/24px), gap 12 (Spacing/12px), main + cross CENTER, Fill width, height 180,
 * radius radius-24, stroke 1px INSIDE Black-opacity-20 included in layout. Icon 96 × 96, label Text lg/SemiBold.
 */

.icon-wrapper {
  /* Figma: height 180 is unbound, no token */
  --icon-wrapper-height: 180px;

  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12px);
  min-width: 0;
  height: var(--icon-wrapper-height);
  padding: var(--spacing-24px);
  border: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-20);
  border-radius: var(--radius-24);
  color: var(--colors-base-black);
  text-align: center;
}

.icon-wrapper__icon {
  flex-shrink: 0;
  width: var(--spacing-96px);
  height: var(--spacing-96px);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* owner (2026-10-01): three across in one row; icon over label, smaller, height from the content */
  .icon-wrapper {
    gap: var(--spacing-8px);
    height: auto;
    padding: var(--spacing-20px) var(--spacing-12px);
    border-radius: var(--radius-16);
  }

  .icon-wrapper__icon {
    width: 72px;
    height: 72px;
  }
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 421:4098: the same tile with 8 above and below */
  .icon-wrapper {
    padding: var(--spacing-16px) var(--spacing-4px);
  }

  .icon-wrapper__icon {
    width: 48px;
    height: 48px;
  }

  .icon-wrapper span {
    /* 13px keeps "Post-Training" on one line in a 101px tile (360 phone) */
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
  }
}

/* components/menu-link.css */
/*
 * menu-link — Figma component set 361:2607 (components page)
 * Variants: Property 1 = default (361:2605) | hover (361:2606)
 *
 * Layout: horizontal auto layout, Hug × Fixed 38, padding 12 (spacing-12 / Spacing/12px),
 * main + cross CENTER, radius radius-9999. Text: Text md/Medium, Colors/Base/black.
 * Hover: fill Colors/Neutral/100 (as bound in Figma).
 *
 * Not in Figma (see docs/figma-issues.md): active/current page, pressed, focus. focus-visible is an
 * accessibility requirement and uses the blue "selected" color.
 */

.menu-link {
  /* Figma: height Fixed 38, not bound to a variable and no 38 token */
  --menu-link-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--menu-link-height);
  padding: var(--spacing-12px) var(--spacing-12);
  border-radius: var(--radius-9999);
  color: var(--colors-base-black);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-out);
}

.menu-link:hover,
.menu-link--hover {
  background-color: var(--colors-neutral-100);
}

.menu-link:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-2px);
}

/* components/panel.css */
/*
 * panel — surface card shared by three homepage frames (not a Figma component; same fill, stroke and radius):
 *   hero container 349:2176 (radius 16, inner glow), tab-column 349:2269 (radius 24), cta-wrapper 349:2441 (radius 16)
 * Fill Colors/bg/bg-dark (--color-surface-card), stroke 1px INSIDE Black-opacity-10 (--color-hairline, not in layout).
 * Glow (hero only): Figma INNER_SHADOW r24 White-opacity-20 + INNER_SHADOW r54 spread 7 White-opacity-10.
 */

.panel {
  --panel-glow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent;

  position: relative;
  border-radius: var(--radius-16);
  background-color: var(--color-surface-card);
  box-shadow:
    inset 0 0 0 var(--spacing-1px) var(--color-hairline),
    var(--panel-glow);
}

.panel--radius-24 {
  border-radius: var(--radius-24);
}

.panel--glow {
  /* Figma: inner shadow blur 54 and spread 7 are unbound, no tokens */
  --panel-glow:
    inset 0 0 var(--spacing-24px) 0 var(--colors-base-white-opacity-white-opacity-20),
    inset 0 0 54px 7px var(--colors-base-white-opacity-white-opacity-10);
}

/* components/quote.css */
/*
 * quote — Figma "quote-compnent" 429:4782 (news article). Used only when a post actually has a quote
 * (owner, 2026-09-20): a 2px Orange/500 rule on the left, text 20 to the right, quote Display sm/Regular,
 * attribution Text lg/Medium at Black-opacity-70, 32 under the quote.
 */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32px);
  margin: 0;
  padding-left: var(--spacing-20px);
  border-left: var(--spacing-2px) solid var(--colors-orange-500);
}

.quote__text {
  margin: 0;
  color: var(--colors-base-black);
}

.quote__attribution {
  color: var(--colors-base-black-opacity-black-opacity-70);
}

/* components/share.css */
/*
 * share — Figma "Social links wrap" 429:4788 (under the article body).
 * Full container width, 1px Black-opacity-20 above and below, padding-block 24, label left (Caption 12px,
 * neutral/dark-gray) and the buttons right, 8 apart. Buttons are the secondary button surface
 * (White-opacity-40 over 1px Black-opacity-20, radius 16), 52 tall: "Copy link" has padding 12 / 20 with the
 * icon 6 from the label, the three brand buttons are 52 × 52.
 * Copying and the share URLs are wired in src/js/share.js.
 */

.share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24px);
  padding-block: var(--spacing-24px);
  /* the two rules are drawn inside the 100, as in Figma, so the row does not grow by the two borders */
  box-shadow:
    inset 0 var(--spacing-1px) 0 0 var(--colors-base-black-opacity-black-opacity-20),
    inset 0 calc(-1 * var(--spacing-1px)) 0 0 var(--colors-base-black-opacity-black-opacity-20);
}

.share__label {
  color: var(--library-neutral-dark-gray);
}

.share__actions {
  display: flex;
  gap: var(--spacing-8px);
}

.share__button {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-6px);
  align-items: center;
  justify-content: center;
  /* Figma: 52 tall, no token (same as the 52 buttons elsewhere, see button.css) */
  height: 52px;
  padding: var(--spacing-12px) var(--spacing-20px);
  border: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-20);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white-opacity-white-opacity-40);
  color: var(--colors-base-black);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    border-color var(--motion-duration-hover) var(--motion-ease-out);
}

.share__button--icon {
  width: 52px;
  /* Figma: 10 vertical padding, no token; the icon is 20 and the box 52 */
  padding: 10px var(--spacing-16px);
}

.share__button:hover,
.share__button--hover {
  border-color: var(--colors-base-black-opacity-black-opacity-40);
  background-color: var(--colors-base-white);
}

.share__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--spacing-20px);
  height: var(--spacing-20px);
}

.share__icon svg {
  display: block;
}

/* Mobile, 320–767 (no Figma frame; derived from the desktop per docs/responsive-system.md). */
@media (max-width: 767px) {
  .share {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16px);
  }

  .share__actions {
    flex-wrap: wrap;
  }
}

/* components/subscribe-field.css */
/*
 * subscribe-field — Figma component set 364:2913 (components page)
 * Variants in Figma: Property 1 = default (364:2895) | edit (364:2912)
 *   default: empty field, placeholder at 50% opacity, stroke White-opacity-5
 *   edit:    typing/filled, text at 100%, stroke White-opacity-20
 *            -> applied on :focus-within, when the field has a value, or with .subscribe-field--edit
 *
 * Layout: outer Fixed 386 × 60. Input: horizontal auto layout Fill × Fill, padding 4 4 4 22, gap spacing-md (8),
 * cross CENTER, radius 16, fill White-opacity-5, stroke 1px INSIDE. Content: Fill × Hug, text Text md/SemiBold,
 * Colors/Base/white, truncate with ellipsis. Button: button type=primary state=default instance, Hug × Fill, no icon.
 *
 * States added on owner request 2026-09-17, NOT designed in Figma (built from existing tokens and the CLAUDE.md
 * color rules; see docs/decisions.md). Modifier class or native trigger:
 *   hover     .subscribe-field--hover    · :hover            stroke White-opacity-10
 *   error     .subscribe-field--error    · :user-invalid     stroke Orange/500, message Orange/500 (alert)
 *   success   .subscribe-field--success                      stroke and message Yellow/500 (owner decision)
 *   disabled  .subscribe-field--disabled · :disabled         field content at Opacity/50, button primary disabled
 * Precedence: disabled > success > error > edit > hover > default.
 * Message: .subscribe-field__message (Text sm/Medium, role=status) below the field, 8px above (spacing-8) once it
 * has text; empty it takes no space; the submit handler (not built yet) fills it and sets the modifier class.
 */

.subscribe-field {
  /* Figma: unbound values with no token (386 and 60 fixed size, 22 left padding) */
  --subscribe-field-width: 386px;
  --subscribe-field-height: 60px;
  --subscribe-field-padding-left: 22px;

  display: flex;
  flex-direction: column;
  width: var(--subscribe-field-width);
}

.subscribe-field__input {
  display: flex;
  align-items: center;
  gap: var(--library-spacing-md);
  min-width: 0;
  height: var(--subscribe-field-height);
  /* Figma: padding 4 and radius 16 are unbound; values equal to spacing-4 and radius-16 */
  padding: var(--spacing-4px) var(--spacing-4px) var(--spacing-4px) var(--subscribe-field-padding-left);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white-opacity-white-opacity-5);
  box-shadow: inset 0 0 0 var(--spacing-1px)
    var(--subscribe-field-stroke, var(--colors-base-white-opacity-white-opacity-5));
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.subscribe-field__control {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-base-white);
  text-overflow: ellipsis;
  outline: none;
}

.subscribe-field__control::placeholder {
  color: var(--colors-base-white-opacity-white-opacity-50);
  opacity: 1;
}

.subscribe-field__button {
  align-self: stretch;
}

.subscribe-field__message {
  color: var(--subscribe-field-message, var(--colors-base-white-opacity-white-opacity-50));
}

/* The live region stays in the DOM (for screen readers) and takes no space while empty */
.subscribe-field__message:not(:empty) {
  margin-block-start: var(--spacing-8px);
}

/* hover (not in Figma) */
.subscribe-field--hover .subscribe-field__input,
.subscribe-field__input:hover {
  --subscribe-field-stroke: var(--colors-base-white-opacity-white-opacity-10);
}

/* Property 1 = edit (Figma) */
.subscribe-field--edit .subscribe-field__input,
.subscribe-field__input:focus-within,
.subscribe-field__input:has(.subscribe-field__control:not(:placeholder-shown)) {
  --subscribe-field-stroke: var(--colors-base-white-opacity-white-opacity-20);
}

/* error (not in Figma): Orange = highlight/alert. Native: invalid email after the user has interacted. */
.subscribe-field.subscribe-field--error .subscribe-field__input,
.subscribe-field__input:has(.subscribe-field__control:user-invalid) {
  --subscribe-field-stroke: var(--colors-orange-500);
}

.subscribe-field--error {
  --subscribe-field-message: var(--colors-orange-500);
}

/* success (not in Figma): stroke and message Yellow/500, the main gold (owner decision 2026-09-17).
   Set by the submit handler. */
.subscribe-field.subscribe-field--success .subscribe-field__input {
  --subscribe-field-stroke: var(--colors-yellow-500);
}

.subscribe-field--success {
  --subscribe-field-message: var(--colors-yellow-500);
}

/* disabled (not in Figma): content at 50%, like the secondary button disabled; button uses its own disabled state */
.subscribe-field.subscribe-field--disabled .subscribe-field__input,
.subscribe-field__input:has(.subscribe-field__control:disabled) {
  --subscribe-field-stroke: var(--colors-base-white-opacity-white-opacity-5);
}

.subscribe-field--disabled .subscribe-field__control,
.subscribe-field__control:disabled {
  opacity: var(--opacity-50);
  cursor: default;
}

/*
 * light (white) variant — news hero, Figma 429:3355. The same component on a light panel:
 * input fill Colors/Base/white, stroke 1px Black-opacity-15, radius 20 (Spacing/20px), text Colors/Base/black,
 * placeholder black at Opacity/50. Only the default state is drawn in Figma; hover, edit, message and disabled
 * mirror the dark variant one step up the Black-opacity scale (owner rules, see docs/decisions.md).
 */
.subscribe-field--light {
  --subscribe-field-message: var(--color-text-muted);
}

.subscribe-field--light .subscribe-field__input {
  --subscribe-field-stroke: var(--colors-base-black-opacity-black-opacity-15);

  border-radius: var(--radius-20);
  background-color: var(--colors-base-white);
}

.subscribe-field--light .subscribe-field__control {
  color: var(--colors-base-black);
}

.subscribe-field--light .subscribe-field__control::placeholder {
  color: var(--colors-base-black);
  opacity: var(--opacity-50);
}

/* hover / edit (not in Figma) */
.subscribe-field--light.subscribe-field--hover .subscribe-field__input,
.subscribe-field--light .subscribe-field__input:hover {
  --subscribe-field-stroke: var(--colors-base-black-opacity-black-opacity-20);
}

.subscribe-field--light.subscribe-field--edit .subscribe-field__input,
.subscribe-field--light .subscribe-field__input:focus-within,
.subscribe-field--light .subscribe-field__input:has(.subscribe-field__control:not(:placeholder-shown)) {
  --subscribe-field-stroke: var(--colors-base-black-opacity-black-opacity-30);
}

.subscribe-field--light.subscribe-field--disabled .subscribe-field__input,
.subscribe-field--light .subscribe-field__input:has(.subscribe-field__control:disabled) {
  --subscribe-field-stroke: var(--colors-base-black-opacity-black-opacity-15);
}

/* Mobile, 320–767 (docs/responsive-spec.md rev. 5; no Figma frame). Tablet rules above apply here too. */
@media (max-width: 767px) {
  /* Decision D = A (owner, 2026-09-18): input and button stay in one row; the fixed 386 becomes the full width */
  .subscribe-field {
    width: 100%;
  }
}

/* components/tab-animation.css */
/*
 * tab-animation — Figma component set hotel-tab-animation 383:4260, step 1 only (383:4259). Owner: the animation
 * between steps is specified later; no animation code here, only data-animate hooks in the markup.
 *
 * The Figma component is a scaled copy (factor ≈ 0.959): sizes, paddings and radii are fractional and unbound, and its
 * text has no text styles. To match Figma exactly they are transferred as literals, scoped to this component in the
 * custom properties below. Colors use tokens where a token exists (listed per property).
 */

.tab-animation {
  /* Every length in this component is a multiple of --ta-unit. At 1360+ the media is exactly 737 wide and the unit
     is 1px, so the card has the Figma sizes; below that the unit follows the frame width (see the query below). */
  --ta-unit: 1px;
  --ta-row-pad: calc(6 * var(--ta-unit));
  --ta-total-pad: calc(16 * var(--ta-unit));
  --ta-head-pad: calc(8 * var(--ta-unit));
  --ta-hairline: max(1px, calc(1 * var(--ta-unit)));

  --ta-width: calc(622 * var(--ta-unit));
  --ta-pad: calc(11.506 * var(--ta-unit));
  --ta-pad-bottom: calc(23.012 * var(--ta-unit));
  --ta-gap: calc(20 * var(--ta-unit));
  --ta-radius: calc(38.354 * var(--ta-unit));
  --ta-card-pad: calc(15.342 * var(--ta-unit));
  --ta-card-gap: calc(19.177 * var(--ta-unit));
  --ta-card-radius: calc(32 * var(--ta-unit));
  --ta-table-pad-inline: calc(15.342 * var(--ta-unit));
  --ta-table-radius: calc(23.012 * var(--ta-unit));
  --ta-table-stroke: calc(0.959 * var(--ta-unit));
  --ta-row-gap: calc(16 * var(--ta-unit));
  --ta-label-width: calc(160 * var(--ta-unit));
  --ta-label-gap: calc(5.753 * var(--ta-unit));
  --ta-track-width: calc(308 * var(--ta-unit));
  --ta-track-height: calc(39 * var(--ta-unit));
  --ta-bar-height: calc(36 * var(--ta-unit));
  --ta-bar-radius: calc(11 * var(--ta-unit));
  --ta-amount-width: calc(54 * var(--ta-unit));
  --ta-total-track-width: calc(328 * var(--ta-unit));
  --ta-total-label-width: calc(122 * var(--ta-unit));
  --ta-total-label-block: calc(160 * var(--ta-unit));
  --ta-size-title: calc(19.81 * var(--ta-unit));
  --ta-size-row: calc(17.829 * var(--ta-unit));
  --ta-size-meta: calc(15.342 * var(--ta-unit));
  --ta-size-code: calc(13.424 * var(--ta-unit));
  --ta-line-height: calc(26.941 * var(--ta-unit));

  display: flex;
  flex-direction: column;
  gap: var(--ta-gap);
  width: var(--ta-width);
  padding: var(--ta-pad) var(--ta-pad) var(--ta-pad-bottom);
  border-radius: var(--ta-radius);
  /* Figma: #F1F0EA at 15% (unbound) ≈ bg-dark; GLASS effect as in effects.css */
  background-color: rgb(241 240 234 / 0.15);
  -webkit-backdrop-filter: blur(var(--effect-glass-frost));
  backdrop-filter: blur(var(--effect-glass-frost));
  box-shadow: var(--effect-glass-light);
  font-family: var(--font-family-body), var(--font-fallback-sans);
  font-kerning: none;
}

.tab-animation__card {
  display: flex;
  flex-direction: column;
  gap: var(--ta-card-gap);
  /* Owner decision 2026-09-18 (not in Figma): the space above the head row matches the gap below it (19.177
     instead of the 15.342 card padding); the other three sides keep the Figma padding. */
  padding: var(--ta-card-gap) var(--ta-card-pad) var(--ta-card-pad);
  border-radius: var(--ta-card-radius);
  background-color: var(--colors-base-white);
}

/* Owner decision 2026-09-18 (not in Figma): the head row is inset by 8 on both sides, so the title and the record
   number are not flush with the card edges. Scales with the card like every other length. */
.tab-animation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--ta-head-pad);
}

.tab-animation__title,
.tab-animation__status {
  display: flex;
  align-items: center;
}

.tab-animation__title {
  gap: var(--ta-row-pad);
  font-size: var(--ta-size-title);
  font-weight: var(--font-weight-medium-500);
  line-height: var(--ta-line-height);
  letter-spacing: var(--font-letter-spacing--2);
  color: var(--colors-base-black);
}

.tab-animation__subtitle {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.tab-animation__separator {
  width: calc(7.2 * var(--ta-unit));
  height: calc(8 * var(--ta-unit));
  color: var(--colors-base-black-opacity-black-opacity-30);
}

.tab-animation__status {
  gap: calc(7.924 * var(--ta-unit));
  font-size: var(--ta-size-code);
  font-weight: var(--font-weight-medium-500);
  line-height: var(--ta-line-height);
  letter-spacing: var(--font-letter-spacing--2);
  text-transform: uppercase;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.tab-animation__status::before {
  /* Figma Ellipse 19: #33A364 (unbound) ≈ Green/500 */
  content: '';
  width: calc(9.588 * var(--ta-unit));
  height: calc(9.588 * var(--ta-unit));
  border-radius: var(--radius-9999);
  background-color: var(--colors-green-500);
}

/* .tab-animation scope: base.css resets ul[role='list'] padding with higher specificity than a single class */
.tab-animation .tab-animation__table {
  display: flex;
  flex-direction: column;
  /* Figma: rows and 1px Line 37 dividers are siblings with gap 16, so rows sit 32 apart with the line centered */
  gap: calc(2 * var(--ta-row-gap));
  padding: var(--ta-row-gap) var(--ta-table-pad-inline);
  border: var(--ta-table-stroke) solid var(--colors-base-black-opacity-black-opacity-10);
  border-radius: var(--ta-table-radius);
  /* Figma: #F1F0EA (unbound) ≈ bg-dark #F2F0E9 */
  background-color: var(--colors-bg-bg-dark);
  list-style: none;
}

.tab-animation__row {
  display: flex;
  align-items: center;
  gap: var(--ta-row-pad);
}

.tab-animation__row + .tab-animation__row {
  position: relative;
}

.tab-animation__row + .tab-animation__row::before {
  /* Figma Line 37: 536 wide, 1px Black-opacity-10, centered in the 16 gap */
  content: '';
  position: absolute;
  top: calc(-1 * var(--ta-row-gap) - var(--ta-hairline) / 2);
  left: 0;
  width: calc(536 * var(--ta-unit));
  height: var(--ta-hairline);
  background-color: var(--colors-base-black-opacity-black-opacity-10);
}

.tab-animation__label {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--ta-label-gap);
  width: var(--ta-label-width);
  font-weight: var(--font-weight-regular-400);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing--2);
  color: var(--colors-base-black);
}

.tab-animation__label-title {
  font-size: var(--ta-size-row);
}

.tab-animation__label-meta {
  font-size: var(--ta-size-meta);
  opacity: var(--opacity-50);
}

.tab-animation__track {
  position: relative;
  flex-shrink: 0;
  width: var(--ta-track-width);
  height: var(--ta-track-height);
}

.tab-animation__bar {
  position: absolute;
  top: calc(50% - var(--ta-bar-height) / 2);
  height: var(--ta-bar-height);
  border-radius: var(--ta-bar-radius);
  background-color: var(--ta-bar-color);
  /* Owner (2026-09-18): flat fill. The Figma 1px white stroke and inner glow were removed. */
}

.tab-animation__amount {
  flex-shrink: 0;
  width: var(--ta-amount-width);
  font-size: var(--ta-size-row);
  font-weight: var(--font-weight-medium-500);
  line-height: var(--ta-line-height);
  letter-spacing: var(--font-letter-spacing--2);
  text-align: right;
  color: var(--colors-base-black);
}

/* Figma 390:5778 "Logged": the same amount style at 50%, like the row meta */
.tab-animation__amount--muted {
  opacity: var(--opacity-50);
}

.tab-animation__total {
  display: flex;
  align-items: center;
  gap: var(--ta-row-pad);
  padding-inline: var(--ta-total-pad);
  color: var(--colors-base-white);
}

.tab-animation__total-label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(9.905 * var(--ta-unit));
  width: var(--ta-total-label-block);
}

.tab-animation__total .tab-animation__label {
  width: var(--ta-total-label-width);
  color: var(--colors-base-white);
}

.tab-animation__check {
  /* Figma _Checkbox base: 30.683 circle, #F9C238 (unbound), check icon inset 21.46% / 17.29% */
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(30.683 * var(--ta-unit));
  height: calc(30.683 * var(--ta-unit));
  border-radius: var(--radius-9999);
  background-color: rgb(249 194 56);
  color: var(--colors-base-black);
}

.tab-animation__check svg {
  width: calc(15.214 * var(--ta-unit));
  height: calc(11.298 * var(--ta-unit));
}

.tab-animation__total .tab-animation__track {
  width: var(--ta-total-track-width);
}

/* flight (390:5699) and unit repair (390:5758): same card, wider amount column, so the tracks are narrower */
.tab-animation--flight {
  --ta-amount-width: calc(58 * var(--ta-unit));
  --ta-total-track-width: calc(326.99 * var(--ta-unit));
}

.tab-animation--unit-repair {
  --ta-track-width: calc(295.7 * var(--ta-unit));
  --ta-amount-width: calc(68 * var(--ta-unit));
  /* "Lease renewed" (the Figma typo "Lease renewd" corrected) needs 126.75px instead of 115px, so the total label
     column grows by 8px (checkbox 30.683 + gap 9.905 + 127) and the total track gives up the same 8px */
  --ta-total-label-width: calc(127 * var(--ta-unit));
  --ta-total-label-block: calc(168 * var(--ta-unit));
  --ta-total-track-width: calc(304.99 * var(--ta-unit));
}

.tab-animation__total-amount {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-20px);
  font-weight: var(--font-weight-medium-500);
  line-height: var(--ta-line-height);
  letter-spacing: var(--font-letter-spacing--2);
  text-align: right;
}

/* Below 1360 the card scales with its frame: 100cqw of the media frame over the 737 it has in Figma. */
@media (max-width: 1359px) {
  .tab-animation {
    --ta-unit: calc(100cqw / 737);
  }
}

/* components/tab-button.css */
/*
 * tab-button — Figma component set 330:9689 (state = default 330:9690 | active 330:9692)
 * Fixed 32 × 32, radius 9999, centered dropdown-icon (16 × 16 box, chevron 8 × 4, stroke 1.6).
 *   default: fill #EBE7E1 60% (unbound, no token), chevron Colors/Base/black
 *   hover (Tab hover 383:5696): the same fill at 100% (#EBE7E1). Set from .tab:hover, see tab.css.
 *   active:  fill White-opacity-20, chevron Colors/Base/white, rotated to point right
 * Decorative (the parent .tab is the interactive element).
 */

.tab-button {
  /* Figma: default fill #EBE7E1 at 60% is unbound and has no token */
  --tab-button-fill: rgb(235 231 225 / 0.6);

  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--spacing-32px);
  height: var(--spacing-32px);
  border-radius: var(--radius-9999);
  background-color: var(--tab-button-fill);
  color: var(--colors-base-black);
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    color var(--motion-duration-hover) var(--motion-ease-out);
}

.tab-button__icon {
  /* Figma: chevron 8 × 4 plus 1.6 stroke = 9.6 × 5.6, centered in the 16 × 16 icon box */
  width: 9.6px;
  height: 5.6px;
  /* rotation matches the card image zoom (owner decision): --motion-duration-media + easeOutExpo */
  transition: transform var(--motion-duration-media) var(--motion-ease-media);
}

.tab-button--active {
  --tab-button-fill: var(--colors-base-white-opacity-white-opacity-20);

  color: var(--colors-base-white);
}

/* Figma: the dropdown-icon instance in state=active is rotated 90° counterclockwise (chevron points right) */
.tab-button--active .tab-button__icon {
  transform: rotate(-90deg);
}

/* components/tab-loop.css */
/*
 * tab-loop — the priced-data animation (owner, 2026-09-18). Phase timings live in js/priced-data-loop.js; this file
 * only styles the states it toggles. Phases, per vertical:
 *   1 enter      rows drop in, text muted, bars and amounts hidden       .tab-animation--enter
 *   2 bars       row by row: text to ink, bar grows, amount fades in     .tab-animation__row--on
 *   3 settled    total row appears, its bar fills the track              .tab-animation--settled
 *   4 packaging  card frosts over, progress bar runs                     .tab-animation--packaging
 *   5 dataset    card fades, parquet table appears                       .tab-animation--dataset
 *   6 exit       table slides off to the right                           .tab-animation--exit
 * Visuals of the card itself are unchanged from tab-animation.css; only widths, opacities and transforms move.
 */

.tab-animation {
  /* owner, 2026-09-20: a softer ease-out for the bars, so they glide in instead of snapping */
  --loop-ease-bar: cubic-bezier(0.22, 1, 0.36, 1);
  --loop-ease-exit: cubic-bezier(0.6, 0, 0.9, 0.4);
  --loop-muted: var(--colors-neutral-400);

  position: relative;
  /* it leaves with steps 1 and 2; tab-media.css still owns the tab-switch fade */
  transition: opacity 300ms ease;
}

.tab-animation--exit {
  opacity: 0;
}

/* ---- phase 1, enter ---- */

.tab-animation__card,
.tab-animation__total {
  transition:
    opacity 300ms ease,
    filter 700ms ease;
}

@keyframes tab-loop-enter {
  from {
    transform: translateY(-40px);
    opacity: 0;
    filter: blur(3px);
  }
  to {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.tab-animation--enter .tab-animation__table {
  animation: tab-loop-enter 550ms var(--loop-ease-bar) both;
}

/* ---- phase 2, bars ---- */

.tab-animation__label-title,
.tab-animation__label-meta {
  transition: color 300ms ease;
}

.tab-animation__row:not(.tab-animation__row--on) .tab-animation__label-title,
.tab-animation__row:not(.tab-animation__row--on) .tab-animation__label-meta {
  color: var(--loop-muted);
}

.tab-animation__row .tab-animation__bar {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 700ms var(--loop-ease-bar),
    opacity 320ms ease;
}

.tab-animation__row--on .tab-animation__bar {
  transform: scaleX(1);
  opacity: 1;
}

.tab-animation__row .tab-animation__amount {
  opacity: 0;
  transition: opacity 300ms ease 150ms;
}

.tab-animation__row--on .tab-animation__amount {
  opacity: 1;
}

.tab-animation__row--on .tab-animation__amount--muted {
  opacity: var(--opacity-50);
}

/* ---- phase 3, settled ---- */

.tab-animation__total {
  opacity: 0;
  transition: opacity 350ms ease;
}

/* owner, 2026-09-20: the Settled row starts muted like the rows above it and takes its Figma white as the yellow
   bar grows. The label keeps the white of the design (tab-animation.css); only the way in is new. */
.tab-animation__total .tab-animation__label-title,
.tab-animation__total .tab-animation__label-meta,
.tab-animation__total .tab-animation__total-amount {
  color: var(--loop-muted);
  transition: color 600ms ease;
}

.tab-animation--settled .tab-animation__total .tab-animation__label-title,
.tab-animation--settled .tab-animation__total .tab-animation__label-meta,
.tab-animation--settled .tab-animation__total .tab-animation__total-amount {
  color: var(--colors-base-white);
}

.tab-animation__total .tab-animation__bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--loop-ease-bar) 80ms;
}

.tab-animation--settled .tab-animation__total {
  opacity: 1;
}

.tab-animation--settled .tab-animation__total .tab-animation__bar,
.tab-animation--packaging .tab-animation__total .tab-animation__bar {
  transform: scaleX(1);
}

/* the finished row stays finished behind the packaging overlay (owner, 2026-09-20) */
.tab-animation--packaging .tab-animation__total .tab-animation__label-title,
.tab-animation--packaging .tab-animation__total .tab-animation__label-meta,
.tab-animation--packaging .tab-animation__total .tab-animation__total-amount {
  color: var(--colors-base-white);
}

/* ---- phase 4, packaging (Figma step-2 432:4821) ---- */

.tab-packaging {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--ta-unit));
  border-radius: var(--ta-radius);
  /* the same glass as the card, lifted with bg-light so it reads light (owner, 2026-09-20) */
  background-color: rgb(255 253 244 / 0.45);
  -webkit-backdrop-filter: blur(var(--effect-glass-frost));
  backdrop-filter: blur(var(--effect-glass-frost));
  box-shadow: var(--effect-glass-light);
  opacity: 0;
  pointer-events: none;
  /* slow in, quick out: step 2 is gone before step 3 starts (owner, 2026-09-20) */
  transition: opacity 300ms ease;
}

.tab-animation--packaging .tab-packaging {
  opacity: 1;
  transition-duration: 900ms;
}

.tab-packaging__title,
.tab-packaging__meta {
  font-size: var(--ta-size-meta);
  font-weight: var(--font-weight-regular-400);
  line-height: 1.4;
  letter-spacing: var(--font-letter-spacing--2);
  color: var(--colors-base-black);
  font-variant-numeric: tabular-nums;
}

.tab-packaging__note {
  font-size: calc(14 * var(--ta-unit));
  font-weight: var(--font-weight-medium-500);
  line-height: 1.5;
  letter-spacing: var(--font-letter-spacing--1);
  color: var(--colors-neutral-600);
}

.tab-packaging__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
  width: calc(415 * var(--ta-unit));
}

.tab-packaging__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab-packaging__record {
  font-size: var(--ta-size-code);
  font-weight: var(--font-weight-semi-bold-600);
  line-height: var(--ta-line-height);
  letter-spacing: var(--font-letter-spacing--1);
  color: var(--colors-base-black);
  text-transform: uppercase;
}

.tab-packaging__count {
  font-size: calc(14 * var(--ta-unit));
  font-weight: var(--font-weight-medium-500);
  line-height: 1.5;
  letter-spacing: var(--font-letter-spacing--1);
  color: var(--colors-neutral-600);
  font-variant-numeric: tabular-nums;
}

.tab-packaging__number {
  color: var(--colors-base-black);
}

.tab-packaging__progress {
  position: relative;
  display: block;
  width: 100%;
  height: calc(8 * var(--ta-unit));
  overflow: hidden;
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-black-opacity-black-opacity-20);
}

.tab-packaging__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--radius-9999);
  background-color: var(--colors-green-500);
  /* owner, 2026-09-20: the bar runs for 3s, ease-in-out */
  transition: width 3000ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-animation--packaging .tab-packaging__progress i {
  width: 100%;
}

/* ---- phase 5, dataset (Figma step-3 432:4846); phase 6, exit ---- */

.tab-animation--dataset .tab-animation__card,
.tab-animation--dataset .tab-animation__total,
.tab-animation--exit .tab-animation__card,
.tab-animation--exit .tab-animation__total {
  opacity: 0;
}

/* Step 3 is the 622 × 400 block of Figma 432:4846 and lives beside the card, not inside it, so the card can go
   away completely — glass included — before the block arrives (owner, 2026-09-20). */
.tab-animation--dataset,
.tab-animation--exit {
  opacity: 0;
}

/* the block is a sibling of the card, so it carries the unit the card's sizes are built on */
.tab-media__animation {
  --ta-unit: 1px;
}

/* The block: the same glass as the card, the file line on it and the white table below. */
.tab-dataset {
  /* the card's hairline, declared here because the block is its sibling, not its child */
  --ta-hairline: max(1px, calc(1 * var(--ta-unit)));

  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(12 * var(--ta-unit));
  /* Figma 432:4846: 622 × 400 on every vertical, centred in the media frame (--ta-width lives on the card) */
  width: calc(622 * var(--ta-unit));
  height: calc(400 * var(--ta-unit));
  margin: auto;
  padding: calc(12 * var(--ta-unit)) calc(13 * var(--ta-unit));
  /* the card's radius, spelled out because --ta-radius is declared on the card itself */
  border-radius: calc(38.354 * var(--ta-unit));
  background-color: rgb(241 240 234 / 0.15);
  -webkit-backdrop-filter: blur(var(--effect-glass-frost));
  backdrop-filter: blur(var(--effect-glass-frost));
  box-shadow: var(--effect-glass-light);
  opacity: 0;
  pointer-events: none;
  font-size: var(--ta-size-code);
  font-weight: var(--font-weight-regular-400);
  letter-spacing: 0;
  color: var(--colors-neutral-600);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* more specific than the tab-switch transition in tab-media.css, which targets every child of the wrapper */
.tab-media__animation > .tab-dataset {
  transition: opacity 450ms ease;
}

/* 300ms for step 1 and step 2 to fade, then a 300ms beat, then the block comes in */
.tab-animation--dataset + .tab-dataset {
  opacity: 1;
  transition-delay: 600ms;
}

.tab-animation--exit + .tab-dataset {
  opacity: 0;
}

.tab-animation--reset + .tab-dataset,
.tab-animation--reset + .tab-dataset .tab-dataset__table,
.tab-animation--reset + .tab-dataset .tab-dataset__cols,
.tab-animation--reset + .tab-dataset .tab-dataset__row,
.tab-animation--reset .tab-packaging,
.tab-animation--reset .tab-animation__bar,
.tab-animation--reset .tab-animation__total,
.tab-animation--reset .tab-animation__amount,
.tab-animation--reset .tab-packaging__progress i {
  transition: none;
}

/* the line above the table, on the photo (Figma: 18 / 28, Medium) */
.tab-dataset__head {
  display: flex;
  margin: 0;
  align-items: center;
  gap: calc(12 * var(--ta-unit));
  font-size: calc(18 * var(--ta-unit));
  font-weight: var(--font-weight-medium-500);
  letter-spacing: 0;
  line-height: calc(28 * var(--ta-unit));
  color: var(--colors-base-white);
  text-transform: none;
}

.tab-dataset__dot {
  display: block;
  width: calc(6 * var(--ta-unit));
  height: calc(6 * var(--ta-unit));
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
}

/* owner, 2026-09-20: the table with its background comes in first, then the rows one after another */
.tab-dataset__table {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  /* Figma: 18 at the top, 24 at the bottom (owner, 2026-09-20) */
  border-radius: calc(18 * var(--ta-unit)) calc(18 * var(--ta-unit)) calc(24 * var(--ta-unit)) calc(24 * var(--ta-unit));
  background-color: var(--colors-base-white);
  opacity: 0;
  transform: translateY(calc(8 * var(--ta-unit)));
  transition:
    opacity 320ms ease,
    transform 420ms var(--loop-ease-bar);
}

.tab-animation--dataset + .tab-dataset .tab-dataset__table {
  opacity: 1;
  transform: none;
}

/* Figma: the row is 37 tall including its divider, so the rule is drawn inside instead of adding to the height */
.tab-dataset__cols,
.tab-dataset__row {
  display: flex;
  padding-inline: calc(16 * var(--ta-unit));
  box-shadow: inset 0 calc(-1 * var(--ta-hairline)) 0 0 var(--colors-base-black-opacity-black-opacity-10);
  font-size: calc(12 * var(--ta-unit));
  opacity: 0;
  transition: opacity 560ms ease;
}

.tab-dataset__cols {
  padding-block: var(--spacing-6px);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colors-neutral-500);
}

/* rows run past the card and are clipped; a fade at the bottom reads as "continues" */
.tab-dataset::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(to bottom, var(--colors-base-white-opacity-white-opacity-0), var(--colors-base-white));
  pointer-events: none;
}

.tab-dataset__row--highlight {
  border-bottom: 0;
  background-color: var(--colors-yellow-500);
  color: var(--colors-base-black);
}

.tab-dataset__cols span,
.tab-dataset__row span {
  display: flex;
  line-height: 1;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: calc(37 * var(--ta-unit));
  padding-inline: var(--spacing-8px);
  text-align: right;
}

.tab-dataset__cols span {
  height: calc(40 * var(--ta-unit));
}

/* Figma: the record id is a fixed 100 column, the six that follow share the rest;
   the first three are left-aligned and the money columns are right-aligned */
.tab-dataset__cols span:first-child,
.tab-dataset__row span:first-child {
  flex: 0 0 calc(100 * var(--ta-unit));
  justify-content: flex-start;
  text-align: left;
}

.tab-dataset__cols span:nth-child(2),
.tab-dataset__row span:nth-child(2),
.tab-dataset__cols span:nth-child(3),
.tab-dataset__row span:nth-child(3) {
  justify-content: flex-start;
  text-align: left;
}

.tab-dataset__row:last-child {
  box-shadow: none;
}

/* the header row first, then every data row, 90ms apart */
.tab-animation--dataset + .tab-dataset .tab-dataset__cols,
.tab-animation--dataset + .tab-dataset .tab-dataset__row {
  opacity: 1;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__cols {
  transition-delay: 900ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(2) {
  transition-delay: 1050ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(3) {
  transition-delay: 1200ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(4) {
  transition-delay: 1350ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(5) {
  transition-delay: 1500ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(6) {
  transition-delay: 1650ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(7) {
  transition-delay: 1800ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(8) {
  transition-delay: 1950ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(9) {
  transition-delay: 2100ms;
}

.tab-animation--dataset + .tab-dataset .tab-dataset__row:nth-child(10) {
  transition-delay: 2250ms;
}

@media (max-width: 1359px) {
  .tab-media__animation {
    --ta-unit: calc(100cqw / 737);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-animation--enter .tab-animation__table {
    animation: none;
  }
  .tab-animation *,
  .tab-packaging,
  .tab-dataset {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  /* the dots stand still, side by side */
  .tab-packaging__dot {
    translate: calc(var(--eclipse-step) * 150% - 75%) 0;
    animation: none;
  }
}

/* components/tab-media.css */
/*
 * tab-media — Figma frame img-animation 349:2295 (What is priced real-world data?).
 * Fixed 737 × 602, radius radius-24, clip. Background: per-tab photo (assets tab-img_*, blur 34 and radius baked).
 * Bottom glaze: Figma rectangle 349:2297, white 0 -> 100% linear gradient at 10% layer fill opacity, from y 481.2
 * (clipped at the frame bottom). Animation card (hotel-tab-animation) at x 77 (unbound); vertically centred.
 *
 * .tab-media is the panel; .tab-media__frame is the clipped media box inside it. On desktop the two are the same
 * size, so nothing changes visually; below 1200 the panel becomes the card from the tablet and mobile frames
 * (Figma 420:3676 / 421:4111): white, 1px stroke, the frame on top and the tab label under it.
 */

.tab-media {
  /* Figma: 737 × 602 media frame (unbound, no tokens). The desktop layout needs 1359px to fit (518 + 24 + 737 +
     margins), so between 1200 and 1359 the panel narrows instead of overflowing while keeping the 602 height;
     at 1360+ it is exactly 737 × 602. Below 1200 it takes the tablet and mobile ratios. */
  --tab-media-width: 737px;
  --tab-media-height: 602px;

  flex: 0 1 auto;
  width: 100%;
  max-width: var(--tab-media-width);
}

.tab-media__frame {
  position: relative;
  overflow: hidden;
  /* the media keeps the Figma proportion */
  aspect-ratio: 737 / 602;
  width: 100%;
  border-radius: var(--radius-24);
  isolation: isolate;
}

/* Below 1360 the media is narrower than its 737 Figma width, so the frame becomes the query container and the
   illustration scales with it (tab-animation.css). At 1360+ the frame is exactly 737 and stays untouched —
   container-type changes how the browser composites the backdrop-filter layers on the page, and the desktop
   render must stay identical. */
@media (max-width: 1359px) {
  .tab-media__frame {
    container-type: inline-size;
  }
}

/* On desktop the panel is always the 602 of Figma (owner, 2026-09-20). It only reaches the full 737 × 602 at
   1440, where the container is 1280; narrower than that the width gives — the photo crops (object-fit: cover)
   and the card scales with it, so it sits in more air — while the height stays put. */
@media (min-width: 1200px) {
  .tab-media__frame {
    aspect-ratio: auto;
    height: 602px;
  }
}

/* the label under the media exists only below 1200 */
.tab-media__label {
  display: none;
  color: var(--colors-base-black);
}

/* stacked panels: every panel sits in the same grid cell of .priced-data__panels */
.priced-data__panels > .tab-media {
  grid-area: 1 / 1;
}

/* inactive panel: its layers fade out; the panel keeps opacity 1 so the glass backdrop never switches */
.tab-media--hidden {
  pointer-events: none;
}

.tab-media__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--motion-duration-media) var(--motion-ease-media);
}

.tab-media--hidden .tab-media__image {
  opacity: 0;
}

.tab-media__frame::after {
  /* Figma 349:2297: top 481.2, height 217, white 0 -> 100% at 10% */
  content: '';
  position: absolute;
  top: 481.2px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 217px;
  background: linear-gradient(to bottom, var(--colors-base-white-opacity-white-opacity-0), var(--colors-base-white));
  opacity: var(--opacity-10);
  pointer-events: none;
  transition: opacity var(--motion-duration-media) var(--motion-ease-media);
}

.tab-media--hidden .tab-media__frame::after {
  opacity: 0;
}

.tab-media__animation {
  position: absolute;
  inset: 0;
  display: flex;
  /* Centred in the panel, horizontally and vertically (owner, 2026-09-19; Figma puts it at x 77, y 72.65).
     Centring with flex rather than a transform keeps the glass backdrop untouched. */
  align-items: center;
  justify-content: center;
}

/* the illustration comes in 100ms after the photo; the transition sits on the glass element itself, not on the
   wrapper, so that the backdrop the glass samples never changes */
.tab-media__animation > * {
  transition: opacity var(--motion-duration-media) var(--motion-ease-media) 100ms;
}

.tab-media--hidden .tab-media__animation > * {
  opacity: 0;
  transition-delay: 0s;
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 420:3676: the panel is a white card — media 622 × 495 (radius 21), label 8 below, padding 16 */
  .tab-media {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8px);
    max-width: none;
    padding: var(--spacing-16px);
    border: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
    border-radius: var(--radius-32);
    background-color: var(--colors-base-white);
  }

  .tab-media__frame {
    aspect-ratio: 622 / 494.99;
    border-radius: 21px;
  }

  .tab-media__label {
    display: block;
  }

  /* the glaze sits at 395.64 / 494.99 of the media height, 178.42 tall */
  .tab-media__frame::after {
    top: 79.93%;
    height: 36.05%;
  }

  /* the illustration is centred in the media (Figma 420:3679) */
  .tab-media__animation {
    right: 0;
    left: 0;
    justify-content: center;
  }
}

/* Mobile, 320–767 (Figma frame 419:2873 and mobile-menu-open 421:4879). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 421:4111: smaller card — padding 8 / 8 / 16, radius 24, media radius 16, label 12 below */
  .tab-media {
    gap: var(--spacing-12px);
    padding: var(--spacing-8px) var(--spacing-8px) var(--spacing-16px);
    border-radius: var(--radius-24);
  }

  .tab-media__frame {
    aspect-ratio: 316.382 / 258.418;
    border-radius: var(--radius-16);
  }

  .tab-media__label {
    padding-inline: var(--spacing-6px);
    font-size: var(--typography-text-md-semi-bold-font-size);
    letter-spacing: var(--typography-text-md-semi-bold-letter-spacing);
    line-height: var(--typography-text-md-semi-bold-line-height);
  }
}

/* components/tab.css */
/*
 * tab — Figma frames Tab/default (383:4529, 383:4542) and Tab/active (383:4535) in the homepage tablist.
 * Horizontal, padding 16 (Spacing/16px), cross CENTER, radius 16, stroke 1px INSIDE included in layout (height 66).
 *   default: fill white (unbound = Base/white), stroke #1A1A17 10% (unbound = Black-opacity-10), label #222222
 *   active:  fill per tab, stroke White-opacity-10, label Colors/Base/white, tab-button active
 * Active colors (owner decision, from the tab-section variants): Airline booking Blue/500, Hotel stay Orange/500,
 * Unit repair Green/500 -> .tab--blue / .tab--orange / .tab--green.
 * Label: Geist SemiBold 18 / 27.2px / -1% without a text style -> .text-text-lg-semi-bold (18 / 160%); #222222 has no
 * token -> Colors/Base/black. Both listed in docs/figma-issues.md.
 * Hover (Figma Tab 383:5698, state hover 383:5696, stroke updated 2026-09-17): the stroke goes from
 * Black-opacity-10 to Black-opacity-25 (#1A1A17 25%, measured as rgb(197 197 197) over the white fill; unbound in
 * Figma) and the tab-button circle from #EBE7E1 60% to 100%.
 * Not in Figma: focus (focus-visible outline added for accessibility).
 */

.tab {
  --tab-fill: var(--colors-base-white);
  --tab-stroke: var(--colors-base-black-opacity-black-opacity-10);
  --tab-color: var(--colors-base-black);

  display: flex;
  align-items: center;
  gap: var(--spacing-8px);
  width: 100%;
  padding: var(--spacing-16px);
  border: var(--spacing-1px) solid var(--tab-stroke);
  border-radius: var(--radius-16);
  background-color: var(--tab-fill);
  color: var(--tab-color);
  text-align: left;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    border-color var(--motion-duration-hover) var(--motion-ease-out),
    color var(--motion-duration-hover) var(--motion-ease-out);
}

.tab__label {
  flex: 1 1 0;
  min-width: 0;
}

.tab:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-2px);
}

/* hover: inactive tabs only */
.tab:not(.tab--active):hover,
.tab.tab--hover {
  --tab-stroke: var(--colors-base-black-opacity-black-opacity-25);
}

.tab:not(.tab--active):hover .tab-button,
.tab.tab--hover .tab-button {
  --tab-button-fill: rgb(235 231 225);
}

.tab--active {
  --tab-stroke: var(--colors-base-white-opacity-white-opacity-10);
  --tab-color: var(--colors-base-white);
}

.tab--active.tab--orange {
  --tab-fill: var(--colors-orange-500);
}

.tab--active.tab--blue {
  --tab-fill: var(--colors-blue-500);
}

.tab--active.tab--green {
  --tab-fill: var(--colors-green-500);
}

/* components/table.css */
/*
 * table — Figma "table-component" 431:2833 (news article). Every markdown table in a post renders as this.
 * Wrapper: Colors/Base/white, 1px Black-opacity-20 stroke on the OUTSIDE (a box-shadow, so it does not widen
 * the 720 column), radius 12, clipped.
 * Header row: Colors/bg/bg-dark, 40 tall, labels Caption 12px uppercase at Black-opacity-60.
 * Body rows: padding-block 12, first column Text md/Bold, the rest Text md/Medium, every row closed by a
 * 1px Black-opacity-20 rule (the header has one too).
 * Cells: 16 of horizontal padding (Figma: 8 on the row plus 8 on the cell).
 * Below 768 the table keeps its column widths and scrolls sideways inside the wrapper.
 */

.table {
  overflow-x: auto;
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow: 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-20);
}

.table__grid {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table__row {
  box-shadow: inset 0 calc(-1 * var(--spacing-1px)) 0 0 var(--colors-base-black-opacity-black-opacity-20);
}

.table__cell {
  padding: var(--spacing-12px) var(--spacing-16px);
  color: var(--colors-base-black);
  vertical-align: middle;
}

.table__row--head {
  background-color: var(--color-surface-card);
}

.table__row--head .table__cell {
  height: var(--spacing-40px);
  padding-block: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  white-space: nowrap;
}

/* the outer stroke closes the table, so the last row does not draw its own rule on top of it */
.table__grid tbody .table__row:last-child {
  box-shadow: none;
}

/* Figma: the first column is the row's subject and carries the weight */
.table__cell:first-child {
  font-weight: var(--font-weight-bold-700);
}

.table__row--head .table__cell:first-child {
  font-weight: var(--typography-caption-caption-12px-font-weight);
}

/* Mobile, 320–767 (no Figma frame): the columns keep a readable width and the wrapper scrolls. */
@media (max-width: 767px) {
  .table__grid {
    min-width: 480px;
  }
}

/* components/timeline.css */
/*
 * timeline — Figma "timeline-wrapper" 429:4732 (news article "UPDATES:" list).
 * Card: Colors/bg/bg-dark, 1px Black-opacity-10, radius 16, padding 24, with the sources caption 24 under the
 * steps (Caption 12px, neutral/dark-gray).
 * Step: 32 round marker (Colors/Green/500 with a 12 white dot) and a 2px connector in the same green running to
 * the next marker; text column 16 to the right, padding 4 above and 24 below, gap 6: date pill (green, padding 6,
 * radius 8, Caption 12px white) and the line itself (Text md/SemiBold).
 * The last step is the newest one and uses Colors/Orange/500 (highlight), and has no connector.
 */

.timeline {
  --timeline-accent: var(--colors-green-500);
  /* Owner, 2026-09-20: the marker is as tall as the date pill next to it (Figma draws it 32) and starts level
     with it, so the row reads as one line. */
  --timeline-marker: var(--spacing-24px);
  --timeline-marker-top: var(--spacing-4px);

  padding: var(--spacing-24px);
  border-radius: var(--radius-16);
  background-color: var(--color-surface-card);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
}

.timeline__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__step {
  position: relative;
  display: flex;
  gap: var(--spacing-16px);
  padding-bottom: var(--spacing-24px);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__step--latest {
  --timeline-accent: var(--colors-orange-500);
}

.timeline__marker {
  position: relative;
  flex-shrink: 0;
  width: var(--timeline-marker);
  height: var(--timeline-marker);
  margin-block-start: var(--timeline-marker-top);
  border-radius: var(--radius-9999);
  background-color: var(--timeline-accent);
}

/* the dot in the middle of the marker (Figma: 12 in a 32 marker) */
.timeline__marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spacing-8px);
  height: var(--spacing-8px);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
}

/* the connector: 4 below the marker down to 4 above the next one (Figma: 2 wide, radius 2) */
.timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--timeline-marker-top) + var(--timeline-marker) + var(--spacing-4px));
  bottom: var(--spacing-4px);
  left: calc(var(--timeline-marker) / 2);
  width: var(--spacing-2px);
  transform: translateX(-50%);
  border-radius: var(--radius-2);
  background-color: var(--timeline-accent);
}

.timeline__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6px);
  min-width: 0;
  padding-top: var(--spacing-4px);
}

.timeline__date {
  padding: var(--spacing-6px);
  border-radius: var(--radius-8);
  background-color: var(--timeline-accent);
  color: var(--colors-base-white);
}

.timeline__text {
  color: var(--colors-base-black);
}

.timeline__sources {
  margin-block-start: var(--spacing-24px);
  color: var(--library-neutral-dark-gray);
}

/* Mobile, 320–767 (no Figma frame; derived from the desktop per docs/responsive-system.md). */
@media (max-width: 767px) {
  .timeline {
    padding: var(--spacing-16px);
  }

  .timeline__step {
    gap: var(--spacing-12px);
  }
}

/* components/ui-controls.css */
/*
 * Branded dropdown, calendar, time list and star rating (src/js/ui.js), matching the form fields:
 * 52px controls, white fill with a hairline, radius-control, Geist; popovers are white cards with a soft shadow,
 * green for the selected value.
 */

.ui-wrap {
  position: relative;
  min-width: 0;
}

.ui-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12px);
  width: 100%;
  height: 52px;
  padding: 0 var(--spacing-16px) 0 22px;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  font: 500 16px/1.2 var(--font-family-body), system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.ui-field:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-30);
}

.ui-field:focus-visible,
.ui-field[aria-expanded='true'] {
  outline: none;
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-blue-500);
}

.ui-field.is-empty {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.ui-field__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-field__chevron {
  flex: none;
  width: 12px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231a1a17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ui-field--date .ui-field__chevron {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a17' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ui-pop {
  position: absolute;
  top: calc(100% + var(--spacing-6px, 6px));
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow:
    0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10),
    0 16px 40px rgb(26 26 23 / 0.16);
}

.ui-pop.is-up {
  top: auto;
  bottom: calc(100% + var(--spacing-6px, 6px));
}

.ui-list {
  margin: 0;
  padding: var(--spacing-6px, 6px);
  list-style: none;
}

.ui-option {
  padding: var(--spacing-10px, 10px) var(--spacing-12px);
  border-radius: var(--radius-8);
  color: var(--colors-base-black);
  font: 500 16px/1.3 var(--font-family-body), system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.ui-option:hover,
.ui-option:focus {
  outline: none;
  background-color: var(--colors-neutral-100);
}

.ui-option[aria-selected='true'] {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
  font-weight: 600;
}

/* calendar */
.ui-field--date + .ui-pop {
  width: 296px;
  min-width: 0;
  max-height: none;
  padding: var(--spacing-12px);
}

.ui-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-8px);
}

.ui-cal__title {
  color: var(--colors-base-black);
  font: 600 16px/1 var(--font-family-body), system-ui, sans-serif;
}

.ui-cal__nav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-9999);
  background: transparent;
  color: var(--colors-base-black);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ui-cal__nav:hover,
.ui-cal__day:not(:disabled):hover {
  background-color: var(--colors-neutral-100);
}

.ui-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ui-cal__dow span {
  padding: 4px 0;
  color: var(--colors-base-black-opacity-black-opacity-50);
  font: 600 12px/1 var(--font-family-body), system-ui, sans-serif;
  text-align: center;
}

.ui-cal__day {
  height: 36px;
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--colors-base-black);
  font: 500 14px/1 var(--font-family-body), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ui-cal__day.is-other {
  color: var(--colors-base-black-opacity-black-opacity-30, rgb(26 26 23 / 0.3));
}

.ui-cal__day.is-today {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-30);
}

.ui-cal__day[aria-pressed='true'] {
  background-color: var(--colors-green-500);
  box-shadow: none;
  color: var(--colors-base-white);
}

.ui-cal__day:disabled {
  color: var(--colors-base-black-opacity-black-opacity-20);
  cursor: default;
}

.ui-cal__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-8px);
  padding-top: var(--spacing-8px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.ui-link {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--colors-base-black-opacity-black-opacity-60);
  font: 600 13px/1 var(--font-family-body), system-ui, sans-serif;
  cursor: pointer;
}

.ui-link:hover {
  color: var(--colors-base-black);
}

/* stars: each icon is a grey star with a full-size gold star on top, clipped from the right to --fill (0–100%),
   so a half star is the left half of a full star at any size */
.ui-stars {
  display: inline-flex;
  gap: 2px;
  cursor: pointer;
}

.ui-stars.is-readonly {
  cursor: default;
}

.ui-stars:focus-visible {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: 4px;
  border-radius: 4px;
}

.ui-star {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
}

.ui-stars--sm .ui-star {
  width: 16px;
  height: 16px;
}

.ui-star svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-star__base svg {
  fill: var(--colors-neutral-200, #e4e1d8);
}

.ui-star__fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
}

.ui-star__fill svg {
  fill: var(--colors-yellow-600);
}

/* confirm dialog */
.ui-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--spacing-16px);
  background-color: rgb(26 26 23 / 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ui-dialog__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  width: 440px;
  max-width: 100%;
  padding: var(--spacing-24px);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: 0 24px 64px rgb(26 26 23 / 0.24);
}

.ui-dialog__title {
  margin: 0;
  color: var(--colors-base-black);
  font: 600 20px/1.25 var(--font-family-body), system-ui, sans-serif;
}

.ui-dialog__body {
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  font: 500 16px/1.5 var(--font-family-body), system-ui, sans-serif;
}

.ui-dialog__actions {
  display: flex;
  gap: var(--spacing-8px);
  justify-content: flex-end;
  margin-top: var(--spacing-8px);
}

.ui-dialog__btn {
  height: 44px;
  padding-inline: var(--spacing-20px);
}

.ui-dialog__btn.is-danger {
  background-color: var(--colors-orange-600);
  color: var(--colors-base-white);
}

.ui-dialog__btn.is-danger:hover {
  background-color: var(--colors-orange-700, #992a0f);
}

/* multi-select: checkbox rows, then an "add another" box pinned under the list */
.ui-field--multi + .ui-pop {
  max-height: none;
  overflow: visible;
}

/* only the list scrolls; the "add another" row stays put under it (a fixed list height behaves the same in every
   browser, where a flex column let Safari size the list and the panel differently) */
.ui-checks {
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-check {
  padding: 0;
}

.ui-check label {
  position: relative; /* keeps the hidden checkbox inside its row, so a scrolled list can't stretch the page */
  display: flex;
  align-items: center;
  gap: var(--spacing-10px, 10px);
  padding: var(--spacing-10px, 10px) var(--spacing-12px);
  cursor: pointer;
}

.ui-check input {
  position: absolute;
  top: 50%;
  left: var(--spacing-12px);
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ui-check__box {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--colors-base-black-opacity-black-opacity-30);
  background: var(--colors-base-white) no-repeat center / 12px;
}

.ui-check input:checked + .ui-check__box {
  box-shadow: none;
  background-color: var(--colors-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ui-check input:focus-visible + .ui-check__box {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: 2px;
}

.ui-check[aria-selected='true'] {
  background-color: transparent;
  color: var(--colors-base-black);
  font-weight: 500;
}

.ui-add {
  display: flex;
  gap: var(--spacing-8px);
  padding: var(--spacing-8px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.ui-add__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 var(--spacing-12px);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black);
  font: 500 16px/1 var(--font-family-body), system-ui, sans-serif;
}

.ui-add__input:focus {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
}

.ui-add__button {
  height: 40px;
  padding: 0 var(--spacing-16px);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  font: 600 14px/1 var(--font-family-body), system-ui, sans-serif;
  cursor: pointer;
}

/* sections/admin.css */
/*
 * Internal admin (/admin): data inventory links. Reuses fields, pills, buttons and the panel from the site, and the
 * inventory summary (.manifest, inventory.css) for the detail view. Plain and dense: it's a working screen.
 */

.admin {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  align-items: center;
  padding: var(--spacing-24px) var(--spacing-16px) var(--spacing-64, 64px);
}

.admin__page,
.admin__signin {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  width: 1040px;
  max-width: 100%;
}

.admin [hidden] {
  display: none !important;
}

.admin__signin {
  align-items: center;
  width: 420px;
  margin-top: 10vh;
  padding: var(--spacing-40px, 40px) var(--spacing-24px);
  text-align: center;
}

.admin__signin h1,
.admin__bar h1,
.admin__detail-head h1 {
  margin: 0;
}

.admin__muted {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.admin__error {
  margin: 0;
  color: var(--colors-orange-600);
}

.admin__account {
  display: inline-flex;
  gap: var(--spacing-16px);
  align-items: center;
}

.admin__link,
.admin__back {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-base-black);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.admin__back {
  align-self: flex-start;
  text-decoration: none;
}

.admin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16px);
}

.admin__new {
  height: 44px;
  padding-inline: var(--spacing-20px);
}

.admin__create,
.admin__created,
.admin__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  padding: var(--spacing-20px);
}

.admin__create h2,
.admin__card h2,
.admin__created p {
  margin: 0;
}

.admin__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16px);
}

.admin__actions {
  display: flex;
  gap: var(--spacing-8px);
  justify-content: flex-end;
}

.admin__actions .button,
.admin__detail-actions .button,
.admin__linkbox .button {
  height: 40px;
  padding-inline: var(--spacing-16px);
}

.admin__linkbox {
  display: flex;
  gap: var(--spacing-8px);
  align-items: center;
  padding: var(--spacing-8px) var(--spacing-8px) var(--spacing-8px) var(--spacing-16px);
  border-radius: var(--radius-control);
  background-color: var(--colors-neutral-100);
}

.admin__linkbox code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6px, 6px);
}

.admin__filter {
  padding: 6px var(--spacing-12px);
  border: 0;
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  cursor: pointer;
}

.admin__filter[aria-pressed='true'] {
  background-color: var(--colors-base-black);
  color: var(--colors-base-white);
}

.admin__table {
  overflow-x: auto;
}

.admin__rows {
  width: 100%;
  border-collapse: collapse;
}

.admin__rows th,
.admin__rows td {
  padding: var(--spacing-12px) var(--spacing-16px);
  text-align: left;
  white-space: nowrap;
}

.admin__rows th {
  color: var(--colors-base-black-opacity-black-opacity-60);
  font-weight: 500;
}

.admin__rows td:first-child {
  white-space: normal;
}

.admin__row {
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  cursor: pointer;
}

.admin__row:hover {
  background-color: var(--colors-neutral-100);
}

.admin__client {
  display: block;
}

.admin__row-actions {
  display: flex;
  gap: var(--spacing-16px);
  justify-content: flex-end;
}

.admin__empty {
  margin: 0;
  padding: var(--spacing-24px);
  text-align: center;
}

.admin__status {
  display: inline-block;
  padding: 2px var(--spacing-10px, 10px);
  border-radius: var(--radius-9999);
  font-size: 12px;
  font-weight: 600;
}

.admin__status.is-sent {
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.admin__status.is-submitted {
  background-color: var(--colors-yellow-100);
  color: var(--colors-yellow-800);
}

.admin__status.is-reviewed {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

.admin__detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-12px);
}

.admin__detail-head p {
  margin: var(--spacing-4px) 0 0;
}

.admin__detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8px);
  align-items: center;
}

.admin__system .admin__system-more {
  grid-column: 2 / -1;
  color: var(--colors-base-black-opacity-black-opacity-70, rgb(26 26 23 / 0.7));
}

.admin__system-more p {
  margin: 2px 0 0;
}

.admin__facts {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--spacing-8px) var(--spacing-16px);
  margin: 0;
}

.admin__facts dt {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.admin__facts dd {
  margin: 0;
  white-space: pre-wrap;
}

.admin__toast {
  position: fixed;
  bottom: var(--spacing-24px);
  left: 50%;
  margin: 0;
  padding: var(--spacing-12px) var(--spacing-20px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-black);
  color: var(--colors-base-white);
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .admin__grid,
  .admin__facts {
    grid-template-columns: 1fr;
  }

  .admin__facts dd {
    margin-bottom: var(--spacing-8px);
  }
}

/* ---- tabs ---- */
.admin__tabs {
  display: flex;
  gap: var(--spacing-4px);
  width: 1240px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-100);
}

.admin__tab {
  flex: 1 1 0;
  padding: var(--spacing-8px) var(--spacing-16px);
  border-radius: var(--radius-9999);
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
  text-decoration: none;
}

.admin__tab[aria-current='true'] {
  background-color: var(--colors-base-white);
  box-shadow: 0 1px 2px rgb(26 26 23 / 0.08);
  color: var(--colors-base-black);
}

.admin [data-view='crm'],
.admin [data-view='lead'] {
  width: 1240px;
}

.admin__banner {
  margin: 0;
  padding: var(--spacing-12px) var(--spacing-16px);
  border-radius: var(--radius-12);
  background-color: var(--colors-yellow-50);
  color: var(--colors-yellow-800);
}

/* ---- admin is a working tool: sans throughout, no serif display type ---- */
.page-admin [class*='text-display'],
.page-admin h1,
.page-admin h2 {
  font-family: var(--font-family-body), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.crm__h1 {
  margin: 0;
  color: var(--colors-base-black);
  font: 600 28px/1.15 var(--font-family-body), system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ---- shared CRM pieces ---- */
.crm__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  padding: var(--spacing-24px);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.crm__card-title {
  margin: 0;
  color: var(--colors-base-black);
}

.crm__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
  min-width: 0;
}

.crm__field[hidden] {
  display: none;
}

.crm__label {
  color: var(--colors-base-black);
}

.crm__hint,
.crm__muted {
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__block {
  display: block;
}

/* inputs in white cards: same 52px control as the forms, with a light fill so they read as fields */
.crm__input,
.crm__card .ui-field {
  width: 100%;
  height: 52px;
  padding: 0 var(--spacing-16px) 0 22px;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--colors-neutral-100);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
  color: var(--colors-base-black);
}

.crm__input::placeholder {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.crm__input:hover,
.crm__card .ui-field:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-25);
}

.crm__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-blue-500);
}

.crm__textarea {
  height: auto;
  min-height: 112px;
  padding-block: var(--spacing-14px, 14px);
  line-height: 1.5;
  resize: vertical;
}

.crm__row {
  display: grid;
  gap: var(--spacing-12px);
}

.crm__row--next {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.crm__row--when {
  grid-template-columns: minmax(0, 1fr) 140px;
}

.crm__actions {
  display: flex;
  gap: var(--spacing-8px);
  justify-content: flex-end;
}

.crm__btn {
  height: 44px;
  padding-inline: var(--spacing-20px);
  white-space: nowrap;
}

/* segmented choices (filters, entry type, call outcome) */
.crm__segs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6px, 6px);
}

.crm__seg {
  height: 36px;
  padding: 0 var(--spacing-14px, 14px);
  border: 0;
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  cursor: pointer;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-out);
}

.crm__seg:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-35);
}

.crm__seg[aria-pressed='true'] {
  background-color: var(--colors-green-500);
  box-shadow: none;
  color: var(--colors-base-white);
}

.crm__stage {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--spacing-10px, 10px);
  border-radius: var(--radius-9999);
  font: 600 12px/1 var(--font-family-body), system-ui, sans-serif;
  white-space: nowrap;
}

.crm__stage.is-neutral {
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__stage.is-blue {
  background-color: rgb(61 104 196 / 0.12);
  color: var(--colors-blue-500);
}

.crm__stage.is-yellow {
  background-color: var(--colors-yellow-100);
  color: var(--colors-yellow-800);
}

.crm__stage.is-green {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

.crm__stage.is-red {
  background-color: rgb(240 82 44 / 0.1);
  color: var(--colors-orange-600);
}

.crm__link,
.crm__site {
  color: var(--colors-blue-500);
  text-decoration: none;
}

.crm__link:hover,
.crm__site:hover {
  text-decoration: underline;
}

.crm__site {
  display: inline-block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.crm__site-guess {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.crm__due {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__due.is-today,
.crm__task.is-today .crm__task-meta {
  color: var(--colors-yellow-800);
}

.crm__due.is-overdue,
.crm__task.is-overdue .crm__task-meta {
  color: var(--colors-orange-600);
}

/* ---- list ---- */
[data-view='crm'] {
  gap: var(--spacing-20px);
}

.crm__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-12px);
}

.crm__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
  padding: var(--spacing-20px);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.crm__stat-label {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__stat-num {
  color: var(--colors-base-black);
  font: 600 32px/1 var(--font-family-body), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.crm__stat.is-warn .crm__stat-num {
  color: var(--colors-yellow-800);
}

.crm__stat.is-bad .crm__stat-num {
  color: var(--colors-orange-600);
}

.crm__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--spacing-16px);
  align-items: start;
}

.crm__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  min-width: 0;
}

.crm__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
}

.crm__selects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-8px);
}

.crm__selects > .crm__input {
  grid-column: 1 / -1;
}

.crm__selects .ui-field,
.crm__selects .crm__input {
  height: 44px;
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  font-size: 14px;
}

.crm__table-card {
  overflow: hidden;
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.crm__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.crm__table th {
  padding: var(--spacing-12px) var(--spacing-16px);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
  font: 600 12px/1.2 var(--font-family-body), system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.crm__table th:nth-child(1) { width: 16%; }
.crm__table th:nth-child(2) { width: 22%; }
.crm__table th:nth-child(3) { width: 13%; }
.crm__table th:nth-child(4) { width: 15%; }
.crm__table th:nth-child(5) { width: 11%; }
.crm__table th:nth-child(6) { width: 11%; }
.crm__table th:nth-child(7) { width: 12%; }

.crm__table td {
  padding: var(--spacing-16px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  color: var(--colors-base-black);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.crm__table tbody tr {
  cursor: pointer;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-out);
}

.crm__table tbody tr:hover {
  background-color: var(--colors-yellow-25);
}

.crm__company {
  display: block;
  color: var(--colors-base-black);
}

.crm__num {
  font-variant-numeric: tabular-nums;
}

.crm__canceled {
  color: var(--colors-base-black-opacity-black-opacity-50);
  text-decoration: line-through;
}

.crm__count {
  display: inline-block;
  margin-top: var(--spacing-6px, 6px);
  padding: 2px var(--spacing-8px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-yellow-100);
  color: var(--colors-yellow-800);
  font-size: 12px;
  font-weight: 600;
}

.crm__empty {
  margin: 0;
  padding: var(--spacing-40px, 40px) var(--spacing-24px);
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

.crm__tasks {
  gap: var(--spacing-12px);
}

.crm__task-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 calc(-1 * var(--spacing-8px));
  padding: 0;
  list-style: none;
}

.crm__task {
  display: flex;
  gap: var(--spacing-12px);
  align-items: flex-start;
  padding: var(--spacing-10px, 10px) var(--spacing-8px);
  border-radius: var(--radius-8);
  cursor: pointer;
}

.crm__task:hover {
  background-color: var(--colors-neutral-100);
}

.crm__task-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.crm__task-meta {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__check {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--colors-green-500);
  cursor: pointer;
}

/* ---- one lead ---- */
[data-view='lead'] {
  gap: var(--spacing-20px);
}

.crm__lead-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16px);
}

.crm__lead-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12px);
  align-items: center;
}

.crm__lead-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8px);
  align-items: baseline;
  margin: var(--spacing-8px) 0 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__dot {
  color: var(--colors-base-black-opacity-black-opacity-30, rgb(26 26 23 / 0.3));
}

.crm__pipeline {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.crm__step {
  flex: 1 0 auto;
  height: 36px;
  padding: 0 var(--spacing-12px);
  border: 0;
  border-radius: var(--radius-9999);
  background: transparent;
  color: var(--colors-base-black-opacity-black-opacity-50);
  white-space: nowrap;
  cursor: pointer;
}

.crm__step:hover {
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black);
}

.crm__step.is-past {
  color: var(--colors-green-500);
}

.crm__step.is-current {
  background-color: var(--colors-green-500);
  color: var(--colors-base-white);
}

.crm__step.is-lost.is-current {
  background-color: var(--colors-orange-600);
}

.crm__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--spacing-16px);
  align-items: start;
}

.crm__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  min-width: 0;
}

.crm__rating {
  display: flex;
  gap: var(--spacing-12px);
  align-items: center;
}

.crm__heat {
  padding: 4px var(--spacing-10px, 10px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__heat[data-heat='hot'] {
  background-color: rgb(240 82 44 / 0.12);
  color: var(--colors-orange-600);
}

.crm__heat[data-heat='warm'] {
  background-color: var(--colors-yellow-100);
  color: var(--colors-yellow-800);
}

.crm__heat[data-heat='cold'] {
  background-color: rgb(61 104 196 / 0.12);
  color: var(--colors-blue-500);
}

.crm__composer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12px);
  align-items: flex-end;
  justify-content: flex-end;
}

.crm__composer-foot .crm__field {
  flex: 1 1 220px;
  max-width: 280px;
  margin-right: auto;
}

.crm__timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm__entry {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--spacing-12px);
  padding: var(--spacing-16px) 0;
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.crm__entry:first-child {
  padding-top: 0;
  border-top: 0;
}

.crm__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
  font-size: 14px;
}

.crm__entry.is-task .crm__icon {
  background-color: var(--colors-yellow-100);
  color: var(--colors-yellow-800);
}

.crm__entry.is-email .crm__icon,
.crm__entry.is-call .crm__icon {
  background-color: rgb(61 104 196 / 0.12);
  color: var(--colors-blue-500);
}

.crm__entry.is-stage-change .crm__icon {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

.crm__entry-body {
  min-width: 0;
}

.crm__entry-meta {
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__entry-meta b {
  color: var(--colors-base-black);
  font-weight: 600;
}

.crm__text {
  margin: var(--spacing-4px) 0 0;
  color: var(--colors-base-black);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm__entry.is-done .crm__text {
  color: var(--colors-base-black-opacity-black-opacity-50);
  text-decoration: line-through;
}

.crm__entry-actions {
  display: flex;
  gap: var(--spacing-12px);
  align-items: flex-start;
}

.crm__text-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-base-black-opacity-black-opacity-60);
  cursor: pointer;
}

.crm__text-btn:hover {
  color: var(--colors-base-black);
}

.crm__text-btn.is-danger:hover {
  color: var(--colors-orange-600);
}

.crm__call-when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8px);
  align-items: center;
  color: var(--colors-base-black);
}

.crm__call-status {
  padding: 2px var(--spacing-8px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
  font-size: 12px;
  font-weight: 600;
}

.crm__call-status.is-scheduled {
  background-color: rgb(61 104 196 / 0.12);
  color: var(--colors-blue-500);
}

.crm__call-status.is-done {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

.crm__call-status.is-no-show,
.crm__call-status.is-canceled {
  background-color: rgb(240 82 44 / 0.1);
  color: var(--colors-orange-600);
}

.crm__money {
  position: relative;
}

.crm__money span {
  position: absolute;
  top: 50%;
  left: 22px;
  color: var(--colors-base-black-opacity-black-opacity-50);
  transform: translateY(-50%);
}

.crm__money .crm__input {
  padding-left: 36px;
}

.crm__facts {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--spacing-10px, 10px) var(--spacing-12px);
  margin: 0;
}

.crm__facts dt {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__facts dd {
  margin: 0;
  color: var(--colors-base-black);
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .crm__layout,
  .crm__detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .crm__selects,
  .crm__row--next {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm__card {
    padding: var(--spacing-20px);
  }

  .crm__table th:nth-child(3),
  .crm__table td:nth-child(3),
  .crm__table th:nth-child(4),
  .crm__table td:nth-child(4),
  .crm__table th:nth-child(5),
  .crm__table td:nth-child(5) {
    display: none;
  }
}

[data-lead] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20px);
}

/* the inventories tab uses the same white cards as the CRM */
.page-admin .admin__create.panel,
.page-admin .admin__created.panel,
.page-admin .admin__card.panel,
.page-admin .admin__table.panel,
.page-admin .admin__signin.panel {
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.page-admin .admin__create .field__input {
  background-color: var(--colors-neutral-100);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.page-admin .admin__rows th {
  background-color: var(--colors-neutral-100);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* every admin page shares one width with the tabs */
.page-admin .admin__page {
  width: 1240px;
}

.admin__link.is-danger,
.admin__delete .button__label {
  color: var(--colors-orange-600);
}

.admin__delete:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-orange-500);
}

/* "Estimate, no call": what was left out as spam, tests or duplicates */
.page-admin .crm__hidden {
  padding: var(--spacing-12px) var(--spacing-16px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.page-admin .crm__hidden summary {
  cursor: pointer;
  font-weight: 600;
}

.page-admin .crm__hidden ul {
  display: grid;
  gap: var(--spacing-6px, 6px);
  margin: var(--spacing-10px, 10px) 0 0;
  padding: 0;
  list-style: none;
}

.page-admin .crm__hidden-row {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-base-black);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* buyers & partners form: two fields per row, one on phones */
.page-admin .crm__grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12px) var(--spacing-16px);
}

@media (max-width: 640px) {
  .page-admin .crm__grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-admin [data-partner-form] .crm__card {
  margin-bottom: var(--spacing-16px);
}

/* buyers & partners: filter pills above the table, quick Approve / Pass under a new application's status */
.page-admin .crm__partner-filters {
  margin: var(--spacing-12px) var(--spacing-16px);
}

.page-admin .crm__quick {
  display: flex;
  gap: var(--spacing-10px, 10px);
  margin-top: var(--spacing-6px, 6px);
}

.page-admin .crm__quick .admin__link {
  white-space: nowrap;
}

/* Buyers & partners → Contacts: two buttons in the bar, a company select + search above the table, long "buys" text clamped */
.admin__bar-actions {
  display: flex;
  gap: var(--spacing-8px);
}

.crm__contact-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12px);
  padding: var(--spacing-12px) var(--spacing-16px) 0;
}

.crm__contact-filters > * {
  flex: 0 1 280px;
}

.crm__clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Buyers & partners: segment group headers, small labels (segment, source, owner), pager, inline checkboxes */
.crm__table--partners th:nth-child(1) { width: 18%; }
.crm__table--partners th:nth-child(2) { width: 15%; }
.crm__table--partners th:nth-child(3) { width: 15%; }
.crm__table--partners th:nth-child(4) { width: 26%; }
.crm__table--partners th:nth-child(5) { width: 12%; }
.crm__table--partners th:nth-child(6) { width: 14%; }

.crm__table .crm__group-row th {
  width: auto;
  padding: var(--spacing-16px) var(--spacing-16px) var(--spacing-8px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  background-color: var(--colors-base-white);
  color: var(--colors-base-black);
}

.crm__table tbody tr.crm__group-row {
  cursor: default;
}

.crm__table tbody tr.crm__group-row:hover {
  background-color: transparent;
}

.crm__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4px, 4px);
  margin-top: var(--spacing-6px, 6px);
}

.crm__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--spacing-8px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black-opacity-black-opacity-60);
  font: 600 11px/1 var(--font-family-body), system-ui, sans-serif;
  white-space: nowrap;
}

.crm__tag.is-green {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

.crm__tag.is-blue {
  background-color: rgb(61 104 196 / 0.12);
  color: var(--colors-blue-500);
}

.crm__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8px);
  padding: var(--spacing-12px) var(--spacing-16px);
}

.crm__pager .crm__muted {
  margin-right: auto;
}

.crm__pager .crm__seg[disabled] {
  opacity: 0.4;
  cursor: default;
}

.crm__inline-check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8px);
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}

.crm__contact-filters > .crm__inline-check,
.crm__contact-filters > .crm__segs {
  flex: none;
}

.crm__table--contacts th:nth-child(1) { width: 20%; }
.crm__table--contacts th:nth-child(2) { width: 14%; }
.crm__table--contacts th:nth-child(3) { width: 20%; }
.crm__table--contacts th:nth-child(4) { width: 13%; }
.crm__table--contacts th:nth-child(5) { width: 12%; }
.crm__table--contacts th:nth-child(6) { width: 21%; }

/* Estimate, no call: one more column (Headcount) */
.crm__table--nocall th:nth-child(1) { width: 11%; }
.crm__table--nocall th:nth-child(2) { width: 20%; }
.crm__table--nocall th:nth-child(3) { width: 11%; }
.crm__table--nocall th:nth-child(4) { width: 10%; }
.crm__table--nocall th:nth-child(5) { width: 13%; }
.crm__table--nocall th:nth-child(6) { width: 10%; }
.crm__table--nocall th:nth-child(7) { width: 11%; }
.crm__table--nocall th:nth-child(8) { width: 14%; }

/* Deals: header actions, file list (manifest, agreements), deals + pitches tables */
.crm__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8px);
}

.crm__files {
  display: grid;
  gap: var(--spacing-8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm__file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-12px);
  padding: var(--spacing-12px);
  border-radius: var(--radius-12, 12px);
  background-color: var(--colors-neutral-100);
}

.crm__file-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-8, 8px);
  background-color: var(--colors-red-50);
  color: var(--colors-red-700);
  font: 700 10px/1 var(--font-family-body), system-ui, sans-serif;
  letter-spacing: 0.04em;
}

.crm__file-text {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm__table--deals th:nth-child(1) { width: 24%; }
.crm__table--deals th:nth-child(2) { width: 15%; }
.crm__table--deals th:nth-child(3) { width: 14%; }
.crm__table--deals th:nth-child(4) { width: 14%; }
.crm__table--deals th:nth-child(5) { width: 15%; }
.crm__table--deals th:nth-child(6) { width: 18%; }

.crm__table-scroll {
  overflow-x: auto;
}

.crm__table--pitches {
  min-width: 560px;
}

.crm__table--pitches tbody tr {
  cursor: default;
}

.crm__table--pitches tbody tr:hover {
  background-color: transparent;
}

.crm__table--pitches th:nth-child(1) { width: 26%; }
.crm__table--pitches th:nth-child(2) { width: 21%; }
.crm__table--pitches th:nth-child(3) { width: 18%; }
.crm__table--pitches th:nth-child(4) { width: 22%; }
.crm__table--pitches th:nth-child(5) { width: 13%; }

.crm__table--pitches .crm__text-btn {
  white-space: nowrap;
}

.crm__table--pitches td {
  vertical-align: middle;
}

.crm__pitch-add {
  padding-top: var(--spacing-12px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

/* fit badge under the company in the CRM table (20+ desk employees = qualified) */
.crm__fit {
  display: inline-block;
  margin-top: var(--spacing-6px, 6px);
}

/* CRM list: 50 rows at a time */
.crm__more {
  display: flex;
  justify-content: center;
  padding: var(--spacing-16px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

/* ---- outbounds: campaigns, sequence editor with live preview, contacts ---- */
[data-view='outbounds'],
[data-outbound] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
}

.crm__stats--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.crm__table--outbounds th:nth-child(1) { width: 26%; }
.crm__table--outbounds th:nth-child(2) { width: 10%; }
.crm__table--outbounds th:nth-child(3) { width: 18%; }
.crm__table--outbounds th:nth-child(4) { width: 12%; }
.crm__table--outbounds th:nth-child(5) { width: 14%; }
.crm__table--outbounds th:nth-child(6) { width: 20%; }

.out__process > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-12px);
  color: var(--colors-base-black);
  cursor: pointer;
}

.out__process textarea {
  font: 500 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.out__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8px) var(--spacing-12px);
}

.out__foot > .crm__muted {
  margin-right: auto;
}

.out__dirty {
  color: var(--colors-yellow-800);
}

.out__steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
}

.out__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  padding-top: var(--spacing-16px);
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.out__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8px) var(--spacing-16px);
  color: var(--colors-base-black);
}

.out__wait-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8px);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.crm__input.out__wait {
  width: 64px;
  height: 36px;
  padding: 0 var(--spacing-12px);
  text-align: center;
}

.out__step-tools {
  display: inline-flex;
  gap: var(--spacing-12px);
  margin-left: auto;
}

.out__step-tools .crm__text-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.out__step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16px);
  align-items: start;
}

.out__step-edit,
.out__preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  min-width: 0;
}

.out__step-edit .crm__textarea {
  min-height: 160px;
}

.out__preview-mail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  padding: var(--spacing-16px) var(--spacing-20px);
  border-radius: var(--radius-control);
  background-color: var(--colors-neutral-100);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.out__preview-subject {
  margin: 0;
  padding-bottom: var(--spacing-12px);
  border-bottom: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  color: var(--colors-base-black);
}

.out__preview-body {
  color: var(--colors-base-black);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.out__var {
  border-radius: 4px;
  background-color: var(--colors-yellow-100);
  color: inherit;
}

.out__var.is-unknown {
  background-color: rgb(229 92 39 / 0.14);
  color: var(--colors-orange-600);
}

.out__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12px);
}

/* contacts: inline status pickers open over the rows, so the card can't clip */
.crm__table-card.out__contacts {
  overflow: visible;
}

.out__contacts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12px);
  padding: var(--spacing-20px) var(--spacing-16px) 0;
}

.out__contacts-note {
  padding: var(--spacing-8px) var(--spacing-16px) 0;
}

.out__empty {
  padding: var(--spacing-16px);
}

.crm__table--outcontacts tbody tr {
  cursor: default;
}

.crm__table--outcontacts th:nth-child(1) { width: 25%; }
.crm__table--outcontacts th:nth-child(2) { width: 22%; }
.crm__table--outcontacts th:nth-child(3) { width: 15%; }
.crm__table--outcontacts th:nth-child(4) { width: 18%; }
.crm__table--outcontacts th:nth-child(5) { width: 20%; }

.page-admin .out__status .ui-field,
.crm__input.out__note {
  height: 40px;
  padding-left: var(--spacing-12px);
  font-size: 13px;
}

@media (max-width: 1023px) {
  .crm__stats--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .out__step-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* team tab: inline row actions (Generate key / Revoke) */
.crm__row-actions {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

/* sections/article-body.css */
/*
 * News article body — Figma 429:4645 ("Rich text" 720 wide, centred in the 1280 container).
 * The markdown is turned into these blocks by scripts/article.mjs; the vertical rhythm is the only thing the
 * flow needs, so it is expressed as margins between siblings (Figma auto layout gaps):
 *   paragraph -> next element   16   (font/paragraph spacing 16px)
 *   before an h2 (section)      64   after it 24
 *   before an h3 (content item) 64   after it 16
 *   before a quote              64
 *   before the CTA button       24
 *   above the timeline          24   (it already had 24 under it)
 *   around the table            32   (16 of the rhythm plus 16 of its own)
 * The column ends 80 above the share row (Figma: Rich text padding-bottom 80).
 */

.article-body {
  display: flex;
  flex-direction: column;
}

.article {
  /* Figma: text column 720 wide (unbound, no token) */
  width: 720px;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: var(--spacing-80px);
  color: var(--colors-base-black);
}

.article > * {
  margin-block: 0;
}

.article > * + * {
  margin-block-start: var(--spacing-16px);
}

.article > .article__heading--2,
.article > .article__heading--3,
.article > .quote {
  margin-block-start: var(--spacing-64px);
}

.article > .article__heading--2 + *,
.article > .timeline + .article__paragraph {
  margin-block-start: var(--spacing-24px);
}

.article > .article__cta {
  margin-block-start: var(--spacing-24px);
}

/* the table gets 16 of its own above and below, on top of the 16 the flow already gives it (owner, 2026-09-20) */
.article > .table {
  margin-block: var(--spacing-32px);
}

/* the timeline sits 24 clear above, the same as the paragraph under it (owner, 2026-09-20) */
.article > .timeline {
  margin-block-start: var(--spacing-24px);
}

.article > :first-child {
  margin-block-start: 0;
}

/* links inside the text keep the body colour and are underlined, as in Figma (the CTA button is not a link
   in that sense, so it keeps the button styling) */
.article a:not(.button) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.16em;
  transition: color var(--motion-duration-hover) var(--motion-ease-out);
}

.article a:not(.button):hover {
  color: var(--colors-orange-500);
}

.article strong {
  font-weight: var(--font-weight-semi-bold-600);
}

/* Tablet, 768–1199 (no Figma frame; derived from the desktop per docs/responsive-system.md). */
@media (max-width: 1199px) {
  .article {
    padding-bottom: var(--section-rhythm);
  }
}

/* Mobile, 320–767 (no Figma frame). The tablet block above applies here too. */
@media (max-width: 767px) {
  .article > .article__heading--2,
  .article > .article__heading--3,
  .article > .quote {
    margin-block-start: var(--spacing-40px);
  }

  .article__heading--2 {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }

  .article__heading--3 {
    font-size: var(--typography-display-xs-regular-font-size);
    letter-spacing: var(--typography-display-xs-regular-letter-spacing);
    line-height: var(--typography-display-xs-regular-line-height);
  }

  /* body copy drops to Text md (16), like the priced-data intro on the homepage (owner, 2026-09-20) */
  .article__paragraph {
    font-size: var(--typography-text-md-medium-font-size);
    letter-spacing: var(--typography-text-md-medium-letter-spacing);
    line-height: var(--typography-text-md-medium-line-height);
  }
}

/* sections/article-hero.css */
/*
 * News article hero — Figma 429:4631 (section 1440 × 924).
 * .container, padding-block 80. Title block 844 wide, centred, gap 24: eyebrow (Caption 12px Orange/500),
 * H1 Display xl/Regular, meta row (date · By <author>, Caption 12px; the date in neutral/dark-gray).
 * Cover 1062 × 500, centred, radius 16, 64 below the title block.
 */

.article-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-64px);
  padding-block: var(--spacing-80px);
}

.article-hero__title {
  /* Figma: title block 844 wide (unbound, no token) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
  width: 844px;
  max-width: 100%;
  text-align: center;
}

.article-hero__eyebrow {
  color: var(--colors-orange-500);
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8px);
}

.article-hero__date {
  color: var(--library-neutral-dark-gray);
}

.article-hero__author {
  color: var(--colors-base-black);
}

/* same 6 × 6 separator as the blog card meta row */
.article-hero__dot {
  width: var(--spacing-6px);
  height: var(--spacing-6px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-black-opacity-black-opacity-20);
}

.article-hero__cover {
  /* Figma: cover 1062 × 500 (unbound) */
  display: block;
  overflow: hidden;
  width: 1062px;
  max-width: 100%;
  border-radius: var(--radius-16);
}

.article-hero__image {
  display: block;
  aspect-ratio: 1062 / 500;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Tablet, 768–1199 (no Figma frame; derived from the desktop per docs/responsive-system.md). */
@media (max-width: 1199px) {
  .article-hero {
    gap: var(--spacing-40px);
    padding-block: var(--section-rhythm);
  }

  #article-title {
    font-size: var(--typography-display-lg-regular-font-size);
    letter-spacing: var(--typography-display-lg-regular-letter-spacing);
    line-height: var(--typography-display-lg-regular-line-height);
  }
}

/* Mobile, 320–767 (no Figma frame). The tablet block above applies here too. */
@media (max-width: 767px) {
  .article-hero {
    gap: var(--spacing-32px);
  }

  .article-hero__title {
    gap: var(--spacing-16px);
  }

  /* the 1062 / 500 cover is only 160 tall at 375; the blog-card mobile ratio reads better */
  .article-hero__image {
    aspect-ratio: 343 / 240;
  }

  #article-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* sections/audience.css */
/*
 * Homepage audience cards — Figma 349:2377. Layout only.
 * Full-bleed section with a bg-dark background (Figma update 2026-09-17), inner .container .grid,
 * padding-block 120. Two article-card, each 628 = .span-6 (gutter 24).
 */

.audience {
  padding-block: var(--section-rhythm);
  background-color: var(--colors-bg-bg-dark);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2713: two cards 344 wide, 16 apart */
  .audience .grid {
    column-gap: var(--grid-gutter);
  }
}

/* sections/contact-choices.css */
/*
 * Contact flow choices picked by the owner on 2026-10-01: role grid, industry icon tiles,
 * estimate with small units. Every boxed control uses --radius-control (layout.css).
 * This file concatenates before contact.css, so selectors repeat a class to outrank the base rules there.
 */

/* ---- Role: equal tiles, four per row ---- */
.choices.choices--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.choices.choices--grid .choice__face {
  justify-content: center;
  width: 100%;
  height: 48px;
  padding-inline: var(--spacing-8px);
  border-radius: var(--radius-control);
  white-space: nowrap;
}

/* ---- Industry: icon over label, three per row ---- */
.choices.choices--tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.choices.choices--tiles .choice__face {
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8px);
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: var(--spacing-16px) var(--spacing-12px);
  border-radius: var(--radius-control);
  text-align: center;
}

.choices.choices--tiles .choice__icon {
  width: 24px;
  height: 24px;
}

/* ---- Estimate: the $ shrinks and lifts, the digits carry the weight ---- */

.estimate-card .estimate-card__range .u {
  font-size: inherit;
}

.estimate-card .estimate-card__range {
  font-size: 52px;
  font-weight: 500;
  white-space: nowrap;
}

.estimate-card .estimate-card__range .u {
  margin-inline: 1px;
  font-size: 0.5em;
  vertical-align: 0.6em;
}

@media (max-width: 767px) {
  .choices.choices--grid,
  .choices.choices--tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* sections/contact-v2.css */
/*
 * Contact flow in the v2 style (homepage-v2): monochrome, serif titles, black pill buttons. Scoped to
 * body.v2.page-contact so the live contact page is untouched until v2 ships.
 */

body.v2.page-contact .contact__panel,
body.v2.page-contact .panel {
  background-color: transparent;
  box-shadow: none;
}

body.v2.page-contact .contact__title {
  font-family: var(--font-family-title), Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

body.v2.page-contact .contact__progress li.is-done {
  background-color: var(--colors-base-black);
}

body.v2 .button {
  border-radius: 999px;
}

body.v2 .button--primary {
  --button-fill: var(--colors-base-black);
  --button-stroke: transparent;
  color: var(--colors-base-white);
}

body.v2 .button--primary:not(:disabled, [aria-disabled='true'], .button--disabled):hover {
  --button-fill: rgb(26 26 23 / 0.85);
}

body.v2 .button--primary .button__label,
body.v2 .button--primary svg {
  color: var(--colors-base-white);
}

body.v2.page-contact .choice input:checked + .choice__face {
  background-color: var(--colors-base-black);
  box-shadow: none;
  color: var(--colors-base-white);
}

body.v2.page-contact .choice input:focus-visible + .choice__face,
body.v2.page-contact .segment__option input:focus-visible + span,
body.v2.page-contact .check-row input:focus-visible ~ .check-row__box {
  outline-color: var(--colors-base-black);
}

body.v2.page-contact .size-table .segment__option input:checked + span::before {
  box-shadow: inset 0 0 0 5px var(--colors-base-black);
}

body.v2.page-contact .check-row input:checked ~ .check-row__box {
  background-color: var(--colors-base-black);
  box-shadow: none;
}

body.v2.page-contact .check-row:hover,
body.v2.page-contact .check-row:has(input:checked) {
  background-color: rgb(26 26 23 / 0.04);
}

body.v2.page-contact .contact__done-icon {
  background-color: var(--colors-base-black);
}

body.v2.page-contact .calendar__spinner {
  border-top-color: var(--colors-base-black);
}

body.v2.page-contact .estimate-card__graphic {
  display: none;
}

@media (max-width: 767px) {
  body.v2.page-contact .estimate-card__hero {
    background-color: var(--colors-base-black);
  }
}

/* labs flow */

body.v2.page-contact [data-labs] .contact__step > fieldset + fieldset,
body.v2.page-contact [data-labs] .contact__step > fieldset + .field {
  margin-top: -8px; /* the step's 32px gap reads too loose between the question groups */
}

body.v2.page-contact .field__input--area {
  height: auto;
  min-height: 96px;
  padding-top: 14px;
  padding-bottom: 14px;
  resize: vertical;
  font: inherit;
}

/* .contact__panel sets display:flex, which would otherwise beat the hidden attribute when switching flows */
body.page-contact .contact__panel[hidden] {
  display: none;
}

/* ---- industry step (v2): grouped by area of specialization; four review styles via data-industry-style ---- */

body.v2.page-contact .contact__step[data-step='2'] {
  width: 860px;
}

body.v2 .industries {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  text-align: left;
}

body.v2 .industries__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(26 26 23 / 0.6);
}

body.v2 .industries__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

body.v2 .industries .choice__face .industries__dot {
  display: none;
}

/* The four box styles keep the production tile (a white box per industry); only the box treatment changes. */
body.v2 .industries .choices.choices--tiles {
  grid-template-columns: repeat(3, 1fr);
}

/* A: classic, icon over label, centred (production look in monochrome) */
body.v2 .industries[data-industry-style='a'] .choices.choices--tiles .choice__face {
  min-height: 92px;
}

/* B: icon in a small badge top-left, label bottom-left */
body.v2 .industries[data-industry-style='b'] .choices.choices--tiles {
  grid-template-columns: repeat(4, 1fr);
}

body.v2 .industries[data-industry-style='b'] .choices.choices--tiles .choice__face {
  align-items: flex-start;
  justify-content: space-between;
  min-height: 104px;
  padding: 14px;
  border-radius: 12px;
  text-align: left;
}

body.v2 .industries[data-industry-style='b'] .choice__icon {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 8px;
  background-color: rgb(26 26 23 / 0.06);
}

body.v2 .industries[data-industry-style='b'] .choice input:checked + .choice__face .choice__icon {
  background-color: rgb(255 255 255 / 0.14);
}

/* C: compact rows, icon left of the label */
body.v2 .industries[data-industry-style='c'] .choices.choices--tiles .choice__face {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 10px;
  text-align: left;
}

body.v2 .industries[data-industry-style='c'] .choice__icon {
  width: 18px;
  height: 18px;
}

/* D: outline only; picking one keeps the box light, darkens the border and shows the area's drawn dot */
body.v2 .industries[data-industry-style='d'] .choices.choices--tiles .choice__face {
  position: relative;
  min-height: 92px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(26 26 23 / 0.14);
}

body.v2 .industries[data-industry-style='d'] .choice__face .industries__dot {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.v2 .industries[data-industry-style='d'] .choice input:checked + .choice__face {
  background: rgb(26 26 23 / 0.03);
  box-shadow: inset 0 0 0 1.5px var(--colors-base-black);
  color: var(--colors-base-black);
}

body.v2 .industries[data-industry-style='d'] .choice input:checked + .choice__face .industries__dot {
  opacity: 1;
}

@media (max-width: 767px) {
  body.v2 .industries .choices.choices--tiles,
  body.v2 .industries[data-industry-style='b'] .choices.choices--tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- review toolbar (iteration only) ---- */
.cv-review {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: 16px;
  background-color: var(--colors-base-black);
  color: #fff;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
}

.cv-review__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.cv-review__row > span {
  width: 78px;
  font: 500 10px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.cv-review button {
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
  cursor: pointer;
}

.cv-review button[aria-pressed='true'] {
  background-color: #fff;
  color: var(--colors-base-black);
}


/* sections/contact.css */
/*
 * Contact / estimate flow — Figma 467:2321 (steps 2–8; step 1 dropped and steps 4–5 made industry-agnostic by the
 * owner, 2026-10-01). One page, one form; js/contact.js shows one .contact__step at a time.
 * Panel: section padding 0 8 8, bg-dark, hairline, radius 16, min-height 756 (Figma), content centred.
 * Progress: 6 bars, gap 8, 4 tall, radius 30, Green/500 done, Neutral/300 to do, inset 12 / 16.
 * Back: secondary button, 44 tall, top-left 35 / 15. Titles Display md, column 628 (720 industry and size, 848 estimate, 760 calendar).
 * Pills: white, 1px Black 15%, radius full, padding 10 16, Text md/Medium; selected Green/500 + white text.
 * Primary CTA full width, 52 tall. Notes Text sm/Medium muted, centred.
 */

.contact {
  padding: 0 var(--spacing-8px) var(--spacing-8px);
}

.contact__panel {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: max(756px, calc(100svh - 76px));
  padding: var(--spacing-56px, 56px) var(--spacing-64) var(--spacing-56px, 56px);
}

.contact__progress {
  position: absolute;
  top: var(--spacing-12px);
  right: var(--spacing-16px);
  left: var(--spacing-16px);
  display: flex;
  gap: var(--spacing-8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__progress li {
  flex: 1 1 0;
  height: 4px;
  border-radius: 30px;
  background-color: var(--colors-neutral-300);
  transition: background-color 300ms ease;
}

.contact__progress li.is-done {
  background-color: var(--colors-green-500);
}

.contact__form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact__step {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: var(--spacing-32px);
  width: 628px;
  max-width: 100%;
  animation: contact-in 320ms ease both;
}

.contact__step[hidden] {
  display: none;
}

.contact__step[data-step='2'],
.contact__step[data-step='3'] {
  width: 720px;
}

.contact__step[data-step='5'] {
  /* sized so a typical range (~445px at 52px) sits 40px from each edge-pinned graphic (153px wide) */
  width: 848px;
}

.contact__step[data-step='6'] {
  /* wide enough for Calendly's two-column layout (calendar beside the times), which fills the frame */
  width: 1040px;
}

@keyframes contact-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.contact__title {
  margin: 0;
  color: var(--colors-base-black);
  text-align: center;
}

.contact__title:focus {
  outline: none;
}

.contact__lede {
  margin: calc(-1 * var(--spacing-12px)) 0 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

.contact__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24px);
}

.contact__row {
  display: flex;
  gap: var(--spacing-16px);
}

.contact__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
}

.contact__buttons {
  display: flex;
  gap: var(--spacing-12px);
}

.contact__next {
  flex: 1 1 auto;
  height: 52px;
}

.contact__back {
  flex: none;
  height: 52px;
  padding-inline: var(--spacing-20px);
}

.contact__back-icon {
  transform: rotate(180deg);
}

.contact__note {
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

.contact__email {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact__optional {
  color: var(--colors-base-black-opacity-black-opacity-50);
  font-weight: var(--font-weight-regular-400, 400);
}

.contact__error {
  position: fixed;
  bottom: var(--spacing-24px);
  left: 50%;
  margin: 0;
  padding: var(--spacing-12px) var(--spacing-20px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-black);
  color: var(--colors-base-white);
  transform: translateX(-50%);
}

/* ---- fields ---- */

.field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-8px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* label to control: 12px everywhere. A legend is not a flex item, so it carries the space as a margin. */
.field {
  gap: var(--spacing-12px);
}

fieldset.field > legend {
  margin-bottom: var(--spacing-12px);
}

.field--center .field__label {
  text-align: left;
}

.field__label {
  padding: 0;
  color: var(--colors-base-black);
}

.field__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--spacing-20px) 0 22px;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.field__input::placeholder {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.field__input:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-30);
}

.field__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-blue-500);
}

.field__input[aria-invalid='true'] {
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-orange-500);
}

.field [hidden] {
  display: none;
}

/* ---- pills (role, industry) ---- */

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8px);
}

.choice {
  position: relative;
}

.choice input,
.segment__option input,
.check-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__face {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8px);
  padding: 10px var(--spacing-16px);
  border-radius: var(--radius-9999);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-base-black);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    color var(--motion-duration-hover) var(--motion-ease-out);
}

.choice__face:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-35);
}

.choice__icon {
  flex-shrink: 0;
}

.choice input:checked + .choice__face {
  background-color: var(--colors-green-500);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-20);
  color: var(--colors-base-white);
}

.choice input:focus-visible + .choice__face,
.segment__option input:focus-visible + span,
.check-row input:focus-visible ~ .check-row__box {
  outline: var(--spacing-2px) solid var(--colors-blue-500);
  outline-offset: var(--spacing-2px);
}

/* ---- size step ---- */

.size-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24px);
}

.size-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.size-row__label {
  padding: 0;
  color: var(--colors-base-black);
  font-weight: var(--font-weight-semi-bold-600);
}

.segment {
  display: grid;
  grid-template-columns: repeat(var(--segment-count), 1fr);
  gap: var(--spacing-8px);
}

.segment__option {
  position: relative;
  min-width: 0;
}

.segment__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-base-black);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-out),
    box-shadow var(--motion-duration-hover) var(--motion-ease-out),
    color var(--motion-duration-hover) var(--motion-ease-out);
}

/* one white card per question, options as radio dots (owner pick, 2026-10-01) */
.size-table {
  gap: var(--spacing-8px);
}

.size-table .size-row {
  flex-direction: row;
  align-items: center;
  padding: var(--spacing-16px) var(--spacing-20px);
  border-radius: var(--radius-control);
  background-color: var(--colors-base-white);
}

.size-table .size-row__label {
  margin-bottom: 0;
  float: left; /* a legend only joins the flex row when floated */
  flex: 0 0 160px;
}

.size-table .segment {
  flex: 1 1 0;
}

.size-table .segment__option span {
  justify-content: flex-start;
  gap: var(--spacing-8px);
  height: 32px;
}

.size-table .segment__option span::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--colors-base-black-opacity-black-opacity-25);
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.size-table .segment__option input:checked + span::before {
  box-shadow: inset 0 0 0 5px var(--colors-green-500);
}

/* ---- systems checkboxes ---- */

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4px) var(--spacing-8px);
  padding: var(--spacing-8px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
}

.check-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12px);
  padding: var(--spacing-12px);
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-out);
}

.check-row:hover,
.check-row:has(input:checked) {
  background-color: var(--colors-neutral-100);
}

.check-row__box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7.2px;
  box-shadow: inset 0 0 0 1.2px var(--colors-base-black-opacity-black-opacity-25);
  background: no-repeat center / 14px 10px;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-out);
}

.check-row input:checked ~ .check-row__box {
  background-color: var(--colors-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'%3E%3Cpath d='M17 1L6 12L1 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1.2px var(--colors-base-white-opacity-white-opacity-15);
}

.check-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--colors-base-black);
}

.check-row__hint {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

/* ---- estimate (Figma step-7) ---- */

.estimate-card {
  overflow: hidden;
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
}

.estimate-card__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4px);
  overflow: hidden;
  justify-content: center;
  min-height: 168px;
  margin: var(--spacing-8px);
  padding: var(--spacing-32px) 140px;
  border-radius: var(--radius-12);
  background-color: var(--colors-neutral-100);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
  text-align: center;
}

.estimate-card__graphic {
  /* the whole graphic always shows: scaled to the hero's height, never cropped */
  position: absolute;
  top: 50%;
  width: auto;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.estimate-card__graphic--left {
  left: 0;
  object-position: left center;
  transform: translateY(-50%);
}

.estimate-card__graphic--right {
  right: 0;
  object-position: right center;
  transform: translateY(-50%);
}

.estimate-card__range {
  position: relative;
  margin: 0;
  color: var(--colors-base-black);
  font-family: var(--typography-text-md-semi-bold-font-family), var(--font-fallback-sans);
  font-size: 56px;
  font-weight: var(--font-weight-semi-bold-600);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.estimate-card__sub {
  position: relative;
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.estimate-card__meters[role='list'] {
  margin: 0;
  padding: var(--spacing-4px) var(--spacing-24px) var(--spacing-12px);
  list-style: none;
}

.meter-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-20px);
  padding: var(--spacing-16px) 0;
}

.meter-row + .meter-row {
  border-top: var(--spacing-1px) solid var(--color-hairline);
}

.meter-row__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  color: var(--colors-base-black);
}

.meter-row__hint {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.meter {
  flex: 0 0 186px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-9999);
  background-color: var(--colors-neutral-200);
}

.meter__fill {
  display: block;
  width: calc(var(--meter, 0) * 100%);
  height: 100%;
  border-radius: 3px;
  background-color: var(--meter-color, var(--colors-green-500));
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.meter-row__status {
  display: flex;
  flex: 0 0 96px;
  justify-content: flex-end;
}

.status-pill {
  padding: var(--spacing-8px) var(--spacing-12px);
  border-radius: var(--radius-9999);
  background-color: var(--meter-color, var(--colors-green-500));
  color: var(--meter-ink, var(--colors-base-white));
}

/* ---- calendar (step 7) ---- */

.calendar {
  /* Calendly draws its own card, so no second card here. A loading line shows until the frame's load event.
     Calendly's page opens with ~75px of empty space above its card: the frame is pulled up 60px under a clip. */
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.calendar iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  opacity: 0;
  transition:
    opacity 300ms ease,
    height 200ms ease;
}

.calendar.is-ready iframe {
  opacity: 1;
}

.calendar__loading {
  position: absolute;
  top: 120px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12px);
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  transition: opacity 200ms ease;
}

.calendar.is-ready .calendar__loading {
  opacity: 0;
  pointer-events: none;
}

.calendar__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--colors-neutral-300);
  border-top-color: var(--colors-green-500);
  border-radius: 50%;
  animation: calendar-spin 800ms linear infinite;
}

@keyframes calendar-spin {
  to {
    transform: rotate(360deg);
  }
}

.calendar:has(.calendar__empty) {
  min-height: 0;
}

.calendar__empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--spacing-32px);
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

/* the contact page fills the screen: no footer, the header stays */
.page-contact .footer {
  display: none;
}

@media (max-width: 1199px) {
  .contact__panel {
    padding: 96px var(--spacing-32px) var(--spacing-48px);
  }
}

@media (max-width: 767px) {
  .contact__panel {
    padding: 88px var(--spacing-16px) var(--spacing-32px);
  }

  .contact__row {
    flex-direction: column;
    align-items: stretch;
  }

  .check-grid {
    grid-template-columns: 1fr;
  }

  .segment__option span {
    font-size: 14px;
  }

  .size-table .size-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacked: keep the legend floated (an unfloated legend is drawn on the fieldset's top edge, outside the white
     card) but drop the 160px basis, which in a column became a 160px-tall gap */
  .size-table .size-row__label {
    flex: none;
    width: 100%;
    margin-bottom: 0;
  }

  .size-table .segment {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__back .button__label {
    display: none;
  }

  .estimate-card__range {
    font-size: 40px;
  }

  .estimate-card__graphic {
    display: none;
  }

  .estimate-card__hero {
    padding-inline: var(--spacing-16px);
  }

  .meter-row {
    flex-wrap: wrap;
    gap: var(--spacing-8px) var(--spacing-12px);
  }

  .meter-row__text {
    flex-basis: 100%;
  }

  .meter {
    flex: 1 1 0;
  }
}

.contact__next[hidden] {
  display: none;
}

/* ---- booked (step 7): shown when Calendly reports a booking ---- */

.contact__step[data-step='7'] {
  align-items: center;
  width: 560px;
  text-align: center;
}

.contact__done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: calc(-1 * var(--spacing-8px));
  border-radius: 50%;
  background-color: var(--colors-green-500);
  color: var(--colors-base-white);
  animation: contact-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes contact-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.booking-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4px);
  margin-top: calc(-1 * var(--spacing-16px));
}

.booking-summary p {
  margin: 0;
}

.booking-card__when {
  color: var(--colors-base-black);
}

.booking-card__meta {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.is-booked .header__home-link {
  visibility: hidden;
}

.contact__done .contact__actions {
  width: 100%;
}

.contact__home {
  justify-content: center;
  height: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .contact__done-icon {
    animation: none;
  }
}

/* /contact?book: calendar only */
.is-book-only .contact__progress {
  display: none;
}

/* Calendly's desktop page opens with ~75px of empty space above its card: pull the frame up 60px under the clip.
   Its narrow layouts start right at the top, so below 1200 the frame is left where it is. */
@media (min-width: 1200px) {
  .calendar iframe {
    margin-top: -60px;
  }
}

/* phones: the estimate sits on a solid green panel with white figures, not a grey box inside a white one */
@media (max-width: 767px) {
  .estimate-card__hero {
    min-height: 0;
    padding: var(--spacing-32px) var(--spacing-12px);
    background-color: var(--colors-blue-500);
    box-shadow: none;
    container-type: inline-size;
  }

  /* bold and sized to the panel: a $xxx,xxx–$xxx,xxx range fills ~90% of the width; 7-figure ranges step down */
  .estimate-card .estimate-card__range {
    color: var(--colors-base-white);
    font-size: 10.5cqi;
    font-weight: 700;
  }

  .estimate-card .estimate-card__range.is-long {
    font-size: 8.4cqi;
  }
}

/* desk employees: the label carries a one-line hint under it; five answers (3 + 2 on phones) */
.size-row__hint {
  display: block;
  margin-top: 2px;
  color: var(--colors-base-black-opacity-black-opacity-60);
  font-weight: var(--font-weight-medium-500, 500);
}

/* six options never fit one row inside the card (labels collided, 2026-10-21): two rows of three at every width */
.size-table .size-row--desk .segment {
  grid-template-columns: repeat(3, 1fr);
}

/* sections/cta.css */
/*
 * Homepage CTA — Figma 349:2440. Layout only.
 * Section padding 0 / 8 / 8 (Spacing/8px). Panel padding 120 / 64 (Spacing/120px, spacing-64), content centered,
 * max 689 wide (unbound): heading + actions gap 24, actions gap 8. Graphics 378 wide, absolute at the left and right
 * edges (cta-bg_l 349:2465, cta-bg_r 349:2448; orientation baked into the SVGs).
 */

.cta {
  padding: 0 var(--spacing-8px) var(--spacing-8px);
}

.cta__panel {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: var(--section-rhythm) var(--spacing-64);
}

.cta__graphic {
  position: absolute;
  top: 0;
  pointer-events: none;
}

.cta__graphic--left {
  left: 0;
}

.cta__graphic--right {
  right: 0;
}

.cta__content {
  --cta-content-width: 689px;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
  width: var(--cta-content-width);
  max-width: 100%;
  text-align: center;
}

.cta__actions {
  display: flex;
  gap: var(--library-spacing-8);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2813: panel padding 80 / 144, content 464; the corner drawings sit below the panel and are clipped */
  .cta__panel {
    padding: var(--spacing-80px) var(--spacing-144px);
  }

  .cta__content {
    width: 100%;
  }

  .cta__graphic {
    display: none;
  }

  #cta-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:3267 has 64 / 32. Owner (2026-10-01): 12 at the sides, the same inset as the hero content, so the
     two buttons get the same width as the hero's and their labels fit on one line */
  .cta__panel {
    padding: var(--spacing-64px) var(--spacing-12px);
  }

  #cta-title {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }
}

/* sections/hero.css */
/*
 * Homepage hero — Figma 349:2175. Layout only.
 * Section padding 0 / 8 (Spacing/8px). Panel (.panel--glow) column: graphic 1424 × 347 full width (hero-graphic-xl.svg since 2026-09-17), gap 24
 * (Spacing/24px), content column 707 wide, padding-bottom 64 (Spacing/64px). Heading group gap 16, actions gap 8.
 * Height: the panel fills 90% of the viewport (owner decision 2026-09-17; in Figma it is 711.78 tall). The graphic
 * stays at the top and the content column is centred in what is left. min-height, so the panel can still grow with
 * its content; svh keeps it stable while mobile browser bars appear and disappear.
 * Tablet (docs/responsive-spec.md): content fluid and capped at 640, H1 one step down (display-lg).
 */

.hero {
  padding-inline: var(--spacing-8px);
}

.hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
  overflow: hidden;
  min-height: 90vh;
  min-height: 90svh;
  padding-bottom: var(--spacing-64px);
}

/* one drawing per breakpoint (owner assets, 2026-09-19): 1424 × 347 desktop, 752 × 243 tablet, 359 × 173 mobile */
.hero__graphic {
  display: block;
  flex-shrink: 0;
  width: 100%;
}

.hero__graphic img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__content {
  /* Figma hero-column 707 wide (unbound, no token); widened to 860 for the 70px headline and 24px subtitle
     (owner, 2026-09-18) so both keep their two-line breaks */
  --hero-content-width: 1080px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
  width: var(--hero-content-width);
  max-width: 100%;
  text-align: center;
}

.hero__title {
  /* owner (2026-09-18): 70px instead of the 64px Display xl */
  font-size: 70px;
  /* owner (2026-10-01): a touch more leading than Display xl's 100% */
  line-height: 1.1;
}

.hero__subtitle {
  /* owner (2026-09-18): 20px instead of the 16px Text md, and never wider than the headline's longest line
     (the measured width of "Priced real-world data for" at 70px, 1440 frame) */
  --hero-subtitle-max: 720px;

  max-width: var(--hero-subtitle-max);
  font-size: var(--font-size-20px);
}

/* owner (2026-09-18): the leftover height below the graphic splits 4 : 5 above : below the content, so the headline
   sits a little higher than centred. Two flex spacers carry the split. */
.hero__spacer {
  flex: 4 1 0;
  min-height: 0;
  /* cancel the panel gap on the spacers so only the flex share counts */
  margin-block: calc(-1 * var(--spacing-24px)) 0;
}

.hero__spacer--below {
  flex-grow: 5;
  margin-block: 0 calc(-1 * var(--spacing-24px));
}

.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16px);
}

.hero__actions {
  display: flex;
  gap: var(--library-spacing-8);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2564: drawing 752 × 243, gap 24, content column 640 centred, 48 below */
  .hero__panel {
    gap: var(--spacing-24px);
    min-height: auto;
    padding-bottom: var(--spacing-48px);
  }

  .hero__content {
    width: var(--spacing-640px);
    max-width: 100%;
  }

  #hero-title {
    font-size: var(--typography-display-lg-regular-font-size);
    letter-spacing: var(--typography-display-lg-regular-letter-spacing);
    line-height: var(--typography-display-lg-regular-line-height);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:2893: drawing 359 wide (full panel), gap 12, content 335 (inset 12), 32 below */
  .hero__panel {
    gap: var(--spacing-12px);
    padding-bottom: var(--spacing-32px);
  }

  .hero__content {
    width: 100%;
    padding-inline: var(--spacing-12px);
  }

  #hero-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* phones: let the headline wrap on its own, balanced into even lines (no orphan word), and match the subtitle to
   the other sections' Text md */
/* below 1200 the manual break is gone (br-desktop), so balance the lines */
@media (max-width: 1199px) {
  .hero__title {
    text-wrap: balance;
  }
}

@media (max-width: 767px) {
  /* owner (2026-10-01): same size as the other section titles (Display lg) */
  #hero-title {
    font-size: var(--typography-display-lg-regular-font-size);
    letter-spacing: var(--typography-display-lg-regular-letter-spacing);
    line-height: var(--typography-display-lg-regular-line-height);
  }

  .hero__subtitle {
    font-size: var(--typography-text-md-medium-font-size);
    line-height: var(--typography-text-md-medium-line-height);
  }
}

/* owner (2026-10-01): more air above and below the drawing on tablet and phones, so the hero fills more height */
@media (max-width: 1199px) {
  .hero__panel {
    gap: var(--spacing-40px);
    padding-top: var(--spacing-40px);
    padding-bottom: var(--spacing-64px);
  }
}

@media (max-width: 767px) {
  .hero__panel {
    gap: var(--spacing-32px);
    padding-top: var(--spacing-32px);
    padding-bottom: var(--spacing-48px);
  }
}

/* sections/home-v2.css */
/*
 * Homepage v2 (branch homepage-v2). Everything is scoped to body.v2 so the rest of the site is untouched.
 * Monochrome page: black serif + Geist, mono labels, hairline rules. Colour appears only inside the
 * hand-drawn dots (/images/v2/dots.svg); every pencil stroke uses the #v2-pencil filter from index.html.
 */

body.v2 {
  --v2-bg: #faf9f6;
  --v2-ink: var(--colors-base-black);
  --v2-muted: rgb(26 26 23 / 0.6);
  --v2-faint: rgb(26 26 23 / 0.12);
  --v2-max: 1180px;
  --v2-gutter: clamp(16px, 4vw, 48px);
  background-color: var(--v2-bg);
  color: var(--v2-ink);
}

body.v2 .header {
  background-color: var(--v2-bg);
}

body.v2 .button--primary {
  background-color: var(--v2-ink);
  color: #fff;
}

.v2-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.v2-main {
  width: 100%;
  max-width: calc(var(--v2-max) + var(--v2-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--v2-gutter);
}

/* ---- type ---- */

.v2-mono {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

.v2-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v2-h2,
.v2-hero__title,
.v2-statement,
.v2-domain__title,
.v2-terms__list dt {
  font-family: var(--font-family-title), Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em; /* Figma -3%, every serif line on the page */
}

.v2-h2 {
  margin-top: 12px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
}

.v2-caption {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--v2-muted);
}

/* ---- hand-drawn figures ---- */

.v2-fig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.v2-ink {
  fill: none;
  stroke: var(--v2-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.85;
  filter: url(#v2-pencil);
}

.v2-ink--dashed {
  stroke-width: 1.1;
  stroke-dasharray: 2 5;
  stroke-opacity: 0.55;
}

.v2-grid {
  fill: none;
  stroke: var(--v2-ink);
  stroke-width: 0.8;
  stroke-dasharray: 2.5 3;
  stroke-opacity: 0.1;
}

/* ---- hero ---- */

.v2-hero {
  /* always exactly one screen tall under the sticky header; the drawing shrinks with short viewports so the
     headline and buttons never fall below the fold */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--header-height, 72px));
  /* more padding below than above, so the centred block sits higher and the gap above the drawing shrinks */
  padding: 0 0 clamp(48px, 9vh, 112px);
  text-align: center;
}

.v2-hero__figure {
  /* 780 x 300 drawing (2.6:1); ~410px of the screen is reserved for the text and buttons below it */
  width: min(100%, 1040px, calc((100svh - var(--header-height, 72px) - 410px) * 2.6));
  min-width: min(100%, 360px);
  margin: 0 0 clamp(16px, 3vh, 32px);
}

.v2-hero__title {
  max-width: 18em;
  text-wrap: balance; /* the two lines come out the same width */
  font-size: clamp(40px, min(5.6vw, 8.5svh), 72px);
  line-height: 1.04;
}

/* homepage hero: one sentence over two balanced lines, using more of the width */
.v2-hero__lede--wide {
  max-width: 46em;
  text-wrap: balance;
}

.v2-hero__lede span {
  display: block;
  text-wrap: balance; /* no one- or two-word last lines */
}

.v2-hero__lede span + span {
  margin-top: 0.6em; /* a line's worth of space between the two sentences */
}

.v2-hero__lede {
  max-width: 34em;
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-muted);
}

.v2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.v2-button {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  background-color: var(--v2-ink);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.v2-button:hover {
  opacity: 0.85;
}

.v2-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--v2-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
  transition: text-decoration-color 0.2s ease;
}

/* text links: underlined, no arrow (2026-10-17); the underline fades a little on hover */
.v2-link:hover {
  text-decoration-color: rgb(26 26 23 / 0.35);
}

.v2-button:focus-visible,
.v2-link:focus-visible {
  outline: 2px solid var(--v2-ink);
  outline-offset: 3px;
}

/* ---- sections ---- */

.v2-section {
  padding: clamp(48px, 7.5vh, 84px) 0 clamp(64px, 10vh, 112px); /* top tightened 2026-10-17 */
  border-top: 1px solid var(--v2-faint);
}

.v2-section__head {
  max-width: 40em;
  margin-bottom: clamp(32px, 5vh, 56px);
}

.v2-section__lede {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-muted);
}

.v2-intro {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}

.v2-statement p + p {
  margin-top: 0.8em;
}

.v2-statement {
  max-width: 24em;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
}

/* ---- domain coverage ---- */

.v2-domains {
  border-top: 1px solid var(--v2-faint);
}

.v2-domain {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--v2-faint);
}

.v2-domain__num {
  padding-top: 8px;
  font-size: 12px;
  color: var(--v2-muted);
}

.v2-domain__title {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
}

.v2-domain__text {
  max-width: 36em;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-muted);
}

.v2-domain__body .v2-link {
  display: inline-block;
  margin-top: 16px;
}

.v2-domain__fig {
  justify-self: end;
  width: 160px;
}

.v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.v2-tags li {
  padding: 4px 10px;
  border: 1px solid var(--v2-faint);
  border-radius: 999px;
  font-size: 13px;
  color: var(--v2-muted);
}

/* ---- engagement track + privacy ---- */

.v2-track .v2-fig--track {
  margin-bottom: 8px;
}

.v2-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.v2-stages li {
  padding-top: 8px;
}

.v2-stages .v2-mono {
  font-size: 12px;
  color: var(--v2-muted);
}

.v2-stage__title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
}

.v2-stages p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-muted);
}

.v2-track .v2-caption {
  margin-top: 40px;
}

.v2-stages--privacy li {
  padding-top: 20px;
  border-top: 1px solid var(--v2-ink);
}

/* ---- terms ---- */

.v2-terms__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.v2-terms__list dt {
  font-size: 24px;
}

.v2-terms__list dd {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-muted);
}

/* ---- faq (reuses .faq-item from components; only the frame changes) ---- */

.v2-faq .faq__list {
  width: 100%;
  max-width: 820px;
}

body.v2 .faq__list {
  gap: 0;
  border-top: 1px solid var(--v2-faint);
}

body.v2 .faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--v2-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v2 .faq-item[open] .faq-item__toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.29 8h11.42' stroke='%231a1a17' stroke-width='2.06' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--v2-faint);
}

/* ---- closing ---- */

.v2-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(60px, 9vh, 104px) 0 clamp(80px, 12vh, 140px);
  border-top: 1px solid var(--v2-faint);
  text-align: center;
}

.v2-close__fig {
  width: 220px;
  margin-bottom: 32px;
}

/* ---- page heroes (operators, labs) ---- */

.v2-subhero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, 8vh, 96px) 0 clamp(64px, 10vh, 112px);
  text-align: center;
}

.v2-subhero__fig {
  width: min(70%, 300px);
  margin-bottom: 28px;
}

.v2-subhero__title {
  max-width: 16em;
  margin-top: 14px;
  font-family: var(--font-family-title), Georgia, serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- engagements (prepared vs bespoke toggle, CSS only) ---- */

.v2-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 40px;
  padding: 4px;
  border: 1px solid var(--v2-faint);
  border-radius: 999px;
}

.v2-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-switch label {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.v2-switch input:checked + label {
  background-color: var(--v2-ink);
  color: #fff;
}

.v2-switch input:focus-visible + label {
  outline: 2px solid var(--v2-ink);
  outline-offset: 2px;
}

.v2-eng__bespoke,
.v2-eng:has(#v2-eng-bespoke:checked) .v2-eng__ots {
  display: none;
}

.v2-eng:has(#v2-eng-bespoke:checked) .v2-eng__bespoke {
  display: block;
}

.v2-protocol .v2-fig--protocol {
  margin-bottom: 8px;
}

.v2-protocol .v2-caption {
  margin-top: 40px;
}

/* ---- audience split ---- */

.v2-audience {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.v2-audience__card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--v2-faint);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.v2-audience__card:hover {
  border-color: rgb(26 26 23 / 0.35);
}

.v2-audience__fig {
  width: 200px;
  margin-bottom: 28px;
}

.v2-audience__title {
  font-family: var(--font-family-title), Georgia, serif;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.v2-audience__card p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-muted);
}

.v2-audience__card .v2-link {
  margin-top: auto;
  padding-top: 24px;
}

.v2-audience__card:hover .v2-link span {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .v2-audience {
    grid-template-columns: 1fr;
  }

  .v2-fig--protocol {
    display: none;
  }
}

/* ---- domain layout options (review page /domains-layouts) ---- */

.v2-option__tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--v2-ink);
  color: #fff;
  font-size: 12px;
}

.v2-option__note {
  max-width: 40em;
  margin-bottom: 48px;
  font-size: 14px;
  color: var(--v2-muted);
}

/* B: 2 x 2 grid */
.v2-dgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.v2-dgrid__card {
  padding: 32px;
  border: 1px solid var(--v2-faint);
  border-radius: 16px;
}

.v2-dgrid__fig {
  width: 180px;
  margin-bottom: 28px;
}

.v2-dgrid__card .v2-domain__num,
.v2-dcols__col .v2-domain__num {
  display: block;
  margin-bottom: 8px;
  padding: 0;
}

/* C: four columns */
.v2-dcols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.v2-dcols__col {
  padding-top: 24px;
  border-top: 1px solid var(--v2-ink);
}

.v2-dcols__fig {
  width: 140px;
  height: 90px;
  margin-bottom: 24px;
}

.v2-dcols__col .v2-domain__text {
  font-size: 16px;
}

/* D: index + detail (CSS-only tabs) */
.v2-dtabs {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 64px;
  align-items: start;
  border-top: 1px solid var(--v2-faint);
}

.v2-dtabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-dtabs > label {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v2-faint);
  font-family: var(--font-family-title), Georgia, serif;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: rgb(26 26 23 / 0.35);
  cursor: pointer;
  transition: color 0.2s ease;
}

.v2-dtabs > label .v2-mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0;
}

.v2-dtabs > input:checked + label,
.v2-dtabs > label:hover {
  color: var(--v2-ink);
}

.v2-dtabs > input:focus-visible + label {
  outline: 2px solid var(--v2-ink);
  outline-offset: 4px;
}

.v2-dtabs__panels {
  grid-column: 2;
  grid-row: 1 / span 5;
  padding-top: 32px;
}

.v2-dtabs__panel {
  display: none;
}

.v2-dtabs:has(#v2-dtab-0:checked) .v2-dtabs__panel--0,
.v2-dtabs:has(#v2-dtab-1:checked) .v2-dtabs__panel--1,
.v2-dtabs:has(#v2-dtab-2:checked) .v2-dtabs__panel--2,
.v2-dtabs:has(#v2-dtab-3:checked) .v2-dtabs__panel--3 {
  display: block;
}

.v2-dtabs__fig {
  width: min(100%, 360px);
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .v2-dgrid,
  .v2-dcols,
  .v2-dtabs {
    grid-template-columns: 1fr;
  }

  .v2-dtabs__panels {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- review-only domain layout switcher (homepage-v2) ---- */

.v2-dl__v {
  display: none;
}

.v2-dl[data-layout='a'] .v2-dl__v--a,
.v2-dl[data-layout='b'] .v2-dl__v--b,
.v2-dl[data-layout='c'] .v2-dl__v--c,
.v2-dl[data-layout='d'] .v2-dl__v--d {
  display: block;
}

.v2-review {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 20px;
  background-color: var(--v2-ink);
  color: #fff;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}

.v2-review__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
}

.v2-review .v2-mono {
  flex: 1;
  margin-right: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.v2-review button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 500 13px/1 'Geist Mono', ui-monospace, monospace;
  cursor: pointer;
}

.v2-review button.v2-review__wide {
  width: auto;
  padding: 0 12px;
}

.v2-review button[aria-pressed='true'] {
  background-color: #fff;
  color: var(--v2-ink);
}

/* ---- work with us: four layouts ---- */

.v2-wl__v {
  display: none;
}

.v2-wl[data-layout='a'] .v2-wl__v--a,
.v2-wl[data-layout='b'] .v2-wl__v--b,
.v2-wl[data-layout='c'] .v2-wl__v--c,
.v2-wl[data-layout='d'] .v2-wl__v--d {
  display: block;
}

.v2-wl a {
  color: inherit;
  text-decoration: none;
}

.v2-wl p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-muted);
}

/* B: open columns split by a rule */
.v2-wcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--v2-faint);
}

.v2-wcol {
  display: flex;
  flex-direction: column;
  padding: 40px 48px 40px 0;
}

.v2-wcol + .v2-wcol {
  padding: 40px 0 40px 48px;
  border-left: 1px solid var(--v2-faint);
}

.v2-wcol .v2-link {
  margin-top: 24px;
}

.v2-wcol:hover .v2-link span,
.v2-wbridge__side:hover .v2-link span {
  transform: translateX(3px);
}

/* C: shared drawing bridging the two sides */
.v2-wbridge {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.3fr) 1fr;
  gap: 40px;
  align-items: start;
}

.v2-wbridge__fig {
  align-self: center;
}

.v2-wbridge__side {
  display: flex;
  flex-direction: column;
}

.v2-wbridge__side:last-child {
  text-align: right;
  align-items: flex-end;
}

.v2-wbridge__side .v2-link {
  margin-top: 20px;
}

/* D: two large link lines */
.v2-wlines {
  border-top: 1px solid var(--v2-faint);
}

.v2-wline {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 40px;
  gap: 32px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--v2-faint);
}

.v2-wline__fig {
  display: block;
  width: 140px;
}

.v2-wline__title {
  font-family: var(--font-family-title), Georgia, serif;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.v2-wline p {
  margin-top: 0;
}

.v2-wline__arrow {
  justify-self: end;
  font-size: 28px;
  transition: transform 0.2s ease;
}

.v2-wline:hover .v2-wline__arrow {
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .v2-wcols,
  .v2-wbridge {
    grid-template-columns: 1fr;
  }

  .v2-wcol,
  .v2-wcol + .v2-wcol {
    padding: 32px 0;
    border-left: 0;
  }

  .v2-wcol + .v2-wcol {
    border-top: 1px solid var(--v2-faint);
  }

  .v2-wbridge__side:last-child {
    text-align: left;
    align-items: flex-start;
  }

  .v2-wline {
    grid-template-columns: 1fr 32px;
  }

  .v2-wline__fig {
    display: none;
  }

  .v2-wline p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---- large screens only (1920px+ wide, 1000px+ tall; laptops never get it): the site sits in a framed "laptop screen" box and scrolls inside it (as on kelvinwang.com).
   The page around the box is the same colour as the site; the box always leaves 50px above and below. ---- */

@media (min-width: 1920px) and (min-height: 1000px) {
  html:has(body.v2) {
    height: 100%;
    overflow: hidden;
    background-color: var(--v2-bg);
  }

  /* pinned to the window so it can never be scrolled out of place: always 50px above and below, 1728px wide
     (1440 + 20%) and centred, shrinking to keep at least 50px on the sides */
  body.v2 {
    --v2-box-h: calc(100dvh - 100px);
    position: fixed;
    top: 50px;
    bottom: 50px;
    left: max(50px, (100vw - 1728px) / 2);
    right: max(50px, (100vw - 1728px) / 2);
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(26 26 23 / 0.12);
    border-radius: 6px;
    background-color: var(--v2-bg);
  }

  /* review toggle: hide the box outline */
  html[data-frame-border='off'] body.v2 {
    border-color: transparent;
  }

  /* the hero fills the box exactly, like one screen */
  body.v2 .v2-hero {
    min-height: calc(var(--v2-box-h) - var(--header-height, 72px));
  }

  body.v2 .v2-hero__figure {
    width: min(100%, 1040px, calc((var(--v2-box-h) - var(--header-height, 72px) - 410px) * 2.6));
  }
}

/* forced line breaks in the hero only on wide screens; small screens wrap naturally */
@media (max-width: 900px) {
  .v2-br {
    display: none;
  }
}

/* ---- domains (index + detail): black square marker + two divider treatments (review) ---- */

.v2-domain__mark {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background-color: currentColor;
}

.v2-dtabs > label {
  align-items: center;
}

/* no line above the first domain or below the last (owner picked option 1, 2026-10-16) */
.v2-dl .v2-dtabs {
  border-top: 0;
}

.v2-dl .v2-dtabs > label:last-of-type {
  border-bottom: 0;
}

/* ---- round 6 (2026-10-16) ---- */

/* header buttons share the hero button's pill shape */
body.v2 .header .button {
  border-radius: 999px;
}

/* hero: drawing up 10%, text block up 20% (of their own heights); more room before the buttons */
.v2-hero__figure {
  transform: translateY(-10%);
}

.v2-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  transform: translateY(-20%);
}

/* the subtitle takes the headline's width (never wider): width 0 keeps it out of the block's sizing, min-width
   100% then stretches it to whatever the headline set */
.v2-hero__text .v2-hero__lede--wide {
  width: 0;
  min-width: 100%;
  max-width: none;
}

/* phones: fill each line to the headline's width instead of balancing (fewer, fuller lines) */
@media (max-width: 640px) {
  .v2-hero__text .v2-hero__lede--wide {
    text-wrap: pretty;
  }
}

.v2-hero .v2-actions {
  margin-top: 44px;
}

/* domain detail: six options for the right-hand side (review) */
.v2-det {
  display: none;
  margin-top: 28px;
}

.v2-dl[data-detail='a'] .v2-det--a,
.v2-dl[data-detail='b'] .v2-det--b,
.v2-dl[data-detail='c'] .v2-det--c,
.v2-dl[data-detail='d'] .v2-det--d,
.v2-dl[data-detail='e'] .v2-det--e,
.v2-dl[data-detail='f'] .v2-det--f {
  display: block;
}

.v2-det-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dot);
}

/* a: 2 x 2 tiles */
.v2-det-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v2-det-tiles li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--v2-faint);
  border-radius: 12px;
}

.v2-det-tiles strong {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
}

.v2-det-tiles li span:last-child {
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-muted);
}

/* b: table */
.v2-det-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.v2-det-table th {
  padding: 0 12px 10px 0;
  font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--v2-muted);
}

.v2-det-table td {
  padding: 14px 12px 14px 0;
  border-top: 1px solid var(--v2-faint);
  vertical-align: top;
  color: var(--v2-muted);
}

.v2-det-table td:first-child {
  font-weight: 500;
  color: var(--v2-ink);
}

/* c: annotated drawing */
.v2-det-annotated {
  max-width: 440px;
}

.v2-det-label {
  font: 500 11px 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  fill: var(--v2-ink);
}

/* d: data card */
.v2-det-card {
  padding: 20px 22px;
  border: 1px solid var(--v2-ink);
  border-radius: 4px;
  font-size: 12.5px;
}

.v2-det-card__head {
  padding-bottom: 12px;
  border-bottom: 1px dashed rgb(26 26 23 / 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.v2-det-card dl div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgb(26 26 23 / 0.15);
}

.v2-det-card dl div:last-child {
  border-bottom: 0;
}

.v2-det-card dt {
  color: var(--v2-muted);
}

/* e: chips */
.v2-det-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.v2-det-chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--v2-faint);
  border-radius: 999px;
  font-size: 16px;
}

/* f: numbered rows */
.v2-det-rows li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--v2-faint);
}

.v2-det-rows .v2-mono {
  font-size: 11px;
  color: var(--v2-muted);
}

.v2-det-rows__name {
  font-size: 16px;
  font-weight: 500;
}

.v2-det-rows__rec {
  font-size: 14px;
  color: var(--v2-muted);
}

/* engagement: bespoke flow variants (review) */
.v2-eng__bfig {
  display: none;
}

.v2-eng[data-bespoke='1'] .v2-eng__bfig--1,
.v2-eng[data-bespoke='2'] .v2-eng__bfig--2,
.v2-eng[data-bespoke='3'] .v2-eng__bfig--3,
.v2-eng[data-bespoke='4'] .v2-eng__bfig--4,
.v2-eng[data-bespoke='5'] .v2-eng__bfig--5,
.v2-eng[data-bespoke='6'] .v2-eng__bfig--6 {
  display: block;
}

.v2-protocol > .v2-eng__ots,
.v2-protocol > .v2-eng__bespoke {
  margin-bottom: 8px;
}

/* work with us: new splits (review) */
.v2-wsplit {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 48px;
  align-items: stretch;
}

.v2-wsplit__side {
  display: flex;
  flex-direction: column;
}

.v2-wsplit__side .v2-link,
.v2-walt .v2-link,
.v2-winv .v2-link,
.v2-wtabs__panel .v2-link {
  margin-top: 24px;
}

.v2-wsplit__rule svg {
  height: 100%;
}

.v2-walts {
  border-top: 1px solid var(--v2-faint);
}

.v2-walt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--v2-faint);
}

.v2-walt:nth-child(2) {
  grid-template-columns: 280px minmax(0, 1fr);
}

.v2-walt:nth-child(2) .v2-walt__fig {
  order: -1;
}

.v2-walt__text {
  display: flex;
  flex-direction: column;
  max-width: 34em;
}

.v2-wtabs {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 8px;
}

.v2-wtabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-wtabs > label {
  font-family: var(--font-family-title), Georgia, serif;
  font-size: clamp(32px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  color: rgb(26 26 23 / 0.3);
  cursor: pointer;
  padding-right: 24px;
}

.v2-wtabs > input:checked + label {
  color: var(--v2-ink);
}

.v2-wtabs__panel {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--v2-faint);
}

.v2-wtabs:has(#v2-wtab-0:checked) .v2-wtabs__panel--0,
.v2-wtabs:has(#v2-wtab-1:checked) .v2-wtabs__panel--1 {
  display: grid;
}

.v2-wtabs__panel > div:last-child {
  display: flex;
  flex-direction: column;
  max-width: 34em;
}

.v2-winvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.v2-winv {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border: 1px solid var(--v2-faint);
  border-radius: 16px;
}

.v2-winv--dark {
  border-color: var(--v2-ink);
  background-color: var(--v2-ink);
  color: #fff;
}

.v2-wl .v2-winv--dark p,
.v2-winv--dark .v2-link {
  color: rgb(255 255 255 / 0.75);
}

.v2-winv--dark .v2-link,
.v2-winv--dark .v2-audience__title {
  color: #fff;
}

.v2-winv--dark .v2-ink {
  stroke: #fff;
}

.v2-wl[data-layout='e'] .v2-wl__v--e,
.v2-wl[data-layout='g'] .v2-wl__v--g,
.v2-wl[data-layout='h'] .v2-wl__v--h,
.v2-wl[data-layout='i'] .v2-wl__v--i {
  display: block;
}

@media (max-width: 900px) {
  .v2-wsplit,
  .v2-walt,
  .v2-walt:nth-child(2),
  .v2-winvs,
  .v2-wtabs__panel,
  .v2-det-tiles {
    grid-template-columns: 1fr;
  }

  .v2-wsplit__rule {
    display: none;
  }
}

/* ---- responsive ---- */

@media (max-width: 900px) {
  .v2-intro {
    grid-template-columns: 1fr;
  }

  .v2-domain {
    grid-template-columns: 48px 1fr;
  }

  .v2-domain__fig {
    display: none;
  }

  .v2-stages,
  .v2-terms__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-fig--track {
    display: none;
  }
}

@media (max-width: 560px) {
  .v2-domain {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .v2-stages,
  .v2-terms__list {
    grid-template-columns: 1fr;
  }
}

/* ---- round 7: locked picks ---- */

/* domains: the drawing spans the full width of the detail column */
.v2-det-annotated {
  max-width: none;
  margin-top: 32px;
}

.v2-det-annotated .v2-fig {
  width: 100%;
}

/* work with us (B): no rule above the two columns */
.v2-wl .v2-wcols {
  border-top: 0;
}

/* domains: keep the index rows a fixed height whatever the selected panel's height. The panel spans an extra
   flexible fifth row, so any extra height lands there instead of stretching the four domain rows. */
.v2-dtabs {
  grid-template-rows: repeat(5, auto) 1fr;
}

.v2-dtabs__panels {
  grid-row: 1 / -1;
}

/* all four panels share one grid cell and only the selected one is visible, so the section always takes the
   tallest panel's height and nothing below it moves when switching domains */
.v2-dtabs__panels {
  display: grid;
}

.v2-dtabs__panel,
.v2-dtabs:has(#v2-dtab-0:checked) .v2-dtabs__panel--0,
.v2-dtabs:has(#v2-dtab-1:checked) .v2-dtabs__panel--1,
.v2-dtabs:has(#v2-dtab-2:checked) .v2-dtabs__panel--2,
.v2-dtabs:has(#v2-dtab-3:checked) .v2-dtabs__panel--3,
.v2-dtabs:has(#v2-dtab-4:checked) .v2-dtabs__panel--4 {
  display: block;
  grid-area: 1 / 1;
}

.v2-dtabs__panel {
  visibility: hidden;
}

.v2-dtabs:has(#v2-dtab-0:checked) .v2-dtabs__panel--0,
.v2-dtabs:has(#v2-dtab-1:checked) .v2-dtabs__panel--1,
.v2-dtabs:has(#v2-dtab-2:checked) .v2-dtabs__panel--2,
.v2-dtabs:has(#v2-dtab-3:checked) .v2-dtabs__panel--3,
.v2-dtabs:has(#v2-dtab-4:checked) .v2-dtabs__panel--4 {
  visibility: visible;
}

/* bespoke domain options (review): only the chosen one shows inside the Bespoke panel */
.v2-bsp {
  display: none;
}

.v2-dl[data-bsp='1'] .v2-bsp--1,
.v2-dl[data-bsp='2'] .v2-bsp--2,
.v2-dl[data-bsp='3'] .v2-bsp--3,
.v2-dl[data-bsp='4'] .v2-bsp--4 {
  display: block;
}

/* ---- round 10 (2026-10-16): mobile ---- */

/* engagement timeline: phones only, where the wide protocol drawing is hidden */
.v2-tl {
  display: none;
}

@media (max-width: 900px) {
  /* hero: no upward offsets on phones, clear space between the drawing and the text */
  .v2-hero__figure,
  .v2-hero__text {
    transform: none;
  }

  .v2-hero__figure {
    margin-bottom: 64px;
  }

  /* everything centred on phones */
  .v2-main .v2-section,
  .v2-main .v2-section__head,
  .v2-intro,
  .v2-close {
    text-align: center;
  }

  .v2-section__head,
  .v2-statement {
    margin-inline: auto;
  }

  .v2-intro .v2-label {
    margin-inline: auto;
  }

  .v2-switch {
    margin-inline: auto;
  }

  .v2-eng .v2-section__head + .v2-switch {
    display: flex;
    width: fit-content;
  }

  .v2-dtabs > label {
    justify-content: center;
  }

  .v2-dtabs__panels {
    text-align: center;
  }

  /* domains: drawings and the selector only, no descriptions */
  .v2-dtabs__panel .v2-domain__text {
    display: none;
  }

  .v2-det-annotated {
    margin-top: 8px;
  }

  .v2-terms__list,
  .v2-stages--privacy,
  .v2-wcols {
    text-align: center;
  }

  .v2-wcol {
    align-items: center;
  }

  .v2-wcol .v2-audience__fig {
    margin-inline: auto;
  }

  .v2-faq .faq__list {
    margin-inline: auto;
    text-align: left;
  }

  .v2-actions {
    justify-content: center;
  }

  /* engagement steps: left-aligned with a drawn dot timeline down the left edge */
  .v2-stages--tl {
    gap: 0;
    text-align: left;
  }

  .v2-stages--tl .v2-stage {
    position: relative;
    padding: 0 0 32px 48px;
  }

  .v2-stages--tl .v2-stage:last-child {
    padding-bottom: 0;
  }

  .v2-eng:has(#v2-eng-ots:checked) .v2-tl--p,
  .v2-eng:has(#v2-eng-bespoke:checked) .v2-tl--b {
    display: block;
  }


  .v2-tl {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28px;
  }

  .v2-tl__dot {
    position: absolute;
    top: 6px;
    left: calc(14px - var(--s) / 2);
    width: var(--s);
    height: var(--s);
    margin-top: calc((22px - var(--s)) / 2);
  }

  .v2-tl__seg {
    position: absolute;
    top: 34px;
    bottom: -6px;
    left: 2px;
    width: 24px;
    height: calc(100% - 28px);
    overflow: visible;
  }

  .v2-tl__tick {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 24px;
    height: 12px;
  }

  .v2-tl__sources {
    position: absolute;
    top: -30px;
    left: -6px;
    width: 40px;
    height: 30px;
    overflow: visible;
  }

  .v2-review--tl {
    left: 16px;
    right: auto;
  }
}

@media (min-width: 901px) {
  .v2-review--tl {
    display: none;
  }
}

@media (max-width: 900px) {
  /* domains on phones: the drawing sits above the selector list, no reserved row heights */
  .v2-dtabs {
    grid-template-rows: none;
  }

  .v2-dtabs__panels {
    grid-row: 1;
    grid-column: 1;
    padding: 0 0 16px;
  }

  /* drawing labels stay readable once the 640-wide drawing is scaled down to a phone */
  .v2-det-label {
    font-size: 19px;
  }
}

/* the pencil filter's region collapses on perfectly vertical lines, so timeline strokes draw without it */
.v2-tl .v2-ink {
  filter: none;
  stroke-opacity: 0.7;
}

@media (max-width: 900px) {
  .v2-det-label {
    font-size: 16px;
  }
}

/* ---- privacy (legal) and 404 in the v2 style ---- */

body.v2.page-legal .legal {
  max-width: calc(var(--v2-max) + var(--v2-gutter) * 2);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--v2-gutter) clamp(64px, 10vh, 112px);
}

body.v2.page-legal .legal__body {
  max-width: 720px;
}

body.v2.page-legal .legal__body h1,
body.v2.page-legal .legal__body h2 {
  font-family: var(--font-family-title), Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

body.v2.page-legal .legal__body h2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-faint);
}

body.v2.page-legal .legal__updated {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

body.v2.page-legal .legal__body p,
body.v2.page-legal .legal__body li {
  color: rgb(26 26 23 / 0.75);
}

body.v2.page-legal .legal__body a {
  color: var(--v2-ink);
}

.v2-notfound {
  min-height: calc(100svh - var(--header-height, 72px));
  justify-content: center;
}

/* industrial drawing options (review) */
.v2-ind {
  display: none;
}

.v2-dl[data-ind='1'] .v2-ind--1,
.v2-dl[data-ind='2'] .v2-ind--2,
.v2-dl[data-ind='3'] .v2-ind--3,
.v2-dl[data-ind='4'] .v2-ind--4 {
  display: block;
}

/* the review picker shows on every width while picking */
@media (min-width: 901px) {
  .v2-review--tl {
    display: flex;
  }
}

/* timeline dots sit 4px lower to centre on the step label line now that they're 14px */
@media (max-width: 900px) {
  .v2-tl__dot {
    top: 10px;
  }

  .v2-tl__seg {
    top: 32px;
  }
}

/* ---- review 2026-10-17: eyebrow case + domain panel layout (toggles in the review toolbar) ---- */

/* eyebrows: "lower" = all lowercase, "sentence" = as written (first letter capital) */
body.v2[data-eyebrow='lower'] .v2-label {
  text-transform: lowercase;
}

body.v2[data-eyebrow='sentence'] .v2-label {
  text-transform: none;
}

/* domains B: the drawing sits above the description in the right-hand column */
.v2-dl[data-dlayout='b'] .v2-dtabs__panel {
  display: flex !important; /* beats the per-tab :has(#id) display rules above */
  flex-direction: column;
}

.v2-dl[data-dlayout='b'] .v2-dtabs__panel .v2-det-annotated {
  order: -1;
  margin: 0 0 28px;
}


/* eyebrow -> heading gap (review): 1 = current 12px, then 20 / 28 / 40 */
body.v2 { --v2-eyegap: 12px; }
body.v2[data-eyegap='2'] { --v2-eyegap: 20px; }
body.v2[data-eyegap='3'] { --v2-eyegap: 28px; }
body.v2[data-eyegap='4'] { --v2-eyegap: 40px; }

body.v2 .v2-section__head .v2-label + .v2-h2 {
  margin-top: var(--v2-eyegap);
}

/* engagements: big sample button, left-aligned under the drawing */
.v2-eng__cta {
  display: flex;
  margin-top: 72px;
}


/* work with us: each side ends with the black button and a text link */
.v2-wcol__actions {
  justify-content: flex-start;
  margin-top: 28px;
}

.v2-wcol .v2-wcol__actions .v2-link {
  margin-top: 0;
}

.v2-wl a.v2-button {
  color: #fff; /* .v2-wl a sets ink on every link */
}

/* eyebrows removed (2026-10-17) except the thesis label, shown as written ("Thesis") */
.v2-label--thesis {
  text-transform: none;
}

/* get in touch: contact line under the title */
.v2-close .v2-section__lede a {
  color: var(--v2-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- engagement (option 1, 2026-10-17): plain-text toggle with the active one underlined; the big black
   sample button stays the one action ---- */
.v2-eng .v2-switch {
  gap: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.v2-eng .v2-switch label,
.v2-eng .v2-switch input:checked + label {
  padding: 0 0 6px;
  border-radius: 0;
  background: none;
  font-size: 16px;
  border-bottom: 1.5px solid transparent;
}

.v2-eng .v2-switch input:checked + label {
  color: var(--v2-ink);
  border-bottom-color: var(--v2-ink);
}

/* ---- domains: drawing + file types only (2026-10-17): no description; four extensions as outlined chips,
   centred under the drawing ---- */
.v2-dl .v2-dtabs__panel .v2-domain__text {
  display: none;
}

.v2-dl[data-dlayout='b'] .v2-dtabs__panel {
  align-items: center;
}

.v2-dl[data-dlayout='b'] .v2-dtabs__panel .v2-det-annotated {
  align-self: stretch;
  width: 100%;
  margin: 0;
}

.v2-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin: 40px 0 0;
}

.v2-formats dt {
  display: none;
}

.v2-formats code {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--v2-faint);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--v2-ink);
}

/* phones: the panel sits above the domain list, keep at least 60px between the chips and the list */
@media (max-width: 900px) {
  .v2-dl .v2-dtabs__panels {
    padding-bottom: 60px;
  }
}

/* areas of focus: the subtitle ends where the domain list's dividers end (left grid column: 5fr of 5fr + 6fr,
   less the 64px gap) */
@media (min-width: 901px) {
  .v2-dl .v2-section__head {
    max-width: none;
  }

  .v2-dl .v2-section__lede {
    max-width: calc((100% - 64px) * 5 / 11);
  }
}

/* ---- engagement: prepared datasets is three steps (bespoke keeps four) ---- */
.v2-eng:has(#v2-eng-ots:checked) .v2-stage--bespoke {
  display: none;
}

@media (min-width: 901px) {
  .v2-eng:has(#v2-eng-ots:checked) .v2-stages {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* engagement buttons: big license button, sample as a text link beside it */
.v2-eng__cta.v2-actions {
  justify-content: flex-start;
}



/* every button is 50px tall (2026-10-17), the nav buttons included */
body.v2 .header .button {
  height: 50px;
  padding-block: 0;
}


/* button arrows (2026-10-17): the three-dot arrow from the previous site, same staggered fade on hover
   (button.css drives it through --button-dots) */
.v2-button {
  --button-dots: 0;
  --button-dot-window: 0.3;
  gap: 6px;
  transition: opacity 0.2s ease, --button-dots var(--motion-duration-icon) linear;
}

.v2-button:hover {
  --button-dots: 1;
}

.v2-button .button__icon {
  flex-shrink: 0;
  margin-right: -4px;
}

.v2-wl a.v2-link {
  text-decoration: underline; /* .v2-wl a removes underlines on every link in that section */
}

/* homepage hero subtitle: 20px (2026-10-17) */
.v2-hero .v2-hero__lede {
  font-size: 20px;
}

/* ---- seller homepage (2026-10-17): html[data-audience='operators'] shows the seller hero title and process ---- */
.v2-aud--seller {
  display: none;
}

html[data-audience='operators'] .v2-aud--general {
  display: none;
}

html[data-audience='operators'] .v2-hero__title .v2-aud--seller {
  display: inline;
}

html[data-audience='operators'] section.v2-aud--seller {
  display: block;
}

@media (max-width: 900px) {
  .v2-eng--seller .v2-tl--b {
    display: block;
  }
}

/* four-step rows (seller licensing process, general bespoke requests): step descriptions 30% narrower than their
   column (2026-10-17) */
.v2-eng--seller .v2-stage p {
  max-width: 12.25em;
  text-wrap: balance;
}

/* bespoke copy runs longer: lines balanced so no step ends on one word */
.v2-eng .v2-eng__bespoke p {
  max-width: 14.5em;
  text-wrap: balance;
}

/* prepared datasets (three steps): columns hug their text and spread edge to edge, so the third step ends on the
   right edge and the gaps between steps are even; step 2 breaks after "its data". The dots follow the columns
   (script in engagement.html). */
@media (min-width: 901px) {
  .v2-eng:has(#v2-eng-ots:checked) .v2-stages {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }

  /* bespoke and the seller licensing process: same treatment, four columns */
  .v2-eng--seller .v2-stages,
  .v2-eng:has(#v2-eng-bespoke:checked) .v2-stages {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }
}

@media (max-width: 900px) {
  .v2-eng--seller .v2-stage p,
  .v2-eng .v2-eng__bespoke p {
    max-width: none;
  }
}

/* more room between a button and the text link beside it (2026-10-17) */
.v2-actions {
  gap: 36px;
}



/* sections/inventory.css */
/*
 * Data inventory (/inventory/<code>). Reuses the estimate flow's panel, progress bars, fields and pills from contact.css;
 * this file only adds what the inventory needs: wider steps for the catalog and per-system cards, textareas, the
 * headcount grid, small pills inside cards, and the autosave note. Concatenates after contact.css, so equal
 * specificity here wins.
 */

.inventory .contact__step.inventory__wide {
  width: 860px;
}

.inventory > [hidden] {
  display: none;
}

/* the 404 section sits inside .inventory, which already pads the page */
.inventory > .not-found {
  padding: 0;
}

/* the thank-you screen sits in the upper part of the panel, not dead centre */
.inventory .contact__step[data-step='5'] {
  align-self: flex-start;
  margin-top: 22vh;
}

.inventory .field[hidden] {
  display: none;
}

.inventory__saved {
  position: absolute;
  top: var(--spacing-24px);
  right: var(--spacing-16px);
  margin: 0;
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.field__input.field__input--area {
  height: auto;
  min-height: 96px;
  padding-block: var(--spacing-12px);
  line-height: 1.45;
  resize: vertical;
}

.inventory__hint {
  margin-top: calc(-1 * var(--spacing-8px));
  color: var(--colors-base-black-opacity-black-opacity-60);
}

/* headcount: label on the left, Today and At the most share the right column, lined up with the row above */
.inventory__grid-head,
.inventory__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-16px);
  align-items: center;
}

.inventory__pair-hint {
  display: block;
  margin-top: 2px;
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.inventory__pair-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12px);
}

.inventory__grid-head {
  margin-bottom: calc(-1 * var(--spacing-12px));
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.inventory__grid-head .inventory__pair-inputs span {
  padding-left: 22px;
}

/* the form's name sits where the estimate flow has Back to home */
.header__form-name {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

/* catalog: one white card per category, each with its own Add row */
.inventory__catalog {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
}

.inventory__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  margin: 0;
  padding: var(--spacing-20px);
  border: 0;
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
}

/* a legend sits on the fieldset's edge unless floated */
.inventory__group-title {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--colors-base-black);
}

.inventory__add {
  display: flex;
  gap: var(--spacing-8px);
}

.inventory__add .field__input {
  height: 44px;
  background-color: var(--colors-neutral-100);
}

.inventory__add-button {
  flex: none;
  height: 44px;
  padding-inline: var(--spacing-20px);
}

.inventory__count {
  margin: calc(-1 * var(--spacing-16px)) 0 0;
  color: var(--colors-green-500);
  text-align: center;
}

/* one card per system */
.inventory__systems {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
}

.inventory__system {
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.inventory__system-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-12px);
  padding: var(--spacing-16px) var(--spacing-20px);
  cursor: pointer;
  list-style: none;
}

.inventory__system-head::-webkit-details-marker {
  display: none;
}

.inventory__system-head::after {
  content: '+';
  margin-left: auto;
  color: var(--colors-base-black-opacity-black-opacity-50);
  font-size: 20px;
  line-height: 1;
}

.inventory__system[open] > .inventory__system-head::after {
  content: '–';
}

.inventory__progress-note {
  margin: calc(-1 * var(--spacing-16px)) 0 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

/* unanswered questions get a yellow outline (screens 1 and 4 when Continue is pressed early; system cards once
   saved or flagged); each clears as its answer goes in */
.inventory .field__input.is-missing,
.inventory .is-missing > .field__input,
.inventory .is-missing .mp__button,
.inventory fieldset.is-missing .choices {
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 var(--spacing-2px) var(--colors-yellow-600);
}

.inventory fieldset.is-missing .choices {
  padding: var(--spacing-6px, 6px);
}

.inventory .is-missing > .field__label,
.inventory .is-missing > legend,
.inventory .field:has(> .field__input.is-missing) > .field__label {
  color: var(--colors-yellow-800);
}

/* answers that can't be right (an end date before the start, a malformed email) go red */
.inventory .field__input.is-invalid,
.inventory .is-invalid > .field__input,
.inventory .is-invalid .mp__button {
  box-shadow: 0 0 0 var(--spacing-2px) var(--colors-orange-500);
}

.inventory .is-invalid > .field__label,
.inventory .field:has(> .field__input.is-invalid) > .field__label {
  color: var(--colors-orange-600);
}

.inventory__invalid {
  margin: calc(-1 * var(--spacing-12px)) 0 0;
  color: var(--colors-orange-600);
}

.inventory .inventory__system.is-flagged {
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-yellow-600);
}

.inventory .contact__next[aria-disabled='true'] {
  opacity: 0.45;
}


/* status icon: empty ring (not started), half ring (saved, answers missing), green check (complete) */
.inventory__status {
  display: inline-flex;
  flex: none;
  align-self: center;
  width: 20px;
  height: 20px;
}

.inventory__status svg {
  width: 100%;
  height: 100%;
}

.is-todo .inventory__status {
  color: var(--colors-base-black-opacity-black-opacity-25);
}

.is-progress .inventory__status {
  color: var(--colors-yellow-600);
}

.is-done .inventory__status {
  color: var(--colors-green-500);
}

.inventory__card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12px);
}

/* white with red text: takes a system out of the inventory */
.inventory__remove {
  display: inline-flex;
  gap: var(--spacing-6px, 6px);
  align-items: center;
  height: 44px;
  padding: 0 var(--spacing-16px);
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
  color: var(--colors-orange-600);
  cursor: pointer;
  transition: box-shadow var(--motion-duration-hover) var(--motion-ease-out);
}

.inventory__remove:hover {
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-orange-500);
}

.inventory__remove span {
  font-size: 18px;
  line-height: 1;
}

/* locations: − value + in one control */
.stepper {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 4px;
  border-radius: var(--radius-control);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-15);
}

.stepper:focus-within {
  box-shadow: inset 0 0 0 var(--spacing-2px) var(--colors-blue-500);
}

.stepper__button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: calc(var(--radius-control) - 4px);
  background-color: var(--colors-neutral-100);
  color: var(--colors-base-black);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.stepper__button:hover {
  background-color: var(--colors-neutral-200, #e6e4dc);
}

.stepper__value {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--colors-base-black);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.stepper__value:focus {
  outline: none;
}

.inventory__save {
  height: 44px;
  padding-inline: var(--spacing-32px);
}

.inventory__system-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.inventory__system-meta {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.inventory__system-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20px);
  padding: 0 var(--spacing-20px) var(--spacing-20px);
}

.inventory__system-body .field__input {
  background-color: var(--colors-neutral-100);
}

.inventory__dates {
  align-items: flex-end;
}

.inventory__check {
  display: inline-flex;
  flex: none;
  gap: var(--spacing-8px);
  align-items: center;
  height: 52px;
  cursor: pointer;
}

.inventory__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--colors-green-500);
}

.choices.choices--small .choice__face {
  padding: 7px var(--spacing-12px);
  font-size: 14px;
}

/* review */
.inventory__review {
  padding: var(--spacing-20px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
}

.inventory__review h2 {
  margin: 0 0 var(--spacing-8px);
}

.inventory__review-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--colors-base-black-opacity-black-opacity-70, rgb(0 0 0 / 0.7));
}

@media (max-width: 767px) {
  .inventory__saved {
    top: var(--spacing-24px);
  }

  .inventory__grid-head,
  .inventory__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--spacing-8px);
  }

  .inventory__catalog {
    padding: var(--spacing-16px);
  }

  .inventory__group {
    padding: var(--spacing-16px);
  }

  .inventory__save {
    flex: 1 1 auto;
  }

  .inventory__dates {
    align-items: stretch;
  }

  .inventory__check {
    height: auto;
  }

  .inventory__system-head {
    padding-inline: var(--spacing-16px);
  }
}

/* ---- month picker ---- */
.mp {
  position: relative;
}

.mp__button {
  text-align: left;
  cursor: pointer;
}

.mp__button.is-empty {
  color: var(--colors-base-black-opacity-black-opacity-50);
}

.mp__button:disabled {
  cursor: default;
  opacity: 0.45;
}

.mp__pop {
  position: absolute;
  top: calc(100% + var(--spacing-8px));
  left: 0;
  z-index: 20;
  width: 280px;
  padding: var(--spacing-12px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow:
    0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10),
    0 12px 32px rgb(26 26 23 / 0.14);
}

.mp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-8px);
}

.mp__nav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-9999);
  background: transparent;
  color: var(--colors-base-black);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mp__nav:hover,
.mp__month:not(:disabled):hover {
  background-color: var(--colors-neutral-100);
}

.mp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4px);
}

.mp__month {
  height: 40px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--colors-base-black);
  cursor: pointer;
}

.mp__month[aria-pressed='true'] {
  background-color: var(--colors-green-500);
  color: var(--colors-base-white);
}

.mp__month:disabled {
  color: var(--colors-base-black-opacity-black-opacity-25);
  cursor: default;
}

.mp__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-8px);
}

.mp__link {
  border: 0;
  background: transparent;
  color: var(--colors-base-black-opacity-black-opacity-60);
  cursor: pointer;
}

/* ---- manifest (last screen) ---- */
.inventory .inventory__review {
  padding: 0;
  background: none;
}

.manifest {
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10);
}

.manifest__label {
  margin: 0 0 var(--spacing-8px);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.manifest__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-4px) var(--spacing-12px);
  align-items: center;
  padding: var(--spacing-20px) var(--spacing-20px) var(--spacing-16px);
}

.manifest__title {
  margin: 0;
  color: var(--colors-base-black);
}

.manifest__edit {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.manifest__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-block: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.manifest__stat {
  padding: var(--spacing-12px) var(--spacing-20px);
}

.manifest__stat + .manifest__stat {
  border-left: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.manifest__stat dt {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.manifest__stat dd {
  margin: 2px 0 0;
  color: var(--colors-base-black);
  font-variant-numeric: tabular-nums;
}

.manifest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.manifest__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: start;
  gap: var(--spacing-4px) var(--spacing-12px);
  align-items: baseline;
  padding: var(--spacing-12px) var(--spacing-20px);
}

.manifest__row + .manifest__row {
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
}

.manifest__num {
  color: var(--colors-base-black-opacity-black-opacity-40, rgb(26 26 23 / 0.4));
  font-variant-numeric: tabular-nums;
}

.manifest__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.manifest__cat,
.manifest__meta {
  color: var(--colors-base-black-opacity-black-opacity-60);
}

@media (max-width: 767px) {
  .manifest__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .manifest__stat:nth-child(3) {
    border-left: 0;
  }

  .manifest__stat:nth-child(n + 3) {
    border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  }

  .manifest__row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .manifest__meta {
    grid-column: 2;
  }

  .mp__pop {
    width: min(280px, calc(100vw - 64px));
  }
}

/* ---- divider above the summary ---- */
.inventory__divider {
  width: 100%;
  height: 0;
  margin: var(--spacing-8px) 0;
  border: 0;
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-15);
}

/* ---- screen 1: reasons under fields, city search, languages ---- */
.field__error {
  margin-top: calc(-1 * var(--spacing-4px));
  color: var(--colors-orange-600);
}

.inventory .is-invalid .inventory__pair-inputs .field__input,
.inventory .is-invalid .place .field__input,
.inventory .is-invalid > .stepper {
  box-shadow: 0 0 0 var(--spacing-2px) var(--colors-orange-500);
}

.inventory .is-missing .inventory__pair-inputs .field__input:placeholder-shown,
.inventory .is-missing .place .field__input,
.inventory .is-missing .langs .field__input:invalid,
.inventory .is-missing .langs .ui-field.is-empty,
.inventory .is-missing .langs input.field__input:placeholder-shown {
  box-shadow: 0 0 0 var(--spacing-2px) var(--colors-yellow-600);
}

.inventory__pair-error {
  grid-column: 1 / -1;
  margin-top: 0;
}

.inventory .inventory__pair.is-invalid > .field__label {
  color: var(--colors-orange-600);
}

.place {
  position: relative;
}

.place__list {
  position: absolute;
  top: calc(100% + var(--spacing-6px, 6px));
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: var(--spacing-6px, 6px);
  overflow-y: auto;
  list-style: none;
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow:
    0 0 0 var(--spacing-1px) var(--colors-base-black-opacity-black-opacity-10),
    0 12px 32px rgb(26 26 23 / 0.14);
}

.place__option {
  padding: var(--spacing-10px, 10px) var(--spacing-12px);
  border-radius: var(--radius-8);
  color: var(--colors-base-black);
  cursor: pointer;
}

.place__option:hover,
.place__option[aria-selected='true'] {
  background-color: var(--colors-neutral-100);
}

.place__empty {
  padding: var(--spacing-10px, 10px) var(--spacing-12px);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.langs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
}

.langs__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--spacing-8px);
  align-items: center;
}

/* the × sits just outside the row so the fields line up with the rest of the form */
.langs__row .langs__remove {
  position: absolute;
  top: 50%;
  right: -44px;
  transform: translateY(-50%);
}

.field__select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231a1a17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.langs__pct {
  position: relative;
}

.langs__pct .field__input {
  padding-right: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.langs__pct span {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--colors-base-black-opacity-black-opacity-60);
  transform: translateY(-50%);
}

.langs__remove {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-9999);
  background: transparent;
  color: var(--colors-orange-600);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.langs__remove:hover {
  background-color: var(--colors-base-white);
}

.langs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-4px);
}

.inventory__add-lang {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-base-black);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.langs__total {
  padding: 4px var(--spacing-12px);
  border-radius: var(--radius-9999);
  background-color: rgb(240 82 44 / 0.1);
  color: var(--colors-orange-600);
  font-variant-numeric: tabular-nums;
}

.langs__total.is-ok {
  background-color: rgb(52 163 100 / 0.12);
  color: var(--colors-green-500);
}

@media (max-width: 767px) {
  .langs__row {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  /* no gutter on phones: the × goes inside the row instead */
  .langs__row:has(.langs__remove) {
    grid-template-columns: minmax(0, 1fr) 96px 36px;
  }

  .langs__row .langs__remove {
    position: static;
    transform: none;
  }
}

/* multi-division form: one card per division on screen 1 */
.divs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12px);
}

.divs__hint {
  margin: 0 0 var(--spacing-8px);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.divs__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
  padding: var(--spacing-12px);
  border-radius: var(--radius-12px, 12px);
  background-color: var(--colors-base-white);
}

.divs__name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-8px);
  align-items: end;
}

.divs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-8px);
}

.divs__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.inventory .is-missing .divs input.field__input:placeholder-shown,
.inventory .is-missing .divs .ui-field.is-empty {
  outline: 2px solid var(--colors-yellow-400, #f5c84c);
}

@media (max-width: 767px) {
  .divs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "someone else with this link made changes": a quiet bar above the steps */
.inventory__remote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8px) var(--spacing-12px);
  margin-bottom: var(--spacing-16px);
  padding: var(--spacing-12px) var(--spacing-16px);
  border-radius: var(--radius-12);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-yellow-600);
  color: var(--colors-base-black);
}

.inventory__remote-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colors-blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* the city list's last row: use exactly what was typed */
.place__manual {
  border-top: var(--spacing-1px) solid var(--colors-base-black-opacity-black-opacity-10);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

/* sections/legal.css */
/* Privacy policy and other legal text: one readable column, the same 720 measure as the article body. */
.legal {
  padding-block: var(--spacing-64px) var(--section-rhythm);
}

.legal__body {
  width: 720px;
  max-width: 100%;
  margin-inline: auto;
  color: var(--colors-base-black);
  font-family: var(--typography-text-md-medium-font-family), var(--font-fallback-sans);
  font-size: var(--typography-text-md-medium-font-size);
  line-height: 1.6;
}

.legal__body > * {
  margin-block: 0 var(--spacing-16px);
}

.legal__body h1 {
  margin-bottom: var(--spacing-8px);
}

.legal__updated {
  margin-bottom: var(--spacing-40px);
  color: var(--colors-base-black-opacity-black-opacity-60);
}

.legal__body h2 {
  margin-top: var(--spacing-40px);
}

.legal__body ul {
  padding-left: 1.25em;
}

.legal__body li + li {
  margin-top: var(--spacing-8px);
}

.legal__body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* sections/news-hero.css */
/*
 * News page hero — Figma 429:3344 (section 1440 × 522).
 * Section padding-inline 8 (Spacing/8px), like the homepage hero. Panel (.panel, no glow): padding 48 / 64,
 * content row 1296 wide — text column (fills, 760 at 1440) and the graphic 536 × 426 on the right, both
 * centred on the cross axis. Text column: gap 40 between the heading group and the subscribe block;
 * heading group gap 8 (H1 Display xl/Regular, subtitle Text lg/Medium Colors/Neutral/700, 720 wide);
 * subscribe block 418 wide, gap 16, with the light subscribe-field.
 * Desktop only for now — the page has no tablet or mobile frame yet.
 */

.news-hero {
  padding-inline: var(--spacing-8px);
}

.news-hero__panel {
  display: flex;
  align-items: center;
  padding: var(--spacing-48px) var(--spacing-64px);
}

.news-hero__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-40px);
  min-width: 0;
}

.news-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
}

.news-hero__subtitle {
  /* Figma: text box 720 wide (unbound) */
  max-width: 720px;
  color: var(--color-text-muted);
}

.news-hero__subscribe {
  /* Figma: block 418 wide (unbound) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  width: 418px;
  max-width: 100%;
}

.news-hero__subscribe .subscribe-field {
  --subscribe-field-width: 100%;
}

.news-hero__graphic {
  display: block;
  flex: 0 0 auto;
  width: 536px;
  height: auto;
}

/* Tablet, 768–1199 (no Figma frame; derived from the desktop per docs/responsive-system.md).
   Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* The 760 + 536 row does not fit: the panel stacks, text first, graphic centred under it.
     Panel padding-inline 24 + the section's 8 = the 32 page margin. */
  .news-hero__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-40px);
    padding: var(--spacing-48px) var(--spacing-24px);
  }

  .news-hero__graphic {
    align-self: center;
    width: 100%;
    /* 20% smaller than the desktop 536 (owner, 2026-09-20), so the stacked hero is not dominated by the drawing */
    max-width: 429px;
  }

  #news-hero-title {
    font-size: var(--typography-display-lg-regular-font-size);
    letter-spacing: var(--typography-display-lg-regular-letter-spacing);
    line-height: var(--typography-display-lg-regular-line-height);
  }
}

/* Mobile, 320–767 (no Figma frame). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Padding-inline 12 + the section's 8 = 20, the same inset as the homepage hero content on mobile */
  .news-hero__panel {
    gap: var(--spacing-24px);
    padding: var(--spacing-32px) var(--spacing-12px);
  }

  .news-hero__text {
    gap: var(--spacing-32px);
  }

  .news-hero__subscribe {
    width: 100%;
  }

  #news-hero-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* sections/news-index.css */
/*
 * News page list — Figma 429:3387 (section 1440 × 740).
 * Container 1280 (page margin 80). Section padding-block 80 / 120 (Spacing/80px, Spacing/120px).
 * Horizontal tabs, then 48 (Spacing/48px) down to the card grid: three blog-cards span-4, gutter 24.
 * Hidden cards (topic filter, src/js/topic-filter.js) are removed from the grid with [hidden].
 * Desktop only for now — the page has no tablet or mobile frame yet.
 */

.news-index {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48px);
  padding-block: var(--spacing-80px) var(--spacing-120px);
}

.news-index__list > [hidden] {
  display: none;
}

/* Tablet, 768–1199 (no Figma frame; derived from the desktop per docs/responsive-system.md).
   Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Section rhythm 64 top and bottom, tabs 32 above the cards, three cards in a row 16 apart (like Recent news) */
  .news-index {
    gap: var(--spacing-32px);
    padding-block: var(--section-rhythm);
  }

  .news-index .grid > .span-4 {
    grid-column: span 4;
  }
}

/* Mobile, 320–767 (no Figma frame). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* One card per row, 24 apart */
  .news-index {
    gap: var(--spacing-24px);
  }

  .news-index .grid {
    row-gap: var(--spacing-24px);
  }
}

/* sections/news.css */
/*
 * Homepage Recent news — Figma 349:2404. Layout only.
 * .container + padding-block 120. Column gap 48: head row SPACE_BETWEEN, cross END (title group gap 8 | "All news"),
 * then 3 blog-card = .grid .span-4 (410.67, gap 24).
 */

.news {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48px);
  padding-block: var(--section-rhythm);
}

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.news__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
}

.news__subtitle {
  /* Figma: Colors/Neutral/700 */
  color: var(--color-text-muted);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2759: head row unchanged, three cards in a row 16 apart */
  .news {
    gap: var(--spacing-32px);
  }

  .news .grid > .span-4 {
    grid-column: span 4;
  }

  #news-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:3213: the head stacks, cards one per row 24 apart; section margin 20 */
  .news {
    gap: var(--spacing-24px);
  }

  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24px);
  }

  .news .grid {
    row-gap: var(--spacing-24px);
  }

  #news-title {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }
}

/* sections/not-found.css */
/*
 * 404 — Figma 434:11673 (section 434:11693, 1440 × 696).
 * Section padding-inline 8 like the hero and the CTA; the panel is 1424 × 688 with the page's card surface.
 * Column 628 centred, 74 above and below: drawing 628 × 320, 32 down to the text, heading group gap 16
 * (H1 Display xl/Regular, line Text md/Medium), 24 down to the button.
 * Desktop only for now — the page has no tablet or mobile frame; the blocks below follow docs/responsive-system.md.
 */

.not-found {
  padding-inline: var(--spacing-8px);
  padding-bottom: var(--spacing-8px);
}

.not-found__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma: 74 above and below the 540 column */
  padding: 74px var(--spacing-24px);
}

.not-found__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-32px);
  /* Figma: column 628 wide (unbound, no token) */
  width: 628px;
  max-width: 100%;
  text-align: center;
}

.not-found__graphic {
  display: block;
  width: 100%;
  height: auto;
}

.not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
  width: 100%;
}

.not-found__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16px);
}

.not-found__text {
  color: var(--colors-base-black);
}

/* Tablet, 768–1199 (no Figma frame; derived from the desktop per docs/responsive-system.md). */
@media (max-width: 1199px) {
  .not-found__panel {
    padding: var(--section-rhythm) var(--spacing-24px);
  }

  #not-found-title {
    font-size: var(--typography-display-lg-regular-font-size);
    letter-spacing: var(--typography-display-lg-regular-letter-spacing);
    line-height: var(--typography-display-lg-regular-line-height);
  }
}

/* Mobile, 320–767 (no Figma frame). The tablet block above applies here too. */
@media (max-width: 767px) {
  .not-found__panel {
    padding: var(--spacing-48px) var(--spacing-12px);
  }

  .not-found__column {
    gap: var(--spacing-24px);
  }

  #not-found-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* sections/operators.css */
/*
 * Homepage operators section — Figma 349:2234. Layout only.
 * .container (80 margins) + padding-block 120 (Spacing/120px). Row SPACE_BETWEEN, cross CENTER:
 * collage 519 × 517 | column 628 wide: text group gap 32 (heading, list of 3 icon-wrapper gap 24), then the button
 * 32 below (Figma column 440 with SPACE_BETWEEN resolves to the same 32).
 */

.operators {
  display: flex;
  /* owner (2026-10-01): no button; the text and tiles are centred against the photos */
  align-items: center;
  justify-content: space-between;
  padding-block: var(--section-rhythm);
}

.operators__collage {
  flex-shrink: 0;
}

.operators__column {
  /* Figma column 628 wide (unbound) = 6 grid columns */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-32px);
  width: calc(6 * (100% + var(--grid-gutter)) / var(--grid-columns) - var(--grid-gutter));
}

.operators__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32px);
  width: 100%;
}

.operators__list {
  display: flex;
  gap: var(--spacing-24px);
}

/* the three separate photo blocks replace the collage on tablet only (see the tablet block below) */
.operators__photos {
  display: none;
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2586: one column — text, tiles, button, then the three photos */
  .operators {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-40px);
  }

  /* Figma: the text column comes first, the photos below it */
  .operators__column {
    order: -1;
    align-items: center;
    gap: var(--spacing-24px);
    width: 100%;
    text-align: center;
  }

  /* owner (2026-10-01): the three tiles stay on one row, scaled down to fit */
  .operators__list {
    gap: var(--spacing-12px);
  }

  /* the collage becomes three separate blocks (Figma 420:3437) */
  .operators__collage {
    display: none;
  }

  .operators__photos {
    display: flex;
    gap: var(--grid-gutter);
  }

  .operators__photo-column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--spacing-20px);
    min-width: 0;
  }

  .operators__photo {
    display: block;
    flex: 1 1 0;
    min-width: 0;
  }

  .operators__photo img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-16);
    object-fit: cover;
  }

  /* Figma: 344 × 201, 344 × 296, 344 × 517 */
  .operators__photo--top {
    aspect-ratio: 344 / 201;
  }

  .operators__photo--bottom {
    aspect-ratio: 344 / 296;
  }

  .operators__photo--tall {
    aspect-ratio: 344 / 517;
  }

  #operators-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:2915: text and tiles, then the collage as one image (343 × 333.7) */
  .operators {
    gap: var(--spacing-32px);
  }

  .operators__column {
    gap: var(--spacing-16px);
  }

  .operators__photos {
    display: none;
  }

  .operators__collage {
    display: block;
  }

  .operators__collage img {
    aspect-ratio: 343 / 333.7;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #operators-title {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }
}

/* sections/paid.css */
/*
 * Homepage "You get paid twice" — Figma 467:3898. .container, padding-block 120, gap 48 (head, cards, banner 24).
 * Two cards, gap 24: bg-dark, hairline, radius 24, padding 8, gap 8. Media 316 tall, radius 16, graphic 557 × 295
 * centred. Body: white, radius 16, padding 24, gap 24; Display sm title + Text md/Medium Neutral/700 sub; check list
 * at Text md/SemiBold. (The blue banner was removed by the owner, 2026-10-01.)
 */

.paid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48px);
  padding-block: var(--section-rhythm);
}

.paid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-24px);
}

.paid__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
  padding: var(--spacing-8px);
  border-radius: var(--radius-24);
  background-color: var(--color-surface-card);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--color-hairline);
}

.paid__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 316px;
  border-radius: var(--radius-16);
}

.paid__media img {
  display: block;
  width: 557px;
  max-width: none;
  height: auto;
}

.paid__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-24px);
  padding: var(--spacing-24px);
  border-radius: var(--radius-16);
  background-color: var(--colors-base-white);
}

.paid__sub {
  color: var(--color-text-muted);
}

.paid .check-list__text {
  font-size: var(--typography-text-md-semi-bold-font-size);
  letter-spacing: var(--typography-text-md-semi-bold-letter-spacing);
  line-height: var(--typography-text-md-semi-bold-line-height);
}

@media (max-width: 1199px) {
  .paid__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .paid__media {
    height: 220px;
  }

  .paid__media img {
    width: 420px;
  }
}

/* owner (2026-10-01): one CTA under the two cards, centred */
.paid__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--library-spacing-8); /* same gap as the hero buttons */
}

/* sections/partners.css */
/*
 * /partners: data broker application. Reuses the estimate form's panel, fields and buttons (sections/contact.css);
 * this adds the intro, the three-step "how it works" block (five layouts, .is-v1–5) and a slightly wider column.
 */

.partners__step {
  width: 720px;
  padding-block: var(--spacing-24px) 0;
}

.partners__intro {
  display: grid;
  gap: var(--spacing-12px);
  text-align: center;
}

.partners__label {
  color: var(--colors-base-black);
}

/* the three steps: brand-colored dots joined by a blue → yellow → green line, title under each */
.partners__how {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--spacing-16px);
}

.partners__how::before {
  position: absolute;
  top: 17px;
  right: calc(100% / 6);
  left: calc(100% / 6);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--colors-blue-500), var(--colors-yellow-500, #f8d26b) 50%, var(--colors-green-500));
  content: '';
}

.partners__item {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--spacing-12px);
  text-align: center;
}

.partners__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-9999);
  box-shadow: 0 0 0 5px var(--colors-neutral-100, #f2f0ea);
  color: var(--colors-base-white);
}

.partners__item:nth-child(1) .partners__num {
  background-color: var(--colors-blue-500);
}

.partners__item:nth-child(2) .partners__num {
  background-color: var(--colors-yellow-500, #f8d26b);
  color: var(--colors-base-black);
}

.partners__item:nth-child(3) .partners__num {
  background-color: var(--colors-green-500);
}

.partners__form-title {
  margin: var(--spacing-8px) 0 0;
  color: var(--colors-base-black);
}

/* thank-you step: centred like the estimate form's "You're booked!" */
.page-partners .contact__done {
  align-items: center;
  width: 560px;
  text-align: center;
}

@media (max-width: 720px) {
  .partners__how {
    grid-template-columns: minmax(0, 1fr);
  }

  .partners__how::before {
    display: none;
  }
}

/* one line under the steps: what the 50/50 split is in dollars */
.partners__example {
  margin: calc(-1 * var(--spacing-12px)) 0 0;
  color: var(--colors-base-black-opacity-black-opacity-60);
  text-align: center;
}

/* the "don't just sell raw data" line sits under the steps */
.partners__lede {
  margin: calc(-1 * var(--spacing-8px)) 0 0;
  text-align: center;
}

/* hidden until js/partners.js sees the visitor came from elsewhere on arloh.ai (no flash for ad visitors) */
.page-partners .header__home-link {
  visibility: hidden;
}

.page-partners.is-from-site .header__home-link {
  visibility: visible;
}

/* sections/priced-data.css */
/*
 * Homepage "What is priced real-world data?" — Figma 349:2267. Layout only.
 * .container + padding-block 120. Row gap 24: tab column (.panel--radius-24) 518 wide, padding 24, SPACE_BETWEEN,
 * intro padding 8 gap 16, tablist gap 8 | .priced-data__panels: the three .tab-media (737 × 602) stacked in one
 * grid cell so they can cross-fade.
 */

.priced-data {
  display: flex;
  gap: var(--spacing-24px);
  padding-block: var(--section-rhythm);
}

/* the wrapper exists only so the tablet layout can turn the section into one card; on desktop it is transparent */
.priced-data__inner {
  display: contents;
}

.priced-data__tabs {
  /* Figma tab-column 518 wide (unbound, no token) */
  --priced-data-tabs-width: 518px;

  display: flex;
  flex: 0 1 var(--priced-data-tabs-width);
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-32px);
  min-width: 0;
  padding: var(--spacing-24px);
}

.priced-data__panels {
  display: grid;
  flex: 1 1 var(--tab-media-width, 737px);
  min-width: 0;
}

.priced-data__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16px);
  padding: var(--spacing-8px);
}

.priced-data__tablist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
}

/* Tablet, 768–1199 (Figma frame 419:2550, 768 wide). Desktop rules above stay as the base. */
@media (max-width: 1199px) {
  /* Figma 419:2612: one bg-dark card holds the intro and the three tab cards; no tab list */
  .priced-data {
    display: block;
  }

  .priced-data__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--grid-gutter);
    padding: var(--spacing-24px);
    border-radius: var(--radius-24);
    background-color: var(--color-surface-card);
  }

  /* the tab column dissolves: its intro becomes the first row, the tab list is replaced by the card labels */
  .priced-data__tabs {
    display: contents;
  }

  .priced-data__intro {
    margin-bottom: var(--spacing-8px);
  }

  .priced-data__tablist {
    display: none;
  }

  .priced-data__panels {
    display: contents;
  }

  .priced-data__panels > .tab-media {
    grid-area: auto;
  }

  .priced-data__intro p {
    max-width: var(--spacing-560px);
  }

  #priced-data-title {
    font-size: var(--typography-display-md-regular-font-size);
    letter-spacing: var(--typography-display-md-regular-letter-spacing);
    line-height: var(--typography-display-md-regular-line-height);
  }
}

/* Mobile, 320–767 (Figma frame 419:2873, 375 wide). The tablet block above applies here too. */
@media (max-width: 767px) {
  /* Figma 419:2941: no card around the section; intro, then three cards 8 apart */
  .priced-data__inner {
    row-gap: var(--spacing-8px);
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .priced-data__intro {
    margin-bottom: var(--spacing-16px);
    padding: 0;
  }

  /* Figma 419:2946: the intro drops to Text md here (it stays Text lg on tablet) */
  .priced-data__intro p {
    font-size: var(--typography-text-md-medium-font-size);
    letter-spacing: var(--typography-text-md-medium-letter-spacing);
    line-height: var(--typography-text-md-medium-line-height);
  }

  #priced-data-title {
    font-size: var(--typography-display-sm-regular-font-size);
    letter-spacing: var(--typography-display-sm-regular-letter-spacing);
    line-height: var(--typography-display-sm-regular-line-height);
  }
}

/* sections/privacy.css */
/*
 * Homepage "Privacy is the product" — Figma 467:4027. Full-bleed bg-dark section, .container, padding-block 120,
 * gap 48. Row: photo 519 wide (radius 16, stretches to the list height) | list 651 wide, bottom rule and each item's
 * top rule Neutral dark 16%, item padding-top 40, gap 40, list padding-bottom 40. Item: node 40 + Display sm title
 * (gap 16) on the left, Text md/Medium description 302 wide on the right.
 */

.privacy {
  background-color: var(--colors-bg-bg-dark);
}

.privacy__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48px);
  padding-block: var(--section-rhythm);
}

.privacy__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-48px);
}

.privacy__photo {
  display: block;
  flex: 0 0 519px;
  overflow: hidden;
  border-radius: var(--radius-16);
}

.privacy__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.privacy .privacy__list {
  display: flex;
  flex: 0 1 651px;
  flex-direction: column;
  gap: var(--spacing-40px);
  margin: 0;
  padding: 0 0 var(--spacing-40px);
  border-bottom: var(--spacing-1px) solid rgb(26 26 23 / 0.16);
  list-style: none;
}

.privacy__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-24px);
  padding-top: var(--spacing-40px);
  border-top: var(--spacing-1px) solid rgb(26 26 23 / 0.16);
}

.privacy__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-16px);
}

.privacy__text {
  flex: 0 0 302px;
  color: var(--colors-base-black);
}

@media (max-width: 1199px) {
  #privacy-title {
    text-align: center;
  }

  .privacy__row {
    flex-direction: column;
  }

  .privacy__photo {
    flex-basis: auto;
    aspect-ratio: 16 / 9;
  }

  .privacy .privacy__list {
    flex-basis: auto;
  }
}

@media (max-width: 767px) {
  .privacy__item {
    flex-direction: column;
  }

  .privacy__text {
    flex-basis: auto;
  }
}

/* sections/workflow.css */
/*
 * Homepage "How it works" — Figma 467:3346 (vertical). .container, padding-block 120, row SPACE_BETWEEN, cross START.
 * Left: 410 wide, heading group (Display lg, Text md/Medium Neutral/700, gap 8) + primary button, gap 24.
 * Right: 737 wide, the two environment blocks stacked with gap 4 and the green dots icon (20, turned 90°) between.
 * Block: radius 24, clip, bar fill (#E3E1DA yours, Green/500 Arloh) padding 0 4 4; label row 12 / 16, Caption 12
 * uppercase + status dot (Orange/500 yours, Yellow/500 Arloh). Card: white, 1px rgb(26 26 23 / 0.19), radius 20,
 * padding 24 / 16. Step: node 40 + vertical dotted connector 65 (last one fades), gap 16 to the text (Text xl/Medium
 * title, Text md/Medium Neutral/700 body, gap 8, right padding 8).
 */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8px);
  width: 846px;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.section-head__sub {
  color: var(--color-text-muted);
}

/* numbered node shared by How it works and Privacy (Figma Tab/active, 40 circle) */
.step-node {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-9999);
  background-color: var(--step-node);
  box-shadow: inset 0 0 0 var(--spacing-1px) var(--colors-base-white-opacity-white-opacity-10);
  color: var(--colors-base-white);
  font-family: var(--typography-text-sm-semi-bold-font-family), var(--font-fallback-sans);
  font-size: var(--typography-text-sm-semi-bold-font-size);
  font-weight: var(--typography-text-sm-semi-bold-font-weight);
  letter-spacing: var(--typography-text-sm-semi-bold-letter-spacing);
  line-height: 1;
}

.workflow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-48px);
  padding-block: var(--section-rhythm);
}

.workflow__intro {
  /* Figma: 410 (unbound); sticks while the steps scroll past */
  position: sticky;
  /* lines up with the cards where an anchor jump lands (layout.css scroll-margin) */
  top: var(--spacing-48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24px);
  width: 410px;
  flex-shrink: 0;
}

.workflow__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8px);
}

.workflow__sub {
  color: var(--color-text-muted);
}

.workflow__envs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4px);
  width: 737px;
  max-width: 100%;
}

.workflow__arrow {
  flex-shrink: 0;
  color: var(--colors-green-500);
  transform: rotate(90deg);
}

.env {
  width: 100%;
  overflow: hidden;
  padding: 0 var(--spacing-4px) var(--spacing-4px);
  border-radius: var(--radius-24);
  background-color: #e3e1da;
}

.env--arloh {
  background-color: var(--colors-green-500);
}

.env__bar {
  display: flex;
  align-items: center;
  /* owner (2026-10-01): one third taller than Figma's 12 / 16 (36 -> 48) */
  padding: 18px var(--spacing-16px);
  color: var(--colors-base-black);
}

.env__label {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: var(--font-weight-medium-500);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.env--arloh .env__bar {
  color: var(--colors-base-white);
}

.env .env__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--spacing-24px) var(--spacing-16px);
  border-radius: var(--radius-20);
  background-color: var(--colors-base-white);
  box-shadow: inset 0 0 0 var(--spacing-1px) rgb(26 26 23 / 0.19);
  list-style: none;
}

.workflow-step {
  display: flex;
  gap: var(--spacing-16px);
}

.workflow-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.workflow-step__connector {
  --fill: 0;

  position: relative;
  width: 2px;
  height: 65px;
  /* Figma: #8E8A83 (≈ Neutral/500), 2px round dots, dash 0.3 gap 6 */
  background-image: radial-gradient(circle, var(--colors-neutral-500) 1px, transparent 1.2px);
  background-size: 2px 6.3px;
  background-repeat: repeat-y;
}

/* scroll fill (owner, 2026-10-01): the same dots in the step's color, revealed top to bottom by js/workflow.js */
.workflow-step__connector::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--step-node) 1.2px, transparent 1.4px);
  background-size: 2px 6.3px;
  background-repeat: repeat-y;
  clip-path: inset(0 0 calc((1 - var(--fill)) * 100%) 0);
}

/* scroll focus, graded (owner, 2026-10-01): js/workflow.js sets --blur and --dim per step from its distance to the
   focus line, so the two or three steps around it stay legible and the ones further away soften progressively. */
.workflow[data-focus] .workflow-step__content {
  filter: blur(calc(var(--blur, 0) * 1px));
  opacity: calc(1 - var(--dim, 0));
  transition:
    filter 200ms linear,
    opacity 200ms linear;
}

.workflow[data-focus] .step-node {
  opacity: calc(1 - var(--dim, 0) * 0.8);
  transition: opacity 200ms linear;
}

.workflow-step:last-child .workflow-step__connector {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.env--arloh .workflow-step:last-child .workflow-step__connector {
  display: none;
}

.workflow-step__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-8px);
  min-width: 0;
  padding-right: var(--spacing-8px);
}

.workflow-step__title {
  color: var(--colors-base-black);
}

.workflow-step__text {
  color: var(--color-text-muted);
}

@media (max-width: 1199px) {
  .workflow {
    flex-direction: column;
  }

  .workflow__intro {
    position: static;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .workflow__envs {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .workflow-step__connector {
    height: 48px;
  }
}