/* ==========================================================================
   Shotread marketing site (https://shotread.com): page layout only.
   Requires the app's own tokens.css and components.css (linked unchanged, DESIGN.md): colours, type, spacing,
   radii, buttons, labels and the monitor come from there. The page is the bright room; the dark monitor appears
   only around real captures of the product; yellow means marked. No gradients as decoration, no shadows, no
   icon grids, no section numbers. Readable without JavaScript.
   ========================================================================== */

html { scroll-padding-top: var(--s-6); }
body { font-size: var(--fs-16); }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }

/* Links inside running text are underlined, so they read as links without colour. */
.prose a, .body a, .lede a, .feat a, .faq a, .site-foot__legal a, .notfound a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover, .body a:hover, .feat a:hover, .faq a:hover { text-decoration-thickness: 2px; }

/* ---- Header ------------------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-8); padding-block: var(--s-3); }
.site-logo {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  font-variation-settings: "wdth" var(--wdth-condensed); font-weight: 800; font-size: var(--fs-24);
  text-transform: uppercase; line-height: 1;
}
.site-logo svg { width: 26px; height: 26px; flex: none; }
.site-nav { order: 3; display: flex; gap: var(--s-6); width: 100%; overflow-x: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-weight: 600; color: var(--ink-2); border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--mark); }
.site-head__act { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
@media (max-width: 519px) {
  .site-head__in { column-gap: var(--s-4); }
  .site-logo { font-size: var(--fs-20); }
  .site-logo svg { width: 22px; height: 22px; }
  .site-head__act .btn { height: 34px; padding: 0 10px; font-size: var(--fs-13); }
  .site-nav { gap: var(--s-4); }
}
@media (min-width: 900px) {
  .site-head__in { flex-wrap: nowrap; min-height: 72px; }
  .site-nav { order: 0; width: auto; overflow: visible; }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--s-16) var(--s-12); }
.hero__title { display: grid; gap: var(--s-5); max-width: 15ch; }
.hero__title .headline { max-width: 26ch; text-transform: none; }
.hero__title .display { font-size: var(--fs-120); }
.hero__lede { margin-top: var(--s-6); }
.hero__act { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.hero__note { margin-top: var(--s-4); color: var(--ink-2); }
@media (min-width: 1100px) { .hero__title { max-width: none; } }
.hero__note a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Home (2026-11-01): the words on the left, the moment the client decides on the right. One column on phones, where
   the headline, the button and the note come first and the capture follows. */
.hero--split .hero__grid { display: grid; gap: var(--s-10); }
.hero--split .hero__shot { margin: 0; }
.hero--split .hero__title { max-width: 15ch; }
@media (min-width: 1000px) {
  .hero--split .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-12); }
  .hero--split .hero__title { max-width: none; }
  .hero--split .hero__title .display { font-size: var(--fs-80); }
}
@media (max-width: 519px) {
  .hero--split { padding-top: var(--s-10); }
  .hero--split .hero__title .display { font-size: var(--fs-80); }
  .hero--split .hero__title .headline { font-size: var(--fs-24); }
  .hero--split .hero__lede { font-size: var(--fs-18); }
}

/* The marker: highlighter yellow behind the marked words, swept in once on first paint (reduced motion: no sweep). */
.hilite {
  background-color: transparent; color: var(--mark-ink);
  background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% 100%;
  padding: 0 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: site-sweep var(--t-sweep) 160ms both;
}
@keyframes site-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ---- Product captures on the monitor ------------------------------------- */
.shot { margin: var(--s-12) auto 0; }
.shot .monitor { overflow: hidden; }
.shot .monitor__bar { height: 36px; font-size: var(--fs-12); }
.shot .monitor__bar .tag { color: var(--monitor-ink); }
.shot .monitor__bar > .tag:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shot img { width: 100%; height: auto; }
.shot figcaption { margin-top: var(--s-3); max-width: 75ch; color: var(--ink-2); font-size: var(--fs-14); }
.sample { color: var(--mark); }

/* ---- Sections ------------------------------------------------------------- */
.band { padding-block: var(--s-20); border-top: 1px solid var(--line); }
.band__head { display: grid; gap: var(--s-4); max-width: 60rem; }
.band__head .body { font-size: var(--fs-18); max-width: 60ch; }
.split { display: grid; gap: var(--s-10); }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.split > * { min-width: 0; }
.split .shot { margin-top: 0; }

