/* @look 4 · "Airy Linear": light and airy, hairlines instead of boxes, big tight Poppins headings, one floating mock Scorecard card, lantern mark alone in white space. Built from Refero DESIGN data (Linear, Calendly, Firecrawl, Paste, ClickUp) in reference/refero-look4/. *
 * Based on Look 1 (look-c) tokens; lights-on band pinned to Look 1 values at the end of this file.
 * LOOK 4 TOKENS. Refero sources noted per value as [Linear], [Calendly], [Firecrawl], [Paste], [ClickUp].
 * Every color, font and spacing value for this look lives here. No colors or fonts appear anywhere else.
 * Brand values: Lamplit Brand Guide v1.1 (Oct 2026). Anything marked WORKING is NOT from the brand guide; it was
 * picked by the builder to pass WCAG AA and needs Justin/Carson's OK.
 */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---- Brand palette (brand guide p.7) ---- */
  --navy: #122A56;          /* Lamplit Navy, primary */
  --amber: #D4852B;         /* Flame Amber, accent only */
  --cream: #F8E7CC;         /* Lamplit Cream (fix round T155: one cream, #F8E7CC; was #F9E8CD) */
  --white: #FFFFFF;         /* White, working neutral */
  --gray: #5A6A84;          /* Supporting caption gray (functional, not a brand color) */
  --logo-field: #F8E7CC;    /* WORKING: the actual field color inside lamplit-picked-logo.svg (guide says #F9E8CD). Header matches the file. */

  /* ---- WORKING values, not from brand guide ---- */
  --navy-raised: #1C3769;   /* WORKING: dark-mode card surface */
  --navy-deep: #0E2248;     /* WORKING: dark-mode alternate panel */
  --cream-muted: #C8D0DF;   /* WORKING: dark-mode secondary text */
  --line-light: #E3E7EE;    /* WORKING: decorative hairlines on white */
  --line-cream: #EBD5B3;    /* WORKING: decorative hairlines on cream */
  --line-dark: #2E4A7E;     /* WORKING: decorative hairlines on navy */
  --field-line-light: #5A6A84; /* WORKING: input borders (3:1+ non-text contrast) */
  --field-line-dark: #8C9BB8;  /* WORKING: input borders on navy */
  --error-light: #A4321A;   /* WORKING: error text on white/cream */
  --error-dark: #FFB59E;    /* WORKING: error text on navy */
  --success-light: #2F6B3F; /* WORKING: success text on white/cream */
  --success-dark: #9FD8AE;  /* WORKING: success text on navy */
  --ph-tint-light: #FDF1E2; /* WORKING: placeholder chip fill (light) */
  --ph-tint-dark: #2A3F6E;  /* WORKING: placeholder chip fill (dark) */

  /* ---- Type (brand guide p.8: Poppins; fallbacks Montserrat, then system sans) ---- */
  --font-sans: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-h1: clamp(2.375rem, 1.4rem + 4vw, 4.5rem);    /* 38 -> 72px  [Linear display 64-72] */
  --fs-h1-sub: clamp(1.125rem, 1rem + .5vw, 1.375rem); /* 18 -> 22px [Linear body-lg 20] */
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);     /* 30 -> 48px  [Linear heading 48] */
  --fs-h3: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);  /* 18 -> 20px */
  --fs-body: 1.125rem;      /* 18px on phones (brief) */
  --fs-body-wide: 1.0625rem;/* 17px on wide screens (guide 16-18) */
  --fs-lead: 1.25rem;
  --fs-small: 0.9375rem;    /* 15px */
  --fs-caption: 0.8125rem;  /* 13px (min 12) */
  --fs-kicker: 0.8125rem;   /* 13px [Linear caption] */
  --fs-tagline: 1.125rem;
  --fs-promise: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-metric: 1.5rem;
  --fw-h1: 600; --fw-h2: 500; --fw-h3: 500;   /* [Linear: no 700, 510-590 band] */
  --lh-body: 1.6; --lh-head: 1.04;           /* [Linear lh 1.0 at display] */
  --track-head: -0.022em;   /* [Linear -0.022em at 48-72px] */
  --track-kicker: 0.08em;

  /* ---- Space & shape ---- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --gutter: 1.25rem;
  --wrap-max: 75rem;         /* 1200px [Linear/Calendly/Firecrawl pageMaxWidth] */
  --text-max: 42.5rem;      /* ~680px text column (brief) */
  --section-pad: clamp(4.5rem, 3rem + 5vw, 7.5rem);  /* ~96-120px [Linear sectionGap 96, Firecrawl 80-120] */
  --hero-pad-top: clamp(1.25rem, .25rem + 5vw, 6.5rem);
  --hero-pad-bottom: clamp(3.5rem, 2rem + 6vw, 8rem);
  --radius-card: 12px; --radius-btn: 999px; --radius-panel: 0; --radius-chip: 6px;  /* [Linear cards 12; Firecrawl pill buttons] */
  --line-w: 1px;
  --card-pad: 1.5rem;        /* 24px [Linear/Calendly/Firecrawl cardPadding] */
  --tap: 44px; --btn-h: 52px;
  --logo-w: 150px; --logo-w-phone: 132px;  /* >= 120px minimum */
  --header-h: 72px;
  --lantern-w: clamp(240px, 34vw, 380px);
  --pulse-speed: 2.4s; --flow-speed: 2.8s;

  /* ---- Near-black dark mode palette (Justin's dark spec, Oct 28). ALL WORKING values, not from the brand guide ---- */
  --black-page: #08090A;    /* WORKING: page (Justin's spec) */
  --black-panel: #121216;   /* WORKING: alternate section panels */
  --black-card: #1E1E24;    /* WORKING: cards and surfaces (Justin's spec ~#1E1E24) */
  --float-shadow: 0 1px 2px rgba(18,42,86,.04), 0 8px 24px rgba(18,42,86,.06);  /* WORKING: light navy-tinted shadow (was Calendly's 3-layer stack; lightened Oct 28 1:20pm) */
  --black-line: #2C2C34;    /* WORKING: subtle borders and grid lines (decorative) */
  --cream-warm: #F8E7CC;    /* fix round T155 (Edison 3:00am): Warm Cream #F8EACF merged into the one cream #F8E7CC */
  --gray-1: #B4B8BF;        /* WORKING: secondary text, 7.9:1+ on every dark surface */
  --gray-2: #9499A1;        /* WORKING: tertiary text, 5.5:1+ on every dark surface */
  --field-line-black: #767B84; /* WORKING: input borders and ghost-button border, 3.7:1+ (non-text) */
  --ph-tint-black: #2A2218; /* WORKING: placeholder chip fill */
  --trace-navy: #1D2B4F;    /* WORKING: dim navy circuit lines on black (decorative) */
  --error-black: #FF9B85;   /* WORKING */
  --success-black: #7FD49A; /* WORKING */

  /* ---- Effects. Off by default (light mode stays flat); the dark block switches them on ---- */
  --cta-glow: none; --node-glow: none; --lantern-rim: none;
  --glow-z: 2; --glow-blend: screen;  /* light mode: glow sits on top of the navy-field mark */
  --pin-glow: drop-shadow(0 0 14px var(--amber));
  --mark-radius: 0;

  /* ---- Lights-on illustration (original SVG lantern, traces, pin). WORKING values except navy/amber ---- */
  --lo-amber: var(--amber);
  --lo-flame-core: #FFE2AE;   /* WORKING: hottest part of the flame, nodes, embers */
  --lo-flame-mid: #F0A143;    /* WORKING: flame mid-tone */
  --lo-navy: var(--navy);     /* Lamplit Navy: lantern and pin body */
  --lo-navy-hi: #2C4D8E;      /* WORKING: navy lit by the flame (highlights) */
  --lo-navy-dark: #0C1B3B;    /* WORKING: navy in shadow */
  --lo-navy-deep: #081330;    /* WORKING: deepest navy (pin shade, vents) */
  --lo-node-core: #FFF6E6;    /* WORKING: white-hot node core */
  --lo-bokeh-opacity: .28;
  --lo-trace-opacity: .8; --lo-trace-opacity-side: .6; --lo-trace-opacity-far: .4;
  --lo-flow-scale: 1;         /* multiply every node-glide duration (motion hook) */
  /* motion timing hooks */
  --lo-flicker-speed: 1.4s; --lo-halo-speed: 4s; --lo-pulse-speed: 2.4s; --lo-flow-speed: 2.8s; --lo-ember-speed: 3.6s;

  /* ---- Showpiece: light <-> dark (ported from Look 2, Carson's pick Oct 28). All ms. CSS: src/styles/showpiece-look-4.css.
     The light-switch script reads --sp-total, --sp-swap-at, --sp-rev-dur and --sp-rev-swap-at. Remove --sp-total to
     turn the showpiece off (instant switch). Art only shows while the dim is >= ~.85 and is gone before the dim lifts. ---- */
  --sp-ease: cubic-bezier(.37, 0, .63, 1);       /* ease-in-out sine: gentle start and finish (was ease-out / ease-in) */
  --sp-ease-soft: cubic-bezier(.33, 0, .2, 1);   /* flame ignite: soft, small overshoot in the keyframes (1.05) */
  --sp-dim-max: .92;     /* peak darkness (Look 2: .97) */
  /* light -> dark, 1950 ms */
  --sp-dim-at: 0ms;      --sp-dim-dur: 600ms;   /* dim ramp (Look 2: 300 ms) */
  --sp-ignite-at: 480ms; --sp-ignite-dur: 420ms; --sp-flicker-speed: 900ms;
  --sp-traces-at: 580ms; --sp-traces-dur: 460ms; --sp-trace-stagger: 40ms;   /* last trace drawn 1200 ms */
  --sp-dots-at: 660ms;   --sp-dot-dur: 560ms;   --sp-dot-stagger: 40ms;      /* 8 dots, last lands 1500 ms */
  --sp-pin-at: 1000ms;   --sp-pin-dur: 300ms;
  --sp-swap-at: 1150ms;  /* data-mode flips to dark here, under the dim */
  --sp-art-out-at: 1300ms; --sp-art-out-dur: 250ms;   /* all art gone at 1550 ms */
  --sp-out-at: 1550ms;   --sp-out-dur: 400ms;  /* dim lifts right after the art: no hold near full dark */
  --sp-total: 1950ms;
  /* dark -> light, 1950 ms: same art played backwards (dots climb back into the flame, traces retract, flame goes out) */
  --sp-rev-dim-dur: 500ms;
  --sp-rev-in-at: 380ms;  --sp-rev-in-dur: 250ms;
  --sp-rev-dots-at: 520ms;     /* last dot back in the flame 1360 ms */
  --sp-rev-traces-at: 820ms;   /* traces retracted by 1440 ms */
  --sp-rev-glow-at: 900ms; --sp-rev-pin-at: 1150ms; --sp-rev-flame-at: 1100ms; --sp-rev-flame-dur: 380ms;  /* all art gone 1480 ms */
  --sp-rev-swap-at: 1500ms;    /* data-mode flips to light under the dim, after every glow is gone */
  --sp-rev-out-at: 1550ms; --sp-rev-out-dur: 400ms;
  --sp-rev-dur: 1950ms;
  /* showpiece sizes (phones): art band between the header and the call bar */
  --sp-box-gap: 12px; --sp-box-bottom: calc(var(--btn-h) + var(--space-2) * 2 + 12px + env(safe-area-inset-bottom));
  --sp-art-max: 640px; --sp-dot-scale: 1; --sp-trace-w: 2.4px;

  /* ---- Inner pages (Scorecard, Thanks, About) ---- */
  --page-hero-pad-top: var(--space-9); --page-hero-pad-bottom: var(--space-8);
  --page-circuit-opacity: .7;
  --accent-node-glow: 0 0 10px var(--amber);

  /* ---- Hero node-flow (dark mode only). Off by default; the dark block switches it on ---- */
  --hero-flow-display: none; --hero-static-traces-display: inline;
  --hero-flow-opacity-phone: .35;  /* subtle on phones: worst case (node core under text) keeps cream text >= 4.5:1 */
  --hf-trace: #262B4E;   /* WORKING: faint dark blue/purple traces */
  --hf-core: #FFF6E6;    /* WORKING: white/light-orange node core */
  --hf-mid: #FFC478;     /* WORKING */
  --hf-speed-scale: 1;   /* multiply every hero node duration (motion hook) */

  /* ---- Layout knobs (what makes this look different) ---- */
  --hero-cols: 1.35fr 1fr;        /* [Linear left headline / Calendly floating product card right] */
  --hero-text-align: left; --hero-justify: flex-start; --hero-measure-margin: 0;
  --h1-measure: 12ch;
  --journey-max: 24rem;
  --journey-mark-display: block;  /* small lantern mark (52px, min 32px) in the hero card */
  --panel-inset: 0;                /* no panels: hairlines instead of boxes [Linear] */
  --section-divider: var(--line-w) solid var(--c-line);  /* hairline between sections [Linear] */
  --mark-solo-display: grid; --mark-solo-w: 96px; --mark-solo-radius: 22px;  /* [Paste: the mark alone in white space] */
  --mark-radius: 10px;
}

/* Showpiece at tablet widths and up: no call bar, bigger art, dots 1.6x (QA: embers too small on iPad) */
@media (min-width: 768px) { :root { --sp-box-bottom: 4vh; --sp-art-max: 860px; --sp-dot-scale: 1.6; --sp-trace-w: 3px; } }

/* ---- LIGHT MODE (default) ---- */
:root, [data-mode="light"] {
  color-scheme: light;
  --c-page: var(--white);
  --c-text: var(--navy);
  --c-heading: var(--navy);
  --c-muted: var(--gray);
  --c-link: var(--navy);
  --c-line: var(--line-light);
  --c-header-bg: var(--white);         /* white header, transparent logo (Justin, Oct 28 1:20pm) */
  --c-header-line: var(--line-light);
  --c-hero-bg: var(--white);
  --c-hero-muted: var(--gray);
  --c-panel: transparent;
  --c-panel-line: var(--line-light);
  --c-card: transparent;
  --c-panel-card: transparent;
  --c-card-line: var(--line-light);
  --c-card-line-hover: var(--navy);
  --c-grid: var(--line-light);
  --c-trace: var(--line-light);
  --c-node: var(--amber);
  --c-btn-primary-bg: transparent; --c-btn-primary-fg: var(--navy); --c-btn-primary-line: var(--field-line-light);  /* Call = quiet hairline pill [Linear ghost] */
  --c-btn-cta-bg: var(--amber);    --c-btn-cta-fg: var(--navy);
  --c-btn-ghost-fg: var(--navy);   --c-btn-ghost-line: var(--navy);
  --c-kicker: var(--navy);
  --c-card-kicker: var(--navy);
  --c-focus: var(--navy);
  --c-error: var(--error-light);
  --c-success: var(--success-light);
  --c-field-bg: var(--white); --c-field-line: var(--field-line-light);
  --c-ph-bg: var(--ph-tint-light); --c-ph-fg: var(--navy); --c-ph-line: var(--amber);
  --c-journey-bg: var(--white); --c-journey-fg: var(--navy); --c-journey-muted: var(--gray); --c-journey-line: var(--line-light);
  --c-journey-pin: var(--navy); --c-journey-pin-hole: var(--cream);
  --c-badge-bg: var(--white); --c-badge-fg: var(--navy);
  --c-step-bg: transparent; --c-step-fg: var(--navy);
  --c-image-slot: var(--white);

  --hl-bg: linear-gradient(transparent 60%, color-mix(in srgb, var(--amber) 40%, transparent) 60%, color-mix(in srgb, var(--amber) 40%, transparent) 94%, transparent 94%);  /* [Firecrawl highlight word], amber */
  --hl-pad: 0 .04em;
  --cta-ring: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent);  /* [Firecrawl pill CTA glow ring] */
  --c-float-shadow: var(--float-shadow);
  --c-later: var(--gray);
}

/* ---- ALWAYS-DARK BANDS IN LIGHT MODE (lights-on band, footer): navy, unchanged for now.
   FLAG: light-mode lights-on band stays navy pending the dark-mode reference picture. ---- */
.always-dark {
  color-scheme: dark;
  --c-page: var(--navy);
  --c-text: var(--cream);
  --c-heading: var(--cream);
  --c-muted: var(--cream-muted);
  --c-link: var(--cream);
  --c-line: var(--line-dark);
  --c-header-bg: var(--navy);          /* matches the dark logo's navy field */
  --c-header-line: var(--line-dark);
  --c-hero-bg: var(--navy);
  --c-hero-muted: var(--cream-muted);
  --c-panel: var(--navy-deep);
  --c-panel-line: var(--line-dark);
  --c-card: var(--navy-raised);
  --c-panel-card: var(--navy-raised);
  --c-card-line: var(--line-dark);
  --c-card-line-hover: var(--cream);
  --c-grid: var(--line-dark);
  --c-trace: var(--line-dark);
  --c-node: var(--amber);
  --c-btn-primary-bg: var(--cream); --c-btn-primary-fg: var(--navy); --c-btn-primary-line: var(--cream);  /* WORKING: inverse primary on navy */
  --c-btn-cta-bg: var(--amber);     --c-btn-cta-fg: var(--navy);
  --c-btn-ghost-fg: var(--cream);   --c-btn-ghost-line: var(--cream);
  --c-kicker: var(--amber);            /* Amber label on Navy only */
  --c-card-kicker: var(--cream);       /* Amber fails AA on the raised card navy (3.99:1), so cream there */
  --c-focus: var(--amber);             /* WORKING */
  --c-error: var(--error-dark);
  --c-success: var(--success-dark);
  --c-field-bg: var(--navy); --c-field-line: var(--field-line-dark);
  --c-ph-bg: var(--ph-tint-dark); --c-ph-fg: var(--cream); --c-ph-line: var(--amber);
  --c-journey-bg: var(--navy); --c-journey-fg: var(--cream);  /* matches the dark mark's navy field */ --c-journey-muted: var(--cream-muted); --c-journey-line: var(--line-dark);
  --c-journey-pin: var(--cream); --c-journey-pin-hole: var(--navy);
  --c-badge-bg: var(--navy); --c-badge-fg: var(--cream);
  --c-step-bg: var(--cream); --c-step-fg: var(--navy);
  --c-image-slot: var(--navy-raised);

  --c-later: var(--cream-muted);
  /* lights-on band */
  --c-lights-bg: var(--black-page);    /* lights-on band is near-black in BOTH modes (Justin, Oct 28); footer stays navy */
  --c-lights-trace: var(--amber);
  --c-pin: var(--navy); --c-pin-line: var(--cream); --c-pin-hole: var(--cream); --c-pin-dot: var(--amber);
  --c-glow: var(--amber);
  --glow-min: .35; --glow-max: .85;     /* lights-on glow strength (full glow approved Oct 28; guide update pending) */
  --c-rule: var(--amber);
}

