/* Home page layout (2026-11-07 redesign). Loaded only by landing/index.html,
   after style.css. It adds no colours, fonts or spacing values of its own:
   every value is a token from style.css. One container (1200px of content),
   one 12-column grid, one left edge. Nothing inside <main> is centred. */

body.home {
  --wrap: 1200px;
  max-width: calc(var(--wrap) + 2 * var(--page-x));
  padding-top: var(--sp-6);
}
@media (max-width: 720px) {
  body.home, html[data-theme] body.home { --page-x: 16px; }
}
.home .nav { margin-bottom: 0; padding-bottom: var(--sp-4); }

.home .g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--sp-6);
  align-items: start;
}
.home .c8    { grid-column: 1 / span 8; }
.home .c4    { grid-column: span 4; }
.home .c12   { grid-column: 1 / -1; }
.home .text  { grid-column: 1 / span 5; }
.home .media { grid-column: 6 / -1; }
@media (max-width: 960px) {
  .home .c8, .home .text, .home .media { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .home .c4 { grid-column: 1 / -1; }
}

.home main > section {
  padding-block: var(--sp-16);
  border-top: 1px solid var(--z-line);
}
.home main > section:first-child { border-top: 0; padding-top: var(--sp-12); }
.home .uc + .uc { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--z-faint); }

.home main :is(h1, h2, h3, p, figure, table, ul, ol) { text-align: left; margin-inline: 0; }
.home h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: -0.01em;
  font-size: clamp(48px, 7vw, var(--fs-96)); line-height: 0.95; margin: 0 0 var(--sp-6);
}
.home h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: 0;
  font-size: clamp(32px, 4.5vw, var(--fs-56)); line-height: 1; margin: 0 0 var(--sp-8);
}
.home h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: 0;
  font-size: var(--fs-32); line-height: 1.05; margin: 0 0 var(--sp-4);
}
.home .label {
  font-family: var(--font-data); font-size: var(--fs-11); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--z-accent);
  margin: 0 0 var(--sp-3);
}
.home main p { max-width: var(--measure); margin: 0 0 var(--sp-4); }
.home .sub { font-size: var(--fs-20); line-height: 1.5; color: var(--z-ink); }
.home .big { font-size: var(--fs-32); line-height: 1.25; max-width: none; font-family: var(--font-prose); font-weight: 500; }
@media (max-width: 720px) { .home .big { font-size: 24px; } }
.home .num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-56);
  color: var(--z-accent); line-height: 1; margin: var(--sp-6) 0 0;
}
.home .scope { font-family: var(--font-data); font-size: var(--fs-13); color: var(--z-mute); margin-top: var(--sp-2); }
.home .more a { font-weight: 600; }
.home .tag {
  display: inline-block; margin-left: var(--sp-2); padding: 2px 8px; border: 1px solid var(--z-brand-deep);
  border-radius: 999px; font: 600 var(--fs-11)/1.4 var(--font-data); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--z-ink); vertical-align: middle;
}

/* hero */
.home .pill {
  display: inline-flex; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-6);
  padding: 6px 14px; border: 1px solid var(--z-line); border-radius: 999px;
  font: 500 var(--fs-13)/1.4 var(--font-data); color: var(--z-ink);
}
.home .pill:hover { border-color: var(--z-brand-deep); color: var(--z-ink); }
.home .pill b { background: var(--z-brand); color: var(--z-on-brand); padding: 0 6px; border-radius: 4px; font-weight: 600; }
.home .prompt {
  border: 1px solid var(--z-brand-deep); border-radius: 8px; background: var(--z-bg);
  margin: var(--sp-8) 0 var(--sp-4);
}
.home .prompt .bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--z-line);
  font: 600 var(--fs-11)/1.3 var(--font-data); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--z-mute);
}
.home .prompt pre {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono);
  font-size: var(--fs-13); line-height: 1.65; margin: 0; padding: var(--sp-4); color: var(--z-ink); background: none; border: 0;
}
.home .prompt .copy {
  font: 600 var(--fs-13)/1 var(--font-data); padding: 10px 16px; border-radius: 6px; cursor: pointer;
  background: var(--z-brand); color: var(--z-on-brand); border: 1px solid var(--z-brand-deep); white-space: nowrap;
}
.home .prompt .copy:hover { background: var(--z-highlight); }
.home .prompt .bar .copy { text-transform: none; letter-spacing: 0; padding: 8px 14px; }

/* hero proof strip: three numbers from the proof table, each with its scope */
.home .glance { grid-column: 9 / -1; margin-top: calc(var(--sp-6) + 30px); padding-left: var(--sp-6); border-left: 1px solid var(--z-line); }
.home .glance dl { margin: 0; }
.home .glance dl > div { padding: var(--sp-4) 0; border-bottom: 1px solid var(--z-line); }
.home .glance dl > div:first-child { padding-top: 0; }
.home .glance dt { font: 800 var(--fs-56)/1 var(--font-display); color: var(--z-accent); font-variant-numeric: tabular-nums; }
.home .glance dd { margin: var(--sp-2) 0 0; font: 400 var(--fs-13)/1.5 var(--font-data); color: var(--z-mute); }
.home .glance .more { margin-top: var(--sp-4); font-family: var(--font-data); font-size: var(--fs-13); }
@media (max-width: 960px) {
  .home .glance { grid-column: 1 / -1; margin-top: var(--sp-4); padding-left: 0; border-left: 0; }
}
.home .verify, .home .alt { font-family: var(--font-data); font-size: var(--fs-13); color: var(--z-mute); max-width: none; }
.home .verify code, .home .alt code {
  font-family: var(--font-mono); font-size: var(--fs-13); color: var(--z-ink);
  background: var(--z-code-bg); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; user-select: all;
}

