/* CHOPSHOP — product site.

   The page is dressed as the machine. The ground is the DARK chassis, numbers
   sit on the display strip's black LCD, accents are the LCD chip colours (LOOP
   teal, FX amber, CHOP pink, STEP ember, CLICK green) and the packs are pads
   with coloured rims. Every value comes from the app (Shared/Theme.swift, the
   LCD chips in IPadWorkstationView, each pack's `tint`), so the page and the
   screenshots on it agree.

   One theme on purpose: the site is the black machine whichever way the
   viewer's system is set, so every colour is painted explicitly. System fonts
   only (SF Pro and SF Mono on Apple devices, the app's own faces), so the
   page makes no outside requests. */

:root {
  color-scheme: dark;

  /* Chassis (Theme.swift, dark column) */
  --ground: #0a0a0c;
  --band: #111114;
  --surface: #1a1a1e;
  --recess: #232329;
  --stroke: #2e2e34;
  --hair: #1f1f24;
  --ink: #f2f1ec;
  --ink-2: #b8b7b1;
  --ink-3: #8f8e88;

  /* Display strip */
  --lcd: #050506;
  --lcd-edge: #1d1d23;

  /* LCD chips + brand */
  --ember: #ff4d1c;
  --ember-hi: #ff6a3c;
  --amber: #ffb454;
  --pink: #ff4da6;
  --teal: #36c5d6;
  --green: #5be37a;
  --gold: #ffc93c;

  /* A LIGHT-chassis key, for the step labels */
  --key: #e9e8e4;
  --key-ink: #3a3a38;
  --key-stroke: #bdbcb7;

  --radius: 16px;
  --maxw: 1160px;
  --nav-h: 62px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}
body {
  margin: 0;
  font: 400 17px/1.6 var(--sans);
  background: var(--ground);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ember-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 16px; text-wrap: pretty; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }

/* Type ---------------------------------------------------------------- */
h1, h2 {
  font-family: var(--mono); font-weight: 800; color: var(--ink);
  letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.3vw, 54px); line-height: 1.02; text-transform: uppercase; }
h2 { font-size: clamp(27px, 3.3vw, 42px); line-height: 1.08; }
h3 {
  font: 650 21px/1.25 var(--sans); color: var(--ink);
  letter-spacing: -0.01em; margin: 0 0 10px; text-wrap: balance;
}
.eyebrow {
  font: 600 12px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); margin: 0 0 14px;
}
.sub { font-size: 18px; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; text-wrap: balance; }

/* Wordmark, as ChopShopWordmark draws it: mono, CHOP light, SHOP heavy */
.wordmark {
  font-family: var(--mono); font-size: 20px; letter-spacing: 0.037em;
  white-space: nowrap; line-height: 1;
}
.wordmark .chop { font-weight: 300; color: var(--ember); }
.wordmark .shop { font-weight: 800; color: var(--ink); }
a.wordmark:hover { text-decoration: none; }

/* Nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.8);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a:not(.btn) { color: var(--ink-3); font-size: 15px; }
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 900px) { .nav-links a:not(.btn) { display: none; } }

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 16px/1 var(--sans); padding: 16px 22px; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--ember); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 26px -12px rgba(255,77,28,0.75);
}
.btn-primary:hover { background: var(--ember-hi); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--stroke); }
.btn-ghost:hover { border-color: #4a4a52; color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.nav .btn-sm { box-shadow: none; }

/* Device frames --------------------------------------------------------
   Corner radii are percentages of the frame, so every frame keeps its shape
   at any size. Each screenshot is a raw capture; the frame supplies the
   bezel. */
