/* =============================================================================
   Duke AI design system, v0.1.0 (2026-09-26)
   Source of truth: morningside.ai, captured 2026-09-26 (stylesheet
   morningsideai.webflow.shared.c1e8d0cc4.min.css + the inline <style> blocks of
   every page + the Webflow interaction data ix2.json). See readme.md.
   THE ONE CHANGE: Morningside green #0cc481 -> Anthropic orange #d97757.
   Every other colour is either Morningside's own value (kept) or a value DERIVED
   from one of theirs by the single rule in source/derive-colors.py, and marked.
   Layers: (a) tokens  (b) base + type roles  (c) components  (d) motion states.
   Below the token block there are NO hard-coded colours: everything is a var().
   ========================================================================== */

/* Fonts. Poppins = Morningside's own face (they self-host it; we use Google Fonts).
   Space Grotesk = STAND-IN for PP Supply Sans (paid, Pangram Pangram), Matt's ruling
   2026-09-26; swap is one line: --font-alt. Inter = the face Morningside's own
   work-with-us and thank-you pages use for form text (kept so the form matches). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =============================================================================
   (a) TOKENS
   ========================================================================== */
:root {
  /* --- Raw Morningside values, kept verbatim so the swap is auditable ------- */
  --raw-green: #0cc481;             /* base-color-brand--green: the ONE value we replace */
  --raw-green-light: #2dd69a;       /* inline --color-accent-light (hover of green) */
  --raw-dark-green: #0f1c1c;        /* base-color-brand--dark-green */
  --raw-grey-dark: #080808;         /* base-color-brand--grey-dark */
  --raw-ivory: #edece4;             /* base-color-brand--ivory */
  --raw-grey-light: #404040;        /* base-color-brand--grey-light */
  --raw-card-hi: #111413;           /* card gradient stop (inline + stylesheet) */
  --raw-card-lo: #050808;           /* card gradient stop */
  --raw-border-end: #0f1c16;        /* gradient-border end, blob_3 */
  --raw-line-dark: #050909;         /* gradient-line end, dashed svg ends */
  --raw-num-dark: #050707;          /* process_num gradient end */
  --raw-blob-2: #149678;            /* blob_2 */
  --raw-floor: #0b6d4a;             /* text-sequence radial-gradient floor */
  --raw-seq-glow: #77ffcd;          /* radial-gradient-sequence */
  --raw-services-top: #0a1212;      /* services_bg-gradient top */
  --raw-footer-link: #9b9f94;       /* mobile footer link */
  --raw-form-muted: #8a9a92;        /* work-with-us --color-text-muted */
  --raw-form-subtle: #5a6a62;       /* work-with-us --color-text-subtle */

  /* --- Brand ------------------------------------------------------------------ */
  --orange: #d97757;                /* Anthropic orange. REPLACES --raw-green everywhere */
  --orange-hover: #ea8a6a;          /* DERIVED from #2dd69a: same OKLCH dL/dC as #0cc481 -> #2dd69a */
  --orange-text: #ab4e2f;           /* DERIVED from #d97757: darkened (OKLCH L) to 4.59:1 on ivory; raw orange is 2.63:1 there */
  --grey-dark: #080808;             /* Morningside, kept */
  --ivory: #edece4;                 /* Morningside, kept */
  --brown-dark: #211713;            /* DERIVED from #0f1c1c (dark-green): same OKLCH L and C, orange hue */
  --grey-light: #404040;            /* Morningside, kept */
  --card-hi: #151212;               /* DERIVED from #111413 */
  --card-lo: #090706;               /* DERIVED from #050808 */
  --border-end: #221511;            /* DERIVED from #0f1c16 */
  --line-dark: #0b0706;             /* DERIVED from #050909 */
  --num-dark: #080606;              /* DERIVED from #050707 */
  --blob-mid: #b9674c;              /* DERIVED from #149678 */
  --floor-dark: #8b452f;            /* DERIVED from #0b6d4a */
  --seq-glow: #ffd7cb;              /* DERIVED from #77ffcd (token only: Morningside ships the class unused) */
  --services-top: #150f0c;          /* DERIVED from #0a1212 */
  --footer-link-dark: #a79a96;      /* DERIVED from #9b9f94 */
  --form-muted-dark: #a2918c;       /* DERIVED from #8a9a92 */
  --form-subtle-dark: #72615c;      /* DERIVED from #5a6a62 */
  --hero-fade-l-dark: #0e0c0c;      /* DERIVED from #0b0d0d (mobile hero ticker fade, left) */
  --hero-fade-r-dark: #0d0b0b;      /* DERIVED from #0a0c0c (mobile hero ticker fade, right) */

  /* Neutral ramp + system colours: Morningside, kept verbatim */
  --white: #fff;
  --black: #000;
  --neutral-lightest: #eee;
  --neutral-lighter: #ccc;
  --neutral-light: #aaa;
  --neutral: #666;
  --neutral-dark: #444;
  --neutral-darker: #222;
  --neutral-darkest: #111;
  --field-ink: #676767;             /* form-field text + placeholder */
  --success: #cef5ca;  --success-ink: #114e0b;
  --warning: #fcf8d8;  --warning-ink: #5e5515;
  --error: #f8e4e4;    --error-ink: #3b0b0b;
  --focus: #2d62ff;                 /* base-color-system--focus-state */
  --focus-ring: #4d65ff;            /* inline :focus-visible outline */
  --muted-blue: #607080;            /* text-color-gray */

  /* --- Semantic roles, DARK (the default: Morningside's own register) -------- */
  --bg: var(--grey-dark);
  --bg-alt: var(--ivory);           /* background-secondary */
  --bg-tertiary: var(--brown-dark); /* background-tertiary: hero gradient top, mobile menu */
  --surface-hi: var(--card-hi);
  --surface-lo: var(--card-lo);
  --text: var(--white);
  --grad-start: var(--white);       /* text-gradient: white -> accent */
  --grad-start-soft: var(--ivory);  /* text-gradient-h2.light, cs-body h2, progress bar */
  --grad-start-ink: var(--grey-dark); /* text-gradient-h2 (ink -> accent) */
  --accent: var(--orange);
  --accent-ink: var(--orange);      /* accent used AS text; 6.42:1 on #080808 */
  --accent-hover: var(--orange-hover);
  --label: var(--ivory);            /* eyebrow-text */
  --muted: var(--grey-light);       /* text-style-muted */
  --border-faint: color-mix(in srgb, var(--ivory) 6%, transparent);   /* #edece40f */
  --border-alt: var(--neutral-darker);                                /* border-alternate */
  --btn-bg: var(--white);
  --btn-fg: var(--black);
  --nav-scrolled: color-mix(in srgb, var(--grey-dark) 35%, transparent); /* rgba(8,8,8,.35) */
  --footer-meta: var(--brown-dark); /* footer_text uses dark-green on the dark page */
  --footer-link: var(--footer-link-dark);
  --field-bg: var(--ivory);
  --field-border: var(--black);
  --field-focus-bg: var(--white);
  --form-bg: var(--card-lo);        /* work-with-us --color-bg (#050808 DERIVED) */
  --form-card: var(--border-end);   /* work-with-us --color-bg-card (#0f1c16 DERIVED) */
  --form-muted: var(--form-muted-dark);
  --form-subtle: var(--form-subtle-dark);
  --form-border: color-mix(in srgb, var(--white) 8%, transparent);
  --hero-top: var(--brown-dark);
  --glow: color-mix(in srgb, var(--orange) 15%, transparent);         /* rgba(12,196,129,.15) swapped */
  --glow-strong: color-mix(in srgb, var(--orange) 30%, transparent);  /* rgba(12,196,129,.3) swapped */
  --blob-1: color-mix(in srgb, var(--orange) 40%, transparent);       /* #0cc48166 swapped */
  --blob-2: color-mix(in srgb, var(--blob-mid) 40%, transparent);     /* #14967866 DERIVED */
  --blob-3: var(--border-end);                                        /* #0f1c16 DERIVED */
  --floor: var(--floor-dark);
  --case-img-bg: var(--white);      /* cs_img-wrap hover: linear-gradient(white,white) */
  --overlay: color-mix(in srgb, var(--grey-dark) 40%, transparent);   /* popup_wrap #08080866 */
  --ticker-fade: var(--grey-dark);
  --hero-fade-l: var(--hero-fade-l-dark);
  --hero-fade-r: var(--hero-fade-r-dark);
  --selection-bg: var(--orange);
  --selection-fg: var(--white);
  --lottie-stroke: var(--white);    /* process/service Lottie line colour */
  --grain-blend: difference;
  --grain-opacity: .02;

  /* --- LAYER 2 roles (our own components: GBP report, taste report, Lexi primitives) --------
     Neutral roles are Morningside's neutral ramp; status colours have no Morningside dark value,
     so they come from our approved report profile (.claude/skills/gbp-grader/partners/mac.json). */
  --text-2: var(--neutral-lighter);     /* secondary copy (engine ink-2) */
  --text-3: var(--neutral-light);       /* tertiary copy (engine muted, faint) */
  --line: var(--neutral-darker);        /* hairline between rows (border-alternate #222) */
  --line-strong: var(--neutral-dark);   /* chip and tag borders (engine line-2) */
  --well: color-mix(in srgb, var(--white) 4%, var(--bg));        /* sunk tracks and chips (engine bg-2) */
  --accent-soft: color-mix(in srgb, var(--orange) 14%, var(--bg)); /* tinted fill behind accent ink */
  --on-accent: var(--grey-dark);        /* text on an orange fill (their submit: #050808 role) */
  --dot-off: var(--neutral-dark);       /* an unlit matrix dot or empty track */
  --good: #59c08d;  --good-soft: #12251b;   /* status, mac.json dark */
  --warn: #e0a458;  --warn-soft: #2a2013;
  --bad: #e4695c;   --bad-soft: #2c1512;
  --star: #e8b24c;
  --danger-fill: #c64e43;   /* DERIVED from --bad #e4695c: OKLCH L lowered until white text reaches 4.5:1 (4.59); raw --bad is 3.24:1. Destructive fills (hang up). */
  --link: var(--ivory);     /* Morningside's link colour (link-color--link-primary) */

  /* dark decor */
  --decor-dash-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='395' height='428' viewBox='0 0 395 428' fill='none'%3E%3Cline x1='301.625' y1='428' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='110.62' x2='428' y2='110.62' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='428' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='110.62' x2='428' y2='110.62' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='428' viewBox='0 0 393 428' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='428' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='317.38' x2='-35' y2='317.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='428' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='317.38' x2='-35' y2='317.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-faq-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='394' height='835' viewBox='0 0 394 835' fill='none'%3E%3Cline x1='301.625' y1='835' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='112.625' x2='428' y2='112.625' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='835' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='112.625' x2='428' y2='112.625' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-faq-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='781' viewBox='0 0 393 781' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='781' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='669.38' x2='-35' y2='669.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='781' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='669.38' x2='-35' y2='669.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.75' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-rect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1081' height='120' viewBox='0 0 1081 120' fill='none' preserveAspectRatio='none'%3E%3Crect x='0.375' y='0.375' width='1080.25' height='119.25' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8' vector-effect='non-scaling-stroke'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='60' x2='1081' y2='60' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.5' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='420' viewBox='0 0 1 420' fill='none'%3E%3Cline x1='0.375' y1='420' x2='0.375' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1.25' y1='420' x2='1.25' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230b0706'/%3E%3Cstop offset='0.5' stop-color='%23333333'/%3E%3Cstop offset='1' stop-color='%230b0706'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-hero-beams: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 892' preserveAspectRatio='xMidYMin slice'%3E%3Cpath fill='%230a0a0a' fill-opacity='0.2' d='M-1000 892L-580 892L694 0L274 0ZM-250 892L310 892L1584 0L1024 0ZM560 892L860 892L2134 0L1834 0Z'/%3E%3C/svg%3E");
  --decor-seq-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='147' fill='none'%3E%3Cpath d='M0 0.5H180M0.5 0V147' stroke='%23ffffff' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  --decor-pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='7' height='7' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2918c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* shared decor (mode independent) */
  --decor-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --icon-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.666504 8.6665L4.6665 4.6665L0.666504 0.666504' stroke='%23080708' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* --- Type ------------------------------------------------------------------ */
  --font-body: "Poppins", Arial, sans-serif;
  --font-alt: "Space Grotesk", Verdana, sans-serif;  /* STAND-IN for "PP Supply Sans" (not decided) */
  --font-form: "Inter", sans-serif;
  --tracking-body: -.02em;
  --tracking-label: .1em;
  --tracking-footer: .12em;

  /* --- Layout + shape (Morningside values) ----------------------------------- */
  --container: 80rem;
  --container-md: 68rem;
  --container-sm: 48rem;
  --gutter: 2.5rem;                 /* padding-global; 1.25rem at <=767 */
  --section-lg: 8rem;               /* padding-section-large; 6rem <=991, 4rem <=767 */
  --section-md: 5rem;
  --section-sm: 3rem;
  --radius-btn: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-form: 20px;
  --radius-field: 10px;

  /* --- Motion (ix2.json + stylesheet) ----------------------------------------- */
  --ease-ui: ease-in-out;                              /* every hover: all .2s ease-in-out */
  --dur-ui: .2s;
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);   /* fadeIn / slideInBottom */
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);          /* Webflow "easeInOut" */
  --ease-cta: cubic-bezier(.25, .46, .45, .94);        /* Footer FADE IN */
  --ease-snap: cubic-bezier(.23, 1, .32, 1);           /* process step x */
  --ease-soft: cubic-bezier(0, 0, .2, 1);              /* process step opacity */
  --motion-page-start: 450ms;       /* measured from the capture frames: Webflow starts its page-load IX ~450ms after navigation start */

  color-scheme: dark;
}

/* --- LIGHT twin, built from Morningside's ivory #edece4 ------------------------ */
/* the ivory twin is a SCREEN register only: print always stays in the dark Morningside look (Matt, 2026-09-27) */
@media screen and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--ivory);
    --bg-alt: var(--white);           /* DERIVED: ivory cannot be the alt surface on ivory */
    --bg-tertiary: #dfddd0;           /* DERIVED from #0f1c1c role, onto ivory (ivory hue) */
    --surface-hi: #f8f7f1;            /* DERIVED from #111413 role, onto ivory */
    --surface-lo: #e4e3da;            /* DERIVED from #050808 role, onto ivory */
    --text: var(--grey-dark);
    --grad-start: var(--grey-dark);
    --grad-start-soft: var(--grey-dark);
    --grad-start-ink: var(--grey-dark);
    --accent-ink: var(--orange-text);
    --accent-hover: var(--orange-text);
    --label: var(--grey-light);
    --muted: var(--neutral);
    --border-faint: color-mix(in srgb, var(--grey-dark) 8%, transparent);
    --border-alt: var(--neutral-lighter);
    --btn-bg: var(--grey-dark);       /* DERIVED: white-on-ivory button inverts to ink */
    --btn-fg: var(--white);
    --nav-scrolled: color-mix(in srgb, var(--ivory) 60%, transparent);
    --footer-meta: var(--neutral);
    --footer-link: var(--form-subtle-dark);
    --field-bg: var(--white);
    --form-bg: var(--ivory);
    --form-card: var(--white);
    --form-muted: var(--form-subtle-dark);
    --form-subtle: var(--form-muted-dark);
    --form-border: color-mix(in srgb, var(--grey-dark) 10%, transparent);
    --hero-top: #dfddd0;
    --blob-2: color-mix(in srgb, var(--blob-mid) 25%, transparent);
    --blob-3: #fbe2d9;                /* DERIVED: blob_3 role onto ivory (orange hue) */
    --floor: #f2c1b1;                 /* DERIVED: #0b6d4a floor role onto ivory (orange hue) */
    --overlay: color-mix(in srgb, var(--ivory) 60%, transparent);
    --ticker-fade: var(--ivory);
    --hero-fade-l: var(--ivory);
    --hero-fade-r: var(--ivory);
    --lottie-stroke: var(--grey-dark);
    --grain-blend: multiply;
    --grain-opacity: .03;
    /* layer 2: status inks from mac.json light, soft fills are Morningside's system colours */
    --text-2: var(--neutral-dark); --text-3: var(--neutral); --line: var(--neutral-lighter); --line-strong: var(--neutral-light);
    --well: var(--surface-lo); --accent-soft: color-mix(in srgb, var(--orange) 14%, var(--white)); --dot-off: var(--neutral-lighter);
    --good: #1e7a50; --good-soft: var(--success); --warn: #8a5218; --warn-soft: var(--warning); --bad: #a83326; --bad-soft: var(--error); --star: #8a6212; --danger-fill: var(--bad); --link: var(--accent-ink);
    --decor-dash-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='395' height='428' viewBox='0 0 395 428' fill='none'%3E%3Cline x1='301.625' y1='428' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='110.62' x2='428' y2='110.62' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='428' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='110.62' x2='428' y2='110.62' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-dash-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='428' viewBox='0 0 393 428' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='428' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='317.38' x2='-35' y2='317.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='428' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='317.38' x2='-35' y2='317.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-faq-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='394' height='835' viewBox='0 0 394 835' fill='none'%3E%3Cline x1='301.625' y1='835' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='112.625' x2='428' y2='112.625' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='835' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='112.625' x2='428' y2='112.625' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-faq-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='781' viewBox='0 0 393 781' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='781' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='669.38' x2='-35' y2='669.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='781' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='669.38' x2='-35' y2='669.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-dash-rect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1081' height='120' viewBox='0 0 1081 120' fill='none' preserveAspectRatio='none'%3E%3Crect x='0.375' y='0.375' width='1080.25' height='119.25' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8' vector-effect='non-scaling-stroke'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='60' x2='1081' y2='60' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.5' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-dash-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='420' viewBox='0 0 1 420' fill='none'%3E%3Cline x1='0.375' y1='420' x2='0.375' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1.25' y1='420' x2='1.25' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.5' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --decor-hero-beams: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 892' preserveAspectRatio='xMidYMin slice'%3E%3Cpath fill='%230a0a0a' fill-opacity='0.035' d='M-1000 892L-580 892L694 0L274 0ZM-250 892L310 892L1584 0L1024 0ZM560 892L860 892L2134 0L1834 0Z'/%3E%3C/svg%3E");
    --decor-seq-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='147' fill='none'%3E%3Cpath d='M0 0.5H180M0.5 0V147' stroke='%23080808' stroke-opacity='0.12' stroke-dasharray='3 3'/%3E%3C/svg%3E");
    --decor-pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='7' height='7' fill='%23080808' fill-opacity='0.05'/%3E%3C/svg%3E");
    --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372615c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}
