/* Landing Pages — Enhancement Intelligence
 *
 * Three things share this page and they are NOT equal, so the design is not a
 * grid of equal cards:
 *
 *   1. THE SCORE            one number, unmissable, with its band and its delta.
 *   2. THE 1-2-3            three steps. This is what he asked for and it is the
 *                           only thing on the page that is numbered.
 *   3. THE PAGE WE'D BUILD  a rendered mockup in a real device frame, because a
 *                           recommendation you can SEE is the one that gets built.
 * Everything else — axes, findings, copy rewrites, evidence — sits under those.
 *
 * Contrast, same rule as spy.css: `--bb-ink-3` is decoration only, never a
 * sentence or a number. Status carries in a dot + border, text stays --bb-ink-2.
 *
 * The mockup is an <iframe sandbox> with srcdoc. It has to be an iframe: the
 * mockup's own CSS (a full landing page's worth) would otherwise leak into the
 * app, and a landing page's `h1 { font-size: 54px }` inside BridgeBI is a very
 * funny bug to debug at 6pm.
 */

.lp-page {
  --lp-z-sticky: 5;
  --lp-gap: 18px;
  --lp-crit: var(--bb-red);
  --lp-high: var(--bb-orange);
  --lp-med:  var(--bb-gold-ink);
  --lp-low:  var(--bb-ink-3);
}

/* =========================================================================
   1. Console — the URL bar
   ========================================================================= */

.lp-console {
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card);
  padding: 18px 20px;
  margin-bottom: var(--lp-gap);
}
.lp-console-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-console-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.lp-console-head p { margin: 0; font-size: 13px; color: var(--bb-ink-2); flex: 1; min-width: 240px; }

.lp-url-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lp-url-row .lp-url-input { flex: 1 1 380px; min-width: 0; }

.lp-page input[type="text"], .lp-page input[type="url"], .lp-page select, .lp-page textarea {
  width: 100%;
  background: var(--bb-field);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-control);
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--bb-ink);
}
.lp-page input:focus-visible, .lp-page select:focus-visible, .lp-page textarea:focus-visible {
  outline: none; box-shadow: var(--bb-sh-focus); border-color: var(--bb-accent);
}
.lp-url-input { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; }

.lp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--bb-r-control);
  border: 1px solid var(--bb-line-strong);
  background: var(--bb-surface);
  color: var(--bb-ink);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .14s ease, transform .14s var(--bb-ease-strong);
}
.lp-btn:hover { background: var(--bb-hover); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn:disabled { opacity: .5; cursor: not-allowed; }
.lp-btn-primary { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }
.lp-btn-primary:hover { background: var(--bb-accent-ink); }
.lp-btn-sm { padding: 7px 12px; font-size: 13px; }
.lp-btn-danger { color: var(--bb-red); }

.lp-more { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.lp-field label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bb-ink-2); margin-bottom: 5px; }
.lp-field .lp-hint { font-size: 11.5px; color: var(--bb-ink-2); margin-top: 4px; }

.lp-err {
  margin-top: 12px; padding: 10px 13px; border-radius: var(--bb-r-control);
  background: var(--bb-red-tint); border: 1px solid color-mix(in srgb, var(--bb-red) 30%, transparent);
  color: var(--bb-ink); font-size: 13px;
}

/* =========================================================================
   2. Progress — named steps, never a bare spinner
   -------------------------------------------------------------------------
   The reference language (four CollectUI motion studies Miguel sent) is the
   same in all four: a pill, a monospace label, a small animated glyph, and
   only the ACTIVE state lit while the rest sit dimmed. That maps exactly onto
   what this panel already had to say — five named steps, one of them running —
   so the motion carries information instead of decorating a wait.

   Three states, three different animations, and they are different ON PURPOSE:
     running  the 3x3 matrix ripples, the label shimmers, the trailing dots type
     done     the matrix freezes solid green, everything dims back
     failed   the matrix freezes red
   A spinner that looks the same in all three is how a failed step reads as a
   slow one.

   Everything here is transform/opacity only — no layout-affecting properties —
   so five simultaneous animations cost nothing while an 8,000-token model call
   is in flight on the same thread.
   ========================================================================= */

/* Two columns: the named steps on the left, one live indicator on the right.
   The right half of this panel used to be dead space for the whole 20-60 seconds
   the analysis takes, which is the exact stretch where the page has the least to
   say and the person watching has the most doubt. It now carries the orb, and the
   orb becomes the SCORE the moment the diagnosis lands — a good half-minute
   before the full card below it paints. */
.lp-run { margin-top: 16px; border-top: 1px solid var(--bb-line); padding-top: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 26px; align-items: center; }
.lp-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.lp-step {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13.5px; color: var(--bb-ink-3);
  /* One width for every row, so the notes line up in a column instead of ending
     wherever each label happens to end. fit-content pills read as ransom-note
     ragged the moment three of them carry a different-length note. */
  width: 100%; max-width: 620px;
  transition: color .3s ease, background .3s ease, border-color .3s ease, opacity .3s ease;
}
.lp-step.idle { opacity: .55; }
.lp-step.run {
  color: var(--bb-ink);
  background: var(--bb-accent-tint);
  border-color: color-mix(in srgb, var(--bb-accent) 22%, transparent);
  box-shadow: 0 1px 10px rgba(13, 42, 94, .07);
}
.lp-step.done { color: var(--bb-ink-2); }
.lp-step.fail { color: var(--bb-ink-2); background: var(--bb-red-tint);
  border-color: color-mix(in srgb, var(--bb-red) 26%, transparent); }
/* A step that could not RUN is not a step that failed. An unreadable banner
   format would otherwise paint a red row on a page that scanned perfectly. */
.lp-step.skip { color: var(--bb-ink-2); }