.phone, .tablet, .phone-land {
  position: relative; background: #050506;
  box-shadow:
    0 0 0 1px #34343c,
    inset 0 0 0 1px #17171b,
    0 40px 70px -30px rgba(0,0,0,0.9),
    0 18px 30px -18px rgba(0,0,0,0.8);
}
/* Bezels. A padding percentage is a share of the frame's CONTAINER, not of
   the frame, so a frame narrower than its container came out with a fatter
   bezel: the hero iPhone, 30% of its box, had 3.3% of its own width at
   "padding: 1%". So each frame takes its width in --w and its bezel as a
   fraction of that, and every placement sets --w rather than width.
   Mark, 2026-10-18/19: the hero iPhone wanted thinner (1.5% of its width),
   the iPhones down the page did not. They keep 1.8%, the 5.2 px the tour
   phones had on a desktop screen when he called them right; the iPhone on
   its side matches at 1.8% of its short side, and the iPad has 1% of its
   long side. The screen's own corner stays at 13.7% of its short side; the
   frame's corner is that plus the bezel, so the two curves stay concentric. */
.phone { --w: 100%; width: var(--w); padding: calc(var(--w) * 0.018); border-radius: 15.01% / 7.05%; }
.phone img { width: 100%; border-radius: 13.7% / 6.3%; }
.tablet { --w: 100%; width: var(--w); padding: calc(var(--w) * 0.01); border-radius: 3.35% / 4.44%; }
.tablet img { width: 100%; border-radius: 2.4% / 3.2%; }
.phone-land { --w: 100%; width: var(--w); padding: calc(var(--w) * 0.00844); border-radius: 7.04% / 15.01%; }
.phone-land img { width: 100%; border-radius: 6.3% / 13.7%; }

/* Sections ------------------------------------------------------------ */
.section { padding: 104px 0; }
.band { background: var(--band); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section-head { margin-bottom: 56px; }
.section-head.center { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
}

/* Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: 76px 0 56px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 900px; right: -220px; top: -260px;
  background: radial-gradient(closest-side, rgba(255,77,28,0.20), rgba(255,77,28,0.06) 55%, transparent);
}
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.hero h1 .hot { color: var(--ember); }
.hero h1 span { display: block; }
.hero .lede { font-size: 19px; color: var(--ink-2); max-width: 36ch; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.price-note { font: 13px/1.6 var(--mono); color: var(--ink-3); margin: 18px 0 0; }
.price-note b { color: var(--ink); font-weight: 600; }

.hero-devices { position: relative; padding: 0 0 15% 17%; }
.hero-devices .phone {
  position: absolute; left: 0; bottom: 0; --w: 30%;
  padding: calc(var(--w) * 0.015); border-radius: 14.79% / 6.92%;
}

@media (max-width: 900px) {
  .hero { padding-top: 48px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-devices { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 420px) {
  .hero-cta .btn { width: 100%; }
}

/* LCD: the display strip ---------------------------------------------- */
.lcd {
  background: var(--lcd); color: var(--ink);
  border: 1px solid var(--lcd-edge); border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    inset 0 14px 30px rgba(0,0,0,0.65),
    0 24px 40px -28px rgba(0,0,0,0.95);
  font-family: var(--mono);
}
.lcd-label {
  font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember);
}
.c-ember { color: var(--ember); }
.c-amber { color: var(--amber); }
.c-pink { color: var(--pink); }
.c-teal { color: var(--teal); }
.c-green { color: var(--green); }
.c-gold { color: var(--gold); }

