/* OpusActa website — tokens and page styles. See DESIGN.md. */

/* Fonts, self-hosted: latin subset as served by Google Fonts (SIL OFL, see assets/fonts/OFL-*.txt).
   Archivo is one variable file for both weights. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/archivo.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: 800;
  font-display: swap;
  src: url("assets/fonts/archivo.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: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/atkinson-400.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: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/atkinson-700.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;
}

:root {
  --bg: #F4F5F2;
  --surface: #FFFFFF;
  --navy: #02142A;
  --slate: #455A64;
  --slate-dark: #37474F;
  --gold: #D6AE65;
  --ink: #111827;
  --muted: #4B5563;
  --rule: rgba(2, 20, 42, 0.12);
  --placeholder: #E6E4DF;
  --on-dark: #FFFFFF;

  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  --text-h1: clamp(2.25rem, 6vw + 1rem, 4rem);
  --text-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  --text-h3: 1.3125rem;
  --text-body: 1.125rem;
  --text-caption: 0.9375rem;
  --text-price: 3rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-14: 112px;

  --radius: 10px;
  --radius-sheet: 3px;
  --pill: 999px;

  --shadow-sheet: 0 8px 24px rgba(2, 20, 42, 0.12);

  --container: 1120px;
  --container-narrow: 760px;
  --gutter: 20px;
  --section: 64px;
  --nav-height: 64px;
  --measure: 34em;

  --lens-size: 88px;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;
}

@media (min-width: 960px) {
  :root {
    --section: 112px;
    --lens-size: 120px;
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

::selection {
  background: var(--navy);
  color: var(--bg);
}

img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
}

p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-2); }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--slate-dark); }

:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 2px;
}

.download :focus-visible { outline-color: var(--on-dark); }

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--slate);
  color: var(--on-dark);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--pill);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section); }

.band { background: var(--surface); }

.section-text { color: var(--ink); }
.section-text + .section-text { margin-top: var(--space-2); }

.small-print {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--pill);
  border: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.button-primary {
  background: var(--slate);
  color: var(--on-dark);
}
.button-primary:hover {
  background: var(--slate-dark);
  color: var(--on-dark);
}

.button-outline { box-shadow: inset 0 0 0 1px var(--on-dark); }

.button[aria-disabled="true"] { cursor: default; }

.button-store { min-width: 148px; }

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-4);
}
.store-buttons .button { flex: 1 1 148px; }

@media (min-width: 640px) {
  .store-buttons .button { flex: 0 0 auto; }
}

/* The app icon beside the store buttons, as on a store listing. */
.store-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-4);
}
.store-row .store-buttons {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.app-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* ---------- Slots, sheets, placeholders ---------- */

/* A slot is a photo frame: the label underneath shows only if the image is missing. */
.slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  background: var(--placeholder);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.slot-label { padding: var(--space-2); }
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-hero { aspect-ratio: 4 / 5; }
.slot-role { aspect-ratio: 3 / 4; }
.slot-photo { aspect-ratio: 3 / 2; }
.slot-wide { aspect-ratio: 3 / 2; border-radius: 0; }
/* App screenshot slots: phone-shaped, labelled until the owner supplies the files. */
.slot-screen { aspect-ratio: 9 / 19.5; container-type: inline-size; }

/* Phone body: a plain navy rounded frame around a screenshot, the standard for every screenshot slot.
   The slot takes the body's height; no shadow, notch or buttons. Bezel and radius scale with the slot
   width (the slot is an inline-size container), so the body looks the same at 56px and at 300px. */
.phone {
  --bezel: 3.6cqw;
  --r: 12.6cqw;
  display: block;
  padding: var(--bezel);
  border-radius: var(--r);
  background: var(--navy);
  width: 100%;
}
.phone > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r) - var(--bezel));
}

/* Sliding screens: two or more screenshots stacked in one phone body, crossfading (screens.js moves .is-active).
   The first image gives the body its height; the others sit over it inside the bezel. The slot around it drops
   its grey box, ratio and clipping so the arrows can sit under the phone (below 600px) or beside it (from 600px). */
.slot-screen:has(> .screens) {
  display: block;
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  border-radius: 0;
}
.screens { position: relative; }
/* The phone is at most 300px wide and never taller than 70% of the window: its width is the least of 300px,
   32vh (70vh over the body's 2.2 height-to-width ratio) and the slot; bezel and radius follow that width. */
