/* ==========================================================================
   MAPPIRE COLOUR: colourway E, Mark Gradient (picked 2026-11-01 from drafts/palette-lab)

   An override layer for the REAL homepage, injected by serve.mjs. Nothing
   here ships. Every rule is scoped under html[data-lab], so with the lab off
   (preset "now") the page renders exactly as production.

   Four independent axes, set on <html> by switcher.js:
     data-ground   white | mist | neutral     the light sections
     data-dark     navy | midnight            the dark chapters
     data-rhythm   finale | three | four      which sections go dark
     data-accent   brand | signal | mark      what the CTA and live states wear

   Kept in every option, untouched: the five brand swatches, Deep Navy as THE
   brand colour, the mark and its gradient, type, layout, motion, copy.
   What changes is the distribution: ground, chapter rhythm, the text ladder,
   card surfaces and where (if anywhere) a signal colour is allowed.
   ========================================================================== */

/* ── 1. Tokens per axis ──────────────────────────────────────────────────── */

/* Text ladder, light sections. One step per job, every step passes AA on
   every light ground below (measured: ink 15.8, body 10.8, muted 5.5 on
   white). The current page sets muted copy in #7D93A6 (2.96:1) and dims
   paragraphs with navy at .18 alpha, which is the "washed out" feeling. */
html[data-lab] {
  --lab-ink: #0A2341;          /* Deep Navy, brand */
  --lab-body: #2D3F52;         /* slate, hue of the brand, a third of its chroma */
  --lab-muted: #5C6B7A;        /* 5.5:1 on white */
  --lab-faint: #8794A1;        /* rules and numerals only, never sentences */

  --lab-dk-ink: #FFFFFF;
  --lab-dk-body: #C3CFDA;      /* Blue Gray, lifted */
  --lab-dk-muted: #93A6B8;     /* Misty Blue family, 7:1 on navy */
}

/* Ground. "white" is the Stripe/Mapbox move: neutrals near white, brand hue
   only where it means something. "mist" keeps today's #F4F7FA but stops it
   being the ONLY surface. "neutral" takes the blue out of the greys entirely
   (Linear's "limit the chrome"), so navy is the only blue on the page. */
html[data-ground="white"] {
  --lab-bg: #FFFFFF;
  --lab-bg-alt: #F5F7FA;
  --lab-card: #F5F7FA;          /* card on white */
  --lab-card-alt: #FFFFFF;      /* card on the alt band */
  --lab-line: #E3E8EE;
  --lab-line-2: #D3DBE4;
  --lab-fill: #EEF2F6;
  --lab-shadow: 0 1px 2px rgba(10, 35, 65, .04), 0 8px 24px -12px rgba(10, 35, 65, .10);
}
html[data-ground="mist"] {
  --lab-bg: #F4F7FA;
  --lab-bg-alt: #FFFFFF;
  --lab-card: #FFFFFF;
  --lab-card-alt: #F4F7FA;
  --lab-line: #DCE3EA;
  --lab-line-2: #C8D4DE;
  --lab-fill: #E9EEF3;
  --lab-shadow: 0 1px 2px rgba(10, 35, 65, .05), 0 10px 28px -14px rgba(10, 35, 65, .14);
}
html[data-ground="neutral"] {
  --lab-bg: #FAFAF9;
  --lab-bg-alt: #F2F2F0;
  --lab-card: #FFFFFF;
  --lab-card-alt: #FFFFFF;
  --lab-line: #E7E6E3;
  --lab-line-2: #D9D8D4;
  --lab-fill: #F0EFEC;
  --lab-body: #34383F;
  --lab-muted: #67696D;
  --lab-faint: #9A9A97;
  --lab-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .10);
}

/* Dark chapters. Navy is Deep Navy, the brand at full strength. Midnight is
   the brand's own darkest swatch with Deep Navy as the panel, plus the mark's
   gradient as a single glow, which is the only gradient on the page. */
