@import url("/assets/base.css");

/* Hallmark · macrostructure: yellow marquee into operational narrative · theme: studied-DNA (source: website.html) · tone: editorial gaming utility
 * paper: oklch(14.5% 0.006 100) · accent: oklch(90.5% 0.182 98.111) · display: General Sans · body: IBM Plex Sans
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · nav: N2 · footer: Ft1 · slop: pass (42–49) · mobile: pass (34, 49–57)
 */
body.streamer-public-body, body.viewer-public-body { background: var(--color-paper); }
.brand-stage { color: var(--color-accent-ink); border-end-start-radius: var(--radius-hero); border-end-end-radius: calc(var(--radius-hero) * 1.65); background: var(--color-accent); }
.marketing-header, .viewer-header { display: grid; width: min(100% - 2rem, 82.5rem); min-height: 5rem; margin-inline: auto; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; }
.marketing-brand { display: flex; min-width: 0; gap: var(--space-sm); align-items: center; }
.marketing-wordmark { color: inherit; font-size: var(--text-md); }
.marketing-wordmark::before { display: inline-grid; width: 2rem; height: 2rem; margin-inline-end: var(--space-xs); place-items: center; color: var(--color-accent); border-radius: 50%; background: var(--color-accent-ink); content: "H"; font-size: var(--text-xs); vertical-align: 0.15rem; }
.site-role { padding-inline-start: var(--space-sm); color: color-mix(in oklch, currentColor 70%, transparent); border-inline-start: var(--rule-thin) solid currentColor; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.marketing-nav { display: flex; gap: var(--space-lg); align-items: center; justify-content: center; }
.marketing-nav a, .marketing-console, .marketing-account-link { min-height: 44px; display: inline-flex; align-items: center; color: inherit; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.marketing-nav a { opacity: 0.68; }
.marketing-nav a.is-active { opacity: 1; text-decoration: underline; text-decoration-thickness: 0.125rem; text-underline-offset: var(--space-3xs); }
.marketing-header-actions { display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end; }
.brand-stage .marketing-join { color: var(--color-ink); border-color: var(--color-accent-ink); background: var(--color-accent-ink); }
.brand-stage .marketing-console { opacity: 0.7; }

.streamer-hero { display: grid; width: min(100% - 2rem, 82.5rem); min-height: min(49rem, calc(100dvh - 5rem)); margin-inline: auto; padding-block: clamp(var(--space-xl), 8vw, var(--space-3xl)) var(--space-4xl); grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr); gap: clamp(var(--space-xl), 7vw, var(--space-3xl)); align-items: center; }
.streamer-hero-copy { min-width: 0; }
.streamer-hero h1 { display: grid; max-width: 8ch; color: var(--color-accent-ink); font-size: var(--text-display); letter-spacing: -0.075em; line-height: 0.86; }
.streamer-hero-lede { max-width: 58ch; margin-top: var(--space-xl); color: color-mix(in oklch, var(--color-accent-ink) 78%, transparent); font-size: var(--text-md); line-height: 1.5; }
.marketing-actions { display: flex; margin-top: var(--space-xl); gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.brand-stage .marketing-button { color: var(--color-ink); border-color: var(--color-accent-ink); background: var(--color-accent-ink); }
.brand-stage .marketing-text-link { color: var(--color-accent-ink); font-weight: 600; text-underline-offset: var(--space-3xs); }
.streamer-hero-note { max-width: 64ch; margin-top: var(--space-lg); color: color-mix(in oklch, var(--color-accent-ink) 65%, transparent); font-size: var(--text-sm); }
.streamer-hero-note a { text-underline-offset: var(--space-3xs); }
.product-proof { position: relative; min-width: 0; margin: 0; }
.product-proof figcaption { display: flex; margin-bottom: var(--space-sm); align-items: center; justify-content: space-between; color: var(--color-accent-ink); font-size: var(--text-xs); }
.product-proof figcaption span { opacity: 0.66; }
.public-reveal-stage { display: grid; min-width: 0; min-height: 25rem; padding: var(--space-lg); place-items: center; border: var(--rule-thin) solid color-mix(in oklch, var(--color-ink) 18%, transparent); border-radius: calc(var(--radius-card) * 1.35); background: color-mix(in oklch, var(--color-paper-2) 93%, transparent); box-shadow: var(--shadow-panel); }

.streamer-landing { width: min(100% - 2rem, 82.5rem); margin-inline: auto; }
.streamer-outcomes, .streamer-loop, .streamer-how, .viewer-share-note, .streamer-contact, .streamer-callout, .marketing-section { padding-block: clamp(var(--space-3xl), 9vw, var(--space-4xl)); }
.streamer-section-intro, .marketing-section-heading, .loop-heading { max-width: 48rem; }
.streamer-section-intro h2, .marketing-section-heading h2, .loop-heading h2, .viewer-share-note h2, .streamer-callout h2 { color: var(--color-ink); font-size: var(--text-display-s); letter-spacing: -0.055em; }
.streamer-section-intro > p, .marketing-section-heading > p, .viewer-share-note p, .streamer-callout p { max-width: 68ch; margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-base); }
.outcome-list { display: grid; margin: var(--space-2xl) 0 0; padding: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); list-style: none; border-top: var(--rule-thin) solid var(--color-rule); }
.outcome-list li { display: grid; min-height: 9rem; padding-block: var(--space-lg); grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); border-bottom: var(--rule-thin) solid var(--color-rule); }
.outcome-list li:nth-child(even) { padding-inline-start: var(--space-xl); }
.outcome-list li:last-child { grid-column: 1 / -1; width: 58%; }
.outcome-list span, .streamer-steps span { color: var(--color-accent); font-weight: 600; }
.outcome-list strong { font-family: var(--font-display); font-size: var(--text-lg); }
.outcome-list p { grid-column: 2; max-width: 60ch; margin-top: var(--space-xs); color: var(--color-ink-2); }