/* --- the 3x3 matrix ------------------------------------------------------ */
.lp-mx {
  display: grid; grid-template-columns: repeat(3, 3px); grid-auto-rows: 3px;
  gap: 2.5px; flex: none; width: 13px;
}
.lp-mx i {
  display: block; width: 3px; height: 3px; border-radius: 1px;
  background: var(--bb-ink-3); opacity: .3;
  transform: scale(.8);
}
/* Running: a diagonal ripple. The delay is set inline per cell from (row+col),
   so the light travels corner to corner instead of nine dots blinking together. */
.lp-step.run .lp-mx i {
  background: var(--bb-accent);
  animation: lpMx 1.5s var(--bb-ease-strong) infinite;
}
.lp-step.done .lp-mx i { background: var(--bb-green); opacity: .85; transform: scale(1); }
.lp-step.fail .lp-mx i { background: var(--bb-red); opacity: .8; transform: scale(1); }
.lp-step.skip .lp-mx i { background: var(--bb-orange); opacity: .7; transform: scale(.9); }
@keyframes lpMx {
  0%, 70%, 100% { opacity: .22; transform: scale(.8); }
  25%           { opacity: 1;   transform: scale(1.25); }
}

/* --- the label ----------------------------------------------------------- */
.lp-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-step.run .lp-step-label {
  font-weight: 600;
  /* A sweep across the text itself, not a bar underneath it: the reference reads
     as the words being "processed". background-clip:text needs a painted
     background, so the base colour is baked into the gradient's outer stops. */
  background: linear-gradient(100deg,
    var(--bb-ink) 0%, var(--bb-ink) 38%,
    color-mix(in srgb, var(--bb-accent) 55%, #fff) 50%,
    var(--bb-ink) 62%, var(--bb-ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lpSweep 2.4s linear infinite;
}
@keyframes lpSweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* The trailing dots type themselves in. Rendered as a fixed-width slot so the
   label never reflows as they appear — a label that jitters two pixels every
   400ms is the cheapest way to make a page feel broken. */
.lp-step-dots { display: inline-block; width: 14px; text-align: left; font-weight: 600;
  color: var(--bb-accent); }
.lp-step.run .lp-step-dots::after { content: ''; animation: lpEllipsis 1.6s steps(1) infinite; }
@keyframes lpEllipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: '...'; }
}

.lp-step-note { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--bb-ink-3); margin-left: auto; padding-left: 14px; flex: none; }
.lp-step.run .lp-step-note { color: var(--bb-accent-ink); }
.lp-step.done .lp-step-note { color: var(--bb-ink-2); }
.lp-step.skip .lp-step-note { color: var(--bb-orange); }

/* The button says what is happening too, with the same glyph. */
.lp-btn .lp-mx i { background: rgba(255,255,255,.9); }
.lp-btn-primary:disabled { opacity: .8; }
.lp-btn.busy .lp-mx i { animation: lpMx 1.5s var(--bb-ease-strong) infinite; }
.lp-btn.busy .lp-step-dots::after { content: ''; animation: lpEllipsis 1.6s steps(1) infinite; }

/* An animation nobody asked for is one thing; an animation somebody explicitly
   turned off at the OS level is another. The states stay distinguishable by
   colour and weight with every keyframe stopped. */
@media (prefers-reduced-motion: reduce) {
  .lp-step.run .lp-mx i,
  .lp-btn.busy .lp-mx i,
  .lp-step.run .lp-step-label,
  .lp-step.run .lp-step-dots::after { animation: none; }
  .lp-step.run .lp-mx i { opacity: 1; transform: scale(1.15); }
  .lp-step.run .lp-step-label { -webkit-text-fill-color: var(--bb-ink); color: var(--bb-ink); background: none; }
  .lp-step.run .lp-step-dots::after { content: '...'; }
}

/* =========================================================================
   3. Score header
   ========================================================================= */

.lp-report { display: flex; flex-direction: column; gap: var(--lp-gap); }

.lp-scorecard {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px;
  background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); padding: 24px 26px;
}
.lp-ring { position: relative; width: 176px; height: 176px; }
.lp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lp-ring-track { fill: none; stroke: var(--bb-canvas); stroke-width: 13; }
.lp-ring-arc { fill: none; stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset .9s var(--bb-ease-strong); }
.lp-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; }
.lp-ring-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.lp-ring-of { font-size: 11px; color: var(--bb-ink-2); letter-spacing: .05em; }
.lp-ring-band { font-size: 13px; font-weight: 600; margin-top: 5px; }

.lp-score-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-score-url {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--bb-ink-2);
  word-break: break-all;
}
.lp-score-url a { color: var(--bb-accent-ink); }
.lp-verdict { font-size: 16px; line-height: 1.5; color: var(--bb-ink); }
.lp-5sec {
  background: var(--bb-canvas); border-left: 3px solid var(--bb-gold);
  border-radius: 0 var(--bb-r-control) var(--bb-r-control) 0;
  padding: 12px 15px; font-size: 14px; line-height: 1.55;
}
.lp-5sec b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-ink-2); margin-bottom: 4px; }
.lp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--bb-r-chip);
  background: var(--bb-canvas); border: 1px solid var(--bb-line);
  font-size: 12px; color: var(--bb-ink-2);
}
.lp-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lp-chip-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); font-weight: 600; }
.lp-delta-up { color: var(--bb-green); font-weight: 600; }
.lp-delta-down { color: var(--bb-red); font-weight: 600; }

/* =========================================================================
   4. The 1-2-3 — the loudest block on the page
   ========================================================================= */

.lp-plan {
  background: var(--bb-accent); color: #fff;
  border-radius: var(--bb-r-card); padding: 24px 26px;
  box-shadow: 0 2px 14px rgba(13, 42, 94, .18);
}
.lp-plan-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lp-plan-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.lp-plan-head span { font-size: 13px; color: rgba(255,255,255,.72); }
.lp-plan-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.lp-plan-step {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bb-r-control); padding: 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.lp-plan-n {
  font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 700;
  line-height: 1; color: var(--bb-gold); letter-spacing: -.03em;
}
.lp-plan-action { font-size: 15px; font-weight: 600; line-height: 1.4; }
.lp-plan-why { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8); }
.lp-plan-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.lp-plan-tag { font-size: 11px; padding: 3px 8px; border-radius: var(--bb-r-chip);
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); letter-spacing: .02em; }