.slot-screen:has(> .screens) > .screens {
  --w: min(300px, 32vh, 100cqw);
  --bezel: calc(var(--w) * 0.036);
  --r: calc(var(--w) * 0.126);
  width: var(--w);
  margin-inline: auto;
}
.screens > img {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.screens > img.is-active { opacity: 1; }
.screens > img + img {
  position: absolute;
  inset: var(--bezel);
  width: calc(100% - 2 * var(--bezel));
  height: calc(100% - 2 * var(--bezel));
}
.screens-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-2);
}
.screens-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 0 2px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: none;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.screens-nav button:hover {
  background: var(--navy);
  color: var(--on-dark);
}
/* From 600px the arrows sit beside the phone at mid-height. The slot widens by an arrow and its 12px clearance
   on each side (396px at most, and no wider than the height-capped phone plus 96px) and the phone keeps its
   300px maximum, centred in the slot; where the column or the window is shorter the phone gives way, never the
   clearance. The nav covers the slot and holds one arrow at each edge, vertically centred on the body. */
@media (min-width: 600px) {
  .entry-screen .slot-screen:has(> .screens) {
    width: calc(60% + 96px);
    max-width: min(396px, calc(32vh + 96px));
  }
  .slot-screen:has(> .screens) > .screens {
    --w: min(300px, 32vh, calc(100cqw - 96px));
  }
  .slot-screen:has(> .screens) > .screens-nav {
    position: absolute;
    inset: 0;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin: 0;
    pointer-events: none;
  }
  .slot-screen:has(> .screens) > .screens-nav button { pointer-events: auto; }
}
@media (min-width: 960px) {
  .entry-screen .slot-screen:has(> .screens) { width: 100%; }
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: var(--space-2);
}

.placeholder-phone {
  aspect-ratio: 9 / 19.5;
  width: min(100%, 260px);
}

.sheet {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.414;
  width: 100%;
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* ---------- The lens ---------- */

/* A gold ring over a detail, then a call-out line: angled at 45°, then horizontal, ending in a dot.
   Geometry is set per use in container-query units of the figure it sits in. */
.lens {
  --r: calc(var(--lens-size) / 2);
  --cx: 50%;
  --cy: 50%;
  --a: 45deg;
  --kx: 0.7071;
  --ky: 0.7071;
  --l1: 60px;
  --l2: 40px;
  --dot: calc(100% - 5px);
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  z-index: 4;
  width: var(--lens-size);
  height: var(--lens-size);
  margin: calc(-1 * var(--r)) 0 0 calc(-1 * var(--r));
  border: 4px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
}
.lens::before,
.lens::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
}
.lens::before {
  width: var(--l1);
  height: 2px;
  margin-top: -1px;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: rotate(var(--a)) translateX(var(--r));
}
.lens::after {
  width: var(--l2);
  height: 10px;
  margin-top: -5px;
  left: calc(50% + (var(--r) + var(--l1)) * var(--kx));
  top: calc(50% + (var(--r) + var(--l1)) * var(--ky));
  background:
    radial-gradient(circle 4px at var(--dot) 50%, var(--gold) 98%, transparent 100%),
    linear-gradient(var(--gold), var(--gold)) 0 50% / 100% 2px no-repeat;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  gap: var(--space-3);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
}
.nav-brand img { height: 36px; width: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  border-radius: var(--pill);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle-icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out);
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--pill);
  transition: background-color var(--duration) var(--ease-out);
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--navy); background: rgba(2, 20, 42, 0.06); }

.nav-cta { min-height: 44px; padding-block: 8px; font-size: 1rem; }

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }

  .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .nav-menu.is-open { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-1);
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
  }

  .nav-cta { min-height: 52px; }
}

/* ---------- Hero ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--muted);
}

.lede {
  margin-top: var(--space-3);
  color: var(--ink);
}

.hero-price {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

.trust-strip,
.uses {
  max-width: var(--measure);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--muted);
}
.trust-strip { margin-top: var(--space-3); }
.trust-strip li,
.uses li { display: inline; }
.trust-strip li + li::before,
.uses li + li::before { content: "\00b7\00a0"; }

.hero-visual {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* The composition: photo top-left, PDF sheet overlapping its bottom-right corner, phone slot beside the sheet.
   Everything is measured in cqw of the figure so the lens line always lands on the Observation 1 tile of the phone. */
.hero-figure {
  width: 100%;
  max-width: 520px;
  margin: 0;
  container-type: inline-size;
}

.hero-stage {
  position: relative;
  padding-bottom: calc(48.08cqw - 32px);
}

.slot-hero { width: 70cqw; }

.hero-sheet {
  position: absolute;
  left: calc(70cqw - 32px);
  top: calc(87.5cqw - 32px);
  width: 34cqw;
  padding: 0;
  z-index: 3;
}
.hero-sheet img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.hero-phone {
  position: absolute;
  left: calc(50cqw - 44px);
  bottom: 0;
  width: 20cqw;
  z-index: 2;
  display: block;
  aspect-ratio: auto;
  background: none;
  font-size: 0.6875rem;
  line-height: 1.25;
}
.hero-phone .slot-label { padding: 6px; }