@media screen {
:root[data-theme="light"] {
  --bg: var(--ivory);
  --bg-alt: var(--white);
  --bg-tertiary: #dfddd0;
  --surface-hi: #f8f7f1;
  --surface-lo: #e4e3da;
  --text: var(--grey-dark);
  --grad-start: var(--grey-dark);
  --grad-start-soft: var(--grey-dark);
  --grad-start-ink: var(--grey-dark);
  --accent-ink: var(--orange-text);
  --accent-hover: var(--orange-text);
  --label: var(--grey-light);
  --muted: var(--neutral);
  --border-faint: color-mix(in srgb, var(--grey-dark) 8%, transparent);
  --border-alt: var(--neutral-lighter);
  --btn-bg: var(--grey-dark);
  --btn-fg: var(--white);
  --nav-scrolled: color-mix(in srgb, var(--ivory) 60%, transparent);
  --footer-meta: var(--neutral);
  --footer-link: var(--form-subtle-dark);
  --field-bg: var(--white);
  --form-bg: var(--ivory);
  --form-card: var(--white);
  --form-muted: var(--form-subtle-dark);
  --form-subtle: var(--form-muted-dark);
  --form-border: color-mix(in srgb, var(--grey-dark) 10%, transparent);
  --hero-top: #dfddd0;
  --blob-2: color-mix(in srgb, var(--blob-mid) 25%, transparent);
  --blob-3: #fbe2d9;
  --floor: #f2c1b1;
  --overlay: color-mix(in srgb, var(--ivory) 60%, transparent);
  --ticker-fade: var(--ivory);
  --hero-fade-l: var(--ivory);
  --hero-fade-r: var(--ivory);
  --lottie-stroke: var(--grey-dark);
  --grain-blend: multiply;
  --grain-opacity: .03;
  --text-2: var(--neutral-dark); --text-3: var(--neutral); --line: var(--neutral-lighter); --line-strong: var(--neutral-light);
  --well: var(--surface-lo); --accent-soft: color-mix(in srgb, var(--orange) 14%, var(--white)); --dot-off: var(--neutral-lighter);
  --good: #1e7a50; --good-soft: var(--success); --warn: #8a5218; --warn-soft: var(--warning); --bad: #a83326; --bad-soft: var(--error); --star: #8a6212; --danger-fill: var(--bad); --link: var(--accent-ink);
  --decor-dash-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='395' height='428' viewBox='0 0 395 428' fill='none'%3E%3Cline x1='301.625' y1='428' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='110.62' x2='428' y2='110.62' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='428' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='110.62' x2='428' y2='110.62' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='428' viewBox='0 0 393 428' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='428' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='317.38' x2='-35' y2='317.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='428' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='317.38' x2='-35' y2='317.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-faq-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='394' height='835' viewBox='0 0 394 835' fill='none'%3E%3Cline x1='301.625' y1='835' x2='301.625' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='0' y1='112.625' x2='428' y2='112.625' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='302.5' y1='835' x2='302.5' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='112.625' x2='428' y2='112.625' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-faq-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='781' viewBox='0 0 393 781' fill='none'%3E%3Cline x1='91.375' y1='0' x2='91.375' y2='781' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cline x1='393' y1='669.38' x2='-35' y2='669.38' stroke='url(%23b)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='90.5' y1='0' x2='90.5' y2='781' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='393' y1='669.38' x2='-35' y2='669.38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.75' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-rect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1081' height='120' viewBox='0 0 1081 120' fill='none' preserveAspectRatio='none'%3E%3Crect x='0.375' y='0.375' width='1080.25' height='119.25' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8' vector-effect='non-scaling-stroke'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='60' x2='1081' y2='60' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.5' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-dash-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='420' viewBox='0 0 1 420' fill='none'%3E%3Cline x1='0.375' y1='420' x2='0.375' y2='0' stroke='url(%23a)' stroke-width='0.75' stroke-dasharray='8 8'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1.25' y1='420' x2='1.25' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23edece4'/%3E%3Cstop offset='0.5' stop-color='%23b8b3a6'/%3E%3Cstop offset='1' stop-color='%23edece4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  --decor-hero-beams: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 892' preserveAspectRatio='xMidYMin slice'%3E%3Cpath fill='%230a0a0a' fill-opacity='0.035' d='M-1000 892L-580 892L694 0L274 0ZM-250 892L310 892L1584 0L1024 0ZM560 892L860 892L2134 0L1834 0Z'/%3E%3C/svg%3E");
  --decor-seq-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='147' fill='none'%3E%3Cpath d='M0 0.5H180M0.5 0V147' stroke='%23080808' stroke-opacity='0.12' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  --decor-pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='7' height='7' fill='%23080808' fill-opacity='0.05'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372615c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}
}

/* =============================================================================
   (b) BASE + TYPE ROLES (Morningside sizes, weights, line heights, tracking)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* components set their own display; a filter's hidden attribute must still win */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background-color: var(--selection-bg); color: var(--selection-fg); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; }
h1 { font-size: 4.5rem; line-height: 1.1; }
h2 { font-size: 3.5rem; line-height: 1.25; }
h3 { font-size: 3rem; line-height: 1.25; }
h4 { font-size: 2.625rem; line-height: 1.25; }
h5 { font-size: 1.75rem; line-height: 1.4; }
h6 { font-size: 1.5rem; line-height: 1.3; font-weight: 400; }
p { margin: 0; }
a { color: var(--link); }
ul, ol { margin: 0; padding-left: 1.5rem; }
li { margin-bottom: .25rem; }
img { max-width: 100%; display: inline-block; }
button { font: inherit; letter-spacing: inherit; }
*[tabindex]:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: .125rem solid var(--focus-ring);
  outline-offset: .125rem;
}

/* heading-style-h* as classes */
.h1 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.h2 { font-size: 3.5rem; font-weight: 300; line-height: 1.25; }
.h3 { font-size: 3rem; font-weight: 300; line-height: 1.25; }
.h4 { font-size: 2.625rem; font-weight: 300; line-height: 1.25; }
.h5 { font-size: 1.75rem; font-weight: 300; line-height: 1.4; }
.h6 { font-size: 1.5rem; font-weight: 400; line-height: 1.3; }