/* =========================================================================
   5. Cards, tabs, sections
   ========================================================================= */

.lp-card {
  background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); padding: 20px 22px;
}
.lp-card > h3 {
  margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lp-card > .lp-sub { margin: 0 0 16px; font-size: 13px; color: var(--bb-ink-2); }

.lp-tabs { display: flex; gap: 4px; background: var(--bb-canvas); padding: 4px;
  border-radius: var(--bb-r-control); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.lp-tab {
  padding: 8px 15px; border: none; background: transparent; border-radius: 6px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--bb-ink-2); cursor: pointer;
}
.lp-tab.active { background: var(--bb-surface); color: var(--bb-ink); box-shadow: var(--bb-sh-btn); }

/* --- the three most expensive problems ------------------------------------
   Ten identical cards give a reader no way to tell the $4,000 problem from the
   nitpick. These three are ranked by WEIGHTED DEFICIT — the axis weight times
   how far below 10 it scored — which is the same weight the composite is built
   from, so the ranking on screen can never disagree with the number in the ring. */

.lp-worst { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.lp-worst-card {
  position: relative; padding: 20px 20px 18px;
  border: 1px solid var(--bb-line); border-left: 4px solid var(--c);
  border-radius: var(--bb-r-card); background: var(--bb-surface);
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--bb-sh-card);
}
.lp-worst-rank {
  position: absolute; top: 14px; right: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--bb-ink-3); letter-spacing: .04em;
}
.lp-worst-ico { width: 30px; height: 30px; color: var(--c); }
.lp-worst-ico svg { width: 30px; height: 30px; max-width: none; }
.lp-worst-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.lp-worst-score {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 700; line-height: 1; color: var(--c); letter-spacing: -.03em;
}
.lp-worst-score span { font-size: 14px; color: var(--bb-ink-3); font-weight: 500; }
.lp-worst-why { font-size: 13.5px; line-height: 1.5; color: var(--bb-ink-2); }
.lp-worst-fix { font-size: 13.5px; line-height: 1.5; color: var(--bb-ink);
  background: var(--bb-canvas); border-radius: var(--bb-r-control); padding: 10px 12px; }
.lp-worst-fix b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-ink-2); margin-bottom: 3px; }
.lp-worst-bar { height: 4px; border-radius: 2px; background: var(--bb-canvas); overflow: hidden; margin-top: auto; }
.lp-worst-bar i { display: block; height: 100%; background: var(--c); border-radius: 2px;
  animation: lpGrow .8s var(--bb-ease-strong) both; }
@keyframes lpGrow { from { width: 0 !important; } }
.lp-worst-cost { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bb-ink-2); }

/* --- ten dots beat one bar ------------------------------------------------
   You COUNT dots; you have to measure a bar. And the empty ones make the gap —
   the thing actually being reported — visible instead of implied. */
.lp-dots10 { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.lp-dots10 i { width: 7px; height: 7px; border-radius: 2px; background: var(--bb-line-strong); display: block; }

/* --- the ten axes, one strip --------------------------------------------- */
.lp-axgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 8px; }
.lp-ax {
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-control);
  background: var(--bb-surface); overflow: hidden;
}
.lp-ax > summary {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  cursor: pointer; list-style: none; user-select: none;
}
.lp-ax > summary::-webkit-details-marker { display: none; }
.lp-ax:hover { background: var(--bb-hover); }
.lp-ax-ico { width: 17px; height: 17px; color: var(--c, var(--bb-ink-3)); flex: none; }
.lp-ax-ico svg { width: 17px; height: 17px; max-width: none; }
.lp-ax-name { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ax-score { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; width: 22px; text-align: right; flex: none; }
.lp-ax-chev { width: 15px; height: 15px; max-width: none; color: var(--bb-ink-3); flex: none;
  transition: transform .18s var(--bb-ease-strong); }
.lp-ax[open] .lp-ax-chev { transform: rotate(180deg); }
.lp-ax[open] { background: var(--bb-inset); }
.lp-ax-body { padding: 0 13px 13px 41px; font-size: 13px; line-height: 1.55; color: var(--bb-ink-2); }
.lp-ax-body p + p { margin-top: 7px; }
.lp-ax-body .fix { color: var(--bb-ink); }
.lp-ax-body .fix b { color: var(--bb-accent-ink); }
.lp-ax-body .blurb { color: var(--bb-ink-3); font-size: 12px; font-style: italic; }
.lp-ax.muted { opacity: .55; padding: 11px 13px; display: flex; align-items: center; gap: 11px; }

/* --- findings ------------------------------------------------------------- */
.lp-count {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  background: var(--bb-canvas); color: var(--bb-ink-2);
  border-radius: var(--bb-r-chip); padding: 2px 8px;
}
.lp-sev-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.lp-findings { display: flex; flex-direction: column; gap: 8px; }
.lp-finding {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--bb-line); border-left: 3px solid var(--c);
  border-radius: var(--bb-r-control); padding: 14px 16px; background: var(--bb-surface);
}
.lp-finding.critico { background: var(--bb-red-tint); }
.lp-finding.alto { background: var(--bb-orange-tint); }
.lp-finding-n {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--c); flex: none; width: 20px; text-align: right; line-height: 1.5;
}
.lp-finding-main { min-width: 0; flex: 1; }
.lp-finding-title { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.lp-ev-line {
  margin-top: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--bb-ink-2); line-height: 1.5; word-break: break-word;
}
.lp-ev-line span {
  display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 4px;
  background: var(--bb-canvas); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3);
}
.lp-finding-row.psy { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--bb-ink); }
.lp-finding-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 9px; }
.lp-tagline {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: var(--bb-surface); border: 1px solid var(--bb-line-strong);
  color: var(--bb-ink-2); border-radius: var(--bb-r-chip); padding: 3px 8px;
}
.lp-fix-line { font-size: 13px; color: var(--bb-ink); flex: 1; min-width: 200px; line-height: 1.5; }
.lp-fix-line b { color: var(--bb-green); font-weight: 700; }

