/* ==========================================================================
   PitDex — website design system
   Tokens transcribed from the app's Theme.swift so the site and the app
   read as one product: three dark surfaces, one accent, hairline separators.
   Rules: one accent used sparingly. No glows. No glassmorphism. No gradients
   beyond the barely-perceptible.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  /* Surfaces */
  --bg:        #0E0E0F;
  --raised:    #151517;
  --card:      #1D1D20;
  --well:      #252529;

  /* The single accent — muted yellow-green */
  --accent:        #C7D63C;
  --accent-bright: #D6E14A;
  --accent-dim:    rgba(199, 214, 60, 0.14);

  /* Text */
  --text:      #FFFFFF;
  --text-2:    rgba(255, 255, 255, 0.62);
  --text-3:    rgba(255, 255, 255, 0.38);

  /* Lines — deliberately almost invisible */
  --hairline:  rgba(255, 255, 255, 0.08);
  --hairline-2: rgba(255, 255, 255, 0.14);

  /* Rarity (from Rarity.swift) */
  --r-common:    rgba(255, 255, 255, 0.12);
  --r-rare:      #4A6FA5;
  --r-epic:      #C7D63C;
  --r-legendary: #C28B3C;
  --r-secret:    #6B4A9E;
  --r-mythic:    #A5433C;

  /* Type */
  --font-display: "Saira", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm — 8pt grid */
  --s-1: 4px;   --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 32px;  --s-6: 48px;  --s-7: 72px;  --s-8: 112px;

  --radius:    22px;
  --radius-sm: 12px;

  --shell: 1140px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  /* Offset anchored headings from under the sticky nav */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto matters: these images carry width/height attributes to reserve
   layout space, and without it a CSS width override stretches them. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Present for semantics and search, absent from the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

section { position: relative; }

.band { padding-block: var(--s-8); }
.band--tight { padding-block: var(--s-7); }
.band--line { border-top: 1px solid var(--hairline); }

/* A near-invisible technical grid. Reads as precision, not decoration. */
.band--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(42px, 6.4vw, 74px); font-weight: 700; }
h2 { font-size: clamp(30px, 3.8vw, 46px); }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; }

p { margin: 0; }

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-2);
  max-width: 58ch;
  line-height: 1.6;
}

.muted   { color: var(--text-2); }
.faint   { color: var(--text-3); }
.accent  { color: var(--accent-bright); }

/* Mono eyebrow — the site's most-used technical signal */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.section-head { max-width: 62ch; margin-bottom: var(--s-6); }
.section-head p { margin-top: var(--s-3); }

/* ---------- Scan brackets ----------
   The logo motif: four corner brackets framing a subject. Used as a container
   treatment rather than a decorative flourish. */

.brackets { position: relative; }
.brackets > .bk {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
.brackets > .bk-tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.brackets > .bk-tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; border-top-right-radius: 6px; }
.brackets > .bk-bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.brackets > .bk-br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; border-bottom-right-radius: 6px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease),
              border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: var(--accent-bright); }

.btn--ghost { border: 1px solid var(--hairline-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-bright); }

.btn--sm { padding: 10px 18px; font-size: 14px; }

/* App Store badge — replace with Apple's official artwork before launch */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 12px;
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  background: var(--card);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.appstore:hover { border-color: var(--hairline-2); background: var(--well); }
.appstore svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.appstore span { display: block; line-height: 1.2; }
.appstore .as-small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.appstore .as-big {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 14, 15, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--hairline); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* The app icon itself. It carries the wordmark too, but at this size that
   reads as texture beside the real one rather than a second reading. */
.brand__mark { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.brand__type {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}
.nav__links a {
  font-size: 14.5px;
  color: var(--text-2);
  transition: color 180ms var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="page"] { color: var(--accent-bright); }

.nav__cta { flex: none; }

.nav__toggle { display: none; padding: 8px; margin-left: auto; }
.nav__toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- Hero ---------- */

.hero { padding-block: var(--s-8) var(--s-7); overflow: hidden; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-7);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s-4); }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .lede { margin-bottom: var(--s-5); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.hero__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Hero card — a real card exported from the app, held in a scan frame.
   The screenshot's own background is the same near-black as the page, so its
   rounded corners disappear into it and no masking is needed. */
.hero__card {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 430px;
}
.hero__frame { position: relative; padding: 22px; }

/* Carries the shadow — "very soft shadows", enough to seat the card without
   lighting it. box-shadow rather than a drop-shadow filter: a filter here
   would risk flattening the 3D context the flip below depends on, and a
   static shadow reads correctly as one cast on the surface underneath. */
.hero__plate {
  position: relative;
  border-radius: 18px;
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.55);
}

/* The card swaps between the spotter's own photo and the collectible artwork,
   the same swap the app does on tap. Perspective lives in the transform
   itself, so no ancestor needs to establish it. */
