/* Shared foundations for Overskill's app, public pages and Reference Lab.
 * Keep theme values here. Component recipes consume these roles; layouts own
 * density and composition. Legacy opt-out, CF AI and customer OAuth are excluded.
 * Canonical guide: docs/design/OVERSKILL-DESIGN-SYSTEM.md. */
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="light"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="light"]:not([data-oauth-app-themed="true"]) {
 --fg:#202124; --fg-2:#51555C; --fg-3:#626870; --fg-4:var(--fg-3);
 /* Surfaces have roles; state fills and borders keep their independent scale. */
 --rx-rail:#E7E7E7; --rx-canvas:#F5F5F5; --rx-chrome:#EEEEEE; --rx-panel:#FFFFFF; --rx-preview:#FFFFFF;
 --rx-chat-panel:#FAFAFA; --rx-chat-selected:#F0F0F0;
 --bg:var(--rx-canvas); --bg-1:var(--rx-chrome); --bg-2:var(--rx-panel); --bg-3:#F1F1F1;
 --line:#E4E4E4; --line-2:#D9D9D9; --rx-divider:var(--line);
 --rx-field:#FFFFFF; --rx-field-hover:#FAFAFA; --rx-field-border:#D2D2D2;
 --rx-raised:#FFFFFF; --rx-composer:#FFFFFF; --rx-readonly:var(--bg-1);
 --rx-overlay:#FCFCFC; --rx-overlay-border:color-mix(in srgb,var(--line-2) 70%,var(--rx-overlay));
 --rx-surface-hover:#F0F0F0; --rx-hover:#EBEBEB; --rx-active:#E5E5E5;
 --rx-surface-selected:#F1F1F1; --rx-overlay-selected:#F0F0F0;
 --rx-overlay-hover:#F4F4F4; --rx-overlay-selected-hover:#E9E9E9; --rx-overlay-active:#E8E8E8;
 --ref-segment-selected:var(--rx-raised);
 --ref-hover-border:var(--line-2);
 --rx-primary:#202124; --rx-primary-ink:#FFFFFF;
 --rx-primary-hover:#3C4045; --rx-primary-active:#484D54;
 --rx-secondary:#F0F0F0; --rx-secondary-hover:#E5E5E5; --rx-secondary-active:#DCDCDC;
 --rx-floating-shadow:0 2px 4px rgb(0 0 0 / 2%),0 12px 28px rgb(0 0 0 / 7%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="dark"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="dark"]:not([data-oauth-app-themed="true"]) {
 --fg:#F2F3F5; --fg-2:#B7BAC0; --fg-3:#989DA5; --fg-4:var(--fg-3);
 --rx-rail:#0E0F10; --rx-canvas:#121314; --rx-chrome:#18191A; --rx-panel:#1E1F21; --rx-preview:var(--rx-panel);
 --rx-editor-canvas:#151617;
 --rx-chat-panel:#1B1C1E; --rx-chat-selected:#25272A;
 --bg:var(--rx-canvas); --bg-1:var(--rx-chrome); --bg-2:var(--rx-panel); --bg-3:#242528;
 --line:#292B2F; --line-2:#35383E; --rx-divider:var(--line);
 --rx-field:#1B1C1E; --rx-field-hover:#202124; --rx-field-border:#3A3E45;
 /* Suggestions share the cool card palette, with a quiet tonal hover below menus. */
 --ref-suggestion-bg:var(--rx-panel); --ref-suggestion-hover:var(--rx-field-hover);
 --rx-raised:#242528; --rx-composer:var(--rx-raised); --rx-readonly:var(--bg-1);
 --rx-overlay:#222426; --rx-overlay-border:color-mix(in srgb,var(--line-2) 70%,var(--rx-overlay));
 --rx-surface-hover:#2C2E31; --rx-hover:#2C2E31; --rx-active:#303236;
 --rx-surface-selected:#2A2C2F; --rx-overlay-selected:#2F3134;
 --rx-overlay-hover:#292B2E; --rx-overlay-selected-hover:#36383C; --rx-overlay-active:#2D2F32;
 --ref-segment-selected:#141414;
 --ref-hover-border:var(--line-2);
 --rx-primary:#E8EAED; --rx-primary-ink:#202124;
 --rx-primary-hover:#FFFFFF; --rx-primary-active:#CDD0D5;
 --rx-secondary:#252628; --rx-secondary-hover:#333538; --rx-secondary-active:#3C3F43;
 --rx-floating-shadow:0 2px 4px rgb(0 0 0 / 9%),0 12px 28px rgb(0 0 0 / 24%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme]:not([data-oauth-app-themed="true"]) {
 /* fg-4 is retained for legacy icon/label consumers; readable text has three
    roles. Disabled controls own their opacity rather than a faint text token. */
 /* The rail is recessed below the canvas in both appearances. Keep this
    independent of chrome/panels so menus retain their own elevation. */
 --rail-bg:var(--rx-rail);
 --rx-panel-shadow:none; --composer-shadow:none;
 --ref-button-light-depth:none; --ref-button-light-depth-hover:none;
 --ref-button-secondary-depth:none; --ref-button-secondary-depth-hover:none;
 --ref-button-primary-gradient:none; --ref-button-primary-gradient-hover:none;
 --ref-button-secondary-gradient:none; --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:var(--rx-primary-hover);
 --ref-button-secondary-hover:var(--rx-secondary-hover);
 --rx-secondary-ink:var(--fg-2);
 /* Marketing uses the same semantic roles, including its explicit islands. */
 --marketing-bg:var(--bg); --marketing-panel:var(--bg-1);
 --marketing-surface:var(--bg-2); --marketing-inset:var(--bg-3);
 --marketing-fg:var(--fg); --marketing-muted:var(--fg-2);
 --marketing-quiet:var(--fg-3); --marketing-placeholder:var(--fg-3);
 --marketing-line:var(--line); --marketing-line-strong:var(--line-2);
 --marketing-primary:var(--rx-primary); --marketing-primary-ink:var(--rx-primary-ink);
 --marketing-primary-hover:var(--rx-primary-hover);
 --marketing-primary-gradient:none; --marketing-primary-gradient-hover:none;
 --marketing-secondary:var(--rx-secondary); --marketing-secondary-hover:var(--rx-secondary-hover);
 --marketing-button-shadow:none; --marketing-button-shadow-hover:none;
 --marketing-overlay-shadow:var(--rx-floating-shadow);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="light"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="light"]:not([data-oauth-app-themed="true"]) {
 --ref-brand-soft:hsl(130 55% 28%);
 --ref-checkbox-fill:var(--brand);
 --success-fg:var(--ref-brand-soft); --warning-fg:#B9480D; --danger-fg:#BA2623; --info-fg:#0169CC;
 --ref-focus:#929292; --ref-keyboard-focus:#777777; --ref-focus-halo:rgb(0 0 0 / 4%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="dark"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="dark"]:not([data-oauth-app-themed="true"]) {
 --ref-brand-soft:var(--ref-brand-alt);
 --ref-checkbox-fill:var(--brand);
 --success-fg:var(--ref-brand-alt); --warning-fg:#FF8549; --danger-fg:#FF6764; --info-fg:#99CEFF;
 --ref-focus:#505050; --ref-keyboard-focus:#909090; --ref-focus-halo:rgb(255 255 255 / 2%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme]:not([data-oauth-app-themed="true"]) {
 --brand:#45E760; --brand-fg:#0a0e0a; --ref-brand-alt:#75D785;
 --ref-checkbox-ink:#000000;
 --font-body:"Geist",system-ui,-apple-system,sans-serif;
 --font-heading-large:"Grifter","Geist",system-ui,sans-serif;
 --font-display:var(--font-body); --font-mono:"JetBrains Mono",ui-monospace,monospace;
 --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;
 --ref-button-radius:10px; --ref-button-radius-small:9px;
 --accent:var(--rx-primary); --accent-fg:var(--rx-primary-ink); --accent-hover:var(--rx-primary-hover); --primary-hover:var(--rx-primary-hover);
 --accent-text:var(--fg); --accent-text-hover:var(--fg);
 --hover-bg:var(--rx-surface-hover); --hover-border:var(--line-2);
 --card-bg:var(--rx-panel); --rail-bg:var(--rx-rail);
 --field-bg:var(--rx-field); --field-fg:var(--fg); --field-border:var(--rx-field-border);
 --field-border-hover:var(--line-2); --field-placeholder:var(--fg-3);
 --ref-field-focus:var(--ref-brand-soft); --ref-field-focus-visible:var(--ref-brand-soft);
 --field-border-focus:var(--ref-field-focus);
 --field-ring-color:color-mix(in srgb,var(--ref-field-focus) 12%,transparent);
 --field-ring:0 0 0 3px var(--field-ring-color);
 --focus-ring-color:var(--ref-keyboard-focus); --focus-ring:0 0 0 2px var(--ref-keyboard-focus);
 --credit-action:var(--ref-brand-soft); --ref-brand-detail:var(--ref-brand-soft);
 /* Promotional emphasis, distinct from success and interactive selection. */
 --ref-highlight-ink:var(--ref-brand-detail);
 --ref-highlight-bg:color-mix(in srgb,var(--ref-highlight-ink) 10%,var(--rx-panel));
 --ref-highlight-border:var(--line-2);
 --success-bg:color-mix(in srgb,var(--success-fg) 10%,var(--rx-panel));
 --warning-bg:color-mix(in srgb,var(--warning-fg) 10%,var(--rx-panel));
 --danger-bg:color-mix(in srgb,var(--danger-fg) 10%,var(--rx-panel));
 --info-bg:color-mix(in srgb,var(--info-fg) 10%,var(--rx-panel));
 --marketing-bg:var(--rx-canvas); --marketing-panel:var(--rx-chrome);
 --marketing-surface:var(--rx-panel); --marketing-inset:var(--bg-3);
 --marketing-fg:var(--fg); --marketing-muted:var(--fg-2); --marketing-quiet:var(--fg-3);
 --marketing-placeholder:var(--fg-3); --marketing-line:var(--line); --marketing-line-strong:var(--line-2);
 --marketing-divider:var(--rx-divider); --marketing-hover:var(--rx-hover); --marketing-hover-border:var(--line-2);
 --marketing-field:var(--rx-field); --marketing-raised:var(--rx-overlay);
 --marketing-menu-hover:var(--rx-overlay-hover); --marketing-menu-selected:var(--rx-overlay-selected);
 --marketing-selection:var(--rx-surface-selected); --marketing-focus:var(--ref-field-focus);
 --marketing-keyboard:var(--ref-keyboard-focus); --marketing-halo:var(--field-ring-color);
 --marketing-green-ink:var(--ref-brand-soft);
 --marketing-primary:var(--rx-primary); --marketing-primary-ink:var(--rx-primary-ink);
 --marketing-primary-hover:var(--rx-primary-hover); --marketing-primary-active:var(--rx-primary-active);
 --marketing-secondary:var(--rx-secondary); --marketing-secondary-hover:var(--rx-secondary-hover);
 --marketing-primary-gradient:none; --marketing-primary-gradient-hover:none;
 --marketing-button-shadow:none; --marketing-button-shadow-hover:none;
 --marketing-overlay-shadow:var(--rx-floating-shadow);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-display-xl,.text-display-lg,.text-display-md,.text-heading-lg) {
 font-family:var(--font-heading-large); font-weight:700;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-heading-md,.text-heading-sm,.text-title-lg,.text-title-md,.text-title-sm) {
 font-family:var(--font-body); font-weight:600;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-body-lg,.text-body-md,.text-body-sm) { font-weight:400; }

/* Composer send actions share the editor's brand green once input is ready.
   Keep the legacy --rx-send alias neutral: other primary controls consume it. */
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] {
 --ref-composer-send:var(--brand); --ref-composer-send-ink:var(--brand-fg);
 --ref-composer-send-hover:var(--ref-brand-alt);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer[data-composer-ready="true"] .send,.composer.has-content .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn):not(:disabled,[aria-disabled="true"]) {
 background:var(--ref-composer-send); color:var(--ref-composer-send-ink); box-shadow:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer[data-composer-ready="true"] .send,.composer.has-content .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn):hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading) {
 background:var(--ref-composer-send-hover); color:var(--ref-composer-send-ink); transform:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer:not(.has-content):not([data-composer-ready="true"]) .send,.composer .send:disabled,.composer .composer-submit:disabled,.ref-compose-send:disabled) {
 background:var(--bg-3); color:var(--fg-3); box-shadow:none; transform:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn) svg { color:inherit; }

