/* =============================================================================
   Hire Lexi Design System, v0.17.0 (2026-10-14; first cut 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;
  --raw-focus: #2d62ff;             /* base-color-system--focus-state (Morningside's blue, kept for audit) */
  --raw-focus-ring: #4d65ff;        /* Morningside's inline :focus-visible outline (blue, kept for audit) */
  --focus: var(--accent);           /* DERIVED: Matt ruled no blue focus (2026-09-28); keyboard focus is the accent */
  --focus-ring: var(--accent);      /* DERIVED: same ruling; Morningside's value is --raw-focus-ring */
  --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;
  /* chat-scoped surfaces (v0.11.0). Matt found the chat hard to read ("a Halloweeny vibe": near-black bubbles
     on the #080808 page). Global surfaces stay Morningside's; only chat plates lift. */
  --chat-surface: #1d1a19;          /* DERIVED from --card-hi #151212: OKLCH L raised to .22 (same warm hue) so a Lexi bubble or the composer separates from the page (1.16:1 vs 1.07:1), flat, no gradient */
  --chat-border: color-mix(in srgb, var(--ivory) 14%, transparent);   /* DERIVED from --border-faint (6%): the chat plates' edge, raised to read */
  --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); --chat-surface: var(--white); --chat-border: color-mix(in srgb, var(--grey-dark) 14%, transparent); --focus: var(--accent-ink); --focus-ring: 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); --chat-surface: var(--white); --chat-border: color-mix(in srgb, var(--grey-dark) 14%, transparent); --focus: var(--accent-ink); --focus-ring: 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; }
/* Focus (v0.11.0, Matt: no blue). Keyboard focus on controls is an accent ring. Text fields never show
   a browser outline: the field's own border (or the composer's) turns to the accent hairline. :where()
   keeps these at zero specificity so every component's own focus rule wins. */
:where(a, button, summary, [tabindex], [role="button"], input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: .125rem solid var(--focus-ring);
  outline-offset: .125rem;
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus { outline: none; }
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible { outline: 1px solid var(--focus-ring); outline-offset: -1px; }

/* 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); color: var(--grey-dark); }   /* ink on ivory (dark theme) or white (light theme); the light twin's white button text vanished on it */
.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); outline: none; }   /* v0.11.0: no glow on the text box (Matt) */
.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;
  max-width: 100%; min-width: 0; flex-shrink: 0; overflow: hidden; overflow: clip; text-overflow: ellipsis; }   /* v0.13.0: a chip is a one-line label that cannot be wider than its container; an over-long label truncates. clip (not hidden) keeps the chip on the text baseline; min-width: 0 lets a grid column give way; flex-shrink: 0 keeps a normal label whole in a tight flex row, as before */
.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; min-width: 0; }   /* v0.13.0: min-width so a row of chips never holds a grid or flex parent wide */
.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; }   /* v0.17.0: "> td", so a table nested in a row's detail keeps its own row lines */
.data-table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }   /* v0.17.0: "> td", so hovering a detail does not tint the table inside it */
.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; }
  .loop .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; }
  .loop .verdict-group { grid-area: verd; margin: 10px 12px 0; }
  .loop .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; }
  .loop .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(--chat-border); border-bottom-left-radius: 3px; background-color: var(--chat-surface); }   /* v0.11.0: flat chat plate (was the card gradient) */
.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(--chat-border); border-radius: var(--radius-lg);
  background-color: var(--chat-surface); transition: border-color var(--dur-ui) var(--ease-ui);   /* v0.11.0: flat chat plate */
}
.composer__inner:focus-within { border-color: var(--accent); }
.composer__input:focus, .composer__input:focus-visible { outline: none; }
.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; }
/* Embedded tool frame (client portal, 2026-09-27): a whole app of ours (Lexi's taste session) running in an
   iframe inside a signed-in page. It breaks out of the reading column to the window width less the gutters,
   because the tool has its own layout; never filtered (unlike .booking__frame, which inverts Google's white
   page); tall enough to work in; a loading plate until the iframe says it has loaded. */
.tool-frame { position: relative; width: calc(100vw - 2 * var(--gutter)); margin-left: calc(50% - 50vw + var(--gutter));
  min-height: max(640px, calc(100dvh - 180px)); overflow: clip; border: 1px solid var(--chat-border); border-radius: var(--radius-lg); background: var(--bg); }
/* TOOL PAGE (Matt, 2026-09-27, option 3 from docs/pencil/02_tool-screens.pen): a page whose whole job is one tool
   (the taste test, the Ideal Client interview, any future tool) gets the full window. No .signed-bar, no page head:
   one thin .tool-bar carries the mark, the tool name, progress, the tool's own controls and the way out, and the tool
   fills everything under it. ONLY for tool pages; the dashboard, sign and booking pages and Your team keep
   .signed-bar and the page head. */
