@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/static/landing/assets/fonts/bricolage-grotesque.85f55a58.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bg:        #10101E;
  --bg-2:      #181830;
  /* Shared "dip to darkness" color for scene seams: every full-bleed scene fades its top + bottom edge to
     this, so adjacent chapters meet in the same near-black instead of a hard color cut. Tinted, not pure black. */
  --seam:      #07070e;
  --surface:   #20203a;
  --surface-2: #2a2a4a;
  --line:      rgba(255,255,255,.10);
  --text:      #F5F5FA;
  --muted:     #A7A7C0;
  --accent:    #FF4081;
  --accent-2:  #ff6aa0;
  --village:   #4FC3F7;
  --werewolf:  #FF6E6E;
  --solo:      #C792EA;
  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1120px;
  --header-h:  64px;
  --space:     clamp(48px, 8vw, 104px);
}
/* Mobile only: every secondary/small text on the page (lede, section subheads, card body copy, proof-strip
   labels, footer links, ...) reads off this one var(--muted), so brightening it here brightens all of them
   at once without touching desktop, which wasn't flagged as an issue. */
@media (max-width: 767px) {
  :root { --muted: #D0D0E2; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 5vw, 40px); }
.container.narrow { max-width: 760px; }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; }
/* Display voice also carries the wordmark, the big proof numbers, and role names */
.brand-name, .proof-strip strong, .role-name { font-family: var(--font-display); font-optical-sizing: auto; }
.section { padding-block: var(--space); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 5vw, 56px); }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 700; font-size: .98rem;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  min-height: 44px; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(255,64,129,.35); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,16,30,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(16,16,30,.92); }
/* The nav collapses in from the top once the scene + headline have landed (see hero entrance timing).
   `backwards` fill holds it hidden through the delay, then reverts to natural, no persistent transform
   left on the sticky element. Reduced-motion keeps the nav present from the first paint. */
.js .site-header { animation: headerDrop .65s cubic-bezier(.22, 1, .36, 1) .92s backwards; }
@keyframes headerDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .site-header { animation: none; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
/* Base mark size (also used by the footer brand, which is .footer-brand, NOT .brand). */
.brand-mark { width: 28px; height: 28px; border-radius: 7px; display: block; flex-shrink: 0; }
/* Prominent header brand lockup: enlarged mark + display-font wordmark. Scoped to .brand so the footer stays 28px. */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; flex-shrink: 0; }
.brand .brand-mark { width: 38px; height: 38px; border-radius: 9px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.brand-lockup { display: inline-flex; flex-direction: column; line-height: 1.04; }
.brand .brand-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.header-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 14px; font: inherit; font-size: .9rem; min-height: 40px; white-space: nowrap;
}
.lang-btn:hover { color: var(--text); }
/* Full language name on desktop; the short code (🌐 EN) is swapped in on phones (see the max-width: 560px block). */
.lang-code { display: none; }
.login-link { color: var(--muted); font-weight: 600; font-size: .92rem; padding: 9px 6px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.login-link:hover { color: var(--text); }
.caret { font-size: .7rem; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px; list-style: none; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.lang-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: .95rem; }
.lang-menu a:hover, .lang-menu a[aria-current="true"] { background: rgba(255,255,255,.08); }
/* Compact mobile header (phones): logo-only + condensed controls so all four items fit without the logo
   distorting or the CTA (e.g. the longer German "Hol die App") spilling off the right edge. The enlarged
   mark stays, so the brand is still clear. */
@media (max-width: 560px) {
  .brand .brand-name { display: none; }        /* drop the wordmark; keep the mark */
  .brand { gap: 0; }                            /* no wordmark -> reclaim the lockup gap */
  .lang-name { display: none; }                 /* language switch -> icon + code (🌐 DE) */
  .lang-code { display: inline; }
  .header-nav { gap: 6px; }
  .lang-btn { padding: 9px 10px; gap: 4px; }
  .login-link { padding: 9px 4px; }
  .header-nav .btn { padding: 12px 14px; }
}

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-top: clamp(40px, 7vw, 80px); padding-bottom: var(--space);
  /* darker, cooler night grade: a restrained warm ember top-right, deep moonlit blue on the left,
     over a base a shade below --bg. Mostly seen at load/edges; the scene grade lives on .hero-scene. */
  background:
    radial-gradient(1000px 620px at 78% -12%, rgba(255,64,129,.10), transparent 60%),
    radial-gradient(820px 520px at -5% 6%, rgba(58,86,168,.12), transparent 58%),
    #0b0b16;
}
/* JS-enhanced hero: the scene bleeds up under the (initially hidden) nav so the entrance is
   truly full-bleed; the copy keeps its header clearance via matching top padding. Same math on
   every breakpoint (-header-h reserved, +header-h padding), so mobile copy still clears the nav. */
