/* checktide.app — one stylesheet, no framework, no script, one self-hosted
   typeface. Tokens first (light on :root, dark under prefers-color-scheme),
   then type, then the few components the pages use. Layout responds to the
   width of the page container, so the same rules hold wherever the page is
   framed. */

/* Instrument Sans (OFL-1.1, fontsource 5.3.0, latin subset, weight axis).
   swap, not optional: the face is the identity, it is preloaded from this
   origin and cached for a year, so the first visit should see it too. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #ffffff;
  --specimen: #f6f8f9;
  --ink-strong: #17181b;
  --ink: #292a2e;
  --ink-2: #505258;
  --ink-3: #6b6e76;
  --rule: #0b120e24;
  --rule-strong: #8c8f97;
  --accent: #006894;
  --accent-hover: #005577;
  --on-accent: #ffffff;
  --selection: #006894;
  --card-shadow: 0 1px 2px rgb(11 18 14 / 0.06), 0 16px 40px -24px rgb(11 18 14 / 0.35);
  --card-surface: var(--ground);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --page-max: 68rem;
  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --prose: 38rem;
  --section: clamp(3.5rem, 2rem + 3vw, 5rem);

  /* The sealed motion system's six tokens (.checktide/design/sealed/motion):
     three durations, two curves, and the breath the site never draws. The
     site check holds them to the sealed README's values. */
  --ct-motion-control: 120ms;
  --ct-motion-content: 160ms;
  --ct-motion-layer: 200ms;
  --ct-motion-breath: 2400ms;
  --ct-ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --ct-ease-exit: cubic-bezier(0.6, 0, 0.8, 0.6);
}

/* Dark is its own set, not an inversion: the display tier gets near-white so
   the largest type outranks the body, and the card lifts by tone, not glow. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    color-scheme: dark;
    --ground: #18191a;
    --specimen: #1f2022;
    --ink-strong: #f2f3f5;
    --ink: #d6d7da;
    --ink-2: #9a9ca3;
    --ink-3: #8a8d94;
    --rule: #e3e4f21f;
    --rule-strong: #7e8188;
    --accent: #64c4f0;
    --accent-hover: #7fd0f7;
    --on-accent: #18191a;
    --selection: #64c4f0;
    --card-shadow: inset 0 1px 0 #ffffff0d;
    --card-surface: var(--specimen);
  }
}

/* Forced themes, used by design frames and available to the pages. */
.theme-light {
  color-scheme: light;
  --ground: #ffffff;
  --specimen: #f6f8f9;
  --ink-strong: #17181b;
  --ink: #292a2e;
  --ink-2: #505258;
  --ink-3: #6b6e76;
  --rule: #0b120e24;
  --rule-strong: #8c8f97;
  --accent: #006894;
  --accent-hover: #005577;
  --on-accent: #ffffff;
  --selection: #006894;
  --card-shadow: 0 1px 2px rgb(11 18 14 / 0.06), 0 16px 40px -24px rgb(11 18 14 / 0.35);
  --card-surface: var(--ground);
}
.theme-dark {
  color-scheme: dark;
  --ground: #18191a;
  --specimen: #1f2022;
  --ink-strong: #f2f3f5;
  --ink: #d6d7da;
  --ink-2: #9a9ca3;
  --ink-3: #8a8d94;
  --rule: #e3e4f21f;
  --rule-strong: #7e8188;
  --accent: #64c4f0;
  --accent-hover: #7fd0f7;
  --on-accent: #18191a;
  --selection: #64c4f0;
  --card-shadow: inset 0 1px 0 #ffffff0d;
  --card-surface: var(--specimen);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  container: page / inline-size;
  font: 400 1.0625rem/1.6 var(--font);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.page {
  container: page / inline-size;
  color: var(--ink);
  background: var(--ground);
  min-height: 100%;
}
::selection { background: var(--selection); color: var(--on-accent); }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink-strong); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Focus: one ring shape, and the radius lives on the element so the ring
   follows it instead of reshaping it. */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand, .site-nav a, .site-footer a { border-radius: 4px; }

/* Hover only where a pointer can hover, so a tap does not leave a stuck state. */
@media (hover: hover) {
  a:hover { color: var(--accent-hover); }
  .brand:hover, .site-nav a:hover, .site-footer a:hover { color: var(--ink); }
  .site-footer a:hover { text-decoration: underline; }
}
.site-nav a:active, .site-footer a:active { color: var(--ink); }

