/* ===========================================================================
   SCAN Central — the front door (build 229, design review item 18).
   Loaded only by index.php, on top of public.css.

   THE REVIEW'S LAYOUT DIRECTION, taken literally: keep the dark palette but
   earn it. A full-bleed pitch in the hero, gold and cyan carried as thin
   accents rather than fills, condensed display type, 64/96px section rhythm,
   and exactly one filled button per section. That is what separates a sports
   brand from a dark dashboard template.

   Every size and every corner comes from the token layer — tests/tokens_test.php
   fails this file otherwise, which is the point of having written it.
   =========================================================================== */

/* --- Rhythm ------------------------------------------------------------- */
/* The review asked for 64/96px section spacing. The spacing scale stops at 40,
   so the two section rhythms are named here once rather than typed into six
   rules — and they are multiples of the scale's own 8, not new numbers. */
.pub-home {
  --lp-band:   64px;   /* 8 x 8  — between sections on a phone */
  --lp-band-l: 96px;   /* 12 x 8 — between sections on a laptop */
  --lp-max:    1080px;
}

.pub-home main { display: block; }

.lp-in {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.lp-band { padding: var(--lp-band) 0; }
.lp-band-2 { background: var(--surface); }
.lp-band h2 {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-4);
}
.lp-lede {
  color: var(--text-muted);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  max-width: 62ch;
  margin: 0 0 var(--sp-7);
}
.lp-note {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 70ch;
  margin: var(--sp-5) 0 0;
}

/* --- The hero ----------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: var(--lp-band) 0 calc(var(--lp-band) + var(--sp-4));
  border-bottom: var(--hair);
}

/* The drawn pitch. A photograph at /assets/img/hero-pitch.jpg layers over it
   with no other change; until that file exists the fetch fails and the drawing
   is what shows, which is why the drawing is a real element underneath rather
   than a fallback that has to be turned off. */
.lp-hero-art {
  position: absolute;
  inset: 0;
  color: rgba(95, 209, 243, .38);
  background:
    url("/assets/img/hero-pitch.jpg") center / cover no-repeat,
    radial-gradient(120% 90% at 70% 0%, rgba(95, 209, 243, .10), transparent 60%),
    var(--bg);
  pointer-events: none;
}
.lp-hero-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
}
/* The wash goes OVER the drawing and over the photograph, not under them —
   the first cut put the gradient in the same background as the image and the
   pitch behind it with a negative z-index, which paints a drawing underneath
   its own parent's background and shows nothing at all. */
.lp-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17, 19, 24, .70) 0%, rgba(17, 19, 24, .88) 62%, var(--bg) 100%);
}

.lp-hero-in {
  position: relative;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.lp-eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-4);
}

.lp-hero h1 {
  font-family: var(--font-head);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-5);
  /* The line breaks are written into the markup, one clause per line, because
     the four clauses ARE the founding sentence. A ch-limit on top of them just
     re-wraps the first clause and breaks the rhythm the breaks were for. */
  max-width: none;
  text-wrap: balance;
}
/* One accent on the one line that is the promise, not four lines of colour. */
.lp-verified { color: var(--cyan); }

.lp-how {
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 var(--sp-7);
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}
.lp-big {
  min-height: var(--tap);
  padding: 0 var(--sp-6);
  font-size: var(--fs-body);
}
.lp-cta-note {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 62ch;
  margin: var(--sp-5) 0 0;
}

/* --- Three doors -------------------------------------------------------- */
.lp-doors {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lp-door {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lp-band-2 .lp-door { background: var(--surface-2); }
.lp-door:hover { border-color: var(--cyan); transform: translateY(-2px); text-decoration: none; }
.lp-door:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lp-door-k {
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.lp-door b {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  color: var(--text-primary);
}
.lp-door span:not(.lp-door-k):not(.lp-door-go) { line-height: var(--lh-body); }
.lp-door-go {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  color: var(--cyan);
}

/* --- How it works ------------------------------------------------------- */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: lpstep;
}
.lp-step h3 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: var(--sp-4) 0 var(--sp-2);
}
.lp-step h3::before {
  counter-increment: lpstep;
  content: counter(lpstep);
  display: inline-block;
  min-width: 26px;
  margin-right: var(--sp-3);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: var(--fs-small);
  text-align: center;
}
.lp-step p { color: var(--text-muted); line-height: var(--lh-body); margin: 0; }

/* The drawn panel. A photograph at /assets/img/step-1.jpg .. step-3.jpg layers
   over it the same way the hero works. */
.lp-shot {
  aspect-ratio: 16 / 10;
  border: var(--hair);
  border-radius: var(--r-card);
  background: var(--surface-2) center / cover no-repeat;
  overflow: hidden;
}
.lp-band-2 .lp-shot { background-color: var(--surface-3); }
.lp-step[data-step="1"] .lp-shot { background-image: url("/assets/img/step-1.jpg"); }
.lp-step[data-step="2"] .lp-shot { background-image: url("/assets/img/step-2.jpg"); }
.lp-step[data-step="3"] .lp-shot { background-image: url("/assets/img/step-3.jpg"); }

.lp-shot-bar {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hair);
}
.lp-shot-bar span {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}
.lp-shot-body {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  height: calc(100% - 34px);
}