html[data-dark="navy"] {
  --lab-dk: #0A2341;
  --lab-dk-2: #132C4C;
  --lab-dk-3: #1C3757;
  --lab-dk-line: rgba(200, 212, 222, .16);
  --lab-dk-line-solid: #2A4360;
  --lab-dk-glow: none;
}
html[data-dark="midnight"] {
  --lab-dk: #040E1B;
  --lab-dk-2: #0A1A2D;
  --lab-dk-3: #0F2238;
  --lab-dk-line: rgba(200, 212, 222, .12);
  --lab-dk-line-solid: #1B2D44;
  --lab-dk-glow: radial-gradient(70% 55% at 50% 0%, rgba(72, 108, 139, .34), rgba(72, 108, 139, 0) 70%);
}

/* Accent. "brand" spends nothing new: the CTA is Deep Navy, and the calm
   tint (Nemo's Stripe note, brain inspirations 2026-06-16) is Steel Blue.
   "signal" adds ONE saturated colour at the brand's own hue (OKLCH 258,
   navy is 255): the blue dot. CTAs, live states and key numbers only. */
html[data-accent="brand"] {
  --lab-cta: #0A2341;
  --lab-cta-hover: #1B3A5C;
  --lab-cta-ink: #FFFFFF;
  --lab-tint: #436888;
  --lab-data: #436888;
  --lab-dk-cta: #FFFFFF;
  --lab-dk-cta-ink: #0A2341;
  --lab-dk-tint: #95ADC0;
}
html[data-accent="signal"] {
  --lab-cta: #0061D8;
  --lab-cta-hover: #0A6DDD;
  --lab-cta-ink: #FFFFFF;
  --lab-tint: #0061D8;
  --lab-data: #0061D8;
  --lab-dk-cta: #0A6DDD;
  --lab-dk-cta-ink: #FFFFFF;
  --lab-dk-tint: #60AAF3;
}

/* "mark" spends nothing new either: it is the logo's own gradient
   (#060E18 > #486C8B > #BECCD7, brand/README), which the page has never used.
   Dark chapters fall through it, the How-it-works rail draws in it. */