.tool-page { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); overflow: hidden; }
.tool-bar { flex: none; display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 20px; background: var(--surface-lo); border-bottom: 1px solid var(--line); }
.tool-bar__mark { flex: none; display: inline-flex; color: var(--accent); }
.tool-bar__mark svg { width: 30px; height: 15px; display: block; }   /* the two-block sprite mark (2:1) */
.tool-bar__mark img { width: auto; height: 22px; display: block; }   /* a logo file keeps its own ratio (the Lexi mark is near square) */
.tool-bar__name { flex: none; margin: 0; font-family: var(--font-body); font-size: .875rem; font-weight: 400; letter-spacing: normal; line-height: 1.2; color: var(--text-2); white-space: nowrap; }   /* make it the page's h1: the tool name is what the page is */
.tool-bar__steps { flex: none; display: flex; align-items: center; gap: 3px; }
.tool-bar__steps i { display: block; width: 16px; height: 3px; background: var(--line-strong); }
.tool-bar__steps i.is-done { background: var(--text); }
.tool-bar__steps i.is-current { background: var(--accent); }
.tool-bar__status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--text); }
.tool-bar__status small { margin-left: 8px; font-size: .8125rem; color: var(--text-3); }
.tool-bar__actions { flex: none; display: flex; align-items: center; gap: 14px; }
.tool-bar__exit { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--text-2); cursor: pointer; }
.tool-bar__exit:hover { color: var(--text); background: var(--well); }
.tool-bar__exit svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .tool-bar__name, .tool-bar__steps { display: none; } .tool-bar { gap: 12px; padding: 0 12px; } }
.tool-bar .btn { min-height: 0; padding: 7px 14px; font-size: .6875rem; }   /* controls sit inside the 48px bar, never stretch it */
/* a tool with many controls (the taste loop) docks them along the foot on phones, within thumb reach */
@media (max-width: 767px) {
  .tool-bar__actions--dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; justify-content: space-between; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface-lo); border-top: 1px solid var(--line); }
  .tool-bar__actions--dock { gap: 6px; }
  .tool-bar__actions--dock .verdict-group button { padding: 0 8px; }
  .tool-bar__actions--dock .btn { padding: 7px 10px; }
  .tool-bar__actions--dock .link-btn { padding: 0 3px; }
  .tool-bar__actions--dock .rec-time { min-width: 0; padding-left: 8px; }
}
@media (max-width: 389px) {
  .tool-bar__actions--dock .rec-time > :not(.rec-time__dot) { display: none; }   /* narrowest phones: the red recording dot stays, the elapsed time goes */
}
@media (max-width: 767px) {
  .tool-page:has(.tool-bar__actions--dock) .tool-page__body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
.tool-page .popup--scrim, .tool-page .popup.popup--scrim { inset: 48px 0 0; }   /* an overlay (paused, mic stopped) covers the tool, never the tool bar: the exit stays reachable */
.tool-page__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tool-frame.tool-frame--full { width: 100%; margin: 0; min-height: 0; flex: 1 1 auto; border: 0; border-radius: 0; }
.tool-frame--full iframe { height: 100%; }
/* a chat tool inside a tool page: the thread scrolls in the body, the composer sits at its foot, one 820px column */
.tool-page__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 24px 20px; }   /* no scroll anchoring: re-wrapping chips and bubbles made Chrome jump the thread */
.tool-page__column { max-width: 820px; margin: 0 auto; }
.tool-page .composer { position: static; background: none; padding: 8px 20px calc(16px + env(safe-area-inset-bottom)); }
.tool-page .composer .composer__inner, .tool-page .composer .composer__reason { max-width: 820px; }
.tool-page .composer.composer--static, .tool-page .composer--page.composer--static { padding-left: 20px; padding-right: 20px; }   /* the finished panel keeps the gutter on phones */
html:has(.tool-frame) { overflow-x: clip; }   /* 100vw counts a classic (Windows) scrollbar; clip the few pixels instead of a sideways scroll */
.tool-frame iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.tool-frame__loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--text-2); background: var(--bg);
  transition: opacity .35s var(--ease-ui), visibility 0s linear .35s; }
.tool-frame__loading .progress-rule { width: 180px; }
.tool-frame__loading .progress-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; }
.tool-frame.is-loaded .tool-frame__loading { opacity: 0; visibility: hidden; }
.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 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; }
.rate-note:focus, .field-ivory:focus-visible, .thread-find__form input:focus-visible { outline: none; }
.rate-note:focus { border-color: var(--accent); }
.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.is-error, .send-reason.is-error { color: var(--bad); }   /* a problem the person must fix: file too big, mic blocked, can't reach Lexi */
.send-reason.is-error::before { border-color: var(--bad); background: var(--bad); }
.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(var(--composer-h, 150px) + 24px + env(safe-area-inset-bottom)); }   /* motion.js measures the live composer and sets --composer-h, so tags, files and reason lines never cover the thread */
@media (max-width: 500px) { .chat-thread--dock { padding-bottom: calc(var(--composer-h, 190px) + 24px + 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; } }


/* =============================================================================
   LAYER 2: CHAT, v0.11.0 (Matt's Ideal Client test run): readable chat plates, picks and files as
   tags inside the composer, a "+" to add files, live talk-to-type on the mic
   ========================================================================== */
/* --- readable chat plates (chat-scoped tokens; the page and every other surface stay Morningside's) --- */
.chat-thread.is-readonly .chat-turn--you .chat-bubble { background: transparent; border-color: var(--chat-border); }

/* --- the field: tags and typed words share one line inside the composer --- */
.composer__field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.composer__field .composer__input { flex: 1 1 140px; min-width: 120px; }

/* --- a pick or a file, as a tag inside the composer --- */
.composer-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--btn-bg); border-radius: var(--radius-btn);
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }   /* a pick: the selected-chip register */
.composer-tag__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-tag__x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: .7; }
.composer-tag__x:hover, .composer-tag__x:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
/* a file inside a sent bubble: the same page glyph as the composer's file tag, sized to sit in a message */
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px; border-radius: var(--radius-btn); font-size: .8125rem; line-height: 1.3;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); }
.chat-file::before { content: ""; flex: none; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 1px; opacity: .7; }
.chat-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file__meta { flex: none; opacity: .7; }
.composer-tag--file { position: relative; overflow: hidden; padding-left: 8px; border-color: var(--line-strong); background: var(--well); color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .8125rem; }
.composer-tag--file::before { content: ""; flex: none; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 1px; opacity: .6; }   /* a small page glyph */
.composer-tag__meta { flex: none; color: var(--text-3); font-size: .75rem; }
.composer-tag--file.is-uploading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--progress, 0%); background: var(--accent); transition: width .3s ease; }
.composer-tag--file.is-failed { border-color: var(--bad); }
.composer-tag--file.is-failed .composer-tag__meta { color: var(--bad); }
.composer-tag__retry { flex: none; padding: 2px 6px; border: 0; border-radius: 2px; background: transparent; color: var(--accent-ink); cursor: pointer; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.composer-tag__retry:hover { background: var(--accent-soft); }

/* --- the "+" (add files), at the left of the composer --- */
.composer__add { flex-shrink: 0; position: relative; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--text-2); cursor: pointer; transition: all var(--dur-ui) var(--ease-ui); }
.composer__add::before, .composer__add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.composer__add::after { transform: translate(-50%, -50%) rotate(90deg); }
.composer__add:hover { color: var(--text); border-color: var(--text-3); }

/* --- the mic: live talk-to-type --- */
.composer__talk.is-listening { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.composer__talk.is-listening::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ds-rec-pulse 1.4s ease-in-out infinite; }
.composer__live { flex: 1 1 140px; min-width: 120px; padding: 9px 4px; font-size: 1rem; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }   /* shown in place of the textarea while listening */
.composer__live-partial { color: var(--text-3); font-style: italic; }   /* words not final yet */
.composer__live-partial::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--accent); animation: ds-caret 1s step-end infinite; }

/* =============================================================================
   LAYER 2: PARTNER PORTAL (v0.13.0, 2026-10-10, DUKE-140 round 10)
   The partner's calling card and their people, promoted from the Lexi calling card mockup
   (method/2026-10-10-calling-card-page). Existing tokens only. The QR drawing stays with the
   consumer; the phone frame, browser frame, share sheet and mini screens stay page-local.
   Old -> new names: readme.md, "Layer 2: partner portal".
   ========================================================================== */