.spec { padding: 8px 0 24px; }
.spec .lcd {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0; padding: 20px 6px;
}
.spec .cell { padding: 2px 18px; border-left: 1px solid #16161b; min-width: 0; }
.spec .cell:first-child { border-left: 0; }
.spec dt { margin: 0; }
.spec dd { margin: 0; }
.spec .val {
  font: 500 36px/1 var(--mono); color: var(--ink); margin-top: 10px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(242,241,236,0.16);
}
.spec .cap { font: 12px/1.35 var(--mono); color: var(--ink-3); margin-top: 8px; }
@media (max-width: 900px) {
  .spec .lcd { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .spec .cell:nth-child(4) { border-left: 0; }
}
@media (max-width: 520px) {
  .spec .lcd { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 2px; }
  .spec .cell { padding: 2px 14px; }
  .spec .cell:nth-child(odd) { border-left: 0; }
  .spec .cell:nth-child(4) { border-left: 1px solid #16161b; }
  .spec .val { font-size: 30px; }
}

/* Keys: a LIGHT-chassis button with its LED -------------------------- */
.key {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #f3f2ee, var(--key));
  color: var(--key-ink); border: 1px solid var(--key-stroke); border-radius: 9px;
  font: 700 12px/1 var(--mono); letter-spacing: 0.12em;
  padding: 9px 13px 9px 11px; margin-bottom: 20px;
  box-shadow: 0 2px 0 #8f8e89, 0 10px 18px -10px rgba(0,0,0,0.9);
}
.key::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--led, var(--ember));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 0 8px var(--led, var(--ember));
}
.led-ember { --led: var(--ember); }
.led-amber { --led: var(--amber); }
.led-pink { --led: var(--pink); }
.led-teal { --led: var(--teal); }
.led-green { --led: var(--green); }

/* Tour: one screen per step ------------------------------------------ */
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: center; padding: 64px 0;
  border-top: 1px solid var(--hair);
}
.step:first-of-type { border-top: 0; padding-top: 0; }
.step:last-of-type { padding-bottom: 0; }
.step-copy { max-width: 520px; }
.step-copy > p { font-size: 18px; }
.step.flip .step-shot { order: -1; }
.step.flip .step-copy { justify-self: end; }
.step-shot { margin: 0; position: relative; display: grid; place-items: center; }
.step-shot::before {
  content: ""; position: absolute; inset: 6% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--led, var(--ember)) 22%, transparent), transparent);
}
.step-shot .phone { --w: min(290px, 72vw); z-index: 1; }

.facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; }
.facts li {
  display: grid; grid-template-columns: 8.6em minmax(0, 1fr); gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-2);
}
.facts li:last-child { border-bottom: 1px solid var(--hair); }
.facts b { font: 700 11px/2 var(--mono); letter-spacing: 0.12em; color: var(--ink); }
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
  .step.flip .step-shot { order: 0; }
  .step.flip .step-copy { justify-self: start; }
  .step-copy { max-width: 600px; }
  .step-shot .phone { --w: min(250px, 64vw); }
}
@media (max-width: 420px) {
  .facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* iPad + landscape ---------------------------------------------------- */
.ipad-shot { margin: 0 auto; max-width: 980px; }
.trio {
  list-style: none; padding: 0; margin: 48px auto 0; max-width: 980px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.trio li { border-top: 1px solid var(--stroke); padding-top: 18px; font-size: 15px; }
.trio b { display: block; font: 700 12px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--ink); margin-bottom: 6px; }
.landscape {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px; align-items: center; max-width: 980px; margin: 88px auto 0;
}
.landscape figure { margin: 0; }
@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .trio li { padding: 16px 0; }
  .landscape { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
}

/* Plugin -------------------------------------------------------------- */
.plugin-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: end; margin-bottom: 44px;
}
.plugin-head h2 { margin-bottom: 0; }
.plugin-head p { margin: 0; }
.plugin-shot {
  margin: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--stroke); background: var(--surface);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.95);
}
.plugin-shot img { width: 100%; }
.plugin-shot figcaption {
  font: 12px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--ink-3);
  padding: 12px 16px; border-top: 1px solid var(--stroke);
}
.plugins {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px;
}
.plugin {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 22px 22px 20px;
}
.plugin .kind { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--teal); margin: 0 0 12px; }
.plugin h3 { font-family: var(--mono); font-weight: 800; font-size: 18px; letter-spacing: 0.01em; }
.plugin p { margin: 0; font-size: 15px; }
.host-notes {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.host-notes li { font-size: 15px; border-top: 1px solid var(--stroke); padding-top: 16px; }
.host-notes b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 4px; }
.plugin-note { margin: 28px 0 0; font-size: 15px; color: var(--ink-3); }
@media (max-width: 900px) {
  .plugin-head { grid-template-columns: 1fr; gap: 18px; }
  .plugins { grid-template-columns: 1fr; }
  .host-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .host-notes { grid-template-columns: 1fr; gap: 0; }
  .host-notes li { padding: 14px 0; }
}