.streamer-loop { display: grid; margin-inline: calc(50% - 50vw); padding-inline: max(var(--space-md), calc((100vw - 82.5rem) / 2)); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: end; color: var(--color-accent-ink); background: var(--color-accent); }
.streamer-loop .loop-heading h2 { color: var(--color-accent-ink); }
.loop-steps { display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; }
.loop-steps span { padding: var(--space-sm) var(--space-md); color: var(--color-accent-ink); border: var(--rule-thin) solid color-mix(in oklch, var(--color-accent-ink) 25%, transparent); border-radius: var(--radius-pill); }
.loop-steps i { font-style: normal; }

.streamer-steps { display: grid; margin: var(--space-2xl) 0 0; padding: 0; grid-template-columns: 0.9fr 1.15fr 0.95fr; list-style: none; }
.streamer-steps li { min-height: 16rem; padding: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); border-inline-end: var(--rule-thin) solid var(--color-rule); }
.streamer-steps li:last-child { border-inline-end: 0; }
.streamer-steps strong { display: block; margin-top: var(--space-2xl); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; }
.streamer-steps p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.viewer-share-note, .streamer-callout { display: flex; gap: var(--space-xl); align-items: flex-end; justify-content: space-between; border-top: var(--rule-thin) solid var(--color-rule); }
.viewer-share-note > div, .streamer-callout > div { max-width: 52rem; }
.viewer-share-note code { padding: var(--space-2xs) var(--space-xs); color: var(--color-accent); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); font-family: var(--font-mono); }
.marketing-button-secondary { color: var(--color-ink); border-color: var(--color-rule-strong); background: transparent; }

