/* ===========================================================
   averyio — shared site stylesheet
   Used by: index.html, apps.html, finance.html, contact.html,
            privacy.html, 404.html and every /apps/<slug>/ page.
   NOT used by privacy-*.html (frozen App Store legal docs —
   they keep their own self-contained styles; do not touch).

   Layout system, 2026 redesign:
   - one editorial column (.wrap), left-aligned, generous vertical rhythm
   - sections alternate paper / white / ink so the page reads in bands
     instead of as a stack of floating boxes
   - screenshots are the primary visual; cards are flat and hairline-bordered
   =========================================================== */

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

:root {
  --red:        #C4152B;
  --red-deep:   #9E1420;
  --red-soft:   rgba(196,21,43,0.07);
  --red-border: rgba(196,21,43,0.22);
  --ink:        #0E0E10;
  --bg:         #F6F5F2;
  --surface:    #FFFFFF;
  --surface-2:  #FBFAF8;
  --border:     #E6E4DF;
  --border-2:   #DEDBD4;
  --text:       #111113;
  --muted:      #6B6B70;
  --faint:      #9A9A9E;
  --mono:       ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.03);
  --shadow-lg:  0 18px 44px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.04);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Warm wash behind the top of the page. Sections that carry their own
   background paint over it, which is what creates the banded rhythm. */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 900px;
  background:
    radial-gradient(ellipse 70% 52% at 82% -8%, rgba(196,21,43,0.07) 0%, transparent 62%),
    radial-gradient(ellipse 62% 42% at 10% 2%, rgba(196,21,43,0.04) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
section { position: relative; z-index: 1; }

/* Keyboard focus — visible for a11y (a Lighthouse/SEO signal) */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Nav ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(246,245,242,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { height: 66px; display: flex; align-items: center; justify-content: space-between; }

.nav-logo { display: inline-flex; align-items: center; font-size: 0.98rem; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -0.04em; }
.nav-logo span { color: var(--red); }
.nav-logo img { width: 1.75em; height: 1.75em; border-radius: 50%; display: block; flex-shrink: 0; margin-right: 0.5rem; }

.nav-links { display: flex; gap: 0.15rem; align-items: center; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 9px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(0,0,0,0.045); }
.nav-links a.nav-home { display: inline-flex; align-items: center; }
.nav-links a.nav-home svg { width: 18px; height: 18px; display: block; }
.nav-links a.active { color: var(--text); }
.nav-links a.nav-cta { color: #fff; background: var(--ink); margin-left: 0.35rem; }
.nav-links a.nav-cta:hover { background: #2a2a2e; }

/* ── Breadcrumb ── */
.crumb {
  position: relative;
  z-index: 1;
  padding-top: clamp(22px, 4vw, 34px);
  font-size: 0.8rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.crumb a {
  color: var(--muted);
  text-decoration: none;
  /* 16px of text is under the 24px WCAG 2.2 AA target size. Padding lifts the
     hit area clear; the crumb row is the only thing on its line, so it can
     simply grow rather than needing a negative margin. */
  display: inline-block;
  padding: 5px 3px;
  margin: 0 -3px;
}
.crumb a:hover { color: var(--red); }
.crumb .sep { color: var(--faint); opacity: 0.6; }
.crumb [aria-current] { color: var(--text); font-weight: 600; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.92rem 1.55rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.btn .a { transition: transform 0.18s; }
.btn:hover .a { transform: translateX(3px); }

.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 12px 28px rgba(0,0,0,0.13); }
.btn-dark:hover { transform: translateY(-3px); background: #26262b; box-shadow: 0 12px 30px rgba(0,0,0,0.17), 0 24px 48px rgba(0,0,0,0.10); }

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--red-border); box-shadow: 0 10px 26px rgba(0,0,0,0.07), 0 20px 40px rgba(196,21,43,0.08); }

/* white primary button, for the ink panels */
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.btn-light:hover { background: #f2f1ee; transform: translateY(-3px); }

/* App Store button — Apple glyph + two-line label */
.btn-store { padding: 0.72rem 1.4rem 0.78rem; align-items: center; }
.btn-store svg { width: 23px; height: 23px; }
.btn-store .store-copy { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.btn-store .store-sm { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.03em; opacity: 0.82; }
.btn-store .store-lg { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ── Eyebrow / section heads ──
   The eyebrow carries a short red rule so section openings read as
   editorial labels rather than as small grey text. */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red-deep);
  margin-bottom: 0.9rem;
}
/* The rule aligns to the FIRST line, not to the block's centre, so a long
   eyebrow that wraps on a narrow screen still reads correctly. */
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  margin-top: 0.72em;
  background: var(--red);
  flex-shrink: 0;
}
.sec-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 62ch; }
.sec-head h2 {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.04;
  color: var(--ink);
}
.sec-head p { margin-top: 0.9rem; color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 58ch; }

/* ── Hero ── */
.hero {
  position: relative;
  z-index: 1;
  padding: clamp(46px, 8vw, 96px) 0 clamp(30px, 5vw, 54px);
}
.hero h1 {
  font-size: clamp(3.1rem, 11vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--ink);
}
/* the red half of a division wordmark (averyioApps / averyioFinance) */
.accent { color: var(--red); }
/* Longer wordmarks need .long or they overflow on a phone. */
.hero h1.long { font-size: clamp(2.05rem, 8vw, 4.9rem); letter-spacing: -0.045em; }
.hero-lead {
  margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
  font-size: clamp(1.04rem, 2.1vw, 1.24rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 46ch;
}
.hero .btn-row { margin-top: clamp(1.6rem, 3vw, 2.1rem); }
/* Pages with a breadcrumb have already spent vertical room above the hero */
.crumb + .hero { padding-top: clamp(20px, 3.5vw, 40px); }
.hero-avatar {
  width: clamp(64px, 8vw, 84px);
  height: auto;              /* width/height attrs would pin it to 128px → oval */
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  margin-bottom: clamp(1rem, 2.2vw, 1.4rem);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 14px 34px rgba(196,21,43,0.20);
}

/* Home hero: copy on the left, real screenshots on the right */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Fanned screenshot trio. Everything is percentage-based inside a fixed
   aspect box, so the arrangement scales without re-tuning per breakpoint.
   The centre shot sits forward; the outer two are rotated behind it. */
.fan {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-left: auto;
  aspect-ratio: 1 / 1.18;
}
.fan img {
  position: absolute;
  width: 46%;
  height: auto;
  border-radius: 17px;
  border: 1px solid rgba(0,0,0,0.10);
  background: var(--ink);
  box-shadow: 0 10px 26px rgba(0,0,0,0.13), 0 30px 64px rgba(0,0,0,0.13);
  display: block;
}
.fan img:nth-child(1) { left: 0;    top: 11%; transform: rotate(-7deg); z-index: 1; }
.fan img:nth-child(2) { left: 27%;  top: 0;   z-index: 3; }
.fan img:nth-child(3) { right: 0;   top: 11%; transform: rotate(7deg);  z-index: 2; }

/* ── App showcase grid (home + apps index) ──
   Each tile leads with the app's real App Store artwork, cropped to its
   headline and the top of the device, then the icon, name and tagline. */
.show-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.3rem);
}
/* The home grid is three apps plus the "See all apps" tile — four cells, so
   it runs four across and never ends on a ragged row. apps.html keeps three
   columns for the full line-up. Both drop to two on anything smaller. */
.show-grid.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.show {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  -webkit-tap-highlight-color: transparent;
}
.show:hover { transform: translateY(-5px); border-color: var(--red-border); box-shadow: var(--shadow-lg); }
.show-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.show-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.show-body {
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.show-head { display: flex; align-items: center; gap: 0.7rem; }
.show-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.032em; color: var(--ink); }
.show-tag { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.show-tags { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.4rem; }
.show-go { margin-left: auto; color: var(--faint); font-size: 1.05rem; line-height: 1; transition: transform 0.2s, color 0.2s; }
.show:hover .show-go { transform: translateX(3px); color: var(--red); }

/* Terminal tile on the home grid — a route to the full line-up rather than
   another product. Its stage shows the real app icons instead of a generic
   glyph: it reads as "here is the rest of the family", and it stops the tile
   being a flat black hole beside three pieces of colourful artwork. */
.show-more { background: var(--ink); border-color: var(--ink); }
.show-more:hover { border-color: var(--ink); }
.show-more .show-stage {
  background:
    radial-gradient(ellipse 74% 70% at 50% 44%, rgba(196,21,43,0.36), transparent 72%),
    var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}
/* Percentage sizing throughout, so the cluster scales with the tile from a
   256px desktop column down to a 160px one on a phone with no re-tuning. */
.show-all-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9%;
  width: 100%;
}
.show-all-grid img, .show-all-grid span {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  display: block;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  transition: transform 0.24s ease;
}
.show-more:hover .show-all-grid img, .show-more:hover .show-all-grid span { transform: scale(1.05); }
/* BTC Prix has no App Store icon, so it keeps the monogram treatment */
.show-all-grid .show-all-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bitcoin orange, sampled from BTCPRIX's own favicon so the tile icon
     and the browser-tab icon are the same colour. Only BTCPRIX uses
     .mono-tile — every other product has an App Store icon. */
  background: #F7931A;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
/* matches the icon height on the neighbouring tiles so the names line up */
.show-more .show-head { min-height: 46px; }
.show-more .show-name { color: #fff; }
.show-more .show-tag { color: rgba(255,255,255,0.62); }
.show-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.show-more-cta .a { transition: transform 0.18s; }
.show-more:hover .show-more-cta .a { transform: translateX(3px); }

/* Real App Store icon */
.app-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
}
.app-icon-lg {
  width: clamp(72px, 11vw, 92px);
  height: auto;
  aspect-ratio: 1;
  border-radius: clamp(17px, 2.6vw, 21px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16), 0 20px 44px rgba(0,0,0,0.10);
}

/* Monogram tile — for products with no App Store icon. BTCPRIX is the only
   one, so this colour is its brand: Bitcoin orange #F7931A, sampled straight
   from its favicon, so the tile icon and the browser-tab icon match exactly. */
.mono-tile {
  width: 46px; height: 46px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  background: #F7931A;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.25);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(196,21,43,0.08);
  border: 1px solid var(--red-border);
  color: var(--red-deep);
}
.tag.neutral { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* ── Generic card grid (privacy index, finance tools) ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.card:hover { transform: translateY(-5px); border-color: var(--red-border); box-shadow: var(--shadow-lg); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.card-arrow { color: var(--faint); font-size: 1.05rem; line-height: 1; transition: transform 0.2s, color 0.2s; }
.card:hover .card-arrow { transform: translate(3px, -3px); color: var(--red); }
.card-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.3rem; }
.card-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
.card-footer { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; }

/* ── Section rhythm ──
   Alternating grounds. .sec-paper is the default page colour, .sec-white
   lifts a section forward, .sec-ink is the full-bleed dark band. */
.sec { padding: clamp(48px, 8vw, 100px) 0; }
.sec-white { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-tint { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── Ink band — the "no bloat" statement, full bleed ── */
.band { background: var(--ink); color: #fff; padding: clamp(48px, 8vw, 96px) 0; }
.band-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: center;
}
.band-num {
  font-size: clamp(2.1rem, 7vw, 4.3rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: #fff;
}
.band-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.45);
  margin-top: 0.9rem;
}
.band-copy h2 {
  font-size: clamp(1.4rem, 3.3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin-bottom: 0.7rem;
}
.band-copy p { color: rgba(255,255,255,0.66); font-size: 1rem; line-height: 1.68; max-width: 60ch; }

/* ── Ethos strip — the four rules, numbered ── */
.ethos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1rem; }
.ethos-item {
  padding: 1.55rem 1.5rem 1.7rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ethos-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--red);
  display: block;
  margin-bottom: 0.85rem;
}
.ethos-item h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 0.45rem; }
.ethos-item p { font-size: 0.89rem; color: var(--muted); line-height: 1.62; }

/* ── Feature grid (app pages, finance principles) ── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; }
.feature {
  padding: 1.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.feature-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  margin-bottom: 1rem;
}
.feature-ico svg { width: 20px; height: 20px; }
/* Numbered badge, for the finance principle cards */
.feature-ico.num {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.02em;
}
.feature h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.4rem; }
.feature p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ── App detail page ── */
.app-hero { position: relative; z-index: 1; padding: clamp(22px, 4vw, 36px) 0 clamp(30px, 6vw, 52px); }
.app-hero h1 {
  font-size: clamp(2.4rem, 7.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.98;
  color: var(--ink);
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
}
.app-tagline {
  margin-top: 0.75rem;
  font-size: clamp(1.08rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--red);
  line-height: 1.3;
}
.app-lead {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 62ch;
}
.app-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
.app-meta span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 11px;
}
.app-hero .btn-row { margin-top: 1.6rem; }
.app-note { margin-top: 1.15rem; font-size: 0.8rem; color: var(--faint); }
/* The link is 12.8px text, so its own box is only ~16px tall — a third of the
   44pt Apple asks for on touch. The padding takes the hit area past 44px and
   the matching negative margin takes it straight back out of the layout, so
   nothing moves on screen. .app-note's margin-top was widened to 1.15rem at the
   same time to keep a gap between this hit area and the store button's, so the
   two never touch. */
.app-note a {
  color: var(--muted);
  display: inline-block;
  padding: 15px 2px;
  margin: -15px -2px;
}

/* Screenshot strip — scrolls on mobile, no library needed */
.shots { padding: clamp(8px, 2vw, 16px) 0 clamp(40px, 8vw, 72px); }
.shots-scroll {
  display: flex;
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
  overflow-x: auto;
  padding: 0.4rem clamp(20px, 5vw, 56px) 1.3rem;
  margin: 0 calc(-1 * clamp(20px, 5vw, 56px));
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.shots-scroll::-webkit-scrollbar { height: 8px; }
.shots-scroll::-webkit-scrollbar-track { background: transparent; }
.shots-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
.shots-scroll img {
  width: clamp(190px, 26vw, 244px);
  height: auto;
  flex-shrink: 0;
  border-radius: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--border);
  background: var(--ink);
  scroll-snap-align: start;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 14px 34px rgba(0,0,0,0.10);
}

/* ── Footprint band — the "no bloat" stat, driven by real App Store sizes ── */
.footprint-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 4rem);
}
.footprint-num {
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.86;
  color: var(--red);
  white-space: nowrap;
}
.footprint-num .unit { font-size: 0.42em; font-weight: 800; letter-spacing: -0.03em; margin-left: 0.12em; }
/* "~" marks the figure as approximate — App Store sizes are rounded */
.footprint-num .approx { font-size: 0.5em; opacity: 0.55; margin-right: 0.04em; vertical-align: 0.14em; }
.footprint-label {
  font-family: var(--mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--faint);
  margin-top: 0.85rem;
}
.footprint-copy h2 {
  font-size: clamp(1.4rem, 3.3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.footprint-copy p { font-size: 1rem; color: var(--muted); line-height: 1.68; max-width: 60ch; }

/* Small-print footnote — carries the affiliate disclosure on finance.html.
   Accidentally deleted with a layout block once; it is a compliance item,
   so never remove it without checking what is inside the range. */
.cmp-note {
  margin-top: 1.1rem;
  max-width: 78ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ── FAQ — plain visible Q&A so Google indexes every word ── */
.faq-list { display: grid; gap: 0.9rem; max-width: 820px; }
.faq-item {
  padding: 1.45rem 1.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.faq-item h3 { font-size: 0.99rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.45rem; }
.faq-item p { font-size: 0.91rem; color: var(--muted); line-height: 1.65; }
.faq-item a { color: var(--red); }

/* ── Closing CTA band ── */
.cta-band { padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 10vw, 104px); }
.cta-inner {
  padding: clamp(2rem, 5vw, 3.4rem);
  background: var(--ink);
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,0.14), 0 30px 70px rgba(0,0,0,0.10);
}
.cta-inner h2 {
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 0.8rem;
}
.cta-inner p { color: rgba(255,255,255,0.66); font-size: 0.99rem; line-height: 1.62; max-width: 54ch; }
.cta-inner .btn-row { margin-top: 1.7rem; }
.cta-inner .btn-store { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.cta-inner .btn-store:hover { background: #f2f1ee; transform: translateY(-3px); }
.cta-inner .btn-ghost {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: none;
}
.cta-inner .btn-ghost:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.4); }

/* ── Contact panel ──
   The contact page closes on this instead of the ink CTA band every other
   page uses: it is already the "get in touch" page, so a second dark
   call-to-action shouted twice. Light surface, hairline border, same card
   language as the rest of the site. */
/* mark | copy | actions — the actions sit on the right on a wide screen so
   the panel does not trail off into dead space, and rejoin the flow below
   the copy once there is no longer room for three columns. */
.contact-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.3rem, 3.4vw, 2.6rem);
  align-items: center;
  padding: clamp(1.7rem, 4vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.contact-actions { flex-direction: column; align-items: stretch; flex-shrink: 0; }
.contact-actions .btn { justify-content: center; }
.contact-mark {
  width: clamp(62px, 8vw, 80px);
  height: clamp(62px, 8vw, 80px);
  border-radius: clamp(16px, 2.2vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.contact-mark svg { width: 45%; height: 45%; fill: currentColor; }
.contact-handle {
  font-size: clamp(1.45rem, 3.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}
.contact-note { margin-top: 0.7rem; font-size: 0.99rem; color: var(--muted); line-height: 1.62; max-width: 54ch; }

/* ── Finance compliance blocks — must stay prominent ── */
.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 68ch;
  margin-top: 1.6rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--red-border);
  background: var(--red-soft);
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
}
.notice svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.15rem; color: var(--red); }
.notice strong { color: var(--ink); font-weight: 700; }

.disclaimer {
  position: relative;
  z-index: 1;
  padding-top: clamp(24px, 4vw, 36px);
  padding-bottom: clamp(40px, 8vw, 80px);
  font-size: 0.78rem;
  color: var(--faint);
  max-width: 640px;
  line-height: 1.58;
}

/* ── Footer ── */
footer { position: relative; z-index: 1; margin-top: auto; border-top: 1px solid var(--border); background: var(--surface-2); }
.footer-inner {
  /* This element is `class="wrap footer-inner"`. Use padding longhands —
     the `padding: 2rem 0` shorthand zeroes the horizontal inset .wrap
     supplies, which pinned the whole footer to the viewport edge. */
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}
footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  padding: 4px 8px;
  border-radius: 6px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
footer a:hover { color: var(--text); }
.footer-col-head {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.footer-cols { display: flex; gap: clamp(2rem, 6vw, 4.5rem); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col a { padding: 3px 0; min-height: 28px; }

/* ── Ground pages (Centre Circle Finder) ── */
.gp-hero { padding-top: clamp(18px, 3vw, 26px); }
.gp-hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}
.gp-ground {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--red);
  margin-top: 0.5rem;
}
.gp-sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.gp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.gp-fact { background: var(--surface); padding: 0.95rem 1.1rem; }
.gp-fact-k {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--faint);
  margin-bottom: 0.3rem;
}
.gp-fact-v { display: block; font-weight: 600; font-size: 0.95rem; }
.gp-fact-v a {
  color: var(--red);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
}
.gp-fact-v a:hover { text-decoration: underline; }
.gp-note {
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.gp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  transition: background 0.15s, transform 0.15s;
}
.gp-cta:hover { background: var(--red); transform: translateY(-1px); }
.gp-sec { padding-top: clamp(2rem, 5vw, 3.2rem); padding-bottom: clamp(2rem, 5vw, 3.2rem); }
.gp-sec h2 {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.gp-sec h2 + .gp-list, .gp-sec h2 + .gp-cols, .gp-sec h2 + .gp-cities { margin-bottom: 2.2rem; }
.gp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.gp-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gp-item:hover {
  border-color: var(--red-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.gp-item-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.gp-dist {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--red);
  white-space: nowrap;
}
.gp-item-meta { display: block; font-size: 0.82rem; color: var(--muted); }
.gp-item-league {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-top: 0.35rem;
}
.gp-more { margin-top: 1.6rem; font-size: 0.88rem; color: var(--muted); }
.gp-more a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 5px 0;
  margin: -5px 0;
}
.gp-more a:hover { text-decoration: underline; }
.gp-tw { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--surface); }
.gp-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gp-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.gp-table tr:last-child td { border-bottom: 0; }
.gp-table td a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 4px 0;          /* 18px -> 26px, clears the 24px AA target */
  margin: -4px 0;
}
.gp-table td a:hover { color: var(--red); }
.gp-num { text-align: right; font-variant-numeric: tabular-nums; }
.gp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; }
.gp-col h3, .gp-az h3 {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.55rem;
}
.gp-col a {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.gp-col a:hover { color: var(--red); }
.gp-col a span, .gp-cities a span {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
}
.gp-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-cities a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.gp-cities a:hover { border-color: var(--red-border); color: var(--red); }
.gp-az { margin-bottom: 1.5rem; }
.gp-az-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.gp-az-links a {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;          /* 21px -> 25px; the 6px row gap keeps them apart */
}
.gp-az-links a:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  /* .show-grid.quad is more specific than .show-grid, so it has to be named
     here explicitly or the four-column rule would win inside this query. */
  .show-grid, .show-grid.quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); }
  .fan { margin-left: 0; margin-right: auto; max-width: 400px; }
  .band-inner, .footprint-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 920px) {
  /* no room for three columns — the actions drop under the copy */
  .contact-panel { grid-template-columns: auto minmax(0, 1fr); }
  .contact-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 560px) {
  /* the mark stacks above the copy rather than squeezing it to a sliver */
  .contact-panel { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .contact-actions { grid-column: auto; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  /* Centred and inset, so the rotated outer shots keep their corners
     inside the content column instead of being sliced by the viewport. */
  .fan { max-width: 300px; margin-left: auto; margin-right: auto; }
}
/* Phone: the app tiles stay two across (a single full-width tile is far
   too much per row), so the tile itself has to get out of its own way. */
@media (max-width: 560px) {
  .show-body { padding: 0.95rem 1rem 1.1rem; gap: 0.4rem; }
  .show-head { gap: 0.55rem; }
  .show-head .app-icon, .show-head .mono-tile { width: 36px; height: 36px; border-radius: 9px; }
  .show-head .mono-tile { font-size: 1.05rem; }
  .show-name { font-size: 0.95rem; line-height: 1.25; }
  .show-go { display: none; }
  .show-more .show-head { min-height: 36px; }
  .show-all-grid .show-all-mono { font-size: 0.8rem; }
  .show-more-cta { font-size: 0.78rem; padding-top: 0.7rem; }
  .show-tag {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .show-tags { padding-top: 0.15rem; }
}
/* The nav is a no-hamburger flex bar carrying 4 links + a CTA, so it is the
   first thing to overflow on a phone. If you add a nav item, re-measure at
   320 / 375 / 390 — .nav-links must never push the page past 100vw. */
@media (max-width: 480px) {
  /* tightened so the longest eyebrow still sits on one line at 320px */
  .eyebrow { font-size: 0.6rem; letter-spacing: 0.1em; gap: 0.45rem; }
  .eyebrow::before { width: 18px; }
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  /* the logo already links home, so the house icon is redundant here */
  .nav-links a.nav-home { display: none; }
  .nav-links { gap: 0.05rem; }
  .nav-links a { padding: 7px 6px; font-size: 0.79rem; }
  .nav-links a.nav-cta { margin-left: 0.2rem; padding: 7px 9px; }
  .nav-logo { font-size: 0.88rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .cta-inner .btn-row .btn { width: 100%; }
}
@media (max-width: 380px) {
  .nav-links a { padding: 7px 5px; font-size: 0.76rem; }
  .nav-logo { font-size: 0.84rem; }
  .nav-logo img { margin-right: 0.38rem; }
}
@media (max-width: 345px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 7px 4px; font-size: 0.73rem; }
  .nav-links a.nav-cta { padding: 7px 7px; }
  .nav-logo { font-size: 0.8rem; }
  /* drop the ".net" suffix at the very smallest sizes to buy room */
  .nav-logo span { display: none; }
}