.hero__flip {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  animation: card-flip 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.hero__face {
  position: relative;        /* scopes each face's own scan pass to itself */
  border-radius: 18px;
  overflow: hidden;          /* clips the scan pass to the card's corners */
  backface-visibility: hidden;
}
.hero__face img { display: block; width: 100%; height: auto; }

/* Front sits in flow and sets the height; back is laid over it, pre-rotated. */
.hero__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.hero__face--back img { height: 100%; object-fit: cover; }

/* Always turns the same way, so it reads as one continuous rotation rather
   than a flip and a rewind. */
@keyframes card-flip {
  0%, 43%   { transform: perspective(1400px) rotateY(0deg); }
  50%, 93%  { transform: perspective(1400px) rotateY(180deg); }
  100%      { transform: perspective(1400px) rotateY(360deg); }
}

/* Scan pass: a bright leading edge with a faint trail behind it, crossing the
   card every few seconds. The band is sized as a share of the card, so the
   sweep reads the same at any width. */
.hero__scan { position: absolute; inset: 0; pointer-events: none; }
.hero__scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(to bottom,
    rgba(199, 214, 60, 0)    0%,
    rgba(199, 214, 60, 0.05) 58%,
    rgba(199, 214, 60, 0.11) 90%,
    rgba(199, 214, 60, 0.30) 97.5%,
    rgba(199, 214, 60, 0.85) 99%);
  transform: translateY(-100%);
  /* Symmetric ease so the pass eases in, crosses steadily and settles. A
     decelerating curve made it lunge from the top and then crawl.
     Runs on its own short period rather than the flip's, so the sweep never
     idles; 4.2s against the flip's 12s means the two don't lock into a fixed
     pattern, and both faces share the timing so a pass mid-rotation carries
     across the turn instead of restarting. */
  animation: card-scan 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Band is 34% of the card, so 195% carries its leading edge to the bottom
   edge exactly. Only a short beat off-screen between passes. */
@keyframes card-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 1; }
  76%  { transform: translateY(195%); opacity: 1; }
  84%  { transform: translateY(195%); opacity: 0; }
  100% { transform: translateY(-100%); opacity: 0; }
}
.hero__card figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Spec strip ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--hairline);
}
.strip__cell { padding: var(--s-4) var(--s-3); }
.strip__cell + .strip__cell { border-left: 1px solid var(--hairline); }
.strip__val {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.strip__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* ---------- Cards & grids ---------- */

.grid { display: grid; gap: var(--s-3); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease);
}
.tile:hover { border-color: var(--hairline-2); }
.tile h3 { margin-block: var(--s-3) var(--s-2); }
.tile p { color: var(--text-2); font-size: 15.5px; }

.tile__icon {
  width: 34px;
  height: 34px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Steps — numbered, bracketed */
.step { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.step__n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.step h3 { margin-block: var(--s-3) var(--s-2); }
.step p { color: var(--text-2); font-size: 15.5px; }

/* ---------- Rarity ladder ---------- */

.rarity {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.rarity__step {
  background: var(--card);
  padding: var(--s-4) var(--s-3) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.rarity__bar { height: 3px; border-radius: 2px; }
.rarity__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.rarity__note { font-size: 13.5px; color: var(--text-3); line-height: 1.5; }

.pill {
  display: inline-block;
  padding: 4px 11px 5px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
}
.pill--common    { background: var(--r-common);    color: #fff; }
.pill--rare      { background: var(--r-rare);      color: #fff; }
.pill--epic      { background: var(--r-epic);      color: var(--bg); }
.pill--legendary { background: var(--r-legendary); color: var(--bg); }
.pill--secret    { background: var(--r-secret);    color: #fff; }
.pill--mythic    { background: var(--r-mythic);    color: #fff; }

/* ---------- Card anatomy ---------- */

.anatomy {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--s-7);
  align-items: center;
}

/* A clipping lifted out of the app. The screenshot's own background is the
   page black, so the raised frame around it reads as a thin inset border. */
.shot {
  margin: 0;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-2);
}
.shot img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.speclist { margin-top: var(--s-5); border-top: 1px solid var(--hairline); }
.speclist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.speclist__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: none;
}
.speclist__val { color: var(--text-2); font-size: 15px; text-align: right; }

/* ---------- CTA ---------- */

.cta {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}
.cta h2 { margin-bottom: var(--s-3); }
.cta .lede { margin-inline: auto; margin-bottom: var(--s-5); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--hairline); padding-block: var(--s-6) var(--s-5); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.footer__blurb { color: var(--text-3); font-size: 14.5px; margin-top: var(--s-3); max-width: 34ch; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { font-size: 14.5px; color: var(--text-2); transition: color 180ms var(--ease); }
.footer__col a:hover { color: var(--accent-bright); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Legal pages ---------- */

.page-head { padding-block: var(--s-7) var(--s-5); border-bottom: 1px solid var(--hairline); }
.page-head h1 { font-size: clamp(36px, 5vw, 58px); }
.page-head .stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--s-4);
}

.legal {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-7);
  padding-block: var(--s-6) var(--s-8);
  align-items: start;
}

.toc { position: sticky; top: 96px; }
.toc h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-3);
  border-left: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.6;
}
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--accent-bright); border-left-color: var(--accent); }