/* Ring on the brick in hand (47.5% across, 46.7% down the 70cqw-wide photo, 28% of its width in diameter).
   The line drops straight down, then runs right to the Observation 1 tile of the screenshot, whose centre is
   27.9% across and 30.7% down the image inside the phone body (slot left 50cqw - 44px, width 20cqw, bottom on
   the stage bottom, 3.6cqw bezel). */
.lens-hero {
  --lens-size: 19.6cqw;
  --cx: 33.25cqw;
  --cy: 40.9cqw;
  --a: 90deg;
  --kx: 0;
  --ky: 1;
  --l1: calc(54.85cqw - 27px);
  --l2: calc(22.33cqw - 38px);
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--space-8);
  }
  .hero-visual { justify-content: flex-end; }
  .hero-figure { max-width: none; }
  .hero-stage { padding-bottom: 36.06cqw; }
  .hero-sheet { left: 61.5cqw; top: 75.48cqw; }
  .hero-phone { left: calc(43.5cqw - 12px); width: 18cqw; font-size: 0.75rem; }
  .lens-hero {
    --l1: calc(45.83cqw + 6px);
    --l2: calc(15.27cqw - 6px);
  }
}

/* ---------- Who: market tiles ---------- */

.roles {
  display: flex;
  gap: 12px;
  margin-top: var(--space-5);
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0 var(--gutter);
  scrollbar-width: none;
}
.roles::-webkit-scrollbar { display: none; }

.roles li {
  flex: 0 0 min(42%, 230px);
  scroll-snap-align: start;
}

.role { margin: 0; }
.role figcaption {
  margin-top: 10px;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--navy);
}

.uses { margin-top: var(--space-5); }
#who .small-print { margin-top: var(--space-3); }

@media (min-width: 640px) {
  .roles li { flex: 0 0 calc((100% - 24px) / 3.3); }
}

@media (min-width: 960px) {
  .roles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }
  .roles li { flex: none; }
}

/* ---------- How: steps ---------- */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.steps {
  display: grid;
  gap: var(--space-4);
}

.step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.step h3 { margin-bottom: var(--space-1); }

.how-note { margin-top: var(--space-2); }

@media (min-width: 960px) {
  .steps { grid-column: 1; grid-row: 1; gap: var(--space-5); }
  .how-note { grid-column: 1; grid-row: 2; margin-top: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* ---------- Why: photo and text pairs ---------- */

.entries {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-5);
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.entry-body { min-width: 0; }
.entry-body > p { margin-top: var(--space-1); }

.entry-list {
  display: grid;
  gap: 10px;
  margin-top: var(--space-2);
}
.entry-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-caption);
  line-height: 1.5;
  max-width: var(--measure);
}
.entry-list strong { font-weight: 700; }
.entry-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

/* Screenshot entries: the phone slot is 60% wide (300px at most) and centred on phones, centred in a 40% column beside the text from 960px. */
.entry-screen .slot-screen {
  width: 60%;
  max-width: 300px;
  justify-self: center;
}

@media (min-width: 960px) {
  .entries { gap: var(--space-10); }
  .entry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
  .entry-screen { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .entry-screen:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .entry-screen .slot-screen {
    width: 100%;
    justify-self: center;
  }
  .entry:nth-child(even) .slot-photo,
  .entry:nth-child(even) .slot-screen { order: 2; }
}

/* ---------- Report: cover sheets ---------- */

.covers {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0 var(--gutter);
  scrollbar-width: none;
}
.covers::-webkit-scrollbar { display: none; }

.cover {
  position: relative;
  flex: 0 0 min(72%, 320px);
  scroll-snap-align: start;
  container-type: inline-size;
}

.cover-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  margin-top: var(--space-2);
  font-size: 1rem;
}
.cover-caption strong { line-height: 1.5; }
.cover-caption strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
}

.link-muted {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 640px) {
  .covers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }
  .cover { flex: none; }
}

/* Sample previews: the first three pages of each PDF as one strip, drifting up and back inside
   the sheet (141.4cqw is the sheet's height, so the far end shows the strip's foot). Paused under
   the pointer, while off screen (screens.js sets .is-visible) and under reduced motion. */
.sheet-link { display: block; color: inherit; text-decoration: none; }
.cover .sheet { display: block; padding: 0; overflow: hidden; }
.sheet-strip {
  display: block;
  width: 100%;
  height: auto;
  animation: sample-scroll 24s linear infinite alternate;
  will-change: transform;
}
@keyframes sample-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% + 141.4cqw)); }
}
.cover:hover .sheet-strip, .cover:focus-within .sheet-strip { animation-play-state: paused; }
.covers[data-observed] .cover:not(.is-visible) .sheet-strip { animation-play-state: paused; }