/* Also in the box ----------------------------------------------------- */
.box {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px;
}
.box-item { padding: 28px 0 30px; border-top: 1px solid var(--stroke); }
.box-item .ic { display: block; width: 26px; height: 26px; color: var(--ember); margin-bottom: 14px; }
.box-item .ic svg { width: 100%; height: 100%; display: block; }
.box-item h3 { font-size: 19px; }
.box-item p { margin: 0; font-size: 15px; }
@media (max-width: 900px) { .box { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .box { grid-template-columns: 1fr; } }

/* Packs: pads with each pack's own rim colour ------------------------- */
.packs-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center;
  margin-bottom: 56px;
}
.packs-head .phone { --w: 230px; margin: 0; }
.templates-intro { margin: 26px 0 0; font-size: 15px; color: var(--ink-3); }
.templates { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.templates li {
  font: 600 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink);
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 8px; padding: 9px 11px;
}
@media (max-width: 760px) {
  .packs-head { grid-template-columns: 1fr; gap: 36px; }
  .packs-head .phone { margin: 0 auto; --w: min(230px, 62vw); }
}

.readout { padding: 16px 20px; margin-bottom: 22px; min-height: 92px; }
/* On a phone the pads run on below the readout, so it pins under the nav
   while you scroll them: tap any pad and its pack is in view. Tall enough for
   the longest tagline, so tapping never shifts the pads. */