/* ---- DARK MODE: near-black (Linear-like feel, per Justin's references). The same logo system flipped: cream wordmark,
   navy lantern and pin glowing on black, amber flame, traces, nodes and main CTA. All WORKING values. ---- */
[data-mode="dark"], [data-mode="dark"] .always-dark {
  color-scheme: dark;
  --c-page: var(--black-page);
  --c-text: var(--cream-warm);
  --c-heading: var(--cream-warm);
  --c-muted: var(--gray-1);
  --c-link: var(--cream-warm);
  --c-line: var(--black-line);
  --c-header-bg: var(--black-page);
  --c-header-line: var(--black-line);
  --c-hero-bg: var(--black-page);
  --c-hero-muted: var(--gray-1);
  --c-panel: transparent;
  --c-panel-line: var(--black-line);
  --c-card: transparent;
  --c-panel-card: transparent;
  --c-card-line: var(--black-line);
  --c-card-line-hover: var(--gray-1);
  --c-grid: var(--black-line);
  --c-trace: var(--trace-navy);
  --c-node: var(--amber);
  --c-btn-cta-bg: var(--amber);  --c-btn-cta-fg: var(--black-page);   /* the one main CTA: amber, near-black text 6.8:1 */
  --c-btn-primary-bg: transparent; --c-btn-primary-fg: var(--cream-warm); --c-btn-primary-line: var(--field-line-black); /* Call = quiet ghost */
  --c-btn-ghost-fg: var(--cream-warm); --c-btn-ghost-line: var(--field-line-black);
  --c-kicker: var(--amber);           /* amber text on near-black: kept (Justin) */
  --c-card-kicker: var(--amber);
  --c-focus: var(--amber);
  --c-error: var(--error-black);
  --c-success: var(--success-black);
  --c-field-bg: var(--black-page); --c-field-line: var(--field-line-black);
  --c-ph-bg: var(--ph-tint-black); --c-ph-fg: var(--cream-warm); --c-ph-line: var(--amber);
  --c-journey-bg: var(--black-panel); --c-journey-fg: var(--cream-warm); --c-journey-muted: var(--gray-1); --c-journey-line: var(--black-line);
  --c-journey-pin: var(--cream-warm); --c-journey-pin-hole: var(--black-page);
  --c-badge-bg: var(--black-page); --c-badge-fg: var(--cream-warm);
  --c-step-bg: transparent; --c-step-fg: var(--cream-warm);
  --c-image-slot: var(--black-card);

  --hl-bg: linear-gradient(transparent 60%, color-mix(in srgb, var(--amber) 45%, transparent) 60%, color-mix(in srgb, var(--amber) 45%, transparent) 94%, transparent 94%);
  --cta-ring: 0 0 0 6px color-mix(in srgb, var(--amber) 20%, transparent), var(--cta-glow);
  --c-float-shadow: none;
  --c-later: var(--gray-2);
  /* glows (dark mode only) */
  --cta-glow: 0 0 28px color-mix(in srgb, var(--amber) 45%, transparent);
  --node-glow: drop-shadow(0 0 4px var(--amber));
  /* lights-on band: navy lantern + navy pin glowing on black */
  --c-lights-bg: var(--black-page);
  --c-lights-trace: var(--amber);
  --c-glow: var(--amber);
  --glow-min: .35; --glow-max: .85;
  --glow-z: 0; --glow-blend: normal;  /* glow sits BEHIND the transparent navy lantern */
  --lantern-rim: drop-shadow(0 0 1.5px var(--amber)) drop-shadow(0 0 16px color-mix(in srgb, var(--amber) 60%, transparent));
  --c-pin: var(--navy); --c-pin-line: var(--amber); --c-pin-hole: var(--cream-warm); --c-pin-dot: var(--amber);
  --pin-glow: drop-shadow(0 0 18px var(--amber));
  --c-rule: var(--amber);
  --hero-flow-display: block; --hero-static-traces-display: none;
}

/* ======================= LOOK 4 LAYOUT (scoped; only this look's file loads it) ======================= */
/* Dark-mode logo panel (brand guide round, Oct 28 2:08pm): same corner ratio as the 96px lantern tile (22px) at panel height */
html[data-look="look-4"] { --logo-panel-radius: 12px; }
/* Light mode: white header and white footer with hairlines, transparent light logo (Justin, Oct 28 1:20pm) */
html[data-look="look-4"] { --logo-light-plain: inline; --logo-light-boxed: none; }
html[data-look="look-4"]:not([data-mode="dark"]) .site-footer { color-scheme: light; --c-page: var(--white); --c-text: var(--navy); --c-heading: var(--navy);
  --c-muted: var(--gray); --c-link: var(--navy); --c-line: var(--line-light); --c-focus: var(--navy);
  --c-ph-bg: var(--ph-tint-light); --c-ph-fg: var(--navy); --c-ph-line: var(--amber); border-top: var(--line-w) solid var(--line-light); }
html[data-look="look-4"]:not([data-mode="dark"]) .site-footer .footer-rule { display: none; }
html[data-look="look-4"] .btn-cta:not(.lights-on .btn) { box-shadow: var(--cta-ring); }   /* lights-on band keeps Look 1 buttons (locked) */
html[data-look="look-4"] .btn:not(.lights-on .btn) { font-weight: var(--fw-medium); }
/* labels: small amber dot + caption [Firecrawl section label] */
html[data-look="look-4"] .kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 10px; vertical-align: middle; transform: translateY(-1px); }
/* hero: fine hairline grid fading out = our circuit traces [Firecrawl grid]; headline left, floating mock Scorecard right [Linear + Calendly + ClickUp] */
html[data-look="look-4"] .hero .circuit-bg, html[data-look="look-4"] .page-hero .circuit-bg { -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%); }
html[data-look="look-4"][data-mode="light"] .hero .circuit-bg .trace, html[data-look="look-4"][data-mode="light"] .hero .circuit-bg .node,
html[data-look="look-4"] .page-hero .circuit-bg .trace, html[data-look="look-4"] .page-hero .circuit-bg .node { display: none !important; }  /* grid only behind headlines (dark home hero keeps its node-flow) */
html[data-look="look-4"] .hero .h1-sub { color: var(--c-muted); font-weight: var(--fw-regular); letter-spacing: -0.01em; margin-top: var(--space-5); }
html[data-look="look-4"] .tagline { color: var(--c-heading); }
html[data-look="look-4"] .journey { box-shadow: var(--c-float-shadow); border-radius: 16px; }
html[data-look="look-4"] .journey-steps li { min-height: 52px; }
/* sections: no fills, no boxes; hairlines carry the structure [Linear elevation via hairlines] */
html[data-look="look-4"] .card { border-color: transparent; padding-inline: 0; }
html[data-look="look-4"] .section-head { margin-bottom: var(--space-7); }
html[data-look="look-4"] .lfb .card-grid, html[data-look="look-4"] .services .card-grid { gap: 0; }
html[data-look="look-4"] .lfb .card { border-top: var(--line-w) solid var(--c-line); border-radius: 0; padding: var(--space-6) 0 0; }
@media (min-width: 640px) { html[data-look="look-4"] .lfb .card-grid.three { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); } }
html[data-look="look-4"] .card-num { color: var(--c-muted); letter-spacing: .04em; }
html[data-look="look-4"] .services .card-grid.three { column-gap: var(--space-7); }
@media (min-width: 640px) { html[data-look="look-4"] .services .card-grid.three { grid-template-columns: repeat(2, 1fr); } }
html[data-look="look-4"] .services .card { border-top: var(--line-w) solid var(--c-line); border-radius: 0; padding: var(--space-5) var(--space-6) var(--space-5) 0; }
html[data-look="look-4"] .services .card-arrow { right: 0; bottom: auto; top: var(--space-5); }
html[data-look="look-4"] .card-link h3 a::after { border-radius: 0; }
html[data-look="look-4"] .card h3 { font-size: var(--fs-h3); }
html[data-look="look-4"] .image-slot { border-width: 1px; }
html[data-look="look-4"] .step-num { border: var(--line-w) solid var(--c-line); font-weight: var(--fw-medium); }
html[data-look="look-4"] .promise { text-align: center; }
html[data-look="look-4"] .promise .wrap.narrow { max-width: 50rem; }
html[data-look="look-4"] .promise-text { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.3; }
html[data-look="look-4"] .pilot { padding: var(--space-6) 0 0; border-top: var(--line-w) solid var(--c-line); border-radius: 0; }
/* final CTA: the lantern mark alone in lots of white space [Paste] */
html[data-look="look-4"] .final-cta { padding-block: calc(var(--section-pad) * 1.4); }
html[data-look="look-4"] .final-inner { justify-items: center; text-align: center; }
html[data-look="look-4"] .final-inner .mark-solo { margin-bottom: var(--space-6); }
html[data-look="look-4"] .final-inner .cta-row { justify-content: center; }
html[data-look="look-4"] .final-inner h2 { max-width: 18ch; }
/* inner pages */
html[data-look="look-4"] .page-hero { border-bottom: 0; }
html[data-look="look-4"] .page-hero h1 { max-width: 16ch; }
html[data-look="look-4"] .form-card { border-color: var(--c-line); background: var(--c-journey-bg); box-shadow: var(--c-float-shadow); border-radius: 16px; padding: var(--space-6); }
html[data-look="look-4"] .form-aside.card { border-left: var(--line-w) solid var(--c-line); border-radius: 0; padding-left: var(--space-6); }
html[data-look="look-4"] .accent-trace { display: none; }
html[data-look="look-4"] .thanks-mark { display: none; }
html[data-look="look-4"] .thanks-hero .mark-solo { margin-bottom: var(--space-6); }
html[data-look="look-4"] .thanks-next { border-top: var(--line-w) solid var(--c-line); border-radius: 0; }
html[data-look="look-4"] .quote-card { border-top: var(--line-w) solid var(--c-line); border-radius: 0; }
html[data-look="look-4"] .team .card, html[data-look="look-4"] .local-card, html[data-look="look-4"] .promise-card { border-top: var(--line-w) solid var(--c-line); border-radius: 0; }

/* ======================= LOCKED: lights-on band pinned to Look C values ======================= */
.lights-on { line-height: 1.55; --lh-body: 1.55; --section-pad: clamp(3.5rem, 2.5rem + 5vw, 7rem); --space-5: 1.5rem; --gutter: 1.25rem; --wrap-max: 72rem;
  --fs-h2: clamp(1.625rem, 1.45rem + .6vw, 2rem); --fw-h2: 600; --lh-head: 1.12; --track-head: -0.01em; --fs-body: 1.125rem; --fs-body-wide: 1.0625rem;
  --btn-h: 52px; --radius-btn: 14px; --radius-chip: 6px; --line-w: 1px; --fs-small: 0.9375rem; --fs-caption: 0.8125rem;
  --c-text: var(--cream); --c-heading: var(--cream); --c-line: var(--line-dark); --c-btn-cta-bg: var(--amber); --c-btn-cta-fg: var(--navy); --cta-glow: none;
  --c-ph-bg: var(--ph-tint-dark); --c-ph-fg: var(--cream); --c-ph-line: var(--amber); --c-focus: var(--amber); --c-lights-bg: var(--black-page); }
[data-mode="dark"] .lights-on { --c-text: var(--cream-warm); --c-heading: var(--cream-warm); --c-line: var(--black-line); --c-btn-cta-fg: var(--black-page);
  --cta-glow: 0 0 28px color-mix(in srgb, var(--amber) 45%, transparent); --c-ph-bg: var(--ph-tint-black); --c-ph-fg: var(--cream-warm); }

/* ======================= LOOK 4 HERO VISUALS (Oct 28). Appended to look-4 tokens for base Look 4 (HERO_CSS_LOOKS)
   and the dist/variants/look-4-hero-*/ mock-up builds. Flat, hairlines, light shadow at most, no tilt. ======================= */