html.os-reference-marketing[data-theme] #mkt .hero2-send:not(:disabled,[aria-disabled="true"]) {
 background:var(--brand); color:var(--brand-fg); box-shadow:none; background-image:none;
}
html.os-reference-marketing[data-theme] #mkt .hero2-send:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading) {
 background:var(--ref-brand-alt); color:var(--brand-fg); transform:none;
}
/*

 */
/* Public marketing adapter, extracted from the local Reference Lab at 9f5beeb23.
 * Explicit layout opt-in; no dependency on reference views, scripts or root classes.
 * Existing page geometry, artwork, brand green and interaction contracts stay owned
 * by each surface. See docs/design/MARKETING-REFERENCE-ADOPTION.md for coverage. */
html.os-reference-marketing[data-theme] { scroll-padding-top:112px; }

/* The film homepage owns an inline token island. Rebind that island as well
 * as the v4 spine so later inline rules cannot silently restore the old ramp. */
/* Page aliases consume foundations in one direction; theme islands below
 * deliberately rebind their local legacy surface tokens. */
html.os-reference-marketing[data-theme] {
  --marketing-neutral-primary: var(--marketing-primary);
  --marketing-neutral-primary-ink: var(--marketing-primary-ink);
  --marketing-neutral-primary-hover: var(--marketing-primary-hover);
  --marketing-neutral-primary-gradient: var(--marketing-primary-gradient);
  --marketing-neutral-primary-gradient-hover: var(--marketing-primary-gradient-hover);
  --line-3: var(--marketing-line-strong);
  --divider: var(--marketing-divider);
  --sans: var(--font-body);
  --disp: var(--font-display);
  --mono: var(--font-mono);
  --page: var(--bg);
  --hov-bg: var(--hover-bg);
  --green-t: var(--marketing-green-ink);
  --r-card: 20px;
  --r-tile: 20px;
  --r-panel: 24px;
  --opt-hover-bg: var(--marketing-menu-hover);
  --opt-selected-bg: var(--marketing-menu-selected);
  --glass-menu-surface: var(--marketing-raised);
  --glass-menu-shadow: var(--marketing-overlay-shadow);
}
html.os-reference-marketing[data-theme] :is(.os-marketing, .os-nav, .dash-topnav, #mkt, .os-held) {
  --marketing-neutral-primary: var(--marketing-primary);
  --marketing-neutral-primary-ink: var(--marketing-primary-ink);
  --marketing-neutral-primary-hover: var(--marketing-primary-hover);
  --marketing-neutral-primary-gradient: var(--marketing-primary-gradient);
  --marketing-neutral-primary-gradient-hover: var(--marketing-primary-gradient-hover);
  --bg: var(--marketing-bg);
  --bg-1: var(--marketing-panel);
  --bg-2: var(--marketing-surface);
  --bg-3: var(--marketing-inset);
  --fg: var(--marketing-fg);
  --fg-2: var(--marketing-muted);
  --fg-3: var(--marketing-quiet);
  --fg-4: var(--marketing-quiet);
  --line: var(--marketing-line);
  --line-2: var(--marketing-line-strong);
  --line-3: var(--marketing-line-strong);
  --divider: var(--marketing-divider);
  --hover-bg: var(--marketing-hover);
  --hover-border: var(--marketing-hover-border);
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: var(--font-body);
  --disp: var(--font-display);
  --mono: var(--font-mono);
  --page: var(--bg);
  --hov-bg: var(--hover-bg);
  --green-t: var(--marketing-green-ink);
  --accent-text: var(--marketing-green-ink);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --r-card: 20px;
  --r-tile: 20px;
  --r-panel: 24px;
  --card-bg: var(--marketing-surface);
  --field-bg: var(--marketing-field);
  --field-fg: var(--fg);
  --field-border: var(--rx-field-border);
  --field-border-hover: var(--hover-border);
  --field-border-focus: var(--ref-field-focus);
  --field-placeholder: var(--marketing-placeholder);
  --field-ring-color: color-mix(in srgb, var(--ref-field-focus) 12%, transparent);
  --field-ring: 0 0 0 3px var(--field-ring-color);
  --focus-ring: 0 0 0 2px var(--marketing-keyboard);
  --focus-ring-color: var(--marketing-keyboard);
  --opt-hover-bg: var(--marketing-menu-hover);
  --opt-selected-bg: var(--marketing-menu-selected);
  --glass-menu-surface: var(--marketing-raised);
  --glass-menu-shadow: var(--marketing-overlay-shadow);
}