/* --- 1. QR plate: a light plate, dark modules, the mark in the clear centre ------------------- */
/* --bg-alt is ivory on the dark page and white on the ivory twin, so the plate reads in both; the modules stay ink in both so a camera can read them */
.qr-plate { position: relative; width: 100%; padding: 5%; border-radius: var(--radius-xl); background: var(--bg-alt); color: var(--grey-dark);
  box-shadow: 0 0 0 1px var(--border-faint), 0 18px 60px var(--glow-strong); }
.qr-plate > svg, .qr-plate > img { display: block; width: 100%; height: auto; }   /* the code itself: the consumer's own svg (fill: currentColor) or image */
.qr-plate > .qr-plate__mark { position: absolute; left: 50%; top: 50%; width: 15%; transform: translate(-50%, -50%); color: var(--accent); }   /* a currentColor mark takes the accent; a mark with its own fills keeps them */
.qr-plate--sm { padding: 6%; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border-faint), 0 10px 32px var(--glow-strong); }   /* inside a panel or a rail */

/* --- 2. card screen: lockup, one gradient word, a sub line, the plate, one block button at the foot --- */
/* a whole phone screen (100svh). Inside a drawn frame set --card-screen-h: 0px and let the frame's flex column size it. */
.card-screen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: var(--card-screen-h, 100svh); padding: 6% 8% 7%; text-align: center;
  background-image: radial-gradient(120% 60% at 50% 0%, var(--hero-top), transparent 70%); }
.card-screen__brand { flex: none; height: 22px; width: auto; }
.card-screen__word { margin-top: 7%; padding-bottom: 6px; font-size: 3.5rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; }   /* add .grad */
.card-screen__sub { margin-top: .375rem; color: var(--text-2); font-size: .875rem; line-height: 1.4; }
.card-screen .qr-plate { max-width: 22rem; margin-top: 8%; }
.card-screen__foot { width: 100%; max-width: 22rem; margin-top: auto; padding-top: 1.5rem; }   /* holds one .btn.btn--block */

/* --- 3. a leading icon in any .btn: 18px stroke icon, .625rem from the label ------------------- */
.btn__icon { flex: none; display: block; width: 18px; height: 18px; margin-inline-end: -.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--xs .btn__icon { width: 14px; height: 14px; margin-inline-end: 0; }

/* --- 4. a partner's people: count tiles, then one row per person with a step and a segmented bar --- */
/* count tiles are .glance-tile in a row that never wraps; the tile that matters takes the accent */
.glance-grid--counts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; container-type: inline-size; }
.glance-tile--count { gap: 0; padding: .875rem 1.125rem; border-top: 1px solid var(--border-faint); border-radius: var(--radius-md); }
.glance-tile--count .glance-tile__big { font-size: 2.25rem; line-height: 1.1; }
.glance-tile--count .glance-tile__big small { display: block; margin: .125rem 0 0; line-height: 1.4; }
.glance-tile.is-accent { border-top-color: var(--accent); }
.glance-tile--count.is-accent { box-shadow: inset 0 1px 0 var(--accent); }   /* a 2px accent edge without moving the number down a pixel */
.glance-tile.is-accent .glance-tile__big { color: var(--accent-ink); }
.glance-tile.is-later { border-style: dashed; border-color: var(--line); background: none; }   /* not counted yet */
.glance-tile.is-later .glance-tile__big { color: var(--dot-off); }
@container (max-width: 26rem) {
  .glance-tile--count { padding: .6rem .5rem; text-align: center; }
  .glance-tile--count .glance-tile__big { font-size: 1.625rem; }
  .glance-tile--count .glance-tile__big small { font-size: .5625rem; }
}
/* segmented progress: one <i> per step, so the number of steps is the number of children; .is-on = reached */
.seg-bar { display: inline-flex; gap: var(--seg-gap, 3px); vertical-align: middle; }
.seg-bar > i { flex: none; width: var(--seg-w, 8px); height: var(--seg-h, 4px); border-radius: calc(var(--seg-h, 4px) / 2); background: var(--dot-off); }
.seg-bar > i.is-on { background: var(--accent); }
.seg-bar--lg { --seg-w: 24px; --seg-h: 6px; --seg-gap: 4px; }
/* the list: a .data-table in a .table-wrap; it answers to its own width (a table when wide, rows when narrow) */
.people-list { container-type: inline-size; }
.people-list__table { font-size: .9375rem; color: var(--text-2); }
.people-list__table th, .people-list__table td { padding: .75rem 1rem; vertical-align: middle; white-space: nowrap; }
.people-list__name { color: var(--text); font-weight: 500; }
.people-list__bar .seg-bar { --seg-w: 24px; --seg-h: 6px; --seg-gap: 4px; }
.people-list__note { margin-top: .75rem; font-size: .8125rem; color: var(--text-3); }
/* v0.13.1 (DUKE-172): a cell that may wrap. The table keeps every cell on one line; put .is-wrap on the td of the one column whose text can run long
   and it wraps inside its own column, so the step and the bar stay in view. Table only: as row cards every cell already wraps. */
@container (min-width: 35.01rem) {
  .people-list__table td.is-wrap { white-space: normal; min-width: 9rem; }
}
@container (max-width: 35rem) {
  .people-list .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .people-list__table { display: block; background: none; }
  .people-list__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .people-list__table tbody { display: grid; gap: .4rem; }
  .people-list__table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .2rem .35rem; align-items: center; padding: .55rem .7rem;
    border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--well); }
  .people-list__table td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .people-list__table tbody tr:hover td { background: none; }
  .people-list__name { grid-row: 1; grid-column: 1 / 4; font-size: .8125rem; }
  .people-list__meta { grid-row: 2; font-size: .6875rem; color: var(--text-3); }
  .people-list__meta + .people-list__meta::before { content: "\00B7\00A0"; }
  .people-list__step { grid-row: 1; grid-column: 4; justify-self: end; line-height: 1; }
  .people-list__bar { grid-row: 2; grid-column: 4; justify-self: end; line-height: 1; }
  .people-list__step .state-chip { padding: 0 0 0 2px; border: 0; background: none; font-size: .5625rem; }   /* in a row the step is a plain label; 2px so the clip never shaves the first letter */
  .people-list__bar .seg-bar { --seg-w: 8px; --seg-h: 4px; --seg-gap: 3px; }
}

