/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * genre: atmospheric · macrostructure: Split Studio · theme: custom violet/orchid
 * enrichment: E1 tier-A real H3 Max proof · nav: N9 · footer: Ft2
 * audience: streamers · use: buy/share/demo · tone: premium-community-live
 * contrast: pass (40–41) · slop: pass (42–45) · honest/chrome: pass (46–47)
 * responsive/mobile: pass (30, 34, 49–57) · tested 320/375/414/768/1280
 */
@import url("../tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-paper); }
body { min-width: 20rem; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 12%, color-mix(in oklch, var(--color-accent) 15%, transparent), transparent 25%); z-index: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.05; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); letter-spacing: -.045em; }
.hero h1 { overflow-wrap: anywhere; word-break: normal; hyphens: none; }
html[lang="fr"] .hero h1 { font-size: clamp(3.25rem, 7vw, 6.6rem); }
h2 { font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); letter-spacing: -.035em; }
h3 { font-size: var(--text-lg); }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.wordmark span, .hero h1 b { color: var(--color-accent); font-style: normal; }
.hidden { display: none !important; }
.signal { display: flex; gap: var(--space-xs); align-items: center; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .08em; white-space: nowrap; }
.signal .live-dot, .live-dot { display: inline-block; flex: 0 0 auto; inline-size: .5rem; block-size: .5rem; border-radius: var(--radius-pill); background: var(--color-accent); }
.signal [data-i18n] { display: inline; inline-size: auto; block-size: auto; background: none; white-space: nowrap; }
.section-shell { position: relative; z-index: 1; padding-inline: clamp(var(--space-md), 5vw, var(--space-3xl)); max-width: 92rem; margin-inline: auto; }

.nav-pill { position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-lg); padding: var(--space-xs) var(--space-sm); width: max-content; max-width: calc(100% - 2rem); background: color-mix(in oklch, var(--color-paper-2) 86%, transparent); backdrop-filter: blur(14px) saturate(120%); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); z-index: 200; }
.nav-links { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.nav-links a { white-space: nowrap; color: var(--color-muted); }
.nav-actions, .app-nav-actions { display: flex; align-items: center; gap: var(--space-xs); }
.lang-toggle { min-inline-size: 2.75rem; min-block-size: 2.75rem; display: grid; place-items: center; padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer; }

.button { min-height: 44px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); padding: var(--space-sm) var(--space-lg); cursor: pointer; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.button-small { min-height: 36px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); font-weight: 700; }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.button[data-state="loading"] { cursor: wait; }
.button[data-state="error"] { border-color: var(--color-error); }
.button[data-state="success"] { border-color: var(--color-success); }
.text-link { display: inline-block; color: var(--color-muted); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: .35em; white-space: nowrap; }

.hero { position: relative; z-index: 1; min-height: clamp(36rem, 78dvh, 52rem); display: grid; grid-template-columns: minmax(18rem, .85fr) minmax(22rem, 1.25fr); align-items: center; gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); padding: clamp(4rem, 8vh, 5.25rem) clamp(var(--space-md), 4vw, var(--space-2xl)) clamp(5.25rem, 10vh, 7rem); max-width: 110rem; margin-inline: auto; }
.hero-copy { display: grid; gap: clamp(var(--space-md), 2vh, var(--space-lg)); align-content: center; max-width: 38rem; min-width: 0; }
.lede { max-width: 54ch; color: var(--color-muted); font-size: var(--text-md); }
.lede-benefit { color: var(--color-ink); font-size: var(--text-lg); font-weight: 700; max-width: 28ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }
.reveal { opacity: 0; transform: translateY(8px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

.pipeline-demo { margin: 0; width: 100%; height: min(38rem, 68dvh); max-height: 38rem; min-height: 0; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); overflow: hidden; display: grid; }
.live-stage-grid { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--space-md); align-items: stretch; height: 100%; min-height: 0; max-height: 100%; }
.chat-rail { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; max-height: 100%; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); overflow: hidden; }
.chat-rail header { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; border-bottom: var(--rule-hair) solid var(--color-rule); }
.chat-log { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); overflow-x: hidden; overflow-y: auto; min-height: 0; height: 100%; max-height: 100%; overscroll-behavior: contain; mask-image: linear-gradient(to bottom, transparent, var(--color-mask) 8%, var(--color-mask) 94%, transparent); scrollbar-width: thin; }
.chat-log::-webkit-scrollbar { display: none; }
.chat-line { display: grid; gap: .1rem; font-size: var(--text-sm); line-height: 1.3; flex-shrink: 0; }
.chat-line b { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.chat-line span { color: var(--color-ink); }
.chat-line.is-tip span { color: var(--color-accent); }
.chat-line { animation: chat-in var(--dur-long) var(--ease-out); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.live-stage-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-sm); min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.donation-alert { position: absolute; z-index: 3; inset: var(--space-sm) auto auto var(--space-sm); max-width: min(16rem, 52%); display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--color-paper) 88%, transparent); border: var(--rule-hair) solid var(--color-accent); }
.donation-alert small { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .08em; }
.donation-who { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; }
.donation-who strong { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -.03em; font-weight: 700; }
.donation-who b { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); }
.donation-prompt { min-height: 1em; color: var(--color-ink); font-size: 0.7rem; }
.donation-prompt::after { content: "▍"; color: var(--color-accent); }
.donation-alert.is-complete .donation-prompt::after { content: none; }
.join-form { display: grid; gap: var(--space-xs); }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.tip-event { display: flex; gap: var(--space-sm); align-items: flex-start; background: var(--color-paper-3); color: var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-md); max-width: 34rem; }
.tip-event div { display: grid; gap: var(--space-2xs); }
.tip-event small, .flow-stages small, .frame-scene p { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); }
.flow-line { height: var(--rule-hair); background: var(--color-rule); }
.flow-stages { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; gap: var(--space-xs); }
.flow-stages li { display: grid; gap: var(--space-2xs); color: var(--color-neutral); }
.flow-stages span { font-family: var(--font-mono); font-size: var(--text-sm); }
.flow-stages .is-on span { color: var(--color-accent); }
.frame { min-height: 17rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-paper); }
.example-generation { position: relative; aspect-ratio: 16 / 9; min-height: 0; }
.example-generation > img, .example-generation > video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--color-paper); }
.yield-example { margin-top: var(--space-md); color: var(--color-ink) !important; font-family: var(--font-mono); font-size: var(--text-sm); }
.yield-example small { display: block; margin-top: var(--space-2xs); color: var(--color-neutral); font-size: var(--text-xs); }
.example-caption { position: absolute; inset: auto 0 0; display: grid; gap: var(--space-xs); padding: var(--space-md); background: linear-gradient(to top, color-mix(in oklch, var(--color-paper) 96%, transparent), color-mix(in oklch, var(--color-paper) 72%, transparent), transparent); }
.example-caption > div { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.example-caption span, .example-caption small { font-family: var(--font-mono); font-size: var(--text-xs); }
.example-caption span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.03em; }
.example-caption small { color: var(--color-muted); }
.example-caption strong { max-width: 58ch; }
.frame-scene { height: 100%; min-height: 17rem; position: relative; overflow: hidden; background: linear-gradient(165deg, var(--color-paper-3), var(--color-paper)); }
.moon { position: absolute; inline-size: 5rem; block-size: 5rem; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-accent) 18%, var(--color-paper-3)); inset: 2rem 2rem auto auto; }
.runner, .duck { position: absolute; bottom: 2.7rem; display: block; background: var(--color-ink); }
.runner { left: 35%; inline-size: 1.2rem; block-size: 4rem; transform: rotate(16deg); border-radius: var(--radius-pill); }
.runner::after { content: ""; position: absolute; inline-size: 1.6rem; block-size: 1.6rem; border-radius: var(--radius-pill); background: var(--color-accent); inset: -1.1rem auto auto -.2rem; }
.duck { inline-size: 5rem; block-size: 3rem; border-radius: 70% 45% 45% 70%; }
.duck::after { content: ""; position: absolute; inline-size: 2.3rem; block-size: 2.3rem; border-radius: var(--radius-pill); background: var(--color-ink); inset: -1.3rem -.6rem auto auto; }
.duck-a { right: 13%; transform: scale(1.4); }.duck-b { right: 44%; transform: scale(.75); opacity: .65; }
.frame-scene p { position: absolute; inset: auto auto var(--space-sm) var(--space-md); }