html.os-reference-marketing[data-theme] body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}
/* Keep the canvas painted, but let the neutral scrollbar thumb float over it. */
html.os-reference-marketing[data-theme] {
  background-color: var(--bg);
  scrollbar-color: var(--fg-4) transparent;
  scrollbar-width: thin;
}
html.os-reference-marketing[data-theme]::-webkit-scrollbar-track { background: transparent; }
/* Nested panes keep their transparent tracks; their own recipes take precedence. */
:where(html.os-reference-marketing[data-theme] *) { scrollbar-color: var(--fg-4) transparent; }
/* Wordmarks and editorial artwork keep their existing brand assets/type. */
html.os-reference-marketing[data-theme] .brand-word { font-family: 'Grifter', 'Geist', sans-serif; }
html.os-reference-marketing[data-theme] div.font-overskill.text-2xl {
  font-family: var(--font-body);
  font-weight: 600;
}
html.os-reference-marketing[data-theme] .ic-go { color: var(--fg-2); }
/* Heading semantics do not imply display typography: cards, forms and article
 * sections also use h1/h2. Default to Geist and opt large headlines in below. */
html.os-reference-marketing[data-theme] :is(h1, h2) {
  font-family: var(--font-body);
  text-wrap: balance;
}
html.os-reference-marketing[data-theme] :is(h1, h2):is(.text-display-xl, .text-display-lg, .text-display-md, .reference-display-headline),
html.os-reference-marketing[data-theme] h1.pf-title,
html.os-reference-marketing[data-theme] .os-marketing :is(.phero h1, .final h2),
html.os-reference-marketing[data-theme] #mkt h1.headline {
  font-family: 'Grifter', 'Geist', system-ui, sans-serif;
}
/* Large is a semantic role: responsive scaling keeps the same family. */
html.os-reference-marketing[data-theme] :is(.ti-show-title, .ti-empty h2, .ti-show-section h2, .ti-show-cta h2, .ti-section-title, .support-header-title, .ds-prose h1),
html.os-reference-marketing[data-theme] .os-marketing :is(.psec > .wrap > .head > h2, .psec > .wrap > h2, .pcta h2),
html.os-reference-marketing[data-theme] :is(.sw-copy__title, .os-held__copy h2),
html.os-reference-marketing[data-theme] #mkt :is(h2, .hero2 h2) {
  font-family: var(--font-heading-large, "Grifter");
  font-weight: 700;
}
/* Let the actual page/column set the headline measure. The old 20–24ch
 * caps wrapped short titles even when their section had room for one line.
 * Paragraphs retain their separate reading measures; narrow layouts wrap. */
html.os-reference-marketing[data-theme] :is(.about-intro, .os-marketing .head),
html.os-reference-marketing[data-theme] .os-marketing :is(.phero h1, .psec h2, .pcta h2) {
  max-width: none;
}
html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):not(.btn-prism, .icon-btn) {
  border-radius: var(--ref-button-radius, 10px);
}
html.os-reference-marketing[data-theme] .btn.btn-sm { border-radius: var(--ref-button-radius-small, 9px); }
html.os-reference-marketing[data-theme] .dash-topnav[data-signed-in="false"] .dash-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
}

/* Standard public CTAs adopt the lab's monochrome fill. Prism is a separate
 * brand treatment; disabled/busy/pressed/focus styles retain their state cues. */