html[data-accent="mark"] {
  --lab-cta: #0A2341;
  --lab-cta-hover: #1B3A5C;
  --lab-cta-ink: #FFFFFF;
  --lab-tint: #436888;
  --lab-data: #486C8B;
  --lab-dk-cta: #FFFFFF;
  --lab-dk-cta-ink: #0A2341;
  --lab-dk-tint: #BECCD7;
  --lab-mark: linear-gradient(180deg, #060E18 0%, #486C8B 55%, #BECCD7 100%);
}

/* ── 2. Map the tokens onto the captured sheet's own ramp ─────────────────
   The page is a palette-inverted Osmo capture: --color-neutral-900 is the
   ground and -100 the ink. Overriding the ramp moves everything that is
   variable-driven at once; the hardcoded rgba(10,35,65,x) values are restated
   per component further down. html[data-lab] outranks the :root !important. */
html[data-lab] {
  --color-neutral-900: var(--lab-bg) !important;
  --color-neutral-800: var(--lab-fill) !important;
  --color-neutral-700: var(--lab-line) !important;
  --color-neutral-600: var(--lab-line-2) !important;
  --color-neutral-500: var(--lab-muted) !important;
  --color-neutral-400: var(--lab-muted) !important;
  --color-neutral-300: var(--lab-body) !important;
  --color-neutral-200: var(--lab-body) !important;
  --color-neutral-100: var(--lab-ink) !important;
  --color-white: var(--lab-ink) !important;
  --color-black: var(--lab-bg) !important;
  --color-dark: var(--lab-bg) !important;
  --color-light: var(--lab-ink) !important;
  --pp-bone: var(--lab-bg);
  --c-paper: var(--lab-bg);
  --color-primary: var(--lab-data);
}
html[data-lab] body { background-color: var(--lab-bg); color: var(--lab-body); }

/* the alternate band */
html[data-lab] .lab-alt { background-color: var(--lab-bg-alt); }

/* ── 3. Light-section hygiene, all options ─────────────────────────────── */

/* headings are the brand, body is slate, nothing in between */
html[data-lab] :is(.h-display, .h-large, .h-medium, .h-small, h1, h2, h3) { color: var(--lab-ink); }

/* primary CTA. The current CTA paints in the body colour, so it is the same
   navy as every heading and does not read as the thing to press. */
html[data-lab] .button > .button-bg:not(.is--secondary):not(.black):not(.is--dark-outline) { background-color: var(--lab-cta); }
html[data-lab] .button:hover > .button-bg:not(.is--secondary):not(.black):not(.is--dark-outline) { background-color: var(--lab-cta-hover); }
html[data-lab] .button:not(.is--secondary) { color: var(--lab-cta-ink); }
/* labels are split into .single-letter spans and sit inside <p>, which
   section-level text rules would otherwise repaint */
html[data-lab] .button:not(.is--secondary) :is(p, .single-letter, .single-line) { color: var(--lab-cta-ink) !important; }
html[data-lab] .button.is--secondary :is(p, .single-letter, .single-line) { color: var(--lab-ink) !important; }
/* secondary: a real outline instead of a 15% white blur that vanished on mist */
html[data-lab] .button-bg.is--secondary { background-color: transparent; border: 1px solid var(--lab-line-2); backdrop-filter: none; }
html[data-lab] .button.is--secondary { color: var(--lab-ink); }

/* header: wear the ground, not a hardcoded mist gradient */
html[data-lab] .header-bg {
  background-image: linear-gradient(var(--lab-bg) 0%, color-mix(in srgb, var(--lab-bg) 70%, transparent) 50%, transparent 100%) !important;
}
html[data-lab] .header .nav-link-text, html[data-lab] .header .eyebrow { color: var(--lab-ink); }
html[data-lab] :is(.home-hero-bg, .gradient-overlay) {
  background-image: linear-gradient(var(--lab-bg) 0%, color-mix(in srgb, var(--lab-bg) 30%, transparent) 50%, transparent 100%) !important;
}

/* hero: capability index was misty blue at 2.2:1 */
html[data-lab] [data-hero-section] p { color: var(--lab-body); }
html[data-lab] [data-hero-section] .hero-vid-cta .button-bg { background-color: var(--lab-cta) !important; }
/* the card's frosted .hero-vid-bg was painted OVER its own button, which is
   why "Read the case" read as a faded gradient in every colourway */
html[data-lab] .hero-vid-cta { position: relative; z-index: 2; }

/* brands: logos sat in grey tiles inside a grey page, three greys deep. One
   hairline grid, no fills; the logos carry the row. */
html[data-lab] .brand-cell { background-color: transparent !important; border-color: var(--lab-line) !important; }
html[data-lab] .brand-cell img { opacity: .62; filter: grayscale(1) contrast(1.1); }

/* product cards: lift them OFF the band instead of tinting them into it */
html[data-lab] #product :is(.f-grid-card, .f-grid-basics__item) {
  background-color: var(--lab-card-alt) !important;
  border-color: var(--lab-line) !important;
  box-shadow: var(--lab-shadow);
}
html[data-lab] #product :is(.dash-icon-card) { background-color: var(--lab-fill) !important; border-color: var(--lab-line) !important; }
html[data-lab] #product p { color: var(--lab-body); }
html[data-lab] #product .p-reg.opacity--60, html[data-lab] #product .text-container p { color: var(--lab-muted); }

/* the analytics proof card was Osmo's warm black #161922 with warm greys:
   the one panel on the page in the wrong temperature */
html[data-lab] .analytics-proof { background-color: var(--lab-ink) !important; border-color: var(--lab-ink) !important; }
html[data-lab] .analytics-proof__metric { background-color: rgba(255, 255, 255, .06) !important; }
html[data-lab] .analytics-proof__bar { background-color: color-mix(in srgb, var(--lab-dk-tint) 55%, transparent) !important; }
html[data-lab] .analytics-proof__bar:nth-child(n+5):nth-child(-n+8) { background-color: var(--lab-dk-tint) !important; }