.hv { margin: 0; width: 100%; max-width: 26rem; justify-self: center; color: var(--c-text); }
.hv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hv-title { font-weight: var(--fw-semibold); }
.hv-sample { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--c-muted); border: var(--line-w) solid var(--c-line); border-radius: 999px; padding: 2px 10px; }
/* A: Scorecard preview */
.hv-score { background: var(--c-journey-bg); border: var(--line-w) solid var(--c-line); border-radius: 16px; padding: var(--space-5) var(--space-5) var(--space-4); box-shadow: 0 1px 2px rgba(18,42,86,.04); }
.hv-score .hv-head { padding-bottom: var(--space-3); }
.hv-rows li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--line-w) solid var(--c-line); }
.hv-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; font-weight: var(--fw-semibold); }
.is-pass .hv-mark { background: var(--navy); color: var(--cream); }
.is-fix .hv-mark { border: 1.5px solid var(--amber); color: var(--c-heading); }
[data-mode="dark"] .is-pass .hv-mark { background: var(--cream-warm); color: var(--black-page); }
.hv-text { display: grid; line-height: 1.35; }
.hv-area { font-weight: var(--fw-semibold); }
.hv-label { color: var(--c-muted); font-size: 1rem; }
.hv-state { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-heading); }
.hv-foot { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: var(--line-w) solid var(--c-line); font-size: var(--fs-caption); color: var(--c-muted); }
/* B: Lit / Found / Booked rows */
.hv-steps { list-style: none; padding: 0; border-bottom: var(--line-w) solid var(--c-line); }
.hv-steps li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--space-3); padding: var(--space-5) 0; border-top: var(--line-w) solid var(--c-line); }
.hv-num { grid-row: span 2; font-size: var(--fs-caption); color: var(--c-muted); padding-top: .35rem; }
.hv-step-title { font-size: 1.5rem; font-weight: var(--fw-medium); letter-spacing: -0.02em; color: var(--c-heading); line-height: 1.2; }
.hv-step-text { color: var(--c-muted); }
.hv-steps li:first-child .hv-num::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 6px; vertical-align: middle; }
/* C: lantern only */
.hv-lantern { display: grid; justify-items: center; max-width: 22rem; }
.hv-lantern img { width: clamp(120px, 30vw, 200px); height: auto; }
.hv-mark-dark { display: none; } [data-mode="dark"] .hv-mark-light { display: none; } [data-mode="dark"] .hv-mark-dark { display: block; }
.hv-traces { width: 100%; max-width: 320px; height: auto; margin-top: -6px; }
.hv-traces path { fill: none; stroke: var(--c-heading); stroke-width: 1.5; opacity: .45; }
.hv-traces .hv-trace-far { opacity: .2; }
.hv-traces circle { fill: var(--amber); }
.hv-pin { margin-top: -8px; }
.hv-pin-svg { width: 34px; height: auto; }
.hv-pin .pin-body { fill: var(--c-heading); } .hv-pin .pin-hole { fill: var(--c-page); } .hv-pin .pin-dot { fill: var(--amber); }
/* D: listing before / after */
.hv-listings { max-width: 34rem; }
.hv-top { margin-bottom: var(--space-3); flex-wrap: wrap; }
.hv-ph-note { font-size: var(--fs-caption); color: var(--c-muted); }
.hv-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); }
.hv-arrow { color: var(--c-muted); }
.hv-listing { background: var(--c-journey-bg); border: var(--line-w) solid var(--c-line); border-radius: 14px; padding: var(--space-4); font-size: .875rem; }
.hv-listing .hv-head { margin-bottom: var(--space-2); }
.hv-chip { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.hv-name { margin: 0; font-weight: var(--fw-semibold); font-size: 1rem; color: var(--c-heading); }
.hv-cat { margin: 0 0 var(--space-3); color: var(--c-muted); font-size: var(--fs-caption); }
.hv-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: var(--space-3); }
.hv-photos span { aspect-ratio: 1; border-radius: 6px; border: 1px dashed var(--c-line); }
.is-after .hv-photos span { border: 0; background: linear-gradient(160deg, var(--cream) 0%, var(--line-cream) 100%); }
[data-mode="dark"] .is-after .hv-photos span { background: linear-gradient(160deg, var(--black-card) 0%, #2A2A33 100%); }
.hv-facts { margin: 0 0 var(--space-3); }
.hv-facts div { display: flex; justify-content: space-between; gap: var(--space-2); padding: 4px 0; border-top: var(--line-w) solid var(--c-line); }
.hv-facts dt { font-weight: var(--fw-medium); } .hv-facts dd { margin: 0; color: var(--c-muted); }
.is-after .hv-facts dd { color: var(--c-heading); font-weight: var(--fw-medium); }
.hv-stars { display: inline-flex; gap: 1px; } .hv-stars svg { fill: none; stroke: var(--amber); stroke-width: 1.6; }
.hv-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.hv-actions span { font-size: var(--fs-caption); border: var(--line-w) solid var(--c-line); border-radius: 999px; padding: 1px 8px; }
.is-before { background: var(--c-page); border-style: dashed; } /* dim = unfilled, not low-contrast text (AA) */
.is-before .hv-name, .is-before .hv-facts dt { color: var(--c-muted); }
.is-after { box-shadow: 0 1px 2px rgba(18,42,86,.04), 0 8px 24px rgba(18,42,86,.06); border-color: color-mix(in srgb, var(--amber) 55%, var(--c-line)); }
@media (max-width: 480px) { .hv-pair { grid-template-columns: 1fr 1fr; } .hv-arrow { display: none; } .hv-listing { padding: var(--space-3); } }

/* layout tweaks for the mock-ups */
@media (max-width: 899px) { html[data-variant] .hero-grid { gap: var(--space-6); } }
@media (min-width: 900px) { html[data-variant="look-4-hero-d"] { --hero-cols: 1.05fr 1fr; } html[data-variant="look-4-hero-c"] .hv-lantern img { width: 210px; } }
.hv-listing .hv-name { line-height: 1.25; margin-bottom: var(--space-3); }
/* dark hero keeps its circuit traces: give text-bearing visuals the page colour underneath so glows never sit behind text (AA) */
.hv-steps, .hv-listing, .hv-score { background-color: var(--c-page); position: relative; z-index: 1; }
.hv-listing.is-after, .hv-score { background-color: var(--c-journey-bg); }

/* ======================= AD1 / AD2: A + D combined (Justin, Oct 28 1:31pm) ======================= */
.hv-ad { display: grid; gap: var(--space-4); max-width: 30rem; }
.hv-ad .hv { max-width: none; }
.hv-mini .hv-top { margin-bottom: var(--space-2); }
/* Look 4 hero tabs (AD2, Justin Oct 28 1:35pm): role=tablist of two buttons, 44px taps, scorecard first.
   No JS: tablist hidden, both panels stacked. With JS (html.js): only the selected panel shows. */
.hv-tablist { display: none; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: var(--line-w) solid var(--c-line); border-radius: 999px; background: var(--c-page); position: relative; z-index: 1; }
html.js .hv-tablist { display: grid; }
.hv-tablist [role="tab"] { min-height: 44px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: var(--fw-medium); color: var(--c-muted); cursor: pointer; }
.hv-tablist [role="tab"][aria-selected="true"] { background: var(--navy); color: var(--cream); }
[data-mode="dark"] .hv-tablist [role="tab"][aria-selected="true"] { background: var(--cream-warm); color: var(--black-page); }
.hv-tablist [role="tab"]:focus-visible, .hv-tabs [role="tabpanel"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
html:not([data-mode="dark"]) .hv-tablist [role="tab"]:focus-visible { outline: 3px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--amber), 0 0 0 6px var(--navy); }  /* light: amber inner ring on the navy pill + navy outer ring on white (QA, Oct 28 2:13pm) */
.hv-tabs [role="tabpanel"] { border-radius: 16px; }
.hv-tabs [role="tabpanel"][hidden], html.js .hv-tabs:not([data-ready]) .hv-panel-later { display: none; }
.hv-in { animation: hv-in .2s ease-out; }
@keyframes hv-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hv-in { animation: none; } }
/* AD2 radio switcher retired: the ad2 variant now renders the same tabs as base Look 4. */

/* Tags, footnote and mini listing labels: 14px minimum (Justin, 1:35pm) */
.hv-sample, .hv-state, .hv-foot, .hv-chip, .hv-actions span, .hv-facts, .hv-listing { font-size: .875rem; }

/* Base Look 4 hero with tabs: same phone tightening as the AD variants */
@media (max-width: 899px) {
  html[data-look="look-4"] .hero:has(.hv-tabs) { --hero-pad-top: var(--space-3); }
  html[data-look="look-4"] .hero:has(.hv-tabs) .h1-sub { margin-top: var(--space-2); }
  html[data-look="look-4"] .hero:has(.hv-tabs) .tagline { margin-bottom: var(--space-4); }
  html[data-look="look-4"] .hero:has(.hv-tabs) .hero-grid { gap: var(--space-4); }
  html[data-look="look-4"]:not([data-mode="dark"]) .hero:has(.hv-tabs) .circuit-bg { opacity: .6; }  /* light grid only; dark hero motion untouched */
}
/* Phones only: H1 one step smaller (38px -> 34px) so the tabs + 2 Scorecard rows clear the sticky bar by 24px+ (Justin 1:47pm) */
@media (max-width: 639px) { html[data-look="look-4"] .hero:has(.hv-tabs) { --fs-h1: 2.125rem; } }
/* Phones (QA, Oct 28 2:13pm): the 69px call bar covered the bottom of the sample card on the first screen. A compact card:
   the "Sample" header + the first 2 sample rows, ending above the bar at 390x844. Rows 3-5 and the footnote show from 640px up. */
@media (max-width: 639px) {
  html[data-look="look-4"] .hero .hv-tabs #hv-panel-score .hv-rows li:nth-child(n+3),
  html[data-look="look-4"] .hero .hv-tabs #hv-panel-score .hv-foot { display: none; }
}
@media (min-width: 900px) { html[data-look="look-4"] .hero:has(.hv-tabs) .hero-grid { align-items: start; } html[data-look="look-4"] .hero:has(.hv-tabs) .hero-copy { padding-top: var(--space-7); } }

/* Phone: tighter hero so the proof starts on the first screen; compact rows (label only, area dropped) */
@media (max-width: 899px) {
  html[data-variant^="look-4-hero-ad"] { --hero-pad-top: var(--space-4); }
  html[data-variant^="look-4-hero-ad"] .hero .h1-sub { margin-top: var(--space-3); }
  html[data-variant^="look-4-hero-ad"] .tagline { margin-bottom: var(--space-4); }
  html[data-variant^="look-4-hero-ad"] .hero-grid { gap: var(--space-4); }
  html[data-variant^="look-4-hero-ad"] .hero .circuit-bg { opacity: .6; }  /* tighter spacing put a grid line under the sub-line; fainter grid keeps it AA */
  .hv-compact { padding: var(--space-3) var(--space-4) var(--space-2); }
  .hv-compact .hv-head { padding-bottom: var(--space-2); }
  .hv-compact .hv-rows li { padding: 10px 0; }
  .hv-compact .hv-area { display: none; }
  .hv-compact .hv-label { color: var(--c-heading); }
}
html[data-look="look-4"] .hero-visual, .hv-ad, .hv-ad > *, .hv-panel > * { min-width: 0; }
.hv-ad > .hv, .hv-panel > .hv { width: 100%; max-width: none; margin: 0; justify-self: stretch; }
@media (min-width: 900px) { html[data-variant^="look-4-hero-ad"] .hero-grid { align-items: start; } html[data-variant^="look-4-hero-ad"] .hero-copy { padding-top: var(--space-7); } }
.hv-tabs { gap: var(--space-3); }

/* ======================= LOOK 4 POLISH OPTIONS (Edison, Oct 28 3:25pm). IMAGE-ONLY builds: dist/variants/look-4-polish-* =======================
   Appended to look-4 tokens + heroes.css for the polish variants only (lib.mjs POLISH). html.pl is set on those builds; per-section options are
   html.pl-hero-a|b, .pl-how-a|b, .pl-svc-a|b, .pl-cta-a|b, .pl-ft-a|b. Values marked WORKING are not from the brand guide. */

/* ---------- 0. Polish tokens ---------- */
html.pl {
  --band: #FCF6EC;          /* WORKING: the ONE alternating band colour = 30% Lamplit Cream on white. Navy 13.6:1, gray #5A6A84 5.3:1 */
  --band-line: #F0E3CC;     /* WORKING: hairline on the band (decorative) */
  --line-strong: #C9D1DE;   /* WORKING: hairline on hover / active (decorative) */
  --navy-50: #F3F5F9;       /* WORKING: hover wash on white (navy 4%) */
  --navy-100: #E9EDF4;      /* WORKING: pass chip */
  --amber-50: #FCF1E3;      /* WORKING: fix chip, icon tile hover */
  --amber-hover: #DA9443;   /* WORKING: CTA hover (amber + 10% white); navy text 5.5:1 */
  --amber-press: var(--amber); /* CTA press returns to brand amber (navy text 4.8:1); a darker amber would drop navy text under 4.5:1 */
  --lift-1: 0 1px 2px rgba(18,42,86,.05);   /* WORKING: the only elevation left: 1px, barely there (hover/active only) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);  /* WORKING: quick start, soft landing */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-reveal: 520ms;
  --ic-n: var(--navy); --ic-a: var(--amber); --ic-w: var(--white);
  /* rhythm: one section spacing everywhere, one hairline */
  --section-pad: clamp(4rem, 2.6rem + 4.6vw, 7rem);
  /* type: SemiBold headings (guide), tighter labels */
  --fw-h2: 600; --fw-h3: 600; --track-kicker: .08em;  /* fix round T154: back to Look 4's 0.08em (was .14em) */
}
html.pl[data-mode="dark"] { --ic-n: var(--cream-warm); --ic-w: var(--black-page); --band: var(--black-panel); --band-line: var(--black-line); --navy-50: #15161B; }

/* ---------- 1. Icons ---------- */
.ic { width: 24px; height: 24px; flex: none; }
.ic .sN { stroke: var(--ic-n); } .ic .sA { stroke: var(--ic-a); } .ic .sW { stroke: var(--ic-w); }
.ic .fN { fill: var(--ic-n); } .ic .fA { fill: var(--ic-a); } .ic .fW { fill: var(--ic-w); }

/* ---------- 2. Brand fit (both options): no amber ring on white buttons, no card drop shadows, flat photo tiles, SemiBold buttons ---------- */
html.pl:not([data-mode="dark"]) { --cta-ring: none; }  /* fix round T153: light-mode cards keep their soft shadow (--c-float-shadow) */
/* fix round T154: the SemiBold button override is gone, buttons are Look 4 medium again (look-4.tokens.css) */
html.pl .hv-score, html.pl .is-after, html.pl .journey, html.pl .form-card { box-shadow: none; }
html.pl .is-after .hv-photos span { background: var(--cream); }
html.pl[data-mode="dark"] .is-after .hv-photos span { background: var(--black-card); }

/* ---------- 3. Type scale + labels ---------- */
html.pl .kicker { font-weight: var(--fw-semibold); }
html.pl .card-num, html.pl .pf-num, html.pl .step-num, html.pl .hv-state { font-variant-numeric: tabular-nums; }
html.pl h2 { text-wrap: balance; }
/* A (subtle): display capped at 64px, -0.02em; H2 30 -> 40px */
html.pl-hero-a { --fs-h1: clamp(2.375rem, 1.5rem + 3.6vw, 4rem); --track-head: -0.02em; --lh-head: 1.06; --fs-h2: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem); }
html.pl-hero-a .hero .h1-sub { letter-spacing: -0.005em; }
/* B (bolder): display to 76px, -0.03em at display; H2 32 -> 52px */
html.pl-hero-b { --fs-h1: clamp(2.5rem, 1.1rem + 5.4vw, 4.75rem); --track-head: -0.026em; --lh-head: 1.02; --fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
html.pl-hero-b .hero h1 { letter-spacing: -0.032em; }
html.pl-hero-b .hero .h1-sub { color: var(--c-heading); font-weight: var(--fw-regular); opacity: 1; }
html.pl-hero-b .hero .h1-sub { color: var(--gray); }
/* hero kicker chip (B) */
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: var(--line-w) solid var(--c-line); border-radius: 999px; background: var(--c-page); }
html[data-look="look-4"] .pl-chip::before { display: none; }
.pl-chip .chip-ic { width: 18px; height: 18px; }
/* hero tagline: tighter, number-like */
html.pl .tagline { letter-spacing: -0.01em; }
html.pl-hero-b .tagline { font-size: 1.1875rem; }
/* phone: keep the first-screen fit (tabs + 2 sample rows above the call bar) */
@media (max-width: 639px) {
  html.pl[data-look="look-4"] .hero:has(.hv-tabs) { --fs-h1: 2.125rem; --lh-head: 1.04; }
  html.pl-hero-b .tagline { font-size: var(--fs-tagline); }
  html.pl-hero-b .pl-chip { padding-block: 2px; }
  html.pl-hero-b .hero-kicker.pl-chip { margin-bottom: 6px; }
  html.pl-hero-b .hv-seg { margin: 0; }  /* phones: the segment bar IS the divider above the first row */
  html.pl-hero-b .hero .hv-compact .hv-head { padding-bottom: 8px; }
  html.pl-hero-b .hero .hv-compact .hv-rows li:first-child { border-top: 0; }
}

/* ---------- 4. Sharper sample Scorecard + listing ---------- */
html.pl .hv-score { border-color: var(--c-line); }
html.pl .hv-title { letter-spacing: -0.01em; }
html.pl .hv-mark { width: 22px; height: 22px; border: 0 !important; background: none !important; }
html.pl .hv-mark .ic { width: 22px; height: 22px; }
html.pl .hv-rows li { grid-template-columns: 22px 1fr auto; }
html.pl .hv-area { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); font-weight: var(--fw-semibold); }
html.pl .hv-label { color: var(--c-heading); font-weight: var(--fw-medium); }
html.pl .hv-state { font-size: .75rem; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; min-width: 3.4rem; text-align: center; }
html.pl .is-pass .hv-state { background: var(--navy-100); color: var(--navy); }
html.pl .is-fix .hv-state { background: var(--amber-50); color: var(--navy); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent); }
html.pl[data-mode="dark"] .is-pass .hv-state { background: var(--black-card); color: var(--cream-warm); }
html.pl[data-mode="dark"] .is-fix .hv-state { background: var(--ph-tint-black); color: var(--cream-warm); }
/* B: thin segment bar under the card header (one segment per sample row: navy = pass, amber = fix). No numbers. */
.hv-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 2px 0 var(--space-3); }
.hv-seg span { height: 4px; border-radius: 2px; background: var(--navy); }
.hv-seg .is-fix { background: var(--amber); }
html.pl[data-mode="dark"] .hv-seg span { background: var(--cream-warm); } html.pl[data-mode="dark"] .hv-seg .is-fix { background: var(--amber); }
/* listing: flat tiles, hairlines, crisp chips */
html.pl .hv-listing { border-radius: 12px; }
html.pl .is-after { border-color: color-mix(in srgb, var(--amber) 60%, var(--c-line)); }
html.pl .hv-chip { display: inline-flex; align-items: center; gap: 6px; }
html.pl .is-after .hv-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
html.pl .hv-actions span { border-color: var(--c-line); }
html.pl .is-after .hv-actions span:first-child { background: var(--navy); color: var(--cream); border-color: var(--navy); }
html.pl[data-mode="dark"] .is-after .hv-actions span:first-child { background: var(--cream-warm); color: var(--black-page); border-color: var(--cream-warm); }
/* B hero: the sample card sits on a cream-tint stage on tablets and up (Stripe-style product stage, flat, hairline) */
@media (min-width: 640px) {
  html.pl-hero-b .hero-visual .hv-tabs { background: var(--band); border: var(--line-w) solid var(--band-line); border-radius: 22px; padding: var(--space-4); }
}