/* gradient text: text-gradient / h1_text-gradient / text-gradient-h2 */
.grad {
  background-image: linear-gradient(90deg, var(--grad-start), var(--accent-ink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-h1 { padding-bottom: 7px; }  /* h1_text-gradient adds 7px so descenders are not clipped */
.grad-display {                     /* text-gradient-h2: ink -> accent, 4.625rem */
  background-image: linear-gradient(90deg, var(--grad-start-ink), var(--accent-ink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 7px; font-size: 4.625rem; line-height: 1.1; font-weight: 300;
}
.grad-display--soft { background-image: linear-gradient(90deg, var(--grad-start-soft), var(--accent-ink)); }

/* labels: eyebrow-text, text-alt-font */
.label {
  color: var(--label);
  font-family: var(--font-alt);
  font-size: .875rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.label--muted { color: var(--muted); }
.alt { font-family: var(--font-alt); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* text sizes */
.text-xl { font-size: 1.75rem; line-height: 1.3; }
.text-lg { font-size: 1.5rem; line-height: 1.3; }
.text-md { font-size: 1.25rem; font-weight: 300; }
.text-md.w-400, .text-md .w-400 { font-weight: 400; }
.text-md.w-500 { font-weight: 500; }
.text-base { font-size: 1rem; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.lede { font-size: 1.25rem; font-weight: 300; }
.accent { color: var(--accent-ink); }
.muted { color: var(--muted); }
.w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; }
.w-600, .semibold { font-weight: 600; } .w-700 { font-weight: 700; }
.italic { font-style: italic; }
.center { text-align: center; }
.measure-22 { max-width: 22.8ch; }
.measure-30 { max-width: 30ch; display: inline-block; }
.measure-38 { max-width: 38ch; display: inline-block; }
.quote { border-left: .25rem solid var(--border-alt); padding: 0 1.25rem; font-size: 1.25rem; line-height: 1.5; }

/* layout */
.pad-x { padding-left: var(--gutter); padding-right: var(--gutter); }
.container { width: 100%; max-width: var(--container); margin-left: auto !important; margin-right: auto !important; }
.container-md { width: 100%; max-width: var(--container-md); margin-left: auto !important; margin-right: auto !important; }
.container-sm { width: 100%; max-width: var(--container-sm); margin-left: auto !important; margin-right: auto !important; }
.section-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); }
.section-md { padding-top: var(--section-md); padding-bottom: var(--section-md); }
.section-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
.stack-center { display: flex; flex-flow: column; align-items: center; justify-content: flex-start; gap: 2.5rem; text-align: center; }
.stack-center--tight { gap: 1rem; }
.stack-left { display: flex; flex-flow: column; align-items: flex-start; gap: 2.5rem; }
.mt-lg { margin-top: 3rem; }
.mt-huge { margin-top: 6rem; }
.relative { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.link-cover { position: absolute; inset: 0; z-index: 1; }
.skip-link {
  position: absolute; left: 50%; transform: translate(-50%); margin-top: -10em; z-index: 1000;
  background-color: var(--btn-bg); color: var(--btn-fg); border-radius: var(--radius-sm);
  padding: .8em 1.5em; line-height: 1; text-decoration: none; transition: background-color .2s ease-in-out;
}
.skip-link:focus { margin-top: .5rem; }
.skip-link:hover { background-color: var(--accent); }

/* =============================================================================
   (c) COMPONENTS
   ========================================================================== */

/* --- Wordmark (PLACEHOLDER: company name not decided) --------------------- */
.wordmark { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.wordmark__mark { width: 40px; height: 20px; flex: none; color: var(--text); }
.wordmark__mark--accent { color: var(--accent); }
.wordmark__text { font-family: var(--font-body); font-weight: 400; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1; transition: opacity .3s ease; }

/* --- Buttons: .button family ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .875rem;
  background-color: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-alt); font-weight: 400; font-size: 1rem; line-height: 1.4;
  letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; text-align: center;
  border: 0; border-radius: var(--radius-btn); padding: 1rem 1.5rem; cursor: pointer;
  transition: all var(--dur-ui) var(--ease-ui);
}
.btn__chev { width: 8px; height: 1rem; flex: none; display: block; }
.btn--icon:hover { gap: 1.5rem; }                     /* button.is-icon: gap .875 -> 1.5rem */
.btn--sm { padding: .875rem 1.25rem; }
.btn--lg { padding: 1rem 2rem; }
.btn--nav { padding: .65rem 1.25rem; font-size: 14px; }  /* nav_button */
.btn--nav:hover { gap: 1.2rem; }
.btn--secondary { background-color: transparent; color: var(--text); border: 1px solid var(--border-alt); }
.btn--text { background-color: transparent; color: var(--text); border: 2px solid transparent; }
.btn--alt { background-color: var(--bg-alt); }
.btn-group { display: flex; flex-flow: wrap; align-items: center; gap: 1rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn--xs { padding: .45rem .75rem; font-size: .75rem; gap: .5rem; }   /* dense operator rows; below .btn--sm */

/* --- Navigation: nav_component ------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 999; width: 100%;
  padding-top: 2rem; padding-bottom: 1rem; background-color: transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.nav.is-scrolled { background-color: var(--nav-scrolled); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav.is-scrolled .wordmark__text { opacity: 0; }       /* their logo text paths fade, the mark stays */
.nav--static { position: absolute; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin: 0 auto; }
.nav__brand { width: 200px; }
.nav__menu { display: flex; align-items: center; }
.nav__link {
  display: flex; color: var(--text); text-decoration: none; letter-spacing: -.01em;
  padding: 1rem; font-size: .875rem; line-height: 1; transition: all var(--dur-ui) var(--ease-ui);
}
/* Morningside's hover colour (green) is overridden by their own :lang(en) rule, so links stay
   white on hover on the live site. Kept faithfully: no colour change. */
.nav__cta { margin-left: 1rem; }
.nav__toggle { display: none; background: none; border: 0; padding: 1rem; color: var(--text); cursor: pointer; }
.nav__toggle-icon { display: block; width: 30px; height: 30px; }
.nav__toggle-icon svg path { stroke: var(--accent); }

/* --- Hero: section_hero -------------------------------------------------------- */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 90svh; padding-top: 6rem;
  background-image: var(--decor-hero-beams), linear-gradient(var(--hero-top), transparent);
  background-position: 50% 0, 0 0; background-repeat: no-repeat, repeat; background-size: cover, auto;
}
.hero--plain { background-image: linear-gradient(var(--hero-top), transparent); min-height: 70svh; padding-top: 0; }
.hero--page { min-height: 100svh; }
.hero__pad { padding-top: var(--section-lg); padding-bottom: var(--section-lg); }
.hero__wrap { display: flex; flex-flow: column; align-items: center; gap: 8rem; }
.hero__content { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-items: center; text-align: center; position: relative; }
.hero__title { max-width: none; }
.hero__sub { max-width: 50rem; }
.hero__logos { margin-top: 12rem; }
.logo-row { display: flex; gap: 4rem; margin-top: 3.5rem; justify-content: center; align-items: center; }
.logo-row__item { display: flex; align-items: center; justify-content: center; }
.logo-ph {                         /* neutral placeholder client mark */
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 6rem; min-width: 7rem; color: var(--text); opacity: .9;
  font-family: var(--font-alt); font-size: 1.1rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.logo-ph svg { width: 3rem; height: 3rem; }
.hero__ticker.ticker { display: none; }

/* --- Ticker: lumious ticker (stats, mobile logos) ---------------------------- */
.ticker { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; }
.ticker__track { display: flex; flex: none; will-change: transform; }
.ticker__fade { position: absolute; inset: 0 auto 0 0; width: 200px; z-index: 2; pointer-events: none;
  background-image: linear-gradient(90deg, var(--ticker-fade), transparent); }
.ticker__fade--right { inset: 0 0 0 auto; background-image: linear-gradient(90deg, transparent, var(--ticker-fade)); }

/* --- Scroll story: text-sequence-section (section_why) ------------------------ */
.story { position: relative; height: 450vh; }
.story__sticky { position: sticky; top: 0; z-index: 2; height: 100vh; display: flex; flex-flow: column; align-items: center; justify-content: center; overflow: hidden; }
.story__lines { position: absolute; max-width: 85rem; margin: 0 auto; padding: 0 2.5rem; text-align: center; }
.story__line { font-size: 2.5rem; font-weight: 300; line-height: 1.25; margin-bottom: 5rem; }
.story__final { position: relative; width: 100vw; height: 100vh; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 2rem; text-align: center; }
.story__final-sub { max-width: 57rem; display: flex; flex-flow: column; gap: 2rem; color: var(--text); }
.story__progress { position: absolute; inset: auto 0 0; height: 5px; display: flex; align-items: center; }
.story__bar { position: relative; width: 0%; height: 4px; background-image: linear-gradient(90deg, var(--grad-start-soft), var(--accent)); }
.story__floor { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(transparent 54%, var(--floor)); }
.story__floor::before { /* gradient-bg.png stand-in: dashed grid, strongest at the floor */
  content: ""; position: absolute; inset: 0; background-image: var(--decor-seq-grid); background-position: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent 20%, var(--black) 100%); mask-image: linear-gradient(transparent 20%, var(--black) 100%);
}

/* --- Process: section_process + line-logo + process cards --------------------- */
.process {
  position: relative; z-index: 2; overflow: hidden; margin-top: -24px;
  background-color: var(--bg); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl);
}
.process::before { /* grid-bg.webp stand-in: faint pixel field, bottom right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--decor-pixels);
  -webkit-mask-image: radial-gradient(ellipse 45% 35% at 85% 80%, var(--black) 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 45% 35% at 85% 80%, var(--black) 20%, transparent 70%);
}
.line-logo { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; max-width: 45rem; }
.line-logo__line { width: 0%; height: 1px; background-image: linear-gradient(90deg, var(--line-dark), var(--accent)); }
.line-logo__line--flip { background-image: linear-gradient(90deg, var(--accent), var(--line-dark)); }
.line-logo .wordmark__mark { color: var(--accent); }
.process__list { position: relative; display: flex; flex-flow: column; align-items: flex-start; gap: 3.75rem; max-width: 64rem; margin: 7.5rem auto 0; }
.process-step { display: flex; align-items: center; gap: 3.875rem; }
.process-num {
  flex: none; display: block; width: 90px; text-align: center;
  font-family: var(--font-body); font-size: 10rem; font-style: italic; font-weight: 200; line-height: 1.4;
  background-image: linear-gradient(90deg, var(--num-dark), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.process-card {
  position: relative; display: flex; gap: 3.125rem; padding: 3.75rem 4rem; text-decoration: none; color: var(--text);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-clip: padding-box;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  transition: all var(--dur-ui) var(--ease-ui);
}
.process-card:hover {                       /* inline <style>: gradient border + glow */
  border: 1px solid transparent;
  background-image: linear-gradient(135deg, var(--surface-hi) 0%, var(--surface-lo) 100%), linear-gradient(135deg, var(--border-end) 0%, var(--accent) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 50px 0 var(--glow);
}
.process-card__icon { flex: none; width: 180px; max-width: 180px; aspect-ratio: 1; }
.process-card__info { display: flex; flex-flow: column; align-items: flex-start; gap: 1rem; }
.process-card__title { display: flex; align-items: center; gap: 1.125rem; }
.process-card__arrow { width: 13px; height: 23px; flex: none; color: var(--accent); opacity: 0; transform: translate(0); transition: all var(--dur-ui) var(--ease-ui); }
.process-card:hover .process-card__arrow { opacity: 1; transform: translateX(5px); }
.lottie svg path[stroke] { stroke: var(--lottie-stroke); }
.lottie--accent svg path[stroke] { stroke: var(--accent); }

/* --- Testimonials: section_testimonials --------------------------------------- */
.testimonials {
  background-image: var(--decor-dash-bottom), var(--decor-dash-top);
  background-position: 0 100%, 100% 0; background-repeat: no-repeat, no-repeat;
}
.testimonials__wrap { display: flex; flex-flow: row; align-items: stretch; justify-content: flex-start; gap: 9rem; max-width: 75rem; margin: 10rem auto 0; }
.testimonial { display: flex; flex-flow: column; align-items: center; align-self: flex-start; width: 100%; max-width: 32rem; text-align: center; }
.testimonial__author { display: flex; flex-flow: column; align-items: center; gap: .625rem; margin-top: 2.5rem; }
.dashed-divider {
  align-self: center; width: 1px; height: 280px; flex: none;
  background-image: linear-gradient(180deg, var(--bg) 13%, transparent 51%, var(--bg) 89%), var(--decor-dash-vert);
  background-position: 0 0, 50%; background-repeat: repeat, no-repeat; background-size: auto, cover;
}

/* --- Stats: section_stats ------------------------------------------------------- */
.stats { position: relative; }
.stats__row { display: flex; flex: none; }
.stat { display: flex; flex-flow: column; align-items: center; text-align: center; margin-left: 3rem; margin-right: 3rem; flex: none; }
.stat__num { font-size: 3rem; line-height: 1.4; }

/* --- Case-study cards: cs_grid / cs_wrap ----------------------------------------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.875rem; }
.case-grid--2 { grid-template-columns: 1fr 1fr; }
.case-card { position: relative; display: flex; flex-flow: column; gap: .75rem; width: 100%; text-decoration: none; color: var(--text); }
.case-card__img {
  border: 1px solid transparent; border-radius: var(--radius-md); overflow: hidden; background-clip: padding-box;
  transition: all var(--dur-ui) var(--ease-ui); line-height: 0;
}
.case-card__img > * { width: 100%; display: block; }
.case-card:hover .case-card__img {
  border: 1px solid transparent;
  background-image: linear-gradient(var(--case-img-bg), var(--case-img-bg)), linear-gradient(90deg, var(--accent) 0%, var(--border-end) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 50px 0 var(--glow);
}
.case-card__title { font-size: 1.55rem; line-height: 1.2; display: inline; vertical-align: middle; }
.case-card__arrow { display: inline; height: 12px; width: 7px; margin-left: 10px; color: var(--accent); opacity: 0; transform: translate(0); transition: all var(--dur-ui) var(--ease-ui); vertical-align: middle; }
.case-card:hover .case-card__arrow { opacity: 1; transform: translateX(5px); }

/* image placeholder (neutral; Morningside's case photos are grayscale) */
.ph {
  position: relative; aspect-ratio: 16 / 10.6; width: 100%;
  background: linear-gradient(135deg, var(--neutral-dark), var(--neutral-darkest));
  display: flex; align-items: center; justify-content: center; color: var(--neutral-light);
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.ph--portrait { aspect-ratio: auto; height: 100%; }

/* --- FAQ accordion: faq_accordion ------------------------------------------------ */
.faq {
  background-image: var(--decor-faq-bottom), var(--decor-faq-top);
  background-position: 0 85%, 100% 150px; background-repeat: no-repeat, no-repeat;
}
.faq__wrap { max-width: 50rem; margin: 5rem auto 0; }
.faq__list { display: flex; flex-flow: column; gap: .25rem; }
.accordion {
  cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-md);
  margin: 0 5px; padding: 1.5rem 1.875rem; transition: all var(--dur-ui) var(--ease-ui);
}
.accordion:hover, .accordion.is-open {
  border: 1px solid var(--border-faint);
  background: linear-gradient(135deg, var(--surface-hi) 0%, var(--surface-lo) 100%);
  background-clip: padding-box;
}
.accordion__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%;
  background: none; border: 0; color: inherit; text-align: left; padding: 0; cursor: pointer; }
.accordion__icon { flex: none; line-height: 0; transition: all .4s; }
.accordion__icon svg { width: 17px; height: 9px; color: var(--text); transition: all var(--dur-ui) var(--ease-ui); }
.accordion:hover .accordion__icon svg, .accordion.is-open .accordion__icon svg { color: var(--accent); }
.accordion.is-open .accordion__icon { transform: rotate(-90deg); }  /* their script: open = rotate(-90deg) */
.accordion__body { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; overflow: hidden; max-height: 0; transition: all .4s; }
.accordion__answer { max-width: 660px; margin-top: .75rem; }

/* --- CTA + footer: section_cta ------------------------------------------------------ */
.cta { position: relative; overflow: hidden; }
.cta__pad { position: relative; z-index: 1; padding-top: var(--section-lg); padding-bottom: 2rem; }
.cta__dashed { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem 4rem; }
.cta__dashed::before { content: ""; position: absolute; inset: 0; background-image: var(--decor-dash-rect); background-size: 100% 100%; }
.blobs { position: absolute; inset: 50% 0 0 -25%; z-index: 0; width: 150%; height: 900px; margin-right: auto; transform: scaleY(.9); transform-style: preserve-3d; pointer-events: none; }
.blob { height: 100%; border-radius: 50%; }
.blob--1 { filter: blur(200px); background-color: var(--blob-1); }
.blob--2 { filter: blur(80px); background-color: var(--blob-2); }
.blob--3 { filter: blur(100px); background-color: var(--blob-3); }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: var(--decor-grain); }

.footer-bar { display: flex; align-items: center; margin-top: 12rem; }
.footer-bar__left { display: flex; flex: 1; align-items: center; gap: 10px; }
.footer-bar__line { flex: 1; width: 100%; height: 1px; background-image: linear-gradient(90deg, var(--accent), var(--line-dark)); }
.footer-bar__links { display: flex; gap: 8px; margin-left: 10px; }
.footer-meta, .footer-bar__link {
  color: var(--footer-meta); font-family: var(--font-alt); font-size: .75rem; line-height: 1;
  letter-spacing: var(--tracking-footer); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.footer-bar__link { display: inline-block; transition: all var(--dur-ui) var(--ease-ui); }
a.footer-bar__link:hover { transform: translateY(-5px); }
.footer-bar .wordmark__mark { color: var(--accent); }

.footer-mobile { display: none; }
.footer-mobile__wrap { display: flex; flex-flow: column; align-items: center; text-align: center; }
.footer-mobile__section { display: flex; flex-flow: column; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.footer-mobile__heading { color: var(--accent-ink); margin-bottom: .25rem; font-size: 1.75rem; font-weight: 500; line-height: 1.25; }
.footer-mobile__link { color: var(--footer-link); font-size: 1.15rem; text-decoration: none; }
.footer-mobile__mark { margin-top: 2rem; }
.footer-mobile__mark .wordmark__mark { color: var(--accent); }
.footer-mobile__meta { margin-top: .75rem; font-family: var(--font-alt); font-size: 1.15rem; letter-spacing: var(--tracking-footer); text-transform: uppercase; }

/* --- Case-study page: cs hero cards + prose ------------------------------------------ */
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; width: 100%; }
.fact-card {
  display: flex; flex-flow: column; align-items: center; justify-content: flex-start; gap: .75rem;
  padding: 3.25rem 2rem; text-align: center; border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-image: linear-gradient(130deg, var(--surface-lo) 0%, var(--surface-hi) 100%), linear-gradient(130deg, var(--accent) 0%, var(--border-end) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.fact-card__title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 500; }
.fact-card__title svg { width: 22px; height: 22px; color: var(--accent); }
.prose { max-width: 51.6rem; margin: 0 auto 4rem; }
.prose h2 {
  font-size: 2.625rem; margin: 1.5rem 0 1rem;
  background-image: linear-gradient(90deg, var(--grad-start-soft), var(--accent-ink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.prose > :first-child { margin-top: 0 !important; }
.prose p { margin-bottom: 1rem; font-size: 1.25rem; }
.prose ul, .prose ol { margin-bottom: 1.5rem; }
.cs-sub { font-size: 1.25rem; font-weight: 300; max-width: 64rem; }

/* --- Services tabs: services_nav + services_wrap -------------------------------------- */
.tabs__nav-wrap { display: flex; flex-flow: column; align-items: center; margin-bottom: 2rem; }
.tabs__nav { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 2.5rem; padding-bottom: 1.5rem; }
.tab { display: flex; gap: 8px; cursor: pointer; background: none; border: 0; color: var(--text); padding: 0; }
.tab__num { font-size: 1.2rem; font-style: italic; }
.tab__text { font-size: 2rem; font-weight: 300; line-height: 1.25; }
.tabs__indicator { position: absolute; left: 0; bottom: 0; width: 14px; height: 8px; color: var(--accent); transition: all var(--dur-ui) var(--ease-ui); }
.tab-panel { position: relative; display: flex; padding: 3rem 5rem 5rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); overflow: hidden; }
.tab-panel[hidden] { display: none; }
.tab-panel__bg { position: absolute; inset: 0 0 auto; height: 60%; z-index: 1; background-image: linear-gradient(var(--services-top), var(--bg)); }
.tab-panel__content { position: relative; z-index: 2; display: flex; flex-flow: column; align-items: flex-start; gap: 5rem; width: 100%; }
.tab-panel__top { display: flex; align-items: center; gap: 5rem; padding-top: 2rem; }
.tab-panel__info { display: flex; flex-flow: column; align-items: flex-start; gap: 1rem; }
.tab-panel__title { display: flex; gap: 8px; }
.tab-panel__num { font-size: 2rem; font-style: italic; }
.tab-panel__text { font-size: 3.5rem; font-weight: 300; line-height: 1.25; }
.tab-panel__lottie { flex: none; width: 240px; aspect-ratio: 1; }
.tab-list { display: flex; flex-flow: column; gap: 1.5rem; margin-top: 1rem; }
.tabs__arrows { display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 2rem; }
.tabs__arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 1rem; background: none; border: 0; color: var(--text); cursor: pointer; transition: color .2s ease-in-out; }
.tabs__arrow:last-child { margin-right: 0; }
.tabs__arrow:hover { color: var(--accent); }

/* --- Team: founder_grid + team_grid ------------------------------------------------------ */
.founder { display: grid; grid-template-columns: 2fr minmax(200px, 1.25fr); gap: 2.5rem; align-items: center; margin-bottom: 5rem; }
.founder--flip { grid-template-columns: minmax(200px, 1.25fr) 2fr; }
.founder__bio { display: flex; flex-flow: column; align-items: flex-start; gap: 10px; }
.founder__img { width: 100%; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 5; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.875rem; }
.team-card { display: flex; flex-flow: column; gap: 8px; }
.team-card__photo { height: 460px; border-radius: var(--radius-sm); overflow: hidden; }
.team-card__name { font-size: 1.5rem; font-weight: 300; line-height: 1.25; }

/* --- Forms ------------------------------------------------------------------------------ */
/* (1) the work-with-us form (Morningside's inline design: Space Grotesk heads, Inter fields) */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; max-width: 1200px; margin: 0 auto; }
.contact__label { font-family: var(--font-alt); font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-hover); margin-bottom: 24px; }
.contact__heading { font-family: var(--font-alt); font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 24px; }
.contact__heading .accent-grad { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.contact__desc { font-family: var(--font-form); font-size: 17px; line-height: 1.7; color: var(--form-muted); max-width: 440px; margin-bottom: 48px; letter-spacing: 0; }
.contact__details { display: flex; flex-direction: column; gap: 20px; }
.contact__detail { display: flex; align-items: center; gap: 16px; font-family: var(--font-form); letter-spacing: 0; }
.contact__detail-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--form-card); border: 1px solid var(--form-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__detail-icon svg { width: 20px; height: 20px; color: var(--accent-hover); }
.contact__detail-text { font-size: 15px; color: var(--form-muted); }
.contact__detail-text strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.form-card { background: var(--form-card); border: 1px solid var(--form-border); border-radius: var(--radius-form); padding: 48px; font-family: var(--font-form); letter-spacing: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: 14px; font-weight: 500; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 18px; background: var(--form-bg); border: 1px solid var(--form-border); border-radius: var(--radius-field);
  color: var(--text); font-family: var(--font-form); font-size: 16px; transition: all .2s ease; outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--form-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.field select { appearance: none; -webkit-appearance: none; background-image: var(--icon-select); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; cursor: pointer; }
.field textarea { resize: vertical; min-height: 140px; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice label { display: flex; align-items: center; justify-content: center; padding: 12px 16px; text-align: center; background: var(--form-bg); border: 1px solid var(--form-border); border-radius: var(--radius-field); cursor: pointer; font-size: 15px; font-weight: 500; color: var(--form-muted); transition: all .2s ease; }
.choice input:checked + label { border-color: var(--accent); background: var(--glow); color: var(--text); }
.choice label:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text); }
.btn-submit {
  width: 100%; margin-top: 32px; padding: 18px 36px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--accent); color: var(--form-bg); border: none; border-radius: var(--radius-lg); cursor: pointer;
  font-family: var(--font-alt); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: all .3s ease;
}
.btn-submit svg { width: 18px; height: 18px; transition: transform .3s ease; }
.btn-submit:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px var(--glow-strong); }
.btn-submit:hover svg { transform: translateX(4px); }
.page-glow { position: relative; overflow: hidden; }
.page-glow::before {               /* pulseGlow, work-with-us + thank-you */
  content: ""; position: absolute; top: -300px; left: 50%; width: 900px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%); pointer-events: none;
  animation: ds-pulse-glow 6s ease-in-out infinite;
}
/* (2) the popup form (stylesheet: ivory fields) */
.field-ivory {
  width: 100%; height: 50px; margin: 0; padding: 12px 10px; color: var(--field-ink); background-color: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-btn); font-family: var(--font-body); font-size: 1rem;
}
.field-ivory:focus { border-color: var(--accent); background-color: var(--field-focus-bg); outline: none; }
.field-ivory::placeholder { color: var(--field-ink); }
textarea.field-ivory { height: auto; min-height: 8rem; }
.fields { display: flex; flex-flow: column; gap: .75rem; width: 100%; margin-bottom: 1.875rem; }
.fields__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.btn-form {
  color: var(--black); background-color: var(--white); background-image: var(--icon-arrow-ink); background-position: 85%; background-repeat: no-repeat;
  border: 1px solid var(--black); border-radius: var(--radius-btn); padding: 14px 2rem 14px 1.375rem; cursor: pointer;
  font-family: var(--font-alt); font-size: .875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* --- Popup: popup_wrap --------------------------------------------------------------------- */
.popup {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0;
  background-color: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .5s;
}
.popup.is-open { display: flex; }
.popup.is-visible { opacity: 1; }
.popup__panel {
  position: relative; width: 100%; max-width: 640px; padding: 3rem 3.5rem; border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-image: linear-gradient(-135deg, var(--surface-hi) 0%, var(--surface-lo) 100%), linear-gradient(135deg, var(--accent) 0%, var(--border-end) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.popup__title { display: flex; flex-flow: column; align-items: center; gap: .5rem; margin-bottom: 2rem; text-align: center; }
.popup__close { position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 1.5rem; }

/* --- System messages (form_message-*) --------------------------------------------------------- */
.msg { padding: 1.25rem; }
.msg--success { background-color: var(--success); color: var(--success-ink); }
.msg--error { background-color: var(--error); color: var(--error-ink); padding: .75rem; }
.msg--warning { background-color: var(--warning); color: var(--warning-ink); border-radius: .25rem; padding: .25rem .5rem; font-size: .875rem; }
.tag { display: inline-flex; align-items: center; padding: .25rem .75rem .3rem; border-radius: .25rem; background-color: var(--grey-light); color: var(--white);
  font-family: var(--font-alt); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: .875rem; }
.tag--tertiary { background-color: var(--bg-tertiary); color: var(--text); }

/* --- Document helpers (starter.html): a card grid for reports ----------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; }
.card {
  position: relative; display: flex; flex-flow: column; gap: 1rem; padding: 2.5rem 2.5rem; color: var(--text);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-clip: padding-box;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg); transition: all var(--dur-ui) var(--ease-ui);
}
.card:hover {
  border: 1px solid transparent;
  background-image: linear-gradient(135deg, var(--surface-hi) 0%, var(--surface-lo) 100%), linear-gradient(135deg, var(--border-end) 0%, var(--accent) 100%);
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 50px 0 var(--glow);
}
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 0; }

/* =============================================================================
   (d) MOTION STATES (driven by motion.js; see INVENTORY.md for the ix2 source)
   ========================================================================== */
@keyframes ds-pulse-glow { 0%, 100% { opacity: .4; transform: translateX(-50%) scale(1); } 50% { opacity: .8; transform: translateX(-50%) scale(1.1); } }
@keyframes ds-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { opacity: 0; animation: ds-fade-up .8s ease forwards; }
.fade-up--2 { animation-delay: .2s; } .fade-up--4 { animation-delay: .4s; } .fade-up--6 { animation-delay: .6s; }

/* in-view effects: [data-in="fade"] (fadeIn) and [data-in="slide"] (slideInBottom) */
.js [data-in] { opacity: 0; }
.js [data-in="slide"] { transform: translate3d(0, 100px, 0); }
.js [data-in].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); transition-delay: var(--in-delay, 0ms); }

/* page-load sequence: [data-load="N"] fades in as step N (Hero Load / Hero Load 2 / Case Study LOAD) */
.js [data-load] { opacity: 0; }
.js [data-load-y] { transform: translate3d(0, -10px, 0); }
.js [data-load].is-loaded { opacity: 1; transform: none; transition: opacity var(--load-dur, 500ms) var(--load-ease, var(--ease-in-out)), transform var(--load-dur, 500ms) var(--ease-in-out-quad); }

/* CTA (Footer FADE IN / OUT) */
.js .cta [data-cta] { opacity: 0; filter: blur(8px); transform: translate3d(0, 20px, 0); }
.js .cta .blob--1 { opacity: 0; transform: translate3d(0, 100px, 0) scale(.7); }
.js .cta .blob--2 { opacity: 0; transform: translate3d(0, 120px, 0) scale(.9); }
.js .cta .blob--3 { opacity: 0; transform: translate3d(0, 140px, 0) scale(.8); }
.js .cta [data-cta], .js .cta .blob { transition: opacity .5s linear, transform .5s linear, filter .5s linear; }
.js .cta.is-in [data-cta], .js .cta.is-in .blob { opacity: 1; transform: none; transition-timing-function: var(--ease-cta); transition-duration: .4s; }
.js .cta.is-in [data-cta] { filter: blur(0); }
.js .cta.is-in [data-cta="1"], .js .cta.is-in .blob--3 { transition-delay: .1s; }
.js .cta.is-in [data-cta="2"], .js .cta.is-in .blob--2 { transition-delay: .55s; }
.js .cta.is-in .blob--2 { transition-duration: .5s; }
.js .cta.is-in [data-cta="3"], .js .cta.is-in .blob--1 { transition-delay: 1.1s; }

/* line-logo (Logo line animate IN) */
.line-logo.is-in .line-logo__line { width: 100%; transition: width .5s var(--ease-in-out-quad); }

/* mobile menu (Webflow nav, data-animation="default", 400ms ease) */
.nav__overlay { display: none; }

/* =============================================================================
   BREAKPOINTS (Morningside: 991 / 767 / 479)
   ========================================================================== */
@media screen and (max-width: 991px) {
  h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } h3 { font-size: 2rem; }
  .h1 { font-size: 3rem; }
  .text-lg { font-size: 1.25rem; }
  .text-md { font-size: 1.15rem; }
  .lede { font-size: 1.15rem; }
  :root { --section-lg: 6rem; --section-md: 4rem; }
  .hero__pad { padding-top: 4rem; padding-bottom: 4rem; }

  .nav { padding-top: 1rem; }
  .nav__brand { width: 150px; margin-top: 8px; }
  .nav__toggle { display: block; padding: .5rem; }
  .nav__menu { display: none; }
  .nav__overlay { display: block; position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; pointer-events: none; }
  .nav__overlay .nav__menu {
    display: block; text-align: center; background-color: var(--bg-tertiary); padding: 3rem 2rem 4rem;
    transform: translateY(-100%); transition: transform .4s ease; visibility: hidden;
  }
  .nav.is-open .nav__overlay { pointer-events: auto; }
  .nav.is-open .nav__overlay .nav__menu { transform: translateY(0); visibility: visible; }
  .nav__overlay .nav__link { display: block; }
  .nav__overlay .nav__cta { margin: 2rem 0 0; display: inline-flex; }

  .hero { padding-top: 3rem; }
  .hero__wrap { gap: 4rem; }
  .hero__logos { margin-top: 6rem; }
  .hero__logos .label--muted { font-size: .75rem; }
  .logo-row { gap: 2rem; flex-flow: wrap; justify-content: center; align-items: flex-start; }
  .logo-ph { height: 4rem; }
  .stack-center { gap: 2rem; }
  .mt-huge { margin-top: 3rem; }
  .process__list { gap: 2.5rem; margin-top: 5rem; }
  .process-step { gap: 2.5rem; }
  .process-num { width: 65px; font-size: 7rem; }
  .process-card { gap: 2rem; padding: 2.5rem 3rem; }
  .process-card__info { min-width: 200px; }
  .process-card__icon { width: 100px; max-width: 100px; }
  .testimonials__wrap { flex-flow: column; align-items: center; gap: 2rem; margin-top: 5rem; }
  .testimonial { align-self: center; }
  .dashed-divider { height: 50px; transform: rotate(90deg); }
  .stat { margin-left: 2rem; margin-right: 2rem; }
  .case-grid { gap: 1rem; }
  .case-card__title { font-size: 1.25rem; }
  .case-card__arrow { opacity: 1; }
  .footer-bar { flex-flow: column; align-items: flex-start; gap: 1rem; }
  .footer-bar__left { width: 100%; }
  .footer-bar__links { justify-content: space-between; align-items: flex-start; width: 100%; margin-left: 0; }
  .story__final { padding-left: 1.5rem; padding-right: 1.5rem; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .cs-sub { font-size: 1.15rem; }
  .tab-panel { padding: 1rem 2rem 2rem; }
  .tab-panel__top { gap: 3rem; }
  .tab-panel__num { font-size: 1.5rem; }
  .tab-panel__text { font-size: 3rem; }
  .tab-panel__lottie { width: 200px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .contact { grid-template-columns: 1fr; gap: 48px; }
}
@media screen and (max-width: 767px) {
  h1 { font-size: 3rem; } h2, h3 { font-size: 2.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } h6 { font-size: .875rem; }
  .h1 { font-size: 2.5rem; } .h2 { font-size: 2rem; } .h3 { font-size: 1.5rem; } .h4 { font-size: 2rem; } .h5 { font-size: .875rem; } .h6 { font-size: .75rem; }
  .text-lg { font-size: 1.25rem; }
  .text-md { font-size: 1rem; }
  .text-xl { font-size: 1.25rem; }
  .lede { font-size: 1.5rem; font-weight: 400; }
  :root { --gutter: 1.25rem; --section-lg: 4rem; --section-md: 3rem; --section-sm: 2rem; }
  .hero__pad { padding-bottom: 2rem; }
  .nav__brand { width: 150px; margin-top: 10px; }
  .hero { background-size: contain, auto; }
  .hero--plain { min-height: 70svh; }
  .hero__logos { margin-top: 3rem; }
  .hero__logos .label--muted { font-size: .875rem; }
  .hero__logos .logo-row { display: none; }
  .hero__ticker.ticker { display: flex; }
  .hero__ticker .logo-row { display: flex; flex-flow: row; flex: none; gap: 0; margin-top: 0; justify-content: flex-start; align-items: center; overflow: visible; }
  .hero__ticker .logo-row__item { height: 80px; margin: 0 1rem; }
  .hero__ticker .logo-ph { height: 80px; }
  .hero__ticker .ticker__fade { background-image: linear-gradient(90deg, var(--hero-fade-l), transparent); }
  .hero__ticker .ticker__fade--right { background-image: linear-gradient(90deg, transparent, var(--hero-fade-r)); }
  .process-step { gap: 1rem; }
  .process-num { width: 50px; font-size: 4rem; }
  .process-card { flex-flow: column; gap: 1.5rem; padding: 2rem 2.5rem; }
  .process-card__arrow { opacity: 1; display: block; }
  .process-card__icon { width: 140px; max-width: 140px; }
  .stack-left--center-sm { text-align: center; align-items: center; }
  .testimonials__wrap { gap: 3rem; }
  .stat__num { font-size: 2rem; }
  .case-grid { display: flex; flex-flow: column; gap: 2rem; }
  .faq { background-size: 150px, 150px; }
  .faq__wrap { margin-top: 4rem; }
  .accordion { padding: 1.25rem; }
  .dashed-divider { display: none; }
  .cta__dashed { padding-left: 2rem; padding-right: 2rem; }
  .cta__dashed::before { display: none; }
  .cta__wrap { margin-bottom: 6rem; }
  .footer-bar { display: none; }
  .footer-mobile { display: block; }
  .story__line { font-size: 1.5rem; }
  .story__line--1 { font-size: 2rem; }
  .grad-display { font-size: 2.5rem; }
  .prose h2 { font-size: 2rem; }
  .prose p { font-size: 1.15rem; }
  .fact-card { padding-top: 2rem; padding-bottom: 2rem; }
  .cs-sub { font-size: 1.15rem; font-weight: 400; }
  .popup__panel { padding: 2rem 2.5rem; }
  .fields__pair { gap: .5rem; }
  .field-ivory { height: 45px; }
  .fields { gap: .5rem; margin-bottom: 1rem; }
  .tabs__nav-wrap { margin-bottom: 1rem; }
  .tabs__nav { gap: 2rem; }
  .tab__text { font-size: 1.5rem; }
  .tab-panel { padding-top: 0; }
  .tab-panel__content { gap: 3rem; }
  .tab-panel__top { flex-flow: column; align-items: flex-start; gap: 1rem; }
  .tab-panel__lottie { width: 150px; }
  .founder, .founder--flip { display: flex; flex-flow: column; }
  .founder--flip { flex-flow: wrap-reverse; }
  .team-grid { gap: 1rem; }
  .team-card__photo { height: 250px; }
  .team-card__name { font-size: 1.25rem; }
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-card { padding: 28px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr; }
}
@media screen and (max-width: 479px) {
  h1 { font-size: 3rem; }
  .h1 { font-size: 2rem; }
  .text-lg { font-size: 1.35rem; }
  .text-md { font-size: 1rem; }
  .lede { font-size: 1.25rem; }
  .hero__pad { padding-top: 0; padding-bottom: 1rem; }
  .btn--icon { font-size: .75rem; }
  .btn--icon:hover { gap: 1rem; }
  .nav { padding-top: .25rem; padding-bottom: .25rem; }
  .nav__toggle { padding-right: 0; }
  .hero { min-height: 100svh; padding-top: 0; }
  .hero--plain { padding-top: 6rem; }
  .hero__logos { margin-top: 2rem; }
  .label { font-size: .75rem; }
  .process-step { flex-flow: column; align-items: flex-start; justify-content: flex-start; }
  .process-num { font-size: 3rem; display: none; }
  .process-card { padding-left: 2rem; padding-right: 2rem; }
  .process-card, .case-card__img {           /* inline <style> @479: gradient border always on */
    border: 1px solid transparent;
    background-image: linear-gradient(90deg, var(--surface-lo) 0%, var(--surface-hi) 100%), linear-gradient(90deg, var(--accent) 0%, var(--border-end) 100%);
    background-origin: border-box; background-clip: padding-box, border-box;
  }
  .testimonials { background-size: 200px, 200px; }
  .testimonials__wrap { gap: 3rem; }
  .stats { margin-top: 2rem; }
  .accordion { padding: 1rem; }
  .footer-bar__links { gap: 15px; }
  .story { height: 460vh; }
  .story__line { font-size: 1.75rem; }
  .story__line--1 { font-size: 1.75rem; line-height: 1.1; }
  .story__final { padding-left: 1.25rem; padding-right: 1.25rem; }
  .case-card__title { font-size: 1.35rem; }
  .footer-mobile__heading { font-size: 1.5rem; }
  .footer-mobile__meta { font-size: 1rem; }
  .prose p { font-size: 1.1rem; }
  .fact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fact-card { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .popup { inset: 0 0 auto; }
  .popup__panel { padding: 1.5rem 1.5rem .5rem; overflow: auto; }
  .popup__title { margin-bottom: 1rem; }
  .fields__pair { display: flex; flex-flow: column; gap: .25rem; }
  .field-ivory { height: 40px; padding-top: 4px; padding-bottom: 4px; }
  .fields { gap: .25rem; }
  .btn-form { padding-top: 12px; padding-bottom: 12px; }
  .tabs__nav { gap: 1rem; justify-content: space-between; width: 100%; max-width: 300px; }
  .tab__text { font-size: 1.2rem; }
  .tab { gap: 4px; }
  .tab__num { font-size: .7rem; }
  .tab-panel { padding: .5rem 1.5rem 1.5rem; }
  .tab-panel__text { font-size: 2rem; }
  .tab-panel__lottie { width: 120px; }
  .team-grid { display: flex; flex-flow: column; }
  .team-card__photo { height: 280px; }
}

/* =============================================================================
   LAYER 2: OUR COMPONENTS, RE-SKINNED ONTO LAYER 1
   Sources: the GBP report engine (scripts/gbp-grader/report_modules.py CSS, geo_maps.py CSS,
   report_engine.py STRUCT), the taste report (lexi/app/taste/taste.css r-* classes) and Lexi's
   app primitives (lexi/app/globals.css). Each keeps its structure and purpose; the look is
   layer 1's: Morningside radii (4 / 8 / 12px), the 135deg card gradient with a 6% ivory
   hairline, Poppins 300 display, Space Grotesk labels at .1em, the white button (the orange
   button only where Morningside itself fills with the accent). Old -> new names: readme.md.
   ========================================================================== */

/* --- shared report scaffolding ------------------------------------------------- */
.report { position: relative; max-width: 860px; margin: 0 auto; display: grid; gap: 4.5rem; }
.report > * { min-width: 0; }
.report-sec { display: grid; gap: 1.5rem; }
.report-sec > * { min-width: 0; }
.report-head { display: grid; gap: .75rem; }
.report-head p { max-width: 62ch; }
.report-head .h4, .report-head h2 { margin: 0; }
.label--sm { font-size: .75rem; }
.label--quiet { color: var(--text-3); }   /* report labels: readable muted (layer-1 .label--muted is Morningside's low-contrast grey) */
.label--track { letter-spacing: .12em; }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.panel {
  padding: 1.25rem 1.5rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-clip: padding-box;
}
.panel--flush { padding: .5rem 1.5rem; }
.sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

/* --- report header: meta chips, verdict, grade rings ----------------------------- */
.report-top { display: grid; gap: 1.25rem; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.meta-chip {
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 4px 10px;
}
.meta-chip b { color: var(--text); font-weight: 400; }
.verdict { font-size: 1.25rem; line-height: 1.5; font-weight: 300; color: var(--text-2); max-width: 56ch; }
.verdict b { color: var(--text); font-weight: 500; }
.grade-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.grade {
  display: grid; gap: .75rem; justify-items: start; align-content: start; padding: 1.25rem;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo));
}
.grade__ring {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor;
  font-family: var(--font-body); font-weight: 300; font-size: 1.625rem; line-height: 1;
}
.grade.is-good .grade__ring { color: var(--good); background: var(--good-soft); }
.grade.is-warn .grade__ring { color: var(--warn); background: var(--warn-soft); }
.grade.is-bad .grade__ring { color: var(--bad); background: var(--bad-soft); }
.grade p { font-size: .875rem; color: var(--text-3); line-height: 1.4; }

/* --- plan strip ------------------------------------------------------------------ */
.plan-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo));
}
.plan-step { display: grid; gap: .4rem; align-content: start; padding: 1.25rem 1.25rem 1.5rem; border-left: 1px solid var(--border-faint); color: inherit; text-decoration: none; transition: background-color var(--dur-ui) var(--ease-ui); }
.plan-step:first-child { border-left: 0; }
.plan-step:hover { background-color: var(--accent-soft); }
.plan-step__n { font-family: var(--font-body); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--accent-ink); }
.plan-step b { font-weight: 500; }
.plan-step p { font-size: .875rem; color: var(--text-3); }

/* --- rank tiles + band strip --------------------------------------------------------- */
.rank-grid { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rank-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rank-tile {
  display: grid; gap: 2px; align-content: start; padding: .875rem 1rem;
  border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo));
}
.rank-tile__n { font-family: var(--font-body); font-weight: 300; font-size: 2rem; line-height: 1.1; color: var(--accent-ink); }
.rank-tile__q { font-size: .875rem; font-weight: 500; color: var(--text); line-height: 1.5; }
.rank-tile__c { font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.rank-tile.is-miss { background: transparent; border: 1px dashed var(--bad); }
.rank-tile.is-miss .rank-tile__n { font-size: 1.2rem; color: var(--bad); letter-spacing: .02em; }
.rank-tile.is-miss .rank-tile__q { color: var(--text-3); }
.band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.band-card { display: grid; gap: .5rem; align-content: start; padding: .875rem; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.band-card__n { font-family: var(--font-body); font-weight: 300; font-size: 1.5rem; line-height: 1; }
.band-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--well); }
.band-bar i { display: block; height: 100%; }
.band-bar .is-good { background: var(--good); } .band-bar .is-mid { background: var(--warn); } .band-bar .is-none { background: var(--bad); }
.band-list { list-style: none; margin: 0; padding: 0; }
.band-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; margin: 0; border-top: 1px solid var(--line); font-size: .875rem; color: var(--text-2); }
.band-list li:first-child { border-top: 0; }
.band-list b { font-weight: 400; } .band-list .is-good b { color: var(--good); } .band-list .is-mid b { color: var(--warn); } .band-list .is-none b { color: var(--bad); }