/* --- 5. lifecycle track: steps on one accent line, grouped under bands; a spine at 991 and below --- */
/* set --steps on the list and --span on each band; filled dot (.is-live) = tracked today, hollow = not yet */
.life-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 8), minmax(0, 1fr)); gap: 1.25rem 0; }
.life-track__band { grid-row: 1; grid-column: span var(--span, 1); display: grid; gap: .4rem; justify-items: center; align-content: center; min-width: 0; margin-inline: .25rem; padding: .6rem .5rem; text-align: center;
  border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--well);
  font-family: var(--font-alt); font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); }
.life-track__step { grid-row: 2; position: relative; display: grid; gap: .4rem; align-content: start; justify-items: center; min-width: 0; padding: 2rem .4rem 0; text-align: center; }
.life-track__step::before { content: ""; position: absolute; top: .55rem; left: 0; right: 0; height: 2px; background: var(--accent); opacity: .65; }
.life-track__band:first-child + .life-track__step::before, .life-track__step:first-child::before { left: 50%; }
.life-track__step:last-child::before { right: 50%; }
.life-track__step::after { content: ""; position: absolute; top: .55rem; left: 50%; width: 12px; height: 12px; margin: -5px 0 0 -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.life-track__step.is-live::after { background: var(--accent); }
.life-track__step b { font-size: .9375rem; font-weight: 500; line-height: 1.25; color: var(--text); }
.life-track__step span { font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.life-track__step small { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.life-track__step small em { font-style: normal; color: var(--accent-ink); }
@media screen and (max-width: 991px) {
  .life-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .life-track__band { grid-row: auto; grid-column: 1; grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; margin: 1.25rem 0 .75rem; padding: .6rem .875rem; text-align: left; }
  .life-track__band:first-child { margin-top: 0; }
  .life-track__step { grid-row: auto; grid-column: 1; justify-items: start; padding: 0 0 1.25rem 2.25rem; text-align: left; }
  .life-track__step::before, .life-track__band:first-child + .life-track__step::before, .life-track__step:first-child::before, .life-track__step:last-child::before { top: 0; bottom: 0; left: .6rem; right: auto; width: 2px; height: auto; }
  .life-track__band:first-child + .life-track__step::before, .life-track__step:first-child::before { top: .5rem; }
  .life-track__step:last-child::before { bottom: auto; height: .5rem; }
  .life-track__step::after { top: .5rem; left: .6rem; margin: -1px 0 0 -5px; }
}

/* --- 6. "new in this proposal": the accent chip. Same look as .is-active; the name carries the meaning --- */
.state-chip.is-new { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

@media print {
  .qr-plate, .life-track__step, .people-list__table tr { break-inside: avoid; }
}


/* =============================================================================
   LAYER 2: DECISION PAGE (v0.13.0, 2026-10-10, DUKE-140 round 10)
   A page that puts one decision in front of Matt: the answer, the before and after, the stages,
   who reaches what and when, the rulings and a reply to paste. Promoted from the Lexi client
   folders page (method/2026-10-10-system-of-record-page). Existing tokens only. Named so nothing
   collides with the system's own .verdict (report sentence), .quote (Morningside's blockquote)
   or .ph (image placeholder). Old -> new names: readme.md, "Layer 2: decision page".
   ========================================================================== */

/* --- 7. stage board: one column per stage, small item rows, a "lives in" tag ------------------ */
.stage-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .625rem; }
.stage-col { display: grid; gap: .625rem; align-content: start; min-width: 0; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--surface-hi); }
.stage-col__name { font-family: var(--font-alt); font-size: .6875rem; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); overflow-wrap: anywhere; }
.stage-col__empty { font-size: .8125rem; color: var(--text-3); }
.stage-item { position: relative; padding-left: 1.25rem; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.stage-item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }   /* round, accent: something that happened (a meeting) */
.stage-item.is-doc::before { border-radius: 2px; background: var(--text-2); }                                                                           /* square, quiet: a thing made or received */
.stage-item small { display: block; font-size: .75rem; color: var(--text-3); }
.stage-item__lives { display: block; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }

/* --- 8. text matrix: rows are named things, columns are states or times; set --cols ------------ */
.text-matrix { display: grid; grid-template-columns: var(--name-w, 9rem) repeat(var(--cols, 3), minmax(0, 1fr)); gap: .5rem; }
.text-matrix__head { padding: 0 1rem .25rem; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.text-matrix__name { display: grid; align-content: center; min-width: 0; font-size: .875rem; font-weight: 500; color: var(--text); }
.text-matrix__cell { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-size: .875rem; color: var(--text-2); }
.text-matrix__cell.is-now { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.text-matrix__cell[data-label]::before { content: attr(data-label); display: none; margin-bottom: .25rem; font-family: var(--font-alt); font-size: .625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }

/* --- 9. the answer: one word at display size, a supporting line; and a before -> after count ---- */
.answer-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.75rem; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); }
.answer-block__word { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 300; line-height: 1; }
.answer-block p { max-width: 48ch; color: var(--text-2); font-size: 1.0625rem; }
.count-shift { display: inline-flex; align-items: baseline; gap: .35em; font-size: 2.75rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.panel--start { align-content: start; }   /* a .panel--stack in a row of equal-height panels: its rows pack to the top instead of spreading */
.count-shift s { color: var(--bad); text-decoration-thickness: 2px; }      /* before */
.count-shift em { font-style: normal; color: var(--good); }                /* after */

/* --- 10. ruling cards and the reply to paste ---------------------------------------------------- */
.ruling-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.ruling { display: grid; gap: .75rem; align-content: start; justify-items: start; min-width: 0; 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)); }
.ruling.is-main { border-color: var(--accent); }
.ruling h3 { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.25; }
.ruling p { color: var(--text-2); font-size: .9375rem; }
.paste-block { margin: 0; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-btn); background: var(--well); color: var(--text); font-size: .9375rem; line-height: 1.5;
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }   /* one click selects the whole reply */

/* --- 11. wide content on a narrow screen: the diagram scrolls inside its own box, the page never does --- */
/* min-width: 0 lets the wrapper shrink inside a grid or flex parent; the child keeps a readable width (--wide-min) */
.wide-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.wide-scroll > * { display: block; width: 100%; min-width: var(--wide-min, 47.5rem); height: auto; }