.lp-rec { display: flex; align-items: center; gap: var(--sp-2); color: var(--red); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lp-rec i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--red); }
.lp-frame { flex: 1; height: 62%; border: 2px dashed var(--cyan); border-radius: var(--r-sm); }

.lp-ring {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  border: 3px solid var(--cyan);
}
.lp-ring b { font-family: var(--font-head); font-size: var(--fs-metric); font-weight: var(--fw-black); color: var(--cyan); }
.lp-rows { flex: 1; display: grid; gap: var(--sp-3); }
.lp-rows i { display: block; height: 8px; border-radius: var(--r-pill); background: var(--cyan-dim); }

.lp-work { flex: 1; display: grid; gap: var(--sp-2); }
.lp-work b { font-size: var(--fs-small); color: var(--gold); }
.lp-work span { display: block; height: 8px; border-radius: var(--r-pill); background: var(--border-strong); }
.lp-work span:last-child { width: 70%; }
.lp-chip {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: var(--fs-tiny);
}

/* --- The method --------------------------------------------------------- */
.lp-method { border-top: var(--hair); border-bottom: var(--hair); }
.lp-honest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  max-width: 76ch;
}
.lp-honest li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.lp-honest li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  border: 2px solid var(--cyan);
}
.lp-honest b { color: var(--text-primary); }

/* --- Where we stand ----------------------------------------------------- */
.lp-trust {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lp-t {
  padding-left: var(--sp-4);
  border-left: 3px solid var(--cyan);
}
.lp-t b {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
  color: var(--text-primary);
}
.lp-t p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body); }

/* --- What it costs ------------------------------------------------------ */
.lp-price {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: var(--sp-7);
}
.lp-p {
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
}
.lp-band-2 .lp-p { background: var(--surface-2); }
.lp-p-k {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}
.lp-p b {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-2);
}
.lp-p p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body); }

/* --- The sample report -------------------------------------------------- */
.lp-sample {
  max-width: 620px;
  border: var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.lp-band-2 .lp-sample { background: var(--surface-2); }
.lp-sample-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--hair);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
}
.lp-sample-tag {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lp-sample-b { padding: var(--sp-5); display: grid; gap: var(--sp-5); }
.lp-sample-idx { display: grid; gap: var(--sp-1); }
.lp-sample-idx b {
  font-family: var(--font-head);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--cyan);
}
.lp-sample-idx span { font-size: var(--fs-small); font-weight: var(--fw-med); }
.lp-sample-idx em { font-style: normal; font-size: var(--fs-tiny); color: var(--text-muted); }

.lp-sample-p { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.lp-sample-p li {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}
.lp-sample-p i {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--cyan-dim);
}
.lp-sample-p li.none i { background: var(--surface-3); }
.lp-sample-p li.none b { color: var(--text-muted); font-weight: var(--fw-body); font-size: var(--fs-tiny); }
.lp-sample-p b { font-variant-numeric: tabular-nums; }

.lp-sample-w {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.lp-sample-w b { color: var(--text-primary); }

/* --- The last ask ------------------------------------------------------- */
.lp-last { border-top: var(--hair); }

/* --- Bigger than a phone ------------------------------------------------ */
@media (min-width: 860px) {
  .lp-band { padding: var(--lp-band-l) 0; }
  .lp-hero { padding: var(--lp-band-l) 0; }
  .lp-hero h1 { font-size: calc(var(--fs-hero) * 1.2); }
  .lp-steps { gap: var(--sp-7); }
}

/* --- Somebody who would rather things held still ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lp-door { transition: none; }
  .lp-door:hover { transform: none; }
}

/* --- The door pages ----------------------------------------------------- */
/* A door page is the same furniture with a shorter hero: it has already been
   chosen, so it does not need the pitch again — it needs to answer the reader
   it was written for and ask once. */
.lp-hero-door { padding-bottom: var(--sp-8); }
.lp-hero-door h1 { font-size: var(--fs-display); max-width: 22ch; }
.lp-door-flat { cursor: default; }
.lp-door-flat:hover { border-color: var(--border); transform: none; }
.lp-per { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-body); color: var(--text-muted); }

@media (min-width: 860px) {
  .lp-hero-door h1 { font-size: var(--fs-hero); }
}