/*
 * capturerocket.com
 *
 * One stylesheet, no framework, no build step. Same arrangement as
 * motorfileapp.com and for the same reason: a build step is one more thing to
 * break between now and a launch.
 *
 * ⚠️ NOTHING IS LOADED FROM ANYWHERE ELSE. No CDN, no analytics, no embedded
 * video, no web font. That is not tidiness — the privacy page SAYS this site
 * loads nothing from anywhere, and a stylesheet that quietly pulls in a
 * typeface from Google would make that sentence false. The app is drawn in the
 * system font, so the site is too, and site and app therefore run identical
 * type for free.
 */

:root {
  /* Straight out of the app: app/globals.css and ios/Capture/Theme.swift. */
  --indigo: #2e62fb;
  --indigo-deep: #1b43c9;
  --indigo-soft: #e4ebff;
  --navy: #10192c;
  --paper: #f7f7f4;
  --surface: #ffffff;
  --ink: #182132;
  --muted: #4b5563;
  --faint: #6b7280;
  --line: #e6e6e0;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1116;
    --surface: #171b22;
    --ink: #f3f4f6;
    --muted: #9aa3b2;
    --faint: #7b8494;
    --line: #232935;
    --indigo-soft: #18233f;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  /* ⚠️ FLUID, NOT A FIXED 760. Michael, 28 Sep 2026: "make sure that we're
     utilising the full width of the page and that it is adaptive". It was
     760px on every screen, so a large monitor showed a narrow ribbon with two
     empty thirds. `min()` means it fills a small window and stops growing
     where a line of text would get too long to read back. */
  max-width: min(1120px, 100%);
  margin: 0 auto;
  /* ⚠️ 22px, the same gutter the app uses, so the site does not feel wider
     than the product it is selling. Never less than 16 on a phone. */
  padding: 0 34px;
}

/* ⚠️ RUNNING TEXT STILL HAS A CEILING. Widening the page is not permission to
   set a 1050px line: past roughly 70 characters the eye loses its place coming
   back to the left margin. The page gets the width; the prose does not. */
.doc, .promise-line p.big, .closing .said { max-width: 760px; }
/* ⚠️ THE LEDGER TOO. Widening the page stretched "Subscription ...... None"
   across nearly a thousand points, so the label and its answer ended up at
   opposite ends of the screen with nothing between them — a row nobody can
   read across. A ledger is print, and print has a measure. */
.ledger { max-width: 760px; margin-left: auto; margin-right: auto; }
/* ⚠️ AND THE BAR AND THE FOOTER FOLLOW THE TEXT ON A READING PAGE. Privacy and
   Support are set to a 760px measure, so a nav that still ran to the full
   1120 put "Capture Rocket" a long way left of the word "Support" underneath
   it — two different page widths stacked, which reads as a mistake rather than
   a choice. */
body:has(.doc) nav.top .wrap,
body:has(.doc) footer .wrap { max-width: 760px; }

/* ⚠️ THE HEADING, THE ROWS AND THE NOTE MOVE TOGETHER. Capping `.ledger`
   alone centred the rows and left "The details" out on the left, which reads
   worse than the stretched version it was meant to fix. The whole block is one
   thing, so the whole block gets the measure. */
.details { max-width: 760px; margin-left: auto; margin-right: auto; }
.ledger { max-width: none; }
.doc { margin-left: auto; margin-right: auto; }

/* ── the field the rocket sits on ────────────────────────────────────── */

