/* ==========================================================================
   Shared layout for the problem-aware landing pages (/losers-queue,
   /why-am-i-hardstuck). One sheet, one ".lp" namespace, so the set stays
   visually identical as it grows instead of drifting per page.

   Rides the Deep Report design system: deep-report-v2.css supplies the .drx
   token block and the self-hosted fonts, this sheet only lays out the page.

   EVERY rule is scoped ".drx .lp ..." (0-3-0) rather than ".lp-x" (0-1-0), and
   that is load-bearing, not style. Three separate layers target bare tags that
   this page uses, all of which outrank a lone class:

     site.min.css / bundle.min.css   [data-theme="dark"] p   -> 0-2-1
     critical.min.css / bundle       [data-theme="dark"] a   -> 0-2-1
     deep-report-v2.css              .drx a, .drx h1         -> 0-1-1

   An attribute selector WITH a value counts as a class, so [data-theme="dark"] p
   is 0-2-1, not the 0-1-1 it looks like. Measured consequences of getting this
   wrong, all seen in the browser on this page:
     - every <p> rendered pure white instead of the muted greys
     - the gold CTA rendered gold-on-gold (.drx a paints links --gold)
     - the h1 capped at 30px on mobile by ".drx h1" inside a 560px media query

   Do not "simplify" these selectors back to single classes.
   ========================================================================== */

.drx .lp {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 96px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text);
}

