/* OttoSpot marketing site.
 *
 * One visual world, on purpose: dark only. The app is dark-only
 * (userInterfaceStyle: "dark"), the brand is crimson on near-black, and a
 * marketing site that flips to white for some visitors would stop looking like
 * the product it is selling. Every colour is painted explicitly.
 *
 * The motif is the camera viewfinder: corner brackets, a crosshair, and the red
 * scanner sweep the app shows while it identifies a car.
 *
 * House style: no em dashes anywhere. scripts/build-site.js fails the build if
 * one appears in any generated page. */

:root {
  --ink: #0b0b0c;
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-2: #232323;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f1f1f1;
  --text-2: rgba(241, 241, 241, 0.74);
  --text-3: rgba(241, 241, 241, 0.5);
  --crimson: #e63946;
  --crimson-deep: #b82633;
  --crimson-soft: rgba(230, 57, 70, 0.14);
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.14);

  --t-common: #9ca3af;
  --t-uncommon: #22c55e;
  --t-rare: #3b82f6;
  --t-epic: #a855f7;
  --t-legendary: #d4af37;
  --t-exotic: #e63946;

  --display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--text); }
::selection { background: var(--crimson); color: #fff; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text-2); max-width: 46ch; }
.accent { color: var(--crimson); }
.gold { color: var(--gold); }

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--line); background: rgba(11, 11, 12, 0.88); }
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
.site-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.site-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.head-cta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.head-cta:hover { border-color: var(--crimson); background: var(--crimson-soft); }
.head-cta .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
  .head-cta { margin-left: auto; }
}

/* ------------------------------------------------------------- store row */

.store-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.store-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.15rem 0.7rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-decoration: none;
  line-height: 1.15;
  min-height: 56px;
}
.store-pill svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-pill small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
  font-family: var(--mono);
}
.store-pill b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; }
.store-pill.is-soon { border-color: rgba(230, 57, 70, 0.55); background: var(--crimson-soft); }
.store-pill.is-soon svg { color: var(--crimson); }
.store-pill.is-later { opacity: 0.62; }
.store-badge img { height: 56px; width: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-deep); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-2); }

/* ------------------------------------------------------------------- hero */

.hero-cine {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* The hero film (7 Oct 2026). All of its action and text sits in x 42-94%,
   y 14-74% of the frame, and the left 40% is atmosphere under the headline,
   composed for the ::before gradient below - so the crop is anchored right
   of centre and high. 33%, not the suggested 40%: on a 21:9 screen (hero
   900px tall, frame 1440px) 40% shows y 15-77% and clips the titles that
   sit at y 13-15% ("CONCEPT GT-02" at 14s, "Plates stay private." at 18s);
   33% shows y 12-75%. */
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 33%;
  background: var(--ink);
}
/* Very wide windows (21:9 and up). The content column is centred, so the
   wider the window the further right the headline sits, until it runs into
   the film's own titles and spec text (which start at x 42-45% of the
   frame). Starting the film further right keeps them apart, and fading its
   left edge hides the seam. Checked at 2560x1080; 1920x1080 and narrower are
   unaffected. */