/* --- copy rewrites -------------------------------------------------------- */
.lp-rewrite { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); overflow: hidden; margin-bottom: 10px; }
.lp-rewrite-head {
  background: var(--bb-canvas); padding: 8px 14px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-ink-2);
  display: flex; align-items: center; gap: 10px;
}
.lp-copy-btn {
  margin-left: auto; border: 1px solid var(--bb-line-strong); background: var(--bb-surface);
  border-radius: var(--bb-r-chip); padding: 3px 9px; font: inherit; font-size: 10.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bb-ink-2); cursor: pointer;
}
.lp-copy-btn:hover { background: var(--bb-hover); color: var(--bb-ink); }
.lp-rewrite-body { display: grid; grid-template-columns: 1fr 1fr; }
.lp-rewrite-cell { padding: 13px 15px; font-size: 14px; line-height: 1.5; }
.lp-rewrite-cell:first-child { color: var(--bb-ink-2); }
.lp-rewrite-cell + .lp-rewrite-cell { border-left: 1px solid var(--bb-line); background: var(--bb-green-tint);
  font-weight: 500; color: var(--bb-ink); }
.lp-rewrite-cell small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bb-ink-2); margin-bottom: 5px; }
.lp-rewrite-why { grid-column: 1 / -1; border-top: 1px solid var(--bb-line);
  padding: 10px 15px; font-size: 12.5px; color: var(--bb-ink-2); background: var(--bb-inset); }

/* --- quick wins ----------------------------------------------------------- */
.lp-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.lp-win { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-control);
  font-size: 13.5px; line-height: 1.5; background: var(--bb-surface); }
.lp-win-check { width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 2px solid var(--bb-green); position: relative; }
.lp-win-check::after { content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--bb-green); opacity: .28; }

/* --- plain lists ---------------------------------------------------------- */
.lp-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.65; color: var(--bb-ink-2); }
.lp-list li + li { margin-top: 4px; }
.lp-list b { color: var(--bb-ink); }

/* =========================================================================
   6. The mockup
   ========================================================================= */

.lp-mock-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-mock-stage {
  background: var(--bb-canvas); border-radius: var(--bb-r-card);
  padding: 22px; display: flex; justify-content: center;
}
.lp-frame {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(13, 42, 94, .14), 0 0 0 1px var(--bb-line);
  width: 100%; max-width: 1040px; transition: max-width .35s var(--bb-ease-strong);
}
.lp-frame.mobile { max-width: 400px; border-radius: 26px; padding: 10px; background: #16181D; }
.lp-frame.mobile iframe { border-radius: 18px; }
.lp-frame iframe { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
.lp-frame.mobile iframe { height: 720px; }

.lp-mock-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.lp-note-box { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); padding: 13px 15px; }
.lp-note-box h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bb-ink-2); }
.lp-note-box.verify { background: var(--bb-gold-tint); border-color: color-mix(in srgb, var(--bb-gold) 40%, transparent); }

/* =========================================================================
   7. History rail + evidence
   ========================================================================= */

.lp-history { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.lp-hist-card {
  flex: 0 0 220px; text-align: left; cursor: pointer;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-control); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow .14s ease, transform .14s var(--bb-ease-strong);
}
.lp-hist-card:hover { box-shadow: var(--bb-sh-raised); transform: translateY(-2px); }
.lp-hist-card.active { box-shadow: 0 0 0 2px var(--bb-accent); }
.lp-hist-score { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; line-height: 1; }
.lp-hist-label { font-size: 13px; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-hist-when { font-size: 11px; color: var(--bb-ink-2); font-family: 'JetBrains Mono', monospace; }

.lp-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lp-ev {
  background: var(--bb-inset); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-control); padding: 12px 14px;
}
.lp-ev-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 700; line-height: 1.1; }
.lp-ev-lab { font-size: 11.5px; color: var(--bb-ink-2); margin-top: 3px; }
.lp-ev.warn .lp-ev-num { color: var(--bb-red); }

.lp-assets { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.lp-asset { flex: 0 0 132px; }
.lp-asset img { width: 132px; height: 92px; object-fit: cover; border-radius: 8px;
  background: #0A0D14; border: 1px solid var(--bb-line); display: block; }
.lp-asset-kb { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--bb-ink-2); margin-top: 4px; }
.lp-asset-kb.heavy { color: var(--bb-red); font-weight: 600; }

.lp-caveat {
  font-size: 12px; color: var(--bb-ink-2); background: var(--bb-canvas);
  border-radius: var(--bb-r-chip); padding: 8px 12px; line-height: 1.5;
}

.lp-empty { text-align: center; padding: 54px 20px; color: var(--bb-ink-2); }
.lp-empty h3 { margin: 0 0 8px; font-size: 18px; color: var(--bb-ink); font-weight: 600; }
.lp-empty p { margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.6; }

/* =========================================================================
   8. Narrow
   ========================================================================= */

@media (max-width: 900px) {
  .lp-scorecard { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .lp-score-side { text-align: left; width: 100%; }
  .lp-rewrite-body { grid-template-columns: 1fr; }
  .lp-rewrite-cell + .lp-rewrite-cell { border-left: none; border-top: 1px solid var(--bb-line); }
}

/* =========================================================================
   9. Enhancement Intelligence — the hub
   -------------------------------------------------------------------------
   A THRESHOLD, not a dashboard. It shows no numbers on purpose: every number it
   could show is already owned by one of the three pages it links to, and a hub
   that re-derives one is how two surfaces start disagreeing.

   The whole surface is one navy slab because crossing into it is the point —
   the rest of the app is warm off-white and answers "what happened"; this is
   the other question, so it looks like somewhere else. Three doors, full width,
   set in display type. No cards.

   Two traps that already shipped once:
   - A bare `header {}` rule in index.html paints the APP TOP BAR navy. Any
     <header> element inside a page inherits it. This block uses divs.
   - responsive.css sets svg{max-width:100%}, which resolves to 0 for an SVG in
     a flex container. Every glyph below states an explicit box.
   ========================================================================= */

.enh-page { max-width: 1180px; }

.enh-slab {
  position: relative; overflow: hidden;
  border-radius: 16px;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 3.4vw, 46px) clamp(10px, 1.6vw, 18px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(201, 164, 63, .16) 0%, transparent 52%),
    linear-gradient(163deg, #173D77 0%, #0D2A5E 100%);
  background-color: #0D2A5E;
  box-shadow: 0 1px 2px rgba(13, 42, 94, .18), 0 18px 44px -18px rgba(10, 33, 72, .55);
  color: #F4F6FB;
}
/* A hairline of the brand gold along the top edge — the one piece of ornament,
   and the only place the institution's second colour appears at full strength. */
.enh-slab::before {
  content: ''; position: absolute; left: clamp(14px, 3vw, 30px); right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--bb-gold) 0%, rgba(201, 164, 63, .35) 42%, transparent 78%);
}