@media screen and (max-width: 767px) {
  .stage-board { grid-auto-flow: row; }
  .text-matrix { grid-template-columns: minmax(0, 1fr); }
  .text-matrix__head { display: none; }
  .text-matrix__cell[data-label]::before { display: block; }
  .text-matrix__name { padding-top: .75rem; }
  .answer-block { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
}
@media print {
  .stage-col, .ruling, .answer-block, .text-matrix__cell { break-inside: avoid; }
  .wide-scroll { overflow: visible; }
  .wide-scroll > * { min-width: 0; }
}


/* =============================================================================
   LAYER 2: SCAN PAGE PIECES (v0.13.0, 2026-10-10, DUKE-140 round 10)
   Two pieces the Hire Lexi /scan proposal needed that the system lacked: a static numbered list
   (not a progress stepper: nothing is dimmed, nothing is current) and a compact two-column
   variant of the fact grid. Existing tokens only. Old -> new names: readme.md, "Scan page pieces".
   ========================================================================== */

/* --- 12. static numbered list: a large numeral in a left column, a title and one line, hairlines between rows --- */
.num-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.num-list__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.num-list__item:last-child { border-bottom: 1px solid var(--line); }
.num-list__n { font-size: 2.5rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 12%, transparent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.num-list__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.num-list__body h3 { margin: 0; font-size: 1.35rem; font-weight: 300; line-height: 1.25; }
.num-list__body p { margin: 0; color: var(--text-2); line-height: 1.5; }

/* --- 13. compact fact grid: two columns of short facts, hairlines between cells, one column on phones --- */
.fact-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.fact-grid--compact .fact-card { align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 1.25rem 1.5rem; text-align: left; border: 0; border-radius: 0; background: var(--bg); }
.fact-grid--compact .fact-card__title { font-size: 1.1rem; font-weight: 400; }
.fact-grid--compact .fact-card p { color: var(--text-3); font-size: .9rem; line-height: 1.5; }
.fact-grid--compact .fact-card a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.fact-grid--compact > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd count: the last fact spans the row, no empty cell */

@media screen and (max-width: 479px) {
  .num-list__item { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .num-list__n { font-size: 2rem; }
  .fact-grid--compact { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}
@media print {
  .num-list__n { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text-3) !important; }
  .num-list__item, .fact-grid--compact .fact-card { break-inside: avoid; }
}


/* =============================================================================
   LAYER 2: SALES PAGE PIECES (v0.15.0, 2026-10-11, DUKE-181 round 12)
   Eight pieces lifted from the Hire Lexi /scan sales page, where they were site-local "sp-"
   classes: a video block, a review card, a placeholder tag, a media frame, the app bar as one
   row, a live pill, an accordion that is always open and a compact numbered list. Existing
   tokens only. The page's own shell (hero, the one ask, section bands, the start block) stays
   with the page until a second page needs it. Old -> new names: readme.md, "Layer 2: sales
   page pieces".
   ========================================================================== */

/* --- 1. video block: a film that plays silent under a panel that says so; one tap restarts it with sound --- */
/* data-mode on the root is the whole state: muted (the silent loop), still (nothing moves: reduced motion, no film, or the browser refused),
   sound (playing with sound, two round buttons), ended. motion.js sets it (initVideoBlocks); a block marked data-video-static is left alone.
   The 44rem cap is --video-max: set it on the block or on a parent. */
.video-block { position: relative; width: 100%; max-width: var(--video-max, 44rem); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-faint); background: var(--surface-lo); box-shadow: 0 0 80px var(--glow); }
.video-block video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-block__cover { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }   /* the whole frame is the button */
.video-block__panel { display: grid; justify-items: center; gap: .25rem; padding: 1.125rem 1.75rem 1.25rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 90%, transparent); color: var(--on-accent);
  outline: 1px solid color-mix(in srgb, var(--on-accent) 40%, transparent); outline-offset: -6px; box-shadow: 0 0 48px var(--glow-strong);
  font-family: var(--font-alt); font-size: 1.0625rem; line-height: 1.3; text-align: center; transition: transform var(--dur-ui) var(--ease-ui); }
.video-block__cover:hover .video-block__panel { transform: scale(1.03); }
.video-block__panel svg { width: 2.25rem; height: 2.25rem; margin-bottom: .125rem; }
.video-block__panel b { font-weight: 600; }
/* a page with no component of its own carries all three panels, each marked data-for; the one that matches data-mode shows.
   No data-mode at all reads as still. A panel with no data-for always shows (a component that renders one panel at a time). */
.video-block__panel[data-for] { display: none; }
.video-block[data-mode="muted"] .video-block__panel[data-for="muted"],
.video-block[data-mode="still"] .video-block__panel[data-for="still"],
.video-block:not([data-mode]) .video-block__panel[data-for="still"],
.video-block[data-mode="ended"] .video-block__panel[data-for="ended"] { display: grid; }
.video-block[data-mode="sound"] .video-block__cover, .video-block:not([data-mode="sound"]) .video-block__ctrls { display: none; }
/* "Tap" on a touch screen, "Click" with a mouse: write both words, one shows */
.video-block__click { display: none; }
/* the two round buttons: play or pause, sound on or off. Each holds two icons; .is-paused and .is-quiet on the root pick which */
.video-block__ctrls { position: absolute; left: .75rem; bottom: .75rem; display: flex; gap: .5rem; }
.video-block__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-block__btn:hover { border-color: var(--accent); }
.video-block__btn svg { width: 1.125rem; height: 1.125rem; }
.video-block__btn .video-block__off { display: none; }                                             /* __on: drawn while it plays, or while the sound is on */
.video-block.is-paused [data-video="play"] .video-block__on, .video-block.is-quiet [data-video="sound"] .video-block__on { display: none; }
.video-block.is-paused [data-video="play"] .video-block__off, .video-block.is-quiet [data-video="sound"] .video-block__off { display: block; }   /* __off: drawn while paused, or while muted */

/* --- 2. review card: who said it, five stars, the quote with one sentence marked, an optional line under a hairline --- */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.review-card { position: relative; display: grid; gap: .625rem; margin: 0; padding: 1.25rem 1.25rem 1.375rem; border: 1px solid var(--chat-border); border-radius: var(--radius-lg); background: var(--chat-surface); }
.review-card__head { display: flex; align-items: center; gap: .75rem; }
.review-card__av { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-alt); }   /* an initial, or an img */
.review-card__who { display: grid; line-height: 1.3; }
.review-card__who b { font-weight: 500; }
.review-card__who small { color: var(--text-3); font-size: .8125rem; }
.review-card__stars { color: var(--star); font-size: .9375rem; line-height: 1; letter-spacing: .15em; }
.review-card blockquote { margin: 0; color: var(--text-2); line-height: 1.6; }
.review-card mark { padding: .1em .2em; border-radius: 2px; background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* the one sentence worth reading */
.review-card figcaption { padding-top: .625rem; border-top: 1px solid var(--line); line-height: 1.4; }

/* --- 3. placeholder tag: loud on purpose. Solid = a stand-in for something that does not exist yet; dashed = a promise someone has to confirm --- */
/* in the .ph family (.ph is the image placeholder). The text-fill lines keep it readable inside a .grad heading. .ph-ring rings the block the tag belongs to. */
.ph-tag { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .125rem .4rem; width: fit-content; max-width: 100%; padding: 3px 7px; border: 1px solid var(--warn); border-radius: var(--radius-btn);
  background: var(--warn); color: var(--bg); -webkit-text-fill-color: var(--bg);   /* the page colour as ink: dark ink on the dark page's amber, ivory on the ivory twin's brown */
  font-family: var(--font-alt); font-size: .6875rem; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; text-align: left; vertical-align: middle; }
.ph-tag__note { font-weight: 400; letter-spacing: .02em; text-transform: none; }   /* what is missing, in plain words */
.ph-tag--confirm { border-style: dashed; background: var(--warn-soft); color: var(--warn); -webkit-text-fill-color: var(--warn); }
.ph-ring { outline: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); outline-offset: 5px; }

