/* ==========================================================================
   Splitscreen — splitscreen.gg marketing site
   ==========================================================================

   Night editorial. The logged-in app is currently light; this page is the
   first surface moved to the dark palette, so the tokens below are written to
   be lifted into base.css wholesale when the rest of the app follows. Nothing
   here is page-specific except where marked.

   The rules of the house style survive the move to dark:
     · flat — colour arrives as solid blocks and hairline rules, never glow
     · two-tone — Player 1 (cobalt) and Player 2 (vermilion) carry equal weight
     · the seam — the name is two halves, so the layout keeps splitting in two

   Deliberately NOT neon: no coloured box-shadows, no saturated backgrounds, no
   text glow. On black, a 1px vermilion rule reads louder than a lit sign does.
   ========================================================================== */

/* ---------- tokens: dark ---------- */
:root {
  /* surfaces — warm near-blacks, never #000; pure black flattens the grain */
  --void:      #0B0C0E;   /* page */
  --panel:     #111319;   /* cards */
  --panel-2:   #161920;   /* raised / hovered */
  --band:      #0E1014;   /* alternating sections */

  /* ink on dark — warm off-whites, carried over from the light palette */
  --bone:      #F2EFE8;
  --bone-2:    #B7BBC3;
  --bone-3:    #838994;
  --bone-4:    #5B616C;

  /* rules */
  --line:      #23262E;
  --line-soft: #191C22;
  --line-hard: #333844;

  /* players — lifted off their print values, which go muddy on black.
     `-t` variants are the contrast-safe text values for small type. */
  --p1:        #5B79FF;   /* cobalt   — Groups / teammates */
  --p1-t:      #93A6FF;
  --p1-deep:   #1F3FD4;
  --p1-wash:   #141A33;

  --p2:        #FF6A4D;   /* vermilion — Dating */
  --p2-t:      #FF9A85;
  --p2-deep:   #E23F22;
  --p2-wash:   #2A150F;

  --p3:        #35C39C;   /* pine — verified / trust, semantic only */
  --p3-t:      #6FD9BC;
  --p3-wash:   #0F2620;

  --gold:      #E0B457;

  /* type */
  --font-display: 'Clash Display', 'Trebuchet MS', ui-sans-serif, sans-serif;
  --font-body:    'Switzer', 'Helvetica Neue', ui-sans-serif, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* rhythm */
  --gut:    clamp(1.25rem, 5vw, 4rem);
  --shell:  1240px;
  --radius: 14px;
  --radius-sm: 9px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* sticky nav must not eat anchor targets */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15.5px, 0.5vw + 13.9px, 17.5px);
  line-height: 1.62;
  color: var(--bone-2);
  background: var(--void);
  word-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--p2-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--p1);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  background: var(--bone);
  color: var(--void);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.skip:focus { left: 0.5rem; }

/* Film grain. One fixed overlay for the whole document — cheaper than a
   texture per section, and it keeps large flat blacks from banding on OLED. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  word-spacing: 0.08em;
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.4rem, 4.9vw, 4.5rem); line-height: 0.98; letter-spacing: -0.038em; }
.d2 { font-size: clamp(2rem, 4.3vw, 3.5rem);  line-height: 1.0;  letter-spacing: -0.034em; }
.d3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.16; }

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--bone-2);
  word-spacing: 0.08em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 1.9em;
  height: 1px;
  background: var(--c, var(--p1));
  flex: none;
}
.eyebrow--bare::before { display: none; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

em { font-style: normal; color: var(--p2); }

.shell {
  position: relative;   /* the hung section numbers measure from here */
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
}

section { position: relative; }

/* Section rhythm. Sections are separated by a hairline rather than by colour
   changes — the page is one continuous black field, and the rules are what
   give it structure. */
.sec {
  padding: clamp(4.5rem, 11vh, 8.5rem) 0;
  border-top: 1px solid var(--line-soft);
}
.sec--band { background: var(--band); }

.sec__head { max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.sec__head .lede { margin-top: 1.2rem; }

/* Mono section index, hung in the left margin on wide screens. A print habit
   that gives the dark field a sense of order without adding chrome. */
.sec__no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--bone-4);
  margin-bottom: 1.2rem;
}
/* Above 1100px the gutter is wide enough to hang the number in it, turned on
   its side. Below that it stays inline above the eyebrow. */
