/* Home: a claim on the left, the live figures that prove it on the right, once per tool. */

/* The first screen: the claim and the search, beside the screener's top five. A faint lift of light behind the proof,
   the one ground the site paints. The glow is drawn inside the hero's own box, so nothing clips the hero: the search
   suggestions float over the next band, and the hero never becomes a box that scrolls. */
.hero { position: relative; padding: 64px 0 72px; border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(32.5% 70% at 77.5% 50%, rgba(195, 204, 218, 0.07), transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; max-width: 19ch; }
.hero .lede { margin-top: 16px; font-size: 17px; max-width: 46ch; }
/* Above whatever follows it, so its suggestions are never painted under the next block. */
.hero-search { position: relative; z-index: 5; margin-top: 28px; max-width: 520px; }
.hero-links { margin-top: 16px; }
/* Where the figures come from and when (common.js), under the hero's links. */
.hero-copy .source-line { margin-top: 18px; }
@media (max-width: 960px) {
  .hero { padding: 40px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: 20ch; }
}

/* A proof frame: a heading line, the live rows, a link to the whole thing. */
.proof { margin: 0; }
/* The product's own figures sit above the ground: a soft offset shadow and a hairline of light on the top edge. */
.proof, .pair-proof { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.75), 0 2px 8px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.045); }
.proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.proof-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.proof-head > span:not(.tag):not(.proof-title) { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.proof-head .sym { font-family: var(--mono); font-weight: 600; margin-right: 4px; }
.proof-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); text-decoration: none; }
.proof-foot:hover { color: var(--text); background: var(--surface-2); }
.proof-foot .i { font-size: 14px; }
.proof-empty { padding: 28px 18px; color: var(--text-2); font-size: 14px; }
.proof-note { padding: 12px 18px 16px; font-size: 12.5px; color: var(--text-3); }

.top-rows, .buy-rows { list-style: none; margin: 0; padding: 4px 0; }
.top-rows li.skeleton, .buy-rows li.skeleton { margin: 4px 14px; }
.top-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 150px; gap: 14px; align-items: center;
  padding: 9px 18px; text-decoration: none; transition: background .12s;
}
.top-row:hover { background: var(--surface-2); }
.top-row .rank { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.top-row .why { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.top-row .score .tape { width: 100px; }
@media (max-width: 520px) {
  .top-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .top-row .why { display: none; }
  .top-row .score .tape { width: 72px; }
}

/* The three tools: claim and proof side by side, the proof on alternating sides. */
.pair { padding: 88px 0; border-bottom: 1px solid var(--line); }
.pair-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.pair-flip .pair-claim { order: 2; }
.pair-claim h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.028em; max-width: 22ch; }
.pair-claim p { margin-top: 14px; color: var(--text-2); font-size: 15px; max-width: 52ch; }
.pair-claim p b { color: var(--text); font-weight: 600; }
.pair-claim .btn { margin-top: 24px; }
.claim-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.claim-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.claim-points .i { color: var(--up); font-size: 15px; transform: translateY(3px); }
.pair-proof { min-width: 0; margin: 0; }
@media (max-width: 960px) {
  .pair { padding: 56px 0; }
  .pair-grid { grid-template-columns: 1fr; gap: 28px; }
  .pair-flip .pair-claim { order: 0; }
}

/* The screener's proof: the top company's ledger, alone. */
.ledger-solo { display: block; padding: 14px 18px 4px; animation: none; }
.ledger-solo .ledger-head { display: none; }
.proof-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 18px 14px; font-size: 13px; color: var(--text-3); }
.proof-strip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 8px; }
.proof-strip .tag { margin-right: 8px; }
/* A label and its value wrap as one. */
.proof-strip .fact { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }

/* The insider proof: the latest purchases. */
.tier-key { margin: 20px 0 0; display: grid; gap: 10px; font-size: 14px; }
.tier-key div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.tier-key dt { margin: 0; }
.tier-key dd { margin: 0; color: var(--text-2); }
.buy-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 9px 18px; text-decoration: none; transition: background .12s;
}
.buy-row:hover { background: var(--surface-2); }
.buy-row .co .nm { max-width: 100%; }
/* The buyer's name on one line, their role on the next, so a long name can only cut itself. */
.buy-row .co .role { color: var(--text-3); }
.buy-row .sym .filed { margin-left: 4px; font-family: var(--font); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
.buy-row .amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.buy-row .amt b { font-weight: 600; font-size: 14px; }
.buy-row .amt span { font-size: 12px; color: var(--text-3); }
.buy-row .amt span.up { color: var(--up); }
.buy-row .amt span.down { color: var(--down); }
/* On phones who bought wraps rather than being cut off. */
@media (max-width: 520px) { .buy-row .co .nm { white-space: normal; } }

/* The report's proof: a fair-value range against the price, and three health measures. */
.ex-range { padding: 22px 18px 8px; }
.ex-track { position: relative; height: 8px; border-radius: 4px; background: var(--tape-track); }
.ex-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--tape); opacity: 0.55; }
.ex-mark { position: absolute; top: -6px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.ex-labels { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-3); }
.ex-labels b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-bars { margin: 8px 0 0; padding: 4px 18px; display: grid; }
/* Each row only, not the meter's own divs inside it. */
.ex-bars > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ex-bars dt { font-size: 13.5px; color: var(--text); }
.ex-bars dd { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.ex-val { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
/* On phones the meter drops under its label, as the report's health rows do. */
@media (max-width: 520px) { .ex-bars > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* How to read the numbers */
.method { padding: 88px 0 24px; }
.method-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
.method h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.028em; }
.method .lede { margin-top: 12px; }
.method-note { margin-top: 24px; }
.glossary { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.glossary div { padding: 16px 0; border-top: 1px solid var(--line); }
.glossary dt { font-weight: 600; font-size: 14.5px; }
.glossary dd { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
@media (max-width: 960px) { .method-grid { grid-template-columns: 1fr; gap: 28px; } .method { padding-top: 56px; } }
@media (max-width: 600px) { .glossary { grid-template-columns: 1fr; } }