/* --- 4. media frame: a rounded, clipped frame for a picture, a film or a placeholder. --ratio sets its shape; its width is the page's --- */
.media-frame { position: relative; width: 100%; aspect-ratio: var(--ratio, 16 / 10); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-lo); }
.media-frame--tall { --ratio: 3 / 4; }   /* a phone video */
.media-frame img, .media-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame .ph { aspect-ratio: auto; height: 100%; padding: 1.5rem; text-align: center; line-height: 1.7; }   /* a .ph inside fills the frame and may hold a sentence */
.media-frame > .ph-tag { position: absolute; left: .625rem; top: .625rem; max-width: calc(100% - 1.25rem); }      /* a tag that is a direct child is pinned top left */

/* --- 5. the app bar as one row: the lockup at the left, one thing at the right, at the page's own width --- */
.app-bar--row .app-bar__inner { max-width: var(--container); padding: 10px var(--gutter); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.app-bar--row .app-bar__brand { align-items: center; line-height: 0; text-decoration: none; }   /* the lockup, usually a link home */

/* --- 6. live pill: a link in the bar with a pulsing dot. The second half of its text drops at 520px and below --- */
.pill--live { display: inline-flex; align-items: center; gap: .5rem; padding: 7px 12px; color: var(--text); border-color: var(--line-strong); background: var(--well); text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-ui) var(--ease-ui); }
.pill--live:hover { border-color: var(--accent); }
.pill__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: ds-live-pulse 2.2s var(--ease-in-out) infinite; }
.pill__more { color: var(--text-3); }
@keyframes ds-live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* --- 7. an accordion that is always open: every answer on the page, nothing to tap. motion.js leaves it alone --- */
/* it draws the open surface itself, so .is-open is not needed; no icon; the head may be an h3. Rows stack with their own .75rem gap. */
.accordion--static { cursor: default; margin: 0; border: 1px solid var(--border-faint); background: linear-gradient(135deg, var(--surface-hi) 0%, var(--surface-lo) 100%); background-clip: padding-box; }
.accordion--static + .accordion--static { margin-top: .75rem; }
.accordion--static .accordion__head { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.35; cursor: default; }
.accordion--static .accordion__body { max-height: none; overflow: visible; }
.accordion--static .accordion__answer { display: grid; gap: .75rem; margin-top: 1rem; color: var(--text-2); line-height: 1.6; }
.accordion--static .accordion__answer p { margin: 0; }
.accordion--static .accordion__answer a { color: var(--link); }

/* --- 8. compact numbered list: the static list at a smaller size, for inside a panel --- */
.num-list--compact .num-list__item { grid-template-columns: 3.25rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; }
.num-list--compact .num-list__n { font-size: 1.75rem; line-height: 1.15; }
.num-list--compact .num-list__body { gap: .25rem; }
.num-list--compact .num-list__body h3 { font-size: 1.125rem; }
.num-list--compact .num-list__body p { font-size: .9375rem; }

@media (hover: hover) and (pointer: fine) {
  .video-block__tap { display: none; }
  .video-block__click { display: inline; }
}
@media screen and (min-width: 992px) {
  .review-grid--stagger > :nth-child(2) { margin-top: 2.5rem; }   /* three cards at three heights */
  .review-grid--stagger > :nth-child(3) { margin-top: 1rem; }
}
@media screen and (max-width: 991px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 520px) {
  .pill__more { display: none; }
}
@media screen and (max-width: 479px) {
  .video-block__panel { padding: .75rem 1.25rem .875rem; font-size: .9375rem; }
  .video-block__panel svg { width: 1.75rem; height: 1.75rem; }
  .accordion--static { padding: 1.25rem; }   /* the tappable accordion drops to 1rem here; a row of open answers keeps 1.25rem */
}
@media print {
  .video-block, .review-card, .media-frame, .accordion--static { break-inside: avoid; }
}


/* =============================================================================
   LAYER 2: CATALOG AND SWITCHBOARD PARTS (v0.16.0, 2026-10-14, DUKE-209 round 13)
   The parts a module catalog and its staff switchboard need: an on/off switch that is a real
   control, a module row and its list, a price breakdown, a usage meter, a drawn screen frame for
   mockups, and status marks with their key for flow lanes. Promoted from the module catalog
   mockup (method/2026-10-13-module-catalog-and-switches, DUKE-204). Existing tokens only. Reuses
   .progress-rule (new --thick modifier), .text-matrix (new --dense modifier, a second line, an
   empty cell), .data-table (new --controls modifier), .state-chip and .ph-tag. The frame never
   restyles what sits inside it. Old -> new names: readme.md, "Layer 2: catalog and switchboard parts".
   ========================================================================== */

/* --- 1. switch: on or off, and it says which. A button[role="switch"][aria-checked], or a label around a checkbox --- */
/* Write both words (.switch__on, .switch__off); the state shows one. Give the button an accessible name (aria-labelledby the
   thing it switches, or aria-label) and put aria-hidden="true" on the words, so a reader hears the name and the state once.
   The button is 2.75rem tall for a thumb; the drawn track is 1.5rem. motion.js flips aria-checked on a click only when the
   button carries data-switch; without it the page's own code owns the state. */