.enh-head { max-width: 62ch; }
.enh-head h2 {
  margin: 0; color: #FBFAF7;
  font-size: clamp(30px, 3.9vw, 48px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.02; text-wrap: balance;
}
.enh-head p {
  margin: 12px 0 0; color: #A8BCDD;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.55; text-wrap: pretty;
}

.enh-doors {
  display: grid; margin-top: clamp(26px, 3.2vw, 42px);
}

.enh-door {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px 168px;
  align-items: center; gap: clamp(18px, 2.6vw, 40px);
  width: auto; text-align: left; min-width: 0;
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  padding: clamp(18px, 2.2vw, 26px) 16px;
  margin-inline: -16px;
  transition: background-color .18s ease;
}
.enh-door:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.enh-door:hover { background-color: rgba(255, 255, 255, .055); }
.enh-door:active { background-color: rgba(255, 255, 255, .085); }
.enh-door:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--bb-gold);
  background-color: rgba(255, 255, 255, .055);
}

.enh-door-text {
  display: block; min-width: 0; text-align: left;
  transition: transform .22s var(--bb-ease-strong);
}
.enh-door:hover .enh-door-text { transform: translateX(8px); }
.enh-door-title {
  display: block; color: #FBFAF7; white-space: normal;
  font-size: clamp(20px, 2.1vw, 27px); font-weight: 650;
  letter-spacing: -.022em; line-height: 1.15;
}
.enh-door-line {
  display: block; margin-top: 7px; max-width: 56ch;
  color: #A0B5D8; white-space: normal; text-wrap: pretty;
  font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.5;
}

/* The glyph draws the thing itself — a page, a wall of ads, a ranking — rather
   than symbolising it with a stock icon. Gold marks the part that is OURS. */
.enh-glyph { display: block; flex: none; }
.enh-glyph svg {
  display: block; width: 104px; height: 60px; max-width: none;
  color: rgba(255, 255, 255, .30);
  transition: color .22s ease, transform .22s var(--bb-ease-strong);
}
.enh-glyph .g-b { opacity: .72; }
.enh-glyph .g-c { color: var(--bb-gold); stroke: var(--bb-gold); opacity: .78; }
.enh-door:hover .enh-glyph svg { color: rgba(255, 255, 255, .52); transform: translateX(-2px); }
.enh-door:hover .enh-glyph .g-c { opacity: 1; }

.enh-door-act {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  min-width: 0;
}
.enh-act-label {
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--bb-gold);
  white-space: nowrap;
}
.enh-act-arrow {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .26); color: #FBFAF7;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.enh-act-arrow svg { width: 17px; height: 17px; max-width: none; flex: none; }
.enh-door:hover .enh-act-arrow {
  background: var(--bb-gold); border-color: var(--bb-gold); color: #0D2A5E;
}

/* One authored entrance: the doors arrive in sequence, from already-visible. */
.page-enhance:not(.hidden) .enh-door {
  animation: enhDoorIn .5s var(--bb-ease-strong) both;
}
.page-enhance:not(.hidden) .enh-door:nth-child(2) { animation-delay: .06s; }
.page-enhance:not(.hidden) .enh-door:nth-child(3) { animation-delay: .12s; }
@keyframes enhDoorIn {
  from { opacity: .001; transform: translateY(10px); }
  to   { opacity: 1;    transform: none; }
}