@media (max-width: 860px) {
  .readout { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5; min-height: 132px; }
}
.readout-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.readout-name { font: 600 22px/1.15 var(--mono); color: var(--ink); letter-spacing: 0.02em; }
.readout-bpm { font: 500 15px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.readout-line { font: 13px/1.5 var(--mono); color: var(--ink-3); margin: 8px 0 0; }
.readout .tag-free { color: var(--green); }
.readout .tag-paid { color: var(--gold); }

.banks { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: 32px; }
.bank-label { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--ink-3); margin: 0 0 12px; }
.pads { display: grid; gap: 10px; }
.pads-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pads-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pad {
  position: relative; aspect-ratio: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 9px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--tint);
  border-color: color-mix(in srgb, var(--tint) 55%, #26262c);
  background: linear-gradient(180deg, #3a3a42 0%, #27272d 48%, #1c1c21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 16px -10px rgba(0,0,0,0.9);
  color: var(--ink-2); font: 600 10.5px/1.15 var(--mono); letter-spacing: 0.04em;
  transition: border-color .12s, box-shadow .12s, background .12s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
.pad .num { color: #77767f; font-weight: 500; font-variant-numeric: tabular-nums; }
.pad .name { color: var(--ink); overflow-wrap: anywhere; }
.pad:hover, .pad.lit {
  border-color: var(--tint);
  box-shadow: 0 0 0 1px var(--tint), 0 0 26px -6px var(--tint), inset 0 1px 0 rgba(255,255,255,0.1);
  background: linear-gradient(180deg, #44444d 0%, #2c2c33 48%, #1f1f25 100%);
}
.pad:active { transform: scale(0.97); }
.pad:focus-visible { outline-offset: 2px; border-radius: 12px; }
/* Where subgrid works, both banks sit on one 9-pad grid (3 + gutter + 6), so
   every pad is the same size and the rows line up across the gutter. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 861px) {
    .banks { grid-template-columns: repeat(3, minmax(0, 1fr)) 12px repeat(6, minmax(0, 1fr)); column-gap: 10px; row-gap: 0; }
    .bank { display: grid; grid-template-columns: subgrid; }
    .bank:first-child { grid-column: 1 / 4; }
    .bank:last-child { grid-column: 5 / 11; }
    .bank-label, .bank .pads { grid-column: 1 / -1; }
    .bank .pads { grid-template-columns: subgrid; }
  }
}
@media (max-width: 860px) {
  .banks { grid-template-columns: 1fr; gap: 28px; }
  .pads-3, .pads-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pads-3 { max-width: none; }
}
@media (min-width: 520px) and (max-width: 860px) {
  .pads-3, .pads-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .pad { aspect-ratio: 5 / 4; } }

/* Pricing ------------------------------------------------------------- */
.tiers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  max-width: 820px; margin: 0 auto;
}
.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 20px;
  padding: 30px 30px 28px;
}
.tier.flagship { border-color: rgba(255,201,60,0.55); background: linear-gradient(180deg, #1f1c14, var(--surface) 46%); }
.tier .name { font: 800 15px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink); margin: 0 0 18px; }
.tier .price {
  font: 700 46px/1 var(--mono); color: var(--ink); letter-spacing: -0.03em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.tier .price small { font: 500 14px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); margin-left: 6px; }
.tier .what { margin: 10px 0 0; font-size: 15px; color: var(--ink-3); }
.tier ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.tier li { position: relative; padding: 7px 0 7px 28px; font-size: 15px; color: var(--ink-2); }
.tier li::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.flagship li::before { border-color: var(--gold); }
/* LIFETIME can't be bought from the web or the app's App Store page, only in
   the app, so its card says where instead of carrying a button (Mark,
   2026-10-18). */
.tier-where {
  margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,201,60,0.28);
  font: 600 13px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ink-2);
  text-align: center; text-wrap: balance;
}
.badge-best {
  position: absolute; top: 26px; right: 26px;
  font: 800 10px/1 var(--mono); letter-spacing: 0.12em;
  background: var(--gold); color: #1a1a1a; padding: 6px 9px; border-radius: 999px;
}
.price-foot { margin: 26px auto 0; font-size: 13px; color: var(--ink-3); max-width: 60ch; text-wrap: balance; }
.promise {
  font: 600 14px/1.5 var(--mono); letter-spacing: 0.06em; color: var(--gold); margin: 22px 0 0;
}
@media (max-width: 680px) { .tiers { grid-template-columns: 1fr; } .tier { padding: 26px 22px 22px; } .badge-best { top: 22px; right: 20px; } }

/* Closing band -------------------------------------------------------- */
.cta-band {
  padding: 96px 0; text-align: center;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,77,28,0.16), transparent 70%),
    var(--band);
  border-top: 1px solid var(--hair);
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { margin: 0 auto 28px; text-wrap: balance; }