.hero {
  /* Two glows over the brand navy, the same construction as the App Store
     slides. A single flat fill reads as a slide; layered light reads as a
     place. */
  /* ⚠️ THE FALLOFF NEEDS MIDDLE STOPS OR IT SHOWS ITS EDGE. Two stops from
     solid to transparent produced a visible horizontal seam across the top of
     the hero where the ellipse ended — a hard line in what is meant to read as
     light. Caught by screenshotting the page, not by reading the CSS. */
  background:
    radial-gradient(130% 78% at 50% -22%,
      rgba(46, 98, 251, 0.95) 0%,
      rgba(46, 98, 251, 0.55) 26%,
      rgba(46, 98, 251, 0.22) 48%,
      rgba(46, 98, 251, 0.06) 68%,
      rgba(46, 98, 251, 0) 84%),
    radial-gradient(90% 58% at 50% 116%,
      rgba(6, 10, 20, 0.9) 0%,
      rgba(6, 10, 20, 0.35) 42%,
      rgba(6, 10, 20, 0) 78%),
    var(--navy);
  color: #f3f4f6;
  /* ⚠️ ROOM AT THE TOP. The mark was being clipped by the window edge on a
     laptop, which is the most literal form of "touching the borders". */
  padding: 104px 0 100px;
  /* ⚠️ CENTRED NOW THAT THE RENDER HAS GONE. It was set left because the
     render had its subject on the right and left a hole on the left, and type
     belongs where the picture leaves room. With no picture behind it there is
     no hole, and left-aligned words in a wide dark band read as a layout that
     slipped. Michael, 28 Sep 2026: "the hero banner is over to one side too
     much." */
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero .mark {
  /* ⚠️ BIG ENOUGH TO READ AS A ROCKET. At 76px the fins disappeared and the
     mark became an anonymous blob with a tail — the same lesson the app icon
     taught at 60px, one file over.

     ⚠️ AND IT LINES UP WITH THE HEADLINE, not with the middle of the page.
     `margin: 0 auto` left it centred over left-aligned type, which reads as
     two different layouts stacked. The phone rule below puts it back to the
     middle, where the words are centred too. */
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  display: block;
}

.hero h1 {
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  font-weight: 700;
}

.hero .lead {
  font-size: clamp(17px, 3.4vw, 21px);
  color: rgba(243, 244, 246, 0.78);
  margin: 0 auto;
  max-width: 34ch;
}

.hero .soon {
  display: inline-block;
  margin-top: 30px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.1);
  border: 1px solid rgba(243, 244, 246, 0.18);
  font-size: 14px;
  color: rgba(243, 244, 246, 0.82);
}

/* ── the page ────────────────────────────────────────────────────────── */

/* ⚠️ `main.wrap`, NOT `main`. This read `main { padding: 76px 0 96px }` and
   the 76px never once reached the page: `.wrap` is a class and `main` is an
   element, so `.wrap { padding: 0 34px }` outranked it and zeroed the top and
   bottom. That is why the three pictures sat hard against the bottom edge of
   the dark hero with no air at all — Michael, 28 Sep 2026: "they're touching
   the hero banner". Nothing about the number was wrong; it was being thrown
   away. Caught by measuring the gap in a screenshot, not by reading the rule,
   because the rule looks correct. */
main.wrap { padding: 92px 34px 96px; }

h2 {
  margin-top: 64px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 52px 0 18px;
}

h2:first-child { margin-top: 0; }

h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  font-weight: 650;
}

p { margin: 0 0 18px; color: var(--muted); }
p.tight { margin-bottom: 8px; }

main a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  main a { color: #8aa4ff; }
}

ul { margin: 0 0 18px; padding-left: 20px; color: var(--muted); }
li { margin-bottom: 7px; }

/* ═══════════════════════════════════════════════════════════════════════
   Print, not cards
   ═══════════════════════════════════════════════════════════════════════

   ⚠️ THERE ARE NO CARDS ON THIS SITE, AND THAT IS THE WHOLE POINT.

   Playbook 08, which is the most repeated piece of design feedback across
   every one of Michael's projects: **"a stack of identical rounded cards" is
   the tell.** It is what you get when every piece of information is given the
   same container regardless of what it means, and it reads as a template
   because it is one. This page had eight of them before he said so.

   The rule it replaces them with: *instruments are plates, information is
   print.* A phone showing a live screen is an instrument, so it gets a plate —
   a bezel, a shadow, an edge. A sentence about what the app does is print, so
   it gets what print gets: a ruled line, an engraved label, and room. */

.feature {
  border-top: 1px solid var(--line);
  padding: 64px 0;
}
.feature:last-of-type { border-bottom: 1px solid var(--line); }

/* The engraved label does the work a grey card header used to do, without
   the card. */
/* ⚠️ NOT SCOPED TO .feature. It was, so the same label above the privacy
   section rendered as ordinary body text — the engraved style silently did
   nothing in the one place it mattered most. */
.label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 0 0 10px;
}

.feature h3 {
  font-size: clamp(23px, 4.4vw, 29px);
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 12px;
  font-weight: 650;
  color: var(--ink);
}

.feature p { font-size: 17px; margin-bottom: 14px; }
.feature p:last-child { margin-bottom: 0; }

/* A quiet aside, set smaller and indented against a hairline — the shape a
   footnote has in print, rather than a second box. */
.aside {
  border-left: 2px solid var(--line);
  padding-left: 16px;
  margin: 18px 0 0;
  font-size: 15.5px;
  color: var(--faint);
}

/* ── legal pages, which are mostly running text ──────────────────────── */

.doc h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 40px 0 12px;
}

.doc .stamp {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
}

.doc strong { color: var(--ink); }

/* ── chrome ──────────────────────────────────────────────────────────── */

.top {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.top a { color: var(--muted); text-decoration: none; margin-right: 18px; }
.top a:hover { color: var(--ink); }
.top a.home { color: var(--ink); font-weight: 650; }

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
  font-size: 14px;
  color: var(--faint);
}

