/* Next Loop Co. · the site-check landing page.
   Deliberately a different skeleton from the homepage: shorter, one job, one ask.
   Tokens and buttons come from /styles.css; this file only holds what is unique here. */

.chk { --chk-pass: #46d39a; --chk-fail: #e0645f; }

/* ---------- 1 · hero ---------- */
.chk-hero { min-height: 100vh; }
.chk-hero__stage { display: grid; align-content: center; gap: var(--sc-5); max-width: 62rem; margin-inline: auto; padding-inline: var(--sc-5); }
.chk-brand { justify-self: start; margin-bottom: var(--sc-4); }
.chk-hero__h {
  font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.02; font-size: clamp(2.4rem, 6.4vw, 4.6rem); text-wrap: balance; margin: 0;
}
.chk-hero__sub { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.55; max-width: 46ch; text-wrap: pretty; margin: 0; }
.chk-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); }
.chk-hero__price { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; }

/* ---------- 2 · the situation ---------- */
.chk-sit { min-height: 84vh; display: grid; align-items: center; }
.chk-sit__wrap { display: grid; gap: var(--sc-5); max-width: 58rem; }
.chk-sit__line {
  font-family: var(--sc-font-display); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(1.35rem, 3.1vw, 2.1rem); line-height: 1.25; margin: 0; text-wrap: balance;
}
.chk-sit__line:nth-child(2) { margin-left: 8%; }
.chk-sit__line--flat { margin-left: 16%; color: var(--sc-accent); }
.chk-sit__body { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; max-width: 54ch; margin: var(--sc-4) 0 0; text-wrap: pretty; }

/* ---------- 3 · the scorecard, the signature move ---------- */
.chk-card { min-height: 100vh; }
.chk-card__stage { display: grid; align-content: center; gap: var(--sc-5); max-width: 66rem; margin-inline: auto; padding-inline: var(--sc-5); }
.chk-card__head { display: grid; gap: var(--sc-2); }
.chk-card__head .h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.chk-card__panel {
  border: 1px solid var(--nl-line); border-radius: var(--nl-r-lg);
  background: var(--nl-glass); backdrop-filter: blur(14px);
  overflow: hidden; box-shadow: var(--sc-e2, 0 18px 50px -20px rgb(0 0 0 / .6));
}
.chk-card__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-5); border-bottom: 1px solid var(--nl-line);
  background: color-mix(in oklab, var(--sc-ink) 4%, transparent);
}
.chk-card__url { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.chk-card__score { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.chk-card__score b { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; color: var(--chk-fail); transition: color 500ms ease; }
.chk-card__score i { font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.chk-card__panel.is-good .chk-card__score b { color: var(--chk-pass); }

/* Fourteen rows plus the bar and the footnote have to fit inside one pinned
   viewport, so on anything wider than a phone the list runs in two columns of
   seven. One tall column scrolled off the bottom of the stage and the last
   checks were never seen, which defeats the point of the device. */
.chk-card__list { list-style: none; margin: 0; padding: var(--sc-3) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-2); }
.chk-card__list li {
  display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: center; gap: var(--sc-3);
  padding: .42rem var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: color 300ms ease, background-color 300ms ease;
}
.chk-card__list li::before {
  content: ""; width: .85rem; height: .85rem; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.chk-card__list li.is-on { color: var(--sc-ink); background: color-mix(in oklab, var(--chk-pass) 6%, transparent); }
.chk-card__list li.is-on::before {
  background: var(--chk-pass); border-color: var(--chk-pass);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--chk-pass) 18%, transparent);
}
.chk-card__foot { margin: 0; padding: var(--sc-4) var(--sc-5); border-top: 1px solid var(--nl-line); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ---------- 4 · what you get ---------- */
.chk-get__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); margin-top: var(--sc-6); align-items: start; }
.chk-tier {
  display: grid; gap: var(--sc-2); padding: var(--sc-5);
  border: 1px solid var(--nl-line); border-radius: var(--nl-r);
  background: color-mix(in oklab, var(--sc-ink) 3%, transparent);
}
.chk-tier--pick { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); background: color-mix(in oklab, var(--sc-accent) 7%, transparent); }
.chk-tier__name { font-weight: 600; font-size: var(--sc-t-base); text-wrap: balance; }
.chk-tier__price { font-family: var(--sc-font-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chk-tier__time { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: .02em; text-transform: uppercase; }
.chk-tier__list { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; gap: var(--sc-2); }
.chk-tier__list li { position: relative; padding-left: 1.1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; text-wrap: pretty; }
.chk-tier__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); opacity: .85; }
.chk-tier__for { margin-top: var(--sc-3); padding-top: var(--sc-3); border-top: 1px solid var(--nl-line); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); line-height: 1.5; }
.chk-get__note { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 64ch; line-height: 1.6; text-wrap: pretty; }

