/* Authority Graph Lite — public surface.
 *
 * Phase 47 baseline: readable, mobile-first, on the brand tokens vendored in
 * tokens.css. The designed report, the score visual and the share card land in
 * Phase 50; this is deliberately plain rather than a design that would then be
 * thrown away.
 *
 * Colours come from tokens.css custom properties with literal fallbacks, so a
 * token rename degrades to something legible rather than to unstyled HTML.
 */

/* The bridge from this file's role names to the brand tokens.
 *
 * Phase 47 wrote every rule as `var(--color-x, #literal)`, but tokens.css
 * defines no `--color-*` name at all — it exposes `--bg` / `--fg` / `--border`
 * and the raw `--lp-*` palette. So every one of those calls was silently
 * resolving to its literal and the public surface was not on brand colours
 * while appearing to be. Binding the names here rather than editing 40 call
 * sites keeps the fallbacks intact and keeps the mapping in one place.
 *
 * tokens.css is shared with the dashboard and is NOT edited from here. */
:root {
  --color-primary:         var(--fg-brand, #284D96);
  --color-surface:         var(--bg, #ffffff);
  --color-surface-alt:     var(--lp-web-soft-blue, #E9EDF4);
  --color-text:            var(--fg, #121824);
  --color-text-muted:      var(--fg-muted, #555B6B);
  --color-border:          var(--border, #E1E5EC);
  --color-danger:          var(--lp-danger, #D64545);
  --color-warning:         var(--lp-warning, #E9A43C);
  /* No token for the tinted alert grounds; they are tints of the two above. */
  --color-danger-surface:  #FBEAEA;
  --color-warning-surface: #FDF4E3;
}

.lite {
  margin: 0;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-body, "Proxima Nova", Inter, system-ui, -apple-system, sans-serif);
  line-height: 1.5;
}

.lite-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Headings take the heading face; numerals take the stat face (see .lite-dial-
   value and .lite-score below). Only --font-body was ever bound in this file, so
   every heading rendered in the BODY font and the score was never set in Barlow
   Condensed at all. Invisible until now: --font-heading and --font-body both
   resolved to the same unloaded 'Proxima Nova' and fell through to the same
   fallback, so the two were indistinguishable on screen. Giving them different
   families exposed the omission. */
.lite h1,
.lite h2,
.lite h3 {
  font-family: var(--font-heading);
}

.lite h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--color-primary, #1f3864);
}

.lite h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0.5rem;
  color: var(--color-primary, #1f3864);
}

.lite .lead {
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
}

.lite .hint {
  font-size: 0.9rem;
  color: var(--color-text-muted, #595959);
}

.lite a {
  color: var(--color-primary, #1f3864);
}

/* --- form ---------------------------------------------------------------- */

.lite-form fieldset {
  border: 1px solid var(--color-border, #d6dce5);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.2rem;
  margin: 0 0 1.25rem;
}

.lite-form legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--color-primary, #1f3864);
}

.lite-form label {
  display: block;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.lite-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.3rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-weight: 400;
  color: inherit;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d6dce5);
  border-radius: 4px;
}

/* Three job inputs stack under one label; space them without a nested list. */
.lite-form input + input {
  margin-top: 0.35rem;
}

.lite-form input:focus-visible {
  outline: 2px solid var(--color-primary, #1f3864);
  outline-offset: 1px;
}

.lite-form button {
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  color: #fff;
  background: var(--color-primary, #1f3864);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.lite-form .cf-turnstile {
  margin: 0 0 1rem;
}

.lite-error {
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem;
  border-left: 4px solid var(--color-danger, #b3261e);
  background: var(--color-danger-surface, #fdeceb);
}

/* --- progress ------------------------------------------------------------ */

.lite-spinner {
  width: 2rem;
  height: 2rem;
  margin: 1.5rem 0;
  border: 3px solid var(--color-border, #d6dce5);
  border-top-color: var(--color-primary, #1f3864);
  border-radius: 50%;
  animation: lite-spin 0.9s linear infinite;
}

@keyframes lite-spin {
  to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: the spinner is decoration, and the
 * stage copy already says what is happening. */
@media (prefers-reduced-motion: reduce) {
  .lite-spinner { animation: none; }
}

/* --- method box ---------------------------------------------------------- */

/* Not fine print. SPEC-LITE §7.4 requires the method to travel with the number
 * on every surface, so this is styled as content rather than as a footnote. */
.lite-method {
  margin-top: 2.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--color-surface-alt, #edf1f7);
  border-radius: 6px;
  font-size: 0.95rem;
}

.lite-method p {
  margin: 0 0 0.7rem;
}

.lite-method-facts {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted, #595959);
}

/* --- teaser / report ----------------------------------------------------- */

.lite-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #595959);
}

.lite-notice {
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem;
  border-left: 4px solid var(--color-warning, #a36a00);
  background: var(--color-warning-surface, #fdf4e3);
}

.lite-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 1.5rem 0 2rem;
  text-align: center;
}

.lite-score-reason {
  max-width: 28rem;
  margin: 0;
}

.lite-dial-value {
  /* The one place the design names a face by name: big numerals are Barlow
     Condensed. `font-family` applies to SVG <text> the same as to HTML. */
  font-family: var(--font-stat);
  font-size: 34px;
  font-weight: 700;
  fill: var(--color-primary, #1f3864);
}

.lite-dial-unit {
  /* Sized in USER UNITS, not rem: the SVG scales via viewBox, so a rem-based
     label stays physically the same size while the ring grows and overruns it
     at the hero's 260px. 7 user units is ~14px at that size and ~9px on the
     card, which is the proportion the design draws. */
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--color-text-muted, #595959);
}

.lite-finding h2 {
  margin-top: 1.5rem;
}

/* --- the gate ------------------------------------------------------------ */

.lite-gate {
  margin: 2.5rem 0;
  padding: 1.2rem 1.3rem 1.4rem;
  border: 1px solid var(--color-border, #d6dce5);
  border-radius: 6px;
}

/* Static copy naming what is withheld. The values behind these labels are not
 * in the document at all — see the header of teaser.html. */
.lite-locked {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  color: var(--color-text-muted, #595959);
}

.lite-selflookup {
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
}

.lite-selflookup legend {
  padding: 0;
  font-size: 0.95rem;
}

.lite-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
  margin: 0 0 0.3rem;
}

.lite-radio input {
  width: auto;
  margin: 0;
  display: inline-block;
}

/* --- sub-scores ---------------------------------------------------------- */

.lite-subscores {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lite-subscore {
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border, #d6dce5);
}

.lite-subscore p {
  margin: 0.4rem 0 0;
}

.lite-subscore-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.lite-subscore-label {
  font-weight: 600;
}

.lite-subscore-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary, #1f3864);
}

/* "Not scored" must not read as a low score. It is set in the muted body size,
 * never in the numeral style. */
.lite-subscore.is-unscored .lite-subscore-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted, #595959);
}

.lite-bar {
  height: 6px;
  margin-top: 0.5rem;
  background: var(--color-border, #d6dce5);
  border-radius: 3px;
  overflow: hidden;
}

.lite-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary, #1f3864);
}

/* --- tables, evidence, citations ----------------------------------------- */

.lite-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.lite-table th,
.lite-table td {
  padding: 0.5rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #d6dce5);
}

.lite-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lite-table .lite-row-total th,
.lite-table .lite-row-total td {
  font-weight: 700;
}

.lite-contradiction {
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--color-primary, #1f3864);
  background: var(--color-surface-alt, #edf1f7);
}

.lite-contradiction h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.lite-said {
  margin: 0 0 0.4rem;
}

.lite-said-who {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #595959);
}

.lite-prompt {
  padding: 1rem 0;
  border-top: 1px solid var(--color-border, #d6dce5);
}

.lite-prompt h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: var(--color-primary, #1f3864);
}

.lite-question {
  margin: 0 0 0.7rem;
  color: var(--color-text-muted, #595959);
}

.lite-prompt-outcome {
  margin: 0.5rem 0 0.3rem;
}

.lite-prompt blockquote {
  margin: 0.3rem 0 0.3rem 0.9rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--color-border, #d6dce5);
}

.lite-people,
.lite-secondary,
.lite-citations,
.lite-urls {
  padding-left: 1.1rem;
}

.lite-citations {
  list-style: none;
  padding: 0;
}

.lite-citations > li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border, #d6dce5);
}

.lite-domain {
  font-weight: 600;
}

.lite-urls {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  word-break: break-all;
}

/* --- CTA ----------------------------------------------------------------- */

.lite-cta {
  margin: 2.5rem 0 1.5rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--color-primary, #1f3864);
  border-radius: 6px;
}

/* `.lite a.lite-button`, not `.lite-button`. `.lite a` above sets every anchor
 * to brand blue at specificity (0,1,1), which outranks a bare class (0,1,0) — so
 * the button rendered blue text on its own blue background: a blank rectangle.
 * It had been broken this way since Phase 50 and was invisible only because the
 * button was gated on LITE_CTA_URL, which was never set. Do not "simplify" this
 * selector back to a single class. */
.lite a.lite-button {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--color-primary, #1f3864);
  border-radius: 4px;
}

.lite a.lite-button:hover { background: var(--lp-blue-deep, #1B3B76); }

.lite-method p:last-child { margin-bottom: 0; }

/* --- Branding chrome ------------------------------------------------------
 *
 * Header and footer for every public surface. Deliberately restrained: the
 * designed report is a later pass (SPEC-LITE §15.3), and anything elaborate here
 * would be thrown away with it. What must be right NOW is that the page is
 * identifiably Lilypath's and carries its legal footer.
 */

.lite-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.lite-logo {
  display: block;
  height: 36px;
  width: auto;
  /* The source is 3000x600, so cap it rather than let a retina-scale asset
     dominate the page on a phone. */
  max-width: 60vw;
}

.lite-footer {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--color-border, #E1E5EC);
  color: var(--color-text-muted, #555B6B);
  font-size: 13px;
  line-height: 1.55;
}

.lite-footer p { margin: 0 0 10px; }
.lite-footer a { color: inherit; text-decoration: underline; }
.lite-footer a:hover { color: var(--color-primary, #284D96); }

/* The disclaimer reads as part of the footer (Dan, 2026-09-28): the report's
 * method box carries the same claims in the body, so the footer copy is fine
 * print like the trademark note beside it, not a boxed callout. */
.lite-disclaimer,
.lite-trademark,
.lite-legal { font-size: 12px; }

@media print {
  /* A saved or printed report keeps its attribution. */
  .lite-header, .lite-footer { break-inside: avoid; }
}

/* The absent-sources finding. Given its own ground because it is the most
 * actionable block on the report — a list of rooms the subject is not in. */
.lite-absent {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--color-surface-alt, #E9EDF4);
  border-radius: 10px;
}
.lite-absent h3 { margin: 0 0 6px; font-size: 15px; }
.lite-absent-list {
  margin: 10px 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 24px;
}
@media (max-width: 520px) { .lite-absent-list { columns: 1; } }

/* "Back to Lilypath", top and bottom. The header pairs it with the logo; the
 * footer repeats it because the report is long and a visitor who has read to the
 * end should not have to scroll back up to leave. */
.lite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lite-back {
  font-size: 14px;
  color: var(--color-primary, #284D96);
  text-decoration: none;
  white-space: nowrap;
}
.lite-back:hover { text-decoration: underline; }

.lite-back-foot { margin-bottom: 14px; }

/* ===========================================================================
   THE DESIGNED REPORT — nine sections.
   docs/design/design_handoff_authority_snapshot/README.md. Every value here is a design
   token from tokens.css; the literals that remain are the three the pack names
   as deliberately un-tokenised (#FF9B9B, #FF6B6B danger tints legible on navy,
   #2AC8E8 cyan hover).

   The `.is-static` pattern: each interactive block ships styled for NO
   JavaScript, and lite-report.js removes the class to take over. So the rules
   under `.is-static` are the no-JS presentation, not a degraded one.
   =========================================================================== */

.lite-report .lite-wrap,
.lite-wrap.is-wide { max-width: 1180px; padding-left: 32px; padding-right: 32px; }

/* Full-bleed bands inside a centred column.
 *
 * The navy hero, the callout strip, the rivals panel and the sources panel run
 * edge to edge while their CONTENT stays on the 1180px measure. A plain
 * `margin: 0 -32px` only reaches 32px past the column, which on a wide screen
 * left a white gutter either side of the navy — the band looked like a card
 * rather than a section.
 *
 * `overflow-x: clip` rather than `hidden`: hidden makes the body a scroll
 * container and the sticky sub-nav stops sticking. Clip does not.
 */
.lite-report { overflow-x: clip; }
.lite-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(32px, calc(50vw - 558px));
  padding-right: max(32px, calc(50vw - 558px));
}

/* `[hidden]` HAS TO BEAT AN AUTHOR `display`, or it does nothing.
 *
 * `[hidden] { display: none }` lives in the user-agent stylesheet, which loses
 * to ANY author declaration. `.lite-name-chip` sets `display: inline-flex`, so
 * setting `chip.hidden = true` left it on screen: the rivals filter set the
 * attribute on 8 of 16 chips and every one stayed visible at `display: flex`.
 * The filter looked broken while the JavaScript was working perfectly.
 *
 * The same exposure applied to the share card's Copy-link button, which ships
 * `hidden` and is revealed only when `navigator.clipboard` exists — with
 * `display: inline-block` beating the UA rule it was visible with no JS at all,
 * as a button that does nothing.
 *
 * `!important` is correct here rather than lazy: this restores the semantic the
 * attribute is defined to have, and anything that genuinely needs to override it
 * should not be using `hidden` in the first place. Scoped to `.lite` so it
 * cannot reach the dashboard, which shares tokens.css but not this file. */
.lite [hidden] { display: none !important; }

html { scroll-behavior: smooth; }
::selection { background: var(--lp-cyan-100, #D4F2F8); }
.lite-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:where(.lite) :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 180, 216, 0.35));
  border-radius: 3px;
}

/* --- 1. sticky sub-nav ---------------------------------------------------- */
.lite-subnav {
  position: sticky; top: 0; z-index: 40;
  /* Opaque, never backdrop-filter: a brand rule, and it also keeps the bar
     legible over the navy hero on browsers with no filter support. */
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--lp-web-border, #E1E5EC);
}
.lite-subnav-row {
  display: flex; align-items: center; gap: 28px;
  padding-block: 12px;
}
.lite-subnav-brand { display: block; flex: none; line-height: 0; }
.lite-subnav-brand img { display: block; height: 26px; width: auto; }
.lite-subnav-list {
  display: flex; gap: 2px; flex: 1; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.lite-subnav-list::-webkit-scrollbar { display: none; }
.lite-subnav-list a {
  display: block; padding: 8px 13px; border-radius: 3px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--fg-muted, #555B6B);
  transition: all var(--dur-fast, 120ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite-subnav-list a.is-active { color: var(--lp-blue, #284D96); background: var(--lp-blue-050, #F3F6FB); }
.lite a.lite-subnav-cta {
  padding: 11px 20px; border-radius: var(--r-sm, 4px);
  background: var(--lp-web-cta-black, #0F0E17); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite a.lite-subnav-cta:hover { background: var(--lp-blue, #284D96); }
.lite-progress-rail { height: 2px; background: var(--lp-ink-100, #ECEEF2); }
.lite-progress-rail > span { display: block; height: 100%; width: 0; background: var(--lp-cyan, #00B4D8); }
.lite-subnav.is-static .lite-progress-rail { display: none; }
:where(.lite) [id] { scroll-margin-top: 76px; }

/* --- 2. hero -------------------------------------------------------------- */
.lite-hero {
  padding-block: 72px 64px; color: #fff;
  background: linear-gradient(160deg, var(--lp-blue-ink, #0E2841) 0%,
              var(--lp-web-navy, #2B4679) 62%, var(--lp-blue-deep, #1B3B76) 100%);
}
.lite-hero-grid {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 64px; align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.lite-hero h1 {
  font-family: var(--font-heading); font-weight: 700; color: #fff;
  font-size: clamp(38px, 4.4vw, 60px); line-height: 1.04;
  letter-spacing: -0.01em; text-wrap: balance; margin: 14px 0 16px;
}
/* `wrap` so the row can break BETWEEN its items on a narrow screen. Without
   it the date was the item that gave way and broke inside itself. */
.lite-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.lite-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.lite-eyebrow-cyan { color: var(--lp-cyan, #00B4D8); }
.lite-eyebrow-warm { color: #FF9B9B; }
.lite-rule { display: block; width: 44px; height: 1px; background: rgba(255,255,255,0.28); }
/* `nowrap` because this is a DATE: at 375px the flex row broke it after the
   month, printing "2026-09-" over "01", which reads as two values. Needs
   the row's `flex-wrap` above to have somewhere to go. */
.lite-retrieved { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.62); white-space: nowrap; }
.lite-lead { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 46ch; text-wrap: pretty; }
.lite-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* The one pill in the design, and it is a status marker rather than a button. */
.lite-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 14px; border-radius: var(--r-pill, 999px);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.lite-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lite-badge-danger   { background: rgba(214,69,69,0.16); border: 1px solid rgba(214,69,69,0.45); color: #FFB3B3; }
.lite-badge-warning  { background: rgba(233,164,60,0.18); border: 1px solid rgba(233,164,60,0.5); color: #FFD79B; }
.lite-badge-positive { background: rgba(0,180,216,0.18); border: 1px solid rgba(0,180,216,0.5); color: #9EE9F8; }
.lite-badge-neutral  { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.86); }

/* The badge and the clause that says what it means, on one baseline. `wrap` and
   `align-items: baseline` rather than `center`, because the gloss is a sentence
   fragment that WILL take a second line on a phone and the pill should stay put
   when it does. The gloss is set to read as a caption to the pill rather than as
   prose in its own right: it must not compete with the H1 immediately below,
   which is where the actual finding is. */
.lite-verdict {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  margin: 0 0 18px;
}
.lite-verdict-gloss {
  font-size: 15px; line-height: 1.45; color: var(--fg-muted, #555B6B);
  max-width: 42ch; text-wrap: pretty; margin: 0;
}
/* Light surface is the DEFAULT and the dark panels override it, not the other
   way round: the teaser is set on the page's light background, and a white-alpha
   gloss there is invisible rather than merely wrong. Defaulting to the dark ink
   means a surface that gains this element later reads low-contrast at worst. */
.lite-hero .lite-verdict-gloss,
.lite-sharecard-navy .lite-verdict-gloss { color: rgba(255,255,255,0.7); }

.lite-hero-dial { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lite-hero .lite-dial circle:first-child { stroke: rgba(255,255,255,0.14); }
.lite-hero .lite-dial circle + circle { stroke: var(--lp-cyan, #00B4D8); }
.lite-hero .lite-dial-value { fill: #fff; }
.lite-hero .lite-dial-unit { fill: rgba(255,255,255,0.58); letter-spacing: 0.16em; }
.lite-dial-caption { font-size: 13px; color: rgba(255,255,255,0.55); text-align: center; max-width: 30ch; margin: 0; }

.lite a.lite-button-cyan {
  background: var(--lp-cyan, #00B4D8); color: var(--lp-blue-ink, #0E2841);
  transition: transform var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)),
              background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite a.lite-button-cyan:hover { background: #2AC8E8; transform: translateY(-2px); }
.lite a.lite-button-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.32); color: #fff; }
.lite a.lite-button-ghost:hover { opacity: 0.75; }

/* --- 3. callout pair ------------------------------------------------------ */
.lite-callouts {
  padding-block: 44px; display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr;
  background: var(--lp-web-page-alt, #F8F9FA);
  border-bottom: 1px solid var(--lp-web-border, #E1E5EC);
}
.lite-callout { padding: 28px 30px; border-radius: var(--r-lg, 12px); }
.lite-callout p:last-child { font-size: 17px; line-height: 1.6; margin: 8px 0 0; }
.lite-callout-light { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.06)); }
.lite-callout-light p:last-child { color: var(--fg, #121824); }
/* The dark card always carries the consequential side. */
.lite-callout-dark { background: var(--lp-blue-ink, #0E2841); }
.lite-callout-dark p:last-child { color: rgba(255,255,255,0.86); }

/* --- the finding-first hero (2026-09-13) --------------------------------------- */
/* The quote is a blockquote mark, not the banned accent bar: neutral, never coloured. */
.lite-hero-quote { margin: 18px 0 20px; padding: 2px 0 2px 18px; border-left: 2px solid rgba(255,255,255,0.28); max-width: 62ch; }
.lite-hero-quote p { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.lite-hero-quote p::before { content: "\201C"; }
.lite-hero-quote p::after  { content: "\201D"; }
.lite-hero-quote footer { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lp-cyan, #00B4D8); }
.lite-hero .lite-lead-soft { color: rgba(255,255,255,0.72); font-size: 16px; }
.lite-hero-dial-small { align-self: start; padding-top: 88px; }
.lite-hero-dial-small .lite-dial-caption a { color: var(--lp-cyan, #00B4D8); }
@media (max-width: 980px) { .lite-hero-dial-small { padding-top: 0; } }
.lite-section-head-sub { margin-top: 56px; }
.lite-section-head-sub .lite-h2 { font-family: var(--font-heading); font-weight: 600; color: var(--lp-blue-ink, #0E2841); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; margin: 6px 0 12px; }
.lite-collisions { margin-bottom: 20px; }
.lite-asking { min-height: 2.6em; }

/* --- action items carry their finding (2026-09-13) ------------------------------ */
.lite-action-because { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; font-weight: 600; letter-spacing: 0.01em; color: var(--lp-cyan-deep, #0090B0); }
.lite-action-quote { margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--lp-ink-200, #D9DCE2); font-size: 14.5px; line-height: 1.55; color: var(--fg-muted, #555B6B); }
.lite-action-quote::before { content: "\201C"; }
.lite-action-quote::after { content: "\201D"; }
.lite-action-quote footer { display: inline; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #555B6B); }
.lite-actions-cta { margin-top: 20px; padding: 18px 20px; border-radius: 8px; background: var(--lp-blue-ink, #0E2841); color: #fff; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.lite-actions-cta > div { flex: 1 1 320px; }
.lite-actions-cta .lite-eyebrow { margin: 0 0 4px; }
.lite-actions-cta-text { margin: 0; font-size: 16px; line-height: 1.5; color: #fff; }
.lite-action-content { margin: 12px 0 0 !important; padding: 10px 14px; border-left: 3px solid var(--lp-cyan, #00B4D8); background: var(--bg-muted, #ECEEF2); border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.55; }
.lite-action-content-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #555B6B); margin-bottom: 2px; }
.lite-action-sources { margin: 12px 0 0; padding: 10px 14px; background: var(--bg-muted, #ECEEF2); border-radius: 6px; }
.lite-action-sources-head { font-size: 11px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #555B6B) !important; margin: 0 0 6px !important; }
.lite-action-sources ul { list-style: none; margin: 0; padding: 0; }
.lite-action-sources li { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.lite-action-source-domain { font-weight: 600; }
.lite-action-source-meta { color: var(--fg-muted, #555B6B); }
@media (max-width: 560px) { .lite-action-sources li { margin-bottom: 4px; } .lite-action-source-meta { display: block; } }

/* --- this week: held / moved / alert, and the recommendation strip (2026-09-13) --- */
.lite-week { padding: 28px 30px; margin: 0 0 40px; border-radius: var(--r-lg, 12px); background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); }
.lite-week-alert { border-color: var(--color-danger, #B3261E); }
.lite-week h2 { font-family: var(--font-heading); font-weight: 600; color: var(--lp-blue-ink, #0E2841); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; margin: 10px 0 14px; }
.lite-week-receipt, .lite-week-movements { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--fg, #121824); }
.lite-week-receipt li::marker { color: var(--lp-success, #1E9E5E); }
.lite-week-movements li.is-alert { font-weight: 600; }
.lite-week-movements li.is-alert::marker { color: var(--color-danger, #B3261E); }
.lite-strip th[scope="row"] { white-space: nowrap; }
.lite-strip-cell { font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; }
.lite-strip-recommended { color: var(--lp-success, #1E9E5E); }
.lite-strip-named { color: var(--lp-cyan-deep, #0090B0); }
.lite-strip-others, .lite-strip-collision { color: var(--color-danger, #B3261E); }
.lite-strip-declined, .lite-strip-none, .lite-strip-absent { color: var(--fg-muted, #555B6B); font-weight: 500; }

/* --- the Pulse's own sections: this week, what is wrong (2026-09-13) ------------- */
.lite-thisweek { padding-top: 56px; }
.lite-thisweek .lite-week { margin-bottom: 0; }
.lite-week-baseline { border-color: var(--lp-web-border, #E1E5EC); }
.lite-watchlist li::marker { color: var(--lp-cyan-deep, #0090B0); }
.lite-issue-tier { margin: 28px 0 0; }
.lite-issue-tier-head { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--lp-blue-ink, #0E2841); margin: 0 0 12px; }
.lite-issue-tier-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-stat); font-size: 16px; color: #fff; background: var(--lp-blue, #284D96); }
.lite-issue-tier-1 .lite-issue-tier-num { background: var(--color-danger, #B3261E); }
.lite-issue-tier-2 .lite-issue-tier-num { background: var(--lp-warning, #E9A43C); }
.lite-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lite-issue { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-md, 8px); padding: 16px 20px; }
.lite-issue-fact { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg, #121824); }
.lite-issues-clean { margin-top: 24px; }

/* --- shared section furniture --------------------------------------------- */
.lite-section { padding: 72px 0 0; }
.lite-band { padding: 28px 0 0; }
.lite-section-head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 26px; }
.lite-section-head > div { max-width: 62ch; }
.lite-section h2 {
  font-family: var(--font-heading); font-weight: 600; color: var(--lp-blue-ink, #0E2841);
  font-size: clamp(28px, 3vw, 44px); line-height: 1.08; margin: 6px 0 10px;
}
.lite-lead-muted { font-size: 17px; color: var(--fg-muted, #555B6B); margin: 0; }
.lite-lead-dark { color: rgba(255,255,255,0.76); font-size: 17px; }

/* --- segmented controls ---------------------------------------------------- */
.lite-segmented {
  display: inline-flex; gap: 0; margin: 0; padding: 4px; border: 0;
  background: var(--lp-web-soft-blue, #E9EDF4); border-radius: var(--r-sm, 4px);
}
.lite-segmented.is-static { opacity: 0.55; }
.lite-segment { position: relative; }
.lite-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lite-segment span {
  display: block; padding: 8px 15px; border-radius: 3px;
  font-size: 13px; font-weight: 600; color: var(--fg-muted, #555B6B);
  transition: all var(--dur-fast, 120ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite-segment input:checked + span { background: #fff; color: var(--lp-blue-ink, #0E2841); box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.06)); }
.lite-segment input:focus-visible + span { box-shadow: var(--focus-ring, 0 0 0 3px rgba(0,180,216,0.35)); }
.lite-segmented.is-dark { background: rgba(255,255,255,0.1); }
.lite-segmented.is-dark .lite-segment span { color: rgba(255,255,255,0.7); }
.lite-segmented.is-dark .lite-segment input:checked + span { background: var(--lp-cyan, #00B4D8); color: var(--lp-blue-ink, #0E2841); }

/* --- 4. sub-score cards ---------------------------------------------------- */
.lite-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lite-card-wrap {
  background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 12px); box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.06));
  transition: border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)),
              box-shadow var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite-card-wrap:has([aria-expanded="true"]) { border-color: var(--lp-blue-300, #7A94C4); box-shadow: var(--shadow-md, 0 6px 20px rgba(14,40,65,0.10)); }
.lite-subscore-card {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: 0; padding: 24px 26px; font: inherit; color: inherit;
}
.lite-subscore-measures { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--lp-web-border, #E1E5EC); font-size: 14.5px; line-height: 1.55; color: var(--fg-muted, #555B6B); }
.lite-subscore-why { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--lp-blue-ink, #0E2841); }
.lite-subscore-why li + li { margin-top: 4px; }
.lite-subscore-uncounted { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-subtle, #7B818F); }
.lite-dial-band { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.lite-score-summary { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--lp-blue-ink, #0E2841); }
.lite-band-key { margin: 8px 0 0; font-size: 13px; color: var(--fg-subtle, #7B818F); }
.lite-subscore-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lite-subscore-label { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--lp-blue-ink, #0E2841); }
.lite-subscore-value { font-family: var(--font-stat); font-weight: 700; font-size: 46px; line-height: 0.85; }
.lite-bar { display: block; height: 6px; margin: 14px 0 12px; border-radius: 3px; background: var(--lp-ink-100, #ECEEF2); overflow: hidden; }
.lite-bar-fill, .lite-track-fill { display: block; height: 100%; width: var(--target, 0%); border-radius: 3px; }
.lite-bar-fill.is-filled, .lite-track-fill.is-filled { transition: width 1200ms var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.lite-subscore-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lite-subscore-checks { font-size: 12.5px; color: var(--fg-subtle, #7B818F); }
.lite-band-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lite-band-strong, .lite-fill-strong { color: var(--lp-cyan-deep, #0090B0); }
.lite-band-mixed,  .lite-fill-mixed  { color: var(--lp-warning, #E9A43C); }
.lite-band-weak,   .lite-fill-weak   { color: var(--lp-danger, #D64545); }
.lite-band-none,   .lite-fill-none   { color: var(--fg-subtle, #7B818F); }
.lite-fill-strong, .lite-fill-mixed, .lite-fill-weak, .lite-fill-none { background: currentColor; }
.lite-subscore-detail { padding: 0 26px 20px; }
.lite-subscore-detail p { margin: 0; padding-top: 14px; border-top: 1px solid var(--lp-web-border, #E1E5EC); font-size: 14.5px; line-height: 1.6; color: var(--fg-muted, #555B6B); }

/* --- 3b. take action (Pulse) ---------------------------------------------- */
.lite-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lite-action {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px 26px;
  background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 12px); box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.06));
}
.lite-action-num { font-family: var(--font-stat); font-weight: 700; font-size: 40px; line-height: 1; color: var(--lp-cyan-deep, #0090B0); }
.lite-action h3 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0 0 8px; color: var(--lp-blue-ink, #0E2841); }
.lite-action p { font-size: 16.5px; line-height: 1.6; color: var(--fg-muted, #555B6B); margin: 0; }
.lite-action-meta { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle, #7B818F) !important; margin-top: 10px !important; }

/* --- 3c. tracked over time (Pulse) ----------------------------------------- */
.lite-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lite-trend { margin: 0; padding: 20px 22px 16px; background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.06)); }
.lite-trend figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); margin-bottom: 10px; }
.lite-trend-svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.lite-trend-gridline { stroke: var(--lp-ink-100, #ECEEF2); stroke-width: 1; }
.lite-trend-ytick, .lite-trend-xtick { font-size: 11px; fill: var(--fg-subtle, #7B818F); }
.lite-trend-xtick.is-current { font-weight: 700; fill: var(--lp-blue-ink, #0E2841); }
.lite-trend-value { font-family: var(--font-stat); font-weight: 700; font-size: 13px; fill: var(--lp-blue-ink, #0E2841); }
.lite-trend-break { stroke: var(--lp-ink-300, #B2B6BF); stroke-width: 1.5; stroke-dasharray: 4 4; }
.lite-trend-break-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--fg-subtle, #7B818F); }
.lite-trend-series { transition: opacity var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.lite-trend-series.is-dimmed { opacity: 0.18; }
.lite-trend-series circle.is-current { stroke: #fff; stroke-width: 2; }
.lite-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 12px 0 0; padding: 0; }
.lite-trend-legend button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13px; color: var(--fg-muted, #555B6B); cursor: pointer; }
.lite-trend-legend button[disabled] { cursor: default; }
.lite-trend-legend button.is-active { color: var(--lp-blue-ink, #0E2841); font-weight: 700; }
.lite-trend-legend button:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(0,180,216,0.35)); border-radius: 3px; }
.lite-trend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.lite-trend-notes { margin-top: 20px; }
.lite-trend-table-head { font-family: var(--font-heading); font-weight: 600; font-size: 20px; margin: 28px 0 10px; color: var(--lp-blue-ink, #0E2841); }
.lite-trend-table th[scope="row"] { text-align: left; font-weight: 500; }
.lite-trend-table thead th { text-align: right; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); }
.lite-trend-table thead th:first-child { text-align: left; }
.lite-delta { font-family: var(--font-stat); font-weight: 700; font-size: 18px; }
.lite-delta-up   { color: var(--lp-success, #1E9E5E); }
.lite-delta-down { color: var(--lp-danger, #D64545); }
.lite-delta-flat, .lite-delta-none { color: var(--fg-subtle, #7B818F); font-family: var(--font-body); font-weight: 400; font-size: 14px; }

/* --- 5. engine comparison --------------------------------------------------- */
.lite-compare { border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); overflow: hidden; }
.lite-compare-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 90px; gap: 24px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--lp-ink-100, #ECEEF2); }
.lite-compare-row:last-child { border-bottom: 0; }
.lite-compare-row.is-total { background: var(--lp-blue-050, #F3F6FB); }
.lite-compare-label { font-weight: 600; color: var(--lp-blue-ink, #0E2841); }
.lite-compare-bars { display: flex; flex-direction: column; gap: 7px; }
.lite-compare-bar { display: flex; align-items: center; gap: 10px; transition: opacity var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.lite-compare-bar.is-dimmed { opacity: 0.25; }
.lite-chip { width: 66px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #555B6B); }
/* "PERPLEXITY" needs 82px at this size and overran its bar at 66 (lite_run 283,
   both widths). Widened only where a Perplexity bar is present, so every two-
   and three-engine report keeps its layout; every chip in the block widens
   together, so the bars still start on one line. */
.lite-compare:has([data-engine="Perplexity"]) .lite-chip { width: 88px; flex: 0 0 auto; white-space: nowrap; }
.lite-track { flex: 1; height: 10px; border-radius: 5px; background: var(--lp-ink-100, #ECEEF2); overflow: hidden; }
.lite-compare-value { width: 34px; text-align: right; font-family: var(--font-stat); font-weight: 700; font-size: 22px; }
.lite-engine-1 { background: var(--lp-blue, #284D96); }
.lite-engine-2 { background: var(--lp-cyan, #00B4D8); }
/* the Pulse's third column (Claude). Ink rather than a third accent so the two
   Snapshot colours keep their meaning on both products. */
.lite-engine-3 { background: var(--lp-blue-ink, #0E2841); }
/* the generation-2 fourth column (Perplexity). A lighter brand blue, not gray,
   which on this page reads as "no data". */
.lite-engine-4 { background: var(--lp-blue-300, #7A94C4); }
.lite-engine-text-1 { color: var(--lp-blue, #284D96); }
/* cyan-deep on the Gemini value, for AA contrast on white */
.lite-engine-text-2 { color: var(--lp-cyan-deep, #0090B0); }
.lite-engine-text-3 { color: var(--lp-blue-ink, #0E2841); }
/* navy-light on the Perplexity value: blue-300 is too pale for text on white */
.lite-engine-text-4 { color: var(--lp-web-navy-light, #5371A7); }
.lite-compare-gap { font-size: 13px; color: var(--fg-subtle, #7B818F); text-align: right; }

/* --- 6. rivals ------------------------------------------------------------- */
.lite-rivals { margin-top: 72px; padding-block: 68px; background: var(--lp-blue-ink, #0E2841); color: #fff; }
.lite-rivals-inner { max-width: 1180px; margin: 0 auto; }
.lite-rivals h2 { font-family: var(--font-heading); font-weight: 600; color: #fff; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; margin: 6px 0 10px; }
.lite-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.lite-name-chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-sm, 4px); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.lite-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.lite-name-engine { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lp-cyan, #00B4D8); }

/* --- 6. are you recommended? (2026-09-13) ------------------------------------- */
/* Reuses the questions section's answer cards so a third engine adds a column
   without a new layout. The chips are the rivals band's, restyled for a light
   card: that band was white-on-navy and the chip on a light ground vanished. */
.lite-recommend-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lite-recommend-stance { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.35; margin: 0 0 12px; color: var(--lp-blue-ink, #0E2841); }
.lite-answer-card .lite-said-who { margin-top: 14px; }
.lite-answer-card .lite-chips { margin-top: 8px; gap: 8px; }
.lite-answer-card .lite-name-chip { background: #fff; border-color: var(--lp-web-border, #E1E5EC); padding: 8px 12px; }
.lite-answer-card .lite-name { font-size: 14px; color: var(--fg, #121824); }
.lite-recommend-found { margin: 14px 0 0; }

/* --- 7. questions accordion -------------------------------------------------- */
.lite-accordion { display: flex; flex-direction: column; gap: 12px; }
.lite-accordion-item { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); transition: border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.lite-accordion-item:has([aria-expanded="true"]) { border-color: var(--lp-blue-300, #7A94C4); box-shadow: var(--shadow-md, 0 6px 20px rgba(14,40,65,0.10)); }
.lite-accordion-trigger { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; width: 100%; padding: 22px 26px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lite-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.lite-question-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); }
.lite-status { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; }
.lite-status-found  { background: var(--lp-cyan-100, #D4F2F8); color: var(--lp-cyan-deep, #0090B0); }
.lite-status-missed { background: rgba(214,69,69,0.12); color: var(--lp-danger, #D64545); }
.lite-question-text { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--lp-blue-ink, #0E2841); }
.lite-question-text::before { content: "\201C"; }
.lite-question-text::after  { content: "\201D"; }
.lite-affordance { font-family: var(--font-stat); font-weight: 700; font-size: 30px; color: var(--lp-ink-300, #B2B6BF); line-height: 1; }
.lite-accordion-panel { padding: 0 26px 26px; }
.lite-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lite-answer-card { background: var(--lp-web-page-alt, #F8F9FA); border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-md, 8px); padding: 20px 22px; }
.lite-answer-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.lite-answer-engine { font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-blue-ink, #0E2841); }
.lite-answer-verdict { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; }
/* A blockquote mark, NOT the banned accent bar: stays neutral gray, never coloured. */
.lite-answer-card blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--lp-ink-200, #D9DCE2); font-size: 15.5px; line-height: 1.62; color: var(--fg, #121824); }
.lite-answer-card blockquote::before { content: "\201C"; }
.lite-answer-card blockquote::after  { content: "\201D"; }

/* --- 8. sources -------------------------------------------------------------- */
.lite-sources { margin-top: 72px; padding-block: 68px; background: var(--lp-web-page-alt, #F8F9FA); border-top: 1px solid var(--lp-web-border, #E1E5EC); border-bottom: 1px solid var(--lp-web-border, #E1E5EC); }
.lite-sources-inner { max-width: 1180px; margin: 0 auto; }
.lite-sources h2 { font-family: var(--font-heading); font-weight: 600; color: var(--lp-blue-ink, #0E2841); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; margin: 6px 0 24px; }
.lite-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.lite-stat { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); padding: 24px 26px; }
.lite-stat-dark { background: var(--lp-blue-ink, #0E2841); border-color: transparent; }
.lite-stat-dark .lite-stat-number { color: #FF9B9B; }
.lite-stat-dark .lite-stat-label { color: rgba(255,255,255,0.78); }
.lite-stat-number { display: block; font-family: var(--font-stat); font-weight: 700; font-size: 54px; line-height: 0.85; }
.lite-stat-blue { color: var(--lp-blue, #284D96); }
.lite-stat-cyan { color: var(--lp-cyan-deep, #0090B0); }
.lite-stat-label { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg-muted, #555B6B); }
.lite-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 18px; }
.lite-search { flex: 1; min-width: 220px; }
.lite-search input { width: 100%; padding: 12px 16px; font: inherit; font-size: 15px; background: #fff; border: 1px solid var(--border, #E1E5EC); border-radius: var(--r-sm, 4px); }
.lite-search input:focus { outline: none; border-color: var(--lp-cyan, #00B4D8); box-shadow: var(--focus-ring, 0 0 0 3px rgba(0,180,216,0.35)); }
.lite-ledger { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); overflow: hidden; }
.lite-ledger-item { border-bottom: 1px solid var(--lp-ink-100, #ECEEF2); }
.lite-ledger-item:last-of-type { border-bottom: 0; }
.lite-ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 16px; align-items: center; width: 100%; padding: 15px 22px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lite-ledger-row:hover { background: var(--lp-blue-050, #F3F6FB); }
.lite-domain { font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; color: var(--lp-blue-ink, #0E2841); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lite-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; white-space: nowrap; }
.lite-tag-about_subject    { background: var(--lp-cyan-100, #D4F2F8); color: var(--lp-cyan-deep, #0090B0); }
.lite-tag-mentions_subject { background: var(--lp-blue-100, #E4EAF4); color: var(--lp-blue, #284D96); }
.lite-tag-cannot_tell      { background: var(--lp-ink-100, #ECEEF2); color: var(--fg-muted, #555B6B); }
.lite-tag-not_about_subject{ background: rgba(214,69,69,0.1); color: var(--lp-danger, #D64545); }
.lite-tag-tier             { background: var(--lp-blue-050, #F3F6FB); color: var(--lp-blue-600, #395C9E); }
.lite-ledger-meta { font-size: 13px; color: var(--fg-subtle, #7B818F); white-space: nowrap; }
.lite-ledger-row .lite-affordance { font-size: 22px; width: 16px; text-align: center; }
.lite-ledger-urls { padding: 2px 22px 18px; }
.lite-ledger-urls a { display: block; margin-bottom: 6px; font-size: 13px; line-height: 1.5; color: var(--lp-blue, #284D96); word-break: break-all; }
.lite-ledger-empty { padding: 26px 22px; margin: 0; font-size: 15px; color: var(--fg-subtle, #7B818F); }
.lite-absent { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); padding: 26px 28px; margin-top: 20px; }
.lite-absent h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--lp-blue-ink, #0E2841); margin: 0 0 8px; }
.lite-absent p { font-size: 15px; line-height: 1.6; max-width: 72ch; color: var(--fg-muted, #555B6B); }
.lite-absent-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0; padding: 0; }
.lite-absent-list li { padding: 7px 12px; font-size: 13.5px; background: var(--lp-web-soft-blue, #E9EDF4); border-radius: var(--r-sm, 4px); color: var(--fg, #121824); }

/* --- 9. CTA + method ---------------------------------------------------------- */
.lite-cta {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px;
  padding: 56px; border-radius: var(--r-lg, 12px);
  background: linear-gradient(140deg, var(--lp-blue-deep, #1B3B76) 0%, var(--lp-web-navy, #2B4679) 100%);
}
.lite-cta h2 { font-family: var(--font-heading); font-weight: 600; color: #fff; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; margin: 6px 0 12px; }
.lite-cta-actions { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.lite-cta-actions .lite-button { padding: 16px 24px; font-size: 16px; text-align: center; }

/* The paid CTA PAIR. Same navy panel as the old single block, so the closing
 * section keeps its weight on the page; inside it, two tiles rather than one
 * pitch. Side-by-side and not stacked because these are ALTERNATIVES of
 * different shapes (ongoing vs once), and stacking would read as two steps of
 * one sequence. */
.lite-cta-pair {
  padding: 48px; border-radius: var(--r-lg, 12px);
  background: linear-gradient(140deg, var(--lp-blue-deep, #1B3B76) 0%, var(--lp-web-navy, #2B4679) 100%);
}
.lite-cta-pair-head { max-width: 46ch; margin-bottom: 28px; }
.lite-cta-pair-head h2 {
  font-family: var(--font-heading); font-weight: 600; color: #fff;
  font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; margin: 6px 0 0;
}
/* `1fr 1fr`, not `1.2fr 1fr`: the primary tile earns its emphasis from colour
 * and button treatment, not width. Making it wider as well reads as the
 * secondary being squeezed in, which is how a real second option starts looking
 * like a consolation. */
.lite-cta-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; align-items: stretch;
}
.lite-cta-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px; border-radius: var(--r-md, 10px);
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}
/* The primary reads brighter, and the button below it is the cyan one. */
.lite-cta-tile-primary {
  border-color: rgba(0,180,216,0.55);
  background: rgba(0,180,216,0.10);
}
/* `min-height` of two lines, because the two eyebrows are very different
 * lengths: "Ongoing" is one line at every width while "In-Depth for Enterprise
 * and Agencies" wraps to two below about 300px of tile. Measured at a 720px
 * viewport, that put the two product names 17px out of alignment — and a pair
 * whose headings do not line up stops reading as a pair. Reserving the space on
 * BOTH costs one line of empty space on the wide case and keeps them level at
 * every width. */
.lite-cta-tile-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.35; min-height: 2.7em;
  color: rgba(255,255,255,0.62); margin: 0;
}
.lite-cta-tile h3 {
  font-family: var(--font-heading); font-weight: 600; color: #fff;
  font-size: 21px; line-height: 1.2; margin: 0;
}
.lite-cta-tile-blurb {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.8);
  margin: 0; text-wrap: pretty;
}
/* `margin-top:auto` so both buttons sit on one line however unequal the blurbs
 * are — a button floating mid-tile beside one pinned to the bottom is the tell
 * of a pair that was not designed as a pair. */
.lite-cta-tile .lite-button {
  margin-top: auto; padding: 14px 20px; font-size: 15px; text-align: center;
}

/* The verdict's own line, above the pair and belonging to neither product. */
.lite-cta-lead {
  font-size: 19px; line-height: 1.6; color: var(--fg-muted, #555B6B);
  max-width: 60ch; margin: 0 0 20px; text-wrap: pretty;
}
.lite-cta-share { margin: 20px 0 0; }

/* The one-line contextual CTA under the rivals chips. A sentence, not a button:
 * a third heavy block on the page would be pestering. */
.lite-rivals-cta { margin: 22px 0 0; font-size: 16px; }
.lite-rivals-cta a { color: var(--lp-cyan, #00B4D8); font-weight: 600; text-decoration: none; }
.lite-rivals-cta a:hover { text-decoration: underline; }

/* --- the offer block (2026-09-13) --------------------------------------------- */
.lite-offer-numbers { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 28px 0 8px; }
.lite-offer-names { margin: 24px 0 32px; }
.lite-offer-names .lite-chips { margin-top: 8px; }
.lite-offer-names .lite-name-chip { background: #fff; border-color: var(--lp-web-border, #E1E5EC); padding: 8px 12px; }
.lite-offer-names .lite-name { font-size: 14px; color: var(--fg, #121824); }
.lite-offer-names .lite-lead-muted { margin-top: 12px; max-width: 70ch; }
.lite-cta-tile-points { margin: 4px 0 12px; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.lite-cta-tile-points li { margin: 0 0 6px; }
.lite-offer-sequence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 40px 0 8px; }
.lite-offer-sequence-eyebrow { grid-column: 1 / -1; margin: 0; }
.lite-offer-step-label { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-cyan-deep, #0090B0); }
.lite-offer-step h3 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; margin: 0 0 8px; color: var(--lp-blue-ink, #0E2841); }
.lite-offer-step p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-muted, #555B6B); }
.lite-offer-graph { margin-top: 32px; max-width: 70ch; }

@media (max-width: 640px) {
  .lite-cta-pair { padding: 28px 20px; }
  .lite-cta-tile { padding: 20px; }
}
.lite-method h2 { font-family: var(--font-heading); font-weight: 600; color: var(--lp-blue-ink, #0E2841); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 6px 0 16px; }
.lite-method-facts li::marker { color: var(--lp-cyan, #00B4D8); }
.lite-mismatches { display: grid; gap: 16px; }
.lite-quote-mark::before { content: "\201C"; }
.lite-quote-mark::after  { content: "\201D"; }

/* --- motion ------------------------------------------------------------------- */
@keyframes lpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lite-accordion-panel:not([hidden]),
.lite-subscore-detail:not([hidden]) { animation: lpFade 240ms var(--ease-out, cubic-bezier(.16,1,.3,1)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lite-bar-fill, .lite-track-fill { transition: none !important; }
  .lite-accordion-panel:not([hidden]), .lite-subscore-detail:not([hidden]) { animation: none; }
}

/* --- responsive ----------------------------------------------------------------
   Three breakpoints, per the design's collapse table. */
@media (max-width: 1000px) {
  .lite-cards, .lite-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lite-hero-grid, .lite-cta { grid-template-columns: 1fr; gap: 40px; }
  .lite-cta { padding: 36px 28px; }
}
@media (max-width: 760px) {
  .lite-report .lite-wrap, .lite-wrap.is-wide { padding-left: 20px; padding-right: 20px; }
  .lite-bleed { padding-left: 20px; padding-right: 20px; }
  .lite-hero { padding-block: 48px 52px; }
  .lite-cards, .lite-stats, .lite-callouts, .lite-answer-grid, .lite-trend-grid { grid-template-columns: 1fr; }
  .lite-action { grid-template-columns: 1fr; gap: 8px; }
  .lite-action-num { font-size: 30px; }
  .lite-compare-row { grid-template-columns: 1fr; gap: 10px; }
  .lite-compare-gap { text-align: left; }
  .lite-ledger-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .lite-ledger-meta { grid-column: 1 / -1; }
  .lite-section { padding-top: 44px; }
  /* The logo, the nav scroller and the CTA will not share 335px. The brand
     stays (it is the only logo on this surface) and the worded CTA goes: the
     report carries the same button twice more below. */
  .lite-subnav-row { gap: 14px; }
  .lite-subnav-cta { display: none; }
  .lite-rivals, .lite-sources { margin-top: 44px; padding-top: 44px; padding-bottom: 44px; }
}

/* ===========================================================================
   THE SHARE CARD — five blocks, one centred column.
   docs/design/design_handoff_authority_snapshot/CARD.md. Reuses the report's navy
   panel, dial, badge, buttons and footer verbatim; only the differences live
   here. A share target is one screen of substance, not a second report.
   =========================================================================== */

.lite-card-page { max-width: 780px; margin: 0 auto; }
.lite-card-page > * + * { margin-top: 20px; }

.lite-sharecard {
  background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 12px); box-shadow: var(--shadow-md, 0 6px 20px rgba(14,40,65,0.10));
  overflow: hidden;
}
.lite-sharecard-navy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: 44px 44px 40px; color: #fff;
  background: linear-gradient(160deg, var(--lp-blue-ink, #0E2841) 0%,
              var(--lp-web-navy, #2B4679) 62%, var(--lp-blue-deep, #1B3B76) 100%);
}
.lite-sharecard-navy h1 {
  font-family: var(--font-heading); font-weight: 700; color: #fff;
  font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05;
  letter-spacing: -0.01em; text-wrap: balance; margin: 12px 0 8px;
}
.lite-sharecard-sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; }
/* Heavier stroke than the report's, to hold up at the smaller size. */
.lite-sharecard-dial .lite-dial circle { stroke-width: 16; }
.lite-sharecard-dial .lite-dial circle:first-child { stroke: rgba(255,255,255,0.14); }
.lite-sharecard-dial .lite-dial circle + circle { stroke: var(--lp-cyan, #00B4D8); }
.lite-sharecard-dial .lite-dial-value { fill: #fff; }
.lite-sharecard-dial .lite-dial-unit { fill: rgba(255,255,255,0.58); letter-spacing: 0.16em; }

.lite-sharecard-finding { padding: 36px 44px 32px; border-bottom: 1px solid var(--lp-ink-100, #ECEEF2); }
.lite-eyebrow-deep { color: var(--lp-cyan-deep, #0090B0); }
/* A blockquote mark, not an accent bar: neutral gray, never coloured. */
.lite-pullquote {
  margin: 10px 0 0; padding-left: 18px; border-left: 2px solid var(--lp-ink-200, #D9DCE2);
  font-size: 20px; line-height: 1.55; color: var(--fg, #121824); text-wrap: pretty;
}
.lite-sharecard-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 28px 44px 32px; }
.lite-fact-number { display: block; font-family: var(--font-stat); font-weight: 700; font-size: 38px; line-height: 0.9; color: var(--lp-blue, #284D96); }
.lite-fact-label { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted, #555B6B); }
.lite-sharecard-cta { padding: 0 44px 36px; }
.lite a.lite-button-black {
  /* border-box, or the 24px horizontal padding is ADDED to the 100% and the
     button runs past the card containing it. This file carries no global
     box-sizing reset — `.lite-form input` sets its own for the same reason. */
  box-sizing: border-box;
  display: block; width: 100%; text-align: center; padding: 16px 24px;
  background: var(--lp-web-cta-black, #0F0E17); color: #fff; font-size: 16px; font-weight: 600;
  border-radius: var(--r-sm, 4px);
  transition: background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite a.lite-button-black:hover { background: var(--lp-blue, #284D96); }

.lite-share-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 12px); padding: 20px 24px;
}
.lite-share-prompt { margin: 0; font-size: 14.5px; color: var(--fg-muted, #555B6B); }
.lite-share-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.lite .lite-share-btn {
  display: inline-block; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid var(--border, #E1E5EC); border-radius: var(--r-sm, 4px);
  color: var(--fg-muted, #555B6B); text-decoration: none; cursor: pointer;
  transition: all var(--dur-fast, 120ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lite .lite-share-btn:hover { border-color: var(--lp-blue, #284D96); color: var(--lp-blue, #284D96); }
.lite .lite-share-btn.is-copied { background: var(--lp-cyan-100, #D4F2F8); border-color: var(--lp-cyan, #00B4D8); color: var(--lp-cyan-deep, #0090B0); }

.lite-method-card { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); }
.lite-method-card summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--lp-blue-ink, #0E2841);
}
.lite-method-card summary::-webkit-details-marker { display: none; }
.lite-method-card summary .lite-affordance { font-size: 26px; }
.lite-method-card[open] summary .lite-affordance { }
.lite-method-body { padding: 0 24px 24px; }
.lite-method-body .lite-method h2 { font-size: 17px; margin-top: 0; }

.lite-acquire {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--lp-blue-ink, #0E2841); border-radius: var(--r-lg, 12px); padding: 32px 36px;
}
.lite-acquire-head { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.35; color: #fff; max-width: 44ch; margin: 0; }
.lite-acquire-sub { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 6px 0 0; }
.lite-acquire .lite-button { white-space: nowrap; padding: 14px 22px; font-size: 15px; }

@media (max-width: 760px) {
  .lite-sharecard-navy { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .lite-sharecard-finding, .lite-sharecard-facts { padding-left: 24px; padding-right: 24px; }
  .lite-sharecard-cta { padding: 0 24px 28px; }
  .lite-sharecard-facts { grid-template-columns: 1fr; gap: 16px; }
  .lite-share-row { flex-direction: column; align-items: stretch; }
  .lite-share-controls { flex-direction: column; }
  .lite .lite-share-btn { width: 100%; text-align: center; }
}

/* --- landing redesign (2026-08-20) ----------------------------------------
 *
 * Scoped to body.lite-landing: the report, progress, teaser and card pages are
 * untouched. Goals, per Dan: match the new lilypath.com design language (the
 * tokens are already the shared --lp-* set), keep the WHOLE form above the
 * fold on desktop, and make the $0-ness unmissable. Two-column hero: pitch on
 * the left, the form as a card on the right, fields in a two-up grid. */

.lite-landing .lite-landing-grid {
  display: grid;
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}
@media (min-width: 920px) {
  .lite-landing .lite-landing-grid {
    grid-template-columns: 5fr 7fr;
    gap: 44px;
  }
  /* Tighten the page's top padding so the full card clears a 900px viewport. */
  .lite-landing .lite-wrap,
  .lite-landing main.lite-wrap { padding-top: 1.25rem; }
}

/* The free pill — the same eyebrow-pill idiom the marketing site uses. */
.lite-landing .lite-free-pill {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-surface-alt, #E9EDF4);
  color: var(--color-primary, #284D96);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lite-landing h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.lite-landing .lite-landing-points {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.lite-landing .lite-landing-points li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 0.98rem;
}
.lite-landing .lite-landing-points li::before {
  content: "\2713";
  position: absolute;
  left: 2px;
  color: var(--color-primary, #284D96);
  font-weight: 700;
}

/* The form as a card — the marketing site's tier-card idiom. */
.lite-landing .lite-landing-formcard {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #E1E5EC);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-sm, 0 8px 28px rgba(14, 40, 65, 0.08));
}

/* Compact form internals: fieldsets lose their boxes (the card is the box),
 * legends become small section labels, fields sit in a two-up grid. */
.lite-landing .lite-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
}
.lite-landing .lite-form legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #555B6B);
}
.lite-landing .lite-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
@media (max-width: 560px) {
  .lite-landing .lite-fields { grid-template-columns: 1fr; }
}
.lite-landing .lite-form label {
  margin: 0;
  font-size: 0.85rem;
}
.lite-landing .lite-form input {
  margin-top: 0.2rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
}
/* Concurrent current roles. Each pair is one grid item with its own two
   columns, so "Other current role" and its "At" cannot be separated by the
   parent grid — they are one fact in two boxes, and a Role sitting beside
   another company's At is worse than ugly on this form. */
.lite-landing .lite-roles { display: grid; gap: 8px 14px; }
.lite-landing .lite-role-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  align-items: end;
}
@media (max-width: 560px) {
  .lite-landing .lite-role-row { grid-template-columns: 1fr; }
}
.lite-landing .lite-fields-hint {
  margin: -0.2rem 0 0.5rem;
  font-size: 0.8rem;
}
/* The "my business depends on local customers" box, which reveals city/state.
   Laid out as one row so the box and its sentence read as a single control. */
.lite-landing .lite-form .lite-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.6rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.lite-landing .lite-form .lite-check input {
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.lite-landing .lite-fields[data-local-only] .lite-fields-hint { grid-column: 1 / -1; margin: 0 0 0.2rem; }
.lite-landing .lite-form .cf-turnstile { margin: 0.25rem 0 0.75rem; }
.lite-landing .lite-form button {
  width: 100%;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
}
.lite-landing .lite-form button:hover { background: var(--lp-blue-deep, #1B3B76); }
.lite-landing .lite-form-footnote {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.82rem;
}

.lite-landing .lite-method { margin-top: 3rem; }

/* Landing header alignment: .lite-header is a 720px centered column, which
 * read as left-aligned when every page's content was a ~704px column too. The
 * landing now spans the wide grid (.lite-wrap.is-wide, 1180px), so the narrow
 * centered header left the logo floating mid-page — the recurring "logo isn't
 * left" bug. Match the header to the same width and gutters as the content. */
.lite-landing .lite-header {
  max-width: 1180px;
  padding-left: 32px;
  padding-right: 32px;
}

/* --- Google AI Overviews (AIO): the search surface beside the chat engines (2026-09-22) --- */
.lite-surface-named      { background: var(--lp-cyan-100, #D4F2F8); color: var(--lp-cyan-deep, #0090B0); }
.lite-surface-not_named  { background: rgba(214,69,69,0.12); color: var(--lp-danger, #D64545); }
.lite-surface-no_surface { background: var(--lp-web-border, #E1E5EC); color: var(--fg-muted, #555B6B); }
.lite-surface-error      { background: rgba(214,69,69,0.08); color: var(--fg-muted, #555B6B); }
.lite-surface-coverage { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--navy, #0E2841); margin: 14px 0 0; max-width: 60ch; text-wrap: pretty; }
.lite-surface-panel .lite-surface-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; }
.lite-surface-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; }
.lite-surface-domain { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--lp-web-border, #E1E5EC); color: var(--fg-muted, #555B6B); }

/* --- Recommendation Strength: the lead finding as a scale (2026-09-22) --- */
.lite-strength { margin: 22px 0 6px; max-width: 560px; }
.lite-strength-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0 0 10px; }
.lite-strength-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.lite-strength-label { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: #fff; }
.lite-strength-label-weak   { color: #FFB3B3; }
.lite-strength-label-mixed  { color: #FFD79B; }
.lite-strength-label-strong { color: #9EE9F8; }
.lite-strength-scale { position: relative; height: 34px; }
.lite-strength-track {
  position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #8B1A1A 0%, var(--lp-danger, #D64545) 22%, var(--lp-warning, #E9A43C) 50%,
              #7BC96F 78%, var(--lp-success, #1E9E5E) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.lite-strength-marker { position: absolute; top: 17px; transform: translate(-50%, -50%); }
.lite-strength-marker-all {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--lp-blue-ink, #0E2841); box-shadow: 0 2px 8px rgba(0,0,0,0.35); z-index: 2;
}
.lite-strength-marker-engine {
  width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.92);
  border: 2px solid rgba(14,40,65,0.7); z-index: 1; top: 34px;
}
.lite-strength-marker-tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 1px); font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; }
.lite-strength-ends { display: flex; justify-content: space-between; margin: 14px 0 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.lite-strength-line { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 12px 0 0; text-wrap: pretty; }
.lite-strength-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; font-size: 13px; color: rgba(255,255,255,0.72); }
.lite-strength-word-weak   { color: #FFB3B3; font-weight: 700; }
.lite-strength-word-mixed  { color: #FFD79B; font-weight: 700; }
.lite-strength-word-strong { color: #9EE9F8; font-weight: 700; }
.lite-strength-basis { font-size: 13px; color: rgba(255,255,255,0.6); margin: 8px 0 0; }
.lite-strength-basis a { color: rgba(255,255,255,0.8); }

/* --- the whole answer, collapsed under each question (2026-09-22) --- */
.lite-answer-full { margin-top: 12px; border-top: 1px solid var(--lp-web-border, #E1E5EC); padding-top: 10px; }
.lite-answer-full summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--lp-cyan-deep, #0090B0); }
.lite-answer-full-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; margin: 10px 0 0; color: var(--fg, #1B2230); }

/* --- action completion (migration 023) --- */
.lite-completions { margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-lg, 12px); background: var(--lp-cyan-100, #D4F2F8); }
.lite-completion-line { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--navy, #0E2841); font-weight: 600; }
.lite-completion-note { font-size: 13.5px; margin: 8px 0 0; }
.lite-action.is-done .lite-action-body h3 { text-decoration: line-through; color: var(--fg-muted, #555B6B); }
.lite-action-done { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lite-button-small { padding: 6px 12px; font-size: 13px; }
.lite-issue-completed { font-size: 13.5px; margin: 6px 0 0; }
/* --- the basis behind a rival's name (2026-09-22) --- */
.lite-chips-basis .lite-name-chip { flex-direction: column; align-items: flex-start; gap: 4px; }
.lite-name-basis { font-size: 12.5px; line-height: 1.4; color: var(--fg-muted, #555B6B); font-weight: 400; }
.lite-name-basis em { font-style: normal; color: var(--lp-cyan-deep, #0090B0); }

/* --- the public questions page (2026-09-22; narrowed 2026-09-23) --- */
.lite-question-list { padding-left: 22px; margin: 16px 0 0; }
.lite-question-entry { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--lp-cyan-100, #D4F2F8); background: #fff; }
.lite-question-wording { font-size: 15.5px; line-height: 1.5; }

/* ===========================================================================
   Report as blocks (Dan, 2026-09-22, run 279): "the sections just flow into one
   another … each block should be shaded … headlines don't need to be confined
   to the left half … the score below the hero in a block of its own … the
   strength visualization looks like a section divider." Every rule below is
   scoped to .lite-report so the landing, progress and card pages keep theirs.
   =========================================================================== */
body.lite-report { background: var(--lp-web-page-alt, #F4F6F9); }
.lite-report .lite-section {
  background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 14px); padding: 40px 44px 44px; margin: 28px 0 0;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(14,40,65,0.05));
}
.lite-report .lite-section:target { outline: 2px solid var(--lp-cyan, #00B4D8); outline-offset: 2px; }
.lite-report .lite-section-head { margin-bottom: 22px; }
.lite-report .lite-section-head > div { max-width: none; flex: 1 1 520px; }
.lite-report .lite-section-head .lite-lead-muted { max-width: 78ch; }
.lite-report .lite-section h2 { max-width: none; font-size: clamp(26px, 2.6vw, 38px); }
.lite-report .lite-band { margin: 20px 0 0; padding: 0; }
.lite-report .lite-band .lite-notice { margin: 0; }
.lite-report .lite-week { margin-bottom: 0; }
.lite-report .lite-sources { margin-top: 28px; border-radius: var(--r-lg, 14px); border: 1px solid var(--lp-web-border, #E1E5EC); padding-inline: 44px; }
.lite-report .lite-sources-inner { max-width: none; }
.lite-report .lite-section + .lite-section-head-sub { margin-top: 0; }

/* the hero: copy left, the strength card right */
.lite-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; gap: 56px; }
.lite-hero-grid-single { grid-template-columns: minmax(0, 1fr); }
.lite-hero h1 { max-width: none; font-size: clamp(34px, 3.6vw, 52px); }
.lite-hero-copy .lite-lead { max-width: 60ch; }
.lite-hero-quote { max-width: none; }

/* the strength card */
.lite-strength-card {
  margin: 8px 0 0; max-width: none; align-self: start;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-lg, 14px); padding: 28px 30px 26px;
  backdrop-filter: blur(2px);
}
.lite-strength-card .lite-strength-eyebrow { display: block; margin: 0 0 8px; }
.lite-strength-card .lite-strength-label { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 0 0 8px; }
.lite-strength-card .lite-strength-line { margin: 0 0 22px; font-size: 16px; color: rgba(255,255,255,0.8); }
.lite-strength-card .lite-strength-scale { height: 48px; }
.lite-strength-card .lite-strength-track { top: 16px; height: 16px; border-radius: 999px; }
.lite-strength-card .lite-strength-marker { top: 24px; }
.lite-strength-card .lite-strength-marker-all { width: 22px; height: 22px; }
.lite-strength-card .lite-strength-marker-tag { top: 100%; transform: translate(-50%, 4px); font-size: 11px; }
.lite-strength-zones {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 18px 0 0; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.lite-strength-zone { display: flex; align-items: center; gap: 7px; }
.lite-strength-zone-mixed { justify-content: center; text-align: center; }
.lite-strength-zone-strong { justify-content: flex-end; text-align: right; }
.lite-strength-zone-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: currentColor; }
.lite-strength-zone-weak .lite-strength-zone-dot, .lite-strength-word-weak .lite-strength-zone-dot { background: #F26D6D; }
.lite-strength-zone-mixed .lite-strength-zone-dot, .lite-strength-word-mixed .lite-strength-zone-dot { background: #F2B35C; }
.lite-strength-zone-strong .lite-strength-zone-dot, .lite-strength-word-strong .lite-strength-zone-dot { background: #3FD08F; }
.lite-strength-card .lite-strength-legend {
  display: block; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 15px; color: rgba(255,255,255,0.9);
}
.lite-strength-engine { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
.lite-strength-engine + .lite-strength-engine { border-top: 1px solid rgba(255,255,255,0.08); }
.lite-strength-engine-name { font-weight: 700; }
.lite-strength-word { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lite-strength-word-none { color: rgba(255,255,255,0.5); font-weight: 500; }
.lite-strength-card .lite-strength-basis { margin: 14px 0 0; }

/* the score block */
.lite-score-block { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: center; }
.lite-score-dial { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lite-score-dial .lite-dial-caption { color: var(--fg-muted, #555B6B); }
.lite-score-copy .lite-lead-muted { max-width: 70ch; margin-top: 14px; }
.lite-section-score .lite-section-head-sub { margin-top: 36px; }

@media (max-width: 980px) {
  .lite-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lite-score-block { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .lite-score-copy .lite-lead-muted, .lite-score-copy .lite-score-summary,
  .lite-score-copy .lite-band-key { text-align: left; }
}
@media (max-width: 720px) {
  .lite-report .lite-section { padding: 26px 20px 28px; border-radius: 10px; }
  .lite-report .lite-sources { padding-inline: 20px; }
  .lite-strength-card { padding: 22px 18px 20px; }
  .lite-strength-zones { font-size: 10.5px; letter-spacing: 0.04em; }
}
.lite-ledger-more { margin: 18px 0 0; text-align: center; }

/* The sources block is a card like the others, not a full-bleed band (Dan,
   2026-09-22: "expands to the edges of the window"). */
.lite-report .lite-sources.lite-bleed { margin-left: 0; margin-right: 0; padding-left: 44px; padding-right: 44px; }
@media (max-width: 720px) { .lite-report .lite-sources.lite-bleed { padding-left: 20px; padding-right: 20px; } }

/* --- a second Snapshot attempt (migration 028): the two ways in as cards --- */
.lite-already-ways { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lite-already-ways li { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC);
  border-radius: var(--r-lg, 12px); padding: 20px 22px; }
.lite-already-ways h3 { margin: 4px 0 8px; }

/* --- why a side-by-side cell is blank (2026-10-05) ------------------------- */
.lite-compare-empty { font-family: var(--font-body, inherit); font-size: 12px; font-weight: 500; color: var(--fg-subtle, #7B818F); white-space: nowrap; }
.lite-compare-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-muted, #555B6B); }

/* --- the record as a grid (2026-10-05) -------------------------------------- */
.lite-record { display: grid; gap: 12px; }
.lite-record-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); overflow: hidden; font-size: 14.5px; }
.lite-record-table th, .lite-record-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--lp-ink-100, #ECEEF2); }
.lite-record-table tbody tr:last-child th, .lite-record-table tbody tr:last-child td { border-bottom: 0; }
.lite-record-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); background: var(--lp-blue-050, #F3F6FB); }
.lite-record-table tbody th { font-weight: 600; color: var(--lp-blue-ink, #0E2841); }
.lite-record-told { color: var(--fg-muted, #555B6B); }
.lite-record-cell { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.lite-record-different, .lite-record-someone_else { background: #FDECEC; color: var(--lp-danger, #D64545); }
.lite-record-matches { background: #E6F6FA; color: var(--lp-cyan-deep, #0090B0); }
.lite-record-no_conflict { background: var(--lp-ink-100, #ECEEF2); color: var(--fg-subtle, #7B818F); }
.lite-record-quotes { background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-md, 10px); padding: 12px 16px; }
.lite-record-quotes summary { cursor: pointer; font-weight: 600; color: var(--lp-blue-ink, #0E2841); }
.lite-record-quotes .lite-said { margin: 10px 0 0; }
@media (max-width: 720px) {
  .lite-record-scroll { overflow-x: auto; }
  .lite-record-table { min-width: 560px; }
}

/* --- most influential sites (2026-10-05) ----------------------------------- */
.lite-influence { margin: 28px 0; }
.lite-influence-head { margin: 0 0 6px; font-family: var(--font-heading); font-size: 20px; color: var(--lp-blue-ink, #0E2841); }
.lite-influence-table { width: 100%; margin-top: 14px; border-collapse: collapse; background: #fff; border: 1px solid var(--lp-web-border, #E1E5EC); border-radius: var(--r-lg, 12px); overflow: hidden; font-size: 14.5px; }
.lite-influence-table th, .lite-influence-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--lp-ink-100, #ECEEF2); vertical-align: middle; }
.lite-influence-table tbody tr:last-child th, .lite-influence-table tbody tr:last-child td { border-bottom: 0; }
.lite-influence-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); background: var(--lp-blue-050, #F3F6FB); }
.lite-influence-table tbody th { font-weight: 600; color: var(--lp-blue-ink, #0E2841); word-break: break-word; }
.lite-influence-bar { display: inline-block; width: 90px; height: 6px; margin-right: 10px; border-radius: 3px; background: var(--lp-ink-100, #ECEEF2); overflow: hidden; vertical-align: middle; }
.lite-influence-bar span { display: block; height: 100%; width: var(--target, 0%); background: var(--lp-blue, #2E4A8F); border-radius: 3px; }
.lite-influence-count { font-size: 13.5px; color: var(--fg-muted, #555B6B); white-space: nowrap; }
@media (max-width: 720px) {
  .lite-influence { overflow-x: auto; }
  .lite-influence-table { min-width: 520px; }
  .lite-influence-bar { display: none; }
}

/* --- sidebar navigation on a wide screen (2026-10-05) ----------------------
   The column narrows by the sidebar's width and stays centred; the bleed bands
   read the same width so their content lines up with it. */
.lite-sidenav { display: none; }
@media (min-width: 1280px) {
  /* The column is centred in the space BESIDE the sidebar: shifted right by
     half the sidebar's width, and every bleed band shifted with it. */
  .lite-report {
    --lite-side: 220px;
    --lite-content-w: min(1180px, calc(100vw - var(--lite-side) - 112px));
    overflow-x: clip;   /* 100vw counts the scrollbar; the bands must not scroll sideways */
  }
  .lite-report .lite-wrap {
    max-width: var(--lite-content-w);
    /* The wrap's 32px side padding is outside max-width (content-box). */
    margin-left: calc(var(--lite-side) + (100vw - var(--lite-side) - var(--lite-content-w) - 64px) / 2);
    margin-right: auto;
  }
  .lite-report .lite-bleed {
    margin-left: calc(50% - 50vw - var(--lite-side) / 2);
    margin-right: calc(50% - 50vw + var(--lite-side) / 2);
    padding-left: calc(50vw - var(--lite-content-w) / 2 + var(--lite-side) / 2 + 32px);
    padding-right: calc(50vw - var(--lite-content-w) / 2 - var(--lite-side) / 2 + 32px);
  }
  .lite-report .lite-subnav-list { display: none; }
  .lite-report .lite-subnav-row { justify-content: space-between; }
  .lite-sidenav {
    /* Full height under the sticky top row (z-index 40), content starting
       below it whatever its height. */
    display: block; position: fixed; z-index: 30; left: 0; top: 0; bottom: 0;
    width: 220px; padding: 124px 16px 24px 24px; overflow-y: auto;
    border-right: 1px solid var(--lp-web-border, #E1E5EC); background: #fff;
  }
  .lite-sidenav-title { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle, #7B818F); }
  .lite-sidenav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .lite-sidenav a {
    display: block; padding: 8px 12px; border-radius: 4px; border-left: 3px solid transparent;
    font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; color: var(--fg-muted, #555B6B);
  }
  .lite-sidenav a:hover { color: var(--lp-blue, #284D96); background: var(--lp-blue-050, #F3F6FB); }
  .lite-sidenav a.is-active { color: var(--lp-blue, #284D96); background: var(--lp-blue-050, #F3F6FB); border-left-color: var(--lp-cyan, #00B4D8); }
}

/* --- the Name Collision Checklist (2026-10-05) ---------------------------------- */
/* Its own callout above Take action: the white section card, marked by a cyan rule
   and a tinted ground so it never reads as one of the numbered actions. */
.lite-report .lite-section.lite-collision-callout { border-left: 4px solid var(--lp-cyan, #00B4D8); background: var(--lp-cyan-100, #D4F2F8); }
.lite-report .lite-collision-callout h2 { max-width: 34ch; }
.lite-collision-intro { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--lp-blue-ink, #0E2841); max-width: 78ch; }
.lite-collision-more > summary { cursor: pointer; font-weight: 600; color: var(--lp-cyan-deep, #0090B0); margin-top: 8px; }
.lite-collision-checklist-context { margin-top: 16px; }
.lite-collision-checklist-context ul { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.lite-collision-checklist-label { font-size: 11px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #555B6B); margin: 0 0 4px !important; }
.lite-collision-checklist-known { margin-top: 16px; font-weight: 600; color: var(--lp-blue-ink, #0E2841); }
.lite-collision-checklist-steps { margin: 16px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.6; }
.lite-collision-checklist-steps li { margin-bottom: 8px; overflow-wrap: anywhere; }
.lite-collision-callout .lite-lead-muted { margin-top: 12px; }