/* ===========================================================================
   Provaro — provaro.12f.dk

   The brand mark is a document, with a photo on it, with a red circle drawn
   on the photo. The page is built from that: white paper laid on cement grey,
   navy where the work is dark, and one red — the app's own markup red, used
   only for annotation. Red never fills a button and never sets a word of type.
   =========================================================================== */

/* ---------- Fonts (self-hosted: no font CDN gets to see a visitor) --------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-400_800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-400_800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  --ground: #E8E8E3;      /* cement / fibre board — the page it all sits on */
  --ground-2: #DEDFD8;
  --paper: #FFFFFF;       /* documents, cards, anything that is "the artifact" */
  --ink: #101720;
  --ink-2: #4E5661;
  --ink-3: #5F676F;
  --rule: #D0D2CB;
  --rule-2: #E4E5DF;
  --navy: #0A1D3A;        /* the dark work: hero, no-signal, closing call */
  --navy-2: #10305F;
  --blue: #0A52BE;        /* the brand blue — links and the mark, nothing else */
  --markup: #E23D2E;      /* annotation only: strokes, dots, placement outlines */

  --wrap: 1140px;
  --gap: clamp(20px, 4vw, 28px);
  --sec: clamp(68px, 7.6vw, 112px);

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --lift: 0 1px 1px rgba(16, 23, 32, .05), 0 8px 24px rgba(16, 23, 32, .07);
  --lift-2: 0 2px 4px rgba(16, 23, 32, .07), 0 24px 60px rgba(16, 23, 32, .16);
  --lift-3: 0 4px 8px rgba(4, 10, 22, .3), 0 40px 90px rgba(4, 10, 22, .45);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
/* the width/height attributes are there to reserve layout space; height must
   still be free to follow whatever width CSS lands on */
img { height: auto; }
figure, figcaption { margin: 0; }

a { color: var(--blue); }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------------------------------------------------------- */
h1, h2, h3 { margin: 0; text-wrap: balance; }

/* each sentence of the h1 is its own inline-block, so it takes a line of its
   own where there is room and wraps inside itself where there isn't */
h1 .ln { display: inline-block; }

h1 {
  text-wrap: pretty;
  font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -.028em;
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -.022em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -.01em;
  line-height: 1.3;
}

p { margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.head { max-width: 660px; }
.head .eyebrow { display: block; margin-bottom: 18px; }
.head h2 + p { margin-top: 16px; max-width: 52ch; }
.head.centered p { margin-inline: auto; }
.head.centered { margin-inline: auto; text-align: center; }

.section { padding: var(--sec) 0; }
.section > .wrap > .head { margin-bottom: clamp(38px, 5vw, 58px); }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: #000; }

.btn-line { border-color: rgba(16, 23, 32, .5); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: rgba(16, 23, 32, .05); }

.on-dark .btn-line,
.hero .btn-line { border-color: rgba(255, 255, 255, .34); color: #fff; }
.on-dark .btn-line:hover,
.hero .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Apple's own badge artwork, self-hosted so the page still fetches nothing from
   anywhere but itself. It is supplied as-is on purpose: the guidelines want the
   badge unmodified, at 40px or taller, with clear space around it — so this rule
   sets a height and gets out of the way. The artwork carries its own black plate
   and a light outline, which is what lets the same file sit on the navy hero and
   on the cement pricing card without a themed variant.

   An earlier pass drew the lockup in markup instead, to set it in the page's own
   type. It looked right until you compared the Apple mark to a real one — it had
   no leaf and no bite. Do not rebuild it. */
.appstore {
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.appstore img { height: 52px; width: auto; }
.appstore:hover { transform: translateY(-1px); opacity: .88; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- Header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #fff;
}
.site-header.is-stuck {
  background: rgba(232, 232, 227, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--rule);
  color: var(--ink);
}
.header-inner { display: flex; align-items: center; gap: 30px; height: 68px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand-name {
  font-size: 1.18rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.02em;
}

.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
  color: inherit;
  opacity: .72;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  transition: opacity .15s ease;
}
.site-nav a:hover { opacity: 1; }
.is-stuck .site-nav a { color: var(--ink-2); opacity: 1; }
.is-stuck .site-nav a:hover { color: var(--ink); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: inherit;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.header-cta:hover { background: rgba(255, 255, 255, .22); }
.is-stuck .header-cta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.is-stuck .header-cta:hover { background: #000; }

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: -68px;
  padding: calc(68px + clamp(48px, 5.5vw, 72px)) 0 clamp(60px, 6vw, 84px);
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(16, 48, 95, .95), transparent 62%),
    radial-gradient(90% 70% at 4% 100%, rgba(10, 82, 190, .22), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.hero .eyebrow { color: #8FA3C0; }
.hero h1 { margin: 18px 0 22px; }
.hero .lede { color: #BCC7D8; max-width: 42ch; }
.hero .actions { margin-top: 32px; }

.hero-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.hero-ticks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: #A7B5CA;
}
.hero-ticks svg { flex: none; color: #5B7FB5; }

/* --- Hero composition: the photo, lifted off the page it is about to become.
   The dashed outline is the page's own photo slot showing through, so the two
   objects read as one action rather than as two pictures side by side. The
   percentages below trace .doc's internal box at font-size 10px — see .doc. --- */
.handover {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  container-type: inline-size;
}
.handover .doc { position: relative; box-shadow: var(--lift-3); }

/* the page's own photo slot, still empty — where the capture drops in. The
   extra top margin is the room the lifted photo needs so it never covers the
   caption line above it. */
.handover .doc-plate { margin-top: 2.2em; }
.doc-shot.empty {
  border: 2px dashed var(--markup);
  border-radius: 3px;
  overflow: visible;
}
.capture {
  position: absolute;
  inset: -7% 7% 7% -7%;   /* same size as the slot, lifted up and to the left */
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--lift-3);
}
.capture img { width: 100%; height: 100%; object-fit: cover; }
.capture-tag {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 5px 9px 4px;
  border-radius: 2px;
  background: rgba(6, 12, 22, .78);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- The report page (used at hero scale and full scale) ----------- */
/* The page holds A4 proportions and clips anything that does not fit, so its
   type has to scale with its own width rather than sit at a fixed size — every
   measurement inside is an em off this one value, tuned at 1px per 37.3px of
   page width. cqw reads the width from the wrapper that owns the page. */
.doc {
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-size: 2.68cqw;
  line-height: 1.45;
  aspect-ratio: 1 / 1.414;
  padding: 2.4em 2.2em 1.6em;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
}
.doc-head {
  display: flex;
  align-items: center;
  gap: .7em;
  padding-bottom: .9em;
  border-bottom: 1px solid var(--rule-2);
}
.doc-head img { width: 2em; height: 2em; border-radius: .45em; }
.doc-firm { font-weight: 700; font-size: 1.05em; letter-spacing: -.01em; }
.doc-title {
  margin-top: 1.5em;
  font-size: 1.6em;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.doc-meta {
  margin-top: .7em;
  font-family: var(--mono);
  font-size: .82em;
  line-height: 1.75;
  color: var(--ink-2);
}
.doc-caption {
  margin-top: 1.4em;
  font-size: 1.05em;
  font-weight: 500;
  color: var(--ink);
}
/* Each photo gets a slot that takes its height from what the page has left,
   and the photo itself is out of flow inside that slot. Nothing an image does
   can then change the slot, so the page cannot overflow its own A4 box —
   which is what put a footer underneath a photograph in WebKit. */
.doc-plate {
  margin-top: 1em;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .7em;
}
.doc-shot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1px;
}
.doc-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doc-foot {
  margin-top: 1.2em;
  padding-top: .8em;
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  font-family: var(--mono);
  font-size: .72em;
  line-height: 1.65;
  color: var(--ink-2);
}
.doc-foot strong { display: block; font-weight: 500; color: var(--ink); }
.doc-foot > :last-child { text-align: right; }

/* ---------- Ledger strip -------------------------------------------------- */
.ledger { background: var(--navy-2); color: #fff; }
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ledger-item {
  padding: 30px 26px 32px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.ledger-item:first-child { border-left: 0; padding-left: 0; }
.ledger-item strong {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -.025em;
  line-height: 1.05;
}
/* Direct child only: the tile's caption. The headline <strong> can carry a
   span of its own — the price, written in by tools/fetch-appstore-price.py —
   and that one must stay headline-sized, not drop to caption grey. */
.ledger-item > span {
  display: block;
  margin-top: 10px;
  font-size: .87rem;
  line-height: 1.45;
  color: #A9B8CE;
}

/* ---------- Stakes -------------------------------------------------------- */
.stakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.stake {
  background: var(--paper);
  border-radius: 6px;
  padding: 30px 28px 32px;
  box-shadow: var(--lift);
}
.stake h3 { margin-bottom: 12px; }
.stake p { color: var(--ink-2); font-size: .97rem; }

/* ---------- Device switch ------------------------------------------------- */
/* The app is sold as iPhone *and* iPad, so every screen on the page exists in
   both. A .device-pick holds a radio pair and the shots they govern; :has()
   turns the checked one into the tokens below, so the swap is pure CSS and the
   page still works with scripting off. Without :has() (nothing current) both
   devices simply show, stacked — which is still the honest answer.

   The iPad is sized to stand the same height as the phone rather than the same
   width: 264 / 176 is 2264/2952 against 1406/2822, the two frames' aspects. */
.device-pick {
  --shot-col: 190px;
  --shot-w: 176px;
  --reel-w: min(330px, 76vw);
}
.device-pick:has(.device-radio[value="ipad"]:checked) {
  --shot-col: 278px;
  --shot-w: 264px;
  --reel-w: min(430px, 84vw);
}
.device-pick:has(.device-radio[value="ipad"]:checked) .on-iphone { display: none; }
.device-pick:has(.device-radio[value="iphone"]:checked) .on-ipad { display: none; }

.switch-row { margin-bottom: 26px; }
.switch-row.right { text-align: right; }
.switch-row:not(.right) { text-align: center; }

.device-switch {
  position: relative;   /* keeps the hidden radios anchored here, not adrift */
  display: inline-flex;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper);
  text-align: left;
}
/* the radios themselves are only a state store — the labels are the control */
.device-switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.device-switch label {
  padding: 8px 18px;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}
.device-switch label:hover { color: var(--ink); background: rgba(16, 23, 32, .05); }
.device-switch input:checked + label { background: var(--ink); color: #fff; }
.device-switch input:focus-visible + label {
  outline: 3px solid var(--markup);
  outline-offset: 2px;
}

/* ---------- Steps --------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--shot-col);
  align-items: center;
  gap: clamp(22px, 3.4vw, 46px);
  background: var(--paper);
  border-radius: 6px;
  padding: 32px 36px;
  box-shadow: var(--lift);
}
.step-n {
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: .78;
  letter-spacing: -.05em;
  color: var(--ground);
  user-select: none;
}
.step-body { max-width: 54ch; }
.step-body .eyebrow { display: block; margin-bottom: 12px; }
.step-body h3 { font-size: 1.4rem; font-stretch: 106%; }
.step-body p { margin-top: 12px; color: var(--ink-2); font-size: .97rem; }
.step-shot { justify-self: center; }
.step-shot img { width: var(--shot-w); filter: drop-shadow(0 20px 30px rgba(16, 23, 32, .22)); }

/* ---------- Video --------------------------------------------------------- */
.reel { display: grid; place-items: center; }
.reel-frame {
  position: relative;
  width: var(--reel-w);
  aspect-ratio: 1406 / 2822;
  filter: drop-shadow(0 26px 44px rgba(16, 23, 32, .3));
}
/* The video plays inside the screen aperture of assets/img/device-frame.png,
   which is laid over it. The offsets are that aperture — (102, 100), 1206x2622 —
   as percentages of the 1406x2822 frame; see tools/frame-screens.py. The corner
   radius is 180 of those frame pixels (14.9% of the aperture's width, 6.86% of
   its height): rounded enough that the video never pokes out past the device's
   rounded corners, shallow enough that it still fills the aperture completely. */
.reel-frame video {
  position: absolute;
  left: 7.2546%;
  top: 3.5436%;
  width: 85.7752%;
  height: 92.9129%;
  border-radius: 14.9% / 6.86%;
  object-fit: cover;
  background: #000;
}
/* Same construction for the iPad: aperture (100, 100), 2064x2752 inside a
   2264x2952 frame. Its screen corners are far shallower than the phone's —
   52 of those aperture pixels, 2.52% of its width and 1.89% of its height. */
.reel-frame.reel-ipad { aspect-ratio: 2264 / 2952; }
.reel-frame.reel-ipad video {
  left: 4.4170%;
  top: 3.3875%;
  width: 91.1661%;
  height: 93.2249%;
  border-radius: 2.52% / 1.89%;
}
.reel-frame .bezel { position: absolute; inset: 0; width: 100%; pointer-events: none; }
.reel figcaption {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- Signature: the annotated report ------------------------------ */
.section.deliverable { background: var(--ground-2); }

/* The page is 560px wide inside a 940px box, leaving a 190px margin either
   side for the callout labels. The leaders between the two are measured from
   the live layout by the script at the foot of the page — see drawCallouts —
   so they stay on target through any width, font swap or wrap change. Until
   that runs, the labels are the plain list underneath instead. */
.annotated {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}
.doc-frame {
  max-width: 560px;
  margin-inline: auto;
  container-type: inline-size;
}
.annotated .doc { box-shadow: var(--lift-2); }
@media (min-width: 1120px) {
  .annotated.has-lines { padding: 0 190px; }
  .annotated.has-lines .doc-frame { max-width: none; }
}
/* The page sits in a container-query wrapper, and inline-size containment makes
   that wrapper its own stacking context — so without a z-index here the paper
   paints over the leaders and every line stops dead at the page edge. */
.annotated-lines {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.has-lines .annotated-lines { display: block; }
.annotated-lines path {
  fill: none;
  stroke: var(--markup);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.annotated-lines circle { fill: var(--markup); }

.callout { display: none; }
.has-lines .callout {
  display: block;
  position: absolute;
  z-index: 2;
  left: 0;
  width: 160px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.has-lines .callout.right { left: auto; right: 0; }
.callout b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.callout.right { text-align: right; }

.callout-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  max-width: 560px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
}
.callout-list li {
  padding-top: 14px;
  border-top: 2px solid var(--markup);
  font-size: .9rem;
  color: var(--ink-2);
}
.callout-list b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 5px;
}
.has-lines .callout-list { display: none; }

/* ---------- Features ------------------------------------------------------ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.feature {
  background: var(--paper);
  padding: 28px 26px 30px;
}
.feature svg { color: var(--ink); margin-bottom: 16px; }
.feature h3 { font-size: 1.02rem; }
.feature p { margin-top: 9px; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Dark bands ---------------------------------------------------- */
.section.on-dark { background: var(--navy); color: #fff; }
.section.on-dark .eyebrow { color: #8FA3C0; }
.section.on-dark .lede,
.section.on-dark p { color: #BCC7D8; }

.offline-inner { display: grid; gap: 22px; max-width: 700px; }
.offline-inner h2 { max-width: 18ch; }

/* ---------- Privacy ------------------------------------------------------- */
/* A column of plain argument, used where a section is a paragraph rather than a
   grid of things: #privacy, and #no-list. */
.prose-inner, .privacy-inner { display: grid; gap: 20px; }
.prose-inner p, .privacy-inner p { color: var(--ink-2); }
.privacy-inner .receipt {
  margin-top: 6px;
  padding: 22px 24px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: var(--lift);
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 2;
  color: var(--ink-2);
}
.receipt span { display: flex; justify-content: space-between; gap: 20px; }
.receipt span::after {
  content: attr(data-value);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Pricing ------------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: var(--gap);
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}
.plan {
  position: relative;
  background: var(--paper);
  border-radius: 6px;
  padding: 34px 32px 36px;
  box-shadow: var(--lift);
  display: flex;
  flex-direction: column;
}
.plan-pro { box-shadow: var(--lift-2); }
.plan-flag {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan h3 { font-size: 1.25rem; }
.plan-price {
  margin-top: 14px;
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -.032em;
  line-height: 1;
}
.plan-price small {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.plan-bill { margin-top: 16px; font-size: .93rem; color: var(--ink-2); }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 0; flex: 1; }
.plan li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: .95rem;
  border-top: 1px solid var(--rule-2);
}
.plan li:first-child { border-top: 0; }
.plan li svg {
  position: absolute;
  left: 0;
  top: 15px;
  color: var(--ink);
}
.plan .btn, .plan .appstore { align-self: flex-start; }
.plan-note { margin-top: 14px; font-size: .82rem; color: var(--ink-3); }

/* ---------- FAQ ----------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  border-top: 1px solid var(--rule);
  padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 1.06rem;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { padding: 0 2px 22px; max-width: 62ch; color: var(--ink-2); font-size: .97rem; }

/* ---------- Closing call -------------------------------------------------- */
.close-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
}
.close-inner h2 { max-width: 20ch; }
.close-inner .lede { margin-top: 16px; max-width: 40ch; }
.close-actions { display: grid; gap: 16px; justify-items: start; }
.close-actions .fineprint {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #8FA3C0;
  max-width: 30ch;
}

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding: 46px 0 54px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
}
.footer-brand { display: grid; gap: 6px; }
.footer-tag {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-nav a { color: var(--ink-2); font-size: .9rem; text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.copyright { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }

/* ---------- Motion -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* the page-load handover: the paper arrives, the photo lands on it */
.handover .doc,
.handover .capture,
.handover .doc-shot.empty { animation-fill-mode: both; }
.handover .doc { animation: paper-in .8s cubic-bezier(.2, .7, .3, 1) .1s; }
.handover .doc-shot.empty { animation: slot-in .5s ease .45s; }
.handover .capture { animation: photo-land .85s cubic-bezier(.2, .8, .3, 1) .55s; }

@keyframes paper-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes slot-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes photo-land {
  from { opacity: 0; transform: rotate(-6deg) translate(-26px, -54px) scale(1.1); }
  to { opacity: 1; transform: none; }
}

/* the callout leader lines draw themselves, the way the app draws.
   --len is each path's own measured length, set by drawCallouts. */
.annotated-lines path {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset .7s cubic-bezier(.3, .7, .3, 1);
}
.annotated-lines circle { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.annotated.is-in .annotated-lines path { stroke-dashoffset: 0; }
.annotated.is-in .annotated-lines circle { scale: 1; }
.annotated.is-in .annotated-lines g:nth-child(1) * { transition-delay: .05s; }
.annotated.is-in .annotated-lines g:nth-child(2) * { transition-delay: .2s; }
.annotated.is-in .annotated-lines g:nth-child(3) * { transition-delay: .35s; }
.annotated.is-in .annotated-lines g:nth-child(4) * { transition-delay: .5s; }
.has-lines .callout { opacity: 0; transition: opacity .5s ease; }
.annotated.is-in.has-lines .callout { opacity: 1; }
.annotated.is-in.has-lines .callout:nth-of-type(1) { transition-delay: .4s; }
.annotated.is-in.has-lines .callout:nth-of-type(2) { transition-delay: .55s; }
.annotated.is-in.has-lines .callout:nth-of-type(3) { transition-delay: .7s; }
.annotated.is-in.has-lines .callout:nth-of-type(4) { transition-delay: .85s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .handover .doc, .handover .capture, .handover .doc-shot.empty { animation: none; }
  .annotated-lines path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .annotated-lines circle { scale: 1; transition: none; }
  .has-lines .callout { opacity: 1; transition: none; }
  .btn:hover, .appstore:hover { transform: none; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 46px; }
  .handover { max-width: 430px; }
  .ledger-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger-item { padding: 26px 22px 28px; }
  .ledger-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger-item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }
  .stakes-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: auto minmax(0, 1fr); padding: 28px; }
  .step-n { font-size: 3.4rem; align-self: start; }
  .step-shot { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .device-pick { --shot-w: 152px; }
  .device-pick:has(.device-radio[value="ipad"]:checked) { --shot-w: 228px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; }
  .close-inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .header-inner { height: 62px; gap: 14px; }
  .hero { margin-top: -62px; padding-top: calc(62px + 46px); }
  .brand-name { font-size: 1.06rem; }
  .header-cta { padding: 8px 13px; font-size: .82rem; }
  .actions { gap: 12px; }
  /* the badge keeps its own size — Apple's artwork is not ours to stretch */
  .btn { width: 100%; justify-content: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .callout-list { grid-template-columns: 1fr; }
  .doc-foot { grid-template-columns: 1fr; gap: .6em; }
  .doc-foot > :last-child { text-align: left; }
  .plan { padding: 28px 24px 30px; }
  .receipt span { flex-direction: column; gap: 0; line-height: 1.6; padding: 4px 0; }
  .receipt span::after { text-align: left; }
}