.js .hero { margin-top: calc(var(--header-h) * -1); padding-top: calc(clamp(40px, 7vw, 80px) + var(--header-h)); }
.hero-grid { position: relative; z-index: 2; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: 1fr; }
/* One fluid rhythm scale drives the whole copy stack: tight within the pitch (tags -> headline -> lede),
   generous between groups (pitch -> actions -> proof). Overridden per-breakpoint, not re-hardcoded. */
.hero-copy { min-width: 0; max-width: 560px;
  --flow-tight: clamp(14px, 1.8vw, 18px);
  --flow-group: clamp(26px, 3.4vw, 34px);
  --flow-proof: clamp(26px, 3.6vw, 38px);
}
/* The held headline is the star of the entrance: larger, tighter, legible over the lit scene. */
.hero-copy h1 { font-size: clamp(2.6rem, 7.2vw, 4.8rem); letter-spacing: -0.035em; line-height: 1.01; text-shadow: 0 1px 2px rgba(3,4,10,.55), 0 3px 26px rgba(4,6,20,.55), 0 0 54px rgba(140,158,225,.16); }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--flow-tight); }
/* Both chips share one geometry so the meta-row reads as a matched set; only the semantic color differs. */
.eyebrow, .free-pill {
  display: inline-flex; align-items: center; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 800;
  padding: 7px 12px; border-radius: 999px; margin: 0; border: 1px solid transparent;
}
.eyebrow { color: var(--accent-2); background: rgba(255,64,129,.12); border-color: rgba(255,64,129,.3); }
.free-pill { gap: 7px; padding-left: 11px; color: #4ADE80; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.38); }
.free-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.lede { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 52ch; margin-top: var(--flow-tight); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--flow-group); }
/* Proof reads as one row-band (wraps gracefully on the narrowest phones) instead of a floating vertical list. */
.proof-strip {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  list-style: none; margin-top: var(--flow-proof);
}
.proof-strip li { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.proof-strip strong { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; }
.proof-strip span { color: var(--muted); font-size: .92rem; }
@media (min-width: 768px) {
  .proof-strip { gap: 14px 28px; }
}
/* Portrait: kill the full-width "wall". The left edge stays fixed (aligned with the header logo above);
   four blocks take four different RIGHT edges (h1 widest, lede stepped in, a left-anchored auto-width CTA
   cluster, a narrower proof band) so the copy reads as a stepped column with real right-side air instead of
   edge-to-edge bars. (Stays after the base rules to win the source-order tie.) */
@media (max-width: 767px) {
  /* Split composition: the copy fills the full frame so the pitch anchors at the TOP and the action band
     drops to the BOTTOM; the flexible gap the actions push open (margin-top:auto, below) IS the scene-breathe
     band where the moon + villagers show. Degrades to a normal stack on short viewports (auto collapses). */
  /* more floor under the action band: lifts it clear of the reaper's mask and gives the proof row breathing
     room off the bottom edge (vh-based so it scales with the phone's height). */
  .hero { padding-bottom: clamp(56px, 11vh, 104px); }
  .hero-grid { align-items: stretch; grid-template-rows: 1fr; }
  .hero-copy { display: flex; flex-direction: column; --flow-tight: clamp(12px, 3.4vw, 16px); --flow-group: clamp(20px, 5vw, 26px); --flow-proof: clamp(24px, 6vw, 30px); }
  /* lede steps in one notch from the headline's edge. margin-bottom is a FLOOR under the flexible
     margin-top:auto gap below, so the pitch and the action band never touch on short viewports. A soft
     shadow keeps the muted lede legible where it crosses the bright lower moon in the clear scrim band. */
  .lede { max-width: 36ch; margin-bottom: var(--flow-group); text-shadow: 0 1px 10px rgba(4,5,12,.72); }
  /* CTAs: side-by-side, auto-width, left-aligned, never full-bleed. flex:0 1 auto is load-bearing so a
     button that can't share the row drops to its own content-width line, not a full-width stack. */
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; margin-top: auto; }
  .hero-actions .btn { flex: 0 1 auto; width: auto; }
  .hero-actions .btn-lg { padding: 14px 22px; font-size: 1rem; }
  /* primary stays the single dominant action: a min-width floor keeps it the widest element for both the
     short "Play" and long "Get the app" injected labels; the cap stops a long label bleeding edge-to-edge */
  .hero-actions .btn-primary { min-width: 10rem; max-width: min(100%, 20rem); }
  /* secondary recedes to a quiet inline link: one unmistakable pink action, and the row no longer reads as
     two competing pills spanning the width. Still a full 44px tap target (btn min-height is untouched). */
  .hero-actions .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); padding: 12px 6px; gap: 5px; }
  .hero-actions .btn-ghost::after { content: "\2192"; font-size: 1.05em; transition: transform .15s cubic-bezier(.22, 1, .36, 1); }
  .hero-actions .btn-ghost:hover { background: transparent; color: var(--text); }
  .hero-actions .btn-ghost:hover::after { transform: translateX(3px); }
  /* proof: fixed 3-up (number over label). repeat(3, minmax(0,1fr)) is structurally orphan- and
     overflow-proof; capped narrower than the lede so the right-edge staircase descends cleanly. */
  .proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; max-width: 20rem; }
  .proof-strip li { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  .proof-strip strong { font-size: clamp(1.4rem, 6vw, 1.7rem); line-height: 1; }
  .proof-strip span { font-size: .76rem; line-height: 1.15; }
  /* the action band sits over the darker bottom of the scene; a soft shadow keeps the muted link + proof
     labels legible without piling on more scrim (which would crush the reaper reveal above). */
  .hero-actions .btn-ghost, .proof-strip strong, .proof-strip span { text-shadow: 0 1px 8px rgba(4,5,12,.78); }
}
/* Smallest phones: trim the primary pill + proof footprint so both stay comfortable to 320px (the ghost is
   now a text link, so it needs no trim — target the primary specifically so it doesn't re-widen the link). */