/* three-up labels */
.home .trio { margin-top: var(--sp-10); }
.home .trio h3 { font-size: var(--fs-20); font-family: var(--font-prose); font-weight: 700; margin-bottom: var(--sp-2); }
.home .trio p { color: var(--z-mute); font-size: var(--fs-16); }

/* figures: a wide and a narrow render, each in a day and a night variant */
.home figure.shot { margin: 0; }
.home figure.shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.home figure.shot figcaption { font: 400 var(--fs-13)/1.5 var(--font-data); color: var(--z-mute); margin-top: var(--sp-3); }
.home .img-night { display: none; }
html[data-theme='night'] .home .img-day { display: none; }
html[data-theme='night'] .home .img-night { display: block; }
.home #why figure.shot { margin-top: var(--sp-12); }

/* proof */
.home .headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-2); }
.home .headline .ours { font: 800 var(--fs-96)/0.9 var(--font-display); color: var(--z-accent); }
.home .headline .vs { font: 600 var(--fs-13)/1 var(--font-data); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--z-mute); }
.home .headline .theirs { font: 800 var(--fs-56)/0.9 var(--font-display); color: var(--z-mute); }
@media (max-width: 720px) {
  .home .headline .ours { font-size: 72px; }
  .home .headline .theirs { font-size: 40px; }
}
.home .tbl { border: 1px solid var(--z-line); border-radius: 8px; overflow: hidden; margin-top: 0; }
.home table.cmp1 { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: var(--fs-16); }
.home table.cmp1 th {
  text-align: left; font: 600 var(--fs-11)/1.3 var(--font-data); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--z-mute); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--z-line);
}
.home table.cmp1 td { padding: var(--sp-4); border-bottom: 1px solid var(--z-line); vertical-align: top; line-height: 1.45; }
.home table.cmp1 tr:last-child td { border-bottom: 0; }
.home table.cmp1 td:first-child { font-weight: 600; width: 20%; }
.home table.cmp1 .x { background: var(--z-highlight); font-variant-numeric: tabular-nums; width: 27%; }
.home table.cmp1 th.x { color: var(--z-ink); }
.home table.cmp1 td:nth-child(3) { font-variant-numeric: tabular-nums; width: 31%; }
.home table.cmp1 td:last-child { color: var(--z-mute); font-size: var(--fs-13); }
@media (max-width: 720px) {
  .home table.cmp1, .home table.cmp1 tbody, .home table.cmp1 tr, .home table.cmp1 td { display: block; width: auto !important; }
  .home table.cmp1 thead { display: none; }
  .home table.cmp1 tr { border-bottom: 1px solid var(--z-line); padding: var(--sp-3) 0; }
  .home table.cmp1 tr:last-child { border-bottom: 0; }
  .home table.cmp1 td { border: 0; padding: var(--sp-1) var(--sp-4); }
  .home table.cmp1 td[data-h]::before {
    content: attr(data-h); display: block; font: 600 var(--fs-11)/1.3 var(--font-data);
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--z-mute);
  }
  .home table.cmp1 td:first-child { font-size: var(--fs-16); }
}
.home .under { font-family: var(--font-data); font-size: var(--fs-13); color: var(--z-mute); margin-top: var(--sp-4); max-width: none; }

/* traction */
.home h2.label { line-height: 1.4; }
.home .count { font: 800 var(--fs-56)/1 var(--font-display); color: var(--z-ink); margin: 0; font-variant-numeric: tabular-nums; }
.home .count-l { font-family: var(--font-data); font-size: var(--fs-13); color: var(--z-mute); margin: var(--sp-2) 0 0; }
.home .counts { margin-bottom: var(--sp-10); }
.home ul.posts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--z-line); }
.home ul.posts li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--z-line); display: flex; justify-content: space-between; gap: var(--sp-4); }
.home ul.posts li a { font-weight: 600; }
.home ul.posts time { font-family: var(--font-data); font-size: var(--fs-13); color: var(--z-mute); white-space: nowrap; }
@media (max-width: 720px) { .home ul.posts li { flex-direction: column; gap: var(--sp-1); } }

/* the ask */
.home .ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-6); }
.home a.btn {
  display: inline-block; padding: 14px 22px; border-radius: 8px; background: var(--z-brand); color: var(--z-on-brand);
  border: 1px solid var(--z-brand-deep); font: 600 var(--fs-16)/1 var(--font-data);
}
.home a.btn:hover { background: var(--z-highlight); color: var(--z-ink); }
.home .ask p { margin: 0; }
@media (max-width: 720px) {
  .home .trio { margin-top: 0; }
  .home .trio + .trio { margin-top: calc(-1 * var(--sp-2)); }
  .home #why .c4.trio:first-of-type { margin-top: var(--sp-6); }
}
/* the night-theme hero band in style.css was for a video the home page no longer has */
html[data-theme='night'] body.home::before { display: none; }