/* --- AI dot matrix + legend --------------------------------------------------------- */
.ai-matrix { display: grid; padding: .5rem 1.25rem; overflow-x: auto; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.ai-matrix__row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(4, 64px); gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); min-width: 440px; }
.ai-matrix--two .ai-matrix__row { grid-template-columns: minmax(0, 1fr) repeat(2, 96px); min-width: 0; }
.ai-matrix__row:first-child, .ai-matrix__row.is-head { border-top: 0; }
.ai-matrix__row.is-head { padding: 4px 0; }
.ai-matrix__row.is-head span { font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); text-align: center; line-height: 1.3; }
.ai-matrix__row.is-town span.t { grid-column: span 2; text-align: center; font-family: var(--font-alt); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--line-strong); padding-bottom: 5px; }
.ai-matrix__row.is-band { padding: 12px 0 2px; border-top: 1px solid var(--line-strong); }
.ai-matrix__row.is-band span { grid-column: 1 / -1; font-family: var(--font-alt); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.ai-matrix__q { font-size: .875rem; color: var(--text); line-height: 1.5; }
.ai-matrix__cell { display: flex; justify-content: center; gap: 6px; }
.ai-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot-off); display: inline-block; }
.ai-dot.is-on { background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.web-count { display: grid; gap: 4px; width: 100%; max-width: 70px; }
.web-count__n { font-size: .75rem; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.web-count__n b { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--text); }
.web-count__bar { height: 6px; border-radius: 3px; background: var(--dot-off); overflow: hidden; }
.web-count__bar i { display: block; height: 100%; background: var(--accent); }
.ai-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.ai-matrix__cap { font-family: var(--font-alt); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); padding: 8px 0 4px; }
.ai-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; color: var(--text-3); align-items: center; }
.ai-legend .ai-dot { width: 10px; height: 10px; vertical-align: -1px; margin-right: 6px; }
.report-foot-note { font-size: .8125rem; color: var(--text-3); max-width: 74ch; }

/* --- takeaway (engine) / signature line --------------------------------------------- */
.takeaway { border-left: 2px solid var(--accent); padding: 4px 0 4px 1rem; font-size: 1rem; color: var(--text-2); max-width: 62ch; }
.takeaway b { color: var(--text); font-weight: 500; }