@media (max-width: 860px) {
  .enh-door { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .enh-door-act { justify-content: flex-end; }
  .enh-glyph { display: none; }
  .enh-act-label { display: none; }
}
@media (max-width: 460px) {
  .enh-door { padding-inline: 12px; margin-inline: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .enh-door, .enh-door-text, .enh-glyph svg, .enh-act-arrow { transition: none; }
  .page-enhance:not(.hidden) .enh-door { animation: none; }
  .enh-door:hover .enh-door-text { transform: none; }
}

/* =========================================================================
   2b. The orb — one indicator, two lives
   -------------------------------------------------------------------------
   While running it is INDETERMINATE on purpose. A percentage would have to be
   invented (the model does not report progress), and an invented percentage that
   sits at 80% for thirty seconds is worse than no number at all. So the arc
   spins, the core breathes, and the only real numbers on it are the step count
   and the elapsed clock.

   When the score arrives the SAME arc stops and draws to the real value. It is
   deliberately one object across both states: a spinner that vanishes and is
   replaced by a number reads as two events, and this is one.
   ========================================================================= */

.lp-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lp-orb { position: relative; width: 158px; height: 158px; }
.lp-orb svg { width: 100%; height: 100%; display: block; }
.lp-orb-track { fill: none; stroke: var(--bb-canvas); stroke-width: 11; }
.lp-orb-arc {
  fill: none; stroke: var(--bb-accent); stroke-width: 11; stroke-linecap: round;
  transform-origin: 50% 50%;
}
/* Running: a short arc, rotating. transform on the PATH, not the svg, so the
   track behind it stays put. */
.lp-orb.run .lp-orb-arc { animation: lpOrbSpin 1.15s cubic-bezier(.5,.1,.5,.9) infinite; }
@keyframes lpOrbSpin { to { transform: rotate(360deg); } }
/* Scored: no rotation, and the dash offset carries the value. */
.lp-orb.scored .lp-orb-arc {
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1.1s var(--bb-ease-strong), stroke 0.5s ease;
}

.lp-orb-halo {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bb-accent) 15%, transparent) 0%, transparent 68%);
  opacity: 0;
}
.lp-orb.run .lp-orb-halo { animation: lpOrbBreathe 2.6s ease-in-out infinite; }
@keyframes lpOrbBreathe {
  0%, 100% { opacity: .25; transform: scale(.9); }
  50%      { opacity: .8;  transform: scale(1.05); }
}

.lp-orb-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-align: center;
}
.lp-orb-num {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
.lp-orb-of { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-2); }
.lp-orb-band { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.lp-orb-step {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--bb-ink-2);
}
.lp-orb-verb { font-size: 13px; font-weight: 600; color: var(--bb-ink); }
.lp-orb-clock { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bb-ink-3); }
.lp-orb-cap { font-size: 11.5px; color: var(--bb-ink-2); text-align: center; max-width: 190px; line-height: 1.4; }

/* The 3x3 language again, at the core, while there is no number to show yet. */
.lp-orb .lp-mx { width: 22px; grid-template-columns: repeat(3, 5px); grid-auto-rows: 5px; gap: 3.5px; margin: 0 auto 2px; }
.lp-orb .lp-mx i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--bb-accent); }
.lp-orb.run .lp-mx i { animation: lpMx 1.5s var(--bb-ease-strong) infinite; }

@media (prefers-reduced-motion: reduce) {
  .lp-orb.run .lp-orb-arc, .lp-orb.run .lp-orb-halo, .lp-orb.run .lp-mx i { animation: none; }
  .lp-orb.run .lp-orb-halo { opacity: .5; }
}

@media (max-width: 820px) {
  .lp-run { grid-template-columns: 1fr; gap: 18px; }
  .lp-orb-wrap { order: -1; }
}

/* =========================================================================
   10. Campaigns that point here
   -------------------------------------------------------------------------
   A card per campaign, not a table. The row that matters is "this campaign is
   spending $X against a page we just scored 34", and a table row buries the
   money next to five other numbers of equal weight.
   ========================================================================= */

.lp-camps { display: flex; flex-direction: column; gap: 10px; }
.lp-camp {
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-control);
  padding: 13px 15px; background: var(--bb-surface);
}
.lp-camp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-camp-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 180px; word-break: break-word; }
.lp-camp-spend {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; color: var(--bb-ink);
}
.lp-plat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--bb-r-chip); flex: none;
  border: 1px solid var(--bb-line-strong); color: var(--bb-ink-2); background: var(--bb-canvas);
}
.lp-plat.meta   { background: var(--bb-accent-tint); border-color: color-mix(in srgb, var(--bb-accent) 25%, transparent); }
.lp-plat.google { background: var(--bb-gold-tint);   border-color: color-mix(in srgb, var(--bb-gold) 35%, transparent); }

.lp-camp-metrics {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px;
  font-size: 12.5px; color: var(--bb-ink-2);
}
.lp-camp-metrics b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  color: var(--bb-ink); font-weight: 600; }
.lp-camp-metrics small { color: var(--bb-ink-3); }
.lp-camp-grade { margin-left: auto; font-size: 11.5px; color: var(--bb-ink-3); }
.lp-camp-url {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bb-line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bb-ink-2);
  word-break: break-all;
}

/* --- manual attachments --------------------------------------------------- */

.lp-pick-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.lp-pick { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control);
  padding: 13px 15px; background: var(--bb-inset); }
.lp-pick-head { display: flex; gap: 10px; align-items: center; }
.lp-pick-head input { flex: 1; }
.lp-pick-why { font-size: 12px; color: var(--bb-ink-2); margin: 8px 0 4px; line-height: 1.45; }
.lp-pick-note { font-size: 13px; color: var(--bb-ink-2); padding: 10px 2px; }
.lp-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: var(--bb-r-chip);
  background: transparent; font: inherit; cursor: pointer;
  /* index.html's bare `button { background: var(--navy); color: white }` — resetting
     the background without the color left the campaign name white on the warm inset,
     i.e. invisible. `font: inherit` does NOT carry color. */
  color: var(--bb-ink);
}
.lp-pick-row:hover { background: var(--bb-hover); }
.lp-pick-name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pick-status { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--bb-ink-3); }
.lp-pick-add { font-size: 12.5px; font-weight: 600; color: var(--bb-accent-ink); flex: none; }

.lp-links { margin-top: 16px; border-top: 1px solid var(--bb-line); padding-top: 12px; }
.lp-links h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bb-ink-2); }
.lp-link-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.lp-link-name { flex: 1; min-width: 0; font-size: 13px; }
.lp-link-mode { font-size: 11px; padding: 2px 8px; border-radius: var(--bb-r-chip);
  background: var(--bb-green-tint); color: var(--bb-ink-2); }
.lp-link-mode.out { background: var(--bb-red-tint); }

/* Excluded ≠ hidden. The row stays, struck through, with a one-click undo — the
   same rule initiative ownership follows, and for the same reason: a silent
   exclusion is the identical failure to a silent inclusion, in reverse. */