/* The loop: the stages of a client's cycle as clips on one track. */
.track { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: var(--s-10); }
@media (min-width: 560px) { .track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clip { background: var(--bg-2); border-top: 8px solid var(--clip, var(--ink)); padding: var(--s-4) var(--s-5) var(--s-6); }
.clip h3 { font-variation-settings: "wdth" var(--wdth-condensed); font-weight: 800; font-size: var(--fs-24); text-transform: uppercase; line-height: 1; }
.clip p { margin-top: var(--s-2); font-size: var(--fs-15); color: var(--ink-2); }
.clip--lemon { --clip: var(--label-lemon); } .clip--tangerine { --clip: var(--label-tangerine); }
.clip--magenta { --clip: var(--label-magenta); } .clip--violet { --clip: var(--label-violet); }
.clip--cerulean { --clip: var(--label-cerulean); } .clip--mint { --clip: var(--label-mint); }
.track__back { margin-top: var(--s-4); color: var(--ink-2); }
@media (min-width: 1000px) { .track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* What Shotread does, and what it does not: two plain lists, a mark for each line (text, not icons). */
.promise { display: grid; gap: var(--s-10); margin-top: var(--s-10); border-top: 2px solid var(--line-ink); padding-top: var(--s-8); }
@media (min-width: 900px) { .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); } }
.promise__head { font-variation-settings: "wdth" var(--wdth-narrow); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-tight); }
.promise__list { display: grid; gap: var(--s-4); margin-top: var(--s-5); max-width: 60ch; }
.promise__list li { position: relative; padding-left: var(--s-8); color: var(--ink-2); }
.promise__list li::before { position: absolute; left: 0; top: 0; font-weight: 800; color: var(--ink); }
.promise__list--do li::before { content: "Yes"; font-size: var(--fs-12); top: 0.3em; }
.promise__list--dont li::before { content: "No"; font-size: var(--fs-12); top: 0.3em; }

/* Facts: a term and its plain explanation. */
.facts { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.facts dt { font-weight: 700; font-size: var(--fs-18); }
.facts dd { margin: var(--s-1) 0 0; color: var(--ink-2); max-width: 62ch; }

/* Rows: one capability per row, name left, what it does right. */
.feats { margin-top: var(--s-10); border-top: 2px solid var(--line-ink); }
.feat { display: grid; gap: var(--s-2) var(--s-10); padding-block: var(--s-6) var(--s-8); border-bottom: 1px solid var(--line); }
.feat > * { min-width: 0; } /* a capture's label bar never widens the row past the phone screen */
@media (min-width: 900px) { .feat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.feat h2, .feat h3 { font-variation-settings: "wdth" var(--wdth-narrow); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-tight); }
.feat p { color: var(--ink-2); max-width: 66ch; }
.feat p + p, .feat p + ul, .feat ul + p { margin-top: var(--s-3); }
.feat ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); max-width: 66ch; }
.feat li { color: var(--ink-2); padding-left: var(--s-5); position: relative; }
.feat li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--ink); }
.feat .shot { margin-top: var(--s-6); }

/* Where Shotread is today: the honest status, in one outlined block. */
.status { border: 2px solid var(--line-ink); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-8); margin-top: var(--s-10); }
@media (min-width: 900px) { .status { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--s-10); } }
.status h3 { font-weight: 700; font-size: var(--fs-18); }
.status p { margin-top: var(--s-2); color: var(--ink-2); }
.cta { display: grid; gap: var(--s-5); margin-top: var(--s-12); }
.cta__act { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.disclaimer { margin-top: var(--s-10); color: var(--ink-2); font-size: var(--fs-14); max-width: 75ch; }

/* ---- Inner pages ------------------------------------------------------------ */
.page-head { padding-block: var(--s-16) var(--s-10); }
.page-head h1 { font-size: var(--fs-80); max-width: 16ch; }
.page-head .lede { margin-top: var(--s-6); }
.updated { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--fs-14); }

/* Questions and answers, all open (no script needed). */
.faq { display: grid; gap: var(--s-6); margin-top: var(--s-8); max-width: 72ch; }
.faq h3 { font-weight: 700; font-size: var(--fs-18); }
.faq p { margin-top: var(--s-2); color: var(--ink-2); }

