/* ─────────────────────────────────────────────
   alt.html: Cursor + Interfere inspired
   Premium product-led SaaS landing
   Monochrome base, mint accent, dark hero
   ───────────────────────────────────────────── */

@font-face {
 font-family: 'Prelo';
 src: url('../fonts/Prelo-ExtraBold.ttf') format('truetype');
 font-weight: 800;
 font-style: normal;
 font-display: swap;
}

:root {
 color-scheme: light dark;
 --alt-grid: 1280px;
 --font-sans: 'Inter', system-ui, sans-serif;
 --font-display: 'Inter', system-ui, sans-serif;
 --font-mono: 'IBM Plex Mono', monospace;
 /* Dark theme (default + prefers-color-scheme: dark) */
 --alt-hero-text: rgb(237, 236, 236);
 --alt-bg: #0B1215;
 --alt-surface: #11191D;
 --alt-ink: rgb(237, 236, 236);
 --alt-ink-muted: rgba(237, 236, 236, 0.85);
 --alt-ink-subtle: rgba(237, 236, 236, 0.5);
 --alt-border: rgba(237, 236, 236, 0.08);
 --alt-border-strong: rgba(237, 236, 236, 0.12);
 --alt-dark: #0B1215;
 --alt-dark-surface: #11191D;
 --mint: #98FBCB;
 --mint-muted: rgba(152, 251, 203, 0.4);
 /* Surfaces / rings derived from mint (dark) — light :root overrides with teal for contrast */
 --mint-12: rgba(152, 251, 203, 0.12);
 --mint-25: rgba(152, 251, 203, 0.25);
 --mint-focus-ring: rgba(152, 251, 203, 0.15);
 --mint-hover: #B8FDD8;
 --alt-cta-on-mint: #0B1215;
 --alt-hero-glow-a: rgba(152, 251, 203, 0.06);
 --alt-hero-glow-b: rgba(152, 251, 203, 0.03);
 --alt-elev-1: rgba(0, 0, 0, 0.15);
 --alt-elev-2: rgba(0, 0, 0, 0.25);
 --alt-shadow-1: 0 24px 48px rgba(0, 0, 0, 0.35);
 --alt-shadow-2: 0 16px 48px rgba(0, 0, 0, 0.3);
 --alt-fg-on-dark: 237, 236, 236;
 --alt-kicker-fg: rgba(237, 236, 236, 0.45);
 --alt-chrome-muted: rgba(237, 236, 236, 0.6);
 --alt-form-input-bg: rgba(237, 236, 236, 0.08);
 --alt-form-input-border: rgba(237, 236, 236, 0.15);
 --alt-form-placeholder: rgba(237, 236, 236, 0.4);
 --alt-footer-muted: rgba(237, 236, 236, 0.6);
 --alt-cookie-bg: rgba(11, 18, 21, 0.92);
 /* RAG amber — tuned per theme (light yellow on dark; brown on light for contrast) */
 --alt-rag-amber-fg: #FCD34D;
 --alt-rag-amber-bg: rgba(252, 211, 77, 0.12);
 --alt-rag-amber-border: rgba(252, 211, 77, 0.25);
 --alt-rag-amber-dot: #FCD34D;
}

@media (prefers-color-scheme: light) {
 :root {
  /* Light — near-white surfaces, soft charcoal ink, minimal warmth */
  --alt-hero-text: #161614;
  --alt-bg: #fcfcfa;
  --alt-surface: #f5f5f3;
  --alt-ink: #161614;
  --alt-ink-muted: rgba(22, 22, 20, 0.76);
  --alt-ink-subtle: rgba(22, 22, 20, 0.45);
  --alt-border: rgba(0, 0, 0, 0.08);
  --alt-border-strong: rgba(0, 0, 0, 0.12);
  --alt-dark: #161614;
  --alt-dark-surface: #f0f0ee;
  /* Mint equivalent on light: #003d3b (was footer hover); hover one step lighter */
  --mint: #003d3b;
  --mint-muted: rgba(0, 61, 59, 0.14);
  --mint-12: rgba(0, 61, 59, 0.08);
  --mint-25: rgba(0, 61, 59, 0.22);
  --mint-focus-ring: rgba(0, 61, 59, 0.2);
  --mint-hover: #005a56;
  --alt-cta-on-mint: #fafafa;
  --alt-hero-glow-a: rgba(0, 61, 59, 0.1);
  --alt-hero-glow-b: rgba(0, 61, 59, 0.06);
  --alt-elev-1: rgba(0, 0, 0, 0.035);
  --alt-elev-2: rgba(0, 0, 0, 0.05);
  --alt-shadow-1: 0 18px 40px rgba(0, 0, 0, 0.07);
  --alt-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.06);
  --alt-fg-on-dark: 22, 22, 20;
  --alt-kicker-fg: rgba(22, 22, 20, 0.42);
  --alt-chrome-muted: rgba(22, 22, 20, 0.5);
  --alt-form-input-bg: rgba(0, 0, 0, 0.04);
  --alt-form-input-border: rgba(0, 0, 0, 0.12);
  --alt-form-placeholder: rgba(22, 22, 20, 0.42);
  --alt-footer-muted: rgba(22, 22, 20, 0.52);
  --alt-cookie-bg: rgba(252, 252, 250, 0.97);
  --alt-rag-amber-fg: #b45309;
  --alt-rag-amber-bg: rgba(180, 83, 9, 0.1);
  --alt-rag-amber-border: rgba(180, 83, 9, 0.32);
  --alt-rag-amber-dot: #c2410c;
 }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font-sans);
 background: var(--alt-bg);
 color: var(--alt-ink);
 -webkit-font-smoothing: antialiased;
 line-height: 1.6;
}

