/* Press Play — site styles. Colours and fonts are set once in :root below. */

:root {
  --white: #ffffff;
  --tint: #f4f6fb;
  --line: #e2e6f0;
  --ink: #17161c;
  --navy: #3d4260;
  --red: #d1300b;
  --red-dark: #a72609;
  --gold: #ffb800;
  --green: #22c55e;
  --dark: #0f1014;
  --dark-2: #1a1b22;
  --font: "Poppins", "Segoe UI", Arial, sans-serif;
  --max: 1200px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Several things below are display:flex/grid, which beats the browser's own
   rule for [hidden]. The page toggles hidden from script to show and hide the
   countdown and the tournament picker, so it has to win here. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
h1 { font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 6.5vw, 64px); letter-spacing: .01em; line-height: 1.05; }
h2 { font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); letter-spacing: .01em; }
h2.bar { position: relative; padding-bottom: 14px; }
h2.bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: var(--red); border-radius: 2px; }
h3 { font-weight: 600; font-size: 18px; }
h4, .h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
p { margin: 0; }
.lede { font-size: 16px; color: var(--navy); max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }
.sec-head { display: grid; gap: 14px; margin-bottom: 32px; }
section { padding: 64px 0; }
@media (min-width: 900px) { section { padding: 88px 0; } .sec-head { margin-bottom: 40px; } }
/* Where two sections meet, the previous one's bottom padding and the next
   one's top padding stack: 128px of blank, 176px above 900px. Where the
   background CHANGES that reads as the edge of a band and both paddings earn
   their keep. Where it does not, it reads as the page having lost its place —
   which is exactly what happened when the #raffle band between Games and the
   streamer tournament was hidden. So: same background on both sides, drop the
   second padding and let one section's worth of space do the job.
   Written as a rule about backgrounds rather than a pixel nudge on one
   section, so hiding or unhiding a band can never bring the gap back.
   .hero is exempt as the FIRST half of the pair: it is dark and carries its
   own red rule along the bottom, so the section after it always gets its full
   padding. (It can never be the second half — nothing precedes it.) */
section:not(.band):not(.hero) + section:not(.band),
.band + .band { padding-top: 0; }

/* Where the background DOES change, the join reads as a real edge, so some top
   padding is right — but not a second full section's worth. Two stacked
   paddings put 176px of blank between Games and the streamer tournament, which
   is the gap that was complained about; the band behind the second section
   explains the break, so the space itself can be much smaller. */