.prose { max-width: 74ch; }
.prose section + section { margin-top: var(--s-6); }
.prose h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-4);
}
.prose h3 { font-size: 17px; margin: var(--s-4) 0 var(--s-2); }
.prose p, .prose li { color: var(--text-2); font-size: 16px; }
.prose p + p { margin-top: var(--s-3); }
.prose ul { margin: var(--s-3) 0 0; padding-left: 20px; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent-bright); border-bottom: 1px solid var(--accent-dim); }
.prose a:hover { border-bottom-color: var(--accent); }

/* Placeholders you must fill in before publishing */
.fill {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent-bright);
  background: var(--accent-dim);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.callout {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.callout p { font-size: 15px; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
  padding-block: var(--s-6) var(--s-8);
}

.channel {
  display: block;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  transition: border-color 200ms var(--ease);
}
.channel + .channel { margin-top: var(--s-3); }
.channel:hover { border-color: var(--accent); }
.channel__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.channel__val {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--accent-bright);
  word-break: break-word;
}
.channel__note { font-size: 14px; color: var(--text-2); margin-top: 6px; }

.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  transition: border-color 180ms var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }
.field select { appearance: none; cursor: pointer; }

.form__note { font-size: 13px; color: var(--text-3); }

/* ---------- Download landing page ----------
   Single purpose, no nav, no footer. Almost everyone who lands here arrived
   from a TikTok or Instagram bio link, inside a webview that swallows App
   Store taps — so the page's job is the button and the way around it. */

.dl {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--s-5) var(--s-4) var(--s-7);
}
.dl__inner {
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

/* Sits under the webview's own ⋯ menu. Hidden until main.js confirms we are
   inside one, since in Safari it points at nothing. */
.dl__pointer {
  display: none;
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  align-items: center;
  gap: 8px;
  max-width: 46vw;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: right;
}
.in-app .dl__pointer { display: flex; }
.dl__arrow { font-size: 20px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dl__arrow { animation: dl-nudge 2.4s var(--ease) infinite; }
}
@keyframes dl-nudge {
  0%, 70%, 100% { transform: translate(0, 0); }
  35%           { transform: translate(3px, -3px); }
}

/* The real app icon — what they are about to tap on the App Store. It spells
   the name itself, so it stands in for a title and leads the page alone. */
.dl__mark {
  width: 132px;
  height: 132px;
  margin: var(--s-6) auto var(--s-4);
  border-radius: 28px;
}

.dl__tagline {
  margin: 0 auto var(--s-5);
  max-width: 26ch;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.5;
}
.dl__cta { justify-content: center; }

.dl__steps {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.dl__steps .eyebrow { margin-bottom: var(--s-2); color: var(--accent); }
.dl__steps-lede { color: var(--text-2); font-size: 15px; margin-bottom: var(--s-4); }
.dl__steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.dl__steps li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 15.5px;
  color: var(--text-2);
}
.dl__steps strong { color: var(--text); }
.dl__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.dl__card { margin: var(--s-7) 0 0; }
.dl__card img {
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  border-radius: 16px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.55);
}
.dl__card figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dl__more { margin-top: var(--s-6); font-size: 14px; }
.dl__more a { color: var(--text-3); text-decoration: underline; }
.dl__more a:hover { color: var(--accent-bright); }

/* ---------- In-app browser escape ----------
   Shown only when Instagram/TikTok/Facebook's webview blocks the App Store
   handoff. Built by main.js rather than sitting in all four pages' markup. */

.escape {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(0, 0, 0, 0.74);
}
.escape__panel {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-align: center;
}
.escape__panel .eyebrow { justify-content: center; margin-bottom: var(--s-3); }
.escape__panel h2 { font-size: 25px; margin-bottom: var(--s-3); }
.escape__panel p { color: var(--text-2); font-size: 15px; }
.escape__panel strong { color: var(--text); }

.escape__url {
  margin-top: var(--s-4);
  padding: 11px 13px;
  background: var(--well);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2) !important;
  word-break: break-all;
  user-select: all;
}

.escape__actions { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.escape__actions .btn { width: 100%; }

.escape__close {
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--text-3);
  text-decoration: underline;
  transition: color 180ms var(--ease);
}
.escape__close:hover { color: var(--text); }

/* ---------- Motion ---------- */

/* Scoped to .js (set by main.js) so the page is never blank without scripts */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__scan { display: none; }
  /* Rest on the original photo — the more meaningful of the two faces */
  .hero__flip { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__card { justify-self: center; }
  .anatomy { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Stacked, the heading should lead rather than the screenshot */
  .shot { order: 2; }
  .legal { grid-template-columns: 1fr; gap: var(--s-5); }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .toc a { border-left: 0; border: 1px solid var(--hairline); }
  .toc a.is-active { border-color: var(--accent); }
  .rarity { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-4) var(--s-4);
    background: var(--raised);
    border-bottom: 1px solid var(--hairline);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
  .nav__toggle { display: block; }
  .nav__cta { display: none; }

  .band { padding-block: var(--s-7); }
  .hero { padding-block: var(--s-6) var(--s-6); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip__cell:nth-child(3) { border-left: 0; }
  .strip__cell:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .rarity { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__frame { padding: 14px; }
}