/* ---------- 5. Micro-interactions (all Reduce Motion safe: see the media query at the end) ---------- */
/* State classes (.is-hover / .is-press / .is-focus) mirror the real states for the interactions sheet. */
html.pl .btn { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
html.pl .btn:hover, html.pl .btn.is-hover { text-decoration: none; }
html.pl:not([data-mode="dark"]) .btn-cta:not(.lights-on .btn):hover, html.pl:not([data-mode="dark"]) .btn-cta.is-hover { background: var(--amber-hover); }
html.pl:not([data-mode="dark"]) .btn-cta:not(.lights-on .btn):active, html.pl:not([data-mode="dark"]) .btn-cta.is-press { background: var(--amber-press); }
html.pl:not([data-mode="dark"]) :is(.btn-primary, .btn-ghost, .btn-menu):not(.always-dark .btn):hover,
html.pl:not([data-mode="dark"]) :is(.btn-primary, .btn-ghost, .btn-menu).is-hover { background: var(--navy-50); border-color: var(--navy); }
html.pl .btn:active, html.pl .btn.is-press { transform: translateY(1px) scale(.985); }
.btn-ic { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.btn-cta .btn-ic { --ic-n: currentColor; }
html.pl .btn:hover .btn-ic, html.pl .btn.is-hover .btn-ic { transform: translateX(3px); }
/* focus: one crisp 2px navy ring, 3px off, following the pill (amber + navy double ring stays on the navy tab pill) */
html.pl :focus-visible, html.pl .is-focus { outline: 2px solid var(--c-focus); outline-offset: 3px; }
html.pl .btn:focus-visible, html.pl .btn.is-focus { outline-offset: 3px; }
/* tabs: the navy pill slides between Scorecard and Listing; the panel fades up 6px */
html.pl .hv-tablist { position: relative; isolation: isolate; }
html.pl .hv-tablist::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 999px; background: var(--navy);
  transition: transform var(--dur-3) var(--ease-out); }
html.pl[data-mode="dark"] .hv-tablist::before { background: var(--cream-warm); }
html.pl .hv-tablist:has([role="tab"]:last-child[aria-selected="true"])::before, html.pl .hv-tablist.is-mid::before { transform: translateX(calc(100% + 4px)); }
html.pl .hv-tablist.is-mid::before { transform: translateX(calc(50% + 2px)); }
html.pl .hv-tablist [role="tab"] { position: relative; z-index: 1; transition: color var(--dur-2) var(--ease-out); }
html.pl .hv-tablist [role="tab"][aria-selected="true"] { background: transparent; }
html.pl .hv-tablist [role="tab"]:not([aria-selected="true"]):hover, html.pl .hv-tablist [role="tab"].is-hover { color: var(--c-heading); }
html.pl .hv-in { animation: pl-panel-in var(--dur-3) var(--ease-out); }
@keyframes pl-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* links: underline draws in */
html.pl .more-link a, html.pl .ft-col a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
html.pl .more-link a:hover, html.pl .ft-col a:hover, html.pl .more-link a.is-hover { background-size: 100% 1px; }
html.pl .more-link a { text-decoration: underline; text-decoration-color: var(--line-strong); }
html.pl .more-link a:hover { text-decoration-color: currentColor; }
/* scroll reveal: only once JS sets html.pl-motion (never under Reduce Motion) */
html.pl-motion .pl-rv { transform: translateY(14px); transition: transform var(--dur-reveal) var(--ease-out); }  /* batch #2: transform only, never hidden: full-page screenshots (iPad Safari) showed unrevealed sections as empty blocks */
html.pl-motion .pl-rv.is-in { opacity: 1; transform: none; }

/* ---------- 6. Section rhythm: one spacing, hairlines, ONE band colour (used by the b options) ---------- */
html.pl .section-head { margin-bottom: var(--space-7); }
html.pl .section-head h2 { margin-bottom: 0; }
html.pl .section-head .kicker + h2 { margin-top: 0; }
.pl-band { background: var(--band); }
html.pl .section.pl-band, html.pl .section.pl-band + .section { border-top-color: var(--band-line); }

/* ---------- 7. How it works / proof ---------- */
html.pl .pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); max-width: none; }
html.pl .pf-head > div { max-width: var(--text-max); }
.pf-approve { margin: var(--space-3) 0 0; }
.pf-steps { display: grid; gap: 0; counter-reset: none; }
.pf-step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); align-items: start; padding: var(--space-5) 0; border-top: var(--line-w) solid var(--c-line); }
.pf-step:last-child { border-bottom: var(--line-w) solid var(--c-line); }
.pf-ic { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: var(--line-w) solid var(--c-line); background: var(--c-page); }
.pf-num { font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: .12em; color: var(--c-muted); }
.pf-step h3 { margin: 2px 0 var(--space-2); font-size: 1.375rem; letter-spacing: -0.015em; }
.pf-step p { margin: 0; color: var(--c-muted); }
@media (min-width: 900px) {
  .pf-steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); }
  .pf-step { grid-template-columns: 1fr; padding: var(--space-6) 0 0; border-bottom: 0 !important; }
  .pf-ic { grid-row: auto; margin-bottom: var(--space-4); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .pf-steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-5); }
  .pf-step { grid-template-columns: 1fr; padding: var(--space-5) 0 0; border-bottom: 0 !important; }
  .pf-ic { grid-row: auto; margin-bottom: var(--space-4); }
}
/* Middle Tennessee badge */
.mt-badge { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; padding: 10px 18px 10px 12px; border: var(--line-w) solid var(--c-line); border-radius: 999px; background: var(--c-page); line-height: 1.25; }
.mt-ic { width: 30px; height: 30px; }
.mt-text { display: grid; }
.mt-title { font-weight: var(--fw-semibold); color: var(--c-heading); letter-spacing: -0.01em; }
.mt-sub { font-size: .875rem; color: var(--c-muted); }
/* B: steps become flat white tiles on the band, joined by a hairline with amber nodes; badge + quote slot below */
.pf-b .pf-step { background: var(--c-page); border: var(--line-w) solid var(--band-line); border-radius: 16px; padding: var(--space-5); margin-bottom: var(--space-3); }
.pf-b .pf-step:last-child { border-bottom: var(--line-w) solid var(--band-line) !important; }
.pf-b .pf-ic { background: var(--band); border-color: var(--band-line); }
@media (min-width: 640px) {
  .pf-b .pf-steps { column-gap: var(--space-6); }
  .pf-b .pf-step { padding: var(--space-6) var(--space-5) var(--space-5); margin: 0; }
  /* connector: a hairline across the gap between tiles at icon height, amber node in the middle */
  .pf-b .pf-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--space-6) + 22px); left: 100%; width: var(--space-6); border-top: var(--line-w) solid color-mix(in srgb, var(--amber) 55%, var(--band-line)); }
  .pf-b .pf-step:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: calc(var(--space-6) + 19px); left: calc(100% + var(--space-6) / 2 - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
}
.pf-proof { display: grid; gap: var(--space-4); margin-top: var(--space-6); align-items: stretch; }
@media (min-width: 640px) { .pf-proof { grid-template-columns: auto 1fr; } }
.mt-card { border-radius: 16px; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); border-color: var(--band-line); }
.mt-card .mt-ic { width: 40px; height: 40px; }
.pf-quote { margin: 0; display: grid; align-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1.5px dashed color-mix(in srgb, var(--amber) 70%, var(--band-line)); border-radius: 16px; background: var(--c-page); }
.pf-quote blockquote { margin: 0; } .pf-quote p { margin: 0; font-size: 1.125rem; }
.pf-quote figcaption { font-size: .875rem; color: var(--c-muted); }

/* the existing process steps (Free Scorecard -> Talk -> Fixes) pick up the same numerals */
html.pl .how .step-num { width: 40px; height: 40px; border-radius: 12px; font-size: .9375rem; }

/* ---------- 8. Services ---------- */
.svc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; margin-bottom: var(--space-3); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
html.pl .services .card-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
html.pl .services .card-arrow .ic { width: 18px; height: 18px; }
html.pl .services .card-link:hover .card-arrow, html.pl .services .card-link.is-hover .card-arrow { transform: translateX(4px); }
html.pl .services .card-link:hover h3 a, html.pl .services .card-link.is-hover h3 a { text-decoration: none; }
html.pl .services .card h3 { letter-spacing: -0.01em; margin-bottom: var(--space-1); }
/* A: hairline rows, icon left, no boxes (Linear) */
.svc-a .card { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-4); align-items: start; align-content: start; padding: var(--space-5) 44px var(--space-5) 0 !important; transition: border-color var(--dur-2) var(--ease-out); }
.svc-a .svc-ic { grid-row: span 2; margin: 0; border: var(--line-w) solid var(--c-line); }
.svc-a .card h3, .svc-a .card p { grid-column: 2; }
.svc-a .card p { padding-right: 0; }
html.pl .svc-a .card-arrow { top: var(--space-5) !important; }
.svc-a .card-link:hover, .svc-a .card-link.is-hover { border-top-color: var(--navy); }
.svc-a .card-link:hover .svc-ic, .svc-a .card-link.is-hover .svc-ic { background: var(--amber-50); border-color: color-mix(in srgb, var(--amber) 45%, var(--c-line)); }
/* B: white tiles on the band, 2-up from tablets; hover = hairline darkens + 1px lift */
html.pl .svc-b .section-head h2.visually-hidden { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.svc-b .card-grid.three { gap: var(--space-3) !important; }
@media (min-width: 640px) { .svc-b .card-grid.three { gap: var(--space-4) !important; } }
.svc-b .card { background: var(--c-page) !important; border: var(--line-w) solid var(--band-line) !important; border-radius: 16px !important; padding: var(--space-5) var(--space-5) var(--space-5) !important;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.svc-b .svc-ic { background: var(--band); border: var(--line-w) solid var(--band-line); }
html.pl .svc-b .card-arrow { top: var(--space-5) !important; right: var(--space-4) !important; background: var(--band); }
.svc-b .card-link:hover, .svc-b .card-link.is-hover { border-color: var(--line-strong) !important; box-shadow: var(--lift-1); transform: translateY(-1px); }
.svc-b .card-link:hover .card-arrow, .svc-b .card-link.is-hover .card-arrow { background: var(--amber-50); }
.svc-b .more-link { margin-top: var(--space-6); }
@media (max-width: 639px) { .svc-b .card { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-4); padding-right: 56px !important; } .svc-b .svc-ic { grid-row: span 2; margin: 0; } .svc-b .card h3, .svc-b .card p { grid-column: 2; } .svc-b .card p { padding-right: 0; } }

/* ---------- 9. Closing CTA ---------- */
html.pl .pc { position: relative; overflow: hidden; }
html.pl .pc h2 { font-size: var(--fs-h2); max-width: 16ch; margin: 0; }
@media (min-width: 640px) { html.pl .pc h2 { max-width: 22ch; } }
html.pl .pc .final-inner { gap: var(--space-5); position: relative; }
/* A: hairline grid fading out behind the mark (bookends the hero), lantern on white, no glow */
.pc-a::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px); background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 35%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 35%, #000 0%, transparent 75%); opacity: .7; }
html.pl .pc-a { padding-block: calc(var(--section-pad) * 1.25); }
/* B: navy band (always-dark tokens), the OFFICIAL dark mark on its own navy field, soft amber glow behind it (glow on dark only) */
html.pl .pc-b { background: var(--navy); color: var(--cream); padding-block: calc(var(--section-pad) * 1.2); border-top: 0 !important; }
.pc-b::before { content: ""; position: absolute; left: 50%; top: calc(var(--section-pad) * 1.2 - 40px); width: 360px; height: 260px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 34%, transparent), transparent); }
.pc-b .mark-solo { display: grid; }
.pc-b .pc-mark-navy { width: 112px; height: auto; border-radius: 24px; }
.pc-b h2 { color: var(--cream); }
.pc-b .btn-cta { --cta-ring: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent), 0 0 28px color-mix(in srgb, var(--amber) 40%, transparent); box-shadow: var(--cta-ring) !important; color: var(--navy); }
.pc-b .btn-cta:hover, .pc-b .btn-cta.is-hover { background: var(--amber-hover); }
.pc-b .btn-primary { background: transparent; color: var(--cream); border-color: color-mix(in srgb, var(--cream) 55%, transparent); }
.pc-b .btn-primary:hover { background: rgba(248,231,204,.08); border-color: var(--cream); }
.pc-region { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: .9375rem; color: var(--cream-muted); }
.pc-b .pc-pin { --ic-n: var(--cream); --ic-w: var(--navy); width: 18px; height: 18px; }
.pc-b :focus-visible { outline-color: var(--amber); }
html.pl[data-mode="dark"] .pc-b { background: var(--black-panel); }
html.pl[data-mode="dark"] .pc-b .pc-pin { --ic-w: var(--black-panel); }

/* ---------- 10. Footer ---------- */
.pf-ft .ft-grid { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-6); }
@media (min-width: 768px) { .pf-ft .ft-grid { grid-template-columns: 1.6fr 1fr 1.3fr; gap: var(--space-7); } }
.ft-brand { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.ft-area { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--c-muted); max-width: 30ch; }
.ft-pin { width: 18px; height: 18px; margin-top: 3px; }
.ft-h { font-size: .75rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .14em; color: var(--c-heading); margin: 0 0 var(--space-2); }
.ft-col ul { display: grid; }
.ft-col li { display: flex; align-items: center; min-height: var(--tap); flex-wrap: wrap; gap: 0 var(--space-2); }
.ft-col a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--c-text); }
.ft-legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); border-top: var(--line-w) solid var(--c-line); padding: var(--space-3) 0 var(--space-5); color: var(--c-muted); font-size: .875rem; }
.ft-legal li { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); flex-wrap: wrap; }
.ft-legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text) !important; }
@media (max-width: 767px) { .ft-col li, .ft-legal li, .ft-area { font-size: 1rem; } .pf-ft .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } .ft-contact { grid-column: auto; } }
@media (max-width: 767px) { .pf-ft .ft-grid { grid-template-columns: 1fr; } .pf-ft nav.ft-col ul { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }
/* B: the band colour, badge + main button in the brand column */
html.pl:not([data-mode="dark"]) .ft-b { background: var(--band); border-top: var(--line-w) solid var(--band-line); --c-line: var(--band-line); }
.ft-b .mt-badge { background: var(--white); border-color: var(--band-line); }
html.pl[data-mode="dark"] .ft-b .mt-badge { background: var(--black-card); }
.ft-b .footer-logo img { width: 168px; }

/* ---------- 11. Reduce Motion: no transitions, no transforms, no reveal; every state is still shown by colour/border ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pl *, html.pl *::before { transition: none !important; }
  html.pl .hv-in { animation: none; }
  html.pl .btn:active, html.pl .btn.is-press, html.pl .btn:hover .btn-ic, html.pl .services .card-link:hover .card-arrow, .svc-b .card-link:hover { transform: none; }
}

/* ---------- 12. Rhythm (recommended build only, html.pl-rhythm-band): the same ONE band colour alternates down the page:
   proof (band) / checks / lights-on (dark, locked) / story / services / How it works steps (band) / promise / offers / FAQ (band) / closing CTA (navy) ---------- */
html.pl-rhythm-band .how, html.pl-rhythm-band .faq-section { background: var(--band); border-top-color: var(--band-line); }
html.pl-rhythm-band .how + .section, html.pl-rhythm-band .faq-section + .section { border-top-color: var(--band-line); }
html.pl-rhythm-band .how .step-num { background: var(--c-page); }

/* ---------- 13. Live Scorecard form (polish builds only; markup in scorecard.mjs, config in content/site.json "leads") ---------- */
/* Honeypot: off-screen (not display:none, so naive bots still fill it); aria-hidden + tabindex -1 keep people and AT away */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile widget: no reserved space, so a blocked or failed script leaves no gap */
.turnstile-slot { max-width: 100%; }
.turnstile-slot:not(:empty) { margin: 0 0 var(--space-4); }
/* Send result, under the button (aria-live). "!" prefix so the state never relies on colour alone */
.form-status { color: var(--c-error); font-weight: var(--fw-semibold); font-size: var(--fs-small); margin: 0; }
.form-status:not(:empty) { margin-top: var(--space-3); }
.form-status:not(:empty)::before { content: "! "; }
html.pl .btn[aria-busy="true"] { cursor: progress; }
/* Fix round (Oct 29). Field errors also show from aria-invalid (set by the LEADS script on a failed check or the server's
   bad-email answer), not only from :user-invalid. */
html.pl .field input[aria-invalid="true"] { border-color: var(--c-error); }
html.pl .field:has(input[aria-invalid="true"]) .field-error { display: block; }
/* N7: focused fields (and error focus) stop below the sticky header: header 72px + 1px line + a 16px gap. Form page only, so
   Home's section links (scroll-margin-top) are unchanged. That page has no bottom bar (bar: false), so no scroll-padding-bottom. */
html.pl:has(form[data-leads]) { scroll-padding-top: calc(var(--header-h) + var(--line-w) + var(--space-4)); }
html.pl .form-status:focus { outline: none; }
html.pl .form-status:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/* No-JS line (inside the form, <noscript>): page text colours, an amber rule on the left (Look 4's accent edge, like the
   form aside's rule); links are 44px tap targets */
.form-noscript { margin: 0 0 var(--space-5); padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 3px solid var(--c-node);
  color: var(--c-text); font-weight: var(--fw-medium); }
.form-noscript a, html.pl .form-aside .backup a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-link); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 3px; vertical-align: middle; }

/* ======================= LOOK 4 BATCH BUILD (Oct 28, 2026, ~9:30pm CT). Appended after polish.css for the polish builds only
   (shipping build: look-4-polish-rec). Colours, fonts and sizes come ONLY from tokens (look-4.tokens.css + the polish tokens in
   polish.css); this file adds layout. Item numbers (#n) = batch-build-oct28-comments.md, see README "Batch build". ======================= */

/* ---------- B1. Dark-mode logo directly on black, no navy tile (comment #21, Decided #19). Light mode unchanged. ---------- */
html.pl .logo-for-dark, html.pl .footer-logo .logo-for-dark { box-sizing: border-box; width: var(--lw); height: auto; padding: 0; background: none; border-radius: 0; object-fit: contain; }
html.pl[data-mode="dark"] .logo:has(.logo-for-dark) { padding-block: var(--space-2); }
/* Dark-mode contrast fix found in this round: the hero sub-line used caption gray #5A6A84 in BOTH modes (3.5:1 on #08090A).
   Dark mode now uses the dark secondary text token (gray-1, 9:1+). Light mode unchanged (#5A6A84 on white 5.3:1). */
html.pl-hero-b[data-mode="dark"] .hero .h1-sub { color: var(--c-muted); }

/* ---------- B2. Shared helpers ---------- */
html.pl .bx-band { background: var(--band); }
html.pl .bx-h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
html.pl .bx-h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
html.pl .bx-lead { font-size: var(--fs-lead); color: var(--c-heading); line-height: 1.45; }
html.pl .bx-muted, html.pl .bx-note { color: var(--c-muted); }
html.pl .wrap.bx-narrow > * { max-width: 46rem; }
html.pl .bx-two { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { html.pl .bx-two { grid-template-columns: 1.25fr 1fr; gap: var(--space-8); align-items: start; } }
html.pl .bx-two.bx-top { align-items: start; }
/* placeholder slot: a dashed box around a [BRACKET] so open copy reads as a deliberate gap */
html.pl .bx-slot { margin: 0 0 var(--space-4); padding: var(--space-4); border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--c-page); }
html.pl[data-mode="dark"] .bx-slot { border-color: var(--black-line); background: var(--black-card); }
html.pl .bx-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: .8125rem; font-weight: var(--fw-semibold); background: var(--navy-100); color: var(--navy); }
html.pl .bx-tag.is-free, html.pl .intake-free { background: var(--amber); color: var(--navy); }
html.pl[data-mode="dark"] .bx-tag { background: var(--black-line); color: var(--cream-warm); }
html.pl[data-mode="dark"] .bx-tag.is-free, html.pl[data-mode="dark"] .intake-free { background: var(--amber); color: var(--black-page); }