/* ---- shared section furniture ---- */
.drx .lp .lp-sect { margin-top: 88px; }
.drx .lp .lp-kicker {
  display: block;
  font: 600 11.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.drx .lp .lp-h2 {
  font: 700 clamp(28px, 4.2vw, 44px)/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 14px;
}
.drx .lp .lp-sub {
  font: 400 clamp(16px, 1.9vw, 18.5px)/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  margin: 0 0 30px;
  max-width: 68ch;
}
.drx .lp .lp-note {
  font: 400 14px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  margin: 18px 0 0;
  max-width: 72ch;
}

/* ---- hero ---- */
.drx .lp .lp-hero { padding: 72px 0 8px; }
.drx .lp .lp-h1 {
  font: 800 clamp(40px, 7.4vw, 82px)/1.04 'Space Grotesk', sans-serif;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  color: var(--text);
  max-width: 16ch;
}
.drx .lp .lp-h1-grad {
  background: var(--sf-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drx .lp .lp-lede {
  font: 400 clamp(17px, 2.1vw, 21px)/1.6 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  max-width: 62ch;
  margin: 0 0 36px;
}
.drx .lp .lp-lede-em { color: var(--text); font-weight: 600; }

/* The blunt answer. One card, oversized, so the page answers its own title
   above the fold instead of burying it under three paragraphs of preamble. */
.drx .lp .lp-answer {
  border: 1px solid var(--line2);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  background: var(--bg2);
  padding: clamp(26px, 3.4vw, 38px);
  margin-top: 8px;
}
.drx .lp .lp-answer-k {
  font: 600 11.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.drx .lp .lp-answer-t {
  font: 700 clamp(23px, 3.1vw, 33px)/1.32 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  margin: 14px 0 0;
  color: var(--text);
}
.drx .lp .lp-answer-p {
  font: 400 16.5px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  margin: 16px 0 0;
  max-width: 74ch;
}

/* ---- big-number grid: the streak math ---- */
.drx .lp .lp-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.drx .lp .lp-fig {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg2);
  padding: 30px 24px 26px;
  text-align: center;
}
.drx .lp .lp-fig-v {
  display: block;
  font: 800 clamp(46px, 6.6vw, 68px)/1 'Space Grotesk', sans-serif;
  letter-spacing: -.04em;
  background: var(--sf-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* tabular figures stop the columns jittering between 1-in-4 and 1-in-17 */
  font-variant-numeric: tabular-nums;
}
.drx .lp .lp-fig-u {
  display: block;
  font: 600 13px/1 'Space Grotesk', sans-serif;
  color: var(--text2);
  margin-top: 10px;
}
.drx .lp .lp-fig-l {
  display: block;
  font: 400 12.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  color: var(--mut);
  margin-top: 12px;
}

/* ---- what the test measures ---- */
.drx .lp .lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.drx .lp .lp-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg2);
  padding: 26px 24px;
}
.drx .lp .lp-card-n {
  font: 700 12px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  color: var(--gold);
}
.drx .lp .lp-card-h {
  font: 600 19px/1.3 'Space Grotesk', sans-serif;
  color: var(--text);
  margin: 12px 0 8px;
}
.drx .lp .lp-card-p {
  font: 400 15px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  margin: 0;
}

/* ---- severity scale ---- */
.drx .lp .lp-scale { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.drx .lp .lp-row {
  display: grid;
  grid-template-columns: 128px 104px 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  padding: 16px 20px;
}
.drx .lp .lp-row-band {
  font: 700 15px/1 'Space Grotesk', sans-serif;
  letter-spacing: .04em;
}
.drx .lp .lp-row-score {
  font: 600 13px/1 'IBM Plex Mono', monospace;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.drx .lp .lp-row-txt { font: 400 14.5px/1.55 'IBM Plex Sans', sans-serif; color: var(--text2); }
.drx .lp .lp-clear { color: var(--win); }
.drx .lp .lp-mild { color: var(--teal); }
.drx .lp .lp-mod { color: var(--gold); }
.drx .lp .lp-sev { color: var(--loss); }

/* ---- FAQ ---- */
.drx .lp .lp-faq { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.drx .lp .lp-q {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  padding: 22px 24px;
}
.drx .lp .lp-q-h { font: 600 17.5px/1.35 'Space Grotesk', sans-serif; color: var(--text); margin: 0 0 8px; }
.drx .lp .lp-q-p { font: 400 15px/1.7 'IBM Plex Sans', sans-serif; color: var(--text2); margin: 0; }

/* ---- CTA ---- */
.drx .lp .lp-cta {
  margin-top: 88px;
  border: 1px solid var(--line2);
  border-radius: 20px;
  background: var(--bg2);
  padding: clamp(32px, 4.4vw, 52px);
  text-align: center;
  box-shadow: var(--sf-glow);
}
.drx .lp .lp-cta-h {
  font: 700 clamp(26px, 3.6vw, 38px)/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 14px;
}
.drx .lp .lp-cta-p {
  font: 400 16.5px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  margin: 0 auto 28px;
  max-width: 56ch;
}
/* --gold-ink (#05121a) on --gold-fill is 13:1. Without the .drx .lp prefix,
   ".drx a { color: var(--gold) }" wins and paints this gold-on-gold. */
.drx .lp .lp-cta-btn {
  display: inline-block;
  font: 600 16.5px/1 'Space Grotesk', sans-serif;
  background: var(--gold-fill);
  color: var(--gold-ink);
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--drx-t-hover, 180ms) ease;
}
.drx .lp .lp-cta-btn:hover,
.drx .lp .lp-cta-btn:focus,
.drx .lp .lp-cta-btn:visited { color: var(--gold-ink); }
.drx .lp .lp-cta-btn:hover { transform: translateY(-2px); }
.drx .lp .lp-cta-sub {
  display: block;
  font: 400 13px/1.5 'IBM Plex Mono', monospace;
  color: var(--mut);
  margin-top: 16px;
}

@media (max-width: 720px) {
  .drx .lp { padding: 0 18px 72px; }
  .drx .lp .lp-hero { padding: 48px 0 4px; }
  .drx .lp .lp-sect { margin-top: 64px; }
  .drx .lp .lp-cta { margin-top: 64px; }
  /* stacked: the 128px/104px track pair squeezes the verdict text to ~4 words */
  .drx .lp .lp-row { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .drx .lp .lp-row-score { color: var(--text2); }
}

/* deep-report-v2.css caps ".drx h1" at clamp(28px,8vw,40px) under 560px, which drops this
   hero to 30px on a phone. That rule is !important (the .drx namespace uses it to fend off
   the site globals), so specificity alone cannot beat it and !important is required here to
   compete at all. Between two !important rules specificity still decides, and .drx .lp .lp-h1
   (0-3-0) beats .drx h1 (0-1-1). This is the only !important in this sheet; it is not a
   shortcut, it is the only way a landing-page hero can keep display size on mobile. */
@media (max-width: 560px) {
  .drx .lp .lp-h1 { font-size: clamp(34px, 9.2vw, 46px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .drx .lp .lp-cta-btn { transition: none; }
  .drx .lp .lp-cta-btn:hover { transform: none; }
}