.workflow { padding-block: var(--space-3xl) var(--space-4xl); display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--space-3xl); }
.section-copy { display: grid; align-content: start; gap: var(--space-lg); }
.section-copy p, .price-workbench p, .waitlist p { color: var(--color-muted); max-width: 58ch; }
.price-workbench .button { margin-top: var(--space-lg); width: max-content; max-width: 100%; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xl); }
.steps li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-lg); }
.steps li span { grid-row: 1 / 3; font-family: var(--font-mono); color: var(--color-accent); }
.steps li p { color: var(--color-muted); max-width: 50ch; }

.price-workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-3xl); padding-block: var(--space-3xl); background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-md); }
.monetization-workbench { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-3xl); align-items:center; padding-block:var(--space-3xl); }
.monetization-copy { display:grid; gap:var(--space-md); align-content:start; }
.monetization-copy > p:not(.signal) { max-width:52ch; color:var(--color-muted); }
.monetization-copy .button { width:max-content; max-width:100%; margin-top:var(--space-sm); }
.revenue-equation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.revenue-equation article { min-width:0; min-height:10rem; display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-lg); border-radius:var(--radius-md); background:var(--color-paper-2); color:var(--color-ink); }
.revenue-equation span,.revenue-equation small { color:var(--color-muted); }
.revenue-equation strong { font-family:var(--font-display); font-size:clamp(var(--text-2xl),5vw,var(--text-4xl)); line-height:1; letter-spacing:-.05em; }
.revenue-equation .revenue-result { grid-column:1/-1; min-height:12rem; background:var(--color-accent); color:var(--color-accent-ink); }
.revenue-equation .revenue-result span,.revenue-equation .revenue-result small { color:var(--color-accent-ink); }
.price { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--color-accent) !important; font-variant-numeric: tabular-nums; }
.spec { margin: 0; display: grid; }
.spec div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec dt { color: var(--color-neutral); }.spec dd { margin: 0; text-align: end; font-family: var(--font-mono); font-size: var(--text-sm); }

.waitlist { padding-block: var(--space-4xl); display: grid; grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: start; }
.auth-panel { min-width: 0; }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); align-items: stretch; }
.password-toggle { min-inline-size: 2.75rem; min-block-size: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer; }
.auth-switch { margin: .35rem 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.auth-switch .text-link { display: inline; padding: 0; min-height: 0; border: 0; background: none; color: var(--color-accent); cursor: pointer; }
.inline-form { display: grid; gap: var(--space-xs); align-content: center; }
.inline-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); }
input, textarea, select { width: 100%; min-height: 44px; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }
textarea { min-height: 7rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-neutral); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); }
input:disabled, textarea:disabled, select:disabled { opacity: .55; cursor: not-allowed; color: var(--color-neutral); }
input[data-state="loading"], textarea[data-state="loading"] { cursor: wait; }
input[data-state="success"], textarea[data-state="success"] { border-color: var(--color-success); }
.form-message { min-height: 1lh; font-size: var(--text-sm); overflow-wrap: anywhere; }
.foot-stmt { position: relative; z-index: 1; display: grid; gap: var(--space-2xl); padding: var(--space-3xl) clamp(var(--space-md), 5vw, var(--space-3xl)) var(--space-xl); background: var(--color-paper-2); color: var(--color-ink); }
.foot-stmt > p { font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); max-width: 28ch; line-height: 1; }
.foot-stmt > div { display: flex; justify-content: space-between; gap: var(--space-lg); color: var(--color-neutral); font-size: var(--text-sm); }

