/* aiwatchselect.com
 *
 * The tokens are the app's tokens, copied from ~/ai-watch-select/src/app/globals.css.
 * If these ever disagree, that file wins. Every contrast figure below was
 * measured, not guessed, and check-site.mjs re-measures them on every build.
 *
 * TWO GROUNDS AND ONLY TWO: paper #FCFCFB for the page, white #FFFFFF for a
 * band and for every photograph. A third ground was tried (#F6F6F4, the app's
 * tablet recess) and dropped: small print on it measures 4.47, which is under
 * the 4.5 body text needs. A ground that quietly fails one token is worse than
 * no ground at all, because it fails in the one place nobody looks.
 */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:   #FCFCFB;   /* the page. Off-white, never cream. */
  --ink:     #242724;   /* the logo's own charcoal. 14.7 on paper. */
  --muted:   #63635E;   /* 5.9 on paper. */
  --oxblood: #642D35;   /* means "you chose this". 10.4 on paper, and 10.4 the
                           other way round with paper on it. */
  --rule:    #E2E2DF;   /* decorative hairlines ONLY. 1.26, not a boundary. */
  --line:    #8E8E8A;   /* BORDERS ONLY. 3.2 clears the 3.0 a boundary needs and
                           is nowhere near enough for text. Never set color to this. */
  --smallprint: #72726D; /* 12.5px small print. 4.71 on paper, 4.83 on white. */
  --white:   #FFFFFF;   /* every photograph, and every band. */

  --gutter: 24px;
  --radius: 3px;
  --tap: 44px;
}

* { box-sizing: border-box; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top);
  /* 320px is a real phone, not a theoretical one. Nothing may push past it. */
  min-width: 320px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── the skip link ─────────────────────────────────────────────────────────
   Positioned off-screen WITH A WAY BACK. The app's own bug was a skip link
   parked at -9999,0 that the first Tab focused and nobody could see. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 0 16px; background: var(--oxblood); color: var(--paper);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.skip:focus, .skip:focus-visible { left: 12px; top: 12px; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 640px; }
/* ⚠️ `narrow` GOES ON THE SHELL IN MOST PLACES, and on its own that broke the
   page at 1440: `.narrow` capped the shell itself at 640px, which killed the
   shell's own centring and shunted the whole section to the window's left
   edge, 160px out of line with every wide section above it. Keep the shell's
   width and centring, and cap the CHILDREN instead, so a reading column starts
   on exactly the same vertical line as everything else. */
