/* ============================================================================
   PromptInjects — Homepage styles (Stream 7)
   Layered on top of design-system tokens (assets/tokens.css). Page-specific
   layout + components only; all colors/spacing/shadows come from tokens.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--bg-sunken) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bg-sunken) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px;
  transition:background-color var(--dur-base);
}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-5)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ----- shared atoms ----- */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);padding:4px 10px;border:var(--border);border-radius:var(--radius-pill);background:var(--bg-surface);color:var(--text-primary)}
.tag--spark{background:var(--spark);color:var(--text-on-acid);border-color:var(--ink-950)}
.tag--accent{background:var(--accent);color:#fff}
.tag--grape{background:var(--secondary);color:#fff}

.btn{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);cursor:pointer;border:var(--border);border-radius:var(--radius-md);padding:12px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-md);transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn--primary{background:var(--brand);color:var(--text-on-brand)}
.btn--accent{background:var(--accent);color:#fff}
.btn--spark{background:var(--spark);color:var(--text-on-acid)}
.btn--ghost{box-shadow:var(--shadow-sm)}
.btn--lg{font-size:var(--fs-body-lg);padding:16px 28px}

.card{background:var(--bg-surface);border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.ico{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;width:24px;height:24px}
.btn .ico{width:20px;height:20px}

/* ----- skip link ----- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--radius-md)}
.skip:focus{left:8px;top:8px}

/* ----- nav ----- */
header.nav{position:sticky;top:0;z-index:50;background:var(--bg-page);border-bottom:var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:var(--tracking-tight);color:var(--text-primary);text-decoration:none}
.logo .mark{width:30px;height:30px;display:grid;place-items:center;background:var(--brand);color:#fff;border:var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:700;box-shadow:var(--shadow-sm)}
.nav-links{display:flex;align-items:center;gap:var(--space-5)}
.nav-links a{font-family:var(--font-mono);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);text-decoration:none}
.nav-links a:hover{color:var(--brand)}
.nav-right{display:flex;align-items:center;gap:var(--space-3)}
.toggle{width:46px;height:30px;border:var(--border);border-radius:var(--radius-pill);background:var(--bg-surface-alt);cursor:pointer;position:relative;box-shadow:var(--shadow-sm)}
.toggle::after{content:"\2600";position:absolute;top:1px;left:1px;width:24px;height:24px;border:2px solid var(--ink-950);border-radius:50%;background:var(--spark);display:grid;place-items:center;font-size:12px;transition:transform var(--dur-base) var(--ease-snap)}
[data-theme="dark"] .toggle::after{content:"\263e";transform:translateX(16px);background:var(--grape-400)}
@media(max-width:820px){.nav-links{display:none}}

/* ----- hero ----- */
.hero{padding:var(--space-9) 0 var(--space-8)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--space-7)}}
.hero h2.hl-head{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1.02;letter-spacing:var(--tracking-tight);margin:var(--space-4) 0}
.hero .hl{background:var(--spark);color:var(--text-on-acid);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border:2px solid var(--ink-950);box-shadow:var(--shadow-sm)}
.hero p.lede{font-size:var(--fs-body-lg);color:var(--text-secondary);max-width:46ch;margin-bottom:var(--space-6)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.audience-band{margin-top:var(--space-7);font-family:var(--font-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary)}
.audience-band span{color:var(--brand)}

/* ----- embedded challenge (the mini-app) ----- */
.applet{position:relative}
.applet .sticker{position:absolute;top:-16px;right:-10px;z-index:3;transform:rotate(6deg)}
.applet-frame{background:var(--bg-surface);border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.applet-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink-950);border-bottom:var(--border)}
[data-theme="dark"] .applet-bar{background:#000}
.dot{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5)}
.dot.r{background:var(--flare-500)}.dot.y{background:var(--amber-500)}.dot.g{background:var(--acid-500)}
.applet-title{margin-left:8px;font-family:var(--font-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--paper-50)}
.applet-body{padding:var(--space-4)}
.vault{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-sunken);border:2px dashed var(--text-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
.vault .v-ico{width:38px;height:38px;display:grid;place-items:center;background:var(--grape-500);color:#fff;border:var(--border);border-radius:var(--radius-sm);font-size:18px;box-shadow:var(--shadow-sm)}
.vault b{font-family:var(--font-display);font-size:.95rem;display:block}
.vault span{font-family:var(--font-mono);font-size:.72rem;color:var(--text-tertiary)}
.chat{height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 8px}
.msg{max-width:85%;padding:9px 12px;font-size:.9rem;border:var(--border);border-radius:var(--radius-md);word-break:break-word}
.msg.bot{align-self:flex-start;background:var(--bg-surface-alt);box-shadow:var(--shadow-sm)}
.msg.me{align-self:flex-end;background:var(--brand);color:var(--text-on-brand);box-shadow:var(--shadow-sm)}
.msg.typing{font-family:var(--font-mono);opacity:.7}
.msg .who{display:block;font-family:var(--font-mono);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:2px}
.msg code{font-family:var(--font-mono);background:var(--spark);color:var(--ink-950);padding:1px 5px;border-radius:3px;font-weight:700}
.composer{display:flex;gap:8px;margin-top:10px}
.composer input{flex:1;font-family:var(--font-mono);font-size:.85rem;padding:11px 12px;border:var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm) inset}
.composer input:focus{outline:none;box-shadow:var(--shadow-sm)}
.flagbar{display:flex;gap:8px;margin-top:10px}
.flagbar input{flex:1;font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;padding:10px 12px;border:2px dashed var(--brand);border-radius:var(--radius-md);background:var(--brand-soft);color:var(--text-primary)}
.flagbar input::placeholder{color:var(--text-tertiary)}
.hint{font-family:var(--font-mono);font-size:.7rem;color:var(--text-tertiary);margin-top:8px;text-align:center}

/* win flash */
.win-overlay{position:absolute;inset:0;background:var(--acid-500);color:var(--ink-950);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:var(--radius-lg);z-index:5;border:var(--border);padding:24px}
.win-overlay.show{display:flex;animation:pop var(--dur-base) var(--ease-snap)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.win-overlay h3{font-family:var(--font-display);font-size:2rem;letter-spacing:var(--tracking-tight)}
.win-overlay code{font-family:var(--font-mono);font-weight:700;background:var(--ink-950);color:var(--acid-500);padding:4px 8px;border-radius:4px;margin:8px 0}

/* ----- ticker ----- */
.ticker{border-top:var(--border);border-bottom:var(--border);background:var(--ink-950);color:var(--paper-50);overflow:hidden;white-space:nowrap}
[data-theme="dark"] .ticker{background:#000}
.ticker-track{display:inline-block;padding:10px 0;font-family:var(--font-mono);font-size:.78rem;animation:scroll 30s linear infinite;will-change:transform}
.ticker-track b{color:var(--acid-500)}
.ticker-track .sep{color:var(--flare-500);margin:0 18px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;white-space:normal;padding:10px 24px}}

/* ----- sections ----- */
.section{padding:var(--space-9) 0}
.section--tight{padding-top:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);letter-spacing:var(--tracking-tight)}
.section-lede{color:var(--text-secondary);font-size:var(--fs-body-lg);max-width:60ch;margin-top:var(--space-3)}

/* ----- steps ----- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);counter-reset:step}
@media(max-width:780px){.steps{grid-template-columns:1fr}}
.step{padding:var(--space-5);position:relative}
.step .num{counter-increment:step;font-family:var(--font-mono);font-weight:700;width:40px;height:40px;display:grid;place-items:center;border:var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4);font-size:1.1rem}
.step:nth-child(1) .num{background:var(--spark);color:var(--text-on-acid)}
.step:nth-child(2) .num{background:var(--accent);color:#fff}
.step:nth-child(3) .num{background:var(--secondary);color:#fff}
.step .num::before{content:counter(step)}
.step h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);margin-bottom:6px}
.step p{color:var(--text-secondary);font-size:.95rem}

/* ----- leaderboard strip ----- */
.lb{padding:0;overflow:hidden}
.lb-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:var(--space-4);padding:14px var(--space-5);border-bottom:2px solid var(--border-color)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:var(--font-display);font-weight:700;font-size:1.3rem;width:40px;height:40px;display:grid;place-items:center;border:var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.lb-row[data-rank="1"] .lb-rank{background:var(--spark);color:var(--text-on-acid)}
.lb-row[data-rank="2"] .lb-rank{background:var(--accent);color:#fff}
.lb-row[data-rank="3"] .lb-rank{background:var(--secondary);color:#fff}
.lb-team{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.lb-team small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.7rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}
.lb-score{font-family:var(--font-mono);font-weight:700;font-size:1.1rem;text-align:right}
.lb-score .fb{display:inline-block;font-size:.6rem;background:var(--flare-500);color:#fff;padding:1px 6px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:middle;border:1.5px solid var(--ink-950)}

/* ----- two-col prose blocks ----- */
.prose-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)}
@media(max-width:780px){.prose-grid{grid-template-columns:1fr}}
.prose-grid h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-4)}
.prose-grid p{color:var(--text-secondary);font-size:1.05rem}
.prose-grid p + p{margin-top:var(--space-4)}

/* ----- feature cards ----- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media(max-width:780px){.feats{grid-template-columns:1fr}}
.feat{padding:var(--space-5)}
.feat .fi{width:46px;height:46px;display:grid;place-items:center;border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);font-size:22px;margin-bottom:var(--space-4)}
.feat:nth-child(1) .fi{background:var(--spark);color:var(--text-on-acid)}
.feat:nth-child(2) .fi{background:var(--accent);color:#fff}
.feat:nth-child(3) .fi{background:var(--secondary);color:#fff}
.feat h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);margin-bottom:6px}
.feat p{color:var(--text-secondary);font-size:.95rem}

/* ----- host CTA ----- */
.host{background:var(--brand);color:#fff;border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-8);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-7);align-items:center}
@media(max-width:780px){.host{grid-template-columns:1fr;text-align:center}}
.host h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);color:#fff;letter-spacing:var(--tracking-tight);margin-bottom:8px}
.host p{color:rgba(255,255,255,.88);margin-bottom:var(--space-4);max-width:46ch}
.host .reassure{font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.75);margin-top:var(--space-4);margin-bottom:0}
.qr{background:#fff;border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:16px;display:grid;place-items:center;justify-self:center}
.qr svg{display:block}
.qr .code{font-family:var(--font-mono);font-weight:700;letter-spacing:.2em;color:var(--ink-950);margin-top:8px;font-size:.9rem}

/* ----- FAQ ----- */
.faq{display:grid;gap:var(--space-3);max-width:780px}
.faq details{border:var(--border);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px var(--space-5);font-family:var(--font-display);font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.4rem;color:var(--brand);transition:transform var(--dur-fast)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 var(--space-5) 16px;color:var(--text-secondary)}

/* ----- footer ----- */
footer{border-top:var(--border);padding:var(--space-7) 0;margin-top:var(--space-8)}
.foot-inner{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;align-items:center}
.foot-tag{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:var(--tracking-tight)}
.foot-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--text-tertiary)}
.foot-links{display:flex;gap:var(--space-4);flex-wrap:wrap}
.foot-links a{font-family:var(--font-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);text-decoration:none}
.foot-links a:hover{color:var(--brand)}