.lp-camp.excluded { opacity: .62; }
.lp-camp.excluded .lp-camp-spend,
.lp-camp.excluded .lp-camp-name { text-decoration: line-through; }
.lp-camp-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--bb-r-chip);
  background: var(--bb-gold-tint); color: var(--bb-gold-ink); flex: none; }
.lp-camp-badge.out { background: var(--bb-red-tint); color: var(--bb-red); }
.lp-camp-toggle { border: 1px solid var(--bb-line-strong); background: var(--bb-surface);
  border-radius: var(--bb-r-chip); padding: 4px 9px; font: inherit; font-size: 11.5px;
  color: var(--bb-ink-2); cursor: pointer; flex: none; }
.lp-camp-toggle:hover { background: var(--bb-hover); color: var(--bb-ink); }

/* ------------------------------------------------------------ money on the plan
   The 1-2-3 sits on a dark card, so the spend line borrows its own contrast
   instead of the page's ink tokens. It prints only what the platforms already
   said: spend, CPL, window. No projection ever lands here. */
.lp-plan-money {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: -.01em;
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--bb-r-chip);
  padding: 8px 12px; margin: -6px 0 16px; display: inline-block;
  font-variant-numeric: tabular-nums;
}
.lp-plan-money b { color: var(--bb-gold); font-weight: 700; }

/* ------------------------------------------------------- who owns the finding
   A finding nobody owns is a finding nobody does. WildFi is an e-mail, Web is a
   ticket, Northbridge is a decision — three different colours because they are
   three different next actions. */
.lp-finding-where {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bb-ink-2); background: var(--bb-inset);
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip);
  padding: 2px 7px; margin-left: 8px; vertical-align: 2px; font-weight: 600;
}
.lp-owner {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--bb-r-chip); padding: 2px 8px; margin-left: 6px; vertical-align: 2px;
  border: 1px solid transparent;
}
.lp-owner.wf  { background: var(--bb-cyan-tint);   color: var(--bb-cyan);     border-color: rgba(22,120,143,.28); }
.lp-owner.web { background: var(--bb-violet-tint); color: var(--bb-violet);   border-color: rgba(107,79,168,.28); }
.lp-owner.nb  { background: var(--bb-gold-tint);   color: var(--bb-gold-ink); border-color: rgba(168,132,44,.32); }

/* ---------------------------------------------------------------- the handoff */
.lp-handoff { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lp-handoff .lp-count { margin-left: 4px; }
.lp-handoff .lp-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* =========================================================================
   The ad is CHOSEN, not typed
   -------------------------------------------------------------------------
   Message match is the heaviest axis on the rubric and it is judged against
   what the AD says. A free-text box only ever produced a label, so the model
   compared the page against a name Miguel typed. The dropdown is anchored to
   the field (position:absolute over a relative .lp-field-ad) so it overlays
   the two fields beside it instead of pushing the console taller mid-keystroke.
   ========================================================================= */
.lp-field-ad { position: relative; }
.lp-ac {
  /* Wider than the field it hangs off. WildFi's names are 60-90 characters
     ("NUCG_NUCOPR_SRCH_PR_Sch_Nursing_Leads_NBU"), and inside a third-of-a-row
     field every row truncated to "Tu puent… / NUCG_…" — a picker where nothing is
     readable is not a picker. It overlays the two fields beside it on purpose. */
  position: absolute; z-index: 40; left: 0; top: 100%; margin-top: 5px;
  width: min(780px, calc(100vw - 96px));
  max-height: 320px; overflow-y: auto; background: var(--bb-surface);
  border: 1px solid var(--bb-line-strong); border-radius: var(--bb-r-control);
  box-shadow: 0 10px 30px rgba(13,42,94,.12), 0 2px 6px rgba(13,42,94,.06);
  padding: 5px;
}
.lp-ac-err { font-size: 11.5px; padding: 7px 9px; color: var(--bb-ink-2);
  background: var(--bb-orange-tint); border-radius: var(--bb-r-chip); margin-bottom: 4px; }
.lp-ac-row {
  display: grid; grid-template-columns: auto minmax(0,1.5fr) minmax(0,1fr) auto auto;
  align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 9px; border: 0; border-radius: var(--bb-r-chip); background: none;
  font: inherit; color: var(--bb-ink);
}
.lp-ac-row:hover, .lp-ac-row:focus-visible { background: var(--bb-hover); outline: none; }
.lp-ac-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ac-camp { font-size: 11.5px; color: var(--bb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ac-spend { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.lp-ac-status { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-ink-3); }

/* The chosen ad, with the copy the model will actually read. Showing it is the
   point: an ad card that hides its own headline is the same black box as the
   text field it replaced. */
.lp-adcard {
  display: flex; gap: 12px; padding: 11px; border: 1px solid var(--bb-line-strong);
  border-radius: var(--bb-r-control); background: var(--bb-inset);
}
.lp-adcard img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--bb-r-chip);
  border: 1px solid var(--bb-line); flex: none; }
.lp-adcard-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lp-adcard-top { display: flex; align-items: center; gap: 8px; }
.lp-adcard-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.lp-adcard-status { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-ink-3); }
.lp-adcard-x { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 17px;
  line-height: 1; color: var(--bb-ink-3); padding: 0 2px; }
.lp-adcard-x:hover { color: var(--bb-red); }
.lp-adcard-camp { font-size: 11.5px; color: var(--bb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-adcard-copy { font-size: 12px; line-height: 1.45; color: var(--bb-ink); }
.lp-adcard-copy span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--bb-ink-3); margin-right: 7px; }
.lp-adcard-copy.warn { color: var(--bb-ink-2); }
.lp-adcard-dest { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--bb-ink-2);
  display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The URL is the part that may be shortened; the BUTTON is not. It was clipped to
   "Usar com" because a flex row shrinks whatever it can, and it shrank the label. */