.switch { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0; padding: 0; border: 0; background: none; vertical-align: middle;
  color: var(--text-3); font-family: var(--font-alt); font-size: .6875rem; line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.switch__track { position: relative; flex: none; width: 2.5rem; height: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--well);
  transition: background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui); }
.switch__track::after { content: ""; position: absolute; top: 50%; left: 3px; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%; background: var(--text-3);
  transition: transform var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui); }
.switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }   /* the checkbox form: still focusable, the track draws it */
.switch__on { display: none; }
.switch:not(:disabled):not([aria-disabled="true"]):hover .switch__track { border-color: var(--text-3); }
/* on: the accent fill (accent ink, so the track holds 3 to 1 on the ivory twin too) and a knob in the page colour */
.switch[aria-checked="true"], .switch:has(input:checked) { color: var(--text); }
.switch[aria-checked="true"] .switch__track, .switch input:checked + .switch__track { border-color: var(--accent-ink); background: var(--accent-ink); }
.switch[aria-checked="true"] .switch__track::after, .switch input:checked + .switch__track::after { background: var(--bg); transform: translateX(1rem); }
.switch[aria-checked="true"] .switch__on, .switch input:checked ~ .switch__on { display: inline; }
.switch[aria-checked="true"] .switch__off, .switch input:checked ~ .switch__off { display: none; }
/* keyboard focus rings the track, not the whole tap area */
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch__track, .switch input:focus-visible + .switch__track { outline: .125rem solid var(--focus-ring); outline-offset: .125rem; }
/* disabled: faded, a dashed track, and no pointer */
.switch:disabled, .switch[aria-disabled="true"], .switch:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.switch:disabled .switch__track, .switch[aria-disabled="true"] .switch__track, .switch input:disabled + .switch__track { border-style: dashed; }

/* --- 2. module row and its list: a name, one line, a price line; a switch or a state chip at the right --- */
.module-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.module-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; min-width: 0; margin: 0; 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));
  transition: border-color var(--dur-ui) var(--ease-ui); }
.module-row__main { display: grid; gap: .25rem; min-width: 0; }
.module-row__name { font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.module-row__line { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.module-row__price { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-3); font-variant-numeric: tabular-nums; }
.module-row__price b { font-weight: 500; color: var(--text); }
.module-row__end { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; }
.module-row.is-selected { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }   /* the row being looked at, or the one just switched */

/* --- 3. price breakdown: label and amount lines, a total, and what is due now in accent ink --- */
/* a dl: each line is a div holding a dt (what) and a dd (how much). Figures are tabular so they stack. */
.price-lines { display: grid; margin: 0; font-variant-numeric: tabular-nums; }
.price-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--line); }
.price-lines > div:first-child { padding-top: 0; border-top: 0; }
.price-lines dt { min-width: 0; font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.price-lines dt small { display: block; font-size: .75rem; color: var(--text-3); }
.price-lines dd { flex: none; margin: 0; font-weight: 500; line-height: 1.4; color: var(--text); text-align: right; white-space: nowrap; }
.price-lines > .is-total { border-top-color: var(--line-strong); }
.price-lines > .is-total dt, .price-lines > .is-now dt { color: var(--text); }
.price-lines > .is-total dd, .price-lines > .is-now dd { font-size: 1.125rem; }
.price-lines > .is-now dd { color: var(--accent-ink); }

/* --- 4. usage meter: runs used of the monthly allowance. A thick .progress-rule plus a head line and a caption --- */
.progress-rule--thick { height: 6px; border-radius: var(--radius-btn); background: var(--dot-off); }
.progress-rule--thick > i { border-radius: inherit; }
.usage-meter { display: grid; gap: .5rem; min-width: 0; }
.usage-meter__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; font-size: .8125rem; line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
.usage-meter__head b { font-weight: 500; color: var(--text); }
.usage-meter__caption { margin: 0; font-size: .75rem; line-height: 1.4; color: var(--text-3); }
/* past the allowance: the bar is full and turns warn, and a .state-chip.is-warn in the head says so in words */
.usage-meter.is-over .progress-rule > i { width: 100%; background: var(--warn); box-shadow: none; }
.usage-meter.is-over .usage-meter__head b { color: var(--warn); }

/* --- 5. screen frame: a drawn screen for a mockup. A desktop window with a top bar, or a phone. Never a live page --- */
/* What sits inside keeps its normal size. To show a big screen small, set --frame-scale on the frame (one zoom on the body, everything
   in it scales together); never restyle a part inside the frame. Parts inside still answer to the window's width, not the frame's. */
.screen-frame { display: flex; flex-direction: column; min-width: 0; overflow: clip; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); }
.screen-frame__bar { flex: none; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .75rem; border-bottom: 1px solid var(--line); background: var(--well);
  font-family: var(--font-alt); font-size: .6875rem; line-height: 1.3; letter-spacing: .02em; color: var(--text-3); }
.screen-frame__bar > i { flex: none; width: 8px; height: 8px; border: 1px solid var(--line-strong); border-radius: 50%; }   /* the window dots; aria-hidden */
.screen-frame__bar > i + span { margin-left: .25rem; }
.screen-frame__bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* an address or a title, cut short when it will not fit */
.screen-frame__body { flex: 1 1 auto; display: grid; gap: 1rem; align-content: start; min-width: 0; padding: 1.25rem; zoom: var(--frame-scale, 1); }
.screen-frame--phone { width: 100%; max-width: 24rem; margin-inline: auto; border-radius: var(--radius-xl); }
.screen-frame--phone .screen-frame__bar { justify-content: center; padding: .625rem 1rem; }
.screen-frame--phone .screen-frame__body { padding: 1rem; }

/* --- 6. flow lanes: a .text-matrix whose rows are who acts and whose columns are steps; each cell carries a status mark, with a key --- */
/* the mark: filled = works today, half filled = partly there or being built, hollow = drawn only. The shape carries the meaning and the
   colour repeats it; the key gives the word, and each mark in a cell carries the word for a reader (role="img" + aria-label). */