.skip {
  position: absolute; left: var(--page-pad); top: -100%;
  padding: 0.5rem 0.75rem; background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 6px; text-decoration: none; z-index: 1;
}
.skip:focus-visible { top: 0.75rem; outline-offset: 2px; }

/* Measure */
.wrap { width: min(100% - 2 * var(--page-pad), var(--page-max)); margin-inline: auto; }
.prose { max-width: var(--prose); }

/* Header: a hairline separates it, so the page below needs less air. */
.site-header { padding-block: 1.125rem; border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink-strong); text-decoration: none; }
.brand:hover { color: var(--ink-strong); }
.brand .mark { width: 1.375rem; height: 1.375rem; flex: none; }
.brand .mark rect { fill: var(--accent); }
.brand .mark path { stroke: var(--on-accent); }
.brand .wordmark { height: 1.0625rem; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; font-size: 0.9375rem; font-weight: 500; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: 0.5rem 0.375rem; margin: -0.5rem -0.375rem; }
.site-nav a[aria-current="page"] { color: var(--ink-strong); }

/* Main rhythm */
main { display: flow-root; flex: 1 0 auto; padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--section); }
.section + .section { margin-top: var(--section); }

/* Hero: the sentence on the left, the report on the right */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.hero h1 {
  font-size: clamp(2.25rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 560;
  max-width: 26ch;
}
.lede {
  margin-top: 1.5rem;
  max-width: 40rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
/* Actions are words, never filled buttons (product style, form 2): a link at
   its reading size, with a touch target of 44px around it. */
.actions a, .s-foot a, .d-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }
.hero + .section { margin-top: calc(var(--section) * 0.9); }

/* The report card: the one product output a stranger can see before anything
   runs. One title, set as the document's header strip. */
.doc {
  background: var(--card-surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 0 1.5rem 1rem;
  margin-top: 0.25rem;
}
.doc h2 {
  font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em;
  padding: 0.875rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 0.25rem;
}
.doc .outline li { grid-template-columns: 1.5rem 1fr; gap: 0.75rem; padding: 0.7rem 0; }
.doc .cost {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--rule); padding-top: 0.8rem; margin-top: 0.25rem;
}
.doc .cost span:first-child { font-weight: 500; color: var(--ink-2); }
.doc .cost span:last-child { color: var(--ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Highlights: exactly three. The hairlines align; the paragraphs start under
   their own heading. Subgrid would align them, but a shared row is as tall as
   the tallest heading, which is the reserved-line hole by another name. */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.highlight {
  display: flex; flex-direction: column; gap: 0.625rem;
  border-top: 1px solid var(--rule); padding-top: 1.125rem;
}
.highlight h2 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.008em; }
.highlight p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* The two prose sections below: heading column, prose column, one hairline each */
.section.free, .section.who, .section.runs {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, var(--prose));
  column-gap: 3rem; border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
.section.free > h2, .section.who > h2, .section.runs > h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.section-body { margin-top: 0; max-width: var(--prose); }
.free + .who, .who + .runs { margin-top: 2.5rem; }

/* Section headings elsewhere */
.section > h2, .section-title { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; }
.section-intro { margin-top: 0.75rem; max-width: var(--prose); color: var(--ink-2); }

/* The numbered outline, shared by the card and any standalone specimen */
.specimen {
  margin-top: 1.75rem; max-width: 46rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--specimen);
  padding: 0.5rem 1.5rem;
}
.outline { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.outline li {
  display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--rule);
  counter-increment: part;
}
.outline li:first-child { border-top: 0; }
.outline li::before {
  content: counter(part) / "";
  font: 500 0.8125rem/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.outline .part { font-weight: 600; color: var(--ink); }

/* The three steps on the how-it-works page. A real sequence, so it keeps its
   numbers — but this list had no rule at all and rendered with the browser's
   own: a 40px indent and default markers, which on a 375px phone spends a
   tenth of the width on nothing. Numbered the way the report outline is, with
   the figure hanging beside the text rather than pushing it across. */
.steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: step; }
/* A hanging indent, not a grid: these items are prose — a bold lead-in and
   then a sentence — and grid would make each inline run its own track, which
   wraps the sentence one word per line. The number hangs beside the text. */
.steps li {
  position: relative; margin-top: 1.125rem; padding-left: 2.25rem;
  font-size: 1rem; line-height: 1.65; counter-increment: step;
}
.steps li::before {
  content: counter(step) / ""; position: absolute; left: 0; top: 0.2em;
  font: 500 0.8125rem/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.specimen-note { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-3); max-width: 46rem; }

/* Pricing: the figure and its conditions share one band; the two notes below
   are a hairline pair, the same device as the product page's highlights. */
.pricing h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.025em; }
.pricing .price {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 4rem; align-items: end; margin-top: 3rem;
}
/* The headline is a sentence, not a number: a bare "$25" in 73px was read as
   the price of a verification (cold read, 2026-10-13). */