@media (max-width: 360px) {
  .hero-actions .btn-primary { padding: 13px 18px; font-size: .95rem; }
  .proof-strip { gap: 4px 10px; }
  .proof-strip strong { font-size: 1.4rem; }
  .proof-strip span { font-size: .72rem; }
}
/* Short landscape viewports (rotated tablets / short laptops): compress the rhythm + headline so copy +
   proof fit one screen without shoving the reaper off. Scoped to short heights, so normal desktop is
   untouched; includes .js .hero (after the base rule) to win the padding tie during the JS entrance. */
@media (min-width: 768px) and (max-height: 560px) {
  .hero, .js .hero {
    min-height: auto; align-items: center;
    padding-top: calc(clamp(20px, 5vh, 40px) + var(--header-h));
    padding-bottom: clamp(20px, 5vh, 40px);
  }
  .hero-copy { --flow-group: 18px; --flow-proof: 20px; }
  .hero-copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
}

.tile-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--line);
}
.tile-img--fit { object-fit: contain; background: var(--bg-2); }

/* roles chapter chips: darker backing so filters read over the scene (band/reveal CSS lives in landing-scenes.css) */
.chapter--roles .chip { background: rgba(10,8,14,.6); border-color: rgba(255,255,255,.18); color: var(--text); }
.role-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.chip {
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 9px 18px; font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; min-height: 40px; transition: all .15s ease;
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; scroll-padding-left: 4px;
  scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent;
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
.role-card {
  scroll-snap-align: start; flex: 0 0 auto; width: 168px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .15s ease, border-color .15s ease;
}
.role-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.25); }
.role-card-btn {
  all: unset; box-sizing: border-box; display: block; width: 100%;
  padding: 18px; text-align: center; cursor: pointer; color: inherit;
}
.role-card-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
/* Long single-word role names (esp. German compounds like "Verwirrungswolf") would otherwise break at
   an arbitrary letter via the base overflow-wrap. hyphens: auto breaks them at proper points using the
   page's per-locale lang dictionary; -webkit-hyphens is required for iOS Safari. */
