/* One typeface: Manrope, a free geometric sans close to the GTA VI site's lettering.
   Colours (Outlaw Mask identity): outlaw red #CC0000 for actions, links and highlights; ink #111111
   for the header, footer and dark panels. The Miami countdown sign keeps its own neon palette. */
/* Manrope is served from our own site (SIL Open Font License, see /fonts/OFL.txt). */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --bg: #f7f3ec; /* warm poster-paper page; cards stay white on top */
  --surface: #ffffff;
  --surface-2: #f1ebe1;
  --line: #e3e6ea;
  --text: #14171a;
  --muted: #5e6670;
  --primary: #CC0000;
  --primary-soft: #fdecec;
  --accent: #CC0000;
  --accent-soft: #fdecec;
  --radius: 12px;
  --max: 720px;
  --font: "Manrope", system-ui, sans-serif;
  --font-display: "Manrope", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 93.75%; overflow-x: clip; } /* 15px base on every screen */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 var(--font);
  padding-bottom: 0;
}

a { color: var(--primary); }

img, svg { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: #111111; /* night indigo, same as the footer. Solid, no backdrop-filter: it would trap the fixed tab bar inside the header */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 64px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--text); text-decoration: none; }
.top .brand { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.top .brand b { font-weight: 800; }
.top .brand .brand-words { color: #fff; }
.top .brand b span { color: #CC0000; }
.brand-mark { display: none; width: 62px; height: 25px; flex: none; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-words small { display: none; margin-top: 5px; font: 800 9.92px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.brand span { color: var(--accent); }

.backup { display: grid; gap: 10px; margin-top: 10px; max-width: 560px; }
.backup .btn { justify-self: start; }
.backup-paste { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.backup-paste textarea { font: .85rem/1.4 ui-monospace, monospace; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header countdown: a little neon Miami-sunset sign. The striped sun rises out of the
   sea as launch gets closer and sits fully up on launch day; digits roll in as they change. */
.sunset {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 4px 14px 4px 4px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(100deg, #170531 0%, #3a0a5a 55%, #7d1152 100%);
  box-shadow: 0 0 0 1px rgba(255, 92, 170, .55), 0 4px 18px rgba(219, 39, 119, .3);
}
.sunset svg { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.sunset .lbl {
  display: block; margin-bottom: 3px;
  font: 800 .62rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(90deg, #ffb347, #ff5caa); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sunset .clock {
  display: flex; align-items: baseline;
  font: 800 20.48px/1 var(--font-display); font-variant-numeric: tabular-nums;
  color: #8af7ff; text-shadow: 0 0 5px rgba(138, 247, 255, .85), 0 0 14px rgba(255, 92, 170, .7);
  animation: neon 7s infinite;
}
.sunset .clock i { font-style: normal; font-size: 10.56px; color: #ff9fd0; text-shadow: 0 0 6px rgba(255, 92, 170, .8); margin: 0 4px 0 1px; }
.sunset .clock i:last-child { margin-right: 0; }
.sunset .dg { display: inline-block; width: .62em; text-align: center; overflow: hidden; }
.sunset .dg.roll { animation: roll .4s cubic-bezier(.2, .8, .3, 1); }
.sunset .sun { transition: transform 1s ease; }
@keyframes roll { from { transform: translateY(-80%); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes neon { 0%, 91%, 95%, 100% { opacity: 1; } 92%, 94% { opacity: .55; } 93% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sunset .clock, .sunset .dg.roll { animation: none; } }
@media (max-width: 370px) {
  .brand { font-size: 1.2rem; }
  .sunset { padding-right: 10px; gap: 6px; }
  .sunset svg { width: 38px; height: 38px; }
  .sunset .clock { font-size: 16.8px; }
}

/* Info strip under the header */
.ticker { background: #111111; color: #fff; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255, 255, 255, .1); }
.ticker div {
  display: inline-flex; gap: 26px; padding: 9px 0;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  animation: ticker 28s linear infinite;
}
.ticker span::after { content: "•"; margin-left: 26px; color: var(--primary); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; padding-left: 16px; } }

/* Tab nav: lives in the header markup, pinned to the bottom on phones (thumb-friendly),
   shown inline in the header on desktop. */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 9px; color: var(--muted); text-decoration: none;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.tabs svg { width: 22px; height: 22px; }
.tabs a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }

/* Icons are inline SVG line drawings */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Content */
h1, h2, h3 { letter-spacing: -.025em; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 2.1rem; line-height: 1.08; font-weight: 800; margin: 16px 0 6px; }
h2 { font-size: 1.4rem; line-height: 1.18; font-weight: 800; margin: 18px 0 6px; }
h3 { font-size: 1.02rem; line-height: 1.3; font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--primary); } /* two-tone headings: plain lead-in, indigo key words */
.eyebrow {
  display: block; margin: 20px 0 -2px;
  font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--primary);
}
.eyebrow + h1, .eyebrow + h2 { margin-top: 4px; }
.lead { color: var(--muted); margin: 0 0 8px; }

.hero { padding: 0; }
.hero h1 { font-size: 2.4rem; }

.fine { color: var(--muted); font-size: .95rem; }

.cards { display: grid; gap: 8px; }
.card {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
a.card:hover, a.card:focus-visible { border-color: var(--primary); box-shadow: 0 4px 14px rgba(204, 0, 0, .1); }
.card > .i:first-child {
  color: var(--primary); background: #fdecec; flex: none;
  width: 44px; height: 44px; padding: 10px; border-radius: 12px;
  transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
a.card { transition: transform .25s ease, border-color .2s ease; }
a.card:hover { transform: translateY(-3px); }
a.card:hover > .i:first-child { background: var(--primary); color: #fff; transform: rotate(-6deg) scale(1.06); }
.card h3 { margin: 0 0 2px; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .go { margin-left: auto; color: var(--muted); align-self: center; flex: none; }

/* Vehicles: text on the left, picture on the right; fastest picks sit on top */
.vehicle { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; }
.vehicle > div { min-width: 0; }
.pic { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(180deg, #fdecec, #f7f8fa); object-fit: cover; }
.vehicle .pic { aspect-ratio: 16 / 9; } /* every photo frame is 16:9, the same shape as the photos, so nothing is cut off */
figure.pic { position: relative; margin: 0; overflow: hidden; background: #1a1a1a; }
figure.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fastest-grid { display: grid; gap: 10px; }
.fastest { display: block; }
.fastest .pic { margin-bottom: 10px; }
.vehicle .tag, .fastest .tag { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); background: var(--surface-2); padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
.vehicle dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: .95rem; }
.vehicle dt { color: var(--muted); font-weight: 600; }
.vehicle dd { margin: 0; }
@media (min-width: 560px) {
  .vehicle { grid-template-columns: minmax(0, 1fr) clamp(180px, 34%, 270px); gap: 20px; }
  .fastest-grid { grid-template-columns: 1fr 1fr; }
}

.btn {
  display: inline-block; border: 0; border-radius: 999px; padding: 12px 20px;
  background: var(--primary); color: #fff; cursor: pointer; text-decoration: none;
  font: 700 .95rem/1 var(--font);
}
.btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }

.note {
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2);
  border-left: 4px solid #c9ccd2; color: var(--text); font-size: .95rem; margin: 12px 0;
}
.note b { color: var(--text); }
.money-rules { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.money-rules li { padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; }
.money-rules b { display: block; }
@media (min-width: 900px) { .money-rules { grid-template-columns: 1fr 1fr; } }

/* Tracker */
.progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.stat { display: flex; justify-content: space-between; margin: 6px 0 10px; font-weight: 700; color: var(--muted); font-size: .95rem; }
.stat #pct { color: var(--text); }

details.cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
details.cat summary {
  list-style: none; cursor: pointer; padding: 11px 14px;
  display: flex; justify-content: space-between; align-items: center; font-weight: 700;
}
details.cat summary::-webkit-details-marker { display: none; }
details.cat summary span { color: var(--muted); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
details.cat[open] summary { border-bottom: 1px solid var(--line); }
.items { list-style: none; margin: 0; padding: 0 8px 4px; }
.items li + li label { border-top: 1px solid var(--line); }
.items label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 8px; cursor: pointer; }
.items input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; margin-top: 1px; }
.items small { display: block; color: var(--muted); }
.items input:checked + div { opacity: .45; text-decoration: line-through; }

.search, select.search {
  width: 100%; padding: 13px 16px; border-radius: 999px; font: inherit;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); margin-bottom: 12px;
}
select.search { border-radius: var(--radius); margin-top: 6px; }
.search:focus, .form input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Money table */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate { color: var(--text); font-weight: 800; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.form label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.form input {
  width: 100%; margin-top: 6px; padding: 12px; border-radius: var(--radius); font: 1.1rem var(--font);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}
.form .full { grid-column: 1 / -1; }

.empty { text-align: center; padding: 18px 16px; color: var(--muted); background: var(--surface-2); border-radius: var(--radius); }
.empty b { color: var(--text); font-size: 1.05rem; }

/* Article pages */
.article ol, .article ul { padding-left: 22px; }
.article li { margin: 3px 0; }
.article p { margin: 6px 0; }
.article li::marker { color: var(--muted); font-weight: 800; }

/* Footer: a full-width night-indigo band (links row, about + guides, badges, legal line) */
.site-foot { margin-top: 36px; background: #111111; color: #c8c8c8; font-size: .95rem; }
.foot-in { max-width: 1128px; margin: 0 auto; padding: 18px 16px 20px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-links a { color: #fff; text-decoration: none; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-grid { display: grid; gap: 18px; padding: 16px 0 4px; }
.foot-main { max-width: 440px; }
.site-foot .brand { color: #fff; font-size: 1.5rem; }
.site-foot .brand span { color: #CC0000; }
.foot-main p { margin: 6px 0 0; line-height: 1.45; }
.foot-main h2 { margin: 0; font-size: 1.05rem; color: #fff; letter-spacing: 0; }
.foot-main h2 ~ h2 { margin-top: 12px; }
.foot-main p a { display: inline-block; padding: 3px 0; color: #fff; text-underline-offset: 3px; }
.foot-main p a:hover { text-decoration-thickness: 2px; }
.foot-btn {
  display: inline-block; margin-top: 14px; padding: 10px 16px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; text-decoration: none; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.foot-btn::after { content: " \2192"; }
.foot-btn:hover { background: #CC0000; border-color: #CC0000; }
.foot-legal { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: #9a9a9a; }
.foot-legal p { margin: 2px 0; }
.foot-legal b { color: #fff; }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
}

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius); }
.steps span { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2ch; }
.steps h3 { margin: 0 0 2px; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Latest updates */
.updates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.updates li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.updates .tag { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 2px; }
.updates a { color: var(--text); text-decoration: none; font-weight: 600; }
.updates a:hover { color: var(--primary); }

/* Back to top, sits above the bottom tab bar */
.to-top {
  position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 9;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--primary); box-shadow: 0 4px 14px rgba(20, 23, 26, .12);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* Desktop: tabs move up into the header, the header gets wider than the content */
@media (min-width: 860px) {
  body { padding-bottom: 0; }
  /* Balanced header: logo | menu exactly in the middle | countdown, with the outer edges
     lined up with the full-width home banner below. */
  .top .wrap { max-width: none; height: 72px; padding: 0 clamp(12px, 2vw, 22px);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .top .brand { justify-self: start; font-size: 1.45rem; padding: 7px 20px 7px 14px; gap: 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
  .brand-mark, .brand-words small { display: block; }
  .top .sunset { justify-self: end; }
  .sunset { padding: 5px 18px 5px 5px; }
  .sunset svg { width: 52px; height: 52px; }
  .sunset .lbl { font-size: 11.22px; margin-bottom: 4px; }
  .sunset .clock { font-size: 26.18px; }
  .sunset .clock i { font-size: 12.58px; }
  .top .sunset { order: 3; }
  .top .brand { order: 1; }
  .tabs {
    position: static; display: flex; margin: 0; gap: 2px; order: 2;
    background: none; border: 0; padding: 0;
  }
  .tabs a { flex-direction: row; gap: 7px; height: 72px; padding: 0 12px; font-size: .8rem; color: rgba(255, 255, 255, .72); }
  .tabs svg { width: 18px; height: 18px; }
  .tabs a:hover { color: #fff; }
  .tabs a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; }
  .to-top { bottom: 24px; }
}

/* Scroll reveal, gallery style: pictures open out of a rounded window and zoom back to
   size as they scroll in; cards and headings rise in. Tied to scroll position where the
   browser supports scroll timelines; app.js adds a fade-in fallback elsewhere. */
@keyframes rise { from { transform: translateY(42px) scale(.96); } to { transform: none; } } /* no fade: half-faded text fails contrast checks */
@keyframes unveil { from { transform: scale(1.18); } to { transform: none; } } /* transform only: no repaint while scrolling */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main .card, main h2 { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    main .card .pic img { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
  .reveal-js main .card, .reveal-js main h2 { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1); }
  .reveal-js main .card.in, .reveal-js main h2.in { opacity: 1; transform: none; }
}

/* Wide screens: the Vehicles page gets a photo column on the left; every other page
   widens to the header's width so there's no empty space at the sides. */
.rail { display: none; }
@media (max-width: 859px) { .site-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* room for the bottom nav */ }
@media (min-width: 1024px) {
  .page.with-rail { display: grid; grid-template-columns: clamp(230px, 25vw, 360px) minmax(0, 720px); gap: clamp(20px, 3vw, 48px); justify-content: center; padding-left: 16px; }
  .page.with-rail > main.wrap { margin: 0; width: 100%; }
  .page:not(.with-rail) > main.wrap { max-width: 1120px; }
  .page:not(.with-rail) .cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .rail { display: grid; gap: 12px; position: sticky; top: 96px; align-self: start; padding-top: 28px; }
  .rail-tile { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111111; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
  .rail-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
  .rail-tile img.on { opacity: 1; animation: drift 7s ease-out both; }
  .rail-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75)); pointer-events: none; }
  .rail-name { position: absolute; left: 14px; bottom: 11px; z-index: 1; color: #fff; font-weight: 800; font-size: 1rem; }
}
@media (min-width: 1024px) and (max-height: 820px) { .rail-tile:nth-child(3) { display: none; } }
@keyframes drift { from { transform: scale(1.1); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rail-tile img.on { animation: none; } }

/* Home banner: one big photo slide at a time, text over a dark fade at the bottom */
/* Spans the screen with a small margin each side; about 2.2:1 on wide screens
   (≈980×450 at 1024px wide, ≈1850×820 at 1900px). */
.banner-wrap { padding: 14px clamp(12px, 2vw, 22px) 0; }
.banner { position: relative; border-radius: 18px; overflow: hidden; background: #111111; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; }
.slides { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.banner-bg { position: absolute; inset: 0; }
.banner-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.banner-bg img.on { opacity: 1; animation: settle 6s ease-out both; }
@keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } } /* small zoom keeps the photo sharp */
.banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9)); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.slide-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 20px 44px; color: #fff; }
.slide-text span { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.slide-text strong { display: block; margin: 6px 0; font-size: 1.8rem; line-height: 1.1; font-weight: 800; }
.slide-text p { margin: 0 0 14px; color: #ececec; max-width: 30em; }
.slide-cta { display: inline-block; padding: 11px 18px; border-radius: 999px; background: #fff; color: #111111; font-weight: 800; text-decoration: none; font-size: .95rem; }
.slide-cta::after { content: " \2192"; }
.slide-cta:hover { background: #f1ecec; }
.slide-arrow { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #111111; cursor: pointer; display: none; }
.slide-arrow .i { width: 22px; height: 22px; }
.slide-arrow.prev { left: 12px; }
.slide-arrow.next { right: 12px; }
.slide-dots { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: flex; gap: 6px; }
.slide-dots button { width: 22px; height: 5px; border: 0; padding: 0; border-radius: 3px; background: rgba(255, 255, 255, .4); cursor: pointer; }
.slide-dots button[aria-current="true"] { width: 38px; background: #fff; }
@media (min-width: 640px) {
  .banner { aspect-ratio: 16 / 9; max-height: none; }
  .slide-text { padding: 32px 36px 46px 76px; max-width: 700px; }
  .slide-text strong { font-size: 2.4rem; }
  .slide-dots { left: 76px; }
  .slide-arrow { display: grid; place-items: center; }
}
@media (min-width: 1000px) {
  .banner { aspect-ratio: 2.2 / 1; }
  .slide-text strong { font-size: 3.4rem; }
  .slide-text { max-width: 820px; padding-left: 104px; padding-bottom: 64px; }
  .slide-text p { font-size: 1.2rem; }
  .slide-cta { padding: 14px 24px; font-size: 1.05rem; }
  .slide-arrow { width: 56px; height: 56px; margin-top: -28px; }
  .slide-arrow.prev { left: 22px; }
  .slide-arrow.next { right: 22px; }
  .slide-dots { left: 104px; bottom: 28px; }
}

/* Live numbers */
/* Home intro: text and quick-jump buttons on the left, the numbers panel on the right. */
.intro { display: grid; gap: 20px; margin-top: 18px; }
.intro .hero h1 { margin-top: 6px; }
.intro .jump { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; }
.intro .jump a { justify-content: center; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; margin-top: 26px; }
  .intro .jump { display: grid; grid-template-columns: repeat(4, 1fr); }
  .intro .jump a { justify-content: center; }
}

/* Live numbers: one panel, four equal cells split by thin rules. A toned-down take on the
   header's Miami sign: night-purple panel, sunset line on top, a soft glow rising from the bottom. */
.stats {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; position: relative;
  background: radial-gradient(120% 70% at 50% 120%, rgba(255, 92, 170, .28), transparent 70%), linear-gradient(160deg, #1d0b3a 0%, #2a0c4a 60%, #3d0f4f 100%);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(29, 11, 58, .22);
}
.stats::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #ffb347, #ff5caa 55%, #8af7ff); }
.stats li { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; }
.stats li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .1); }
.stats li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.stats b { display: block; font-size: 2.6rem; line-height: 1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 18px rgba(255, 92, 170, .35); }
.stats span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffb3d6; }

/* Quick-jump buttons */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.jump a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none; font-weight: 700; font-size: .9rem;
}
.jump .i { width: 18px; height: 18px; color: var(--muted); }
.jump a:hover { border-color: var(--primary); color: var(--primary); }
/* Home shortcuts: solid black pills with red icons so they read as the main way in */
.intro .jump a { padding: 11px 12px; background: #111111; border-color: #111111; color: #fff; font-size: .95rem; box-shadow: 0 6px 16px rgba(17, 17, 17, .14); transition: background .15s, transform .15s; }
.intro .jump .i { color: #ff4d4d; }
.intro .jump a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.intro .jump a:hover .i { color: #fff; }

/* Section heading with a "View all" link on the right */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.section-head h2 { margin-bottom: 6px; }
.view-all { margin-bottom: 8px; color: var(--primary); font-weight: 800; text-decoration: none; white-space: nowrap; }
.view-all::after { content: " \2192"; }
/* Small helper label beside a section heading, e.g. "Open any tool" */
.hint { margin-bottom: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hint::after { content: "\2192"; }

/* News */
.news { display: grid; gap: 10px; margin-top: 12px; }
.post { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.post .tag { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post h2 { margin: 4px 0 4px; font-size: 1.35rem; }
.post h2 a { color: var(--text); text-decoration: none; }
.post h2 a:hover { color: var(--primary); }
.post p { margin: 5px 0 0; }
.post .more { font-weight: 800; color: var(--primary); text-decoration: none; }
.post .more::after { content: " \2192"; }
.post .sources { font-size: .88rem; color: var(--muted); }
.post .sources a { color: var(--muted); }

/* FAQ */
.faqs { display: grid; gap: 6px; margin-top: 12px; }
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--muted); }
.faq[open] summary::after { content: "\2212"; }
.faq summary h2 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.faq p { margin: 0; padding: 0 16px 12px; color: var(--muted); }
.faq[open] { border-color: #c9ccd2; }

/* Vehicle photo view */
.pic-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
.card[data-id] { cursor: zoom-in; }
.card[data-id] a { cursor: pointer; }
.fastest .pic-btn { margin-bottom: 12px; }
.fastest .pic-btn .pic { margin-bottom: 0; }
.viewer { width: min(1200px, calc(100vw - 24px), calc((100vh - 24px) * 16 / 9)); padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #111111; }
.viewer::backdrop { background: rgba(0, 0, 0, .85); }
.viewer .pic { aspect-ratio: 16 / 9; border-radius: 0; cursor: zoom-out; }
.viewer-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--text); cursor: pointer; }
.banner-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: rgba(255, 255, 255, .18); }
.banner-progress i { display: block; height: 100%; width: 0; background: #fff; animation: fill var(--shot-ms, 3500ms) linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .banner-progress { display: none; } }

/* Banners between home sections: photo on one side cut at an angle, night-indigo
   panel on the other; every other one flips sides. */
.promo { display: grid; margin: 20px 0 4px; border-radius: 16px; overflow: hidden; background: #111111; color: #fff; text-decoration: none; }
.promo-pic { position: relative; display: block; aspect-ratio: 21 / 9; overflow: hidden; }
.promo-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.promo:hover .promo-pic img { transform: scale(1.06); }
/* A promo photo that keeps changing, like the home banner: two stacked photos cross-fade */
.promo-pic[data-rotate] img { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease, transform .8s ease; }
.promo-pic[data-rotate] img.on { opacity: 1; }
.promo-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px 18px; }
.promo-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.promo strong { font-size: 1.5rem; line-height: 1.15; }
.promo-copy { color: #cfcfcf; }
.promo-cta { align-self: flex-start; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #111111; font-weight: 800; font-size: .92rem; }
.promo-cta::after { content: " \2192"; }
.promo:hover .promo-cta { background: #f1ecec; }
@media (min-width: 640px) {
  .promo { grid-template-columns: 1.15fr 1fr; min-height: 190px; }
  .promo-pic img { position: absolute; inset: 0; } /* the text sets the height, the photo just fills it */
  .promo-pic { aspect-ratio: auto; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
  .promo.flip { grid-template-columns: 1fr 1.15fr; }
  .promo.flip .promo-pic { order: 2; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
  .promo-text { padding: 20px 26px; }
}

/* Add to home screen */
[data-install][hidden] { display: none !important; }
.install-card {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center;
  margin: 22px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.install-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.install-card h2 { margin: 0; font-size: 1.2rem; }
.install-card p { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.install-card .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) {
  .install-card { grid-template-columns: auto 1fr auto; }
  .install-card .btn { grid-column: auto; }
}
.install-foot { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-family: inherit; cursor: pointer; }
.install-foot .i { width: 18px; height: 18px; }
.install-help { width: min(420px, calc(100vw - 32px)); padding: 20px 22px; border: 0; border-radius: 16px; }
.install-help::backdrop { background: rgba(0, 0, 0, .7); }
.install-help h2 { margin: 0 0 8px; font-size: 1.15rem; }
.install-help ol { margin: 0; padding-left: 20px; }
.install-help li { margin: 4px 0; }
.install-help p { color: var(--muted); margin: 8px 0 14px; }
.install-foot::after { content: none; }

/* Change effect: in the last moment before each new photo a pink sheen sweeps across the
   banner and its border glows. Runs on the same clock as the progress bar (see home.js). */
.banner-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden; }
.banner-fx .sheen {
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent 15%, rgba(204, 0, 0, .24) 40%, rgba(255, 255, 255, .38) 50%, rgba(204, 0, 0, .24) 60%, transparent 85%);
  transform: translateX(-160%) skewX(-12deg);
  animation: sheen var(--shot-ms, 3500ms) ease-in-out forwards;
}
.banner-fx .glow {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(204, 0, 0, .6); box-shadow: inset 0 0 28px rgba(204, 0, 0, .35);
  opacity: .25; animation: glow var(--shot-ms, 3500ms) ease-in-out forwards;
}
@keyframes sheen { 0%, 76% { transform: translateX(-160%) skewX(-12deg); } 100% { transform: translateX(330%) skewX(-12deg); } }
@keyframes glow { 0%, 70% { opacity: .25; } 92% { opacity: 1; } 100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .banner-fx { display: none; } }

/* Photo cards light up on hover. Only opacity and transform animate (both run on the
   graphics card), so hovering stays smooth: the glow and the brighter photo are layers
   that are always there and just fade in. */
.card.vehicle, .card.fastest { position: relative; }
.card.vehicle::after, .card.fastest::after, .rail-tile::before, .promo::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--primary); box-shadow: 0 10px 28px rgba(204, 0, 0, .25);
  opacity: 0; transition: opacity .2s ease;
}
.rail-tile::before, .promo::after { inset: 0; box-shadow: inset 0 0 0 1px var(--primary), inset 0 0 26px rgba(204, 0, 0, .35); }
.promo { position: relative; }
.card.vehicle:hover::after, .card.fastest:hover::after, .rail-tile:hover::before, .promo:hover::after { opacity: 1; }
figure.pic::after {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .08);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.card:hover figure.pic::after { opacity: 1; }
.promo-pic img { will-change: transform; }

/* Small "View" button on each vehicle photo: opens the big photo view. */
.pic-btn { position: relative; }
.view-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--text); font-size: .74rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); transition: transform .2s ease;
}
.view-btn .i { width: 14px; height: 14px; stroke-width: 2.2; }
.card:hover .view-btn, .pic-btn:focus-visible .view-btn { transform: scale(1.06); }
@media (max-width: 559px) {
  .vehicle dl { grid-template-columns: 1fr; gap: 0; }
  .vehicle dd + dt { margin-top: 6px; }
}
/* Narrower laptops: drop the menu icons so the menu still fits centred between logo and countdown */
@media (min-width: 860px) and (max-width: 1439px) {
  .tabs > a svg, .more-btn > svg:first-child { display: none; }
  .tabs > a, .more-btn { padding: 0 9px; }
  .top .wrap { gap: 14px; }
}

/* List-style tools (cheats, missables, radio, properties, weapons, skills, secrets, outfits) */
.g-filters { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.g-filters .search { margin: 0; }
.g-filters[hidden] { display: none; }
@media (min-width: 640px) { .g-filters { grid-template-columns: 1fr 240px; } }
.g-block { margin-top: 14px; }
.g-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 1.25rem; }
.g-head span { font-size: .85rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.g-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.g-item > .g-body, .g-item > label { padding: 10px 14px; }
.g-item > label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.g-item input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; margin-top: 1px; }
.g-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-name { font-weight: 700; }
/* Cards with an official photo: photo on the right, text on the left (stacked on small phones) */
.g-item.has-pic:not(:has(label)) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 34%, 260px); gap: 12px; align-items: start; padding: 10px 14px; }
.g-item.has-pic:not(:has(label)) > .g-body { padding: 0; }
.g-item.has-pic > label { display: grid; grid-template-columns: auto minmax(0, 1fr) clamp(120px, 34%, 260px); gap: 12px; }
.g-pic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #e9e2d5; }
.g-logo { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; margin-right: 10px; background: #111111; }
.g-head .g-title { flex: 1; font-size: inherit; font-weight: inherit; color: inherit; }
.g-head { align-items: center; }
@media (max-width: 479px) {
  .g-item.has-pic:not(:has(label)) { grid-template-columns: 1fr; }
  .g-item.has-pic > label { grid-template-columns: auto minmax(0, 1fr); }
  .g-item.has-pic > label .g-pic { grid-column: 2; }
}
.g-detail { color: var(--muted); font-size: .95rem; }
.g-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: .92rem; }
.g-meta dt { color: var(--muted); font-weight: 600; }
.g-meta dd { margin: 0; }
.g-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.g-copy code { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font: 700 .9rem/1.3 ui-monospace, Consolas, monospace; }
.btn.small { padding: 7px 14px; font-size: .85rem; }
.g-source { align-self: flex-start; margin-top: 6px; font-size: .88rem; }
.g-item:has(input:checked) .g-name { text-decoration: line-through; color: var(--muted); }

/* "More" menu: every tool, News and FAQ. A dropdown under the header on desktop; on phones
   the fifth bottom tab, opening a panel above the tab bar. */
.more-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 700 .72rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em;
}
.more-btn svg { width: 22px; height: 22px; }
.more-btn[aria-expanded="true"], .more-btn[aria-current="page"] { color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.tab-planner { display: none !important; }
.more-menu {
  position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 8px; z-index: 20;
  display: flex; flex-direction: column; gap: 1px; padding: 6px; max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.more-menu[hidden] { display: none; }
.tabs .more-menu a {
  flex-direction: row; justify-content: flex-start; gap: 10px; height: auto; padding: 11px 12px; border-radius: 10px;
  color: var(--text); font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.tabs .more-menu a:hover, .tabs .more-menu a[aria-current="page"] { background: var(--surface-2); color: var(--primary); box-shadow: none; }
.tabs .more-menu .i { display: block; width: 20px; height: 20px; flex: none; color: var(--primary); }
@media (min-width: 860px) {
  .tabs { position: relative; }
  .tab-planner { display: flex !important; }
  .more-menu .phone-only { display: none; }
  .more-btn { flex-direction: row; gap: 7px; height: 72px; padding: 0 12px; font-size: .8rem; color: rgba(255, 255, 255, .72); }
  .more-btn svg { width: 18px; height: 18px; }
  .more-btn:hover { color: #fff; }
  .more-btn[aria-expanded="true"], .more-btn[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; }
  .more-menu { left: auto; right: 0; bottom: auto; top: 100%; width: 250px; margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; max-height: none; }
}
.g-copy code { user-select: all; -webkit-user-select: all; }

/* Stash arrow: points down, flips up while open. Phones show just the icon and word. */
.more-btn .chev { display: none; transition: transform .2s ease; }
.more-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.more-menu { animation: drop .16s ease-out; }
@keyframes drop { from { transform: translateY(-6px); } to { transform: none; } } /* slide only: the menu can never get stuck invisible */
@media (min-width: 860px) {
  .more-btn .chev { display: block; width: 14px; height: 14px; margin-left: -3px; }
  .more-btn > svg:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .more-menu { animation: none; } }

/* Lenis smooth scrolling (recommended base styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Two header dropdowns (Loadout, Intel). Phones: each is a bottom tab and its list opens
   above the tab bar. Desktop: each list hangs right under its own button. */
.drop { display: flex; }
.drop > .more-btn { flex: 1; }
.tab-vehicles { display: none !important; }
@media (min-width: 860px) {
  .drop { position: relative; }
  .tab-vehicles { display: flex !important; }
  .drop .more-menu { left: 0; right: auto; }
  .drop:last-of-type .more-menu { left: auto; right: 0; }
}

/* Small laptops: compact logo and countdown so all seven menu items fit, still centred */
@media (min-width: 860px) and (max-width: 1199px) {
  .top .brand { padding: 0; background: none; box-shadow: none; font-size: 1.3rem; }
  .brand-mark, .brand-words small { display: none !important; }
  .sunset svg, .sunset .lbl { display: none; }
  .sunset { padding: 6px 14px; }
  .sunset .clock { font-size: 19.55px; }
  .tabs > a, .more-btn { padding: 0 7px; font-size: .74rem; }
}
@media (min-width: 860px) and (max-width: 979px) {
  .tabs > a, .more-btn { padding: 0 5px; font-size: .7rem; letter-spacing: .04em; }
  .more-btn .chev { width: 12px; height: 12px; }
  .top .wrap { gap: 10px; }
}

/* Full-width bands inside the content column */
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Moving filmstrip of official screenshots (home). Two rows glide in opposite directions
   and never stop on their own; pressing a photo pauses them and opens it full size. Only transform animates, so it stays smooth. */
.strip { margin-top: 30px; overflow: hidden; display: grid; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.strip-row { display: flex; gap: 12px; width: max-content; animation: glide 80s linear infinite; }
.strip-row.rev { animation-direction: reverse; animation-duration: 95s; }
.strip button { display: block; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; overflow: hidden; }
.strip img { display: block; width: 220px; height: 124px; object-fit: cover; border-radius: 12px; background: #e9e2d5; transition: transform .3s, filter .3s; }
.strip button:hover img, .strip button:focus-visible img { transform: scale(1.05); filter: brightness(1.08); }
.strip button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.strip.paused .strip-row { animation-play-state: paused; }
#shot-viewer img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #111111; cursor: zoom-out; }
@keyframes glide { to { transform: translateX(-50%); } }
@media (max-width: 639px) { .strip-row.rev { display: none; } .strip img { width: 176px; height: 99px; } }
@media (min-width: 1200px) { .strip img { width: 280px; height: 158px; } }

/* Scrolling slogan band: solid red and outlined white words, mask between them */
.slogans { margin-top: 24px; padding: 10px 0; overflow: hidden; background: #111111; }
.slogan-track { display: flex; align-items: center; gap: 18px; width: max-content; animation: glide 60s linear infinite; }
.slogan-track span { font: 800 1.3rem/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.slogan-track .solid { color: var(--primary); }
.slogan-track .outline { color: transparent; -webkit-text-stroke: 1px #fff; }
.sl-mask { width: 32px; height: 13px; flex: none; color: #fff; }
@media (min-width: 900px) { .slogan-track span { font-size: 1.6rem; } .slogan-track { gap: 24px; } .sl-mask { width: 40px; height: 16px; } .slogans { padding: 13px 0; } }

/* Black band: launch week as a dated timeline. The stage we're in is marked by home.js. */
.dark-band { margin-top: 30px; padding: 26px 0 30px; background: #111111; color: #fff; }
.band-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.dark-band h2 { margin-top: 0; color: #fff; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid rgba(255, 255, 255, .16); margin-left: 6px; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #111111; border: 2px solid rgba(255, 255, 255, .45); }
.timeline time { display: block; font: 800 .8rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.timeline h3 { margin: 6px 0 2px; color: #fff; }
.timeline p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .95rem; }
.timeline a { display: inline-block; margin-top: 6px; color: #fff; font-weight: 700; font-size: .92rem; text-underline-offset: 3px; }
.timeline .is-now::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px rgba(204, 0, 0, .25); }
.timeline .is-now time { color: #ff4d4d; }
.timeline .is-now time::after { content: " · we are here"; color: rgba(255, 255, 255, .55); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
  .timeline li { margin: 0; padding: 26px 0 0; border-left: 0; border-top: 2px solid rgba(255, 255, 255, .16); }
  .timeline li:last-child { border-top-color: rgba(255, 255, 255, .16); }
  .timeline li::before { left: 0; top: -8px; }
}

@media (prefers-reduced-motion: reduce) { .strip-row, .slogan-track { animation: none; } }

/* Home tools grid: compact, four across on wide screens, one-line descriptions */
#tools-grid { gap: 8px; }
#tools-grid .card { padding: 10px 12px; gap: 10px; align-items: center; }
#tools-grid .card > .i:first-child { width: 38px; height: 38px; padding: 8px; border-radius: 10px; }
#tools-grid h3 { font-size: 1rem; margin: 0 0 1px; }
#tools-grid p { font-size: .88rem; line-height: 1.3; }
#tools-grid .go { display: none; } /* the whole card is the link */
@media (min-width: 1000px) { .page:not(.with-rail) #tools-grid { grid-template-columns: repeat(4, 1fr); } }
/* Phones: tools become small 2-up tiles (icon + name only) so the section is a short scroll */
@media (max-width: 639px) {
  #tools-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  #tools-grid .card { padding: 9px 10px; gap: 8px; }
  #tools-grid .card > .i:first-child { width: 32px; height: 32px; padding: 6px; border-radius: 9px; }
  #tools-grid h3 { font-size: .9rem; line-height: 1.2; margin: 0; }
  #tools-grid p, #tools-grid .go { display: none; }
}