html.os-reference-marketing[data-theme] :is(.btn-primary, .btn-ink, .btn-green, .os-btn-green, .dash-upgrade-btn, #mkt .fbtn, #mkt .gate-btn):not(.btn-prism) {
  background-color: var(--marketing-primary);
  color: var(--marketing-primary-ink) !important;
  border-color: transparent;
}
html.os-reference-marketing[data-theme] :is(.btn-primary, .btn-ink, .btn-green, .os-btn-green, .dash-upgrade-btn, #mkt .fbtn, #mkt .gate-btn):not(.btn-prism):not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading, :active, [aria-pressed="true"], :focus-visible) {
  background-image: var(--marketing-primary-gradient);
  box-shadow: var(--marketing-button-shadow);
}
html.os-reference-marketing[data-theme] :is(.btn-primary, .btn-ink, .btn-green, .os-btn-green, .dash-upgrade-btn, #mkt .fbtn, #mkt .gate-btn):not(.btn-prism):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
  /* Legacy primary hover is !important, including its background shorthand. */
  background-color: var(--marketing-primary-hover) !important;
  background-image: var(--marketing-primary-gradient-hover) !important;
  border-color: transparent !important;
  color: var(--marketing-primary-ink) !important;
}
html.os-reference-marketing[data-theme] :is(.btn-primary, .btn-ink, .btn-green, .os-btn-green, .dash-upgrade-btn, #mkt .fbtn, #mkt .gate-btn):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading, :active, [aria-pressed="true"], :focus-visible) {
  box-shadow: var(--marketing-button-shadow-hover);
}
html.os-reference-marketing[data-theme] :is(.btn-light, .btn-secondary, .btn-quiet, .btn-outline-ink, .os-btn-quiet) {
  color: var(--fg);
  background-color: var(--marketing-secondary);
  background-image: none;
  background-clip: padding-box;
  border-color: var(--line-2);
  transition: background-color 160ms ease, color 160ms ease;
}
html.os-reference-marketing[data-theme] :is(.btn-light, .btn-secondary, .btn-quiet, .btn-outline-ink, .os-btn-quiet):not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading, :active, [aria-pressed="true"], :focus-visible) {
  box-shadow: none;
}
html.os-reference-marketing[data-theme] :is(.btn-light, .btn-secondary, .btn-quiet, .btn-outline-ink, .os-btn-quiet):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
  background-color: var(--marketing-secondary-hover);
  background-image: none;
  border-color: var(--line-2);
  color: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  html.os-reference-marketing[data-theme] :is(.btn-light, .btn-secondary, .btn-quiet, .btn-outline-ink, .os-btn-quiet) { transition: none; }
}
html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):hover { transform: none; }
html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary) svg { color: inherit; }
html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):hover svg { transform: none; }
html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
  box-shadow: none;
}

/* Green artwork is theme-invariant. Its actions still need dark ink/fill in
 * dark mode; neutral page tokens must not wash out the featured panels. */
html.os-reference-marketing[data-theme] :is(.phero, .pcta, .os-marketing .final, #mkt .final, #mkt .hero2) {
  --marketing-primary: #17191c;
  --marketing-primary-ink: #fff;
  --marketing-primary-hover: #303235;
  --marketing-primary-gradient: none;
  --marketing-primary-gradient-hover: none;
}
/* Closing-band reassurance follows its left-aligned heading and copy. */
html.os-reference-marketing[data-theme] .os-marketing .final .phero-meta {
  justify-content: flex-start;
  text-align: left;
}
/* A neutral card inside green artwork is a new contrast context. */
html.os-reference-marketing[data-theme] :is(.join-card, #mkt .hero2-composer, #mkt .gate-pop) {
  --marketing-primary: var(--marketing-neutral-primary);
  --marketing-primary-ink: var(--marketing-neutral-primary-ink);
  --marketing-primary-hover: var(--marketing-neutral-primary-hover);
  --marketing-primary-gradient: var(--marketing-neutral-primary-gradient);
  --marketing-primary-gradient-hover: var(--marketing-neutral-primary-gradient-hover);
}
html.os-reference-marketing[data-theme] :is(.phero, .pcta, #mkt .final, #mkt .hero2) .btn-outline-ink {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink-line, rgb(10 14 10 / 18%));
}
html.os-reference-marketing[data-theme] :is(.phero, .pcta, #mkt .final, #mkt .hero2) .btn-outline-ink:hover {
  color: var(--ink);
  background: rgb(10 14 10 / 8%);
}

html.os-reference-marketing[data-theme] .nav-pop {
  top: calc(100% + 6px);
  pointer-events: none;
  background: var(--marketing-raised);
  border-color: var(--line-2);
  border-radius: 14px;
  box-shadow: var(--marketing-overlay-shadow);
}
/* The old bridge began at top:0 and intercepted Pricing beside Resources.
 * Only bridge the gap below the trigger row. .open owns visible/hit state so
 * click/Escape dismissal also works while the pointer stays over the trigger. */
html.os-reference-marketing[data-theme] .nav-grp::after { top: 100%; height: 6px; }
html.os-reference-marketing[data-theme] .nav-grp:not(.open)::after { content: none; }
html.os-reference-marketing[data-theme] .nav-grp.open .nav-pop { pointer-events: auto; }
html.os-reference-marketing[data-theme] .nav-grp:not(.open) .nav-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}
html.os-reference-marketing[data-theme] .nav-grp:not(.open) .cv { transform: none; }
html.os-reference-marketing[data-theme] .nav-pop a:hover { background: var(--marketing-menu-hover); }
html.os-reference-marketing[data-theme] .nav-sheet { background: var(--marketing-raised); }
/* V4 has its own card rules after the shared component. Give both families
 * the Lab's plain surface; hover emphasis belongs to actionable cards only. */