::selection { background: var(--mint-muted); color: var(--alt-dark); }
@media (prefers-color-scheme: light) {
 ::selection {
  background: rgba(0, 61, 59, 0.18);
  color: var(--alt-ink);
 }
}

.alt-sr-only {
 position: absolute;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border: 0;
}

.alt-wrap {
 max-width: var(--alt-grid);
 margin: 0 auto;
 padding: 0 48px;
}
.alt-wrap-narrow { max-width: 800px; }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-sans);
 font-weight: 600;
 cursor: pointer;
 text-decoration: none;
 border: none;
 border-radius: 6px;
 transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary {
 background: var(--mint);
 color: var(--alt-cta-on-mint);
 padding: 10px 20px;
 font-size: 14px;
}
.btn-primary:hover { background: var(--mint-hover); }
.btn-ghost {
 background: transparent;
 color: rgba(237, 236, 236, 0.85);
 border: 1px solid rgba(237, 236, 236, 0.2);
 padding: 10px 20px;
 font-size: 14px;
}
.btn-ghost:hover {
 background: rgba(237, 236, 236, 0.08);
 border-color: rgba(237, 236, 236, 0.3);
}
@media (prefers-color-scheme: light) {
 .btn-ghost {
  color: rgba(22, 22, 20, 0.82);
  border-color: rgba(0, 0, 0, 0.14);
 }
 .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
 }
}
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* Ghost buttons: light outline on dark */
.alt-steps .btn-ghost,
.alt-outcomes .btn-ghost,
.alt-liveform .btn-ghost { color: rgba(237, 236, 236, 0.85); border-color: rgba(237, 236, 236, 0.2); }
.alt-steps .btn-ghost:hover,
.alt-outcomes .btn-ghost:hover,
.alt-liveform .btn-ghost:hover { background: rgba(237, 236, 236, 0.08); border-color: rgba(237, 236, 236, 0.3); }
@media (prefers-color-scheme: light) {
 .alt-steps .btn-ghost,
 .alt-outcomes .btn-ghost,
 .alt-liveform .btn-ghost { color: rgba(22, 22, 20, 0.82); border-color: rgba(0, 0, 0, 0.14); }
 .alt-steps .btn-ghost:hover,
 .alt-outcomes .btn-ghost:hover,
 .alt-liveform .btn-ghost:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); }
}