/* ---------- B3. Link underline fix (#8): one underline, one line. The polish hover gradient sat 10px above the text
   decoration, so wrapped links (inline-flex) showed a second line through the text. Now: text-decoration only. ---------- */
html.pl .more-link a { display: inline; background: none; padding: 10px 0; line-height: 1.6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
html.pl .more-link a:hover { text-decoration-color: currentColor; }
html.pl .more-link { min-height: var(--tap); display: flex; align-items: center; }
html.pl .more-ic, html.pl .book-ic { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; transition: transform var(--dur-2) var(--ease-out); }
html.pl .more-link a:hover .more-ic, html.pl .book-link:hover .book-ic { transform: translateX(3px); }

/* ---------- B4. Book a consultation link (#18) ---------- */
html.pl .book-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semibold); color: var(--c-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
html.pl .book-link:hover { text-decoration-color: currentColor; }
html.pl .hero-book { margin: var(--space-2) 0 0; }
html.pl .menu-book { margin: var(--space-2) 0 0; text-align: center; }
html.pl .pc-book { margin: var(--space-3) 0 0; }
html.pl .pc-b .book-link { color: var(--cream); text-decoration-color: color-mix(in srgb, var(--cream) 50%, transparent); }
html.pl .pc-b .book-ic .sN, html.pl .pc-b .more-ic .sN { stroke: var(--cream); }
html.pl .pc-partner { margin: calc(-1 * var(--space-2)) auto var(--space-5); max-width: 32ch; font-size: var(--fs-lead); color: var(--cream-muted); }

/* ---------- B5. Hero Scorecard: all 5 rows on phones (#1-#3) + the swap ---------- */
@media (max-width: 639px) {
  html.pl[data-look="look-4"] .hero .hv-tabs #hv-panel-score .hv-all .hv-rows li:nth-child(n+3) { display: grid; }
  html.pl-hero-b .hero .hv-compact .hv-rows li { padding: 9px 0; }
}
html.pl .hv-rows[data-swap] { display: flex; flex-direction: column; margin-top: -1px; clip-path: inset(1px 0 0 0); }
html.pl .hv-rows[data-swap] li { border-top: var(--line-w) solid var(--c-line) !important; background: inherit; will-change: transform; }

/* ---------- B6. Hero Profile tab (#4, #5, #9, #27): native before/after Google Business Profile ---------- */
html.pl .hv-gbp { padding: var(--space-4); border-radius: 16px; background: var(--c-journey-bg); }
html.pl .hv-gbp .hv-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-3); }
html.pl .gbp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
html.pl .gbp-pair[hidden] { display: none; }
html.pl .gbp-card { min-width: 0; padding: var(--space-3); border-radius: 12px; border: var(--line-w) solid var(--c-line); background: var(--c-page); font-size: .8125rem; line-height: 1.35; color: var(--c-text); }
html.pl .gbp-card.is-after { border-color: color-mix(in srgb, var(--amber) 55%, var(--c-line)); }
html.pl .gbp-card p { margin: 0; }
html.pl .gbp-tag { font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--space-2) !important; }
html.pl .is-after .gbp-tag { color: var(--c-heading); }
html.pl .gbp-photo { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 30px 30px; gap: 3px; height: 63px; border-radius: 8px; overflow: hidden; margin-bottom: var(--space-2); }
html.pl .gbp-photo > span { display: grid; place-items: center; background: var(--navy); color: var(--cream); font-weight: var(--fw-semibold); font-size: .8125rem; }
html.pl .gbp-photo .t1 { grid-row: 1 / 3; }
html.pl .gbp-photo .t2 { background: color-mix(in srgb, var(--navy) 82%, var(--white)); }
html.pl .gbp-photo .t3 { background: var(--amber); color: var(--navy); }
html.pl .gbp-photo .t-none { background: repeating-linear-gradient(45deg, var(--c-line) 0 6px, transparent 6px 12px); }
html.pl .gbp-photo.is-few .t1 { background: color-mix(in srgb, var(--gray) 35%, var(--c-page)); color: var(--c-muted); }
html.pl .gbp-photo.is-few .t2 { background: color-mix(in srgb, var(--gray) 25%, var(--c-page)); color: var(--c-muted); }
html.pl .gbp-photo.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--navy-50); border: 1px dashed var(--line-strong); color: var(--c-muted); font-size: .75rem; }
html.pl .gbp-glyph { width: 22px; height: 22px; }
html.pl .gbp-photo.is-empty .gbp-glyph { width: 18px; height: 18px; }
html.pl .gbp-name { font-weight: var(--fw-semibold); color: var(--c-heading); font-size: .875rem; line-height: 1.25; margin-bottom: 2px !important; overflow-wrap: anywhere; }
html.pl .gbp-rate { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
html.pl .gbp-rate b { color: var(--c-heading); }
html.pl .gbp-stars { display: inline-flex; }
html.pl .gbp-stars svg { fill: var(--line-strong); }
html.pl .gbp-stars .on svg { fill: var(--amber); }
html.pl .gbp-n, html.pl .gbp-meta { color: var(--c-muted); }
html.pl .gbp-open b { color: var(--c-success); font-weight: var(--fw-semibold); }
html.pl .gbp-btns { display: flex; gap: 3px; margin-top: var(--space-2) !important; }
html.pl .gbp-btns span { flex: 1; min-width: 0; text-align: center; padding: 3px 0; border-radius: 999px; border: 1px solid var(--c-line); font-size: .6875rem; font-weight: var(--fw-semibold); color: var(--c-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pl .gbp-btns .is-pri { background: var(--navy); border-color: var(--navy); color: var(--white); }
html.pl .gbp-chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 3px; }
html.pl .gbp-chip { display: flex; gap: 5px; align-items: baseline; font-size: .75rem; font-weight: var(--fw-medium); color: var(--c-heading); }
html.pl .gbp-chip-mark { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: .625rem; font-weight: var(--fw-bold); transform: translateY(2px); }
html.pl .gbp-chip.is-fix .gbp-chip-mark { background: var(--amber); color: var(--navy); }
html.pl .gbp-chip.is-ok .gbp-chip-mark { background: var(--navy); color: var(--white); }
html.pl .gbp-comp-h { margin-top: var(--space-2) !important; font-size: .75rem; font-weight: var(--fw-semibold); color: var(--c-muted); }
html.pl .gbp-comp { list-style: none; margin: 2px 0 0; padding: 0; font-size: .75rem; color: var(--c-text); }
html.pl .hv-gbp .hv-foot { margin: var(--space-3) 0 0; color: var(--c-muted); }
@media (min-width: 480px) { html.pl .gbp-card { padding: var(--space-4); font-size: .875rem; } html.pl .gbp-photo { height: 81px; grid-template-rows: 39px 39px; } html.pl .gbp-name { font-size: .9375rem; } }
html.pl[data-mode="dark"] .gbp-card { background: var(--black-card); border-color: var(--black-line); }
html.pl[data-mode="dark"] .gbp-card.is-after { border-color: color-mix(in srgb, var(--amber) 60%, var(--black-line)); }
html.pl[data-mode="dark"] .gbp-photo > span { background: var(--navy-raised, var(--navy)); }
html.pl[data-mode="dark"] .gbp-photo.is-few .t1, html.pl[data-mode="dark"] .gbp-photo.is-few .t2 { background: var(--black-line); color: var(--gray-1); }
html.pl[data-mode="dark"] .gbp-photo.is-empty { background: var(--black-panel); border-color: var(--black-line); }
html.pl[data-mode="dark"] .gbp-stars svg { fill: var(--black-line); }
html.pl[data-mode="dark"] .gbp-stars .on svg { fill: var(--amber); }
html.pl[data-mode="dark"] .gbp-btns span { border-color: var(--black-line); }
html.pl[data-mode="dark"] .gbp-btns .is-pri { background: var(--cream-warm); border-color: var(--cream-warm); color: var(--black-page); }
html.pl[data-mode="dark"] .gbp-chip.is-ok .gbp-chip-mark { background: var(--cream-warm); color: var(--black-page); }
html.pl[data-mode="dark"] .gbp-photo .t3 { background: var(--amber); color: var(--black-page); }

/* ---------- B7. 5-step intake "From hello to booked" (#15, #16): vertical stepper on phones, one row from 900px ---------- */
html.pl .intake-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
html.pl .intake-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); }
html.pl .intake-step:last-child { padding-bottom: 0; }
html.pl .intake-step::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; background: var(--c-line); border-radius: 1px; }
html.pl .intake-step:last-child::before { display: none; }
html.pl .intake-node { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-page); border: 2px solid var(--c-line); }
html.pl .intake-step.is-free .intake-node { border-color: var(--amber); background: var(--amber-50); }
html.pl .intake-step:last-child .intake-node { background: var(--navy); border-color: var(--navy); --ic-n: var(--cream); --ic-w: var(--navy); }
html.pl .intake-body { padding-top: 2px; min-width: 0; }
html.pl .intake-meta { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 2px; }
html.pl .intake-num { font-size: .8125rem; font-weight: var(--fw-semibold); letter-spacing: .1em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
html.pl .intake-free { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: .75rem; font-weight: var(--fw-semibold); }
html.pl .intake-step h3 { font-size: var(--fs-h3); margin: 0 0 4px; }
html.pl .intake-text { margin: 0; color: var(--c-muted); }
html.pl .intake .section-head { margin-bottom: var(--space-6); }
@media (min-width: 900px) {
  html.pl .intake-steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  html.pl .intake-step { grid-template-columns: 1fr; gap: var(--space-3); padding: 0; }
  html.pl .intake-step::before { left: 56px; right: calc(-1 * var(--space-4) + 4px); top: 23px; bottom: auto; width: auto; height: 2px; }
  html.pl .intake-step:last-child::before { display: none; }
}
html.pl[data-mode="dark"] .intake-node { background: var(--black-card); border-color: var(--black-line); }
html.pl[data-mode="dark"] .intake-step.is-free .intake-node { background: var(--black-card); border-color: var(--amber); }
html.pl[data-mode="dark"] .intake-step:last-child .intake-node { background: var(--amber); border-color: var(--amber); --ic-n: var(--black-page); --ic-a: var(--black-page); --ic-w: var(--amber); }
html.pl[data-mode="dark"] .intake-step::before { background: var(--black-line); }
html.pl .intake.section { background: var(--band); }
html.pl .bx-how .intake-node { background: var(--c-page); }

/* ---------- B8. Inner page hero + breadcrumbs ---------- */
html.pl .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 var(--space-3); padding: 0; font-size: var(--fs-small); color: var(--c-muted); }
html.pl .crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--c-muted); }
html.pl .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
html.pl .crumbs a:hover { color: var(--c-heading); }
html.pl .crumbs [aria-current] { color: var(--c-heading); font-weight: var(--fw-medium); }
html.pl .bx-hero h1 { max-width: 22ch; }
html.pl .bx-svc-hero h1 { max-width: 24ch; }
html.pl .bx-hero .lead { margin-top: var(--space-3); }

/* ---------- B9. Services hub + service pages (#6, #7) ---------- */
html.pl .bx-svc-card { position: relative; }
html.pl .bx-svc-card .svc-ic, html.pl .bx-point .svc-ic { background: var(--band); border: var(--line-w) solid var(--band-line); }
html.pl .bx-svc-card .card-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--band); }
html.pl .bx-svc-card .card-arrow .ic { width: 18px; height: 18px; }
html.pl .bx-svc-card:hover { border-color: var(--line-strong); }
html.pl .bx-svc-card:hover .card-arrow { background: var(--amber-50); }
html.pl .bx-band .card { background: var(--c-page); }
html.pl[data-mode="dark"] .bx-band .card { background: var(--black-card); }
html.pl .bx-ladder { list-style: none; padding: 0; }
html.pl .bx-mini { list-style: none; padding: 0; grid-template-columns: 1fr !important; }
html.pl .bx-price { background: var(--band); border-color: var(--band-line); }
html.pl .bx-price .bx-lead { margin: var(--space-2) 0 var(--space-3); }
html.pl .bx-checks { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
html.pl .bx-checks li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; }
html.pl .bx-check { margin-top: 2px; }
html.pl .bx-side { min-width: 0; }
html.pl .bx-side .bx-h3:not(:first-child) { margin-top: var(--space-6); }
html.pl .bx-next { position: relative; display: grid; gap: 2px; padding: var(--space-4) 56px var(--space-4) var(--space-4); text-decoration: none; color: var(--c-text); }
html.pl .bx-next:hover { border-color: var(--line-strong); }
html.pl .bx-next-k { font-size: .8125rem; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--c-kicker); }
html.pl .bx-next-t { font-weight: var(--fw-semibold); color: var(--c-heading); font-size: var(--fs-h3); }
html.pl .bx-next-s { color: var(--c-muted); }
html.pl .bx-next-ic { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); }
html.pl .bx-tiers { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { html.pl .bx-tiers { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
html.pl .bx-included .bx-two .bx-tiers { grid-template-columns: 1fr; }
html.pl .bx-tier { display: flex; flex-direction: column; gap: var(--space-2); }
html.pl .bx-tier p { margin: 0; }
html.pl .bx-tier-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
html.pl .bx-tier-name { font-weight: var(--fw-semibold); color: var(--c-heading); font-size: var(--fs-h3); }
html.pl .bx-tier-cta { margin-top: auto !important; padding-top: var(--space-3); }
html.pl .bx-confirm { font-size: var(--fs-small); color: var(--c-muted); }
html.pl .bx-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); }
html.pl .bx-timeline-k { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--c-heading); }
html.pl .bx-clock { width: 20px; height: 20px; }
html.pl .bx-info p { margin: 0 0 var(--space-3); } html.pl .bx-info p:last-child { margin-bottom: 0; }
html.pl .bx-need .bx-two { grid-template-columns: 1fr; }
@media (min-width: 900px) { html.pl .bx-need .bx-two { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
html.pl .bx-band .intake-node { background: var(--c-page); }

/* ---------- B10. FAQ page (#21) + FAQ heading reset ---------- */
html.pl .faq-q { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
html.pl .bx-jump { padding-block: var(--space-5); border-bottom: var(--line-w) solid var(--c-line); }
html.pl .bx-jump-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
html.pl .bx-jump-list a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: 999px; border: var(--line-w) solid var(--c-line); text-decoration: none; font-weight: var(--fw-medium); color: var(--c-heading); }
html.pl .bx-jump-list a:hover { border-color: var(--line-strong); background: var(--navy-50); }
html.pl .bx-faq-num { margin-bottom: var(--space-2); }
html.pl .bx-faq { scroll-margin-top: calc(var(--header-h, 72px) + var(--space-3)); }
html.pl .faq-a a { overflow-wrap: anywhere; }

/* ---------- B11. Contact page (#24) ---------- */
html.pl .bx-reach { padding-block: var(--space-6) 0; }
html.pl .bx-reach-grid { display: grid; gap: var(--space-3); }
/* fix round (Oct 30): two cards now (email + book a consultation; the call card is gone) */
@media (min-width: 640px) { html.pl .bx-reach-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { html.pl .bx-reach-grid { grid-template-columns: 1fr 1.4fr; } }
html.pl .bx-reach-card { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding: var(--space-4); border-radius: var(--radius-card); border: var(--line-w) solid var(--c-line); background: var(--c-page); text-decoration: none; color: var(--c-heading); }
html.pl a.bx-reach-card:hover { border-color: var(--line-strong); background: var(--navy-50); }
html.pl .bx-reach-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--band); border: var(--line-w) solid var(--band-line); }
html.pl .bx-reach-t { font-weight: var(--fw-semibold); }
html.pl .bx-reach-body { display: grid; gap: 2px; min-width: 0; }
html.pl .bx-reach-s { color: var(--c-muted); font-size: var(--fs-small); }
html.pl .bx-reach-s .chip, html.pl .bx-reach-s [class*="tag"] { white-space: normal; }
html.pl[data-mode="dark"] .bx-reach-card { background: var(--black-card); border-color: var(--black-line); }
html.pl .bx-contact { padding-top: var(--space-6); }
html.pl .bx-facts dl { margin: 0; display: grid; gap: var(--space-4); }
html.pl .bx-facts dt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--c-heading); }
html.pl .bx-facts dd { margin: 4px 0 0 32px; color: var(--c-text); }
html.pl .bx-fact-ic { width: 22px; height: 22px; }
html.pl .field textarea { width: 100%; min-height: 8.5rem; padding: var(--space-3) var(--space-4); font: inherit; line-height: 1.5; color: var(--c-text); background: var(--c-field-bg); border: 2px solid var(--c-field-line); border-radius: 16px; resize: vertical; }
html.pl .field textarea:user-invalid { border-color: var(--c-error); }
html.pl .field:has(textarea:user-invalid) .field-error, html.pl .field.is-invalid .field-error { display: block; }
html.pl .field.is-invalid input, html.pl .field.is-invalid textarea { border-color: var(--c-error); }

