/* Alternative and use-case refinements. Existing reference-layout opt-in
   keeps these presentation rules out of the legacy lane. */
html.os-reference-marketing[data-theme] .alternative-section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-block: 16px;
}
html.os-reference-marketing[data-theme] .alternative-section-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-2);
  font: 500 14px/1.4 var(--font-body);
  text-decoration: none;
}
html.os-reference-marketing[data-theme] .alternative-section-nav a:hover {
  background: var(--bg-3);
  color: var(--fg);
}
html.os-reference-marketing[data-theme] .alternative-section-nav a:focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
}
html.os-reference-marketing[data-theme] .reference-generator-compact .composer-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  background: var(--bg-2);
  border-color: var(--line);
}
html.os-reference-marketing[data-theme] .reference-generator-compact input {
  min-width: 0;
  min-height: 48px;
  height: 48px;
  background: transparent;
  color: var(--fg);
}
html.os-reference-marketing[data-theme] .reference-generator-compact button[type="submit"] {
  min-height: 48px;
  justify-content: center;
}
@media (max-width: 639px) {
  html.os-reference-marketing[data-theme] .reference-generator-compact .composer-input-row {
    flex-direction: column;
  }
  html.os-reference-marketing[data-theme] .reference-generator-compact :is(input, button[type="submit"]) {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Compact reading controls for the default legal pages. Section IDs mirror
   the existing v2 documents; the policy text and route defaults stay intact. */
html.os-reference-marketing[data-theme] .reference-legal-directory {
  margin-block: 0 32px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
}
html.os-reference-marketing[data-theme] .reference-legal-directory summary {
  min-height: 48px;
  padding: 14px 16px;
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
}
html.os-reference-marketing[data-theme] .reference-legal-directory nav {
  display: grid;
  gap: 4px;
  padding: 0 12px 12px;
}
html.os-reference-marketing[data-theme] .reference-legal-directory a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
html.os-reference-marketing[data-theme] .reference-legal-directory a:hover {
  background: var(--hover-bg);
  color: var(--fg);
}
html.os-reference-marketing[data-theme] .reference-legal-directory :is(a, summary):focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 2px;
}
html.os-reference-marketing[data-theme] .reference-legal section[id] {
  scroll-margin-top: 0;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry {
  min-height: 0;
  background: var(--bg);
  color: var(--fg);
  padding-block: 64px;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry h1,
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry h1 span {
  color: var(--fg);
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry :is(.text-slate-300, .text-slate-400) {
  color: var(--fg-2);
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry .anonymous-build-composer {
  background: var(--marketing-field);
  border-color: var(--line-2);
  box-shadow: var(--marketing-button-shadow);
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry .anonymous-build-composer > .border-t {
  border-color: var(--line-2);
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry [data-testid="anon-build-prompt"] {
  color: var(--fg);
  background: transparent;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry [data-testid="anon-build-prompt"]::placeholder {
  color: var(--marketing-muted);
  opacity: 1;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry .anonymous-build-composer:focus-within {
  border-color: var(--marketing-focus);
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry [data-testid="anon-build-submit"] {
  min-height: 48px;
  background: var(--brand) !important;
  color: var(--brand-fg) !important;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry [data-testid="anon-build-submit"]:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--ref-brand-alt) !important;
}
html.os-reference-marketing[data-theme] .reference-anonymous-build-entry :is(a, [data-testid="anon-build-submit"]):focus-visible {
  outline: 2px solid var(--marketing-keyboard);
  outline-offset: 3px;
}

/* Example phrases are a static labeled list, never overlapping headline layers.
   This small shared recipe is independent of legacy generator animation CSS. */
html.os-reference-marketing[data-theme] .reference-use-case-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 24px auto;
  max-width: 860px;
}
html.os-reference-marketing[data-theme] .reference-use-case-examples li {
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 999px;
  padding: 7px 12px;
  font: 500 13px/1.4 var(--font-body);
}
@media (max-width: 639px) {
  html.os-reference-marketing[data-theme] .reference-use-case-examples { gap: 6px; }
  html.os-reference-marketing[data-theme] .reference-use-case-examples li { font-size: 12px; padding: 6px 10px; }
}

html.os-reference-marketing[data-theme] .reference-use-case-title {
  font-family: 'Grifter', var(--font-body);
  font-weight: 700;
}
@media (max-width: 639px) {
  html.os-reference-marketing[data-theme] .reference-use-case-title { font-size: 32px; }
}

/* This repeated guidance is reading copy, so it uses supporting text ink
   instead of the decorative brand-green utility on the pale CTA surface. */
html.os-reference-marketing[data-theme] .reference-use-case-callout {
  color: var(--fg-2) !important;
}

/* The twelve use-case pages share one legacy generator template. Keep the
   existing prompt, models, attachments and routes; modernize its structure. */
html.os-reference-marketing[data-theme] .reference-use-case > section { background:var(--bg)!important; padding-block:clamp(48px,7vw,88px); }
html.os-reference-marketing[data-theme] .reference-use-case > section:nth-of-type(even) { background:var(--bg-1)!important; }
html.os-reference-marketing[data-theme] .reference-use-case .container { width:min(100%,1248px); padding-inline:clamp(20px,4vw,48px); }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-hero { overflow:visible; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-hero > .absolute { display:none; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-hero h1 { max-width:1040px; margin-inline:auto; padding:0; color:var(--fg); font-family:"Grifter",var(--font-body); font-size:clamp(32px,4.8vw,64px); line-height:1.08; letter-spacing:-.035em; text-wrap:balance; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form > div { background:var(--rx-composer,var(--bg-3)); border:1px solid var(--line-2); padding:18px; border-radius:20px; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form textarea { display:block; min-height:120px; padding:12px; background:transparent!important; border:0!important; box-shadow:none; color:var(--fg); font:400 18px/1.55 var(--font-body); }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form textarea::placeholder { color:var(--fg-3); }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form textarea:focus { outline:none; box-shadow:none; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form > div:focus-within { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-toolbar { background:transparent!important; border:0!important; border-top:1px solid var(--line)!important; padding:14px 0 0; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-toolbar button:not([data-model-selector-target="option"]) { min-height:40px; border-radius:var(--ref-button-radius); }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-toolbar > div > button { color:var(--fg); background:var(--rx-secondary)!important; border:1px solid var(--line-2)!important; box-shadow:none; transition:background-color 160ms ease; }
html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-toolbar > div > button:hover { background:var(--ref-button-secondary-hover)!important; }
html.os-reference-marketing[data-theme] .reference-use-case button[type="submit"] { background:var(--ref-button-primary-gradient) var(--rx-primary)!important; color:var(--rx-primary-ink)!important; border:1px solid transparent; box-shadow:none; }
html.os-reference-marketing[data-theme] .reference-use-case button[type="submit"]:hover { background:var(--ref-button-primary-gradient-hover) var(--ref-button-primary-hover)!important; transform:none; }
html.os-reference-marketing[data-theme] .reference-use-case button[data-prompt] { background:var(--bg-3)!important; color:var(--fg-2)!important; border:1px solid var(--line); }
html.os-reference-marketing[data-theme] .reference-use-case button[data-prompt]:hover { background:var(--ref-button-secondary-hover)!important; }
/* These are descriptive badges and step numbers, not primary actions. */
html.os-reference-marketing[data-theme] .reference-use-case :is(.bg-primary-100,.bg-primary-300) { background:var(--bg-3); color:var(--fg); }
html.os-reference-marketing[data-theme] .reference-use-case .text-primary-600:not(button) { color:var(--success-fg); }
html.os-reference-marketing[data-theme] .reference-use-case .group:hover .group-hover\:scale-110 { transform:none; }

/* Legacy utility classes follow the app theme, including client-side switches
   where Tailwind's .dark class can lag data-theme. Limit this to use-case pages. */
html.os-reference-marketing[data-theme] .reference-use-case {
  color: var(--fg);
}
html.os-reference-marketing[data-theme] .reference-use-case :is(h1, h2, h3, h4, th, .text-gray-900, .text-gray-100, .text-white):not(button) {
  color: var(--fg) !important;
}
html.os-reference-marketing[data-theme] .reference-use-case :is(p, td, .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800):not(button) {
  color: var(--fg-2) !important;
}
html.os-reference-marketing[data-theme] .reference-use-case :is(.bg-white, .bg-gray-50, .bg-gray-100):not(section) {
  background: var(--bg-2);
}
html.os-reference-marketing[data-theme] .reference-use-case :is(.border-gray-100, .border-gray-200, .border-gray-300) {
  border-color: var(--line);
}
html.os-reference-marketing[data-theme] .reference-use-case p a {
  color: inherit;
}
@media (max-width: 639px) {
  html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form > div { padding: 12px; }
  html.os-reference-marketing[data-theme] .reference-use-case .reference-generator-form textarea { font-size: 16px; padding: 8px; }
}

/* The hero guidance pill is explanatory copy, with the same readable pair
   regardless of the legacy utility class state left by a theme switch. */
html.os-reference-marketing[data-theme] .reference-use-case .reference-use-case-guidance {
  color: var(--fg-2) !important;
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
}

/* Generating from a prompt is the brand submission action. Regular links and
   access/checkout actions continue to use the neutral primary recipe. */
html.os-reference-marketing[data-theme] .reference-use-case :is(.reference-generator-form, .reference-generator-compact) button[type="submit"] {
  background: var(--brand) !important;
  color: var(--brand-fg) !important;
}
html.os-reference-marketing[data-theme] .reference-use-case :is(.reference-generator-form, .reference-generator-compact) button[type="submit"]:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--ref-brand-alt) !important;
}