/* ─── 1. Hero (dark, cinematic) ────────────────────────────── */
.alt-hero {
 position: relative;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 48px 0 72px;
 background: var(--alt-bg);
 color: var(--alt-hero-text);
}
.alt-hero-bg {
 position: absolute;
 inset: 0;
 background:
  radial-gradient(ellipse 80% 50% at 50% 0%, var(--alt-hero-glow-a) 0%, transparent 50%),
  radial-gradient(circle at 20% 80%, var(--alt-hero-glow-b) 0%, transparent 40%);
 pointer-events: none;
}
.alt-hero-content {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: center;
 width: 100%;
}
.alt-hero-layout {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(0, 470px) 1fr;
 gap: 64px;
 align-items: center;
 width: 100%;
 max-width: var(--alt-grid);
 margin: 0 auto;
 padding: 0 48px;
}
.alt-hero-text {
 min-width: 0;
 max-width: 470px;
 text-align: left;
}
.alt-hero-brand {
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--alt-hero-text);
 font-weight: 600;
 font-size: 14px;
 margin-bottom: 24px;
}
.alt-hero-brand img {
 filter: brightness(0) invert(1);
 transition: transform 0.08s ease-out;
 will-change: transform;
}
@media (prefers-color-scheme: light) {
 .alt-hero-brand img { filter: none; }
}
.alt-kicker {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--alt-kicker-fg);
 margin-bottom: 20px;
}
.alt-hero-h1 {
 font-family: var(--font-display);
 font-size: 32px;
 font-weight: 500;
 letter-spacing: -0.02em;
 line-height: 1.12;
 color: var(--alt-hero-text);
 max-width: 470px;
 margin: 0 0 40px;
}
.alt-accent { color: var(--mint); }
.alt-hero-ctas {
 display: flex;
 gap: 16px;
 margin-bottom: 0;
}
.alt-hero-demo-wrap {
 position: relative;
 z-index: 0;
 min-width: 0;
 overflow-x: hidden;
 overflow-y: visible;
 margin-right: calc(-48px + min(0px, (1280px - 100vw) / 2));
 width: calc(100% + 48px + max(0px, (100vw - 1280px) / 2));
 isolation: isolate;
}
/* Comet: point + short train — stacked strokes (long→short dash, low→full opacity) read as gradient to zero */
.alt-hero-demo-trace {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 4;
 pointer-events: none;
 overflow: visible;
 transform: translateZ(0);
}
/* Move path start / loop seam from top-left to bottom-right (often off-screen with the wide demo). */
.alt-hero-demo-trace-group {
 transform-box: fill-box;
 transform-origin: center;
 transform: rotate(180deg);
}
.alt-hero-demo-trace-layer {
 fill: none;
 stroke: var(--mint);
 vector-effect: non-scaling-stroke;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-dashoffset: 0;
 will-change: stroke-dashoffset;
 animation: alt-hero-trace-dash 20s linear infinite;
}
/* pathLength=100: train length T=3.8; trailing gap = 96.2 so each pattern repeats every 100 units (seamless loop). Layers live in a <g> with filter #alt-hero-trace-merge (blur + alpha trim). */
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(1) {
 stroke-dasharray: 3.8 96.2;
 stroke-width: 2.35px;
 stroke-opacity: 0.045;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(2) {
 stroke-dasharray: 0 0.85 2.95 96.2;
 stroke-width: 1.95px;
 stroke-opacity: 0.12;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(3) {
 stroke-dasharray: 0 1.6 2.2 96.2;
 stroke-width: 1.6px;
 stroke-opacity: 0.2;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(4) {
 stroke-dasharray: 0 2.25 1.55 96.2;
 stroke-width: 1.35px;
 stroke-opacity: 0.32;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(5) {
 stroke-dasharray: 0 2.8 1 96.2;
 stroke-width: 1.2px;
 stroke-opacity: 0.48;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(6) {
 stroke-dasharray: 0 3.25 0.55 96.2;
 stroke-width: 1.1px;
 stroke-opacity: 0.68;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(7) {
 stroke-dasharray: 0 3.42 0.38 96.2;
 stroke-width: 1.06px;
 stroke-opacity: 0.88;
}
.alt-hero-demo-trace .alt-hero-demo-trace-layer:nth-of-type(8) {
 stroke-dasharray: 0 3.52 0.28 96.2;
 stroke-width: 1.05px;
 stroke-opacity: 1;
}
@keyframes alt-hero-trace-dash {
 to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
 .alt-hero-demo-trace-layer {
  animation: none;
  stroke-dasharray: none;
  stroke-opacity: 0.22;
 }
}
.alt-hero-demo {
 position: relative;
 z-index: 1;
 width: 142.86%;
 min-width: 1056px;
 pointer-events: none;
 border-radius: 12px;
 overflow: hidden;
 border: 1px solid var(--alt-border-strong);
 box-shadow: var(--alt-shadow-1);
}
.alt-hero-demo-chrome {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: var(--alt-elev-2);
 border-bottom: 1px solid var(--alt-border);
 font-size: 12px;
 font-family: var(--font-mono);
 color: var(--alt-chrome-muted);
}
.alt-hero-demo-dots { display: flex; gap: 6px; }
.alt-hero-demo-dots span {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: rgba(var(--alt-fg-on-dark), 0.2);
}
@media (prefers-color-scheme: light) {
 .alt-hero-demo-dots span { background: rgba(var(--alt-fg-on-dark), 0.18); }
}
.alt-hero-demo-iframe {
 display: block;
 width: 100%;
 height: 80vh;
 border: none;
 pointer-events: none;
 user-select: none;
}
.alt-hero-card {
 background: var(--alt-dark-surface);
 border: 1px solid var(--alt-border-strong);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: var(--alt-shadow-1);
}
.alt-hero-card-header {
 padding: 20px 24px;
 border-bottom: 1px solid var(--alt-border);
}
.alt-hero-card-label {
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--alt-kicker-fg);
 display: block;
 margin-bottom: 4px;
}
.alt-hero-card-product {
 font-size: 14px;
 font-weight: 500;
 color: var(--alt-ink);
}
.alt-hero-card-scores {
 padding: 16px 24px;
}
.alt-hero-score {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 0;
 font-size: 13px;
 color: var(--alt-ink-muted);
 border-bottom: 1px solid var(--alt-border);
}
.alt-hero-score:last-of-type { border-bottom: none; }
.alt-hero-score--green span:last-child { color: var(--mint); font-weight: 600; font-family: var(--font-mono); }
.alt-hero-score--amber span:last-child { color: var(--alt-rag-amber-fg); font-weight: 600; font-family: var(--font-mono); }
.alt-hero-score--red span:last-child { color: #FCA5A5; font-weight: 600; font-family: var(--font-mono); }
.alt-hero-card-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 24px;
 background: var(--alt-elev-2);
 font-size: 12px;
}
.alt-hero-rating {
 font-weight: 700;
 font-family: var(--font-mono);
}
.alt-hero-rating--amber { color: var(--alt-rag-amber-fg); }
.alt-hero-fix {
 color: var(--mint);
 font-size: 11px;
}

/* ─── 2. Trust strip ──────────────────────────────────────── */
.alt-ticker {
 padding: 20px 0;
 background: var(--alt-surface);
 border-top: 1px solid var(--alt-border);
 border-bottom: 1px solid var(--alt-border);
 overflow: hidden;
}
.alt-ticker-inner {
 display: flex;
 align-items: center;
 gap: 32px;
 max-width: var(--alt-grid);
 margin: 0 auto;
 padding: 0 48px;
}
.alt-ticker-label {
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--alt-ink-subtle);
 white-space: nowrap;
 flex-shrink: 0;
}
.alt-ticker-wrap {
 flex: 1;
 min-width: 0;
 overflow: hidden;
}
.alt-ticker-track {
 display: flex;
 align-items: center;
 gap: 48px;
 animation: alt-ticker 40s linear infinite;
 width: max-content;
}
.alt-ticker-item {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 13px;
 font-weight: 500;
 color: var(--alt-ink-muted);
 text-decoration: none;
 white-space: nowrap;
 transition: color 0.15s;
}
.alt-ticker-item:hover { color: var(--alt-ink); }
.alt-ticker-item img {
 flex-shrink: 0;
 object-fit: contain;
 border-radius: 4px;
}
@keyframes alt-ticker {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
 .alt-ticker-track { animation: none; }
}

/* ─── Section block layout (50/50, 80–90vh, app iframe right) ─── */
.alt-section-block {
 min-height: 85vh;
 display: flex;
 align-items: center;
 margin: 96px;
 background: var(--alt-surface);
 border-top: 1px solid var(--alt-border);
 border-radius: 16px;
 overflow: hidden;
}
.alt-section-block-inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: stretch;
 width: 100%;
 min-height: 85vh;
 min-width: 0;
}
.alt-section-block-text {
 padding: 64px 48px;
 max-width: 470px;
 min-width: 0;
}
.alt-section-block-text .alt-section-h2 { margin-bottom: 32px; }
.alt-section-block-visual {
 position: relative;
 min-height: 85vh;
 height: 100%;
 display: flex;
 overflow: hidden;
 min-width: 0;
}
.alt-section-block-visual iframe {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 85vh;
 border: none;
 pointer-events: none;
 user-select: none;
}

/* ─── 3. Three-step section ────────────────────────────────── */
.alt-steps {
 display: block;
}
.alt-steps-inner {
 padding: 64px 48px;
 max-width: var(--alt-grid);
 margin: 0 auto;
}
.alt-steps-inner .alt-section-h2 { margin-bottom: 64px; }
.alt-steps-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 48px;
}
.alt-step-visual {
 margin-bottom: 20px;
 border-radius: 12px;
 overflow: hidden;
 background: var(--alt-elev-2);
 box-shadow: none;
}
.alt-step-visual picture {
 display: block;
 width: 100%;
}
.alt-step-visual img {
 display: block;
 width: 100%;
 height: auto;
 vertical-align: top;
}
.alt-section-h2 {
 font-family: var(--font-display);
 font-size: 32px;
 font-weight: 500;
 letter-spacing: -0.02em;
 line-height: 1.15;
 color: var(--alt-ink);
 max-width: 800px;
 margin: 0 0 64px;
}
.alt-step-num {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 color: var(--mint);
 display: block;
 margin-bottom: 8px;
}
.alt-step-title {
 font-family: var(--font-display);
 font-size: 17px;
 font-weight: 500;
 letter-spacing: -0.02em;
 color: var(--alt-ink);
 margin-bottom: 8px;
 line-height: 1.3;
}
.alt-step-body {
 font-size: 15px;
 line-height: 1.65;
 color: var(--alt-ink-muted);
}

/* ─── 4. Problem section ───────────────────────────────────── */
.alt-problem { padding: 0; }
.alt-problem-dimensions,
.alt-liveform-visual {
 flex: 1;
 display: flex;
 align-items: stretch;
 padding: 48px;
 min-height: 0;
}
.alt-problem-dimensions .alt-dimensions-card,
.alt-liveform-visual .alt-code-block {
 flex: 1;
 min-width: 0;
 min-height: 0;
 margin: 0;
 height: 100%;
}
.alt-dimensions-card {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 min-height: 0;
 background: var(--alt-elev-2);
 border: 1px solid var(--alt-border-strong);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: var(--alt-shadow-1);
}
.alt-dimensions-header {
 flex-shrink: 0;
 padding: 16px 20px;
 border-bottom: 1px solid var(--alt-border);
}
.alt-dimensions-label {
 display: block;
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--mint);
 margin-bottom: 4px;
}
.alt-dimensions-tagline {
 font-size: 12px;
 font-weight: 500;
 color: var(--alt-ink);
 margin-bottom: 8px;
 opacity: 0.92;
}
.alt-dimensions-score {
 display: flex;
 align-items: center;
 gap: 8px;
}
.alt-dimensions-score-label {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--alt-ink-subtle);
}
.alt-dimensions-score-value {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 600;
 font-family: var(--font-mono);
 letter-spacing: 0.03em;
 border: 1px solid;
}
.alt-dimensions-score-value.rag-amber { background: var(--alt-rag-amber-bg); color: var(--alt-rag-amber-fg); border-color: var(--alt-rag-amber-border); }
.alt-dimensions-score-value .rag-dot { width: 6px; height: 6px; border-radius: 50%; }
.alt-dimensions-score-value .rag-dot.amber { background: var(--alt-rag-amber-dot); }
.alt-dimensions-list {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 0;
}
.alt-dimension-item {
 flex: 1;
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 12px 20px;
 font-size: 15px;
 font-weight: 500;
 color: var(--alt-ink);
 background: var(--alt-elev-1);
 border-bottom: 1px solid var(--alt-border);
 font-family: var(--font-sans);
}
.alt-dimension-item:last-child { border-bottom: none; }
.alt-dimension-num {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 color: var(--mint);
 opacity: 0.9;
 min-width: 24px;
}
.alt-dimension-rag {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 flex-shrink: 0;
}
.alt-dimension-rag.rag-green { background: var(--mint); }
.alt-dimension-rag.rag-amber { background: var(--alt-rag-amber-dot); }
.alt-dimension-rag.rag-red { background: #FCA5A5; }
.alt-body {
 font-size: 16px;
 line-height: 1.65;
 color: var(--alt-ink-muted);
 margin-bottom: 20px;
}
.alt-body:last-child { margin-bottom: 0; }
.alt-body em { font-style: normal; color: var(--alt-ink); }
.alt-body a { color: var(--mint); text-decoration: none; }
.alt-body a:hover { text-decoration: underline; }
.alt-body code {
 font-family: var(--font-mono);
 font-size: 13px;
 background: var(--mint-12);
 color: var(--mint);
 padding: 2px 6px;
 border-radius: 4px;
}

/* ─── 5. Demo section ──────────────────────────────────────── */
.alt-demo {
 padding: 0;
 display: block;
 border: 1px solid var(--alt-border);
}
.alt-demo-inner {
 display: flex;
 flex-direction: column;
 width: 100%;
}
.alt-demo-header {
 padding: 64px 48px 48px;
 max-width: var(--alt-grid);
 margin: 0 auto;
 width: 100%;
}
.alt-demo-header .alt-section-h2 { margin-bottom: 16px; }
.alt-demo-full {
 width: 100%;
 min-height: 85vh;
 overflow: hidden;
 padding: 0 48px 48px;
}
.alt-demo-window {
 display: flex;
 flex-direction: column;
 min-height: 560px;
 height: 85vh;
 border: 1px solid var(--alt-border-strong);
 border-radius: 12px;
 box-shadow: var(--alt-shadow-1);
 overflow: hidden;
 background: var(--alt-surface);
}
.alt-demo-full .alt-demo-chrome {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: var(--alt-elev-2);
 border-bottom: 1px solid var(--alt-border);
 font-size: 12px;
 font-family: var(--font-mono);
 color: var(--alt-chrome-muted);
}
.alt-demo-full .alt-demo-dots {
 display: flex;
 gap: 8px;
}
.alt-demo-full .alt-demo-dots span {
 width: 12px;
 height: 12px;
 border-radius: 50%;
}
.alt-demo-full .alt-demo-dots span:nth-child(1) { background: #ff5f57; }
.alt-demo-full .alt-demo-dots span:nth-child(2) { background: #febc2e; }
.alt-demo-full .alt-demo-dots span:nth-child(3) { background: #28c840; }
.alt-demo-full iframe {
 flex: 1;
 min-height: 0;
 display: block;
 width: 100%;
 border: none;
}
.alt-demo .alt-body { max-width: 66.67%; margin-bottom: 24px; }
.alt-demo-actions {
 display: flex;
 gap: 16px;
 margin-bottom: 0;
}
.alt-demo-frame {
 border-radius: 12px;
 overflow: hidden;
 border: 1px solid var(--alt-border-strong);
 box-shadow: var(--alt-shadow-2);
}
.alt-demo-chrome {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 background: var(--alt-elev-2);
 border-bottom: 1px solid var(--alt-border);
 font-size: 12px;
 font-family: var(--font-mono);
 color: var(--alt-ink-subtle);
}
.alt-demo-dots { display: flex; gap: 6px; }
.alt-demo-dots span {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: rgba(var(--alt-fg-on-dark), 0.2);
}
@media (prefers-color-scheme: light) {
 .alt-demo-dots span { background: rgba(var(--alt-fg-on-dark), 0.16); }
}
.alt-demo-iframe {
 display: block;
 width: 100%;
 height: 560px;
 border: none;
}

/* ─── 6. .liveform section ─────────────────────────────────── */
.alt-liveform {
 padding: 0;
 color: var(--alt-hero-text);
}
.alt-liveform .alt-kicker { color: var(--alt-kicker-fg); }
.alt-liveform .alt-section-h2 { color: var(--alt-hero-text); }
.alt-liveform .alt-body { color: var(--alt-ink-muted); }
.alt-liveform .alt-body em { color: var(--alt-hero-text); }
.alt-code-block {
 background: var(--alt-elev-2);
 border: 1px solid var(--alt-border-strong);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: var(--alt-shadow-1);
}
.alt-code-bar {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--alt-ink-subtle);
 padding: 12px 16px;
 border-bottom: 1px solid var(--alt-border);
}
.alt-code-block pre {
 padding: 20px 24px;
 font-family: var(--font-mono);
 font-size: 12px;
 line-height: 1.8;
 overflow-x: auto;
 margin: 0;
}
.alt-code-block code { color: rgba(214,255,246,0.7); }
@media (prefers-color-scheme: light) {
 .alt-code-block code { color: rgba(22, 22, 20, 0.78); }
}
.alt-code-key { color: var(--mint); }
.alt-code-comment { color: var(--alt-ink-subtle); }

/* ─── 7. Outcomes ─────────────────────────────────────────── */
.alt-outcomes {
 padding: 0;
 display: block;
 margin: 96px;
 background: transparent;
 border: none;
 border-radius: 0;
 overflow: visible;
}
.alt-outcomes-inner {
 padding: 64px 48px;
 max-width: var(--alt-grid);
 margin: 0 auto;
}
.alt-outcomes-inner .alt-section-h2 { margin-bottom: 64px; }
.alt-outcomes-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
}
.alt-outcome-box {
 padding: 32px 28px;
 background: var(--alt-surface);
 border: 1px solid var(--alt-border);
}
.alt-outcome-box:nth-child(1) { border-radius: 16px 0 0 0; }
.alt-outcome-box:nth-child(3) { border-radius: 0 16px 0 0; }
.alt-outcome-box:nth-child(4) { border-radius: 0 0 0 16px; }
.alt-outcome-box:nth-child(6) { border-radius: 0 0 16px 0; }
.alt-outcome-box h3 {
 font-family: var(--font-display);
 font-size: 17px;
 font-weight: 500;
 letter-spacing: -0.02em;
 color: var(--alt-ink);
 margin-bottom: 12px;
 line-height: 1.35;
}
.alt-outcome-box p {
 font-size: 14px;
 line-height: 1.6;
 color: var(--alt-ink-muted);
}

/* ─── 8. FAQ ───────────────────────────────────────────────── */
.alt-faq { padding: 0; display: block; background: none; border: none; border-radius: 0; }
.alt-faq-inner {
 padding: 64px 48px;
 max-width: var(--alt-grid);
 margin: 0 auto;
}
.alt-faq-inner .alt-section-h2 { margin-bottom: 64px; }
.alt-faq-list {
 display: flex;
 flex-direction: column;
 gap: 1px;
 background: var(--alt-border);
 border: 1px solid var(--alt-border);
 border-radius: 12px;
 overflow: hidden;
}
.alt-faq-item {
 background: var(--alt-surface);
}
.alt-faq-item summary {
 padding: 24px 28px;
 font-size: 16px;
 font-weight: 500;
 letter-spacing: -0.02em;
 color: var(--alt-ink);
 cursor: pointer;
 list-style: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.alt-faq-item summary::-webkit-details-marker { display: none; }
.alt-faq-item summary::after {
 content: '+';
 font-size: 20px;
 font-weight: 400;
 color: var(--alt-ink-subtle);
}
.alt-faq-item[open] summary::after { content: '−'; }
.alt-faq-item p {
 padding: 0 28px 24px;
 font-size: 15px;
 line-height: 1.65;
 color: var(--alt-ink-muted);
}

/* ─── 9. CTA ───────────────────────────────────────────────── */
.alt-cta {
 padding: 0;
 color: var(--alt-hero-text);
}
.alt-cta .alt-kicker { color: var(--alt-kicker-fg); }
.alt-cta-h2 {
 font-family: var(--font-display);
 font-size: 32px;
 font-weight: 500;
 letter-spacing: -0.02em;
 color: var(--alt-hero-text);
 margin: 0 0 24px;
}
.alt-form {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-bottom: 16px;
 max-width: 440px;
}
.alt-form input[type="text"],
.alt-form input[type="email"] {
 flex: 1;
 min-width: 140px;
 padding: 12px 16px;
 font-size: 15px;
 font-family: var(--font-sans);
 background: var(--alt-form-input-bg);
 border: 1px solid var(--alt-form-input-border);
 border-radius: 6px;
 color: var(--alt-hero-text);
}
.alt-form input::placeholder { color: var(--alt-form-placeholder); }
.alt-form input:focus {
 outline: none;
 border-color: var(--mint);
 box-shadow: 0 0 0 3px var(--mint-focus-ring);
}
.alt-form button {
 padding: 12px 24px;
 font-size: 15px;
 font-weight: 600;
 background: var(--mint);
 color: var(--alt-cta-on-mint);
 border: none;
 border-radius: 6px;
 cursor: pointer;
}
.alt-form button:hover { background: var(--mint-hover); }
.alt-form-error { color: #FCA5A5; font-size: 14px; margin-top: 8px; }
.alt-form-privacy {
 font-size: 12px;
 color: var(--alt-kicker-fg);
 margin-bottom: 24px;
}
.alt-form-privacy a { color: var(--alt-ink-muted); }
.alt-form-network-note {
 font-size: 12px;
 color: var(--alt-kicker-fg);
 margin-top: 12px;
 margin-bottom: 0;
}
.alt-form-network-note a { color: var(--alt-ink-muted); }
.alt-form-success {
 display: none;
 font-size: 16px;
 color: var(--mint);
 padding: 24px 0;
}
.alt-cta-demo {
 margin-top: 24px;
}
.alt-cta-demo a {
 color: var(--alt-footer-muted);
 text-decoration: none;
 font-size: 14px;
}
.alt-cta-demo a:hover { color: var(--mint); }

.alt-form-honey { position: absolute; left: -9999px; }

/* Early access section */
.alt-earlyaccess {
 padding: 0;
 color: var(--alt-hero-text);
 min-height: 0;
}
.alt-earlyaccess-inner {
 padding: 64px 48px;
 max-width: var(--alt-grid);
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: start;
}
.alt-earlyaccess-text .alt-section-h2 { margin-bottom: 20px; }
.alt-earlyaccess-form {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 width: 100%;
 min-width: 0;
}
.alt-earlyaccess-form .alt-form {
 margin-left: 0;
 max-width: none;
 width: 100%;
 flex-direction: column;
}
.alt-earlyaccess-form .alt-form input[type="text"],
.alt-earlyaccess-form .alt-form input[type="email"] {
 width: 100%;
 min-width: 0;
 flex: none;
}
.alt-earlyaccess-form .alt-form button {
 width: 100%;
}
.alt-earlyaccess-form .alt-form-privacy { text-align: right; }
.alt-earlyaccess .alt-form input[type="text"],
.alt-earlyaccess .alt-form input[type="email"] {
 color: var(--alt-hero-text);
}

/* CTA integrations table (dark mode) */
.alt-cta-visual {
 min-height: 0;
 min-width: 0;
 overflow: hidden;
 display: flex;
 align-items: stretch;
 padding: 48px;
}
.alt-cta-table-wrap {
 flex: 1;
 min-width: 0;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 background: var(--alt-elev-2);
 border: 1px solid var(--alt-border-strong);
 border-radius: 12px;
 box-shadow: var(--alt-shadow-1);
}
.alt-cta-table {
 width: 100%;
 border-collapse: collapse;
 min-width: 680px;
}
.alt-cta-table th {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--alt-ink-subtle);
 padding: 14px 18px;
 text-align: left;
 border-bottom: 1px solid var(--alt-border);
 font-family: var(--font-mono);
}
.alt-cta-table td {
 padding: 16px 18px;
 border-bottom: 1px solid var(--alt-border);
 font-size: 13px;
 color: var(--alt-ink-muted);
 vertical-align: middle;
 line-height: 1.45;
}
.alt-cta-table tr:last-child td { border-bottom: none; }
.alt-cta-table-name { font-weight: 600; color: var(--alt-ink); }
.alt-cta-table-meta { font-size: 12px; color: var(--alt-ink-subtle); margin-top: 2px; }
.alt-cta-table-num { font-family: var(--font-mono); font-weight: 600; color: var(--alt-ink); }
.alt-cta-table-path { font-family: var(--font-mono); font-size: 12px; color: var(--mint); }
.alt-cta-table-arrow { color: var(--alt-kicker-fg); font-size: 12px; }
.alt-cta-table-remed { max-width: 220px; }

/* RAG badges (dark mode) */
.alt-cta .rag-badge {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 600;
 font-family: var(--font-mono);
 letter-spacing: 0.03em;
 border: 1px solid;
}
.alt-cta .rag-badge.rag-red { background: rgba(250, 165, 165, 0.12); color: #FCA5A5; border-color: rgba(250, 165, 165, 0.25); }
.alt-cta .rag-badge.rag-amber { background: var(--alt-rag-amber-bg); color: var(--alt-rag-amber-fg); border-color: var(--alt-rag-amber-border); }
.alt-cta .rag-badge.rag-green { background: var(--mint-12); color: var(--mint); border-color: var(--mint-25); }
.alt-cta .rag-dot {
 width: 6px; height: 6px;
 border-radius: 50%;
}
.alt-cta .rag-dot.red { background: #FCA5A5; }
.alt-cta .rag-dot.amber { background: var(--alt-rag-amber-dot); }
.alt-cta .rag-dot.green { background: var(--mint); }

/* ─── Footer ───────────────────────────────────────────────── */
.alt-footer {
 position: relative;
 overflow: hidden;
 padding: 72px 0 48px;
 background: var(--alt-surface);
 border-top: 1px solid var(--alt-border);
 color: var(--alt-footer-muted);
}
.alt-footer-bg-logo {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 aspect-ratio: 1;
 transform: translateY(-50%);
 pointer-events: none;
 z-index: 0;
 opacity: 0.12;
 mix-blend-mode: soft-light;
 filter: drop-shadow(0 0 80px rgba(11, 18, 21, 0.25));
 transition: transform 0.08s ease-out;
 will-change: transform;
}
.alt-footer-bg-logo svg {
 width: 100%;
 height: 100%;
 fill: var(--alt-bg);
 color: var(--alt-bg);
}
.alt-footer .alt-wrap { position: relative; z-index: 1; }
.alt-footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 48px;
 margin-bottom: 48px;
}
.alt-footer-brand {
 display: flex;
 align-items: center;
 gap: 10px;
 text-decoration: none;
 color: var(--alt-hero-text);
 font-weight: 600;
 font-size: 15px;
 margin-bottom: 16px;
}
.alt-footer-brand img {
 display: block;
 flex-shrink: 0;
 filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: light) {
 .alt-footer-brand img {
  /* Mark SVG is #002726; optional future asset can match var(--mint) */
  filter: none;
 }
 .alt-footer-brand {
  color: var(--mint);
  font-weight: 800;
 }
 .alt-footer-brand span {
  font-weight: 800;
  color: var(--mint);
  letter-spacing: -0.03em;
 }
 .alt-footer-brand:hover {
  color: var(--mint-hover);
 }
}
@media (prefers-color-scheme: dark) {
 .alt-footer-brand:hover {
  color: var(--mint);
 }
}
.alt-footer-tagline {
 font-size: 14px;
 line-height: 1.6;
 color: var(--alt-ink-subtle);
}
.alt-footer-tagline a,
.alt-footer-tagline strong { display: inline; }
.alt-footer-tagline a { color: var(--alt-ink-muted); }
.alt-footer-label {
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--alt-kicker-fg);
 margin-bottom: 16px;
 font-family: var(--font-mono);
}
.alt-footer-label--sub {
 margin-top: 22px;
 margin-bottom: 16px;
}
.alt-footer a {
 display: block;
 color: var(--alt-footer-muted);
 text-decoration: none;
 font-size: 14px;
 margin-bottom: 10px;
}
.alt-footer a:hover { color: var(--alt-hero-text); }
.alt-footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 24px;
 border-top: 1px solid var(--alt-border);
 font-size: 13px;
 color: var(--alt-kicker-fg);
}
.alt-footer-bottom a { display: inline; margin: 0; }
.alt-footer-version {
 font-family: var(--font-mono);
 font-size: 12px;
}

main { padding-top: 0; width: 100%; max-width: none; }

/* Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
 .alt-wrap { padding: 0 24px; }
 .alt-hero-layout { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
 .alt-hero-demo-wrap { margin-right: calc(-24px + min(0px, (1280px - 100vw) / 2)); width: calc(100% + 24px + max(0px, (100vw - 1280px) / 2)); }
 .alt-hero-demo-iframe { height: min(80vh, 400px); }
 .alt-section-block { margin: 48px 24px; min-width: 0; }
 .alt-steps-inner { padding: 48px 24px; }
 .alt-steps-grid { grid-template-columns: 1fr; gap: 40px; }
 .alt-problem-dimensions,
 .alt-liveform-visual { padding: 24px; }
 .alt-outcomes-inner { padding: 48px 0; }
 .alt-outcomes-grid { grid-template-columns: 1fr; gap: 0; }
 .alt-outcome-box:nth-child(1) { border-radius: 16px 16px 0 0; }
 .alt-outcome-box:nth-child(3) { border-radius: 0; }
 .alt-outcome-box:nth-child(4) { border-radius: 0; }
 .alt-outcome-box:nth-child(6) { border-radius: 0 0 16px 16px; }
 .alt-faq-inner { padding: 48px 0; }
 .alt-earlyaccess-inner { padding: 48px 24px; grid-template-columns: 1fr; gap: 40px; }
 .alt-earlyaccess-form { align-items: stretch; }
 .alt-earlyaccess-form .alt-form { margin-left: 0; }
 .alt-earlyaccess-form .alt-form-privacy { text-align: left; margin-left: 0; }
 .alt-demo-header { padding: 48px 24px 32px; width: 100%; max-width: none; box-sizing: border-box; }
 .alt-demo .alt-body { max-width: 100%; }
 .alt-demo-full { padding: 0 24px 24px; }
 .alt-demo-window { min-height: 400px; height: 80vh; }
 .alt-section-block-inner {
  grid-template-columns: 1fr;
  min-width: 0;
  max-width: 100%;
 }
 .alt-section-block-text { order: 1; padding: 48px 24px; max-width: none; width: 100%; min-width: 0; box-sizing: border-box; }
 .alt-cta .alt-section-block-text {
  max-width: 100%;
  overflow-x: hidden;
 }
 .alt-cta .alt-kicker,
 .alt-cta .alt-cta-h2,
 .alt-cta .alt-body {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
 }
 .alt-cta .alt-cta-h2 {
  overflow-wrap: anywhere;
  word-wrap: break-word;
 }
 .alt-cta .alt-body {
  overflow-wrap: anywhere;
  word-break: break-word;
 }
 .alt-cta .alt-body code {
  white-space: normal;
  word-break: break-all;
 }
 .alt-section-block-visual { order: 2; min-height: 50vh; min-width: 0; }
 .alt-section-block-visual iframe { min-height: 50vh; }
 .alt-cta-visual { min-height: 0; min-width: 0; padding: 24px; overflow: hidden; }
 .alt-cta-table-wrap { min-width: 0; }
 .alt-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
 .alt-hero-ctas { flex-direction: column; align-items: flex-start; }
 .alt-demo-actions { flex-direction: column; }
 .alt-form { flex-direction: column; }
 .alt-footer-grid { grid-template-columns: 1fr; }
 .alt-footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Legal (privacy, terms) — same palette as landing, minimal layout */
.alt-legal {
 padding: 48px 0 80px;
}
.alt-legal-back {
 margin-bottom: 28px;
}
.alt-legal-back-link {
 font-size: 14px;
 font-weight: 500;
 color: var(--alt-ink-muted);
 text-decoration: none;
}
.alt-legal-back-link:hover {
 color: var(--mint);
}
.alt-legal h1 {
 font-size: 26px;
 font-weight: 700;
 letter-spacing: -0.02em;
 color: var(--alt-ink);
 margin-bottom: 0.65em;
 line-height: 1.2;
}
.alt-legal-h2 {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--alt-ink-subtle);
 margin: 1.75em 0 0.6em;
 font-family: var(--font-mono);
}
.alt-legal p {
 color: var(--alt-ink-muted);
 max-width: 62ch;
 margin-bottom: 1em;
 font-size: 15px;
 line-height: 1.65;
}
.alt-legal p a {
 color: var(--mint);
 text-decoration: none;
}
.alt-legal p a:hover {
 text-decoration: underline;
}
.alt-legal-nav {
 margin-top: 2em;
 padding-top: 1.25em;
 border-top: 1px solid var(--alt-border);
}
.alt-legal-nav a {
 color: var(--alt-ink-muted);
 font-size: 14px;
 font-weight: 500;
 text-decoration: none;
}
.alt-legal-nav a:hover {
 color: var(--mint);
}
.alt-legal-meta {
 font-size: 13px;
 color: var(--alt-ink-subtle);
 margin-bottom: 1.5em;
}
.alt-legal h3 {
 font-size: 16px;
 font-weight: 600;
 letter-spacing: -0.01em;
 color: var(--alt-ink);
 margin: 1.35em 0 0.45em;
 line-height: 1.35;
}
.alt-legal ul,
.alt-legal ol {
 color: var(--alt-ink-muted);
 font-size: 15px;
 line-height: 1.65;
 margin: 0.5em 0 1em 1.25em;
 max-width: 62ch;
}
.alt-legal li {
 margin-bottom: 0.4em;
}
.alt-legal code {
 font-family: var(--font-mono);
 font-size: 0.92em;
 color: var(--alt-ink);
}
.alt-legal-note {
 font-size: 12px;
 line-height: 1.6;
 color: var(--alt-ink-subtle);
 margin-top: 2.25em;
 padding-top: 1.25em;
 border-top: 1px solid var(--alt-border);
 max-width: 68ch;
}
.alt-legal-note a {
 color: var(--alt-ink-muted);
}
.alt-legal-note a:hover {
 color: var(--mint);
}

/* Cookie consent banner (marketing pages): compact, bottom-left */
.cookie-banner {
 position: fixed;
 left: 12px;
 bottom: calc(12px + env(safe-area-inset-bottom, 0));
 right: auto;
 top: auto;
 z-index: 9999;
 width: auto;
 max-width: min(340px, calc(100vw - 24px));
 padding: 0;
 margin: 0;
 background: var(--alt-cookie-bg);
 border: 1px solid var(--alt-border-strong);
 border-radius: 8px;
 box-shadow: var(--alt-shadow-1);
 backdrop-filter: blur(12px);
}
.cookie-banner[hidden] {
 display: none !important;
}
.cookie-banner-inner {
 margin: 0;
 padding: 12px 14px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 10px;
}
.cookie-banner-text {
 margin: 0;
 font-size: 12px;
 line-height: 1.45;
 color: var(--alt-ink-muted);
}
.cookie-banner-link {
 color: var(--mint);
 text-decoration: none;
}
.cookie-banner-link:hover {
 text-decoration: underline;
}
.cookie-banner-actions {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-start;
 gap: 8px;
 flex-shrink: 0;
}
.cookie-banner-btn {
 font-family: var(--font-sans);
 font-size: 12px;
 font-weight: 600;
 padding: 6px 12px;
 border-radius: 6px;
 cursor: pointer;
 border: 1px solid transparent;
 transition: background 0.15s, border-color 0.15s, color 0.15s;
 white-space: nowrap;
}
.cookie-banner-btn--primary {
 background: var(--mint);
 color: var(--alt-cta-on-mint);
 border-color: var(--mint);
}
.cookie-banner-btn--primary:hover {
 background: var(--mint-hover);
}
.cookie-banner-btn--ghost {
 background: transparent;
 color: var(--alt-ink-muted);
 border-color: var(--alt-border-strong);
}
.cookie-banner-btn--ghost:hover {
 background: var(--alt-form-input-bg);
 border-color: var(--alt-form-input-border);
}
@media (max-width: 380px) {
 .cookie-banner {
  left: 8px;
  max-width: calc(100vw - 16px);
 }
 .cookie-banner-actions {
  justify-content: flex-start;
 }
}