@media (min-width: 761px) and (min-aspect-ratio: 2/1) {
  .hero-media { left: 12vw; }
  .hero-video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18%);
  }
}
@media (min-width: 761px) and (min-aspect-ratio: 3/1) {
  .hero-media { left: 25vw; }
}
.hero-cine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0) 32%),
    linear-gradient(90deg, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.55) 40%, rgba(11, 11, 12, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(18, 18, 18, 0) 34%);
}
.hero-inner { position: relative; width: 100%; padding-block: clamp(6rem, 18vh, 12rem) clamp(3rem, 9vh, 6rem); }
.hero-inner h1 { max-width: 13ch; }
.hero-inner h1 .line { display: block; }
.hero-inner .lede { margin-top: 1.4rem; }
.hero-inner .store-row { margin-top: 2rem; }
.hero-follow { margin-top: 1.4rem; font-size: 0.9rem; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.hero-follow a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.hero-follow a:hover { color: var(--text); border-color: var(--crimson); }

/* the viewfinder: four corner brackets and a centre crosshair over the frame */
.viewfinder { position: absolute; inset: clamp(14px, 3vw, 34px); pointer-events: none; z-index: 1; }
.viewfinder i {
  position: absolute;
  width: clamp(22px, 3.2vw, 44px);
  height: clamp(22px, 3.2vw, 44px);
  border-color: rgba(241, 241, 241, 0.55);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  animation: bracket 0.9s var(--ease) 0.25s forwards;
}
.viewfinder i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
@keyframes bracket { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
/* The scan line and the "Identifying" label that sat over the hero are gone:
   the hero film shows the identification itself, and the two doubled up. */

@media (max-width: 760px) {
  .hero-cine { min-height: auto; flex-direction: column; align-items: stretch; }
  /* Exactly 16:9, so the whole film frame shows on a phone - its text and the
     closing logo reach the frame edges, and any crop would cut them. */
  .hero-media { position: relative; inset: auto; order: 2; height: 56.25vw; min-height: 0; margin-top: -3rem; }
  .hero-video { object-position: 50% 50%; }
  .hero-cine::before {
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 52%, rgba(11, 11, 12, 0) 72%, var(--bg) 100%);
  }
  /* Bottom padding so the follow links clear the photo, which is pulled up
     under the text by a negative margin. */
  .hero-inner { order: 1; padding-block: 3.4rem 3.6rem; }
  .viewfinder { inset: 12px; }
}

/* ------------------------------------------------------------------ marquee */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  padding-block: 1.05rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee span {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
}
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- sections */

.section { padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head .lede { margin-top: 1.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }

/* --------------------------------------------- the identification readout */

.compare { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: stretch; }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.3rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}
.panel-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.panel.theirs .verdict-line {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--text-3);
}
.panel.theirs p { color: var(--text-3); margin-top: 1rem; font-size: 0.95rem; }
.panel.theirs .readout { margin-top: 1.4rem; }
.panel.theirs .readout dd { color: var(--text-3); font-weight: 400; font-size: 0.9rem; text-decoration: line-through; text-decoration-color: rgba(230, 57, 70, 0.6); }
.panel.ours { border-color: rgba(230, 57, 70, 0.4); background: linear-gradient(160deg, rgba(230, 57, 70, 0.09), var(--surface) 46%); }
.panel.ours .panel-label { color: var(--crimson); }
.readout { margin: 0; display: grid; gap: 0; }
.readout div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.readout div:last-child { border-bottom: none; }
.readout dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.readout dd { margin: 0; font-weight: 600; font-size: 1.02rem; }
.readout .conf { display: inline-flex; align-items: center; gap: 0.6rem; }
.conf-bar { width: 92px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.conf-bar b { display: block; height: 100%; width: 0; background: var(--t-uncommon); border-radius: 3px; transition: width 1.4s var(--ease) 0.2s; }
.ready .conf-bar b { width: 88%; }
.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.92rem;
}
.tier-chip img { width: 22px; height: 22px; }
/* typing: each row appears in turn once the panel scrolls into view */
.js .readout div { opacity: 0; transform: translateX(-8px); }
.js .ready .readout div { animation: row-in 0.45s var(--ease) forwards; }
.js .ready .readout div:nth-child(1) { animation-delay: 0.05s; }
.js .ready .readout div:nth-child(2) { animation-delay: 0.22s; }
.js .ready .readout div:nth-child(3) { animation-delay: 0.39s; }
.js .ready .readout div:nth-child(4) { animation-delay: 0.56s; }
.js .ready .readout div:nth-child(5) { animation-delay: 0.73s; }
.js .ready .readout div:nth-child(6) { animation-delay: 0.9s; }
.js .ready .readout div:nth-child(7) { animation-delay: 1.07s; }
@keyframes row-in { to { opacity: 1; transform: none; } }
.panel.ours .sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  top: -40%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(230, 57, 70, 0.08) 80%, rgba(230, 57, 70, 0.32) 99%, transparent);
}
.ready .panel.ours .sweep, .panel.ours.ready .sweep { animation: panel-sweep 1.6s var(--ease) 0.1s 1; }
@keyframes panel-sweep { to { top: 100%; } }
.compare-foot { margin-top: 1.4rem; color: var(--text-3); font-size: 0.88rem; max-width: 70ch; }
@media (max-width: 820px) {
  .compare { grid-template-columns: 1fr; }
  .readout div { grid-template-columns: 7.2rem 1fr; }
}

/* ------------------------------------------------------------ how it works */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.step { display: flex; flex-direction: column; gap: 1.2rem; }
.step-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--crimson);
  letter-spacing: 0.14em;
}
.step h3 { margin-top: 0.35rem; }
.step p { color: var(--text-2); font-size: 0.98rem; margin-top: 0.55rem; }
.poster {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
  aspect-ratio: 1290 / 2796;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease), border-color 0.3s;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.step:hover .poster { transform: translateY(-6px); border-color: var(--line-strong); }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 3rem; }
  .step { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.2rem; align-items: center; }
  .step .poster { order: -1; }
}

/* ------------------------------------------------------------ the gallery */

.gallery-shell { position: relative; }
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 26vw, 300px);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem var(--gutter) 1.5rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .poster { scroll-snap-align: center; }
.gallery-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.4rem; }
.gallery-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.gallery-nav button:hover { border-color: var(--crimson); background: var(--crimson-soft); }