/* --- rival bars + directory chips + star rating ---------------------------------------- */
.rival-bars { display: grid; gap: 7px; align-content: start; padding: 1.25rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.rival-bars__head { margin-bottom: 4px; }
.rival-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: .8125rem; }
.rival-bar__name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival-bar__track { height: 10px; background: var(--well); border-radius: 2px; overflow: hidden; }
.rival-bar__track i { display: block; height: 100%; background: var(--line-strong); border-radius: 2px; }
.rival-bar__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); }
.rival-bar.is-you .rival-bar__name, .rival-bar.is-you .rival-bar__v { color: var(--accent-ink); font-weight: 600; }
.rival-bar.is-you .rival-bar__track i { background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-chip { font-family: var(--font-alt); font-size: .75rem; letter-spacing: .04em; padding: 6px 12px; border-radius: var(--radius-btn); border: 1px dashed var(--line-strong); color: var(--text-3); }
.dir-chip.is-on { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.star-rows { position: relative; display: grid; gap: 10px; }
.star-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.star-row__l { display: grid; line-height: 1.25; }
.star-row__l b { font-weight: 500; font-size: .875rem; } .star-row__l small { font-size: .75rem; color: var(--text-3); }
.star-row__track { position: relative; height: 14px; background: var(--well); border-radius: 2px; }
.star-row__track i { position: absolute; inset: 0 auto 0 0; background: var(--good); border-radius: 2px; }
.star-row__track::after { content: ""; position: absolute; left: 75%; top: -5px; bottom: -5px; border-left: 1.5px dashed var(--text); opacity: .8; }
.star-row.is-mid .star-row__track i { background: var(--warn); } .star-row.is-low .star-row__track i { background: var(--bad); }
.star-row__v { font-family: var(--font-body); font-weight: 300; font-size: 1.25rem; text-align: right; }
.star-row.is-mid .star-row__v { color: var(--warn); } .star-row.is-low .star-row__v { color: var(--bad); }
.star-axis { position: relative; height: 16px; font-size: .6875rem; color: var(--text-3); }
.star-axis span { position: absolute; transform: translateX(-50%); }
.star-axis span:first-child { transform: none; } .star-axis span:last-child { transform: translateX(-100%); }
.dash-key { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--text); margin-right: 8px; vertical-align: -1px; }

/* --- reach figure: map + tabs + stat rows + holders + county table ---------------------- */
.reach-fig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.reach-map { position: relative; display: grid; align-content: start; padding: 8px; background: radial-gradient(90% 90% at 50% 50%, var(--accent-soft), transparent); }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 14px 14px; font-size: .75rem; color: var(--text-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.reach-side { display: grid; align-content: start; gap: 1rem; padding: 1.25rem; border-left: 1px solid var(--border-faint); }
.reach-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.reach-tab {
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 9px 12px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); cursor: pointer;
  transition: all var(--dur-ui) var(--ease-ui);
}
.reach-tab[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.reach-panel { display: grid; gap: .875rem; }
.reach-panel[hidden] { display: none; }
.reach-panel__head { display: grid; gap: 2px; }
.reach-panel__head b { font-family: var(--font-body); font-weight: 300; font-size: 1.25rem; letter-spacing: -.02em; }
.reach-stats { display: grid; gap: 6px; }
.reach-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "l n" "t n"; column-gap: 12px; row-gap: 2px; align-items: center; align-content: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--well); border: 1px solid var(--border-faint); }
.reach-stat__l { grid-area: l; font-size: .8125rem; line-height: 1.3; color: var(--text-2); align-self: end; }
.reach-stat__t { grid-area: t; font-size: .75rem; color: var(--text-3); line-height: 1.35; align-self: start; }
.reach-stat__n { grid-area: n; font-family: var(--font-body); font-weight: 300; font-size: 1.5rem; line-height: 1; text-align: right; white-space: nowrap; }
.reach-stat.is-good .reach-stat__n { color: var(--good); } .reach-stat.is-mid .reach-stat__n { color: var(--warn); } .reach-stat.is-none .reach-stat__n { color: var(--bad); }
.holders { list-style: none; margin: 0; padding: 0; display: grid; }
.holders li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; margin: 0; border-top: 1px solid var(--line); font-size: .875rem; }
.holders li:first-child { border-top: 0; }
.holders small { display: block; font-size: .75rem; color: var(--text-3); }
.holders__p { font-family: var(--font-body); font-size: .9375rem; white-space: nowrap; }
.holders .is-good .holders__p { color: var(--good); } .holders .is-mid .holders__p { color: var(--warn); } .holders .is-none .holders__p { color: var(--bad); }
.city-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; border: 1.3px solid var(--text-3); }
.city-dot.is-good { background: var(--accent); border-color: var(--accent); }
.city-dot.is-mid { background: var(--warn); border-color: var(--warn); }
.city-dot.is-none { background: transparent; border-color: var(--text-3); }
.county-table { display: grid; padding: 4px 1.25rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.county-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.county-row:first-child { border-top: 0; }
.county-row__name { display: grid; line-height: 1.25; }
.county-row__name b { font-weight: 500; font-size: 1rem; } .county-row__name small { font-size: .75rem; color: var(--text-3); }
.city-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-2); background: var(--well); border: 1px solid var(--border-faint); border-radius: var(--radius-btn); padding: 3px 8px; white-space: nowrap; }
.city-chip b { font-weight: 500; } .city-chip.is-good b { color: var(--good); } .city-chip.is-mid b { color: var(--warn); } .city-chip.is-none b { color: var(--bad); }
.city-chip.is-unmeasured { color: var(--text-3); }

/* geo map (engine SVG classes kept: .geomap .lvl .land .cty .ctl .st .stl .rr .rrl .cd .cl .home) */
.geomap { display: block; width: 100%; height: auto; max-width: 600px; margin-inline: auto; }
.geomap .lvl { opacity: 0; transform: scale(1.35); transition: opacity .55s ease, transform .7s ease; pointer-events: none; }
.geomap .lvl.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.geomap .lvl.out { transform: scale(.72); }
.geomap .land { fill: color-mix(in srgb, var(--accent) 6%, var(--surface-hi)); stroke: none; }
.geomap .cty, .geomap .st { fill: none; stroke: var(--line-strong); stroke-width: .8; }
.geomap .cty.hi { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 1.1; }
.geomap .ctl { fill: var(--text-3); font: 500 10px var(--font-alt); letter-spacing: .14em; text-transform: uppercase; }
.geomap .stl { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .8; }
.geomap .rr { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; }
.geomap .rrl { fill: var(--accent-ink); font: 500 10px var(--font-alt); letter-spacing: .1em; }
.geomap .cd { fill: transparent; stroke: var(--text-3); stroke-width: 1.3; }
.geomap .cd.good { fill: var(--accent); stroke: var(--accent); }
.geomap .cd.mid { fill: var(--warn); stroke: var(--warn); }
.geomap .cd.none { fill: var(--surface-hi); stroke: var(--text-3); }
.geomap .cd.big { stroke-width: 2; }
.geomap .cl { fill: var(--text-2); font: 400 12px var(--font-body); paint-order: stroke; stroke: var(--surface-hi); stroke-width: 4px; stroke-linejoin: round; }
.geomap .home .hd { fill: var(--accent); }
.geomap .home .pulse { fill: none; stroke: var(--accent); stroke-width: 2; }
.geomap .home text { fill: var(--text); font: 600 12px var(--font-body); paint-order: stroke; stroke: var(--surface-hi); stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .geomap .sweep { animation: ds-map-spin 9s linear infinite; }
  .geomap .home .pulse { animation: ds-map-pulse 2.4s ease-out infinite; }
}
@keyframes ds-map-spin { to { transform: rotate(360deg); } }
@keyframes ds-map-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }

/* --- accuracy cards + threat cards (engine v15) ------------------------------------------ */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.acc-card { display: grid; gap: .875rem; align-content: start; padding: 1.25rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.acc-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acc-card__big { font-family: var(--font-body); font-weight: 300; font-size: 2.125rem; line-height: 1; color: var(--bad); }
.src-rows { display: grid; gap: 6px; }
.src-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--radius-btn); background: var(--well); border: 1px solid var(--border-faint); }
.src-row__who { display: flex; flex-wrap: wrap; gap: 4px; }
.src-row__v { font-family: var(--font-body); font-size: 1rem; white-space: nowrap; }
.src-row.is-ok { border-color: color-mix(in srgb, var(--good) 35%, transparent); } .src-row.is-ok .src-row__v { color: var(--good); }
.src-row.is-off .src-row__v { color: var(--bad); }
.src-tag { justify-self: start; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--text-2); }
.hours-rows { display: grid; gap: 10px; }
.hours-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.hours-row__l { display: grid; gap: 2px; } .hours-row__l small { font-size: .75rem; color: var(--text-3); line-height: 1.35; }
.hours-strip { display: grid; grid-template-columns: repeat(7, 18px); gap: 5px; }
.hours-col { display: grid; gap: 3px; justify-items: center; }
.hours-col small { font-size: .625rem; color: var(--text-3); font-family: var(--font-alt); }
.hours-track { position: relative; width: 12px; height: 52px; border-radius: 2px; background: var(--well); border: 1px solid var(--border-faint); }
.hours-track i { position: absolute; left: 0; right: 0; background: var(--warn); border-radius: 1px; }
.hours-track i.is-closed { top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line-strong) 3px 4px); }
.hours-row.is-google .hours-track i:not(.is-closed) { background: var(--text-2); }
.acc-quote { font-size: .9375rem; line-height: 1.55; color: var(--text-2); border-left: 2px solid var(--line-strong); padding-left: 12px; }
.acc-quote mark { background: var(--bad-soft); color: var(--bad); padding: 0 3px; border-radius: 2px; font-weight: 500; }
.pin-line { display: flex; gap: 10px; align-items: center; font-size: .875rem; color: var(--text-2); }
.pin-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); flex: none; }
.ai-note { font-size: .8125rem; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 10px; }
.ai-note b { color: var(--bad); font-weight: 500; }
.threat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.threat-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 1.25rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.threat-card svg { width: 40px; height: 40px; color: var(--bad); }
.threat-card b { font-weight: 400; font-size: 1.125rem; }
.threat-card p { font-size: .875rem; color: var(--text-2); margin-top: 2px; }
.threat-card__rank { display: inline-block; margin-top: 8px; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* --- phase panel, checklist, confirm tag, pill, goal meter ------------------------------ */
.phase { display: grid; gap: 1.125rem; padding: 1.75rem 2rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.phase__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pill { display: inline-block; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius-btn); padding: 3px 9px; }
.pill--quiet { color: var(--text-2); border-color: var(--line-strong); }
.pill--star { color: var(--star); border-color: var(--star); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 13px 0; margin: 0; border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; }
.checklist b { font-weight: 500; }
.checklist p { font-size: .875rem; color: var(--text-3); margin-top: 2px; }
.check-box { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn); margin-top: 3px; }
.checklist.is-auto .check-box { border-color: var(--accent); background: var(--accent-soft); }
.confirm-tag { display: inline-block; margin-top: 8px; font-size: .8125rem; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-btn); padding: 3px 9px; }
.goal-meter { margin-top: 10px; display: grid; gap: 6px; max-width: 420px; }
.goal-meter__track { position: relative; height: 10px; background: var(--well); border-radius: 2px; }
.goal-meter__you { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--glow); }
.goal-meter__mark { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--text-2); }
.goal-meter__mark.is-goal { background: var(--good); }
.goal-meter__key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .75rem; color: var(--text-3); }
.goal-meter__key b { color: var(--text); font-weight: 500; } .goal-meter__key .is-goal b { color: var(--good); }
.goal-meter--frac { max-width: 360px; } .goal-meter--frac .goal-meter__track { height: 8px; overflow: hidden; } .goal-meter--frac .goal-meter__you { border-radius: 0; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.goal-chips span { font-size: .8125rem; color: var(--text-2); background: var(--well); border: 1px solid var(--border-faint); border-radius: var(--radius-btn); padding: 3px 9px; }
.goal-chips b { font-weight: 500; color: var(--text); } .goal-chips .is-goal b { color: var(--good); }

/* --- estimate tiles, CTA, questions, details, footer --------------------------------------- */
.estimate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.estimate { display: grid; gap: .625rem; align-content: start; padding: 1.5rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.estimate__price { font-family: var(--font-body); font-weight: 300; font-size: 2.25rem; line-height: 1.2; }
.estimate ul { margin: 0; padding-left: 18px; font-size: .875rem; color: var(--text-3); display: grid; gap: 4px; }
.estimate li { margin: 0; }
.report-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn--accent { background-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px var(--glow); }
.btn--accent:hover { background-color: var(--accent-hover); box-shadow: 0 0 0 9px var(--glow); }
.question-list { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.question-list li { margin: 0; } .question-list li::marker { color: var(--accent-ink); }
.question-list b { font-weight: 500; }
.question-list p { font-size: .875rem; color: var(--text-3); }
.report-details { padding: 14px 18px; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.report-details summary { cursor: pointer; font-weight: 500; font-size: .9375rem; }
.report-details p { margin-top: 10px; }
.report-footer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; font-size: .8125rem; color: var(--text-3); }

/* --- taste report (lexi/app/taste/taste.css r-*) --------------------------------------------- */
.report-hero { display: flex; flex-direction: column; gap: 1.75rem; padding: 3rem 0 2.5rem; }
.report-hero h1 { max-width: 13em; }
.report-opening { font-size: 1.3125rem; line-height: 1.6; font-weight: 300; color: var(--text-2); max-width: 34em; }
.signature { margin: 1rem 0 0; padding: 2.25rem 0 2.25rem 2rem; border-left: 1px solid var(--accent); display: flex; flex-direction: column; gap: 1rem; }
.signature blockquote { margin: 0; font-size: 2rem; line-height: 1.3; font-weight: 300; color: var(--text); max-width: 26em; }
.signature blockquote::before { content: "\201C"; color: var(--accent); margin-right: .06em; }
.signature blockquote::after { content: "\201D"; color: var(--accent); margin-left: .04em; }
.signature figcaption { color: var(--accent-ink); }
.stat-band { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-band > div { padding: 1.375rem 0 1.5rem; display: flex; flex-direction: column; gap: 10px; }
.stat-band > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.stat-band dt { margin: 0; } .stat-band dd { margin: 0; font-size: 3rem; line-height: 1; font-weight: 300; color: var(--text); font-variant-numeric: tabular-nums; }
.chapter { padding-top: 5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.chapter__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chapter__head .chapter__n { font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); color: var(--accent-ink); }
.chapter__head h2 { margin: 0; color: var(--text-2); font-size: 1.75rem; line-height: 1.3; }
.finding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.finding { display: flex; flex-direction: column; gap: .75rem; padding: 1.625rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.finding h3 { margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 300; }
.finding p { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.finding.is-quiet { background: transparent; }
.quote-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.quote-list li { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; margin: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.quote-list q { font-size: .9375rem; line-height: 1.55; color: var(--accent-ink); }
.direction-list { display: flex; flex-direction: column; }
.direction { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.direction:first-child { padding-top: 0; }
.direction__area { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.direction__name { font-size: 1.625rem; line-height: 1; font-weight: 300; }
.direction__body { display: flex; flex-direction: column; gap: 12px; }
.direction__body p { font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.direction.is-open .direction__body p { color: var(--text-3); }
.tag-chip { font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--text-3); }
.tag-chip.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-ink); }
.fav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fav { display: flex; flex-direction: column; gap: .875rem; padding: 1.5rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.fav__rank { font-size: .9375rem; color: var(--accent-ink); font-weight: 300; font-variant-numeric: tabular-nums; }
.fav h3 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 300; min-height: 2.4em; }
.fav p:not(.label) { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.swatches { display: flex; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); overflow: hidden; }
.swatches i { flex: 1; display: block; }
.next-line { font-size: 1.25rem; line-height: 1.6; font-weight: 300; color: var(--text-2); max-width: 34em; }

/* --- steps + info card (taste consent / Start flow, cross-surface) --------------------------- */
.step-list { display: flex; flex-direction: column; gap: 10px; }
.step-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.125rem 1.25rem; color: var(--text); text-decoration: none; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); transition: border-color .3s, opacity .3s; }
/* v0.9.0 states: default = available now (full strength); .is-current = the next step; .is-locked = not open yet; .is-done = finished */
a.step-card:hover { border-color: var(--line-strong); }
.step-card.is-current { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.step-card.is-locked { opacity: .55; }
.step-card__n { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--text-2); font-family: var(--font-alt); font-size: .6875rem; }
.step-card.is-current .step-card__n { border-color: var(--accent); color: var(--accent-ink); }
.step-card.is-done .step-card__n { position: relative; border-color: var(--accent); background: var(--accent); color: transparent; }
.step-card.is-done .step-card__n::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }   /* the done mark: filled square, drawn check */
.step-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; }
.step-card__body strong { font-weight: 400; font-size: 1.0625rem; }
.step-card.is-done .step-card__body strong { color: var(--text-3); }
.step-card__body p { font-size: .875rem; color: var(--text-3); }
.step-card__when { font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }   /* "Opens after we meet" */
.info-card { display: flex; flex-direction: column; gap: 10px; padding: 1.375rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.info-card p { color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.info-card.is-warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }

/* --- Lexi app primitives (lexi/app/globals.css) ------------------------------------------------ */
.state-chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); white-space: nowrap;
  font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.state-chip.is-active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.state-chip.is-done { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.state-chip.is-off { color: var(--text-3); }
.state-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.progress-rule { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.progress-rule > i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); box-shadow: 0 0 12px var(--glow-strong); transition: width .5s ease; }
.rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rule-list li { position: relative; margin: 0; padding-left: 17px; color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent-ink); }
.note-card { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--well) 55%, transparent); color: var(--text-3); font-size: .75rem; line-height: 1.5; }
.note-card__lead { color: var(--text-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: .8125rem; background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-family: var(--font-alt); font-weight: 400; font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); background: var(--well); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.data-table a { color: var(--accent-ink); }

/* --- layer 2 breakpoints (Morningside's 991 / 767 / 479, plus the engine's 680 / 540 steps folded in) --- */
@media screen and (max-width: 767px) {
  .report { gap: 3.5rem; }
  .grade-grid, .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-strip { grid-template-columns: 1fr; }
  .plan-step { border-left: 0; border-top: 1px solid var(--border-faint); } .plan-step:first-child { border-top: 0; }
  .band-grid, .pair-grid, .ai-pair, .acc-grid, .threat-grid, .estimate-grid, .finding-grid, .fav-grid { grid-template-columns: 1fr; }
  .reach-fig { grid-template-columns: 1fr; }
  .reach-side { border-left: 0; border-top: 1px solid var(--border-faint); padding: 1.125rem 1rem; }
  .ai-matrix { padding: .375rem .75rem; }
  .ai-matrix__row { grid-template-columns: minmax(96px, 1fr) repeat(4, 40px); gap: 4px; min-width: 0; }
  .ai-matrix--two .ai-matrix__row { grid-template-columns: minmax(0, 1fr) repeat(2, 72px); }
  .ai-matrix__q { font-size: .8125rem; } .ai-dot { width: 10px; height: 10px; } .ai-matrix__cell { gap: 4px; }
  .ai-matrix__row.is-head span { font-size: .5625rem; letter-spacing: .06em; }
  .ai-matrix__row.is-town span.t { min-width: 0; font-size: .5rem; letter-spacing: .02em; line-height: 1.25; overflow-wrap: anywhere; }   /* long towns (JEFFERSONVILLE) fit their two 40px columns */
  .county-row { grid-template-columns: 1fr; gap: 8px; }
  .phase { padding: 1.25rem 1rem; }
  .direction { grid-template-columns: 1fr; gap: 14px; }
  .stat-band dd { font-size: 2.125rem; }
  .signature { padding-left: 1.25rem; } .signature blockquote { font-size: 1.5rem; }
  .verdict { font-size: 1.125rem; }
}
@media screen and (max-width: 479px) {
  .rival-bar { grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 8px; font-size: .78rem; }
  .rival-bar__name { white-space: normal; line-height: 1.2; }
  .star-row { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 8px; }
  .stat-band { grid-template-columns: 1fr; } .stat-band > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .hours-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   LAYER 2: TASTE (the taste session's capture flow and the team brief, 2026-09-26)
   Source: lexi/app/taste/taste.css + components/Capture.tsx, Report.tsx, and the team brief
   artifact. Built from existing tokens only (no token added). Reuses layer 1 and layer 2 where
   the fit is real: .info-card + .rule-list (consent), .progress-rule (mic level), .popup
   (overlays), .rank-tile (decision index), .rival-bar (per-site bars), .pill, .meta-chip,
   .ai-dot. Old -> new names: readme.md, "Layer 2: taste".
   ========================================================================== */

/* --- shared small pieces ----------------------------------------------------------- */
.btn--block { width: 100%; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-btn);
  background: transparent; color: var(--text-3); cursor: pointer; white-space: nowrap;
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: all var(--dur-ui) var(--ease-ui);
}
.link-btn:hover:not(:disabled) { color: var(--text); background: var(--well); }
.link-btn:disabled { opacity: .35; cursor: default; }
.link-btn.is-strong { color: var(--accent-ink); }
.pill--good { color: var(--good); border-color: var(--good); }
.pill--bad { color: var(--bad); border-color: var(--bad); }

/* --- 1. consent and disclosure card: .info-card + .disclosure rows ----------------------- */
.disclosure { gap: 0; padding: .5rem 1.375rem; }
.disclosure__row { display: grid; gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.disclosure__row:first-child { border-top: 0; }
.disclosure__row p { color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.disclosure .rule-list li { font-size: .9375rem; }

/* --- 2. site-loop control bar over a full-bleed site ------------------------------------- */
.loop { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--bg); transition: opacity .6s ease; }
.loop.is-fading { opacity: 0; }
.loop-bar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 1.125rem; min-height: 64px; padding: 0 1.25rem;
  background-color: var(--bg); border-bottom: 1px solid var(--border-faint);
}
.loop-bar button:disabled { opacity: .35; cursor: default; }
.loop-progress { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.loop-slots { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 3px; }
.loop-slots i { display: block; background: var(--line-strong); }
.loop-slots i.is-done { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.loop-slots i.is-skipped { background: repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 4px); }
.loop-slots i.is-current { background: var(--text); }
.loop-slots__min { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--text-2); }
.loop-progress__labels { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-family: var(--font-alt); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums; }
.loop-site { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.loop-site__name { font-size: 1.0625rem; line-height: 1.2; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-site__count { margin-right: 10px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); color: var(--text-3); font-variant-numeric: tabular-nums; vertical-align: 2px; }
.loop-site__hint { font-size: .75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-site__hint.is-waiting { color: var(--accent-ink); }
.verdict-group { display: flex; flex-shrink: 0; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.verdict-group button {
  border: 0; border-radius: 2px; background: transparent; color: var(--text-2); cursor: pointer; padding: 8px 14px; white-space: nowrap;
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: all var(--dur-ui) var(--ease-ui);
}
.verdict-group button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--well); color: var(--text); }
.verdict-group button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.loop-next { flex-shrink: 0; min-width: 96px; padding: .65rem 1.25rem; font-size: .8125rem; box-shadow: 0 0 0 3px var(--glow); }
.loop-next:hover { box-shadow: 0 0 0 5px var(--glow); }
.loop-next:disabled { background: transparent; color: var(--text-2); box-shadow: none; border: 1px solid var(--line-strong); opacity: .5; }
.loop-actions { display: flex; flex-shrink: 0; align-items: center; }
.rec-time { display: flex; flex-shrink: 0; align-items: center; gap: 7px; min-width: 66px; height: 26px; padding-left: 14px; border-left: 1px solid var(--line); font-family: var(--font-alt); font-size: .6875rem; letter-spacing: .08em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec-time__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.rec-time.is-on { color: var(--text-2); }
.rec-time.is-on .rec-time__dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); animation: ds-rec-pulse 1.6s ease-in-out infinite; }
@keyframes ds-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.loop-frame { position: relative; min-height: 0; background: var(--white); }
.loop-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--white); }
.loop-frame__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-3); background: var(--bg); }
@media (max-width: 1320px) {
  .loop-bar { gap: .75rem; padding: 0 .875rem; }
  .loop-progress { width: 124px; }
  .verdict-group button { padding: 8px 10px; letter-spacing: .08em; }
  .loop-next { min-width: 84px; padding: .65rem 1rem; }
  .link-btn { padding: 0 5px; letter-spacing: .08em; }
  .rec-time { padding-left: 10px; min-width: 58px; }
}
/* phones: the same DOM; the bar dissolves and its parts dock around the site, controls at the bottom in thumb reach */
@media (max-width: 767px) {
  .loop { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "prog prog" "site rec" "frame frame" "verd verd" "more next"; }
  .loop-bar { display: contents; }
  .loop-progress { grid-area: prog; width: auto; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px 0; }
  .loop-progress .loop-slots { flex: 1; }
  .loop-site { grid-area: site; padding: 8px 0 10px 14px; border-bottom: 1px solid var(--border-faint); }
  .loop-site__name { font-size: 1.125rem; }
  .rec-time { grid-area: rec; align-self: stretch; height: auto; min-width: 0; padding: 8px 14px 10px 12px; border-left: 0; border-bottom: 1px solid var(--border-faint); }
  .loop-frame { grid-area: frame; }
  .verdict-group { grid-area: verd; margin: 10px 12px 0; }
  .verdict-group button { flex: 1; min-height: 46px; padding: 0 6px; font-size: .75rem; }
  .loop-actions { grid-area: more; flex-wrap: wrap; align-content: center; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)) 6px; }
  .link-btn { min-height: 44px; padding: 0 7px; }
  .loop-next { grid-area: next; align-self: center; min-width: 108px; min-height: 48px; margin: 6px 12px calc(8px + env(safe-area-inset-bottom)) 0; }
  .wide-only { display: none; }
}