.app-page::before { display: none; }
.app-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)); border-bottom: var(--rule-hair) solid var(--color-rule); }
.account-chip { display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 16rem; padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip b { color: var(--color-ink); font-weight: 500; }
.welcome-banner { padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--color-accent) 12%, var(--color-paper)); }
.account-panel { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.account-panel dl { margin: 0; display: grid; gap: var(--space-xs); }
.account-panel dt { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); }
.account-panel dd { margin: 0; }
.payout-setup { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); margin-top:var(--space-md); padding-top:var(--space-lg); border-top:var(--rule-hair) solid var(--color-rule); }
.payout-setup > div { display:grid; gap:var(--space-xs); }
.payout-setup p,.payout-setup span { color:var(--color-muted); }
.tip-page-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr); align-items:center; gap:var(--space-xl); padding:var(--space-xl); background:linear-gradient(135deg,rgb(180 77 255 / 16%),rgb(18 13 28 / 96%) 55%); border:1px solid rgb(180 77 255 / 42%); border-radius:var(--radius-md); }
.collab-test-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr); align-items:center; gap:var(--space-xl); padding:var(--space-xl); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 88%,var(--color-accent-wash)); }
.collab-test-panel h2 { margin:var(--space-xs) 0 var(--space-sm); }
.collab-test-panel p { color:var(--color-muted); }
.tip-page-panel h2 { margin:.35rem 0 .65rem; }
.tip-page-panel p { margin:0; color:var(--color-muted); }
.tip-page-actions { display:grid; gap:var(--space-sm); }
.tip-page-actions .status-chip { width:max-content; }
.status-chip { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.dashboard-shell { max-width: 90rem; margin-inline: auto; padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-4xl); display: grid; gap: var(--space-xl); }
.dash-head { display: flex; justify-content: space-between; gap: var(--space-xl); align-items: end; }
.dash-head h1 { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }
.balance-block { display: grid; text-align: end; }.balance-block small { color: var(--color-neutral); font-family: var(--font-mono); }.balance-block strong { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-4xl); line-height: 1; }.balance-block span { color: var(--color-muted); font-size: var(--text-sm); }
.demo-console { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-2xl); padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-md); }
.console-copy { display: grid; align-content: start; gap: var(--space-sm); }.console-copy p { color: var(--color-muted); }.demo-console form { display: grid; gap: var(--space-xs); }.console-actions { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; }.console-actions span { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.flow-monitor ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.flow-monitor li { min-width: 0; padding: var(--space-md); background: var(--color-paper-2); display: grid; gap: var(--space-2xs); border-radius: var(--radius-sm); opacity: .55; }
.flow-monitor li.is-active { opacity: 1; background: var(--color-paper-3); }.flow-monitor li span { font-family: var(--font-mono); color: var(--color-accent); }.flow-monitor li small { color: var(--color-neutral); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-xl); }.dash-grid article, .queue-section, .desk-preview { padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-md); }.dash-grid article { display: grid; align-content: start; gap: var(--space-md); }.dash-grid article > p { color: var(--color-muted); }
.desk-preview { display: grid; align-content: start; gap: var(--space-md); }
.desk-preview-stage { position: relative; }
.desk-preview video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: var(--color-paper); border-radius: var(--radius-sm); }
.desk-preview-donor { position: absolute; left: 4%; right: 4%; bottom: 8%; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 2.2rem); line-height: .95; letter-spacing: -.04em; text-shadow: 0 2px 14px rgb(0 0 0 / 80%); pointer-events: none; }
.desk-preview > p { color: var(--color-muted); font-size: var(--text-sm); }
.resource-links { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.article-head { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; }
button.text-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }.article-head span { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.integration-list { list-style: none; margin: 0; padding: 0; display: grid; }.integration-list li { display: grid; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }.integration-list span { color: var(--color-neutral); font-size: var(--text-sm); }
.queue-section { display: grid; gap: var(--space-md); }.queue-list { display: grid; }.queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }.queue-item > span { color: var(--color-accent); font-family: var(--font-mono); }.queue-item div { min-width: 0; }.queue-item p { overflow-wrap: anywhere; }.queue-item small, .empty { color: var(--color-neutral); }.queue-item b { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; }.empty { margin: var(--space-lg) 0; }