/* problem accordion, light: cards in the card colour, quiet rows legible */
html[data-lab] .faq-item.is--problem { background-color: var(--lab-card) !important; border-color: var(--lab-line) !important; }
html[data-lab] .faq-item.is--problem p { color: var(--lab-body); }
html[data-lab] #problem .faq-item.is--problem .w-richtext p { color: var(--lab-body); }
html[data-lab] #problem.lab-dark .faq-item.is--problem .w-richtext p { color: var(--lab-dk-body); }

/* how it works: the rail and markers in brand, the dimmed steps legible */
html[data-lab] .step-timeline__fill { background-color: var(--lab-ink) !important; }
html[data-lab][data-accent="signal"] .step-timeline__fill,
html[data-lab][data-accent="signal"] [data-step-timeline-item].is--current .step-timeline__marker,
html[data-lab][data-accent="signal"] .step-timeline__item.is--current .step-timeline__marker { background-color: var(--lab-cta) !important; }
html[data-lab] .step-timeline__line { background-color: var(--lab-line-2) !important; }

/* built for your space */
html[data-lab] .filter-bar { background-color: var(--lab-fill) !important; border-color: var(--lab-line) !important; }
html[data-lab] .tab-button__bg { background-color: var(--lab-cta) !important; }
html[data-lab] .yours-movement { border-color: var(--lab-line) !important; }
html[data-lab] .osmo-dark-tag, html[data-lab] .icons-soon { background-color: var(--lab-data) !important; }
html[data-lab] #custom .mon-cell, html[data-lab] #monetization .mon-cell { background-color: var(--lab-card-alt); border-color: var(--lab-line) !important; box-shadow: var(--lab-shadow); }
html[data-lab] .mon-cell__stage { background-color: var(--lab-fill) !important; }
html[data-lab] .db-base { border-color: var(--lab-line) !important; }

/* industries: grey icon in a grey box in a grey card in a grey page */
html[data-lab] .industry-card.db-content__card { background-color: var(--lab-card-alt) !important; border-color: var(--lab-line) !important; }
html[data-lab]:not([data-rhythm="finale"]) #industries .industry-card.db-content__card { background-color: var(--lab-card) !important; }
html[data-lab] .industry-card .db-card__visual { background-color: var(--lab-fill) !important; }
html[data-lab] .industry-card .db-card__visual svg { opacity: 1; color: var(--lab-ink); }
html[data-lab][data-accent="signal"] .industry-card .db-card__visual svg { color: var(--lab-cta); }
html[data-lab] .industry-card .db-card__sub { opacity: 1; color: var(--lab-muted); }