/* --- 3. mic check: .progress-rule driven by --level (0 to 1), plus the heard state --------- */
.progress-rule--level > i { width: calc(var(--level, 0) * 100%); transition: width .1s linear; }
.progress-rule--level.is-heard > i { width: 100%; transition: width .4s ease; }
.level-status { display: flex; align-items: center; gap: 10px; }
.level-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.level-status.is-heard { color: var(--accent-ink); }
.level-status.is-heard::before { background: var(--accent); box-shadow: 0 0 8px var(--glow-strong); }

/* --- 4. overlays over the site: .popup + .popup--scrim; full-page stop screen -------------- */
.popup.popup--scrim { inset: 0; }   /* beats the phone rule that top-anchors .popup: a scrim must cover and block everything under it */
.popup--scrim { background-color: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 20px; }
.popup--scrim .popup__panel { max-width: 420px; padding: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.popup--scrim .popup__panel p { color: var(--text-2); }
.popup__panel--warn { background-image: linear-gradient(-135deg, var(--surface-hi) 0%, var(--surface-lo) 100%), linear-gradient(135deg, var(--warn) 0%, var(--border-end) 100%); }
.popup--scrim.is-static { position: absolute; display: flex; opacity: 1; }
/* audio playing right now (the intro clip): a pulsing accent dot and a quiet line */
.playing-line { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text-2); }
.playing-line__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--glow-strong); flex-shrink: 0; animation: ds-rec-pulse 1.4s ease-in-out infinite; }
.stop-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.stop-screen__body { max-width: 440px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.stop-screen__big { font-size: 1.75rem; line-height: 1.2; font-weight: 300; }
.stop-screen__body p { color: var(--text-2); }

/* --- 5. closing page and the staged loader -------------------------------------------------- */
.closing { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 1.375rem; opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; }
.closing.is-in { opacity: 1; transform: none; }
.closing.is-out { opacity: 0; transform: translateY(-4px); }
.stage-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.stage-list li { position: relative; display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text-3); font-weight: 300; transition: color .5s ease; }
.stage-list__mark { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid var(--line-strong); transition: background .5s, border-color .5s, box-shadow .5s; }
.stage-list li.is-done { color: var(--text-2); }
.stage-list li.is-done .stage-list__mark { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--glow-strong); }
.stage-list li.is-running { color: var(--text); }
.stage-list li.is-running .stage-list__mark { border-color: var(--accent); animation: ds-rec-pulse 1.4s ease-in-out infinite; }
.stage-list__rule { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; overflow: hidden; }
.stage-list__rule::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: ds-stage-sweep 2.2s ease-in-out infinite; }
@keyframes ds-stage-sweep { 0% { left: -30%; } 100% { left: 100%; } }

/* --- 6a. evidence moment ----------------------------------------------------------------- */
.evidence { display: grid; gap: .75rem; margin: 0; padding: 1.25rem; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.evidence__top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); gap: 1.25rem; align-items: start; }
.evidence__text { display: grid; gap: .75rem; align-content: start; }
.evidence__quote { margin: 0; padding-left: 1rem; border-left: 2px solid var(--accent); font-size: 1.25rem; line-height: 1.4; font-weight: 300; }
.evidence__full { font-size: .8125rem; color: var(--text-3); line-height: 1.55; }
.evidence__full .label { display: block; margin-bottom: 4px; }
.evidence__media { width: 100%; max-width: 640px; border-radius: var(--radius-md); overflow: hidden; background: var(--well); border: 1px solid var(--border-faint); }
.evidence__media video, .evidence__media img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; background: var(--well); }   /* never crop: tab recordings run about 2.06:1 and wobble */
.evidence__media .ph { aspect-ratio: 1920 / 930; }
.frame-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.frame-strip > * { aspect-ratio: 400 / 194; width: 100%; border-radius: var(--radius-btn); overflow: hidden; object-fit: contain; background-color: var(--well); border: 1px solid var(--border-faint); }

/* --- 6b. decision row -------------------------------------------------------------------- */
.decision { display: grid; gap: .875rem; padding: 1.25rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.decision:first-child { border-top: 0; }
.decision__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.decision__id { font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); color: var(--accent-ink); }
.decision__head .pill { margin-left: auto; }
.decision__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.decision__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); overflow: hidden; background: var(--border-faint); }
.decision__col { display: grid; gap: .375rem; align-content: start; padding: .875rem 1rem; background: var(--bg); font-size: .875rem; color: var(--text-2); line-height: 1.5; }
.decision__col.is-open { background: var(--accent-soft); color: var(--text); }
.decision__evidence summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: pointer; font-size: .8125rem; color: var(--text-3); list-style: none; }
.decision__evidence summary::-webkit-details-marker { display: none; }
.decision__evidence summary::before { content: "+"; font-family: var(--font-alt); color: var(--accent-ink); width: 12px; }
.decision__evidence[open] summary::before { content: "\2212"; }
.decision__evidence summary .ai-dot { width: 7px; height: 7px; margin-left: 2px; }
.decision__evidence > .evidence { margin-top: .875rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips .reach-tab b { margin-left: 8px; font-weight: 400; }

/* --- 6c. decision index: .rank-tile with a status edge ------------------------------------ */
.rank-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rank-tile.is-good, .rank-tile.is-bad, .rank-tile.is-call { border-top: 2px solid var(--line-strong); text-decoration: none; color: inherit; transition: all var(--dur-ui) var(--ease-ui); }
.rank-tile.is-good { border-top-color: var(--good); } .rank-tile.is-good .rank-tile__n { color: var(--good); }
.rank-tile.is-bad { border-top-color: var(--bad); } .rank-tile.is-bad .rank-tile__n { color: var(--bad); }
.rank-tile.is-call .rank-tile__n { color: var(--text-3); }
a.rank-tile:hover { border-color: var(--line-strong); }
.rank-tile__dots { display: flex; gap: 3px; margin-top: 4px; min-height: 7px; }
.rank-tile__dots .ai-dot { width: 7px; height: 7px; }

/* --- 6d. verdict dots in viewing order + per-site bars (.rival-bar--verdict) --------------- */
.verdict-dots { display: flex; flex-wrap: wrap; gap: 10px; }
.verdict-dot { display: grid; justify-items: center; gap: 4px; }
.verdict-dot i { width: 16px; height: 16px; border-radius: 50%; background: var(--dot-off); border: 1.5px solid transparent; }
.verdict-dot small { font-size: .625rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.verdict-dot.is-love i { background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.verdict-dot.is-fine i { background: transparent; border-color: var(--text-2); }
.verdict-dot.is-no i { background: var(--dot-off); }
.verdict-tally { display: flex; gap: 12px; font-size: .8125rem; color: var(--text-3); }
.verdict-tally b { color: var(--text); font-weight: 500; }
.rival-bar--verdict { grid-template-columns: 22px minmax(0, 1.4fr) 56px minmax(0, 1fr) 32px; padding: 6px 0; border-top: 1px solid var(--line); }
.rival-bar--verdict:first-of-type { border-top: 0; }
.rival-bar__i { color: var(--text-3); font-variant-numeric: tabular-nums; }
.rival-bar--verdict .rival-bar__name { display: grid; line-height: 1.3; white-space: normal; }
.rival-bar--verdict .rival-bar__name b { font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rival-bar--verdict .rival-bar__name small { font-family: var(--font-alt); font-size: .5625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rival-bar--verdict.is-love .rival-bar__name b { color: var(--accent-ink); }
.rival-bar--verdict.is-love .rival-bar__track i { background: var(--accent); }
.rival-bar--verdict.is-fine .rival-bar__track i { background: var(--text-3); }
.verdict-chip { justify-self: center; font-family: var(--font-alt); font-size: .5625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); color: var(--text-3); }
.verdict-chip.is-love { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.verdict-chip.is-fine { color: var(--text-2); }

@media screen and (max-width: 767px) {
  .evidence__top { grid-template-columns: 1fr; }
  .decision__cols { grid-template-columns: 1fr 1fr; }
  .rank-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
  .decision__cols { grid-template-columns: 1fr; }
  .rival-bar--verdict { grid-template-columns: 18px minmax(0, 1fr) 48px minmax(0, .7fr) 24px; gap: 6px; }
}

/* =============================================================================
   LAYER 2: WALKTHROUGH AND TIMELINE (pipeline map requests, 2026-09-26, v0.3.0)
   Existing tokens only. Morningside runs one accent, so owners and parties are told apart
   by shape and position, never by hue.
   ========================================================================== */

/* --- keycap --------------------------------------------------------------------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-btn); background: var(--well);
  color: var(--text-2); font-family: var(--font-alt); font-size: .6875rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.btn .kbd { background: transparent; border-color: currentColor; color: inherit; opacity: .7; margin-left: .25rem; }

/* --- document states: two more state-chip tones --------------------------------- */
.state-chip.is-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.state-chip.is-bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }

/* --- owner chips: the meta-chip look plus a monochrome mark whose SHAPE names the party --- */
.owner-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.owner-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.owner-chip::before {
  content: ""; flex: none; display: grid; place-items: center; width: 16px; height: 16px; box-sizing: border-box;
  font-family: var(--font-alt); font-size: .5625rem; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--text);
}
.owner-chip--sales::before { content: "S"; border: 1px solid var(--text-2); border-radius: 2px; }             /* outlined square */
.owner-chip--client::before { content: "C"; border: 1px solid var(--text-2); border-radius: 50%; }            /* outlined circle */
.owner-chip--system::before { content: ""; width: 9px; height: 9px; margin: 0 3.5px; background: var(--text-2); transform: rotate(45deg); } /* solid diamond */
.owner-chip--fernando::before { content: "F"; background: var(--text-2); color: var(--bg); border-radius: 2px; } /* solid square, initial */
.owner-chip--matt::before { content: "M"; background: var(--text-2); color: var(--bg); border-radius: 50%; }      /* solid circle, initial */

/* --- vertical timeline ---------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 1rem; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline__item { position: relative; }
.timeline__node { position: absolute; left: -31px; top: 1.35rem; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--text-3); }
.timeline__node.is-done { background: var(--text-2); border-color: var(--text-2); }
.timeline__node.is-current { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--glow-strong); }
.timeline__node--side { border-style: dashed; background: transparent; }
.timeline__item--side { margin-left: 24px; }
.timeline__item--side::before { content: ""; position: absolute; left: -48px; top: 1.75rem; width: 24px; border-top: 1px dashed var(--line-strong); }
.timeline__item--side .timeline__node { left: -31px; }
.timeline__step { display: block; margin-bottom: .25rem; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.timeline__item .card { padding: 1.25rem 1.5rem; gap: .625rem; }
.timeline__item .card h3 { font-size: 1.25rem; line-height: 1.3; }

/* --- walkthrough: phase rail --------------------------------------------------------------- */
.phase-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.phase-rail__seg { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-3); text-align: left; cursor: pointer;
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; min-width: 0; }
.phase-rail__seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-rail__seg .progress-rule > i { width: var(--progress, 0%); }
.phase-rail__seg.is-done { color: var(--text-2); }
.phase-rail__seg.is-done .progress-rule > i { width: 100%; box-shadow: none; background: var(--text-2); }
.phase-rail__seg.is-current { color: var(--text); }

/* --- walkthrough: beat row (what happens) -------------------------------------------------- */
.beat-row { display: flex; align-items: flex-start; }
.beat { position: relative; flex: 1; display: grid; justify-items: center; gap: 10px; text-align: center; min-width: 0; }
.beat + .beat::before { content: ""; position: absolute; top: 20px; right: calc(50% + 26px); left: calc(-50% + 26px); height: 1px; background: var(--line-strong); }
.beat__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--well); }
.beat__icon svg { width: 18px; height: 18px; }
.beat.is-current .beat__icon { border-color: var(--accent); color: var(--accent-ink); }
.beat__label { font-size: .8125rem; line-height: 1.35; color: var(--text-2); padding: 0 6px; }