/* ---------- B12. Social slots (#19): built, hidden until a profile url exists ---------- */
html.pl .social[hidden] { display: none !important; }
html.pl .social-h { font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-2); }
html.pl .social-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
html.pl .social-a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: var(--line-w) solid var(--c-line); }

/* ---------- B13. About (#20, #25, #26) ---------- */
html.pl .bx-statement { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); line-height: 1.45; color: var(--c-heading); font-weight: var(--fw-medium); margin: 0; }
html.pl .bx-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
html.pl .bx-point h3 { margin: 0 0 var(--space-2); }
html.pl .bx-point p { margin: 0; color: var(--c-muted); }
html.pl .bx-partner { padding-block: calc(var(--section-pad) * .7); }
html.pl .bx-partner-line { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--c-heading); text-wrap: balance; padding-left: var(--space-5); border-left: 4px solid var(--amber); }

/* ---------- B14. Legal drafts ---------- */
html.pl .wrap.bx-prose > * { max-width: 44rem; }
html.pl .bx-prose h2 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-2); }
html.pl .bx-prose h2:first-child { margin-top: 0; }
html.pl .bx-prose p { margin: 0 0 var(--space-3); }
html.pl .bx-legal-note { color: var(--c-muted); font-size: var(--fs-small); }

/* ---------- B15. Home bits: Pilot Light approve chip, thanks social, footer Services column ---------- */
html.pl .pilot-approve { margin-top: var(--space-3); }
html.pl .thanks-social .social-h { margin-top: 0; }
html.pl .ft-social { margin-top: var(--space-3); }
/* The three action pills only fit in a card ~210px wide or more; narrower cards (phones, the 1024 hero column) show Call + Website. */
html.pl .gbp-card { container-type: inline-size; }
@container (max-width: 210px) { html.pl .gbp-btns span:nth-child(3) { display: none; } }
html.pl .gbp-photo.is-empty > span { background: none; color: var(--c-muted); text-align: center; font-weight: var(--fw-medium); font-size: .75rem; padding: 0 4px; }
html.pl .bx-info, html.pl .bx-next, html.pl .bx-tier, html.pl .bx-point, html.pl .bx-svc-card, html.pl .bx-price { border: var(--line-w) solid var(--c-line); border-radius: var(--radius-card); }
html.pl .bx-price { border-color: var(--band-line); }
html.pl[data-mode="dark"] .bx-info, html.pl[data-mode="dark"] .bx-next, html.pl[data-mode="dark"] .bx-tier, html.pl[data-mode="dark"] .bx-point, html.pl[data-mode="dark"] .bx-svc-card { border-color: var(--black-line); background: var(--black-card); }
html.pl .bx-svc-card { padding: var(--card-pad); }
html.pl .bx-svc-card p { padding-right: 44px; margin-bottom: 0; }
html.pl .bx-svc-card h3 { margin: 0 0 var(--space-2); }
html.pl .bx-hero h1 .ph, html.pl .about-hero h1 .ph, html.pl .thanks-hero h1 .ph { font-size: .42em; vertical-align: middle; letter-spacing: 0; }

/* ======================= LOOK 4 BATCH BUILD #2 (Oct 29, 2026). Appended after batch.css, polish builds only.
   Item numbers (#n) = batch-build-oct29-brief.md. Colours and type come only from existing tokens. ======================= */

/* ---------- S0. ONE spacing system (#1, hard rule). Every card, form, box and section on every page uses these tokens.
   Measured by scripts/batch/selfcheck.mjs (spacing audit). Hero illustrations (Scorecard / Profile samples) are drawings of
   other products, not page cards, and keep their own compact sizes. ---------- */
html.pl {
  --sp-card: clamp(1.5rem, 1.2rem + 1vw, 2rem);      /* card / box / form padding: 24px phone, ~28px iPad, 32px desktop */
  --sp-gap: clamp(1rem, .6rem + 1.6vw, 1.5rem);      /* gap between side-by-side cards: 16px phone, 24px iPad up */
  --sp-title: .75rem;                                /* title to body inside a card: 12px */
  --sp-stack: .75rem;                                /* paragraph / list rhythm inside a card: 12px */
  --sp-field: 1.25rem;                               /* form field to field: 20px */
  --sp-head: clamp(1.5rem, 1rem + 2vw, 2.5rem);      /* section heading block to its content: 24-40px */
  --card-pad: var(--sp-card);                        /* legacy consumers follow the system */
}
/* every card-like element: same padding, same hairline, same radius */
html.pl :is(.card, .form-card, .bx-reach-card) {
  padding: var(--sp-card) !important; border: var(--line-w) solid var(--c-line) !important; border-radius: var(--radius-card) !important;
  background: var(--c-page); box-shadow: none; }
html.pl .bx-band :is(.card, .form-card, .bx-reach-card), html.pl .section.panel :is(.card, .form-card) { background: var(--c-page); }
html.pl[data-mode="dark"] :is(.card, .form-card, .bx-reach-card) { background: var(--black-card) !important; border-color: var(--black-line) !important; }
html.pl :is(.card, .form-card) > :first-child { margin-top: 0; }
html.pl :is(.card, .form-card) > :last-child { margin-bottom: 0; }
html.pl :is(.card, .form-card) :is(h2, h3, .bx-box-h, .bx-tier-top) { margin: 0 0 var(--sp-title); }
html.pl :is(.card, .form-card) .kicker { margin: 0 0 var(--sp-title); }
html.pl :is(.card, .form-card) p { margin: 0 0 var(--sp-stack); }
html.pl :is(.card, .form-card) p:last-child { margin-bottom: 0; }
/* link cards: room for the round arrow at the top right */
html.pl .card-link:has(.card-arrow) h3 { padding-right: 40px; }
html.pl .card-link .card-arrow { top: var(--sp-card) !important; right: var(--sp-card) !important; bottom: auto !important; }
/* grids: one gap; siblings stretch to the same height (grid default), content pinned top */
html.pl :is(.bx-grid, .card-grid, .bx-points, .bx-reach-grid, .bx-tiers, .close-grid, .thanks-grid) { list-style: none; display: grid; gap: var(--sp-gap) !important; align-items: stretch; }
/* fix round (Lumen #1): only reset the box of grids that are NOT also a .wrap, so .wrap keeps its gutters and centring */
html.pl :is(.bx-grid, .card-grid, .bx-points, .bx-reach-grid, .bx-tiers, .close-grid, .thanks-grid):not(.wrap) { margin: 0; padding: 0; }
html.pl .bx-grid > *, html.pl .card-grid > * { min-width: 0; }
@media (min-width: 768px) {
  html.pl .bx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.pl .bx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* groups of 3: 1 column, then 3 (never 2 + an orphan) */
}
/* 6 Home service cards: 1 / 2 / 3 columns = 6, 3x2, 2x3: no orphan */
@media (min-width: 640px) { html.pl .services .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { html.pl .services .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 640px) { html.pl .lfb .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* About: the apart cards and the two founder cards sit 2-up when they have the full width (640-899px, 1200px+), and stack
   in the narrower right-hand column at 900-1199px so no card drops under ~300px */
@media (min-width: 640px) { html.pl .bx-points, html.pl .team .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1199px) { html.pl .bx-points, html.pl .team .card-grid { grid-template-columns: minmax(0, 1fr); } }
/* sections: one vertical rhythm; a section head always sits --sp-head above its content */
html.pl .section-head, html.pl .intake .section-head { margin-bottom: var(--sp-head) !important; }
html.pl .section-head > :last-child { margin-bottom: 0; }
html.pl .bx-sec { padding-block: var(--section-pad); }
html.pl .bx-sec + .bx-sec-tight { padding-top: 0; border-top: 0; margin-top: calc(var(--sp-gap) - var(--section-pad)); }  /* paired-card rows read as one block */
html.pl .bx-h2 { margin-bottom: var(--sp-head); }
html.pl .bx-tiers-h { margin: var(--sp-head) 0 var(--sp-gap) !important; }

/* ---------- S1. Boxes used across the service pages (#5, #6) ---------- */
html.pl .bx-box { display: flex; flex-direction: column; }
html.pl .bx-box-h { font-size: var(--fs-h3); color: var(--c-heading); }
html.pl .bx-box.is-accent { border-top: 3px solid var(--amber) !important; }
html.pl .bx-box .bx-checks { margin: 0; gap: var(--sp-stack); }
html.pl .bx-box > .bx-confirm { margin-top: var(--sp-stack) !important; }
html.pl .bx-checks.is-out .bx-check { opacity: .7; }
html.pl .bx-dots { list-style: disc; margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); }
html.pl .bx-dots li::marker { color: var(--amber); }
html.pl .bx-box .bx-slot { margin: 0; padding: 0; border: 0; background: none; }  /* the draft tag already marks the gap; no second dashed box */
html.pl .bx-box .bx-next { margin-top: auto; }
html.pl .bx-box .more-link { margin-top: auto; }
html.pl .bx-price-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
html.pl .bx-price-from > span:first-child { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-heading); }
html.pl .bx-tier .bx-tier-top { margin: 0; }
html.pl .bx-tier { gap: var(--sp-title); }
html.pl .bx-svc-card h3 { margin-bottom: var(--sp-title) !important; }
html.pl .bx-svc-card .svc-ic { margin-bottom: var(--sp-stack); }
html.pl .bx-svc-card p { padding-right: 0; }
html.pl .bx-group .section-head { display: grid; gap: var(--space-2); }

/* ---------- S2. Home: Pilot Light alone (Coming later removed, #5): one full-width card, 2 columns from 900px ---------- */
html.pl .offers-grid.is-solo { display: block; }
html.pl .offers-grid.is-solo .pilot { padding: var(--sp-card) !important; border-top: 3px solid var(--amber) !important; }
@media (min-width: 900px) {
  html.pl .offers-grid.is-solo .pilot { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: var(--sp-head); align-items: start; }
}
html.pl .pilot-a > :last-child, html.pl .pilot-b > :last-child { margin-bottom: 0; }
html.pl .pilot-b > .lead { margin-top: 0; }
@media (max-width: 899px) { html.pl .pilot-b { margin-top: var(--sp-stack); } }
/* NTH2: promise line balanced (plus a no-break space before the last word in the template) */
html.pl .promise-text { text-wrap: balance; }

/* ---------- S3. Forms (Scorecard + Contact) ---------- */
html.pl .form-grid { gap: var(--sp-gap) var(--sp-head) !important; align-items: start; }
html.pl .form-aside.card { padding: var(--sp-card) !important; }
html.pl .form-card .field, html.pl .form-card fieldset { margin: 0 0 var(--sp-field) !important; }
html.pl .form-card .field:last-of-type { margin-bottom: var(--sp-field); }
html.pl .form-card h2 + p { margin-bottom: var(--sp-field); }
/* NTH5: Turnstile: one line of help, fixed normal size (300 x 65), compact under 300px */
html.pl .ts-hint { margin: 0 0 var(--space-2) !important; font-size: var(--fs-small); color: var(--c-muted); }
html.pl .turnstile-slot { min-height: 65px; max-width: 300px; margin: 0 0 var(--sp-field) !important; }
html.pl .turnstile-slot[data-size="compact"] { min-height: 140px; max-width: 150px; }
/* NTH3: Contact tiles end a full gap above the next section's divider */
html.pl .bx-reach { padding-block: var(--sp-head); }
html.pl .bx-contact { padding-top: var(--sp-head); }
html.pl .bx-reach-card { min-height: 0; }

/* ---------- S4. Intake steps (NTH1): numbers + Free pills share one top line at every width ---------- */
html.pl .intake-meta { min-height: 22px; margin-bottom: var(--space-1); }
@media (min-width: 900px) { html.pl .intake-step { align-content: start; } html.pl .intake-body { padding-top: 0; } }

/* ---------- S5. 404 (NTH4) + legal + thanks ---------- */
html.pl .nf-hero .cta-row { margin-top: var(--sp-head); }
html.pl .nf-hero .cta-row + .muted { margin-top: var(--sp-stack); }
html.pl .bx-legal-hero .lead { margin-top: var(--sp-stack); }

/* ---------- S6. Home hero at iPad portrait (MF1): text and the Scorecard|Profile card stack full width, card centred ---------- */
@media (min-width: 700px) and (max-width: 959px) {
  html.pl .hero .hero-grid { grid-template-columns: 1fr !important; }
  html.pl .hero .hero-visual { width: 100%; max-width: none; justify-self: stretch; }
  html.pl .hero .hero-visual > .hv { width: 100%; max-width: 36rem; margin-inline: auto; }
}

/* ---------- S7. Draft tags (#6 "never raw [BRACKETS]"): label + note in one dashed chip ---------- */
html.pl .ph.ph-tag { display: inline; padding: 1px 8px 2px; border: 1.5px dashed var(--c-ph-line); border-radius: 6px; background: var(--c-ph-bg); color: var(--c-ph-fg);
  font-size: .875em; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; }
html.pl .ph-k { font-weight: var(--fw-semibold); font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }
html.pl .ph-k + .ph-t::before { content: " · "; font-weight: var(--fw-semibold); }
html.pl .btn .ph.ph-tag { background: transparent; color: inherit; border-color: currentColor; }

/* ---------- S8. Header: orange Free Scorecard (#2) + sub-menus (#3) ---------- */
html.pl .hdr-cta { white-space: nowrap; }
html.pl .sub-row { display: flex; align-items: stretch; }
html.pl .sub-row > a { flex: 1; }
html.pl .sub-toggle { display: grid; place-items: center; flex: none; min-width: 48px; min-height: 48px; padding: 0; background: transparent; border: 0; color: var(--c-text); cursor: pointer; border-radius: var(--radius-btn); }
html.pl .sub-ic { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
html.pl .sub-ic .sN { stroke: currentColor; }
html.pl .sub-toggle[aria-expanded="true"] .sub-ic { transform: rotate(180deg); }
html.pl .sub { display: none; list-style: none; margin: 0; padding: 0; }
html.pl .has-sub.is-open > .sub { display: block; }
/* phone / tablet menu: the list opens in place, indented under its parent */
html.pl .menu-panel { max-height: calc(100dvh - var(--header-h, 72px)); overflow-y: auto; overscroll-behavior: contain; }
html.pl .menu-panel .has-sub .sub-row { border-bottom: var(--line-w) solid var(--c-header-line); }
html.pl .menu-panel .has-sub .sub-row > a { border-bottom: 0; }
html.pl .menu-panel .sub-toggle { border-left: var(--line-w) solid var(--c-header-line); border-radius: 0; }
html.pl .menu-panel .sub { padding-left: var(--space-4); border-left: 2px solid var(--amber); margin: var(--space-2) 0 var(--space-2) var(--space-2); }
html.pl .menu-panel .sub li a { min-height: 44px; font-weight: var(--fw-medium); border-bottom: 0; }
html.pl .menu-panel .sub .sub-all a { font-weight: var(--fw-semibold); }
@media (min-width: 960px) {
  html.pl .nav-desktop .has-sub { position: relative; }
  html.pl .nav-desktop .sub-row { align-items: center; }
  html.pl .nav-desktop .sub-row > a { padding-right: 2px; }
  html.pl .nav-desktop .sub-toggle { min-width: 28px; min-height: var(--tap); }
  html.pl .nav-desktop .sub-ic { width: 16px; height: 16px; }
  html.pl .nav-desktop ul.sub { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 17rem; padding: var(--space-2);
    background: var(--c-header-bg); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-card); box-shadow: var(--lift-1, 0 8px 24px rgba(15, 30, 61, .12)); }
  html.pl .nav-desktop .has-sub.is-open > ul.sub { display: grid; }
  html.pl .nav-desktop .sub a { display: flex; width: 100%; min-height: 40px; padding: 0 var(--space-3); border-radius: 8px; }
  html.pl .nav-desktop .sub a:hover { background: var(--navy-50); text-decoration: none; }
  html.pl .nav-desktop .sub .sub-all { border-bottom: var(--line-w) solid var(--c-line); padding-bottom: var(--space-1); margin-bottom: var(--space-1); }
  html.pl[data-mode="dark"] .nav-desktop ul.sub { border-color: var(--black-line); }
  html.pl[data-mode="dark"] .nav-desktop .sub a:hover { background: var(--black-card); }
}
@media (min-width: 960px) and (hover: hover) { html.pl .nav-desktop .has-sub:not(.no-hover):hover > ul.sub { display: grid; }  /* Escape dismisses a hover-opened list too (WCAG 1.4.13) */ }

/* ---------- S9. Footer balance (#10): 4 columns on desktop, brand row + 3 columns on iPad, 2 + 1 on phones ---------- */
@media (min-width: 1024px) { html.pl .pf-ft .ft-grid { grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr; gap: var(--sp-head); } }
@media (min-width: 768px) and (max-width: 1023px) { html.pl .pf-ft .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-head); } html.pl .pf-ft .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  html.pl .pf-ft .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-gap); }
  html.pl .pf-ft .ft-brand, html.pl .pf-ft .ft-col:last-child { grid-column: 1 / -1; }
  html.pl .pf-ft nav.ft-col ul { grid-template-columns: 1fr; }
}

/* ---------- S10. Fix found in the spacing audit: '.field label' (padding 0) out-ranked '.goal-option', so the radio sat on the pill edge ---------- */
html.pl .field .goal-option { padding: var(--space-2) var(--space-4); }
html.pl .card-link h3 a::after { border-radius: var(--radius-card); }  /* focus ring follows the rounded card */
html.pl .page-hero + .bx-sec { padding-top: var(--sp-head); }  /* service pages: no double gap under the hero */
html.pl .bx-box .bx-dots + .bx-next { margin-top: var(--sp-gap); }
html.pl .bx-h2 .ph-tag { font-size: .4em; vertical-align: middle; letter-spacing: 0; }  /* service FAQ: drafted answers flagged at the heading */