.library-section { display: grid; gap: var(--space-xl); padding: clamp(var(--space-lg), 3vw, var(--space-2xl)); background: linear-gradient(145deg, var(--color-paper-2), color-mix(in oklch, var(--color-accent) 8%, var(--color-paper-2))); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.library-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.library-head > div:first-child { display: grid; gap: var(--space-xs); }
.library-head p { color: var(--color-muted); max-width: 62ch; }
.library-stats { display: grid; justify-items: end; }
.library-stats span { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-2xl); }
.library-stats small { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); }
.generation-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-md); }
.library-card { min-width: 0; overflow: hidden; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); }
.library-card video, .library-placeholder { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; object-fit: cover; background: radial-gradient(circle at 72% 28%, color-mix(in oklch, var(--color-accent) 30%, transparent), transparent 38%), var(--color-paper-3); }
.library-placeholder { align-content: center; gap: var(--space-xs); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); }
.library-placeholder small { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); }
.library-card-body { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.library-card-body > p { min-height: 3lh; overflow-wrap: anywhere; }
.library-card-body > small { color: var(--color-neutral); }
.library-meta, .library-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.library-meta span { color: var(--color-accent); font-family: var(--font-mono); }
.library-meta b { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.archive-badge { padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.resource-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.gallery-page { background: var(--color-paper); }
.gallery-shell { max-width: 90rem; margin-inline: auto; padding: clamp(var(--space-2xl), 8vw, var(--space-4xl)) clamp(var(--space-md), 5vw, var(--space-2xl)); display: grid; gap: var(--space-3xl); }
.gallery-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: end; padding-bottom: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.gallery-hero > div { display: grid; gap: var(--space-md); }
.gallery-hero h1 { max-width: 13ch; font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl)); }
.gallery-hero p { max-width: 58ch; color: var(--color-muted); }
.public-library { margin-top: var(--space-xl); }
.viewer-tip-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-3xl); align-items:start; padding:clamp(var(--space-xl),5vw,var(--space-3xl)); border-radius:var(--radius-md); background:var(--color-paper-2); color:var(--color-ink); }
.viewer-tip-copy { display:grid; gap:var(--space-md); }
.viewer-tip-copy > p:not(.signal) { max-width:52ch; color:var(--color-muted); }
.viewer-tip-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); margin:var(--space-md) 0 0; }
.viewer-tip-facts div { padding:var(--space-md); background:var(--color-paper-3); border-radius:var(--radius-sm); }
.viewer-tip-facts dt { color:var(--color-muted); font-size:var(--text-sm); }
.viewer-tip-facts dd { margin:var(--space-xs) 0 0; font-family:var(--font-display); font-size:var(--text-lg); }
.viewer-tip-form { display:grid; gap:var(--space-xs); }
.viewer-tip-form input,.viewer-tip-form textarea { width:100%; min-height:44px; border:var(--rule-hair) solid var(--color-rule); outline:2px solid transparent; outline-offset:1px; border-radius:var(--radius-sm); padding:var(--space-sm) var(--space-md); background:var(--color-paper); color:var(--color-ink); }
.viewer-tip-form textarea { min-height:7rem; resize:vertical; }
.viewer-tip-form label { margin-top:var(--space-xs); font-size:var(--text-sm); color:var(--color-muted); }
.viewer-tip-form .button { margin-top:var(--space-sm); width:100%; }
.viewer-tip-form [aria-invalid="true"] { border-color:var(--color-error); }
.public-generation-card > img, .public-generation-card > video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: var(--color-paper-3); }
.public-generation-card:first-child { grid-column: span 2; }
.public-generation-card:first-child .library-card-body > p { font-size: var(--text-md); }
.gallery-footer { margin-top: 0; }

html.overlay-html, html.overlay-html body, .overlay-page { background: transparent !important; }
.overlay-page { color: var(--color-ink); margin: 0; width: 100%; height: 100%; overflow: hidden; }
.overlay-page::before { display: none; }
#overlay-root { position: fixed; inset: 0; margin: 0; padding: 0; background: transparent; }
.overlay-notice { display: none !important; }
.overlay-player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; }
.overlay-player.hidden { display: none; }
.overlay-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.overlay-player img.overlay-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.overlay-player img.overlay-image.hidden, .overlay-notice.hidden { display: none; }
.overlay-notice { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); margin: 0; padding: 0.85rem 1.4rem; max-width: min(90vw, 920px); text-align: center; font-family: Tomorrow, sans-serif; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: 0.04em; color: #fff; background: rgba(18, 8, 28, 0.72); border: 1px solid rgba(196, 160, 255, 0.45); border-radius: 1rem; }
.email-auth-fallback { margin-top: var(--space-lg); color: var(--color-muted); }
.email-auth-fallback summary { cursor: pointer; color: var(--color-ink); }
.desk-preview-stage img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
#twitch-connect.is-connected { background: transparent; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); box-shadow: none; }
.access-gate h2 { margin: 0; }
.access-gate p { color: var(--color-muted); max-width: 42rem; }
.usage-card { display:grid; gap:var(--space-md); padding:var(--space-xl); background:var(--color-paper-2); border-radius:var(--radius-md); }
.usage-rows { display:grid; gap:var(--space-md); }
.usage-rows progress { width:100%; accent-color:var(--color-accent); }
.hero-included { font-size: var(--text-lg); font-weight: 700; }
.marketing-opt { display:flex; gap:0.75rem; align-items:flex-start; color:var(--color-muted); font-size:var(--text-sm); cursor:pointer; }
.marketing-opt input { width:1.15rem; height:1.15rem; margin:0.15rem 0 0; flex:0 0 auto; accent-color:var(--color-accent); pointer-events:auto; }
.marketing-opt span { display:grid; gap:0.2rem; color:var(--color-ink); }
.marketing-opt small { color:var(--color-muted); font-weight:400; }
.dash-marketing { margin: var(--space-md) 0 var(--space-xl); }
.launch-status-list { list-style:none; margin:0; padding:0; display:grid; gap:0.45rem; font-family:Tomorrow,sans-serif; letter-spacing:0.04em; }
.video-modes { display:flex; flex-wrap:wrap; gap:var(--space-md); border:0; padding:0; margin:0 0 var(--space-md); }
.video-modes label { display:flex; gap:0.4rem; align-items:center; }
.mode-soon { opacity:0.55; }
.screenshot-preview { max-width:100%; max-height:12rem; border-radius:var(--radius-md); display:block; margin-top:0.75rem; }
.mode-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0.25rem; border:var(--rule-hair) solid var(--color-rule); padding:0.25rem; margin:0 0 1rem; background:var(--color-paper-2); border-radius:var(--radius-md); }
.mode-tabs label { position:relative; display:flex; align-items:center; justify-content:center; gap:0.4rem; min-height:44px; padding:0.5rem 0.75rem; font-weight:700; letter-spacing:0.04em; border-radius:calc(var(--radius-md) - 0.15rem); cursor:pointer; transition:background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.mode-tabs input { position:absolute; opacity:0; width:1px; height:1px; }
.mode-tabs label:has(input:checked) { background:var(--color-accent); color:var(--color-accent-ink); }
.dropzone { border:var(--rule-hair) dashed var(--color-rule); border-radius:var(--radius-md); padding:1.35rem 1.1rem; margin:0 0 1rem; text-align:center; background:var(--color-paper-2); min-height:7.5rem; display:grid; place-content:center; gap:0.4rem; }
.dropzone.is-over { background: var(--color-accent-wash); border-color: var(--color-accent); }
.tiny-note { font-size:0.85rem; opacity:0.8; margin-top:0.6rem; }
.paypal-inline { display:grid; gap:0.5rem; }
.test-cards { display:flex; flex-wrap:wrap; gap:0.75rem; }
.composer-sheet { max-width:36rem; gap:1.15rem; }
.composer-sheet h2 { letter-spacing:-0.04em; }
#setup-button.access-locked { opacity: 0.42; pointer-events: none; filter: grayscale(0.2); }
.setup-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.setup-checklist li { display: grid; gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid rgba(196, 160, 255, 0.16); }
.setup-checklist h2 { margin: 0; font-size: 1rem; }
.overlay-donor { position: absolute; left: 3vw; right: 3vw; bottom: 5vh; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6.2vw, 5.2rem); line-height: .95; letter-spacing: -.05em; text-shadow: 0 2px 18px rgb(0 0 0 / 80%); pointer-events: none; }
.demo-scene { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-3), var(--color-paper)); }
.demo-city { position: absolute; inset: auto 0 0; height: 42%; background: repeating-linear-gradient(90deg, var(--color-paper-2) 0 8%, var(--color-paper-3) 8% 13%); }
.demo-knight { position: absolute; inset: auto auto 18% 28%; width: 5%; height: 30%; border-radius: var(--radius-pill); background: var(--color-ink); transform: rotate(12deg); animation: chase var(--dur-long) var(--ease-in-out) infinite alternate; }
.demo-duck { position: absolute; inset: auto 14% 17% auto; width: 20%; height: 18%; border-radius: 60% 45% 45% 60%; background: var(--color-ink); }.demo-duck::after { content: ""; position: absolute; width: 38%; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--color-ink); inset: -45% -8% auto auto; }.demo-duck-b { right: 42%; bottom: 23%; transform: scale(.6); opacity: .65; }
@keyframes chase { to { transform: translateX(2rem) rotate(12deg); } }