/* ---- Legal and long text -------------------------------------------------- */
.prose { max-width: 72ch; padding-bottom: var(--s-12); }
.prose h2 { font-variation-settings: "wdth" var(--wdth-narrow); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-tight); margin-top: var(--s-12); }
.prose h3 { font-weight: 700; font-size: var(--fs-18); margin-top: var(--s-8); }
.prose p, .prose li { color: var(--ink-2); }
.prose p, .prose ul, .prose ol, .prose table { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: var(--s-2); }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose table { font-size: var(--fs-15); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; color: var(--ink); }
.prose td { color: var(--ink-2); }
.table-scroll { overflow-x: auto; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; }
/* A point the owner or a lawyer must fill in before launch: marked, so it cannot be missed. */
.owner { background: var(--mark-2); color: var(--ink); font-weight: 600; padding: 0 0.2em; }
.draft-note { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 2px solid var(--line-ink); background: var(--mark-2); color: var(--ink); }

/* Plans table (pricing page, built only with the pricing switch). */
.plans th[scope="col"] { font-variation-settings: "wdth" var(--wdth-condensed); font-weight: 800; font-size: var(--fs-24); text-transform: uppercase; }
.plans .num { font-weight: 600; color: var(--ink); }

/* ---- Request access ------------------------------------------------------------ */
/* One form (owner decision 2026-10-21). States are sections shown by :target after a plain form post, or by the
   is-on class when static/request-access.js answers in place (then :target is ignored). */
.access { display: grid; gap: var(--s-12); padding-bottom: var(--s-12); }
@media (min-width: 900px) { .access { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: var(--s-16); } }
.access a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.access__form { display: grid; gap: var(--s-5); }
.access__form .input { height: 48px; font-size: var(--fs-16); }
.access__form .check { font-size: var(--fs-15); color: var(--ink-2); }
.access__form .small { color: var(--ink-2); }
.access__act { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.access__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.access__error { padding: var(--s-3) var(--s-4); border: 2px solid var(--bad); color: var(--ink); font-weight: 600; }
.access__note { margin-bottom: var(--s-6); color: var(--ink-2); }
.access__state { display: none; border: 2px solid var(--line-ink); background: var(--bg-2); padding: var(--s-6); margin-bottom: var(--s-8); }
.access__state:focus { outline: none; }
.access__state:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.access__state h2 { font-variation-settings: "wdth" var(--wdth-narrow); font-weight: 700; font-size: var(--fs-32); line-height: var(--lh-tight); }
.access__state p { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }
.access__state .access__act { margin-top: var(--s-5); }
.access:not(.js) .access__state:target, .access.js .access__state.is-on { display: block; }
.access:not(.js):has(.access__state--done:target) .access__form, .access.is-done .access__form { display: none; }
.access__next ol { margin-top: var(--s-4); padding-left: 1.25em; list-style: decimal; display: grid; gap: var(--s-3); color: var(--ink-2); max-width: 46ch; }
.access__next .small { margin-top: var(--s-6); color: var(--ink-2); }

/* ---- Not found -------------------------------------------------------------- */
.notfound { padding-block: var(--s-20); }
.notfound h1 { font-size: var(--fs-80); max-width: 14ch; }
.notfound p { margin-top: var(--s-5); max-width: 60ch; color: var(--ink-2); font-size: var(--fs-18); }
.notfound .cta__act { margin-top: var(--s-8); }

/* ---- Footer ------------------------------------------------------------------ */
.site-foot { margin-top: var(--s-20); border-top: 2px solid var(--line-ink); background: var(--bg-2); padding-block: var(--s-12) var(--s-10); }
.site-foot__grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-foot h2 { margin-bottom: var(--s-3); }
.site-foot ul { display: grid; gap: var(--s-1); }
.site-foot li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); font-weight: 500; }
.site-foot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-foot__legal { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-14); max-width: 90ch; }