html.os-reference-marketing[data-theme] .os-marketing .card {
  background: var(--card-bg);
  border-color: var(--line);
  border-radius: var(--radius-lg);
}
html.os-reference-marketing[data-theme] .os-marketing .card:hover {
  background: var(--card-bg);
  border-color: var(--line);
}
html.os-reference-marketing[data-theme] :is(.card-hoverable, .os-marketing a.card):hover {
  background: var(--marketing-raised);
  border-color: var(--line-2);
  transform: none;
}
html.os-reference-marketing[data-theme] .os-marketing .card:hover .card-go svg { transform: none; }
html.os-reference-marketing[data-theme] .os-marketing :is(.plan, .up, .ladder-card) { background: var(--card-bg); }
html.os-reference-marketing[data-theme] .os-marketing .plan.feat { background: var(--marketing-raised); }
/* Shared rows absorb optional bonuses/volume links without moving the CTAs. */
html.os-reference-marketing[data-theme] .os-marketing .plan-summary {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
html.os-reference-marketing[data-theme] .os-marketing .plan-summary > p {
  margin: 0;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
html.os-reference-marketing[data-theme] .os-marketing .plan-summary > .tier-save { color: var(--accent-text); }
html.os-reference-marketing[data-theme] .os-marketing .plan-actions {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
html.os-reference-marketing[data-theme] .os-marketing .plan-actions .plan-volume-link { margin-top: 0; }
html.os-reference-marketing[data-theme] .os-marketing .plan .plan-incl { align-content: start; }
@media (min-width: 961px) {
  html.os-reference-marketing[data-theme] .os-marketing .plans-3 > .plan {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 14px;
    align-content: normal;
  }
}
/* A compact rectangular bar with equal insets around its 40px controls. */
html.os-reference-marketing[data-theme] .reference-marketing-nav-space { height: 96px; }
/* Dashboard-only identity row: one site header, with page context below it. */
html.os-reference-marketing[data-theme] .os-nav-session { display: flex; margin: 0; }
html.os-reference-marketing[data-theme] .ns-cta .os-nav-session,
html.os-reference-marketing[data-theme] .ns-cta .os-nav-session .os-btn { width: 100%; }
html.os-reference-marketing[data-theme] .reference-waitlist-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
html.os-reference-marketing[data-theme] .reference-waitlist-email {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg-2);
  font: 400 14px/1.5 var(--font-body);
}
html.os-reference-marketing[data-theme] .reference-waitlist-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: 500 12px/1.5 var(--font-body);
}
html.os-reference-marketing[data-theme] .reference-waitlist-status.is-waiting {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
html.os-reference-marketing[data-theme] .reference-waitlist-status.is-active {
  background: var(--success-bg);
  color: var(--success-fg);
}
html.os-reference-marketing[data-theme] .reference-section-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
html.os-reference-marketing[data-theme] .reference-section-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 12px;
}
html.os-reference-marketing[data-theme] .reference-section-nav-label { font-weight: 600; }
html.os-reference-marketing[data-theme] .reference-section-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
html.os-reference-marketing[data-theme] .reference-section-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 14px;
}
html.os-reference-marketing[data-theme] .reference-section-nav-links a:hover { background: var(--hover-bg); color: var(--fg); }
html.os-reference-marketing[data-theme] .reference-section-nav-links a[aria-current="page"] { color: var(--accent-text); }
html.os-reference-marketing[data-theme] .api-docs { --api-docs-header-h: 104px; }
@media (max-width: 640px) {
  html.os-reference-marketing[data-theme] .reference-marketing-nav-space { height: 84px; }
}
html.os-reference-marketing[data-theme] .os-nav-in {
  height: auto;
  padding: 12px;
  border-radius: 14px;
}
html.os-reference-marketing[data-theme] :is(.nav-trig, .nav-flat) { height: 40px; border-radius: var(--radius-sm); }
html.os-reference-marketing[data-theme] .os-nav-in,
html.os-reference-marketing[data-theme] .nav-sheet.open {
  border-color: var(--line-2);
  box-shadow: var(--marketing-overlay-shadow);
}
/* Muted copy still needs text contrast; the faintest token is decorative. */
html.os-reference-marketing[data-theme] .foot h5 { color: var(--fg-2); }
html.os-reference-marketing[data-theme] :is(.cmp-cta__fine,.cmp-sources__updated,.plan-k,.integ-tag) { color: var(--fg-3); }
html.os-reference-marketing[data-theme] :is(.agents-step__num,.pillx:not(.imp,.fixd)) { background: var(--bg-2); color: var(--fg); }
/* Join/Scroll step names share the step number's text edge, without a badge inset. */
html.os-reference-marketing[data-theme] #how-it-works .tl-when > .pillx {
  padding-inline: 0;
  background: transparent;
}
/* Keep the FAQ's compact square outline fixed; only the plus turns when open. */
html.os-reference-marketing[data-theme] .join-faq summary i {
  border-radius: var(--radius-sm);
  corner-shape: squircle;
  transition: none;
}
html.os-reference-marketing[data-theme] .join-faq details[open] summary i { transform: none; }
html.os-reference-marketing[data-theme] .join-faq summary i svg { transition: transform .26s ease; }
html.os-reference-marketing[data-theme] .join-faq details[open] summary i svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  html.os-reference-marketing[data-theme] .join-faq summary i svg { transition: none; }
}
html.os-reference-marketing[data-theme] .xp-hero__pill { background:var(--bg-2); color:var(--fg); }
html.os-reference-marketing[data-theme] :is(input,textarea)::placeholder { color: var(--fg-3); opacity: 1; }
/* The local Join page reuses the published integration cards from landing. */
html.os-reference-marketing[data-theme] .reference-join-integrations { padding-block: clamp(40px,5vw,72px); }
html.os-reference-marketing[data-theme] .reference-join-integrations .integrations-block { padding-block: 0; }
html.os-reference-marketing[data-theme] .reference-join-integrations .integ-logo { background: var(--bg-2); border: 1px solid var(--line); }
html.os-reference-marketing[data-theme] .reference-integ-fallback:not([hidden]) { display:grid; place-items:center; width:100%; height:100%; color:var(--fg-2); font:600 20px/1 var(--font-body); }
html.os-reference-marketing[data-theme] :is(.theme-tog, .nav-burger) {
  border-radius: var(--radius-sm);
}
html.os-reference-marketing[data-theme] :is(.theme-tog, .nav-burger):hover {
  color: var(--fg);
  background: var(--hover-bg);
  border-color: var(--line-2);
}

/* Start sections with their headings. Only audited decorative labels are
 * hidden: these classes also appear on real metadata, status and field labels,
 * so never hide .eyebrow or .text-eyebrow globally. The layout gate preserves
 * partner branding; the live feed's .lvv-eyebrow remains a status indicator. */
html.os-reference-marketing:not(.clickfunnels-reference)[data-theme] :is(
  [data-reference-decorative-overline],
  #how-it-works > .ds-container > .section-head > .eyebrow,
  .caps-section > .ds-container > .section-head > .eyebrow,
  .integrations-block .section-head > div > .eyebrow,
  .ready > .ds-container > .eyebrow,
  .sw-copy__eyebrow,
  .os-held__eyebrow,
  #mkt .hero2-in > .hero2-k,
  #mkt .head > .eb,
  .page-hero-text > .text-eyebrow,
  .about-intro > .text-eyebrow,
  .about-section-heading > .text-eyebrow,
  .authors-intro > .text-eyebrow,
  .author-reading > .text-eyebrow,
  .learn-hero--directory > div > .text-eyebrow,
  .learn-section-heading > div > .text-eyebrow,
  .learn-comparison > .text-eyebrow,
  .learn-watch > div > .text-eyebrow,
  .learn-next > div > .text-eyebrow,
  .learn-section[aria-labelledby="related-heading"] > .text-eyebrow,
  .alt-prompts__head > .alt-prompts__eyebrow,
  .psp-head > .psp-eyebrow,
  .xp-math__eyebrow,
  .xp-section__eyebrow,
  .xp-final__eyebrow,
  .pf-page > .ds-container > .pf-eyebrow,
  .brand-reference__hero .brand-reference__eyebrow
) { display: none !important; }

/* Remaining eyebrows can identify real content. Their decorative dots do not
 * convey meaning; the live feed's activity indicator keeps its treatment. */
html.os-reference-marketing[data-theme] .eyebrow:not(.lvv-eyebrow)::before {
  content: none;
}

/* Everyday labels use the same readable interface face as the lab. Keep
 * code, step numbers and numerical data in their original mono treatment. */