section:not(.band):not(.hero) + section.band,
section.band + section:not(.band) { padding-top: 32px; }
@media (min-width: 900px) {
  section:not(.band):not(.hero) + section.band,
  section.band + section:not(.band) { padding-top: 40px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; border-radius: 8px; text-decoration: none; cursor: pointer; border: 2px solid transparent; min-height: 48px; transition: background .15s, border-color .15s, transform .1s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-outline { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 16px; min-height: 40px; font-size: 12px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(23,22,28,.06); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.nav img { height: 44px; width: auto; }
.nav-links { display: none; gap: 30px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.nav-links a { text-decoration: none; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--red); }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Hero */
.hero { position: relative; background: var(--dark) url("../images/hero-bg.jpg") center / cover no-repeat; color: #fff; padding: 72px 0 80px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,20,.82) 0%, rgba(15,16,20,.55) 55%, rgba(15,16,20,.25) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.hero .wrap { position: relative; display: grid; gap: 22px; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.hero .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.hero h1 { max-width: 14ch; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.hero .lede { color: rgba(255,255,255,.9); font-size: 17px; max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn { flex: 1 1 200px; }
.hero .cta-row { margin-top: 6px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.hero-facts span::before { content: "✓"; color: var(--gold); margin-right: 8px; font-weight: 800; }
@media (min-width: 900px) { .hero { padding: 120px 0 128px; } .hero-copy { gap: 26px; } .cta-row .btn { flex: 0 1 auto; } }

/* Hero game cards — decorative float, wide screens only */
.hero-cards { display: none; }
@media (min-width: 1100px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  /* Six cards now, fanned with an overlap. The strip is kept exactly as wide
     as the five-card one was (608px at full width, about 552px at 1100px), so
     the headline keeps its room: each card is a little narrower and overlaps
     its neighbour a little more. The newest game is last, so it sits on top
     of the fan and is the one card nothing covers. */
  .hero-cards { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
  .hero-card { --r: 0deg; --y: 0px; position: relative; flex: 0 0 auto; width: clamp(110px, 12.2vw, 148px); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 38px rgba(0,0,0,.45); transform: translateY(var(--y)) rotate(var(--r)); animation: hero-float 7s ease-in-out infinite; transition: box-shadow .2s; }
  .hero-card + .hero-card { margin-left: clamp(-56px, -4.6vw, -44px); }
  .hero-card:nth-child(1) { --r: -9deg; --y: 32px; animation-delay: -.6s; }
  .hero-card:nth-child(2) { --r: -5.5deg; --y: 10px; animation-delay: -2.8s; }
  .hero-card:nth-child(3) { --r: -2deg; --y: -8px; animation-delay: -4.9s; }
  .hero-card:nth-child(4) { --r: 2deg; --y: -8px; animation-delay: -1.7s; }
  .hero-card:nth-child(5) { --r: 5.5deg; --y: 10px; animation-delay: -3.6s; }
  .hero-card:nth-child(6) { --r: 9deg; --y: 32px; animation-delay: -5.6s; }
  /* Whichever card is pointed at comes to the front, so the covered edge of
     any of them can be seen in full. */
  .hero-card:hover, .hero-card:focus-visible { z-index: 2; }
  .hero-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,.55); }
  .hero-card img { width: 100%; height: auto; }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(var(--y)) rotate(var(--r)); }
  50% { transform: translateY(calc(var(--y) - 14px)) rotate(var(--r)); }
}

/* Games */
.games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
@media (min-width: 700px) { .games { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 20px; } }
.game { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--dark-2); display: block; box-shadow: 0 8px 24px rgba(23,22,28,.14); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.game:hover .tile img { transform: scale(1.05); }
.tile .badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--red); color: #fff; }
.tile .badge.live { background: var(--green); color: #05270f; }
/* A tile can carry two labels (Live and New). The wrapper takes the corner
   position and lays them out in a row; the labels inside it flow normally. */
.tile .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.tile .badges .badge { position: static; }
.tile .over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,16,20,.55); opacity: 0; transition: opacity .2s; }
.game:hover .tile .over, .tile:focus-visible .over { opacity: 1; }
.tile-soon { display: grid; place-items: center; text-align: center; padding: 16px; color: #fff; font-weight: 600; font-size: 12px; line-height: 1.4; background: linear-gradient(160deg, #23242e, #0f1014); box-shadow: none; }
.tile-soon img { width: 58%; height: auto; margin: 0 auto 12px; }
.game-meta { display: grid; gap: 2px; min-width: 0; }
.game-meta h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.game-specs { font-size: 12px; color: var(--navy); line-height: 1.4; }
.game-specs b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.game-specs i { font-style: italic; }
.game-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.game-links a { text-decoration: none; color: var(--red); }
.game-links a:hover { text-decoration: underline; }
.game-links a.alt { color: var(--navy); }
.games-foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--tint); border-radius: 12px; }
.games-foot p { font-size: 14px; color: var(--navy); }
.games-foot .cta-row .btn { flex: 0 1 auto; }

/* Bands */
.band { background: var(--tint); }
.two { display: grid; gap: 28px; }
.two > * { min-width: 0; }
@media (min-width: 900px) { .two { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } }
.card { background: var(--white); border-radius: 12px; box-shadow: 0 8px 28px rgba(23,22,28,.08); }
.rules { display: grid; }
.rule { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: start; }
.rule:last-child { border-bottom: 0; }
.rule b { font-size: 22px; font-weight: 800; color: var(--red); line-height: 1.2; }
.rule span { font-size: 14px; color: var(--navy); }
.rule span strong { color: var(--ink); font-weight: 700; }
.countdown { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 20px; background: var(--dark); color: #fff; border-radius: 0 0 12px 12px; }
.countdown b { font-size: 24px; font-weight: 800; color: var(--gold); }
.countdown small { color: rgba(255,255,255,.8); font-size: 13px; }
.steps { display: grid; gap: 10px; margin-top: 22px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 14px; }
.step i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; }
.step strong { display: block; font-weight: 700; }
.step span { color: var(--navy); }
.prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.prize { padding: 16px 18px; display: grid; gap: 2px; }
.prize b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.prize span { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--navy); }
.prize span strong { font-size: clamp(30px, 7.4vw, 38px); font-weight: 800; color: var(--ink); line-height: 1.05; }