/* why */
html[data-lab] .osmo-plan-card.is--mappire { background-color: var(--lab-ink) !important; border-color: var(--lab-ink) !important; }
html[data-lab][data-dark="midnight"] .osmo-plan-card.is--mappire { background-color: #040E1B !important; }
html[data-lab] .osmo-plan-card.is--traditional { background-color: var(--lab-card-alt) !important; border-color: var(--lab-line) !important; }
html[data-lab] .osmo-plan-card.is--traditional p { color: var(--lab-muted); }
html[data-lab] .t-row.is--alt { background-color: var(--lab-fill) !important; }
html[data-lab] .feat-icon-circle { background-color: var(--lab-fill) !important; }

/* faq */
html[data-lab] .faq-link { border-color: var(--lab-line) !important; }
html[data-lab] #faq p { color: var(--lab-body); }

/* gradient dividers were hardcoded Osmo cream #efeeec */
html[data-lab] .divider { background-image: linear-gradient(90deg, transparent, var(--lab-line-2) 25% 75%, transparent) !important; }

/* calm tint: the case-chip tags and proof numbers take the accent, the way
   Stripe tints a few words rather than bolding them */
html[data-lab] .cta-proof__num, html[data-lab] .case-chip-tag { color: var(--lab-tint) !important; }


/* ── 4. Dark chapters ─────────────────────────────────────────────────────
   The section restates the ramp in light-on-dark, so every variable-driven
   rule flips with it; the hardcoded rgba(10,35,65,x) washes are restated as
   white washes underneath. */
html[data-lab] .lab-dark {
  --color-neutral-900: var(--lab-dk) !important;
  --color-neutral-800: var(--lab-dk-2) !important;
  --color-neutral-700: var(--lab-dk-3) !important;
  --color-neutral-600: var(--lab-dk-line-solid) !important;
  --color-neutral-500: var(--lab-dk-muted) !important;
  --color-neutral-400: var(--lab-dk-muted) !important;
  --color-neutral-300: var(--lab-dk-body) !important;
  --color-neutral-200: var(--lab-dk-body) !important;
  --color-neutral-100: var(--lab-dk-ink) !important;
  --color-white: var(--lab-dk-ink) !important;
  --color-black: var(--lab-dk) !important;
  --color-dark: var(--lab-dk) !important;
  --color-light: var(--lab-dk-ink) !important;
  --lab-line: var(--lab-dk-line);
  --lab-line-2: var(--lab-dk-line);
  --lab-fill: rgba(255, 255, 255, .05);
  --lab-card: var(--lab-dk-2);
  --lab-card-alt: var(--lab-dk-2);
  --lab-tint: var(--lab-dk-tint);
  background-color: var(--lab-dk);
  color: var(--lab-dk-body);
}
html[data-lab] .lab-dark-start { background-image: var(--lab-dk-glow); }

/* mark: each chapter opens on the mark's darkest stop and settles into Deep
   Navy; the footer, the last thing on the page, ends on the mark's steel */
html[data-lab][data-accent="mark"] .lab-dark-start { background-image: linear-gradient(180deg, #060E18 0%, #0A2341 70%); }
html[data-lab][data-accent="mark"] footer.lab-dark { background-image: linear-gradient(180deg, #0A2341 0%, #0A2341 30%, #2A4B6C 78%, #486C8B 100%); }
html[data-lab][data-accent="mark"] .step-timeline__fill { background-color: transparent !important; background-image: var(--lab-mark) !important; }
html[data-lab][data-accent="mark"] .analytics-proof__bar { background-image: linear-gradient(180deg, #BECCD7, #486C8B) !important; }
html[data-lab] .lab-dark :is(.h-display, .h-large, .h-medium, .h-small, h1, h2, h3, h4, h5, .single-line, .single-letter) { color: var(--lab-dk-ink); }
html[data-lab] .lab-dark :is(p, li) { color: var(--lab-dk-body); }
html[data-lab] .lab-dark .eyebrow { color: var(--lab-dk-muted); }
html[data-lab] .lab-dark a.link { color: var(--lab-dk-body); }

/* buttons on dark */
html[data-lab] .lab-dark .button > .button-bg:not(.is--secondary):not(.black):not(.is--dark-outline) { background-color: var(--lab-dk-cta); }
html[data-lab] .lab-dark .button:hover > .button-bg:not(.is--secondary):not(.black):not(.is--dark-outline) { background-color: var(--lab-dk-cta); filter: brightness(.94); }
html[data-lab] .lab-dark .button:not(.is--secondary), html[data-lab] .lab-dark .button:not(.is--secondary) p { color: var(--lab-dk-cta-ink); }
html[data-lab] .lab-dark .button-bg.is--secondary { border-color: rgba(255, 255, 255, .22); }
html[data-lab] .lab-dark .button.is--secondary, html[data-lab] .lab-dark .button.is--secondary p { color: var(--lab-dk-ink); }

/* the button label is split into .single-letter spans, which the heading
   rule above would otherwise paint white on a white button */
html[data-lab] .lab-dark .button:not(.is--secondary) :is(.single-letter, .single-line, p) { color: var(--lab-dk-cta-ink) !important; }
html[data-lab] .lab-dark .button.is--secondary :is(.single-letter, .single-line, p) { color: var(--lab-dk-ink) !important; }
html.lab-head-dark[data-lab] .header .button:not(.is--secondary) :is(.single-letter, .single-line, p) { color: var(--lab-dk-cta-ink) !important; }

/* header over a dark chapter */
html.lab-head-dark[data-lab] .header-bg {
  background-image: linear-gradient(var(--lab-dk) 0%, color-mix(in srgb, var(--lab-dk) 70%, transparent) 50%, transparent 100%) !important;
}
html.lab-head-dark[data-lab] .header :is(.nav-link-text, .eyebrow) { color: #FFFFFF; }
html.lab-head-dark[data-lab] .header :is(#nav-wordmark, .dash-side__logo-icon) { filter: invert(1) brightness(2); }
html.lab-head-dark[data-lab] .header .button > .button-bg:not(.is--secondary):not(.black) { background-color: var(--lab-dk-cta); }
html.lab-head-dark[data-lab] .header .button:not(.is--secondary), html.lab-head-dark[data-lab] .header .button:not(.is--secondary) .single-letter { color: var(--lab-dk-cta-ink); }

/* demo: the frame becomes a lit screen on a dark wall */
html[data-lab] .lab-dark .demo-frame { background-color: rgba(255, 255, 255, .04) !important; border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark .demo-frame__inner { background-color: var(--lab-dk-2) !important; }

/* problem on dark: the accordion cards become panels, the media keeps its
   own photography but loses the warm-brown scrim */
html[data-lab] .lab-dark .faq-item.is--problem { background-color: var(--lab-dk-2) !important; border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark .faq-item.is--problem :is(p, div) { color: var(--lab-dk-body); }
html[data-lab] .lab-dark .faq-item.is--problem.is--active :is(p, div) { color: var(--lab-dk-ink); }
html[data-lab] .problem-visual-overlay { background-image: linear-gradient(rgba(4, 14, 27, .15) 0%, rgba(4, 14, 27, .45) 45%, rgba(4, 14, 27, .9) 100%) !important; }
html[data-lab] .problem-card-calm { background-color: rgba(10, 35, 65, .78) !important; border-color: rgba(200, 212, 222, .16) !important; }
html[data-lab] .factory-media-item { background-color: var(--lab-dk, #040E1B) !important; }

/* case. The captured rules are id-scoped (#case ...), so these are too. */
html[data-lab] #case.lab-dark .trusted-nav-item { background-color: rgba(255, 255, 255, .04); border-color: var(--lab-dk-line); }
html[data-lab] #case.lab-dark .trusted-nav-item:hover { background-color: rgba(255, 255, 255, .08); }
html[data-lab] #case.lab-dark .trusted-nav-item.active { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
html[data-lab] #case.lab-dark .trusted-nav-item::after { border-color: var(--lab-dk-tint); }
html[data-lab] #case.lab-dark .trusted-nav-item__pill-text { color: var(--lab-dk-body); }
html[data-lab] #case.lab-dark .trusted-nav-item__pill-text strong { color: var(--lab-dk-ink); }
html[data-lab] #case.lab-dark .trusted-nav-item .stat-badge-thumb { border-color: var(--lab-dk-line); }
html[data-lab] #case.lab-dark .testimonial-item { --card--background-color: transparent; background-color: transparent; border-color: var(--lab-dk-line); }
html[data-lab] #case.lab-dark .testimonial-item:hover, html[data-lab] #case.lab-dark .testimonial-item.active { background-color: var(--lab-dk-2); }
html[data-lab] #case.lab-dark .testimonial-item .p-reg { color: var(--lab-dk-body); }
html[data-lab] #case.lab-dark .testimonial-item .p-reg.is--lead-quote { color: var(--lab-dk-ink); }
html[data-lab] #case.lab-dark .testimonial-item-details { border-top-color: var(--lab-dk-line); }
html[data-lab] #case.lab-dark .testimonial-item-details :is(p, div, span) { color: var(--lab-dk-muted); }
html[data-lab] #case.lab-dark .avatar-bio__h4 { color: var(--lab-dk-ink); }
html[data-lab] .lab-dark .case-split-stage { background-color: var(--lab-dk-2) !important; border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark :is(.case-meta-eyebrow, .case-chip-desc, .case-chip-arrow, .case-editorial-p) { color: var(--lab-dk-body) !important; }
html[data-lab] .lab-dark .case-meta-eyebrow { color: var(--lab-dk-muted) !important; }
html[data-lab] .lab-dark .trusted-nav-item { background-color: rgba(255, 255, 255, .04) !important; border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark .trusted-nav-item :is(p, div, span) { color: var(--lab-dk-body); }
html[data-lab] .lab-dark .trusted-nav-item__tag { background-color: var(--lab-dk-cta) !important; color: var(--lab-dk-cta-ink) !important; }
html[data-lab] .lab-dark .testimonial-item { background-color: transparent !important; border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark .testimonial-item-details { border-color: var(--lab-dk-line) !important; }
html[data-lab] .lab-dark .avatar { border-color: var(--lab-dk-line) !important; background-color: rgba(255, 255, 255, .06); }
html[data-lab] .lab-dark .stat-badge-thumb { border-color: var(--lab-dk-line) !important; }

/* final + footer */
html[data-lab] .lab-dark .cta-proof__txt { color: var(--lab-dk-body); }
html[data-lab] .lab-dark .cta-terms { color: var(--lab-dk-muted) !important; }
html[data-lab] footer.lab-dark { border-top: 0; }
html[data-lab] footer.lab-dark :is(#footer-icon, .footer-logo img, .footer-logo-letter) { filter: invert(1) brightness(1.4); opacity: .14; }
html[data-lab] footer.lab-dark .nemo-stamp__mark { background-color: var(--lab-dk-body) !important; }
html[data-lab] #final-cta.lab-dark + * { margin-top: 0; }


/* ── 5. Readability floor (2026-11-01) ──────────────────────────────────
   Audit with axe on every page type: ~100 text nodes under 4.5:1. Nearly all
   were body slate dimmed again with opacity (.35 to .7), plus navy at low
   alpha on the lead form. Dimming now happens with the muted step of the
   text ladder (5.5:1), never with opacity. */
html[data-lab] main :is(p, li, dt, dd, a, span, figcaption, footer, h2, h3, label, div):is(.opacity--45, .opacity--50, .opacity--55, .opacity--60, .opacity--70, .opacity--80),
html[data-lab] main :is(.utility-hero__deck, .utility-status, .solution-demo__note, .case-video figcaption, .factrow dt, dl dt, .layer__n, .faq-num, .eyebrow, .yours-index__i, .search-dummy__text),
html[data-lab] :is(.p-reg, .p-small).opacity--70 .single-line,
html[data-lab] nav[aria-label] ol a {
  opacity: 1 !important;
  color: var(--lab-muted) !important;
}
html[data-lab] .lab-dark :is(p, li, dt, dd, a, span, figcaption, footer, h2, h3, label, div):is(.opacity--45, .opacity--50, .opacity--55, .opacity--60, .opacity--70, .opacity--80),
html[data-lab] .lab-dark :is(.eyebrow, .faq-num, .utility-status),
html[data-lab] .problem-card-calm__desc {
  opacity: 1 !important;
  color: var(--lab-dk-muted) !important;
}
html[data-lab] .problem-card-calm__desc { color: var(--lab-dk-body) !important; }
/* the problem accordion's closed rows: quieter, still readable */
html[data-lab] #problem .faq-item.is--problem :is(p, .single-line) { opacity: 1 !important; }
html[data-lab] #problem .faq-item.is--problem:not(.is--active) :is(p, .single-line, div) { color: var(--lab-muted) !important; }
/* lead form: navy at .32 to .6 alpha */
html[data-lab] :is(.mmv__eyebrow, .mmv__hint, .mmv__opt, .mmv__unit-tag) { color: var(--lab-muted) !important; }
html[data-lab] :is(.mmv__lede, .mmv__drop-sub, .mmv label) { color: var(--lab-body) !important; }
html[data-lab] figcaption { color: var(--lab-muted); }

/* black buttons ("Skip intro"): --color-black is remapped to the ground,
   which painted them white with white text */
html[data-lab] .button:not(.skip-intro) > .button-bg.black { background-color: var(--lab-ink) !important; }
html[data-lab] .button:not(.skip-intro):has(> .button-bg.black) :is(p, .single-letter, .single-line) { color: #FFFFFF !important; }
html.lab-head-dark[data-lab] .button:not(.skip-intro) > .button-bg.black { background-color: #FFFFFF !important; }
html.lab-head-dark[data-lab] .button:not(.skip-intro):has(> .button-bg.black) :is(p, .single-letter, .single-line) { color: var(--lab-ink) !important; }

/* dark chapter openings: a soft steel glow on Deep Navy instead of the
   near-black band (read as a muddy smear over the case study) */
html[data-lab][data-accent="mark"] .lab-dark-start {
  background-color: var(--lab-dk);
  background-image: radial-gradient(80% 60% at 50% 0%, rgba(72, 108, 139, .32), rgba(72, 108, 139, 0) 70%);
}

/* footer wordmark and mark: solid white on the steel gradient */
html[data-lab] footer.lab-dark :is(#footer-icon, .footer-logo img, .footer-logo-letter) { filter: brightness(0) invert(1); opacity: 1; }
/* utility pages (venues, events): copy, sources and crumbs were dimmed with opacity */
html[data-lab] :is(.utility-copy p, .utility-copy li) { opacity: 1 !important; color: var(--lab-body) !important; }
html[data-lab] :is(.utility-copy a, .utility-sources a) { opacity: 1 !important; color: var(--lab-ink) !important; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--lab-line-2); }
html[data-lab] :is(.utility-sources span, .utility-copy th, .utility .crumbs a) { opacity: 1 !important; color: var(--lab-muted) !important; }
html[data-lab] #custom .mon-cell .p-reg, html[data-lab] #dashboard .search-dummy__text { opacity: 1 !important; color: var(--lab-muted) !important; }
/* tags on a coloured fill keep their light label */
html[data-lab] :is(.icons-soon, .osmo-dark-tag) :is(.eyebrow, p, span) { color: #FFFFFF !important; }
/* the footer logo's wrapper carried the dimming (.08), not the images */
html[data-lab] footer.lab-dark .footer-logo { opacity: 1 !important; }
/* phones: the hero card's "Read the case" is a text link (its fill is hidden) */
@media (max-width: 47.9375em) {
  html[data-lab] [data-hero-section] .hero-vid-cta .button :is(p, .single-letter, .single-line) { color: var(--lab-ink) !important; }
}

/* ── 6. Chrome polish (2026-11-01, header reworked 2026-11-02) ─────────────
   Header background: Osmo's own recipe, tuned to our header. The donor has
   no bar and no blur: an eased fade in the page colour, twice the header's
   height, that unfolds downward once scrolling starts. Its exact curve is at
   30% by the header's bottom edge, fine on Osmo's taller header, but on our
   56px one headings ran straight through the nav links. So it stays solid
   behind the nav row (to 38%) and then eases out with the donor's falloff.
   The colour follows what is under the header (white, the alt grey, navy for
   dark chapters and the film) and glides between them via @property.
   Replaces the 2026-11-01 glass bar (72% white + blur, hard bottom line),
   which Nemo rejected on 2026-11-02. */
@property --hb { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
html[data-lab] .header .header-bg {
  --hb: #FFFFFF;
  height: 200% !important;
  transform-origin: 50% 0;
  transform: scaleY(0) !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: linear-gradient(
    var(--hb) 0%,
    var(--hb) 38%,
    color-mix(in srgb, var(--hb) 82%, transparent) 50%,
    color-mix(in srgb, var(--hb) 45%, transparent) 62%,
    color-mix(in srgb, var(--hb) 20%, transparent) 74%,
    color-mix(in srgb, var(--hb) 7%, transparent) 86%,
    transparent 100%) !important;
  transition: transform .5s cubic-bezier(.65, .05, 0, 1), --hb .35s ease !important;
}
html.is-scrolled[data-lab] .header .header-bg { transform: scaleY(1) !important; }
html.lab-head-alt[data-lab] .header .header-bg { --hb: #F5F7FA; }
html.lab-head-dark[data-lab] .header .header-bg { --hb: #0A2341; }
html[data-lab] :is(.home-hero-bg, .gradient-overlay) { background-image: none !important; }

/* the film's route readout ("Main Foyer → Pharmacy, 39% of the way").
   Hidden, not removed: the film script needs the node to exist. */
.readout { display: none !important; }