.figure {
  max-width: 18em; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15;
  font-weight: 600; letter-spacing: -0.025em; color: var(--ink-strong); text-wrap: balance;
}
.price-use { margin-top: 0.875rem; max-width: 30rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); }
.price-notes { display: flex; flex-direction: column; gap: 0.875rem; }
.price-terms { margin-top: 0; max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; }
.figure-block .price-terms { margin-top: 1.25rem; }
/* Kept for when the held-back block returns; one block stands alone today. */
.subscriptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin-top: var(--section); }
.subscription { border-top: 1px solid var(--rule); padding-top: 1.5rem; max-width: var(--prose); margin-top: var(--section); }
.subscriptions .subscription { max-width: none; }
.subscription h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.subscription p { margin-top: 0.625rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* Legal pages read as documents: one measure, centred */
.legal { max-width: 42rem; margin-inline: auto; }
.legal h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.025em; }
.legal .lede { margin-top: 1rem; }
.legal h1 + section { margin-top: 3.5rem; }
.legal section { margin-top: 2.5rem; }
.legal section h2 { font-size: 1.125rem; line-height: 1.35; letter-spacing: 0; }
.legal section p { margin-top: 0.625rem; font-size: 1rem; line-height: 1.65; }
.legal section p:first-of-type { margin-top: 0.75rem; }
.legal section p + p { margin-top: 1em; }
/* A whole document published inside a page. Until the service terms arrived,
   every section here was one heading and a few paragraphs, so h3 had never
   been styled: its clauses came out LARGER than the section title above them,
   with no space before them at all, because headings carry no margin and the
   layout leans on the gap between sections. */
