/* 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;
}
/* ==========================================================================
   Marketing link states — the shared floor.
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
     Jason, 2026-09-30: the green "Meet the team ↓" link on /about changes
     nothing on hover. Crawling every public route found 18 anchor classes
     across 14 pages in that state, in BOTH themes, from two causes:

       1. No hover rule was ever written. .authors-text-link is layout only
          (display / font-size / padding and nothing else); .brand--wordmark,
          the footer logo, repeats on 14 pages with no hover at all.
       2. A hover rule exists and is a visual no-op, because the refresh
          flattened --accent-text AND --accent-text-hover to the same
          var(--fg) to enforce the no-purple-links guard. Every link written
          as `color: var(--accent-text)` + `:hover { color: var(--fg) }`
          now hovers to the colour it already had — .agents-inline-link (8
          instances) and .mcp-inline-link (4) are that shape.

   WHY THE UNDERLINE CHANGES THICKNESS RATHER THAN APPEARING
     A floor that only adds `text-decoration-line: underline` is a no-op on
     the links that are ALREADY underlined at rest, which is most of the
     legal/prose ones (.underline, Tailwind .hover\:underline, the inline
     links on /agents and /connect). Setting the thickness and offset too
     means the state changes either way: an undecorated link gains a 2px
     underline, an already-underlined one thickens from ~1px to 2px. That
     also keeps the affordance off colour alone, which the design system
     requires.

   HOW IT IS WRITTEN
     Every selector carries (0,1,1) at most: the scope sits inside :where()
     and the exclusions sit inside :not(...) whose arguments are :where()ed.
     A surface sheet that already ships a richer hover keeps winning; this
     only fills gaps. That is deliberate — the typography half of this same
     PR exists because a high-specificity blanket default beat the rules it
     was meant to back up.

     Card and tile anchors are excluded STRUCTURALLY (`:not(:has(...))` on
     block-level content) rather than by class substring. `[class*="card"]`
     was the first attempt and it swallowed .help-category-card-meta, which
     is an ordinary text link that happens to sit in a card.

   SCOPE
     html.os-reference-marketing only. The marketing adapter is never loaded
     on ClickFunnels AI, branded partner, OAuth-consent or authenticated
     surfaces (design_refresh_enabled? excludes all of them), so nothing here
     can reach a partner-branded link.
   ========================================================================== */

@media (hover: hover) {
  /* 1. Text links. Controls keep their own background/border hover; an
        anchor that wraps block content is a card and is left alone. */
  :where(html.os-reference-marketing[data-theme])
  a:not(:where([class*="btn"], [class*="button"], [role="button"],
               [class*="chip"], [class*="pill"], [class*="tab"], [class*="crumb"])):not(:has(:where(h1, h2, h3, h4, h5, p, div, section, article, figure))):hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  /* 2. Links whose whole label is artwork — the footer wordmark, guide
        thumbnails. An underline has nothing to draw under, so these take the
        quiet opacity shift instead. Same specificity as rule 1, later in
        source, so it replaces it for these anchors only. */
  :where(html.os-reference-marketing[data-theme])
  a:has(> :where(img, svg, picture)):not(:where([class*="btn"], [role="button"])):hover {
    text-decoration-line: none;
    opacity: 0.78;
  }

  /* 3. An arrow that is a real element moves 2px toward its direction. The
        arrows on .authors-text-link and its siblings are literal "→" / "↓"
        characters inside the label, not elements, so they take rule 1
        instead: a text glyph cannot be transformed without wrapping it, and
        this file does not change markup. */
  :where(html.os-reference-marketing[data-theme])
  a:hover > :where(.arrow, [data-link-arrow]) {
    translate: 2px 0;
  }
  :where(html.os-reference-marketing[data-theme])
  a:hover > :where([data-link-arrow="down"]) {
    translate: 0 2px;
  }
}

:where(html.os-reference-marketing[data-theme])
a > :where(.arrow, [data-link-arrow]) {
  transition: translate 150ms ease;
}

/* Keyboard focus is a separate affordance from hover and belongs on every
   link type, including the ones whose hover is a background change. */