/* --- walkthrough: fork choice cards -------------------------------------------------------- */
.fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fork__card {
  display: grid; gap: .5rem; align-content: start; padding: 1.25rem 1.5rem; text-align: left; color: var(--text); cursor: pointer; font: inherit;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo));
  transition: all var(--dur-ui) var(--ease-ui);
}
.fork__card:hover, .fork__card:focus-visible, .fork__card.is-chosen {
  border: 1px solid transparent; background-origin: border-box; background-clip: padding-box, border-box;
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)), linear-gradient(135deg, var(--border-end), var(--accent));
  box-shadow: 0 0 50px 0 var(--glow);
}
.fork__side { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.fork__card h3 { font-size: 1.25rem; line-height: 1.3; }
.fork__card p { font-size: .875rem; color: var(--text-2); }

/* --- walkthrough: path map (inline SVG) ---------------------------------------------------- */
.path-map { display: block; width: 100%; height: auto; }
.path-map__edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.path-map__edge.is-side { stroke-dasharray: 3 4; }
.path-map__edge.is-visited { stroke: var(--text-2); }
.path-map__node { fill: var(--bg); stroke: var(--text-3); stroke-width: 1.5; }
.path-map__node.is-fork { transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.path-map__node.is-visited { fill: var(--text-2); stroke: var(--text-2); }
.path-map__node.is-current { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.path-map__label { fill: var(--text-3); font: 400 11px var(--font-body); letter-spacing: -.01em; }
.path-map__label.is-visited { fill: var(--text-2); }
.path-map__label.is-current { fill: var(--text); font-weight: 500; }

/* --- walkthrough: next / back ---------------------------------------------------------------- */
.stepper-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stepper-hint { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-3); }

@media screen and (max-width: 767px) {
  .phase-rail__seg span { display: none; }
  .fork { grid-template-columns: 1fr; }
  .beat-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .beat { grid-template-columns: 40px 1fr; justify-items: start; text-align: left; align-items: center; }
  .beat + .beat::before { top: -14px; bottom: auto; left: 20px; right: auto; width: 1px; height: 14px; }
  .beat__label { padding: 0; }
}

/* =============================================================================
   LAYER 2: CHAT (Lexi's conversation surface, v0.4.0, 2026-09-26)
   Namespaced chat-* / composer / call-* so nothing collides with the system's own .msg (form
   message), .quote, .card, .report or .label. Morningside register: card-gradient plates with a
   hairline, 12px radius with one squared corner toward the speaker, tracked uppercase labels, the
   orange fill only for what the person said and the one send action.
   ========================================================================== */

/* --- 1. message bubble ---------------------------------------------------------------- */
.chat-thread { display: flex; flex-direction: column; gap: 1rem; }
.chat-turn { display: flex; flex-direction: column; gap: 6px; max-width: 86%; }
.chat-turn--lexi { align-self: flex-start; }
.chat-turn--you { align-self: flex-end; align-items: flex-end; }
[dir="rtl"] .chat-turn--lexi { align-self: flex-end; }
[dir="rtl"] .chat-turn--you { align-self: flex-start; align-items: flex-start; }
.chat-who { padding: 0 4px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.chat-bubble { padding: .75rem 1rem; border-radius: var(--radius-lg); font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-turn--lexi .chat-bubble { color: var(--text); border: 1px solid var(--border-faint); border-bottom-left-radius: 3px; background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.chat-turn--you .chat-bubble { color: var(--on-accent); background-color: var(--accent); border: 1px solid transparent; border-bottom-right-radius: 3px; }
[dir="rtl"] .chat-turn--lexi .chat-bubble { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: 3px; }
[dir="rtl"] .chat-turn--you .chat-bubble { border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: 3px; }
.chat-turn.is-unsaved .chat-bubble { color: var(--text); background: var(--well); border: 1px dashed var(--warn); }
.chat-retry { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--warn); }
.chat-retry button { padding: 4px 12px; border: 1px solid var(--warn); border-radius: var(--radius-btn); background: transparent; color: var(--warn); cursor: pointer;
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.chat-retry button:hover { background: var(--warn); color: var(--bg); }
.chat-turn.is-live .chat-bubble { opacity: .9; }
.chat-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: ds-caret 1s step-end infinite; }
@keyframes ds-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.chat-turn.is-hearing .chat-bubble { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); background: transparent; border: 1px dashed var(--line-strong);
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.chat-tag--corrected { padding: 0 4px; font-size: .6875rem; color: var(--star); }

/* --- 2. typing indicator ----------------------------------------------------------------- */
.chat-typing { display: inline-flex; gap: 5px; padding: 1rem 1.1rem; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ds-blink 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .2s; } .chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ds-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* --- 3. composer ------------------------------------------------------------------------------ */
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 62%, transparent); }
.composer--inline { position: relative; background: none; padding: 0; }
.composer__inner {
  max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); transition: border-color var(--dur-ui) var(--ease-ui);
}
.composer__inner:focus-within { border-color: var(--accent); }
.composer__input { flex: 1; min-height: 24px; max-height: 160px; padding: 9px 4px; border: 0; background: transparent; resize: none; outline: none; color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4; }
.composer__input::placeholder { color: var(--text-3); }
.composer__send { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-btn); background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background var(--dur-ui) var(--ease-ui); }
.composer__send:hover:not(:disabled) { background: var(--accent-hover); }
.composer__send:disabled { opacity: .45; cursor: default; }
.composer__send svg, .composer__talk svg { width: 18px; height: 18px; }
.composer__talk { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; transition: all var(--dur-ui) var(--ease-ui); }
.composer__talk:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.composer__talk:disabled { opacity: .35; cursor: default; }
.composer__talk span { display: none; }
@media (min-width: 480px) { .composer__talk span { display: inline; } }
.composer.is-frozen .composer__inner { opacity: .5; pointer-events: none; }
.composer__inner.is-locked { align-items: center; justify-content: center; min-height: 56px; padding: 8px 14px; opacity: .72; font-size: .875rem; color: var(--text-2); }
.composer__note { max-width: 760px; margin: 0 auto 8px; text-align: center; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--star); }

/* --- 4. talk dock ------------------------------------------------------------------------------- */
.composer__inner--call { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; }
.call-state { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--well); }
.call-label { flex: 1; font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); }
.call-timer { font-family: var(--font-alt); font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.call-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; flex-shrink: 0; }
.call-meter i { display: block; width: 3px; height: 5px; border-radius: 1px; background: var(--text-2); opacity: .35; transition: height .12s ease, opacity .12s ease; }
.call-meter.is-listening i { background: var(--accent); opacity: calc(.4 + var(--level, 0) * .6); }
.call-meter.is-listening i:nth-child(1), .call-meter.is-listening i:nth-child(5) { height: calc(5px + var(--level, 0) * 7px); }
.call-meter.is-listening i:nth-child(2), .call-meter.is-listening i:nth-child(4) { height: calc(5px + var(--level, 0) * 11px); }
.call-meter.is-listening i:nth-child(3) { height: calc(5px + var(--level, 0) * 15px); }
.call-meter.is-speaking i { background: var(--accent); opacity: 1; animation: ds-vbar .8s ease-in-out infinite; }
.call-meter.is-thinking i { background: var(--accent-ink); opacity: .8; animation: ds-blink 1.2s infinite; }
.call-meter.is-speaking i:nth-child(2), .call-meter.is-thinking i:nth-child(2) { animation-delay: .1s; }
.call-meter.is-speaking i:nth-child(3), .call-meter.is-thinking i:nth-child(3) { animation-delay: .2s; }
.call-meter.is-speaking i:nth-child(4), .call-meter.is-thinking i:nth-child(4) { animation-delay: .3s; }
.call-meter.is-speaking i:nth-child(5), .call-meter.is-thinking i:nth-child(5) { animation-delay: .4s; }
@keyframes ds-vbar { 0%, 100% { height: 6px; } 50% { height: 18px; } }
.chat-turn.is-hearing .call-meter { height: 15px; }
.call-controls { display: flex; justify-content: center; gap: 14px; padding: 2px 0; }
.call-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; max-width: 98px; padding: 0; border: 0; background: transparent; color: var(--text-3); cursor: pointer; text-align: center;
  font-family: var(--font-alt); font-size: .625rem; line-height: 1.25; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.call-btn svg { box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-hi); transition: all var(--dur-ui) var(--ease-ui); }
.call-btn:hover svg { border-color: var(--text-2); }
.call-btn--switch { color: var(--accent-ink); }
.call-btn--switch svg { border-color: var(--accent); }
.call-btn.is-on { color: var(--accent-ink); }
.call-btn.is-on svg { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.call-btn--end { color: var(--bad); }
.call-btn--end svg { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--white); }
.call-btn--end:hover svg { border-color: var(--danger-fill); box-shadow: 0 0 0 4px var(--bad-soft); }

/* --- 5. in-chat info: NOT a message. Two forms that no bubble shares. -------------------------------
   .thread-note  a log line across the whole thread: a hairline rule, a tracked label, one short line.
                 No plate, no border box, no corner: it reads as the system annotating, not speaking.
   .thread-find  a finding that needs the person: full-width panel with the accent gradient border,
                 an eyebrow, the business name at display size, the facts, and full-size Yes / No. */
.thread-note { align-self: stretch; display: grid; grid-template-columns: auto minmax(0, max-content) minmax(24px, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; font-size: .8125rem; color: var(--text-2); }
.thread-note::after { content: ""; grid-row: 1; grid-column: 3; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.thread-note__label { grid-row: 1; grid-column: 1; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.thread-note__text { grid-row: 1; grid-column: 2; overflow-wrap: anywhere; }
.thread-note .thread-x { grid-row: 1; grid-column: 4; }
.thread-note.is-looking .thread-note__label { display: inline-flex; align-items: center; gap: 8px; }
.thread-note__dots { display: inline-flex; gap: 3px; }
.thread-note__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-ink); animation: ds-blink 1.2s infinite; }
.thread-note__dots i:nth-child(2) { animation-delay: .2s; } .thread-note__dots i:nth-child(3) { animation-delay: .4s; }
.thread-note.is-bad .thread-note__label, .thread-note.is-bad .thread-note__text { color: var(--warn); }
.thread-note.is-done .thread-note__label { color: var(--text-3); }
.thread-x { border: 0; background: transparent; color: var(--text-3); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.thread-x:hover { color: var(--text); }

.thread-find {
  position: relative; align-self: stretch; display: grid; gap: .875rem; padding: 1.25rem 1.5rem; margin: .5rem 0; border-radius: var(--radius-lg);
  border: 1px solid transparent; background-origin: border-box; background-clip: padding-box, border-box;
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)), linear-gradient(135deg, var(--accent) 0%, var(--border-end) 100%);
  box-shadow: 0 0 50px 0 var(--glow);
}
.thread-find__eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.thread-find__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--glow-strong); }
.thread-find__name { font-size: 1.5rem; line-height: 1.2; font-weight: 300; }
.thread-find__facts { display: grid; gap: 4px; font-size: .875rem; color: var(--text-2); line-height: 1.5; }
.thread-find__site { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--text-3); letter-spacing: 0; }
.thread-find__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.thread-find__actions .btn { width: 100%; padding-left: .5rem; padding-right: .5rem; }
.thread-find__form { display: flex; flex-wrap: wrap; gap: 8px; }
.thread-find__form input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); color: var(--text); font: inherit; font-size: .9375rem; }
.thread-find__form input:focus { outline: none; border-color: var(--accent); }
.thread-find .thread-x { position: absolute; top: 10px; right: 10px; }
.thread-find.is-confirmed { box-shadow: none; background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)), linear-gradient(135deg, var(--good) 0%, var(--border-end) 100%); }
.thread-find.is-confirmed .thread-find__eyebrow { color: var(--good); }
.thread-find.is-confirmed .thread-find__eyebrow::before { background: var(--good); box-shadow: none; }
.thread-find.is-missing { box-shadow: none; background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)), linear-gradient(135deg, var(--line-strong) 0%, var(--border-end) 100%); }
.thread-find.is-missing .thread-find__eyebrow { color: var(--text-2); }
.thread-find.is-missing .thread-find__eyebrow::before { background: var(--text-3); box-shadow: none; }

/* =============================================================================
   TEAM BRIEF RESIDUE (v0.4.0): the page's "PENDING design-system components" shims, adopted
   ========================================================================== */
.plan-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.plan-step.is-pass .plan-step__n { color: var(--good); }
.frame-strip > .frame-strip__sprite { position: relative; overflow: hidden; background-color: var(--well); background-repeat: no-repeat; background-size: 400% 100%; }
.frame-strip__sprite[data-cell="1"] { background-position: 0% 0; }
.frame-strip__sprite[data-cell="2"] { background-position: 33.333% 0; }
.frame-strip__sprite[data-cell="3"] { background-position: 66.667% 0; }
.frame-strip__sprite[data-cell="4"] { background-position: 100% 0; }
.decision__cols[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.decision__cols[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 767px) {
  .plan-strip--5 { grid-template-columns: 1fr; }
  .decision__cols[data-n="3"] { grid-template-columns: 1fr 1fr; }
  .decision__cols[data-n="3"] > :last-child { grid-column: span 2; }
}
@media screen and (max-width: 479px) {
  .decision__cols[data-n] { grid-template-columns: 1fr; }
  .decision__cols[data-n="3"] > :last-child { grid-column: auto; }
}

/* Artifact pages: the publishing contract asks 16px side gutters at phone width. Sites keep Morningside's 20. */
@media screen and (max-width: 767px) {
  .page--artifact { --gutter: 1rem; }
}

/* =============================================================================
   LAYER 2: APP (Lexi pieces 6 to 13 and the niche dashboard, v0.5.0, 2026-09-26)
   Existing tokens only. The dashboard is glance-first (Matt's ruling): state is carried by colour,
   size and position; words only where they carry meaning; detail one click down in <details>.
   ========================================================================== */

/* --- 6. booking frame --------------------------------------------------------------------- */
.booking { display: grid; gap: .875rem; container-type: inline-size; }
.booking__frame { height: 1200px; overflow: hidden; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--surface-lo); }
@container (min-width: 660px) { .booking__frame { height: 760px; } }
.booking__frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg); }   /* Google's page is white: dark mode inverts it, hue put back */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .booking__frame iframe { filter: none; } }
:root[data-theme="light"] .booking__frame iframe { filter: none; }
.booking__fallback { font-size: .8125rem; color: var(--text-3); }
.booking__fallback a { color: var(--accent-ink); }
.status-line { font-size: .8125rem; color: var(--text-3); }
.status-line.is-ok { color: var(--good); }

/* --- 7. preparing (the summary wait): .progress-rule + .status-line ---------------------------- */
.prep { display: grid; gap: 10px; }
.prep .progress-rule > i { transition: width 1.2s ease-out; }
.prep__stages { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.prep__stages .is-current { color: var(--accent-ink); }
.prep__stages .is-done { color: var(--text-2); }

/* --- 8. trainer star row and correction editor ---------------------------------------------------- */
.star-rate { display: flex; align-items: center; gap: 2px; padding: 0 4px; }
.star-rate button { padding: 2px; border: 0; background: none; color: var(--line-strong); font-size: 17px; line-height: 1; cursor: pointer; transition: color var(--dur-ui) var(--ease-ui); }
.star-rate button.is-on { color: var(--star); }
.star-rate__label { margin-left: 8px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.rate-note { width: min(220px, 100%); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--surface-hi); color: var(--text); font: inherit; font-size: .75rem; }
.correction { display: grid; gap: 10px; width: min(100%, 640px); padding: 1rem 1.125rem; border: 1px solid var(--star); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.correction__title { margin: 0; font-family: var(--font-alt); font-size: .75rem; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--star); }
.correction textarea, .correction input { width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--well); color: var(--text); font: inherit; font-size: .9375rem; }
.correction textarea { min-height: 90px; resize: vertical; }
.correction textarea:focus, .correction input:focus { outline: none; border-color: var(--star); }
.choice-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-chip { padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; transition: all var(--dur-ui) var(--ease-ui); }
.choice-chip:hover { border-color: var(--text-2); color: var(--text); }
.choice-chip.is-on, .choice-chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.correction__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.correction__hint { flex: 1; min-width: 200px; font-size: .75rem; color: var(--text-3); }

/* --- 9. glance dashboard (niches) ---------------------------------------------------------------- */
.glance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.glance-tile {
  position: relative; display: grid; gap: .75rem; align-content: start; padding: 1.125rem 1.25rem 1.25rem; color: var(--text); text-decoration: none;
  border: 1px solid var(--border-faint); border-top: 3px solid var(--line-strong); border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); transition: all var(--dur-ui) var(--ease-ui);
}
a.glance-tile:hover { border-color: var(--line-strong); box-shadow: 0 0 50px 0 var(--glow); }
.glance-tile.is-good { border-top-color: var(--good); }
.glance-tile.is-warn { border-top-color: var(--warn); }
.glance-tile.is-bad { border-top-color: var(--bad); }
.glance-tile__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.glance-tile__name { font-size: 1.125rem; font-weight: 400; line-height: 1.25; }
.glance-tile__big { font-size: 2.5rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.glance-tile__big small { margin-left: 6px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.glance-tile.is-good .glance-tile__big { color: var(--good); } .glance-tile.is-warn .glance-tile__big { color: var(--warn); } .glance-tile.is-bad .glance-tile__big { color: var(--bad); }
.glance-tile.is-removed { opacity: .7; border-top-style: dashed; }
.coverage-bar { display: flex; gap: 3px; height: 8px; }
.coverage-bar i { flex: 1; border-radius: 1px; background: var(--dot-off); }
.coverage-bar i.is-sell { background: var(--good); }
.coverage-bar i.is-planned { background: var(--warn); opacity: .75; }
.coverage-bar i.is-gap { background: var(--bad); }
.coverage-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: var(--text-3); }
.coverage-key span { display: inline-flex; align-items: center; gap: 6px; }
.coverage-key span::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--dot-off); }
.coverage-key .is-sell::before { background: var(--good); } .coverage-key .is-planned::before { background: var(--warn); } .coverage-key .is-gap::before { background: var(--bad); }
.coverage-key b { color: var(--text); font-weight: 500; }
.callout { display: grid; gap: .5rem; padding: 1.25rem 1.5rem; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background-image: linear-gradient(90deg, var(--accent-soft), transparent); }
.callout__title { font-size: 1.375rem; font-weight: 300; line-height: 1.25; }
.pain-list { display: grid; gap: 6px; }
.pain-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; padding: .875rem 1.125rem .875rem 1.25rem;
  border: 1px solid var(--border-faint); border-radius: var(--radius-md); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.pain-row::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--line-strong); }
.pain-row.is-sell::before { background: var(--good); } .pain-row.is-planned::before { background: var(--warn); } .pain-row.is-gap::before { background: var(--bad); }
.pain-row.is-removed { opacity: .7; }
.pain-row__text { font-size: .9375rem; line-height: 1.4; }
.pain-row__big { font-size: 1.75rem; font-weight: 300; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.pain-row__big small { display: block; margin-top: 2px; font-family: var(--font-alt); font-size: .5625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.pain-row.is-sell .pain-row__big { color: var(--good); } .pain-row.is-gap .pain-row__big { color: var(--bad); } .pain-row.is-planned .pain-row__big { color: var(--warn); }
.pain-row details { grid-column: 1 / -1; }
.pain-row summary { cursor: pointer; font-size: .75rem; color: var(--text-3); }
.pain-row summary:hover { color: var(--text); }
.pain-row details[open] > *:not(summary) { margin-top: .625rem; }
.heat { display: inline-flex; gap: 3px; }
.heat i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-off); }
.heat i.is-on { background: var(--accent); }
.heat i.is-no { background: transparent; border: 1px solid var(--bad); }
.seg-control { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.seg-control button { padding: 5px 10px; border: 0; border-radius: 2px; background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap;
  font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; transition: all var(--dur-ui) var(--ease-ui); }
.seg-control button:hover:not([aria-pressed="true"]) { background: var(--well); color: var(--text); }
.seg-control button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.seg-control--accent button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* chip vocabulary: evidence and coverage words, each on a tone */
.state-chip.is-sell { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.state-chip.is-planned { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.state-chip.is-gap { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }

/* --- 10. app bar (a sticky header for an app screen) ------------------------------------------------ */
.app-bar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--border-faint);
  background-color: color-mix(in srgb, var(--bg) 97%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.app-bar__inner { max-width: 760px; margin: 0 auto; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 9px; }
.app-bar__brand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.app-bar__partner { font-size: .75rem; line-height: 1.35; color: var(--text-3); text-align: right; }
.app-bar__note { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.app-bar__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* --- 11. compact selectable tile (language picker) --------------------------------------------------- */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick-tile {
  display: grid; gap: 4px; padding: .875rem 1rem; text-align: left; color: var(--text); cursor: pointer; font: inherit; font-size: 1rem;
  border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); transition: all var(--dur-ui) var(--ease-ui);
}
.pick-tile small { font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.pick-tile:hover, .pick-tile:focus-visible, .pick-tile.is-selected, .pick-tile[aria-pressed="true"] {
  border: 1px solid transparent; background-origin: border-box; background-clip: padding-box, border-box;
  background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)), linear-gradient(135deg, var(--border-end), var(--accent)); box-shadow: 0 0 50px 0 var(--glow);
}

/* --- 12. operator helpers (no collision with the system's .quote) ------------------------------------ */
.op-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
.op-page a { color: var(--accent-ink); }
.kv-row { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; font-size: .875rem; }
.kv-row > :first-child { min-width: 150px; color: var(--text-3); font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; letter-spacing: 0; }
.aside-note { font-style: italic; color: var(--text-2); }   /* Lexi's inline italic note; the system's .quote is Morningside's bordered blockquote */
.transcript { display: grid; gap: 6px; }
.transcript__turn { padding: 9px 12px; border-radius: var(--radius-md); font-size: .875rem; line-height: 1.5; border: 1px solid var(--border-faint); }
.transcript__turn--lexi { background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); }
.transcript__turn--you { background: var(--well); margin-left: 2rem; }
.transcript__meta { display: block; margin-bottom: 3px; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 14px; font-size: .8125rem; }
.check-grid > * { display: flex; align-items: baseline; gap: 8px; color: var(--text-2); }
.check-grid > *::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--line-strong); }
.check-grid .is-done { color: var(--good); } .check-grid .is-done::before { background: var(--good); border-color: var(--good); }
.check-grid .is-missing::before { border-color: var(--text-3); }
.check-grid .is-must::after { content: "(must)"; font-size: .6875rem; color: var(--text-3); }
.code-block { max-height: 420px; overflow: auto; padding: 12px; margin: 0; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--well); color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; line-height: 1.5; letter-spacing: 0; }
.op-details summary { cursor: pointer; font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); }
.op-details[open] summary { margin-bottom: .75rem; }