/* ======================= FIX ROUND (Oct 29, Lumen QA of 4931f1c) ======================= */
/* Lumen #2: the tier button fills its card and may wrap, so it never overflows a narrow 3-up tier (Audits at 820) */
html.pl .bx-tier-cta .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.25; padding-block: var(--space-2); }
/* Lumen #4: Home service cards used polish.css's 4px title margin (out-ranked the system rule); now the --sp-title token like every card */
html.pl .services .card h3, html.pl .svc-b .card h3 { margin-bottom: var(--sp-title) !important; }
/* Lumen #5 (focus above the bottom bar): now base.css .has-scbar scroll-padding-bottom (fix round Oct 30) */
/* Lumen #6: header links never wrap ("How it works" broke onto 2 lines at 1280+) */
html.pl .nav-desktop a, html.pl .hdr-cta { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1099px) { html.pl .nav-desktop { margin-left: var(--space-3); } html.pl .nav-desktop > ul > li > a, html.pl .nav-desktop .sub-row > a { padding-inline: var(--space-2); } }  /* room for one-line links at 960 */
/* Lumen #7: the hero sample cards (Scorecard + Profile) use the card padding token at every width (were 12/16/8/16 at 390-1023) */
html.pl .hero .hv-score, html.pl .hero .hv-gbp { padding: var(--sp-card) !important; }
/* Draft tags never split across lines: short ones stay on one line; long ones are a single inline block (wrapping inside its box) */
html.pl .ph.ph-tag.is-short { white-space: nowrap; }
html.pl .ph.ph-tag.is-long { display: inline-block; max-width: 100%; vertical-align: top; }
/* Step titles that wrap to 2 lines (1024) get readable leading (was 1.02) */
html.pl .intake-step h3 { line-height: 1.3; }
/* Call outline: the same navy border on light backgrounds at every width (hero + call bar + menu used the grey ghost line; header used navy) */

/* MICRO FIX (Lumen re-check of b40f38f, Oct 29) ------------------------------------------------------------- */
/* M1: a short draft tag still never breaks across lines, but it is now one atomic box capped at its container width,
   so when the tag is wider than its card (About co-founder cards at 1280+) it wraps inside itself instead of overflowing. */
html.pl .ph.ph-tag.is-short { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; vertical-align: baseline; }
/* M2: Home 'Lit / Found / Booked' step titles use the title token like every other card title (was --space-2, 8px). */
html.pl .pf-step h3 { margin-bottom: var(--sp-title); }
/* M3: the 'Want to talk sooner?' Call button on both thanks pages gets the same navy outline as every other light-mode Call button. */

/* NIGHT BATCH (Oct 29, Justin's go via Edison 10:56pm CT) ------------------------------------------------------------ */
/* §5 About: no founder photo for now, so the two co-founder cards share the full width (2 columns from 640px). */
@media (min-width: 640px) { html.pl .team .team-grid.is-nophoto .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* §6 Home sample Scorecard: names the same fictional business as the Profile sample; both marks ship, the row state shows one. */
html.pl .hv-score .hv-title { display: flex; flex-direction: column; gap: 2px; }
html.pl .hv-score .hv-biz { font-size: var(--fs-caption); font-weight: var(--fw-medium, 500); color: var(--c-muted); letter-spacing: 0; text-transform: none; }
html.pl .hv-row.is-pass .hv-mark .m-fix, html.pl .hv-row.is-fix .hv-mark .m-pass { display: none; }
/* §7 Design calls. Fix round (Edison, Oct 30 3:00am, T150): headlines stay at Hero B's 76 / 52px web display size (polish.css). */
/* Light mode: the main button is navy-filled on light backgrounds, the second button stays the navy outline. On the always-dark
   navy bands (CTA band, lights-on, hub path) the main button stays amber so it can be seen. No amber glow or ring in light mode. */
html.pl:not([data-mode="dark"]) .btn-cta:not(:where(.always-dark, .lights-on, .on-dark) .btn-cta) { background: var(--navy); color: var(--white); box-shadow: none !important; }
html.pl:not([data-mode="dark"]) .btn-cta:not(:where(.always-dark, .lights-on, .on-dark) .btn-cta):is(:hover, .is-hover) { background: var(--navy-raised); color: var(--white); }
html.pl:not([data-mode="dark"]) .btn-cta:not(:where(.always-dark, .lights-on, .on-dark) .btn-cta):is(:active, .is-press) { background: var(--navy); color: var(--cream); }
html.pl:not([data-mode="dark"]) .btn-cta .btn-ic { --ic-n: currentColor; }
html.pl:not([data-mode="dark"]) :is(.always-dark, .lights-on, .on-dark) .btn-cta { box-shadow: none !important; }
html.pl:not([data-mode="dark"]) .is-fix .hv-state { box-shadow: none; }
/* §1 Services hub: the lantern path (concept C, LOCKED). A dark band (navy in light mode, near-black in dark mode), so the
   dark styling and the lantern bloom stay inside the dark band, never on the light page. Lanterns light from dim to brightest. */
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html.pl .lp { --lp-bg: var(--c-page); background: var(--lp-bg); color: var(--c-text); padding-block: var(--space-6) var(--section-pad); overflow: hidden; }
html.pl .lp .lp-crumbs { margin-bottom: var(--space-4); }
html.pl .lp .lp-crumbs a, html.pl .lp .lp-crumbs span { color: var(--c-text); }
html.pl .lp-h1 { color: var(--c-heading); margin: 0; }
html.pl .lp-tailored { margin: var(--space-2) 0 0; font-weight: var(--fw-semibold); color: var(--c-heading); }
html.pl .lp-follow { margin: var(--space-6) 0 var(--space-4); font-weight: var(--fw-semibold); color: var(--cream); }
html.pl .lp-start { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5); border: var(--line-w) solid var(--amber); border-radius: var(--radius-card, 1rem); background: var(--lp-bg); }
html.pl[data-mode="dark"] .lp-start { background: color-mix(in srgb, var(--white) 5%, var(--lp-bg)); }
html.pl .lp-start-h { margin: 0 0 var(--space-1); color: var(--amber); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
html.pl .lp-start-p { margin: 0; }
html.pl .lp-np { margin: var(--space-1) 0 0; color: var(--amber); }
html.pl .lp-item { display: block; color: var(--c-heading); font-weight: var(--fw-semibold); text-decoration: none; }
html.pl .lp-item:hover { text-decoration: underline; text-underline-offset: .2em; }
html.pl .lp-line { display: block; color: color-mix(in srgb, var(--cream) 88%, var(--lp-bg)); font-size: .9375rem; line-height: 1.45; }
html.pl .lp-path { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
html.pl .lp-step { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-4); align-items: start; align-content: start; }
html.pl .lp-mark { position: relative; display: block; width: 3.25rem; }
html.pl .lp-lan { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
html.pl .lp-name { margin: 0; color: var(--amber); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
html.pl .lp-sub { margin: var(--space-1) 0 var(--space-3); color: var(--amber); font-weight: var(--fw-semibold); }
html.pl .lp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
html.pl .lp-care { margin: 0; color: var(--c-heading); font-weight: var(--fw-semibold); }
html.pl .lp-care-hl { margin: var(--space-2) 0 0; color: color-mix(in srgb, var(--cream) 88%, var(--lp-bg)); }
html.pl .lp-more { margin: var(--space-3) 0 0; }
html.pl .lp-more a { color: var(--amber); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: .25em; display: inline-flex; align-items: center; gap: .4em; }
html.pl .lp-tag { margin: var(--space-6) 0 0; color: var(--amber); font-weight: var(--fw-bold); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
html.pl .lp-cta-wide { display: none; }
/* the dotted path between lanterns (decorative) */
html.pl .lp-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.625rem - 1.5px); top: 4.75rem; bottom: calc(-1 * var(--space-6) + .5rem);
  border-left: 3px dotted color-mix(in srgb, var(--amber) 75%, var(--lp-bg)); }
/* lantern brightness, stage 1 (dim body, dark ember) to stage 4 (brightest) */
.lp-lan { --b: color-mix(in srgb, var(--cream) 34%, var(--lp-bg)); --p: var(--lp-bg); --f: color-mix(in srgb, var(--amber) 42%, var(--lp-bg)); }
.lp-lan[data-lvl="2"] { --b: color-mix(in srgb, var(--cream) 58%, var(--lp-bg)); --p: color-mix(in srgb, var(--amber) 10%, var(--lp-bg)); --f: color-mix(in srgb, var(--amber) 70%, var(--lp-bg)); }
.lp-lan[data-lvl="3"] { --b: color-mix(in srgb, var(--cream) 80%, var(--lp-bg)); --p: color-mix(in srgb, var(--amber) 20%, var(--lp-bg)); --f: color-mix(in srgb, var(--amber) 90%, var(--lp-bg)); }
.lp-lan[data-lvl="4"] { --b: var(--white); --p: color-mix(in srgb, var(--amber) 38%, var(--cream)); --f: var(--amber); }
.lp-b { fill: var(--b, var(--cream)); } .lp-p { fill: var(--p, var(--navy)); } .lp-f { fill: var(--f, var(--amber)); }
/* bloom behind lanterns 2-4 (dark band only), strongest on Keep It Lit */
html.pl .lp-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--amber) 55%, transparent) 0, transparent 65%); opacity: 0; }
html.pl .lp-step[data-lvl="2"] .lp-mark::before { opacity: .22; }
html.pl .lp-step[data-lvl="3"] .lp-mark::before, html.pl .lp-start .lp-mark::before { opacity: .38; }
html.pl .lp-step[data-lvl="4"] .lp-mark::before { opacity: .9; width: 420%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cream) 70%, transparent) 0, color-mix(in srgb, var(--amber) 55%, transparent) 22%, transparent 66%); }
html.pl .lp-start .lp-mark { width: 2.75rem; }
/* iPad / laptop: one row of 4, product names only, ONE centred CTA after the path */
@media (min-width: 768px) {
  html.pl .lp-start { max-width: 48rem; margin-inline: auto; }
  html.pl .lp-path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  html.pl .lp-step { grid-template-columns: 1fr; gap: var(--space-4); }
  html.pl .lp-mark { width: 3.5rem; margin-inline: var(--space-4) 0; }
  html.pl .lp-items { gap: var(--space-1); }
  html.pl .lp-items .lp-line { display: none; }
  html.pl .lp-step:not(:last-child)::after { left: calc(var(--space-4) + 3.5rem + var(--space-3)); right: calc(-1 * var(--space-5) + var(--space-3)); top: 2.5rem; bottom: auto; border-left: 0; border-top: 3px dotted color-mix(in srgb, var(--amber) 75%, var(--lp-bg)); }
  html.pl .lp-cta-wide { display: block; text-align: center; margin: var(--space-7, 3rem) 0 0; }
}
@media (min-width: 1024px) { html.pl .lp-mark { width: 4.5rem; } html.pl .lp-step:not(:last-child)::after { left: calc(var(--space-4) + 4.5rem + var(--space-3)); top: 3.25rem; } }
html.pl .lp-pilot .bx-price { max-width: 48rem; margin-inline: auto; text-align: center; }
html.pl .lp-pilot .kicker { margin: 0 0 var(--space-2); }
/* hub: every product link and the Care link are 44px tall tap targets */
html.pl .lp-item { display: flex; align-items: center; min-height: 44px; }
html.pl .lp-items { gap: var(--space-2); }
html.pl .lp-more a { min-height: 44px; }
html.pl .lp-np, html.pl .lp-start-p .lp-line { margin-top: 0; }
@media (min-width: 768px) { html.pl .lp-items { gap: 0; } }
/* hub: "See Care options →" wraps as one inline link (arrow stays with the words); Nonprofit note at the one-liner size, as in the mockup */
html.pl .lp-more a { display: inline; min-height: 0; padding-block: .55em; }
html.pl .lp-more a .more-ic { display: inline-block; vertical-align: -0.15em; margin-left: .3em; }
html.pl .lp-np { font-size: .9375rem; line-height: 1.45; }
/* Fix round item 5 (Oct 30): "From hello to booked" steps 01-04 are identical in light and dark mode, at every width and on every
   page that shows the steps (Home, Audits): white circle, neutral ring, navy icon (every icon part navy; 02 + 03 lose the amber
   ring, tint and icon accents). Only 05 Onboarding keeps its own filled circle with the flame. "Free" tags unchanged.
   Dark mode: navy on white is 14.7:1 (AA), the ring is the light neutral hairline. */
html.pl .intake-step:not(:last-child) .intake-node,
html.pl[data-mode="dark"] .intake-step:not(:last-child) .intake-node { background: var(--white); border-color: var(--line-light); --ic-n: var(--navy); --ic-a: var(--navy); --ic-w: var(--white); }

/* Fix round (Oct 30): hub lanterns light up fast as each enters the viewport (Layout.mjs LIGHT). Until lit: dimmed, no bloom.
   Without JS / Reduce Motion html.lp-anim is never set, so the final (lit) state shows. */
html.lp-anim .lp-lan { filter: brightness(.5) saturate(.5); transition: filter .26s var(--ease-out, ease-out); }  /* polish #4 (T93): full brightness within ~0.35 s */
html.lp-anim .lp-mark::before { transition: opacity .26s var(--ease-out, ease-out); }
html.lp-anim .lp-mark:not(.is-lit)::before { opacity: 0 !important; }
html.lp-anim .lp-mark.is-lit .lp-lan { filter: none; }

/* ---- Fix round (Oct 30) ---- */
/* T153 (sheet #49): light-mode cards keep soft drop shadows, Home service cards included (Lumen QA Oct 30). Dark mode: no card shadow, as before. */
html.pl:not([data-mode="dark"]) :is(.card, .form-card, .hv-score, .journey, .gbp-card.is-after) { box-shadow: var(--float-shadow); }
/* Hub: Pilot Light box and "Just starting? Start here" title gaps -> 12px at all widths (Lumen). */
html.pl .lp-pilot .bx-price { gap: 0; } html.pl .lp-pilot .kicker { margin: 0 0 12px; }
html.pl .lp-start-h { margin: 0 0 12px; }
/* About: "Why Lamplit" verse at least body size, darker, same weight as the statement above (Justin 2:47am). */
html.pl .verse blockquote p { font-size: max(1rem, 1em); color: var(--c-heading); font-weight: var(--fw-medium); }  /* T33 (Lumen QA Oct 30): 500, same as .bx-statement */
html.pl .verse { font-size: inherit; }
html.pl .about-intro { margin-top: var(--space-3); }
/* Phone footer: Site and Services columns end evenly, tighter rows (Justin 2:35am). */
@media (max-width: 767px) {
  html.pl .pf-ft nav.ft-col ul { grid-template-columns: 1fr; row-gap: 0; }
  html.pl .pf-ft .ft-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
  html.pl .pf-ft .ft-brand, html.pl .pf-ft .ft-grid > .ft-col:last-child { grid-column: 1 / -1; }
  html.pl .pf-ft nav.ft-col li a { display: flex; align-items: center; min-height: 44px; }
}
/* Thanks pages: the short email line under "What happens next". */
html.pl .thanks-add { margin: var(--space-3) 0 0; }
/* Home: sample Scorecard (same fictional business as the hero's Profile pick) instead of the old image slot. */
html.pl .checks-sample { align-self: center; width: 100%; max-width: 30rem; margin-inline: auto; }
/* T161 (Lumen QA Oct 30): the checks sample card uses the standard card padding on all sides (was the hero's compact 12/16/8). */
html.pl .hv-score.hv-checks-sc { padding: var(--sp-card); }
/* T161 follow-up (Lumen spot check aa54a15): below 820 the checks card drops the hero's 40px side margins and fills the column; "Free Scorecard" stays on one line (the business name below it still wraps if needed). 820+ unchanged. */
@media (max-width: 819.98px) {
  html.pl .checks-sample .hv-score.hv-checks-sc { margin-inline: 0; }
  html.pl .hv-checks-sc .hv-title { white-space: nowrap; }
  html.pl .hv-checks-sc .hv-biz { white-space: normal; }
}
/* Service pages: the full-journey link under the short step list; Start-up's Nonprofit Starter box. */
html.pl .bx-journey-link { margin-top: var(--space-5); }
html.pl .bx-pw { margin-top: var(--space-3); }
html.pl .bx-np-box { max-width: 48rem; }
html.pl .intake-more { margin-top: var(--space-5); }
/* How it works page: the 10-step journey, two groups (stacked on phones, side by side from 900px). */
html.pl .jr-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { html.pl .jr-grid { grid-template-columns: 1fr 1.4fr; align-items: start; } }
html.pl .jr-group { border-radius: var(--radius-card, 1rem); padding: var(--space-5); background: var(--c-card, var(--white)); border: var(--line-w) solid var(--c-line); }
html.pl:not([data-mode="dark"]) .jr-group { box-shadow: var(--float-shadow); }
html.pl .jr-h { margin: 0 0 var(--space-4); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); color: var(--c-heading); }
html.pl .jr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
html.pl .jr-step { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: center; min-height: 44px; }
html.pl .jr-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: var(--line-w) solid var(--line-light, var(--c-line)); background: var(--white); color: var(--navy); font-weight: var(--fw-semibold); font-size: .9375rem; }
html.pl .jr-t { color: var(--c-text); font-weight: var(--fw-medium, 500); }
html.pl .jr-timeline { margin-top: var(--space-6); }
html.pl .bx-box p.bx-pw { margin-top: var(--space-3); }
/* Phone footer: Site (6 links) spreads to the height of Services (7 links), so both columns end on the same line. */
@media (max-width: 767px) {
  html.pl .pf-ft nav.ft-col { display: flex; flex-direction: column; }
  html.pl .pf-ft nav.ft-col ul { flex: 1; display: grid; align-content: space-between; }
}
html.pl .nw { white-space: nowrap; }
/* T154 (Lumen QA Oct 30): the amber "Get my free Scorecard" button in the near-black Lights-on band is medium (500) like every other button. */
html.pl .lights-on .btn-cta { font-weight: var(--fw-medium); }