html.os-reference-marketing[data-theme] :is(.text-eyebrow, .text-eyebrow-sm, .ns-h) {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
}
html.os-reference-marketing[data-theme] :is(.author-role, .os-marketing .ic-cat) {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
html.os-reference-marketing[data-theme] .author-card .author-role { min-height: 3em; }
/* Team biographies need more measure than the three-column author directory.
 * The Lab's plain card supplies the surface; portrait, identity and full bio
 * form one group without adding inner panels or making the article clickable. */
html.os-reference-marketing[data-theme] .about-team .authors-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
html.os-reference-marketing[data-theme] .about-team .author-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "portrait name" "portrait role" "bio bio" "link link";
  column-gap: 24px;
  align-items: start;
  padding: 28px;
  background: var(--bg-2);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
html.os-reference-marketing[data-theme] .about-team .author-avatar {
  grid-area: portrait;
  width: 112px;
  height: 112px;
  /* Some source portraits already have a circular crop baked into the image. */
  border-radius: var(--radius-pill);
  background: var(--bg-3);
}
html.os-reference-marketing[data-theme] .about-team .author-card h3 {
  grid-area: name;
  align-self: end;
  margin: 0 0 8px;
  font: 600 23px/1.25 var(--font-body);
  letter-spacing: -.025em;
}
html.os-reference-marketing[data-theme] .about-team .author-role {
  grid-area: role;
  min-height: 0;
  margin: 0;
  font-size: 13px;
}
html.os-reference-marketing[data-theme] .about-team .author-bio {
  grid-area: bio;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.75;
}
html.os-reference-marketing[data-theme] .about-team .author-card-direction {
  grid-area: link;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
html.os-reference-marketing[data-theme] .about-team .author-card-direction:hover {
  background: var(--hover-bg);
  color: var(--fg);
  text-decoration: none;
}
html.os-reference-marketing[data-theme] .about-team .author-card-direction svg { flex-shrink: 0; }
html.os-reference-marketing[data-theme] .about-team .author-card-direction:focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
}
html.os-reference-marketing[data-theme] .about-team :is(h3 a, .author-card-direction):focus-visible {
  outline-color: var(--marketing-keyboard);
}
@media (max-width: 840px) {
  html.os-reference-marketing[data-theme] .about-team .authors-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  html.os-reference-marketing[data-theme] .about-team .author-card {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    padding: 24px;
  }
  html.os-reference-marketing[data-theme] .about-team .author-avatar { width: 80px; height: 80px; }
  html.os-reference-marketing[data-theme] .about-team .author-card h3 { font-size: 20px; }
}
html.os-reference-marketing[data-theme] .about-steps p { margin: 12px 0 20px; }
html.os-reference-marketing[data-theme] .learn-actions { gap: 12px 20px; }
html.os-reference-marketing[data-theme] .learn-actions > a { flex-shrink: 0; white-space: nowrap; }
/* The root already reserves 112px for the floating header. Do not double it. */
html.os-reference-marketing[data-theme] :is(.os-marketing .psec[id], .about-team) { scroll-margin-top: 0; }
html.os-reference-marketing[data-theme] .cmp-hero .cmp-sources__lead { max-width: 80ch; margin-inline: auto; }
html.os-reference-marketing[data-theme] .cmp-hero > .ds-container > .btn { margin: 6px 4px; }

/* Catalog controls previously bypassed the semantic field and selection
 * tokens. The selected chip now follows the lab's inset + green label state. */
html.os-reference-marketing[data-theme] .os-marketing .cat-search input {
  background: var(--field-bg);
  border-color: var(--field-border);
  border-radius: var(--radius-md);
}
html.os-reference-marketing[data-theme] .os-marketing .cat-search input::placeholder { color: var(--field-placeholder); }
html.os-reference-marketing[data-theme] .os-marketing .cat-search input:hover:not(:focus) { border-color: var(--field-border-hover); }
html.os-reference-marketing[data-theme] .os-marketing .cat-search input:focus {
  border-color: var(--field-border-focus);
  box-shadow: var(--field-ring);
}
/* The existing validator emits utility classes. Keep its state visible through
 * the DS field's more specific border/focus rules without changing validation. */
html.os-reference-marketing[data-theme] .join-card .join-field-label {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 8px;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: var(--fg-2);
  font: 500 13px/1.5 var(--font-body);
}
html.os-reference-marketing[data-theme] .join-card .input.border-red-500 { --marketing-validation: var(--danger-fg); }
html.os-reference-marketing[data-theme] .join-card .input.border-yellow-500 { --marketing-validation: var(--warning-fg); }
html.os-reference-marketing[data-theme] .join-card .input.border-green-500 { --marketing-validation: var(--success-fg); }
html.os-reference-marketing[data-theme] .join-card .input:is(.border-red-500, .border-yellow-500, .border-green-500) {
  --field-border: var(--marketing-validation);
  --field-border-hover: var(--marketing-validation);
  --field-border-focus: var(--marketing-validation);
  --field-ring-color: color-mix(in srgb, var(--marketing-validation) 10%, transparent);
}
html.os-reference-marketing[data-theme] .join-code .input::placeholder {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}
html.os-reference-marketing[data-theme] .join-card [data-email-validation-target="feedback"].text-red-600 { color: var(--danger-fg); }
html.os-reference-marketing[data-theme] .join-card [data-email-validation-target="feedback"].text-yellow-600 { color: var(--warning-fg); }
html.os-reference-marketing[data-theme] .join-card [data-email-validation-target="feedback"].text-green-600 { color: var(--success-fg); }
html.os-reference-marketing[data-theme] .os-marketing .filter.on,
html.os-reference-marketing[data-theme] .os-marketing .filter.on:hover {
  background: var(--marketing-selection);
  border-color: var(--line-2);
  color: var(--marketing-green-ink);
}
html.os-reference-marketing[data-theme] .os-marketing .filter.on b { color: var(--fg-2); }
html.os-reference-marketing[data-theme] :is(.input, .textarea, .select, .cat-search input, .theme-tog, .nav-burger, .nav-trig, .nav-flat, .nav-pop a, .ns-grp a):focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
}
/* Keep authentication visible while the menu's destinations scroll. The footer
 * occupies its own grid row, never an overlay covering the final link. */
@media (max-width: 1040px) {
  html.os-reference-marketing[data-theme] .nav-sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  html.os-reference-marketing[data-theme] .nav-sheet.open {
    max-height: min(680px, calc(100vh - 104px));
    max-height: min(680px, calc(100dvh - 104px));
    padding: 0;
    overflow: hidden;
  }
  html.os-reference-marketing[data-theme] .ns-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
    padding: 16px 12px 12px;
  }
  html.os-reference-marketing[data-theme] .ns-links:focus-visible {
    outline: 2px solid var(--marketing-keyboard);
    outline-offset: -3px;
  }
  html.os-reference-marketing[data-theme] .ns-grp { gap: 0; }
  html.os-reference-marketing[data-theme] .ns-h {
    padding: 4px 12px 6px;
    font: 500 10.5px/1.4 var(--font-body);
    letter-spacing: .07em;
    color: var(--marketing-muted);
  }
  html.os-reference-marketing[data-theme] .ns-grp a {
    min-height: 44px;
    font-size: 14px;
    color: var(--fg);
  }
  html.os-reference-marketing[data-theme] .ns-grp:nth-child(n + 3) {
    grid-column: 1 / -1;
    padding-top: 14px;
  }
  html.os-reference-marketing[data-theme] .ns-cta {
    margin: 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
    background: var(--marketing-raised);
  }
}
@media (max-width: 720px) {
  html.os-reference-marketing[data-theme] .os-nav-in { padding: 8px; }
}
@media (max-width: 640px) {
  html.os-reference-marketing[data-theme] .ns-links { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html.os-reference-marketing[data-theme] .ns-grp + .ns-grp {
    padding-top: 14px;
  }
  html.os-reference-marketing[data-theme] .author-card .author-role { min-height: 0; }
}
@media (max-width: 400px) {
  /* The flat public header also needs its compact mark at narrow widths.
   * Its home link retains the full accessible name via aria-label. */
  html.os-reference-marketing[data-theme] .dash-topnav[data-signed-in="false"] .brand-word { display: none; }
  html.os-reference-marketing[data-theme] .os-nav-in { gap: 8px; }
  html.os-reference-marketing[data-theme] .os-nav-l { flex-shrink: 0; }
  html.os-reference-marketing[data-theme] .os-nav-r { gap: 6px; }
  html.os-reference-marketing[data-theme] .sw-topcta { padding-inline: 8px; font-size: 13px; }
}

@media (forced-colors: active) {
  html.os-reference-marketing[data-theme] .os-marketing .filter.on {
    border-color: Highlight;
    color: Highlight;
  }
  html.os-reference-marketing[data-theme] .os-marketing .cat-search input:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):not(.btn-prism) {
    forced-color-adjust: auto;
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
  }
  html.os-reference-marketing[data-theme] :is(.btn, .os-btn, .dash-upgrade-btn, #mkt .hero2-send, #mkt .fbtn, #mkt .gate-btn, .os-held .sw-btn--primary):not(.btn-prism):hover {
    background: Highlight !important;
    color: HighlightText !important;
  }
}