.mark-dot { display: inline-block; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--text-3); border-radius: 50%; vertical-align: -.1em; }
.mark-dot.is-live { border-color: var(--good); background: var(--good); }
.mark-dot.is-build { border-color: var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
.mark-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.mark-key > li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
/* in a matrix cell the mark hangs in the cell's left padding, so a second line of text lines up under the first */
.text-matrix__cell:has(> .mark-dot) { padding-left: 1.875rem; }
.text-matrix__cell > .mark-dot { margin: 0 .625rem 0 -1.25rem; }
.text-matrix__cell small { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.35; color: var(--text-3); }   /* a second, quieter line */
.text-matrix__cell.is-empty { border-style: dashed; border-color: var(--border-faint); }   /* this actor has nothing at this step */
/* dense: many columns (six to eight steps) at one screen's width */
.text-matrix--dense { gap: .375rem; }
.text-matrix--dense .text-matrix__head { padding: 0 .625rem .25rem; }
.text-matrix--dense .text-matrix__name { font-size: .8125rem; }
.text-matrix--dense .text-matrix__cell { padding: .5rem .625rem; font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.text-matrix--dense .text-matrix__cell:has(> .mark-dot) { padding-left: 1.625rem; }
.text-matrix--dense .text-matrix__cell > .mark-dot { margin: 0 .5rem 0 -1.125rem; }

/* --- 7. a table of controls (the switchboard): .data-table with one control per cell, centred on the row --- */
.data-table--controls td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }

@media screen and (max-width: 767px) {
  .text-matrix__cell.is-empty { display: none; }   /* stacked, an empty step is only noise */
}
@media print {
  .module-row, .screen-frame, .price-lines > div { break-inside: avoid; }
}


/* =============================================================================
   LAYER 2: EXPANDABLE TABLE ROW (v0.17.0, 2026-10-14, DUKE-210 round 14)
   A table row that opens into a detail spanning the whole row, for the admin portal: a partner row
   opens to its referrals and its health, and a referral row inside it opens to what was sold.
   Nestable one level. Works on .data-table and on .people-list__table, in its table form and as
   row cards. The control is a real button (aria-expanded + aria-controls); motion.js flips it when
   the button carries data-row-toggle. Existing tokens only. Builds on .data-table, .table-wrap,
   .people-list and the ds-arrive keyframes; the detail holds any parts (.kv-row, .state-chip,
   .seg-bar, .btn--xs). Markup and contract: readme.md, "Layer 2: expandable table row".
   ========================================================================== */

/* --- 1. the toggle: a button that holds the row's name, a chevron drawn before it --- */
/* The name is the button's text, so a click on the name opens the row, and a reader hears the name and "collapsed" or "expanded".
   Put the button directly in the row's first cell. The chevron points right when closed and down when open; ::after widens the
   tap area by .5rem all round without moving anything. */
.row-toggle { position: relative; display: inline-flex; align-items: flex-start; gap: .5rem; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none;
  color: inherit; font: inherit; line-height: inherit; text-align: left; overflow-wrap: break-word; cursor: pointer; }   /* break-word, not anywhere: a name never shrinks its column to one letter */
.row-toggle::before { content: ""; flex: none; width: .4375rem; height: .4375rem; margin: calc(.5lh - .21875rem) .125rem 0; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0;
  transform: translateX(-1px) rotate(-45deg); transition: transform var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui); }
.row-toggle::after { content: ""; position: absolute; inset: -.5rem; }
.row-toggle:hover::before, .row-toggle[aria-expanded="true"]::before { border-color: var(--text); }
.row-toggle[aria-expanded="true"]::before { transform: translateY(-2px) rotate(45deg); }
.row-toggle:focus-visible { outline: .125rem solid var(--focus-ring); outline-offset: .25rem; }

/* --- 2. the detail: tr.row-detail[id][hidden] > td[colspan = every column] > .row-detail__body --- */
/* The body is a size container with inline-size containment: whatever sits in it never widens a column, so opening a row never moves
   the columns, and what sits inside can answer to the body's own width with @container. */
.row-detail > td { padding: 0; white-space: normal; vertical-align: top; }
.row-detail__body { display: grid; gap: 1rem; align-content: start; min-width: 0; padding: 1rem 1.25rem 1.25rem; border-left: 2px solid var(--accent); background: var(--well);
  color: var(--text-2); font-size: .875rem; line-height: 1.5; white-space: normal; container-type: inline-size; animation: ds-arrive var(--dur-ui) var(--ease-ui); }
.row-detail__body > * { min-width: 0; }
/* the open row and its detail read as one block: one well, no rule between them, and the accent line down the left of both */
.data-table tbody tr:has(> td > .row-toggle[aria-expanded="true"]) > td { background-color: var(--well); border-bottom-color: transparent; }
.data-table tbody tr:has(> td > .row-toggle[aria-expanded="true"]) > td:first-child { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 2px 100%; background-repeat: no-repeat; }
.data-table tbody tr.row-detail:hover > td { background: none; }
.data-table tbody tr:has(+ tr.row-detail[hidden]:last-child) > td { border-bottom: 0; }   /* the last row, closed: no second line against the frame */

/* --- 3. one level down: a detail inside a detail is tighter --- */
.row-detail .row-detail .row-detail__body { gap: .75rem; padding: .75rem 1rem; }

/* --- 4. a table wider than its screen: .table-wrap--expand keeps an open detail in view, as wide as the visible table --- */
/* The wrap becomes a size container, so it must take its width from its parent (a block or a grid column, never a shrink-to-fit box).
   The detail is held at the wrap's visible width and pinned to its left edge while the columns scroll sideways under it. */
.table-wrap--expand { container-type: inline-size; }
.table-wrap--expand > .data-table > tbody > .row-detail > td > .row-detail__body { position: sticky; left: 0; width: min(100%, 100cqi); }

/* --- 5. a people list as row cards (its own width 35rem and under): the open card and its detail join into one card --- */
@container (max-width: 35rem) {
  .people-list__table tbody tr:has(> td > .row-toggle[aria-expanded="true"]) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); border-bottom-color: var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .people-list__table tbody tr:has(> td > .row-toggle[aria-expanded="true"]) > td,
  .people-list__table tbody tr:has(> td > .row-toggle[aria-expanded="true"]) > td:first-child { background: none; }
  .people-list__table tr.row-detail { display: block; margin-top: -.4rem; padding: 0; border: 0; border-radius: 0; background: none; }
  .people-list__table .row-detail__body { padding: .75rem .7rem .875rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
}
@media screen and (max-width: 479px) {
  .row-detail__body { padding: .875rem 1rem 1rem; }
}
@media print {
  .row-detail__body { break-inside: avoid; animation: 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%; }
  .tool-frame__loading .progress-rule::after { animation: none; left: 0; width: 100%; }
  .chat-skeleton i { animation: none; }
  .chat-turn.is-arriving { animation: none; }
  .row-detail__body { animation: none; }
  .composer__talk.is-listening::after, .composer__live-partial::after { animation: none; }
  .pill__dot { 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; }
}