.shell.narrow { max-width: 1120px; }
.shell.narrow > * { max-width: 640px; }
.pad { padding: 40px 0; }
.band { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── type ──────────────────────────────────────────────────────────────────
   Four sizes and no more, the same discipline as the app: 30 / 16.5 / 14 / 12.5,
   with one larger size reserved for the front page headline. */
.h { font-weight: 500; font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
.h.sm { font-size: 24px; letter-spacing: -.015em; }
.h.xl { font-size: 38px; letter-spacing: -.024em; }
.sub { font-size: 16.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: 44ch; }
.sub.big { font-size: 18px; max-width: 34ch; }
.note { font-size: 12.5px; line-height: 1.5; color: var(--smallprint); margin: 12px 0 0; max-width: 52ch; }
.eyebrow {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .17em; color: var(--muted); margin: 0 0 10px;
}
.mark {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .19em; color: var(--ink);
}

/* ── the header ────────────────────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap); text-decoration: none; color: var(--ink); flex: none;
}
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navlink {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 10px; font-size: 14px; color: var(--muted); text-decoration: none;
}
.navlink:hover, .navlink.on { color: var(--ink); }
.navlink.cta-sm {
  color: var(--oxblood); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius);
}

/* ── buttons ───────────────────────────────────────────────────────────────
   One primary action, repeated. The ghost is the same action's quieter twin
   (browse), never a third competing thing. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 10px 22px;
  background: var(--oxblood); color: var(--paper);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border-radius: var(--radius); border: 1px solid var(--oxblood);
}
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
p > .btn { margin-top: 22px; }
.mid { margin: 24px 0 0; }

/* ── the hero. The photograph sits at the BOTTOM on a phone, as the app's
      introduction screen does, and moves alongside once there is room. ───── */
.hero { border-bottom: 1px solid var(--rule); }
.hero-in { padding-top: 38px; padding-bottom: 38px; }
.hero-words .eyebrow { color: var(--oxblood); }
.hero-shot { margin: 28px 0 0; }
.hero-shot .note { margin-top: 12px; }

/* ── photographs. CONTAIN, NEVER COVER. A cropped watch is a watch you cannot
      judge, and cropping is the one thing a catalogue photograph must not do. */
.shot {
  background: var(--white);
  border: 1px solid var(--rule);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.shot.big { max-width: 460px; }

/* ── the split. A heading column and a list column, once there is room.
      Below 960 it is one column and the heading simply sits on top, which is
      how a phone should read it anyway. This is what stops the wide screen
      being a narrow page with a large empty margin beside it. ───────────── */
.split { display: block; }
.split-head { max-width: 640px; }
.split-body { max-width: 640px; }
@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
  .split-head { position: sticky; top: 28px; max-width: none; }
  .split-body { max-width: none; margin-top: 0; }
  .split-body.steps, .split-body.claims, .split-body.terms { margin-top: 0; }
}

/* ── how it works ──────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.step { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.step b { flex: none; width: 26px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--muted); padding-top: 3px; }
.step-body { display: block; }
.step-title { display: block; font-size: 16.5px; }
.step-sub { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ── the honesty list ──────────────────────────────────────────────────── */
.claims { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.claim { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.claim-title { font-size: 16.5px; font-weight: 600; margin: 0; }
.claim-sub { font-size: 14px; color: var(--muted); margin: 7px 0 0; max-width: 58ch; }

/* ── membership terms ──────────────────────────────────────────────────── */
.terms { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.terms li { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.term-k { font-size: 14px; font-weight: 600; }
.term-v { font-size: 14px; color: var(--muted); }

/* ── collection tiles on the front page ────────────────────────────────── */
.tiles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.tile { display: block; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.tile-shot { display: block; background: var(--white); border: 1px solid var(--rule); aspect-ratio: 1 / 1; }
.tile-shot img { width: 100%; height: 100%; object-fit: contain; }
.tile-title { display: block; font-size: 15px; font-weight: 600; margin-top: 10px; }
.tile-count { display: block; font-size: 12.5px; color: var(--smallprint); margin-top: 3px; }

/* ── the collections index: rows, no photographs ───────────────────────── */
.lede { padding: 40px 0 26px; }
.crumb { margin: 0 0 10px; }
.crumblink {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.group { padding: 26px 0 0; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 14px 0; text-decoration: none; color: var(--ink);
}
.row-main { display: block; }
.row-title { display: block; font-size: 16.5px; }
.row-sub { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.row-count { flex: none; font-size: 14px; color: var(--muted); }

.pending { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.pending li { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.pending-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.pending-why { display: block; font-size: 12.5px; color: var(--smallprint); margin-top: 3px; }

/* ── the watch grid. Photographs small and repeated, the app's Saved screen
      widened out. Two columns on the narrowest phone, never one. ────────── */
.grid-wrap { padding: 4px 0 44px; }
.grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(2, 1fr); }
.card { min-width: 0; }
.card .shot { margin-bottom: 11px; }
.maker { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin: 0; }
.model { font-size: 15px; font-weight: 500; line-height: 1.25; margin: 5px 0 0; overflow-wrap: anywhere; }
.ref { font-size: 12.5px; color: var(--smallprint); margin: 4px 0 0; overflow-wrap: anywhere; }
.facts { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.price { font-size: 15px; font-weight: 600; margin: 8px 0 0; }
.price.poa { font-weight: 500; color: var(--muted); }
.basis { font-size: 11.5px; line-height: 1.45; color: var(--smallprint); margin: 3px 0 0; }

/* ── the footer ────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--rule); padding: 26px 0 max(26px, env(safe-area-inset-bottom)); }
.foot-line { font-size: 12.5px; line-height: 1.55; color: var(--smallprint); margin: 0; max-width: 62ch; }
.foot-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; }
.footlink {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.final { padding-bottom: 52px; }

/* ══ 390px and up: a normal phone. ══════════════════════════════════════ */
@media (min-width: 380px) {
  .h { font-size: 33px; }
  .h.xl { font-size: 42px; }
}

/* ══ 700px and up: tablet. The gutters open, the type steps up, the grid
      gains a column, and the hero words and photograph sit side by side. ══ */
@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .pad { padding: 56px 0; }
  .h { font-size: 40px; }
  .h.sm { font-size: 28px; }
  .h.xl { font-size: 56px; }
  .sub { font-size: 17px; }
  .sub.big { font-size: 19px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .hero-in { display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .terms li { flex-direction: row; gap: 22px; }
  .term-k { flex: none; width: 150px; }
  .facts-grid > div { flex-direction: row; gap: 22px; align-items: baseline; }
  .facts-grid dt { flex: none; width: 190px; padding-top: 2px; }
}

/* ══ 960px and up: desktop. ═════════════════════════════════════════════ */
@media (min-width: 960px) {
  .hero-in { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
  .hero-shot { margin: 0; }
  .shot.big { max-width: none; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .h.xl { font-size: 64px; }
}

/* ── the two sections that set their OWN vertical rhythm ───────────────────
   These come AFTER the breakpoints on purpose. `.lede` and `.group` are
   deliberately tighter than a normal section, and putting them earlier meant
   the 700px rule for `.pad` overrode them: a group ended up with 68px above
   AND below on a tablet, so the collection list read as five islands with a
   corridor between each. Order in a stylesheet is not a detail. */
.lede { padding: 40px 0 26px; }
.group { padding: 26px 0 0; }
.group:last-of-type { padding-bottom: 20px; }
@media (min-width: 700px) {
  .lede { padding: 52px 0 32px; }
  .group { padding: 34px 0 0; }
}

/* ══ 1440px: the shell is already capped at 1120, so this only stops the
      headline running to a measure nobody can read. ════════════════════ */
@media (min-width: 1300px) {
  .h.xl { font-size: 68px; }
}