@media (min-width: 1100px) {
  .sec__no {
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;
    margin: 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.3em;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.95em 1.5em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bone);
  color: var(--void);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover { background: #fff; transform: translateY(-2px); }
.btn:hover .arr { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--line-hard);
}
.btn--ghost:hover { background: var(--panel-2); border-color: var(--bone-4); color: var(--bone); }

.btn--p2 { background: var(--p2-deep); color: #fff; }
.btn--p2:hover { background: var(--p2); }

.btn--sm { padding: 0.7em 1.1em; font-size: 0.66rem; }

/* ==========================================================================
   Nav
   ========================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}
.top.is-stuck {
  background: rgba(11, 12, 14, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.6rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.018em;
  color: var(--bone);
  margin-right: auto;
}
/* the mark is wider than tall — size by height and let width follow */
.mark img { height: 28px; width: auto; }

/* Five links now, and they are mono uppercase with 0.13em tracking — at the
   900px breakpoint a flat 1.9rem gap pushed the buttons off the bar. The gap
   scales instead, so the roomy spacing survives on wide screens. */
.nav { display: none; align-items: center; gap: clamp(1rem, 2.1vw, 1.9rem); }
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-3);
  transition: color 0.3s var(--ease);
}
.nav a:hover { color: var(--bone); }

.bar .btn { flex: none; }
.bar__login { display: none; }
@media (min-width: 560px) { .bar__login { display: inline-flex; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 9vh, 6rem) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}

/* The art sits behind the type, pushed right so the copy lands on the darkest
   part of the frame. Two scrims: one horizontal so the left column stays
   readable, one vertical so the nav and the strip below both have ground. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 0.92;
}
/* Scrim ramp, not a blanket. It has to stay light enough on the left that the
   cobalt figure survives — both halves of the frame are the whole point — while
   still giving the headline a black ground to sit on. */
.hero__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(11,12,14,0.92) 0%,
      rgba(11,12,14,0.8) 26%,
      rgba(11,12,14,0.44) 54%,
      rgba(11,12,14,0.26) 78%,
      rgba(11,12,14,0.46) 100%),
    linear-gradient(to bottom,
      var(--void) 0%,
      rgba(11,12,14,0.35) 14%,
      rgba(11,12,14,0) 34% 60%,
      rgba(11,12,14,0.75) 88%,
      var(--void) 100%);
}

.hero__in { max-width: 52ch; }

/* Portrait viewports crop a 3:2 plate down to the dark gap between the two
   figures, so lean the frame right and scrim top-down instead of left-right. */
@media (max-width: 760px) {
  .hero { min-height: min(88vh, 720px); }
  .hero__art img { object-position: 62% 58%; opacity: 0.78; }
  .hero__art::after {
    background: linear-gradient(to bottom,
      rgba(11,12,14,0.95) 0%,
      rgba(11,12,14,0.9) 42%,
      rgba(11,12,14,0.62) 68%,
      rgba(11,12,14,0.8) 88%,
      var(--void) 100%);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--bone-2);
  padding: 0.55em 1em 0.55em 0.72em;
  border: 1px solid var(--line-hard);
  border-radius: 999px;
  background: rgba(17, 19, 25, 0.72);
  backdrop-filter: blur(6px);
  margin-bottom: clamp(1.5rem, 4vh, 2.2rem);
}
.badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p3);
  flex: none;
  animation: breathe 2.8s var(--ease) infinite;
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .p2 { color: var(--p2); }
.hero h1 .p1 { color: var(--p1); }

.hero .lede { max-width: 46ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 4.5vh, 2.6rem);
}

.hero__fine {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-4);
}

/* ---------- proof strip ---------- */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.strip__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .strip__row { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: 1.5rem 0 1.6rem;
  padding-right: 1.4rem;
  border-right: 1px solid var(--line-soft);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .stat:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .stat:last-child { border-right: 0; }
}
.stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 860px) { .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 0; } }
.stat + .stat { padding-left: 1.4rem; }
@media (min-width: 860px) { .stat + .stat { padding-left: clamp(1rem, 2.4vw, 2rem); } }

.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.98rem, 1.35vw, 1.16rem);
  letter-spacing: -0.014em;
  color: var(--bone);
  margin-bottom: 0.3rem;
}
.stat b u { text-decoration: none; color: var(--c, var(--p1)); }
.stat span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-4);
}

/* ==========================================================================
   Manifesto band
   ========================================================================== */

.creed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5.5rem, 15vh, 10rem) 0;
  border-top: 1px solid var(--line-soft);
}

/* The empty-room plate sits behind this section at low opacity. It is
   atmosphere, not information — scrimmed hard enough that the copy would still
   read if the image never loaded. */
