/* Homepage-specific styles. Shared chrome + primitives (.btn/.tag/.card/
   .section/.exhibit/.cap/.stamp, nav, footer) live in /components.css
   (base.njk). Design tokens come from the shared /tokens.css — see adr/0016.
   The page is four sections: hero, the four steps, pricing, scanner. */

/* A section's standfirst: one paragraph between the head and the content. */
.section-lede {
  max-width: 62ch;
  margin: -16px 0 clamp(36px, 5vw, 56px);
  color: hsl(var(--ink-muted));
}

/* ---------- hero ---------- */
/* The specimen carries the argument, so the hero is a single column: eyebrow,
   headline, lede, then the two headers side by side. A two-column hero would
   put the comparison in a gutter, which is the one thing it cannot be. */
.hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 22px 0 24px;
}
.hero .lede { margin: 0; }

.compare {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--rule-width) solid hsl(var(--ink));
  border-radius: var(--radius);
  background: hsl(var(--paper-2));
  overflow: hidden;
}
.side {
  min-width: 0;
  border-left: 1px solid hsl(var(--hairline));
  display: flex;
  flex-direction: column;
}
.side:first-child { border-left: 0; }
/* The tightened header sits on the page's own ground: it is the resting state,
   and the loose one beside it is the exception. */
.side--after { background: hsl(var(--paper)); }
.side pre {
  margin: 0;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
}
.side .note {
  display: flex;
  gap: 10px 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid hsl(var(--hairline));
  font-family: var(--font-sans);
  font-size: 14px;
  color: hsl(var(--ink-muted));
}
/* The one mark on the page that is allowed to be orange type: --pop-text on the
   soft tint is 4.4:1, and the 2px underline under it is the stamp. */
.side .bad {
  color: hsl(var(--pop-text));
  background: hsl(var(--pop-soft));
  box-shadow: inset 0 -2px 0 hsl(var(--pop));
}
.side .gain { color: hsl(var(--ink)); }

.between {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: hsl(var(--ink-muted));
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.between b { font-weight: 500; color: hsl(var(--ink)); }

.hero-ctas {
  display: flex;
  gap: 14px 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.hero-microcopy { margin: 0; }

/* ---------- the film ---------- */
/* Framed like the hero's specimen: an ink rule and a caption strip, the exhibit
   vocabulary the rest of the page uses. Unframed, the film's own cards floated
   on the page and read as loose parts of it. */
.film {
  margin: 0 0 clamp(36px, 5vw, 56px);
  border: var(--rule-width) solid hsl(var(--ink));
  border-radius: var(--radius);
  background: hsl(var(--paper));
  overflow: hidden;
}
.film .cap { position: relative; background: hsl(var(--paper-2)); border-bottom-color: hsl(var(--ink)); }
.film-toggle { margin-right: -8px; min-width: 28px; justify-content: center; }
.film-toggle[hidden] { display: none; }
.film-toggle .i-play, .film-toggle.is-paused .i-pause { display: none; }
.film-toggle.is-paused .i-play { display: block; }
/* How far through the loop: an orange line filling just under the caption's
   rule, over the top edge of the film. */
.film-progress {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  visibility: hidden;
}
.film.is-playing .film-progress { visibility: visible; }
.film-progress span {
  display: block;
  height: 100%;
  background: hsl(var(--pop));
  transform-origin: left;
  transform: scaleX(0);
}
.film-stage { position: relative; }
.film img, .film video { display: block; width: 100%; height: auto; }
/* The video lies exactly over the still and shows once it is playing. */
.film video { position: absolute; inset: 0 0 auto; visibility: hidden; }
.film.is-playing video { visibility: visible; }
.film .film-narrow { display: none; }

/* ---------- the four steps ---------- */
/* Prose left, specimen right, separated by a hairline. The 1/2 split gives the
   exhibit the wider column: the header, the origin table and the brief all
   carry long machine strings that must not wrap to read. */
.step {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px 56px;
  padding-block: 52px;
  border-top: 1px solid hsl(var(--hairline));
  align-items: start;
}
.step:last-child { border-bottom: 1px solid hsl(var(--hairline)); }
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--pop-text));
}
.step h3 { font-size: 24px; margin: 10px 0 14px; line-height: 1.2; }
.step-copy p { color: hsl(var(--ink-muted)); max-width: 46ch; }
.step-copy p + p { margin-top: 12px; }
.step .exhibit { min-width: 0; }

/* ---------- pricing ---------- */
/* A comparison table, because the tiers differ on seven values and three
   separate bullet lists made the reader do the diff by eye. */
.tiers-wrap { overflow-x: auto; }
.tiers {
  font-family: var(--font-mono);
  font-size: 14px;
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
}
.tiers th {
  padding: 18px 16px 14px;
  vertical-align: bottom;
  text-align: left;
  border-bottom: var(--rule-width) solid hsl(var(--ink));
}
.tiers th .name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--ink));
}
.tiers th .price {
  display: block;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: hsl(var(--ink));
  margin-top: 6px;
}
.tiers th .price small { font-size: 13px; color: hsl(var(--ink-muted)); font-weight: 400; letter-spacing: 0; }
.tiers th .rec { color: hsl(var(--pop-text)); }
.tiers td {
  padding: 11px 16px;
  border-bottom: 1px solid hsl(var(--hairline));
  white-space: nowrap;
}
.tiers td:first-child, .tiers th:first-child {
  color: hsl(var(--ink-muted));
  padding-left: 20px;
  width: 30%;
  white-space: normal;
}
.tiers tfoot td { padding-block: 16px; border-bottom: 0; }
.price-notes {
  margin-top: 18px;
  font-size: 14px;
  color: hsl(var(--ink-muted));
  max-width: 72ch;
}

/* ---------- scanner ---------- */
.scan-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px 56px;
  align-items: start;
}
.scan-grid h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; }
.scan-grid p { color: hsl(var(--ink-muted)); margin-top: 14px; max-width: 46ch; }
.scan-form { display: flex; gap: 8px; margin-top: 22px; }
.scan-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 11px 14px;
  border: var(--rule-width) solid hsl(var(--ink));
  border-radius: var(--radius);
  background: hsl(var(--paper-2));
  color: hsl(var(--ink));
}
.scan-form input::placeholder { color: hsl(var(--ink-muted)); }

.score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid hsl(var(--hairline));
}
.score-domain { font-size: 15px; color: hsl(var(--ink)); }
.score-meta { font-size: 12.5px; color: hsl(var(--ink-muted)); margin-top: 2px; }

.checks { list-style: none; margin: 0; padding: 6px 0; }
.checks li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 7px 20px;
  font-size: 13.5px;
  align-items: start;
}
.tag-check {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
  border: 1px solid hsl(var(--ink) / 0.3);
  border-radius: var(--radius);
  color: hsl(var(--ink-muted));
}
/* A failed check is the one place orange earns a fill here: ink type on the
   accent, never orange type on paper. */
.checks li.fail .tag-check {
  background: hsl(var(--pop));
  border-color: hsl(var(--pop));
  color: hsl(var(--ink));
  font-weight: 600;
}
.checks li.fail span:last-child { color: hsl(var(--ink)); }
.checks .dim { color: hsl(var(--ink-muted)); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
  .side { border-left: 0; border-top: 1px solid hsl(var(--hairline)); }
  .side:first-child { border-top: 0; }
  .step, .scan-grid { grid-template-columns: 1fr; gap: 24px; }
  .step { padding-block: 40px; }
}

@media (max-width: 719px) {
  .hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .film .film-wide { display: none; }
  .film .film-narrow { display: block; }
  .section-lede { margin-top: -8px; }
}