@media (hover:hover) and (pointer:fine) { .button:hover { transform: translateY(-1px); background: var(--color-ink); color: var(--color-paper); }.button-primary:hover { background: var(--color-accent); color: var(--color-accent-ink); }.nav-links a:hover, .text-link:hover, .lang-toggle:hover, .password-toggle:hover, .auth-switch .text-link:hover { color: var(--color-accent); } input:hover, textarea:hover, select:hover { background: var(--color-paper-3); } }
@media (max-width:59.99rem) { .workflow, .price-workbench, .monetization-workbench, .waitlist, .demo-console, .dash-grid, .gallery-hero, .viewer-tip-panel,.collab-test-panel { grid-template-columns: minmax(0, 1fr); }.pipeline-demo { width: 100%; }.workflow { gap: var(--space-2xl); }.waitlist { gap: var(--space-xl); }.demo-console { gap: var(--space-lg); } }
@media (max-width:39.99rem) { .nav-links { display:none; }.nav-pill { inset: max(0.6rem, env(safe-area-inset-top)) 0.65rem auto; transform:none; width:auto; max-width:none; left:0.65rem; right:0.65rem; flex-wrap:wrap; justify-content:space-between; gap:0.35rem; border-radius: var(--radius-md); }.nav-pill .account-chip { display:none; }.hero { grid-template-columns: minmax(0, 1fr); padding-top: 6.75rem; padding-bottom: 4.5rem; min-height: auto; }.hero h1, html[lang="fr"] .hero h1 { font-size: clamp(2.65rem, 12vw, 3.55rem); line-height: 1.02; letter-spacing: -.055em; }.hero-actions { align-items: stretch; }.hero-actions .button, .hero-actions .text-link { width: 100%; text-align: center; }.hero-actions .button { font-size:var(--text-sm); padding-inline:var(--space-sm); }.pipeline-demo { padding: var(--space-sm); height: 32rem; max-height: 70dvh; }.live-stage-grid { grid-template-columns: minmax(0, 1fr); }.donation-who { flex-direction: column; gap:0; }.donation-who strong { font-size: var(--text-md); }.example-caption > div { align-items: flex-start; flex-direction: column; gap:0; }.example-caption strong { font-size:var(--text-sm); }.flow-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }.steps li { grid-template-columns: 3rem minmax(0,1fr); }.inline-form > div, .join-row, .copy-row { grid-template-columns: minmax(0,1fr); }.foot-stmt > div, .dash-head, .console-actions, .library-head { align-items: flex-start; flex-direction: column; }.library-stats { justify-items: start; }.library-actions { align-items: stretch; flex-direction: column; }.balance-block { text-align: start; }.flow-monitor ol { grid-template-columns: repeat(2,minmax(0,1fr)); }.queue-item { grid-template-columns: auto minmax(0,1fr); }.queue-item > b { grid-column:2; }.public-generation-card:first-child { grid-column:auto; }.gallery-hero .button { width:100%; }.revenue-equation,.viewer-tip-facts { grid-template-columns:minmax(0,1fr); }.revenue-equation .revenue-result { grid-column:auto; }.overlay-caption strong { font-size:var(--text-sm); }.app-nav { flex-wrap:wrap; gap: var(--space-sm); padding: max(0.65rem, env(safe-area-inset-top)) var(--space-md) var(--space-sm); }.app-nav-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }.app-nav .status-chip { display: none; }.account-chip { max-width: min(12rem, 48vw); }.dash-head h1 { font-size: clamp(1.55rem, 8vw, 2.15rem); }.foot-stmt { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }
.app-page .desk-home-link { display: none; }
body.checkout-open { overflow: hidden; }
.checkout-layer { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1.25rem; width: auto; max-width: none; color: #f6f3fb; background: rgb(4 2 10 / 78%); }
.checkout-sheet { width: min(32rem, 100%); max-height: min(94dvh, 58rem); overflow: auto; display: grid; gap: 1rem; padding: 1.5rem; background: #1a1424; color: #f6f3fb; color-scheme: dark; border: 1px solid #4a3d62; border-radius: var(--radius-md); }
.checkout-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.checkout-top .lang-toggle { color: #f6f3fb; border-color: #6b5a86; }
.checkout-kicker { margin: 0; color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; }
.checkout-sheet h2 { margin: .2rem 0 0; color: #f6f3fb; font-size: clamp(1.5rem, 4vw, 2rem); }
.checkout-price { margin: .35rem 0 0; color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-2xl); line-height: 1; }
.checkout-meta { margin: .35rem 0 0; color: #e8e0f4; font-size: var(--text-sm); }
.checkout-copy, .checkout-email { margin: 0; color: #f6f3fb; font-size: var(--text-sm); }
.checkout-email { color: var(--color-accent); font-family: var(--font-mono); }
.checkout-wallets-label, .checkout-or-card { margin: 0; color: #e8e0f4; font-size: var(--text-sm); }
.whop-wallet-row { display: grid; gap: var(--space-sm); min-height: 2.75rem; }
.whop-wallet-row whop-express-checkout-button { display: block; width: 100%; min-height: 44px; }
.checkout-or-card { text-align: center; color: var(--color-muted); }
#whop-checkout-host { display: block; width: 100%; min-height: 28rem; overflow: visible; background: var(--color-payment-canvas); color-scheme: light; border-radius: var(--radius-sm); }
#whop-checkout-host iframe { display: block; width: 100%; min-height: 28rem; height: 32rem; border: 0; background: var(--color-payment-canvas); }
#checkout-status { color: #f6f3fb; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:150ms !important; animation-iteration-count:1 !important; transition-duration:150ms !important; }.reveal { opacity:1; transform:none; }.demo-knight { animation:none; }.chat-line { animation:none; } .donation-prompt::after { content:none; } html { scroll-behavior:auto; } }

@media (max-width:39.99rem) { .hero { padding-top:5.5rem; padding-bottom:7.25rem; }.viewer-tip-panel { padding:var(--space-lg) var(--space-md); }.payout-setup { align-items:stretch; flex-direction:column; }.tip-page-panel,.collab-test-panel { grid-template-columns:1fr; padding:var(--space-lg); }.tip-page-panel .copy-row,.collab-test-panel .copy-row { grid-template-columns:1fr; } }

/* Hallmark · Split Studio conversion finish · atmospheric violet · N9 · Ft2 */
body::before {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in oklch, var(--color-accent-bright) 18%, transparent), transparent 28%),
    radial-gradient(circle at 8% 52%, color-mix(in oklch, var(--color-accent-deep) 9%, transparent), transparent 26%);
}
body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.08; background-image:linear-gradient(color-mix(in oklch,var(--color-rule) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--color-rule) 16%,transparent) 1px,transparent 1px); background-size:5rem 5rem; mask-image:linear-gradient(to bottom,var(--color-mask),transparent 28%); }
.nav-edge { inset:0 0 auto; transform:none; width:100%; max-width:none; min-height:4.75rem; justify-content:space-between; padding:var(--space-sm) clamp(var(--space-md),4vw,var(--space-2xl)); border:0; border-bottom:var(--rule-hair) solid color-mix(in oklch,var(--color-rule) 72%,transparent); border-radius:0; background:color-mix(in oklch,var(--color-paper) 84%,transparent); }
.nav-edge .wordmark { font-size:var(--text-md); }
.nav-edge .nav-links { margin-inline:auto; }
.nav-links a,.text-link { transition:color var(--dur-short) var(--ease-out),text-decoration-color var(--dur-short) var(--ease-out); }
.button { position:relative; isolation:isolate; font-weight:700; letter-spacing:-.01em; box-shadow:inset 0 1px 0 color-mix(in oklch,var(--color-ink) 10%,transparent); transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out); }
.button-primary { background:var(--color-accent); border-color:var(--color-accent-bright); box-shadow:inset 0 1px 0 color-mix(in oklch,var(--color-ink) 30%,transparent),0 .8rem 2.4rem color-mix(in oklch,var(--color-accent) 24%,transparent); }
.button-hero { min-height:3.25rem; padding-inline:clamp(var(--space-lg),3vw,var(--space-xl)); }
.hero { min-height:50rem; padding-top:8rem; grid-template-columns:minmax(18rem,.82fr) minmax(28rem,1.18fr); }
.hero-copy { max-width:42rem; }
.hero h1 { max-width:9.5ch; text-wrap:balance; }
.hero .signal { color:var(--color-accent-bright); }
.hero-assurances { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); margin:0; padding:0; color:var(--color-muted); font-family:var(--font-mono); font-size:var(--text-xs); }
.hero-assurances li { display:flex; align-items:center; gap:var(--space-xs); }
.hero-assurances li::before { content:""; width:.35rem; height:.35rem; border-radius:50%; background:var(--color-accent-bright); }
.pipeline-demo { height:min(42rem,72dvh); max-height:42rem; border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 38%,var(--color-rule)); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 88%,var(--color-accent-wash)); box-shadow:0 2rem 7rem color-mix(in oklch,var(--color-accent-deep) 20%,transparent); }
.frame,.chat-rail { border-radius:calc(var(--radius-lg) - var(--space-md)); }
.example-generation { border:var(--rule-hair) solid color-mix(in oklch,var(--color-rule) 70%,transparent); }
.flow-stages li { padding:.55rem .65rem; border-radius:var(--radius-sm); background:color-mix(in oklch,var(--color-paper) 74%,transparent); }
.flow-stages .is-on { background:color-mix(in oklch,var(--color-accent) 15%,var(--color-paper)); }
.value-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:0 var(--space-3xl); }
.value-rail article { min-height:9.5rem; display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-lg); border-block:var(--rule-hair) solid var(--color-rule); border-inline-start:var(--rule-hair) solid var(--color-rule); background:color-mix(in oklch,var(--color-paper-2) 76%,transparent); }
.value-rail article:first-child { border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.value-rail article:last-child { border-inline-end:var(--rule-hair) solid var(--color-rule); border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
.value-rail span,.value-rail small { color:var(--color-muted); font-family:var(--font-mono); font-size:var(--text-xs); }
.value-rail strong { font-family:var(--font-display); font-size:clamp(var(--text-xl),3vw,var(--text-2xl)); letter-spacing:-.045em; }
.value-rail .value-rail-accent { color:var(--color-accent-ink); background:var(--color-accent-bright); border-color:var(--color-accent-bright); }
.value-rail .value-rail-accent span,.value-rail .value-rail-accent small { color:var(--color-accent-ink); }
.workflow { position:relative; }
.steps li { padding:var(--space-lg); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 76%,transparent); }
.steps li:nth-child(2) { transform:translateX(clamp(0rem,3vw,3rem)); border-color:color-mix(in oklch,var(--color-accent) 44%,var(--color-rule)); }
.monetization-workbench { padding-block:var(--space-4xl); }
.revenue-equation article { border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); }
.revenue-equation .revenue-result { background:var(--color-accent-bright); border-color:var(--color-accent-bright); }
.price-workbench { margin-bottom:var(--space-2xl); border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 40%,var(--color-rule)); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 90%,var(--color-accent-wash)); }
.waitlist { margin-bottom:var(--space-3xl); padding:clamp(var(--space-xl),5vw,var(--space-3xl)); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:var(--color-paper-2); }
.join-form { padding:var(--space-lg); border-radius:var(--radius-lg); background:var(--color-paper); }
.foot-inline { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-xl); padding-block:var(--space-2xl); border-top:var(--rule-hair) solid var(--color-rule); }
.foot-inline > p { max-width:18ch; font-size:clamp(var(--text-lg),3vw,var(--text-2xl)); }
.foot-inline > div { flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.foot-inline a { color:var(--color-muted); }
.app-nav { position:sticky; top:0; z-index:200; background:color-mix(in oklch,var(--color-paper) 88%,transparent); backdrop-filter:blur(18px); }
.dashboard-shell { padding-top:var(--space-2xl); }
.dash-head { padding:var(--space-xl); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 82%,transparent); }
.balance-block { min-width:12rem; padding:var(--space-lg); border-radius:var(--radius-lg); background:var(--color-accent-bright); color:var(--color-accent-ink); }
.balance-block small,.balance-block span { color:var(--color-accent-ink); }
.tip-page-panel { border-radius:var(--radius-lg); background:linear-gradient(115deg,color-mix(in oklch,var(--color-accent-deep) 45%,var(--color-paper-2)),var(--color-paper-2) 62%); border-color:color-mix(in oklch,var(--color-accent-bright) 52%,var(--color-rule)); }
.account-panel,.demo-console,.dash-grid>*,.queue-section,.library-section { border-radius:var(--radius-lg); }
.gallery-shell { padding-top:clamp(var(--space-2xl),8vw,var(--space-4xl)); }
.gallery-hero { min-height:25rem; align-items:center; border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 42%,var(--color-rule)); border-radius:var(--radius-lg); padding:clamp(var(--space-xl),5vw,var(--space-3xl)); background:radial-gradient(circle at 82% 22%,color-mix(in oklch,var(--color-accent) 25%,transparent),transparent 36%),var(--color-paper-2); }
.gallery-hero h1 { max-width:11ch; }
.gallery-badges { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-sm); }
.gallery-badges span { padding:.4rem .65rem; border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-pill); color:var(--color-muted); font-family:var(--font-mono); font-size:var(--text-xs); }
.viewer-tip-panel { border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 90%,var(--color-accent-wash)); }
.viewer-tip-card { padding:var(--space-lg); border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 38%,var(--color-rule)); border-radius:var(--radius-lg); background:var(--color-paper); }
.public-generation-card { overflow:hidden; border-radius:var(--radius-lg); }
input,textarea,select { transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out); }
input:focus-visible,textarea:focus-visible,select:focus-visible { border-color:var(--color-focus); box-shadow:0 0 0 4px color-mix(in oklch,var(--color-focus) 14%,transparent); }
@media (min-width:60rem) { .hero { grid-template-columns:minmax(24rem,.92fr) minmax(28rem,1.08fr); padding-top:6.5rem; padding-bottom:8.5rem; }.hero h1,html[lang="fr"] .hero h1 { max-width:11ch; font-size:clamp(3.5rem,5.35vw,4.75rem); }.pipeline-demo { height:min(38rem,72dvh); } }
@media (hover:hover) and (pointer:fine) { .button:hover { transform:translateY(-2px); border-color:var(--color-accent-bright); box-shadow:0 .9rem 2.4rem color-mix(in oklch,var(--color-accent) 18%,transparent); }.button-primary:hover { background:var(--color-accent-bright); color:var(--color-accent-ink); box-shadow:0 1rem 3rem color-mix(in oklch,var(--color-accent) 32%,transparent); }.steps li:hover { border-color:color-mix(in oklch,var(--color-accent) 55%,var(--color-rule)); } }
@media (max-width:59.99rem) { .hero { grid-template-columns:minmax(0,1fr); min-height:auto; }.hero-copy { max-width:48rem; }.pipeline-demo { height:38rem; }.value-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }.value-rail article:first-child { border-radius:var(--radius-lg) 0 0 0; }.value-rail article:nth-child(2) { border-inline-end:var(--rule-hair) solid var(--color-rule); border-radius:0 var(--radius-lg) 0 0; }.value-rail article:nth-child(3) { border-radius:0 0 0 var(--radius-lg); }.value-rail article:last-child { border-radius:0 0 var(--radius-lg) 0; }.steps li:nth-child(2) { transform:none; } }
@media (max-width:39.99rem) { .nav-edge { inset:0 0 auto; height:auto; min-height:4.25rem; border-radius:0; padding:max(.65rem,env(safe-area-inset-top)) var(--space-md) var(--space-sm); }.nav-edge .nav-actions .button-small { display:none; }.hero { padding-top:7.5rem; }.hero-assurances { display:grid; gap:var(--space-xs); }.value-rail { grid-template-columns:minmax(0,1fr); padding-inline:var(--space-md); }.value-rail article,.value-rail article:first-child,.value-rail article:nth-child(2),.value-rail article:nth-child(3),.value-rail article:last-child { min-height:7.5rem; border:var(--rule-hair) solid var(--color-rule); border-bottom:0; border-radius:0; }.value-rail article:first-child { border-radius:var(--radius-lg) var(--radius-lg) 0 0; }.value-rail article:last-child { border-bottom:var(--rule-hair) solid var(--color-accent-bright); border-radius:0 0 var(--radius-lg) var(--radius-lg); }.foot-inline { align-items:flex-start; flex-direction:column; }.foot-inline > div { justify-content:flex-start; }.gallery-hero { min-height:0; }.viewer-tip-card { padding:var(--space-md); }.balance-block { width:100%; }.dash-head { padding:var(--space-lg); } }