.lp-adcard-dest > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-adcard-dest .lp-btn { flex: none; white-space: nowrap; }
/* A picked ad carries three lines of real copy, so it takes the whole row instead
   of being squeezed into a third of it beside Programa and División. */
.lp-field-ad.has-ad { grid-column: 1 / -1; }
.lp-ac-camp small { display: block; font-size: 10px; color: var(--bb-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Running now. The list is sorted active-first, and the dot is what makes that
   ordering legible instead of coincidental. */
.lp-ac-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bb-green); margin-left: 6px; vertical-align: middle; }

/* An attached campaign whose money has not been read yet. A $0 here would be a
   wrong number (one of these turned out to be $15,094), so it says so instead. */
.lp-camp-pending { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: var(--bb-ink-3); }

/* =========================================================================
   Contra qué se compara — the competitor benchmark
   -------------------------------------------------------------------------
   Miguel, Aug 2026: "y comparando contra qué está comparando para saber si es
   un buen landing page o no?!" The card exists to answer that in one glance:
   the gap, the number on both sides, and WHICH schools do the thing we don't.
   A percentage nobody can trace back to a school is a vibe, not evidence.
   ========================================================================= */
.lp-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
.lp-gap { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); padding: 13px 14px; background: var(--bb-inset); }
/* The label and the numbers each get their own line. Side by side, the monospace
   numbers squeezed the label until it broke mid-word ("DURACI ÓN"). */
.lp-gap-label { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: normal; }
.lp-gap-nums { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bb-ink-2);
  font-variant-numeric: tabular-nums; margin: 4px 0 9px; }
.lp-gap-nums b { color: var(--bb-red); }
.lp-gap-who { font-size: 11.5px; color: var(--bb-ink-2); margin-top: 8px; line-height: 1.45; }
/* Two bars in one track: theirs behind, ours in front. The overlap IS the gap. */
.lp-bb { display: block; position: relative; height: 8px; background: var(--bb-canvas); border-radius: 2px; overflow: hidden; }
.lp-bb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.lp-bb-p { background: color-mix(in srgb, var(--bb-accent) 45%, transparent); }
.lp-bb-o { background: var(--bb-red); }
.lp-bench-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.lp-bench-tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.lp-bench-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bb-ink-2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bb-line-strong); }
.lp-bench-tbl th:not(:first-child), .lp-bench-tbl td.n { text-align: right; }
.lp-bench-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--bb-line); }
.lp-bench-tbl td.n { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.lp-bench-tbl tr.behind td { background: var(--bb-red-tint); }
.lp-bench-tbl small { color: var(--bb-ink-3); }
.lp-bench-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; margin-top: 16px; }
.lp-bench-page { display: block; text-decoration: none; color: inherit; border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-control); padding: 10px 12px; transition: border-color .2s; }
.lp-bench-page:hover { border-color: var(--bb-accent); }
.lp-bench-school { display: block; font-size: 12.5px; font-weight: 600; }
.lp-bench-h1 { display: block; font-size: 11.5px; color: var(--bb-ink-2); margin: 2px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bench-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.lp-bench-tags i { font-style: normal; font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip); padding: 2px 6px; color: var(--bb-ink-2); }
.lp-bench-tags i.q { font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------- the external 14-point rubric */
.lp-fs { display: grid; gap: 4px; }
.lp-fs-row { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); overflow: hidden; }
.lp-fs-row.bad { border-color: color-mix(in srgb, var(--bb-red) 35%, transparent); }
.lp-fs-row.good { border-color: color-mix(in srgb, var(--bb-green) 30%, transparent); }
.lp-fs-head { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0;
  font: inherit; color: inherit; text-align: left; padding: 10px 13px; cursor: pointer; }
.lp-fs-head:hover { background: var(--bb-hover); }
.lp-fs-name { flex: 1; font-size: 13.5px; font-weight: 600; min-width: 0; }
.lp-fs-score { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; width: 22px; text-align: right; }
.lp-fs-body { padding: 2px 13px 13px 13px; border-top: 1px solid var(--bb-line); background: var(--bb-inset); }
.lp-fs-body .lp-list { margin-top: 10px; }
.lp-fs-reality { font-size: 12.5px; color: var(--bb-ink); background: var(--bb-orange-tint);
  border-radius: var(--bb-r-chip); padding: 8px 10px; margin-top: 10px; }
.lp-ax-chev.open { transform: rotate(180deg); }
/* A deliberate decision is not a defect. The row stays visible — what competitors
   do is worth knowing — but it is never painted as a gap, and it carries the
   reason so nobody re-raises "we should put the price" in a meeting. */
.lp-bench-tbl tr.policy td { background: var(--bb-accent-tint); }
.lp-policy { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bb-accent-ink); margin-top: 2px; }
.lp-policy-note { margin-bottom: 14px; }

/* --------------------------------------------------- antes y después, en datos
   The visual side-by-side lives in the preview harness (two live pages). This is
   the line-by-line half: what the current page answers vs what the proposal does.
   It exists because a screenshot cannot be pasted into a Web ticket as a
   checklist. Rows the proposal GAINS are tinted — that is the deliverable. */
.lp-ba { border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); overflow: hidden; }
.lp-ba-head, .lp-ba-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) 1fr 1fr; gap: 14px;
  padding: 10px 14px; align-items: baseline; }
.lp-ba-head { background: var(--bb-inset); border-bottom: 1px solid var(--bb-line-strong);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-ink-2); font-weight: 600; }
.lp-ba-row + .lp-ba-row, .lp-ba-head + .lp-ba-row { border-top: 1px solid var(--bb-line); }
.lp-ba-row.gained { background: var(--bb-green-tint); }
.lp-ba-k { font-size: 12.5px; font-weight: 600; }
.lp-ba-t { font-size: 12.5px; color: var(--bb-ink-2); min-width: 0; }
.lp-ba-t.new { color: var(--bb-ink); }
.lp-ba-y { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-green); }
.lp-ba-n { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-red); }