.creed__art { position: absolute; inset: 0; z-index: -1; }
.creed__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: 0.5;
}
.creed__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--void) 6%, rgba(11,12,14,0.9) 38%, rgba(11,12,14,0.72) 100%),
    linear-gradient(to bottom, var(--void) 0%, rgba(11,12,14,0) 30% 66%, var(--void) 100%);
}
.creed__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.032em;
  color: var(--bone);
  max-width: 20ch;
  margin: 0;
  word-spacing: 0.08em;
}
.creed__q em { color: var(--p2); }
.creed__body {
  max-width: 44ch;
  margin-top: 1.6rem;
  color: var(--bone-3);
}
@media (min-width: 900px) {
  .creed__in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
  .creed__body { margin-top: 0; padding-bottom: 0.4rem; }
}

/* ==========================================================================
   Rooms
   ========================================================================== */

.rooms { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 940px) { .rooms { grid-template-columns: repeat(3, 1fr); } }

.room {
  background: var(--panel);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: background 0.4s var(--ease);
}
.room:hover { background: var(--panel-2); }

/* the accent bar is the only place the room colour appears at full strength */
.room::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c);
}
.room--dating { --c: var(--p2); }
.room--groups { --c: var(--p1); }
.room--social { --c: var(--p3); }

.room__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c);
}
.room h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -0.024em; }
.room > p { color: var(--bone-3); font-size: 0.95rem; margin: 0; }

.room__list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

/* The marker hangs in a padded gutter rather than a grid column. Grid would
   promote the leading <b> to its own item and strand the rest of the sentence
   in the 1.1rem marker track — one word per line. */
.room__list li {
  position: relative;
  padding: 0.7rem 0 0 1.15rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--bone-2);
  border-top: 1px solid var(--line-soft);
}
.room__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  background: var(--c);
  opacity: 0.85;
}
.room__list li b { color: var(--bone); font-weight: 600; }

.room__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-4);
}

/* The .rule-band / .rule-list styles lived here for the first-move section on
   the marketing page. That section came out on 2026-08-11 and nothing else
   used them. */

/* ==========================================================================
   Games
   ==========================================================================

   The catalogue, spelled out — every title with its own logo, the same files
   and the same bleed rule the app's .gmark uses. The name is always set beside
   the mark rather than replaced by it: the logos are what a reader scans, the
   text is what a crawler reads, and neither has to carry the section alone. */

.games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  /* wide enough that "Monster Hunter Wilds" and "Deep Rock Galactic" stay on
     one line — a wrapped name drags its whole row taller than its neighbours */
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}

.games li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 0.92rem;
  color: var(--bone-2);
  letter-spacing: -0.005em;
}

.games__k {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Glyph marks sit on the tile with air around them; full-bleed marks are whole
   app icons that bring their own ground and take the square edge to edge. Same
   distinction as .gmark--bleed in app.css, driven by the same flag in
   Game::LOGOS — a glyph stretched to the border reads as a cropped mistake. */
.games__k img { width: 74%; height: 74%; object-fit: contain; }
.games__k--bleed img { width: 100%; height: 100%; }

/* Helldivers' Super Earth eagle is a single flat #16181d fill, traced for the
   app's light tile — on this page's dark one it is a black mark on black. The
   file is one colour, so inverting it is exact: #16181d becomes #E9E7E2, which
   is the bone the rest of the page is set in. Do not "fix" this by lightening
   the SVG; the app still needs it dark. */
.games__k--flip img { filter: invert(1); }

.games__note {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  color: var(--bone-4);
  max-width: 60ch;
}
.games__note a { color: var(--p1-t); border-bottom: 1px solid rgba(147, 166, 255, 0.35); }
.games__note a:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   Safety
   ========================================================================== */

.safe { display: grid; gap: 1rem; }
@media (min-width: 760px)  { .safe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .safe { grid-template-columns: repeat(4, 1fr); } }

.safe__c {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 1.3rem 1.35rem 1.45rem;
}
.safe__c h3 { font-size: 1.02rem; letter-spacing: -0.014em; margin-bottom: 0.5rem; }
.safe__c p { font-size: 0.88rem; color: var(--bone-3); margin: 0; }
.safe__c .free {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--p3-t);
  background: var(--p3-wash);
  border-radius: 3px;
  padding: 0.3em 0.55em;
  margin-bottom: 0.9rem;
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }

.step {
  counter-increment: s;
  display: grid;
  gap: 0.3rem 1.6rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 800px) {
  .step { grid-template-columns: 4.5rem 15rem 1fr; align-items: baseline; gap: 0 clamp(1.2rem, 3vw, 2.6rem); }
}