/* Forms */
.form .err { display: none; padding: 12px 14px; border-radius: 8px; background: #fdeee9; border: 1px solid #f3bda9; font-size: 14px; }
.form.failed .err { display: block; }
.form button[disabled] { opacity: .6; cursor: wait; }
.form { padding: 24px; display: grid; gap: 14px; }
/* align-content: start is what keeps a .row aligned. Two labels side by side
   are grid items of .form .row and stretch to the same height as each other;
   inside a label, the default align-content then stretches ITS rows to fill
   that height. A label with three rows (caption, control, .hint) and one with
   two therefore gave their controls different heights — the Game <select> grew
   taller than the Multiplier <input> beside it. Packing each label's rows to
   the top instead gives every control its natural height, so the captions line
   up along the top and the controls line up under them, whether or not each
   side carries a hint. Fixes every row, not just the one that showed it. */
.form label { display: grid; gap: 6px; align-content: start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.form input, .form select { height: 52px; }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; width: 100%; min-height: 48px; text-transform: none; letter-spacing: 0; }
.form input:focus, .form select:focus, .form textarea:focus { background: var(--white); border-color: var(--ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form input::placeholder, .form textarea::placeholder { color: #7a7f99; }
.form textarea { min-height: 110px; resize: vertical; }
.form .hint { font-size: 12px; color: var(--navy); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form .lbl { display: block; }
/* The line pointing at the social pages. Sentence case and normal weight: it
   sits in a stack of shouty uppercase field captions and must not read as one
   more of them. */
.form .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--navy); }
.form .row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form .ok { display: none; padding: 12px 14px; border-radius: 8px; background: #e8f6ee; border: 1px solid #bfe3cf; font-size: 14px; }
.form.sent .ok { display: block; }
.form.sent .btn { display: none; }
/* Submissions closed: the fields are disabled in script, this makes it look
   shut so nobody starts typing into a form that cannot be sent. */
.form .note { display: none; padding: 12px 14px; border-radius: 8px; background: #fff5e0; border: 1px solid #f0d491; font-size: 14px; color: var(--ink); }
.form.closed .note { display: block; }
.form.closed label, .form.closed .hint { opacity: .55; }
.form.closed button[disabled] { opacity: .5; cursor: not-allowed; }

/* Leaderboard */
.board-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.board-pick label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.board-pick select { font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-height: 40px; max-width: 100%; }
.board-pick select:hover { border-color: var(--ink); }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: var(--dark); color: #fff; border-radius: 12px 12px 0 0; }
.board-head h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.board-head small { color: rgba(255,255,255,.75); font-size: 12px; }
.board-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-meta .tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; background: var(--gold); color: #2b1d00; }

/* The row area: at most ten rows tall, then it scrolls inside itself.
   .board-scroll is the only scroll container and it takes both axes. The
   horizontal scroll a narrow phone needs was already here; putting the
   vertical cap on the SAME element is what keeps a phone from ending up with
   two nested scrollbars arguing over a swipe.
   The height itself is not written here. A row is as tall as its contents —
   a long channel name wraps to two lines and every hardcoded "10 × 53px"
   would then slice the tenth row in half — so js/main.js measures ten real
   rows once they are in the document and sets --board-max. No script, no
   --board-max, no cap: the table then behaves exactly as it did before. */
.board-rows { position: relative; }
/* Scroll chaining is deliberately left alone (no overscroll-behavior): a
   finger or a wheel that runs out of list carries on down the page, which is
   what everyone expects. Containing it would mean a visitor who swipes over
   the board on a phone reaches the last row and then finds the page itself
   stuck under their thumb. */
.board-scroll { overflow: auto; max-height: var(--board-max, none); }
/* The global focus ring only covers links and form controls, and this box is
   focusable so the keyboard can scroll it. Inset so the ring is not clipped
   by the box's own overflow. */
.board-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* Two cues that the list continues, because on a Mac the scrollbar is hidden
   until you touch it and a board that is quietly cut off at row ten reads as
   a board with ten entrants.
   1. A permanently visible, slim scrollbar. Styling ::-webkit-scrollbar is
      what opts macOS out of the overlay scrollbar that fades away. */
.board-rows.is-capped .board-scroll { scrollbar-width: thin; scrollbar-color: #aeb5cb var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-track { background: var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-thumb { background: #aeb5cb; border-radius: 6px; border: 2px solid var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-thumb:hover { background: var(--navy); }
/* 2. A fade over the last rows. It lives on the wrapper rather than inside
      the scroll box, or it would scroll away with the rows it is describing,
      and it is switched off at the bottom of the list — a fade still sitting
      there when there is nothing below it is just a lie about the last row. */
.board-rows::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none; opacity: 0; transition: opacity .15s ease; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.94)); }
.board-rows.is-capped::after { opacity: 1; }
.board-rows.is-capped.is-end::after { opacity: 0; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); font-weight: 700; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--tint); }
/* The headings stay put while the rows scroll under them. The th already has
   an opaque background, so nothing shows through. The inset shadow repeats
   the bottom border: with border-collapse the collapsed border belongs to the
   row below and scrolls away with it, while a shadow is painted by the sticky
   cell itself and stays. Same colour and position as the border, so on a
   board short enough not to scroll the two land on top of each other and
   nothing looks different.
   Scoped to .board-scroll on purpose. table.lb is shared with the admin
   panel's board preview, which has its own wrapper and no height cap;
   sticking a header inside a box that never scrolls vertically is harmless,
   but scoping it means the admin preview is not touched at all, and picks
   this up only if it adopts .board-scroll. */
.board-scroll table.lb thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
table.lb td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb .rank { font-weight: 800; color: var(--navy); width: 44px; font-size: 16px; }
table.lb tr.top .rank { color: var(--red); }
table.lb .who { font-weight: 700; }
table.lb .who a { text-decoration: none; }
table.lb .who a:hover { text-decoration: underline; color: var(--red); }
table.lb .who small { display: block; font-weight: 500; color: var(--navy); font-size: 12px; }
/* Clip column. It replaced the old Game and Clips-count columns, and the
   rules that styled those (.gm, .hits) went with them: both users of table.lb,
   the public board and the admin board preview, now build the same three
   cells.
   width:1% with nowrap is the table-layout idiom for "give this column its
   content and not one pixel more", which hands the slack to the Streamer
   column, where the long names are. */
table.lb .gm { color: var(--navy); white-space: nowrap; }
@media (max-width: 699px) { table.lb .gm { display: none; } }
/* ...and the other way round: where the Game column IS shown, the copy of the
   game under the streamer's name goes, so a row never says it twice. */
@media (min-width: 700px) { table.lb .who .gm-inline { display: none; } }
table.lb .clip { width: 1%; white-space: nowrap; text-align: right; }
table.lb .clip a { font-weight: 700; color: var(--red); text-decoration: none; }
table.lb .clip a:hover { text-decoration: underline; }
/* An approved entry whose clip address did not survive validation. Muted
   plain text, never a link — see buildRow() in js/main.js. */
table.lb .clip-none { color: #9aa0b8; }
table.lb .right { text-align: right; }
/* Empty placeholder rows, so a tournament with two entrants still looks like
   a leaderboard rather than a box that failed to load. Muted and plainly
   blank: nothing here may be mistakeable for a streamer who has entered, and
   .top is never put on one, so an empty row in a paying place is never dressed
   up as a winner. js/main.js also hides these from assistive technology. */
table.lb tr.ghost td { color: #9aa0b8; }
table.lb tr.ghost .rank { color: #9aa0b8; font-weight: 700; }
table.lb tr.ghost .who { font-weight: 500; }
.board-foot { padding: 12px 20px; font-size: 12px; color: var(--navy); border-top: 1px solid var(--line); }
.board-empty { padding: 28px 18px; color: var(--navy); text-align: center; }

/* About */
.features { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .features { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.feature { padding: 26px 24px; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--red); }
.feature svg { width: 34px; height: 34px; color: var(--red); }
.feature h3 { text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.feature p { font-size: 14px; color: var(--navy); }

/* Contact */
.channels { display: grid; gap: 10px; margin-top: 22px; }
.channel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 10px; text-decoration: none; background: var(--white); box-shadow: 0 4px 16px rgba(23,22,28,.06); min-height: 54px; }
.channel:hover { box-shadow: 0 6px 20px rgba(23,22,28,.12); }
.channel b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.channel span { color: var(--red); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
/* An account that does not exist yet. A dashed outline and no shadow so it
   plainly is not one of the live tiles, and no hover lift, because there is
   nothing to click — it is a <div>, not an <a>. */
.channel.is-soon { background: transparent; box-shadow: none; border: 1px dashed var(--line); }
.channel.is-soon b { color: var(--navy); font-weight: 500; }
.channel.is-soon span { color: var(--navy); }
.ph { border-bottom: 1px dotted var(--red); cursor: help; }

/* Footer */
footer { background: var(--dark); color: rgba(255,255,255,.75); padding: 48px 0 120px; font-size: 13px; }
footer .wrap { display: grid; gap: 28px; }
.foot-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-brand { display: grid; gap: 14px; }
.foot-brand img { height: 36px; width: auto; }
.foot-brand p { max-width: 40ch; }
footer h4 { color: #fff; margin-bottom: 12px; }
.foot-list { display: grid; gap: 8px; }
.foot-list a { text-decoration: none; color: rgba(255,255,255,.75); }
.foot-list a:hover { color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a, .socials .soon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--dark-2); color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; }
.socials a:hover { background: var(--red); }
/* Not-yet-live badges. Dimmed and with no hover, so the footer does not offer
   a thing that cannot be pressed. */
.socials .soon { color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); cursor: default; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: grid; gap: 16px; }
.rg { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rg > span:last-child { flex: 1 1 260px; }
.age { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; font-weight: 800; font-size: 13px; color: #fff; flex: 0 0 auto; }
footer a { color: #fff; }