/* ===== Final launch batch (Oct 30, 2026; final-batch-oct30.md). Polish builds only. ===== */

/* #4 Home: "who you work with" line under "Your full journey" (text only). */
html.pl .intake-who { margin: var(--space-5) 0 0; max-width: 40rem; font-size: var(--fs-lead, 1.125rem); line-height: 1.6; color: var(--c-heading); }
html.pl .intake-who-link { margin-top: var(--space-3); }

/* #12 Home: trust row right under Our promise (4 bullets, amber dots, mockup 01). */
html.pl .trust-row { list-style: none; margin: var(--space-6) auto 0; padding: 0; max-width: 36rem; display: grid; gap: var(--space-3); text-align: left; }
html.pl .trust-row li { position: relative; padding-left: 1.5rem; color: var(--c-heading); font-weight: var(--fw-medium); line-height: 1.55; }
html.pl .trust-row li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }

/* #14 Home: second muted caption line under the Google Profile sample. */
html.pl .hv-foot-2 { display: block; margin-top: var(--space-2); }

/* #7 Home length: the Lit/Found/Booked location badge is gone (empty proof row collapses); lantern art capped at ~40% of the screen on phones. */
html.pl .pf-proof:not(:has(*)) { display: none; }
@media (max-width: 767px) { html.pl .lights-on .lo-svg { max-height: 40vh; } }

/* #11 iPad (820+) hero: "Get my free Scorecard" at its normal width, not the full column. */
@media (min-width: 820px) { html.pl .hero .cta-row .btn { flex: 0 0 auto; } }

/* #5 Scorecard Thanks: "Want to talk sooner? Book a free consultation call." */
html.pl .thanks-sooner { margin: var(--sp-stack) 0 0; }
html.pl .thanks-book { font-weight: var(--fw-semibold); }

/* #6 Free Scorecard page: Built by line, then the Home sample card (Sample label), above the form. */
html.pl .sc-built { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--c-muted); }
html.pl .sc-built.sc-area { margin-top: var(--space-1); }  /* fix round #6 (T203/3a): full location line in the Scorecard page copy */
html.pl .sc-sample { margin-top: var(--space-5); max-width: 30rem; }
html.pl .sc-sample .hv-score { margin: 0; }

/* #15 Portfolio page (approved mockup /tmp/lm-portfolio/portfolio/, CSS ported as is) */
html.pl .pfo-head { margin-bottom: var(--space-5); }
html.pl .pfo-head .kicker { margin: 0 0 var(--space-3); }
html.pl .pfo-head .bx-h2 { margin: 0 0 var(--space-3); }
html.pl .pfo-head .bx-muted { margin: 0; }
html.pl .pfo-strip { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
html.pl .pfo-shot figure { margin: 0; }
html.pl .pfo-frame { display: block; border: var(--line-w) solid var(--c-card-line); border-radius: 14px; overflow: hidden; background: var(--c-card); box-shadow: 0 1px 2px rgba(18,42,86,.06), 0 6px 18px rgba(18,42,86,.06); }
html.pl .pfo-frame img { display: block; width: 100%; height: auto; }
html.pl .pfo-shot figcaption { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
html.pl .pfo-step { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: .75rem; background: var(--navy-100); color: var(--navy); }
html.pl .pfo-step-final { background: var(--amber); color: var(--navy); }
html.pl .pfo-final { grid-column: 1 / -1; }
html.pl .pfo-final figure { max-width: 420px; margin: 0 auto; }
html.pl .pfo-final .pfo-frame { border: 2px solid var(--amber); }
html.pl .pfo-final figcaption { justify-content: center; }
html.pl .pfo-own-grid { align-items: stretch; }
html.pl .pfo-results-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
html.pl .pfo-results-top .bx-box-h { margin: 0; }
html.pl .pfo-chart { display: block; width: 100%; height: 96px; margin-bottom: var(--space-3); }
html.pl .pfo-chart path { fill: none; vector-effect: non-scaling-stroke; }
html.pl .pfo-axis { stroke: var(--c-card-line); stroke-width: 2; }
html.pl .pfo-gl { stroke: var(--c-card-line); stroke-width: 1; stroke-dasharray: 4 6; }
html.pl .pfo-line { stroke: var(--c-muted); stroke-width: 2.5; stroke-dasharray: 6 7; opacity: .55; }
html.pl .pfo-results-p { margin: 0; }
html.pl .pfo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
html.pl .pfo-spot { display: flex; flex-direction: column; gap: var(--space-3); }
html.pl .pfo-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 2 / 1; padding: 10px; border: 2px dashed var(--c-card-line); border-radius: 12px; background: color-mix(in srgb, var(--c-muted) 10%, transparent); }
html.pl .pfo-slot span { border-radius: 8px; background: color-mix(in srgb, var(--c-muted) 18%, transparent); }
html.pl .pfo-spot-h { font-size: var(--fs-h3); margin: 0; }
html.pl .pfo-covers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
html.pl .pfo-covers li { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-medium); }
html.pl .pfo-ci { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; font-weight: var(--fw-semibold); background: var(--navy-100); color: var(--navy); }
html.pl .pfo-note { margin: var(--space-5) 0 0; text-align: center; color: var(--c-muted); font-size: var(--fs-small); }
html.pl[data-mode="dark"] .pfo-step, html.pl[data-mode="dark"] .pfo-ci { background: var(--c-card-line); color: var(--c-text); }
html.pl[data-mode="dark"] .pfo-step-final { background: var(--amber); color: var(--navy); }
@media (min-width: 640px) {
  html.pl .pfo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.pl .pfo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 640px) { .pfo-slot { aspect-ratio: 16 / 10; } }
html.pl .pfo-step { flex: none; }

/* #15 nav: the extra "Portfolio" item needs a tighter desktop nav below 1200px (approved mockup site.css) */
@media (min-width: 960px) and (max-width: 1199px) {
  html.pl .nav-desktop { margin-left: var(--space-3); }
  html.pl .nav-desktop ul { gap: 0; }
  html.pl .nav-desktop > ul > li > a, html.pl .nav-desktop .sub-row > a { padding-left: var(--space-2); padding-right: var(--space-2); }
  html.pl .nav-desktop .sub-row > a { padding-right: 0; }
  html.pl .nav-desktop .sub-toggle { min-width: 24px; }
  html.pl .header-actions { gap: var(--space-2); }
}
@media (min-width: 960px) and (max-width: 1079px) {
  html.pl .nav-desktop > ul > li > a, html.pl .nav-desktop .sub-row > a { font-size: .8125rem; padding-left: 6px; padding-right: 6px; }
  html.pl .nav-desktop .sub-row > a { padding-right: 0; }
}

/* Final batch #2/#11/#15: one Scorecard CTA on screen at a time (Layout.mjs ONECTA). The bar stays hidden until the
   script has measured, so it never flashes over the hero; without JS (no html.js) the bar and pill behave as before. */
html.pl.js:not(.oc) .scbar, html.pl.oc-bar-off .scbar { visibility: hidden; transform: translateY(100%); }
html.pl.oc-pill-off .hdr-cta { visibility: hidden; opacity: 0; }
html.pl .scbar { transition: transform .2s ease, visibility .2s; }
html.pl .hdr-cta { transition: opacity .2s ease, visibility .2s; }
@media (prefers-reduced-motion: reduce) { html.pl .scbar, html.pl .hdr-cta { transition: none; } }

/* ---------- Final batch #13: Easter eggs (public/js/lamplit-extras.js). Never block content; reduced motion = no animation. ---------- */
html.pl .logo { position: relative; }
.egg-flame { position: absolute; left: 0; right: 0; top: var(--space-2); bottom: var(--space-2); pointer-events: none; }
.egg-flame-dot { position: absolute; left: 67.5%; width: 9%; top: 8%; height: 32%; pointer-events: auto; cursor: pointer; }
[data-mode="dark"] .egg-flame-dot { left: 70%; }
.egg-flame-dot::before { content: ""; position: absolute; left: 14%; right: 14%; top: 10%; bottom: 0; background: var(--c-header-bg); opacity: 0; }
html.egg-flick .egg-flame-dot::before { animation: egg-flick .9s steps(1, end) 1; }
@keyframes egg-flick { 0% { opacity: 1; } 18% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 1; } 70% { opacity: 0; } 82% { opacity: .6; } 100% { opacity: 0; } }
html.egg-warm body { animation: egg-warm 1.4s ease 1; }
@keyframes egg-warm { 0%, 100% { filter: none; } 15% { filter: brightness(.82); } 30% { filter: brightness(1.06) sepia(.12); } 45% { filter: brightness(.9); } 65% { filter: brightness(1.04) sepia(.08); } }
.egg-toast { position: fixed; left: 50%; top: calc(var(--header-h) + 12px); transform: translate(-50%, -8px); z-index: 70; max-width: min(92vw, 360px);
  padding: 10px 16px; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 500; font-size: .9375rem; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; box-shadow: var(--c-float-shadow); }
.egg-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.egg-toast a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
[data-mode="dark"] .egg-toast { background: var(--amber); color: var(--black-page); }
[data-mode="dark"] .egg-toast a { color: var(--black-page); }
a.egg-link { color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a.egg-link:hover { text-decoration-color: var(--amber); }
.egg-lantern { display: block; width: 72px; margin: 0 0 var(--space-3); cursor: pointer; filter: grayscale(1); opacity: .45; transition: filter .4s ease, opacity .4s ease; }
.egg-lantern img { width: 100%; height: auto; }
.egg-lantern.is-lit { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--amber) 70%, transparent)); opacity: 1; }
.site-footer .egg-late, .site-footer .egg-end { margin: var(--space-2) 0 0; font-size: .8125rem; color: inherit; opacity: .85; }
.story-echo .story-node, .story-echo .story-trace, .story-echo .pin-dot { transition: box-shadow .4s ease, border-color .4s ease, filter .4s ease; }
.story-echo.is-lit .story-node { box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 25%, transparent), 0 0 18px var(--amber); }
.story-echo.is-lit .story-trace { border-left-color: var(--amber); }
.story-echo.is-lit .pin-story { filter: drop-shadow(0 0 8px var(--amber)); }
html.pl .story .verse cite { cursor: default; }
html.egg-first .hero { animation: egg-first 2.6s ease 1; }
@keyframes egg-first { 0% { box-shadow: inset 0 0 0 0 transparent; } 40% { box-shadow: inset 0 -120px 160px -80px color-mix(in srgb, var(--amber) 30%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
html.egg-lantern body::after, html.egg-sunset body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; }
html.egg-lantern body::after { background: radial-gradient(circle at 50% 40%, transparent 35%, color-mix(in srgb, var(--amber) 16%, transparent) 75%, color-mix(in srgb, var(--navy) 28%, transparent) 100%); }
html.egg-sunset body::before { background: color-mix(in srgb, var(--amber) 5%, transparent); mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  html.egg-flick .egg-flame-dot::before, html.egg-warm body, html.egg-first .hero { animation: none; }
  .egg-toast, .egg-lantern, .story-echo .story-node, .story-echo .story-trace, .story-echo .pin-dot { transition: none; }
}
.lo-page-mark { width: 96px; margin: 0 0 var(--space-4); }
.lo-page-mark img { width: 100%; height: auto; }

/* ---------- Final batch #16: Lumi nudges. Not a modal: no backdrop, no focus trap, no scroll lock. ---------- */
.lumi { position: fixed; z-index: 65; color: var(--navy); font-size: .9375rem; line-height: 1.45; }
.lumi[hidden] { display: none; }
.lumi .lumi-text { margin: 0; }
.lumi-art { flex: none; display: block; }
.lumi-art img, .lumi-art picture { display: block; width: 100%; height: auto; }
.lumi-art .lumi-d, [data-mode="dark"] .lumi-art .lumi-l { display: none; }
[data-mode="dark"] .lumi-art .lumi-d { display: block; }
.lumi-x { flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
.lumi-x:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0; }
.lumi-bubble { display: flex; align-items: flex-start; gap: 8px; }
/* Nudge 1: card pinned to the bottom, 12px from the edges, replacing the Scorecard bar */
.lumi-n1 { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 56px 1fr; gap: 12px 8px; align-items: center;
  padding: 12px; background: var(--white); border: var(--line-w) solid var(--c-line); border-radius: 16px; box-shadow: var(--c-float-shadow); }
.lumi-n1 .lumi-art { width: 56px; }
.lumi-n1 .lumi-bubble { position: relative; display: block; padding: 10px 34px 10px 14px; border-radius: 14px; background: var(--band); font-size: .875rem; }
.lumi-n1 .lumi-x { position: absolute; top: 0; right: 0; margin: 0; }
.lumi-cta .btn-ic { --ic-n: currentColor; }
.lumi-n1 .lumi-text strong { font-weight: 600; }
.lumi-cta { grid-column: 1 / -1; width: 100%; max-width: none; justify-content: center; background: var(--navy); color: var(--white); border-color: var(--navy); }
.lumi-cta:hover { background: var(--navy); color: var(--white); }
body.lumi-pad { padding-bottom: var(--lumi-pad, 180px); }
@media (min-width: 768px) { .lumi-n1 { left: auto; width: 360px; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); } }
/* Nudge 2: small bubble bottom-right, above the floating Scorecard bar */
.lumi-n2 { right: 12px; bottom: calc(var(--lumi-above, 0px) + 12px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 6px; max-width: min(calc(100vw - 24px), 330px); }
.lumi-n2 .lumi-bubble { max-width: 270px; padding: 12px 12px 12px 16px; background: var(--white); border: var(--line-w) solid var(--c-line); border-radius: 16px; box-shadow: var(--c-float-shadow); }
.lumi-n2 .lumi-art { width: 52px; }
.lumi.is-tucked { visibility: hidden; opacity: 0; }
.lumi { opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.lumi.is-in { opacity: 1; transform: none; }
.lumi.is-in.is-tucked { opacity: 0; transform: translateY(16px); }
[data-mode="dark"] .lumi { color: var(--cream); }
[data-mode="dark"] .lumi-n1, [data-mode="dark"] .lumi-n2 .lumi-bubble { background: var(--black-card); border-color: var(--black-line); }
[data-mode="dark"] .lumi-n1 .lumi-bubble { background: var(--black-panel); }
[data-mode="dark"] .lumi-x { color: var(--cream); }
[data-mode="dark"] .lumi-cta, [data-mode="dark"] .lumi-cta:hover { background: var(--amber); color: var(--black-page); border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .lumi, .lumi.is-in, .lumi.is-in.is-tucked { transition: none; transform: none; } }

/* Fix round #5 (email egg 5): the Bright Idea Bakery joke sample is one card across the pair */
html.pl .gbp-pair.is-joke { grid-template-columns: 1fr; }

/* Fix round #1 (T202/U1): an in-page Scorecard button waits (faded out, space kept) while another one is on screen (Layout.mjs ONECTA) */
html.pl main a.btn-cta { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity .2s ease; }
html.pl main a.btn-cta.oc-wait { opacity: 0; pointer-events: none; }
/* Polish #1: lights-on band, 820px and wider: the waiting button's slot collapses, so no empty gap shows (T202 rule unchanged). */
@media (min-width: 820px) { html.pl .lights-on a.btn-cta.oc-wait { display: block; width: max-content; height: 0; min-height: 0; padding-block: 0; margin-block: 0; border-width: 0; overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { html.pl main a.btn-cta.oc-wait, html.pl main a.btn-cta:not(.oc-wait) { transition-property: background-color, border-color, color; } }

/* Polish #10: Lumi sits inside the floating Scorecard bar, left of the button (phones, wherever the bar shows); he hides with
   the bar. Bar height is unchanged (Lumi is no taller than the button). Always the dark art: the bar is always dark. */
@media (max-width: 767px) {
  html.pl .scbar.has-lumi { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
  html.pl .scbar.has-lumi .scbar-line { grid-column: 1 / -1; }
}
html.pl .scbar-lumi { display: block; width: 48px; pointer-events: none; }
html.pl .scbar-lumi img, html.pl .scbar-lumi picture { display: block; width: 100%; height: auto; }

/* Polish #8: How it works: the quote-after-the-call line under the Getting started steps. */
html.pl .jr-note { margin: var(--space-3) 0 0; font-size: .9375rem; }
/* Launch N2 (Lumen gate 4330b6d): 820-899px, where the band is one column, its Scorecard button sits beside the heading,
   so showing or collapsing it (polish #1) never changes the band's height: no 52px jump of the lantern art. */
@media (min-width: 820px) and (max-width: 899px) {
  html.pl .lights-on .lights-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); align-items: end; }
  html.pl .lights-on .lights-copy > h2 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  html.pl .lights-on .lights-copy > p:empty { display: none; }
  html.pl .lights-on .lights-copy > a.btn-cta { grid-column: 2; grid-row: 1; margin: 0; }
}