/* ---- Pages per audience, the product tour and switching (docs/launch/ICP.md) ------------------------------- */
.crumbs { margin-bottom: var(--s-4); font-size: var(--fs-14); color: var(--ink-2); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.page-head .hero__act { margin-top: var(--s-8); }
.cta-band { margin-top: var(--s-16); display: grid; gap: var(--s-5); }
.cta-band .body { font-size: var(--fs-18); max-width: 62ch; }
.cta-band .body a { text-decoration: underline; text-underline-offset: 3px; }

/* Audience links on the home page: three plain rows, name left, what it covers right. */
.who { margin-top: var(--s-10); border-top: 2px solid var(--line-ink); }
.who a { display: grid; gap: var(--s-1) var(--s-10); padding-block: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .who a { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.who strong { font-variation-settings: "wdth" var(--wdth-narrow); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-tight); }
.who span { color: var(--ink-2); max-width: 66ch; }
.who a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* The tour: one step of the work per section, the capture under its words. */
.step { padding-block: var(--s-12); border-top: 1px solid var(--line); }
.step:first-child { border-top: 2px solid var(--line-ink); }
.step__head { display: grid; gap: var(--s-3); max-width: 62rem; }
.step__head .tag { color: var(--ink-2); }
.step__head h2 { font-variation-settings: "wdth" var(--wdth-condensed); font-weight: 800; font-size: var(--fs-40); line-height: 1; text-transform: uppercase; }
.step__head p { color: var(--ink-2); max-width: 66ch; }
.step .shot { margin-top: var(--s-6); }
.step .pair { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1000px) { .step .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step .pair .shot { margin-top: 0; }
.honest { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 4px solid var(--line-ink); background: var(--bg-2); color: var(--ink-2); max-width: 75ch; }
.honest a { text-decoration: underline; text-underline-offset: 3px; }

/* Switching: a list of tools, the status legend, and one table per step of the work for each tool. */
.sw-list { display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: var(--s-4); }
.sw-list a { display: grid; gap: 2px; min-height: 44px; padding: var(--s-3) var(--s-4); background: var(--bg-2); border-top: 4px solid var(--line-ink); }
.sw-list a:hover { background: var(--bg-3); }
.sw-list__name { font-weight: 700; }
.sw-list__n { font-size: var(--fs-14); color: var(--ink-2); }
.sw-fam { margin-top: var(--s-10); }
.sw-fam h2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sw-pick { margin-top: var(--s-2); }
.sw-legend { margin-top: var(--s-10); border: 2px solid var(--line-ink); padding: var(--s-5) var(--s-6); }
.sw-legend dl { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 900px) { .sw-legend dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-8); } }
.sw-legend div { display: grid; gap: var(--s-1); align-content: start; }
.sw-legend dt .chip { white-space: normal; height: auto; min-height: 26px; }
.sw-legend dd { margin: 0; color: var(--ink-2); font-size: var(--fs-15); }
.sw-tool { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 2px solid var(--line-ink); }
.sw-tool__head { display: grid; gap: var(--s-3); }
.sw-counts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sw-counts .chip { white-space: normal; height: auto; min-height: 26px; }
.sw-step { margin-top: var(--s-8); font-variation-settings: "wdth" var(--wdth-condensed); font-weight: 800; font-size: var(--fs-24); text-transform: uppercase; line-height: 1; }
.sw-step__n { font-variation-settings: "wdth" var(--wdth-wide); font-weight: 600; font-size: var(--fs-12); color: var(--ink-2); letter-spacing: .06em; margin-left: var(--s-2); }
.sw-table { width: 100%; margin-top: var(--s-3); border-collapse: collapse; font-size: var(--fs-15); }
.sw-table th, .sw-table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sw-table thead th { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-bottom: 2px solid var(--line-ink); }
.sw-table td:first-child { width: 42%; font-weight: 600; }
.sw-table td:nth-child(2) { width: 24%; color: var(--ink-2); }
.sw-table .chip { white-space: normal; height: auto; min-height: 26px; }
.sw-note { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-14); }
.sw-source { margin-top: var(--s-10); max-width: 90ch; color: var(--ink-2); }
/* Phone width: each feature becomes a short card, the column names repeated in small capitals. */
@media (max-width: 719px) {
  .sw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .sw-table, .sw-table tbody, .sw-table tr, .sw-table td { display: block; width: auto; }
  .sw-table tr { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
  .sw-table td, .sw-table td:first-child, .sw-table td:nth-child(2) { width: auto; padding: var(--s-1) 0; border: 0; }
  .sw-table td::before { content: attr(data-k); display: block; font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
}
.page-head .body { margin-top: var(--s-4); }