/* Scroll's live scenes and held finale share control recipes. Keep film
 * artwork/scrims in the page, and form actions/dimensions in their own layout. */
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn {
  border-radius: var(--ref-button-radius);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn:hover { transform: none; }
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn--primary {
  background: var(--ref-composer-send);
  color: var(--ref-composer-send-ink);
  box-shadow: none;
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--ref-composer-send-hover);
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn--ghost {
  background: var(--rx-secondary);
  color: var(--rx-secondary-ink);
  border: 1px solid var(--line-2);
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn--ghost:hover {
  background: var(--rx-secondary-hover);
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn--ghost:active {
  background: var(--rx-secondary-active);
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea input[type="text"] {
  font-family: var(--font-body);
  color: var(--field-fg);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea input[type="text"]::placeholder { color: var(--field-placeholder); opacity: 1; }
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea input[type="text"]:hover:not(:focus, :disabled, [readonly]) {
  /* Legacy dark fields and the resting border both use important paint. */
  background-color: var(--rx-field-hover) !important;
  border-color: var(--field-border-hover) !important;
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea input[type="text"]:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-ring);
}
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea__alt a { color: var(--fg-3); }
html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea__alt a:is(:hover, :focus-visible) { color: var(--fg); }
html.os-reference-marketing[data-theme] #scroll-world .sw-route__label {
  color: var(--fg);
  background: var(--rx-overlay);
  border-color: var(--rx-overlay-border);
}
html.os-reference-marketing[data-theme] #scroll-world .sw-route::before { background: var(--line-2); }
html.os-reference-marketing[data-theme] #scroll-world .sw-route__dot i { background: var(--fg-3); }
html.os-reference-marketing[data-theme] #scroll-world .sw-route__dot:is(:hover, .is-active) i { background: var(--ref-brand-detail); }
html.os-reference-marketing[data-theme] #scroll-world .sw-route__dot.is-active i {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ref-brand-detail) 22%, transparent);
}
html.os-reference-marketing[data-theme] #scroll-world .sw-scrollbar { background: var(--line); }
html.os-reference-marketing[data-theme] #scroll-world .sw-scrollbar span { background: var(--ref-brand-detail); }
html.os-reference-marketing[data-theme] #scroll-world .sw-hint { color: var(--fg-3); }
html.os-reference-marketing[data-theme] #scroll-world .sw-hint i { border-color: var(--fg-3); }
html.os-reference-marketing[data-theme] #scroll-world .sw-hint i::after { background: var(--fg-3); }
html.os-reference-marketing[data-theme] :is(#scroll-world .sw-autoplay, .os-seam-cue) {
  color: var(--fg);
  background: var(--rx-overlay);
  border-color: var(--rx-overlay-border);
  text-decoration: none;
}
html.os-reference-marketing[data-theme] :is(#scroll-world .sw-autoplay, .os-seam-cue):hover {
  background: var(--rx-overlay-hover);
  border-color: var(--line-2);
}
html.os-reference-marketing[data-theme] #scroll-world .sw-autoplay.is-playing { border-color: var(--ref-brand-detail); }
html.os-reference-marketing[data-theme] :is(#scroll-world .sw-btn, #os-held .sw-btn, #scroll-world .sw-route__dot, #scroll-world .sw-autoplay, .os-seam-cue, .sw-idea__alt a):focus-visible {
  outline: 2px solid var(--ref-keyboard-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) :is(.sw-btn, .sw-idea input[type="text"]) { transition: none; }
}
@media (forced-colors: active) {
  html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn {
    forced-color-adjust: auto;
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
    box-shadow: none !important;
  }
  html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-btn:hover {
    background: Highlight !important;
    color: HighlightText !important;
  }
  html.os-reference-marketing[data-theme] :is(#scroll-world, #os-held) .sw-idea input[type="text"]:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* The cinematic homepage's custom composer shares semantic surfaces while its
 * form actions, gates, lane-aware labels and dimensions remain unchanged. */
html.os-reference-marketing[data-theme] .os-held__copy h2 { color: var(--fg); }
html.os-reference-marketing[data-theme] #mkt .hero2-composer {
  --hc-r: 20px;
  background: var(--marketing-raised);
  border-color: var(--line-2);
  box-shadow: var(--marketing-button-shadow);
}
html.os-reference-marketing[data-theme] #mkt .hero2-composer:focus-within {
  border-color: var(--field-border-focus);
  box-shadow: var(--field-ring);
}
html.os-reference-marketing[data-theme] #mkt .hero2-input-row textarea { color: var(--fg); }
html.os-reference-marketing[data-theme] #mkt .hero2-input-row textarea::placeholder { color: var(--fg-3); }
html.os-reference-marketing[data-theme] #mkt .hero2-tool { color: var(--fg-2); }
html.os-reference-marketing[data-theme] #mkt .hero2-tool:hover { background: var(--hover-bg); color: var(--fg); }
html.os-reference-marketing[data-theme] #mkt .gate-pop {
  background: var(--marketing-raised);
  border-color: var(--line-2);
  border-radius: 14px;
  box-shadow: var(--marketing-overlay-shadow);
}

/* September 27: task-oriented marketing pages use the Reference Lab hierarchy. */
html.os-reference-marketing[data-theme] body :is(.text-display-xl, .text-display-lg, .text-display-md, .text-heading-lg),
html.os-reference-marketing[data-theme][data-reference-system="true"] body :is(.text-display-xl, .text-display-lg, .text-display-md, .text-heading-lg),
html.os-reference-marketing[data-theme] .os-marketing .psec > .wrap > .panel > .head > h2 {
  font-family: "Grifter", "Geist", system-ui, sans-serif;
  font-weight: 700;
}
html.os-reference-marketing[data-theme] body :is(.text-heading-md, .text-heading-sm, .text-title-lg, .text-title-md) {
  font-family: var(--font-body);
  font-weight: 600;
}
html.os-reference-marketing[data-theme] .os-marketing .phero.phero--directory {
  margin-top: 104px;
  margin-bottom: 28px;
  padding: 32px clamp(24px, 4vw, 56px);
}
html.os-reference-marketing[data-theme] .os-marketing .phero--directory h1 {
  font-size: clamp(34px, 4vw, 54px);
  margin-top: 16px;
}
html.os-reference-marketing[data-theme] .os-marketing .phero--directory .psub { margin-top: 16px; }
html.os-reference-marketing[data-theme] .os-marketing .phero--directory .phero-cta { margin-top: 20px; }
html.os-reference-marketing[data-theme] .os-marketing .phero--directory .phero-meta { margin-top: 18px; gap: 12px 24px; }
html.os-reference-marketing[data-theme] .os-marketing :is(.reference-catalog, #plans.price-sec) > .wrap > .panel {
  padding: 28px;
}
html.os-reference-marketing[data-theme] .os-marketing .reference-catalog .head { margin-bottom: 24px; }
html.os-reference-marketing[data-theme] .os-marketing .reference-catalog .head h2 { font-size: 30px; }
html.os-reference-marketing[data-theme] .os-marketing .reference-catalog .head .lead { margin-top: 10px; max-width: 78ch; }
html.os-reference-marketing[data-theme] .os-marketing #compare.price-sec .cmp-wrap { margin-top: 12px; position: relative; }
html.os-reference-marketing[data-theme] .os-marketing #compare.price-sec .cmp-wrap:focus-visible { outline: 2px solid var(--marketing-keyboard); outline-offset: 4px; }
html.os-reference-marketing[data-theme] .os-marketing :is(#plans, #pro-volume, #studio-volume) { scroll-margin-top: 0; }
html.os-reference-marketing[data-theme] .learn-hero--directory { grid-template-columns: minmax(0, 1fr); max-width: 860px; padding-bottom: 28px; }
html.os-reference-marketing[data-theme] .learn-hero--directory h1 { font-size: clamp(36px, 4vw, 54px); }
html.os-reference-marketing[data-theme] .learn-hero--directory .learn-actions { margin-top: 20px; }
html.os-reference-marketing[data-theme] .learn-path { margin: 28px 0 48px; }
html.os-reference-marketing[data-theme] .learn-path ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html.os-reference-marketing[data-theme] .learn-path li { align-items: flex-start; gap: 12px; }
html.os-reference-marketing[data-theme] .learn-page :is(.learn-section, .learn-example, .learn-figures, .learn-walkthrough video) { scroll-margin-top: 0; }
html.os-reference-marketing[data-theme] :is(.foot li a, .foot-social a) { min-height: 36px; display: inline-flex; align-items: center; }
html.os-reference-marketing[data-theme] .foot ul { gap: 2px; }
html.os-reference-marketing[data-theme] .foot-social a { min-width: 36px; justify-content: center; }
html.os-reference-marketing[data-theme] .foot h5 { font-family: var(--font-body); letter-spacing: .06em; }
html.os-reference-marketing[data-theme] :is(.composer .send, #mkt .hero2-send) { min-width: 44px; min-height: 44px; }
@media (max-width: 900px) {
  html.os-reference-marketing[data-theme] .learn-path ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  html.os-reference-marketing[data-theme] .os-marketing .phero.phero--directory {
    margin-top: 92px !important;
    margin-bottom: 20px;
    padding: 24px 20px;
  }
  html.os-reference-marketing[data-theme] .os-marketing .phero--directory .phero-meta { font-size: 12px; }
  html.os-reference-marketing[data-theme] .os-marketing :is(.reference-catalog, #plans.price-sec) > .wrap > .panel { padding: 20px 16px; }
  html.os-reference-marketing[data-theme] .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  html.os-reference-marketing[data-theme] .foot li a { min-height: 44px; }
  html.os-reference-marketing[data-theme] .foot-brand { grid-column: 1 / -1; }
  html.os-reference-marketing[data-theme] .learn-page:has(.learn-hero--directory) { padding-top: 104px; }
}
@media (max-width: 480px) {
  html.os-reference-marketing[data-theme] .learn-path ol { grid-template-columns: minmax(0, 1fr); }
}

html.os-reference-marketing[data-theme] .public-footer-platforms { flex-wrap: wrap; row-gap: 8px; }

/* Legacy public footers share the page theme: resolve surface and all reading
   ink together, including the supplied SVG wordmark and small disclosures. */
html.os-reference-marketing[data-theme] .reference-public-footer {
  background: var(--bg-1) !important;
  border-color: var(--line);
  color: var(--fg-2);
}
html.os-reference-marketing[data-theme] .reference-public-footer :is(.text-white, .text-gray-100, .text-gray-200, h2, h3, h4, .brand-full-lockup) {
  color: var(--fg) !important;
}
html.os-reference-marketing[data-theme] .reference-public-footer :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) {
  color: var(--fg-2) !important;
}
html.os-reference-marketing[data-theme] .reference-public-footer .bg-gray-800\/50 {
  background: var(--bg-2) !important;
  border-color: var(--line);
}
html.os-reference-marketing[data-theme] .reference-public-footer :is(.border-gray-800\/50, .border-gray-700\/50) {
  border-color: var(--line);
}
html.os-reference-marketing[data-theme] .reference-public-footer a:hover {
  background-color: var(--hover-bg);
}
html.os-reference-marketing[data-theme] .reference-public-footer a:hover,
html.os-reference-marketing[data-theme] .reference-public-footer a:hover :is(.text-white, .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) {
  color: var(--fg) !important;
}

/* Token-addressed DNS instructions share the app's surfaces without changing
   verification actions, domain records, or success/error meanings. */
html.os-reference-marketing[data-theme] .reference-domain-setup { background: var(--rx-canvas); color: var(--fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup .bg-white { background: var(--rx-panel); }
html.os-reference-marketing[data-theme] .reference-domain-setup .bg-gray-50 { background: var(--rx-chrome); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.border-gray-200, .border-gray-300) { border-color: var(--line); }
html.os-reference-marketing[data-theme] .reference-domain-setup .text-gray-900 { color: var(--fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) { color: var(--fg-2); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.bg-blue-50, .bg-blue-100) { background: var(--info-bg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900) { color: var(--info-fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.bg-green-50, .bg-green-100) { background: var(--success-bg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.text-green-600, .text-green-700, .text-green-800) { color: var(--success-fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.bg-red-50, .bg-red-100) { background: var(--danger-bg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(.text-red-600, .text-red-800) { color: var(--danger-fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup .border-blue-200 { border-color: color-mix(in srgb,var(--info-fg) 24%,var(--rx-panel)); }
html.os-reference-marketing[data-theme] .reference-domain-setup .border-green-200 { border-color: color-mix(in srgb,var(--success-fg) 24%,var(--rx-panel)); }
html.os-reference-marketing[data-theme] .reference-domain-setup .border-red-200 { border-color: color-mix(in srgb,var(--danger-fg) 24%,var(--rx-panel)); }
html.os-reference-marketing[data-theme] .reference-domain-setup .reference-dns-copy { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; }
html.os-reference-marketing[data-theme] .reference-domain-setup .reference-dns-copy:hover { background: var(--rx-hover); color: var(--fg); }
html.os-reference-marketing[data-theme] .reference-domain-setup :is(button, a, input):focus-visible { outline: 2px solid var(--ref-keyboard-focus); outline-offset: 3px; }
html.os-reference-marketing[data-theme] .reference-domain-setup [id^="dns-"] { min-width: 0; overflow-wrap: anywhere; }