/* CutFrame Brand Board v0.27 / Wireframe v0.24, accepted October 6, 2026.
   Website presentation only. Existing page layouts, content and behavior stay local. */
:root {
  color-scheme: dark;
  --bg: #241033; --bg-elev: #fbf3e1;
  --surface: #fbf3e1; --surface-hover: #f6e7c4;
  --border: #e8c169; --border-strong: #7a4cad;
  --fg: #f1ebf8; --fg-strong: #faf8fb;
  --fg-muted: #dccbee; --fg-dim: #c0a9dc;
  --accent: #e8c169; --accent-purple: #c0a9dc;
  --emphasis: #efd79e; --emphasis-strong: #e8c169;
  --success: #6ce8b8; --warning: #ff8b8b;
  --brand-card: #fbf3e1; --brand-edge: #e8c169;
  --brand-control: #f1ebf8; --brand-control-hover: #dccbee;
  --brand-ink: #1c1420; --brand-purple: #7a4cad;
  --brand-media: #14101c; --brand-chrome: #3d1b54;
  --brand-page-muted: #dccbee;
  --brand-shadow: 0 8px 24px rgb(12 8 15 / 18%);
  --brand-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html, body { background: var(--bg); color: var(--fg); font-family: var(--brand-font); }
body { padding-bottom: 76px; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid #c0a9dc; outline-offset: 3px; }
html { scroll-padding-top: 112px; }
img { max-width: 100%; }
.nav {
  background: var(--brand-chrome); color: #faf8fb;
  border-bottom: 2px solid #e8c169; gap: 20px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav.scrolled { border-bottom-color: #e8c169; }
.nav-brand, .foot-brand { font-weight: 750; letter-spacing: -.02em; }
.nav .nav-brand { flex-shrink: 0; color: #faf8fb; }
.nav-links, .nav-tag { color: #f1ebf8; }
.nav .nav-links a { color: #f1ebf8; }
.nav .nav-links a:hover, .nav-tag a:hover { color: #efd79e; }
.nav-tag a { color: #faf8fb; }
.nav-mark, .lead-mark {
  background: none; border-radius: 0; box-shadow: none;
  display: grid; place-items: center; padding: 0; flex-shrink: 0;
}
.nav-mark { width: 32px; height: 32px; }
.lead-mark { width: 48px; height: 48px; }
.nav-mark img, .lead-mark img { display: block; width: 100%; height: 100%; }
.hero-glow, body::before { background: none; }
.hero-title .grad, h1 .grad, .promo-title .grad, .grad {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--fg-strong);
}
.hero-eyebrow, .eyebrow, .page-eyebrow, .doc-eyebrow, .lead-eyebrow,
.section-eyebrow { color: var(--accent); }
.page-eyebrow, .doc-eyebrow, .lead-eyebrow, .eyebrow { background: #f1ebf8; color: #63359a; border: 1px solid #c0a9dc; border-radius: 999px; display: inline-block; padding: 6px 12px; }
.hero-eyebrow { background: var(--brand-control); color: #4e2a78; border-color: #c0a9dc; }
.hero-trust, .hero-scroll, .page-sub, .hero-sub, .sub, .lead-sub { color: var(--brand-page-muted); }
/* Dark page ground; gold content cards use readable dark-purple text tokens. */
.pain-card, .how-step, .signal-card, .use-card, .price-card, .plan-card,
.auth-card, .apply-card, .form-card, .roi-card, .cat-card, .clip-card,
.receipt-front, .receipt-back, .output-hero, .source-card, .contact-block,
.free-band, .dash-promo, .prefs, .toc, .disclaimer, .promise, .chapters,
.benefit, .exchange, .stage, .entry, .take, .reveal-panel, .scorecard,
.waiting, .note-block, .founding, .playbook-feature, .round, .final,
.about-inner, .seats, .honesty-note {
  --fg: #241033; --fg-strong: #241033; --fg-muted: #4e2a78; --fg-dim: #63359a;
  --accent: #63359a; --accent-purple: #7a4cad;
  --emphasis: #6b4e14; --emphasis-strong: #6b4e14;
  --success: #2f7d52; --warning: #b4482a;
  --surface: #fbf3e1; --surface-hover: #f6e7c4;
  --bg-elev: #fbf3e1; --border: #e8c169; --border-strong: #7a4cad;
  color-scheme: light; color: #241033;
  background: #fbf3e1 !important; border: 2px solid #e8c169 !important;
  border-radius: 14px; box-shadow: var(--brand-shadow);
}
.pain-card:hover, .signal-card:hover, .price-card:hover, .plan-card:hover,
.cat-card:hover, .clip-card:hover { background: #fbf3e1; border-color: #e8c169; }
.auth-card::before { background: #e8c169; }
.receipt-back-title, .receipt-back-sub, .receipt-hook, .clip-hook,
.plan-price-amount, .price-amount, .roi-hero-value, .final-score,
.plan-tier, .price-tier, .use-title, .cat-title, .pain-title { color: #241033; }
.receipt-time, .receipt-time .val { color: #63359a; }
.receipt-back-foot, .receipt-signals, .plan-features, .price-features,
.clip-summary, .clip-meta, .clip-score, .plan-bill-note { color: #4e2a78; }
.premium, .ecosystem, .featured { background: #fbf3e1; border-color: #e8c169; }
.featured::before, .premium::before { background: none; }
.plan-hours { background: #f1ebf8; border: 1px solid #c0a9dc; }
.price-badge, .plan-badge-top, .plan-tag, .use-tag, .receipt-tag,
.clip-ranktag, .entry-tag, .item-status, .badge, .algo-tag {
  background: #f1ebf8; color: #4e2a78; border: 1px solid #c0a9dc;
}
/* Gold-card notices and interactive states keep their own readable surface colors. */
.source-card > .sample-playback-notice { color: #4e2a78; }
.clip-video > .sample-playback-notice { color: #c0a9dc; }
.pricing-note .safeguard, .safeguard { color: #241033; }
.roi-tier-cta { background: #e8c169; color: #1c1420; }
.roi-tier-badge, .clip-score.overlap, .clip-ranktag.rank-1, .verdict-icon.tie {
  background: #e8c169; color: #1c1420;
}
.clip-score.overlap .val { color: #1c1420; }
.step-marker .num { background: #e8c169; color: #1c1420; }
.round-hook { background: #f1ebf8; color: #4e2a78; }
.round-hook strong { color: #241033; }
.take-badge { background: #241033; color: #faf8fb; }
.take-badge.b { background: #63359a; color: #faf8fb; }
.take.selected { box-shadow: 0 0 0 2px #7a4cad; }
.pick-btn.selected, .pick-btn.selected:hover {
  background: #4e2a78 !important; color: #faf8fb !important; border-color: #7a4cad;
}
.final-score { background: none; -webkit-text-fill-color: currentColor; color: #241033; }
/* Owner feedback: opaque ROI surfaces and solid text, including actual text fill. */
.roi-output {
  --fg: #241033; --fg-strong: #241033; --fg-muted: #4e2a78; --fg-dim: #63359a;
  background: #f1ebf8; border: 2px solid #7a4cad; color: #241033;
}
.roi-hero-value {
  background: none; background-clip: border-box; -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: #241033;
}
.roi-mini-stat, .roi-tier-suggest, .roi-methodology {
  background: #fbf3e1; border: 1px solid #7a4cad;
}
.roi-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roi-tier-text { min-width: 0; flex-basis: 160px; }
.roi-tier-cta { border: 1px solid #a87a1e; }
.roi-tier-cta:hover { background: #efd79e; color: #1c1420; filter: none; }
.roi-card :focus-visible, .ecosystem :focus-visible {
  outline: 3px solid #4e2a78; outline-offset: 3px;
}
.roi-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #63359a 0%, #63359a var(--val), #c0a9dc var(--val), #c0a9dc 100%);
  border: 1px solid #63359a;
}
.roi-slider::-moz-range-track { background: #c0a9dc; border: 1px solid #63359a; }
.roi-slider::-moz-range-progress { background: #63359a; }
/* Future ecosystem capabilities have no purchase, signup or contact action. */
.price-card.ecosystem .price-badge { background: #f1ebf8; color: #4e2a78; border-color: #c0a9dc; }
.ecosystem .price-tier { text-transform: none; letter-spacing: -.01em; font-size: 18px; }
.ecosystem .price-hours { background: #f1ebf8; border: 1px solid #c0a9dc; }
.ecosystem .future-note { font-size: 12px; color: #4e2a78; line-height: 1.6; margin: 0 0 16px; }
.ecosystem .future-cta, .ecosystem .future-cta:hover {
  background: #f1ebf8 !important; color: #4e2a78 !important;
  border: 1px solid #7a4cad; opacity: 1; cursor: default; transform: none;
}
.price-card.ecosystem:hover { transform: none; }
/* Solid gold primary actions; lilac secondary actions and fields. */
.btn-primary, .btn-submit, .btn-next, .price-cta, .plan-cta,
.search-btn, .pick-btn, .free-cta, .cookie-btn.primary {
  background: #e8c169 !important; color: #1c1420 !important;
  border: 1px solid #a87a1e; box-shadow: none;
  font-weight: 650; min-height: 40px;
}
.btn-primary:hover, .btn-submit:hover, .price-cta:hover, .plan-cta:hover,
.search-btn:hover, .pick-btn:hover, .cookie-btn.primary:hover { background: #efd79e !important; }
.btn-ghost, .oauth-btn, .split-toggle-btn, .billing-toggle-item,
.cookie-btn.ghost, .pw-toggle {
  background: #f1ebf8; color: #4e2a78; border: 1px solid #c0a9dc;
}
.btn-ghost:hover, .oauth-btn:hover, .split-toggle-btn:hover,
.billing-toggle-item:hover, .cookie-btn.ghost:hover { background: #dccbee; color: #241033; }
.split-toggle-btn.active, .billing-toggle-item.active {
  background: #e8c169; color: #1c1420; border-color: #a87a1e;
}
.billing-toggle, .split-demo-toggle { background: #f1ebf8; border-color: #c0a9dc; }
.input, .select, .textarea, .role-select, .search-input {
  background: #f1ebf8; color: #241033; border: 1px solid #7a4cad;
  border-radius: 10px;
}
.input:focus, .select:focus, .textarea:focus, .search-input:focus {
  background: #f1ebf8; border-color: #7a4cad;
}
.input::placeholder, .textarea::placeholder, .search-input::placeholder { color: #63359a; opacity: 1; }
input[type="range"] { accent-color: #7a4cad; }
.toggle { background: #dccbee; border: 1px solid #7a4cad; }
.toggle.on { background: #7a4cad; }
/* Footage, waveforms and transcript demonstrations retain a neutral viewing ground. */
.signal-visual, .transcript-window, .signals-frame, .clip-video, .take video,
video, .frame-body {
  --fg: #f1ebf8; --fg-strong: #faf8fb; --fg-muted: #c0a9dc; --fg-dim: #c0a9dc;
  --accent: #e8c169; --accent-purple: #c0a9dc; --emphasis: #efd79e;
  --success: #6ce8b8; --surface: #2a2434; --border: #4a4453;
  background: #14101c; color: #f1ebf8; color-scheme: dark;
}
.transcript-header, .frame-header { background: #2a2434; color: #f1ebf8; }
.transcript-line.highlight { background: #2a2434; border-color: #e8c169; }
.transcript-text { color: #f1ebf8; }
.transcript-time, .frame-time { color: #c0a9dc; }
.sv-bars .bar, .wf-bar { background: #e8c169; }
.sv-bars .bar.hot, .wf-bar.peak { background: #c0a9dc; }
.compare-wrap { overflow-x: auto; background: #fbf3e1; color: #241033; border: 2px solid #e8c169; border-radius: 14px; }
.compare-table { --fg: #241033; --fg-muted: #4e2a78; --accent: #63359a; --border: #e8c169; }
.compare-table .us { background: #f1ebf8; color: #4e2a78; }
.cookies-table, .subprocessors { background: #fbf3e1; color: #241033; border: 2px solid #e8c169; }
table.cookies-table th, table.subprocessors th { background: #f1ebf8; color: #4e2a78; }
.subscribe { background: #fbf3e1; border: 2px solid #e8c169; color: #241033; }
.subscribe-label { color: #4e2a78; }
.subscribe input { background: #f1ebf8; color: #241033; border: 1px solid #7a4cad; border-radius: 10px; padding: 9px 10px; }
.subscribe button { background: #e8c169; color: #1c1420; }
.entry { padding: 24px; }
.faq-answer { color: var(--fg-muted); }
.playbook-cover { background: #4e2a78 !important; color: #f1ebf8; --fg-muted: #dccbee; --fg-dim: #c0a9dc; --emphasis: #efd79e; }
.search-wrap { border: 2px solid #e8c169; }
footer { background: var(--brand-chrome); color: #f1ebf8; --fg-muted: #dccbee; --fg-dim: #c0a9dc; border-top: 2px solid #e8c169; }
/* Both existing notices remain visible, with room reserved rather than overlap. */
aside[role="note"] {
  background: #3d1b54 !important; color: #f1ebf8 !important;
  border-top: 2px solid #e8c169 !important; padding: 10px 20px !important;
}
aside[role="note"] a { color: #efd79e !important; }
.cookie-banner {
  bottom: 90px !important; background: #fbf3e1 !important; color: #241033 !important;
  border: 2px solid #e8c169 !important; box-shadow: var(--brand-shadow) !important;
  font-family: var(--brand-font) !important;
}
.cookie-text, .cookie-text strong { color: #241033 !important; }
.cookie-text a { color: #63359a !important; }
.cookie-actions .cookie-btn.ghost { background: #f1ebf8; color: #4e2a78; border-color: #c0a9dc; }
.cookie-actions .cookie-btn.ghost:hover { background: #dccbee; color: #241033; }
.cookie-icon { background: #efd79e !important; box-shadow: none !important; }
@media (max-width: 960px) {
  .nav { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .nav-links { margin-left: 0; gap: 20px; }
  .nav-cta { gap: 8px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 156px; }
  .nav { padding: 12px 16px; gap: 10px; }
  .nav-brand { font-size: 15px; }
  .nav-links { display: flex; order: 3; width: 100%; overflow-x: auto; padding: 6px 0 2px; white-space: nowrap; gap: 20px; font-size: 13px; }
  .nav-cta { order: 2; margin-left: 0; flex: 1 1 auto; }
  .nav-tag { order: 2; margin-left: 0; flex: 1 1 100%; font-size: 12px; }
  .hero { padding-top: 200px; }
  section { padding: 64px 20px; }
  .pain-grid, .how-grid, .signals-grid, .use-grid, .pricing-grid, .plans-grid,
  .cats-grid, .clips-grid, .benefits, .takes, .scorecards { grid-template-columns: 1fr; }
  .roi-card, .roi-inputs, .roi-output, .contact-body { min-width: 0; }
  .search-input { min-width: 0; padding: 12px 10px; }
  .playbook-feature { grid-template-columns: minmax(0, 1fr) !important; padding: 24px 20px !important; gap: 24px !important; }
  .playbook-feature > div { min-width: 0; }
  .roi-card { padding: 24px 20px; }
  .roi-output { padding: 22px 18px; }
  .roi-mini-stat { padding: 12px 10px; }
  .price-card, .plan-card { min-width: 0; }
  .hero-title { font-size: clamp(32px, 8.5vw, 48px); }
  .doc, .page { padding-left: 20px; padding-right: 20px; }
  .cookie-banner { bottom: 112px !important; left: 10px; right: 10px; padding: 14px !important; }
  .cookie-text { min-width: 0 !important; }
  .subscribe { flex-wrap: wrap; padding: 16px; }
  .subscribe-label { flex-basis: 100%; }
  .subscribe input { min-width: 0; flex: 1 1 140px; width: 100%; }
  .prefs-save, .foot-bar { flex-wrap: wrap; gap: 12px; }
  .cookies-table, .subprocessors { table-layout: fixed; width: 100%; }
  .cookies-table th, .cookies-table td, .subprocessors th, .subprocessors td { overflow-wrap: anywhere; padding: 10px 8px; }
  body { padding-bottom: 112px; }
  aside[role="note"] { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}