.step::before {
  content: '0' counter(s);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--bone-4);
}
.step h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; }
.step p { font-size: 0.93rem; color: var(--bone-3); margin: 0.35rem 0 0; max-width: 54ch; }
@media (min-width: 800px) { .step p { margin-top: 0; } }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.2rem 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -0.016em;
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--p1-t); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--bone-4);
  border-bottom: 1.5px solid var(--bone-4);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.faq details[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
  border-color: var(--p1);
}
.faq details p {
  margin: 0 0 1.3rem;
  max-width: 68ch;
  color: var(--bone-3);
  font-size: 0.94rem;
}

/* ==========================================================================
   Closer
   ========================================================================== */

.closer {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 14vh, 9.5rem) 0;
  border-top: 1px solid var(--line);
  background: var(--band);
  text-align: center;
}
/* The seam: one hairline down the centre, cobalt above the fold of the
   heading and vermilion below it. The whole brand in two rules. */
.closer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--p1-deep), rgba(31,63,212,0) 32%, rgba(226,63,34,0) 68%, var(--p2-deep));
  opacity: 0.7;
}
/* `ch` on this wrapper would resolve against the body font, not the display
   font of the heading inside it — which is how it ended up a 230px ribbon. */
.closer__in { position: relative; max-width: 44rem; margin: 0 auto; }
.closer h2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); letter-spacing: -0.038em; }
.closer h2 em { color: var(--p2); }
.closer .lede { margin: 1.4rem auto 0; max-width: 42ch; }
.closer__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2.2rem; }
.closer__fine {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-4);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { border-top: 1px solid var(--line); padding: 2.6rem 0 3rem; }
.foot__in { display: grid; gap: 2rem; }
@media (min-width: 800px) { .foot__in { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }

.foot__blurb { color: var(--bone-4); font-size: 0.88rem; max-width: 34ch; margin-top: 0.9rem; }

.foot h4 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--bone-4);
  margin-bottom: 0.9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot li a { font-size: 0.9rem; color: var(--bone-3); transition: color 0.3s var(--ease); }
.foot li a:hover { color: var(--bone); }

/* Socials live under the brand blurb rather than in a fourth column, so the
   footer grid stays 1.4fr 1fr 1fr and they read as who we are rather than as
   one more nav list. `.foot ul` is a grid, so this needs `.foot .social` to
   outweigh it — a bare `.social` loses on specificity and stacks vertically.
   No brand colours: on black they glow, and the house rule is that hover
   arrives as a flat player colour.

   The buttons are square and wordless — the glyphs already name the networks,
   and the word beside each one only widened the row. The name lives on the
   anchor's aria-label instead, so a screen reader still gets "Instagram" out
   of a link whose only child is an aria-hidden <svg>. */
.foot__h--social { margin-top: 1.7rem; }

.foot .social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.foot .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--bone-3);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.foot .social a:hover { color: var(--c, var(--p1)); border-color: var(--line-hard); background: var(--panel); }
.foot .social svg { flex: none; }

/* Trademark and non-affiliation notice. Sits above the bar, in the smallest
   type on the page that is still comfortably readable — this has to be seen to
   do its job, so it is not --bone-4 and it is not 0.6rem. The games grid puts
   two dozen publishers' marks on this site; this is the line that says none of
   them sent us. Kept on every page that carries the footer, legal pages
   included, because "it's on the terms page" is not where a reader looks. */
.foot__tm {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--bone-4);
  max-width: 88ch;
}
.foot__tm strong { color: var(--bone-3); font-weight: 500; }
.foot__tm a { color: var(--bone-3); border-bottom: 1px solid var(--line-hard); }
.foot__tm a:hover { color: var(--bone); border-bottom-color: currentColor; }
.foot__tm + .foot__bar { margin-top: 1.6rem; border-top: 0; padding-top: 0; }

.foot__bar {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-4);
}

/* ==========================================================================
   Motion
   ==========================================================================

   Two systems, both cheap: a staggered load-in for the hero (no JS, so it
   cannot flash), and one IntersectionObserver that adds .in further down. */

[data-rise] {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.85s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise], .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  .badge i { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Touch ergonomics on the front door.

   site.css is written mobile-first, so the layout already reflows properly —
   what it was not written for is a finger. The header's CREATE ACCOUNT sat at
   34px and the footer's navigation at 18px, and this is the one page where
   every visitor is by definition new and every link is the only path onward.

   Prose links are deliberately left alone: an inline link inside a sentence is
   exempt from the target-size rule, and padding one would break the line
   height of the paragraph it sits in.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .btn { min-height: 44px; }

  /* The footer's lists are navigation, not prose. Padding rather than a
     min-height so the gap between rows stays the visual rhythm it already is;
     the tappable box just grows into it. */
  .foot li a {
    display: block;
    padding: 0.8rem 0;
  }
  .foot ul { gap: 0; }
}