/* Landing refresh — Early Access positioning */
.landing-hero { grid-template-columns:minmax(0,1fr); max-width:52rem; min-height:auto; padding-top:7rem; padding-bottom:var(--space-3xl); }
.landing-hero h1 { max-width:14ch; font-size:clamp(2.5rem,6.5vw,4.25rem); line-height:1.02; }
.landing-hero .lede { color:var(--color-muted); max-width:52ch; }
.landing-hero .lede-benefit { color:var(--color-ink); font-weight:700; }
.hero-note,.hero-launch { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-muted); letter-spacing:.04em; }
.hero-launch { margin-top:var(--space-xs); }
.landing-demo { display:grid; gap:var(--space-2xl); padding-block:var(--space-3xl); }
.demo-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:var(--space-sm); align-items:center; }
.demo-flow-step { padding:var(--space-md); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 82%,transparent); min-height:6.5rem; display:grid; align-content:center; gap:var(--space-xs); }
.demo-flow-step p { color:var(--color-muted); font-size:var(--text-sm); font-style:italic; }
.demo-flow-label { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-bright); letter-spacing:.08em; }
.demo-flow-brand { place-items:center; font-family:var(--font-display); font-weight:700; letter-spacing:.08em; }
.demo-flow-result { border-color:color-mix(in oklch,var(--color-accent) 45%,var(--color-rule)); }
.demo-flow-arrow { color:var(--color-accent-bright); font-family:var(--font-mono); font-size:var(--text-xl); font-weight:700; text-align:center; line-height:1; }
.landing-video-stage { margin:0; padding:var(--space-md); overflow:hidden; grid-template-rows:minmax(0,1fr) auto; }
.landing-video-stage.live-stage .live-stage-grid { min-height:0; height:100%; }
.landing-video-stage .example-generation > video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.landing-video-caption { margin-top:var(--space-md); text-align:center; color:var(--color-muted); font-size:var(--text-sm); }
.landing-section { padding-block:var(--space-3xl); display:grid; gap:var(--space-2xl); }
.landing-section .section-copy { display:grid; gap:var(--space-md); }
.landing-section .section-copy p { color:var(--color-muted); max-width:60ch; }
.feature-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
.feature-cards article { position:relative; padding:var(--space-lg); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 78%,transparent); display:grid; gap:var(--space-sm); align-content:start; }
.feature-cards h3 { font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.06em; }
.beta-badge { position:absolute; top:var(--space-md); right:var(--space-md); padding:.25rem .55rem; border-radius:var(--radius-pill); background:color-mix(in oklch,var(--color-accent) 18%,var(--color-paper)); border:var(--rule-hair) solid var(--color-rule); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-bright); }
.landing-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
.landing-steps li span { font-family:var(--font-mono); color:var(--color-accent-bright); }
.landing-highlight { border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 35%,var(--color-rule)); border-radius:var(--radius-lg); padding:clamp(var(--space-xl),5vw,var(--space-3xl)); background:color-mix(in oklch,var(--color-paper-2) 88%,var(--color-accent-wash)); }
.setup-badge { display:inline-block; margin-top:var(--space-sm); padding:.55rem .9rem; border-radius:var(--radius-pill); background:var(--color-accent-bright); color:var(--color-accent-ink); border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent-ink) 22%,var(--color-accent-bright)); font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; }
.landing-section .section-copy p.setup-badge { color:var(--color-accent-ink); }
.landing-pricing .button-primary,.landing-final-cta .button-primary,.landing-hero .button-primary { background:var(--color-accent-bright); color:var(--color-accent-ink); border-color:color-mix(in oklch,var(--color-accent-ink) 18%,var(--color-accent-bright)); }
.mini-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
.mini-benefits article { padding:var(--space-lg); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 76%,transparent); display:grid; gap:var(--space-xs); }
.mini-benefits strong { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.05em; }
.mini-benefits p { color:var(--color-muted); font-size:var(--text-sm); }
.disclaimer { font-size:var(--text-sm); opacity:.85; }
.landing-pricing { display:block; }
.pricing-card { max-width:28rem; margin-inline:auto; padding:clamp(var(--space-xl),5vw,var(--space-3xl)); border:var(--rule-hair) solid color-mix(in oklch,var(--color-accent) 42%,var(--color-rule)); border-radius:var(--radius-lg); background:color-mix(in oklch,var(--color-paper-2) 90%,var(--color-accent-wash)); display:grid; gap:var(--space-md); }
.pricing-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-xs); color:var(--color-muted); }
.price-sub { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-muted); letter-spacing:.08em; }
.landing-final-cta { text-align:center; display:grid; gap:var(--space-lg); justify-items:center; padding-block:var(--space-4xl); }
.landing-final-cta p { color:var(--color-muted); max-width:42ch; }
.landing-footer { padding-inline:clamp(var(--space-md),5vw,var(--space-3xl)); }
.landing-footer > div:first-child { display:grid; gap:var(--space-xs); }
.landing-footer > div:first-child p { color:var(--color-muted); max-width:28ch; }
.footer-links { display:flex; flex-wrap:wrap; gap:var(--space-lg); }
@media (max-width:59.99rem) { .demo-flow { grid-template-columns:minmax(0,1fr); }.demo-flow-arrow { transform:rotate(90deg); }.feature-cards,.mini-benefits,.landing-steps { grid-template-columns:minmax(0,1fr); } }
@media (max-width:39.99rem) { .nav-edge .nav-links { display:none; }.landing-hero { padding-top:6.5rem; } }