/* ---------------------------------------------------------------- the fan */

.fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2rem 0 1rem;
  perspective: 1400px;
}
.fan .poster {
  width: clamp(200px, 23vw, 300px);
  flex-shrink: 0;
  transition: transform 0.6s var(--ease), box-shadow 0.4s;
}
.fan .poster:nth-child(1) { transform: translateX(14%) rotate(-7deg) translateY(18px); z-index: 1; }
.fan .poster:nth-child(2) { transform: translateY(-14px); z-index: 2; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-strong); }
.fan .poster:nth-child(3) { transform: translateX(-14%) rotate(7deg) translateY(18px); z-index: 1; }
.fan:hover .poster:nth-child(1) { transform: translateX(-4%) rotate(-4deg) translateY(6px); }
.fan:hover .poster:nth-child(3) { transform: translateX(4%) rotate(4deg) translateY(6px); }
.js .fan .poster { opacity: 0; }
.js .fan.in .poster { animation: fan-in 0.9s var(--ease) forwards; }
.js .fan.in .poster:nth-child(1), .js .fan.in .poster:nth-child(3) { animation-delay: 0.15s; }
@keyframes fan-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .fan {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.9rem;
    padding: 0.5rem var(--gutter) 1.5rem;
    scrollbar-width: none;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan .poster, .fan:hover .poster { transform: none !important; width: 70vw; max-width: 280px; scroll-snap-align: center; }
}

/* ------------------------------------------------------------- rarity ladder */