.legal section h3 { margin-top: 2rem; font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
.legal section h2 + h3 { margin-top: 1.25rem; }
.legal section h3 + p, .legal section h3 + ul { margin-top: 0.625rem; }
.legal section ul { margin: 0.625rem 0 0; padding-left: 1.125rem; }
.legal section li { margin-top: 0.5rem; font-size: 1rem; line-height: 1.65; }
.legal .actions { margin-top: 1rem; }

/* Footer: pinned to the bottom, the brand lockup at half size */
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; font-size: 0.875rem; color: var(--ink-3); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
/* the generic footer-link rule below would turn the lockup into two lines */
.site-footer .brand { display: inline-flex; padding: 0; margin: 0; color: var(--ink-2); }
.site-footer .brand:hover { color: var(--ink); }
.site-footer .brand .mark { width: 1.125rem; height: 1.125rem; }
.site-footer .brand .wordmark { height: 0.875rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.site-footer a { display: inline-block; color: var(--ink-3); text-decoration: none; padding: 0.5rem 0.25rem; margin: -0.5rem -0.25rem; }

/* Narrow frames */
@container page (max-width: 63.99rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero h1 { max-width: 22ch; }
  .doc { max-width: 36rem; }
  .highlights { gap: 2rem; }
  .highlight h2 { font-size: 1.0625rem; }
  .pricing .price { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; align-items: start; }
  .price-terms { max-width: var(--prose); }
}

@container page (max-width: 47.99rem) {
  .highlights { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .subscriptions { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .section.free, .section.who, .section.runs { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  /* brand and three links do not fit one 335px row; give the nav its own. */
  .site-header .wrap { row-gap: 0.75rem; }
  .site-nav { flex: 0 0 100%; gap: 1.5rem; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .specimen { padding-inline: 1.125rem; }
  .outline li { grid-template-columns: 1.75rem 1fr; gap: 0.75rem; }
}

/* Motion: the sealed motion system (.checktide/design/sealed/motion/README.md).
   The site has two motions, a link's colour and the demo's result replacing
   the card, and both live here, in the system's one gate: on screen, for a
   reader who has not asked for less motion. Under reduce and on paper nothing
   moves and the end state is simply there (the link in its colour, the result
   in place), because no animation or transition exists outside this block.
   Durations and curves read the six tokens on :root; tools/check.ts fails a
   time or a named curve written here, and any motion declared elsewhere. The
   sealed pictures carry no motion of their own: tools/make-home-page.ts leaves
   a board's out of sealed.css, which keeps only `.sealed a { transition: none }`
   so that a picture never inherits the link transition below. */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }
  /* ST-1: pointer feedback, at the control tempo, both ways */
  a { transition: color var(--ct-motion-control) var(--ct-ease-enter); }
  /* ST-2: a whole region changes, so the layer tempo; opacity only, nothing
     rises, and the report picture inside arrives with it, not 60 ms later */
  .d-toggle:checked ~ .d-stage .d-result { animation: ct-fade var(--ct-motion-layer) var(--ct-ease-enter); }
}

/* A printed page leaves the browser behind: nobody filing a copy of the terms
   can see which address it came from. The line is in the HTML rather than in a
   CSS content property, so the copy check can read it and hold it to the same
   address the page gives a sharer. */
.printed-from { display: none; }

/* Windows High Contrast and its kin: the browser forces colour on text,
   backgrounds and borders, but not on an SVG fill set in CSS. The brand tile
   therefore kept its own blue while everything around it moved to the user's
   palette — on a black high-contrast theme that is about 2.3:1, with the
   letter knocked out in the background colour on top of it. Hand the mark to
   the system palette so it has full contrast in either high-contrast theme.
   Everything else on the page already follows, having been checked under
   emulation rather than assumed. */
@media (forced-colors: active) {
  .brand .mark rect { fill: CanvasText; }
  .brand .mark path { stroke: Canvas; }
  /* A rule drawn with a transparent ink disappears when colour is forced. */
  .highlight, .outline li, .doc, .section { border-color: CanvasText; }
}

@media print {
  .printed-from { display: block; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--ink-3); }
  :root, .theme-dark, .theme-light {
    color-scheme: light;
    --ground: #fff; --specimen: #fff; --card-surface: #fff; --card-shadow: none;
    --ink-strong: #000; --ink: #000; --ink-2: #222; --ink-3: #444;
    --rule: #0000002e; --rule-strong: #888;
    --accent: #004a6b; --accent-hover: #004a6b;
  }
  .site-nav, .site-footer nav, .skip, .actions { display: none; }
  .legal { max-width: none; }
  .section.free, .section.who, .section.runs { display: block; }
}

/* Home (tools/make-home-page.ts). The first screen is the product itself: the customer's issue, the card that
   has read it, and the card's own button. A checkbox carries the press, so there is no script and no timer.
   The product pictures are the sealed issue card and report page (sealed.css), never redrawn, and they stay
   light inside their own frames in either theme, as Jira draws them. */
.d-main { padding-top: 2.25rem; padding-bottom: 6rem; }
.d-main h1 { font-size: 2.75rem; line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
.d-lede { margin-top: 0.875rem; max-width: 44rem; font-size: 1.25rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.d-terms { margin-top: 0.5rem; max-width: 44rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.d-toggle { position: absolute; opacity: 0; pointer-events: none; }
.d-stage { margin-top: 1.5rem; border-radius: 20px; background: var(--specimen); padding: 1.75rem 3rem 2rem;
  display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 4rem; align-items: start; }
.d-col { margin: 0; min-width: 0; }
.d-label { margin-bottom: 0.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-3); }
.d-label p { margin: 0; }
.d-card-col { --card-zoom: 1.1; }
.d-card-col .sealed { zoom: var(--card-zoom); }
.d-ready { position: relative; display: inline-block; }
/* the press area is the card's own action block (its row, its three lines and the card's bottom padding) */
.d-press { position: absolute; inset: auto 0 0 0; height: 7.375rem; zoom: var(--card-zoom); cursor: pointer; border-radius: 0 0 4px 4px; }
.d-toggle:focus-visible ~ .d-stage .d-press { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .d-press:hover { background: rgb(9 30 66 / 0.04); } }
.d-result, .d-after { display: none; }
.d-toggle:checked ~ .d-stage .d-ready, .d-toggle:checked ~ .d-stage .d-before { display: none; }
/* the result's fade is in the motion gate above; the swap back is instant */
.d-toggle:checked ~ .d-stage .d-result { display: block; }
.d-toggle:checked ~ .d-stage .d-after { display: block; }
.d-result .piece-shot { zoom: 1; width: 440px; margin: 1rem 0 0 2.5rem; border-radius: 4px;
  box-shadow: 0 1px 2px rgb(11 18 14 / 0.06), 0 18px 40px -22px rgb(11 18 14 / 0.4); }
.d-links { margin-top: 1.25rem; display: flex; gap: 1.5rem; align-items: center; font-size: 0.9375rem; }
.d-again { color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.d-sec { margin-top: 2.25rem; }
.d-sec + .d-sec, .d-why + .d-sec { margin-top: 3.5rem; }
.d-why { margin-top: 3.5rem; max-width: 36rem; font-size: 1.5rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.d-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: start; }

/* The customer's own issue, as plain as Jira shows it: their page, not ours */
.h-issue { width: 440px; box-sizing: border-box; padding: 20px 24px 22px; background: #fff; border: 1px solid #EBECF0; border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #172B4D; }
.h-issue .key { font-size: 12px; line-height: 16px; color: #758195; }
.h-issue .summary { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; }
.h-issue .field { margin-top: 16px; font-size: 12px; line-height: 16px; color: #758195; }
.h-issue ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.h-issue li { font-size: 14px; line-height: 20px; }

/* A report in a window, cut off with a fade at the bottom */
.h-window { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgb(11 18 14 / 0.05), 0 30px 70px -36px rgb(11 18 14 / 0.38); }
.h-window::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff); }
.d-report-window { width: 100%; height: 27rem; }
.d-report-window .sealed { zoom: 1.1333; }
.h-stage { margin: 0; min-width: 0; border-radius: 16px; background: var(--specimen); overflow: hidden;
  display: grid; place-items: center; min-height: 26.5rem; padding: 2.5rem 0; }
.h-stage.is-page { background: #fff; display: block; place-items: normal; padding: 0; border: 1px solid var(--rule); position: relative; height: 26.5rem; }
.h-stage.is-page::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 40px; pointer-events: none;
  background: linear-gradient(to right, rgb(255 255 255 / 0), #fff); }
.d-retest .sealed { zoom: 0.7; }
.d-retest::before { content: ""; position: absolute; inset: auto 0 0 0; height: 48px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff); }

/* Price: the subscription, then what one verification uses of it */
.h-price { margin-top: 7rem; display: grid; justify-items: center; text-align: center; }
.h-price .figure { max-width: 16em; font-size: 3rem; line-height: 1.12; letter-spacing: -0.03em; }
.h-price .line { margin-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.h-price .line + .line { margin-top: 0.375rem; }
.h-price .more { margin-top: 0.875rem; max-width: 38rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); text-wrap: balance; }
.h-price .more + .more { margin-top: 0.5rem; }
.h-price .link { margin-top: 1.5rem; font-size: 1rem; font-weight: 500; }
.h-access { margin-top: 6rem; text-align: center; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); }
.h-access p { max-width: 40rem; margin-inline: auto; }

/* The sample report page */
.s-main { padding-top: 3rem; padding-bottom: 6rem; }
.s-head { max-width: 40rem; }
.s-head h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.026em; font-weight: 600; }
.s-head p { margin-top: 0.875rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); }
.s-report { margin: 2.5rem 0 0; }
.s-report + .s-report { margin-top: 4.5rem; }
.s-report figcaption { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.875rem; }
.s-window { width: 960px; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgb(11 18 14 / 0.05), 0 30px 70px -40px rgb(11 18 14 / 0.3); }
.s-foot { margin-top: 4.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

@container page (max-width: 70rem) {
  .d-main h1 { font-size: 2.25rem; }
  .d-lede { font-size: 1.125rem; }
  .d-stage { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.75rem 1.5rem 2rem; }
  .d-card-col { --card-zoom: 1; }
  .d-result .piece-shot { margin-left: 0; }
  .d-two { grid-template-columns: minmax(0, 1fr); }
  .d-report-window { height: 22rem; }
  .d-report-window .sealed { zoom: 0.8; }
  .h-price .figure { font-size: 2.5rem; }
}
@container page (max-width: 52rem) {
  .d-report-window { height: 18rem; }
  .d-report-window .sealed { zoom: 0.62; }
}
@container page (max-width: 30rem) {
  .d-main h1 { font-size: 1.75rem; }
  .d-why { font-size: 1.25rem; }
  .d-stage { padding: 1.25rem 1rem 1.5rem; border-radius: 14px; }
  .h-issue { width: auto; }
  .d-card-col { --card-zoom: 0.8; }
  .d-result .piece-shot { zoom: 0.72; }
  /* On a phone a whole report is too small to read, so each report shows its readable top-left corner:
     the verdict, the first check and its circled evidence, cut off at the right and the bottom. */
  .d-report-window .sealed, .d-retest .sealed { zoom: 0.52; }
  .d-report-window, .d-retest { height: 15rem; }
  .d-report-window::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 32px; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 0), #fff); }
  .d-two .h-stage { min-height: 0; }
  .d-two .h-stage .sealed-start { zoom: 0.8; }
  .h-price .figure { font-size: 1.875rem; }
}