footer a { color: var(--faint); margin-right: 16px; }

/* ⚠️ The layout must survive a phone. Checked at 320px, which is the
   narrowest screen still in use. */
/* ⚠️ The layout must survive a phone, checked at 320px — the narrowest
   screen still in use — with a real gutter rather than a hairline of one. */
@media (max-width: 480px) {
  .wrap { padding: 0 22px; }
  .hero { padding: 72px 0 76px; }
  /* ⚠️ `main.wrap` HERE TOO, for the same reason as the rule it overrides: a
     bare `main` loses to `.wrap` and the padding is thrown away silently. */
  main.wrap { padding: 52px 22px 64px; }
  .feature { padding: 46px 0; }
  .promise-line { padding: 48px 0; }
  h2 { margin-top: 48px; }
  .closing .said { padding: 38px 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phones, and the screens inside them
   ═══════════════════════════════════════════════════════════════════════

   ⚠️ THE PICTURES ARE REAL SCREENS OF THE REAL APP, photographed on a
   simulator with a pinned demo day (see ios/Capture/DemoData.swift in the app
   repo). They are not mock-ups and must never become mock-ups: Apple rejects
   fabricated screenshots outright, and a marketing site whose pictures do not
   match the product is how a listing comes to advertise a screen that was
   changed hours earlier.

   Regenerate with `./scripts/capture-store-shots.sh iphone` in the app repo
   and re-copy. If a screen changes, the pictures change in the same pass. */

.rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 6px 22px 22px;
  margin: 0 -22px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 auto;
  width: 232px;
  scroll-snap-align: center;
}

/* A plate, not a slab: thin padding, a hairline where the light catches the
   edge, and a deep offset shadow so it lifts off the page. */
.phone {
  padding: 7px;
  border-radius: 38px;
  background: linear-gradient(160deg, #2a3550 0%, #0c1220 55%, #1b2740 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(243, 244, 246, 0.14),
    0 26px 44px -22px rgba(16, 25, 44, 0.55),
    0 5px 14px rgba(16, 25, 44, 0.18);
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 31px;
  background: var(--paper);
}

.shot figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}
.shot figcaption b { color: var(--ink); font-weight: 650; display: block; }

/* One phone, set beside words rather than in a rail.
   ⚠️ THE TEXT COLUMN HAS A CEILING AND THE PHONE GREW. On the old 760px page
   the words had about 420px, which was right. On the wider page the same rule
   handed them 780 — a line nobody reads twice. `minmax(0, 62ch)` keeps the
   measure and leaves the slack as margin instead. */
.beside {
  display: grid;
  grid-template-columns: 280px minmax(0, 62ch);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
  margin: 0 0 20px;
  justify-content: center;
}
.beside.flip { grid-template-columns: minmax(0, 62ch) 280px; }
.beside.flip .phone { order: 2; }

@media (max-width: 860px) {
  .beside, .beside.flip { grid-template-columns: 1fr; gap: 26px; }
  .beside .phone, .beside.flip .phone { order: 0; max-width: 250px; margin: 0 auto; }
}

/* ── the promise, set as print rather than as a second colour field ─── */

/* ⚠️ THIS WAS A NAVY BAND. Playbook 08: one big solid colour field per
   screen, two is a fight — and the hero has already spent it. So the promise
   gets weight from TYPE instead: loud in size, quiet in ink. */
.promise-line {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 66px 0;
  margin: 8px 0 0;
}
.promise-line p.big {
  font-size: clamp(24px, 4.8vw, 33px);
  line-height: 1.26;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 16px;
  max-width: 24ch;
}

/* ── a short ledger of plain facts, ruled like a statement ──────────── */

.ledger { margin: 0; }
.ledger div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.ledger div:first-child { border-top: 1px solid var(--line); }
.ledger dt { color: var(--muted); margin: 0; }
.ledger dd { color: var(--ink); margin: 0; font-weight: 600; text-align: right; }
/* ── a row of short facts ────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.fact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.fact b { display: block; font-size: 17px; margin-bottom: 4px; }
.fact span { font-size: 15px; color: var(--muted); }

.band .fact {
  background: rgba(243, 244, 246, 0.05);
  border-color: rgba(243, 244, 246, 0.12);
}
.band .fact b { color: #f3f4f6; }
.band .fact span { color: rgba(243, 244, 246, 0.7); }


/* ═══════════════════════════════════════════════════════════════════════
   Michael's artwork
   ═══════════════════════════════════════════════════════════════════════

   Six renders he commissioned, 27 Sep 2026, on the same near-black ground as
   the app's dark theme with one blue that matches the accent. They carry the
   page; the phones carry the proof.

   ⚠️ SERVED AS JPEG, NOT PNG, AND THAT WAS MEASURED. As PNG the six came to
   3.5 MB, which on a phone is most of a second before anything appears. At
   quality 82 they are 288 KB and, checked by looking rather than assuming, the
   dark gradients do not band — which is the thing JPEG usually gets wrong and
   the only reason this needed checking.

   ⚠️ AND THEY ARE DECORATION, so every one is alt="" and the sentence beside
   it carries the meaning. A screen reader should not be read a description of
   a render. The PHONE pictures are the opposite — those are evidence, and each
   has a real description. */

/* ⚠️ THE RENDER AND ITS SCRIM ARE GONE FROM THE HERO. The rules are kept,
   unused, only so that a stale cached page does not draw a bare picture with
   no gradient over it while the new HTML is on its way. Nothing references
   them now; the hero's own two glows do the whole job. */
.hero-art {
  position: absolute;
  inset: 0;
  background: url('/assets/art/01-hero-banner.jpg') center right / cover no-repeat;
  opacity: .55;
  pointer-events: none;
}

/* ── three real screens, under the words ─────────────────────────────── */

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 2.6vw, 30px);
  margin: 54px auto 0;
  max-width: 860px;
}
/* ⚠️ THE OUTER TWO ARE SMALLER AND SET DOWN, not the same size shuffled. Three
   identical phones in a row read as a contact sheet; one stepped forward reads
   as the product and two as context. */