/* --- 13. print document ("Save this summary") ------------------------------------------------------- */
.print-doc { display: none; }
@media print {
  body:has(> .print-doc) > *:not(.print-doc) { display: none !important; }   /* only pages that carry a .print-doc (Lexi's summary) print just that */
  .print-doc { display: block; background: var(--white); color: var(--grey-dark); letter-spacing: 0; }
  .print-doc h1 { margin: 0 0 6pt; font-family: var(--font-body); font-weight: 300; font-size: 23pt; line-height: 1.15; letter-spacing: -.01em; }
  .print-doc__byline { margin: 0 0 16pt; padding-bottom: 9pt; border-bottom: 1px solid var(--neutral-lighter); font-family: var(--font-alt); font-size: 8.5pt; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral); }
  .print-doc section { margin: 0 0 15pt; break-inside: avoid; }
  .print-doc h2 { margin: 0 0 6pt; font-family: var(--font-body); font-weight: 500; font-size: 12.5pt; line-height: 1.25; }
  .print-doc ul { margin: 0; padding-left: 15pt; }
  .print-doc li { margin: 0 0 5pt; font-size: 10.5pt; line-height: 1.5; }
  .print-doc__closing { margin: 0; padding-top: 10pt; border-top: 1px solid var(--neutral-lighter); font-size: 10.5pt; line-height: 1.5; }
  .print-doc[dir="rtl"] ul { padding-left: 0; padding-right: 15pt; }
}
/* PRINT REGISTER: any Duke page (brief, one-pager, report) printed or saved as PDF stays in the DARK
   register, the black Morningside look (Matt, 2026-09-27: never the ivory twin for print). Backgrounds
   print (print-color-adjust: exact), headings go solid (Chrome's PDF of background-clip gradient text
   shows strike-through boxes), every motion start state resolves, animated decoration is off. */
@media print {
  html, body { background: var(--bg) !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grad, .grad-display, .grad-h1, .process-num, .prose h2, .accent-grad { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important; }
  .accent-grad { color: var(--accent-ink) !important; }
  .js [data-in], .js [data-load], .js .cta [data-cta], .js .cta .blob, .fade-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .page-glow::before, .ticker { display: none !important; }
  .card, .panel, .info-card, .phase, .decision, .evidence, .fav, .step-card, .glance-tile { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}
/* screen preview of the printed page (specimens only) */
.print-doc--preview { display: block; max-width: 640px; padding: 40px 44px; background: var(--white); color: var(--grey-dark); border-radius: var(--radius-sm); }
.print-doc--preview h1 { margin: 0 0 8px; font-weight: 300; font-size: 1.9rem; line-height: 1.15; }
.print-doc--preview .print-doc__byline { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--neutral-lighter); font-family: var(--font-alt); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral); }
.print-doc--preview h2 { margin: 16px 0 6px; font-weight: 500; font-size: 1rem; }
.print-doc--preview li { margin: 0 0 4px; font-size: .9rem; line-height: 1.5; }
.print-doc--preview .print-doc__closing { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--neutral-lighter); font-size: .9rem; }

/* --- walkthrough addition: a beat that is NOT happening ----------------------------------------------- */
.beat.is-missing .beat__icon { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.beat.is-missing .beat__label { color: var(--text-3); }

@media screen and (max-width: 767px) {
  .pain-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pain-row__big { grid-row: 1; grid-column: 2; }
  .pain-row .seg-control { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .kv-row { flex-direction: column; gap: 2px; } .kv-row > :first-child { min-width: 0; }
  .transcript__turn--you { margin-left: 1rem; }
}
@media screen and (max-width: 479px) {
  .pick-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   LAYER 2: REPORT ADDITIONS (GBP engine requests, v0.6.0 / v0.7.0)
   ========================================================================== */
/* v0.6.0 */
.panel--stack { display: grid; gap: .75rem; }          /* a panel whose children stack with a gap: directories, star rating, most-named */
.panel--stack.is-tight { gap: .5rem; }
.t-ink { color: var(--text); font-weight: 500; }        /* full-ink emphasis inside quiet text */
.t-bad { color: var(--bad); font-weight: 500; }         /* status inks for emphasis in copy */
.t-good { color: var(--good); font-weight: 500; }
.t-warn { color: var(--warn); font-weight: 500; }

/* v0.7.0: coverage-mode reach */
.band-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media screen and (max-width: 767px) { .band-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.rank-groups { display: grid; gap: 1.375rem; }                    /* pin-city tiles, one group per city, stacked */
.rank-group { display: grid; gap: .5rem; }
.holders-block { display: grid; gap: .5rem; }                      /* label + ol.holders under each reach panel */
@media screen and (min-width: 768px) {
  .reach-fig--sticky { overflow: clip; }   /* hidden makes a scroll container and sticky never sticks; clip keeps the rounded corners without one */
  .reach-fig--sticky .reach-map { position: sticky; top: 0; align-self: start; }   /* long coverage lists: the map stays in view */
}
.geomap .home .home-diamond { fill: var(--accent); }               /* "Your shop" diamond on coverage maps; radius maps keep the dot (.hd) */
.web-count-key { display: inline-block; width: 22px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 55%, var(--dot-off) 55%); }   /* legend key: a partly filled web-count bar */
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-faint); }
.brand-row__by { display: grid; gap: 2px; }
.brand-row__by span:last-child { font-size: .8125rem; color: var(--text-3); }
.partner-logo { display: block; flex: none; height: 88px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; }
.partner-logo--sm { height: 30px; max-width: 120px; }
@media screen and (max-width: 479px) { .partner-logo { height: 64px; } }
.state-chip.is-human { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }   /* one-accent rule: the third category is the ink-filled chip */


/* =============================================================================
   LAYER 2: PORTAL (client portal, v0.9.0, 2026-09-27)
   The signed-in header, checklist group heads, per-person states, the one back control, the NDA
   signature block, the consent checkbox and the scrolling agreement panel. Existing tokens only.
   ========================================================================== */
/* --- A. signed-in header: one row; brand + client left, nav right; a compact menu at 500 and below --- */
.signed-bar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--border-faint);
  background-color: color-mix(in srgb, var(--bg) 97%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.signed-bar__inner { position: relative; max-width: var(--container-md); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.signed-bar__brand { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--text); text-decoration: none; }
.signed-bar__client { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line-strong); font-size: .8125rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signed-bar__nav { display: flex; align-items: center; gap: 4px; }
.signed-bar__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--radius-btn); color: var(--text-2); text-decoration: none;
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; transition: all var(--dur-ui) var(--ease-ui); }
.signed-bar__link:hover { color: var(--text); background: var(--well); }
.signed-bar__link[aria-current="page"], .signed-bar__link.is-active { color: var(--text); box-shadow: inset 0 -1px 0 var(--accent); border-radius: 0; }
.signed-bar__toggle { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.signed-bar__client--menu { display: none; }
@media screen and (max-width: 500px) {
  .signed-bar__client { display: none; }
  .signed-bar__toggle { display: inline-flex; }
  .signed-bar__nav { display: none; position: absolute; top: 100%; right: var(--gutter); min-width: 200px; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px;
    border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-color: var(--bg); }
  .signed-bar.is-open .signed-bar__nav { display: flex; }
  .signed-bar__link { min-height: 44px; }
  .signed-bar__link[aria-current="page"], .signed-bar__link.is-active { box-shadow: inset 2px 0 0 var(--accent); }
  .signed-bar__nav .signed-bar__client--menu { display: block; padding: 8px 10px 6px; border: 0; font-size: .75rem; }
}

/* --- C. checklist group head: label + small h3 + a count; the gradient display heading is for the page title only --- */
.group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); }
.group-head .label { grid-column: 1 / -1; }
.group-head__title { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 300; }
.group-head__count { font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.group-head__count.is-done { color: var(--good); }
.checklist-group { display: grid; gap: .5rem; }
.checklist-group + .checklist-group { margin-top: 2.5rem; }

/* --- 1. per-person state line on a step card --- */
.person-states { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .8125rem; color: var(--text-2); }
.person-state { display: inline-flex; align-items: center; gap: 7px; }
.person-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-3); }   /* not started: hollow */
.person-state.is-active::before { background: var(--accent); border-color: var(--accent); }
.person-state.is-done::before { background: var(--good); border-color: var(--good); }
.person-state small { color: var(--text-3); font-size: inherit; }

/* --- 3. the one back control on a tool page (top left, above the page label) --- */
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1.25rem; color: var(--text-2); text-decoration: none;
  font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; transition: all var(--dur-ui) var(--ease-ui); }
.back-link::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-ui); }
.back-link:hover { color: var(--text); }
.back-link:hover::before { transform: translateX(-3px) rotate(45deg); }

/* --- 4. signature block and consent checkbox --- */
.sign-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--border-faint); }
.sign-party { display: grid; gap: .5rem; align-content: start; padding: 1.25rem 1.5rem; background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-color: var(--bg); }
.sign-party__name { min-height: 2.4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong); font-size: 1.75rem; line-height: 1.3; font-weight: 300; font-style: italic; overflow-wrap: anywhere; }
.sign-party__meta { font-size: .8125rem; color: var(--text-3); }
.sign-party.is-signed .sign-party__meta { color: var(--good); }
.sign-party.is-pending .sign-party__name { color: var(--text-3); font-style: normal; font-size: 1.125rem; line-height: 2.4rem; }
.consent-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; font-size: .9375rem; color: var(--text); transition: border-color var(--dur-ui) var(--ease-ui); }
.consent-check:hover { border-color: var(--text-3); }
.consent-check input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--text-3); border-radius: var(--radius-btn); background: var(--bg); cursor: pointer; }
.consent-check input:checked { background: var(--accent); border-color: var(--accent); }
.consent-check input:checked::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.consent-check input:focus-visible { outline: .125rem solid var(--focus-ring); outline-offset: .125rem; }
.consent-check:has(input:checked) { border-color: var(--accent); }

/* --- 5. scrolling agreement panel --- */
.agreement { position: relative; border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background-image: linear-gradient(135deg, var(--surface-hi), var(--surface-lo)); background-color: var(--bg); }
.agreement__scroll { max-height: 60vh; overflow-y: auto; padding: 1.75rem 2rem 2.5rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.agreement__scroll > * { max-width: 68ch; }
.agreement__scroll h2 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 300; }
.agreement__scroll h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; line-height: 1.4; font-weight: 500; }
.agreement__scroll p { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.65; color: var(--text-2); }
.agreement__scroll ul, .agreement__scroll ol { margin: 0 0 .75rem; padding-left: 1.25rem; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.agreement__scroll li { margin-bottom: .35rem; }
.agreement__scroll li::marker { color: var(--accent-ink); }
.agreement::after { content: ""; position: absolute; left: 1px; right: 12px; bottom: 1px; height: 72px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); pointer-events: none;
  background: linear-gradient(transparent, var(--surface-lo)); transition: opacity .3s ease; }
.agreement__hint { display: flex; align-items: center; gap: 8px; margin: .625rem 0 0; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); transition: opacity .3s ease; }
.agreement__hint::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -3px; }
.agreement.is-end::after { opacity: 0; }
.agreement.is-end + .agreement__hint { opacity: 0; visibility: hidden; }

@media screen and (max-width: 767px) {
  .sign-block { grid-template-columns: 1fr; }
  .agreement__scroll { padding: 1.25rem 1.25rem 2rem; }
}


/* =============================================================================
   LAYER 2: CHAT TOOL (a gated worker-Lexi chat inside a signed-in tool page, v0.10.0, 2026-09-28)
   Reuses the chat set, .choice-chip, .seg-control, .progress-rule, .btn, .pill. Existing tokens only.
   ========================================================================== */
/* --- 5. composer aligned to the page column (.signed-bar__inner width) in a tool page --- */
.composer--page { padding-left: var(--gutter); padding-right: var(--gutter); }
.composer--page .composer__inner, .composer--page .composer__note, .composer--page .composer__reason { max-width: calc(var(--container-md) - 2 * var(--gutter)); }
.composer--inline.composer--page { padding-left: 0; padding-right: 0; }

/* --- 1. multi-select, then send: chips in the thread, a counted Send, a reason instead of a greyed button --- */
.choice-tray { display: grid; gap: .625rem; margin-top: 4px; }
.choice-chip.is-multi { display: inline-flex; align-items: center; gap: 7px; }
.choice-chip.is-multi::before { content: ""; flex: none; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 2px; }
.choice-chip.is-multi[aria-pressed="true"]::before, .choice-chip.is-multi.is-on::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--btn-bg); }
.choice-tray__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.btn__count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; margin-left: .25rem; border-radius: 2px; background: var(--btn-fg); color: var(--btn-bg); font-size: .8em; letter-spacing: 0; }
.btn--accent .btn__count { background: var(--on-accent); color: var(--accent); }
.send-reason { font-size: .8125rem; color: var(--text-3); }   /* the one-line reason shown in place of a disabled button */
.send-reason::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--text-3); vertical-align: 1px; }
.composer__send--label { width: auto; padding: 0 14px; gap: 8px; display: inline-flex; font-family: var(--font-alt); font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.composer__reason { max-width: 760px; margin: 6px auto 0; font-size: .75rem; color: var(--text-3); }

/* --- 2. finished: the composer is replaced by a done panel with the way back --- */
/* A fixed composer covers the end of the thread unless the thread leaves room for it (found on the
   Ideal Client page, 2026-09-27: the done panel and the staff view-only bar hid the last answer).
   .chat-thread--dock clears a live, fixed composer. .composer--static puts the composer back in the page
   flow at the end of the thread: use it for the finished state and any read-only view, where there is
   nothing left to type and so nothing needs to float. */
.chat-thread--dock { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (max-width: 500px) { .chat-thread--dock { padding-bottom: calc(190px + env(safe-area-inset-bottom)); } }
.composer.composer--static { position: static; background: none; padding: 1.5rem 0 calc(1rem + env(safe-area-inset-bottom)); }
.composer--page.composer--static { padding-left: 0; padding-right: 0; }
.composer__inner--done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 1rem 1.25rem; border-color: var(--border-faint); }
.composer__inner--done:focus-within { border-color: var(--border-faint); }
.done-mark { position: relative; flex: none; width: 28px; height: 28px; border-radius: var(--radius-btn); background: var(--accent); }
.done-mark::after { content: ""; position: absolute; left: 10px; top: 5px; width: 7px; height: 13px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chat-done__text { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.chat-done__text b { font-weight: 500; }
.chat-done__text span { font-size: .875rem; color: var(--text-2); }

/* --- 3. staff view: whose thread, read only --- */
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--well); }
.viewer-bar__label { font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.viewer-bar .seg-control { flex-wrap: wrap; }
.viewer-bar__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--warn); }
.viewer-bar__badge::before { content: ""; width: 9px; height: 7px; border: 1.5px solid currentColor; border-radius: 1px; box-shadow: 0 -4px 0 -1.5px var(--bg), 0 -4px 0 0 currentColor; }   /* a small lock */
.chat-thread.is-readonly .chat-turn--you .chat-bubble { background: var(--well); color: var(--text); border: 1px solid var(--line-strong); }   /* staff see the client's words, not their own orange */
.composer__inner.is-readonly { justify-content: flex-start; gap: 10px; opacity: 1; color: var(--text-3); border-style: dashed; }

/* --- 4. being prepared: something always moves, then it resolves into the first bubble --- */
.chat-skeleton { display: grid; gap: 8px; width: min(420px, 70vw); padding: 1rem 1.1rem; }
.chat-skeleton i { display: block; height: 9px; border-radius: 2px; background: linear-gradient(90deg, var(--line) 0%, var(--line-strong) 40%, var(--line) 80%); background-size: 300% 100%; animation: ds-shimmer 1.6s ease-in-out infinite; }
.chat-skeleton i:nth-child(2) { width: 86%; animation-delay: .15s; } .chat-skeleton i:nth-child(3) { width: 58%; animation-delay: .3s; }
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.chat-turn.is-arriving { animation: ds-arrive .35s cubic-bezier(.455,.03,.515,.955) both; }   /* timed like Morningside's Case Study LOAD step */
@keyframes ds-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   REDUCED MOTION: every motion state resolves to its final frame, nothing moves
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-in], .js [data-load], .js .cta [data-cta], .js .cta .blob { opacity: 1 !important; transform: none !important; }
  .js .cta [data-cta] { filter: none !important; }
  .line-logo__line { width: 100% !important; }
  .fade-up { opacity: 1; animation: none; }
  .page-glow::before { animation: none; opacity: .6; }
  .rec-time.is-on .rec-time__dot, .stage-list li.is-running .stage-list__mark, .playing-line__dot { animation: none; }
  .stage-list__rule::after { animation: none; left: 0; width: 100%; }
  .chat-skeleton i { animation: none; }
  .chat-turn.is-arriving { animation: none; }
  .story.is-static { height: auto; }
  .story.is-static .story__sticky { position: relative; height: auto; display: block; padding: var(--section-lg) 0; }
  .story.is-static .story__lines { position: relative; }
  .story.is-static .story__final { height: auto; padding: 4rem 0; }
  .story.is-static .story__progress { display: none; }
}