/* ---------- 5 · how it works ---------- */
.chk-how__steps { list-style: none; counter-reset: s; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-5); max-width: 62rem; }
.chk-how__steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: var(--sc-4); row-gap: .35rem; align-items: start; }
.chk-how__steps li::before {
  content: counter(s); font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-base); color: var(--sc-accent); font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 40%, transparent);
  border-radius: 50%; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
}
.chk-how__steps b { display: block; font-weight: 600; font-size: var(--sc-t-base); margin-bottom: .3rem; }
/* The li is a two-column grid: the counter sits in column 1. Without an explicit
   column the description wrapped into that 2.6rem counter column on the next row
   and broke to one word per line. */
.chk-how__steps span { grid-column: 2; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.chk-how__steps b { grid-column: 2; }

/* ---------- 8 · the ask ---------- */
.chk-book__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sc-7); align-items: start; }
.chk-book__copy { display: grid; gap: var(--sc-4); align-content: start; }
.chk-book__proof { margin: 0; padding: var(--sc-4); border-left: 2px solid var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; border-radius: 0 var(--nl-r) var(--nl-r) 0; }
.chk-book__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.chk-book__form label { display: grid; gap: .4rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.chk-book__form input, .chk-book__form textarea {
  font: inherit; font-size: var(--sc-t-sm); color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border: 1px solid var(--nl-line); border-radius: var(--nl-r);
  padding: .7rem .85rem; width: 100%;
}
.chk-book__form input:focus-visible, .chk-book__form textarea:focus-visible { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.chk-book__wide { grid-column: 1 / -1; }
.chk-book__opt { font-style: normal; color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.chk-book__actions { grid-column: 1 / -1; display: grid; gap: var(--sc-3); justify-items: start; }
.chk-book__note { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); line-height: 1.5; }
.chk-book__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chk-book__done { display: grid; gap: var(--sc-3); padding: var(--sc-6); border: 1px solid color-mix(in oklab, var(--chk-pass) 45%, transparent); border-radius: var(--nl-r-lg); background: color-mix(in oklab, var(--chk-pass) 8%, transparent); }
.chk-book__done b { font-size: var(--sc-t-base); }
.chk-book__done span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

.chk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); max-width: 76rem; margin: var(--sc-8) auto 0; padding: var(--sc-5) var(--sc-5) var(--sc-6); border-top: 1px solid var(--nl-line); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.chk-foot a { color: inherit; }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .chk-get__grid { grid-template-columns: minmax(0, 1fr); }
  .chk-book__wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
}
@media (max-width: 620px) {
  .chk-sit__line:nth-child(2), .chk-sit__line--flat { margin-left: 0; }
  .chk-book__form { grid-template-columns: minmax(0, 1fr); }
  .chk-card__list { grid-template-columns: minmax(0, 1fr); }
  .chk-card__list li { padding-inline: var(--sc-4); padding-block: .3rem; font-size: var(--sc-t-xs); }
  .chk-card__bar { padding-inline: var(--sc-4); }
  .chk-card__foot { padding-inline: var(--sc-4); }
}
@media (prefers-reduced-motion: reduce) {
  .chk-card__list li, .chk-card__score b { transition: none; }
}