.role-name { font-size: 1.05rem; font-weight: 800; margin-top: 6px; hyphens: auto; -webkit-hyphens: auto; }
.role-art {
  aspect-ratio: 1/1; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; margin-bottom: 12px; background: var(--bg-2); overflow: hidden;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 60%);
}
.role-art img { width: 86%; height: 86%; object-fit: contain; display: block; }
.team { display: inline-block; margin-top: 10px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.team.village  { color: var(--village);  background: rgba(79,195,247,.12); }
.team.werewolf { color: var(--werewolf); background: rgba(255,110,110,.12); }
.team.killers  { color: var(--solo);     background: rgba(199,146,234,.14); }
.carousel-arrow {
  display: none; position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  font-size: 1.6rem; line-height: 1; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.carousel-arrow:hover { background: var(--surface-2); }
.carousel-arrow.prev { left: -10px; }
.carousel-arrow.next { right: -10px; }
@media (min-width: 768px) { .carousel-arrow { display: flex; } }

.role-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.role-modal[hidden] { display: none; }
.role-modal-backdrop { position: absolute; inset: 0; background: rgba(8,8,16,.72); backdrop-filter: blur(2px); }
.role-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: modalIn .18s ease-out both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.role-modal-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.role-modal-close:hover { color: var(--text); background: var(--surface-2); }
.role-modal-art { width: 112px; height: 112px; margin: 0 auto 14px; }
.role-modal-card h3 { font-size: 1.5rem; margin-top: 10px; }
.role-modal-card p { color: var(--muted); margin-top: 14px; line-height: 1.55; }

/* The three steps are mini-scenes of one game round, built from real in-game art. Color arc runs with
   the phases: moonlit indigo (night) -> torchlight amber (day) -> victory pink (win, the accent).
   Single-column cards cap at 420px: the art compositions mix %-sized and fixed-px sprites, and past
   ~440px the pieces drift apart (finger points at nothing, winner busts clip the top edge). */
.steps { display: grid; gap: clamp(18px, 2.5vw, 26px); list-style: none; grid-template-columns: min(100%, 420px); justify-content: center; }
.step {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.step--night { border-color: rgba(146,164,255,.18); --num-ring: rgba(146,164,255,.75); }
.step--day   { border-color: rgba(255,178,74,.18);  --num-ring: rgba(255,178,74,.80); }
.step--win   { border-color: rgba(255,106,160,.20); --num-ring: rgba(255,106,160,.85); }
/* per-phase ambient light pooled behind the art, fading into the card surface */
.step::before { content: ""; position: absolute; inset: 0 0 auto; height: 210px; pointer-events: none; }
.step--night::before { background: radial-gradient(120% 130% at 72% -10%, rgba(120,138,228,.28), rgba(120,138,228,.08) 55%, transparent 78%); }
.step--day::before   { background: radial-gradient(120% 130% at 50% -10%, rgba(255,170,64,.26), rgba(255,170,64,.07) 55%, transparent 78%); }
.step--win::before   { background: radial-gradient(120% 130% at 50% -10%, rgba(255,64,129,.22), rgba(255,64,129,.07) 55%, transparent 78%); }
.step-num {
  position: absolute; top: 12px; left: 14px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(9,10,22,.62); border: 1px solid var(--num-ring, var(--accent));
  color: #fff; font-weight: 800; font-family: var(--font-display); font-size: .95rem;
}
.step-art { position: relative; height: 168px; margin: 0; }
.step-art img { position: absolute; max-width: none; height: auto; }
.step-body { padding: 14px 22px 26px; }
.step-body p { color: var(--muted); margin-top: 8px; }
/* Night: the wolf backlit by the giant moon; the pack's paw marker is stamped on it (their night vote) */
.art-moon { width: 205px; right: -34px; top: -44px; opacity: .95; filter: drop-shadow(0 0 26px rgba(170,190,255,.30)); }
.art-wolf { width: 180px; left: 2px; bottom: -16px; z-index: 1; }
/* Day: the torch mob marches (torches echo the scene's embers); the day-vote hand points the finger */
.art-mob  { width: 176px; left: 50%; margin-left: -88px; bottom: -10px; filter: drop-shadow(0 -2px 10px rgba(255,140,40,.16)); }
.art-hand { width: 62px; left: 16%; top: 12px; transform: rotate(38deg); z-index: 2; }
/* Win: the in-game game-over composition. The victorious villager (self-contained emoji icon, no crop
   to hide) fills the frame like the wolf/mob on the other cards, and the victory ribbon lands ACROSS
   its lower body (z5, in front of the icon at z4), the way the app's game-over screen banners the winner.
   No gap: figure + banner read as one unit. The icon is square, sized by HEIGHT so it's consistent
   across card widths; the ribbon's bottom is set so its top edge overlaps the figure's lower ~25%. */
.art-winner { position: absolute; height: 140px; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 4; }
.art-winner img { position: static; display: block; height: 100%; width: auto; }
.art-ribbon {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5;
  display: flex; height: 38px; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45));
}
.art-ribbon img { position: static; display: block; height: 100%; width: auto; }
.art-ribbon b {
  position: relative; overflow: hidden;
  /* negative margins tuck the stretched middle slice a few px UNDER the caps: the slices are flat color
     where they meet, so the overlap erases the subpixel seam lines the flex layout otherwise shows.
     padding-top matches the middle slice's transparent top band (19/120 rows) so the label sits on the pink. */
  margin: 0 -3px; min-width: 72px; padding: 6px 11px 0; background: url('/static/landing/assets/how/banner_middle.303a1331.png');
  background-size: 100% 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: .92rem; letter-spacing: .03em;
  color: #fff; text-shadow: 0 1px 2px rgba(140,20,60,.55);
}
/* Roles bridge line below the 3 steps (leads into the role carousel) */
.how-more { text-align: center; max-width: 640px; margin: clamp(28px, 5vw, 44px) auto 0; color: var(--muted); font-size: 1.08rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* Short viewports on the desktop pin (landscape phones, squat windows): the fg is a one-screen
   flex-centered overlay inside an overflow:hidden pin, so compress the whole column or the heading
   and bridge line get clipped with no way to scroll them into view. */
@media (min-width: 768px) and (max-height: 640px) {
  .chapter--how .section-head { margin-bottom: 18px; }
  .step-art { height: 108px; }
  .step-body { padding: 10px 18px 18px; }
  .art-moon { width: 150px; right: -26px; top: -34px; }
  .art-wolf { width: 112px; bottom: -10px; }
  .art-mob  { width: 118px; margin-left: -59px; bottom: -8px; }
  .art-hand { width: 46px; top: 8px; }
  .art-winner { height: 92px; bottom: 14px; }
  .art-ribbon { height: 26px; bottom: 8px; }
  .art-ribbon b { min-width: 56px; font-size: .7rem; padding-top: 4px; }
  .step--night .step-art::before { width: 170px; height: 170px; right: -40px; top: -46px; }
  .chapter--how .how-more { margin-top: 16px; font-size: 1rem; }
}
/* Narrow 3-col cards (768-980px viewports): scale the win figure + banner down a touch to fit */
@media (min-width: 768px) and (max-width: 980px) {
  .art-winner { height: 120px; bottom: 22px; }
  .art-ribbon { height: 32px; bottom: 16px; }
  .art-ribbon b { min-width: 60px; font-size: .8rem; padding-top: 5px; }
}

.tiles { display: grid; gap: 20px; grid-template-columns: 1fr; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.tile p { color: var(--muted); margin-top: 8px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }

.platform { background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.platform-inner { text-align: center; }
.platform-copy { max-width: 640px; margin: 0 auto; }
.platform-copy p { color: var(--muted); margin: 12px auto 0; font-size: 1.1rem; max-width: 460px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px auto; justify-content: center; }
.store-badges .badge { display: inline-flex; border-radius: 12px; transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease; }
.store-badges .badge:hover { transform: translateY(-3px); filter: brightness(1.08); }
.store-badges .badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.store-badges .badge img { height: 42px; width: auto; display: block; }

.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  background: rgba(24, 24, 46, .96); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(8, 10, 26, .32);
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.acc-item:hover { border-color: rgba(255, 255, 255, .2); }
.acc-item[open] { border-color: rgba(255, 64, 129, .4); }
.acc-item summary {
  cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--text); transition: color .15s ease;
}
.acc-item summary:hover { color: #fff; }
.acc-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after {
  content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 64, 129, .14); color: var(--accent-2);
  font-size: 1.3rem; font-weight: 400; line-height: 1;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}
.acc-item:hover summary::after { background: rgba(255, 64, 129, .24); }
.acc-item[open] summary::after { transform: rotate(45deg); background: rgba(255, 64, 129, .3); }
.acc-body { padding: 0 20px 20px; color: var(--muted); }
.acc-item[open] .acc-body { animation: accReveal .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes accReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .acc-item[open] .acc-body { animation: none; }
  .store-badges .badge, .acc-item, .acc-item summary, .acc-item summary::after { transition: none; }
}

.site-footer { border-top: 1px solid var(--line); padding-block: 40px; margin-top: var(--space); }
.footer-inner { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.footer-links a { color: var(--muted); font-size: .95rem; }
.footer-links a:hover { color: var(--text); }
.footer-copy { color: var(--muted); font-size: .85rem; }
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}