.hero-phones .phone { flex: 0 1 232px; }
.hero-phones .side { flex-basis: 196px; margin-bottom: 26px; opacity: .88; }
.hero-phones .lead-phone { flex-basis: 250px; }

@media (max-width: 700px) {
  /* ⚠️ ONE PHONE, NOT THREE SHRUNK. Three phones squeezed into a phone are a
     diagram of nothing — each screen becomes unreadable and the row stops
     being evidence, which is the only reason it is here. */
  .hero-phones .side { display: none; }
  .hero-phones .lead-phone { flex-basis: 250px; }
  .hero-phones { margin-top: 40px; }
}
/* ⚠️ THE WORDS SIT ON A SCRIM, NOT STRAIGHT ON THE PICTURE. White type over a
   render is legible until the render changes; a gradient underneath means it
   cannot stop being legible. Playbook 08 on a brand colour that became
   unreadable text: a colour that works as a field does not work as ink. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 14, 24, .97) 0%,
    rgba(10, 14, 24, .9) 34%,
    rgba(10, 14, 24, .55) 62%,
    rgba(10, 14, 24, .2) 100%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

@media (max-width: 760px) {
  /* The hero is centred at every width now, so there is nothing to put back.
     These three lines stay as a floor under it. */
  .hero { text-align: center; }
  .hero .mark { margin: 0 auto 24px; }
  .hero .lead { margin: 0 auto; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10, 14, 24, .72) 0%,
      rgba(10, 14, 24, .88) 55%,
      rgba(10, 14, 24, .95) 100%);
  }
  .hero-art { opacity: .4; }
}

/* ── the triptych ────────────────────────────────────────────────────── */

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin: 0 0 24px;
}
.three figure { margin: 0; }
.three img {
  display: block;
  width: 100%;
  border-radius: 14px;
  background: #0b0f18;
}
.three figcaption { margin-top: 14px; }
.three b {
  display: block;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 650;
}
.three span { font-size: 15.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
  .three { grid-template-columns: 1fr; gap: 26px; }
  .three img { max-width: 260px; }
}

/* ── the closing banner ──────────────────────────────────────────────── */

.closing {
  position: relative;
  margin: 62px 0 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  background: #0b0f18;
}
.closing img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* ⚠️ ANCHORED RIGHT. Centred, the render's blue button sat directly under
     the headline and the words became unreadable over it. The picture has its
     subject on the right and its empty space on the left, which is where the
     words go — so the crop has to respect that rather than centre blindly. */
  object-fit: cover;
  object-position: right center;
  opacity: .62;
}

/* The same scrim idea as the hero: words never sit straight on a render. */
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 15, 24, .95) 0%,
    rgba(11, 15, 24, .8) 45%,
    rgba(11, 15, 24, .25) 100%);
}
.closing .said {
  position: relative;
  z-index: 2;
  padding: 52px 44px;
  max-width: 28ch;
}
.closing h3 {
  color: #f3f4f6;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -0.022em;
  line-height: 1.16;
  margin: 0 0 10px;
  font-weight: 650;
  text-wrap: balance;
}
.closing p { color: rgba(243, 244, 246, .75); margin: 0; font-size: 16px; }