.streamer-contact { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 1.18fr); gap: clamp(var(--space-xl), 8vw, var(--space-4xl)); align-items: start; border-top: var(--rule-thin) solid var(--color-rule); }
.contact-form { display: grid; padding: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.contact-form label:nth-of-type(3), .contact-form textarea, .contact-form .contact-status, .contact-submit { grid-column: 1 / -1; }
.contact-status { min-height: 1lh; margin-top: var(--space-sm); color: var(--color-muted); }
.contact-status[data-state="success"] { color: var(--color-success); }
.contact-status[data-state="error"] { color: var(--color-danger); }
.contact-submit { width: fit-content; margin-top: var(--space-md); }

.marketing-footer { display: flex; width: min(100% - 2rem, 82.5rem); min-height: 7rem; margin-inline: auto; gap: var(--space-lg); align-items: center; border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.marketing-footer .marketing-wordmark { margin-inline-end: auto; color: var(--color-ink); }
.marketing-footer a { white-space: nowrap; }

/* Viewer marketing and live/account pages */
.viewer-header { color: var(--color-ink); }
.viewer-header .marketing-wordmark::before { color: var(--color-accent-ink); background: var(--color-accent); }
.viewer-header .site-role { color: var(--color-accent); border-color: var(--color-rule-strong); }
.viewer-public-body .marketing-landing { width: min(100% - 2rem, 74rem); margin-inline: auto; }
.viewer-public-body .marketing-hero { display: grid; margin-top: var(--space-xl); padding: clamp(var(--space-xl), 7vw, var(--space-3xl)); padding-block-end: clamp(var(--space-2xl), 10vw, var(--space-4xl)); grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 1.18fr); gap: var(--space-2xl); align-items: center; color: var(--color-accent-ink); border-end-start-radius: var(--radius-hero); border-end-end-radius: calc(var(--radius-hero) * 1.4); background: var(--color-accent); }
.viewer-public-body .marketing-hero h1 { max-width: 9ch; color: var(--color-accent-ink); font-size: var(--text-display-s); }
.viewer-public-body .marketing-hero-copy > p { max-width: 56ch; margin-top: var(--space-lg); color: color-mix(in oklch, var(--color-accent-ink) 76%, transparent); }
.viewer-public-body .marketing-hero-copy > small { display: block; margin-top: var(--space-lg); color: color-mix(in oklch, var(--color-accent-ink) 64%, transparent); }
.viewer-public-body .marketing-hero .marketing-button { color: var(--color-ink); border-color: var(--color-accent-ink); background: var(--color-accent-ink); }
.viewer-public-body .marketing-hero .marketing-text-link { color: var(--color-accent-ink); }
.marketing-feature-grid { display: grid; margin-top: var(--space-2xl); grid-template-columns: 1.25fr 0.85fr 0.9fr; border-top: var(--rule-thin) solid var(--color-rule); }
.marketing-feature-grid article { min-height: 14rem; padding: var(--space-lg); border-inline-end: var(--rule-thin) solid var(--color-rule); }
.marketing-feature-grid article:last-child { border-inline-end: 0; }
.marketing-feature-grid article > span, .landing-steps span { color: var(--color-accent); font-weight: 600; }
.marketing-feature-grid h3 { margin-top: var(--space-2xl); font-size: var(--text-lg); }
.marketing-feature-grid p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.landing-steps { display: grid; margin: var(--space-2xl) 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: var(--rule-thin) solid var(--color-rule); }
.landing-steps li { padding: var(--space-lg); border-inline-end: var(--rule-thin) solid var(--color-rule); }
.landing-steps li:last-child { border-inline-end: 0; }
.landing-steps strong { display: block; margin-top: var(--space-xl); font-family: var(--font-display); }
.landing-steps p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.landing-steps.panel, .trust-copy { display: none; }
.marketing-faq { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: var(--space-3xl); }
.faq-list { border-top: var(--rule-thin) solid var(--color-rule); }
.faq-list details { padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq-list summary { cursor: pointer; font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; list-style: none; }
.faq-list summary::after { float: right; color: var(--color-accent); content: "+"; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 64ch; margin-top: var(--space-sm); color: var(--color-ink-2); }
.connect-error { width: min(100% - 2rem, 55rem); margin: var(--space-md) auto 0; padding: var(--space-sm); color: var(--color-warning); border: var(--rule-thin) solid var(--color-warning); border-radius: var(--radius-control); text-align: center; }

.stream-page, .account-page { width: min(100% - 2rem, 58rem); margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); }
.stream-identity { display: flex; margin-bottom: var(--space-lg); gap: var(--space-lg); align-items: flex-end; justify-content: space-between; }
.stream-identity h1, .viewer-account-hero h1 { margin-top: var(--space-xs); font-size: var(--text-2xl); }
.eligibility-card, .drop-waiting, .you-won-card, .viewer-account-hero, .viewer-account-settings { padding: var(--space-lg); }
.eligibility-card[data-status="eligible"], .you-won-card { border-color: var(--color-success); }
.eligibility-card[data-status="unavailable"] { border-color: var(--color-warning); }
.eligibility-card h2, .drop-waiting h2, .you-won-card h2 { margin-top: var(--space-sm); }
.eligibility-card .twitch-cta, .you-won-card button { margin-top: var(--space-lg); }
.activity-window { margin-top: var(--space-lg); padding-top: var(--space-md); color: var(--color-muted); border-top: var(--rule-thin) solid var(--color-rule); font-size: var(--text-sm); }
.drop-waiting, .you-won-card { margin-top: var(--space-md); }
.viewer-section { margin-top: var(--space-xl); }
.section-heading { display: flex; margin-bottom: var(--space-md); align-items: flex-end; justify-content: space-between; }
.viewer-drop-list { overflow: clip; }
.viewer-drop { display: grid; min-height: 6rem; padding: var(--space-md) var(--space-lg); grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); align-items: center; border-bottom: var(--rule-thin) solid var(--color-rule); }
.viewer-drop:last-child { border-bottom: 0; }
.viewer-drop.is-winner { background: var(--color-accent-soft); }
.viewer-drop-title { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.viewer-drop span, .viewer-drop small { display: block; margin-top: var(--space-2xs); color: var(--color-ink-2); }
.you-won { padding: var(--space-2xs) var(--space-xs); color: var(--color-success); border: var(--rule-thin) solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.new-reward { color: var(--color-accent); }
.claim-button { min-height: 36px; margin-top: var(--space-sm); padding-inline: var(--space-sm); color: var(--color-accent-ink); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); white-space: nowrap; }
.viewer-account-hero, .viewer-account-settings { display: flex; gap: var(--space-lg); align-items: flex-end; justify-content: space-between; }
.viewer-account-hero > div { display: flex; gap: var(--space-md); color: var(--color-ink-2); }
.viewer-account-hero strong { color: var(--color-accent); }
.viewer-stream-row { display: flex; min-height: 4rem; padding-inline: var(--space-lg); gap: var(--space-md); align-items: center; justify-content: space-between; border-bottom: var(--rule-thin) solid var(--color-rule); text-decoration: none; }
.viewer-stream-row:last-child { border-bottom: 0; }
.viewer-stream-row span { color: var(--color-ink-2); }
.claim-code { display: grid; margin-block: var(--space-md); grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.claim-code strong { display: flex; min-height: 44px; padding: var(--space-sm); align-items: center; overflow-wrap: anywhere; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); font-family: var(--font-mono); }

@media (hover: hover) and (pointer: fine) {
  .brand-stage .marketing-button:hover, .brand-stage .marketing-join:hover, .viewer-public-body .marketing-hero .marketing-button:hover { color: var(--color-accent); background: var(--color-paper-2); }
  .marketing-nav a:hover { opacity: 1; }
  .viewer-stream-row:hover { background: var(--color-paper-3); }
}

@media (max-width: 59.99rem) {
  .marketing-header, .viewer-header { grid-template-columns: minmax(0, 1fr) auto; }
  .marketing-nav { display: none; }
  .streamer-hero, .viewer-public-body .marketing-hero { grid-template-columns: minmax(0, 1fr); }
  .streamer-hero { min-height: auto; }
  .product-proof { max-width: 40rem; }
  .outcome-list, .streamer-loop, .streamer-contact, .marketing-faq { grid-template-columns: minmax(0, 1fr); }
  .loop-steps { justify-content: flex-start; }
}

@media (max-width: 39.99rem) {
  .brand-stage { border-end-start-radius: var(--radius-card); border-end-end-radius: calc(var(--radius-card) * 1.6); }
  .marketing-header, .viewer-header, .streamer-hero, .streamer-landing, .marketing-footer { width: min(100% - 1.5rem, 82.5rem); }
  .site-role, .marketing-console { display: none; }
  .marketing-header-actions { gap: var(--space-xs); }
  .streamer-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .streamer-hero h1 { font-size: clamp(3.3rem, 17vw, 5rem); }
  .streamer-hero-lede { font-size: var(--text-base); }
  .public-reveal-stage { min-height: 19rem; padding: var(--space-sm); }
  .product-proof figcaption span { display: none; }
  .outcome-list, .streamer-steps, .marketing-feature-grid, .landing-steps { display: block; }
  .outcome-list li:nth-child(even) { padding-inline-start: 0; }
  .outcome-list li:last-child { width: 100%; }
  .streamer-steps li, .marketing-feature-grid article, .landing-steps li { min-height: auto; border-inline-end: 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
  .streamer-steps strong, .marketing-feature-grid h3, .landing-steps strong { margin-top: var(--space-lg); }
  .viewer-share-note, .streamer-callout, .viewer-account-hero, .viewer-account-settings, .stream-identity { align-items: flex-start; flex-direction: column; }
  .contact-form { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .contact-form label:nth-of-type(3), .contact-form textarea, .contact-form .contact-status, .contact-submit { grid-column: auto; }
  .marketing-footer { min-height: 9rem; align-items: flex-start; flex-direction: column; justify-content: center; }
  .viewer-public-body .marketing-hero { padding: var(--space-lg); border-end-start-radius: var(--radius-card); border-end-end-radius: calc(var(--radius-card) * 1.5); }
  .viewer-account-hero > div { flex-direction: column; }
  .viewer-drop { padding-inline: var(--space-md); grid-template-columns: 3.25rem minmax(0, 1fr); }
  .viewer-drop .reward-thumb { width: 3.25rem; height: 3.25rem; }
}