/* Footer -------------------------------------------------------------- */
footer { border-top: 1px solid var(--hair); padding: 36px 0 44px; color: var(--ink-3); font-size: 14px; background: var(--ground); }
footer .wrap { display: flex; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; align-items: center; }
footer .who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
footer .wordmark { font-size: 16px; }
footer a { color: var(--ink-3); }
footer a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* Doc pages: support + privacy ---------------------------------------- */
.doc-hero { padding: 72px 0 8px; }
.doc-hero h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 14px; }
.doc-hero .sub { margin-bottom: 0; }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.help-card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 22px 24px; }
.help-card .lcd-label { display: block; margin-bottom: 12px; }
.help-card p { margin: 0; font-size: 15px; }
.help-card p + p { margin-top: 8px; }
.help-card .big { font: 600 17px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.help-card .path { font: 600 13px/1.6 var(--mono); color: var(--ink); letter-spacing: 0.04em; }
@media (max-width: 720px) { .help-cards { grid-template-columns: 1fr; } }

.doc-body { padding: 56px 0 104px; }
.doc-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.toc p { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--ink-3); margin: 0 0 14px; }
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { display: block; color: var(--ink-2); font-size: 15px; padding: 6px 10px; border-radius: 8px; }
.toc a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
@media (max-width: 860px) {
  .doc-grid { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .toc a { background: var(--surface); border: 1px solid var(--stroke); font-size: 14px; padding: 7px 11px; }
}

.doc { max-width: 720px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.price-table th {
  font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  color: var(--ink-3); padding: 0 0 12px; border-bottom: 1px solid var(--stroke);
}
.price-table td { padding: 9px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.price-table .num, .price-table .cur { text-align: right; padding-left: 16px; white-space: nowrap; }
.price-table td.num { font-family: var(--mono); color: var(--ink); }
.price-table td.cur { font-family: var(--mono); color: var(--ink-3); }
.price-table-note { margin-top: 26px; font-size: 14px; }
.doc h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 64px 0 6px; }
.doc > h2:first-child, .doc > section:first-child h2 { margin-top: 0; }
.doc p, .doc li { color: var(--ink-2); }
.doc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--ink); }
.doc code, .ui {
  font: 600 0.84em/1 var(--mono); letter-spacing: 0.04em; color: var(--ink);
  background: var(--recess); border: 1px solid var(--stroke); border-radius: 5px;
  padding: 2px 5px; white-space: nowrap;
}
.updated { font: 13px/1.4 var(--mono); color: var(--ink-3); }
.qa { border-top: 1px solid var(--hair); padding: 22px 0 6px; }
.qa h3 { font-size: 18px; margin-bottom: 8px; }
.qa p, .qa ul { font-size: 16px; }
.callout {
  background: var(--surface); border: 1px solid var(--stroke); border-left: 3px solid var(--ember);
  border-radius: 12px; padding: 18px 20px; margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }
.back { margin-top: 56px; }

/* Motion ---------------------------------------------------------------
   Mark, 2026-10-18: images should reveal as you scroll, "almost like how
   Apple does it". The screenshots rise and grow into place as they come
   into view, the pads light up in a wave, and the hero's devices arrive the
   same way on load. site.js hides only
   what is still below the fold when the page loads, so nothing on screen
   blinks. With Reduce Motion on, or without the script, everything simply
   shows. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Mark, 2026-10-18, "a little bit more noticeable": every picture grows
     from 90% to full size over about a second and a half. It is fully
     visible sooner than it is full size, so you see it grow, not fade. The
     ease is a gentle ease-out (cubic): a sharper one finished nine tenths
     of the growth in the first half second and crept through the rest. */
  [data-reveal].reveal-wait { opacity: 0; transform: translateY(clamp(28px, 4vw, 48px)) scale(0.9); }
  [data-reveal="zoom"].reveal-wait { transform: translateY(24px) scale(0.9); }
  /* The transition belongs to the reveal, not to the element. On the
     element, hiding it at load started a fade-out, and the reveal then only
     reversed that: a reversed transition runs just as long as the part it
     undoes, so a picture reached in the first second or two grew in a third
     of a second (measured in Safari, 2026-10-18). Hiding is instant now. */
  [data-reveal].reveal-go {
    transition:
      opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 1.5s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* The pads come up in a diagonal wave from the top-left pad (site.js sets
     each pad's --i to its row plus its column). Keyframes rather than a
     transition, so each pad keeps its own hover and press transitions:
     "backwards" holds the start through the pad's delay and lets go at the
     end. */
  [data-reveal="pads"].reveal-wait { opacity: 1; transform: none; }
  [data-reveal="pads"].reveal-wait .pad { opacity: 0; }
  [data-reveal="pads"].reveal-go .pad {
    animation: pad-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }

  /* The hero is on screen at load, so its devices arrive by themselves: the
     iPad first, then the iPhone sliding in after it. */
  .hero-devices .tablet { animation: rise-in 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0.15s backwards; }
  .hero-devices .phone { animation: phone-in 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0.4s backwards; }
}
@keyframes pad-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(32px) scale(0.9); } }
@keyframes phone-in { from { opacity: 0; transform: translate(-20px, 44px) scale(0.9); } }
@media print {
  .reveal-wait, .reveal-wait .pad { opacity: 1 !important; transform: none !important; }
}