:where(html.os-reference-marketing[data-theme]) a:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(html.os-reference-marketing[data-theme])
  a > :where(.arrow, [data-link-arrow]) {
    transition: none;
  }
  :where(html.os-reference-marketing[data-theme])
  a:hover > :where(.arrow, [data-link-arrow]),
  :where(html.os-reference-marketing[data-theme])
  a:hover > :where([data-link-arrow="down"]) {
    translate: 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. */
/* --font-display is the token every marketing surface sheet uses to ask for
 * "the display face" (surfaces/compare.css, agents.css, affiliates.css,
 * marketing_v4.css and a dozen more; design_system/_tokens.css defines the
 * baseline as Grifter). The refresh rebound it to var(--font-body) and then
 * hand-listed a handful of selectors back into Grifter below, so every
 * display headline NOT on that list silently became Geist the moment the
 * flag went global — /agents' 64px h1 and every /compare section title
 * among them. Bind the role to the refresh's own display face instead of
 * maintaining a selector list that the next surface sheet will miss again.
 *
 * Marketing-scoped ON PURPOSE. ClickFunnels AI and branded partners rebind
 * this same token to Rooftop in their own sheets and never carry
 * .os-reference-marketing (design_refresh_enabled? excludes them), so the
 * display face cannot leak onto a partner surface. :not(.clickfunnels-reference)
 * also puts this rule at the same specificity as the reference_foundations
 * declaration it supersedes, which is what lets source order decide. */
html.os-reference-marketing[data-theme]:not(.clickfunnels-reference) {
  --font-display: var(--font-heading-large);
  /* Outside the .os-marketing islands --accent-text is var(--fg), and the
   * refresh left --accent-text-hover on var(--fg) too, so every link written
   * as `color: var(--accent-text)` + `:hover { color: var(--accent-text-hover) }`
   * hovered to the colour it already had. Point the hover half at the brand
   * detail role (deeper green in light, alt brand green in dark) so neutral
   * inline links have somewhere to go. Inside the islands the pair runs the
   * other way — see --accent-text-hover below. */
  --accent-text-hover: var(--ref-brand-detail);
}
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;
  /* Same reason as the html-scope rebind above: --font-display must resolve
   * to the display face inside the marketing islands too, or .os-marketing
   * content re-flattens every surface sheet's display headline to Geist. */
  --font-display: var(--font-heading-large);
  --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);
  /* Rest ink is brand green in here, so the hover half resolves the other
   * way: green at rest, primary ink on hover. Keeping both halves on the
   * same value is what made every --accent-text link's hover a no-op. */
  --accent-text-hover: var(--fg);
  --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.
 *
 * This default is written through :where() so it carries ZERO specificity.
 * It used to be `html.os-reference-marketing[data-theme] :is(h1, h2)` — 0-2-2,
 * which outranks the `[data-theme] .some-title` rule every marketing surface
 * sheet writes (0-2-0). So the default did not just catch unstyled headings,
 * it BEAT the display-headline declaration on styled ones, and the only way
 * back was to out-specify it by hand in the list below. That list was always
 * going to be incomplete: /agents' 64px hero h1 and all six /compare section
 * titles were never added, so they rendered Geist in production. At zero
 * specificity a surface sheet's own font-family wins, an unstyled h1/h2
 * still lands on Geist, and nothing has to be enumerated. */
:where(html.os-reference-marketing[data-theme] h1, html.os-reference-marketing[data-theme] h2) {
  font-family: var(--font-body);
  text-wrap: balance;
}
/* Kept as the explicit opt-in for headings whose own sheet says nothing about
 * family (the utility classes and the v4 spine's hero slots). Now expressed
 * with the role token rather than a literal face: a partner surface that
 * rebinds --font-heading-large must not be handed Grifter by name. */
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: var(--font-heading-large);
}
/* The display face STOPS at the Large Heading role (26-36px). These rules ask
 * for var(--font-display) but are card titles, plan names, step numbers and
 * compact labels at 14-22px, which the September type rule keeps in Geist:
 * "Keep ordinary metadata, profile subtext, button labels, card titles and
 * small numbers in Geist."
 *
 * They read as an opt-OUT list rather than the old opt-IN list on purpose.
 * Under the corrected --font-display binding a new display headline gets the
 * display face for free, and only the rare compact label that borrowed the
 * display token has to say so. That is the direction that fails safe: the
 * opt-IN list missed /agents' 64px hero and six /compare titles, while this
 * list can only ever miss a 14px label. Scoped to the adapter so flag-off
 * presentation stays byte-identical to its baseline. */
html.os-reference-marketing[data-theme] :is(
  .psec h3, .up h3, .ladders-h h3,
  .ic-mono, .agv-badge, .tl-empty strong,
  .brand-asset__name, .brand-color__name, .brand-font__name,
  .cmp-versus__title,
  .psp-demo-result-h, .psp-beat-h, .psp-why-h,
  .vibe-meta__value, .vibe-step__num
) {
  font-family: var(--font-body);
}
/* 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; }