.ladder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
  align-items: end;
}
.rung {
  --c: var(--t-common);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), var(--surface) 70%);
  padding: 1.1rem 0.6rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  border-top: 2px solid var(--c);
}
.rung img { width: clamp(46px, 6vw, 76px); height: auto; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--c) 40%, transparent)); }
.rung b { margin-top: auto; font-family: var(--display); font-weight: 800; font-size: clamp(0.78rem, 1.3vw, 0.98rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.rung small { font-family: var(--mono); font-size: 0.66rem; color: var(--text-3); letter-spacing: 0.1em; }
.rung:nth-child(1) { --c: var(--t-common); min-height: 150px; }
.rung:nth-child(2) { --c: var(--t-uncommon); min-height: 176px; }
.rung:nth-child(3) { --c: var(--t-rare); min-height: 202px; }
.rung:nth-child(4) { --c: var(--t-epic); min-height: 228px; }
.rung:nth-child(5) { --c: var(--t-legendary); min-height: 254px; }
.rung:nth-child(6) { --c: var(--t-exotic); min-height: 280px; box-shadow: 0 0 40px -10px rgba(230, 57, 70, 0.55); }
.js .rung { opacity: 0; transform: translateY(30px); }
.js .in .rung { animation: rise 0.6s var(--ease) forwards; }
.js .in .rung:nth-child(2) { animation-delay: 0.08s; }
.js .in .rung:nth-child(3) { animation-delay: 0.16s; }
.js .in .rung:nth-child(4) { animation-delay: 0.24s; }
.js .in .rung:nth-child(5) { animation-delay: 0.32s; }
.js .in .rung:nth-child(6) { animation-delay: 0.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .ladder { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .rung { min-height: 0 !important; }
}

/* ------------------------------------------------------------ feature split */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.flip .split-media { order: 2; }
.split-media { position: relative; }
.split-copy .lede { margin-top: 1.2rem; }
.ticks { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 0.8rem; color: var(--text-2); }
.ticks li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--crimson);
  background: radial-gradient(circle, var(--crimson) 0 4px, transparent 5px);
}
.ticks strong { color: var(--text); font-weight: 600; }
.art-frame {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 20%, #232326, var(--ink));
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.art-frame img { width: 82%; height: auto; }
.art-frame.gold-glow { box-shadow: inset 0 0 120px -40px rgba(212, 175, 55, 0.4); }
.art-frame.red-glow { box-shadow: inset 0 0 120px -40px rgba(230, 57, 70, 0.45); }
.angle-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.angle-chips span {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.angle-chips span:first-child { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
}

/* ---------------------------------------------------------- privacy cards */

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.tile .glyph {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--crimson-soft);
  color: var(--crimson);
  margin-bottom: 1.3rem;
}
.tile .glyph svg { width: 24px; height: 24px; }
.tile p { color: var(--text-2); font-size: 0.97rem; margin-top: 0.6rem; }
.honest {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.3rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.honest strong { color: var(--text); }
.honest a { color: var(--gold); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ video */

/* Columns in the ratio 256 : 81 make a 16:9 and a 9:16 box exactly the same
   height ((16/9) / (9/16) = 256/81), so each keeps its own shape. Stretching
   them to one row height instead made the 16:9 box widen to match the tall
   one and slide underneath it. */
.watch { display: grid; grid-template-columns: minmax(0, 256fr) minmax(0, 81fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; }
.vid {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
}
.vid video { width: 100%; height: 100%; object-fit: cover; }
.vid.wide { aspect-ratio: 16 / 9; }
.vid.tall { aspect-ratio: 9 / 16; }
.vid-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(11, 11, 12, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vid-sound svg { width: 18px; height: 18px; }
.vid-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: rgba(11, 11, 12, 0.6);
  color: var(--text-2);
}
@media (max-width: 820px) {
  .watch { grid-template-columns: 1fr; }
  .vid.tall { max-width: 360px; margin-inline: auto; width: 100%; }
}

/* ----------------------------------------------------------------- follow */

.follow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 2vw, 1.4rem); }
.follow a {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1.3rem, 3vw, 1.8rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.3s var(--ease);
}
.follow a:hover { border-color: var(--crimson); transform: translateY(-3px); }
.follow .ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.follow .ico svg { width: 26px; height: 26px; }
.follow .ig .ico { background: linear-gradient(135deg, #833ab4, #e1306c 55%, #fcaf45); color: #fff; }
.follow .yt .ico { background: #ff0033; color: #fff; }
.follow b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.follow small { color: var(--text-3); font-size: 0.9rem; }
.follow .arrow { margin-left: auto; color: var(--text-3); font-size: 1.3rem; }
@media (max-width: 640px) { .follow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ closer */

.closer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(230, 57, 70, 0.16), transparent 70%),
    var(--ink);
  text-align: center;
}
.closer .mark { width: 76px; height: 76px; margin: 0 auto 1.6rem; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.closer h2 { max-width: 16ch; margin-inline: auto; }
.closer .lede { margin: 1.2rem auto 0; }
.closer .store-row { justify-content: center; margin-top: 2.2rem; }

/* --------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.1s; }
.js .reveal.d2 { transition-delay: 0.2s; }
.js .reveal.d3 { transition-delay: 0.3s; }

/* ------------------------------------------------------------------ footer */

.site-foot { border-top: 1px solid var(--line); padding-block: 2.6rem 3rem; color: var(--text-3); font-size: 0.9rem; background: var(--ink); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.site-foot .logo img { height: 24px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-left: auto; }
.site-foot a { color: var(--text-2); text-decoration: none; }
.site-foot a:hover { color: var(--text); }
.site-foot .fine { flex-basis: 100%; font-size: 0.8rem; }

/* ----------------------------------------------- inner pages (support, legal) */

.page-hero { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--line); background: radial-gradient(70% 120% at 0% 0%, rgba(230, 57, 70, 0.1), transparent 60%), var(--ink); }
.page-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); max-width: 18ch; }
.page-hero .lede { margin-top: 1.2rem; }
.page-hero .lede a { color: var(--text); }
.prose { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem); }
.prose .wrap { max-width: 820px; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 2.8rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); margin: 0 0 1rem; max-width: 72ch; }
.prose a { color: var(--text); }
.prose .updated { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; margin-bottom: 2rem; }

.faq { margin: 0; display: grid; gap: 0.75rem; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.3rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--crimson); font-size: 1.3rem; line-height: 1; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.3rem 1.2rem; color: var(--text-2); margin: 0; }
.faq details a { color: var(--text); }
.contact-card { margin-top: 2.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.6rem; }
.contact-card p { margin: 0.4rem 0 0; }
.contact-card .big { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }

/* ------------------------------------------------------------- share page */

.share-wrap { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.spot-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  position: relative;
}
.spot-photo { position: relative; aspect-ratio: 4 / 3; background: var(--ink); display: grid; place-items: center; }
.spot-photo img { width: 100%; height: 100%; object-fit: cover; }
.spot-photo .viewfinder i { animation-delay: 0.1s; }
.skeleton { width: 100%; height: 100%; background: linear-gradient(100deg, #1c1c1c 30%, #262626 50%, #1c1c1c 70%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.no-photo { color: var(--text-3); font-size: 0.85rem; padding: 2rem; text-align: center; }
.spot-body { padding: 1.4rem 1.5rem 1.6rem; }
.spot-body h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
.spot-sub { color: var(--text-2); margin-top: 0.4rem; }
.spot-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.1rem; }
.rarity {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}
.when { color: var(--text-3); font-size: 0.88rem; }
.share-pitch h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.share-pitch .lede { margin-top: 1rem; }
.share-pitch .store-row { margin-top: 1.8rem; }
.share-pitch .ticks { margin-top: 1.4rem; }
.missing h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
.missing p { color: var(--text-2); margin-top: 0.7rem; }
@media (max-width: 820px) { .share-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}