/* ---------- Pricing: one card ---------- */

.pricing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-card {
  width: 100%;
  max-width: 420px;
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
}
.price-card h2 { margin-bottom: var(--space-3); }

.price-list {
  display: grid;
  gap: var(--space-3);
}
.price-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.price-list .icon-tick {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--navy);
  stroke-width: 2.5;
}
.price-list h3 { font-size: var(--text-h3); }
.price-list p {
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.5;
}

.price-line { line-height: 1.15; }
.price-amount {
  font-size: var(--text-price);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-inline: 0.04em;
}

.price-card .store-buttons { margin-top: var(--space-4); }
.price-card .store-buttons .button { flex: 1 1 140px; }

#pricing .small-print {
  margin-top: var(--space-3);
  max-width: 420px;
  text-align: center;
}

@media (min-width: 640px) {
  .price-card { padding: var(--space-5) var(--space-5); }
}

/* ---------- Privacy ---------- */

.privacy-inner::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--gold);
}

.privacy-inner h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.privacy-inner .icon-lock {
  width: 1.1em;
  height: 1.1em;
  color: var(--navy);
}

/* ---------- FAQ ---------- */

.faq-panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
}

.faq + .faq { border-top: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--slate); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 6px; }

.faq-plus {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--slate);
  transition: transform var(--duration) var(--ease-out);
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.faq-plus::before { width: 16px; height: 2px; margin: -1px 0 0 -8px; }
.faq-plus::after { width: 2px; height: 16px; margin: -8px 0 0 -1px; }
.faq[open] .faq-plus { transform: rotate(45deg); }

.faq p {
  padding: 0 0 var(--space-3);
  color: var(--ink);
}

/* ---------- Download: the photo band ---------- */

.download {
  position: relative;
  padding: 0;
  background: var(--navy);
  color: var(--on-dark);
}

.download-photo {
  max-height: 640px;
  min-height: 300px;
}
/* the tall picture below 768px, the wide one from 768px (a <picture> source) */
.download-photo img { object-position: center 40%; }
@media (min-width: 768px) {
  .download-photo img { object-position: center 45%; }
}
.download-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  /* transparent to .85 by 80% of the photo, then closes to solid navy so the band has no seam */
  background: linear-gradient(to bottom, rgba(2, 20, 42, 0) 0%, rgba(2, 20, 42, 0.85) 55%, rgba(2, 20, 42, 1) 100%);
}

.download-inner {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding-bottom: var(--section);
}
.download-mark {
  height: 56px;
  width: auto;
  margin-bottom: var(--space-3);
}

.download h2,
.download .section-text { color: var(--on-dark); }

@media (min-width: 960px) {
  .download-inner { margin-top: -96px; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: var(--space-5);
  color: var(--navy);
  font-size: 1rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-brand { max-width: none; }
.footer-brand img { height: 28px; width: auto; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.footer-links a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--ease-out);
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--navy); border-bottom-color: var(--navy); }

.footer-legal {
  max-width: none;
  font-size: var(--text-caption);
  color: var(--muted);
}

@media (min-width: 960px) {
  .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
  }
  .footer-links { justify-content: center; }
}

/* ---------- Legal pages (/privacy/, /terms/) ---------- */

.legal {
  max-width: calc(68ch + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section) var(--gutter);
}
.legal h1 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.legal h2 { font-size: var(--text-h3); font-weight: 600; margin-top: var(--space-5); margin-bottom: var(--space-1); }
.legal p { max-width: none; }
.legal ul { margin-top: var(--space-2); padding-left: 1.25em; list-style: disc; }
.legal li { max-width: none; }
.legal li + li { margin-top: var(--space-1); }
.legal li::marker { color: var(--muted); }

/* ---------- Motion: one authored moment, the hero lens settling ---------- */

@keyframes lens-in {
  from { opacity: 0; transform: scale(1.25); }
  to { opacity: 1; transform: none; }
}
@keyframes lens-line-in {
  from { transform: rotate(var(--a)) translateX(var(--r)) scaleX(0); }
  to { transform: rotate(var(--a)) translateX(var(--r)) scaleX(1); }
}
@keyframes lens-end-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lens-hero { animation: lens-in 600ms var(--ease-out) 200ms both; }
.lens-hero::before { animation: lens-line-in 350ms var(--ease-out) 650ms both; }
.lens-hero::after { animation: lens-end-in 250ms var(--ease-out) 950ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lens-hero, .lens-hero::before, .lens-hero::after { animation: none; }
  .sheet-strip { animation: none; }
  .button, .nav-links a, .footer-links a, .footer-legal a, .faq-plus, .nav-toggle-icon::before, .nav-toggle-icon::after,
  .screens > img, .screens-nav button {
    transition: none;
  }
}