/* Fonts and type tokens come first so the browser can request the faces
   before it has parsed the rest of this file (they used to sit at line ~20400,
   two thirds of the way down, and every first visit painted in the fallback). */
/* v590-broadcast-type: self-hosted faces + one type system for every page.
   Display/labels = Barlow Condensed (scoreboard), prose = Inter, figures =
   IBM Plex Mono. Previously `font-family: Inter` was declared but never
   loaded, so the whole site fell back to the OS UI font. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
/* Inter ships as one variable file; the range covers every weight we use. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2"); }
:root {
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One scale. Six steps, replacing eleven ad-hoc sizes. */
  --t-micro: 0.6875rem;  /* 11px  - condensed micro-labels */
  --t-small: 0.75rem;    /* 12px  - condensed tags, dense captions */
  --t-body:  0.8125rem;  /* 13px  - row copy, secondary prose */
  --t-base:  0.9375rem;  /* 15px  - default body, tab labels */
  --t-lead:  1.25rem;    /* 20px  - stat numbers, sub-heads */
  /* Shared right edge for the board rows, the group strip, the hero and the
     finder's answer panel. 100% = the shell's own width (min(1240px, 100% -
     32px)), so the content block ends where the page does.
     It was a hard 1020px, which left ~220px of nothing down the right inside
     a 1240px shell -- the page looked like it stopped early. */
  --board-measure: 100%;
  --t-title: 1.625rem;   /* 26px  - section titles */

  /* Spacing scale (v931). Tokens equal the raw values they replaced; the scale documents the rhythm, it does not re-space anything. */
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10: 24px; --space-11: 28px; --space-12: 32px; --space-14: 40px;
  /* Radius scale (v931) */
  --radius-xs: 3px; --radius-s: 4px; --radius-m: 6px; --radius-l: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px;

  /* Two tracking values, replacing twelve. */
  --track-caps: 0.12em;  /* uppercase condensed labels only */
  --track-flat: 0;       /* everything else */

  /* Weight ceiling is 700: emphasis only means something if it is rare. */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;
}
:root {
  color-scheme: dark;
  /* Text ramp. Three steps, and there is no fourth: --dim is the floor.
     It replaced #4d6072, which sat at 3.09:1 on a panel and 3.23:1 on the page
     -- under the 4.5:1 AA asks for anything below 18px, so ranks, counts,
     captions and section headings were all failing. --dim measures 6.0-6.3:1
     in those same places and still reads as clearly secondary.
     Quiet is a contrast RATIO, not a low number. Anything dimmer than this
     needs a measurement to justify it, not an eye. */
  --ink: #eef4f8;    /* primary copy, numbers that carry the answer */
  --muted: #93a4b3;  /* secondary copy, option labels, section headings */
  --dim: #7d8fa0;    /* captions, counts, units, status lines -- the floor */
  --line: #2d3a46;
  --panel: #121b24;
  --panel-strong: #172330;
  --field: #0d151d;
  --navy: #7eb6ff;
  /* v802-one-hue-one-value: sage (#3fe3a4) and green (#55d6a5) were the same
     meaning -- a gain, a win, a rating you picked up -- at two different
     values. --sage was the newer, more-used one (advisor, squad builder,
     pack/dynasty/inventory pages); --green predates it in the shared nav
     chrome. Rather than re-point 80+ call sites, --green now resolves to
     --sage so every "gain" reads as the same hue site-wide; the --green name
     stays for the selectors that already use it. Moved here from the
     standalone `:root { --sage: #3fe3a4; }` this file grew at v793, further
     down, once sage as a whole became a real token instead of three literals. */
  --sage: #3fe3a4;
  --green: var(--sage);
  --red: #ff657c;
  --gold: #f1b84b;
  /* Money and gain both needed a second, brighter step for small text/labels
     on dark ground -- the flat --gold/--sage read too dim there. -ink is that
     step: text, focus outlines, icon glyphs. The base token stays for fills,
     borders and badge backgrounds. */
  --gold-ink: #f1c86d;
  --cyan: #5fc7df;
  --cyan-ink: #9df1ff;
  --neon-cyan: #00e5ff;
  --neon-teal: #14ebb0;
  /* The neon triad's bright text counterpart, paired with the neon-teal glow
     (hero stat highlights, proof strips) the way --cyan-ink pairs with
     --cyan. Kept apart from --sage/--gold-ink: it belongs to the neon
     decorative system, not the plain meaning vocabulary. */
  --neon-teal-ink: #29f2c0;
  --neon-pink: #ff2d4b;
  --neon-gold: #ffbe3a;
  /* The one documented exception: .hero-accent's red word in hero headlines
     stays #ff2d4b even though every other red-family use is --red or
     --neon-pink. Same value as --neon-pink, but its own token because it is
     a different decision (a fixed brand accent, not a meaning colour). */
  --hero-accent: #ff2d4b;
  /* v690 palette: cyan and mint were carrying nearly every meaning on the site,
     which is why any panel using both read as one blue-green wash. Two hues with
     jobs of their own take that load off them.
       violet  -- what is YOURS: owned cards, bench depth, free swaps, import state
       coral   -- TIME: live now, lands next, expiring
       steel   -- a plain count that carries no meaning at all
     A number only takes a meaning colour when the colour says something the
     label does not. */
  --violet: #a98bff;
  --violet-ink: #1a1230;
  --coral: #ff8360;
  --coral-ink: #2b1109;
  --steel: #8aa2b5;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.42);

  /* v5.0.0-hf32 shared semantic tokens. They used to sit in their own :root
     two thirds of the way down the file; nothing declared them twice, so
     hoisting them changes no value. */
  --dp-market: #35d4ff;
  --dp-positive: #53f0a7;
  --dp-caution: #f6c858;
  --dp-danger: #ff4d7d;
  --dp-premium: #ff2d6a;
  --dp-cool: #6ea7ff;
  --dp-neutral: #b8c9d6;
  --dp-rank-bg: linear-gradient(135deg, rgba(255, 45, 106, 0.94), rgba(0, 229, 255, 0.64));
  --dp-rank-border: rgba(255, 255, 255, 0.24);
  --dp-rank-ink: #f8fbff;

  /* v659-rarity-red. Garnet, deliberately deeper and cooler than --hot (stop)
     and the Pro pink, so red means exactly one thing per shade. Declared here
     rather than beside the .rarity-red-diamond rule that reads it. */
  --rarity-red: #cf3f66;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(95, 199, 223, 0.16), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(241, 184, 75, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(238, 244, 248, 0.025) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(135deg, var(--field) 0%, #111b25 52%, #0a1419 100%);
  overflow-x: hidden;
}
html {
  scrollbar-color: rgba(95, 199, 223, 0.55) rgba(8, 14, 22, 0.85);
  scrollbar-width: thin;
}
.account-page [hidden] {
  display: none !important;
}
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: rgba(8, 14, 22, 0.9);
}
body::-webkit-scrollbar-thumb {
  border: 3px solid rgba(8, 14, 22, 0.9);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--cyan), var(--green), var(--gold));
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0 44px;
}
.site-header {
  position: relative;
  z-index: 6500;
  min-height: 112px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(10px, 1.15vw, 18px);
  padding: 10px 0 8px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(95, 199, 223, 0.18), rgba(255, 101, 124, 0.12), transparent);
}
.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.brand-logo {
  display: block;
  width: clamp(240px, 24vw, 335px);
  max-width: 100%;
  height: 92px;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 0 18px rgba(95, 199, 223, 0.48))
    drop-shadow(0 0 28px rgba(255, 101, 124, 0.2))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.36));
}
.site-nav {
  position: absolute;
  left: 50%;
  justify-self: center;
  align-self: center;
  width: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 10px;
  border: 1px solid rgba(95, 199, 223, 0.32);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, rgba(95, 199, 223, 0.18), rgba(8, 14, 22, 0.86) 28%, rgba(255, 101, 124, 0.12)),
    rgba(8, 14, 22, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(238, 244, 248, 0.04),
    0 0 24px rgba(95, 199, 223, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  overflow: visible;
}
.site-nav::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--cyan), var(--red), transparent);
  opacity: 0.78;
  box-shadow: 0 0 16px rgba(95, 199, 223, 0.44);
}
.site-nav a,
.site-nav button,
.nav-cta,
.nav-toggle,
.primary-action,
.secondary-action {
  border: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c4d0da;
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 600;
}
.site-nav button {
  background: transparent;
}
.nav-toggle {
  display: none;
  justify-self: end;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(95, 199, 223, 0.34);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.16), rgba(255, 101, 124, 0.1)),
    rgba(8, 14, 22, 0.82);
  box-shadow: 0 0 22px rgba(95, 199, 223, 0.18);
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: #eef4f8;
  box-shadow: 0 0 10px rgba(95, 199, 223, 0.32);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}
.site-nav a,
.site-nav button {
  border-radius: var(--radius-pill);
  min-height: 40px;
  padding: 10px 14px;
  color: #d5e2ea;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 0 12px rgba(95, 199, 223, 0.18);
  position: relative;
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav button:hover,
.site-nav button:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible {
  background: rgba(95, 199, 223, 0.1);
  color: var(--ink);
  outline: none;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.nav-group.is-current > button,
.site-nav button:hover,
.site-nav button:focus-visible {
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.26), rgba(255, 101, 124, 0.12)),
    rgba(13, 21, 29, 0.72);
  box-shadow:
    inset 0 -2px 0 rgba(255, 101, 124, 0.68),
    inset 0 0 0 1px rgba(95, 199, 223, 0.28),
    0 0 18px rgba(95, 199, 223, 0.22);
  transform: translateY(-1px);
}
.site-nav a[aria-current="page"] {
  color: #ffffff;
}
.nav-group {
  position: relative;
  z-index: 125;
  display: inline-flex;
}
.nav-group > button::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.78;
  transition: transform 150ms ease;
}
.nav-group.is-open > button::after,
.nav-group:hover > button::after,
.nav-group:focus-within > button::after {
  transform: translateY(2px) rotate(225deg);
}
.nav-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -6px;
  right: -6px;
  height: 12px;
}
.nav-menu {
  width: min(460px, calc(100vw - 48px));
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6501;
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-l);
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.12), rgba(8, 14, 22, 0.98) 42%, rgba(255, 101, 124, 0.1)),
    rgba(5, 9, 15, 0.98);
  backdrop-filter: blur(18px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(238, 244, 248, 0.05);
}
.nav-group:last-of-type .nav-menu {
  left: auto;
  right: 0;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.is-open .nav-menu {
  display: grid;
}
.nav-menu a {
  min-height: 0;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-l);
  white-space: normal;
  letter-spacing: 0;
  line-height: 1.25;
}
.nav-link-title {
  color: #eef4f8;
  font-size: var(--t-body);
  font-weight: 700;
}
.nav-link-desc {
  color: #9fb0be;
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.25;
}
.nav-menu a:hover .nav-link-desc,
.nav-menu a:focus-visible .nav-link-desc {
  color: #c7d8e4;
}
.primary-action {
  border: 1px solid rgba(95, 199, 223, 0.38);
  background: var(--cyan);
  color: #061016;
  padding: 9px 14px;
  min-height: 44px;
  box-shadow: 0 10px 26px rgba(95, 199, 223, 0.18);
}
.nav-cta {
  justify-self: start;
  align-self: center;
  margin-left: clamp(2px, 0.6vw, 10px);
  margin-right: 0;
  min-height: 48px;
  border: 1px solid rgba(95, 199, 223, 0.36);
  border-radius: var(--radius-pill);
  padding: 11px 19px;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.22), rgba(255, 101, 124, 0.1)),
    rgba(8, 14, 22, 0.72);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(95, 199, 223, 0.22);
  box-shadow:
    inset 0 -2px 0 rgba(255, 101, 124, 0.62),
    inset 0 0 0 1px rgba(238, 244, 248, 0.04),
    0 0 22px rgba(95, 199, 223, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.28);
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}
.site-header > .nav-cta {
  display: none;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: rgba(95, 199, 223, 0.58);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.34), rgba(255, 101, 124, 0.16)),
    rgba(8, 14, 22, 0.84);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(255, 101, 124, 0.72),
    inset 0 0 0 1px rgba(95, 199, 223, 0.2),
    0 0 28px rgba(95, 199, 223, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.34);
  outline: none;
}
.release-footer-trigger {
  display: block;
  width: fit-content;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: #c4d0da;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.release-footer-trigger:hover,
.release-footer-trigger:focus-visible {
  color: var(--green);
  outline: none;
}
.site-nav .release-nav-trigger {
  display: none;
}
.release-trigger:hover,
.release-trigger:focus-visible,
.release-nav-trigger:hover,
.release-nav-trigger:focus-visible,
.release-trigger[aria-expanded="true"] {
  border-color: rgba(95, 199, 223, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.16), rgba(255, 101, 124, 0.1)),
    rgba(21, 29, 36, 0.9);
  outline: none;
}
.pulse-feed-strip {
  position: relative;
  z-index: 40;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 10px 0 16px;
  border: 1px solid rgba(95, 199, 223, 0.2);
  border-radius: var(--radius-pill);
  padding: 5px;
  background:
    linear-gradient(90deg, rgba(95, 199, 223, 0.14), rgba(20, 235, 176, 0.05) 44%, rgba(255, 101, 124, 0.08)),
    rgba(4, 12, 18, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(238, 244, 248, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    padding 160ms ease,
    transform 160ms ease;
}
.pulse-feed-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(95, 199, 223, 0.36), rgba(85, 214, 165, 0.18), transparent);
  opacity: 0.45;
}
.pulse-feed-viewport {
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  border-radius: inherit;
}
.pulse-feed-track {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.pulse-feed-line[aria-hidden="true"] {
  display: none;
}
.pulse-feed-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-right: 0;
  white-space: nowrap;
}
@keyframes pulse-feed-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.pulse-feed-viewport::-webkit-scrollbar {
  display: none;
}
.pulse-feed-title,
.pulse-feed-chip,
.pulse-feed-updated {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}
.pulse-feed-title {
  border-right: 1px solid rgba(147, 164, 179, 0.2);
  padding: 0 12px 0 10px;
  color: #ffffff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pulse-feed-chip {
  border: 1px solid rgba(95, 199, 223, 0.22);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 32px;
  padding: 6px 11px;
  background: rgba(8, 14, 22, 0.72);
  color: #d7e8ef;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(238, 244, 248, 0.025);
}
.pulse-feed-chip b {
  color: var(--green);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.pulse-feed-chip strong {
  color: #eaf4f8;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pulse-feed-chip.on-demand b {
  color: var(--gold);
}
.pulse-feed-chip.fallback b {
  color: var(--red);
}
.pulse-feed-chip.unavailable {
  border-color: rgba(255, 51, 95, 0.36);
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 51, 95, 0.16), transparent 44%),
    rgba(8, 14, 22, 0.76);
}
.pulse-feed-chip.unavailable b {
  position: relative;
  color: #ff5f7c;
  padding-left: var(--space-5);
}
.pulse-feed-chip.unavailable b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #ff335f;
  box-shadow: 0 0 12px rgba(255, 51, 95, 0.8);
  transform: translateY(-50%);
  animation: outage-status-pulse 1.7s ease-in-out infinite;
}
.pulse-feed-chip.account {
  border-color: rgba(241, 184, 75, 0.28);
  margin-left: auto;
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.1), rgba(95, 199, 223, 0.06)),
    rgba(8, 14, 22, 0.76);
}
.pulse-feed-chip.account.ready b,
.pulse-feed-chip.account.cloud b {
  color: var(--green);
}
.pulse-feed-chip.account.cloud {
  border-color: rgba(85, 214, 165, 0.34);
}
.pulse-feed-chip.account:hover,
.pulse-feed-chip.account:focus-visible {
  border-color: rgba(95, 199, 223, 0.48);
  color: #ffffff;
  outline: none;
}
.pulse-feed-updated {
  padding: 0 10px 0 4px;
  color: #93a4b3;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pulse-feed-compact {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 28px;
  padding: 3px 12px;
  color: #eaf4f8;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.pulse-feed-compact b {
  color: var(--green);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.pulse-feed-compact em {
  color: #93a4b3;
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pulse-feed-strip.is-sticky-compact {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 70;
  width: fit-content;
  max-width: min(420px, calc(100% - 24px));
  margin-left: auto;
  margin-right: 0;
  border-color: rgba(95, 199, 223, 0.28);
  padding: var(--space-1);
  box-shadow:
    inset 0 1px 0 rgba(238, 244, 248, 0.045),
    0 12px 32px rgba(0, 0, 0, 0.32);
}
.pulse-feed-strip.is-sticky-compact .pulse-feed-viewport {
  display: none;
}
.pulse-feed-strip.is-sticky-compact .pulse-feed-compact {
  display: flex;
}
@media (prefers-reduced-motion: reduce) {
.pulse-feed-viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }
.pulse-feed-track {
    animation: none;
  }
.pulse-feed-line[aria-hidden="true"] {
    display: none;
  }
.pulse-feed-line {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    padding-right: 0;
    white-space: normal;
  }
.pulse-feed-chip.unavailable b::before,
  .data-health.is-outage .pulse-dot {
    animation: none;
  }
}
.account-status-pill {
  justify-self: start;
  border: 1px solid rgba(95, 199, 223, 0.25);
  border-radius: var(--radius-pill);
  display: inline-grid;
  grid-template-columns: 34px minmax(0, auto);
  gap: 1px 9px;
  align-items: center;
  min-height: 48px;
  min-width: 118px;
  max-width: 184px;
  padding: 7px 12px 7px 8px;
  color: #eaf8fc;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.13), rgba(85, 214, 165, 0.08)),
    rgba(8, 14, 22, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(238, 244, 248, 0.035),
    0 0 18px rgba(95, 199, 223, 0.12);
  cursor: pointer;
}
.ask-pulseai-trigger {
  position: relative;
  justify-self: end;
  grid-column: 2;
  overflow: hidden;
  border: 1px solid rgba(105, 255, 205, 0.24);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 50px;
  padding: 7px 13px 7px 8px;
  color: #ffffff;
  text-decoration: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(105, 255, 205, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(95, 199, 223, 0.18), rgba(255, 51, 95, 0.14)),
    rgba(8, 14, 22, 0.86);
  box-shadow:
    0 0 0 0 rgba(105, 255, 205, 0.28),
    0 16px 36px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(238, 244, 248, 0.04);
  opacity: 0.88;
}
.ask-pulseai-trigger::after {
  content: none;
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.16), transparent 62%);
  transform: translateX(-68%);
  animation: ask-pulseai-button-sheen 4.8s ease-in-out infinite;
}
.ask-pulseai-trigger > span {
  position: relative;
  z-index: 1;
}
.ask-pulseai-trigger-orb {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(105, 255, 205, 0.42);
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
  background:
    radial-gradient(circle, rgba(105, 255, 205, 0.92) 0 4px, transparent 5px),
    conic-gradient(from 210deg, rgba(255, 51, 95, 0.92), rgba(95, 199, 223, 0.96), rgba(105, 255, 205, 0.92), rgba(255, 51, 95, 0.92));
  box-shadow: 0 0 22px rgba(105, 255, 205, 0.32);
  animation: none;
}
.ask-pulseai-trigger strong,
.ask-pulseai-trigger small {
  display: block;
  white-space: nowrap;
}
.ask-pulseai-trigger strong {
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ask-pulseai-trigger small {
  margin-top: 1px;
  color: var(--green);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ask-pulseai-trigger:hover,
.ask-pulseai-trigger:focus-visible {
  border-color: rgba(105, 255, 205, 0.62);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}
.account-avatar-trigger {
  justify-self: end;
  grid-column: 4;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: 54px;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  padding: 7px;
  border-color: rgba(95, 199, 223, 0.38);
  background:
    radial-gradient(circle at 50% 34%, rgba(95, 199, 223, 0.22), transparent 56%),
    linear-gradient(135deg, rgba(95, 199, 223, 0.2), rgba(255, 101, 124, 0.14)),
    rgba(8, 14, 22, 0.82);
}
.account-avatar-trigger strong,
.account-avatar-trigger small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.account-avatar-trigger .account-avatar {
  width: 38px;
  height: 38px;
}
.account-status-pill:hover,
.account-status-pill:focus-visible {
  border-color: rgba(95, 199, 223, 0.46);
  transform: translateY(-1px);
  outline: none;
}
.account-status-dot {
  position: absolute;
  right: -1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(8, 14, 22, 0.96);
  border-radius: var(--radius-pill);
  background: var(--muted);
  box-shadow: 0 0 12px rgba(147, 164, 179, 0.42);
}
.account-avatar {
  grid-row: 1 / span 2;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(95, 199, 223, 0.34);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(95, 199, 223, 0.36), rgba(255, 101, 124, 0.28)),
    rgba(8, 14, 22, 0.86);
  box-shadow: 0 0 18px rgba(95, 199, 223, 0.18);
}
.account-avatar b {
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
/* Red Diamond Pro member avatar (Option A: ruby ring + gem badge) */
.account-status-pill.is-red-diamond {
  border-color: rgba(229, 57, 90, 0.6);
  background:
    linear-gradient(135deg, rgba(229, 57, 90, 0.16), rgba(124, 11, 38, 0.1)),
    rgba(14, 8, 12, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 173, 190, 0.06),
    0 0 18px rgba(229, 57, 90, 0.2);
  animation: redDiamondCtaPulse 2.4s ease-in-out infinite;
}
.account-status-pill.is-red-diamond:hover,
.account-status-pill.is-red-diamond:focus-visible {
  border-color: rgba(255, 139, 163, 0.85);
}
.account-status-pill.is-red-diamond .account-avatar {
  border: 1.5px solid #e5395a;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.2), transparent 26%),
    radial-gradient(circle at 50% 60%, rgba(229, 57, 90, 0.35), transparent 70%),
    rgba(22, 6, 14, 0.92);
  box-shadow: 0 0 16px rgba(229, 57, 90, 0.35);
}
.account-status-pill.is-red-diamond .account-avatar b {
  color: #ffd7de;
}
.account-status-pill.is-red-diamond .account-status-dot {
  width: 15px;
  height: 15px;
  right: -3px;
  bottom: -2px;
  border: 1px solid rgba(255, 173, 190, 0.7);
  background: url("/assets/red-diamond-import-seal-small.png") center / cover no-repeat, #24060f;
  box-shadow: 0 0 10px rgba(229, 57, 90, 0.6);
  animation: redDiamondGemGlow 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.account-status-pill.is-red-diamond,
  .account-status-pill.is-red-diamond .account-status-dot {
    animation: none;
  }
}
.account-status-pill strong,
.account-status-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-status-pill strong {
  color: #ffffff;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.05;
}
.account-status-pill small {
  color: #93a4b3;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.account-status-pill[data-state="signedIn"] {
  border-color: rgba(85, 214, 165, 0.36);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.16), rgba(95, 199, 223, 0.09)),
    rgba(8, 14, 22, 0.74);
}
.account-status-pill[data-state="signedIn"] .account-status-dot {
  background: var(--green);
  box-shadow: 0 0 16px rgba(85, 214, 165, 0.68);
}
.account-status-pill[data-state="checking"] .account-status-dot {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(241, 184, 75, 0.58);
}
.account-status-menu {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 60;
  width: min(382px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 32px));
  max-height: min(680px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
  visibility: hidden;
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}
.account-status-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  visibility: visible;
}
.account-drawer-card {
  position: relative;
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: 18px;
  display: grid;
  gap: var(--space-5);
  padding: 17px;
  background:
    radial-gradient(circle at 12% 0%, rgba(95, 199, 223, 0.18), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(255, 101, 124, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(21, 37, 47, 0.98), rgba(10, 13, 24, 0.98));
  box-shadow:
    0 26px 68px rgba(0, 0, 0, 0.54),
    0 0 34px rgba(95, 199, 223, 0.12),
    inset 0 1px 0 rgba(238, 244, 248, 0.05);
  backdrop-filter: blur(16px);
}
.account-drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(238, 244, 248, 0.13);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 22, 0.68);
  color: #d8e6ee;
  font-size: var(--t-small);
  font-weight: 700;
}
.account-drawer-close::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.account-drawer-close:hover,
.account-drawer-close:focus-visible {
  border-color: rgba(95, 199, 223, 0.38);
  color: #ffffff;
  outline: none;
}
.account-drawer-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-right: var(--space-12);
}
.account-drawer-avatar {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(95, 199, 223, 0.4);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(95, 199, 223, 0.3), transparent 42%),
    linear-gradient(145deg, rgba(85, 214, 165, 0.18), rgba(255, 101, 124, 0.1)),
    rgba(8, 14, 22, 0.82);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(238, 244, 248, 0.08);
}
.account-drawer-identity {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.account-drawer-identity strong {
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.account-drawer-identity span {
  color: #aab8c4;
  font-size: var(--t-body);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.account-drawer-plan {
  border: 1px solid rgba(95, 199, 223, 0.2);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: 13px 14px;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.11), rgba(255, 101, 124, 0.07)),
    rgba(8, 14, 22, 0.52);
}
.account-drawer-plan div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.account-drawer-plan span {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-drawer-plan strong {
  color: #ffffff;
  font-size: 1.03rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.account-drawer-plan small {
  color: #aab8c4;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.35;
}
.account-drawer-plan b {
  border: 1px solid rgba(85, 214, 165, 0.28);
  border-radius: var(--radius-pill);
  padding: 6px 9px;
  background: rgba(85, 214, 165, 0.1);
  color: #c9ffec;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-drawer-action {
  display: grid;
  gap: 7px;
}
.account-drawer-primary,
.account-drawer-secondary {
  border-radius: var(--radius-xl);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.account-drawer-primary {
  border: 1px solid rgba(95, 199, 223, 0.6);
  background: linear-gradient(135deg, rgba(95, 199, 223, 0.96), rgba(85, 214, 165, 0.84));
  color: #041018;
  box-shadow: 0 12px 28px rgba(95, 199, 223, 0.18);
}
.account-drawer-primary:disabled {
  cursor: wait;
  filter: saturate(0.75);
  opacity: 0.72;
}
.account-drawer-secondary {
  border: 1px solid rgba(95, 199, 223, 0.28);
  background: rgba(8, 14, 22, 0.58);
  color: #d9f6ff;
}
.account-drawer-managed-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  background: rgba(8, 14, 22, 0.5);
  border: 1px solid rgba(147, 164, 179, 0.18);
  color: #9db4c0;
  font-size: var(--t-body);
  line-height: 1.4;
}
.account-drawer-primary:hover,
.account-drawer-primary:focus-visible,
.account-drawer-secondary:hover,
.account-drawer-secondary:focus-visible {
  filter: brightness(1.06);
  outline: none;
}
.account-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding-top: 2px;
}
.account-drawer-nav {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 14, 22, 0.36);
}
.account-drawer-row {
  border: 0;
  border-top: 1px solid rgba(147, 164, 179, 0.13);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  background: transparent;
  color: #c7d2dc;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.account-drawer-row:first-child {
  border-top: 0;
}
.account-drawer-row:hover,
.account-drawer-row:focus-visible {
  background: rgba(95, 199, 223, 0.1);
  color: #ffffff;
  outline: none;
}
.account-menu-auth-form {
  display: grid;
  gap: 9px;
}
.account-menu-auth-form label {
  display: grid;
  gap: 5px;
  color: #c9d7e0;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.account-menu-auth-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(95, 199, 223, 0.22);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(8, 14, 22, 0.72);
  color: #ffffff;
}
.account-menu-message {
  min-height: 18px;
  color: #a8bdca;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.35;
}
.account-menu-signout {
  border: 1px solid rgba(255, 101, 124, 0.34);
  border-radius: var(--radius-pill);
  min-height: 38px;
  padding: 8px 13px;
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.14), rgba(8, 14, 22, 0.76)),
    rgba(8, 14, 22, 0.82);
  color: #ffe6eb;
  font-size: var(--t-body);
  font-weight: 700;
}
.account-menu-signout:hover,
.account-menu-signout:focus-visible {
  border-color: rgba(255, 101, 124, 0.58);
  color: #ffffff;
  outline: none;
}
@media (max-width: 640px) {
.account-status-menu {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
.account-drawer-card {
    border-radius: var(--radius-2xl);
    padding: 15px;
  }
.account-drawer-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }
.account-drawer-avatar {
    width: 48px;
    height: 48px;
  }
}
.primary-action:hover,
.primary-action:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
@media (max-width: 1180px) and (min-width: 901px) {
.site-header {
    grid-template-columns: minmax(190px, 0.65fr) minmax(0, auto);
  }
.brand-logo {
    width: clamp(215px, 22vw, 270px);
    height: 82px;
  }
.site-nav {
    position: static;
    transform: none;
    justify-self: end;
  }
.site-nav a,
  .site-nav button {
    padding: 9px 12px;
    font-size: var(--t-body);
  }
.nav-cta {
    display: none;
  }
.ask-pulseai-trigger {
    padding: var(--space-3);
  }
.ask-pulseai-trigger span:not(.ask-pulseai-trigger-orb) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
.account-status-pill {
    display: none;
  }
.site-header > .account-avatar-trigger {
    display: inline-grid;
  }
}
/* The nav pill is absolutely positioned and centred on the whole header
   (left: 50%, translateX(-50%)), so it is outside the grid and nothing can
   push the brand out of its way. At seven top-level items it grew wide enough
   that its left edge crossed back over the logo -- 24px of overlap at 1280 and
   50px from 1440 up -- and because the pill has an opaque background and comes
   after the brand in the DOM, it painted straight over the wordmark.

   Clearing it by logo alone needed 335px down to 269px, which is most of the
   brand. Splitting the difference costs neither much: the logo gives back 50px
   and the nav 2px a side, and both together clear it with room at every width
   from 1181 up. Centred pill and every other nav style stay as they were. */
@media (min-width: 1101px) {
.brand-logo {
    width: clamp(240px, 21vw, 285px);
  }
.site-nav a,
  .site-nav button {
    padding: 10px 12px;
  }
}
/* The nav ran out of room when Guides made it seven top-level items.
   Between 901px -- where the drawer hands over -- and about 1000px, the
   desktop nav was still being shown while needing 630px in a 602px slot, so
   the last entries were clipped off the right edge with no scrollbar and no
   way to reach them: Help was simply gone. The band above already tightens
   the nav for 901-1180; this tightens it further only where it actually
   stops fitting, so nothing changes at the widths that were fine. */
@media (max-width: 1030px) and (min-width: 901px) {
.site-nav a,
  .site-nav button {
    padding: 9px 8px;
    font-size: var(--t-body);
  }
.site-nav {
    gap: 2px;
  }
.brand-logo {
    width: clamp(160px, 18vw, 200px);
    height: 62px;
  }
}
.inline-link {
  width: fit-content;
  border-bottom: 1px solid rgba(95, 199, 223, 0.46);
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
}
.inline-link:hover,
.inline-link:focus-visible {
  color: var(--gold);
  border-color: rgba(241, 184, 75, 0.56);
  outline: none;
}
.hero {
  padding: clamp(24px, 4vw, 42px) 0 22px;
}
.dashboard-page {
  width: min(1240px, calc(100% - 32px));
}
.dashboard-hero {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
  padding: clamp(20px, 3.6vw, 34px) 0 22px;
}
.home-hero-line {
  display: inline;
}
.dashboard-hero p:not(.eyebrow) {
  max-width: 620px;
  color: #b8c6d0;
  font-size: 0.96rem;
  line-height: 1.5;
}
.daily-pulse {
  border: 1px solid rgba(241, 184, 75, 0.46);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
  margin: 0 0 16px;
  padding: 20px 18px 18px;
  background:
    linear-gradient(180deg, rgba(241, 184, 75, 0.2) 0 1px, transparent 1px 9px, rgba(241, 184, 75, 0.08) 9px 10px, transparent 10px),
    linear-gradient(135deg, rgba(241, 184, 75, 0.18), transparent 42%),
    linear-gradient(90deg, rgba(95, 199, 223, 0.11), rgba(255, 101, 124, 0.08)),
    rgba(13, 21, 29, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 18px 45px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(241, 184, 75, 0.08);
  position: relative;
  overflow: visible;
}
.daily-pulse .eyebrow {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(241, 184, 75, 0.34);
}
.daily-pulse-kicker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
}
.daily-pulse-main p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #d8cbb1;
  line-height: 1.48;
}
.daily-pulse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  border-top: 1px solid rgba(147, 164, 179, 0.16);
  padding-top: var(--space-5);
  position: relative;
  z-index: 1;
}
.daily-pulse-subline {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #f0e6d2;
  font-size: 1rem;
  margin: 6px 0 0;
}
/* Event scoreboard strip inside Content Drop Watch */
.drop-sb-strip {
  display: flex;
  border: 1px solid rgba(242, 245, 255, 0.16);
  border-radius: 9px;
  overflow: hidden;
  background: var(--field);
}
.drop-sb-cell {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid rgba(242, 245, 255, 0.1);
  position: relative;
}
.drop-sb-cell:last-child {
  border-right: 0;
}
.drop-sb-cell span {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 245, 255, 0.55);
}
.drop-sb-cell b {
  display: block;
  font-size: var(--t-body);
  color: #f2f5ff;
  margin-top: 2px;
  font-weight: 700;
}
.drop-sb-cell.is-live {
  background: linear-gradient(120deg, #d6273a, #a11527);
}
.drop-sb-cell.is-live span {
  color: rgba(255, 255, 255, 0.8);
}
.drop-sb-cell.is-live::after {
  content: "LIVE";
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.92);
  color: #d6273a;
  border-radius: var(--radius-xs);
  padding: 1px 4px;
}
/* All-Star event takeover theme (active only while the spotlight sets data-drop-accent) */
.daily-pulse[data-drop-accent="all-star"] {
  border-color: rgba(214, 39, 58, 0.5);
  background: radial-gradient(120% 150% at 8% -20%, #17264e 0%, #101c3d 42%, var(--field) 100%);
  position: relative;
  overflow: hidden;
}
.daily-pulse[data-drop-accent="all-star"] .daily-pulse-kicker .eyebrow {
  color: #ff4d5e;
}
.daily-pulse[data-drop-accent="all-star"] .daily-pulse-subline {
  margin-top: var(--space-5);
}
/* Event mode is graphic-first: hide the standard intro paragraph */
.daily-pulse[data-drop-accent="all-star"] .content-drop-watch {
  background: transparent;
  border: 0;
  padding: 0;
}
.daily-pulse[data-drop-accent="all-star"] .daily-pulse-actions {
  border-top-color: rgba(242, 245, 255, 0.16);
}
.daily-pulse[data-drop-accent="all-star"] .pulse-action span {
  color: #ff4d5e;
}
/* Live badge next to the eyebrow */
.dp-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: var(--space-4);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--t-micro);
  color: #fff;
  background: rgba(229, 35, 59, 0.3);
  border: 1px solid rgba(255, 61, 82, 0.55);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
@keyframes dp-live-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 82, 0.65); }
  70% { box-shadow: 0 0 0 9px rgba(255, 61, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 61, 82, 0); }
}
/* Content pills + up-next line */
.dp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--space-6);
}
.dp-pills span,
.dp-pills a {
  font-size: var(--t-small);
  font-weight: 600;
  color: #dbe6ff;
  border: 1px solid rgba(242, 245, 255, 0.22);
  background: rgba(10, 16, 36, 0.55);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  text-decoration: none;
}
.dp-pills a:hover,
.dp-pills a:focus-visible {
  border-color: var(--cyan-ink);
  color: #ffffff;
  outline: none;
}
.dp-pills span.is-hot,
.dp-pills a.is-hot {
  border-color: #ffd15c;
  color: #ffd15c;
}
.dp-pills a.is-hot:hover,
.dp-pills a.is-hot:focus-visible {
  color: #ffe9ac;
  border-color: #ffe9ac;
}
/* "New drops" launch tiles — event programs deep-linking into Program Planner */
.dp-drops-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 18px 0 12px;
}
.dp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.dp-tile {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  background: linear-gradient(120deg, rgba(10, 18, 40, 0.85), rgba(8, 13, 30, 0.92));
  border: 1px solid rgba(127, 216, 255, 0.28);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.dp-tile:hover,
.dp-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cyan-ink);
  outline: none;
}
.dp-tile-badge {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #14335c, #0b1c38);
  border: 1px solid rgba(127, 216, 255, 0.35);
}
.dp-tile.is-hot {
  border-color: rgba(255, 209, 92, 0.55);
}
.dp-tile.is-hot .dp-tile-badge {
  border-color: rgba(255, 209, 92, 0.55);
}
.dp-tile-tx span {
  display: block;
  margin-top: 3px;
  color: #8fa3cf;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-tile-new {
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #e5233b;
  color: #fff;
  border-radius: var(--radius-s);
  padding: 3px 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.daily-pulse-main .dp-splash-body .dp-upnext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 24px 0 0;
  font-size: var(--t-body);
  color: #aebadb;
}
.dp-upnext > span {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7ea0d8;
}
/* Starfield canvas */
/* Floating real card art, edge-faded into the panel */
.dp-card {
  position: absolute;
  width: 150px;
  margin: 0;
}
.dp-card-flag {
  position: absolute;
  top: 8px;
  left: -6px;
  z-index: 2;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14060a;
  background: linear-gradient(180deg, #ffd15c, #ffb43d);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dp-card-1 { right: 22%; top: 6%; transform: rotate(7deg); animation: dp-float-a 6s ease-in-out infinite; z-index: 3; }
.dp-card-2 { right: 40%; top: 33%; transform: rotate(-7deg); animation: dp-float-b 7s ease-in-out infinite; z-index: 2; opacity: 0.97; }
.dp-card-3 { right: 2%; top: 40%; transform: rotate(-11deg) scale(0.9); animation: dp-float-c 8s ease-in-out infinite; z-index: 1; opacity: 0.88; }
@keyframes dp-float-a { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-12px); } }
@keyframes dp-float-b { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(10px); } }
@keyframes dp-float-c { 0%, 100% { transform: rotate(-12deg) scale(0.85) translateY(0); } 50% { transform: rotate(-12deg) scale(0.85) translateY(-9px); } }
@media (max-width: 760px) {
.dp-cardstack { display: none; }
}
.ask-pulseai-preview {
  position: relative;
  overflow: hidden;
  margin: 18px 0 18px;
  border: 1px solid rgba(105, 255, 205, 0.24);
  border-radius: var(--radius-2xl);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.55fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 78% 20%, rgba(105, 255, 205, 0.24), transparent 28%),
    radial-gradient(circle at 10% 95%, rgba(255, 51, 95, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(3, 23, 30, 0.96), rgba(8, 11, 22, 0.96));
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ask-pulseai-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(95, 199, 223, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 199, 223, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent 82%);
}
.ask-pulseai-copy,
.ask-pulseai-card {
  position: relative;
  z-index: 1;
}
.ask-pulseai-copy h2 {
  max-width: 640px;
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.ask-pulseai-copy p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: #d7e7f2;
  font-size: 1rem;
  line-height: 1.45;
}
.ask-pulseai-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--space-8);
}
.ask-pulseai-prompts span,
.ask-pulseai-status {
  border: 1px solid rgba(95, 199, 223, 0.3);
  border-radius: var(--radius-pill);
  padding: 8px 11px;
  background: rgba(4, 19, 30, 0.68);
  color: #eaf4f8;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ask-pulseai-card {
  min-height: 0;
  border: 1px solid rgba(95, 199, 223, 0.36);
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 14px 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(95, 199, 223, 0.28), transparent 28%),
    linear-gradient(160deg, rgba(4, 33, 43, 0.92), rgba(8, 12, 22, 0.94));
  box-shadow: inset 0 0 46px rgba(95, 199, 223, 0.11), 0 20px 42px rgba(0, 0, 0, 0.34);
}
.ask-pulseai-orbit {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(105, 255, 205, 0.38);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle, rgba(105, 255, 205, 0.9) 0 7px, transparent 8px),
    conic-gradient(from 210deg, rgba(255, 51, 95, 0.9), rgba(95, 199, 223, 0.95), rgba(105, 255, 205, 0.92), rgba(255, 51, 95, 0.9));
  box-shadow: 0 0 34px rgba(105, 255, 205, 0.32);
  animation: pulseai-orbit 7s linear infinite;
}
.ask-pulseai-card strong {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ask-pulseai-card em {
  color: var(--green);
  margin-top: 3px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ask-pulseai-card p {
  max-width: 280px;
  margin: 3px 0 2px;
  color: #b8c6d0;
  line-height: 1.35;
}
.ask-pulseai-status {
  border-color: rgba(255, 205, 92, 0.36);
  color: #ffcd5c;
  margin-top: 3px;
}
@keyframes pulseai-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ask-pulseai-button-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(105, 255, 205, 0.28),
      0 16px 36px rgba(0, 0, 0, 0.2),
      inset 0 0 0 1px rgba(238, 244, 248, 0.04);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(105, 255, 205, 0),
      0 18px 40px rgba(0, 0, 0, 0.24),
      0 0 24px rgba(105, 255, 205, 0.18),
      inset 0 0 0 1px rgba(238, 244, 248, 0.06);
  }
}
@keyframes ask-pulseai-button-sheen {
  0%,
  68% {
    transform: translateX(-68%);
  }
  86%,
  100% {
    transform: translateX(68%);
  }
}
.live-data-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.live-feed {
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(2, 8, 14, 0.72);
  color: #b9cad6;
  font-size: var(--t-small);
  font-weight: 600;
}
.live-feed b {
  color: var(--neon-teal-ink);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.live-feed.fallback {
  border-color: rgba(255, 101, 124, 0.28);
}
.live-feed.fallback b {
  color: #ff657c;
}
.live-feed.on-demand b {
  color: var(--neon-gold);
}
.content-drop-watch {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
}
.content-drop-watch.is-major-drop {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.content-drop-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
}
.content-drop-head span,
.drop-action-line span,
.drop-source-line span {
  color: var(--neon-gold);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.content-drop-head strong {
  color: #ffffff;
  font-size: 1rem;
}
.drop-day-command {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
}
.drop-command-copy,
.drop-detail-line,
.drop-schedule-line,
.drop-action-line,
.drop-source-line,
.drop-source-note {
  margin: 0;
}
.drop-command-copy {
  color: #f4fbff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.drop-command-row {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
  padding: 0;
}
.drop-command-row:first-of-type {
  border-top-color: rgba(255, 190, 58, 0.18);
}
.drop-command-row-body {
  padding: 0 0 11px;
}
.drop-schedule-line {
  color: #e8f5fb;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.5;
}
.drop-schedule-line span {
  color: var(--neon-gold);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.drop-action-line {
  color: #dbe8f0;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.45;
}
.drop-source-note,
.drop-source-line {
  color: #9fb0bc;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
}
.content-drop-warning {
  position: relative;
  z-index: 1;
  margin: 0;
  border: 1px solid rgba(255, 190, 58, 0.2);
  border-radius: var(--radius-l);
  padding: 8px 10px;
  color: #ffd98a;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
  background: rgba(255, 190, 58, 0.08);
}
.content-drop-warning.is-outage {
  border-color: rgba(255, 51, 95, 0.28);
  color: #ffc2cf;
  background:
    radial-gradient(circle at 0 0, rgba(255, 51, 95, 0.12), transparent 40%),
    rgba(255, 51, 95, 0.06);
}
@keyframes drop-day-border-scan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.pulse-action {
  border: 0;
  display: grid;
  gap: 1px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
.pulse-action:hover strong,
.pulse-action:focus-visible strong {
  color: var(--teal, var(--cyan));
}
.pulse-action:focus-visible {
  outline: 2px solid rgba(95, 199, 223, 0.7);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
.pulse-action span {
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pulse-action strong {
  color: #ffffff;
  font-size: var(--t-body);
  line-height: 1.2;
}
.pulse-action strong::after {
  content: " \2192";
  color: var(--teal, var(--cyan));
  font-weight: 700;
}
.app-launcher {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: var(--space-6);
}
.launcher-card {
  min-height: 250px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-9);
  background:
    linear-gradient(135deg, rgba(126, 182, 255, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.88);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.launcher-card.featured {
  border-color: rgba(85, 214, 165, 0.3);
  background:
    radial-gradient(circle at 82% 0%, rgba(85, 214, 165, 0.16), transparent 35%),
    rgba(15, 24, 33, 0.92);
}
.launcher-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
}
.launcher-card:nth-child(2n)::after {
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--red));
}
.launcher-card:nth-child(3n)::after {
  background: linear-gradient(90deg, var(--gold), var(--red), var(--green));
}
.launcher-card:nth-child(4n) {
  border-color: rgba(241, 184, 75, 0.24);
  background:
    radial-gradient(circle at 82% 0%, rgba(241, 184, 75, 0.13), transparent 35%),
    rgba(15, 24, 33, 0.9);
}
.launcher-card:hover,
.launcher-card:focus-visible {
  border-color: rgba(95, 199, 223, 0.5);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}
.launcher-card span,
.dashboard-grid .eyebrow {
  width: fit-content;
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.launcher-card h2,
.dashboard-grid h2 {
  margin: 0;
  font-size: var(--t-title);
  line-height: 1.08;
}
.launcher-card p,
.dashboard-grid p,
.dashboard-grid li {
  color: #b8c6d0;
  line-height: 1.45;
}
.launcher-card strong {
  margin-top: auto;
  color: var(--green);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.dashboard-grid article {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.82);
}
.dashboard-grid article:nth-child(2) {
  border-color: rgba(241, 184, 75, 0.2);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.82);
}
.dashboard-grid ul {
  margin: 12px 0 0;
  padding-left: var(--space-9);
}
.release-details {
  margin-top: var(--space-5);
  font-size: 1rem;
}
.release-details > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--green);
  font-weight: 700;
}
.release-details > summary:hover,
.release-details > summary:focus-visible {
  color: #ffffff;
  outline: none;
}
.version-history {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.version-release {
  overflow: hidden;
  border: 1px solid rgba(101, 217, 255, 0.16);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(6, 30, 42, 0.78), rgba(8, 13, 24, 0.88));
}
.version-release summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: auto;
  padding: 10px 12px;
  cursor: pointer;
  color: #edf7fb;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.version-release summary:hover,
.version-release summary:focus-visible {
  color: #ffffff;
  outline: none;
}
.version-release summary span {
  flex: 0 0 auto;
  border: 1px solid rgba(105, 255, 205, 0.26);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  color: var(--green);
  background: rgba(28, 255, 199, 0.08);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.version-release summary strong {
  font-size: 1rem;
}
.version-release ul {
  margin: 0;
  padding: 0 14px 12px 32px;
}
.version-release li {
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.35;
}
.version-release li + li {
  margin-top: var(--space-2);
}
.hero-copy {
  max-width: 980px;
  padding: 0;
}
.eyebrow {
  margin: 0;
  color: var(--cyan-ink);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(95, 199, 223, 0.28);
}
h1,
h2,
p {
  margin-top: 0;
}
h1 {
  max-width: 780px;
  margin: 8px 0 14px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: 0;
}
.lede {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #b2c0cc;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: 22px;
}
.secondary-action {
  border: 1px solid rgba(147, 164, 179, 0.22);
  background: rgba(13, 21, 29, 0.62);
  padding: 10px 13px;
  min-height: 44px;
}
.quick-start {
  margin: -2px 0 18px;
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 0.85fr repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(147, 164, 179, 0.12);
}
.quick-start > div,
.quick-start > a {
  min-width: 0;
  padding: var(--space-6);
  background: rgba(12, 20, 28, 0.92);
}
.quick-start > div {
  display: grid;
  align-content: center;
  gap: var(--space-1);
}
.quick-start > a {
  color: var(--ink);
  text-decoration: none;
  display: grid;
  gap: 7px;
}
.quick-start > a:hover,
.quick-start > a:focus-visible {
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.14), rgba(85, 214, 165, 0.08)),
    rgba(12, 20, 28, 0.98);
  outline: none;
}
.quick-start span,
.quick-start small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
}
.quick-start strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.2;
}
.quick-start em {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(95, 199, 223, 0.34);
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  background: rgba(95, 199, 223, 0.12);
  color: var(--cyan);
  font-style: normal;
  font-weight: 700;
}
.status-action,
.status-link {
  margin-top: var(--space-4);
  border: 1px solid rgba(95, 199, 223, 0.32);
  border-radius: 7px;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  background: rgba(95, 199, 223, 0.12);
  color: var(--ink);
  padding: 9px 12px;
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
}
.status-action:hover,
.status-action:focus-visible,
.status-link:hover,
.status-link:focus-visible {
  border-color: rgba(85, 214, 165, 0.5);
  background: rgba(85, 214, 165, 0.14);
  outline: none;
}
.section-rail {
  position: sticky;
  top: 8px;
  z-index: 12;
  margin: -6px auto 14px;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  padding: var(--space-2);
  background: rgba(8, 14, 22, 0.86);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}
.section-rail-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.8;
}
.section-rail a:hover,
.section-rail a:focus-visible,
.section-rail a.is-active {
  background: rgba(95, 199, 223, 0.12);
  color: var(--ink);
  outline: none;
}
.market-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 600;
}
.market-inline .pulse-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(95, 199, 223, 0.8);
}
.market-divider {
  color: rgba(147, 164, 179, 0.48);
}
.market-inline strong {
  color: var(--ink);
  font-weight: 700;
}
.advisor-status-strip {
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(3, 9, 15, 0.74) 48%, rgba(255, 45, 75, 0.055)),
    rgba(3, 9, 15, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 36px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 8px 0 12px;
  padding: 12px 14px;
}
.advisor-status-strip .market-inline {
  margin: 0;
}
.workspace {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
.workspace:has(.prototype-advisor) {
  gap: var(--space-7);
}
.workspace:has(.prototype-advisor) .results {
  order: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.controls,
.results,
.matches {
  border: 1px solid rgba(50, 183, 218, 0.22);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.05), transparent 48%),
    rgba(3, 9, 15, 0.94);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  border-radius: var(--radius-l);
}
.results {
  position: relative;
  z-index: 1;
  border-color: rgba(50, 183, 218, 0.26);
  background:
    radial-gradient(circle at 14% -18%, rgba(0, 229, 255, 0.18), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(20, 235, 176, 0.13), transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(255, 45, 75, 0.08), transparent 28%),
    linear-gradient(145deg, #02070c 0%, #06111a 54%, #03080f 100%);
}
.matches {
  border-color: rgba(241, 184, 75, 0.18);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.07), transparent 48%),
    rgba(18, 27, 36, 0.88);
}
.controls {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
}
.advisor-setup {
  position: relative;
  z-index: 160;
  overflow: visible;
  border-color: rgba(0, 229, 255, 0.38);
  padding: var(--space-8);
  background:
    radial-gradient(circle at 7% -35%, rgba(0, 229, 255, 0.36), transparent 32%),
    radial-gradient(circle at 64% -34%, rgba(20, 235, 176, 0.26), transparent 24%),
    radial-gradient(circle at 98% 100%, rgba(255, 45, 75, 0.16), transparent 30%),
    linear-gradient(145deg, #02070c 0%, #07121b 48%, #02070c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(20, 235, 176, 0.14),
    0 0 0 1px rgba(20, 235, 176, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.58),
    0 0 48px rgba(0, 229, 255, 0.18);
}
.setup-main {
  display: grid;
  grid-template-columns: minmax(320px, 1.55fr) minmax(150px, 0.56fr) minmax(82px, 0.28fr) minmax(168px, 0.6fr) minmax(205px, auto);
  gap: var(--space-5);
  align-items: end;
}
.setup-kicker {
  margin: 0 0 -2px;
  color: #9fb0be;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.setup-search {
  min-width: 0;
  position: relative;
}
.advisor-setup input,
.advisor-setup select {
  min-height: 50px;
  border-color: rgba(50, 183, 218, 0.2);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #030a11;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(0, 229, 255, 0.015);
}
.advisor-setup input:focus,
.advisor-setup select:focus {
  border-color: rgba(20, 235, 176, 0.74);
  box-shadow:
    0 0 0 3px rgba(20, 235, 176, 0.16),
    0 0 22px rgba(20, 235, 176, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.advisor-setup .field-label {
  color: #c7d8e4;
  font-size: var(--t-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.recommend-button {
  min-height: 62px;
  border: 1px solid rgba(140, 255, 201, 0.9);
  border-radius: var(--radius-l);
  padding: 13px 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(135deg, #96ffd0 0%, var(--neon-teal) 46%, var(--neon-cyan) 100%);
  color: #02100c;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 0 42px rgba(20, 235, 176, 0.48),
    0 0 18px rgba(0, 229, 255, 0.26),
    0 18px 38px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  white-space: nowrap;
}
.recommend-button:hover,
.recommend-button:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  outline: none;
}
.advanced-controls {
  border-top: 1px solid rgba(0, 229, 255, 0.12);
  padding-top: var(--space-5);
}
.advanced-controls summary {
  width: fit-content;
  border: 1px solid rgba(50, 183, 218, 0.28);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: #d7e4ed;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 45, 75, 0.09)),
    #030a11;
  cursor: pointer;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.advanced-controls summary::marker {
  color: var(--gold);
}
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid rgba(50, 183, 218, 0.12);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.06), transparent 36%),
    rgba(2, 7, 13, 0.62);
}
.advanced-grid .checks {
  grid-column: span 2;
}
label {
  display: grid;
  gap: 7px;
  color: #c4d0da;
  font-size: var(--t-body);
  font-weight: 600;
}
.field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.tip {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid rgba(95, 199, 223, 0.4);
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  background: rgba(95, 199, 223, 0.12);
  color: var(--cyan);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1;
  position: relative;
  outline: none;
  z-index: 4;
}
.tip::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.tip:hover,
.tip:focus,
.tip:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(241, 184, 75, 0.14);
}
.tip::after {
  content: attr(data-tip);
  width: min(260px, calc(100vw - 36px));
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  border: 1px solid rgba(126, 182, 255, 0.22);
  border-radius: 7px;
  background: var(--field);
  color: #d7e4ed;
  padding: 9px 10px;
  box-shadow: var(--shadow);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}
.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--field);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.tip:hover::after,
.tip:focus::after,
.tip:focus-visible::after,
.tip:hover::before,
.tip:focus::before,
.tip:focus-visible::before {
  opacity: 1;
}
.tip:hover::after,
.tip:focus::after,
.tip:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
.tip.no-pseudo::before,
.tip.no-pseudo::after {
  display: none;
}
.tip-details {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.tip-details > summary {
  list-style: none;
}
.tip-details > summary::-webkit-details-marker {
  display: none;
}
.tip-wrap {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.tip-popover {
  width: min(300px, calc(100vw - 36px));
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  border: 1px solid rgba(126, 182, 255, 0.22);
  border-radius: 7px;
  background: var(--field);
  color: #d7e4ed;
  padding: 9px 10px;
  box-shadow: var(--shadow);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
  z-index: 30;
}
.tip-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--field);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 31;
}
.tip-wrap:hover .tip-popover,
.tip-wrap:focus-within .tip-popover,
.tip-wrap.is-open .tip-popover,
.tip:focus + .tip-popover,
.tip:focus-visible + .tip-popover,
.tip-details[open] .tip-popover,
.tip-wrap:hover::before,
.tip-wrap:focus-within::before,
.tip-wrap.is-open::before {
  opacity: 1;
}
.tip-wrap:hover .tip-popover,
.tip-wrap:focus-within .tip-popover,
.tip-wrap.is-open .tip-popover,
.tip:focus + .tip-popover,
.tip:focus-visible + .tip-popover,
.tip-details[open] .tip-popover {
  transform: translateX(-50%) translateY(0);
}
.daily-pulse .tip-wrap.is-open .tip-popover {
  transform: translateX(-50%) translateY(0);
}
.passive-tip {
  margin-left: var(--space-1);
  vertical-align: 1px;
}
.page-result-metric small .tip {
  justify-self: end;
}
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}
input:focus,
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(95, 199, 223, 0.18);
}
.search-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: var(--space-3);
}
.search-row button {
  border: 0;
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.34), transparent 22%),
    linear-gradient(135deg, #96ffd0, var(--neon-teal) 54%, var(--neon-cyan));
  color: #06120f;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow:
    0 0 28px rgba(20, 235, 176, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.quick-card-picker {
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(330px, 48vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(95, 199, 223, 0.2);
  border-radius: var(--radius-l);
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(9, 15, 22, 0.98), rgba(6, 10, 15, 0.96)),
    rgba(10, 13, 18, 0.98);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.quick-card-picker[hidden] {
  display: none;
}
.quick-card-option {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 6px 8px;
  background: transparent;
  color: #edf7ff;
  text-align: left;
  cursor: pointer;
}
.quick-card-option:hover,
.quick-card-option:focus-visible,
.quick-card-option.is-selected {
  border-color: rgba(95, 199, 223, 0.22);
  background: rgba(95, 199, 223, 0.055);
  outline: none;
}
.quick-card-option.is-selected {
  box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.58);
}
.quick-card-art {
  width: 34px;
  height: 44px;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: 5px;
  background:
    radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(145deg, rgba(13, 25, 34, 0.98), rgba(3, 8, 13, 0.98));
  color: #f7fbff;
  box-shadow:
    0 0 18px rgba(0, 229, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.quick-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.quick-card-art-fallback {
  display: none;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1;
}
.quick-card-art.image-missing .quick-card-art-fallback {
  display: grid;
  place-items: center;
}
.quick-card-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.quick-card-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-body);
  line-height: 1.15;
}
.quick-card-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8fa2b7;
  font-size: var(--t-micro);
  font-weight: 600;
}
.quick-card-position {
  color: #dff4ff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.quick-card-empty {
  border: 1px dashed rgba(147, 164, 179, 0.22);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  color: #a9b9c7;
  font-size: var(--t-body);
  font-weight: 600;
}
.search-assist {
  min-height: 20px;
  color: #9eb0bd;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.35;
}
.data-health {
  border: 1px solid rgba(50, 183, 218, 0.18);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background:
    radial-gradient(circle at 0 0, rgba(0, 229, 255, 0.18), transparent 40%),
    linear-gradient(135deg, rgba(20, 235, 176, 0.06), transparent 42%),
    rgba(2, 7, 13, 0.66);
}
.data-health .pulse-dot {
  width: 9px;
  height: 9px;
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--neon-cyan);
  box-shadow:
    0 0 18px rgba(0, 229, 255, 0.82),
    0 0 10px rgba(20, 235, 176, 0.4);
}
.data-health.is-warning {
  border-color: rgba(241, 184, 75, 0.34);
  background:
    radial-gradient(circle at 0 0, rgba(241, 184, 75, 0.14), transparent 42%),
    rgba(8, 14, 22, 0.58);
}
.data-health.is-warning .pulse-dot {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(241, 184, 75, 0.72);
}
.data-health.is-outage {
  border-color: rgba(255, 51, 95, 0.38);
  background:
    radial-gradient(circle at 0 0, rgba(255, 51, 95, 0.16), transparent 42%),
    rgba(8, 14, 22, 0.64);
}
.data-health.is-outage .pulse-dot {
  background: #ff335f;
  box-shadow:
    0 0 18px rgba(255, 51, 95, 0.86),
    0 0 8px rgba(255, 145, 174, 0.38);
  animation: outage-status-pulse 1.7s ease-in-out infinite;
}
.data-health strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-body);
}
.data-health p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.36;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.checks {
  display: grid;
  gap: var(--space-4);
  padding-top: 2px;
}
.checks label {
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 9px;
  font-weight: 700;
}
.checks input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}
.results {
  min-height: 0;
  padding: var(--space-7);
  overflow: hidden;
}
.selected-card {
  display: grid;
  grid-template-columns: minmax(200px, 255px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  min-height: 0;
  border-bottom: 1px solid rgba(147, 164, 179, 0.16);
  padding-bottom: var(--space-8);
}
@keyframes selected-card-reveal {
  0% {
    outline: 2px solid rgba(85, 214, 165, 0.75);
    outline-offset: 8px;
    filter: drop-shadow(0 0 22px rgba(85, 214, 165, 0.2));
  }
  100% {
    outline: 2px solid rgba(85, 214, 165, 0);
    outline-offset: 0;
    filter: drop-shadow(0 0 0 rgba(85, 214, 165, 0));
  }
}
.selected-card:has(.empty-advisor) {
  grid-template-columns: 1fr;
  border-bottom: 0;
  padding-bottom: 0;
}
.selected-card .empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
.empty-advisor {
  grid-column: 1 / -1;
  min-height: 236px;
  border: 1px solid rgba(50, 183, 218, 0.22);
  border-radius: var(--radius-l);
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  align-content: center;
  gap: var(--space-5);
  background:
    radial-gradient(circle at 10% -8%, rgba(0, 229, 255, 0.22), transparent 32%),
    radial-gradient(circle at 82% 6%, rgba(20, 235, 176, 0.12), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(255, 45, 75, 0.09), transparent 30%),
    linear-gradient(145deg, rgba(2, 7, 12, 0.94), rgba(7, 17, 26, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 40px rgba(0, 0, 0, 0.32);
}
.prototype-advisor {
  min-height: 600px;
  grid-template-columns: minmax(460px, 0.9fr) minmax(560px, 1.1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(24px, 3.2vw, 42px);
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 72% 38%, rgba(0, 229, 255, 0.22), transparent 26%),
    radial-gradient(circle at 88% 20%, rgba(255, 45, 75, 0.15), transparent 22%),
    radial-gradient(circle at 43% 62%, rgba(20, 235, 176, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(1, 8, 15, 0.99), rgba(2, 10, 18, 0.95) 48%, rgba(3, 13, 23, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 229, 255, 0.12),
    0 0 0 1px rgba(0, 229, 255, 0.08),
    0 34px 90px rgba(0, 0, 0, 0.5);
}
.prototype-advisor::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background:
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 7, 12, 0.92)),
    repeating-linear-gradient(90deg, rgba(95, 199, 223, 0.06) 0 1px, transparent 1px 78px);
  opacity: 0.72;
  pointer-events: none;
}
.prototype-advisor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.08), transparent 24%, transparent 72%, rgba(255, 45, 75, 0.05)),
    radial-gradient(circle at 15% 88%, rgba(20, 235, 176, 0.08), transparent 28%);
  pointer-events: none;
}
.prototype-copy,
.prototype-card-row,
.prototype-stat-strip {
  position: relative;
  z-index: 1;
}
.prototype-copy {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}
.prototype-kicker {
  margin: 0;
  color: #1ee9ff;
  font-size: clamp(0.9rem, 1vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.48);
}
.empty-advisor h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  line-height: 0.98;
}
.prototype-advisor h2 {
  max-width: 660px;
  font-size: clamp(3rem, 3.85vw, 4.95rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.08);
}
.empty-advisor h2::first-line {
  color: #ffffff;
}
.call-play {
  color: var(--neon-pink);
  text-shadow:
    0 0 18px rgba(255, 45, 75, 0.26),
    0 0 8px rgba(255, 45, 75, 0.18);
}
.prototype-advisor .call-play {
  color: var(--neon-pink);
  background: linear-gradient(90deg, var(--neon-pink), #ff6fa3 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.empty-advisor p:not(.final-label) {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.45;
}
.prototype-copy > p:not(.prototype-kicker) {
  max-width: 620px;
  color: #b7c6d4;
  font-size: clamp(1rem, 1.08vw, 1.22rem);
  line-height: 1.45;
}
.prototype-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: clamp(6px, 1.1vw, 14px);
  max-width: 610px;
}
.prototype-benefits article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-right: var(--space-5);
  border-right: 1px solid rgba(147, 164, 179, 0.28);
}
.prototype-benefits article:last-child {
  border-right: 0;
}
.prototype-benefit-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.16rem;
  font-weight: 700;
  background: rgba(0, 229, 255, 0.08);
  color: #36efff;
  text-shadow: 0 0 22px currentColor;
}
.benefit-context .prototype-benefit-icon {
  background: rgba(255, 190, 58, 0.08);
  color: var(--neon-gold);
}
.benefit-action .prototype-benefit-icon {
  background: rgba(255, 45, 75, 0.08);
  color: #ff405d;
}
.prototype-benefits strong,
.prototype-benefits small {
  display: block;
}
.prototype-benefits strong {
  color: #f7fbff;
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}
.prototype-benefits small {
  margin-top: 5px;
  color: #a7b5c3;
  font-size: var(--t-small);
  line-height: 1.28;
}
.empty-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-1);
}
.empty-sample-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  background: rgba(15, 24, 33, 0.8);
  color: var(--ink);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px 10px;
  text-align: left;
}
.empty-sample-card:hover,
.empty-sample-card:focus-visible {
  border-color: rgba(95, 199, 223, 0.54);
  outline: none;
}
.empty-sample-card span {
  grid-row: span 2;
  width: 46px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  background: #101922;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  font-weight: 700;
}
.empty-sample-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.empty-sample-card strong,
.empty-sample-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empty-sample-card strong {
  align-self: end;
  white-space: nowrap;
}
.empty-sample-card small {
  color: var(--muted);
  font-size: var(--t-small);
}
.prototype-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 22px);
  align-items: end;
  padding-top: 0;
}
.prototype-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(3, 18, 31, 0.92), rgba(4, 11, 19, 0.96)),
    radial-gradient(circle at 50% 8%, rgba(0, 229, 255, 0.16), transparent 34%);
  color: #f6fbff;
  padding: 12px 14px 14px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--space-4);
  text-align: left;
  position: relative;
  cursor: pointer;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(0, 229, 255, 0.12);
}
.prototype-card:hover,
.prototype-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.78);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.5),
    0 0 52px rgba(0, 229, 255, 0.22);
}
.prototype-card.alt {
  border-color: rgba(20, 235, 176, 0.24);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(20, 235, 176, 0.1);
}
.prototype-card.budget {
  border-color: rgba(255, 45, 75, 0.24);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 45, 75, 0.1);
}
.prototype-tag {
  position: static;
  justify-self: center;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 229, 255, 0.58);
  border-radius: var(--radius-pill);
  background: rgba(0, 229, 255, 0.1);
  color: #1ee9ff;
  font-size: clamp(0.6875rem, 0.72vw, 0.76rem);
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.1), 0 0 24px rgba(0, 229, 255, 0.16);
  white-space: nowrap;
  text-align: center;
}
.prototype-card.alt .prototype-tag {
  border-color: rgba(20, 235, 176, 0.52);
  background: rgba(20, 235, 176, 0.08);
  color: #40f0b6;
  box-shadow: inset 0 0 18px rgba(20, 235, 176, 0.1), 0 0 24px rgba(20, 235, 176, 0.14);
}
.prototype-card.budget .prototype-tag {
  border-color: rgba(255, 45, 75, 0.52);
  background: rgba(255, 45, 75, 0.08);
  color: #ff5c70;
  box-shadow: inset 0 0 18px rgba(255, 45, 75, 0.1), 0 0 24px rgba(255, 45, 75, 0.14);
}
.prototype-card-art {
  margin-top: 0;
  width: min(100%, 198px);
  justify-self: center;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-m);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(0, 229, 255, 0.36), transparent 32%),
    linear-gradient(155deg, #071a2b, #0c3041 52%, #06101b);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(0, 229, 255, 0.14);
}
.prototype-card.alt .prototype-card-art {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 190, 58, 0.26), transparent 32%),
    linear-gradient(155deg, #171203, #30260b 52%, #06101b);
}
.prototype-card.budget .prototype-card-art {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 45, 75, 0.28), transparent 32%),
    linear-gradient(155deg, #1c0710, #3b1021 52%, #06101b);
}
.prototype-card-fallback {
  font-size: 4rem;
  font-weight: 700;
  color: #f6fbff;
}
.prototype-card-body {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  align-self: end;
}
.prototype-card-body span,
.prototype-card-body strong,
.prototype-card-body small,
.prototype-detail {
  display: block;
}
.prototype-card-body strong {
  color: var(--neon-teal-ink);
  font-size: clamp(1.25rem, 1.15vw, 1.5rem);
  line-height: 1;
  text-align: center;
}
.prototype-card-body small,
.prototype-series {
  margin-top: var(--space-2);
  color: #95a7b6;
  font-size: var(--t-body);
  text-align: center;
}
.prototype-detail {
  margin-top: 2px;
  padding: 10px 14px;
  border: 1px solid rgba(147, 164, 179, 0.2);
  border-radius: var(--radius-l);
  color: #f7fbff;
  font-weight: 700;
  text-align: center;
  background: rgba(8, 14, 24, 0.72);
  align-self: end;
  width: min(100%, 176px);
  justify-self: center;
}
.prototype-detail span {
  display: inline;
  margin-left: var(--space-5);
  font-size: 1.4rem;
  line-height: 0;
}
.prototype-stat-strip {
  grid-column: 1 / -1;
  margin: clamp(14px, 2vw, 26px) calc(clamp(28px, 4.2vw, 56px) * -1) calc(clamp(28px, 4.2vw, 56px) * -1);
  padding: clamp(22px, 2.6vw, 34px) clamp(28px, 4.2vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 229, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.08), transparent 35%, rgba(255, 45, 75, 0.045)),
    rgba(2, 10, 18, 0.84);
}
.prototype-stat-strip article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: 8px clamp(18px, 2vw, 34px);
  border-right: 1px solid rgba(147, 164, 179, 0.18);
}
.prototype-stat-strip article:first-child {
  padding-left: 0;
}
.prototype-stat-strip article:last-child {
  border-right: 0;
  padding-right: 0;
}
.prototype-stat-icon {
  color: #1ee9ff;
  font-size: 2.65rem;
  font-weight: 700;
  text-shadow: 0 0 28px currentColor;
}
.stat-community .prototype-stat-icon {
  color: var(--neon-gold);
}
.stat-success .prototype-stat-icon {
  color: #ff405d;
}
.stat-years .prototype-stat-icon {
  color: #b15cff;
}
.prototype-stat-strip strong,
.prototype-stat-strip p,
.prototype-stat-strip small {
  display: block;
}
.prototype-stat-strip strong {
  color: #d9e6f0;
  font-size: 0.98rem;
}
.prototype-stat-strip p {
  margin: 8px 0 0;
  color: #f7fbff;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.prototype-stat-strip small {
  margin-top: var(--space-2);
  color: #9fb0bf;
}
.prototype-stat-strip small span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: var(--space-3);
  border-radius: 50%;
  background: #1ee9ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.8);
}
.card-showcase {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}
.card-art {
  width: min(100%, 228px);
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 22%, rgba(95, 199, 223, 0.22), transparent 30%),
    linear-gradient(155deg, #172330, #25635b 52%, #8f6721);
  color: #f4fbff;
  font-size: 2.4rem;
  font-weight: 700;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42), 0 0 46px rgba(95, 199, 223, 0.08);
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  font-size: 0;
}
.card-art.image-missing::after {
  content: attr(data-fallback);
  width: 76px;
  height: 76px;
  border: 1px solid rgba(241, 184, 75, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(7, 13, 19, 0.46);
  color: var(--gold);
  font-size: 2rem;
  font-weight: 700;
}
.card-action-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.card-action-grid button {
  min-height: 40px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: 7px;
  background: #1a2634;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-body);
}
.card-action-grid button:hover,
.card-action-grid button:focus-visible {
  border-color: rgba(95, 199, 223, 0.48);
  background: rgba(95, 199, 223, 0.16);
  outline: none;
}
.sellability-stamp {
  color: var(--green);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}
.sellability-stamp.locked {
  color: #ff9aaa;
}
.card-facts {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 16px;
  margin: 0;
}
.card-facts div {
  min-width: 0;
}
.card-facts dt {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.card-facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 600;
}
.other-versions {
  width: 100%;
  display: grid;
  gap: var(--space-4);
}
.other-versions h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}
.version-rail-head {
  display: grid;
  gap: 2px;
}
.version-rail-head h3 {
  margin: 0;
  color: #f4fbff;
  font-size: var(--t-base);
  line-height: 1.12;
}
.version-list {
  display: grid;
  gap: var(--space-3);
}
.version-card {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  background: rgba(15, 24, 33, 0.7);
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.version-card:hover,
.version-card:focus-visible,
.version-card.is-selected {
  border-color: rgba(95, 199, 223, 0.5);
  background: rgba(95, 199, 223, 0.1);
  outline: none;
}
.version-card > span,
.version-card .version-art {
  width: 42px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101922;
  color: var(--gold);
  font-weight: 700;
}
.version-card strong {
  grid-column: 2;
  color: var(--gold);
  font-size: var(--t-body);
  min-width: 0;
}
.version-all-link {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.version-all-link:hover,
.version-all-link:focus-visible {
  color: #ffffff;
  outline: none;
}
.card-intel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}
.card-hero-panel,
.market-board,
.performance-panel,
.collection-cost-panel,
.attribute-panel {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.card-hero-panel {
  min-height: 148px;
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 18px;
  background:
    radial-gradient(circle at 78% 18%, rgba(95, 199, 223, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), rgba(255, 101, 124, 0.05)),
    rgba(10, 17, 26, 0.72);
}
.card-hero-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 3.1rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
}
.card-hero-panel p:not(.final-label) {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 600;
}
.ovr-badge {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(241, 184, 75, 0.48);
  border-radius: var(--radius-l);
  display: grid;
  place-items: center;
  align-content: center;
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.22), rgba(95, 199, 223, 0.08)),
    #101922;
  color: var(--gold);
  box-shadow: 0 0 30px rgba(241, 184, 75, 0.08);
}
.ovr-badge strong {
  color: var(--ink);
  font-size: 2.05rem;
  line-height: 0.9;
}
.ovr-badge span {
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.chips span,
.tag {
  border: 1px solid var(--line);
  background: #0f1821;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  color: #c8d5df;
  font-size: var(--t-small);
  font-weight: 600;
}
.chips .tag-danger {
  border-color: rgba(255, 101, 124, 0.4);
  background: rgba(255, 101, 124, 0.12);
  color: var(--red);
}
.chips .tag-warn {
  border-color: rgba(241, 184, 75, 0.45);
  background: rgba(241, 184, 75, 0.12);
  color: var(--gold);
}
.chips .tag-sleeper {
  border-color: rgba(210, 122, 255, 0.48);
  background: rgba(210, 122, 255, 0.13);
  color: #e5b8ff;
}
.quirk-strip {
  padding: 2px 0 4px;
  display: grid;
  gap: var(--space-3);
}
.quirk-strip-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
}
.quirk-strip-head .final-label {
  margin: 0;
}
.quirk-strip-head > span {
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quirk-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.quirk-icon-chip {
  min-width: 0;
  max-width: 152px;
  border: 1px solid rgba(238, 248, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(5, 7, 10, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eef8ff;
  cursor: help;
  padding: 7px 9px 8px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.quirk-icon-chip.inferred {
  border-color: rgba(241, 184, 75, 0.34);
  background: #0d0e0f;
  color: #ffe3a6;
}
.quirk-icon-chip:hover,
.quirk-icon-chip:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(255, 101, 124, 0.18);
  transform: translateY(-1px);
}
.quirk-icon-chip strong {
  max-width: 100%;
  display: block;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: clamp(0.6875rem, 1.45vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
}
.no-sell-banner {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  border: 1px solid rgba(255, 101, 124, 0.36);
  border-radius: var(--radius-l);
  background: rgba(255, 101, 124, 0.12);
  color: #ffd7dd;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.no-sell-banner strong {
  color: var(--red);
  font-size: var(--t-body);
  letter-spacing: 0.08em;
}
.no-sell-banner span {
  font-size: var(--t-base);
}
.performance-panel {
  padding: var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(178px, 244px);
  gap: 12px 18px;
  align-items: start;
  background:
    radial-gradient(circle at 92% 0%, rgba(85, 214, 165, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), rgba(95, 199, 223, 0.05)),
    rgba(7, 18, 22, 0.72);
}
.selected-version-read {
  grid-column: 1 / -1;
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-l);
  padding: 10px 12px;
  display: grid;
  gap: var(--space-1);
  background: rgba(4, 12, 18, 0.58);
}
.selected-version-read span {
  color: var(--cyan);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.selected-version-read strong {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 700;
}
.selected-version-read small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.performance-copy {
  min-width: 0;
}
.performance-panel.muted,
.performance-panel.loading {
  background:
    radial-gradient(circle at 92% 0%, rgba(95, 199, 223, 0.08), transparent 34%),
    rgba(8, 14, 22, 0.72);
}
.performance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: var(--space-3);
  justify-self: end;
  width: min(100%, 244px);
  min-width: 0;
}
.market-board {
  padding: var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-4);
  align-self: stretch;
  background:
    radial-gradient(circle at 90% 0%, rgba(95, 199, 223, 0.09), transparent 34%),
    rgba(8, 14, 22, 0.72);
}
.number-row {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  border: 1px solid rgba(147, 164, 179, 0.1);
  border-radius: 7px;
  padding: var(--space-4);
  background: rgba(13, 21, 29, 0.62);
  color: var(--muted);
  font-size: var(--t-body);
}
.manual-list-row {
  grid-column: 1 / -1;
  border-color: rgba(95, 199, 223, 0.28);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.12), rgba(85, 214, 165, 0.06)),
    rgba(13, 21, 29, 0.76);
}
.manual-list-row.watch {
  border-color: rgba(241, 184, 75, 0.36);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.12), rgba(95, 199, 223, 0.06)),
    rgba(13, 21, 29, 0.76);
}
.manual-list-row.caution,
.manual-list-row.danger,
.manual-list-row.locked {
  border-color: rgba(255, 101, 124, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.12), rgba(95, 199, 223, 0.04)),
    rgba(13, 21, 29, 0.76);
}
.collection-cost-panel {
  padding: var(--space-7);
  display: grid;
  gap: var(--space-6);
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 184, 75, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(241, 184, 75, 0.08), rgba(95, 199, 223, 0.05)),
    rgba(8, 14, 22, 0.72);
}
.collection-cost-panel.low,
.collection-cost-panel.done {
  background:
    radial-gradient(circle at 92% 0%, rgba(85, 214, 165, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), rgba(95, 199, 223, 0.05)),
    rgba(8, 14, 22, 0.72);
}
.collection-cost-panel.high {
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 101, 124, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 101, 124, 0.08), rgba(95, 199, 223, 0.05)),
    rgba(8, 14, 22, 0.72);
}
.attribute-panel.hitting {
  background:
    radial-gradient(circle at 90% 0%, rgba(85, 214, 165, 0.1), transparent 34%),
    rgba(5, 21, 20, 0.62);
}
.attribute-panel.fielding,
.attribute-panel.pitching {
  background:
    radial-gradient(circle at 88% 0%, rgba(126, 182, 255, 0.1), transparent 34%),
    rgba(7, 14, 28, 0.68);
}
.attribute-panel.speed {
  background:
    radial-gradient(circle at 88% 0%, rgba(95, 199, 223, 0.11), transparent 34%),
    rgba(7, 16, 22, 0.68);
}
.attribute-meter {
  height: 14px;
  border-radius: var(--radius-pill);
  background: #3a4655;
  overflow: hidden;
}
.recommendation {
  padding: 10px 0 8px;
}
/* Lock sizing (v627): no min-height. A lock must take the height of what it
   hides, or gating three lines builds a 280px empty wall -- and every placement
   then needs a bespoke rule to compensate. The overlay stacks in-grid
   (v621b-gate-crop), so the shell is already at least as tall as its lock card. */
.gold-gate-shell {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 85, 116, 0.28);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 85, 116, 0.12), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(241, 200, 109, 0.08), transparent 28%),
    rgba(8, 14, 22, 0.72);
  box-shadow: 0 0 0 1px rgba(241, 200, 109, 0.05), 0 18px 54px rgba(255, 70, 104, 0.08);
  overflow: hidden;
}
.gold-gate-content {
  position: relative;
  min-height: 248px;
  filter: blur(7px);
  opacity: 0.36;
  pointer-events: none;
  user-select: none;
}
.gold-gate-shell.is-preview-unlocked {
  border-color: rgba(41, 242, 192, 0.28);
  background: transparent;
}
.gold-gate-shell.is-preview-unlocked .gold-gate-content {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
.gold-gate-shell.is-preview-unlocked .gold-gate-content::after {
  display: none;
}
.gold-gate-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 16, 0.16);
}
.gold-gate-overlay {
  position: absolute;
  z-index: 2;
  inset: 18px auto auto 50%;
  width: min(360px, calc(100% - 24px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 85, 116, 0.46);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(255, 85, 116, 0.16), rgba(13, 21, 31, 0.94) 46%),
    radial-gradient(circle at 90% 0%, rgba(241, 200, 109, 0.14), transparent 34%),
    rgba(8, 14, 22, 0.94);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.52), 0 0 32px rgba(255, 70, 104, 0.16);
  padding: 15px;
  color: var(--ink);
  text-align: left;
  backdrop-filter: blur(12px);
}
.gold-gate-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 85, 116, 0.48);
  border-radius: var(--radius-pill);
  background: rgba(255, 85, 116, 0.12);
  color: #ff9bac;
  padding: 5px 8px;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gold-gate-overlay strong {
  display: block;
  margin-top: var(--space-3);
  color: #ffe3e8;
  font-size: 1.06rem;
  line-height: 1.15;
}
.gold-gate-overlay p {
  margin: 7px 0 0;
  color: #d7e8f2;
  line-height: 1.35;
}
.gold-gate-value-list {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gold-ink);
  font-size: var(--t-body);
  font-weight: 700;
}
.gold-gate-value-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #ff4668, var(--gold-ink));
  vertical-align: 0.08em;
}
.gold-preview-status {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-l);
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.045);
  font-size: var(--t-body);
}
.gold-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.gold-gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(255, 85, 116, 0.55);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, #ff4668, var(--gold-ink));
  color: #061116;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
}
.gold-gate-cta[hidden] {
  display: none;
}
.gold-gate-cta:disabled {
  cursor: progress;
  opacity: 0.72;
}
.gold-gate-secondary {
  background: rgba(8, 14, 22, 0.72);
  color: #ffe3e8;
}
body.access-modal-open {
  overflow: hidden;
}
.access-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-9);
  background: rgba(3, 8, 13, 0.72);
  backdrop-filter: blur(12px);
}
.access-modal-backdrop[hidden] {
  display: none;
}
.access-modal {
  position: relative;
  width: min(880px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid rgba(95, 199, 223, 0.26);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 20% 10%, rgba(95, 199, 223, 0.18), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(255, 70, 104, 0.16), transparent 34%),
    rgba(8, 14, 22, 0.97);
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.64);
  color: var(--ink);
}
.access-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 22, 0.82);
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
}
.access-modal-close::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.access-modal-body {
  padding: var(--space-11);
}
.access-modal-head {
  max-width: 720px;
}
.access-modal-head h2 {
  margin: 4px 0 8px;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: 0;
}
.access-modal-head p {
  margin: 0;
  color: #c9e5f2;
  font-size: 1.08rem;
  line-height: 1.45;
}
.access-price {
  color: #ff9bac !important;
  font-weight: 700;
}
.access-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: 22px;
}
.access-choice-card {
  display: grid;
  gap: var(--space-5);
  min-height: 310px;
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-l);
  background: rgba(3, 10, 16, 0.82);
  padding: var(--space-9);
}
.access-choice-free {
  border-color: rgba(95, 199, 223, 0.36);
  background:
    radial-gradient(circle at 18% 10%, rgba(95, 199, 223, 0.16), transparent 34%),
    rgba(3, 10, 16, 0.84);
}
.access-choice-pro {
  border-color: rgba(255, 85, 116, 0.44);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 85, 116, 0.18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(241, 200, 109, 0.12), transparent 28%),
    rgba(13, 10, 16, 0.86);
}
.access-choice-pill {
  justify-self: start;
  border: 1px solid rgba(95, 199, 223, 0.4);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  color: #8feeff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.access-choice-pro .access-choice-pill {
  border-color: rgba(255, 85, 116, 0.5);
  color: #ff9bac;
}
.access-choice-card h3 {
  margin: 0;
  color: #f6fbff;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1;
}
.access-choice-card p {
  margin: 0;
  color: #c6ddeb;
  line-height: 1.42;
}
.access-choice-card ul,
.access-pro-bullets,
.access-modal-value-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.access-choice-card li,
.access-pro-bullets li,
.access-modal-value-list span {
  color: #e6f4fb;
  font-weight: 700;
}
.access-choice-card li::before,
.access-pro-bullets li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  vertical-align: 0.08em;
}
.access-choice-pro li::before,
.access-pro-bullets li::before {
  background: linear-gradient(135deg, #ff4668, var(--gold-ink));
}
.access-choice-cta {
  align-self: end;
  min-height: 48px;
  border: 1px solid rgba(95, 199, 223, 0.38);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--cyan), var(--neon-teal-ink));
  color: #041016;
  font-weight: 700;
  cursor: pointer;
}
.access-choice-cta-pro {
  border-color: rgba(255, 85, 116, 0.58);
  background: linear-gradient(135deg, #ff4668, var(--gold-ink));
}
.access-auth-form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-9);
}
.access-auth-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.access-auth-form input {
  min-height: 48px;
  border: 1px solid rgba(95, 199, 223, 0.24);
  border-radius: var(--radius-l);
  background: rgba(2, 8, 13, 0.84);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.access-text-button {
  margin-top: var(--space-6);
  border: 0;
  background: transparent;
  color: #8feeff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.access-modal-note,
.access-modal-foot {
  margin: 16px 0 0;
  color: #a8bfd0;
  font-weight: 600;
}
.gold-gate-cta:hover,
.gold-gate-cta:focus-visible {
  outline: none;
  filter: brightness(1.08);
}
.options-grid > .gold-gate-shell {
  grid-column: 1 / -1;
}
.options-grid .gold-gate-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-4);
}
.market-summary > .gold-gate-shell,
.featured-strip > .gold-gate-shell {
  grid-column: 1 / -1;
  width: 100%;
}
.market-summary .gold-gate-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: var(--space-4);
}
.featured-strip .gold-gate-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-5);
}
/* Lock sizing (v627): this said `display: block`, which overrode the grid that
   v621b-gate-crop uses to stack the lock card over the blurred preview -- so on
   Rankings alone the overlay went back to absolute positioning and could clip.
   A gate needs no per-page display rule; it spans its grid parent instead. */
.rankings-list .gold-gate-shell {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
/* Lock sizing (v627): the 430px/398px floors are gone for the same reason as
     the desktop one -- on a phone they were the difference between a lock and a
     full screen of empty gradient. */
.gold-gate-overlay {
    inset-block-start: 14px;
    width: min(100% - 18px, 360px);
    padding: var(--space-6);
  }
.gold-gate-overlay strong {
    font-size: 1rem;
  }
.gold-gate-actions,
  .gold-gate-cta {
    width: 100%;
  }
.access-modal-backdrop {
    align-items: end;
    padding: var(--space-4);
  }
.access-modal {
    max-height: 92vh;
  }
.access-modal-body {
    padding: 22px 16px 18px;
  }
.access-choice-grid {
    grid-template-columns: 1fr;
  }
.access-choice-card {
    min-height: auto;
  }
.access-choice-cta {
    width: 100%;
  }
}
.final-card {
  border: 1px solid rgba(126, 182, 255, 0.2);
  border-left: 6px solid var(--cyan);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 88% 0%, rgba(95, 199, 223, 0.12), transparent 34%),
    rgba(15, 24, 33, 0.94);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-6);
}
.final-card.no-sell-final {
  border-left-color: var(--red);
  background: rgba(255, 101, 124, 0.1);
}
.final-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  align-items: start;
}
.final-card h3 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
}
.final-card-head > span {
  align-self: start;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: #061116;
  padding: 7px 10px;
  font-size: var(--t-body);
  font-weight: 700;
}
.final-card.no-sell-final .final-card-head > span {
  background: var(--red);
}
.confidence-panel {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.55);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 8px 14px;
  align-items: center;
}
.confidence-panel strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-title);
  line-height: 1;
}
.confidence-panel span {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.confidence-panel meter {
  width: 100%;
  height: 14px;
  border: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #344150;
}
.confidence-panel meter::-webkit-meter-bar {
  border: none;
  border-radius: var(--radius-pill);
  background: #344150;
}
.confidence-panel meter::-webkit-meter-optimum-value,
.confidence-panel meter::-webkit-meter-suboptimum-value,
.confidence-panel meter::-webkit-meter-even-less-good-value {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #1455d9, #0aa37e 72%, #10e05d);
}
.confidence-panel p {
  grid-column: 1 / -1;
  margin: 0;
  color: #b8c6d0;
  font-size: var(--t-base);
}
.decision-action-strip {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: var(--space-4);
}
.decision-action-strip article {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 46%),
    rgba(8, 14, 22, 0.58);
}
.decision-action-strip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--gold);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.decision-action-strip strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.2;
}
.decision-action-strip p {
  margin: 7px 0 0;
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.38;
}
.decision-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.decision-brief article {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  background: rgba(8, 14, 22, 0.52);
}
.decision-brief strong {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-card ul,
.decision-brief ul {
  margin: 0;
  padding-left: var(--space-9);
  color: #b8c6d0;
  line-height: 1.42;
}
.final-card li + li,
.decision-brief li + li {
  margin-top: 5px;
}
.decision-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.decision-breakdown article {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  padding: 11px;
  background: rgba(8, 14, 22, 0.42);
}
.decision-breakdown span {
  color: var(--gold);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.decision-breakdown p {
  margin: 6px 0 0;
  color: #c2d0da;
  font-size: var(--t-body);
  line-height: 1.42;
}
.results.has-decision-context.decision-context-grid {
  display: grid;
  grid-template-columns: minmax(255px, 0.86fr) minmax(360px, 1.28fr) minmax(275px, 0.9fr);
  grid-template-areas:
    "setup best signals"
    "pulse pulse pulse"
    "scores scores scores";
  gap: var(--space-5);
  align-items: stretch;
  padding: var(--space-5);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 229, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(255, 45, 75, 0.12), transparent 25%),
    #02070c;
}
.results.has-decision-context.decision-context-grid .selected-card {
  grid-area: setup;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  border: 1px solid rgba(50, 183, 218, 0.28);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.08), transparent 44%),
    rgba(5, 13, 21, 0.88);
}
.results.has-decision-context .card-showcase {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.results.has-decision-context .card-art {
  width: 112px;
  max-width: 112px;
}
.results.has-decision-context .card-action-grid,
.results.has-decision-context .other-versions,
.results.has-decision-context .attribute-grid,
.results.has-decision-context .selected-version-read {
  display: none;
}
.results.has-decision-context .card-facts {
  margin: 0;
}
.results.has-decision-context .card-intel {
  display: grid;
  gap: var(--space-4);
}
.results.has-decision-context .card-hero-panel,
.results.has-decision-context .market-board,
.results.has-decision-context .collection-cost-panel,
.results.has-decision-context .performance-panel,
.results.has-decision-context .quirk-strip {
  border-radius: var(--radius-l);
}
.best-move-card {
  min-height: 100%;
  border: 1px solid rgba(255, 45, 75, 0.34);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 45, 75, 0.2), transparent 30%),
    radial-gradient(circle at 12% 2%, rgba(0, 229, 255, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(6, 16, 27, 0.96), rgba(2, 7, 12, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 34px rgba(255, 45, 75, 0.1);
}
.best-move-card.collect {
  border-color: rgba(241, 184, 75, 0.34);
}
.best-move-card.hold {
  border-color: rgba(0, 229, 255, 0.34);
}
.best-move-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 118px;
  gap: var(--space-6);
  align-items: center;
}
.best-move-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 45, 75, 0.4);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: rgba(255, 45, 75, 0.1);
  color: #ff6a8b;
  font-size: var(--t-title);
  font-weight: 700;
  box-shadow: 0 0 28px rgba(255, 45, 75, 0.18);
}
.best-move-copy {
  min-width: 0;
}
.best-move-copy h3 {
  margin: 4px 0 5px;
  color: #ffffff;
  font-size: clamp(1.32rem, 2.4vw, 2rem);
  line-height: 1.08;
}
.best-move-copy p:not(.final-label) {
  margin: 0;
  color: #d2e0ea;
  line-height: 1.38;
}
.best-move-meta,
.decision-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.best-move-meta {
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
}
.best-move-meta span,
.decision-kpi-row article {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.58);
}
.best-move-meta span {
  padding: 7px 10px;
  color: #d9e7f0;
  font-size: var(--t-small);
  font-weight: 700;
}
.decision-reason-stack {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
}
.decision-reason-stack > div,
.what-could-change {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  padding: 13px;
  background: rgba(8, 14, 22, 0.46);
}
.decision-mini-label {
  margin: 0 0 9px;
  color: #ff5f83;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.decision-reason-stack ol,
.decision-reason-stack ul,
.what-could-change ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.decision-reason-stack li,
.what-could-change li {
  color: #cad8e3;
  font-size: var(--t-base);
  line-height: 1.38;
}
.decision-reason-stack ol li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.decision-reason-stack b {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 45, 75, 0.38);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: #ff7d99;
}
.decision-kpi-row article {
  min-width: 0;
  padding: var(--space-4);
}
.decision-kpi-row span,
.decision-kpi-row small {
  display: block;
  color: #9fb0be;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.decision-kpi-row strong {
  display: block;
  margin-top: var(--space-1);
  color: #ffffff;
  font-size: var(--t-base);
}
.decision-signals-panel {
  min-height: 100%;
  border: 1px solid rgba(50, 183, 218, 0.24);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7);
  background:
    radial-gradient(circle at 0 0, rgba(0, 229, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(5, 15, 24, 0.94), rgba(3, 9, 15, 0.98));
}
.decision-panel-head h3 {
  margin: 3px 0 0;
  color: #ffffff;
  font-size: 1.1rem;
}
.decision-signal-list {
  display: grid;
  gap: 11px;
}
.decision-signal {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 44px 72px;
  gap: var(--space-4);
  align-items: center;
}
.signal-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: var(--radius-l);
  display: grid;
  place-items: center;
  background: rgba(0, 229, 255, 0.08);
  color: var(--cyan);
  font-weight: 700;
}
.decision-signal.weak .signal-icon {
  border-color: rgba(255, 45, 75, 0.24);
  background: rgba(255, 45, 75, 0.08);
  color: #ff5f83;
}
.decision-signal.moderate .signal-icon {
  border-color: rgba(241, 184, 75, 0.26);
  background: rgba(241, 184, 75, 0.08);
  color: var(--gold);
}
.signal-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.signal-main strong {
  color: #ffffff;
  font-size: var(--t-base);
}
.signal-main span {
  color: #9fb0be;
  font-size: var(--t-small);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.signal-main i {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(91, 105, 122, 0.46);
}
.signal-main em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-teal));
}
.decision-signal.moderate .signal-main em {
  background: linear-gradient(90deg, var(--gold), #ffd778);
}
.decision-signal.weak .signal-main em {
  background: linear-gradient(90deg, var(--neon-pink), #ff7d99);
}
.decision-signal b {
  color: var(--cyan);
  font-size: 1.15rem;
}
.decision-signal.weak b {
  color: #ff5f83;
}
.decision-signal small {
  color: #9fb0be;
  font-size: var(--t-small);
  font-weight: 700;
}
.signal-legend {
  border-top: 1px solid rgba(147, 164, 179, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: var(--space-5);
  color: #b8c6d0;
  font-size: var(--t-small);
}
.signal-legend span {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
.signal-legend i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}
.signal-legend i.weak {
  background: #ff5f83;
  box-shadow: 0 0 12px rgba(255, 45, 75, 0.55);
}
.pulseai-context-strip {
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(260px, 1fr) minmax(340px, 1.35fr);
  gap: var(--space-6);
  padding: var(--space-7);
  background:
    radial-gradient(circle at 9% 58%, rgba(0, 229, 255, 0.16), transparent 30%),
    radial-gradient(circle at 28% 100%, rgba(255, 45, 75, 0.11), transparent 28%),
    rgba(5, 13, 21, 0.88);
}
.pulseai-context-intro h3 {
  margin: 4px 0 6px;
  color: #ffffff;
  font-size: var(--t-base);
}
.pulseai-context-intro p:not(.final-label) {
  margin: 0;
  color: #c7d5de;
  line-height: 1.4;
}
.pulseai-chat-preview {
  display: grid;
  gap: var(--space-4);
}
.preview-message {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: 11px 12px;
  background: rgba(8, 14, 22, 0.58);
}
.preview-message.pulse {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.08);
}
.preview-message strong {
  display: block;
  margin-bottom: var(--space-1);
  color: #ffffff;
  font-size: var(--t-small);
}
.preview-message span {
  color: #d8e6ef;
  line-height: 1.38;
}
.engine-context-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
.engine-context-highlights article {
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  background: rgba(8, 14, 22, 0.54);
}
.engine-context-highlights strong {
  display: block;
  color: var(--cyan);
  font-size: var(--t-small);
}
.engine-context-highlights span {
  display: block;
  margin-top: 5px;
  color: #d5e2eb;
  font-size: var(--t-body);
  line-height: 1.3;
}
@media (max-width: 1100px) {
.results.has-decision-context {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "setup best"
      "signals signals"
      "pulse pulse"
      "scores scores";
  }
.pulseai-context-strip {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
.results.has-decision-context {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "setup"
      "best"
      "signals"
      "pulse"
      "scores";
    gap: var(--space-4);
    padding: var(--space-4);
    overflow-x: hidden;
  }
.results.has-decision-context .selected-card {
    min-width: 0;
    padding: var(--space-5);
  }
.results.has-decision-context .card-art {
    width: 94px;
    max-width: 94px;
  }
.best-move-card,
  .decision-signals-panel,
  .pulseai-context-strip {
    min-width: 0;
    padding: 13px;
  }
.best-move-hero {
    grid-template-columns: 46px minmax(0, 1fr);
  }
.best-move-icon {
    width: 46px;
    height: 46px;
    font-size: var(--t-lead);
  }
.decision-reason-stack,
  .decision-kpi-row,
  .engine-context-highlights {
    grid-template-columns: 1fr;
  }
.decision-signal {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
  }
.decision-signal small {
    grid-column: 2 / -1;
    justify-self: start;
  }
.signal-icon {
    width: 34px;
    height: 34px;
  }
}
.predictor-card {
  border: 1px solid rgba(126, 182, 255, 0.2);
  border-left: 6px solid var(--cyan);
  border-radius: var(--radius-l);
  background: rgba(15, 24, 33, 0.9);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
}
.predictor-card.up {
  border-left-color: var(--green);
}
.predictor-card.down {
  border-left-color: var(--red);
}
.predictor-card.locked {
  border-left-color: var(--gold);
}
.predictor-card h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}
.predictor-card > span {
  align-self: start;
  border-radius: var(--radius-pill);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 10px;
  font-size: var(--t-body);
  font-weight: 700;
}
.predictor-card.up > span {
  color: var(--green);
}
.predictor-card.down > span {
  color: var(--red);
}
.predictor-note,
.predictor-card ul {
  grid-column: 1 / -1;
}
.predictor-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-base);
}
.predictor-card ul {
  margin: 0;
  padding-left: var(--space-9);
  color: #b8c6d0;
  line-height: 1.42;
}
.predictor-card li + li {
  margin-top: 5px;
}
.callout {
  border-left: 5px solid var(--green);
  background: rgba(85, 214, 165, 0.1);
  border-radius: var(--radius-l);
  padding: var(--space-7);
}
.callout.sell {
  border-color: var(--gold);
  background: rgba(241, 184, 75, 0.1);
}
.callout.hold {
  border-color: var(--cyan);
  background: rgba(95, 199, 223, 0.1);
}
.callout.collect {
  border-color: var(--green);
  background: rgba(85, 214, 165, 0.1);
}
.callout.no-sell {
  border-color: var(--red);
  background: rgba(255, 101, 124, 0.1);
}
.callout h3 {
  margin: 0 0 6px;
  font-size: var(--t-lead);
}
.callout p {
  margin: 0;
  color: #bac7d1;
}
.option {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #0f1821;
  padding: var(--space-6);
}
.option.blocked {
  background: #10161d;
  color: var(--dim);
}
.option.blocked .score {
  background: #566370;
}
.option header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-3);
}
.option h3 {
  margin: 0;
  font-size: 0.98rem;
}
.score {
  min-width: 42px;
  text-align: center;
  border-radius: var(--radius-pill);
  color: #071118;
  background: var(--cyan);
  padding: 5px 8px;
  font-size: var(--t-body);
  font-weight: 700;
}
.option p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-base);
}
.option details {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.option summary {
  color: var(--cyan);
  font-size: var(--t-body);
  font-weight: 700;
  cursor: pointer;
}
.option details ul {
  margin: 8px 0 0;
  padding-left: var(--space-8);
  color: #aab8c3;
  font-size: var(--t-body);
  line-height: 1.4;
}
.option details li + li {
  margin-top: var(--space-1);
}
.matches {
  margin-top: var(--space-8);
  padding: var(--space-8);
}
.watchlist-panel {
  margin-top: var(--space-8);
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  background: rgba(18, 27, 36, 0.84);
  box-shadow: var(--shadow);
}
.watchlist-actions button:hover,
.watchlist-actions button:focus-visible {
  border-color: rgba(255, 101, 124, 0.42);
  color: var(--red);
  outline: none;
}
.watchlist-card {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 72px minmax(170px, 1fr) minmax(118px, auto);
  gap: var(--space-5);
  align-items: start;
  min-height: 112px;
  padding: var(--space-5);
  background: rgba(13, 21, 29, 0.76);
  color: var(--ink);
  text-align: left;
}
.watchlist-card.is-sleeper {
  border-color: rgba(210, 122, 255, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(210, 122, 255, 0.12), transparent 34%),
    rgba(13, 21, 29, 0.82);
}
.watchlist-card:hover,
.watchlist-card:focus-visible {
  border-color: rgba(85, 214, 165, 0.44);
  outline: none;
}
.watch-art {
  width: 72px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3145, #27715f);
  color: var(--gold);
  font-weight: 700;
}
.watch-copy {
  min-width: 170px;
  display: grid;
  gap: var(--space-1);
}
.watchlist-card .watch-intel {
  color: #d6e1ea;
}
.watchlist-card .watch-reason {
  color: #aebdca;
  line-height: 1.25;
  white-space: normal;
}
.watch-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 116px;
}
.watch-tags,
.signal-badges,
.database-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.watch-tags b,
.signal-badges b,
.database-badges b {
  border: 1px solid rgba(210, 122, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(210, 122, 255, 0.1);
  color: #e2b7ff;
  padding: 3px 6px;
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.compare-panel {
  margin-top: var(--space-8);
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 184, 75, 0.09), transparent 36%),
    rgba(18, 27, 36, 0.84);
  box-shadow: var(--shadow);
}
.compare-card {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  min-height: 86px;
  padding: 11px;
  background: rgba(8, 14, 22, 0.7);
  color: var(--ink);
  text-align: left;
}
.compare-card:hover,
.compare-card:focus-visible {
  border-color: rgba(95, 199, 223, 0.5);
  background: rgba(95, 199, 223, 0.08);
  outline: none;
}
.compare-art {
  width: 54px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3145, #8f6721);
  color: var(--gold);
  font-weight: 700;
}
.compare-main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.match-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.section-head h2 {
  margin-bottom: 0;
  font-size: var(--t-lead);
}
.section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--t-base);
}
.filtered-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
.match-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.match-pager {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
  padding: 12px 0;
}
.pager-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.pager-buttons button {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: 7px;
  background: rgba(13, 21, 29, 0.78);
  color: var(--ink);
  font-size: var(--t-lead);
  font-weight: 700;
}
.pager-buttons button:hover,
.pager-buttons button:focus-visible {
  border-color: rgba(95, 199, 223, 0.5);
  background: rgba(95, 199, 223, 0.12);
  outline: none;
}
.pager-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager-buttons span {
  min-width: 72px;
  color: #dbe7ef;
  font-weight: 700;
  text-align: center;
}
.match-card {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #0f1821;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  text-align: left;
}
.match-card:hover,
.match-card:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(85, 214, 165, 0.16);
}
.match-card.is-selected {
  border-color: rgba(85, 214, 165, 0.7);
  box-shadow: 0 0 0 2px rgba(85, 214, 165, 0.18);
}
.thumb {
  width: 46px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-m);
  background: linear-gradient(150deg, #233247, #207769);
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.match-main {
  min-width: 0;
}
.price {
  font-weight: 700;
  color: var(--green);
}
.no-sell-match {
  border-color: rgba(255, 101, 124, 0.34);
  background: rgba(255, 101, 124, 0.08);
}
.no-sell-match .price {
  color: var(--red);
}
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 18px 0;
}
.proof-strip article,
.story-grid article,
.plan-card {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background: rgba(15, 24, 33, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}
.proof-strip article {
  min-height: 116px;
  padding: var(--space-7);
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.proof-strip strong {
  color: var(--green);
  font-size: var(--t-title);
  line-height: 1;
}
.proof-strip span {
  color: #b8c6d0;
  font-size: var(--t-base);
  line-height: 1.38;
}
.product-story,
.newest-panel,
.tools-hub,
.plan-preview,
.glossary-panel,
.faq-panel,
.help-center,
.site-footer {
  margin-top: var(--space-8);
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background: rgba(18, 27, 36, 0.84);
  box-shadow: var(--shadow);
}
.product-story,
.newest-panel,
.tools-hub,
.plan-preview,
.glossary-panel,
.faq-panel,
.help-center {
  padding: var(--space-8);
}
.story-head {
  align-items: start;
}
.story-head h2,
.plan-preview h2 {
  margin: 4px 0 0;
  font-size: 1.55rem;
  line-height: 1.14;
}
.story-head > p,
.plan-preview > div > p,
.glossary-panel .section-head > p,
.faq-panel .section-head p,
.help-center .section-head p {
  max-width: 540px;
  color: var(--muted);
}
.newest-card,
.newest-skeleton {
  min-height: 132px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(126, 182, 255, 0.08), transparent 42%),
    rgba(15, 24, 33, 0.94);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  scroll-snap-align: start;
}
.newest-card {
  color: var(--ink);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  text-align: left;
}
.newest-card:hover,
.newest-card:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(85, 214, 165, 0.16), 0 14px 36px rgba(0, 0, 0, 0.22);
  outline: none;
}
.newest-card.is-no-sell {
  border-color: rgba(255, 101, 124, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.1), transparent 48%),
    rgba(15, 24, 33, 0.94);
}
.newest-art {
  width: 58px;
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, #233247, #207769);
  color: var(--green);
  font-weight: 700;
}
.newest-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}
.newest-skeleton {
  position: relative;
  overflow: hidden;
}
.newest-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(238, 244, 248, 0.08), transparent);
  animation: shimmer 1.2s infinite;
}
.advisor-page .advisor-setup,
.advisor-page .quick-start,
.advisor-page .section-rail,
.advisor-page .watchlist-panel,
.advisor-page .compare-panel,
.advisor-page .proof-strip,
.advisor-page .newest-panel,
.advisor-page .matches,
.advisor-page .tools-hub,
.advisor-page .plan-preview,
.advisor-page .help-center,
.advisor-page .glossary-panel,
.advisor-page .faq-panel {
  border-color: rgba(0, 229, 255, 0.16);
  background:
    radial-gradient(circle at 16% -12%, rgba(0, 229, 255, 0.14), transparent 30%),
    radial-gradient(circle at 93% 8%, rgba(255, 45, 75, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(1, 8, 15, 0.97), rgba(4, 12, 22, 0.94) 54%, rgba(2, 8, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 229, 255, 0.08),
    0 18px 58px rgba(0, 0, 0, 0.38);
}
.advisor-page .advisor-setup {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    radial-gradient(circle at 10% -24%, rgba(0, 229, 255, 0.2), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(20, 235, 176, 0.16), transparent 26%),
    radial-gradient(circle at 100% 88%, rgba(255, 45, 75, 0.12), transparent 28%),
    linear-gradient(145deg, #01080f 0%, #06111d 55%, #03070d 100%);
}
.advisor-page .watchlist-panel,
.advisor-page .compare-panel,
.advisor-page .newest-panel,
.advisor-page .matches,
.advisor-page .tools-hub {
  position: relative;
  overflow: hidden;
}
.advisor-page .setup-kicker,
.advisor-page .section-head .eyebrow,
.advisor-page .eyebrow {
  color: #9db1c0;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.18);
}
.advisor-page .advisor-setup input,
.advisor-page .advisor-setup select,
.advisor-page .match-filters select,
.advisor-page .match-pager select,
.advisor-page .match-pager input {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #020810;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 229, 255, 0.02);
}
.advisor-page .data-health {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(0, 229, 255, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06), rgba(255, 45, 75, 0.04)),
    rgba(1, 7, 13, 0.76);
}
.advisor-page .data-health.is-outage {
  border-color: rgba(255, 51, 95, 0.38);
  background:
    radial-gradient(circle at 0 0, rgba(255, 51, 95, 0.16), transparent 42%),
    rgba(8, 14, 22, 0.64);
}
.advisor-page .advanced-controls summary {
  width: fit-content;
  border-color: rgba(255, 190, 58, 0.32);
  background:
    linear-gradient(90deg, rgba(255, 190, 58, 0.12), rgba(255, 45, 75, 0.08)),
    rgba(3, 9, 15, 0.82);
}
.advisor-page .quick-start {
  margin-top: var(--space-7);
  background: rgba(0, 229, 255, 0.08);
}
.advisor-page .quick-start > div,
.advisor-page .quick-start > a {
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.045), rgba(2, 8, 14, 0.96)),
    rgba(2, 8, 14, 0.9);
}
.advisor-page .quick-start > a:nth-of-type(2) {
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.055), rgba(2, 8, 14, 0.96)),
    rgba(2, 8, 14, 0.9);
}
.advisor-page .quick-start > a:nth-of-type(3) {
  background:
    linear-gradient(135deg, rgba(255, 45, 75, 0.055), rgba(2, 8, 14, 0.96)),
    rgba(2, 8, 14, 0.9);
}
.advisor-page .section-rail {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.1), rgba(5, 10, 18, 0.92) 45%, rgba(255, 45, 75, 0.08)),
    rgba(5, 10, 18, 0.92);
}
.advisor-page .section-rail a.is-active,
.advisor-page .section-rail a:hover,
.advisor-page .section-rail a:focus-visible {
  background: rgba(0, 229, 255, 0.12);
  color: #f7fbff;
}
.advisor-page .watchlist-summary article,
.advisor-page .compare-card,
.advisor-page .newest-card,
.advisor-page .tool-card,
.advisor-page .help-card,
.advisor-page .glossary-grid article,
.advisor-page .plan-card,
.advisor-page .match-card {
  border-color: rgba(147, 164, 179, 0.11);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.035), rgba(5, 12, 20, 0.92) 54%, rgba(255, 45, 75, 0.025)),
    rgba(5, 12, 20, 0.9);
}
.advisor-page .watchlist-summary article:nth-child(2),
.advisor-page .compare-card:nth-child(2n),
.advisor-page .newest-card:nth-child(2n),
.advisor-page .tool-card:nth-child(2n),
.advisor-page .help-card:nth-child(2n) {
  background:
    linear-gradient(145deg, rgba(20, 235, 176, 0.04), rgba(5, 12, 20, 0.92) 54%, rgba(0, 229, 255, 0.025)),
    rgba(5, 12, 20, 0.9);
}
.advisor-page .watchlist-summary article:nth-child(3),
.advisor-page .compare-card:nth-child(3n),
.advisor-page .newest-card:nth-child(3n),
.advisor-page .tool-card:nth-child(3n),
.advisor-page .help-card:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(255, 45, 75, 0.04), rgba(5, 12, 20, 0.92) 54%, rgba(255, 190, 58, 0.025)),
    rgba(5, 12, 20, 0.9);
}
.advisor-page .proof-strip {
  border-color: rgba(0, 229, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.07), rgba(2, 8, 14, 0.96) 46%, rgba(255, 45, 75, 0.05)),
    rgba(2, 8, 14, 0.94);
}
.advisor-page .proof-strip article {
  border-color: rgba(147, 164, 179, 0.14);
}
.advisor-page .match-actions button,
.advisor-page .watchlist-actions button,
.advisor-page .lab-tabs button,
.advisor-page .lab-pager button,
.advisor-page .tool-detail-actions a {
  border-color: rgba(0, 229, 255, 0.18);
  background: rgba(5, 12, 20, 0.84);
}
.advisor-page .match-actions button:hover,
.advisor-page .watchlist-actions button:hover,
.advisor-page .lab-tabs button:hover,
.advisor-page .lab-tabs button.is-active,
.advisor-page .lab-pager button:hover,
.advisor-page .tool-detail-actions a:hover {
  border-color: rgba(20, 235, 176, 0.42);
  background: rgba(20, 235, 176, 0.1);
  color: #dffef2;
}
@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.tool-grid,
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.tool-card,
.help-card {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.07), transparent 52%),
    rgba(15, 24, 33, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}
.tool-card {
  min-height: 182px;
  padding: var(--space-7);
  display: grid;
  align-content: start;
  gap: 9px;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
}
.tool-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
  opacity: 0.72;
}
.tool-card:nth-child(2n)::after {
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--red));
}
.tool-card:nth-child(3n)::after {
  background: linear-gradient(90deg, var(--gold), var(--red), var(--green));
}
.tool-card:nth-child(4n) {
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.07), transparent 52%),
    rgba(15, 24, 33, 0.92);
}
.tool-card.is-planned::after {
  background: linear-gradient(90deg, rgba(147, 164, 179, 0.3), rgba(95, 199, 223, 0.45));
}
.tool-card.is-live {
  border-color: rgba(85, 214, 165, 0.34);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.12), transparent 48%),
    rgba(15, 24, 33, 0.95);
}
.tool-card:hover,
.tool-card:focus-visible,
.tool-card.is-active {
  border-color: rgba(95, 199, 223, 0.58);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(95, 199, 223, 0.14), 0 18px 42px rgba(0, 0, 0, 0.28);
}
.tool-card.is-active::after {
  height: 5px;
  opacity: 1;
}
.tool-type,
.tool-badge,
.help-card span {
  width: fit-content;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.12);
  color: var(--cyan);
  padding: 5px 8px;
  letter-spacing: 0.06em;
}
.is-live .tool-badge {
  background: rgba(85, 214, 165, 0.14);
  color: var(--green);
}
.is-planned .tool-badge {
  background: rgba(147, 164, 179, 0.12);
  color: #b8c6d0;
}
.tool-card h3,
.help-card h3 {
  margin: 0;
  line-height: 1.14;
}
.tool-card h3 {
  padding-right: 70px;
  font-size: 1.12rem;
}
.tool-card p,
.help-card p {
  margin: 0;
  color: #b8c6d0;
  line-height: 1.45;
}
.tool-detail {
  margin-top: var(--space-6);
  border: 1px solid rgba(95, 199, 223, 0.22);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: var(--space-8);
  padding: var(--space-8);
  background:
    radial-gradient(circle at 88% 12%, rgba(95, 199, 223, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), rgba(126, 182, 255, 0.06)),
    rgba(8, 14, 22, 0.76);
}
.tool-detail h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.05;
}
.tool-detail p {
  max-width: 760px;
  color: #c6d3dd;
  line-height: 1.48;
}
.tool-detail ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.tool-detail li {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: 7px;
  background: rgba(13, 21, 29, 0.64);
  padding: 10px 11px;
  color: var(--ink);
  font-weight: 600;
}
.tool-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--space-5);
}
.tool-detail-actions a {
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.12);
  color: var(--ink);
  padding: 8px 11px;
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 700;
}
.market-lab {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.lab-panel {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 88% 0%, rgba(95, 199, 223, 0.08), transparent 32%),
    rgba(8, 14, 22, 0.78);
  padding: var(--space-7);
}
.lab-panel:nth-child(2) {
  border-color: rgba(241, 184, 75, 0.2);
  background:
    radial-gradient(circle at 88% 0%, rgba(241, 184, 75, 0.09), transparent 32%),
    rgba(8, 14, 22, 0.78);
}
.lab-panel .section-head {
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.lab-panel h3 {
  margin: 4px 0 0;
  font-size: 1.35rem;
  line-height: 1.1;
}
.lab-panel .section-head > p {
  max-width: 240px;
  color: var(--muted);
  font-size: var(--t-body);
  text-align: right;
}
.lab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.lab-tabs button {
  border: 1px solid rgba(95, 199, 223, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(13, 21, 29, 0.72);
  color: #c8d5df;
  padding: 8px 10px;
  font-size: var(--t-small);
  font-weight: 700;
}
.lab-tabs button:hover,
.lab-tabs button:focus-visible,
.lab-tabs button.is-active {
  border-color: rgba(95, 199, 223, 0.62);
  background: rgba(95, 199, 223, 0.15);
  color: var(--ink);
  outline: none;
}
.index-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.index-row div {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: 7px;
  background: rgba(15, 24, 33, 0.72);
  padding: var(--space-4);
}
.index-row span,
.index-row small {
  display: block;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
.index-row strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: var(--t-base);
}
.signal-list {
  max-height: 704px;
  overflow-y: auto;
  padding-right: var(--space-1);
  display: grid;
  gap: 9px;
  scrollbar-color: rgba(95, 199, 223, 0.65) rgba(8, 14, 22, 0.78);
  scrollbar-width: thin;
}
.signal-list::-webkit-scrollbar {
  width: 10px;
}
.signal-list::-webkit-scrollbar-track {
  background: rgba(8, 14, 22, 0.78);
  border-radius: var(--radius-pill);
}
.signal-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 14, 22, 0.78);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--cyan), var(--green), var(--gold));
}
.signal-row {
  width: 100%;
  min-height: 82px;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: var(--space-4);
  background: rgba(13, 21, 29, 0.76);
  color: var(--ink);
  text-align: left;
}
.signal-row:hover,
.signal-row:focus-visible {
  border-color: rgba(85, 214, 165, 0.48);
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 214, 165, 0.1);
}
.signal-row.fallers,
.signal-row.downgrade {
  background: linear-gradient(135deg, rgba(255, 101, 124, 0.08), transparent 42%), rgba(13, 21, 29, 0.76);
}
.signal-row.risers,
.signal-row.upgrade {
  background: linear-gradient(135deg, rgba(85, 214, 165, 0.08), transparent 42%), rgba(13, 21, 29, 0.76);
}
.signal-art {
  width: 48px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3145, #27715f);
  color: var(--gold);
  font-weight: 700;
}
.signal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signal-main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.signal-main strong,
.signal-main small,
.signal-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signal-main strong {
  font-size: var(--t-base);
}
.signal-main small,
.signal-main em,
.signal-price small {
  color: var(--muted);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 600;
}
.signal-price {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
}
.signal-price strong {
  color: var(--ink);
  font-size: 0.96rem;
}
.lab-pager {
  margin-top: var(--space-5);
  border-top: 1px solid rgba(147, 164, 179, 0.14);
  padding-top: var(--space-4);
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto auto;
  gap: var(--space-4);
  align-items: center;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
.lab-pager p {
  margin: 0;
}
.lab-pager label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.lab-pager select,
.lab-pager input {
  min-height: 34px;
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: 7px;
  background: rgba(13, 21, 29, 0.86);
  color: var(--ink);
  font-weight: 700;
}
.lab-pager select {
  padding: 0 26px 0 10px;
}
.lab-pager input {
  width: 58px;
  padding: 0 8px;
}
.lab-pager small {
  color: var(--muted);
}
.tool-page {
  width: min(1240px, calc(100% - 32px));
}
.tool-hero {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-l);
  margin-top: var(--space-7);
  padding: clamp(24px, 4vw, 42px) clamp(16px, 2.8vw, 30px) 24px;
  background:
    radial-gradient(circle at 88% 0%, rgba(95, 199, 223, 0.14), transparent 34%),
    radial-gradient(circle at 14% 100%, rgba(85, 214, 165, 0.09), transparent 30%),
    rgba(15, 24, 33, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(238, 244, 248, 0.025),
    0 18px 44px rgba(0, 0, 0, 0.2);
}
.tool-hero h1 {
  max-width: 780px;
  margin: 8px 0 12px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
}
.tool-hero p:not(.eyebrow) {
  max-width: 680px;
  color: #b8c6d0;
  font-size: var(--t-base);
  line-height: 1.45;
}
.program-page .tool-hero,
.rankings-page .tool-hero {
  border-color: rgba(85, 214, 165, 0.24);
  background:
    radial-gradient(circle at 86% 0%, rgba(85, 214, 165, 0.16), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(95, 199, 223, 0.12), transparent 30%),
    rgba(15, 24, 33, 0.8);
}
.pack-page .tool-hero,
.database-page .tool-hero {
  border-color: rgba(241, 184, 75, 0.26);
  background:
    radial-gradient(circle at 86% 0%, rgba(241, 184, 75, 0.16), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(95, 199, 223, 0.11), transparent 30%),
    rgba(15, 24, 33, 0.8);
}
.inventory-page .tool-hero,
.flip-page .tool-hero {
  border-color: rgba(255, 101, 124, 0.24);
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 101, 124, 0.15), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(85, 214, 165, 0.1), transparent 30%),
    rgba(15, 24, 33, 0.8);
}
.squad-page .tool-hero,
.roster-page .tool-hero,
.help-page .tool-hero {
  border-color: rgba(95, 199, 223, 0.26);
  background:
    radial-gradient(circle at 86% 0%, rgba(95, 199, 223, 0.16), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(241, 184, 75, 0.09), transparent 30%),
    rgba(15, 24, 33, 0.8);
}
.notice-banner,
.page-summary,
.page-toolbar,
.page-tabs,
.featured-strip,
.tool-list {
  margin-top: var(--space-7);
}
.notice-banner {
  border: 1px solid rgba(126, 182, 255, 0.28);
  border-radius: var(--radius-l);
  display: flex;
  gap: var(--space-5);
  padding: 16px 18px;
  background: rgba(15, 24, 43, 0.76);
  color: #8fbdff;
}
.roster-command-center {
  margin-top: var(--space-7);
  border: 1px solid rgba(20, 235, 176, 0.22);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7);
  background:
    radial-gradient(circle at 8% 0%, rgba(20, 235, 176, 0.14), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(255, 45, 75, 0.12), transparent 32%),
    rgba(8, 14, 22, 0.84);
  box-shadow: inset 0 1px 0 rgba(238, 244, 248, 0.035), 0 20px 46px rgba(0, 0, 0, 0.24);
}
.command-countdown {
  border: 1px solid rgba(241, 184, 75, 0.32);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-l);
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.14), rgba(255, 45, 75, 0.08)),
    rgba(4, 10, 16, 0.72);
}
.command-countdown strong {
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1;
}
.command-countdown small {
  color: #c7d6df;
  font-weight: 600;
  line-height: 1.35;
}
.command-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.command-action-grid article,
.command-bucket,
.command-card {
  min-width: 0;
  border: 1px solid rgba(95, 199, 223, 0.16);
  border-radius: var(--radius-l);
  background: rgba(3, 12, 18, 0.74);
}
.command-action-grid article {
  display: grid;
  gap: var(--space-2);
  padding: 13px;
}
.command-action-grid span,
.command-bucket-head span,
.command-card-copy small {
  color: #79eaff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.command-action-grid strong {
  color: #ffffff;
  font-size: 1.04rem;
}
.command-action-grid p {
  margin: 0;
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.35;
}
.command-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.command-bucket {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}
.command-bucket-head {
  display: grid;
  gap: var(--space-1);
}
.command-bucket-head small {
  color: #9fb2c0;
  font-weight: 600;
  line-height: 1.35;
}
.command-card-grid {
  display: grid;
  gap: var(--space-3);
}
.command-card {
  overflow: hidden;
}
.command-card.buy {
  border-color: rgba(20, 235, 176, 0.26);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.085), transparent 62%),
    rgba(3, 12, 18, 0.76);
}
.command-card.hold,
.command-card.watch {
  border-color: rgba(241, 184, 75, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 190, 58, 0.08), transparent 62%),
    rgba(3, 12, 18, 0.76);
}
.command-card.sell,
.command-card.avoid {
  border-color: rgba(255, 45, 75, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 45, 75, 0.08), transparent 62%),
    rgba(3, 12, 18, 0.76);
}
.command-card.command-gatekeeper {
  border-color: rgba(255, 190, 58, 0.3);
  background:
    linear-gradient(135deg, rgba(255, 190, 58, 0.085), rgba(8, 14, 22, 0.18)),
    rgba(3, 12, 18, 0.76);
}
.command-card.command-upgrade .command-card-copy small,
.command-card.buy .command-card-copy small {
  color: #65f7c9;
}
.command-card.command-downgrade .command-card-copy small,
.command-card.sell .command-card-copy small,
.command-card.avoid .command-card-copy small {
  color: #ff8aa0;
}
.command-card.command-gatekeeper .command-card-copy small,
.command-card.hold .command-card-copy small,
.command-card.watch .command-card-copy small {
  color: #ffd76a;
}
.command-card > a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}
.command-card-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.command-card-copy strong {
  color: #ffffff;
  font-size: var(--t-base);
  line-height: 1.05;
}
.command-card-copy em,
.command-card-copy span {
  color: #aebfcb;
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
}
.command-links {
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 8px 10px 10px;
}
.command-links a {
  border: 1px solid rgba(95, 199, 223, 0.14);
  border-radius: var(--radius-pill);
  padding: 4px 7px;
  background: rgba(8, 14, 22, 0.64);
  color: #eaf4f8;
  font-size: var(--t-micro);
  font-weight: 700;
  text-decoration: none;
}
.command-links a:hover,
.command-links a:focus-visible {
  border-color: rgba(20, 235, 176, 0.42);
  outline: none;
}
.page-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.page-summary div {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  gap: 5px;
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.78);
}
.page-summary div:nth-child(2) {
  border-color: rgba(85, 214, 165, 0.2);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.1), transparent 52%),
    rgba(15, 24, 33, 0.78);
}
.page-summary div:nth-child(3) {
  border-color: rgba(241, 184, 75, 0.22);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.1), transparent 52%),
    rgba(15, 24, 33, 0.78);
}
.page-summary div:nth-child(4),
.page-summary div:nth-child(5) {
  border-color: rgba(255, 101, 124, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.09), transparent 52%),
    rgba(15, 24, 33, 0.78);
}
.page-summary span,
.page-summary small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-summary span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.page-summary strong {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
}
.tool-trust-strip {
  position: relative;
  border: 1px solid rgba(20, 235, 176, 0.18);
  border-left: 3px solid var(--neon-teal-ink);
  border-radius: var(--radius-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: var(--space-6);
  padding: 9px 12px 9px 13px;
  background:
    radial-gradient(circle at 12px 50%, rgba(41, 242, 192, 0.2), transparent 42px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(20, 235, 176, 0.05), rgba(255, 190, 58, 0.035)),
    rgba(3, 12, 18, 0.78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #b9cad6;
  font-size: var(--t-small);
  line-height: 1.3;
}
.tool-trust-strip .trust-kicker,
.tool-trust-strip b {
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(0, 229, 255, 0.06);
  color: var(--neon-teal-ink);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tool-trust-strip strong {
  color: #ffffff;
  font-size: var(--t-body);
}
.tool-trust-strip .trust-copy {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
  min-width: min(100%, 280px);
}
.tool-trust-strip small {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  color: #aebfcb;
  font-weight: 600;
}
.tool-trust-strip small span {
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.045);
  color: #d1e3eb;
}
.tool-trust-strip .trust-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.tool-trust-strip b.on-demand {
  border-color: rgba(255, 190, 58, 0.24);
  color: var(--neon-gold);
}
.tool-trust-strip.fallback,
.tool-trust-strip b.fallback {
  border-color: rgba(255, 101, 124, 0.28);
}
.tool-trust-strip.fallback .trust-kicker,
.tool-trust-strip b.fallback {
  color: #ff657c;
}
.tool-trust-strip.unavailable,
.tool-trust-strip b.unavailable {
  border-color: rgba(255, 51, 95, 0.38);
}
.tool-trust-strip.unavailable {
  border-left-color: #ff335f;
  background:
    radial-gradient(circle at 0 0, rgba(255, 51, 95, 0.14), transparent 42%),
    rgba(8, 14, 22, 0.7);
}
.tool-trust-strip.unavailable .trust-kicker,
.tool-trust-strip b.unavailable {
  color: #ff5f7c;
}
.tool-trust-strip.on-demand {
  border-left-color: var(--neon-gold);
}
.tool-trust-strip.live {
  border-left-color: var(--neon-teal-ink);
}
@keyframes outage-status-pulse {
  0%,
  100% {
    opacity: 0.72;
    box-shadow: 0 0 10px rgba(255, 51, 95, 0.66);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 51, 95, 0.92);
  }
}
.page-toolbar {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 190px 190px;
  gap: var(--space-5);
  padding: var(--space-6);
  background:
    linear-gradient(90deg, rgba(95, 199, 223, 0.1), transparent 36%, rgba(241, 184, 75, 0.06)),
    rgba(15, 24, 33, 0.76);
}
.page-toolbar label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.program-toolbar label:first-child {
  align-content: start;
}
.program-toolbar label:first-child small {
  display: block;
  margin-top: -1px;
  color: #8fa1af;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.page-indexes {
  margin-top: var(--space-6);
}
.page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.page-tabs button {
  min-height: 44px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: 7px;
  background: rgba(15, 24, 33, 0.86);
  color: var(--muted);
  padding: 10px 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-tabs button:hover,
.page-tabs button:focus-visible,
.page-tabs button.is-active {
  border-color: rgba(95, 199, 223, 0.5);
  background: rgba(95, 199, 223, 0.14);
  color: var(--ink);
  outline: none;
}
.page-tabs button[data-page-tab="sleepers"].is-active,
.page-tabs button[data-page-tab="sleepers"]:hover,
.page-tabs button[data-page-tab="sleepers"]:focus-visible {
  border-color: rgba(210, 122, 255, 0.5);
  background: rgba(210, 122, 255, 0.14);
}
.player-tabs {
  margin-top: var(--space-11);
}
.featured-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}
.program-featured {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.program-section-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: -2px;
  color: var(--muted);
}
.program-section-heading span {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.program-section-heading strong {
  color: #9fb1bf;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}
.featured-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.82);
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.featured-card:nth-child(2n) {
  border-color: rgba(85, 214, 165, 0.2);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.09), transparent 52%),
    rgba(15, 24, 33, 0.82);
}
.featured-card:nth-child(3n) {
  border-color: rgba(241, 184, 75, 0.22);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.09), transparent 52%),
    rgba(15, 24, 33, 0.82);
}
.featured-card:hover,
.featured-card:focus-visible {
  border-color: rgba(85, 214, 165, 0.44);
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 214, 165, 0.1);
}
.featured-card-top {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rankings-featured {
  position: relative;
  align-content: start;
  gap: 9px;
  padding-top: var(--space-5);
}
.rankings-featured .page-card-art {
  border-color: rgba(95, 199, 223, 0.2);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(105, 255, 205, 0.08);
}
.featured-card strong,
.featured-card small,
.featured-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.featured-card small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
.featured-card .featured-why {
  color: #d5e2ec;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}
.featured-card em {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.featured-pill {
  min-width: 0;
  width: fit-content;
  border-radius: var(--radius-pill);
  background: rgba(255, 139, 58, 0.14);
  color: #ff9b45;
  padding: 5px 8px;
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.performance-badge {
  width: fit-content;
  border: 1px solid rgba(95, 199, 223, 0.36);
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.12);
  color: #9ae8ff;
  padding: 5px 8px;
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
}
.tool-list {
  display: grid;
  gap: var(--space-5);
}
.page-result-row {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  background: rgba(13, 21, 29, 0.82);
  color: var(--ink);
}
.page-result-row:hover,
.page-result-row:focus-visible {
  border-color: rgba(95, 199, 223, 0.5);
  outline: none;
}
.page-result-link {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(150px, auto);
  gap: var(--space-8);
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.page-result-link:hover,
.page-result-link:focus-visible {
  outline: none;
}
.page-card-art {
  width: 92px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3145, #27715f);
  color: var(--gold);
  font-weight: 700;
}
.page-result-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.page-result-metric {
  border-radius: 7px;
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  color: var(--muted);
}
.page-result-metric strong {
  color: var(--green);
  font-size: 1.35rem;
}
.rich-empty {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-8);
  background: rgba(15, 24, 33, 0.78);
  color: var(--muted);
}
.rich-empty strong {
  color: var(--ink);
  font-size: var(--t-base);
}
.rich-empty span {
  max-width: 760px;
  line-height: 1.45;
}
.database-page {
  width: min(1280px, calc(100% - 32px));
}
.database-toolbar {
  grid-template-columns: minmax(240px, 1.55fr) repeat(6, minmax(135px, 1fr));
}
.account-page {
  width: min(1240px, calc(100% - 32px));
}
.program-page {
  width: min(1280px, calc(100% - 32px));
}
.program-layout {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-6);
  align-items: start;
}
.reward-target-spotlight .status-action {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.source-note {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.58);
  color: #b9c8d3;
  padding: 10px 12px;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.45;
}
.reward-actions .primary-action,
.reward-actions .secondary-action,
.reward-actions .status-action {
  border: 1px solid rgba(95, 199, 223, 0.3);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.16), rgba(8, 14, 22, 0.56)),
    rgba(8, 14, 22, 0.72);
  color: #e5f2f8;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 10px 10px;
  box-shadow: none;
  filter: none;
  font-size: clamp(0.74rem, 0.86vw, 0.82rem);
  font-weight: 700;
  line-height: 1.05;
}
.reward-actions .primary-action:hover,
.reward-actions .primary-action:focus-visible,
.reward-actions .secondary-action:hover,
.reward-actions .secondary-action:focus-visible,
.reward-actions .status-action:hover,
.reward-actions .status-action:focus-visible {
  border-color: rgba(95, 199, 223, 0.58);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.24), rgba(85, 214, 165, 0.12)),
    rgba(8, 14, 22, 0.82);
  color: var(--ink);
  outline: none;
}
.program-guide {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.program-guide article {
  min-width: 0;
  border: 1px solid rgba(95, 199, 223, 0.15);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px 10px;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), rgba(85, 214, 165, 0.04)),
    rgba(8, 14, 22, 0.58);
  padding: var(--space-5);
}
.program-guide article:nth-child(2) {
  border-color: rgba(85, 214, 165, 0.22);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.1), transparent 52%),
    rgba(8, 14, 22, 0.58);
}
.program-guide article:nth-child(3) {
  border-color: rgba(241, 184, 75, 0.22);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.1), transparent 52%),
    rgba(8, 14, 22, 0.58);
}
.program-guide article:nth-child(4) {
  border-color: rgba(255, 101, 124, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.09), transparent 52%),
    rgba(8, 14, 22, 0.58);
}
.program-guide span {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: rgba(85, 214, 165, 0.14);
  color: var(--green);
  font-weight: 700;
}
.program-guide strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-guide p {
  grid-column: 2;
  margin: -3px 0 0;
  color: #b8c6d0;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
}
.program-session-builder {
  margin-top: var(--space-5);
  border: 1px solid rgba(85, 214, 165, 0.18);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) auto minmax(0, 1.3fr);
  gap: var(--space-5);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.09), rgba(95, 199, 223, 0.06)),
    rgba(15, 24, 33, 0.74);
  padding: var(--space-5);
}
.program-session-builder article span {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.program-session-builder article strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.2;
}
.program-session-builder article small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
.session-choice {
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(8, 14, 22, 0.65);
  padding: var(--space-1);
}
.session-choice button {
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
}
.session-choice button.is-active {
  background: rgba(85, 214, 165, 0.16);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(85, 214, 165, 0.28);
}
.program-session-builder ol {
  margin: 0;
  padding-left: var(--space-9);
  color: #d8e4ea;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.45;
}
.program-session {
  margin-top: var(--space-6);
  border: 1px solid rgba(85, 214, 165, 0.2);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.95fr) auto;
  gap: var(--space-7);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.1), rgba(95, 199, 223, 0.08)),
    rgba(15, 24, 33, 0.86);
  padding: var(--space-7);
  box-shadow: var(--shadow);
}
.program-session h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.05;
}
.program-session p {
  margin: 0;
  color: #b8c6d0;
  line-height: 1.4;
}
.program-session ol {
  margin: 0;
  padding-left: var(--space-9);
  color: #d8e4ea;
  line-height: 1.45;
}
.program-session li + li {
  margin-top: 5px;
}
.program-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-end;
}
.program-list,
.program-detail {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.07), transparent 52%),
    rgba(15, 24, 33, 0.86);
  box-shadow: var(--shadow);
}
.program-detail {
  border-color: rgba(85, 214, 165, 0.2);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.86);
}
.program-list {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}
.program-progress-meter {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 7px;
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(147, 164, 179, 0.14);
}
.program-progress-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}
.program-detail {
  position: sticky;
  top: 14px;
  padding: var(--space-8);
}
.program-detail h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
}
.program-detail > p:not(.eyebrow) {
  color: #b8c6d0;
  line-height: 1.45;
}
.program-checklist ul {
  padding-left: 0;
  list-style: none;
}
.program-checklist label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.pack-page {
  width: min(1280px, calc(100% - 32px));
}
.pack-toolbar {
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, 0.8fr));
}
.pack-layout {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--space-6);
  align-items: start;
}
.pack-panel,
.pack-compare {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.84);
  box-shadow: var(--shadow);
  padding: var(--space-7);
}
.pack-panel:nth-child(2),
.pack-compare {
  border-color: rgba(95, 199, 223, 0.2);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.84);
}
.pack-panel h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1;
}
.pack-decision-panel.is-default-read {
  display: grid;
  gap: var(--space-5);
  border-color: rgba(20, 235, 176, 0.2);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.08), rgba(0, 229, 255, 0.035)),
    rgba(8, 14, 22, 0.82);
}
.pack-decision-panel.is-default-read h2 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}
.pack-decision-panel.is-default-read .program-guidance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.pack-decision-panel.is-default-read .program-guidance article {
  padding: var(--space-5);
}
.pack-panel p,
.pack-reasons {
  color: #b8c6d0;
  line-height: 1.45;
}
.pack-meter {
  overflow: hidden;
  height: 12px;
  margin: 14px 0;
  border-radius: var(--radius-pill);
  background: rgba(147, 164, 179, 0.14);
}
.pack-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--red));
}
.pack-meter.good span {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}
.pack-meter.watch span {
  background: linear-gradient(90deg, var(--gold), var(--cyan));
}
.pack-meter.bad span {
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.pack-reasons {
  margin: 12px 0 0;
  padding-left: var(--space-9);
}
.pack-reasons li + li {
  margin-top: var(--space-3);
}
.pack-compare {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
.pack-type-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  display: grid;
  gap: 7px;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 52%),
    rgba(8, 14, 22, 0.54);
  color: var(--ink);
  padding: var(--space-5);
  text-align: left;
}
.pack-type-card:nth-child(2n) {
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), transparent 52%),
    rgba(8, 14, 22, 0.54);
}
.pack-type-card:nth-child(3n) {
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.09), transparent 52%),
    rgba(8, 14, 22, 0.54);
}
.pack-type-card:hover,
.pack-type-card:focus-visible,
.pack-type-card.is-active {
  border-color: rgba(95, 199, 223, 0.5);
  outline: none;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.12), rgba(85, 214, 165, 0.06)),
    rgba(8, 14, 22, 0.74);
}
.pack-type-card span {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pack-type-card strong {
  color: var(--green);
  font-size: var(--t-base);
}
.pack-type-card small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
}
.inventory-page {
  width: min(1280px, calc(100% - 32px));
}
.inventory-import {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.inventory-manual-paste {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-xl);
  background: rgba(8, 14, 22, 0.4);
  padding: 10px 14px;
}
.inventory-manual-paste summary {
  cursor: pointer;
  color: #cfe3ee;
  font-size: var(--t-base);
  font-weight: 600;
}
.inventory-manual-paste > p {
  margin: 10px 0 8px;
  color: #91a3b0;
  font-size: var(--t-body);
  line-height: 1.5;
}
.inventory-manual-paste textarea {
  min-height: 96px;
}
.inline-textbutton {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--cyan);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.inventory-panel,
.inventory-next-card {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.86);
}
.inventory-panel:nth-child(2) {
  border-color: rgba(241, 184, 75, 0.22);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.09), transparent 48%),
    rgba(15, 24, 33, 0.86);
}
.inventory-panel textarea {
  min-height: 190px;
  resize: vertical;
  border: 1px solid rgba(147, 164, 179, 0.22);
  border-radius: var(--radius-l);
  width: 100%;
  background: var(--field);
  color: var(--ink);
  padding: var(--space-5);
  font: 0.88rem/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
.inventory-import-actions,
.inventory-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
}
.inventory-import-actions span {
  color: #9fb0bd;
  font-size: var(--t-body);
  font-weight: 600;
}
.inventory-help-list {
  display: grid;
  gap: var(--space-4);
  margin: 14px 0 0;
  padding-left: var(--space-8);
  color: #bfccd6;
  line-height: 1.45;
}
.inventory-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0 0 16px;
}
.pack-type-card.is-default-read {
  border-color: rgba(20, 235, 176, 0.14);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.055), transparent 58%),
    rgba(8, 14, 22, 0.56);
}
.pack-type-card.is-watch-read {
  border-color: rgba(255, 190, 58, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 190, 58, 0.075), transparent 58%),
    rgba(8, 14, 22, 0.58);
}
.pack-type-card.is-caution-read {
  border-color: rgba(255, 45, 75, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 45, 75, 0.075), transparent 58%),
    rgba(8, 14, 22, 0.58);
}
.inventory-freshness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: -2px 0 16px;
}
.inventory-freshness-card {
  border: 1px solid rgba(95, 199, 223, 0.2);
  border-radius: var(--radius-l);
  display: grid;
  gap: 5px;
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.11), transparent 62%),
    rgba(8, 14, 22, 0.74);
  box-shadow: inset 0 1px 0 rgba(238, 244, 248, 0.04);
}
.inventory-freshness-card.live,
.inventory-freshness-card.ok {
  border-color: rgba(85, 214, 165, 0.28);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.12), transparent 62%),
    rgba(8, 14, 22, 0.74);
}
.inventory-freshness-card.sample,
.inventory-freshness-card.warn,
.inventory-freshness-card.error {
  border-color: rgba(241, 184, 75, 0.32);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.13), transparent 62%),
    rgba(8, 14, 22, 0.76);
}
.inventory-freshness-card span {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inventory-freshness-card.live span,
.inventory-freshness-card.ok span {
  color: var(--green);
}
.inventory-freshness-card.sample span,
.inventory-freshness-card.warn span,
.inventory-freshness-card.error span {
  color: var(--gold);
}
.inventory-freshness-card strong {
  color: #ffffff;
  font-size: var(--t-base);
  line-height: 1.2;
}
.inventory-freshness-card small {
  color: #aebdca;
  line-height: 1.38;
}
.inventory-next-card {
  min-height: 170px;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.inventory-next-card span {
  color: var(--gold);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inventory-next-card strong {
  color: #ffffff;
  font-size: var(--t-lead);
  line-height: 1.15;
}
.inventory-next-card p {
  margin: 0;
  color: #bfccd6;
  line-height: 1.42;
}
.inventory-next-card p b {
  color: var(--green);
}
.inventory-next-card.sell,
.inventory-row.sell {
  border-color: rgba(85, 214, 165, 0.32);
}
.inventory-next-card.hold,
.inventory-row.hold {
  border-color: rgba(241, 184, 75, 0.34);
}
.inventory-next-card.collect,
.inventory-row.collect {
  border-color: rgba(126, 182, 255, 0.3);
}
.inventory-next-card.squad,
.inventory-row.squad {
  border-color: rgba(95, 199, 223, 0.36);
}
.inventory-next-card.exchange,
.inventory-row.exchange,
.inventory-next-card.quick,
.inventory-row.quick {
  border-color: rgba(255, 101, 124, 0.28);
}
/* Inventory rows carry 4 cells (rank, art, main, priority); give them their
   own grid so the card art does not sit in a huge empty flex column. */
.inventory-row .page-result-link {
  grid-template-columns: auto 72px minmax(0, 1fr) minmax(112px, auto);
  gap: var(--space-6);
  align-items: center;
}
.inventory-row {
  padding: 12px 14px;
}
.inventory-row .inventory-links {
  padding-top: var(--space-4);
}
.inventory-row .inventory-links a {
  padding: 5px 10px;
}
.inventory-row .ranking-number {
  min-width: 42px;
  padding: 6px 8px;
}
.inventory-metrics {
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}
.inventory-metrics span {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: 7px;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: rgba(8, 14, 22, 0.5);
}
.inventory-metrics small {
  color: #91a3b0;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.inventory-metrics strong {
  color: #ffffff;
  font-size: var(--t-base);
}
.inventory-priority em {
  color: var(--green);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 700;
}
.inventory-links {
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  padding-top: var(--space-5);
}
.inventory-links a {
  border: 1px solid rgba(95, 199, 223, 0.26);
  border-radius: var(--radius-pill);
  color: var(--cyan);
  padding: 7px 10px;
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
}
.inventory-links a:hover,
.inventory-links a:focus-visible {
  border-color: rgba(241, 184, 75, 0.5);
  color: var(--gold);
  outline: none;
}
.squad-page {
  width: min(1280px, calc(100% - 32px));
}
.squad-main {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  min-width: 0;
}
.squad-panel,
.squad-detail {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.07), transparent 52%),
    rgba(15, 24, 33, 0.86);
  box-shadow: var(--shadow);
  padding: var(--space-7);
}
/* Owned-first Squad Builder: command deck + binder slots */
.squad-build-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px 12px;
  border: 1px solid rgba(229, 57, 90, 0.32);
  border-radius: 10px;
  background: rgba(20, 8, 14, 0.4);
}
.squad-build-card.is-pitching {
  border-color: rgba(95, 199, 223, 0.3);
  background: rgba(8, 18, 22, 0.4);
}
.squad-build-controls .primary-action {
  padding: 8px 16px;
  flex: none;
}
.squad-build-label {
  color: #cfe3ee;
  font-size: var(--t-base);
  font-weight: 700;
}
/* Rail: upgrade map + fit read stacked and sticky */
.squad-rail .squad-detail {
  position: static;
}
/* Pitchers section: rotation + bullpen side-by-side */
.squad-section[data-squad-section="pitchers"] .squad-section-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-5);
  align-items: start;
}
.squad-panel.is-collapsed .squad-panel-body {
  display: none;
}
/* Binder tiles for lineup and bench */
.squad-slot-binder .slot-best-upgrade {
  border: none;
  background: transparent;
  padding: 4px 0 0;
}
.squad-slot .binder-meta .binder-pos {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 5px 7px;
  border-radius: var(--radius-l);
  background: rgba(127, 216, 255, 0.12);
  border: 1px solid rgba(127, 216, 255, 0.3);
  color: var(--cyan-ink);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.binder-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.squad-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.4);
}
.squad-preset-row .secondary-action {
  padding: 8px 14px;
}
.squad-preset-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(95, 199, 223, 0.32);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(13, 26, 33, 0.85);
}
.squad-preset-chip .squad-preset-delete {
  color: #91a3b0;
  padding: 6px 10px 6px 6px;
  font-size: var(--t-base);
}
.squad-preset-chip .squad-preset-delete:hover {
  color: #ffb3a7;
}
.squad-build-bar .primary-action {
  padding: 8px 16px;
}
.squad-own-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.squad-own-tag.is-owned {
  background: rgba(85, 214, 165, 0.16);
  border: 1px solid rgba(85, 214, 165, 0.4);
  color: #7ef0c2;
}
.squad-own-tag.is-unowned {
  background: rgba(147, 164, 179, 0.12);
  border: 1px solid rgba(147, 164, 179, 0.28);
  color: #9db4c0;
}
.squad-acquire-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-l);
  background: rgba(20, 8, 14, 0.5);
  border: 1px solid rgba(229, 57, 90, 0.28);
  color: #cfa6b0;
  font-size: var(--t-body);
  line-height: 1.5;
}
.squad-results-layout .squad-panel,
.squad-results-panel {
  border-color: rgba(85, 214, 165, 0.2);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.86);
}
.squad-detail {
  position: sticky;
  top: 14px;
}
.squad-detail > p:not(.eyebrow) {
  color: #b8c6d0;
  line-height: 1.45;
}
.squad-section {
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.32);
  overflow: hidden;
}
.squad-save-row {
  border: 1px solid rgba(85, 214, 165, 0.18);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 10px 0 0;
  padding: var(--space-4);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), rgba(95, 199, 223, 0.05)),
    rgba(8, 14, 22, 0.58);
}
.squad-actions button:hover,
.squad-actions button:focus-visible {
  border-color: rgba(95, 199, 223, 0.48);
  outline: none;
  transform: translateY(-1px);
}
.squad-section.is-collapsed .squad-section-body {
  display: none;
}
.squad-group {
  border: 1px solid rgba(147, 164, 179, 0.1);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.28);
  padding: var(--space-5);
}
.squad-slot {
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  background: rgba(8, 14, 22, 0.52);
  padding: 11px;
}
.priority-control button:hover,
.priority-control button:focus-visible {
  background: rgba(95, 199, 223, 0.1);
  color: var(--ink);
  outline: none;
}
.priority-control button.is-active {
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.22), rgba(85, 214, 165, 0.12)),
    rgba(15, 24, 33, 0.92);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(85, 214, 165, 0.22);
}
.slot-best-upgrade {
  border: 1px solid rgba(95, 199, 223, 0.12);
  border-radius: var(--radius-l);
  background: rgba(95, 199, 223, 0.05);
  padding: var(--space-3);
}
.starter-card-read {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  background: rgba(15, 24, 33, 0.65);
  padding: var(--space-3);
}
.starter-card-read.has-card {
  border-color: rgba(85, 214, 165, 0.24);
  background: rgba(85, 214, 165, 0.08);
}
.starter-card-read .database-art {
  width: 48px;
  height: 56px;
  font-size: var(--t-base);
}
.starter-suggestions:empty {
  display: none;
}
.starter-suggestions .database-art {
  width: 44px;
  height: 52px;
  font-size: var(--t-body);
}
.squad-hole {
  width: 100%;
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 48%),
    rgba(8, 14, 22, 0.72);
  color: var(--ink);
  min-height: 112px;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.squad-hole:hover,
.squad-hole:focus-visible,
.squad-hole.is-active,
.squad-fit-card:hover,
.squad-fit-card:focus-visible,
.squad-fit-card.is-active {
  border-color: rgba(95, 199, 223, 0.5);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.14), rgba(85, 214, 165, 0.06)),
    rgba(8, 14, 22, 0.72);
  outline: none;
}
.squad-hole-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  position: relative;
  z-index: 1;
}
.squad-fit-card {
  min-width: 0;
  cursor: pointer;
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 48px;
  gap: var(--space-5);
  align-items: center;
  background: rgba(8, 14, 22, 0.52);
  color: var(--ink);
  padding: var(--space-4);
  text-align: left;
}
.squad-fit-main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.account-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.account-benefit-grid {
  align-items: start;
}
.account-benefit-grid > .account-panel:only-child {
  grid-column: 1 / -1;
}
.account-status-panel {
  min-height: 0;
  padding: 12px 14px 12px 18px;
}
.account-status-panel .account-badge {
  padding: 6px 9px;
  font-size: var(--t-small);
}
.account-status-panel .rich-empty {
  margin-top: var(--space-3);
  padding: 8px 10px;
}
.account-auth-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(260px, 1.14fr);
  gap: 10px 18px;
  align-items: center;
  padding: 12px 18px;
}
.account-auth-details {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-2xl);
  padding: 0;
  background: rgba(8, 14, 22, 0.34);
  overflow: hidden;
}
.account-auth-panel .auth-form {
  padding: 12px 14px 14px;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px 10px;
  align-items: end;
}
.account-auth-panel .account-note {
  margin: 0;
  color: #a8bdca;
  font-size: var(--t-body);
  line-height: 1.4;
}
.account-auth-panel .primary-action,
.account-auth-panel .secondary-action {
  min-height: 44px;
  padding: 9px 12px;
  white-space: nowrap;
}
.account-auth-panel .status-action {
  grid-column: 1 / -1;
  width: fit-content;
}
.account-auth-panel.is-signed-in .account-note {
  grid-column: 1 / -1;
  font-size: var(--t-body);
}
.account-logout-toggle {
  border-color: rgba(255, 101, 124, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.14), rgba(8, 14, 22, 0.72)),
    rgba(8, 14, 22, 0.78);
  color: #ffe6eb;
}
.account-logout-toggle:hover,
.account-logout-toggle:focus-visible {
  border-color: rgba(255, 101, 124, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.22), rgba(8, 14, 22, 0.82)),
    rgba(8, 14, 22, 0.86);
}
.account-hero {
  border-color: rgba(95, 199, 223, 0.34);
  background:
    radial-gradient(circle at 14% 12%, rgba(95, 199, 223, 0.24), transparent 34%),
    radial-gradient(circle at 84% 4%, rgba(255, 101, 124, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(85, 214, 165, 0.12), rgba(8, 14, 22, 0.76) 46%, rgba(241, 184, 75, 0.1)),
    rgba(15, 24, 33, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(238, 244, 248, 0.04),
    0 24px 58px rgba(0, 0, 0, 0.28);
  overflow: visible;
  align-items: center;
}
.account-roadmap {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.account-roadmap article {
  border: 1px solid rgba(147, 164, 179, 0.15);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(91, 214, 255, 0.12), transparent 44%),
    rgba(8, 14, 22, 0.62);
  padding: var(--space-6);
  position: relative;
  overflow: visible;
}
.account-roadmap article::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--cyan);
  opacity: 0.86;
}
.account-roadmap article:nth-child(2) {
  border-color: rgba(85, 214, 165, 0.25);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.14), transparent 48%),
    rgba(8, 14, 22, 0.62);
}
.account-roadmap article:nth-child(2)::after {
  background: var(--green);
}
.account-roadmap article:nth-child(3) {
  border-color: rgba(241, 184, 75, 0.25);
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.16), transparent 50%),
    rgba(8, 14, 22, 0.62);
}
.account-roadmap article:nth-child(3)::after {
  background: var(--gold);
}
.account-roadmap article:nth-child(4) {
  border-color: rgba(255, 101, 124, 0.25);
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.14), transparent 50%),
    rgba(8, 14, 22, 0.62);
}
.account-roadmap article:nth-child(4)::after {
  background: var(--red);
}
.account-roadmap span {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(85, 214, 165, 0.34);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: rgba(85, 214, 165, 0.12);
  color: var(--green);
  font-size: var(--t-small);
  font-weight: 700;
}
.account-roadmap strong {
  display: block;
  margin: 10px 0 6px;
  color: var(--ink);
  font-size: var(--t-base);
}
.account-roadmap p {
  margin: 0;
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.45;
}
.account-page.is-member-signed-in .account-roadmap,
.account-page.is-member-signed-in .account-member-steps,
.account-page.is-member-signed-in .account-benefit-grid,
.account-page.is-member-signed-in .local-profile-hub,
.account-page.is-member-signed-in .account-member-info {
  display: none;
}
.account-page.is-member-signed-in .account-hero {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-8);
}
.account-page.is-member-signed-in .account-hero .hero-stage {
  display: none;
}
.account-page.is-member-signed-in .account-hero h1 {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
}
.account-page.is-member-signed-in .account-hero p:not(.eyebrow) {
  max-width: 780px;
}
.account-panel {
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 88% 0%, rgba(95, 199, 223, 0.08), transparent 34%),
    rgba(15, 24, 33, 0.86);
  padding: var(--space-8);
  overflow: visible;
}
.account-panel-cyan {
  border-color: rgba(95, 199, 223, 0.22);
  background:
    radial-gradient(circle at 94% 10%, rgba(95, 199, 223, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), rgba(15, 24, 33, 0.86) 48%),
    rgba(15, 24, 33, 0.9);
}
.account-panel-green {
  border-color: rgba(85, 214, 165, 0.22);
  background:
    radial-gradient(circle at 92% 12%, rgba(85, 214, 165, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), rgba(15, 24, 33, 0.86) 50%),
    rgba(15, 24, 33, 0.9);
}
.account-panel-green::before {
  background: var(--green);
}
.account-panel-gold {
  border-color: rgba(241, 184, 75, 0.24);
  background:
    radial-gradient(circle at 92% 12%, rgba(241, 184, 75, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(241, 184, 75, 0.08), rgba(15, 24, 33, 0.86) 50%),
    rgba(15, 24, 33, 0.9);
}
.account-panel-gold::before {
  background: var(--gold);
}
.account-panel-rose {
  border-color: rgba(255, 101, 124, 0.24);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 101, 124, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 101, 124, 0.08), rgba(15, 24, 33, 0.86) 50%),
    rgba(15, 24, 33, 0.9);
}
.account-panel-rose::before {
  background: var(--red);
}
.profile-settings-panel {
  margin-top: var(--space-7);
}
.profile-settings-disclosure {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(41, 242, 192, 0.08), rgba(5, 10, 16, 0.52)),
    rgba(8, 14, 22, 0.62);
}
.profile-settings-disclosure summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 50px;
  padding: 10px 14px;
  list-style: none;
}
.profile-settings-disclosure summary::-webkit-details-marker {
  display: none;
}
.profile-settings-disclosure summary > span {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}
.profile-settings-disclosure summary b {
  color: var(--ink);
  font-size: 0.96rem;
}
.profile-settings-disclosure summary small {
  color: #a8bbc9;
  font-size: var(--t-body);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-settings-disclosure summary em {
  border: 1px solid rgba(85, 214, 165, 0.24);
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
  padding: 6px 10px;
  background: rgba(85, 214, 165, 0.1);
  color: var(--sage);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 700;
}
.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: end;
  border-top: 1px solid rgba(147, 164, 179, 0.1);
  padding: 12px 14px 14px;
}
.profile-settings-grid label {
  display: grid;
  gap: 7px;
}
.profile-settings-grid span {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-settings-grid input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: 7px;
  background: rgba(8, 14, 22, 0.78);
  color: var(--ink);
  padding: 9px 11px;
  font-weight: 600;
}
.profile-settings-grid input[readonly] {
  color: var(--muted);
}
.account-panel-roadmap {
  border-color: rgba(95, 199, 223, 0.22);
  background:
    radial-gradient(circle at 96% 0%, rgba(95, 199, 223, 0.14), transparent 28%),
    radial-gradient(circle at 8% 100%, rgba(241, 184, 75, 0.1), transparent 28%),
    rgba(15, 24, 33, 0.9);
}
.account-badge {
  border: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 22, 0.72);
  color: var(--muted);
  padding: 7px 10px;
  font-size: var(--t-small);
  font-weight: 700;
}
.account-badge.ready {
  border-color: rgba(85, 214, 165, 0.38);
  background: rgba(85, 214, 165, 0.12);
  color: var(--green);
}
.account-badge.active {
  border-color: rgba(255, 70, 104, 0.42);
  background: rgba(255, 70, 104, 0.12);
  color: #ff8fa3;
}
.account-badge.warn {
  border-color: rgba(241, 184, 75, 0.42);
  background: rgba(241, 184, 75, 0.12);
  color: var(--gold);
}
.auth-form {
  display: grid;
  gap: var(--space-5);
}
.auth-actions button:disabled,
.auth-form input:disabled,
.local-profile-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.captcha-box {
  border: 1px solid rgba(95, 199, 223, 0.16);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), rgba(8, 14, 22, 0.62)),
    rgba(8, 14, 22, 0.6);
}
.account-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--space-4);
}
.account-metrics div {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.1), transparent 56%),
    rgba(8, 14, 22, 0.52);
  padding: var(--space-5);
}
.account-metrics div:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.1), transparent 56%),
    rgba(8, 14, 22, 0.52);
}
.account-metrics div:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.12), transparent 56%),
    rgba(8, 14, 22, 0.52);
}
.account-metrics div:nth-child(4) {
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.1), transparent 56%),
    rgba(8, 14, 22, 0.52);
}
.account-metrics div:nth-child(5) {
  background:
    linear-gradient(135deg, rgba(41, 242, 192, 0.09), transparent 56%),
    rgba(8, 14, 22, 0.52);
}
.account-metrics span,
.setup-list span {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-metrics strong {
  display: block;
  margin: 6px 0;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
}
.account-metrics small {
  color: var(--muted);
  font-weight: 600;
}
.membership-plan[data-state="checkout-ready"] .account-badge {
  border-color: rgba(85, 214, 165, 0.38);
  background: rgba(85, 214, 165, 0.12);
  color: var(--green);
}
.membership-plan[data-state="member"] .account-badge {
  border-color: rgba(95, 199, 223, 0.42);
  background: rgba(95, 199, 223, 0.14);
  color: var(--cyan);
}
.membership-tier-ladder {
  width: 100%;
  margin-top: var(--space-7);
  padding: var(--space-9);
  border-color: rgba(95, 199, 223, 0.28);
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(560px, 1.35fr);
  gap: 16px 22px;
  align-items: start;
  background:
    radial-gradient(circle at 47% 6%, rgba(241, 200, 109, 0.11), transparent 24%),
    radial-gradient(circle at 91% 28%, rgba(255, 70, 104, 0.13), transparent 26%),
    linear-gradient(135deg, rgba(4, 23, 31, 0.88), rgba(8, 12, 20, 0.94) 48%, rgba(20, 8, 18, 0.88));
}
.membership-tier-ladder::before {
  background: linear-gradient(180deg, var(--cyan), rgba(241, 200, 109, 0.85), rgba(255, 70, 104, 0.85));
}
.membership-tier-ladder *,
.membership-tier-card * {
  box-sizing: border-box;
  min-width: 0;
}
.membership-tier-ladder,
.membership-tier-card {
  box-sizing: border-box;
}
.membership-ladder-head .eyebrow {
  color: #98dff1;
}
.membership-ladder-head h2 {
  margin: 0;
  max-width: 420px;
  color: var(--ink);
  font-size: clamp(1.65rem, 2vw, 2.35rem);
  line-height: 1.04;
}
.membership-ladder-head p:not(.eyebrow) {
  max-width: 390px;
  margin: 8px 0 0;
  color: #c7d7e1;
  font-size: 0.98rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.membership-tier-ladder .billing-status {
  margin: 18px 0 0;
}
.membership-tier-ladder .billing-status .rich-empty {
  min-height: 0;
  border-color: rgba(147, 164, 179, 0.16);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), rgba(8, 14, 22, 0.56)),
    rgba(8, 14, 22, 0.52);
}
.membership-tier-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: var(--space-5);
  max-width: none;
  margin-top: 0;
  align-items: stretch;
}
.membership-tier-card {
  --tier-metal: #c9824b;
  --tier-strong: #ffcf92;
  --tier-border: rgba(201, 130, 75, 0.34);
  --tier-fill: rgba(201, 130, 75, 0.12);
  --tier-glow: rgba(201, 130, 75, 0.18);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 300px;
  padding: 15px;
  background:
    radial-gradient(circle at 74% 18%, var(--tier-fill), transparent 30%),
    linear-gradient(155deg, rgba(8, 14, 22, 0.88), rgba(3, 8, 13, 0.78)),
    rgba(8, 14, 22, 0.72);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}
.membership-tier-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 44px var(--tier-glow);
  pointer-events: none;
}
.membership-tier-card.is-current-plan {
  border-color: var(--tier-strong);
  box-shadow:
    0 0 0 1px var(--tier-border),
    0 0 42px var(--tier-glow),
    inset 0 0 44px rgba(255, 70, 104, 0.06);
}
.membership-tier-card.is-muted-plan {
  opacity: 0.62;
  filter: saturate(0.58) contrast(0.95);
  background:
    radial-gradient(circle at 72% 16%, rgba(147, 164, 179, 0.08), transparent 29%),
    linear-gradient(155deg, rgba(8, 14, 22, 0.78), rgba(3, 8, 13, 0.68)),
    rgba(8, 14, 22, 0.62);
}
.membership-tier-card.is-muted-plan:hover,
.membership-tier-card.is-muted-plan:focus-within {
  opacity: 0.82;
  filter: saturate(0.78) contrast(1);
}
.current-tier-marker,
.included-tier-marker {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  border: 1px solid rgba(255, 226, 149, 0.72);
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--tier-strong);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(255, 226, 149, 0.2), rgba(255, 70, 104, 0.16)),
    rgba(5, 10, 16, 0.86);
  box-shadow: 0 0 28px rgba(255, 70, 104, 0.3), inset 0 0 18px rgba(255, 226, 149, 0.1);
  transform: rotate(1.5deg);
}
.included-tier-marker {
  border-color: rgba(147, 164, 179, 0.26);
  border-radius: var(--radius-pill);
  color: #aab9c4;
  background: rgba(5, 10, 16, 0.58);
  box-shadow: inset 0 0 16px rgba(147, 164, 179, 0.07);
  transform: none;
}
.tier-gold {
  --tier-metal: var(--gold-ink);
  --tier-strong: #ffe69e;
  --tier-border: rgba(241, 200, 109, 0.48);
  --tier-fill: rgba(241, 200, 109, 0.16);
  --tier-glow: rgba(241, 200, 109, 0.28);
  transform: translateY(-8px);
}
.tier-red-diamond {
  --tier-metal: #ff4668;
  --tier-strong: #ff9caf;
  --tier-border: rgba(255, 70, 104, 0.42);
  --tier-fill: rgba(255, 70, 104, 0.14);
  --tier-glow: rgba(255, 70, 104, 0.22);
}
.tier-card-top,
.tier-feature-list,
.tier-actions {
  position: relative;
  z-index: 1;
}
.tier-card-top {
  display: grid;
  gap: var(--space-3);
}
.tier-badge {
  width: fit-content;
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-pill);
  background: var(--tier-fill);
  color: var(--tier-strong);
  padding: 6px 9px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tier-card-top p {
  margin: 6px 0 0;
  color: #b9c9d5;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tier-card-top h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.38rem, 1.65vw, 1.78rem);
  line-height: 1;
  overflow-wrap: anywhere;
}
.tier-card-note {
  color: #c7aeb6;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.membership-tier-card.is-featured .tier-card-top h3 {
  color: var(--tier-strong);
}
.tier-feature-list {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}
.tier-feature-list li {
  display: flex;
  gap: 9px;
  color: #d8e8ef;
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.24;
}
.tier-feature-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.42em;
  border-radius: var(--radius-pill);
  background: var(--tier-metal);
  box-shadow: 0 0 16px var(--tier-glow);
}
.tier-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  align-self: end;
}
.tier-cta,
.tier-plan-action,
.tier-detail-toggle {
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-l);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.tier-cta {
  background: linear-gradient(135deg, var(--tier-metal), var(--tier-strong));
  color: #061116;
}
.tier-cta:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  filter: grayscale(0.18);
}
.tier-detail-toggle {
  background: rgba(5, 10, 16, 0.46);
  color: var(--tier-strong);
}
.tier-detail-toggle:hover,
.tier-detail-toggle:focus-visible,
.tier-detail-toggle.is-open {
  outline: none;
  background: var(--tier-fill);
  box-shadow: 0 0 22px var(--tier-glow);
}
.membership-inline-rail {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 11px;
  align-self: start;
  margin-top: 0;
  padding: 2px 0 0;
}
.membership-inline-rail > strong {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.membership-inline-rail ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.membership-inline-rail ol::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, rgba(95, 199, 223, 0.42), rgba(241, 200, 109, 0.48), rgba(255, 70, 104, 0.46));
  pointer-events: none;
}
.membership-inline-rail li {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  color: #d9e9ef;
  line-height: 1.1;
}
.membership-inline-rail li > span {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(95, 199, 223, 0.35);
  border-radius: var(--radius-pill);
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  background: rgba(5, 10, 16, 0.88);
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
}
.membership-inline-rail li:nth-child(1) > span,
.membership-inline-rail li:nth-child(1) b {
  color: #ffcf92;
  border-color: rgba(255, 207, 146, 0.36);
}
.membership-inline-rail li:nth-child(2) > span,
.membership-inline-rail li:nth-child(2) b {
  color: #7ee3f3;
  border-color: rgba(126, 227, 243, 0.4);
}
.membership-inline-rail li:nth-child(3) > span,
.membership-inline-rail li:nth-child(3) b {
  color: #ff9caf;
  border-color: rgba(255, 156, 175, 0.44);
}
.membership-inline-rail b {
  display: block;
  margin: 0;
  font-size: var(--t-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.membership-inline-rail small {
  color: #a9b9c5;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
}
.membership-highlights {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}
.membership-plan-card {
  --tier-metal: #c9824b;
  --tier-border: rgba(201, 130, 75, 0.34);
  --tier-glow: rgba(201, 130, 75, 0.14);
  --tier-fill: rgba(201, 130, 75, 0.13);
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-l);
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  background:
    linear-gradient(135deg, var(--tier-fill), transparent 60%),
    rgba(8, 14, 22, 0.52);
  color: inherit;
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}
.membership-plan-card[data-plan-toggle="plus"] {
  --tier-metal: var(--gold-ink);
  --tier-border: rgba(241, 200, 109, 0.34);
  --tier-glow: rgba(241, 200, 109, 0.14);
  --tier-fill: rgba(241, 200, 109, 0.13);
}
.membership-plan-card[data-plan-toggle="pro"] {
  --tier-metal: #ff4668;
  --tier-border: rgba(255, 70, 104, 0.38);
  --tier-glow: rgba(255, 70, 104, 0.18);
  --tier-fill: rgba(255, 70, 104, 0.13);
}
.membership-plan-card:hover,
.membership-plan-card:focus-visible,
.membership-plan-card.is-open {
  border-color: var(--tier-border);
  box-shadow: 0 0 24px var(--tier-glow);
  outline: none;
  transform: translateY(-1px);
}
.membership-highlights span {
  display: block;
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.membership-highlights strong {
  display: block;
  margin: 5px 0 3px;
  color: #ffffff;
  font-size: var(--t-base);
  line-height: 1.15;
}
.membership-highlights small {
  color: #aebfcb;
  font-size: var(--t-small);
  font-weight: 600;
}
.membership-plan-card::after {
  content: "View details";
  margin-top: 5px;
  color: var(--tier-metal);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0;
}
.membership-plan-card.is-open::after {
  content: "Hide details";
}
.plan-detail {
  --tier-metal: #c9824b;
  --tier-border: rgba(201, 130, 75, 0.36);
  --tier-glow: rgba(201, 130, 75, 0.16);
  --tier-fill: rgba(201, 130, 75, 0.12);
  position: relative;
  border: 1px solid var(--tier-border);
  border-radius: var(--radius-l);
  padding: 14px 16px;
  background:
    radial-gradient(circle at 95% 0%, var(--tier-fill), transparent 32%),
    linear-gradient(90deg, var(--tier-fill), transparent 42%),
    rgba(8, 14, 22, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.46), 0 0 34px var(--tier-glow);
  pointer-events: auto;
}
.plan-detail-feature-list li.is-locked {
  border-color: rgba(241, 200, 109, 0.22);
  background:
    linear-gradient(135deg, rgba(241, 200, 109, 0.12), rgba(4, 10, 16, 0.62) 58%),
    rgba(4, 10, 16, 0.58);
}
.plan-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: var(--space-4);
}
.plan-comparison-grid div,
.plan-comparison-card {
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  background: rgba(8, 14, 22, 0.54);
}
.plan-comparison-grid span,
.plan-comparison-grid strong,
.plan-comparison-grid small {
  display: block;
}
.plan-comparison-grid span {
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-comparison-grid strong {
  margin-top: 5px;
  color: var(--ink);
}
.plan-comparison-grid small {
  margin-top: 5px;
  color: #b9c6d2;
  line-height: 1.35;
}
.plan-comparison-card {
  --tier-metal: rgba(201, 130, 75, 0.9);
  --tier-fill: rgba(201, 130, 75, 0.08);
  background:
    linear-gradient(135deg, var(--tier-fill), rgba(8, 14, 22, 0.56)),
    rgba(8, 14, 22, 0.54);
}
.plan-comparison-card.tier-gold {
  --tier-metal: rgba(241, 200, 109, 0.95);
  --tier-fill: rgba(241, 200, 109, 0.1);
  transform: none;
}
.plan-comparison-card.tier-red-diamond {
  --tier-metal: rgba(255, 70, 104, 0.95);
  --tier-fill: rgba(255, 70, 104, 0.1);
}
.plan-comparison-card span {
  color: var(--tier-metal);
}
.plan-comparison-card ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.plan-comparison-card li {
  display: flex;
  gap: var(--space-3);
  color: #c9dbe5;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.28;
}
.plan-comparison-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.45em;
  border-radius: var(--radius-pill);
  background: var(--tier-metal);
  box-shadow: 0 0 12px var(--tier-fill);
}
.local-profile-hub {
  margin: 16px 0;
}
.account-member-steps {
  margin-top: var(--space-7);
}
.account-member-steps .section-head > div > p:not(.eyebrow) {
  max-width: 820px;
  margin: 6px 0 0;
  color: #b8c6d0;
  line-height: 1.45;
}
.account-member-steps .bridge-list {
  margin-top: var(--space-6);
}
.account-drawer {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: 10px;
  margin-top: var(--space-5);
  background: rgba(4, 12, 19, 0.54);
  overflow: hidden;
}
.account-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 50px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.account-drawer summary::-webkit-details-marker {
  display: none;
}
.account-drawer summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-pill);
  color: #55d6ff;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1;
  background: rgba(0, 229, 255, 0.08);
}
.account-drawer[open] summary::after {
  content: "-";
}
.account-drawer summary span {
  color: #9fb4c4;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-drawer summary strong {
  color: #f7fbff;
  font-size: var(--t-base);
}
.account-drawer[open] {
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.07), transparent 52%, rgba(41, 242, 192, 0.05)),
    rgba(4, 12, 19, 0.62);
}
.account-drawer[open] summary {
  border-bottom: 1px solid rgba(147, 164, 179, 0.12);
}
.account-step-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 12px 16px 0;
}
.account-step-chips span {
  border: 1px solid rgba(95, 199, 223, 0.18);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  color: #c9dbe5;
  font-size: var(--t-body);
  font-weight: 600;
  background: rgba(8, 14, 22, 0.5);
}
.account-step-chips b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  color: #061017;
  font-size: var(--t-small);
  background: #55d6ff;
}
.account-quickstart-drawer .bridge-list,
.local-profile-details .local-profile-summary,
.local-profile-details .cloud-readiness,
.local-profile-details .local-profile-notes {
  margin-left: var(--space-7);
  margin-right: var(--space-7);
}
.account-quickstart-drawer .bridge-list,
.local-profile-details .local-profile-notes {
  margin-bottom: var(--space-7);
}
.local-profile-hub .section-head > div > p:not(.eyebrow) {
  max-width: 720px;
  margin: 6px 0 0;
  color: #b8c6d0;
  line-height: 1.45;
}
.cloud-readiness {
  border: 1px solid rgba(0, 229, 255, 0.14);
  border-radius: 14px;
  margin-top: var(--space-6);
  padding: 13px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.08), transparent 42%, rgba(41, 242, 192, 0.06)),
    rgba(4, 12, 19, 0.72);
}
.cloud-readiness-grid article.has-data {
  border-color: rgba(41, 242, 192, 0.22);
  background: linear-gradient(135deg, rgba(41, 242, 192, 0.08), rgba(2, 8, 14, 0.62));
}
.local-profile-actions {
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-7);
  padding-top: var(--space-7);
}
.local-profile-actions span {
  color: #aebdca;
  font-size: var(--t-body);
  font-weight: 600;
}
.local-profile-actions .cloud-action {
  border-color: rgba(85, 214, 165, 0.34);
}
.local-profile-import {
  cursor: pointer;
}
.local-profile-import input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.local-profile-notes {
  margin-top: var(--space-6);
}
.billing-actions .status-action {
  min-height: 40px;
  padding: 9px 12px;
  font-size: var(--t-body);
}
.billing-page {
  min-height: 100vh;
  min-height: 100dvh;
}
.billing-hero {
  max-width: 680px;
  padding-bottom: var(--space-8);
}
.billing-hero h1 {
  max-width: 520px;
}
.billing-page .billing-actions .primary-action,
.billing-page .billing-actions .secondary-action {
  min-height: 44px;
}
.bridge-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.bridge-list div {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-l);
  background:
    linear-gradient(90deg, rgba(95, 199, 223, 0.1), transparent 34%),
    rgba(8, 14, 22, 0.5);
  padding: var(--space-5);
}
.bridge-list div:nth-child(2) {
  background:
    linear-gradient(90deg, rgba(85, 214, 165, 0.1), transparent 34%),
    rgba(8, 14, 22, 0.5);
}
.bridge-list div:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(241, 184, 75, 0.11), transparent 34%),
    rgba(8, 14, 22, 0.5);
}
.bridge-list div:nth-child(4) {
  background:
    linear-gradient(90deg, rgba(255, 101, 124, 0.1), transparent 34%),
    rgba(8, 14, 22, 0.5);
}
.bridge-list strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-base);
}
.bridge-list span {
  display: block;
  margin-top: var(--space-1);
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.4;
}
.bridge-list.compact div {
  padding: 10px 12px;
}
.setup-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.setup-list article {
  border: 1px solid rgba(147, 164, 179, 0.13);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 50%),
    rgba(8, 14, 22, 0.52);
  padding: var(--space-5);
}
.setup-list article:nth-child(2),
.setup-list article:nth-child(4) {
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.08), transparent 50%),
    rgba(8, 14, 22, 0.52);
}
.setup-list article:nth-child(3),
.setup-list article:nth-child(6) {
  background:
    linear-gradient(135deg, rgba(241, 184, 75, 0.09), transparent 50%),
    rgba(8, 14, 22, 0.52);
}
.setup-list article:nth-child(5) {
  background:
    linear-gradient(135deg, rgba(255, 101, 124, 0.08), transparent 50%),
    rgba(8, 14, 22, 0.52);
}
.setup-list article.is-done {
  border-color: rgba(85, 214, 165, 0.28);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.1), transparent 48%),
    rgba(8, 14, 22, 0.56);
}
.setup-list strong {
  display: block;
  margin: 7px 0;
  color: var(--ink);
  font-size: var(--t-base);
}
.setup-list p {
  margin: 0;
  color: #b8c6d0;
  font-size: var(--t-body);
  line-height: 1.4;
}
.position-board {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.position-board button {
  min-height: 112px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.82);
  color: var(--ink);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.position-board button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 19, 28, 0.96) 0%, rgba(12, 25, 38, 0.82) 48%, rgba(12, 25, 38, 0.48) 100%),
    var(--board-card-art, none);
  background-position: center, right 14px top 6px;
  background-repeat: no-repeat;
  background-size: auto, auto 152%;
  opacity: 0;
  transform: translateX(4px) scale(1.01);
  transition: opacity 160ms ease, transform 160ms ease;
}
.position-board button::after {
  content: attr(data-position);
  position: absolute;
  right: -6px;
  bottom: -22px;
  color: rgba(238, 244, 248, 0.035);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
}
.position-board button span {
  position: relative;
  z-index: 1;
  color: var(--red);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.position-board button strong {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
  line-height: 1;
}
.position-board button:hover,
.position-board button:focus-visible,
.position-board button.is-active {
  border-color: rgba(95, 199, 223, 0.54);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.18), rgba(255, 101, 124, 0.08)),
    rgba(15, 24, 33, 0.92);
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 199, 223, 0.1);
}
.rankings-list {
  display: grid;
  gap: var(--space-5);
}
.ranking-row .page-result-link {
  grid-template-columns: 58px 84px minmax(0, 1fr) 120px;
  gap: var(--space-7);
}
.flip-row {
  background:
    radial-gradient(circle at 86% 0%, rgba(85, 214, 165, 0.08), transparent 32%),
    rgba(13, 21, 29, 0.84);
}
.flip-row.trap {
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 101, 124, 0.1), transparent 32%),
    rgba(13, 21, 29, 0.84);
}
.flip-row .page-result-link {
  grid-template-columns: 58px 76px minmax(0, 1fr) 132px;
}
.flip-confidence strong {
  color: var(--cyan);
}
.flip-row.trap .flip-confidence strong {
  color: var(--gold);
}
.flip-metrics {
  margin-top: var(--space-5);
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.flip-metrics span {
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: 7px;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: rgba(8, 14, 22, 0.52);
}
.flip-metrics small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.flip-metrics strong {
  color: var(--ink);
  font-size: var(--t-base);
}
.flip-featured .featured-pill {
  background: rgba(85, 214, 165, 0.14);
  color: var(--green);
}
.flip-featured.traps .featured-pill {
  background: rgba(255, 101, 124, 0.14);
  color: var(--red);
}
.ranking-number {
  min-width: 50px;
  border: 1px solid rgba(255, 208, 106, 0.5);
  border-radius: var(--radius-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 208, 106, 0.9), rgba(255, 101, 124, 0.86));
  color: var(--field);
  padding: 8px 10px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}
.rankings-pager {
  margin-top: 0;
}
.database-shell {
  display: grid;
  gap: var(--space-6);
}
.database-status {
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 600;
}
.database-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.database-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 84% 0%, rgba(95, 199, 223, 0.08), transparent 34%),
    rgba(15, 24, 33, 0.84);
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}
.database-card:nth-child(2n)::after {
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--red));
}
.database-card:nth-child(3n)::after {
  background: linear-gradient(90deg, var(--gold), var(--red), var(--green));
}
.database-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
  opacity: 0.55;
}
.database-card:hover,
.database-card:focus-visible {
  border-color: rgba(95, 199, 223, 0.52);
  transform: translateY(-1px);
  outline: none;
}
.database-art {
  width: 62px;
  aspect-ratio: 5 / 7;
  grid-row: span 2;
  border-radius: var(--radius-m);
  background: linear-gradient(145deg, #172330, #25635b);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  font-weight: 700;
}
.database-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.database-main small,
.database-main em,
.database-meta small {
  color: var(--muted);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 600;
}
.database-main strong {
  min-width: 0;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.database-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-mini-read {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(241, 184, 75, 0.26);
  border-radius: var(--radius-pill);
  display: inline-flex;
  background: rgba(241, 184, 75, 0.09);
  color: #f4cf87;
  padding: 5px 8px;
  font-size: var(--t-small);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.database-meta {
  min-width: 0;
  border-top: 1px solid rgba(147, 164, 179, 0.1);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.database-meta strong {
  color: var(--green);
  font-size: 0.96rem;
}
.database-badges,
.database-quirks {
  margin: 1px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.database-quirks b {
  max-width: 110px;
  border: 1px solid rgba(95, 199, 223, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.08);
  color: #cfe8f2;
  padding: 4px 7px;
  font-size: var(--t-micro);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.database-quirks b.inferred {
  border-color: rgba(241, 184, 75, 0.28);
  background: rgba(241, 184, 75, 0.09);
  color: #f4cf87;
}
.signal-reasons {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  padding-top: var(--space-4);
}
.signal-reasons summary {
  width: fit-content;
  color: var(--cyan);
  cursor: pointer;
  font-size: var(--t-body);
  font-weight: 700;
}
.signal-reasons ul {
  margin: 8px 0 0;
  padding-left: var(--space-8);
  color: #aab8c3;
  font-size: var(--t-body);
  line-height: 1.4;
}
.help-card {
  min-height: 158px;
  padding: var(--space-7);
  display: grid;
  align-content: start;
  gap: 9px;
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.story-grid article {
  padding: var(--space-7);
  min-height: 174px;
  position: relative;
  overflow: hidden;
}
.story-grid article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
  opacity: 0.72;
}
.feature-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.1);
  color: var(--cyan);
  padding: 5px 8px;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.story-grid h3 {
  margin: 0 0 8px;
  font-size: var(--t-base);
}
.story-grid p,
.plan-card p,
.faq-panel p,
.site-footer span {
  margin: 0;
  color: #b8c6d0;
  line-height: 1.45;
}
.plan-preview {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.plan-card.featured {
  border-color: rgba(85, 214, 165, 0.34);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.13), transparent 42%),
    rgba(15, 24, 33, 0.94);
}
.site-footer {
  padding: var(--space-11);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(150px, 1fr));
  gap: var(--space-11);
}
.footer-grid section {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.footer-logo {
  width: min(220px, 100%);
  height: 62px;
  object-fit: contain;
  object-position: left center;
}
.site-footer h2,
.site-footer strong {
  color: var(--gold);
  font-size: var(--t-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer h2,
.site-footer p {
  margin: 0;
}
.site-footer p,
.site-footer span {
  color: #aebbc6;
  line-height: 1.45;
}
.site-footer a {
  color: #c4d0da;
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--green);
  outline: none;
}
.footer-bottom {
  border-top: 1px solid rgba(147, 164, 179, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-11);
  padding-top: var(--space-8);
  font-size: var(--t-body);
}
.tool-page .tool-hero,
.tool-page .page-toolbar,
.tool-page .page-summary div,
.tool-page .featured-card,
.tool-page .database-card,
.tool-page .page-result-row,
.tool-page .pack-panel,
.tool-page .inventory-panel,
.tool-page .program-session-builder,
.tool-page .program-session,
.tool-page .program-detail,
.tool-page .reward-finder,
.tool-page .squad-panel,
.tool-page .squad-detail,
.tool-page .account-panel,
.tool-page .help-card,
.tool-page .plan-card {
  position: relative;
  overflow: hidden;
}
.tool-page .tool-hero::before,
.tool-page .page-toolbar::before,
.tool-page .program-session-builder::before,
.tool-page .program-session::before,
.tool-page .program-detail::before,
.tool-page .reward-finder::before,
.tool-page .pack-panel::before,
.tool-page .inventory-panel::before,
.tool-page .squad-panel::before,
.tool-page .squad-detail::before,
.tool-page .account-panel::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-teal), var(--neon-pink), transparent);
  opacity: 0.8;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.42);
  pointer-events: none;
}
.tool-page .tool-hero {
  padding-top: clamp(24px, 3.4vw, 44px);
}
.tool-page .tool-hero h1 {
  max-width: 860px;
  color: #f7fbff;
  text-shadow:
    0 0 30px rgba(255, 255, 255, 0.08),
    0 0 22px rgba(0, 229, 255, 0.12);
}
.hero-accent,
.tool-page .tool-hero h1 .hero-accent {
  color: var(--hero-accent);
  text-shadow:
    0 0 18px rgba(255, 45, 75, 0.32),
    0 0 28px rgba(255, 45, 75, 0.16);
}
.tool-page .tool-hero p:not(.eyebrow) {
  color: #c0d0dc;
}
.tool-page .eyebrow,
.tool-page .tool-hero .eyebrow,
.tool-page .section-head .eyebrow,
.tool-page .page-summary span,
.tool-page .page-summary small,
.tool-page .page-toolbar label,
.tool-page .featured-card span,
.tool-page .pack-type-card span,
.tool-page .program-guide span,
.tool-page .reward-path-title span,
.tool-page .squad-section-toggle span,
.tool-page .account-kicker,
.tool-page .help-card span,
.tool-page .plan-card span {
  color: #9db1c0;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.18);
}
.tool-page .page-tabs button,
.tool-page .status-action,
.tool-page .status-link,
.tool-page .program-session-actions button,
.tool-page .rankings-pager button,
.tool-page .match-pager button,
.tool-page .lab-tabs button {
  border-color: rgba(0, 229, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 45, 75, 0.06)),
    rgba(2, 8, 14, 0.78);
  color: #dbe8f0;
}
.tool-page:not(.advisor-page) .page-toolbar input,
.tool-page:not(.advisor-page) .page-toolbar select,
.tool-page:not(.advisor-page) .squad-panel input,
.tool-page:not(.advisor-page) .squad-panel select,
.tool-page:not(.advisor-page) .pack-toolbar input,
.tool-page:not(.advisor-page) .pack-toolbar select {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #020810;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 229, 255, 0.02);
}
.tool-page:not(.advisor-page) .page-toolbar,
.tool-page:not(.advisor-page) .reward-finder,
.tool-page:not(.advisor-page) .program-detail,
.tool-page:not(.advisor-page) .program-session,
.tool-page:not(.advisor-page) .page-summary div:has(.tip),
.tool-page:not(.advisor-page) .reward-route-grid article:has(.tip),
.tool-page:not(.advisor-page) .reward-worth-read article:has(.tip),
.tool-page:not(.advisor-page) .squad-panel:has(.tip),
.tool-page:not(.advisor-page) .squad-section:has(.tip) {
  overflow: visible;
}
.tool-page:not(.advisor-page) .page-toolbar label,
.tool-page:not(.advisor-page) .field-label,
.tool-page:not(.advisor-page) .tip {
  position: relative;
  z-index: 6;
}
.tool-page:not(.advisor-page) .page-summary div:nth-child(2),
.tool-page:not(.advisor-page) .featured-card:nth-child(2n),
.tool-page:not(.advisor-page) .program-guide article:nth-child(2),
.tool-page:not(.advisor-page) .pack-type-card:nth-child(2n),
.tool-page:not(.advisor-page) .squad-actions button:nth-child(2n),
.tool-page:not(.advisor-page) .account-panel:nth-child(2n),
.tool-page:not(.advisor-page) .help-card:nth-child(2n) {
  border-color: rgba(20, 235, 176, 0.18);
  background:
    radial-gradient(circle at 14% -10%, rgba(20, 235, 176, 0.11), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(0, 229, 255, 0.07), transparent 26%),
    linear-gradient(145deg, rgba(1, 7, 13, 0.98), rgba(5, 12, 21, 0.96) 55%, rgba(2, 7, 13, 0.99));
}
.tool-page:not(.advisor-page) .page-summary div:nth-child(3),
.tool-page:not(.advisor-page) .featured-card:nth-child(3n),
.tool-page:not(.advisor-page) .program-guide article:nth-child(3),
.tool-page:not(.advisor-page) .pack-type-card:nth-child(3n),
.tool-page:not(.advisor-page) .squad-actions button:nth-child(3n),
.tool-page:not(.advisor-page) .account-panel:nth-child(3n),
.tool-page:not(.advisor-page) .help-card:nth-child(3n) {
  border-color: rgba(255, 190, 58, 0.18);
  background:
    radial-gradient(circle at 14% -10%, rgba(255, 190, 58, 0.1), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(255, 45, 75, 0.07), transparent 26%),
    linear-gradient(145deg, rgba(1, 7, 13, 0.98), rgba(5, 12, 21, 0.96) 55%, rgba(2, 7, 13, 0.99));
}
.tool-page:not(.advisor-page) .page-summary strong,
.tool-page:not(.advisor-page) .featured-card strong,
.tool-page:not(.advisor-page) .pack-type-card strong,
.tool-page:not(.advisor-page) .program-score-grid strong,
.tool-page:not(.advisor-page) .squad-actions strong,
.tool-page:not(.advisor-page) .slot-best-upgrade strong,
.tool-page:not(.advisor-page) .account-metrics strong,
.tool-page:not(.advisor-page) .plan-card.featured strong {
  color: var(--neon-teal-ink);
  text-shadow: 0 0 18px rgba(20, 235, 176, 0.14);
}
/* Visual-only hero stage pass */
.tool-page .tool-hero:has(.hero-stage) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  min-height: clamp(330px, 38vw, 520px);
  padding: clamp(30px, 4.8vw, 62px) clamp(22px, 5vw, 58px);
  isolation: isolate;
}
.tool-page .tool-hero:has(.hero-stage)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 0;
}
.tool-page .hero-copy,
.tool-page .hero-stage {
  position: relative;
  z-index: 1;
}
.tool-page:not(.advisor-page) .hero-copy {
  max-width: 760px;
}
/* v882-hero-h1-vw-ceiling: 3.85vw does not reach its own 4.95rem ceiling until
   a 2057px viewport, but .shell caps content width at 1240px (viewport
   1272px+) -- so past 1272px the headline kept growing against a column that
   had already stopped, wrapping into extra lines it didn't need. Capped both
   vw terms at their value AT that 1272px shell breakpoint (3.85vw and
   1.08vw respectively), so the type stops scaling exactly where the column
   it lives in does. */
.tool-page .tool-hero:has(.hero-stage) h1 {
  max-width: 820px;
  margin-top: var(--space-4);
  font-size: clamp(3rem, min(3.85vw, 48.97px), 4.95rem);
  line-height: 0.98;
}
.tool-page .tool-hero:has(.hero-stage) p:not(.eyebrow) {
  max-width: 720px;
  font-size: clamp(1rem, min(1.08vw, 13.74px), 1.22rem);
  line-height: 1.45;
}
/* end v882-hero-h1-vw-ceiling */
.tool-page .hero-stage {
  display: grid;
  min-height: 250px;
  align-content: center;
}
/* ============================================================
   Floating-card hero standard (house style) — opt-in via .hero-fan
   Cards float free-standing with a folder-tab role label and a ring
   OVR medallion; the whole card is the click target (no View details).
   ============================================================ */
.tool-page .tool-hero:has(.hero-fan) {
  overflow: visible;
}
.hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.tool-page .hero-stage.hero-fan {
  display: block;
  position: relative;
  min-height: clamp(340px, 32vw, 470px);
  overflow: visible;
}
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card {
  position: absolute;
  width: clamp(188px, 16.5vw, 232px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  cursor: pointer;
  overflow: visible;
  transition: filter 0.2s ease;
}
/* the card box must not clip the tab/medallion that hang off its edges */
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card-art {
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(242, 245, 255, 0.36);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  background: linear-gradient(165deg, #16303a, #0a141c);
}
/* folder tab = role label, bolted onto the card's top edge. Never wider
   than the card; wraps and grows UPWARD so it never crops the art. */
.tool-page .tool-hero .hero-stage.hero-fan .prototype-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% + 6px));
  width: max-content;
  max-width: calc(100% - 6px);
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.08;
  z-index: 5;
  padding: 4px 9px 5px;
  border: 1px solid rgba(127, 233, 255, 0.6);
  border-bottom: 0;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #103039, #08161e);
  color: var(--cyan-ink);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.45);
}
/* ring medallion = OVR, clipping the bottom-right corner; scales with card */
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card-body {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: clamp(40px, 3.4vw, 46px);
  height: clamp(40px, 3.4vw, 46px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 0;
  z-index: 6;
  background: radial-gradient(circle at 50% 40%, #0e2731, #071319);
  border: 2px solid rgba(127, 233, 255, 0.55);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card-body strong {
  font-size: var(--t-body);
  line-height: 1;
  margin: 0;
  transform: translateY(-2px);
  color: var(--cyan-ink);
}
/* Only float cards that actually loaded art; hide loading/fallback panels */
.tool-page .tool-hero .hero-stage.hero-fan .hero-art-card:not(.prototype-card) {
  display: none;
}
/* fan positions + float */
@keyframes hero-fan-a { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-11px) rotate(3deg); } }
@keyframes hero-fan-b { 0%, 100% { transform: translateY(0) rotate(-7deg) scale(0.9); } 50% { transform: translateY(9px) rotate(-7deg) scale(0.9); } }
@keyframes hero-fan-c { 0%, 100% { transform: translateY(0) rotate(10deg) scale(0.85); } 50% { transform: translateY(-8px) rotate(10deg) scale(0.85); } }
@media (max-width: 900px) {
.tool-page .hero-stage.hero-fan {
    min-height: 280px;
  }
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card { width: 138px; }
/* These tags carry real labels ("Hot Flip", "Top Recommendation"), not
     facsimile card text, so they hold the 11px floor and wrap instead of
     shrinking below it. See the v663 block. */
.tool-page .tool-hero .hero-stage.hero-fan .prototype-card-body strong {
    font-size: var(--t-micro);
  }
}
/* v935: the .hero-art-card panel (art ghost ::before, diamond ::after, overflow clip)
   was retired when every hero moved onto the .dp-slot blueprint. Nothing emits the
   class any more; its rules were still painting behind the new cards. */
/* v880-squad-hero-desktop-only: the triad was removed outright to fix a real
   mobile problem (632px of scroll before the search bar), but the three cards
   aren't lost content on desktop -- they're the top three Best Fits rows,
   restated up top where a wide screen has the room. Desktop keeps it; the
   860px breakpoint below is the same one Advisor already hides its own
   hero-fan at, so every hero-fan page agrees on where "mobile" starts. */
.hero-squad-card {
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 45, 75, 0.055)),
    rgba(2, 8, 14, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 42px rgba(0, 0, 0, 0.32);
  min-height: 190px;
  align-content: end;
}
.hero-squad-card.is-fit {
  transform: translateY(-20px);
  border-color: rgba(20, 235, 176, 0.42);
}
.hero-squad-card.is-budget {
  transform: translateY(20px);
  border-color: rgba(255, 45, 75, 0.34);
}
@media (max-width: 900px) {
.squad-page .hero-stage.hero-stage-squad { display: none; }
}
/* end v880-squad-hero-desktop-only */
/* v885-squad-hero-height-match: the triad rendered noticeably taller than
   every other hero on the site -- Jason caught it comparing screenshots side
   by side and wants a consistent height as users click between pages.
   Traced to two things, both accidental: renderHeroCards() reuses the shared
   .prototype-card class for its tag/art/detail child styling, and that class
   also happens to match TWO other rules that were never meant for this
   triad --
     1. .tool-hero:has(.prototype-card) widens the hero's second grid column
        to a flat 620px (v697-dial-column's own split is ~446px here);
     2. .hero-stage.hero-fan's shared min-height, clamp(340px, 32vw, 470px),
        is a floor sized for the DEFAULT absolutely-positioned fan -- Advisor
        hit the same thing building ITS OWN triad and explicitly zeroed this
        floor out (v647/v648-advisor-hero-fan) once its cards moved into a
        real grid. Squad's cards never left the default (still absolutely
        positioned via the nth-of-type left/top percentages a few rules up),
        so the floor stayed in force and the wider cards it produces exceeded
        even that floor.
   Fix keeps the fan/stagger look (unlike Advisor's flattened 3-in-a-row grid
   -- that's a real design difference, not just a size one, so it wasn't
   changed here) and just gives the triad the same 520px budget Advisor's
   already sizes into: narrows the column back to the normal split, shrinks
   the shared min-height and card width proportionally. All three need more
   classes in the selector than the rules they're overriding, not just later
   source order -- verified live at 861px, 1440px and 1920px before writing
   this, each landing on exactly 520px. */
/* Scoped to where the fan is actually visible: below 861px the v880/v881
   rules already collapse this hero to one column, and this override's own
   minmax(320px, ...) second column would otherwise fight that collapse --
   at 375px it left ~0px for hero-copy and the headline wrapped into 1360px
   of single-character lines. Caught by testing mobile after this shipped
   its first draft, not before. */
@media (min-width: 901px) {
.squad-page .tool-hero.squad-hero:has(.prototype-card) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  }
}
.squad-page .hero-stage.hero-stage-squad.hero-fan {
  min-height: clamp(220px, 18vw, 260px);
}
/* end v885-squad-hero-height-match */
.tool-page .flip-hero:has(.hero-stage) {
  grid-template-columns: minmax(0, 0.72fr) minmax(540px, 0.86fr);
  gap: clamp(18px, 2.4vw, 34px);
  min-height: clamp(300px, 29vw, 390px);
  padding: clamp(28px, 3.6vw, 44px) clamp(22px, 4vw, 46px);
}
.tool-page:not(.advisor-page) .flip-hero .hero-copy {
  max-width: 760px;
}
.tool-page .tool-hero:has(.prototype-card) {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, min(620px, 48vw));
  gap: clamp(24px, 3.2vw, 46px);
}
.tool-page .tool-hero:has(.prototype-card) .hero-stage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(16px, 1.5vw, 22px);
  width: min(100%, 620px);
  justify-self: end;
}
.tool-page .pack-hero:has(.prototype-card) .hero-stage {
  grid-template-areas:
    "cost chase";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 500px);
}
.spotlight-hero-copy,
.spotlight-card-flow {
  position: relative;
  z-index: 1;
}
.spotlight-hero-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding-left: 2px;
  text-align: center;
}
.spotlight-hero-copy span {
  color: var(--neon-gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spotlight-hero-copy strong {
  max-width: min(100%, 18ch);
  color: #ffffff;
  font-size: clamp(1.55rem, 2.65vw, 2.4rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.spotlight-card-flow {
  min-width: 0;
  min-height: clamp(205px, 20vw, 285px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 0.5vw, 10px);
  padding: 0 clamp(8px, 1.4vw, 18px);
}
.spotlight-card-peek {
  position: relative;
  flex: 0 1 clamp(98px, 10vw, 155px);
  display: grid;
  justify-items: center;
  align-items: end;
  transform: translateY(var(--spotlight-offset, 0)) rotate(var(--spotlight-tilt, 0deg));
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.42));
}
.spotlight-card-peek:nth-child(1) { --spotlight-offset: -10px; --spotlight-tilt: -7deg; z-index: 4; }
.spotlight-card-peek:nth-child(2) { --spotlight-offset: 8px; --spotlight-tilt: -2deg; z-index: 3; margin-left: -18px; }
.spotlight-card-peek:nth-child(3) { --spotlight-offset: -2px; --spotlight-tilt: 5deg; z-index: 2; margin-left: -18px; }
.spotlight-card-peek:nth-child(4) { --spotlight-offset: 14px; --spotlight-tilt: 9deg; z-index: 1; margin-left: -20px; }
.spotlight-card-peek img {
  display: block;
  width: 100%;
  max-height: clamp(190px, 22vw, 285px);
  object-fit: contain;
}
.spotlight-card-peek b {
  width: clamp(64px, 7vw, 98px);
  aspect-ratio: 0.72;
  border: 1px solid rgba(0, 229, 255, 0.28);
  display: grid;
  place-items: center;
  background: rgba(3, 11, 18, 0.74);
  color: var(--neon-cyan);
  font-size: 1.5rem;
  font-weight: 700;
}
.spotlight-card-peek i {
  margin-top: -22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: rgba(2, 8, 14, 0.82);
  color: #f8fbff;
  font-size: var(--t-micro);
  font-style: normal;
  font-weight: 700;
}
.tool-page .flip-hero:has(.prototype-card) .hero-stage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: min(100%, 720px);
  overflow: hidden;
}
.tool-page .hero-stage .prototype-card {
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  padding: 12px 14px 14px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--space-4);
  align-items: stretch;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 18, 31, 0.92), rgba(4, 11, 19, 0.96)),
    radial-gradient(circle at 50% 8%, rgba(0, 229, 255, 0.16), transparent 34%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(0, 229, 255, 0.12);
  cursor: pointer;
}
.tool-page .hero-stage .prototype-card .prototype-tag {
  position: static;
  justify-self: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0, 229, 255, 0.58);
  border-radius: var(--radius-pill);
  background: rgba(0, 229, 255, 0.1);
  color: #1fe7ff;
  font-size: clamp(0.6875rem, 0.72vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.1), 0 0 24px rgba(0, 229, 255, 0.16);
  white-space: nowrap;
}
.tool-page .hero-stage .prototype-card.alt {
  border-color: rgba(20, 235, 176, 0.24);
  background:
    linear-gradient(180deg, rgba(3, 18, 31, 0.92), rgba(4, 11, 19, 0.96)),
    radial-gradient(circle at 50% 8%, rgba(20, 235, 176, 0.14), transparent 34%);
  transform: translateY(20px);
}
.tool-page .hero-stage .prototype-card.alt .prototype-tag {
  border-color: rgba(20, 235, 176, 0.52);
  background: rgba(20, 235, 176, 0.08);
  color: #41f0c1;
  box-shadow: inset 0 0 18px rgba(20, 235, 176, 0.1), 0 0 24px rgba(20, 235, 176, 0.14);
}
.tool-page .hero-stage .prototype-card.budget {
  border-color: rgba(255, 45, 75, 0.24);
  background:
    linear-gradient(180deg, rgba(3, 18, 31, 0.92), rgba(4, 11, 19, 0.96)),
    radial-gradient(circle at 50% 8%, rgba(255, 45, 75, 0.15), transparent 34%);
}
.tool-page .hero-stage .prototype-card.budget .prototype-tag {
  border-color: rgba(255, 45, 75, 0.52);
  background: rgba(255, 45, 75, 0.08);
  color: #ff5c70;
  box-shadow: inset 0 0 18px rgba(255, 45, 75, 0.1), 0 0 24px rgba(255, 45, 75, 0.14);
}
.tool-page .hero-stage .prototype-card .prototype-card-art {
  margin-top: 0;
  width: min(100%, 188px);
  justify-self: center;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-m);
  background:
    radial-gradient(circle at 50% 22%, rgba(0, 229, 255, 0.28), transparent 34%),
    rgba(2, 8, 14, 0.64);
}
.tool-page .hero-stage .prototype-card .prototype-card-body small {
  margin-top: var(--space-2);
  color: #95a7b6;
  font-size: var(--t-body);
}
.tool-page .hero-stage .prototype-card .prototype-detail {
  display: block;
  margin-top: 2px;
  padding: 10px 14px;
  width: min(100%, 176px);
}
.tool-page.account-page:not(.advisor-page) .account-hero {
  overflow: visible;
}
.tool-page.account-page:not(.advisor-page) .account-state-map::before {
  content: "";
  position: absolute;
  inset: 20px 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 38%, rgba(0, 229, 255, 0.18), transparent 30%),
    radial-gradient(circle at 62% 58%, rgba(20, 235, 176, 0.14), transparent 28%),
    radial-gradient(circle at 82% 30%, rgba(255, 45, 75, 0.13), transparent 24%);
  filter: blur(4px);
  opacity: 0.78;
}
.tool-page.account-page:not(.advisor-page) .account-state-line {
  position: absolute;
  left: 21%;
  right: 18%;
  top: 48%;
  height: 1px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(0, 229, 255, 0), rgba(0, 229, 255, 0.46), rgba(20, 235, 176, 0.34), rgba(255, 45, 75, 0));
  transform: rotate(-6deg);
  opacity: 0.72;
}
.tool-page.account-page:not(.advisor-page) .account-state-line-muted {
  left: 28%;
  right: 22%;
  top: 58%;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0), rgba(148, 163, 184, 0.26), rgba(255, 45, 75, 0));
  transform: rotate(10deg);
  opacity: 0.46;
}
.tool-page.account-page:not(.advisor-page) .account-state-node {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: clamp(124px, 13vw, 176px);
  padding: 12px 14px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(2, 10, 18, 0.68);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32), 0 0 28px rgba(0, 229, 255, 0.12);
  text-align: center;
  backdrop-filter: blur(14px);
}
.tool-page.account-page:not(.advisor-page) .account-state-node span {
  color: #6eeaff;
  font-size: clamp(0.6875rem, 0.66vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.tool-page.account-page:not(.advisor-page) .account-state-node strong {
  color: #26ffd4;
  font-size: clamp(1.22rem, 1.7vw, 1.72rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.tool-page.account-page:not(.advisor-page) .account-state-node small {
  color: #a9bed2;
  font-size: clamp(0.72rem, 0.82vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.tool-page.account-page:not(.advisor-page) .account-state-node-live {
  left: 2%;
  top: 20%;
}
.tool-page.account-page:not(.advisor-page) .account-state-node-next {
  left: 36%;
  top: 44%;
  border-color: rgba(20, 235, 176, 0.34);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3), 0 0 28px rgba(20, 235, 176, 0.11);
}
.tool-page.account-page:not(.advisor-page) .account-state-node-off {
  right: 0;
  top: 10%;
  border-color: rgba(255, 45, 75, 0.34);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3), 0 0 28px rgba(255, 45, 75, 0.1);
}
.tool-page.account-page:not(.advisor-page) .account-state-node-off span {
  color: #ff6680;
}
.advisor-page .advisor-setup,
.advisor-page .quick-start,
.advisor-page .watchlist-panel,
.advisor-page .compare-panel,
.advisor-page .proof-strip,
.advisor-page .newest-panel,
.advisor-page .matches,
.advisor-page .tools-hub,
.advisor-page .market-lab,
.advisor-page .lab-panel,
.advisor-page .plan-preview,
.advisor-page .help-center,
.advisor-page .glossary-panel,
.advisor-page .faq-panel {
  border-color: rgba(0, 229, 255, 0.16);
  background:
    radial-gradient(circle at 14% -10%, rgba(0, 229, 255, 0.12), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(255, 45, 75, 0.08), transparent 26%),
    linear-gradient(145deg, rgba(1, 7, 13, 0.98), rgba(5, 12, 21, 0.96) 55%, rgba(2, 7, 13, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 229, 255, 0.08),
    0 18px 58px rgba(0, 0, 0, 0.38);
}
.advisor-page .advisor-setup,
.advisor-page .watchlist-panel,
.advisor-page .compare-panel,
.advisor-page .newest-panel,
.advisor-page .matches,
.advisor-page .tools-hub,
.advisor-page .lab-panel,
.advisor-page .plan-preview,
.advisor-page .help-center,
.advisor-page .glossary-panel,
.advisor-page .faq-panel {
  position: relative;
  overflow: hidden;
}
/* v5.0 search picker layer: keep the live card lookup pop-out above Advisor results. */
.advisor-page .quick-start {
  margin-top: var(--space-7);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(20, 235, 176, 0.05), rgba(255, 45, 75, 0.06)),
    rgba(1, 7, 13, 0.96);
}
.advisor-page .quick-start > div,
.advisor-page .quick-start > a,
.advisor-page .watchlist-summary article,
.advisor-page .watchlist-card,
.advisor-page .compare-card,
.advisor-page .newest-card,
.advisor-page .match-card,
.advisor-page .tool-card,
.advisor-page .tool-detail,
.advisor-page .help-card,
.advisor-page .glossary-grid article,
.advisor-page .plan-card,
.advisor-page .signal-card,
.advisor-page .index-row article {
  border-color: rgba(147, 164, 179, 0.11);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.04), rgba(5, 12, 20, 0.94) 54%, rgba(255, 45, 75, 0.025)),
    rgba(5, 12, 20, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.advisor-page .quick-start > a:nth-of-type(2),
.advisor-page .watchlist-summary article:nth-child(2),
.advisor-page .watchlist-card:nth-child(2n),
.advisor-page .compare-card:nth-child(2n),
.advisor-page .newest-card:nth-child(2n),
.advisor-page .match-card:nth-child(2n),
.advisor-page .tool-card:nth-child(2n),
.advisor-page .help-card:nth-child(2n),
.advisor-page .signal-card:nth-child(2n) {
  background:
    linear-gradient(145deg, rgba(20, 235, 176, 0.05), rgba(5, 12, 20, 0.94) 54%, rgba(0, 229, 255, 0.025)),
    rgba(5, 12, 20, 0.92);
}
.advisor-page .quick-start > a:nth-of-type(3),
.advisor-page .watchlist-summary article:nth-child(3),
.advisor-page .watchlist-card:nth-child(3n),
.advisor-page .compare-card:nth-child(3n),
.advisor-page .newest-card:nth-child(3n),
.advisor-page .match-card:nth-child(3n),
.advisor-page .tool-card:nth-child(3n),
.advisor-page .help-card:nth-child(3n),
.advisor-page .signal-card:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(255, 45, 75, 0.05), rgba(5, 12, 20, 0.94) 54%, rgba(255, 190, 58, 0.025)),
    rgba(5, 12, 20, 0.92);
}
.advisor-page .section-rail {
  top: 58px;
  border-color: rgba(0, 229, 255, 0.2);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.12), rgba(5, 10, 18, 0.96) 45%, rgba(255, 45, 75, 0.1)),
    rgba(5, 10, 18, 0.96);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(0, 229, 255, 0.08);
}
.advisor-page .section-rail a:hover,
.advisor-page .section-rail a:focus-visible,
.advisor-page .section-rail a.is-active {
  background: rgba(0, 229, 255, 0.12);
  color: #f7fbff;
}
.advisor-page .advisor-setup input,
.advisor-page .advisor-setup select,
.advisor-page .match-filters select,
.advisor-page .match-pager select,
.advisor-page .match-pager input {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #020810;
}
.advisor-page .data-health {
  border-color: rgba(0, 229, 255, 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(0, 229, 255, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06), rgba(255, 45, 75, 0.04)),
    rgba(1, 7, 13, 0.76);
}
.advisor-page .advanced-controls summary,
.advisor-page .match-actions button,
.advisor-page .watchlist-actions button,
.advisor-page .lab-tabs button,
.advisor-page .lab-pager button,
.advisor-page .tool-detail-actions a {
  border-color: rgba(0, 229, 255, 0.2);
  background: rgba(5, 12, 20, 0.86);
  color: #d7e4ed;
}
.advisor-page .advanced-controls summary:hover,
.advisor-page .match-actions button:hover,
.advisor-page .watchlist-actions button:hover,
.advisor-page .lab-tabs button:hover,
.advisor-page .lab-tabs button.is-active,
.advisor-page .lab-pager button:hover,
.advisor-page .tool-detail-actions a:hover {
  border-color: rgba(20, 235, 176, 0.44);
  background: rgba(20, 235, 176, 0.1);
  color: #e9fff6;
}
.advisor-page .proof-strip {
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.07), rgba(2, 8, 14, 0.97) 46%, rgba(255, 45, 75, 0.05)),
    rgba(2, 8, 14, 0.96);
}
.advisor-page .proof-strip article {
  border-color: rgba(147, 164, 179, 0.14);
}
@media (max-width: 900px) {
.ask-pulseai-preview {
    grid-template-columns: 1fr;
  }
.ask-pulseai-card {
    min-height: 220px;
  }
.site-header {
    grid-template-columns: 1fr auto;
    position: relative;
    z-index: 50;
    min-height: 92px;
    gap: var(--space-5);
  }
.brand-logo {
    width: clamp(230px, 64vw, 340px);
    height: 78px;
  }
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
.site-header.nav-open .nav-toggle {
    border-color: rgba(255, 101, 124, 0.46);
    box-shadow: 0 0 26px rgba(255, 101, 124, 0.18);
  }
.site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
.site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
.site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
.site-nav {
    position: static;
    transform: none;
    display: none;
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-3);
    max-height: min(76vh, 620px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(135deg, rgba(95, 199, 223, 0.12), rgba(8, 14, 22, 0.98) 42%, rgba(255, 101, 124, 0.08)),
      rgba(8, 14, 22, 0.98);
  }
.site-header.nav-open .site-nav {
    display: flex;
  }
.site-nav::after {
    left: 14px;
    right: 14px;
  }
.nav-group {
    display: grid;
  }
.nav-group::after {
    display: none;
  }
.nav-menu {
    position: static;
    width: calc(100% - 13px);
    max-width: calc(100% - 13px);
    border: 0;
    border-left: 2px solid rgba(95, 199, 223, 0.48);
    border-radius: 0;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 4px 0 8px 13px;
    padding: 3px 0 3px 12px;
    overflow-x: hidden;
    background: transparent;
    box-shadow: none;
  }
.nav-group:nth-of-type(3) .nav-menu {
    border-left-color: rgba(241, 184, 75, 0.62);
  }
.site-nav > a,
  .site-nav button {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--radius-l);
    white-space: nowrap;
  }
.nav-menu a {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 11px 12px;
    overflow: hidden;
    background: rgba(8, 14, 22, 0.34);
  }
.nav-menu a:hover,
  .nav-menu a:focus-visible,
  .nav-menu a[aria-current="page"] {
    transform: none;
  }
.nav-link-title {
    font-size: 0.98rem;
  }
.nav-link-desc {
    font-size: var(--t-body);
  }
.nav-link-title,
  .nav-link-desc {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
@media (max-width: 420px) {
.nav-menu {
      margin-left: 9px;
      width: calc(100% - 9px);
      max-width: calc(100% - 9px);
      padding-left: var(--space-4);
    }
}
.nav-cta {
    display: none;
  }
.ask-pulseai-trigger {
    display: none;
  }
.release-trigger {
    display: none;
  }
.site-nav .release-nav-trigger {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
    gap: 3px;
    border-radius: var(--radius-l);
    white-space: normal;
    line-height: 1.18;
  }
.site-nav .release-nav-trigger .nav-link-title,
  .site-nav .release-nav-trigger .nav-link-desc {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }
.account-status-pill {
    display: none;
  }
.site-header > .account-avatar-trigger {
    display: inline-grid;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
.pulse-feed-strip {
    border-radius: var(--radius-pill);
    margin: 6px 0 10px;
    padding: var(--space-1);
    overflow: hidden;
  }
.pulse-feed-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
.pulse-feed-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    animation: none;
  }
.pulse-feed-line[aria-hidden="true"] {
    display: none;
  }
.pulse-feed-line {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-right: 0;
    white-space: nowrap;
  }
.pulse-feed-title {
    padding-left: var(--space-8);
    padding-right: 11px;
    font-size: var(--t-micro);
  }
.pulse-feed-chip {
    flex: 0 0 auto;
    max-width: none;
    min-height: 28px;
    padding: 5px 9px;
    gap: var(--space-2);
  }
.pulse-feed-chip.account {
    margin-left: 0;
  }
.pulse-feed-chip b {
    font-size: var(--t-micro);
  }
.pulse-feed-chip strong {
    font-size: var(--t-small);
    min-width: 0;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.pulse-feed-updated {
    flex: 0 0 auto;
    font-size: var(--t-micro);
  }
.pulse-feed-strip.is-sticky-compact {
    top: max(6px, env(safe-area-inset-top));
    margin-bottom: var(--space-3);
  }
.advisor-page .pulse-feed-strip.is-sticky-compact {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    top: auto;
    bottom: max(5px, env(safe-area-inset-bottom));
    z-index: 79;
    width: min(330px, calc(100vw - 24px));
    margin: 0;
    padding: 3px 5px;
    border-radius: var(--radius-pill);
    background:
      linear-gradient(90deg, rgba(95, 199, 223, 0.18), rgba(20, 235, 176, 0.09) 44%, rgba(255, 101, 124, 0.12)),
      rgba(4, 12, 18, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(238, 244, 248, 0.06),
      0 0 0 1px rgba(4, 12, 18, 0.82),
      0 -10px 28px rgba(4, 12, 18, 0.72),
      0 14px 32px rgba(0, 0, 0, 0.38);
    opacity: 0.98;
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(1.08);
  }
.pulse-feed-strip.is-sticky-compact .pulse-feed-compact {
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
.pulse-feed-compact span,
  .pulse-feed-compact em {
    flex: 0 0 auto;
  }
.advisor-page .pulse-feed-strip.is-sticky-compact .pulse-feed-compact {
    justify-content: center;
    gap: var(--space-2);
    min-height: 24px;
    overflow: hidden;
  }
.section-rail {
    top: 8px;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
  }
.controls {
    max-height: none;
    overflow: visible;
    position: static;
  }
.setup-main,
  .advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.setup-search,
  .recommend-button,
  .advanced-grid .checks,
  .data-health,
  .search-assist {
    grid-column: 1 / -1;
  }
.program-detail,
  .squad-detail {
    position: static;
  }
.program-session-actions {
    justify-content: flex-start;
  }
.selected-card {
    grid-template-columns: 82px 1fr;
  }
.prototype-advisor {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 34px;
    overflow: hidden;
  }
.prototype-advisor h2 {
    font-size: clamp(2.55rem, 9vw, 4.3rem);
  }
.prototype-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.prototype-benefits article {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    padding-right: var(--space-4);
  }
.prototype-benefits article:last-child {
    padding-right: 0;
  }
.prototype-benefits strong {
    font-size: var(--t-body);
  }
.prototype-benefits small {
    font-size: var(--t-small);
  }
.prototype-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    padding-top: 42px;
  }
.prototype-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.prototype-stat-strip article:nth-child(2) {
    border-right: 0;
  }
.prototype-stat-strip article:nth-child(n+3) {
    border-top: 1px solid rgba(147, 164, 179, 0.14);
  }
.card-art {
    width: 82px;
  }
.market-numbers {
    grid-column: 1 / -1;
    min-width: 0;
  }
.tool-page .tool-hero:has(.hero-stage),
  .tool-page .hero-copy {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
.hero h1,
  .tool-page .tool-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10.5vw, 2.75rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }
.tool-page .tool-hero p:not(.eyebrow) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
.tool-trust-strip {
    align-items: stretch;
  }
.tool-trust-strip .trust-copy,
  .tool-trust-strip .trust-pills {
    width: 100%;
    margin-left: 0;
  }
.database-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.decision-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.match-pager label,
  .pager-buttons {
    justify-content: space-between;
  }
.watch-copy {
    min-width: 0;
  }
}
/* v881-hero-fan-hide-gap: :has() sees the fan whether or not it is visible, so
   the two-column grid stayed in force between 641-860px even on pages that
   hide the fan (display:none) at 860px -- the copy column was squeezed to
   the desktop split's narrow half with a dead gap beside it, and the
   headline wrapped tall enough to nearly double the hero's height. A
   collapse-to-one-column rule already existed, just only at 640px; this
   closes the gap up to the same 860px every fan-hiding page already uses.
   Placed after every unconditional .tool-hero:has(...) grid-columns rule (the
   .prototype-card split included) so it actually wins the cascade at this
   width, and before the 640px rules below so their own finer-tuned overrides
   still win under 640px. */
@media (max-width: 900px) {
.tool-page .tool-hero:has(.hero-stage),
  .tool-page .tool-hero:has(.prototype-card) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* end v881-hero-fan-hide-gap */
/* v883-hero-fan-short-viewport: width was only ever a proxy for "is there
   room for this." A landscape phone wider than 860px (iPhone 14 Pro Max
   landscape is 926x428) still matched the wide-enough-for-the-fan rule, but
   428px of real height cannot fit a hero that renders at ~530px tall -- the
   page loaded with the search bar already below the fold, the exact problem
   the width rule above exists to prevent. Same treatment, keyed on the
   dimension that actually matters here. 500px comfortably covers every
   phone's landscape height (iPhone: 375-430px) while staying well under an
   iPad's landscape height (768px) or any real desktop window, so tablets and
   desktops keep the full hero regardless of how the window is shaped. */
@media (max-height: 500px) {
.squad-page .hero-stage.hero-stage-squad,
  .tool-page.advisor-page .hero-stage.hero-stage-advisor {
    display: none;
  }
.tool-page .tool-hero:has(.hero-stage),
  .tool-page .tool-hero:has(.prototype-card) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* end v883-hero-fan-short-viewport */
@media (max-width: 640px) {
body {
    background:
      radial-gradient(circle at 28% 0%, rgba(95, 199, 223, 0.14), transparent 32%),
      linear-gradient(145deg, var(--field) 0%, #111b25 58%, #0a1419 100%);
  }
.shell {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 12px 0 28px;
  }
.hero {
    min-height: auto;
    gap: var(--space-7);
    padding: 22px 0 16px;
  }
.site-header {
    gap: var(--space-4);
    min-height: 94px;
    padding: 8px 0 10px;
  }
.nav-cta {
    grid-column: 1 / -1;
    width: 100%;
    margin-right: 0;
    min-height: 44px;
    padding: 10px 14px;
  }
.brand-logo {
    width: min(300px, 74vw);
    height: 68px;
  }
.tip::after {
    left: auto;
    right: -8px;
    transform: translateY(4px);
  }
.tip-popover {
    left: auto;
    right: -8px;
    transform: translateY(4px);
  }
.tip:hover::after,
  .tip:focus::after,
  .tip:focus-visible::after {
    transform: translateY(0);
  }
.tip-wrap:hover .tip-popover,
  .tip-wrap:focus-within .tip-popover,
  .tip-wrap.is-open .tip-popover,
  .tip:focus + .tip-popover,
  .tip:focus-visible + .tip-popover,
  .tip-details[open] .tip-popover {
    transform: translateY(0);
  }
.daily-pulse .tip-wrap.is-open .tip-popover {
    transform: translateY(0);
  }
.tip::before {
    left: auto;
    right: -1px;
    transform: none;
  }
.tip-wrap::before {
    left: auto;
    right: -1px;
    transform: none;
  }
h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.45rem);
    line-height: 1.08;
    margin-bottom: var(--space-4);
    overflow-wrap: anywhere;
  }
.tool-page {
    overflow-x: hidden;
  }
.tool-page .tool-hero:has(.hero-stage) {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px 20px;
  }
.tool-page .tool-hero:has(.hero-stage) h1 {
    max-width: 100%;
    font-size: clamp(2rem, 7.8vw, 3rem);
    overflow-wrap: anywhere;
  }
.tool-page .tool-hero:has(.hero-stage) p:not(.eyebrow) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
.dashboard-hero .home-hero-line {
    display: block;
  }
.dashboard-hero p:not(.eyebrow) {
    font-size: 16px;
  }
.tool-page .hero-stage {
    min-height: 0;
  }
.dashboard-page .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
.dashboard-page .hero-actions .secondary-action {
    padding: 11px 10px;
    text-align: center;
  }
.section-rail {
    top: 6px;
    margin-top: -2px;
    border-radius: var(--radius-l);
  }
.lede {
    max-width: min(100%, 32ch);
    font-size: 0.96rem;
    line-height: 1.45;
    overflow-wrap: normal;
  }
.market-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
  }
.controls,
  .results,
  .matches,
  .newest-panel,
  .tools-hub,
  .help-center {
    border-radius: 7px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  }
.controls,
  .results,
  .matches,
  .newest-panel,
  .tools-hub,
  .help-center {
    padding: var(--space-6);
  }
.workspace {
    gap: var(--space-5);
    min-width: 0;
  }
.controls {
    gap: 13px;
  }
.setup-main,
  .advanced-grid {
    grid-template-columns: 1fr;
  }
.advanced-grid .checks {
    grid-column: auto;
  }
input,
  select {
    min-height: 44px;
    padding: 10px 11px;
    font-size: 1rem;
  }
.search-row {
    grid-template-columns: 1fr 42px;
  }
.search-row button {
    min-height: 44px;
  }
.checks {
    grid-template-columns: 1fr;
  }
.results {
    min-height: 0;
  }
.selected-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    min-height: 0;
    padding-bottom: var(--space-6);
    min-width: 0;
    overflow: hidden;
  }
.prototype-advisor {
    padding: 22px;
    border-radius: 10px;
    min-width: 0;
  }
.prototype-kicker {
    font-size: var(--t-small);
  }
.prototype-advisor h2 {
    font-size: clamp(2.15rem, 12vw, 3.3rem);
  }
.prototype-copy > p:not(.prototype-kicker) {
    font-size: 1rem;
  }
.prototype-benefits {
    grid-template-columns: 1fr;
    max-width: none;
  }
.prototype-benefits article,
  .prototype-benefits article:last-child {
    border-right: 0;
    border-bottom: 1px solid rgba(147, 164, 179, 0.2);
    padding: 0 0 12px;
  }
.prototype-benefits article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
.prototype-benefits strong {
    font-size: var(--t-base);
  }
.prototype-benefits small {
    font-size: var(--t-small);
  }
.prototype-stat-strip {
    grid-template-columns: 1fr;
    margin: 8px -22px -22px;
    padding: 18px 22px;
  }
.prototype-stat-strip article,
  .prototype-stat-strip article:first-child,
  .prototype-stat-strip article:last-child {
    border-right: 0;
    border-top: 1px solid rgba(147, 164, 179, 0.14);
    padding: 14px 0;
  }
.prototype-stat-strip article:first-child {
    border-top: 0;
  }
.card-showcase {
    justify-items: stretch;
  }
.card-art {
    width: min(190px, 68vw);
    justify-self: center;
    border-radius: 7px;
  }
.card-action-grid {
    grid-template-columns: 1fr 1fr;
  }
.card-facts {
    grid-template-columns: 1fr 1fr;
  }
.card-intel {
    grid-template-columns: 1fr;
  }
.card-hero-panel {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
.card-hero-panel h2 {
    font-size: clamp(1.65rem, 9vw, 2rem);
  }
.ovr-badge {
    width: 70px;
    height: 70px;
  }
.chips {
    gap: var(--space-2);
  }
.chips span,
  .tag {
    padding: 5px 8px;
    font-size: var(--t-small);
  }
.final-card,
  .predictor-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-6);
  }
.final-card-head,
  .decision-action-strip,
  .decision-brief,
  .decision-breakdown,
  .confidence-panel,
  .performance-panel {
    display: grid;
    grid-template-columns: 1fr;
  }
.confidence-panel meter {
    grid-column: 1;
  }
.final-card-head > span,
  .predictor-card > span {
    justify-self: start;
  }
.final-card h3,
  .predictor-card h3 {
    font-size: 1.18rem;
  }
.callout {
    padding: var(--space-6);
  }
.option {
    padding: var(--space-5);
  }
.option header {
    align-items: center;
  }
.section-head,
  .match-actions {
    align-items: start;
    flex-direction: column;
  }
.thumb {
    width: 42px;
  }
.price {
    grid-column: 2;
    font-size: var(--t-body);
  }
.tool-card,
  .help-card {
    min-height: auto;
  }
.tool-detail {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
.inventory-freshness {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
.market-lab {
    grid-template-columns: 1fr;
  }
.lab-panel .section-head > p {
    max-width: none;
    text-align: left;
  }
.index-row {
    grid-template-columns: 1fr;
  }
.signal-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
.signal-price {
    grid-column: 2;
    justify-items: start;
  }
.signal-list {
    max-height: 540px;
  }
.lab-pager {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
.lab-pager label,
  .lab-pager .pager-buttons {
    justify-content: space-between;
  }
.site-nav {
    justify-content: flex-start;
    gap: var(--space-2);
  }
.site-nav a,
  .site-nav button {
    min-height: 38px;
    padding: 8px 13px;
    white-space: nowrap;
  }
.tool-hero {
    padding: 32px 0 18px;
  }
.tool-page .tool-hero:has(.hero-stage) {
    padding: 22px 16px;
    gap: var(--space-8);
  }
.tool-page .tool-hero:has(.hero-stage) h1 {
    max-width: min(100%, 310px);
    font-size: clamp(1.8rem, 8.4vw, 2.28rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
.tool-page .tool-hero:has(.hero-stage) p:not(.eyebrow) {
    max-width: min(100%, 310px);
    font-size: var(--t-base);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
.tool-page:not(.advisor-page) .hero-copy > p:not(.eyebrow) {
    max-width: min(100%, 310px);
  }
.tool-page:not(.advisor-page) .hero-copy {
    max-width: min(100%, 310px);
  }
.spotlight-hero-copy strong {
    max-width: min(100%, 320px);
    font-size: clamp(1.34rem, 6.4vw, 1.74rem);
  }
.spotlight-card-flow {
    min-height: 154px;
    justify-content: center;
    padding: 0 0 4px;
  }
.spotlight-card-peek {
    flex-basis: clamp(78px, 25vw, 100px);
  }
.spotlight-card-peek:nth-child(2),
  .spotlight-card-peek:nth-child(3),
  .spotlight-card-peek:nth-child(4) {
    margin-left: -18px;
  }
.spotlight-card-peek img {
    max-height: 164px;
  }
.dashboard-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: 22px 0 16px;
  }
.app-launcher,
  .dashboard-grid,
  .daily-pulse,
  .position-board,
  .database-grid {
    grid-template-columns: 1fr;
  }
.daily-pulse-actions {
    gap: 8px 18px;
    padding-top: var(--space-4);
  }
.pulse-action span {
    font-size: var(--t-micro);
  }
.pulse-action strong {
    font-size: var(--t-body);
  }
.drop-sb-strip {
    flex-wrap: wrap;
  }
.drop-sb-cell {
    flex: 1 1 45%;
    border-bottom: 1px solid rgba(242, 245, 255, 0.1);
  }
.content-drop-watch {
    gap: var(--space-3);
    padding: var(--space-5);
  }
.drop-command-copy {
    font-size: var(--t-body);
    line-height: 1.32;
  }
.footer-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
.site-footer {
    padding: var(--space-9);
  }
.footer-bottom {
    display: grid;
  }
.launcher-card {
    min-height: 0;
    padding: var(--space-7);
  }
.tool-hero h1 {
    max-width: 100%;
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
.page-toolbar {
    grid-template-columns: 1fr;
  }
.page-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.featured-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(185px, 74vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: var(--space-4);
  }
.page-result-link {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: var(--space-5);
  }
.ranking-row .page-result-link {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "media copy"
      "media score";
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    align-items: start;
    min-width: 0;
  }
.ranking-row .ranking-number {
    grid-area: media;
    align-self: start;
    width: 58px;
    min-width: 0;
    min-height: 34px;
    margin: 0 auto 8px;
    padding: 7px 8px;
    font-size: var(--t-base);
  }
.ranking-row .signal-badges {
    gap: var(--space-2);
  }
.flip-row .page-result-link {
    grid-template-columns: 52px 68px minmax(0, 1fr);
  }
.flip-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.page-result-metric {
    grid-column: 2;
    justify-items: start;
  }
.ranking-row .page-result-metric {
    grid-area: score;
    grid-column: auto;
    justify-self: start;
    justify-items: start;
    min-width: 0;
    width: 100%;
    border-top: 1px solid rgba(147, 164, 179, 0.12);
    padding-top: var(--space-3);
  }
.flip-row .page-result-metric {
    grid-column: 3;
  }
}
/* v4.23.1: production mobile stabilization for tool pages with live-rendered card heroes. */
@media (max-width: 640px) {
.tool-page {
    width: min(100%, calc(100% - 20px));
    overflow-x: hidden;
  }
.pulse-feed-strip {
    overflow: hidden;
  }
.pulse-feed-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
.pulse-feed-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    min-width: 100%;
    animation: none;
  }
.pulse-feed-line[aria-hidden="true"] {
    display: none;
  }
.pulse-feed-title,
  .pulse-feed-chip,
  .pulse-feed-updated {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
  }
.pulse-feed-title {
    border-right: 1px solid rgba(147, 164, 179, 0.2);
    border-bottom: 0;
    padding-bottom: 0;
  }
.pulse-feed-chip {
    max-width: none;
    justify-content: flex-start;
  }
.pulse-feed-chip strong {
    white-space: nowrap;
    overflow-wrap: normal;
    text-overflow: ellipsis;
  }
.tool-page .tool-hero:has(.prototype-card),
  .tool-page .tool-hero:has(.hero-stage) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding: 20px 14px;
    overflow: hidden;
  }
.tool-page .tool-hero:has(.prototype-card) .hero-stage,
.tool-page .tool-hero:has(.hero-stage) .hero-stage {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
  }
.tool-page .hero-stage .prototype-card {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    transform: none;
    padding: var(--space-5);
  }
.tool-page .hero-stage .prototype-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: var(--space-4);
  }
.tool-page .hero-stage .prototype-card .prototype-tag,
  .tool-page .hero-stage .prototype-card .prototype-detail {
    grid-column: 2;
    justify-self: start;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }
.program-mode-switch {
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-2xl);
  }
.program-mode-switch button {
    border-radius: var(--radius-xl);
  }
.featured-strip {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    gap: var(--space-4);
    padding-bottom: 0;
  }
.featured-card {
    min-width: 0;
    width: 100%;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
  }
.featured-card .featured-rank {
    grid-column: 1;
    grid-row: 1;
  }
.rankings-featured {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 7px 10px;
    padding-top: var(--space-4);
  }
.rankings-featured .featured-rank {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.08rem;
  }
.program-feature-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    min-height: 0;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: left;
  }
.program-feature-card .featured-card-top,
  .program-feature-card .featured-pill,
  .program-feature-card strong,
  .program-feature-card small,
  .program-feature-card em,
  .program-feature-card .featured-why {
    grid-column: 1;
    min-width: 0;
  }
.program-feature-card .featured-card-top {
    grid-row: auto;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
  }
.program-section-heading {
    display: grid;
    gap: var(--space-1);
    align-items: start;
  }
.program-section-heading strong {
    text-align: left;
  }
.program-feature-card .featured-rank {
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    min-width: 52px;
    transform: none;
  }
.program-feature-card .featured-pill {
    max-width: calc(100% - 58px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
.program-feature-card strong,
  .program-feature-card small,
  .program-feature-card .featured-why {
    white-space: normal;
    text-align: left;
  }
.program-feature-card em {
    justify-content: center;
    white-space: normal;
  }
.featured-card .featured-pill,
  .featured-card strong,
  .featured-card small,
  .featured-card em,
  .featured-card .featured-why,
  .featured-card .performance-badge {
    grid-column: 2;
    min-width: 0;
    white-space: normal;
  }
.roster-command-center {
    padding: var(--space-5);
    gap: var(--space-4);
  }
.command-action-grid,
  .command-buckets {
    grid-template-columns: minmax(0, 1fr);
  }
.command-countdown,
  .command-action-grid article,
  .command-bucket {
    padding: var(--space-5);
  }
.command-card > a {
    grid-template-columns: 48px minmax(0, 1fr);
  }
.command-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.command-links a {
    text-align: center;
  }
.page-result-link {
    align-items: start;
  }
.page-result-main em,
  .page-result-main span,
  .page-result-metric small {
    overflow-wrap: anywhere;
  }
}
/* v4.23.2: keep all custom tooltips visible and tappable on narrow screens. */
@media (max-width: 640px) {
.tip {
    touch-action: manipulation;
  }
.tip::after,
  .tip-popover {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-width: none;
    transform: translateY(6px);
    z-index: 1000;
    text-align: left;
  }
.tip::before,
  .tip-wrap::before {
    display: none;
  }
.tip:hover::after,
  .tip:focus::after,
  .tip:focus-visible::after,
  .tip-wrap:hover .tip-popover,
  .tip-wrap:focus-within .tip-popover,
  .tip-wrap.is-open .tip-popover,
  .tip:focus + .tip-popover,
  .tip:focus-visible + .tip-popover,
  .tip-details[open] .tip-popover,
  .daily-pulse .tip-wrap.is-open .tip-popover {
    transform: translateY(0);
  }
}
/* v4.23.3: viewport-aware tooltip portal keeps tips near the tapped control. */
.tooltip-portal-ready .tip::before,
.tooltip-portal-ready .tip::after {
  display: none;
}
.tooltip-portal {
  position: fixed;
  z-index: 3000;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(126, 182, 255, 0.28);
  border-radius: var(--radius-l);
  background: var(--field);
  color: #d7e4ed;
  padding: 10px 11px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.52);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
}
.tool-page.account-page:not(.advisor-page) .account-panel::before {
  left: 0;
  right: auto;
  top: 14px;
  bottom: 14px;
  width: 4px;
  height: auto;
  border-radius: 0 999px 999px 0;
  background: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.28);
}
.tool-page.account-page:not(.advisor-page) .account-panel {
  overflow: visible;
}
.tool-page.account-page:not(.advisor-page) .account-panel-green::before {
  background: var(--green);
}
.tool-page.account-page:not(.advisor-page) .account-panel-gold::before {
  background: var(--gold);
}
.tool-page.account-page:not(.advisor-page) .account-panel-rose::before {
  background: var(--red);
}
@media (max-width: 640px) {
.tool-page.account-page {
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
  }
.tool-page.account-page p,
  .tool-page.account-page span,
  .tool-page.account-page strong,
  .tool-page.account-page small {
    overflow-wrap: anywhere;
  }
.tool-page.account-page:not(.advisor-page) .account-hero {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: calc(100vw - 44px);
    padding: 22px 14px;
    overflow: hidden;
  }
.tool-page.account-page:not(.advisor-page) .account-hero .hero-copy {
    min-width: 0;
  }
.tool-page.account-page:not(.advisor-page) .account-hero h1 {
    width: min(100%, 310px);
    max-width: min(100%, 310px);
    font-size: clamp(1.72rem, 8.6vw, 2.08rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
.tool-page.account-page:not(.advisor-page) .account-hero h1 .hero-accent {
    display: block;
  }
.tool-page.account-page:not(.advisor-page) .account-hero p:not(.eyebrow) {
    width: min(100%, 304px);
    max-width: min(100%, 304px);
    overflow-wrap: anywhere;
  }
.tool-page.account-page:not(.advisor-page) .account-roadmap article,
  .tool-page.account-page:not(.advisor-page) .account-panel {
    max-width: 100%;
    overflow: hidden;
  }
.tool-page.account-page:not(.advisor-page) .membership-tier-ladder {
    display: block;
    padding-inline: 14px;
  }
.tool-page.account-page:not(.advisor-page) .membership-ladder-head h2 {
    font-size: clamp(1.75rem, 10vw, 2.55rem);
    line-height: 1.05;
  }
.tool-page.account-page:not(.advisor-page) .membership-ladder-head p:not(.eyebrow) {
    font-size: var(--t-base);
    white-space: normal;
  }
.tool-page.account-page:not(.advisor-page) .membership-tier-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
.tool-page.account-page:not(.advisor-page) .membership-tier-card {
    width: 100%;
    min-height: 0;
    padding: var(--space-7);
    transform: none;
  }
.tool-page.account-page:not(.advisor-page) .profile-settings-disclosure summary {
    align-items: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
.tool-page.account-page:not(.advisor-page) .profile-settings-disclosure summary small {
    white-space: normal;
  }
.tool-page.account-page:not(.advisor-page) .profile-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.tool-page.account-page:not(.advisor-page) .tier-card-top h3 {
    white-space: normal;
    font-size: clamp(1.45rem, 7.2vw, 1.86rem);
    line-height: 1.04;
  }
.tool-page.account-page:not(.advisor-page) .tier-red-diamond .tier-card-top h3 {
    font-size: clamp(1.32rem, 6.4vw, 1.55rem);
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail {
    margin: 14px 0;
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail ol {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail ol::before {
    top: 16px;
    bottom: 16px;
    left: 13px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(255, 207, 146, 0.36), rgba(126, 227, 243, 0.42), rgba(255, 156, 175, 0.42));
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail li {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
    align-items: center;
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail li > span {
    grid-row: 1 / span 2;
  }
.tool-page.account-page:not(.advisor-page) .membership-inline-rail small {
    font-size: var(--t-small);
  }
.tool-page.account-page:not(.advisor-page) .account-roadmap p,
  .tool-page.account-page:not(.advisor-page) .bridge-list span,
  .tool-page.account-page:not(.advisor-page) .rich-empty span {
    max-width: 304px;
  }
.tool-page.account-page:not(.advisor-page) .account-state-map {
    display: grid;
    gap: var(--space-4);
  }
.tool-page.account-page:not(.advisor-page) .account-state-map::before,
  .tool-page.account-page:not(.advisor-page) .account-state-line {
    display: none;
  }
.tool-page.account-page:not(.advisor-page) .account-state-node,
  .tool-page.account-page:not(.advisor-page) .account-state-node-live,
  .tool-page.account-page:not(.advisor-page) .account-state-node-next,
  .tool-page.account-page:not(.advisor-page) .account-state-node-off {
    position: static;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(88px, 96px) minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
    padding: 10px 12px;
    text-align: left;
  }
.tool-page.account-page:not(.advisor-page) .account-state-node span,
  .tool-page.account-page:not(.advisor-page) .account-state-node strong,
  .tool-page.account-page:not(.advisor-page) .account-state-node small {
    min-width: 0;
    line-height: 1.05;
    white-space: normal;
  }
.tool-page.account-page:not(.advisor-page) .account-state-node span {
    grid-row: 1 / span 2;
  }
.tool-page.account-page:not(.advisor-page) .account-state-node small {
    grid-column: 2;
    font-size: var(--t-small);
  }
}
.tooltip-portal[hidden] {
  display: none;
}
/* v4.41 Advisor Decision Context cascade guard. Keep this late so legacy Advisor
   responsive rules cannot re-expand the new intelligence layout. */
.advisor-page .results.has-decision-context.decision-context-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "setup";
}
.advisor-page .results.has-decision-context.decision-context-grid > * {
  min-width: 0;
}
.advisor-page .results.has-decision-context .quirk-strip,
.advisor-page .results.has-decision-context .performance-panel,
.advisor-page .results.has-decision-context .collection-cost-panel,
.advisor-page .results.has-decision-context .attribute-grid {
  display: none;
}
.advisor-page .results.has-decision-context .card-intel {
  display: grid;
  gap: var(--space-4);
}
.advisor-page .results.has-decision-context .selected-card {
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1.64fr);
  gap: var(--space-5);
  padding: var(--space-5);
}
.advisor-page .results.has-decision-context .card-showcase {
  grid-template-areas:
    "art"
    "facts"
    "stamp"
    "watch"
    "versions";
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  justify-items: center;
  overflow: hidden;
}
.advisor-page .results.has-decision-context .card-watchlist-action {
  grid-area: watch;
  width: 100%;
  display: grid;
  gap: 3px;
  justify-items: stretch;
}
.advisor-page .results.has-decision-context .card-watchlist-action button {
  min-height: 34px;
  border: 1px solid rgba(95, 199, 223, 0.28);
  border-radius: var(--radius-m);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.14), rgba(5, 13, 21, 0.88)),
    rgba(5, 13, 21, 0.92);
  color: #eaf7ff;
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.advisor-page .results.has-decision-context .card-watchlist-action button[aria-pressed="true"] {
  border-color: rgba(85, 214, 165, 0.56);
  background:
    linear-gradient(135deg, rgba(85, 214, 165, 0.18), rgba(5, 13, 21, 0.9)),
    rgba(5, 13, 21, 0.94);
  color: #baffdc;
}
.advisor-page .results.has-decision-context .card-watchlist-action button:hover,
.advisor-page .results.has-decision-context .card-watchlist-action button:focus-visible {
  border-color: rgba(0, 229, 255, 0.58);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
  outline: none;
}
.advisor-page .results.has-decision-context .card-version-rail {
  display: grid;
}
.advisor-page .results.has-decision-context .card-hero-panel,
.advisor-page .results.has-decision-context .market-board,
.advisor-page .results.has-decision-context .advisor-context-panel {
  padding: 11px;
}
.advisor-page .card-command-view {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}
.advisor-page .command-decision-strip {
  --command-accent: var(--neon-cyan);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--command-accent) 34%, rgba(147, 164, 179, 0.14));
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  gap: var(--space-5);
  align-items: center;
  padding: 13px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--command-accent) 15%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--command-accent) 8%, transparent), rgba(3, 11, 18, 0.38)),
    rgba(3, 11, 18, 0.82);
}
.advisor-page .red-diamond-value-layer {
  min-width: 0;
  border: 1px solid rgba(255, 45, 75, 0.22);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: 11px 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 45, 75, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 45, 75, 0.055), rgba(0, 229, 255, 0.045)),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .red-diamond-value-layer.is-active {
  border-color: rgba(20, 235, 176, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 235, 176, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(20, 235, 176, 0.07), rgba(0, 229, 255, 0.045)),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .red-diamond-value-layer.is-locked {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 28px rgba(255, 45, 75, 0.08);
}
.advisor-page .red-diamond-value-layer span {
  color: #c8d7e0;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.34;
}
.advisor-page .red-diamond-value-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.advisor-page .red-diamond-value-chips span {
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(0, 229, 255, 0.08);
  color: #dff8ff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.advisor-page .red-diamond-value-cta {
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: var(--radius-l);
  min-height: 38px;
  padding: 8px 11px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(20, 235, 176, 0.12)),
    rgba(2, 8, 14, 0.74);
  color: #f2fbff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.advisor-page .red-diamond-value-cta:hover,
.advisor-page .red-diamond-value-cta:focus-visible {
  outline: none;
  border-color: rgba(20, 235, 176, 0.54);
  box-shadow: 0 0 0 2px rgba(20, 235, 176, 0.14);
}
@media (min-width: 761px) {
.advisor-page .red-diamond-value-layer.is-locked {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.advisor-page .pulseai-preview-card {
  min-width: 0;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-l);
  display: grid;
  gap: var(--space-3);
  padding: 10px 12px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.12), transparent 30%),
    radial-gradient(circle at 96% 12%, rgba(255, 45, 75, 0.08), transparent 26%),
    rgba(3, 10, 17, 0.78);
}
.advisor-page .pulseai-preview-card.is-active {
  border-color: rgba(20, 235, 176, 0.24);
}
.advisor-page .pulseai-preview-card.is-locked {
  border-color: rgba(255, 190, 58, 0.22);
}
.advisor-page .pulseai-preview-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas:
    "label toggle"
    "title toggle";
  gap: 4px 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.advisor-page .pulseai-preview-card summary::-webkit-details-marker {
  display: none;
}
.advisor-page .pulseai-preview-card summary::after {
  content: "+";
  grid-area: toggle;
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--neon-cyan);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1;
}
.advisor-page .pulseai-preview-card summary span,
.advisor-page .pulseai-preview-card small {
  color: #8fa2b2;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.advisor-page .pulseai-preview-card p {
  margin: 0;
  max-width: 780px;
  color: #d8e8ef;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.36;
}
.advisor-page .pulseai-preview-card small {
  display: block;
  line-height: 1.35;
  text-transform: none;
}
.advisor-page .command-decision-strip span,
.advisor-page .command-decision-card {
  color: #c7d5df;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.32;
}
.advisor-page .command-decision-card {
  grid-column: 1 / -1;
  color: #8fa2b2;
}
.advisor-page .command-unlock-cta {
  margin-top: var(--space-4);
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: var(--radius-l);
  min-height: 38px;
  padding: 8px 12px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(20, 235, 176, 0.1)),
    rgba(2, 8, 14, 0.74);
  color: #f2fbff;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.12;
}
.advisor-page .command-unlock-cta:hover,
.advisor-page .command-unlock-cta:focus-visible {
  outline: none;
  border-color: rgba(20, 235, 176, 0.54);
  box-shadow: 0 0 0 2px rgba(20, 235, 176, 0.14);
}
.advisor-page .command-decision-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.advisor-page .command-decision-metrics article {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  gap: 3px;
  padding: 9px;
  background: rgba(2, 8, 14, 0.62);
}
.advisor-page .command-decision-metrics small,
.advisor-page .command-context-card span,
.advisor-page .command-panel-head span {
  color: #8fa2b2;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.advisor-page .command-decision-metrics .good strong,
.advisor-page .command-decision-metrics .watch strong {
  color: var(--neon-teal);
}
.advisor-page .command-decision-metrics .caution strong,
.advisor-page .command-decision-metrics .danger strong,
.advisor-page .command-decision-metrics .locked strong {
  color: var(--neon-gold);
}
.advisor-page .command-tabs {
  min-width: 0;
  border: 1px solid rgba(0, 229, 255, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 7px;
  background: rgba(2, 8, 14, 0.62);
}
.advisor-page .command-tabs button {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 10px;
  background: transparent;
  color: #b8c8d4;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.advisor-page .command-tabs button:hover,
.advisor-page .command-tabs button:focus-visible,
.advisor-page .command-tabs button.is-active {
  border-color: rgba(0, 229, 255, 0.34);
  outline: none;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(20, 235, 176, 0.06)),
    rgba(7, 17, 27, 0.86);
  color: #f2fbff;
}
.advisor-page .command-tab-panel {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}
.advisor-page .command-panel-head {
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(20, 235, 176, 0.04)),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .command-panel-head span {
  display: block;
  color: #b9c8d2;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.36;
  text-transform: none;
}
.advisor-page .command-overview-grid,
.advisor-page .command-context-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.advisor-page .command-reason-card,
.advisor-page .command-list-card,
.advisor-page .command-context-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.055), transparent 48%),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .command-reason-card b {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: var(--neon-cyan);
  font-size: var(--t-small);
}
.advisor-page .command-list-card {
  border-color: rgba(20, 235, 176, 0.24);
}
.advisor-page .command-list-card.caution,
.advisor-page .command-list-card.danger,
.advisor-page .command-list-card.locked {
  border-color: rgba(255, 190, 58, 0.28);
}
.advisor-page .command-list-card span {
  display: block;
  margin-top: var(--space-3);
  color: #c9d7e1;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.36;
}
.advisor-page .command-context-card.strong {
  border-color: rgba(20, 235, 176, 0.24);
}
.advisor-page .command-context-card.moderate {
  border-color: rgba(255, 190, 58, 0.26);
}
.advisor-page .command-context-card.weak,
.advisor-page .command-context-card.muted {
  border-color: rgba(147, 164, 179, 0.14);
}
.advisor-page .command-context-card p,
.advisor-page .command-context-card small {
  display: block;
  margin: 7px 0 0;
  color: #c3d2dc;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.36;
}
.advisor-page .command-tab-panel .attribute-grid,
.advisor-page .results.has-decision-context .command-tab-panel .attribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.advisor-page .player-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.advisor-page .diamond-rank-head {
  border-color: rgba(20, 235, 176, 0.28);
  padding: 10px 12px 9px;
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 235, 176, 0.18), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(255, 77, 114, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(0, 229, 255, 0.11), rgba(20, 235, 176, 0.055)),
    rgba(3, 11, 18, 0.78);
}
.advisor-page .diamond-rank-head span {
  font-size: var(--t-body);
  line-height: 1.3;
}
.advisor-page .diamond-rank-read {
  display: grid;
  gap: var(--space-3);
  border: 1px solid rgba(0, 229, 255, 0.13);
  border-radius: var(--radius-l);
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.045), rgba(20, 235, 176, 0.025)),
    rgba(3, 11, 18, 0.58);
}
.advisor-page .diamond-rank-list {
  display: grid;
  gap: 5px;
}
.advisor-page .diamond-rank-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid rgba(147, 164, 179, 0.08);
  padding: 6px 0;
}
.advisor-page .diamond-rank-line:last-child {
  border-bottom: 0;
}
.advisor-page .diamond-rank-place {
  color: var(--neon-cyan);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.advisor-page .diamond-rank-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.advisor-page .diamond-rank-line.strong em {
  border-color: rgba(255, 190, 58, 0.22);
  color: #ffe39a;
  background: linear-gradient(135deg, rgba(255, 190, 58, 0.1), rgba(20, 235, 176, 0.055));
}
.advisor-page .diamond-rank-line.depth em {
  border-color: rgba(255, 190, 58, 0.18);
  color: #e9c977;
  background: rgba(255, 190, 58, 0.07);
}
.advisor-page .diamond-rank-line.low em {
  border-color: rgba(255, 77, 114, 0.2);
  color: #ffb3c3;
  background: rgba(255, 77, 114, 0.07);
}
.advisor-page .diamond-rank-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.advisor-page .diamond-rank-mini {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 5px 8px;
  background: rgba(3, 11, 18, 0.52);
  color: #c7d5df;
  font-size: var(--t-micro);
  font-weight: 700;
}
.advisor-page .diamond-rank-mini.strong em {
  color: #ffe39a;
}
.advisor-page .diamond-rank-mini.depth em {
  color: var(--neon-gold);
}
.advisor-page .diamond-rank-mini.low em {
  color: #ff9db4;
}
.advisor-page .diamond-rank-read > p {
  margin: 0;
  color: #b8c8d4;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.32;
}
.advisor-page .diamond-rank-context-line {
  margin: 0;
  border: 1px solid rgba(147, 164, 179, 0.1);
  border-radius: var(--radius-l);
  padding: 8px 10px;
  background: rgba(2, 8, 14, 0.42);
  color: #b9c8d2;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.34;
}
.advisor-page .diamond-rank-context-line span {
  color: rgba(147, 164, 179, 0.48);
  margin: 0 5px;
}
.advisor-page .diamond-rank-lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.advisor-page .player-rank-chip {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 11px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.07), transparent 60%),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .player-rank-chip span {
  min-width: 42px;
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(0, 229, 255, 0.14);
  color: var(--neon-cyan);
  font-size: var(--t-body);
  font-weight: 700;
  text-align: center;
}
.advisor-page .player-rank-chip b {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #a8bdca;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.advisor-page .diamond-rank-card {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
  gap: 3px 8px;
}
.advisor-page .diamond-rank-card span {
  min-width: 54px;
  padding: 4px 7px;
  font-size: var(--t-small);
}
.advisor-page .diamond-rank-card b {
  display: none;
}
.advisor-page .diamond-rank-card.featured {
  min-height: 0;
  align-content: center;
}
.advisor-page .player-rank-chip.elite {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(20, 235, 176, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(20, 235, 176, 0.08)),
    rgba(3, 11, 18, 0.8);
}
.advisor-page .player-rank-chip.elite span {
  background: rgba(20, 235, 176, 0.16);
  color: var(--neon-teal);
}
.advisor-page .player-rank-chip.strong {
  border-color: rgba(255, 214, 102, 0.3);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 214, 102, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(255, 190, 58, 0.14), rgba(20, 235, 176, 0.08)),
    rgba(3, 11, 18, 0.76);
}
.advisor-page .player-rank-chip.strong span {
  background: rgba(255, 214, 102, 0.15);
  color: #ffe39a;
}
.advisor-page .player-rank-chip.depth,
.advisor-page .player-rank-chip.solid {
  border-color: rgba(255, 190, 58, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 190, 58, 0.11), rgba(0, 229, 255, 0.025)),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .player-rank-chip.depth span,
.advisor-page .player-rank-chip.solid span {
  background: rgba(255, 190, 58, 0.14);
  color: var(--neon-gold);
}
.advisor-page .player-rank-chip.borderline {
  border-color: rgba(255, 117, 91, 0.24);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 77, 114, 0.105), transparent 44%),
    linear-gradient(135deg, rgba(255, 77, 114, 0.09), rgba(255, 190, 58, 0.075), rgba(20, 235, 176, 0.035)),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .player-rank-chip.borderline span {
  background: rgba(255, 190, 58, 0.12);
  color: #ffd68a;
}
.advisor-page .player-rank-chip.low,
.advisor-page .player-rank-chip.limited {
  border-color: rgba(255, 77, 114, 0.26);
  background:
    linear-gradient(135deg, rgba(255, 45, 75, 0.11), rgba(255, 190, 58, 0.025)),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .player-rank-chip.low span,
.advisor-page .player-rank-chip.limited span {
  background: rgba(255, 77, 114, 0.14);
  color: #ff9db4;
}
.advisor-page .diamond-rank-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.advisor-page .diamond-rank-context {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: 9px 10px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.06), transparent 52%),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .diamond-rank-context span {
  color: #9fb1bd;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.advisor-page .diamond-rank-context p {
  margin: 5px 0 0;
  color: #c4d3dd;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.28;
}
.advisor-page .diamond-rank-context.elite,
.advisor-page .diamond-rank-context.strong {
  border-color: rgba(20, 235, 176, 0.24);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.1), rgba(0, 229, 255, 0.035)),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .diamond-rank-context.depth {
  border-color: rgba(255, 190, 58, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 190, 58, 0.09), rgba(0, 229, 255, 0.025)),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .diamond-rank-context.low {
  border-color: rgba(255, 77, 114, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 77, 114, 0.09), rgba(255, 190, 58, 0.035)),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .player-rank-note {
  margin: 0;
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: var(--radius-l);
  padding: 10px 12px;
  background: rgba(2, 8, 14, 0.58);
  color: #bfd0dc;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.38;
}
.advisor-page .command-other-versions,
.advisor-page .results.has-decision-context .command-other-versions {
  display: grid;
  gap: var(--space-4);
}
.advisor-page .card-command-view .selected-version-read {
  display: block;
}
.advisor-page .results.has-decision-context .card-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  width: min(100%, 220px);
  min-width: 0;
  justify-self: center;
  align-self: start;
  align-content: start;
  padding-top: 2px;
}
.advisor-page .results.has-decision-context .card-facts .fact-team dd {
  color: color-mix(in srgb, var(--team-accent, var(--neon-gold)) 78%, #ffffff);
}
.advisor-page .results.has-decision-context .card-facts .fact-position dd {
  color: #baff8a;
}
.advisor-page .results.has-decision-context .card-facts .fact-series dd {
  color: var(--neon-gold);
}
.advisor-page .results.has-decision-context .card-facts .fact-rarity dd {
  color: color-mix(in srgb, var(--chip-accent, var(--neon-cyan)) 82%, #ffffff);
}
.advisor-page .results.has-decision-context .card-version-rail {
  gap: var(--space-2);
}
.advisor-page .results.has-decision-context .version-rail-head {
  gap: 1px;
}
.advisor-page .results.has-decision-context .version-list {
  gap: 0;
}
.advisor-page .results.has-decision-context .version-card {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  border: 0;
  border-top: 1px solid rgba(147, 164, 179, 0.12);
  border-radius: 0;
  padding: 7px 2px;
  background: transparent;
}
.advisor-page .results.has-decision-context .version-card:hover,
.advisor-page .results.has-decision-context .version-card:focus-visible {
  background: rgba(95, 199, 223, 0.07);
}
.advisor-page .results.has-decision-context .version-card.is-selected {
  border-color: rgba(0, 229, 255, 0.26);
  background: rgba(0, 229, 255, 0.075);
  box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.76);
}
.advisor-page .results.has-decision-context .market-board {
  display: grid;
  gap: 7px;
}
.advisor-page .best-move-card.decision-brief-first {
  border-color: rgba(0, 229, 255, 0.62);
  gap: var(--space-7);
  background:
    radial-gradient(circle at 12% 2%, rgba(0, 229, 255, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(6, 16, 27, 0.96), rgba(2, 7, 12, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 34px rgba(0, 229, 255, 0.09);
}
.advisor-page .best-move-card.decision-brief-first.cash,
.advisor-page .best-move-card.decision-brief-first.hold {
  border-color: rgba(0, 229, 255, 0.62);
}
.advisor-page .best-move-card.decision-brief-first.collect {
  border-color: rgba(241, 184, 75, 0.48);
}
.advisor-page .best-move-card.decision-brief-first.danger {
  border-color: rgba(255, 45, 75, 0.56);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 45, 75, 0.18), transparent 30%),
    radial-gradient(circle at 12% 2%, rgba(0, 229, 255, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(6, 16, 27, 0.96), rgba(2, 7, 12, 0.98));
}
.advisor-page .decision-brief-first .best-move-hero {
  grid-template-columns: minmax(0, 1fr);
}
.advisor-page .decision-brief-first .best-move-title {
  overflow-wrap: anywhere;
}
.advisor-page .decision-brief-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-5);
}
.advisor-page .move-strength-panel,
.advisor-page .read-quality-panel {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: 15px;
  background: rgba(8, 14, 22, 0.58);
}
.advisor-page .move-strength-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  border-color: color-mix(in srgb, var(--move-strength-color) 46%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--move-strength-color) 11%, transparent), transparent 52%),
    rgba(8, 14, 22, 0.58);
}
.advisor-page .move-strength-panel span,
.advisor-page .read-quality-panel span {
  display: block;
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.advisor-page .read-quality-panel.high strong {
  color: #52e6a8;
}
.advisor-page .read-quality-panel.low strong {
  color: var(--gold);
}
.advisor-page .move-strength-panel i {
  width: 100%;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(91, 105, 122, 0.42);
}
.advisor-page .decision-brief-first .decision-mini-label {
  color: var(--cyan);
}
.advisor-page .decision-brief-first .decision-reason-stack b {
  border-color: rgba(0, 229, 255, 0.42);
  color: var(--cyan);
}
.advisor-page .decision-followup-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.advisor-page .decision-followup-card {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  padding: 13px;
  background: rgba(8, 14, 22, 0.58);
}
.advisor-page .decision-followup-card .decision-mini-label {
  color: var(--cyan);
}
.advisor-page .decision-followup-card.watchout-panel .decision-mini-label {
  color: var(--gold);
}
@media (max-width: 760px) {
.advisor-page .results.has-decision-context.decision-context-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "setup"
      "best"
      "signals"
      "pulse"
      "scores" !important;
    gap: var(--space-4);
    padding: var(--space-4);
    padding-bottom: 108px;
    overflow-x: hidden;
  }
.advisor-page .results.has-decision-context .selected-card {
    grid-template-columns: minmax(0, 1fr);
  }
.advisor-page .results.has-decision-context .card-showcase {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 7px;
  }
.advisor-page .command-decision-strip {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }
.advisor-page .red-diamond-value-layer {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 11px;
    gap: 9px;
  }
.advisor-page .red-diamond-value-layer span {
    font-size: var(--t-small);
  }
.advisor-page .red-diamond-value-chips span {
    padding: 5px 7px;
    font-size: var(--t-micro);
    letter-spacing: 0.015em;
  }
.advisor-page .pulseai-preview-card {
    padding: var(--space-4);
    gap: 7px;
  }
.advisor-page .pulseai-preview-card p {
    font-size: var(--t-small);
  }
.advisor-page .command-decision-metrics article {
    padding: 8px 7px;
  }
.advisor-page .command-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.advisor-page .command-tabs button {
    padding: 8px 6px;
    font-size: var(--t-micro);
    letter-spacing: 0.02em;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
.advisor-page .results.has-decision-context .best-move-card,
  .advisor-page .results.has-decision-context .decision-signals-panel,
  .advisor-page .results.has-decision-context .pulseai-context-strip {
    width: 100%;
    max-width: 100%;
  }
.advisor-page .results.has-decision-context .pulseai-context-strip {
    grid-template-columns: minmax(0, 1fr);
  }
.advisor-page .best-move-card.decision-brief-first {
    padding: 17px;
    gap: var(--space-6);
  }
.advisor-page .decision-brief-first .best-move-copy h3 {
    font-size: clamp(1.3rem, 7vw, 1.7rem);
    line-height: 1.08;
  }
.advisor-page .decision-brief-first .best-move-action {
    font-size: 0.94rem;
  }
.advisor-page .move-strength-panel,
  .advisor-page .read-quality-panel {
    padding: var(--space-6);
  }
.advisor-page .best-move-meta,
  .advisor-page .decision-kpi-row {
    display: none;
  }
.advisor-page .decision-followup-card {
    padding: var(--space-5);
  }
}
/* v4.41.5 Neon Diamond visual polish */
.advisor-page .best-move-card.decision-brief-first {
  border-color: color-mix(in srgb, var(--move-strength-color) 58%, rgba(0, 229, 255, 0.22));
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--move-strength-color) 18%, transparent), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(255, 45, 75, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(3, 10, 18, 0.98), rgba(7, 17, 27, 0.95) 54%, rgba(2, 7, 13, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 color-mix(in srgb, var(--move-strength-color) 16%, transparent),
    0 24px 58px rgba(0, 0, 0, 0.36),
    0 0 34px color-mix(in srgb, var(--move-strength-color) 14%, transparent);
}
.advisor-page .best-move-card.decision-brief-first.collect {
  --move-strength-color: var(--neon-teal);
}
.advisor-page .best-move-card.decision-brief-first.hold {
  --move-strength-color: var(--neon-gold);
}
.advisor-page .best-move-card.decision-brief-first.cash,
.advisor-page .best-move-card.decision-brief-first.flip {
  --move-strength-color: var(--neon-cyan);
}
.advisor-page .best-move-card.decision-brief-first.danger,
.advisor-page .best-move-card.decision-brief-first.avoid_buy {
  --move-strength-color: var(--neon-pink);
}
.advisor-page .move-strength-panel,
.advisor-page .read-quality-panel {
  display: grid;
  align-content: space-between;
  min-height: 148px;
  border-radius: var(--radius-l);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .read-quality-panel {
  border-color: rgba(255, 190, 58, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 190, 58, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
    rgba(3, 11, 18, 0.74);
}
.advisor-page .read-quality-panel.high {
  border-color: rgba(20, 235, 176, 0.32);
}
.advisor-page .read-quality-panel.low {
  border-color: rgba(255, 190, 58, 0.32);
}
.advisor-page .move-strength-panel span,
.advisor-page .read-quality-panel span,
.advisor-page .decision-signals-panel .final-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  line-height: 1;
}
.advisor-page .move-strength-panel .tip,
.advisor-page .read-quality-panel .tip,
.advisor-page .decision-signals-panel .tip {
  flex: 0 0 auto;
  margin-left: 0;
  transform: translateY(-1px);
}
.advisor-page .decision-kpi-row article {
  border-color: rgba(0, 229, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.07), rgba(20, 235, 176, 0.035)),
    rgba(3, 11, 18, 0.68);
}
.advisor-page .decision-signals-panel {
  border-color: rgba(0, 229, 255, 0.28);
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.12), transparent 32%),
    radial-gradient(circle at 92% 2%, rgba(255, 45, 75, 0.09), transparent 26%),
    rgba(4, 12, 20, 0.9);
}
.advisor-page .decision-signal {
  border-color: rgba(0, 229, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.055), rgba(4, 12, 20, 0.34)),
    rgba(2, 8, 14, 0.56);
}
.advisor-page .decision-signal.strong {
  border-color: rgba(20, 235, 176, 0.22);
}
.advisor-page .decision-signal.moderate {
  border-color: rgba(255, 190, 58, 0.24);
}
.advisor-page .decision-signal.weak {
  border-color: rgba(255, 45, 75, 0.24);
}
.advisor-page .decision-followup-card {
  min-height: 100%;
  border-color: rgba(0, 229, 255, 0.15);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.055), transparent 48%),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .decision-followup-card.watchout-panel {
  border-color: rgba(255, 190, 58, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 190, 58, 0.08), transparent 48%),
    rgba(3, 11, 18, 0.72);
}
.advisor-page .pulseai-context-strip {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    radial-gradient(circle at 7% 50%, rgba(0, 229, 255, 0.17), transparent 29%),
    radial-gradient(circle at 42% 100%, rgba(20, 235, 176, 0.1), transparent 25%),
    radial-gradient(circle at 95% 0%, rgba(255, 45, 75, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(2, 9, 16, 0.97), rgba(7, 17, 27, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 54px rgba(0, 0, 0, 0.32);
}
.advisor-page .preview-message.pulse {
  border-color: rgba(0, 229, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(20, 235, 176, 0.055)),
    rgba(4, 12, 20, 0.74);
}
.advisor-page .engine-context-highlights article {
  border-color: rgba(0, 229, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.07), transparent 54%),
    rgba(3, 11, 18, 0.68);
}
.advisor-page .option {
  --option-accent: var(--neon-cyan);
  border-color: color-mix(in srgb, var(--option-accent) 22%, rgba(147, 164, 179, 0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--option-accent) 9%, transparent), rgba(3, 11, 18, 0.44)),
    rgba(4, 12, 20, 0.78);
}
.advisor-page .option:has(h3:nth-child(n)) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.advisor-page .option .score {
  color: var(--option-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--option-accent) 18%, transparent);
}
.program-page .program-session-builder {
  border-color: rgba(0, 229, 255, 0.32);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.16), transparent 30%),
    radial-gradient(circle at 78% 0%, rgba(20, 235, 176, 0.11), transparent 28%),
    rgba(4, 12, 20, 0.9);
}
.program-page .program-score-grid div:nth-child(2) strong {
  color: var(--neon-gold);
}
.program-page .program-score-grid div:nth-child(3) strong {
  color: var(--neon-teal);
}
.program-page .program-score-grid div:nth-child(4) strong {
  color: #dbe8f0;
}
.reward-selected-actions .status-action,
.reward-selected-actions .secondary-action {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: var(--t-small);
  line-height: 1;
  width: 100%;
}
.reward-selected-actions .status-action {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(20, 235, 176, 0.08)),
    rgba(2, 8, 14, 0.7);
  color: #8df8ff;
}
.roster-command-center {
  gap: var(--space-4);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.1), rgba(255, 45, 75, 0.055)),
    rgba(8, 14, 22, 0.82);
}
.command-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
}
.command-countdown .eyebrow {
  flex: 0 0 auto;
  margin: 0;
}
.command-countdown strong {
  flex: 0 1 auto;
  color: var(--neon-gold);
  font-size: clamp(0.96rem, 1.45vw, 1.14rem);
  line-height: 1.05;
}
.command-countdown small {
  flex: 1 1 420px;
  font-size: var(--t-body);
}
@media (max-width: 760px) {
.advisor-page .pulseai-context-strip,
  .advisor-page .decision-signals-panel {
    padding: var(--space-5);
  }
.reward-selected-actions .status-action,
  .reward-selected-actions .secondary-action {
    min-height: 44px;
    padding: 8px 11px;
    font-size: var(--t-small);
  }
.reward-actions .primary-action,
  .reward-actions .secondary-action,
  .reward-actions .status-action {
    min-height: 42px;
    white-space: normal;
    padding: 10px 12px;
  }
.command-countdown {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* v4.41.6 Advisor visual clarity hotfix */
.tooltip-portal-ready .metric-tip::before,
.tooltip-portal-ready .metric-tip::after {
  content: none !important;
}
.advisor-page .metric-tip:focus-visible {
  border-color: rgba(0, 229, 255, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.1),
    0 0 0 3px rgba(0, 229, 255, 0.12);
  outline: none;
}
.advisor-page .market-board .number-row.metric-tip {
  position: relative;
  align-items: start;
  padding-right: var(--space-5);
}
.advisor-page .market-board .number-row.metric-tip::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(0, 229, 255, 0.42);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.34);
}
.advisor-page .card-hero-panel {
  border-color: rgba(0, 229, 255, 0.2);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.13), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(255, 45, 75, 0.09), transparent 28%),
    linear-gradient(145deg, rgba(4, 12, 20, 0.94), rgba(9, 18, 28, 0.9));
}
.advisor-page .card-intel .ovr-badge {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.16), transparent 52%),
    rgba(4, 12, 20, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 28px rgba(0, 229, 255, 0.1);
}
.advisor-page .advisor-context-panel {
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(4, 13, 22, 0.92), rgba(5, 10, 16, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.advisor-page .advisor-context-head {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
}
.advisor-page .advisor-context-head span {
  color: #9eb4c6;
  font-size: var(--t-small);
  line-height: 1.35;
}
.advisor-page .advisor-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.advisor-page .advisor-context-grid article {
  --context-accent: rgba(0, 229, 255, 0.72);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--context-accent) 32%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 12%, transparent), rgba(2, 8, 14, 0.56)),
    rgba(4, 12, 20, 0.62);
}
.advisor-page .advisor-context-grid span {
  min-width: 0;
  color: #aebfca;
  font-size: var(--t-small);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.advisor-page .intel-chip,
.advisor-page .card-intel-chips > span {
  --chip-accent: var(--neon-cyan);
  --chip-deep: #06121c;
  border: 1px solid color-mix(in srgb, var(--chip-accent) 36%, transparent);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chip-accent) 18%, transparent), rgba(4, 12, 20, 0.62)),
    rgba(4, 12, 20, 0.72);
  color: #eef8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.advisor-page .chip-team {
  --chip-accent: var(--team-accent, var(--neon-cyan));
  --chip-deep: var(--team-deep, #06121c);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chip-accent) 36%, transparent), color-mix(in srgb, var(--chip-deep) 52%, transparent)),
    rgba(4, 12, 20, 0.76);
}
.advisor-page .chip-hot {
  --chip-accent: var(--neon-pink);
  color: #ffeef2;
}
.advisor-page .chip-value,
.advisor-page .chip-flip {
  --chip-accent: var(--neon-gold);
  color: #fff7dc;
}
.advisor-page .move-strength-panel span,
.advisor-page .read-quality-panel span {
  align-items: baseline;
  line-height: 1.05;
}
.advisor-page .move-strength-panel .tip,
.advisor-page .read-quality-panel .tip,
.advisor-page .decision-signals-panel .tip {
  width: 16px;
  height: 16px;
  transform: translateY(1px);
  font-size: var(--t-micro);
  line-height: 14px;
}
.advisor-page .option .score {
  min-width: 46px;
  border: 1px solid color-mix(in srgb, var(--option-accent) 72%, #ffffff);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-accent) 92%, #ffffff 8%), color-mix(in srgb, var(--option-accent) 62%, #06121c 38%));
  color: #061016;
  padding: 6px 9px;
  font-size: var(--t-body);
  font-weight: 700;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 18px color-mix(in srgb, var(--option-accent) 18%, transparent);
}
.advisor-page .option.blocked .score,
.advisor-page .option-avoid_buy .score {
  color: #fff7fa;
  background:
    linear-gradient(135deg, rgba(255, 45, 75, 0.94), rgba(104, 15, 36, 0.92));
}
@media (max-width: 760px) {
.advisor-page .market-board .number-row {
    padding: 10px 12px;
  }
.advisor-page .option .score {
    min-width: 44px;
    font-size: var(--t-body);
  }
}
.pack-compare {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pack-compare-head,
.pack-routine-summary {
  min-width: 0;
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-l);
  display: grid;
  gap: 5px;
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.075), rgba(255, 45, 106, 0.045)),
    rgba(4, 12, 20, 0.72);
}
.pack-compare-head {
  grid-column: 1 / -1;
}
.pack-compare-head span,
.pack-routine-summary strong {
  color: var(--neon-cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pack-compare-head strong {
  color: #ffffff;
  font-size: 1.08rem;
}
.pack-compare-head small,
.pack-routine-summary span {
  color: #b9cbd6;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.35;
}
.pack-type-card.is-default-read {
  opacity: 0.86;
}
.pack-type-card.is-watch-read strong {
  color: var(--neon-gold);
}
.pack-type-card.is-caution-read strong {
  color: var(--neon-pink);
}
.pack-page .pack-layout {
  align-items: start;
}
.account-drawer-plan.is-red-diamond {
  border-color: rgba(255, 45, 106, 0.38);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 45, 106, 0.18), transparent 46%),
    linear-gradient(135deg, rgba(255, 45, 106, 0.16), rgba(0, 229, 255, 0.08)),
    rgba(13, 10, 22, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 26px rgba(255, 45, 106, 0.1);
}
.account-drawer-plan.is-red-diamond span,
.account-drawer-plan.is-red-diamond strong {
  color: #ff718e;
}
.account-drawer-plan.is-red-diamond small {
  color: #ffd7df;
}
.account-drawer-plan.is-red-diamond b {
  border-color: rgba(255, 45, 106, 0.42);
  background: rgba(255, 45, 106, 0.13);
  color: #ffd9df;
}
.version-history::after {
  content: "Older launch history is condensed here so the current production state stays easy to scan.";
  border: 1px dashed rgba(147, 164, 179, 0.18);
  border-radius: 10px;
  padding: 9px 11px;
  color: #aebfcb;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
}
@media (max-width: 900px) {
.pack-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
.pack-compare {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
.pack-decision-panel .program-guidance,
  .pack-decision-panel.is-default-read .program-guidance {
    grid-template-columns: minmax(0, 1fr);
  }
.pack-page .pack-panel,
  .pack-page .pack-compare {
    padding: var(--space-5);
  }
.version-history .version-release:nth-child(n+8) {
    display: none;
  }
.version-release summary {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }
.version-release ul {
    padding: 0 12px 10px 24px;
  }
}
.featured-strip .featured-card {
  padding-bottom: clamp(42px, 5vw, 56px);
}
.rankings-featured {
  padding-bottom: clamp(44px, 5vw, 58px);
}
.page-tabs {
  gap: var(--space-4);
}
.page-tabs button {
  min-height: 42px;
  border-radius: var(--radius-2xl);
  padding: 10px 18px;
  border-color: rgba(103, 207, 232, 0.26);
  background:
    linear-gradient(135deg, rgba(11, 40, 56, 0.92), rgba(12, 13, 24, 0.88)),
    rgba(3, 10, 16, 0.88);
  font-size: clamp(0.78rem, 1.15vw, 0.98rem);
  letter-spacing: 0.035em;
}
.page-tabs button:hover,
.page-tabs button:focus-visible {
  border-color: rgba(0, 229, 255, 0.44);
  transform: translateY(-1px);
}
.page-tabs button.is-active {
  border-color: rgba(0, 229, 255, 0.64);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(255, 45, 106, 0.09)),
    rgba(3, 12, 20, 0.94);
  color: #f5fdff;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.14);
}
.page-tabs button[data-page-tab="risers"],
.page-tabs button[data-page-tab="upgrade"],
.trend-tabs .hot-tab {
  border-color: rgba(255, 45, 106, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 45, 106, 0.2), rgba(255, 190, 58, 0.06)),
    rgba(5, 12, 19, 0.9);
}
.page-tabs button[data-page-tab="sleepers"],
.page-tabs button[data-page-tab="flips"],
.page-tabs button[data-page-tab="value"] {
  border-color: rgba(0, 229, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(20, 235, 176, 0.08)),
    rgba(5, 12, 19, 0.9);
}
.page-tabs button[data-page-tab="neutral"],
.trend-tabs .neutral-tab {
  border-color: rgba(157, 190, 208, 0.28);
  background:
    linear-gradient(135deg, rgba(157, 190, 208, 0.13), rgba(0, 229, 255, 0.06)),
    rgba(5, 12, 19, 0.9);
}
.page-tabs button[data-page-tab="fallers"],
.page-tabs button[data-page-tab="downgrade"],
.trend-tabs .cold-tab {
  border-color: rgba(89, 142, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(89, 142, 255, 0.15), rgba(255, 45, 106, 0.08)),
    rgba(5, 12, 19, 0.9);
}
.page-tabs button[data-page-tab="safe"] {
  border-color: rgba(20, 235, 176, 0.32);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.14), rgba(0, 229, 255, 0.06)),
    rgba(5, 12, 19, 0.9);
}
.trend-tabs {
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: center;
}
@media (max-width: 760px) {
.page-tabs {
    gap: var(--space-3);
  }
.page-tabs button {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: var(--t-small);
  }
.trend-tabs {
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }
}
.ranking-number {
  color: #e6fbff;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
}
.featured-pill,
.signal-badges b,
.card-tag,
.command-links a {
  min-height: 26px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.command-card {
  --command-accent: var(--neon-cyan);
  --command-accent-rgb: 0, 229, 255;
}
.command-card.buy,
.command-card.command-upgrade {
  --command-accent: var(--neon-teal);
  --command-accent-rgb: 20, 235, 176;
}
.command-card.hold,
.command-card.watch,
.command-card.command-gatekeeper {
  --command-accent: var(--neon-gold);
  --command-accent-rgb: 255, 190, 58;
}
.command-card.sell,
.command-card.avoid,
.command-card.command-downgrade {
  --command-accent: var(--neon-pink);
  --command-accent-rgb: 255, 45, 106;
}
.command-card .command-card-copy small {
  color: color-mix(in srgb, var(--command-accent) 78%, #ffffff);
}
.command-links a {
  border-color: rgba(var(--command-accent-rgb), 0.28);
  background:
    linear-gradient(135deg, rgba(var(--command-accent-rgb), 0.1), rgba(3, 11, 18, 0.42)),
    rgba(4, 12, 20, 0.72);
  color: color-mix(in srgb, var(--command-accent) 62%, #ffffff);
}
.command-links a:hover,
.command-links a:focus-visible {
  border-color: rgba(var(--command-accent-rgb), 0.55);
  background:
    linear-gradient(135deg, rgba(var(--command-accent-rgb), 0.18), rgba(3, 11, 18, 0.5)),
    rgba(4, 12, 20, 0.86);
  color: #ffffff;
}
.pack-type-card strong {
  color: color-mix(in srgb, var(--pack-accent, var(--neon-teal)) 72%, #ffffff);
}
.pack-type-card.is-default-read {
  --pack-accent: var(--neon-teal);
}
.pack-type-card.is-watch-read {
  --pack-accent: var(--neon-gold);
}
.pack-type-card.is-caution-read {
  --pack-accent: var(--neon-pink);
}
/* v5.0.0-hf27 Rankings + Roster command controls */
.roster-command-toolbar {
  grid-template-columns: minmax(220px, 1.25fr) minmax(150px, 0.75fr) minmax(130px, 0.6fr) minmax(160px, 0.7fr);
  align-items: end;
  border-color: rgba(0, 229, 255, 0.2);
  background:
    linear-gradient(110deg, rgba(0, 229, 255, 0.12), rgba(20, 235, 176, 0.07) 44%, rgba(255, 45, 106, 0.08)),
    rgba(4, 11, 18, 0.9);
}
.roster-command-toolbar .roster-search-control {
  min-width: 0;
}
.roster-command-toolbar select,
.roster-command-toolbar input {
  min-height: 46px;
}
.roster-command-toolbar .roster-trend-control select {
  border-color: rgba(0, 229, 255, 0.32);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
@media (max-width: 900px) {
.roster-command-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(126px, 0.55fr);
  }
}
@media (max-width: 640px) {
.roster-command-toolbar {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.command-card {
  border-color: rgba(var(--command-accent-rgb, 53, 212, 255), 0.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--command-accent-rgb, 53, 212, 255), 0.12), transparent 36%),
    linear-gradient(145deg, rgba(var(--command-accent-rgb, 53, 212, 255), 0.07), rgba(3, 11, 18, 0.46)),
    rgba(4, 12, 20, 0.78);
}
.page-tabs button,
.lab-tabs button {
  min-height: 40px;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}
.page-tabs button[data-page-tab="risers"],
.page-tabs button[data-page-tab="upgrade"],
.trend-tabs .hot-tab {
  --tab-accent: var(--dp-danger);
  --tab-accent-rgb: 255, 77, 125;
}
.page-tabs button[data-page-tab="sleepers"],
.page-tabs button[data-page-tab="flips"],
.page-tabs button[data-page-tab="value"],
.page-tabs button[data-page-tab="safe"] {
  --tab-accent: var(--dp-market);
  --tab-accent-rgb: 53, 212, 255;
}
.page-tabs button[data-page-tab="neutral"],
.trend-tabs .neutral-tab {
  --tab-accent: var(--dp-neutral);
  --tab-accent-rgb: 184, 201, 214;
}
.page-tabs button[data-page-tab="fallers"],
.page-tabs button[data-page-tab="downgrade"],
.trend-tabs .cold-tab {
  --tab-accent: var(--dp-cool);
  --tab-accent-rgb: 110, 167, 255;
}
.page-tabs button:hover,
.page-tabs button:focus-visible,
.page-tabs button.is-active,
.lab-tabs button:hover,
.lab-tabs button:focus-visible,
.lab-tabs button.is-active {
  border-color: rgba(var(--tab-accent-rgb, 53, 212, 255), 0.52);
  background:
    linear-gradient(135deg, rgba(var(--tab-accent-rgb, 53, 212, 255), 0.16), rgba(255, 45, 106, 0.05)),
    rgba(3, 12, 20, 0.88);
  color: color-mix(in srgb, var(--tab-accent, var(--dp-market)) 70%, #ffffff);
}
.account-drawer-plan.is-red-diamond,
.plan-card.red-diamond,
.premium-status.is-red-diamond {
  --surface-accent: var(--dp-premium);
  --surface-accent-rgb: 255, 45, 106;
}
@media (max-width: 640px) {
.page-tabs button,
  .lab-tabs button {
    min-height: 36px;
    padding: 7px 11px;
    font-size: var(--t-micro);
  }
}
/* v5.0.0 local visual hotfix polish */
.site-header > .account-status-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  left: auto;
  width: min(400px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 128px));
  max-height: min(620px, calc(100dvh - 128px));
  transform: translateY(-4px) scale(0.985);
  transform-origin: top right;
}
.site-header > .account-status-menu.is-open {
  transform: translateY(0) scale(1);
}
.site-header > .account-status-menu .account-drawer-card {
  border-radius: 14px;
  gap: 11px;
  padding: 15px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 26px rgba(53, 212, 255, 0.1);
}
.ranking-number {
  min-width: 58px;
  min-height: 34px;
  padding-inline: 11px;
  letter-spacing: 0;
}
.ranking-row .page-result-link {
  grid-template-columns: 58px 84px minmax(0, 1fr) minmax(112px, 124px);
  align-items: center;
}
.flip-row .page-result-link {
  grid-template-columns: 58px 78px minmax(0, 1fr) minmax(112px, 132px);
  align-items: center;
}
.flip-row .signal-badges,
.ranking-row .signal-badges {
  align-items: center;
}
.flip-row .page-result-metric,
.ranking-row .page-result-metric {
  justify-self: end;
  min-width: 0;
}
.signal-reasons li,
.command-card.watch .command-card-copy small,
.pack-type-card.is-watch-read .program-guidance,
.pack-type-card.is-watch-read p,
.pack-type-card.is-watch-read li {
  background: transparent;
  box-shadow: none;
  color: #aebfcb;
}
.command-card.watch .command-card-copy small,
.pack-type-card.is-watch-read strong {
  text-shadow: none;
}
@media (max-width: 760px) {
.site-header > .account-status-menu {
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    width: min(400px, calc(100vw - 24px));
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
  }
.ranking-row .page-result-link,
  .flip-row .page-result-link {
    grid-template-columns: 54px 68px minmax(0, 1fr);
    grid-template-areas:
      "rank art copy"
      "rank art score";
    column-gap: var(--space-5);
    row-gap: 9px;
    align-items: start;
  }
.ranking-row .ranking-number,
  .flip-row .ranking-number {
    grid-area: rank;
    width: 54px;
    min-width: 54px;
    margin: 0;
    padding-inline: 8px;
    font-size: var(--t-body);
  }
.ranking-row .page-result-metric,
  .flip-row .page-result-metric {
    grid-area: score;
    grid-column: auto;
    justify-self: start;
    justify-items: start;
    width: 100%;
    border-top: 1px solid rgba(147, 164, 179, 0.12);
    padding-top: var(--space-3);
  }
}
@media (max-width: 420px) {
.site-header > .account-status-menu {
    right: 0;
    width: calc(100vw - 24px);
  }
.account-drawer-plan {
    grid-template-columns: minmax(0, 1fr);
  }
.account-drawer-plan b {
    justify-self: start;
  }
}
/* v5.0.0 account menu minimalist hotfix */
.site-header > .account-status-menu {
  width: min(318px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 96px));
  max-height: min(520px, calc(100dvh - 96px));
}
.site-header > .account-status-menu .account-drawer-card {
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(16, 28, 38, 0.98), rgba(8, 11, 20, 0.98));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(238, 244, 248, 0.05);
}
.site-header > .account-status-menu .account-drawer-close {
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  font-size: var(--t-micro);
}
.site-header > .account-status-menu .account-drawer-head {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  padding-right: 30px;
}
.site-header > .account-status-menu .account-drawer-avatar {
  width: 38px;
  height: 38px;
  font-size: var(--t-body);
}
.site-header > .account-status-menu .account-drawer-identity {
  gap: 2px;
}
.site-header > .account-status-menu .account-drawer-identity strong {
  font-size: var(--t-base);
  line-height: 1.12;
}
.site-header > .account-status-menu .account-drawer-identity span {
  font-size: var(--t-small);
  line-height: 1.2;
}
.site-header > .account-status-menu .account-drawer-plan {
  gap: var(--space-3);
  align-items: center;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.48);
}
.site-header > .account-status-menu .account-menu-profile .account-drawer-plan span,
.site-header > .account-status-menu .account-menu-profile .account-drawer-plan small {
  display: none;
}
.site-header > .account-status-menu .account-drawer-plan strong {
  font-size: var(--t-body);
  line-height: 1.12;
}
.site-header > .account-status-menu .account-drawer-plan b {
  padding: 4px 7px;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}
.site-header > .account-status-menu .account-drawer-action {
  gap: var(--space-1);
}
.site-header > .account-status-menu .account-drawer-primary,
.site-header > .account-status-menu .account-drawer-secondary {
  min-height: 34px;
  justify-content: flex-start;
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(8, 14, 22, 0.58);
  color: #d9f6ff;
  font-size: var(--t-small);
  box-shadow: none;
}
.site-header > .account-status-menu .account-drawer-primary {
  border-color: rgba(95, 199, 223, 0.32);
}
.site-header > .account-status-menu .account-menu-message {
  font-size: var(--t-micro);
  line-height: 1.25;
}
.site-header > .account-status-menu .account-drawer-nav {
  border-radius: 10px;
}
.site-header > .account-status-menu .account-drawer-row {
  min-height: 36px;
  padding: 8px 10px;
  font-size: var(--t-small);
}
.site-header > .account-status-menu .account-menu-auth-form {
  gap: var(--space-3);
}
.site-header > .account-status-menu .account-menu-auth-form label {
  gap: var(--space-1);
  font-size: var(--t-small);
}
.site-header > .account-status-menu .account-menu-auth-form input {
  min-height: 36px;
  padding: 9px 10px;
}
.site-header > .account-status-menu .account-menu-actions {
  gap: var(--space-2);
}
.site-header > .account-status-menu .account-menu-actions .primary-action,
.site-header > .account-status-menu .account-menu-actions .secondary-action {
  min-height: 44px;
  padding: 8px 10px;
  font-size: var(--t-small);
}
@media (max-width: 760px) {
.site-header > .account-status-menu {
    width: min(318px, calc(100vw - 16px));
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
}
@media (max-width: 420px) {
.site-header > .account-status-menu {
    width: calc(100vw - 16px);
  }
}
.rankings-page .ranking-number,
.flip-page .ranking-number {
  justify-self: center;
  align-self: center;
}
.rankings-page .featured-strip .featured-card strong,
.flip-page .featured-strip .featured-card strong,
.rankings-page .ranking-row .page-result-main strong,
.flip-page .flip-row .page-result-main strong {
  display: -webkit-box;
  min-height: 2.16em;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.rankings-page .featured-strip .featured-card strong,
.flip-page .featured-strip .featured-card strong {
  align-items: start;
  line-height: 1.08;
}
.rankings-page .ranking-row .page-result-main strong,
.flip-page .flip-row .page-result-main strong {
  line-height: 1.12;
}
/* Red Diamond card import: header pill (all pages, injected by nav.js) */
.card-import-pill {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 12px 5px 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(63, 8, 20, 0.9), rgba(16, 8, 14, 0.95));
  border: 1px solid rgba(229, 57, 90, 0.5);
  text-decoration: none;
  white-space: nowrap;
}
/* On a phone the label is hidden and this collapses to a 36px gem -- a real
   control, 8px under the 44px floor the rest of the site keeps. Grown with a
   pseudo rather than padding because it sits in the header grid on EVERY page,
   and a bigger box there would move the header everywhere. -5px, not -4px: an
   absolutely positioned pseudo is offset from the PADDING box, so the pill's
   1px border eats 2px and -4px only reached 42. -5px lands exactly on 44x44
   and still leaves 5px to the nav toggle and account pill either side. */
.card-import-pill::after { content: ""; position: absolute; inset: -5px; }
.card-import-pill:hover {
  border-color: rgba(255, 139, 163, 0.9);
  filter: brightness(1.15);
}
.card-import-pill-gem {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
}
.card-import-pill span {
  display: grid;
  line-height: 1.15;
}
.card-import-pill strong {
  color: #fff2f5;
  font-size: var(--t-small);
  font-weight: 600;
}
.card-import-pill small {
  color: #ff8ba3;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card-import-pill.is-eligible {
  animation: redDiamondCtaPulse 2.4s ease-in-out infinite;
}
.card-import-pill.is-eligible .card-import-pill-gem {
  animation: redDiamondGemGlow 2.4s ease-in-out infinite;
}
.dashboard-hero {
  position: relative;
}
@keyframes redDiamondGemGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(229, 57, 90, 0.35)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 93, 126, 0.95)); }
}
@keyframes redDiamondCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 90, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(229, 57, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
.card-import-pill.is-eligible,
  .card-import-pill.is-eligible .card-import-pill-gem {
    animation: none;
  }
}
@media (max-width: 900px) {
.dashboard-hero {
    position: relative;
    display: block;
  }
}
@media (max-width: 1520px) and (min-width: 901px) {
.card-import-pill span {
    display: none;
  }
.card-import-pill {
    padding: var(--space-1);
  }
.ask-pulseai-trigger {
    padding: var(--space-3);
  }
.ask-pulseai-trigger span:not(.ask-pulseai-trigger-orb) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
.release-trigger {
    min-height: 36px;
    padding: 7px 11px;
    font-size: var(--t-small);
  }
}
@media (max-width: 900px) {
.card-import-pill span {
    display: none;
  }
.card-import-pill {
    padding: var(--space-1);
  }
}
/* Card inventory import consent page (compact, guided) */
.sync-consent-page .import-consent {
  max-width: 640px;
  margin: 10px auto 28px;
  display: grid;
  gap: var(--space-5);
}
/* Card import guide page (compact) */
.card-import-page .import-guide {
  max-width: 720px;
  margin: 10px auto 24px;
  display: grid;
  gap: var(--space-5);
}
.card-import-page .import-guide .account-note {
  font-size: var(--t-micro);
  color: #6d8593;
  line-height: 1.5;
}
/* v562 row de-boiler: single methodology notes, market rank badges,
   rankings price prominence, and roster locked-teaser gates. Append-only. */
.board-method-note {
  margin: 2px 0 0;
  border-left: 2px solid rgba(95, 199, 223, 0.4);
  padding: 4px 0 4px 12px;
  color: #8fa5b3;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
}
.board-method-note[hidden] {
  display: none;
}
/* Market Pulse: the list is the single home; the old top-5 rail becomes
   rank badges on the first five rows. */
.market-page .page-result-row {
  position: relative;
}
.market-page .market-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 208, 106, 0.5);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 208, 106, 0.92), rgba(255, 101, 124, 0.88));
  color: var(--field);
  padding: 3px 7px;
  font-size: var(--t-small);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* Pulse Rankings: price is the loud per-row metric; Pulse score rides below it. */
.ranking-row .ranking-pulse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(95, 199, 223, 0.26);
  border-radius: var(--radius-pill);
  background: rgba(95, 199, 223, 0.08);
  color: #79eaff;
  padding: 3px 9px;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Roster Command locked teasers: a short designed preview with a fade-out,
   one inline unlock card, and a hard stop instead of a full-page blur wall. */
.roster-locked .gold-gate-content {
  max-height: 430px;
  overflow: hidden;
  filter: blur(3px);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 94%);
}
.roster-locked .gold-gate-overlay {
  position: relative;
  inset: auto;
  transform: none;
  width: min(430px, calc(100% - 24px));
  margin: -84px auto 14px;
}
.roster-locked .gold-gate-overlay .gold-gate-value-list {
  display: none;
}
.roster-locked .roster-locked-stop {
  margin: 0;
  padding: 0 16px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  color: #9fb2c0;
  font-size: var(--t-body);
  font-weight: 600;
  text-align: center;
}
.roster-locked.is-preview-unlocked .gold-gate-content {
  max-height: none;
  filter: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.roster-locked.is-preview-unlocked .gold-gate-overlay,
.roster-locked.is-preview-unlocked .roster-locked-stop {
  display: none;
}
/* The ranked-list teaser is capped in JS to 3 rows and carries no second
   unlock card, only the hard-stop sign-in line. */
.roster-locked-list .gold-gate-content {
  max-height: none;
}
.roster-locked-list .roster-locked-stop {
  padding-top: var(--space-1);
}
@media (max-width: 640px) {
.roster-locked .gold-gate-overlay {
    margin-top: -64px;
  }
.market-page .market-rank {
    top: 8px;
    left: 8px;
    min-width: 30px;
    font-size: var(--t-small);
  }
}
/* ==========================================================================
   v564-gates — designed free-tier gate states (Flip Finder + Pack Value Lab)
   One unlock card per page. Locked teasers are skeleton + lock-glyph rows,
   never blurred real data. Extends the .gold-gate-* component; the classic
   blur treatment above stays available for legacy gate surfaces.
   ========================================================================== */
.gold-gate-shell.gold-gate-designed {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.gold-gate-designed .gold-gate-content {
  display: none;
  min-height: 0;
  filter: none;
  opacity: 1;
}
.gold-gate-designed .gold-gate-content::after {
  display: none;
}
.gold-gate-designed.is-preview-unlocked .gold-gate-content {
  display: block;
  pointer-events: auto;
  user-select: auto;
}
.gold-gate-designed .gold-locked-preview {
  display: grid;
  gap: var(--space-4);
}
.gold-gate-designed.is-preview-unlocked .gold-locked-preview,
.gold-gate-designed.is-preview-unlocked .gold-gate-overlay {
  display: none;
}
.page-summary .gold-gate-designed,
.page-summary .gold-locked-preview {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.market-summary .gold-gate-designed .gold-locked-preview,
.market-summary .gold-gate-designed.is-preview-unlocked .gold-gate-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: var(--space-4);
}
.market-summary .gold-gate-designed.is-preview-unlocked .gold-locked-preview {
  display: none;
}
.featured-strip .gold-gate-designed .gold-locked-preview,
.featured-strip .gold-gate-designed.is-preview-unlocked .gold-gate-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-5);
}
.featured-strip .gold-gate-designed.is-preview-unlocked .gold-locked-preview {
  display: none;
}
.gold-gate-designed .gold-gate-overlay {
  position: relative;
  inset: auto;
  width: min(520px, 100%);
  margin: 14px auto 2px;
  transform: none;
}
.gold-gate-designed .gold-gate-overlay[hidden] {
  display: none;
}
.gold-gate-overlay .gold-gate-price-note {
  margin: 10px 0 0;
  color: #ffe3e8;
  font-size: var(--t-body);
  font-weight: 700;
}
.locked-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold-ink);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.locked-stat .locked-metric {
  font-size: var(--t-base);
}
.locked-stat span,
.locked-stat small {
  opacity: 0.72;
}
.locked-bar {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(147, 164, 179, 0.2);
}
.locked-bar-dim {
  background: rgba(147, 164, 179, 0.12);
}
.locked-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-7);
  min-height: 66px;
  border: 1px dashed rgba(255, 85, 116, 0.3);
  border-radius: var(--radius-l);
  background: rgba(10, 17, 25, 0.62);
  padding: 12px 16px;
}
.locked-row .ranking-number {
  opacity: 0.55;
}
.locked-row-art {
  display: grid;
  place-items: center;
  width: 44px;
  height: 58px;
  border: 1px solid rgba(147, 164, 179, 0.22);
  border-radius: var(--radius-m);
  background: rgba(147, 164, 179, 0.08);
}
.locked-row-lines {
  display: grid;
  gap: var(--space-3);
}
.locked-row-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold-ink);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.locked-featured {
  pointer-events: none;
}
.locked-featured .locked-metric {
  margin-top: var(--space-1);
  font-style: normal;
}
.locked-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pack-decision-panel.is-locked-read .locked-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 6px 0 10px;
}
.pack-decision-panel.is-locked-read .gold-locked-preview {
  gap: var(--space-5);
}
.pack-meter.is-locked span {
  background: rgba(147, 164, 179, 0.35);
}
.locked-caption {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.4;
}
.pack-toolbar {
  grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(140px, 0.8fr)) minmax(150px, auto);
}
.pack-run-button {
  align-self: end;
  min-height: 44px;
  border: 1px solid rgba(41, 242, 192, 0.4);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--cyan), var(--neon-teal-ink));
  color: #041016;
  padding: 0 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pack-run-button:hover,
.pack-run-button:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
@media (max-width: 760px) {
.gold-gate-shell.gold-gate-designed {
    min-height: 0;
  }
.gold-gate-designed .gold-gate-content {
    min-height: 0;
  }
.gold-gate-designed .gold-gate-overlay {
    width: 100%;
    margin: 12px 0 0;
  }
.pack-run-button {
    width: 100%;
  }
}
/* ============================================================
   v563 Pricing page + paid-conversion path (2026-07-16)
   - /pricing.html decision page (reuses membership tier cards)
   - Account hero sign-in / create-account actions
   - Honest ghost state for unconfigured checkout CTA
   - Price note beside the Red Diamond Pro CTA
   ============================================================ */
.tier-price-note {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  color: rgba(214, 231, 245, 0.72);
}
.tier-red-diamond .tier-price-note {
  color: rgba(255, 214, 219, 0.85);
}
.tier-cta.tier-cta-unavailable,
.tier-cta.tier-cta-unavailable:disabled {
  background: transparent;
  border: 1px dashed rgba(214, 231, 245, 0.35);
  color: rgba(214, 231, 245, 0.6);
  box-shadow: none;
  cursor: not-allowed;
  text-shadow: none;
  opacity: 1;
}
.tier-cta.tier-cta-unavailable:hover,
.tier-cta.tier-cta-unavailable:focus-visible {
  transform: none;
  filter: none;
}
.pricing-page .pricing-hero {
  padding-bottom: var(--space-8);
}
.pricing-tier-grid {
  max-width: 920px;
  margin: 8px auto 0;
}
.pricing-tier-grid .membership-tier-card {
  min-height: 0;
}
a.pricing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.pricing-footnote {
  max-width: 920px;
  margin: 26px auto 40px;
  text-align: center;
  font-size: var(--t-body);
  color: rgba(214, 231, 245, 0.65);
}
@media (max-width: 760px) {
.pricing-tier-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   v565 Advisor declutter (design eval S7/S8/S9)
   - Search-first hero band: the empty-state hero and the setup
     panel share the first viewport at desktop widths; trust
     strip and icon trio are gone (markup removed in app.js).
   - Watchlist / Compare / Fresh Drops panels render only when
     populated ([hidden] until content exists).
   - Matches: labeled stub values, NO SELL as a name badge,
     quick-sell shown in the value slot for locked cards.
   - Everything-page tail replaced by a one-line link-out strip.
   ============================================================ */
.advisor-page [hidden] {
  display: none !important;
}
@media (min-width: 901px) {
.advisor-page .workspace:has(.prototype-advisor) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-6);
    align-items: stretch;
  }
}
@media (min-width: 641px) {
.advisor-page .prototype-advisor {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    align-content: center;
    gap: clamp(14px, 1.6vw, 20px);
    padding: clamp(18px, 2.2vw, 28px);
  }
.advisor-page .prototype-advisor h2 {
    max-width: none;
    font-size: clamp(1.9rem, 2.5vw, 2.6rem);
  }
.advisor-page .prototype-card {
    gap: var(--space-3);
    padding: 10px 12px 12px;
  }
.advisor-page .prototype-card-art {
    width: min(100%, 150px);
  }
.advisor-page .prototype-tag {
    padding: 6px 8px;
  }
.advisor-page .prototype-detail {
    padding: 7px 10px;
    font-size: var(--t-body);
  }
}
.advisor-page .match-card .price {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
.advisor-page .match-card .price b {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
}
.advisor-page .match-card .price small {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.advisor-page .no-sell-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px 2px;
  border: 1px solid rgba(255, 101, 124, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 101, 124, 0.1);
  color: var(--red);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 2px;
}
.advisor-page .advisor-linkouts p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-base);
  line-height: 1.6;
}
.advisor-page .advisor-linkouts a {
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
}
.advisor-page .advisor-linkouts a:hover,
.advisor-page .advisor-linkouts a:focus-visible {
  color: #9ff0ff;
  text-decoration: underline;
}
/* end v565-advisor-declutter */
/* v566 home hero: hero card search, job-based tool cards, compact tool links,
   and the one-line PulseAI footer teaser. Appended block; overrides only home
   surfaces introduced in this pass. */
.hero-search .hero-search-go {
  flex: 0 0 auto;
  border: 1px solid rgba(95, 199, 223, 0.5);
  border-radius: 10px;
  background: var(--cyan);
  color: #061016;
  font: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.015em;
  padding: 0 22px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(95, 199, 223, 0.24);
}
.hero-search .hero-search-go:hover,
.hero-search .hero-search-go:focus-visible {
  filter: brightness(1.1);
  outline: none;
}
.job-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-height: 218px;
  padding: var(--space-9);
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, rgba(126, 182, 255, 0.08), transparent 48%),
    rgba(15, 24, 33, 0.88);
  color: var(--ink);
  text-decoration: none;
}
.job-card .job-kicker {
  margin: 0;
  width: fit-content;
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.job-card .job-copy {
  margin: 0;
  color: #b8c6d0;
  font-size: var(--t-base);
  line-height: 1.45;
}
.job-card .job-teaser {
  margin: 2px 0 0;
  color: #d5e4ed;
  font-size: var(--t-body);
  line-height: 1.4;
  border: 1px solid rgba(20, 235, 176, 0.18);
  border-radius: 7px;
  background: rgba(20, 235, 176, 0.06);
  padding: 8px 10px;
}
.job-card .job-teaser-tag {
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--neon-teal);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tool-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: var(--space-6);
  padding: 13px 18px;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  background: rgba(13, 21, 29, 0.55);
}
.tool-links-label {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pulseai-footnote {
  margin: 26px 0 6px;
  color: rgba(178, 192, 204, 0.72);
  font-size: var(--t-body);
  line-height: 1.5;
  text-align: center;
}
.pulseai-footnote strong {
  color: rgba(213, 228, 237, 0.9);
}
@media (max-width: 640px) {
.hero-search .hero-search-go {
    padding: 14px 22px;
  }
}
.program-page .program-team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  border: 1px dashed rgba(147, 164, 179, 0.22);
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, 0.4);
  padding: var(--space-4);
}
.program-page .program-team-grid button {
  min-height: 34px;
  border: 1px solid rgba(147, 164, 179, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(15, 24, 33, 0.8);
  color: var(--muted);
  padding: 6px 12px;
  font-size: var(--t-small);
  font-weight: 700;
}
.program-page .program-team-grid button:hover,
.program-page .program-team-grid button:focus-visible,
.program-page .program-team-grid button.is-active {
  border-color: rgba(95, 199, 223, 0.5);
  background: rgba(95, 199, 223, 0.14);
  color: var(--ink);
  outline: none;
}
/* Session-length picker now lives inside the Full Guide */
.program-page .program-detail .session-choice {
  margin: 8px 0 10px;
  max-width: 320px;
}
/* Mobile: halve the filter stack and keep the answer near the top */
@media (max-width: 760px) {
.tool-page.program-page .program-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
.program-page .program-feature-card small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
/* end v567-planner-collapse */
/* v568 database table view -------------------------------------------------
   Trader-grade database: sortable compact table as the default layout, a
   List/Cards toggle, three clickable summary tiles, capped rendering with a
   Show-more control, and a mobile Filters disclosure with sticky search. */
.database-toolbar {
  grid-template-columns: minmax(0, 1fr);
}
.database-filter-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--space-5);
}
.database-filters-toggle {
  display: none;
}
.page-summary button {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  display: grid;
  gap: 5px;
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(95, 199, 223, 0.08), transparent 52%),
    rgba(15, 24, 33, 0.78);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.page-summary button:hover,
.page-summary button:focus-visible {
  border-color: rgba(95, 199, 223, 0.45);
  outline: none;
}
.page-summary button.is-active {
  border-color: rgba(20, 235, 176, 0.55);
  background:
    linear-gradient(135deg, rgba(20, 235, 176, 0.14), transparent 55%),
    rgba(15, 24, 33, 0.86);
}
.database-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}
.database-view-toggle {
  display: inline-flex;
  border: 1px solid rgba(147, 164, 179, 0.2);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.database-view-toggle button.is-active {
  background: rgba(95, 199, 223, 0.18);
  color: var(--ink);
}
.database-table-wrap {
  min-width: 0;
  border: 1px solid rgba(147, 164, 179, 0.14);
  border-radius: var(--radius-l);
  background: rgba(15, 24, 33, 0.82);
  overflow-x: auto;
}
.database-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.database-table th.db-h-overall {
  width: 84px;
}
.database-table th.db-h-price {
  width: 128px;
}
.database-table th.db-h-spread {
  width: 122px;
}
.database-table th,
.database-table td {
  border-bottom: 1px solid rgba(147, 164, 179, 0.1);
  padding: 9px 14px;
  vertical-align: middle;
}
.database-table thead th {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.database-table thead button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 4px 0;
}
.database-table thead button i {
  display: inline-block;
  min-width: 1em;
  margin-left: 3px;
  font-style: normal;
  color: var(--cyan);
}
.database-table thead button:hover,
.database-table thead button:focus-visible,
.database-table thead button.is-active {
  color: var(--ink);
  outline: none;
}
.database-table tbody tr {
  cursor: pointer;
}
.database-table tbody tr:hover td {
  background: rgba(95, 199, 223, 0.06);
}
.database-table tbody tr:last-child td {
  border-bottom: 0;
}
.db-card-cell {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}
.db-thumb {
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-m);
  background: linear-gradient(145deg, #172330, #25635b);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  font-weight: 700;
}
.db-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.db-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
}
.db-card-copy a {
  max-width: 100%;
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-card-copy a:hover,
.db-card-copy a:focus-visible {
  color: var(--cyan);
  outline: none;
}
.db-card-copy small {
  max-width: 100%;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-chip {
  border: 1px solid rgba(255, 101, 124, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(255, 101, 124, 0.12);
  color: #ffb3c0;
  padding: 2px 8px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.db-ovr {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
}
.db-price strong {
  color: var(--green);
  font-size: 0.96rem;
}
.db-spread {
  color: var(--muted);
  font-size: var(--t-base);
  font-weight: 600;
}
.database-more:empty {
  display: none;
}
.database-show-more {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(95, 199, 223, 0.3);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: rgba(95, 199, 223, 0.08);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 700;
  cursor: pointer;
}
.database-show-more:hover,
.database-show-more:focus-visible {
  border-color: rgba(95, 199, 223, 0.55);
  outline: none;
}
.database-show-more small {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
@media (max-width: 900px) {
.database-filter-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
/* The generic mobile .tool-page overflow-x: hidden turns <main> into a
     scroll container and disables position: sticky for the search toolbar.
     clip prevents horizontal scroll without creating a scroll container. */
/* Beat the themed .tool-page:not(.advisor-page) .page-toolbar rule that
     pins position: relative on toolbars. */
.tool-page.database-page .database-toolbar {
    position: sticky;
    top: 0;
    z-index: 900;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    background:
      linear-gradient(90deg, rgba(95, 199, 223, 0.08), transparent 40%),
      #070e16;
  }
.database-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid rgba(95, 199, 223, 0.3);
    border-radius: 7px;
    padding: 0 16px;
    background: rgba(95, 199, 223, 0.1);
    color: var(--ink);
    font-size: var(--t-body);
    font-weight: 700;
    cursor: pointer;
  }
.database-toolbar.is-filters-open .database-filters-toggle {
    border-color: rgba(20, 235, 176, 0.5);
    background: rgba(20, 235, 176, 0.12);
  }
.database-filter-group {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 56vh;
    overflow-y: auto;
    padding-top: 2px;
  }
.database-toolbar.is-filters-open .database-filter-group {
    display: grid;
  }
.page-summary button {
    padding: var(--space-4);
  }
.page-summary button strong {
    font-size: 1.15rem;
  }
.database-table th,
  .database-table td {
    padding: 8px 6px;
  }
.database-table th.db-h-overall {
    width: 40px;
  }
.database-table th.db-h-price {
    width: 74px;
  }
.database-table th.db-h-spread {
    width: 72px;
  }
.database-table thead th {
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
  }
.db-card-cell {
    gap: var(--space-3);
  }
.db-thumb {
    width: 48px;
  }
.db-card-copy a {
    font-size: var(--t-base);
  }
.db-card-copy small {
    font-size: var(--t-micro);
  }
.db-ovr {
    font-size: var(--t-base);
  }
.db-price strong {
    font-size: var(--t-body);
  }
.db-spread {
    font-size: var(--t-small);
  }
}
/* end v568-database-table */
/* v570-inventory-empty: one onboarding card in empty state, compact strip once rows exist */
.inventory-onboard-card {
  display: grid;
  gap: var(--space-6);
}
.inventory-onboard-head .eyebrow {
  margin: 0 0 4px;
}
.inventory-onboard-head h2 {
  margin: 0;
  font-size: var(--t-lead);
}
.inventory-onboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.inventory-onboard-tabs [role="tab"] {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(147, 164, 179, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 22, 0.55);
  color: #cfe3ee;
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  padding: 8px 14px;
}
.inventory-onboard-tabs [role="tab"][aria-selected="true"] {
  border-color: rgba(95, 199, 223, 0.55);
  background: rgba(95, 199, 223, 0.14);
  color: #eaf6fb;
}
.inventory-onboard-panel {
  display: grid;
  gap: var(--space-1);
}
.inventory-onboard-panel .onboard-copy {
  margin: 0;
  color: #91a3b0;
  font-size: var(--t-body);
  line-height: 1.5;
}
.inventory-onboard-panel textarea {
  margin-top: var(--space-3);
  min-height: 140px;
}
.inventory-onboard.is-compact .inventory-onboard-card {
  padding: 12px 16px;
  gap: var(--space-4);
}
.inventory-onboard.is-compact .inventory-onboard-head,
.inventory-onboard.is-compact .onboard-copy-import {
  display: none;
}
.inventory-onboard.is-compact .inventory-import-actions {
  margin-top: var(--space-2);
}
/* The hidden attribute must beat the display rules these sections carry. */
.inventory-onboard-panel[hidden],
.inventory-summary[hidden],
.inventory-freshness[hidden],
.inventory-next[hidden],
.inventory-toolbar[hidden],
.inventory-shell[hidden] {
  display: none !important;
}
/* end v570-inventory-empty */
/* v571-plain-pages: account status board, card-import buttons/gate/privacy panel, help FAQ groups + tool links (design-eval facelift) */
.account-status-board .account-state-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}
.account-status-board .account-state-table tr {
  border-bottom: 1px solid rgba(147, 164, 179, 0.14);
}
.account-status-board .account-state-table tr:last-child {
  border-bottom: 0;
}
.account-status-board .account-state-table th,
.account-status-board .account-state-table td {
  padding: 11px 12px 11px 0;
  text-align: left;
  vertical-align: middle;
}
.account-status-board .account-state-table th {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.account-status-board .account-state-table td {
  color: var(--muted);
  font-weight: 650;
}
.account-status-board .account-state-table td:last-child {
  width: 1%;
  padding-right: 0;
  text-align: right;
}
.state-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.state-pill.state-live {
  color: var(--cyan);
  border-color: rgba(95, 199, 223, 0.44);
  background: rgba(95, 199, 223, 0.12);
}
.state-pill.state-progress {
  color: var(--gold);
  border-color: rgba(241, 184, 75, 0.44);
  background: rgba(241, 184, 75, 0.12);
}
.state-pill.state-planned {
  color: var(--muted);
  border-color: rgba(147, 164, 179, 0.4);
  background: rgba(147, 164, 179, 0.1);
}
.account-status-board .account-metrics {
  margin-top: var(--space-6);
}
.account-status-board .account-metrics:empty {
  display: none;
}
@media (max-width: 760px) {
.account-status-board .account-state-table th {
    white-space: normal;
  }
.account-status-board .account-state-table td:not(:last-child):not([scope]) {
    display: none;
  }
}
/* card-import: gate card, per-step CTAs, step states, privacy panel */
.card-import-page .import-gate-cta {
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}
.card-import-page .import-step-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 2px;
  text-decoration: none;
}
.card-import-page .import-step-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(95, 199, 223, 0.4);
  color: var(--cyan);
  background: rgba(95, 199, 223, 0.1);
  font-size: var(--t-base);
}
.card-import-page .import-privacy-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 18px auto 0;
  max-width: 760px;
}
.card-import-page .import-privacy-panel article {
  padding: 14px 16px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: var(--radius-xl);
  background: rgba(10, 16, 23, 0.72);
}
.card-import-page .import-privacy-panel article:first-child {
  border-color: rgba(95, 199, 223, 0.3);
}
.card-import-page .import-privacy-panel article:last-child {
  border-color: rgba(255, 101, 124, 0.3);
}
.card-import-page .import-privacy-panel h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card-import-page .import-privacy-panel article:first-child h4 {
  color: var(--cyan);
}
.card-import-page .import-privacy-panel article:last-child h4 {
  color: var(--red);
}
.card-import-page .import-privacy-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 650;
  line-height: 1.5;
}
@media (max-width: 760px) {
.card-import-page .import-privacy-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* help: house hero polish, FAQ groups, tool link-out row */
.help-hero {
  background:
    linear-gradient(120deg, rgba(95, 199, 223, 0.12), transparent 48%),
    linear-gradient(300deg, rgba(255, 45, 75, 0.1), transparent 52%),
    rgba(12, 17, 24, 0.86);
}
.faq-panel .faq-group-label {
  margin: 0 0 4px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(95, 199, 223, 0.24);
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.help-tool-links {
  margin-top: var(--space-8);
  padding: 16px 18px;
  border: 1px solid rgba(147, 164, 179, 0.16);
  border-radius: 14px;
  background: rgba(12, 17, 24, 0.72);
}
.help-tool-links .eyebrow {
  margin: 0 0 10px;
}
/* end v571-plain-pages */
/* v572 card page + mobile filter sheets ------------------------------------
   S12 mobile kit for Pulse Rankings and Market Pulse: reuse the database
   Filters-disclosure convention (toggle + collapsed filter group + badge) so
   at <=700px the toolbar shows only the search input and a Filters button.
   Desktop is untouched: the filter group renders as display: contents so its
   controls keep participating in the existing toolbar grid. */
.page-filters-toggle {
  display: none;
}
.page-filter-group {
  display: contents;
}
@media (max-width: 760px) {
.rankings-page .rankings-toolbar,
  .market-page .page-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
.page-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid rgba(95, 199, 223, 0.3);
    border-radius: 7px;
    padding: 0 16px;
    background: rgba(95, 199, 223, 0.1);
    color: var(--ink);
    font-size: var(--t-body);
    font-weight: 700;
    cursor: pointer;
  }
.page-toolbar.is-filters-open .page-filters-toggle {
    border-color: rgba(20, 235, 176, 0.5);
    background: rgba(20, 235, 176, 0.12);
  }
.page-filter-group {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    max-height: 56vh;
    overflow-y: auto;
    padding-top: 2px;
  }
.page-toolbar.is-filters-open .page-filter-group {
    display: grid;
  }
/* Mobile Market Pulse list cap: reuse the database Show-more control. */
}
/* end v572-cardpage-mobile */
/* ============================================================
   v573 advisor house hero + setup row
   Advisor adopts the sitewide hero-fan standard (copy left, three
   floating cards right) with the Setup panel as a full-width row
   directly below the hero. (User request 2026-07-17.)
   ============================================================ */
.advisor-page .advisor-setup-row .data-health {
  margin-top: var(--space-5);
  padding: 8px 12px;
  align-items: center;
}
/* end v573-advisor-house-hero */
/* ============================================================
   v574 home gateway hero (MOCKUP)
   Cinematic landing hero: keyart background, signature headline,
   embedded card search. Sells the product before showing it.
   ============================================================ */
.gateway-hero {
  position: relative;
  aspect-ratio: 1800 / 856;
  min-height: 460px;
  max-height: 780px;
  display: grid;
  align-content: center;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(95, 199, 223, 0.2);
  padding: clamp(28px, 4vw, 60px);
  background: #05090f url("/assets/home-gateway-hero.jpg") center / cover no-repeat;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.gateway-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.16em;
}
.gateway-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon-pink);
  box-shadow: 0 0 0 0 rgba(255, 45, 75, 0.6);
  animation: gateway-live-pulse 2.2s ease-out infinite;
}
@keyframes gateway-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 75, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 45, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 75, 0); }
}
.gateway-tagline {
  margin: 22px 0 0;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--dim);
}
@media (max-width: 900px) {
/* strong left scrim so the copy stays legible over the art */
/* The three .home-hero-line spans are three deliberate beats, and the top
     clamp's 2.5rem FLOOR meant every phone got a flat 40px no matter how
     narrow. "Read the market." wants 332px there and a 375px screen only
     offers 305, so two of the three beats wrapped again and left "market."
     and "sleeper." dangling -- five ragged lines, hero 126px -> 210px.
     Scale with the screen instead, sized to keep the longest beat on one
     line with room to spare if the webfont ever falls back. */
/* keep the sub-copy in the dark left zone, clear of the players */
}
/* end v574-gateway-hero */
/* ============================================================
   v575 Daily Pulse dateline (H) + breaking state
   Quiet: newspaper dateline column — no boxes, type only (~160px).
   Breaking: same skeleton detonated for an auto-detected or curated
   drop window; collapses back when the window passes.
   ============================================================ */
.dp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #74e8b6;
  box-shadow: 0 0 8px #74e8b6;
}
.dp-kicker-live .dp-live-dot,
.daily-pulse.is-breaking .dp-live-dot {
  background: var(--neon-pink);
  box-shadow: 0 0 0 0 rgba(255, 45, 75, 0.6);
  animation: gateway-live-pulse 2.2s ease-out infinite;
}
.dp-body .dp-copy {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: #d5e2ec;
  max-width: 880px;
}
.dp-foot.has-warnings {
  color: var(--gold);
}
/* ---- breaking state ---- */
.daily-pulse.dp-dateline.is-breaking {
  border: 1px solid rgba(255, 45, 75, 0.35);
  border-top: 2px solid var(--neon-pink);
  border-radius: var(--radius-l);
  padding: 26px 28px 24px;
  background:
    radial-gradient(ellipse at 78% 10%, rgba(255, 45, 75, 0.16), transparent 45%),
    radial-gradient(ellipse at 92% 80%, rgba(95, 199, 223, 0.12), transparent 40%),
    linear-gradient(160deg, #101b26 0%, #070d14 60%, #05080d 100%);
}
.dp-break-tile {
  position: relative;
  display: block;
  border: 1px solid rgba(127, 233, 255, 0.28);
  border-radius: var(--radius-l);
  padding: 10px 13px;
  background: rgba(6, 14, 20, 0.66);
  text-decoration: none;
}
.dp-break-new {
  position: absolute;
  top: -8px;
  right: 10px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #051016;
  background: #ff4d63;
  border-radius: var(--radius-s);
  padding: 2px 7px;
}
.dp-break-tile > span:not(.dp-break-new) {
  display: block;
  font-size: var(--t-micro);
  color: #9fb0be;
  margin-top: 2px;
}
/* floating card stack + starfield sit over the breaking stage */
.daily-pulse.dp-dateline.is-breaking .dp-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.daily-pulse.dp-dateline.is-breaking .dp-cardstack {
  position: absolute;
  right: clamp(16px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(300px, 24vw);
  height: 84%;
  pointer-events: none;
}
/* NEW-drop chips in Database/Rankings rows */
.new-drop-chip {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px 2px;
  border-radius: var(--radius-s);
  background: #ff4d63;
  color: #051016;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 2px;
}
@media (max-width: 900px) {
.daily-pulse.dp-dateline.is-breaking .dp-cardstack { display: none; }
}
/* end v575-daily-pulse-dateline */
/* ============================================================
   v576 sitewide stage column
   The gateway hero's near-black extends down the full content
   column; the site's grid texture survives only in the gutters.
   ============================================================ */
.dashboard-page,
.tool-page {
  position: relative;
}
.dashboard-page::before,
.tool-page::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* must cover the widest page shell (1280px pages + breathing room) */
  width: min(1328px, 100%);
  background: linear-gradient(90deg, transparent 0%, #05090f 14px, #05090f calc(100% - 14px), transparent 100%);
  z-index: -1;
  pointer-events: none;
}
/* end v576-home-stage-column */
/* ============================================================
   v576b quiet footer — reads as a footer, not a page section:
   card chrome removed, hairline top rule, smaller muted type.
   ============================================================ */
.site-footer {
  margin-top: 34px;
  border: 0;
  border-top: 1px solid rgba(147, 164, 179, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.site-footer .footer-grid {
  padding: 22px 8px 4px;
  gap: var(--space-8);
}
.site-footer .footer-logo {
  width: 128px;
  opacity: 0.75;
}
.site-footer .footer-grid p {
  font-size: var(--t-small);
  line-height: 1.55;
  color: #7e8fa0;
}
.site-footer .footer-grid strong {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: #8f9fae;
}
.site-footer .footer-grid h2 {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--dim);
}
.site-footer .footer-grid a {
  font-size: var(--t-small);
  font-weight: 600;
  color: #93a6b8;
}
.site-footer .footer-grid a:hover {
  color: #cfe2ee;
}
.site-footer .footer-bottom {
  padding: 10px 8px 14px;
  border-top: 1px solid rgba(147, 164, 179, 0.1);
  font-size: var(--t-micro);
  color: var(--dim);
}
.site-footer .release-footer-trigger {
  font-size: var(--t-micro);
  color: var(--dim);
}
/* end v576b-quiet-footer */
/* ============================================================
   v577 home hero card autocomplete — reuses the Advisor picker
   chrome, anchored under the search input (not the button).
   ============================================================ */
/* Let the dropdown escape the hero's rounded-corner clip while it is open.
   The background art keeps its rounded corners regardless of overflow; only
   child content (the dropdown) is freed. Class is toggled by home.js. */
/* end v577-hero-autocomplete */
/* ============================================================
   v578 hero search: tighter width, button embedded at the far
   right inside the field; PulseAI/tool-strip removed above.
   ============================================================ */
.hero-search-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid rgba(95, 199, 223, 0.42);
  border-radius: 10px;
  background: rgba(9, 16, 23, 0.92);
  overflow: hidden;
}
.hero-search .hero-search-field .hero-search-go {
  flex: 0 0 auto;
  align-self: stretch;
  margin: var(--space-1);
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  font-size: var(--t-base);
  white-space: nowrap;
}
/* end v578-hero-search-embed */
/* ============================================================
   v581 polish: hero copy breathing room + hidden-attr hardening
   ============================================================ */
/* the [hidden] attribute must always win over class display rules —
   an empty bordered .notice-banner pill was rendering on Roster */
.notice-banner[hidden],
.tool-page [hidden]:not(.nav-menu):not(.quick-card-picker) {
  display: none !important;
}
/* sub-copy was flush against the oversized hero headline */
.tool-page .tool-hero:has(.hero-stage) h1 {
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.tool-page .tool-hero:has(.hero-stage) p:not(.eyebrow) {
  margin-top: 0;
  margin-bottom: var(--space-1);
}
/* end v581-hero-spacing-hidden */
/* ============================================================
   v583 Member Hub rail — the account drawer becomes a floating
   hub card that slides over any page; backdrop blurs the page.
   Content-hugging height (no full-height dead space).
   ============================================================ */
.account-rail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 6800;
  background: radial-gradient(ellipse at 72% 45%, rgba(3, 7, 12, 0.28), rgba(3, 7, 12, 0.62));
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  backdrop-filter: blur(6px) saturate(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.account-rail-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
body > .account-status-menu.account-drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  z-index: 6900;
  width: min(470px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.24, 1), opacity 0.22s ease;
}
body > .account-status-menu.account-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.account-status-menu .account-drawer-card {
  position: relative;
  border: 1px solid rgba(127, 233, 255, 0.22);
  border-radius: var(--radius-xl);
  padding: 24px 26px 20px;
  background: linear-gradient(165deg, rgba(13, 22, 30, 0.985), rgba(6, 10, 16, 0.995));
  box-shadow: -24px 18px 70px rgba(0, 0, 0, 0.6);
}
.account-status-menu .account-drawer-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--cyan) 40%, var(--neon-pink) 90%);
  opacity: 0.7;
}
.account-rail-kicker {
  margin: 0 0 6px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
}
.account-rail-title {
  margin: 0 0 6px;
  font-size: 1.42rem;
  line-height: 1.12;
  color: #fff;
}
.account-rail-title i {
  font-style: normal;
  color: #ff4d63;
}
.account-rail-live-line {
  margin: 0 0 12px;
  font-size: var(--t-small);
  color: #9fb0be;
}
.account-rail-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: #74e8b6;
  box-shadow: 0 0 8px #74e8b6;
  vertical-align: 1px;
}
.account-rail-journey {
  display: grid;
}
.account-rail-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(95, 199, 223, 0.13);
}
.account-rail-step:first-child {
  border-top: 1px solid rgba(241, 184, 75, 0.3);
}
.account-rail-step:last-child {
  border-bottom: 0;
}
.account-rail-mark {
  flex: 0 0 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--dim);
  border: 1px solid rgba(122, 140, 155, 0.4);
}
.account-rail-mark.is-done {
  background: rgba(116, 232, 182, 0.16);
  color: #74e8b6;
  border-color: rgba(116, 232, 182, 0.5);
}
.account-rail-mark.is-next {
  background: rgba(127, 233, 255, 0.13);
  color: var(--cyan-ink);
  border-color: rgba(127, 233, 255, 0.55);
  box-shadow: 0 0 12px rgba(127, 233, 255, 0.22);
}
.account-rail-step-tx {
  flex: 1;
  min-width: 0;
}
.account-rail-step-tx b {
  display: block;
  font-size: var(--t-body);
  color: #fff;
}
.account-rail-step-tx small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-small);
  line-height: 1.45;
  color: #8aa0b0;
}
.account-rail-step-tx .account-menu-auth-form {
  margin-top: 9px;
}
.account-rail-step-link {
  display: inline-block;
  margin-top: 7px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--cyan-ink);
  text-decoration: none;
}
.account-rail-step-link.is-pro {
  padding: 7px 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--neon-pink), #ff7a8d);
  color: #fff;
}
.account-rail-step-link:hover {
  text-decoration: underline;
}
.account-rail-step-link.is-pro:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
.account-rail-foot {
  margin: 12px 0 0;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--dim);
}
.account-rail-foot a {
  font-size: var(--t-micro);
  color: var(--cyan-ink);
  text-decoration: none;
  font-weight: 700;
}
/* E-state banner + stats */
.account-rail-banner {
  border-radius: 10px;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(16, 27, 38, 0.9), rgba(5, 8, 13, 0.9));
  border: 1px solid rgba(95, 199, 223, 0.18);
}
.account-rail-banner.is-red-diamond {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(255, 45, 75, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(16, 27, 38, 0.92), rgba(5, 8, 13, 0.94));
  border-color: rgba(255, 45, 75, 0.3);
}
.account-rail-plan-badge {
  display: inline-block;
  margin: 3px 0;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  background: rgba(127, 233, 255, 0.12);
  color: var(--cyan-ink);
  border: 1px solid rgba(127, 233, 255, 0.4);
}
.account-rail-plan-badge.is-pro {
  background: rgba(255, 45, 75, 0.15);
  color: #ff8fa0;
  border-color: rgba(255, 45, 75, 0.45);
}
.account-rail-stats {
  display: flex;
  gap: 26px;
  padding: 10px 14px;
  margin-top: var(--space-4);
  border-radius: 10px;
  border: 1px solid rgba(95, 199, 223, 0.14);
  background: rgba(10, 17, 24, 0.7);
}
.account-rail-stats b {
  display: block;
  font-size: var(--t-base);
  color: #fff;
}
.account-rail-stats small {
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  color: #8aa0b0;
  text-transform: uppercase;
}
/* mobile: bottom sheet */
@media (max-width: 640px) {
body > .account-status-menu.account-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 88vh;
    transform: translateY(28px);
  }
body > .account-status-menu.account-drawer.is-open {
    transform: translateY(0);
  }
.account-status-menu .account-drawer-card {
    border-radius: 14px 14px 0 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
}
/* end v583-member-hub-rail */
/* ============================================================
   v584 drop-window polish: mobile gateway hero sizes to content
   (aspect-ratio was clipping the search box / sub-copy), and the
   Database gains a pulse-red "New" drop filter beside List|Cards.
   ============================================================ */
.db-new-toggle {
  border: 1px solid rgba(255, 45, 75, 0.55);
  color: #ff8fa0;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
}
.db-new-toggle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--neon-pink);
  box-shadow: 0 0 0 0 rgba(255, 45, 75, 0.6);
  animation: gateway-live-pulse 2.2s ease-out infinite;
  vertical-align: 1px;
}
.db-new-toggle.is-active {
  background: linear-gradient(90deg, var(--neon-pink), #ff7a8d);
  border-color: transparent;
  color: #fff;
}
.db-new-toggle.is-active::before {
  background: #fff;
  box-shadow: none;
  animation: none;
}
.db-new-toggle[hidden] {
  display: none !important;
}
/* end v584-drop-polish */
/* ============================================================
   v585 gate scroll cap + reward finder autocomplete
   ============================================================ */
/* Locked gate content is a teaser, not a page: cap the blurred region
   so paywalled sections never create an endless dead scroll. Preview
   unlock restores full height. */
.gold-gate-shell:not(.is-preview-unlocked) .gold-gate-content {
  max-height: 400px;
  overflow: hidden;
}
@media (max-width: 760px) {
.gold-gate-shell:not(.is-preview-unlocked) .gold-gate-content {
    max-height: 220px;
    min-height: 0;
  }
}
/* end v586-reward-verdict */
/* v587-squad-field-view: lineup diamond + pitching staff, dugout rail, swap flow */
.fv-pill { position: relative; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(95,199,223,.22); background: rgba(10,17,24,.7); font-size: var(--t-small); font-weight: 700; color: #9fb0be; }
.fv-pill::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.fv-tabs { display: inline-flex; gap: 5px; padding: 5px; border-radius: var(--radius-pill); border: 1px solid rgba(95,199,223,.3);
  background: rgba(6,12,18,.95); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.fv-tabs button:hover { color: #cfe6ef; }
.fv-tabs button.is-on { background: linear-gradient(180deg, #43e6ff, #14a9d4); color: #032028; box-shadow: 0 2px 12px rgba(67,230,255,.45); }
.fv-tabs button.is-on:hover { color: #032028; }
.fv-autobtn { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(95,199,223,.28); background: rgba(10,17,24,.8);
  color: var(--cyan-ink); font-size: var(--t-small); font-weight: 600; cursor: pointer; font-family: inherit; }
.fv-autobtn:hover { border-color: rgba(127,233,255,.5); color: #cfe6ef; }
.fv-pc.is-empty { display: grid; place-items: center; border: 1px dashed rgba(95,199,223,.35); border-radius: 7px; background: rgba(8,14,20,.6);
  color: var(--dim); font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fv-role { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; color: #9fb0be; text-transform: uppercase; text-shadow: 0 2px 8px #000; z-index: 5; white-space: nowrap; }
.fv-role.is-cl { color: #ff9fae; }
.fv-up { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%);
  border-radius: 5px; font-size: var(--t-micro); font-weight: 700; padding: 2px 7px; letter-spacing: .02em; white-space: nowrap; cursor: default; }
.fv-up.is-owned { background: linear-gradient(90deg,#0fb87d,var(--sage)); color: #04241a; animation: fvGlow 3.4s ease-in-out infinite; }
.fv-up.is-owned .fv-halo { position: absolute; inset: -1px; border-radius: var(--radius-m); border: 1px solid rgba(70,240,175,.9); opacity: 0; z-index: 1; animation: fvHalo 3.4s ease-out infinite; }
.fv-up.is-market { background: linear-gradient(90deg,#35473e,#44584d); color: #e4f0e9; border: 1px solid rgba(150,180,164,.34); box-shadow: 0 2px 8px rgba(0,0,0,.55); }
@keyframes fvGlow { 0%,100% { box-shadow: 0 0 8px rgba(35,220,150,.3); } 50% { box-shadow: 0 0 18px rgba(45,235,165,.75); } }
@keyframes fvHalo { 0% { opacity: .7; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.65); } }
.fv-up::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 198px; padding: 8px 10px; border-radius: var(--radius-l); text-align: left;
  background: rgba(6,12,18,.97); border: 1px solid rgba(95,199,223,.3); box-shadow: 0 10px 26px rgba(0,0,0,.75);
  color: #d9e6f0; font-size: var(--t-micro); font-weight: 600; line-height: 1.45; letter-spacing: 0; white-space: normal;
  /* Mono belongs to the chip's numeral, not to this sentence. Without an
     explicit body font the tooltip inherits Plex Mono from .fv-up and the
     prose runs 4 cramped lines instead of 3, bursting a box sized for Inter. */
  font-family: var(--font-body);
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 30; }
.fv-up:hover::after, .fv-up:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.fv-stage { position: relative; border: 1px solid rgba(95,199,223,.18); border-radius: var(--radius-xl); background: #05090f; overflow: hidden; }
.fv-stagehead .fv-avg { margin-left: auto; color: #cfdce6; font-weight: 700; letter-spacing: .03em; text-transform: none; font-size: var(--t-small); }
/* No .fv-pos .fv-role rule: the diamond prints no position label (the card is
   already on the spot), so the strip above the card belongs to .fv-up alone. */
.fv-pos .fv-up { bottom: calc(100% + 6px); }
.fv-pos.is-hole .fv-glow { background: radial-gradient(ellipse at center, rgba(255,70,100,.34), rgba(255,60,90,.1) 54%, transparent 74%); }
.fv-rotpanel { position: relative; border: 1px solid rgba(95,199,223,.18); border-radius: 12px 12px 0 0; border-bottom: 0;
  background: linear-gradient(180deg, rgba(10,18,25,.85), rgba(5,9,15,.97)); padding: 40px 10px 4px; }
.fv-mslot .fv-up { bottom: 156px; }
.fv-penband { position: relative; border: 1px solid rgba(95,199,223,.18); border-radius: 0 0 12px 12px; background: #05090f; height: 250px; }
.fv-parm.is-closer .fv-plight .fv-turf { background: radial-gradient(ellipse at center, rgba(255,90,120,.2), transparent 72%); }
.fv-parm .fv-up { bottom: 142px; }
@keyframes fvBreathe { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
.fv-rail { border: 1px solid rgba(95,199,223,.18); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(11,20,28,.96), rgba(6,11,16,.98)); overflow: hidden; }
.fv-railhead .fv-t { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; color: var(--cyan-ink); text-transform: uppercase; }
.fv-railhead .fv-n { margin-left: auto; font-size: var(--t-micro); color: #8496a6; font-weight: 700; }
.fv-back { font-size: var(--t-micro); font-weight: 600; color: var(--cyan-ink); background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
/* The rail lists the whole plan -- lineup order, every free swap, the bench,
   the four averages -- so it ran to ~1,460px next to a fixed 668px field. The
   grid row took the taller of the two and left roughly 790px of dead black
   under the diamond, which read as a rendering fault. Above the stacking
   breakpoint the rail now matches the field's height and scrolls its own body,
   so the columns end together and Best Fits comes straight up under the field.
   Below 1100px the grid is single-column and the rail runs full length again --
   a nested scroller on a phone would trap the page scroll. */
.fv-hole { border: 1px solid rgba(255,45,75,.4); background: linear-gradient(180deg, rgba(40,10,18,.85), rgba(20,7,11,.9)); border-radius: 10px; padding: 10px 12px; margin-bottom: var(--space-6); }
.fv-hole .fv-lab { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; color: #ff8fa3; text-transform: uppercase; margin: 0; }
.fv-hole .fv-big { font-size: var(--t-base); font-weight: 700; color: #fff; margin: 4px 0 0; }
.fv-secl { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; color: #7f93a4; text-transform: uppercase; margin: 14px 0 8px; }
.fv-brow .fv-who { font-size: var(--t-small); font-weight: 600; color: #eaf4fb; }
.fv-brow .fv-sub { font-size: var(--t-micro); color: #8496a6; margin-top: 1px; }
/* The margin-top above only means anything on its own line, but nothing
   ever made these block -- so a row read "Ryne Sandberg99 into 2B". */
.fv-brow > span:not([class]) { display: grid; gap: 1px; min-width: 0; }
.fv-tag { margin-left: auto; font-size: var(--t-micro); font-weight: 700; padding: 2px 6px; border-radius: 5px; }
/* Inked to match .fv-up.is-owned, which v699 already did. The chip on the
   field and the tag in the rail state the same fact and must not disagree;
   this was the last gradient v700 missed. */
.fv-tag.is-owned { background: #0a2420; color: #7ef0c2;
  border: 1px solid color-mix(in srgb, var(--sage) 46%, transparent); }
.fv-tag.is-market { background: linear-gradient(90deg,#35473e,#44584d); color: #e4f0e9; border: 1px solid rgba(150,180,164,.34); }
.fv-stat { border: 1px solid rgba(95,199,223,.14); border-radius: 9px; padding: 8px 10px; background: rgba(9,16,23,.7); }
.fv-stat b { display: block; font-size: 1rem; font-weight: 700; color: #fff; }
.fv-stat span { font-size: var(--t-micro); color: #8496a6; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fv-swapout { display: flex; gap: var(--space-4); align-items: center; padding: 9px; border-radius: 9px; margin-bottom: var(--space-1);
  background: rgba(255,45,75,.08); border: 1px solid rgba(255,80,110,.32); }
.fv-swapout .fv-who { font-size: var(--t-body); font-weight: 600; color: #fff; }
.fv-swapout .fv-sub { font-size: var(--t-micro); color: #ff9fae; margin-top: 1px; }
.fv-search { display: flex; align-items: center; gap: var(--space-2); background: rgba(8,14,20,.9); border: 1px solid rgba(95,199,223,.3); border-radius: var(--radius-l); padding: 7px 10px; }
.fv-rrow { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 7px; cursor: pointer; transition: background .12s; width: 100%;
  background: none; border: 0; text-align: left; font-family: inherit; }
.fv-rrow .fv-who { font-size: var(--t-small); font-weight: 600; color: #eaf4fb; }
.fv-rrow .fv-sub { font-size: var(--t-micro); color: #8496a6; }
.fv-confirm { display: block; width: 100%; margin-top: var(--space-5); padding: var(--space-4); border-radius: 9px; border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(90deg,#0fb87d,var(--sage)); color: #04241a; font-size: var(--t-small); font-weight: 700; }
.fv-clear { width: 100%; margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-l); cursor: pointer; font-family: inherit;
  background: none; border: 1px solid rgba(255,80,110,.3); color: #ff9fae; font-size: var(--t-micro); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.fv-up, .fv-up .fv-halo, .fv-lightcol .fv-shaft, .fv-lightcol .fv-pool, .fv-plight .fv-sh, .fv-pos .fv-glow { animation: none !important; }
.fv-up.is-owned { box-shadow: 0 0 12px rgba(35,220,150,.5); }
}
/* name label: full name on desktop, surname only where the card is narrow */
@media (max-width: 640px) {
/* the label is allowed to be wider than the 54px card so surnames fit */
/* Sit the name on the card's faded base rather than below it: a label
     hanging under a 54px card collides with the next row of fielders. */
}
/* tooltip flips below the chip when the stage would clip it at the top */
.fv-up.is-flipped::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
.fv-up.is-flipped:hover::after, .fv-up.is-flipped:focus-visible::after { transform: translateX(-50%) translateY(0); }
/* slot priority chip: rides on the outgoing card in the swap rail */
.fv-pri { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: 3px 9px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.fv-pri.is-high { border: 1px solid rgba(241,184,75,.45); background: rgba(241,184,75,.14); color: var(--gold); }
.fv-pri.is-normal { border: 1px solid rgba(95,199,223,.3); background: rgba(95,199,223,.1); color: #9fb0be; }
.fv-pri.is-low { border: 1px solid rgba(120,140,155,.3); background: rgba(120,140,155,.1); color: #7f93a4; }
/* fit read + holes folded into the rail */
.fv-fitread .eyebrow { font-size: var(--t-micro); letter-spacing: .14em; }
.fv-holeph { width: 30px; height: 42px; border-radius: var(--radius-s); flex: none; border: 1px dashed rgba(95,199,223,.3); }
.fv-tag.is-need { background: rgba(255,45,75,.14); border: 1px solid rgba(255,80,110,.35); color: #ff9fae; }
.fv-tag.is-move { background: rgba(241,184,75,.16); border: 1px solid rgba(241,184,75,.4); color: var(--gold); }
.fv-tag.is-earn { background: rgba(160,120,220,.16); border: 1px solid rgba(170,130,230,.4); color: #c9a9f0; }
/* end v587-squad-field-view */
/* ---------------------------------------------------------------------------
   v873 Squad Builder field view.

   Every roster move is one operation -- put a card in a slot -- and the two
   questions are symmetrical:

       tap a man ON the field   -> who can replace him
       tap a man OFF the field  -> where can he go

   which is why the bench and the inventory are destinations here and not just
   sources. Cards on the roster trade places; a card from inventory joins the 26
   and displaces someone out of it; Release empties a slot and returns the card.

   The panel opens AT the slot rather than in the rail: measured on a phone-width
   layout the rail answer lands ~450px from the card you tapped, usually below
   the fold, against 38px here.
   --------------------------------------------------------------------------- */
/* --- a button does not inherit the page font ---------------------------- */
/* --- the lens: one filter the whole stage obeys ------------------------- */
.fv-l:hover { color: var(--ink); }
.fv-l.is-on { color: var(--cyan); border-bottom-color: var(--cyan); }
/* --- the chip, bolted to the card -------------------------------------- */
/* It used to float above the card, costing a band of vertical space on every
   slot and landing within reach of the NAME of whatever sat above -- which is
   how a +12 ended up on third base's label. Bolted to the side it costs nothing
   vertically and still never touches the artwork, because it sits outside the
   card rather than on it. It points AWAY from the middle of the field: pointing
   inward made shortstop's chip and second base's aim at each other and meet. */
.fv-pos .fv-up { top: auto; bottom: 16px; left: auto; right: 0;
  transform: translateX(100%); margin-right: -1px; border-left: 0;
  padding: 3px 7px 3px 6px; border-radius: 0 6px 6px 0; }
.fv-pos.is-chipleft .fv-up { right: auto; left: 0; transform: translateX(-100%);
  margin-right: 0; margin-left: -1px; border-right: 0; border-left: 1px solid;
  padding: 3px 6px 3px 7px; border-radius: 6px 0 0 6px; }
/* --- what you picked, and what can answer it --------------------------- */
/* Three tiers, and only one of them moves: the pick breathes, the candidates
   are lit but still, everything else recedes. A static glow on both made them
   read as the same thing. */
@keyframes fvPick {
  0%, 100% { filter: drop-shadow(0 16px 22px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(127,233,255,.75));
    transform: translateY(-6px) scale(1.04); }
  50% { filter: drop-shadow(0 20px 30px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(127,233,255,1))
    drop-shadow(0 0 40px rgba(95,199,223,.55)); transform: translateY(-9px) scale(1.06); }
}
/* --- an empty slot is a real state now: Release leaves one ------------- */
.fv-pos.is-vacant .fv-nm { color: var(--dim); }
/* --- the panel that opens at the slot ---------------------------------- */
/* The stage clips its artwork to rounded corners, which also clipped this --
   it stops clipping only while a panel is open, and the art keeps its corners. */
.fv-stage.is-showing { overflow: visible; }
.fv-stage.is-showing .fv-fbg, .fv-stage.is-showing .fv-fscrim { border-radius: 12px 12px 0 0; }
.fv-bloom { position: absolute; z-index: 20; width: min(300px, calc(100% - 24px));
  padding: 14px 16px 16px; border-radius: 14px; border: 0; transform: translate(-50%, 84px);
  background: radial-gradient(120% 120% at 50% 0%, rgba(10,20,28,.97), rgba(5,10,15,.94) 70%);
  box-shadow: 0 22px 54px rgba(0,0,0,.78), 0 0 0 1px rgba(95,199,223,.16) inset; }
/* a low slot has no room beneath it; an edge slot would hang off the side */
.fv-bcap { margin: 0; flex: 1; min-width: 0; font-size: 11.5px; color: var(--dim); }
.fv-bx:hover { color: var(--ink); }
.fv-bdelta b.is-cost { color: var(--gold); }
/* frameless options: the card art is the frame, so no box around it */
.fv-og.is-free { color: var(--cyan); }
.fv-og.is-cost { color: var(--gold); }
.fv-og.is-down { color: var(--dim); }
/* secondary actions are links, not a stack of outlined boxes */
.fv-bmore:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
/* one search field, a line rather than a box -- the panel is already the box */
.fv-search { display: block; margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
/* --- the rail: the ranking, and the recommendation as the button ------- */
/* No pill. The row already names the move, so the row IS the button -- a bigger
   target, and nothing floats beneath it looking like a lump. */
.fv-lead { display: block; width: 100%; text-align: left; padding: var(--space-3); margin: 0 -8px;
  border: 0; border-radius: 9px; background: none; cursor: pointer; transition: background .14s ease; }
.fv-lead:hover .fv-go { text-decoration-color: var(--cyan); }
.fv-leadid { display: grid; gap: 2px; min-width: 0; }
/* the batch action is a shortcut, not a rival recommendation */
/* where a player can go: the mirror of "who can fill this slot" */
.fv-pwfor { flex: 1; min-width: 0; font-size: var(--t-small); color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-pwd.is-up { color: var(--sage); }
.fv-pwd.is-down, .fv-pwd.is-flat { color: var(--dim); }
/* end v873-squad-field-view */
/* Condensed uppercase label. The one shape every eyebrow/tag/section head uses. */
.t-label,
.eyebrow,
.field-label,
.squad-build-label,
.fv-secl,
.fv-role,
.fv-t,
.fv-stat span,
.fv-hole .fv-lab {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
/* Tags carrying a word ("Free", "Move", "Earn") stay condensed caps. */
/* Priority reads as a sentence, not a shout. */
/* Figures: tabular so prices and ratings line up down a column. */
.t-num, .fv-stat b, .fv-tag.is-market, .fv-pill b, .fv-avg em {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  text-transform: none;
}
.fv-tag.is-market { font-size: var(--t-micro); font-weight: var(--w-med); }
/* Prose and rows sit in Inter at real body weights. */
/* Controls. */
.fv-autobtn, .fv-back, .fv-confirm, .fv-clear { font-family: var(--font-display); font-size: var(--t-base); font-weight: var(--w-semi); letter-spacing: 0.05em; text-transform: uppercase; }
/* Section titles pick up the display face at a real size. */
.fv-hole .fv-big { font-family: var(--font-display); font-size: var(--t-lead); font-weight: var(--w-bold); letter-spacing: 0.01em; }
/* The upgrade chip is a number, so it is mono -- but small and dense. */
.fv-up { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: -0.02em; }
/* row text: match component specificity so the tokens win without !important */
.fv-brow .fv-who, .fv-rrow .fv-who, .fv-swapout .fv-who {
  font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-semi); letter-spacing: 0; text-transform: none; }
.fv-brow .fv-sub, .fv-rrow .fv-sub, .fv-swapout .fv-sub {
  font-family: var(--font-body); font-size: var(--t-small); font-weight: var(--w-reg); letter-spacing: 0;
  text-transform: none; font-variant-numeric: tabular-nums; }
/* meta line: let the ownership badge wrap instead of being clipped out of
   the row. The line is nowrap+ellipsis for the long series name, but the
   badge is a separate token and should drop to the next line when tight. */
/* field labels: the name box may be wider than the card -- there is ~200px of
   clear space between fielders, and a 12px body face needs ~100px for names
   like "Geraldo Perdomo". Scoped to min-width so the 640px rule still wins. */
/* end v590-broadcast-type */
/* v591-filter-bar: the toolbar panel and five duplicate summary tiles became
   one control row plus one line of text. Every tile it replaced restated
   something the dugout rail or the candidates header already said. */
.squad-filterbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: 10px 12px;
  border: 1px solid rgba(95,199,223,.18);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(11,20,28,.9), rgba(6,11,16,.95));
}
.squad-filterbar .sf-inline .field-label { white-space: nowrap; color: #7f93a4; }
.sf-more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(95,199,223,.28);
  background: rgba(10,17,24,.8);
  color: var(--cyan-ink);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sf-more:hover { border-color: rgba(127,233,255,.5); }
.sf-more:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 2px; }
.sf-more.is-active { border-color: rgba(127,233,255,.55); background: rgba(127,233,255,.12); }
.sf-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-grid; place-items: center;
  background: linear-gradient(180deg,#43e6ff,#14a9d4); color: #032028;
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: 0;
}
/* The refinement panel hangs off the bar rather than pushing the page down. */
.sf-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: var(--space-5);
  width: min(520px, calc(100vw - 40px));
  padding: var(--space-7);
  border: 1px solid rgba(95,199,223,.3);
  border-radius: var(--radius-xl);
  background: rgba(6,12,18,.98);
  box-shadow: 0 22px 48px rgba(0,0,0,.75);
}
/* The meta line: what used to be five tiles, a status paragraph and a
   full-width sign-in band. */
.squad-meta .data-status { font-size: var(--t-small); color: #7f93a4; margin: 0; }
.squad-save-chip {
  margin-left: auto;
  padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer;
  min-height: 44px;
  border: 1px solid rgba(127,233,255,.32);
  background: rgba(127,233,255,.08);
  color: var(--cyan-ink);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* screen-reader-only label: the search field is self-evident visually but
   still needs a name for assistive tech. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* end v591-filter-bar */
/* v592-filter-polish: three layout fixes found in review. */
/* 1. Native select arrows overlay the right padding, so 10px let the value
      text run into the chevron. Give it real room, and separate the condensed
      caps label from the value so they stop reading as one word. */
/* 2. The meta line now sits inside the filter bar as its status row, so the
      pool it describes and the controls that change it are one component.
      A slow live dot marks the feed without adding another label. */
.squad-live {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(63,227,164,.55);
  animation: squadLivePulse 2.8s ease-out infinite;
}
@keyframes squadLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(63,227,164,.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(63,227,164,0); }
}
.squad-meta .data-status { font-size: var(--t-small); color: #9fb0be; margin: 0; }
/* 3. Row name and rating were two inline spans, so they butted together
      ("Yordan Alvarez99"). Stack them. */
.fv-brow > span:not([class]),
.fv-rrow > span:not([class]),
.fv-swapout > span:not([class]) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
.squad-live { animation: none; }
}
/* bench stepper: the roster carries 0-5 bench slots and that is a number,
   so it gets one control in the header rather than a button on every row. */
.fv-step { margin-left: auto; display: inline-flex; align-items: center;
  border: 1px solid rgba(95,199,223,.25); border-radius: var(--radius-l); background: rgba(6,12,18,.8); }
.fv-step button:hover:not([disabled]) { color: var(--cyan-ink); }
.fv-step .n { padding: 0 7px; font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-semi);
  color: #eaf4fb; font-variant-numeric: tabular-nums; }
/* spacing hierarchy: a label belongs to the control on its right, so the gap
   between groups has to be clearly larger than the gap inside one. At 8px vs
   10px the eye grouped "Card pool" with the previous dropdown instead. */
.squad-filterbar .sf-inline .field-label { letter-spacing: .1em; }
/* spacing scales with type: the labels are sized in rem, so px gaps get
   proportionally tighter as the base font grows and the value starts to
   crowd its label. Everything here is rem so the ratio holds at any size. */
/* labels must not shrink: they are flex items with white-space: nowrap, so a
   shrunk box lets the text spill out of it and slide under the control next
   to it. "Card pool" needed 57px in a 37px box and overflowed by 20px, which
   is what read as the value bleeding into the label. */
.squad-filterbar .sf-inline .field-label { flex: 0 0 auto; }
/* end v592-filter-polish */
/* v594-fit-groups: the candidates list sections itself by outcome. Of a
   typical 36 fits only ~8 raise a slot; the rest are sidegrades at the same
   overall. Grouping says that up front instead of burying the eight. */
.fit-group.is-quiet .fit-glabel { color: #7f93a4; }
/* Depth is reference material, so it opens on request rather than by default. */
.fit-expand {
  display: block;
  width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed rgba(95,199,223,.22);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cyan-ink);
}
/* end v594-fit-groups */
/* v596-fit-sort-control: the sort read as a flat pill, not a dropdown.
   `.tool-page:not(.advisor-page) .squad-panel select` (0,3,1) out-specifies
   `.fit-sort select` (0,1,1), and its `background` shorthand resets
   background-image -- so the chevron was silently erased. Declaring the
   chevron and the fill as one shorthand keeps them from being split apart
   again, and the sizing now matches the filter bar so both controls on this
   page read as the same kind of thing. */
/* Keep the sitewide anti-zoom floor: iOS zooms the page on focus under 16px,
   and this rule out-specifies the global `input, select` that sets it. */
/* end v596-fit-sort-control */
/* v597-type-scale-floor: sitewide correction of the micro-label tier, applied
   in place throughout this file rather than as overrides. Every scattered
   font-size below 11px was floored to 11px (and the 11.0-11.9px band nudged to
   12px), including clamp() minimums; the ultra-black 800-1000 weights were
   capped to the design-system ceiling (800-850 -> 600, 900+ -> 700). The big
   display headings were already 700, so nothing above the label tier moved.
   Decorative hero-card facsimile internals (< 0.45rem: .prototype-card-body
   pseudo text and the hero-fan mini tags) are left tiny on purpose. This block
   only marks the build and gives the larger badge text room. */
/* --- tune strip --- */
.planner-tune {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 14px 16px;
}
.planner-tune .tune-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.planner-tune .tune-lead { color: var(--muted); }
.planner-tune .tune-field { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; }
.planner-tune .tune-field .field-label { flex: 0 0 auto; margin: 0; }
.planner-tune select,
.planner-tune input[type="search"] {
  padding: 7px 30px 7px 12px;
  border-radius: var(--radius-l);
  border: 1px solid rgba(95, 199, 223, .25);
  background: rgba(8, 14, 20, .9);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
}
.planner-tune input[type="search"] { padding-right: var(--space-5); width: 100%; }
.planner-tune select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7f93a4 50%),
    linear-gradient(135deg, #7f93a4 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.planner-tune .tune-more { margin-left: auto; }
.planner-tune .tune-more summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  padding: 7px 14px;
  border: 1px dashed rgba(95, 199, 223, .3);
  border-radius: var(--radius-l);
}
.planner-tune .tune-more summary::-webkit-details-marker { display: none; }
.planner-tune .tune-more[open] summary { border-style: solid; background: rgba(95, 199, 223, .06); }
.planner-tune .tune-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(95, 199, 223, .14);
}
.planner-tune .tune-extra label { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.planner-tune .tune-status { color: var(--muted); font-size: var(--t-small); }
/* --- the answer --- */
.program-answer {
  margin-top: var(--space-7);
  padding: 24px 26px;
  border: 1px solid rgba(95, 199, 223, .16);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(95, 199, 223, .06), transparent 60%),
    var(--panel);
}
.program-answer .program-detail { max-width: none; width: 100%; margin: 0; padding: 0; border: 0; background: none; }
/* --- alternatives strip --- */
/* reset the old .featured-strip grid/panel styling on the repurposed container */
.program-featured { display: block; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; gap: 0; grid-template-columns: none; }
.program-featured .alt-label { margin: 18px 0 10px; }
.program-featured .alt-strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-1); }
.program-featured .alt-card {
  flex: 0 0 auto; min-width: 168px; max-width: 240px;
  text-align: left; padding: 12px 14px;
  border-radius: var(--radius-xl); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.program-featured .alt-card.is-active { border-color: rgba(95, 199, 223, .55); background: rgba(95, 199, 223, .08); }
.program-featured .alt-card b { display: block; font-size: var(--t-base); font-weight: var(--w-semi); margin-bottom: 3px; }
.program-featured .alt-card span { font-size: var(--t-small); color: var(--muted); }
/* --- see-all expander + collapsed board --- */
.program-see-all {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  width: 100%; margin: 16px 0 0; padding: 14px 16px;
  border: 1px dashed rgba(95, 199, 223, .28); border-radius: var(--radius-xl);
  background: none; color: var(--ink); cursor: pointer;
}
.program-see-all:hover { border-color: rgba(95, 199, 223, .5); background: rgba(95, 199, 223, .04); }
.program-see-all strong { display: block; font-family: var(--font-display); font-size: var(--t-lead); font-weight: var(--w-semi); }
.program-see-all small { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.program-see-all .see-all-icon { font-family: var(--font-mono); font-size: var(--t-lead); color: var(--cyan-ink); }
.program-list { margin-top: var(--space-1); }
/* end v598b-reward-hybrid */
/* v599-planner-console: the grind column read as four detached boxes (tune,
   answer, alternatives, board). Consolidate them into one .program-console
   panel with hairline dividers between segments, and turn the tune controls
   into icon pills at a readable size. */
.program-console {
  margin-top: var(--space-7);
  padding: 22px 24px;
  border: 1px solid rgba(95, 199, 223, .16);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(95, 199, 223, .06), transparent 60%),
    var(--panel);
}
.program-console > .program-detail { border: 0; background: none; padding: 0; margin: 0; }
.program-console > .program-featured,
.program-console > .program-list { border: 0; background: none; }
/* tune strip: borderless inside the console, separated by a bottom hairline */
.program-console .planner-tune {
  padding: 0 0 16px;
  margin-bottom: var(--space-9);
  border-bottom: 1px solid rgba(95, 199, 223, .14);
  background: none;
}
.planner-tune .tune-row { gap: var(--space-5); }
.planner-tune .tune-lead { font-size: var(--t-small); }
.planner-tune .tune-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(95, 199, 223, .28);
  background: rgba(8, 14, 20, .55);
}
.planner-tune .tune-field .tune-ico { font-size: var(--t-base); line-height: 1; }
.planner-tune .tune-field select {
  border: 0;
  background-color: transparent;
  padding: 0 22px 0 0;
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  background-position: right 8px center, right 3px center;
}
/* alternatives: a segmented section inside the console, not a detached box */
.program-console .program-featured { margin-top: var(--space-9); padding-top: var(--space-8); border-top: 1px solid rgba(95, 199, 223, .14); }
.program-console .program-featured .alt-label { margin: 0 0 12px; }
/* board expander: a divider + row instead of a dashed box */
.program-console .program-list { margin-top: 0; }
.program-console .program-see-all {
  border: 0;
  border-top: 1px solid rgba(95, 199, 223, .14);
  border-radius: 0;
  margin: 20px 0 0;
  padding: 16px 2px 2px;
}
.program-console .program-see-all:hover { background: none; }
.tune-extra .tune-status { grid-column: 1 / -1; margin-top: 2px; }
.program-console > .program-detail { padding-top: var(--space-1); }
/* the panel top-accent belonged to the old boxed detail card; inside the
   console it floated as a bright line above the eyebrow. The console is the
   panel now, so the detail no longer carries its own accent. */
.program-console .program-detail::before { content: none; }
/* end v600-planner-lean */
/* v600b-reward-answer-default: reward mode lands on the current featured
   reward's answer instead of the boxy picker. The target is a change-able pill
   and the panel loses its floating accent line, matching the grind console. */
.tool-page .reward-finder::before { content: none; }
.program-console .program-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); padding: 8px 0; }
.program-console .program-team-grid button { text-align: left; padding: 8px 10px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: var(--t-small); cursor: pointer; }
.program-console .program-team-grid button.is-active { border-color: rgba(95, 199, 223, .5); background: rgba(95, 199, 223, .08); }
/* enlarge the floating cards a touch (planner only) */
.program-page .tool-hero .hero-stage.hero-fan .prototype-card { width: clamp(200px, 17.5vw, 252px); }
/* balance the vertical dead space: centre the copy against the card fan */
.program-page .hero-stage.hero-fan { min-height: clamp(320px, 29vw, 430px); }
/* end v603-planner-hero */
/* v603a-select-popup: native <select> dropdowns fell back to the OS white
   popup with washed-out option text. color-scheme:dark renders the popup dark;
   explicit option colors are a backup for engines that ignore it. */
.program-console select,
.planner-tune select { color-scheme: dark; }
.program-console select option,
.planner-tune select option { background: var(--field); color: #eef4f8; }
/* other strong picks: a full-width band of colourful, focused cards */
.program-console .program-featured { margin-top: 22px; }
.program-console .program-featured .alt-label { color: #eef4f8; margin-bottom: var(--space-5); }
.program-console .program-featured .alt-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  overflow: visible;
}
.program-console .program-featured .alt-card {
  position: relative;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 16px 16px 16px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(95, 199, 223, .18);
  background: linear-gradient(150deg, rgba(18, 27, 36, .9), rgba(9, 15, 21, .7));
  overflow: hidden;
  text-align: left;
  transition: transform .14s ease, border-color .14s ease;
}
.program-console .program-featured .alt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--alt-accent, var(--cyan)); }
.program-console .program-featured .alt-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 0% 0%, var(--alt-glow, rgba(95, 199, 223, .12)), transparent 58%); pointer-events: none; }
.program-console .program-featured .alt-card .alt-rank { position: relative; font-family: var(--font-mono); font-size: var(--t-small); font-weight: 700; color: var(--alt-accent, var(--cyan)); }
.program-console .program-featured .alt-card b { position: relative; display: block; font-size: var(--t-base); font-weight: 600; margin: 3px 0 4px; color: #f4f9fc; }
.program-console .program-featured .alt-card .alt-sub { position: relative; font-size: var(--t-small); color: var(--muted); }
.program-console .program-featured .alt-card.alt-c0 { --alt-accent: var(--cyan); --alt-glow: rgba(95, 199, 223, .16); }
.program-console .program-featured .alt-card.alt-c1 { --alt-accent: var(--sage); --alt-glow: rgba(63, 227, 164, .14); }
.program-console .program-featured .alt-card.alt-c2 { --alt-accent: var(--gold); --alt-glow: rgba(241, 184, 75, .13); }
.program-console .program-featured .alt-card:hover { border-color: var(--alt-accent, var(--cyan)); transform: translateY(-2px); }
.program-console .program-featured .alt-card.is-active { border-color: var(--alt-accent, var(--cyan)); box-shadow: 0 0 0 1px var(--alt-accent, var(--cyan)); }
@media (max-width: 760px) {
.program-console .program-featured .alt-strip { grid-template-columns: 1fr; }
}
/* end v604b-answer-stats */
/* v605-program-path: the per-program path page. Reuses the planner's answer
   vocabulary (stat cluster, timeline) so the two surfaces read as one tool,
   and adds a "worth your time" verdict whose accent colour carries the call:
   mint = good value, gold = grind it for the cards, cyan = we don't know yet. */
.path-loading { color: var(--muted); font-size: var(--t-base); padding: 48px 0; }
.path-head { padding: 28px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.path-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-4);
}
.path-title { font-family: var(--font-display); font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.04; margin: 0 0 14px; }
.path-verdict { font-size: var(--t-base); line-height: 1.55; color: var(--ink); margin: 0 0 20px; max-width: 62ch; }
.path-stats { margin-bottom: 22px; }
.path-block { margin-bottom: 30px; }
.path-label { display: block; font-size: var(--t-body); margin-bottom: var(--space-5); }
.path-call { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.path-sub { font-size: 1.01rem; line-height: 1.55; color: var(--muted); margin: 0 0 8px; max-width: 66ch; }
.path-sub strong { color: var(--ink); font-weight: 600; }
.path-worth {
  position: relative;
  padding: 20px 22px 20px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(95, 199, 223, .16);
  background: linear-gradient(150deg, rgba(18, 27, 36, .8), rgba(9, 15, 21, .55));
  overflow: hidden;
}
.path-worth::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--path-accent, var(--cyan)); }
.path-worth .path-call { color: var(--path-accent, var(--cyan)); }
.path-worth-value { --path-accent: var(--sage); }
.path-worth-grind { --path-accent: var(--gold); }
.path-worth-neutral { --path-accent: var(--cyan); }
.path-timeline .tl-note { font-size: var(--t-base); line-height: 1.5; color: var(--muted); margin: 6px 0 0; }
.path-list { margin: 0; padding-left: var(--space-9); }
.path-list li { font-size: var(--t-base); line-height: 1.55; color: var(--ink); margin-bottom: 9px; }
.path-chips, .path-suggestions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.path-chips li {
  font-size: var(--t-small);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
}
.path-suggestions { flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.path-suggestions a { color: var(--cyan-ink); font-size: var(--t-base); }
.path-actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.path-actions a, .path-back { color: var(--cyan-ink); font-size: var(--t-body); font-weight: 600; }
.path-source {
  margin-top: 38px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
  max-width: 72ch;
}
@media (max-width: 760px) {
.path-title { font-size: 1.95rem; }
.path-call { font-size: var(--t-lead); }
}
/* end v605-program-path */
/* v605b-path-stats: the stat cluster inherits the planner's narrow right-rail
   rule (1 column above 860px). On the path page it's a full-width band under
   the title, so keep it three across at every width. */
/* end v609b-picker-track */
/* v610-whats-new: the player-facing changelog. The page's job is credibility,
   so the dates and volume argue for it -- the live "last shipped" stamp is the
   proof, not a sentence claiming we ship often. Fixes are styled as
   prominently as features on purpose: a list of only features reads like a
   brochure. Tag colours follow the house vocabulary -- mint = new thing,
   cyan = changed, gold = was broken. */
.wn-stamp {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-body); color: var(--muted);
  padding: 9px 15px; border-radius: var(--radius-pill);
  border: 1px solid rgba(63, 227, 164, .26); background: rgba(63, 227, 164, .07);
  margin: 0;
}
.wn-stamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(63, 227, 164, .18); flex: 0 0 auto; }
.wn-promise {
  max-width: 760px; margin: 34px auto 8px;
  padding: 22px 24px; border-radius: var(--radius-xl);
  border: 1px solid rgba(95, 199, 223, .2);
  background: linear-gradient(150deg, rgba(18, 27, 36, .8), rgba(9, 15, 21, .55));
}
.wn-primary {
  display: inline-block;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .02em;
  padding: 13px 24px; border-radius: 10px;
  border: 1px solid rgba(95, 199, 223, .5);
  background: linear-gradient(140deg, rgba(95, 199, 223, .22), rgba(63, 227, 164, .14));
  color: #eef4f8;
}
.wn-tag {
  flex: 0 0 auto; min-width: 74px; text-align: center;
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill); margin-top: 2px;
  border: 1px solid var(--wn-accent, var(--cyan)); color: var(--wn-accent, var(--cyan));
  background: color-mix(in srgb, var(--wn-accent, var(--cyan)) 10%, transparent);
}
.wn-item-copy { min-width: 0; }
@media (max-width: 640px) {
.wn-tag { min-width: 0; align-self: flex-start; }
}
/* end v610-whats-new */
/* v611-roadmap: Now / Next / Considering, three columns on desktop, stacked on
   phones. Stage accent carries commitment level -- mint = happening now,
   cyan = lined up, muted = genuinely undecided. Deliberately no dates anywhere,
   and "Considering" reads visibly softer so the page can't be mistaken for a
   delivery promise. */
/* ==========================================================================
   ROADMAP · the page, in Broadcast
   --------------------------------------------------------------------------
   The page today is three bordered gradient panels stacked vertically, each
   with a 4px accent edge, a count in a rounded pill and a fourth bordered box
   for the ask. That is the "stack of unrelated widgets" pattern, and the pill
   is the legacy idiom the rest of the site has already dropped.

   What survives untouched is the copy. "No dates on this page, on purpose" and
   "Considering genuinely means not committed" are the best writing on the site
   and the whole reason the page is trustworthy.

   COLOUR, against the site's one-meaning-per-colour rule:
     Now          cyan   ours, active, in hand
     Next         steel  queued, carries no verdict yet
     Considering  dim    undecided -- and cyan once YOU have picked it,
                         because cyan is the interactive/yours colour
     Shipped      sage   done, the win colour, same as everywhere else
   The stage word carries it; headings stay ink.
   ========================================================================== */
/* ==========================================================================
   FINAL · colour that means something
   --------------------------------------------------------------------------
   The three earlier passes were honest but grey. The colour here is earned
   rather than decorative -- every hue is already load-bearing on this site:

     cyan   Now, and anything you have picked. Ours / active / interactive.
     steel  Next. Queued, carries no verdict yet.
     dim    Considering. Undecided until you say otherwise.
     sage   Shipped. The win colour, same as everywhere.
     gold   The two cautions: a stale changelog, and a control not yet wired.

   No sixth hue was invented, and no heading is painted -- the stage words,
   figures and marks carry it, exactly as on the Advisor.
   ========================================================================== */
/* ---- the stage rail: a summary and the page's colour key at once -------- */
/* ==========================================================================
   POP, without a chart
   --------------------------------------------------------------------------
   The bars were carrying the visual weight and they were not honest enough to
   keep. What replaces them is the thing this page actually has: four figures
   worth reading. Big mono numerals in their own meaning's colour is the
   Broadcast idiom on every other page here -- the Advisor's verdict, the
   Rankings' scores -- and it needs no axis to be understood.
   ========================================================================== */
/* The rail becomes the page's graphic: three counts, three colours, big. */
/* end v611-roadmap */
/* v611b-wn-secondary: the What's new promise block gained a quiet second link
   to the roadmap, so the two pages point at each other. */
/* end v613b-blurb-size */
/* v614-new-drop-badge: drop detection already knew which programs just landed;
   only the home page read it, so a new program sat unlabelled among 150+ rows.
   Mint, because a new drop is an opportunity, not an alert. */
/* A light tag, not a control -- a bordered pill at this size reads as a button
   and the rows were deliberately de-boxed. */
.row-new {
  display: inline-block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sage);
  background: rgba(63, 227, 164, .13);
  padding: 3px 6px 2px;
  margin-left: var(--space-3);
  border-radius: var(--radius-s);
  white-space: nowrap;
  vertical-align: 0.08em;
}
/* end v614-new-drop-badge */
/* ---------------------------------------------------------------------------
   v616 Pack Value Lab — the D5 opener: both inputs in one question, the answer
   as a thin band, then every pack that costs stubs. The board never waits on a
   stub balance, so the page answers cold for search traffic.
   --------------------------------------------------------------------------- */
.pack-page .pl-open .eyebrow {
  margin: 0 0 10px;
}
.pl-line .li-note {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--muted);
}
/* the picker: relative wrapper so the list hangs off the field itself */
.pl-pick {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
  display: block;
}
.pl-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  z-index: 30;
  display: block;
  border: 1px solid rgba(95, 199, 223, 0.42);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: #0b131b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.pl-opt .op-n {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.pl-opt .op-c {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
  white-space: nowrap;
}
.pl-opt .op-r {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tone, var(--muted));
}
.pl-opt .op-r.is-none,
.pl-opt .op-r.is-earned {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1px 5px;
}
/* tone vocabulary, scoped to this page: gold is near break-even, red loses,
   grey is "we have no number" and deliberately carries no verdict colour */
.pack-page .t-good {
  --tone: var(--sage);
  --toneLine: rgba(63, 227, 164, 0.3);
}
.pack-page .t-watch {
  --tone: var(--gold);
  --toneLine: rgba(241, 184, 75, 0.3);
}
.pack-page .t-bad {
  --tone: #ff657c;
  --toneLine: rgba(255, 101, 124, 0.3);
}
.pack-page .t-none {
  --tone: #93a4b3;
  --toneLine: rgba(147, 164, 179, 0.26);
}
.pl-band {
  position: relative;
  padding: 15px 19px 14px 20px;
  border-radius: 10px;
  border: 1px solid var(--toneLine);
  background: rgba(8, 14, 22, 0.55);
  overflow: hidden;
}
.pl-board .pl-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 8px;
}
.pl-board .pl-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1.14;
  margin: 0 0 10px;
  color: var(--ink);
}
.pl-board .pl-lede {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 82ch;
}
.pl-rate-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 96px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: center;
  padding: 12px 16px 12px 19px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(8, 14, 22, 0.6);
  overflow: hidden;
}
.pl-rate-row .rt-n {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.pl-rate-row .rt-pct {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--tone);
  white-space: nowrap;
}
.pl-rate-row .rt-pct small {
  font-size: 0.62em;
}
.pl-rate-row .rt-pct.is-none {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pl-rate-row .rt-bar {
  position: relative;
  height: 7px;
  border-radius: var(--radius-s);
  background: rgba(238, 244, 248, 0.09);
  overflow: hidden;
}
.pl-rate-row .rt-bar.is-empty {
  background: rgba(238, 244, 248, 0.05);
}
.pl-rate-row .rt-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--tone);
  border-radius: var(--radius-s);
}
.pl-rate-row .rt-bar b {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(238, 244, 248, 0.5);
}
.pl-rate-row .rt-do {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
}
.pl-rate-row .rt-do em {
  font-style: normal;
  color: var(--tone);
}
@media (max-width: 900px) {
.pl-rate-row .rt-bar,
  .pl-rate-row .rt-do {
    grid-column: 1 / -1;
  }
}
/* end v616-pack-lab-d5 */
/* end v616-pack-lab-pending */
/* v616b: the buy-instead lock stays a single quiet line so the answer band keeps
   its height; the one full unlock card sits at the foot of the page instead. */
/* the inline quiet gate must not add a card frame inside the band */
/* end v616b-pack-lab-gate */
/* v621b-gate-crop: the lock card was being cut off, taking its buttons with it,
   so a gated page offered no way to convert.
   .gold-gate-shell has min-height:280px + overflow:hidden, and the overlay is
   position:absolute -- so the overlay adds nothing to the shell's height. Where
   the blurred content behind it is short (the program path verdict is ~3 lines)
   the shell stays 280px and everything past ~262px of lock copy is clipped.
   Stacking both children in ONE grid cell makes the cell take the height of the
   taller child, so the shell always grows to fit its own lock card. */
.gold-gate-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.gold-gate-shell > .gold-gate-content {
  grid-area: 1 / 1;
}
.gold-gate-shell > .gold-gate-overlay {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  transform: none;
  align-self: start;
  justify-self: center;
  margin: 18px 0;
}
/* the blurred preview still needs clipping; it just must not clip the overlay */
.gold-gate-content { overflow: hidden; border-radius: inherit; }
/* the mobile override also anchored the overlay absolutely */
@media (max-width: 760px) {
.gold-gate-shell > .gold-gate-overlay {
    position: relative;
    inset: auto;
    transform: none;
    margin: 14px 0;
  }
}
/* end v624-type-roles */
/* v625b-pack-reach: the stub balance was a normalizer, never a filter.
   With 5,000 entered, only 2 of 51 stub-priced packs are actually purchasable --
   the rest cost 10,000-75,000 -- yet every row read "5,000 in -> N back",
   quoting a transaction that cannot be made. The board now splits into what the
   balance buys and what it is saving toward, and out-of-reach rows are quoted at
   their own shop price the way the answer band above already did.

   These rows are still real information, so they recede rather than disappear:
   full contrast on the reachable set, a quieter treatment on the rest. */
.pl-rate-row.is-out-of-reach .rt-n { color: #c3d0da; font-weight: var(--w-med); }
.pl-rate-row.is-out-of-reach .rt-pct,
.pl-rate-row.is-out-of-reach .rt-do { color: var(--muted); }
/* The accent rail is what marks a row as a live option, so out of reach loses it. */
/* How much more is needed, sitting with the name rather than as its own column --
   the row grid is four fixed tracks and a fifth child would break it. */
.rt-short {
  margin-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: var(--w-reg);
  color: var(--muted);
  white-space: nowrap;
}
/* The affordability answer, directly under the question that asks it. */
/* end v625b-pack-reach */
/* ---------------------------------------------------------------------------
   Pulse Rankings on the Pulse Rating.
   The marker name below is deliberately NOT the cache key. Bumping the key is a
   blanket find-and-replace across the repo, so a block marker that matches it
   gets rewritten too -- which is how duplicate markers have appeared before.
   --------------------------------------------------------------------------- */
.rankings-page .pr-hero { align-items: center; }
.pr-stat b { display: block; font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; line-height: 1; color: var(--cyan); }
.pr-stat.lead b { font-size: 1.9rem; }
.pr-stat span { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 5px; }
.pr-stat + .pr-stat { padding-left: 26px; border-left: 1px solid var(--line); }
.pr-sort { flex: 1 1 0; min-width: 158px; text-align: left; padding: 13px 16px 13px 0; background: none;
  border: 0; border-right: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.pr-sort:last-child { border-right: 0; }
.pr-sort + .pr-sort { padding-left: var(--space-7); }
.pr-boardcol { min-width: 0; }
.pr-main { min-width: 0; }
.pr-inspector { position: sticky; top: 14px; border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: rgba(8, 14, 22, .6); padding: 17px 18px; }
/* The rating is a COMPARISON, so it is set as stat cells. A big numeral flexed
   against a two-line caption on align-items:baseline pins the number to the
   caption's FIRST line and leaves the second line dangling below it. Two grid
   rows put every numeral on one baseline and every label on another, so the
   alignment is structural instead of eyeballed. */
.pr-insp-head b.lead { font-size: 1.85rem; color: var(--cyan); }
.pr-insp-head b.alt { font-size: 1.12rem; color: var(--muted); }
.pr-part.is-base { color: var(--dim); }
@media (max-width: 1100px) {
.pr-cd { width: 104px; }
.pr-slot.k .pr-cd { width: 132px; }
.pr-stat + .pr-stat { padding-left: var(--space-7); }
}
/* Reduced motion, matching the real selectors (.pr-lift, not .pr-cd) and
   placed after the float rules so it actually wins. An earlier version of this
   pattern used the losing specificity and silently did nothing at all. */
/* end v629-rankings-pulse-board */
/* ---------------------------------------------------------------------------
   Rankings chrome that used to borrow shared page classes.
   The first pass reused .tool-hero, .position-board, .page-toolbar and
   .page-result-row. Every one of those carries heavy shared styling -- boxed
   panels, 4-across art tiles, oversized thumbnails with absolutely-placed
   labels -- which won over the new rules and produced a page that was half
   legacy. The board now owns its own chrome end to end.
   --------------------------------------------------------------------------- */
/* Layout only. The first version restyled the headline, the eyebrow and the
   accent right here, which is why this hero drifted away from every other
   tool page: a 1.9rem cap against the shared 3.35rem, a cyan accent where the
   rest of the site uses the Pulse red, and an eyebrow carrying an extra tag
   no other page has. Type, colour and accent now come from .tool-hero the
   same as everywhere else; this rule only makes the hero two columns so the
   triad has a stage to sit on. */
.rankings-page .pr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(560px, auto);
  gap: 30px; align-items: center; }
.rankings-page .pr-hero .pr-herocopy p:not(.eyebrow) { max-width: 58ch; }
/* Position rail: a thin row of text buttons, not art tiles. The old
   .position-board rendered 4-across cards with baked artwork behind them,
   which is the boxy legacy look this redesign exists to remove. */
.pr-positions button:hover { border-color: rgba(95, 199, 223, .45); color: var(--ink); }
.pr-positions button.is-active { border-color: var(--cyan); color: var(--ink); }
/* Toolbar: one thin line, not a boxed panel. */
.pr-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); margin: 18px 0 0;
  padding: 0 0 16px; border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.pr-toolbar .field-label { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim); }
/* The row art is a plain thumbnail. The shared .page-card-art sized it to a
   5/7 aspect at ~90px and layered text over it. */
@media (max-width: 1271px) {
/* Not 900px: minmax(560px, auto) holds the triad column until the shell
     hits its own 1240px cap, squeezing .pr-herocopy otherwise. */
.rankings-page .pr-hero { grid-template-columns: 1fr; }
}
/* end v629c-planner-pulse */
/* ---------------------------------------------------------------------------
   Squad Builder upgrade chips: tooltip moves to the shared portal.
   The ::after tooltip above is retired. It lived inside .fv-stage, which sets
   overflow:hidden for the field art and rounded corners, so 13 of 22 chips had
   their tooltip clipped at the stage edge -- and a clipped box loses its border
   and background at the cut, so the copy read as text spilling onto the field
   with nothing behind it. The is-flipped rules went with it; they only ever
   solved the vertical half of the same problem.
   The portal is position:fixed on <body> and viewport-aware, so no ancestor can
   crop it in any direction. Killing the content here rather than editing the
   rule above keeps this sheet append-only.
   --------------------------------------------------------------------------- */
.fv-up::after,
.fv-up:hover::after,
.fv-up:focus-visible::after,
.fv-up.is-flipped::after,
.fv-up.is-flipped:hover::after,
.fv-up.is-flipped:focus-visible::after {
  content: none;
}
/* The chip still needs to read as interactive now that nothing appears in place. */
.fv-up { cursor: help; }
/* end v632-chip-tip-portal */
/* ---------------------------------------------------------------------------
   Squad summary tiles: explain themselves, and survive a long number.
   "+77.10000000000001" overran its tile and was cropped mid-digit. The float is
   fixed at source, but a tile that crops rather than adapts will do this again
   the next time a value runs long, so the number now shrinks to fit instead.
   --------------------------------------------------------------------------- */
/* THE GUARANTEE IS THE ROUNDING, NOT THIS CSS. Worth stating plainly, because
   two attempts here claimed otherwise. `font-size: clamp(0.82rem, 2.6vw, ...)`
   does not shrink a long value: clamp scales with the VIEWPORT, not with the
   text or the tile, so at desktop width it resolves to the maximum and the
   number is still cut mid-digit. Nor does removing overflow from the tile
   help -- .fv-rail clips as well, and has to, for the panel's rounded corners.
   A long value is only prevented upstream, by rounding the sum where it is
   computed. These two rules do nothing but keep the grid cell honest. */
.fv-stat { min-width: 0; }
.fv-stat .tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(95, 199, 223, .38);
  background: rgba(95, 199, 223, .1);
  color: #9fd8e8;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  cursor: help;
}
.fv-stat .tip:hover,
.fv-stat .tip:focus-visible { border-color: var(--cyan); color: #d7f2fa; }
/* end v633-squad-stat-tiles */
/* ---------------------------------------------------------------------------
   Rankings control deck.
   The page previously stacked four full-width hairline bands in a row -- stat
   band, sorts, positions, toolbar -- all the same weight and rhythm, with
   nothing signalling which of them were clickable. It read as one grey ladder.
   Three changes, together:
     1. the sorts preview their own answer, so the rail is five live answers
        rather than five labels;
     2. each position button carries its leader's card art, which was already
        being set on these buttons and going nowhere;
     3. the numbers ride with the hero and the controls get one raised surface,
        so the page opens as two things instead of five.
   --------------------------------------------------------------------------- */
/* 1. Numbers move inside the hero copy column. The triad keeps its own stage. */
.rankings-page .pr-hero .pr-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px; margin: 20px 0 0; padding: 0; border: 0; max-width: 460px; }
.rankings-page .pr-hero .pr-stat { padding: 0; border: 0; }
.rankings-page .pr-hero .pr-stat + .pr-stat { padding-left: 0; border-left: 0; }
.rankings-page .pr-hero .pr-stat b { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  line-height: 1; color: var(--cyan); }
.rankings-page .pr-hero .pr-stat span { display: block; font-size: var(--t-micro); color: var(--muted);
  margin-top: var(--space-1); line-height: 1.35; }
/* 3. One raised surface for both controls. */
.pr-deck { margin: 26px 0 0; padding: 14px 16px 15px; border: 1px solid rgba(95, 199, 223, .2);
  border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(16, 26, 36, .9), rgba(9, 15, 22, .9));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* 1. The sort rail becomes five answers. */
.pr-deck .pr-sort { display: block; width: 100%; min-width: 0; text-align: left; padding: 12px 14px 13px;
  background: var(--field); border: 0; cursor: pointer; color: var(--muted); }
.pr-deck .pr-sort:hover { background: #0e1721; }
.pr-deck .pr-sort.is-active { background: rgba(95, 199, 223, .07); box-shadow: inset 0 2px 0 var(--cyan); }
.pr-sort-ans img, .pr-sort-noart { display: block; width: 34px; height: 48px; border-radius: var(--radius-xs); }
.pr-sort-ans .n { display: block; font-size: var(--t-small); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sort-ans .v { display: block; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); margin-top: 2px; }
.pr-sort.is-active .pr-sort-ans .n { color: var(--cyan-ink); }
.pr-sort-ans.is-empty .n { color: var(--dim); }
/* 2. Card art inside the position buttons. The scrim is left-weighted so the
      label stays readable over whatever artwork the leader happens to have. */
.pr-deck .pr-positions button:hover { color: var(--ink); border-color: rgba(95, 199, 223, .45); }
/* 3. The toolbar drops to a thin row: search and rarity are the least-used
      controls here but were carrying the same weight as everything else. */
.rankings-page .pr-toolbar .field-label { font-size: var(--t-micro); }
/* end v635-rankings-deck */
/* A sort whose answer is a card an earlier sort already claimed shows it as a
   repeat rather than promoting the runner-up. Substituting would make the
   preview false; dimming it keeps the rail honest about how often the sorts
   genuinely agree. */
.pr-sort-ans.is-repeat .n { color: var(--muted); }
.pr-sort-ans.is-repeat .v { color: var(--dim); font-style: italic; }
/* end v635b-sort-repeat */
/* ---------------------------------------------------------------------------
   Rankings deck: presence pass.
   The deck worked but read flat -- the header sat at 15px in rgb(147,164,179),
   the exact grey the position pills also used, so nothing in the strip led.
   Two changes, and both carry information rather than decoration:
     - each sort tile washes its own answer's card art behind it, and the
       answer thumbnail goes to 52px with a shadow, so the strip reads as a
       shelf of cards rather than a row of captions;
     - the header colour says what the sort MEASURES -- cyan for quality, gold
       for money, mint for collection -- which is the vocabulary the rest of the
       site already uses.
   --------------------------------------------------------------------------- */
/* The scrim is VERTICAL and darkest at the top, which is exactly where the
   coloured header sits. If this is ever changed to a horizontal gradient -- as
   the position pills use -- the headers lose their backing and the colour stops
   being readable over pale artwork. */
.pr-deck .pr-sort:hover { background: var(--field); }
.pr-deck .pr-sort.is-active { background: var(--field); }
/* colour by what the sort measures */
.pr-deck .pr-k-quality.is-active { box-shadow: inset 0 3px 0 var(--cyan); }
.pr-deck .pr-k-money.is-active { box-shadow: inset 0 3px 0 var(--gold); }
.pr-deck .pr-k-coll.is-active { box-shadow: inset 0 3px 0 var(--sage); }
/* The ACTIVE tile keeps its meaning. A first version let a generic
   `.is-active b { color: #fff }` win on specificity, so selecting a sort wiped
   its colour at the moment it mattered most -- "Closest for less" read white
   while "Under 25,000" beside it read gold. Selecting brightens the hue. */
/* the answer figure picks up the same meaning, quietly */
.pr-deck .pr-k-money .pr-sort-ans .v { color: #d2a955; }
.pr-deck .pr-k-coll .pr-sort-ans .v { color: #7fcfae; }
/* the answer is a card, so show it as one */
.pr-deck .pr-sort-ans img, .pr-deck .pr-sort-noart { width: 52px; height: 73px; border-radius: var(--radius-s); }
.pr-deck .pr-sort-ans .n { font-size: var(--t-base); font-weight: 600; color: #fff; }
.pr-deck .pr-sort-ans .v { font-size: var(--t-small); color: #9fb6c6; margin-top: 3px; }
.pr-deck .pr-sort.is-active .pr-sort-ans .n { color: #fff; }
/* position pills: display face, near-white, art pushed harder. They were 12px
   mono in the same grey as their own border. */
.pr-deck .pr-positions button.is-active { border-color: var(--cyan); color: #fff; }
/* end v636-deck-presence */
/* ---------------------------------------------------------------------------
   Rankings hero stats: explain themselves on hover.
   These four numbers make the credibility case for the whole page, and one of
   them read as "+/-0.925 mean error against the game's own OVR" -- a label
   written for someone who already knew the answer. The labels are rewritten to
   stand on their own; this adds the depth behind them.
   The WHOLE TILE is the hover target, deliberately. Four help icons across a
   four-stat band would be more chrome than content, so the affordance is a
   dotted rule under the label instead -- quiet at rest, cyan on approach. It
   uses text-decoration rather than border-bottom because the labels wrap to two
   lines and a border would draw one rule across the full column width, reading
   as a divider rather than as a hint.
   --------------------------------------------------------------------------- */
/* Keyboard users get a real focus ring; the dotted rule alone is too quiet to
   serve as a focus indicator. */
/* end v638-stat-help */
/* ---------------------------------------------------------------------------
   /pulse-rating.html -- how the rating works.
   The card inspector used to link straight to /pulse-model.js. Publishing the
   weights is the whole differentiator, but raw JavaScript is not a destination
   for a reader, so this page delivers the same claim in a form a person can
   read and keeps the source link as a footnote.
   --------------------------------------------------------------------------- */
/* the wall of identical 99s */
.pulse-rating-page .pm-empty { font-size: var(--t-body); color: var(--muted); margin: 0; }
/* the spread. Lane geometry lives in pulse-rating.js -- see the note there on
   why the pitch cannot drop below the height of a pin. */
/* narrow screens get a ranked list instead of a twelve-lane tower */
.pulse-rating-page .pm-axis.is-list { border-left: 0; }
.pulse-rating-page .pm-axis.is-list + .pm-axline { display: none; }
/* Two cards can share a name and a rating -- the series is what tells them
   apart, so the list carries it rather than looking like a duplicated row. */
/* sections */
.pulse-rating-page .pm-lede { font-size: var(--t-base); line-height: 1.65; color: #b6c6d2; max-width: 66ch; margin: 0 0 22px; }
/* is / is not / cannot -- three colours, each meaning what it means elsewhere
   on the site: cyan for the rating, gold for money, red for the caveat. */
/* the card, taken apart */
/* the weights */
.pulse-rating-page .pm-fit { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); margin: 0 0 14px; }
.pulse-rating-page .pm-w th.n, .pulse-rating-page .pm-w td.n { text-align: right; }
.pulse-rating-page .pm-w td.n { font-family: var(--font-mono); font-size: var(--t-small); color: #8fa3b4; width: 74px; }
/* source footnote + onward links */
@media (max-width: 640px) {
/* Twenty cards squeezed into a phone turned the row of 99s into a single
     unreadable string of nines. The wall only makes its point at card size,
     so it scrolls sideways rather than shrinking. */
}
/* end v640-pulse-rating-page */
/* ---------------------------------------------------------------------------
   Pulse Rating page: colour on the section headers.
   Every heading was ink-white on near-black, so a long page of prose had no
   rhythm and nothing to catch a skimmer.
   The colour is not decoration -- it is the same two-tone split the claim cards
   at the top of the page already use. Cyan marks the sections that explain how
   the rating is built; red marks the two that admit something it costs us to
   say. A reader scrolling past should be able to see that this page has a
   confession thread running through it, which is the point of having one.
   Gold is deliberately absent: on this site gold means money, and nothing on
   this page is about price.
   --------------------------------------------------------------------------- */
/* The section rule carries the same tone: a short bright segment sitting on
   the left of the hairline, so the boundary reads as a chapter mark rather
   than a divider. */
/* The two figure captions say opposite things, so they should not look alike:
   the game's flat 99 stays grey, and what the rating does with it is cyan. */
/* end v641-pulse-page-tone */
/* ---------------------------------------------------------------------------
   CARD ADVISOR -- the answer, and what it is made of.
   The verdict used to be a Red Diamond Pro wall sitting exactly where the
   answer belongs. It is now free at full quality and rationed instead, so the
   styling here has to make an ANSWER look like the point of the page rather
   than making a lock look inevitable.
   Three pieces: the sticky rail that holds the card and its rating, the verdict
   block, and the path lenses -- the same control the user already learned on
   Pulse Rankings, so nothing here invents a new interaction.
   --------------------------------------------------------------------------- */
/* ---- the sticky rail ---- */
.advisor-page .pa-rail-art img { width: 100%; height: auto; display: block; }
.advisor-page .pa-rail-noart { display: grid; place-items: center; aspect-ratio: 5 / 7; background: #0e1720;
  font-family: var(--font-display); font-size: 2rem; color: var(--muted); }
.advisor-page .pa-rail-who { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--muted); margin: 0 0 14px; }
.advisor-page .pa-rail-big b { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700;
  color: var(--cyan); line-height: 1; }
.advisor-page .pa-rail-big span { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.advisor-page .pa-rail-unrated { font-size: var(--t-small); line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.advisor-page .pa-rail-foot { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--muted); margin: 14px 0 0; }
/* ---- the verdict ---- */
.advisor-page .pa-verdict.cash { border-color: rgba(241, 184, 75, .34);
  background: radial-gradient(circle at 8% 0%, rgba(241, 184, 75, .13), transparent 46%), rgba(9, 16, 23, .9); }
.advisor-page .pa-verdict.danger { border-color: rgba(255, 85, 116, .34);
  background: radial-gradient(circle at 8% 0%, rgba(255, 85, 116, .12), transparent 46%), rgba(9, 16, 23, .9); }
.advisor-page .pa-verdict.is-metered { border-color: var(--line);
  background: rgba(9, 16, 23, .88); }
.advisor-page .pa-verdict-eyebrow { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.advisor-page .pa-verdict-word { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  line-height: 1; color: var(--sage); margin: 0 0 8px; }
.advisor-page .pa-verdict.cash .pa-verdict-word { color: var(--gold); }
.advisor-page .pa-verdict.danger .pa-verdict-word { color: #ff9bac; }
.advisor-page .pa-verdict-word.is-metered { color: var(--ink); font-size: 1.9rem; }
.advisor-page .pa-verdict-why { font-size: var(--t-base); line-height: 1.6; color: #cfdde7; margin: 0; max-width: 62ch; }
.advisor-page .pa-verdict-rank b { display: block; font-family: var(--font-display); font-size: 2rem;
  font-weight: 700; color: var(--ink); line-height: 1; }
.advisor-page .pa-verdict-rank span { display: block; font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-2); }
/* The meter line is deliberately quiet. It is a fact about the account, not a
   sales pitch -- the moment it starts shouting, a free answer starts feeling
   like a trial. */
.advisor-page .pa-verdict-meter { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim);
  margin: 0; padding: 0 22px 14px; }
.advisor-page .pa-pro-line { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: 0;
  padding: 12px 22px; border-top: 1px solid rgba(255, 85, 116, .22); font-size: var(--t-small); color: var(--muted);
  background: linear-gradient(90deg, rgba(255, 85, 116, .09), transparent 62%); }
.advisor-page .pa-pro-line b { color: #ff9bac; font-weight: 600; }
.advisor-page .pa-gem { color: #ff5574; }
.advisor-page .pa-pro-line a { margin-left: auto; font-family: var(--font-display); font-size: var(--t-small);
  letter-spacing: .06em; text-transform: uppercase; color: #ff9bac; text-decoration: none; white-space: nowrap; }
.advisor-page .pa-pro-line a:hover, .advisor-page .pa-pro-line a:focus-visible { color: #ffc2cd; }
/* ---- the path lenses: the Pulse Rankings deck, on this page ---- */
.advisor-page .pa-deck-head b { font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); }
.advisor-page .pa-deck-head span { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); }
.advisor-page .pa-lens:last-child { border-right: 0; }
/* Vertical scrim, darkest at the top, which is where the coloured label sits.
   A horizontal one would leave the label unbacked over pale artwork. */
.advisor-page .pa-lens.is-active { background: var(--field); }
.advisor-page .pa-lens b { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.advisor-page .pa-lens-ans { display: block; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid rgba(122, 160, 185, .28); font-family: var(--font-mono); font-size: var(--t-small); color: #cfdde7; }
.advisor-page .pa-k-good b { color: #5ce9b3; }
.advisor-page .pa-k-money b { color: var(--gold-ink); }
.advisor-page .pa-k-off b { color: #8a9dab; }
.advisor-page .pa-k-off .pa-lens-ans { color: #7f929f; text-decoration: line-through;
  text-decoration-color: rgba(255, 155, 172, .5); }
/* Selecting brightens the hue rather than replacing it with white, so a path
   keeps its meaning at the moment it matters most. */
/* ---- the arithmetic under the deck ---- */
.advisor-page .pa-detail-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
.advisor-page .pa-tone-good { color: var(--cyan-ink); }
.advisor-page .pa-tone-money { color: var(--gold-ink); }
.advisor-page .pa-tone-off { color: #ff9bac; }
.advisor-page .pa-detail-lede { font-size: var(--t-body); line-height: 1.62; color: #a9bcc9; max-width: 70ch; margin: 0 0 16px; }
.advisor-page .pa-ledger-row { display: flex; justify-content: space-between; gap: var(--space-6); padding: 9px 0;
  border-bottom: 1px solid rgba(45, 58, 70, .4); font-size: var(--t-body); color: #a9bcc9; }
.advisor-page .pa-ledger-row:last-child { border-bottom: 0; }
.advisor-page .pa-ledger-row b { color: var(--ink); font-family: var(--font-mono); font-size: var(--t-small);
  text-align: right; font-weight: 400; }
/* ---- the hero triad, carried over from Pulse Rankings ---- */
.advisor-page .hero-stage-advisor .pa-slot { background: none; border: 0; padding: 0; box-shadow: none; }
@keyframes paFloatL { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-9px) rotate(-6deg); } }
@keyframes paFloatC { 0%, 100% { transform: translateY(-14px) scale(1.06); } 50% { transform: translateY(-25px) scale(1.06); } }
@keyframes paFloatR { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-7px) rotate(6deg); } }
.advisor-page .pa-cat { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill);
  white-space: nowrap; margin-bottom: 9px; }
.advisor-page .pa-slot-u .pa-cat { background: var(--sage); color: #05221a; }
.advisor-page .pa-slot-k .pa-cat { background: var(--gold); color: #2b1d02; }
.advisor-page .pa-slot-d .pa-cat { background: var(--cyan); color: #032027; }
/* height: auto is not optional here. The markup carries width/height attributes
   so the browser can reserve the box before the art loads; without an explicit
   height the attribute becomes the USED height and the art stretches to 378px
   inside a 151px column. That shipped in v931 and is what stretched the
   Advisor's hero triad. Every card-art image that scales to its container needs
   this line, the way .dp-cd img already had it. */
.advisor-page .pa-cd img { width: 100%; height: auto; display: block; }
.advisor-page .pa-fig b { display: block; font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; }
.advisor-page .pa-slot-u .pa-fig b { color: var(--sage); }
.advisor-page .pa-slot-k .pa-fig b { color: var(--gold); }
.advisor-page .pa-slot-d .pa-fig b { color: var(--cyan); }
.advisor-page .pa-fig span { display: block; font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--muted); line-height: 1.5; margin-top: 3px; }
/* ---- layout ---- */
.advisor-page .results.decision-context-grid { align-items: start; }
/* The rail lives INSIDE the existing left column rather than beside it: the
   showcase grid has two tracks, and a third child lands in a 255px cell. */
.advisor-page .pa-showcase .pa-rail { border: 0; padding: 0; background: none; position: static; }
.advisor-page .pa-showcase .card-art { display: none; }
/* end v642-advisor-answer */
/* ---------------------------------------------------------------------------
   Advisor hero triad: opt in to the fan, then take over its layout.
   styles.css carries a deliberate site-wide rule --
     .hero-fan .hero-art-card:not(.prototype-card) { display: none }
   -- whose job is to hide hero panels that never loaded their art. The new
   triad does not use .prototype-card, so it was correctly hidden by a rule
   doing exactly what it was written to do. Rather than weaken that rule for
   every page, this scopes an exception to the Advisor and supplies the layout
   the .prototype-card nth-of-type positions would otherwise have provided.
   --------------------------------------------------------------------------- */
/* The fan absolutely positions its three cards. The triad is a row, so the
   stage becomes a grid the moment it holds triad slots. */
.advisor-page .hero-stage-advisor:has(.pa-slot) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
  align-items: end; height: auto; min-height: 0; padding-top: 22px;
}
.advisor-page .hero-stage-advisor:has(.pa-slot)::before,
.advisor-page .hero-stage-advisor:has(.pa-slot)::after { content: none; }
@media (max-width: 760px) {
.advisor-page .hero-stage-advisor:has(.pa-slot) { gap: var(--space-2); padding-top: var(--space-6); }
/* The type floor is 11px site-wide and it applies here too: a caption that
     has to shrink below it is a caption that is too long. --t-micro stays. */
}
/* end v647-advisor-hero-fan */
/* ---------------------------------------------------------------------------
   Advisor triad, second pass.
   .hero-art-card is a self-contained art panel: it clips to its own bounds and
   paints decorative pseudo-elements inside them. The triad hangs a category
   pill ABOVE its card and a caption BELOW, so both were being cut off, and the
   inherited decorations were showing through the caption as dark discs.
   Reset the inherited chrome rather than fighting it piece by piece.
   --------------------------------------------------------------------------- */
/* The pill sits above the card, so the stage needs headroom or it clips. */
.advisor-page .hero-stage-advisor:has(.pa-slot) { padding-top: var(--space-14); overflow: visible; }
/* Captions are two short lines under each card; let them breathe rather than
   wrapping mid-phrase against a 100px column. */
.advisor-page .pa-fig span { max-width: 20ch; margin-left: auto; margin-right: auto; }
/* end v648-advisor-triad-clip */
/* ---------------------------------------------------------------------------
   Watch-outs / what-could-change: plain lists, not numbered ones.
   These reuse .command-reason-card for its framing, but that card styles its
   list items as "grid-template-columns: 24px minmax(0,1fr)" -- a 24px track for
   the step number. A plain <li> with no <b> puts all of its text in that 24px
   column, which is why every word wrapped onto its own line.
   --------------------------------------------------------------------------- */
/* end v649-advisor-list-fix */
/* ---------------------------------------------------------------------------
   The Pro line, when you already have Pro.
   It used to render for everyone, so subscribers were sold the thing they had
   already bought -- and it printed the list-at price inside the sentence
   claiming Pro adds the list-at price, which showed free readers the number it
   was gating. Pro now sees a delivered figure; free sees the offer without it.
   --------------------------------------------------------------------------- */
.advisor-page .pa-pro-owned { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: 0;
  padding: 12px 22px; border-top: 1px solid rgba(255, 85, 116, .22); font-size: var(--t-small); color: #a9bcc9;
  background: linear-gradient(90deg, rgba(255, 85, 116, .07), transparent 62%); }
.advisor-page .pa-pro-owned b { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; color: #ff9bac; }
/* end v650-pro-line-owned */
/* ---------------------------------------------------------------------------
   THE VERSION STRIP  (rail, Card Advisor)
   Every version stays visible; nothing folds. Three fit, a fourth scrolls.
   Three decisions worth keeping straight:
     1. The tile is ONE box with one border and one background, and the artwork
        DISSOLVES into it. There is no seam between art and plinth, which is
        also why nothing here can misalign the way the old tiles did.
     2. The OVR is absent. The card art prints it in its own corner; repeating
        it underneath tells the reader something they are looking straight at.
     3. The rating is set in the mono face with tabular figures, because this is
        a column of numbers being compared to each other and the decimals have
        to line up. The display face has no tabular set.
   --------------------------------------------------------------------------- */
/* The rail column was 220px, which is why the strip was blowing straight out of
   it: a grid child defaults to min-width:auto and sizes to its content, so the
   tiles never scrolled -- they just pushed the rail wider than its own column.
   min-width:0 makes the rail honour the column, and the column has to be wide
   enough for the three tiles the design actually shows. */
/* Guarded by a min-width, because this block is appended after the mobile
   single-column rule and would otherwise win at every width -- the two-column
   layout would survive onto a phone and push the answer off the screen. */
/* justify-items:center sizes a grid item to its max-content and then centres it,
   so min-width:0 alone will not make the rail shrink -- it is never being
   stretched in the first place. It has to stretch before it can be constrained. */
.advisor-page .pa-vers-lab { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim); }
.advisor-page .pa-vers-n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); }
/* Shown only once the strip has been measured and actually overflows. */
.advisor-page .pa-vers-more { font-style: normal; color: var(--cyan); }
.advisor-page .pa-vstrip.is-scrolling { padding-bottom: 9px; }
/* A <button> centres its content block vertically, which is what made an
   earlier version of these tiles sit their artwork at different heights
   depending on how many lines the series name ran to. An explicit top-aligned
   column pins the art regardless of the label. */
.advisor-page .pa-vtile:hover { border-color: rgba(95, 199, 223, .45); }
.advisor-page .pa-vtile.is-active { border-color: rgba(95, 199, 223, .75); box-shadow: 0 0 0 1px rgba(95, 199, 223, .25);
  background: linear-gradient(180deg, rgba(9, 15, 21, .2) 34%, rgba(95, 199, 223, .62) 100%); }
.advisor-page .pa-vtile:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(95, 199, 223, .5); }
/* The dissolve, longer than the hero-card value so a trace of artwork still
   tints the base rather than the plinth going flat. */
.advisor-page .pa-vart img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .18) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .18) 92%, transparent 100%); }
.advisor-page .pa-vrate b { font-family: var(--font-mono); font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #9de6f7; }
.advisor-page .pa-vseries { display: block; font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-small); letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; color: #7fa2b4;
  margin-top: var(--space-2); overflow: hidden; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.advisor-page .pa-vtile.is-active .pa-vseries { color: rgba(4, 34, 43, .85); }
/* The mark. Sized by its own SVG attributes, so this only has to carry colour
   and alignment -- it inherits currentColor from whatever it sits inside. */
.pulse-mark { flex: none; display: inline-flex; align-items: center; color: var(--cyan); }
.pulse-mark svg { display: block; }
.advisor-page .pa-vtile.is-active .pulse-mark { color: #04222b; }
/* The rail's headline number carries the mark too, at its own scale. */
.advisor-page .pa-rail-big .pulse-mark { color: var(--cyan); margin-right: 2px; }
/* end v651-version-strip */
/* ---------------------------------------------------------------------------
   v657-setup-deck -- the S3 setup deck.
   The old strip put Card, Game, Copies and Goal in one undifferentiated row and
   buried everything else behind "Advanced controls", which said nothing about
   what was in there. The deck answers that: the top row is the question, and
   the tune drawer groups the rest by what each field is actually about.
   The group accents follow the site vocabulary -- cyan is the rating and the
   squad read, mint is your collection, gold is money. Market override is grey
   on purpose: red belongs to Red Diamond Pro alone, and an override field
   dressed in Pro red reads as a locked feature.
   --------------------------------------------------------------------------- */
.advisor-page .s3-cell:last-child { border-right: 0; }
.advisor-page .s3-cell .field-label { display: block; margin-bottom: var(--space-2); }
.advisor-page .s3-cell > select,
.advisor-page .s3-cell .search-row input { width: 100%; background: transparent; border: 0;
  color: var(--ink); font-family: var(--font-display); font-size: 1.12rem; padding: 0; outline: none; }
.advisor-page .s3-cell > select:focus-visible,
.advisor-page .s3-cell .search-row input:focus-visible { outline: 2px solid rgba(95, 199, 223, .6); outline-offset: 3px; }
.advisor-page .s3-cell .search-row { display: flex; align-items: center; gap: var(--space-3); }
.advisor-page .s3-cell .search-row button { flex: none; border: 1px solid rgba(95, 199, 223, .4);
  background: rgba(95, 199, 223, .12); color: #9de6f7; border-radius: var(--radius-l); width: 34px; height: 34px;
  font-size: var(--t-base); cursor: pointer; }
.advisor-page .s3-cell-go .recommend-button { width: 100%; white-space: nowrap; }
/* The drawer summary is the bar: one control, and a hint that says whether the
   defaults are still in play so nobody has to open it to find out. */
.advisor-page .s3-tune > summary { display: flex; align-items: center; gap: var(--space-5); list-style: none;
  padding: 10px 17px; background: rgba(6, 11, 16, .55); cursor: pointer; }
.advisor-page .s3-tune > summary::-webkit-details-marker { display: none; }
.advisor-page .s3-tune > summary:focus-visible { outline: 2px solid rgba(95, 199, 223, .6); outline-offset: -2px; }
.advisor-page .s3-tune-label { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.advisor-page .s3-tune-hint { margin-left: auto; font-family: var(--font-body); font-size: var(--t-micro); color: var(--dim); }
.advisor-page .s3-tune-hint.is-tuned { color: var(--cyan-ink); }
.advisor-page .s3-group:last-child { border-right: 0; }
/* A short rule in the group's own colour, rather than a chip or an icon: it
   labels the column without adding another thing to read. */
.advisor-page .s3-field .field-label { display: block; margin-bottom: 3px; }
.advisor-page .s3-field select,
.advisor-page .s3-field input { width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgba(45, 58, 70, .8); color: var(--ink); font-size: var(--t-base);
  padding: 3px 0; outline: none; border-radius: 0; }
.advisor-page .s3-field select:focus, .advisor-page .s3-field input:focus { border-bottom-color: var(--cyan); }
.advisor-page .s3-field select:focus-visible,
.advisor-page .s3-field input:focus-visible { outline: 2px solid rgba(95, 199, 223, .5); outline-offset: 3px; }
.advisor-page .s3-check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-small);
  color: var(--muted); margin-top: 9px; cursor: pointer; }
.advisor-page .s3-check input { flex: none; accent-color: var(--cyan); }
@media (max-width: 900px) {
.advisor-page .s3-group:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
.advisor-page .s3-group:last-child { border-bottom: 0; }
}
/* end v657-setup-deck */
/* ---------------------------------------------------------------------------
   v659-rarity-red -- Red Diamond stops borrowing the danger red.
   --neon-pink is the warning colour: chip-risk, tag-danger, option-avoid_buy,
   caution reads. Pointing the top rarity at the same token meant a Red Diamond
   card and a "do not buy this" chip were the same red, on a site where the
   nearby Red Diamond Pro badge is a third red again. Rarity gets its own token,
   sitting deliberately deeper and cooler than both, so red on this site still
   means exactly one thing per shade: bright = stop, light pink = Pro, garnet =
   the rarity.
   --------------------------------------------------------------------------- */
/* end v659-rarity-red */
/* ---------------------------------------------------------------------------
   v663-mobile-fixes

   1. The Rankings triad on a phone. .pr-cat is white-space:nowrap inside
   .pr-lift, a flex column with no width of its own, so the column sized itself
   to the widest pill -- "CLOSEST FOR LEAD" came out 137px inside a 95px grid
   track and .tool-hero (overflow-x: hidden) simply cut it off at both screen
   edges, along with the card art underneath. The lift has to be bound to its
   track, and the label has to be allowed to wrap once it no longer fits.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
.pr-lift { width: 100%; min-width: 0; }
/* Cards fill their own track. The centre one still leads, but by an amount
     that stays inside the hero instead of covering its neighbours. */
.pr-cd, .pr-slot.k .pr-cd { width: 100%; }
.pr-slot.k .pr-cd { width: 116%; }
}
/* 2. The hero facsimile tags carry real labels -- "Hot Flip", "Top
   Recommendation", "Closest for lead" -- not decorative card text, so the
   0.44rem size that the type-scale floor exempts for facsimile internals was
   being used for copy the reader is meant to read. At 7px on a phone they were
   both unreadable and truncated mid-word ("TOP CHA"). Back to the 11px floor,
   allowed to wrap. */
/* end v663-mobile-fixes */
/* ---------------------------------------------------------------------------
   v665-mobile-round-2

   1. The floating quick-nav rail. A fixed button on a phone always covers
   something, and here it covered the thing being read -- an opponent's name on
   My Dynasty, the confidence line on the planner. It now steps aside while you
   scroll down and returns when you stop or scroll back. nav.js sets the class;
   this is only the movement.
   --------------------------------------------------------------------------- */
/* 2. The Pulse Feed ticker hides its scrollbar by design, which left the last
   item sheared off at the screen edge with nothing saying there was more. It
   keeps the hidden scrollbar -- a bar would look wrong on a ticker -- and gains
   a trailing fade instead, which is the part that carries the meaning. */
@media (max-width: 900px) {
.pulse-feed-viewport {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
  }
.pulse-feed-compact {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
  }
}
/* 3. The decorative hero fans. On desktop they are three small floating cards.
   On a phone the Advisor's stacked into a parade of oversized cards with
   colliding labels, and the planner's cropped its own tags at the screen edge.
   They carry atmosphere, not information, so on a phone they go and the tool
   starts at the top of the screen. Desktop is untouched.
   The Rankings triad is deliberately NOT here: biggest riser, card king and
   biggest faller are real data, so that one was made to fit instead. */
@media (max-width: 900px) {
/* Specificity matters here: .tool-page .hero-stage.hero-fan is three classes
     and sets display:block, so a two-class selector loses to it silently. */
.advisor-page .tool-hero,
  .program-page .tool-hero { grid-template-columns: minmax(0, 1fr); }
}
/* end v665-mobile-round-2 */
/* ---------------------------------------------------------------------------
   v668-mobile-round-3

   1. Ranking rows sat flush against the panel edge. Every sibling block on the
   page carries 16-18px of horizontal padding; .pr-rowbtn carried none, so the
   rank digit touched the left border and the rating touched the right one while
   everything above them was inset. Matching the deck's inset is all this needs.
   --------------------------------------------------------------------------- */
/* 16px matches .pr-deck's own padding, so a row's rank digit lines up with the
   deck's label above it rather than sitting 4px proud of everything else. */
.reward-target-list:has(.rich-empty) { min-height: 128px; }
/* end v670-reward-list-height */
/* ---------------------------------------------------------------------------
   v672-setup-checkboxes

   The setup deck's checkboxes rendered 253x50px. Two global rules were sizing
   them -- `input, select { width: 100% }` and `.advisor-setup input {
   min-height: 50px }` -- both written for text fields and selects, which is
   almost every input on the page. The v657 rule only set flex and accent-color,
   so it never contested either, and the labels wrapped around a box the width
   of its own column.

   A checkbox is not a field: it needs an explicit size, and it has to say so
   loudly enough to beat rules aimed at everything else.
   --------------------------------------------------------------------------- */
/* The row itself must not stretch to the column either, or the label wraps
   against a box that is no longer there. */
/* end v672-setup-checkboxes */
/* ---------------------------------------------------------------------------
   v673-setup-deck-colour

   The deck read flat because every group was styled identically apart from a
   46px hairline and a small heading: same grey label, same white value, same
   dividers, same focus. Four columns of the same thing.

   Each group now owns a colour, carried through its header wash, its field
   underlines, its focus ring and its checkbox -- but never through the data.
   The values stay neutral on purpose: cyan still means the Pulse Rating and
   gold still means money everywhere else on the site, so an accent here is
   identity, not meaning. Market override stays grey for the same reason red
   belongs to Red Diamond Pro alone.
   --------------------------------------------------------------------------- */
/* The header becomes a lit shelf rather than a rule floating over nothing. */
/* Underlines pick up the group at rest and go full accent on focus, so the
   field you are in is obvious without a heavy focus box. */
.advisor-page .s3-field select,
.advisor-page .s3-field input {
  border-bottom-color: color-mix(in srgb, var(--grp) 26%, transparent);
  transition: border-bottom-color .16s ease, box-shadow .16s ease;
}
.advisor-page .s3-field select:hover,
.advisor-page .s3-field input:hover { border-bottom-color: color-mix(in srgb, var(--grp) 48%, transparent); }
.advisor-page .s3-field select:focus,
.advisor-page .s3-field input:focus {
  border-bottom-color: var(--grp);
  box-shadow: 0 1px 0 0 var(--grp);
}
.advisor-page .s3-field select:focus-visible,
.advisor-page .s3-field input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--grp) 55%, transparent);
  outline-offset: 3px;
}
/* The label brightens with its own group on hover, so the whole row reads as
   the target rather than the 17px box. */
.advisor-page .s3-check:hover { color: color-mix(in srgb, var(--grp) 70%, var(--ink)); }
/* The dividers were the same flat line four times; they now fade so the eye
   reads columns rather than a table. */
.advisor-page .s3-group:not(:last-child) {
  border-image: linear-gradient(180deg, transparent, rgba(95, 199, 223, .16) 22%, rgba(95, 199, 223, .16) 78%, transparent) 1;
  border-right: 1px solid;
}
/* end v673-setup-deck-colour */
/* ---------------------------------------------------------------------------
   v674-setup-select-options

   The open dropdown was white with grey-on-white options -- the native popup
   ignores the dark field it came from unless the select declares a scheme. The
   Program Planner already does exactly this; the Advisor's deck never got it.
   Setting color-scheme on the select is what actually darkens the popup;
   styling option alone is not enough on every platform.
   --------------------------------------------------------------------------- */
/* end v674-setup-select-options */
/* ---------------------------------------------------------------------------
   v675-setup-deck-polish

   Two faults in the v673 pass, both visible only once it was rendered:

   1. Gold at 13% over this navy goes olive. The wash is warm-hue-sensitive in
      a way cyan and mint are not, so the goal column read dirty beside them.
      The wash is shorter and lighter now, and gold gets its own lower alpha --
      matching the others numerically is what made it look wrong.
   2. The tip badges stayed cyan in every column. That was invisible when the
      whole deck was cyan; with four colour territories it reads as a bug.
   --------------------------------------------------------------------------- */
/* The help badges belong to their column. Same shape and behaviour, so the
   tooltip system is untouched -- only the colour follows the group. */
.advisor-page .s3-group .tip {
  border-color: color-mix(in srgb, var(--grp) 45%, transparent);
  color: color-mix(in srgb, var(--grp) 82%, #ffffff);
  background: color-mix(in srgb, var(--grp) 12%, transparent);
}
.advisor-page .s3-group .tip:hover,
.advisor-page .s3-group .tip:focus-visible {
  border-color: var(--grp);
  color: #04222b;
  background: var(--grp);
}
/* end v675-setup-deck-polish */
/* ---------------------------------------------------------------------------
   v677-hero-mark-inline

   The mark drifted off on its own line in a grey that matched nothing. Two
   causes: the rating container is display:block, so an inline-flex glyph in
   front of the number wrapped instead of sitting beside it; and .pulse-mark
   hard-sets color: var(--cyan), which overrode the slot colour the number was
   already using.

   The mark belongs to its number, so it inherits that number's colour and sits
   on the same line -- the way the Pulse rail already does it.
   --------------------------------------------------------------------------- */
.advisor-page .pa-fig b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.advisor-page .pa-fig b .pulse-mark { color: inherit; }
/* The Rankings half of this rule moved to the shared triad block (v730), where
   it is scoped to .rankings-page .dp-val. Both still put the mark beside the
   number and let it inherit that number's ink. */
/* end v677-hero-mark-inline */
/* ---------------------------------------------------------------------------
   v679-field-scale

   The field view speaks one scale at a time. The chip mislabelled a Pulse gap
   as "+3 overall", which is how two 99-OVR cards appeared to upgrade each
   other; now the scale is explicit and switchable. Mint = the game's OVR,
   cyan + the mark = Pulse, matching the site-wide colour vocabulary.
   --------------------------------------------------------------------------- */
.fv-scale .fv-swlab { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: var(--space-1); transition: color .15s ease; }
.fv-scale .fv-swlab.lit { color: var(--ink); }
.fv-scale .fv-swlab[data-scale="pulse"].lit { color: var(--cyan); }
/* the tiny mark next to the Pulse label, drawn in CSS so the static HTML needs
   no inline SVG */
.fv-track { position: relative; width: 40px; height: 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: rgba(45, 58, 70, .5); flex: none; }
/* The chips. Owned upgrades take the active scale's colour; market upgrades
   keep their muted body but still carry the mark in Pulse view. The breathing
   is a glow swell only -- no size change, so the diamond never jitters. */
.fv-up .pulse-mark { color: inherit; }
.fv-up.is-owned.is-ovr { background: var(--sage); color: #04241a; animation: fvBreatheMint 2.4s ease-in-out infinite; }
.fv-up.is-owned.is-pulse { background: var(--cyan); color: #04222b; animation: fvBreatheCyan 2.4s ease-in-out infinite; }
@keyframes fvBreatheMint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 227, 164, 0); }
  50% { box-shadow: 0 0 10px 2px rgba(63, 227, 164, .55); }
}
@keyframes fvBreatheCyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 199, 223, 0); }
  50% { box-shadow: 0 0 10px 2px rgba(95, 199, 223, .6); }
}
@media (prefers-reduced-motion: reduce) {
.fv-up.is-owned.is-ovr, .fv-up.is-owned.is-pulse { animation: none; }
}
/* end v679-field-scale */
/* v680-rail-scale --- the bench rail, the free-swap badges and the swap panel
   speak the same scale as the field chips, so a Pulse view never shows a raw
   OVR gain sitting next to a Pulse one. */
.fv-tag.is-owned.is-pulse { background: linear-gradient(90deg,#2f9ab4,var(--cyan)); color: #04222b; }
.fv-tag .pulse-mark { color: inherit; }
.fv-tag.is-owned { display: inline-flex; align-items: center; gap: 2px; }
.fv-stat b .pulse-mark { color: inherit; }
/* end v680-rail-scale */
/* v680-advisor-inset --- the setup panel breathed at 18px while the results
   panel under it sat at 12px, so the two stacked frames read as misaligned and
   the answer looked jammed against its own border. One inset for both. */
.advisor-page .results.has-decision-context .selected-card { padding: var(--space-7); }
/* end v680-advisor-inset */
/* v681-rail-badge-size --- the rail badge read smaller than the chip sitting on
   the card even though the rail has room to spare. Give it the number size it
   deserves, and scale the mark with it. */
.fv-tag.is-owned {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 3px 8px;
  border-radius: var(--radius-m);
  gap: 3px;
}
/* end v681-rail-badge-size */
/* v682-scale-switch-size --- the toggle sat smaller than the pill it lives
   beside, so it read as a footnote rather than the control that changes what
   every number on the page means. */
/* end v682-scale-switch-size */
/* v684-advisor-lookup --- a deep link asks for one card. This block is what
   stands where the verdict would be while the lookup is out, and what stands
   there instead of a verdict when the marketplace does not have that card. */
.pa-lookup { border: 1px solid rgba(45, 58, 70, .8); border-radius: var(--radius-xl); padding: var(--space-9);
  background: linear-gradient(180deg, rgba(12, 20, 28, .9), rgba(9, 14, 20, .9)); }
.pa-lookup-lede { font-family: var(--font-display); font-size: var(--t-h3, var(--t-lead)); font-weight: 700;
  letter-spacing: .01em; color: var(--ink); margin: 0 0 6px; }
.pa-lookup-lede b { color: var(--cyan); font-weight: 700; }
.pa-lookup-lede.is-miss b { color: var(--ink); }
.pa-lookup-note { font-size: var(--t-small); color: var(--muted); line-height: 1.55; margin: 0; }
.pa-lookup-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3); margin: 16px 0 14px; }
.pa-lookup-alt { display: flex; align-items: center; gap: var(--space-4); text-align: left; cursor: pointer;
  border: 1px solid rgba(45, 58, 70, .8); border-radius: 9px; padding: 8px 10px;
  background: rgba(8, 13, 19, .8); color: var(--ink); }
.pa-lookup-alt:hover, .pa-lookup-alt:focus-visible { border-color: rgba(95, 199, 223, .6);
  background: rgba(14, 26, 34, .9); }
.pa-lookup-alt img { width: 34px; height: auto; border-radius: var(--radius-s); flex: none; }
.pa-lookup-alt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-lookup-alt b { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-lookup-alt i { font-family: var(--font-mono); font-style: normal; font-size: var(--t-micro); color: var(--muted); }
/* end v684-advisor-lookup */
/* v685-whats-coming --- the Daily Pulse leads with what lands next instead of
   admitting it has nothing, and lists the days under it. Tick colours follow
   the site vocabulary: mint for a program you can grind, gold for content that
   moves stubs, cyan for a mode or season change, grey for a title the parser
   could not classify -- a confident wrong colour is worse than an honest one. */
.dp-od-when.is-next { color: var(--gold); }
.dp-od-items { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dp-od-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dp-od-tick { width: 3px; height: 15px; border-radius: 2px; flex: none; background: #5d7385; }
/* end v685-whats-coming */
/* v686-ondeck-size --- the on-deck rows were set at the dense-table sizes while
   sitting directly under a 1.6rem lede and 15px copy, so they read as a
   footnote to the thing they are the evidence for. */
/* end v686-ondeck-size */
/* v687-job-cards --- the four cards asked questions and described features while
   every page they lead to opens with a number and a named card. The live figure
   is the card now; the question is the kicker under it.

   The accent is the unit of the number, not decoration. Every card used to wear
   the same three-colour gradient in rotation -- including red, which everywhere
   else on this site means Pro only. Cyan reads (Pulse Rating), mint is what you
   gain, gold is stubs. */
.job-card .job-kicker { color: var(--dim); font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; margin-bottom: var(--space-5); }
.job-fact { display: flex; align-items: center; gap: var(--space-4); margin-bottom: 5px; min-width: 0; }
.job-fact b .pulse-mark { color: inherit; }
.job-art { width: 38px; border-radius: var(--radius-s); flex: none; }
.job-card .job-who { margin: 0 0 12px; color: #9fb4c4; font-size: var(--t-body); line-height: 1.45; }
/* end v687-job-cards */
/* v688-job-accent --- the retired rainbow rules were nth-child, which out-ranks
   a plain class selector, so the decorative gradients were still painting over
   the meaning. Match their specificity to put them out. Words also stop wearing
   the number face: mono is for figures, the display face is for phrases. */
/* end v688-job-accent */
/* v689-pulse-proof --- the home page never showed the metric the site is named
   for. Cyan is the Pulse colour everywhere else, so this band is where it
   belongs; the OVR sits beside each rating in grey because the comparison IS
   the argument. */
.pulse-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 26px;
  align-items: center; margin-top: 22px; padding: 22px; border-radius: 10px;
  border: 1px solid rgba(95, 199, 223, .28);
  background: linear-gradient(120deg, rgba(10, 26, 33, .8), rgba(8, 13, 19, .92)); }
.pp-kick { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 8px; }
.pulse-proof h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.14;
  color: var(--ink); margin: 0 0 9px; }
.pp-copy { font-size: var(--t-base); color: #9fb4c4; line-height: 1.6; margin: 0 0 13px; }
.pp-more { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.pp-more:hover { color: #a5e6f5; }
.pp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pp-card { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(45, 58, 70, .75);
  border-radius: 9px; padding: 11px; background: rgba(6, 11, 16, .72); min-width: 0; }
.pp-card img { width: 46px; border-radius: var(--radius-s); flex: none; }
.pp-meta { min-width: 0; }
.pp-meta b { display: block; font-family: var(--font-body); font-size: var(--t-body); font-weight: 600;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-nums { display: flex; align-items: baseline; gap: var(--space-3); margin: 3px 0 2px; }
.pp-ovr { font-family: var(--font-mono); font-size: var(--t-body); color: var(--dim); }
.pp-pr { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 3px; }
.pp-pr .pulse-mark { color: inherit; }
.pp-meta i { font-family: var(--font-mono); font-style: normal; font-size: var(--t-micro); color: var(--dim); }
@media (max-width: 1100px) {
.pulse-proof { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 640px) {
.pp-cards { grid-template-columns: minmax(0, 1fr); }
.pulse-proof h2 { font-size: 1.24rem; }
}
/* end v689-pulse-proof */
/* v690-palette --- cyan and mint were carrying nearly every meaning on the site,
   so any panel using both read as one blue-green wash. Two hues take that load
   off them, and one rule keeps six colours from becoming the same problem one
   size up: a number takes a meaning colour only when the colour says something
   the label does not.

     violet  what is YOURS   owned cards, bench depth, free swaps, import state
     coral   TIME            live now, lands next, expiring
     steel   a plain count   no meaning colour at all

   Ownership used to be mint, which is the colour of a rating you GAIN -- two
   different ideas wearing one colour. Time used to borrow gold, which means
   stubs. Both now say what they mean. */
/* ---- the squad panel: edge rule carries the meaning, the figure grows ---- */
.fv-stat b .pulse-mark { color: var(--meaning); }
/* ---- header pills: a lit dot rather than another wash ---- */
.fv-pill { --meaning: var(--steel); position: relative; padding-left: 22px; }
.fv-pill .pulse-mark { color: var(--cyan); }
/* the mark is its own element, so the label has to be a flex line or the two
   words break around it -- this has bitten every surface that carries it */
#fvSquadScaleLabel { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
/* ---- ownership is violet everywhere it is stated ---- */
.squad-own-tag.is-owned {
  background: color-mix(in srgb, var(--violet) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent);
  color: #c7b4ff;
}
/* how many of your own cards are sitting in the dugout */
#fvRailCount { color: #c7b4ff; }
/* ---- time is coral ---- */
.dp-od-when.is-next { color: var(--coral); }
/* end v690-palette */
/* v691-meaning-split --- two fixes the palette exposed.

   "Free" in the swap panel and the +N badge on the dugout rail both used
   .fv-tag.is-owned, so the word inherited the badge's number treatment. Free
   states ownership (violet); the rail badge states a gain and keeps the scale
   colour it had.

   The NEW chip announces that something just dropped, which is a time signal,
   not an alarm -- it was wearing a red close enough to the Pro red to read as
   a gate. */
.fv-tag.is-free {
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent);
  color: #c7b4ff;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
}
.new-drop-chip { background: var(--coral); color: var(--coral-ink); }
/* end v691-meaning-split */
/* v692-readouts --- the header numbers were 15px sharing a baseline with their
   own labels, so each figure read as a footnote to the word in front of it. The
   meaning colour now bleeds in from the left and falls away before it reaches
   the number, which lets the figure stay white and still be the loudest thing
   in the bar: the hue is the surface rather than a marker on it. */
.fv-pill {
  --meaning: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 11px 20px 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--meaning) 38%, transparent);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--meaning) 26%, transparent) 0%,
      color-mix(in srgb, var(--meaning) 9%, transparent) 46%,
      rgba(9, 15, 21, .9) 88%),
    rgba(9, 15, 21, .9);
}
/* the dot the fade replaces */
.fv-pilllab .pulse-mark { color: var(--meaning); }
/* end v692-readouts */
/* v693-header-row --- measured, the header was running three control heights at
   once: the Lineup/Pitching toggle at 50px, the readouts at 48 and Auto-build at
   36. The readouts also carried a 24px figure against 15px tab labels, which is
   what made them read as the biggest thing in the row rather than a peer of it.
   One height for every control on the line, and the figure sized to sit under
   the toggle rather than over it. */
.fv-headright .fv-pill,
.fv-headright .fv-autobtn { min-height: 44px; }
.fv-autobtn { display: inline-flex; align-items: center; }
@media (max-width: 760px) {
.fv-headright .fv-pill,
  .fv-headright .fv-autobtn { min-height: 38px; }
}
/* end v693-header-row */
/* v695-fit-dial --- the fit score becomes a dial with a clay-to-mint ramp.

   RAMPS ARE NOT VOCABULARY. A flat colour on this site carries a meaning: cyan
   is a Pulse Rating, mint is a gain, gold is stubs. A ramp carries a magnitude,
   and the hues between its ends are positions on a scale rather than words. So
   this is the one place clay and rose appear, and if a second scale ever needs a
   ramp it reuses this one rather than inventing another.

   The ramp ends on mint because a strong fit IS a gain, and starts in a warm
   family the site uses nowhere else, so no point along it can be mistaken for
   Pro, stubs, Pulse or your collection. */
@media (max-width: 640px) {
/* At 60px the caption climbed onto the figure. The dial keeps more of its
     ring, the figure gives back a little, and the caption sits tight to the
     gap at the bottom of the sweep where there is nothing to collide with. */
}
/* end v695-fit-dial */
/* v696-dial-reset --- the dial shipped with the old score chip still inside it.
   `.squad-fit-card b` styled the figure as a 44px mint disc with a mint border,
   and my `.fit-dial b` rule set only colour and size, so the disc survived: a
   full mint circle behind the gradient arc, and an off-centre number, because a
   bordered 44px box inside a 70px ring does not share its optical centre.

   Same specificity, later rule wins -- which is exactly why only the properties
   I named got replaced. Name the rest. */
/* end v696-dial-reset */
/* v697-dial-column --- the row reserves a column for the score, and it was
   still the 48px the old chip needed. The 70px dial overflowed it by 22px, so
   every ring sat past the row's right edge and read as misaligned. The column
   is the dial's width now, and it tracks the dial down to mobile. */
/* end v697-dial-column */
/* v876-fit-grid-mobile --- two cards per row left each one ~150px wide. The
   art and dial columns alone cost 62px + 64px + two 12px gaps = 150px, so the
   middle column -- name, owned tag, rating gap -- had zero px left and every
   line of text rendered on top of the dial instead of beside it. One card per
   row on the same 620px breakpoint the dial already uses gives that column
   its width back. */
/* end v876-fit-grid-mobile */
/* v698-rail-badge-ink --- the badge was a gradient, #2f9ab4 to #5fc7df (--cyan), with the
   figure sitting over the darker end: 8.45:1 against the bright end but 5.05:1
   against the dark one, and you read the worse number. A gradient behind a
   figure gives that figure two contrast ratios.

   Inverted instead of re-inked. The pill goes dark with a thin edge in the scale
   colour and the figure becomes the lit thing -- 11.3:1, and on a rail of six
   badges the numbers stop competing with the card art beside them. The mark
   takes the figure's colour, as it does in every other pill. */
.fv-tag.is-owned {
  background: #0a2420;
  color: #7ef0c2;
  border: 1px solid color-mix(in srgb, var(--sage) 42%, transparent);
}
.fv-tag.is-owned.is-pulse {
  background: #0a2028;
  color: #8fe0f2;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
}
.fv-tag.is-owned .pulse-mark { color: inherit; }
/* end v698-rail-badge-ink */
/* v699-field-chip-ink --- the field chips carried the same bright fill with dark
   ink as the rail badge, so the two surfaces disagreed once the rail inverted.
   Same treatment here: dark pill, thin edge in the scale colour, figure lit.

   The pill stays fully opaque because these sit on card art rather than a panel,
   and the breathing glow stays -- it is the approved signature and it reads
   better around a dark pill than it did around a bright one, where the glow and
   the fill were the same colour. */
/* Neutralise the base too. Every owned chip carries a scale class today, so the
   old gradient is unreachable -- and an unreachable rule that still paints is
   exactly what left a mint disc inside the fit dial. */
.fv-up.is-owned {
  background: #0a2420;
  color: #7ef0c2;
  border: 1px solid color-mix(in srgb, var(--sage) 46%, transparent);
}
.fv-up.is-owned.is-ovr {
  background: #0a2420;
  color: #7ef0c2;
  border: 1px solid color-mix(in srgb, var(--sage) 46%, transparent);
}
.fv-up.is-owned.is-pulse {
  background: #0a2028;
  color: #8fe0f2;
  border: 1px solid color-mix(in srgb, var(--cyan) 46%, transparent);
}
.fv-up.is-owned .pulse-mark { color: inherit; }
/* the old halo was drawn for a bright chip and reads as a smear on a dark one */
.fv-up.is-owned .fv-halo { display: none; }
/* end v699-field-chip-ink */
/* v700-acquisition-ink --- the last surfaces still wearing a gradient, and two
   of them were wearing a meaning that was not theirs.

   A market chip states a PRICE, so it belongs to gold. It was olive-grey, which
   means nothing here, and it ran 8.45:1 down to 6.53:1 across its own gradient.

   "Move" is a card you already own, shuffled from another slot -- that is your
   collection, not stubs, so it leaves the gold it was borrowing and joins Free
   in violet, dimmer because it costs you a hole somewhere else.

   "Earn" was purple, close enough to the violet that means "yours" to imply you
   own a card you demonstrably do not. It takes the neutral: no stubs, no
   ownership, no gain. */
.fv-up.is-market,
.fv-tag.is-market {
  background: #241a08;
  color: #ffd27a;
  border: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
  box-shadow: none;
}
.fv-tag.is-move {
  background: #1a1430;
  color: #d9c3ff;
  border: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
}
.fv-tag.is-earn {
  background: #131a20;
  color: #b9cbd8;
  border: 1px solid color-mix(in srgb, var(--steel) 38%, transparent);
}
/* end v700-acquisition-ink */
/* v701-import-band --- Card Import personalises every other page and was never
   mentioned below the hero medallion. Red is the Pro colour everywhere else, so
   this is the one band on the page that earns it -- and the only red below the
   fold, which is what keeps it meaning "Pro" rather than "alert". */
.import-band {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-top: 22px;
  padding: var(--space-10);
  border-radius: 10px;
  border: 1px solid rgba(255, 101, 124, .26);
  background: linear-gradient(120deg, rgba(38, 10, 18, .72), rgba(8, 12, 17, .93));
}
.ib-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid rgba(255, 101, 124, .5);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  color: #ff9fae;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}
.ib-cta:hover, .ib-cta:focus-visible { background: rgba(255, 101, 124, .12); color: #ffc2cc; }
/* Numbered because these genuinely are a sequence -- install, prepare, import --
   and out of order they do not work. */
/* end v701-import-band */
/* v702-card-records --- per-card performance on My Dynasty. Cyan for the
   percentile, because a percentile is a rating figure; the stat values stay ink,
   because they are counts and rates rather than anything the palette speaks to.
   The withheld-rate line is steel: it is an absence, not a warning. */
.mdc-row { border: 1px solid rgba(45, 58, 70, .75); border-radius: 10px; padding: 13px 15px;
  background: rgba(9, 15, 21, .72); }
.mdc-stat { display: inline-flex; flex-direction: column; gap: 1px; min-width: 62px; }
/* end v702-card-records */
/* ---------------------------------------------------------------------------
   v868 My Dynasty. Lifted out of the page's own <style> block, which is why
   this arrives all at once: the page carried 12KB of inline CSS that nothing
   else could see or reuse.

   The shape is one question per region. The head answers "who is this and how
   are they doing" in a single row -- club left, record right, sharing a
   baseline. Below it the page splits: "Lately" (the last ten games) and "The
   season" (everything on record). The game log runs full width underneath
   because it is the one thing here that grows without limit, and in a column it
   made one side twice the height of the other.

   Colour follows the site vocabulary and nothing else: sage is a win, red is a
   loss, gold is the Pro gate, cyan is interactive. The chart does NOT rely on
   those hues -- position above or below the axis carries win and loss, and the
   colour only agrees with the position.
   --------------------------------------------------------------------------- */
/* --- the head ------------------------------------------------------------ */
.dy-id-who { min-width: 0; }
.dynasty-page .pp-h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.dy-rec-n b.is-l { color: var(--red); }
.dy-streak.is-w { color: var(--sage); }
.dy-streak.is-l { color: var(--red); }
/* --- loading a profile --------------------------------------------------- */
.dy-load { min-height: 44px; }
.dy-flash.err { color: var(--red); }
/* --- the two questions --------------------------------------------------- */
.dy-col { min-width: 0; }
.dynasty-page .py-figs.is-recent { justify-content: flex-start; gap: 14px 34px; margin: 0 0 22px;
  padding: 0; border-top: 0; }
.dynasty-page .py-figs.is-recent span { text-align: left; justify-items: start; }
.dynasty-page .py-figs.is-recent .dy-recnum { display: inline-flex; align-items: baseline; gap: 3px; }
.dynasty-page .py-figs.is-recent b.is-w { color: var(--sage); }
.dynasty-page .py-figs.is-recent b.is-l { color: var(--red); }
/* The chart: position carries the result, colour only agrees with it. */
.dy-bar { position: relative; flex: 1; min-width: 12px; }
.dy-summary { margin: 14px 0 0; font-size: var(--t-base); line-height: 1.55; color: var(--muted); }
.dy-summary b { color: var(--ink); }
.dy-facts dd.is-w { color: var(--sage); }
.dy-facts dd.is-l { color: var(--red); }
/* --- the season ---------------------------------------------------------- */
.dynasty-page .py-figs.is-budget { justify-content: flex-start; gap: 14px 38px; margin: 0 0 26px;
  padding: 0 0 24px; border-top: 0; border-bottom: 1px solid var(--line); }
.dynasty-page .py-figs.is-budget span { text-align: left; justify-items: start; }
.dy-table { min-width: 0; }
.dy-scroll { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
/* A scroller that hides its scrollbar has to say it scrolls some other way, or
   a sheared-off column reads as missing data rather than as more of it. The
   fade is set from the real measurement (see markScrollers) and lifts once the
   reader has reached the end, because by then there is nothing left to promise. */
/* --- the log, full width ------------------------------------------------- */
.dy-res.is-w { color: var(--sage); }
.dy-res.is-l { color: var(--red); }
.dy-game[open] .dy-caret { transform: rotate(45deg); border-color: var(--cyan); }
/* --- the gate: an honest wall, and a real link --------------------------- */
.dy-pro { display: inline-block; margin: 0 0 10px; padding: 3px 9px; border-radius: var(--radius-xs);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #1b1305;
  background: linear-gradient(180deg, #ffd77f 0%, var(--gold) 62%, #e0a52f 100%); }
.dy-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 22px; border: 1px solid rgba(241, 184, 75, .4); border-radius: var(--radius-l);
  background: rgba(241, 184, 75, .12); color: var(--gold); font-family: var(--font-display);
  font-size: var(--t-base); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: background .16s ease; }
/* end v868-my-dynasty */
/* ---------------------------------------------------------------------------
   v704 Card Database.

   The board owns its chrome end to end. The first legacy pass reused
   .page-toolbar, .page-summary, .database-toolbar and .database-grid; every one
   of those carries boxed panels and art tiles that won over the new rules and
   produced a page that was half legacy. Those selectors are now unused by
   database.html and are left in place only because this sheet is append-only.

   Colour, once each: cyan is the model's number and interactive state, gold is
   price, sage is a market win, steel is a figure carrying no meaning, red is an
   alert, violet is what you OWN. A card you have to earn is not a card you own
   -- no-sell reads steel, matching the correction already made for Squad
   Builder's Earn tag at v700.
   --------------------------------------------------------------------------- */
/* Headline type is the SHARED tool-page hero, mirrored rather than reinvented.
   Writing a local size here is the exact drift this sheet already corrected on
   Rankings -- "a 1.9rem cap against the shared 3.35rem" -- and this block had
   reintroduced that same 1.9rem cap, in Barlow Condensed where every other
   hero on the site is Inter. No font-family: it inherits the body face like
   .tool-hero h1 does. */
.cdb-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; margin-top: var(--space-7); }
/* The field is one object: rule, glyph and input share a box, so the underline
   follows focus and the text is never jammed against the edge. appearance:none
   is load-bearing -- type="search" keeps its own rounded field box and internal
   padding, which put a second border around the input and pinned the text hard
   against its left edge. */
.cdb-field { position: relative; display: flex; align-items: center; gap: 11px;
  border-bottom: 2px solid var(--line); padding: 2px 0 10px; }
.cdb-field:focus-within { border-bottom-color: var(--cyan); }
.cdb-field label { position: absolute; top: -15px; left: 0; font-family: var(--font-display);
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
/* Nudged 1px: a condensed face carries its cap-height high in the line box, so
   a glyph centred on the BOX reads high against the ink. */
.cdb-mag { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: #3d5063; stroke-width: 2;
  transition: stroke .18s; transform: translateY(1px); }
.cdb-field:focus-within .cdb-mag { stroke: var(--cyan); }
.cdb-field input { flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none;
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 600;
  letter-spacing: .01em; line-height: 1.2; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); }
.cdb-field input:focus { outline: none; box-shadow: none; }
/* A hint set at headline size reads as a second headline. */
.cdb-field input::placeholder { font-family: var(--font-body); font-size: var(--t-base); font-weight: 400;
  letter-spacing: 0; color: var(--dim); }
.cdb-field input::-webkit-search-decoration,
.cdb-field input::-webkit-search-cancel-button,
.cdb-field input::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.cdb-count { text-align: right; white-space: nowrap; padding-bottom: 11px; margin: 0; }
.cdb-count b { display: block; font-family: var(--font-mono); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.cdb-count span { display: block; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-top: var(--space-2); }
/* The position rail. Bar LENGTH is this slot's share of the current matches;
   bar TINT is what a top-40 card there costs to keep. Selecting a slot shows on
   the label and the button edge, never on the bar -- painting the selected bar
   cyan threw away the only thing the tint was there to say. */
/* Each slot is a tile: a field with that position lit, over a shelf carrying
   the code, the count and the bar. The field is drawn, not photographed --
   card art would go stale against the filter, load eleven cross-origin images
   above the fold, and give a 7-card DH the same hero portrait as a 607-card
   SP. A diagram states where a position stands and nothing more. */
/* The label sits on its own shelf: the field is a well, the plinth a step out
   of it. The step is a ramp, not an edge -- the face fades over its bottom to
   exactly the colour the plinth starts at, so the zones read as two without a
   line between them. Those stops are the COMPOSITED plinth colours: #182028 is
   rgba(238,244,248,.05) over var(--field). Change the overlay and these move with
   it, or the seam comes back. */
/* The rail is a control, not a footnote. Both lines were set at the two
   dimmest greys on the page -- the label at --muted and the count at #4d6072
   -- and at 11-12px against #0d151d (--field) the count in particular was barely there. */
/* A track behind the bar, so a short bar reads as "a small share of" rather
   than as a stub floating in the dark. It stays full width and left-anchored
   while the type above it centres: a bar growing from the middle measures
   nothing. */
/* The bar was interpolated from gold toward #22303c, so every middling slot
   landed on a desaturated olive -- the "washed out" look. Hue is now held at
   gold and only the alpha moves, so a cheap slot reads as dim gold instead of
   as mud. Painted by database.js; this is the floor. */
.cdb-spine button:hover { border-color: rgba(95, 199, 223, .45); }
.cdb-spine button.is-on { border-color: var(--cyan); }
/* The position diamond. Named -diamond, not -field: .cdb-field is the search
   box, and because this block sits later in the stylesheet its display:block
   was overriding the search box's display:flex -- which dropped the magnifier
   onto its own line above a full-width input.

   Hairlines are set in PIXELS via non-scaling-stroke: the tile
   scales the viewBox down by about a quarter, and a stroke that scales with it
   lands under a pixel and greys out into the panel. */
/* The infield is the shape people recognise, so it carries the strongest line
   -- the outfield is context around it, not its equal. */
/* Fair territory as a wash, so the field is a shape before it is a set of
   lines -- an outline alone disappears at this size. */
/* Two rings, not one: the halo lifts the marker off the linework so the dot
   never has to fight a base or a foul line for contrast. */
/* The hand-off, once progressive loading stops. A statement plus one action:
   refusing to keep walking is only honest if it points at what does work. */
.cdb-narrow { display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  margin: 16px 0 0; padding: 14px 18px 15px; max-width: 46ch;
  border-radius: 9px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(238, 244, 248, .035) 0%, rgba(238, 244, 248, .01) 100%), rgba(13, 21, 29, .6); }
/* Refine: one button, a count, and -- when something is on -- chips saying
   what. Hidden state must never be invisible state. */
.cdb-refine { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display);
  font-size: var(--t-base); letter-spacing: .06em; text-transform: uppercase; padding: 8px 15px;
  border-radius: 9px; border: 1px solid var(--line); background: rgba(13, 21, 29, .7); color: var(--ink); cursor: pointer; }
.cdb-refine:hover { border-color: rgba(95, 199, 223, .5); }
.cdb-refine[aria-expanded="true"] { border-color: var(--cyan); color: var(--cyan-ink); }
.cdb-n { font-family: var(--font-mono); font-size: var(--t-small); color: #05090e; background: var(--cyan);
  border-radius: var(--radius-pill); padding: 1px 7px; letter-spacing: 0; }
.cdb-car { font-size: var(--t-micro); opacity: .7; }
.cdb-applied { display: contents; }
.cdb-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body);
  font-size: var(--t-small); padding: 6px 8px 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid rgba(95, 199, 223, .4); background: rgba(95, 199, 223, .08); color: var(--ink); cursor: pointer; }
.cdb-chip:hover { border-color: var(--cyan); }
.cdb-chip i { font-style: normal; color: var(--muted); font-size: var(--t-body); line-height: 1; }
.cdb-chip:hover i { color: var(--ink); }
.cdb-panel { margin: 12px 0 0; padding: 16px 18px 18px; border: 1px solid var(--line);
  border-radius: 11px; background: rgba(8, 14, 22, .55); }
/* One separator, not two. The group used to carry a top border AND a label
   eight pixels under it -- two rules that close together read as noise. The
   label now carries the rule itself, so each header IS the divider. */
.cdb-grp + .cdb-grp { margin-top: var(--space-9); }
/* This was 11px at weight 400 in #4d6072: 3.09:1 against the panel, where AA
   wants 4.5:1 at any size under 18px. Not a stylistic dim -- unreadable. */
.cdb-lab { display: flex; align-items: center; gap: var(--space-5); font-family: var(--font-display);
  font-size: var(--t-body); font-weight: 700; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--muted); margin: 0 0 11px; }
.cdb-lab::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, rgba(238, 244, 248, .2) 0%, rgba(238, 244, 248, .07) 38%, rgba(238, 244, 248, 0) 100%); }
.cdb-opts { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cdb-opt { font-family: var(--font-body); font-size: var(--t-small); padding: 7px 12px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: rgba(13, 21, 29, .6); color: var(--muted);
  cursor: pointer; text-decoration: none; }
.cdb-opt:hover { border-color: rgba(95, 199, 223, .45); color: var(--ink); }
.cdb-opt.is-on { border-color: var(--cyan); color: var(--ink); background: rgba(95, 199, 223, .09); }
/* Single-choice groups read as a segmented run so they cannot be mistaken for
   the multi-select ones sitting directly above them. */
.cdb-opts.is-one { gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  width: fit-content; max-width: 100%; }
.cdb-opts.is-one .cdb-opt { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
.cdb-opts.is-one .cdb-opt:last-child { border-right: 0; }
.cdb-opts.is-one .cdb-opt.is-on { background: rgba(95, 199, 223, .12); color: var(--cyan-ink); }
/* Card type: the pill IS the colour it names, so the colour is a label rather
   than a meaning and spends none of the site vocabulary. Scoped to this one
   control; it never touches a figure. */
.cdb-opt.is-type { border-color: rgba(45, 58, 70, .9); }
.cdb-opt.is-type:hover { border-color: var(--c); color: var(--ink); }
.cdb-opt.is-type.is-on { border-color: var(--c); color: var(--c); background: var(--fill); }
/* Card series: the art is the identity. A hand-authored colour per series would
   need 37 values and would rot the week a new program ships. */
/* The per-series count is a number a reader is meant to compare, not a
   decoration -- it gets the same 12px floor as the other dense captions. */
/* Your collection. Violet is ownership; red is Pro, as everywhere else. */
.cdb-opt.is-mine.is-on { border-color: var(--violet); color: #c7b4ff; background: rgba(169, 139, 255, .13); }
.cdb-opt.is-locked { border-color: rgba(255, 101, 124, .4); color: #ff9bac; }
.cdb-opt.is-locked:hover { border-color: var(--red); color: #ff9bac; }
/* ---- the board. Deliberately the quiet surface: keep cost only reads as loud
   because it is the only gold in forty rows. ---- */
/* Flush inside the card rather than overhanging it -- an overhang reads the
   same but pushes the row's content box wider than its cell. */
.cdb-own { position: absolute; inset: auto 2px 2px auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 0 2px rgba(6, 10, 15, .85); }
.cdb-nm { min-width: 0; }
.cdb-num.is-ink { color: var(--ink); }
/* A card you have to earn is not a card you own: steel, never violet. */
.cdb-more { display: inline-flex; flex-direction: column; gap: 3px; margin: 16px 0 0; padding: 10px 16px;
  border-radius: 9px; border: 1px solid var(--line); background: rgba(13, 21, 29, .6); color: var(--ink);
  cursor: pointer; font-family: var(--font-display); font-size: var(--t-base); letter-spacing: .05em;
  text-transform: uppercase; }
.cdb-more:hover { border-color: rgba(95, 199, 223, .5); }
.cdb-more small { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0;
  text-transform: none; color: var(--dim); }
/* ---- the dock. Height tracks its content: the first pass restated the card
   inside its own fold -- art, name, rank, price, all of which sit in the row
   directly above -- and that 246px block, not the answer, set the panel height.
   A card with no alternatives rendered 342px of panel around 53px of content. */
.cdb-dock { --hue: var(--cyan); border-bottom: 1px solid rgba(45, 58, 70, .55);
  background: rgba(95, 199, 223, .045); box-shadow: inset 3px 0 0 var(--hue); animation: cdbOpen .2s ease-out; }
@keyframes cdbOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cdb-rail button:hover { color: var(--ink); }
.cdb-rail button.is-on { color: var(--hue); border-bottom-color: var(--hue); }
.cdb-rail .is-up { color: var(--cyan); }
.cdb-rail .is-dn { color: var(--red); }
.cdb-close:hover { color: var(--ink); }
/* The answer, in sentences, before any table. A card opens on this. */
.cdb-say .is-good { color: var(--cyan-ink); font-weight: 600; }
.cdb-say .is-bad { color: #ff9bac; font-weight: 600; }
.cdb-showmore { display: inline-flex; align-items: center; gap: 7px; margin: 13px 0 0; padding: 7px 13px;
  border-radius: var(--radius-l); border: 1px solid var(--line); background: rgba(13, 21, 29, .6); color: var(--muted);
  cursor: pointer; font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .07em;
  text-transform: uppercase; }
/* The key sits ABOVE the bars it defines -- it used to sit under them, so the
   claim arrived before the sentence explaining what it was measured against. */
/* Bar LENGTH is what the attribute added to the rating; bar COLOUR is where it
   ranks among the cards nearest it at the same position. Two facts per row, and
   the colour says the one the number cannot. */
/* The percentile in text, because a three-band colour is otherwise the only
   carrier and a title attribute does not exist on a touch screen. */
.cdb-part.is-elite .v, .cdb-part.is-elite .pc { color: var(--cyan-ink); }
.cdb-part.is-hole .v, .cdb-part.is-hole .pc { color: #ff9bac; }
.cdb-quirks span.is-inferred { border-style: dashed; color: var(--dim); }
.cdb-owned { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
  font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: #c7b4ff;
  padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(169, 139, 255, .13);
  border: 1px solid rgba(169, 139, 255, .4); }
.cdb-outs a:hover { border-color: rgba(95, 199, 223, .5); color: var(--ink); }
.cdb-outs a.is-go { border-color: rgba(95, 199, 223, .5); color: var(--cyan-ink); }
@media (max-width: 1100px) {
.cdb-line { grid-template-columns: 1fr; gap: var(--space-5); }
.cdb-count { text-align: left; }
}
@media (max-width: 760px) {
/* The close control drops to its own line rather than squeezing four tabs. */
/* The rail is a refinement, not the main event, and on a phone it was the
     single biggest thing on the page: four buttons per row at desktop height
     wrapped to three rows, 222px, which pushed the first card row off a 840px
     screen entirely. Contrast is carried by the colours, not the sizes, so
     nothing here walks back the legibility fix.

     The field diagram does not make the trip. Eleven tiles at four across is
     three rows and 366px of rail before the first card -- most of a phone
     viewport spent on a filter. Under 780px the rail falls back to the flush
     cells it used before the diagram: the same code, count and cost bar, six
     across, two rows. The diagram is a desktop luxury, and hiding it costs
     nothing a phone reader was using -- at 62px tall the field was a smudge
     anyway. */
/* The selected cell has no border left to colour, so the marker moves to the
     top edge -- the same inset rule the rail used before the tiles. */
/* The match count sits beside its own label rather than under it, which is
     another 40px of head back. */
.cdb-line { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); }
.cdb-count { text-align: right; padding-bottom: var(--space-1); }
.cdb-count b { font-size: 1.35rem; }
.cdb-count span { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
.cdb-dock { animation: none; }
}
/* end v704-card-database */
/* ---------------------------------------------------------------------------
   v705 Card Database hero.

   Same shape as the Pulse Rankings board -- copy left, three real cards right,
   a stat band underneath -- but every slot carries a FINDING about the pool
   rather than a picture. The page it replaced had three art panels captioned
   "Loading card"; these three are the cheapest card that still rates 90, the
   best card you can actually buy, and the single most expensive card to hold.

   Colour follows meaning, not position: sage is a market win, cyan is the
   model's number, gold is price.

   Desktop only. Under 900px the triad and band are hidden and the page keeps
   the search-first head -- the triad would push card rows a full screen down,
   which is the thing the simplicity pass existed to fix.
   --------------------------------------------------------------------------- */
.cdb-herocopy { min-width: 0; }
/* Two columns, not four. At four across each cell was 117px, so the captions
   wrapped to one, two, three and three lines -- and because the cells
   bottom-align, every extra line shoved that cell's figure upward, leaving the
   four figures at four different heights. Two columns give each caption a
   single line and the alignment stops being something to eyeball. */
@media (max-width: 1271px) {
/* Not 900px: minmax(540px, auto) holds the triad column until the shell
     hits its own 1240px cap, squeezing .cdb-herocopy otherwise. */
}
@media (prefers-reduced-motion: reduce) {
.cdb-slot.is-value .cdb-lift, .cdb-slot.is-best .cdb-lift, .cdb-slot.is-dear .cdb-lift,
  .cdb-lift, .cdb-triad::before { animation: none !important; }
.cdb-slot.is-value .cdb-lift { transform: rotate(-6deg); }
.cdb-slot.is-dear .cdb-lift { transform: rotate(7deg); }
}
/* end v705-card-database-hero */
/* ---------------------------------------------------------------------------
   v710 Squad Fit Builder's header row fits its own box.

   .fv-headright was a nowrap flex row holding 158px + 104px + 65px plus two
   9px gaps -- 345px of content in a 328px container -- so Auto-build was
   pushed to a right edge of 361px on a 360px viewport. It wraps now.

   This block also carried a fix sizing the quick-nav rail's toggle, which went
   with the rail in v740.
   --------------------------------------------------------------------------- */
/* end v710-audit-findings */
/* ---------------------------------------------------------------------------
   v712 Market Pulse, converted to the Broadcast system.

   The page used to be six tabs over one list -- Hot watch, Sleepers, Cold
   watch, Flip watch, High value, Low risk -- which asked the reader to know
   which of six words described their own question before it would tell them
   anything. It now answers the question directly, three ways: worth buying,
   worth flipping, leave alone. The full priced board sits underneath for
   people who want to look themselves.

   Colour keeps its one meaning each: sage is a market win, gold is price, red
   is the alert, cyan is ours and interactive, steel is a figure that carries
   no verdict.

   The hero is the third page to use this shape (Pulse Rankings, Card Database,
   now this one) and the third to write its own copy of the CSS. That is one
   too many; the shared component is queued, and when it lands cdb- and mp-
   both collapse into it.
   --------------------------------------------------------------------------- */
.mp-herocopy { min-width: 0; }
/* No font-family. The headline inherits Inter from .tool-hero h1 like every
   other converted page -- a local Barlow Condensed clamp here rendered at
   30px against the site's 54px, which is the exact trap the comment above
   .tool-hero h1 already warns about. */
/* Two columns, not four: at four across the captions wrapped to one, two,
   three and three lines, and because the cells bottom-align that left the
   four figures at four different heights. */
.mp-band div.red b { color: #ff9bac; }
.mp-band div.gold b { color: var(--gold); }
/* ------------------------------------------------------------- three calls */
.mp-calls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin: 20px 0 0; }
/* ----------------------------------------------- the card, opened in place */
.mp-panel { border-left: 3px solid var(--cyan); background: rgba(95, 199, 223, .05); border-radius: 0 9px 9px 0;
  padding: 13px 16px 14px; margin: 2px 0 6px; }
#mpHeroPanel .mp-panel { margin-top: var(--space-8); }
.mp-panel-acts a:hover { border-color: rgba(95, 199, 223, .5); color: var(--ink); }
.mp-panel-acts a.go { border-color: rgba(95, 199, 223, .5); background: rgba(95, 199, 223, .1); color: var(--cyan-ink); }
.mp-col .mp-panel .mp-panel-figs { gap: var(--space-6); }
.mp-col .mp-panel .mp-panel-said { font-size: var(--t-small); }
/* --------------------------------------------------------------- the board */
/* "Why so few?" is the first thing anyone asks of this page, so the question
   sits where it occurs to them -- but the answer is four sentences, and four
   sentences nobody asked for is how a page turns into a wall of text. Same
   treatment for how the three calls are picked. */
/* The link is 15px of text; a thumb needs 40. Grown with a pseudo so the tap
   target does not push the heading around. */
/* The 1px underline is part of this box, so the top padding has to carry it:
   7 above, 6 + 1 below. Even padding left the typed text a point and a half
   higher than the chips beside it. */
/* type="search" keeps its own field box, its own padding and a clear button,
   none of which match anything else here. appearance:none alone does not
   remove the button -- the ::-webkit-search-* resets are load-bearing. */
.mp-chip { position: relative; font-family: var(--font-body); font-size: var(--t-small); padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: rgba(13, 21, 29, .6); color: var(--muted); cursor: pointer; }
.mp-chip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
/* Narrowing to three results made the page shorter than the scroll position,
   and the browser yanked everything up mid-word. Holding the list's floor
   keeps the search box where the reader left it. */
#mpBoard { min-height: 88vh; }
.mp-tag { display: inline-block; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); margin-right: var(--space-1); }
.mp-more { display: inline-flex; flex-direction: column; gap: 3px; margin: 16px 0 0; padding: 10px 16px;
  border-radius: 9px; border: 1px solid var(--line); background: rgba(13, 21, 29, .6); color: var(--ink);
  cursor: pointer; font-family: var(--font-display); font-size: var(--t-base); letter-spacing: .05em;
  text-transform: uppercase; }
.mp-more small { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0;
  text-transform: none; color: var(--steel); }
@media (max-width: 1271px) {
/* Hero is desktop only, as on the Card Database: on a phone the triad and
     band would push the three calls a full screen down, and the calls are the
     reason the page exists. Not 900px: minmax(540px, auto) holds the triad
     column until the shell hits its own 1240px cap. */
}
@media (max-width: 760px) {
/* On a phone the search drops to its own line, so it should take it. */
}
@media (prefers-reduced-motion: reduce) {
.mp-slot .mp-lift, .mp-triad::before { animation: none !important; }
.mp-slot.value .mp-lift { transform: rotate(-6deg); }
.mp-slot.gap .mp-lift { transform: rotate(7deg); }
}
/* end v712-market-pulse */
/* ---------------------------------------------------------------------------
   v713 Quirk icons.

   The Show ships a 128px icon with every official quirk and the feed was
   dropping it on the floor -- extractOfficialQuirks kept the name, the
   description and the type, and threw the img away. It is carried now, so
   the Card Database fold and the Squad Fit Builder detail panel both show
   the game's own art beside the name.

   Quirks we inferred ourselves (1,118 cards carry no official ones) have no
   icon and stay text-only. That is not a gap to paper over: text-only IS the
   signal that the quirk is our read rather than the game's.

   The URL stored is The Show's rails redirect, never the S3 address it lands
   on -- the blob id is signed with no expiry, while the S3 link it hands back
   is presigned and dies after seven days.
   --------------------------------------------------------------------------- */
.cdb-quirks span img,
.squad-quirks span img {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
/* Quieter than an official quirk, but still above the readability floor the
   --dim token exists to hold. The dashed border carries the difference. */
.squad-quirks span.is-inferred { border-style: dashed; color: var(--dim); padding-left: 11px; }
/* end v713-quirk-icons */
/* ---------------------------------------------------------------------------
   v717 The card page, /cards/<slug>-<uuid>.

   This page has a different visitor from every other page on the site. They
   arrive from a Google search -- "cj abrams 97 the show 26" -- and have never
   heard of Diamond Pulse. So the page answers the question they actually
   asked, in the first line, before it shows them anything else: one card means
   nothing on its own, and 97 OVR only means something against the other 177
   shortstops.

   Everything under that rank is written in sentences from the card's own
   numbers, which is also what makes the page worth indexing -- no two of the
   3,028 read alike. The raw ratings sit at the bottom for anyone who wants to
   check the working.

   The styles used to live in a <style> block inside server.mjs. They are here
   now so the page shares the type scale, the colour vocabulary and the cache
   key with every other page instead of quietly drifting from them.
   --------------------------------------------------------------------------- */
/* Smoothing lives here, not in a click handler. An anchor that is allowed to
   navigate always lands; a handler that preventDefaults and then relies on
   animated scrolling lands nowhere the moment animation is unavailable. */
.cardpage-shell { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
.cardpage-shell { scroll-behavior: auto; }
}
.cardpage { max-width: 1120px; margin: 0 auto; padding: 18px 20px 80px; }
.cp-crumb { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); margin: 8px 0 20px; }
.cp-crumb a { color: var(--cyan); text-decoration: none; }
/* ------------------------------------------------------------------ hero */
/* Art on the left as a fixed anchor, and bigger for it -- a 300px column
   renders the card 560px tall instead of 508. align-items:start because both
   columns should begin at the top; centring split the leftover height above and
   below the shorter one, which put 45px of nothing under the buttons.
   Desktop only. Unscoped, this fixed column beats the single-column mobile rule
   below and the text column collapses to 0px, wrapping every line one character
   wide. Under 781px the page keeps the stock stack, name first: on a phone the
   reader should get who this is before they get his picture. */
.cp-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 46px; align-items: start; }
.cp-top > .cp-artbox { order: -1; }
/* No font-family: the headline inherits Inter from the shared tool hero like
   every other converted page. A local condensed clamp here rendered at 30px
   against the site's 54px. */
.cardpage h1 { margin: 4px 0 12px; font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.02;
  font-weight: 700; color: #f7fbff; }
.cp-lede { font-size: 1.06rem; color: #b8c6d0; line-height: 1.6; margin: 0 0 6px; max-width: 60ch; }
.cp-lede b { color: var(--cyan); font-weight: 700; }
.cp-artbox { position: relative; }
.cp-artbox::before { content: ""; position: absolute; inset: -12% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 42%, rgba(95, 199, 223, .2), transparent 70%);
  -webkit-mask: radial-gradient(120% 100% at 50% 48%, #000 44%, transparent 84%);
  mask: radial-gradient(120% 100% at 50% 48%, #000 44%, transparent 84%); }
.cp-art { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 10px;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .65)); }
.cp-art-empty { display: grid; place-items: center; aspect-ratio: 5 / 7; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(13, 21, 29, .6);
  font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; color: var(--cyan); }
/* The one picture on the page that is an argument rather than decoration. */
.cp-scale { position: relative; height: 44px; margin: 18px 0 4px; max-width: 560px; }
.cp-scale i { position: absolute; left: 0; right: 0; top: 22px; height: 6px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(45, 58, 70, .9), rgba(95, 199, 223, .5)); }
.cp-scale u { position: absolute; top: 13px; width: 3px; height: 24px; border-radius: 2px;
  background: var(--cyan); box-shadow: 0 0 12px rgba(95, 199, 223, .85); }
.cp-scale em { position: absolute; top: 0; font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--cyan); font-style: normal; transform: translateX(-50%); white-space: nowrap; }
/* The marker above the line sits 8px off it; these sat 20px below it, so the
   scale read tight on top and loose underneath. The gap is .cp-scale's own box,
   which is 44px tall around a 6px track -- 4px below the BOX is 20px below the
   LINE. Pulled to ~11px: closer, but still looser than the marker, because a
   pointer should hug the line and an axis label should caption the scale. */
.cp-ends { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: var(--t-micro); color: var(--dim); max-width: 560px; margin: -9px 0 20px; }
.cp-figs { display: flex; flex-wrap: wrap; gap: 26px; }
/* A flex row, not a block: with display: block the browser could break between
   the Pulse mark and the number, which put the mark on its own line and dropped
   "90.0" below the other figures' baseline (v937). nowrap and a gap keep mark,
   coin and number on one line at one height. */
.cp-figs div b { display: flex; align-items: center; gap: .28em; white-space: nowrap; font-family: var(--font-mono); font-size: var(--t-lead); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.cp-figs div b .stub-mark, .cp-figs div b .pulse-mark { margin-right: 0; }
.cp-figs div span { display: block; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.cp-figs div.gold b { color: var(--gold); }
.cp-figs div.cyan b { color: var(--cyan); }
.cp-figs div.red b { color: var(--red); }
.cp-figs div.sage b { color: var(--sage); }
/* The quick-sell floor is a fact, not a verdict, and gold on this page already
   means what a card costs. */
.cp-figs div.floor b { color: var(--steel); }
.cp-cta-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; }
.cp-cta { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display);
  font-size: var(--t-base); letter-spacing: .07em; text-transform: uppercase; padding: 12px 19px;
  border-radius: 9px; text-decoration: none; border: 1px solid rgba(95, 199, 223, .5);
  background: rgba(95, 199, 223, .12); color: var(--cyan-ink); }
.cp-cta.is-plain { background: none; border-color: var(--line); color: var(--muted); }
/* ------------------------------------------------------- asks and answers */
/* A stranger from a search sees "94.5 OUR RATING" and has no idea what that
   is. The question sits where it occurs to them; the answer stays folded. */
.cp-why { position: relative; font-family: var(--font-body); font-size: var(--t-small);
  text-transform: none; letter-spacing: .02em; padding: 0; border: 0; background: none;
  color: var(--cyan); cursor: pointer; text-decoration: none;
  border-bottom: 1px dashed rgba(95, 199, 223, .45); }
/* The link is 15px of text; a thumb needs 40. Grown with a pseudo so the tap
   target does not push the line around. */
.cp-why::after { content: ""; position: absolute; inset: -13px -10px; }
.cp-why:hover { border-bottom-color: var(--cyan); }
.cp-why[aria-expanded="true"] { color: var(--muted); border-bottom-color: transparent; }
.cp-whatis { margin: 18px 0 0; }
.cp-seeall { margin: 20px 0 0; }
.cp-fold { font-size: var(--t-small); color: var(--muted); line-height: 1.6; margin: 12px 0 0;
  max-width: 88ch; padding: 13px 15px; border-left: 2px solid rgba(95, 199, 223, .4);
  background: rgba(95, 199, 223, .045); }
.cp-fold p { margin: 0 0 8px; }
.cp-fold p:last-child { margin-bottom: 0; }
.cp-fold a { color: var(--cyan); }
/* Landing a screen and a half down a page is disorienting unless the thing you
   asked for says so. One pulse, then it gets out of the way. */
@keyframes cpLand { from { background: rgba(95, 199, 223, .16); } to { background: transparent; } }
.is-landed { animation: cpLand 1.4s ease-out; border-radius: var(--radius-m); outline: none; }
@media (prefers-reduced-motion: reduce) {
.is-landed { animation: none; }
}
.cp-verdict { border-left: 3px solid var(--sage); background: rgba(63, 227, 164, .06);
  border-radius: 0 10px 10px 0; padding: 15px 18px; margin: 30px 0 0; max-width: 74ch; }
.cp-verdict.is-warn { border-left-color: var(--gold); background: rgba(241, 184, 75, .06); }
.cp-verdict.is-stop { border-left-color: var(--red); background: rgba(255, 101, 124, .06); }
.cp-verdict b { display: block; font-family: var(--font-display); font-size: var(--t-base);
  letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin: 0 0 7px; }
.cp-verdict.is-warn b { color: var(--gold); }
.cp-verdict.is-stop b { color: var(--red); }
.cp-verdict p { font-size: var(--t-body); color: #b8c6d0; line-height: 1.62; margin: 0; }
.cp-sec { font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 34px 0 13px; font-weight: 600; }
.cp-sec em { font-style: normal; color: var(--dim); margin-left: 9px; text-transform: none;
  letter-spacing: .02em; font-family: var(--font-body); }
/* Only the FIRST section, and only its own margin. The gap under the buttons
   was 79px, but 45 of that is slack inside .cp-top -- the hero's height is set
   by the card art and the shorter text column is centred against it, so no
   amount of margin here reaches it. 34px between later sections is correct. */
.cp-top + .cp-sec { margin-top: var(--space-8); }
/* The summary was 13px -- the same size as the attribute names below it and
   smaller than their values -- so the one interpretive line in the section was
   the quietest thing in it. */
/* Thin blocks say something rather than hold space. */
.cp-split.is-solo { grid-template-columns: 1fr; }
.cp-hole { font-size: var(--t-body); color: var(--muted); line-height: 1.6; max-width: 74ch; margin: 14px 0 0; }
.cp-hole b { color: var(--ink); font-weight: 600; }
.cp-figs.is-thin { align-items: center; }
.cp-figsnote { flex: 1 1 320px; font-size: var(--t-body); color: var(--muted); line-height: 1.6;
  max-width: 64ch; margin: 0; padding-left: var(--space-8); border-left: 1px solid var(--line); }
/* Other cards of the same player, in the hero. The band beside the quirks was
   299px of nothing; full-width peer rows want a height it does not have, so
   these use the width instead. */
.cp-vxhead { display: block; margin: 26px 0 10px; font-family: var(--font-display);
  font-size: var(--t-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks and stretches
   whatever is left, so a player with one other card got a single chip spanning
   the whole hero and two got half each. auto-fill keeps the tracks, so a chip
   is the same width whether the player has one alternate or five.
   140px, not 170: at 170 a 303px phone fits one per row. 140 pairs them up and
   still lets five sit across the hero on desktop.
   grid-auto-rows:1fr so a two-line series name does not make its row taller
   than the one under it. */
.cp-vxrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: var(--space-3); grid-auto-rows: 1fr; }
/* Centred, not top-aligned. Top-aligning was a workaround for text blocks of
   different heights; the two-line minimum on the name fixed that properly, so
   both columns can centre against each other again -- which is what stops the
   OVR and the rating hanging below the bottom of the art. */
.cp-vx { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 11px; align-items: center;
  padding: 9px 12px 9px 9px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(13, 21, 29, .55); text-decoration: none;
  transition: border-color .16s ease, background .16s ease; }
.cp-vx:hover { border-color: rgba(95, 199, 223, .45); background: rgba(95, 199, 223, .06); }
/* A fixed box, not height:auto -- the feed's thumbnails are not all the same
   aspect, so auto-height put the art at a different place in every chip. Sized
   against the text beside it rather than to nothing in particular: at 40x56 the
   art was the smallest thing in a chip it is meant to anchor, and the OVR and
   the rating ran off the bottom of it. At 54x76 the card is the tallest element
   and everything else sits inside its height. */
.cp-vx img { width: 54px; height: 76px; object-fit: contain; border-radius: var(--radius-s); }
/* Wraps rather than truncates -- the series is the whole point of the chip, so
   "2026 Home Run De..." is worse than two lines -- but stops at two, so one
   long name cannot set the height of every chip beside it. */
.cp-vx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--t-body); color: var(--ink); font-weight: 600;
  line-height: 1.25; overflow-wrap: anywhere; }
.cp-vx small { display: block; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim);
  margin-top: 2px; }
.cp-vx u { display: block; margin-top: 3px; text-decoration: none; font-family: var(--font-mono);
  font-size: var(--t-small); color: var(--cyan); }
.cp-vx u i { font-style: normal; color: var(--gold); margin-left: var(--space-3); }
.cp-prose { font-size: var(--t-base); color: #b8c6d0; line-height: 1.6; margin: 0 0 12px; max-width: 74ch; }
.cp-prose b { color: var(--ink); font-weight: 600; }
/* -------------------------------------------------------- best at / worst at */
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; max-width: 900px; }
/* The header is what moved. The badge is already at the 11px type-scale floor
   and check-type-scale-floor.mjs fails the build below it, so the only way to
   stop the two reading as the same thing was to raise the heading. */
.cp-split h3 { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .09em;
  text-transform: uppercase; margin: 0 0 13px; font-weight: 700; color: var(--ink); }
.cp-split h3 u { text-decoration: none; }
.cp-good h3 u { color: var(--sage); }
.cp-bad h3 u { color: var(--red); }
.cp-split ul { list-style: none; margin: 0; padding: 0; }
/* Rank 42px because "#1,377" is the widest it gets, value 44px because "125"
   is. Fixed, so the figures line up down the column. */
.cp-split li { display: grid; grid-template-columns: minmax(0, 1fr) 42px 44px; gap: 11px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(45, 58, 70, .55); }
.cp-lbl { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
/* Named, not ".cp-lbl > span". The descendant form also matches the badge and
   beats it on specificity, which silently paints the badge at the label's
   13px -- the exact collision this treatment exists to fix. */
.cp-lbl .cp-nm { font-size: var(--t-body); color: #b8c6d0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cp-lbl .cp-bdg { flex: 0 0 auto; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: .09em; text-transform: uppercase; color: var(--bdgFg); background: var(--bdgBg);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; font-weight: 600;
  /* An inset ring, not a border: a border would make the tinted badges 2px
     taller than the filled ones and the column would stop aligning. */
  box-shadow: inset 0 0 0 1px var(--bdgRing); }
.cp-split li .cp-rk { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim);
  text-align: right; font-variant-numeric: tabular-nums; }
.cp-split li .cp-vl { font-family: var(--font-mono); font-size: 1.12rem; font-weight: 600;
  color: var(--tone); text-align: right; font-variant-numeric: tabular-nums; }
.cp-none { font-size: var(--t-body); color: var(--dim); line-height: 1.55; margin: 0;
  padding: 10px 0 0; max-width: 40ch; }
/* The quality ladder. Sage where it is a win, steel where it carries no
   verdict, red where it is a hole -- no colour added to the vocabulary.

   Elite and Very good used to differ only in the alpha of the same green,
   .18 against .11, which is not a difference anybody can see. The two ends
   are FILLED now and everything between is tinted with a hairline ring, so
   the ladder reads by shape first and colour second.

   Declared bare so the bars down in Every rating inherit the same six tones.
   One ladder, two places, no chance of them drifting apart. */
.cp-t5 { --tone: #6ff0c0; --bdgBg: var(--sage); --bdgFg: #04231a; --bdgRing: transparent; }
.cp-t4 { --tone: var(--sage); --bdgBg: rgba(63, 227, 164, .13); --bdgFg: var(--sage); --bdgRing: rgba(63, 227, 164, .5); }
.cp-t3 { --tone: var(--cyan-ink); --bdgBg: rgba(95, 199, 223, .12); --bdgFg: var(--cyan-ink); --bdgRing: rgba(95, 199, 223, .45); }
.cp-t2 { --tone: #a8bac9; --bdgBg: rgba(147, 164, 179, .12); --bdgFg: #a8bac9; --bdgRing: rgba(147, 164, 179, .4); }
.cp-t1 { --tone: #ff9bac; --bdgBg: rgba(255, 101, 124, .12); --bdgFg: #ff9bac; --bdgRing: rgba(255, 101, 124, .45); }
.cp-t0 { --tone: #ff657c; --bdgBg: #ff657c; --bdgFg: #26060c; --bdgRing: transparent; }
/* -------------------------------------------------- how the real player is doing */
.cp-form { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px;
  background: rgba(13, 21, 29, .5); max-width: 780px; }
.cp-form .cp-figs { margin: 12px 0 0; gap: 22px; }
.cp-formhead { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; margin: 0 0 9px; }
.cp-formhead b { font-family: var(--font-display); font-size: var(--t-base); letter-spacing: .07em;
  text-transform: uppercase; color: var(--cyan-ink); }
.cp-formhead span { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); margin-left: auto; }
/* ---------------------------------------------------------------- quirks */
/* Quirks: a row of icons under the card art, not a grid of captioned cards
   down the page. The old block cost 204px on desktop and 590px on a phone --
   taller than the viewport -- for information secondary to the buy decision.
   Names and descriptions live on the buttons, so they stay in the DOM for
   search and for screen readers; card-page.js reads them into the popover. */
.cp-qrow { margin-top: var(--space-9); }
.cp-qcap { display: block; margin: 0 0 9px; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
/* auto-fill against a floor, not one column per quirk. Forcing every quirk onto
   a single row is fine at six and broken at ten: Aaron Judge has ten, which put
   his tiles at 23px inside a 270px column. The row wraps now, and a tile never
   goes under 40px however many the card carries. */
.cp-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--space-1); }
.cp-qtile { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: var(--space-2);
  border-radius: 9px; border: 1px solid var(--line); background: rgba(13, 21, 29, .7); cursor: pointer;
  transition: border-color .16s ease, background .16s ease; }
.cp-qtile img { width: 100%; height: 100%; object-fit: contain; }
.cp-qini { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cp-qtile:hover, .cp-qtile:focus-visible, .cp-qtile[aria-expanded="true"] {
  border-color: var(--cyan); background: rgba(95, 199, 223, .1); outline: none; }
/* One shared panel, placed by script. Six absolutely-placed popovers is six
   things that can be left open. */
.cp-qpop { position: absolute; z-index: 90; max-width: 280px; padding: 10px 13px 12px; border-radius: 10px;
  border: 1px solid var(--cyan); background: rgba(8, 14, 21, .98); box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease; }
.cp-qpop.is-on { opacity: 1; transform: translateY(0); }
.cp-qpop b { display: block; font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); margin-bottom: 3px; }
.cp-qpop span { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
.cp-quirks { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-3); }
.cp-quirk { border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; background: rgba(13, 21, 29, .55); }
.cp-quirk.has-icon { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.cp-quirk img { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain;
  image-rendering: -webkit-optimize-contrast; }
.cp-quirk b { display: block; font-family: var(--font-display); font-size: var(--t-base);
  letter-spacing: .04em; color: var(--cyan-ink); margin: 0 0 4px; }
.cp-quirk span { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
/* ----------------------------------------------------------------- peers */
.cp-peers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.cp-peer { display: grid; grid-template-columns: 42px minmax(0, 1fr) 70px 96px; gap: 13px;
  align-items: center; padding: 10px 14px; background: var(--field); text-decoration: none; color: inherit; }
.cp-peer:hover { background: rgba(95, 199, 223, .05); }
.cp-peer img { width: 42px; height: auto; border-radius: var(--radius-xs); }
.cp-peer strong { display: block; font-size: var(--t-base); color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-peer small { display: block; font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--dim); margin-top: 2px; }
.cp-peer .cp-pr { font-family: var(--font-mono); font-size: var(--t-small); color: var(--cyan); text-align: right; }
.cp-peer em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-small);
  color: var(--gold); text-align: right; }
.cp-peerhint { font-family: var(--font-body); font-size: var(--t-micro); color: var(--dim); margin: 9px 0 0; }
/* ----------------------------------------------------------- every rating */
.cp-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 28px; }
.cp-attr { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: var(--space-4); align-items: center; }
.cp-attr span { font-size: var(--t-small); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cp-attr b { font-family: var(--font-mono); font-size: var(--t-small); color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums; }
.cp-attr i { grid-column: 1 / -1; display: block; height: 4px; border-radius: var(--radius-pill);
  background: rgba(45, 58, 70, .8); overflow: hidden; margin-top: -3px; }
/* Same six tones as the badges above. The bar used to say only highest /
   lowest / everything else, so a 41 and a 97 were the same colour and every
   card in the game had exactly one green bar and one red one. */
.cp-attr i u { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--tone, var(--cyan)); }
/* Elite and very good are neighbours and a 4px bar has no room for
   fill-versus-outline, so the top tier earns a little light. */
.cp-attr.cp-t5 i u { box-shadow: 0 0 8px rgba(63, 227, 164, .55); }
.cp-attrgroup { margin: 0 0 22px; }
.cp-attrgroup h3 { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 11px; font-weight: 600; }
/* ------------------------------------------------------- rating breakdown */
.cp-bd { display: grid; gap: 5px; margin: 10px 0 0; }
.cp-bdrow { display: grid; grid-template-columns: minmax(0, 1fr) 40px 120px 52px; gap: var(--space-5); align-items: center; }
.cp-bdrow span { font-size: var(--t-small); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cp-bdrow b { font-family: var(--font-mono); font-size: var(--t-small); color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums; }
.cp-bdrow i { display: block; height: 5px; border-radius: var(--radius-pill); background: rgba(45, 58, 70, .7); overflow: hidden; }
.cp-bdrow i u { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--cyan); }
.cp-bdrow em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-small);
  color: var(--cyan); text-align: right; font-variant-numeric: tabular-nums; }
.cp-bdtotal { margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line); }
.cp-bdtotal span { color: var(--ink); white-space: normal; }
.cp-bdtotal em { color: var(--sage); font-size: var(--t-body); }
.cp-disclaim { margin: 38px 0 0; color: var(--dim); font-size: var(--t-small); line-height: 1.55; max-width: 92ch; }
@media (max-width: 900px) {
/* Back to one column, and the art returns below the identity: order:-1 would
     otherwise put a card image above the player's name on a phone. */
.cp-top { grid-template-columns: 1fr; gap: var(--space-10); }
.cp-top > .cp-artbox { order: 0; }
.cp-figsnote { flex-basis: 100%; padding-left: 0; padding-top: var(--space-5);
    border-left: 0; border-top: 1px solid var(--line); }
/* Two across rather than one. At the desktop 168px floor a 303px phone fits a
     single column, which is the stretched-bar shape these chips exist to avoid.
     The art and the label shrink a step to buy the narrower text column room. */
.cp-vxrow { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.cp-vx { grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); padding: 8px 9px 8px 8px; }
.cp-vx img { width: 42px; height: 59px; }
/* Two lines is the norm here, not the exception: 81px of text column wraps
     most series names, so the floor is set rather than left to chance --
     without it a one-line name and a two-line one beside it put their OVR and
     rating at different heights. 11px so the longest name in the catalogue
     ("World Baseball Classic") still lands in two lines instead of clipping. */
.cp-vx b { font-size: var(--t-micro); min-height: 2.5em; }
/* The cap moves from the box to the image. Capping the box squeezed the quirk
     row to 220px and its six tiles to 33px, under the 44px touch floor, while
     the column beside it sat 303px wide and unused. */
.cp-artbox { max-width: none; }
.cp-art { max-width: 220px; margin: 0 auto; }
.cp-art-empty { max-width: 220px; margin: 0 auto; }
.cp-split { grid-template-columns: 1fr; gap: 22px; }
.cp-peer { grid-template-columns: 38px minmax(0, 1fr) 88px; }
.cp-peer .cp-pr { display: none; }
/* One line is a desktop luxury. At 281px "Avoiding home runs" plus its badge
     needs 188px and has 173, so the badge drops under the label rather than
     the label losing its last two words. The rank stays -- it is the point. */
.cp-lbl { flex-wrap: wrap; row-gap: var(--space-1); }
.cp-lbl .cp-nm { white-space: normal; overflow: visible; }
.cp-split li { align-items: center; }
/* The bar is the least load-bearing column; the number is right beside it. */
.cp-bdrow { grid-template-columns: minmax(0, 1fr) 40px 52px; }
.cp-bdrow i { display: none; }
}
/* end v717-card-page */
/* ---------------------------------------------------------------------------
   v718 Say when the catalog is short.

   The marketplace serves the card list in ~140 pages and some can fail. Until
   now the app carried on with whatever arrived: the Card Database showed a
   confident total, and a search for a player on a missing page returned
   unrelated cards rather than nothing. Both now say what is actually going on.

   Gold, not red: a catalog still filling in is a wait, not a fault. Red is
   reserved for something the reader has to act on.
   --------------------------------------------------------------------------- */
/* end v718-partial-catalog */
/* v719-daily-pulse-landed -----------------------------------------------------
   The board only ever looked forward, so between drops it printed the same
   Friday countdown for days while a Takeover went live. It now reports
   backwards first: a LANDED group above ON DECK, sharing the same grid so the
   two read as one timeline rather than two widgets.

   Colour keeps its one meaning: mint is live-and-grindable, so it marks the
   day something landed, and gold stays reserved for what is coming next.
   --------------------------------------------------------------------------- */
/* The second label needs to separate the groups; the first must not push the
   list away from the copy above it. */
/* The group divider is that border-top. Without this the last row of the
   LANDED group keeps its own bottom rule and the seam draws twice. */
.dp-od-row:has(+ .dp-ondeck-lab) { border-bottom: 0; }
/* Landed rows carry links where on-deck rows carry a time note, so the <u>
   slot has to survive being clickable and has to wrap under the title on a
   narrow column instead of squeezing it. */
/* The quiet-day angle: shown only when nothing landed, so the board still reads
   differently tomorrow. One line, clearly secondary to the schedule above it. */
@media (max-width: 760px) {
/* Stacked rows lose the date column, so the links need their own line rather
     than trailing a title that already wrapped. */
}
/* end v719-daily-pulse-landed */
/* ---------------------------------------------------------------------------
   v728 The Advisor's quirk chips finally have icons.

   The class has been called .quirk-icon-chip since it was written and has
   never carried one: normalizedQuirks() in app.js rebuilt each quirk from
   name/type/description and dropped the img The Show ships with every official
   quirk. The Card Database and Squad Fit Builder both show them; this was the
   last of the three that did not.

   Only the chips that HAVE an icon change shape. Quirks we infer ourselves
   have no icon, keep their centred text, and stay visibly different -- which
   is the honest signal that they are our read and not the game's.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
/* The icon is the part that survives the squeeze -- it is recognisable at a
     glance where six words of quirk name are not. */
}
/* And the strip has to be on screen for any of that to matter.

   An older blanket rule hides .quirk-strip, .performance-panel,
   .collection-cost-panel and .attribute-grid on the decision-context layout.
   When the tabbed card-command view was built, .attribute-grid was explicitly
   restored inside .command-tab-panel -- and the quirk strip, which renders
   into that very same Attributes panel, was not. So it has been generated,
   placed, and hidden ever since: quirks appeared nowhere on the Advisor.

   Scoped exactly like the .attribute-grid rule it sits beside, so the blanket
   hide still applies everywhere it was meant to. */
.advisor-page .command-tab-panel .quirk-strip,
.advisor-page .results.has-decision-context .command-tab-panel .quirk-strip {
  display: block;
}
/* end v728-advisor-quirk-icons */
/* ---------------------------------------------------------------------------
   v730 One hero triad, three pages.

   Pulse Rankings, the Card Database and Market Pulse each carried their own
   copy of the same twenty-five rules -- same grid, same 150px sides and 192px
   centre, same 7s/6s/8s float, same drop shadow, same type. The only real
   differences were the two glow colours behind the cards and which accent each
   of the three slots takes. Everything else was a prefix rename, down to
   identical keyframes under three names.

   Three copies is where drift starts: a fix to one is a fix to one. So the
   shape and the motion live here once, and a page supplies only its colours.

   WHAT IS NOT SHARED, on purpose:
     - the stat band. Rankings uses .pr-stat -- four uniform cyan figures with
       no dividers; the other two use a two-column band with a lead figure and
       per-cell colour. Those are different components that happen to sit under
       the same picture.
     - Rankings' value carries a Pulse mark glyph, so it stays an inline-flex
       row there. That override follows this block.

   Colour still means one thing each: sage a market win, gold price, cyan the
   model's number, red the alert. Which slot takes which is the page's call --
   the Database's middle card is the best in the pool (cyan), Market Pulse's is
   the hottest (red).
   --------------------------------------------------------------------------- */
.dp-triad {
  /* Overridden per page. Defaults are the Card Database's, being the first
     of the three to ship this hero. */
  --dp-glow-a: rgba(95, 199, 223, .16);
  --dp-glow-b: rgba(241, 184, 75, .12);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-9);
  align-items: end;
  justify-items: center;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
@keyframes dpStageDrift {
  0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .55; }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: .85; }
}
.dp-triad::before {
  content: "";
  position: absolute;
  inset: -14% -8% -6%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(58% 62% at 50% 44%, var(--dp-glow-a), transparent 68%),
              radial-gradient(38% 44% at 78% 26%, var(--dp-glow-b), transparent 70%);
  -webkit-mask: radial-gradient(130% 100% at 50% 48%, #000 46%, transparent 84%);
  mask: radial-gradient(130% 100% at 50% 48%, #000 46%, transparent 84%);
  animation: dpStageDrift 14s ease-in-out infinite;
}
.dp-slot {
  /* --dp-accent paints the pill and the figure. Only Market Pulse's hot slot
     needs them apart: a red pill wants dark ink on it, but red TEXT on this
     background has to lift to stay readable, so --dp-ink can be set alone. */
  --dp-accent: var(--cyan);
  --dp-ink: var(--dp-accent);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  text-decoration: none;
}
.dp-lift { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 56%; }
.dp-cat {
  display: inline-flex;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  margin: 0 0 9px;
  white-space: nowrap;
  color: #05090e;
  max-width: 100%;
  background: var(--dp-accent);
}
.dp-cd { position: relative; display: block; width: 150px; transition: transform .2s; }
/* The middle card is the argument; the two beside it are the comparison. */
.dp-slot.is-centre .dp-cd { width: 192px; }
.dp-cd img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.dp-slot:hover .dp-cd, .dp-slot:focus-visible .dp-cd { transform: translateY(-5px); }
/* Three different periods so the row never pulses in unison, which reads as a
   loading state rather than as depth. */
@keyframes dpFloatL { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(10px); } }
@keyframes dpFloatC { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-12px); } }
@keyframes dpFloatR { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-9px); } }
.dp-slot.is-left .dp-lift { animation: dpFloatL 7s ease-in-out infinite; }
.dp-slot.is-centre .dp-lift { animation: dpFloatC 6s ease-in-out infinite; }
.dp-slot.is-right .dp-lift { animation: dpFloatR 8s ease-in-out infinite; }
.dp-slot:hover .dp-lift { animation-play-state: paused; }
.dp-val {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  margin: 11px 0 1px;
  max-width: 100%;
  color: var(--dp-ink);
}
.dp-who {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* ---- the four accents a slot can take ---- */
.dp-slot.dp-sage { --dp-accent: var(--sage); }
.dp-slot.dp-cyan { --dp-accent: var(--cyan); }
.dp-slot.dp-gold { --dp-accent: var(--gold); }
.dp-slot.dp-red  { --dp-accent: var(--red); --dp-ink: #ff9bac; }
/* ---- per-page glow ---- */
.rankings-page .dp-triad { --dp-glow-a: rgba(95, 199, 223, .16); --dp-glow-b: rgba(255, 85, 116, .12); }
.database-page .dp-triad { --dp-glow-a: rgba(95, 199, 223, .16); --dp-glow-b: rgba(241, 184, 75, .12); }
.market-page   .dp-triad { --dp-glow-a: rgba(255, 101, 124, .14); --dp-glow-b: rgba(241, 184, 75, .12); }
/* Rankings' figure carries a Pulse mark, so it is a row rather than a block --
   and a flex child of a column needs telling to stay centred once it is. */
.rankings-page .dp-val .pulse-mark { color: inherit; }
@media (max-width: 900px) {
/* Desktop only, on all three: on a phone the triad pushes the thing the page
     is actually for a full screen down. */
.dp-triad { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.dp-slot .dp-lift, .dp-triad::before { animation: none !important; }
/* The rotation is the composition, not the motion -- keep it. */
.dp-slot.is-left .dp-lift { transform: rotate(-6deg); }
.dp-slot.is-right .dp-lift { transform: rotate(7deg); }
}
/* end v730-shared-hero-triad */
/* v733-landed-reward ----------------------------------------------------------
   The catalog tells us what a program pays out ("Earn Tarik Skubal!"), which is
   the reason to click the row. It sits in the link slot, so it has to escape
   .dp-od-item b -- that rule sizes the row TITLE, and inheriting it would make
   the reward compete with the thing it describes.

   Mint, because it is a reward you can go and grind.
   --------------------------------------------------------------------------- */
.dp-od-item u .dp-od-reward { font-family: var(--font-display); font-size: var(--t-body);
  font-weight: 700; color: var(--sage); margin-right: var(--space-1); }
/* end v733-landed-reward */
/* ---------------------------------------------------------------------------
   v734 Roster Command, converted.

   The page was three tabs -- Hot / Neutral / Cold -- over every Live card,
   ranked by an internal score. It now answers the only two questions a roster
   update raises: what to buy before it rises, what to sell before it drops.

   The hero is the shared dp-triad from v730 -- its first use on a page that
   was not one of the three it was extracted from, which is the whole point of
   having extracted it.

   Colour keeps its meanings: sage a card gaining, red a card losing, gold
   price, cyan our figure, dim a caption.
   --------------------------------------------------------------------------- */
.rc-herocopy { min-width: 0; }
/* No font-family: inherits Inter from the shared tool hero, like every other
   converted page. A local condensed clamp renders at 30px against the site's 54. */
/* ---- the move: the one figure this page exists to show ---- */
.rc-move.up .to { color: var(--sage); }
.rc-move.dn .to { color: var(--red); }
.rc-move.up .rc-delta { background: var(--sage); color: #04231a; }
.rc-move.dn .rc-delta { background: var(--red); color: #26060c; }
/* ---- two calls ---- */
/* Card art is 5:7. Declaring the ratio reserves the row's height before the
   image arrives -- without it every row grows as art loads and shoves the list
   down under the reader, the same reflow the Market Pulse board was cured of. */
/* 15px of text, 40px of thumb. Grown with a pseudo so the tap target does not
   push the line around. */
@media (max-width: 1271px) {
/* Not 900px: minmax(540px, auto) holds the triad column until the shell
     hits its own 1240px cap, squeezing .rc-herocopy otherwise. */
}
@media (max-width: 900px) {
/* At this width the right-hand figures leave a name about 109px and
     "Vladimir Guerrero Jr." wants 130. Let it wrap rather than lose its last
     word -- the row gets taller, nothing gets hidden. */
}
/* end v734-roster-command */
/* end v734-roster-command-sec */
/* ---------------------------------------------------------------------------
   v736 Roster Command, the dock.

   Three faults, one cause each, all from the v734 conversion rather than the
   design:

   1. The page rendered at half width. The converted markup was still inside
      #rosterCommandBuckets -> .command-buckets, a repeat(2, minmax(0,1fr))
      grid from the pre-Broadcast design, so .rc-calls landed in the first of
      two columns and the right half of the screen was an empty grid cell.
   2. It sat in the old panel. <section class="roster-command-center"> is a
      green border over a green-to-red gradient. It was never taken off.
   3. It reached for the bottom of the type scale everywhere. The section head
      was --t-small (12px) where --t-title (26px) is the step meant for it, and
      row names were --t-body (13px) where --t-base (15px) is the DEFAULT body
      step. Almost none of this needed new sizes; it needed the steps that
      already existed.

   The shape is now the Pulse Rankings shape: the question is a sort bar, one
   full-width board answers it, a sticky rail explains the row you picked. That
   reads twenty-five cards where two boxes read six, and it fills the page by
   construction because there is no second column left to empty.

   v734's .rc-calls / .rc-col / .rc-pick / .rc-chead / .rc-csub are no longer
   rendered. They are left in place because this stylesheet is append-only, and
   because .rc-move / .rc-delta / .rc-why / .rc-fold above are still live.
   --------------------------------------------------------------------------- */
/* ---- section head: the h2 is a title again, not a caption ---- */
/* ---- the sorts: what used to be two boxes ---- */
.rc-sort { flex: 1 1 0; min-width: 170px; text-align: left; padding: 15px 18px 15px 0;
  background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer; color: var(--muted); }
/* Sage for the buying tab, red for the selling tab: the same two meanings the
   rows use, so the header agrees with what is under it. */
/* ---- the dock ---- */
.rc-boardcol { min-width: 0; }
/* 5:7 declared so the row reserves its height before the art arrives. Without
   it every row grows as images load and shoves the list down under the reader. */
.rc-who { min-width: 0; }
/* The move is the one number a row exists for, so it is the loudest thing in it. */
/* ---- the rail ---- */
/* Three figures set as stat cells: numerals on one baseline, labels on another,
   so the alignment is structural rather than eyeballed. Same reason the Pulse
   Rankings inspector head is a two-row grid. */
.rc-rail-fig b.gold { color: var(--gold); }
.rc-go { display: inline-block; margin-top: 15px; font-family: var(--font-display); font-size: var(--t-base);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.rc-go:hover { text-decoration: underline; }
/* The locked preview is blurred and aria-hidden, so it must not be clickable
   either -- otherwise a signed-out reader can pick rows they cannot read and
   drive the rail with them. */
@media (max-width: 640px) {
.rc-sort { min-width: 140px; padding-right: var(--space-5); }
/* At this width the figures leave a name about 110px and "Vladimir Guerrero
     Jr." wants 130. Let it wrap rather than lose its last word. */
/* Price drops to its own line rather than squeezing the name off the row. */
}
/* end v736-roster-dock */
/* The site nav has been 0.88rem (14.08px) since launch, which is under the
   scale's own default body step and reads small against a 335px logo. */
.site-nav a,
.site-nav button { font-size: var(--t-base); }
/* end v736-nav-type */
/* ---------------------------------------------------------------------------
   v737 Roster Command, the update banner.

   #rosterStateNotice has been in the markup since before the conversion but
   nothing has populated it since v734 dropped lab-pages.js. Restoring it
   surfaced the bigger fault behind it: the status it keys off was computed
   from a hardcoded 2026-06-26 date while The Show had shipped eighteen
   updates, so "live-window" was unreachable and the banner could never have
   fired again regardless. The date now comes from The Show's roster_updates
   feed.

   The element inherited .notice-banner, which is a blue-tinted legacy panel.
   Blue is not in the Broadcast vocabulary, so it gets the page's own colours:
   gold while an update is landing, because that is the state where acting on a
   half-settled rating costs money, and cyan for the merely informational
   states. It is a rule and a tint rather than a filled box for the same reason
   the rest of the page stopped being panels.
   --------------------------------------------------------------------------- */
/* Landing right now: the one state on this page worth interrupting for. */
/* end v737-roster-update-banner */
/* ---------------------------------------------------------------------------
   v738 The shared hero glow stops widening the page.

   .dp-triad::before is inset -14% -8% -6%. On a 640px triad the -8% is about
   51px of glow past each side, and the triad sits near the right edge of a
   1240px shell -- so between roughly 1240px and 1340px of viewport the glow
   lands outside the document and the page scrolls sideways by 9-11px.

   It is animated (dpStageDrift, 14s), so the overshoot is not even constant:
   the horizontal scrollbar appears and disappears on its own over the cycle,
   which is why this reads as the page twitching rather than as a layout bug.

   overflow-x: clip rather than hidden, deliberately. hidden would make the
   triad a scroll container and kill position: sticky on the Pulse Rankings
   inspector and the Roster Command rail; clip does not. Pairing clip on one
   axis with visible on the other is exactly what clip exists for, so the glow
   still spills above and below the cards -- only the horizontal spill that
   nobody can see anyway is cut.

   One line in the shared component fixes Card Database, Market Pulse, Pulse
   Rankings and Roster Command at once, which is the argument for having
   extracted it in v730.
   --------------------------------------------------------------------------- */
.dp-triad {
  overflow-x: clip;
  overflow-y: visible;
}
/* end v738-triad-overflow */
/* ---------------------------------------------------------------------------
   v740 The header sticks; the floating rail goes.

   The quick-nav rail existed for one reason: .site-header is position:
   relative, so it scrolls away and there is no navigation deep in a long page.
   Making the header sticky removes that reason, and removes with it a fixed
   control that -- however it was positioned -- always sat on top of something.

   Three things had to be true first.

   1. Sticky did not work below 640px. .tool-page carries overflow-x: hidden
      there, and overflow-x: hidden with overflow-y: visible computes the y axis
      to auto, which makes the element a scroll container and takes the header
      out of the viewport's sticky context. Measured: at 390px and 640px the
      header scrolled to -1188px instead of sticking. overflow-x: clip does the
      same visual job without creating a scroll container. Same fix as v738 on
      the triad, same reason.

   2. The header background is transparent, so content would have scrolled
      straight through it. It now takes a background only once it is stuck --
      at the top of the page the hero still reads as one piece.

   3. A 112px header pinned to the top costs 13% of a desktop viewport and 11%
      of a phone's, on every page, forever. That is a worse trade than the
      corner the rail occupied. So the stuck state is CONDENSED: the logo drops
      to 40px and the padding tightens, which lands the pinned bar at about
      56px on desktop and 48px on a phone -- roughly half the cost of the
      header it replaces, and less than the rail's own footprint.

   A sticky header also breaks in-page anchors, which land under it. Every jump
   on the site -- the card page's "see all ratings", the advisor's #advisor --
   goes through the browser's scroll anchoring, so scroll-padding-top on the
   root fixes all of them at once.

   The two bottom gutters (v666, v739) existed only to keep the floating rail
   off the last row. With no rail, they are dead weight on every page, so the
   shell goes back to its own padding.
   --------------------------------------------------------------------------- */
/* 1. Sticky needs an ancestor that is not a scroll container. */
@media (max-width: 640px) {
.tool-page { overflow-x: clip; }
}
/* 2 + 3. The header itself. */
.site-header {
  position: sticky;
  top: 0;
  transition: min-height 160ms ease, padding 160ms ease, background-color 160ms ease;
}
.site-header.is-stuck {
  min-height: 0;
  padding: 6px 0 6px;
  background: rgba(6, 11, 17, .93);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
}
/* The logo is the whole height of this bar, so condensing it is what condenses
   the header. object-fit: contain means it just gets smaller, not cropped. */
.site-header.is-stuck .brand-logo {
  height: 40px;
  filter: drop-shadow(0 0 12px rgba(95, 199, 223, .38));
  transition: height 160ms ease;
}
/* The hairline sits on the header's own edge once there is a background under
   it, rather than floating 6px below into the content. */
.site-header.is-stuck::after { bottom: 0; }
@media (max-width: 900px) {
.site-header.is-stuck { padding: 5px 0; }
.site-header.is-stuck .brand-logo { height: 34px; }
}
/* Anchors must not land under the pinned bar. Measured stuck heights are 64px
   at <=900 and 66-69px above it (the nav pill and the CTA set the floor, not
   the logo), so these are the measured height plus ~12px of breathing room.
   The first pass used 58/68 -- derived from the intended height rather than the
   real one -- and put the target 6px UNDER the bar on a phone. */
html { scroll-padding-top: 82px; }
@media (max-width: 900px) {
html { scroll-padding-top: 76px; }
}
/* 4. The rail is gone. nav.js no longer injects it; this is here so a cached
   copy of the old nav.js mid-rollout cannot put a floating button back on top
   of the content the header was made sticky to replace. */
.quick-nav-rail { display: none !important; }
/* end v740-sticky-header */
/* ---------------------------------------------------------------------------
   v742 Back to top, in the condensed bar.

   The quick-nav rail's panel carried a "Top / Back to start" link and v740
   removed it with the rail, which left a 2,400px page with no way back up but
   scrolling. It returns as part of the header rather than as a floating
   button, because a floating button parked over the content is exactly what
   v740 was for.

   It appears only while the header is stuck. At the top of the page there is
   nothing to go back to, and a control that does nothing when you press it is
   worse than no control at all.

   Paying for the space: at 390px the header children already span the full
   width. The logo is width: clamp(240px, 24vw, 335px) with object-fit:
   contain, so once the stuck state drops its height to 34px the element still
   reserves ~193px of box for an image drawn about 124px wide. Setting width to
   auto in the stuck state gives the box back its real size and frees roughly
   70px -- more than this control needs, so nothing else has to move.
   --------------------------------------------------------------------------- */
/* The logo reserves only what it draws once condensed. */
.site-header.is-stuck .brand-logo { width: auto; }
/* Out of the grid, not in it. The header's template changes at three
   breakpoints -- four columns, then two -- and grid-auto-flow fills them
   differently at each, so an appended child auto-placed onto a SECOND ROW and
   took the condensed bar from 66px back up to 111px. Any explicit cell I could
   name would be right at one breakpoint and wrong at another.

   Absolute positioning sidesteps the template completely, and the space is
   reserved with padding-right on the header instead. Padding shrinks the grid's
   content box, so every column moves left and makes room, while the padding BOX
   -- which is what an absolutely positioned child and .site-nav's left: 50%
   centring both resolve against -- is unchanged. So the nav stays centred and
   nothing else moves. */
.site-header.is-stuck { padding-right: 74px; }
.header-top {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border: 1px solid rgba(95, 199, 223, .32);
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 22, .8);
  color: var(--cyan);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.header-top::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.header-top::after { content: ""; position: absolute; inset: -8px -6px; }
.header-top span { font-size: 1.05em; line-height: 1; }
.header-top b { font-weight: inherit; }
.header-top:hover,
.header-top:focus-visible {
  border-color: rgba(95, 199, 223, .6);
  color: var(--cyan-ink);
}
.site-header.is-stuck .header-top { display: inline-flex; }
/* On a phone the word is the first thing to go -- the arrow carries it, and
   the button keeps its 44px target through the pseudo-element above. */
@media (max-width: 640px) {
.site-header.is-stuck { padding-right: 42px; }
.header-top { padding: 7px 10px; }
.header-top b { display: none; }
}
/* end v742-header-top */
/* ---------------------------------------------------------------------------
   v746 Market history on the page.

   The site has only ever shown one instant per card: the current top of book.
   The nightly sweep records the daily close and what the card actually sold
   for, and these are the two places that read it back -- Option A on the
   Market Pulse board, Option B on the card page.

   Colour keeps its meanings. Sage is a rise, red is a fall, gold is price,
   dim is a caption. A move under a point either way is deliberately NEITHER
   sage nor red: on a marketplace that is noise, and colouring it would put a
   verdict on every row in the list.
   --------------------------------------------------------------------------- */
/* ---- Option A: one column on the board ---- */
/* The gap line sits under the name, inside the name cell, so it cannot widen
   the row or push a column off the end. */
@media (max-width: 900px) {
/* Sell now / Buy now are already hidden here, so the 24h column takes their
     place rather than adding to the row. */
}
/* ---- Option B: the fuller read on the card page ---- */
.cpm { border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(8, 14, 22, .6);
  padding: 18px 20px; margin: 14px 0 0; max-width: 760px; }
/* Numerals on one row, labels on the next: a two-line label under a big
   numeral drags the numeral off its baseline if they share a flex line. */
.cpm-figs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  column-gap: 30px; row-gap: var(--space-2); align-items: baseline;
  padding-bottom: 15px; margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.cpm-figs b { grid-row: 1; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  line-height: 1; color: var(--ink); }
.cpm-figs b.gold { color: var(--gold); }
.cpm-figs b.up { color: var(--sage); }
.cpm-figs b.dn { color: var(--red); }
.cpm-figs b.flat { color: var(--muted); }
.cpm-figs small { grid-row: 2; font-family: var(--font-display); font-size: var(--t-small);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.cpm-say { font-size: var(--t-base); color: var(--muted); line-height: 1.6; margin: 0; }
.cpm-say b { color: var(--ink); font-weight: 600; }
.cpm-liq { font-family: var(--font-mono); font-size: var(--t-body); color: var(--dim); }
@media (max-width: 640px) {
/* Four stat cells want ~520px. Two rows of two keeps every numeral on a
     baseline with its own label. */
.cpm-figs { grid-template-columns: repeat(2, auto); column-gap: 34px; row-gap: var(--space-1); }
.cpm-figs b { font-size: 1.35rem; }
.cpm-figs b:nth-of-type(1), .cpm-figs b:nth-of-type(2) { grid-row: 1; }
.cpm-figs small:nth-of-type(1), .cpm-figs small:nth-of-type(2) { grid-row: 2; }
.cpm-figs b:nth-of-type(3), .cpm-figs b:nth-of-type(4) { grid-row: 3; }
.cpm-figs small:nth-of-type(3), .cpm-figs small:nth-of-type(4) { grid-row: 4; }
}
/* end v746-market-history-ui */
/* ---------------------------------------------------------------------------
   v747 Flip Finder, converted.

   The page was five tabs (Best flips / Low risk / Budget / High profit / Trap
   watch) over a five-option sort, ranking on paper spread. It is now the Pulse
   Rankings shape -- three sorts over one board, with a rail that prices the
   whole trade -- and the ranking is what a flip earns per day your stubs are
   tied up.

   Colour keeps its meanings: sage is money you make, gold is a price you pay,
   red is the alert, cyan is ours and interactive, dim is a caption. Red is used
   for exactly one thing on this page: a card whose price is falling underneath
   the flip.
   --------------------------------------------------------------------------- */
/* ---- hero: the shared triad's fifth page, used unchanged ---- */
.ff-herocopy { min-width: 0; }
/* ---- the sorts ---- */
.ff-sort { flex: 1 1 0; min-width: 172px; text-align: left; padding: 15px 18px 15px 0; background: none;
  border: 0; border-right: 1px solid var(--line); cursor: pointer; color: var(--muted); }
/* ---- controls. The margin floor is a CONTROL, not a hidden rule: without one
   the ranking promotes a 6% margin that a single undercut erases, and the
   reader should be able to see the rule and change it. ---- */
/* ---- board and rail ---- */
.ff-boardcol { min-width: 0; }
/* 5:7 declared so the row reserves its height before the art arrives. */
.ff-who { min-width: 0; }
/* The sorted number is the loud one: a board sorted by a figure it whispers is
   a board you cannot read. */
/* A falling card's return is no longer money in the bank, so it stops being
   sage. Gold, not red: the number is still real, it is the exit that is at risk. */
.ff-more { display: block; width: 100%; margin-top: var(--space-6); padding: 13px; background: none;
  border: 1px dashed var(--line); border-radius: 10px; color: var(--cyan); cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-base); letter-spacing: .06em; text-transform: uppercase; }
.ff-more small { display: block; font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0; text-transform: none; color: var(--dim); margin-top: var(--space-1); }
.ff-go { display: inline-block; margin-top: var(--space-5); font-family: var(--font-display); font-size: var(--t-base);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.ff-go:hover { text-decoration: underline; }
/* ---- folds ---- */
/* The designed locked row: a shape where the figures would be, not blurred
   data. v564 replaced full-page blur with this, and the reason holds -- blurred
   real numbers are still published numbers, and they read as broken. */
.ff-row.is-locked .ff-bar-a { width: 62%; }
.ff-row.is-locked .ff-bar-b { width: 38%; height: 7px; margin-top: 7px; }
.ff-row.is-locked .ff-bar-c { width: 74px; margin-left: auto; }
.ff-row.is-locked .ff-bar-d { width: 92px; height: 13px; margin-left: auto; }
@media (max-width: 1271px) {
/* Hero is desktop only, as on the other four pages carrying the triad.
     Not 900px: minmax(540px, auto) holds the triad column until the shell
     hits its own 1240px cap, squeezing .ff-herocopy otherwise. */
}
@media (max-width: 640px) {
.ff-sort { min-width: 140px; padding-right: var(--space-5); }
/* Every cell placed explicitly. Left to auto-placement the per-day figure --
     the number the board is SORTED BY -- landed in the 44px art column, where
     51px of text wrapped and pushed the row to 214px tall. Art on the left
     spanning three lines; name, speed and money stacked beside it. */
}
/* end v747-flip-finder */
/* ---------------------------------------------------------------------------
   v748-account: account, pricing and billing become one page.

   They were the same page asked at three moments -- who am I, what do I get,
   how do I change it -- and billing.html was 86 lines that said "manage it
   from your profile menu". pricing.html and billing.html now redirect here.

   Two things this page had that no other converted page had: no imagery and
   no figures. It was the only Broadcast-era page leading with a wall of text,
   which is exactly why it read flat beside Pulse Rankings. It now leads with
   the shared .dp-triad and a figure band, like the other five.
   --------------------------------------------------------------------------- */
/* ---- hero ---- */
.account-page .ac-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 660px);
  gap: 34px;
  align-items: center;
}
.account-page .ac-hero .hero-copy > p:not(.eyebrow) {
  max-width: 68ch;
  font-size: var(--t-base);
  line-height: 1.55;
}
.account-page .ac-band:empty { display: none; }
.account-page .ac-band b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}
.account-page .ac-band div.sage b { color: var(--sage); }
.account-page .ac-band div.gold b { color: var(--gold); }
.account-page .ac-band div.steel b { color: var(--steel); }
/* The status line, as on Roster Command and Flip Finder: what was read, when,
   and how much it moves. Body type -- set in mono across the full shell this
   ran to 107 characters a line, about 40 past where a line stays trackable. */
.account-page .ac-status:empty { display: none; }
.account-page .ac-status b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--muted);
}
/* ---- section head, the Pulse Rankings shape ---- */
.account-page .ac-sec {
  display: flex;
  align-items: baseline;
  gap: 13px;
  flex-wrap: wrap;
  margin: 34px 0 0;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.account-page .ac-sec h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}
.account-page .ac-sec em {
  font-style: normal;
  font-size: var(--t-base);
  color: var(--dim);
}
.account-page .ac-sec .ct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  color: var(--dim);
}
/* ---- the price band (the Red Diamond Pro plan card) ---- */
.account-page .ac-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  margin-top: 26px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 70, 104, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 70, 104, 0.1), transparent 46%),
    rgba(8, 14, 22, 0.66);
}
.account-page .ac-price-fig {
  margin: 0;
  font-family: var(--font-display);
}
.account-page .ac-price-fig b {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.account-page .ac-price-fig small {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  letter-spacing: 0;
  color: var(--dim);
}
.account-page .ac-price-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-page .ac-price-list li {
  position: relative;
  padding-left: 17px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}
.account-page .ac-price-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--sage);
}
.account-page .ac-price-alt {
  display: block;
  margin-top: 11px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}
/* ---- where you stand ---- */
.account-page .ac-now .current-tier-marker,
.account-page .ac-price .current-tier-marker,
.account-page .ac-now .included-tier-marker,
.account-page .ac-price .included-tier-marker {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(63, 227, 164, 0.16);
  color: var(--sage);
}
/* ---- the comparison board ----
   Two feature cards made you read both and diff them yourself. One board
   answers "what changes if I pay" in a single pass.

   62/19/19 rather than a full-width label column: left to fill the shell the
   ticks sat 853px from the words they answered, and the eye loses the row on
   the way across. */
.account-page .ac-cmp {
  width: 100%;
  border-collapse: collapse;
}
.account-page .ac-cmp th,
.account-page .ac-cmp td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(45, 58, 70, 0.55);
  font-size: var(--t-base);
  text-align: left;
}
.account-page .ac-cmp th:first-child,
.account-page .ac-cmp td:first-child { width: 62%; }
.account-page .ac-cmp thead th {
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--dim);
}
.account-page .ac-cmp thead th.col {
  width: 19%;
  text-align: center;
}
.account-page .ac-cmp td b {
  color: var(--ink);
  font-weight: 600;
}
.account-page .ac-cmp td span {
  display: block;
  margin-top: 3px;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--muted);
}
.account-page .ac-cmp td.y,
.account-page .ac-cmp td.n,
.account-page .ac-cmp td.part {
  font-family: var(--font-mono);
  text-align: center;
}
.account-page .ac-cmp td.y { color: var(--sage); }
.account-page .ac-cmp td.n { color: var(--steel); }
.account-page .ac-cmp td.part { font-size: var(--t-body); color: var(--gold); }
.account-page .ac-cmp tr.is-new td:first-child b::after {
  content: "New";
  margin-left: 9px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  vertical-align: 1px;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(95, 199, 223, 0.16);
  color: var(--cyan);
}
/* Even at a 62% label column there is ~500px to the tick. Rows are ruled, but
   a hover tint is what actually holds the eye on the line being read. */
.account-page .ac-cmp tbody tr:hover td { background: rgba(238, 244, 248, 0.035); }
/* The column you are actually in. Cyan, because on this site cyan means
   yours -- account.js sets data-current-plan on #membershipPlan. */
.account-page #membershipPlan[data-current-plan="free"] .ac-cmp [data-plan-col="free"],
.account-page #membershipPlan[data-current-plan="red_diamond_pro"] .ac-cmp [data-plan-col="red_diamond_pro"] {
  color: var(--cyan);
  border-bottom-color: rgba(95, 199, 223, 0.5);
}
.account-page #membershipPlan[data-current-plan="free"] .ac-cmp [data-plan-col="free"]::after,
.account-page #membershipPlan[data-current-plan="red_diamond_pro"] .ac-cmp [data-plan-col="red_diamond_pro"]::after {
  content: "You";
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  opacity: 0.8;
}
/* ---- billing + settings rows ---- */
.account-page .ac-rows { border-top: 1px solid var(--line); }
.account-page .ac-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  justify-content: start;
  column-gap: 44px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(45, 58, 70, 0.5);
}
.account-page .ac-rows strong {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}
.account-page .ac-rows em {
  display: block;
  margin-top: var(--space-1);
  font-style: normal;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}
/* These were 14px tall, and on a phone they ARE the page: Update in Stripe,
   See invoices, Cancel. A 14px target for "Cancel" gets mis-tapped. */
.account-page .ac-rows a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cyan);
}
/* The triad is desktop-only on all five shipped pages: three cards cannot
   hold their art or their captions in a phone column. The band stays -- on a
   phone the price and the free allowance are what is worth leading with. */
/* v922: stays at 980 (not the folded 900) -- Jason kept the one-column Account/Pricing hero from 980 down, 2026-09-02. */
@media (max-width: 980px) {
.account-page .ac-hero { grid-template-columns: 1fr; gap: 26px; }
.account-page #accountTriad { display: none; }
.account-page .ac-price { grid-template-columns: 1fr; gap: var(--space-9); }
.account-page .ac-price-alt { text-align: left; }
}
@media (max-width: 1100px) {
.account-page .ac-cmp th:first-child,
  .account-page .ac-cmp td:first-child { width: auto; }
.account-page .ac-rows > div { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-7); }
}
@media (max-width: 640px) {
.account-page .ac-cmp th,
  .account-page .ac-cmp td { padding: 12px 8px; }
.account-page .ac-cmp th:first-child,
  .account-page .ac-cmp td:first-child { padding-left: 0; }
.account-page .ac-cmp thead th.col { width: 62px; font-size: var(--t-micro); }
.account-page .ac-rows > div { grid-template-columns: 1fr; gap: 9px; }
.account-page .ac-rows a { justify-self: start; }
}
@media (max-width: 430px) {
.account-page .ac-cmp thead th.col { width: 44px; }
.account-page .ac-cmp th,
  .account-page .ac-cmp td { padding: 12px 5px; }
.account-page .ac-cmp td.part { font-size: var(--t-micro); }
}
/* end v748-account */
/* ---------------------------------------------------------------------------
   v750-account-plans: the plan section was still wearing the old ladder.

   .membership-tier-ladder sets grid-template-columns
   minmax(260px, 0.7fr) minmax(560px, 1.35fr) -- the two-column frame the old
   pair of tier cards sat in. The v748 markup is a stack, so that grid squeezed
   the price band into a 260px column: every bullet broke to one word a line
   and the CTA landed on top of its own footnote.

   Same shape as the Roster Command bug -- new markup, legacy layout class
   still attached. The class is gone; the two things it usefully carried
   (the min-width reset and the panel frame) are restated here.
   --------------------------------------------------------------------------- */
/* The reset the ladder was carrying: without min-width 0 a grid or flex child
   refuses to shrink below its longest word. */
.account-plans * { box-sizing: border-box; min-width: 0; }
/* end v750-account-plans */
/* ---------------------------------------------------------------------------
   v752-account-hero-signedin: the hero collapsed for the people who pay.

   .account-page.is-member-signed-in .account-hero sets
   grid-template-columns: minmax(0, 1fr) -- a single column, written for the
   old signed-in hero, which had no card stage in it. The v748 hero is the
   same shape in both states, and the triad is the point of it, so a
   signed-out visitor got the two-column hero while a signed-in member got the
   copy full-width with the cards dumped underneath and a dead right half.

   It beat .account-page .ac-hero on specificity (3 classes to 2), which is
   also why every check I ran missed it: I verified signed out.
   --------------------------------------------------------------------------- */
.account-page.is-member-signed-in .ac-hero {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 660px);
  padding: 0;
}
/* end v752-account-hero-signedin */
/* ---------------------------------------------------------------------------
   v754-account-match: make the page the mockup.

   Measured against _mockup-account-final.html rather than eyeballed. Three
   things differed, and all three were chrome I inherited or added:

     1. .tool-hero wraps the hero in a bordered, padded, tinted panel. The
        mockup hero has none -- it sits on the page background, padding
        6px 0 0, and the triad is the only thing with presence in it.
     2. .account-plans (mine, v750) boxed the price band and the board inside
        another panel with 20px padding, insetting both from the shell and
        double-framing the price band, which has its own border.
     3. The signed-in h1 shrinks to clamp(1.75rem, 3vw, 2.55rem). The mockup
        is clamp(2rem, 4vw, 3.35rem) in every state.

   Target numbers from the mockup at a 1240 shell: hero 1205 wide with no
   border, price band 1205 with its own 0.67px rgba(255,70,104,.28) border,
   board 1205, h1 50.08px, section h2 26px.
   --------------------------------------------------------------------------- */
/* 1. the hero is not a panel */
.account-page .tool-hero.ac-hero {
  padding: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-top: 0;
}
/* 2. the plans section is not a panel either -- the price band brings its own
      frame, and the board wants the full shell width */
/* 3. one headline size, both states */
.account-page .ac-hero h1,
.account-page.is-member-signed-in .account-hero h1 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  margin: 8px 0 12px;
  max-width: 780px;
}
/* The lede matches the mockup's measure and colour rather than .tool-hero's. */
.account-page .ac-hero .hero-copy > p:not(.eyebrow),
.account-page.is-member-signed-in .account-hero p:not(.eyebrow) {
  max-width: 68ch;
  font-size: var(--t-base);
  line-height: 1.55;
  color: #b8c6d0;
}
/* end v754-account-match */
/* ---------------------------------------------------------------------------
   v755-plan-marker: the "Current plan" badge was pinning itself to the page.

   .current-tier-marker is position: absolute with top/right, written for the
   old tier cards, which were positioned. .ac-price is not, so for a signed-in
   Pro member the badge escaped the price band and parked under the header --
   and because it sat outside the layout it could add and remove a scrollbar as
   the page settled, which is the vibration at the top of the scroll.

   An override already sets position: static for .account-page, but it lives
   inside a media query and so never applied at desktop width.
   --------------------------------------------------------------------------- */
.account-page .ac-now .current-tier-marker,
.account-page .ac-price .current-tier-marker,
.account-page .ac-now .included-tier-marker,
.account-page .ac-price .included-tier-marker {
  position: static;
  top: auto;
  right: auto;
  width: fit-content;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin: 0;
  background: rgba(63, 227, 164, 0.16);
  color: var(--sage);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* end v755-plan-marker */
/* ---------------------------------------------------------------------------
   v756-account-settings: Your settings gets the same rows as everything else.

   This block still wore the pre-Broadcast kit -- a green status pill for the
   toggle and a filled cyan Save button -- so the one part of the page a
   signed-in member actually uses looked like a different site to the board
   directly above it. Same row idiom as the billing rows now: label, detail,
   and a quiet cyan action on the right.

   Nothing is renamed. account.js binds to #profileSettings,
   #profileSettingsSummary, #profileSettingsStatus, #displayName,
   #profileEmail and #saveProfileSettings, and all six are untouched.
   --------------------------------------------------------------------------- */
.account-page .profile-settings-panel .profile-settings-disclosure {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.account-page .profile-settings-disclosure summary {
  min-height: 0;
  padding: 15px 0;
  border-bottom: 1px solid rgba(45, 58, 70, 0.5);
}
.account-page .profile-settings-disclosure summary > span b {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}
.account-page .profile-settings-disclosure summary > span small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}
/* was a filled green pill; now the same quiet action as every other row */
.account-page #profileSettingsStatus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.account-page .profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
  padding: 18px 0 4px;
}
.account-page .profile-settings-grid label { display: block; }
.account-page .profile-settings-grid label > span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--dim);
}
.account-page .profile-settings-grid input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
}
/* the filled cyan pill becomes the site's outlined action */
.account-page #saveProfileSettings {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(95, 199, 223, 0.4);
  border-radius: var(--radius-l);
  background: rgba(95, 199, 223, 0.12);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
.account-page .profile-settings-grid { grid-template-columns: 1fr; align-items: stretch; }
.account-page #saveProfileSettings { justify-self: start; }
}
/* end v756-account-settings */
/* v758-billing-rows: the billing block renders for real now. */
.account-page .account-billing[hidden] { display: none; }
/* end v758-billing-rows */
/* ---------------------------------------------------------------------------
   v759-account-final: the last legacy block goes, and the hero matches.

   Your data was still a bordered panel of five filled pills with a gold
   "No data yet" badge -- the last of the pre-Broadcast kit on this page, and
   nothing like it exists in the mockup. It is rows now, like billing and
   settings, so the page has exactly one row idiom from top to bottom.

   The hero also carried two filled buttons the mockup does not have. Signing
   in belongs at the foot of the page, after the case has been made.
   --------------------------------------------------------------------------- */
.account-page .account-saved .ac-sec .ct { color: var(--dim); }
/* the row action, whether it is a link, a button or a file picker */
.account-page .ac-rows button,
.account-page .ac-rows .ac-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(95, 199, 223, 0.4);
  border-radius: var(--radius-l);
  background: rgba(95, 199, 223, 0.12);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.account-page .ac-rows button:disabled {
  border-color: rgba(147, 164, 179, 0.22);
  background: none;
  color: var(--dim);
  cursor: default;
}
/* account.js renders two tile grids into these -- four "0 rows / 0 cards"
   counters and a five-tile CLOUD-SAVE SCHEMA board printing an internal
   version string at a reader. Neither exists in the mockup, and a wall of
   zeros reads as a broken feature rather than an empty account. The elements
   stay because account.js writes to them; they are simply never shown. */
/* The hero's legacy button row is a hook, never a visual. account.js sets
   .hidden = signedIn on it, which UN-hides it for signed-out readers -- the
   exact people the mockup shows no buttons to. So it is hidden in CSS
   regardless of the attribute, and the real sign-in is the block at the foot
   of the page. */
@media (max-width: 640px) {
.account-page .ac-rows button,
  .account-page .ac-rows .ac-file { width: 100%; }
}
/* end v759-account-final */
/* ---------------------------------------------------------------------------
   v760-plan-band-state: do not show a member a sales band with no button in it.

   account.js hides the unlock CTA once you already have the plan, which is
   right -- you cannot buy what you own. But the band stayed, so a paying
   member got the pitch, the price and an empty right-hand third where the
   button used to be. The mockup shows the price band to signed-out and free
   readers only; a member gets the plan strip, which states the renewal and
   opens Stripe.
   --------------------------------------------------------------------------- */
/* v765: a signed-in free member had two Unlock buttons -- the strip's and the
   band's -- stacked, saying the same thing at the same price. The mockup shows
   the band only when signed out, because that is the only state with no strip
   to carry the call. Signed in, the strip is the plan surface: Unlock Pro for
   free, Manage subscription for Pro (which keeps the band, flipped to active,
   per the v763 call). */
.account-page #membershipPlan[data-current-plan="free"] .ac-price { display: none; }
/* v763 reverses v760: the band STAYS for a member -- same graphic as the
   pitch, flipped to active. Hiding it left the page with no plan surface at
   all, which was worse than an empty button. Sage replaces the red frame,
   because sage is the site's word for a good standing state, and account.js
   swaps the CTA for Manage subscription and rewords the footnote. */
.account-page #membershipPlan[data-current-plan="red_diamond_pro"] .ac-price {
  border-color: rgba(63, 227, 164, 0.32);
  background:
    radial-gradient(circle at 8% 0%, rgba(63, 227, 164, 0.08), transparent 46%),
    rgba(8, 14, 22, 0.66);
}
.account-page #membershipPlan[data-current-plan="red_diamond_pro"] .ac-price .eyebrow {
  color: var(--sage);
  text-shadow: none;
}
/* end v760-plan-band-state */
/* ---------------------------------------------------------------------------
   v761-plan-strip: the member strip shows, and the CTA is never a ghost.

   Three states, from the mockup:
     signed out  hero -> price band (solid CTA) -> board -> sign-in at the foot
     free        strip (previews left) -> price band -> board
     pro         strip (plan + manage) -> board, no price band

   The CTA could render as a dashed ghost -- .tier-cta-unavailable -- when a
   render ran before /api/public-config resolved. The mockup has no ghost
   state: the band's button is always the red-gold gradient, and readiness is
   an enablement concern, not a costume change.
   --------------------------------------------------------------------------- */
/* the strip is one row: copy left, action right, like every .ac-now */
.account-page #member-access {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
}
.account-page #member-access[hidden] { display: none; }
/* Signed in, the auth panel inside the strip is noise: the drawer owns
   sign-out and the foot of the page owns sign-in. */
.account-page.is-member-signed-in .account-auth-panel { display: none; }
/* the status panel takes the .ac-now look regardless of its legacy classes */
.account-page .account-status-panel {
  border: 1px solid rgba(63, 227, 164, 0.32);
  border-radius: var(--radius-xl);
  padding: 17px 20px;
  background: rgba(8, 14, 22, 0.6);
}
.account-page .account-status-panel .eyebrow { color: var(--sage); }
.account-page .account-status-panel .account-status { margin-top: 7px; font-size: var(--t-base); color: var(--muted); }
/* The band's CTA is always the mockup's gradient. If checkout is genuinely
   closed the button is disabled and says so, but it never turns into a dashed
   outline -- that reads as broken, not as pending. */
.account-page .ac-price .tier-cta,
.account-page .ac-price .tier-cta.tier-cta-gold,
.account-page .ac-price .tier-cta.tier-cta-unavailable,
.account-page .ac-price .tier-cta:disabled {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 85, 116, 0.55);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, #ff4668, var(--gold-ink));
  color: #061116;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
  text-shadow: none;
  opacity: 1;
  filter: none;
}
.account-page .ac-price .tier-cta:disabled { opacity: 0.6; cursor: not-allowed; }
/* end v761-plan-strip */
/* ---------------------------------------------------------------------------
   v762-strip-copy: the strip says what the mockup says.

   Unhiding the strip in v761 exposed what account.js renders into it: an
   "Active" pill stretched full width, "LOGGED IN", and a cloud-profile note.
   That is auth plumbing, not a plan. The legacy ids stay in the DOM, hidden,
   because account.js writes to them without null checks; the visible strip is
   #planStrip, rendered with the mockup's copy per plan state.
   --------------------------------------------------------------------------- */
.account-page .ac-strip-h.is-pro { color: var(--sage); }
.account-page .ac-strip-h.is-free { color: var(--gold); }
.account-page #planStrip p { margin: 0; font-size: var(--t-base); color: var(--muted); line-height: 1.55; }
.account-page #planStrip p b { color: var(--ink); font-weight: 600; }
.account-page #planStrip .use { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; }
.account-page #planStrip .use i { display: block; width: 38px; height: 8px; border-radius: var(--radius-pill); background: rgba(45, 58, 70, 0.7); }
.account-page #planStrip .use i.on { background: var(--gold); }
.account-page #planStrip .use span { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--t-body); color: var(--dim); }
/* the strip's actions: the free CTA is the band's gradient, the pro action is
   the same quiet cyan as every other row */
.account-page .ac-strip-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none; white-space: nowrap;
}
/* the pro member's strip border reads sage, the free member's gold */
.account-page .account-status-panel:has(.ac-strip-h.is-free) { border-color: rgba(241, 184, 75, 0.32); }
.account-page .account-status-panel:has(.ac-strip-h.is-pro) { border-color: rgba(63, 227, 164, 0.32); }
/* end v762-strip-copy */
/* ---------------------------------------------------------------------------
   v764-account-type: the board and the band were reading small.

   Measured rather than eyeballed: .ff-who strong and .rc-who strong -- the row
   labels on Flip Finder and Roster Command -- are both 1.0625rem. This board's
   label was --t-base (15px), so the newest board on the site was a step
   smaller than the two it was modelled on.

   The row detail goes up one step too. On those boards the second line is a
   short mono stat; here it carries the corrected feature copy that is the
   whole reason the board exists, and 13px prose under a 17px label reads as a
   footnote rather than the point.
   --------------------------------------------------------------------------- */
.account-page .ac-cmp td b { font-size: 1.0625rem; }
.account-page .ac-cmp td span { font-size: var(--t-base); line-height: 1.5; }
/* The values sit on the same line as the label they answer, so they take the
   label's size. .part was a step down again, which made the Free column --
   the one carrying every limit -- the quietest thing in the row. */
.account-page .ac-cmp td.y,
.account-page .ac-cmp td.n,
.account-page .ac-cmp td.part { font-size: 1.0625rem; }
.account-page .ac-cmp thead th { font-size: var(--t-base); }
/* The band: its bullets are the paid plan's argument, not fine print. */
.account-page .ac-price-list li { font-size: var(--t-base); line-height: 1.55; }
.account-page .ac-price-alt { font-size: var(--t-body); }
.account-page .ac-price-fig small { font-size: var(--t-base); }
/* Billing and settings rows match the board, so the page has one row size. */
.account-page .ac-rows strong { font-size: 1.0625rem; }
.account-page .ac-rows em { font-size: var(--t-base); line-height: 1.5; }
.account-page .ac-rows a,
.account-page .ac-rows button,
.account-page .ac-rows .ac-file,
.account-page .ac-strip-link { font-size: var(--t-base); }
/* The phone step-down has to be restated here: the rules above come later in
   the file than the media queries that used to shrink these, so a 17px mono
   "24h only" was wrapping inside a 44px column. The label keeps its new size;
   only the two value columns step back down. */
@media (max-width: 640px) {
.account-page .ac-cmp td.y,
  .account-page .ac-cmp td.n,
  .account-page .ac-cmp td.part { font-size: var(--t-body); }
.account-page .ac-cmp thead th { font-size: var(--t-small); }
}
@media (max-width: 430px) {
.account-page .ac-cmp td.part { font-size: var(--t-micro); }
}
/* end v764-account-type */
/* ---------------------------------------------------------------------------
   v766-band-badge: the CURRENT PLAN badge was costing 49px of band height.

   Measured at 1440: the band is 129px signed out and 178px for a member. The
   badge itself is only 22px tall -- the other 27px is the grid's 30px row gap,
   because the badge spans grid-column 1 / -1 and so opens a whole row of its
   own above three columns that were already vertically centred.

   Out of flow instead. It costs no height at all now, and .ac-price is
   position: relative so it can only ever escape to the band -- which is what
   v755 was guarding against when it made the badge static in the first place.
   --------------------------------------------------------------------------- */
.account-page .ac-price { position: relative; }
/* Below 980 the band is a single column and the corner belongs to the content,
   so the badge goes back into the flow at the top of the stack. */
/* end v766-band-badge */
/* ---------------------------------------------------------------------------
   v769 Pack Value Lab — the pulls, not just the price.

   The page could tell you a pack returned 108 stubs per 100 and never tell you
   which cards that number came from. /api/pack-value now publishes the priced
   rows behind the EV, so the hero shows the three that contribute most, with
   the real card art, at the real odds.

   Three things have to hold together or the page lies:
     - the headline names the selected pack (a stale headline over another
       pack's cards is the bug this block exists to prevent);
     - the hero's default pack and the top row of the board are both
       ratedPacks()[0], so the two can never disagree;
     - a pack with no priced rows draws no triad at all.

   Geometry is the shared .dp-triad from v730 -- the same 150/192px cards, the
   same drift, the same 3-up -- under page-local names, because a slot caption
   here is a pull's odds rather than a card's rating.
   --------------------------------------------------------------------------- */
/* A pack with no priced rows draws no triad, and a reserved-but-empty right
   half is worse than no right half: the hero collapses to one column instead. */
.pack-page .pv-h1 .win { color: var(--sage); text-shadow: 0 0 18px rgba(63, 227, 164, .28); }
.pack-page .pv-h1 .dim { color: var(--muted); text-shadow: none; }
/* ---- the field: the Card Database's pattern, a label, a magnifier, one rule.
   It replaces a fill-in-the-blank sentence whose two editable phrases were
   underlined and nothing else -- at hero size that set across three lines and
   read as a broken heading rather than as a control. ---- */
.pack-page .pv-field:focus-within { border-bottom-color: var(--cyan); }
/* Your stubs is optional -- the verdict never needed it, only the "can you
   afford it" line does -- so it is a quiet second field, not half the sentence. */
/* The rule turning gold IS the focus indicator on an underline field; the
   site's default 3px glow box draws a rectangle around a control that has no
   rectangle. */
.pack-page .pv-find + .pl-hint { margin-top: var(--space-6); max-width: 68ch; }
/* ---- the picker, restyled. It already matched from two characters, ranked
   prefixes above substrings and carried each pack's return per row; only the
   paint here is new. ---- */
.pack-page .pv-drop[hidden] { display: none; }
.pack-page .pv-drop .pl-opt {
  gap: var(--space-7);
  padding: 11px 14px;
  min-height: 44px;
  border-top: 0;
  border-bottom: 1px solid rgba(45, 58, 70, .5);
}
/* ---- the answer, in the hero rather than a screen further down ---- */
.pack-page .pv-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--toneLine);
  background: radial-gradient(circle at 8% 0%, rgba(63, 227, 164, .08), transparent 46%), rgba(8, 14, 22, .66);
}
.pack-page .pv-answer.t-bad { background: radial-gradient(circle at 8% 0%, rgba(255, 101, 124, .08), transparent 46%), rgba(8, 14, 22, .66); }
.pack-page .pv-answer.t-watch { background: radial-gradient(circle at 8% 0%, rgba(241, 184, 75, .08), transparent 46%), rgba(8, 14, 22, .66); }
.pack-page .pv-answer.is-quiet { display: block; }
.pack-page .pv-answer .call {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tone);
}
.pack-page .pv-answer .call small {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--muted);
}
.pack-page .pv-answer .pl-band-src { font-size: var(--t-small); }
/* The link wraps as a whole or not at all -- "official drop / rates →" split
   across two lines reads as two half-sentences. */
/* ---- the triad: what is actually in the pack ---- */
.pack-page .pv-triad[hidden] { display: none; }
@keyframes pvPackDrift {
  0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .55; }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: .85; }
}
.pack-page .pv-slot.a .pv-cat { background: var(--sage); }
.pack-page .pv-slot.b .pv-cat { background: var(--gold); }
.pack-page .pv-slot.c .pv-cat { background: var(--cyan); }
.pack-page .pv-slot:hover .pv-cd,
.pack-page .pv-slot:focus-visible .pv-cd { transform: translateY(-5px); }
.pack-page .pv-slot.a .pv-val { color: var(--sage); }
.pack-page .pv-slot.b .pv-val { color: var(--gold); }
.pack-page .pv-slot.c .pv-val { color: var(--cyan); }
/* A bundle's unpriced extra. Quieter than the caveat above it -- it is a note
   about what the number leaves out, not part of the verdict. */
/* ---- contents without a value: a bundle whose rows are packs, not cards ----
   These frames carry no card art and no stub figure because neither exists.
   The pull captions count rather than rank (nothing here has an EV to rank by)
   and the frame states its own rarity in the rarity vocabulary the rest of the
   site already uses, so cyan means diamond here exactly as it does everywhere
   else -- it is never standing in for a verdict. */
.pack-page .pv-slot--blank .pv-cat {
  background: rgba(147, 164, 179, .18);
  color: var(--muted);
}
.pack-page .pv-cd.is-blank {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 7;
  padding: var(--space-4);
  border: 1px dashed rgba(147, 164, 179, .34);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(147, 164, 179, .1), rgba(147, 164, 179, .03));
  filter: none;
}
.pack-page .pv-cd.is-blank.r-diamond { border-color: rgba(95, 199, 223, .42); }
.pack-page .pv-cd.is-blank.r-diamond .pv-blank-r { color: var(--cyan); }
.pack-page .pv-cd.is-blank.r-gold { border-color: rgba(241, 184, 75, .42); }
.pack-page .pv-cd.is-blank.r-gold .pv-blank-r { color: var(--gold); }
.pack-page .pv-slot--blank .pv-who { margin-top: 11px; }
/* ---- the status line: the median pack, stated rather than shouted ---- */
.pack-page .pv-status {
  max-width: 78ch;
  margin: 26px 0 0;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--muted);
}
.pack-page .pv-status:empty { display: none; }
.pack-page .pv-status b { font-family: var(--font-mono); font-weight: 400; color: var(--ink); }
.pack-page .pv-status .edge { font-family: var(--font-mono); color: #ff657c; }
/* ---- the board ---- */
.pack-page .pv-sec .ct { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-body); color: var(--muted); }
.pack-page .pv-board {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pack-page .pv-board th,
.pack-page .pv-board td {
  padding: 7px 14px;
  border-bottom: 1px solid rgba(45, 58, 70, .55);
  font-size: var(--t-base);
  text-align: left;
}
.pack-page .pv-board thead th {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pack-page .pv-board th:first-child,
.pack-page .pv-board td:first-child { width: 42%; padding-left: 0; }
.pack-page .pv-board th:last-child,
.pack-page .pv-board td:last-child { padding-right: 0; }
.pack-page .pv-board .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pack-page .pv-board tbody tr:hover td { background: rgba(238, 244, 248, .035); }
.pack-page .pv-board .pv-pk { min-width: 0; }
.pack-page .pv-board .pv-pk span {
  display: block;
  margin: 0 0 4px;
  font-size: var(--t-small);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.pack-page .pv-jump:hover { color: var(--cyan); }
.pack-page .pv-board .rt-short {
  display: inline-block;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  color: var(--gold);
}
.pack-page .pv-board .ret { font-family: var(--font-mono); font-weight: 600; color: var(--tone, var(--muted)); }
.pack-page .pv-board .ret.is-none { font-weight: 400; color: var(--muted); }
.pack-page .pv-board .verdict {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tone, var(--muted));
}
/* Out of reach is still real information: it recedes, it does not vanish. */
.pack-page .pv-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-8);
  padding: 0 20px;
  border: 1px solid rgba(95, 199, 223, .4);
  border-radius: var(--radius-l);
  background: rgba(95, 199, 223, .12);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 1271px) {
/* Not 980px: the triad's minmax(400px, 620px) column doesn't let go of
     that width until the shell hits its own 1240px cap (viewport 1272+), so
     980px left the search field squeezed to a ~150px input in between. */
.pack-page .pv-answer { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 640px) {
/* Both fields already carry min-height: 44px, so the stack only needs room. */
/* Fixed layout plus a hidden Cost column ran GIVES BACK, RETURN and VERDICT
     into each other and pushed the last one off the screen -- the columns kept
     their percentages while their headings did not fit them. Auto layout sizes
     each column to what is actually in it, and every heading may wrap. */
.pack-page .pv-board { table-layout: auto; }
.pack-page .pv-board th,
  .pack-page .pv-board td { padding: 6px 5px; font-size: var(--t-body); }
.pack-page .pv-board th:first-child,
  .pack-page .pv-board td:first-child { width: auto; }
.pack-page .pv-board thead th { font-size: var(--t-micro); letter-spacing: .06em; white-space: normal; }
.pack-page .pv-board .hide-sm { display: none; }
.pack-page .pv-board .verdict { font-size: var(--t-micro); letter-spacing: .04em; white-space: normal; }
.pack-page .pv-board .num { font-size: var(--t-small); }
}
/* end v769-pack-pulls */
/* v770 (opened as a bare number, not "v770-verdict-box:", because the cache key
   this ships under contains that string and check-asset-cache-keys forbids a
   block marker the key would rename on the next blanket bump):
   the answer band's verdict was centred against its prose
   column. That column has since grown from one paragraph to three blocks --
   the reasoning, "Buy this instead", and the method line -- so centring parked
   "Yes" halfway down a 227px panel, level with the buy-instead line rather than
   with the sentence it answers. It read as two unrelated things in one box.
   The verdict now heads row one alongside the reasoning it belongs to, and the
   alternative plus the method line drop to a full-width footer under a
   hairline: one recommendation per row, nothing removed. */
.pack-page .pv-answer:not(.is-quiet) {
  align-items: start;
  column-gap: var(--space-10);
  row-gap: var(--space-6);
}
/* No optical nudge on the verdict, and that is a measured result rather than an
   omission. Barlow Condensed does sit high in its em box (11px of a 38px
   ascent is empty), but line-height:1 gives the line box a -3.8px half-leading
   that pulls the glyph back down by almost exactly as much: with both grid
   items flush at the same top, the cap top of "Yes" lands 1px below the cap top
   of "75,000". Padding it down by the 4px the eye first suggests puts it 5px
   low. Anything added here is a regression. */
.pack-page .pv-answer .pv-foot {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 13px;
  border-top: 1px solid var(--toneLine);
}
@media (max-width: 900px) {
/* One column: the verdict is already the first thing read, so the footer
     rule is the only separation the stack needs. */
.pack-page .pv-answer:not(.is-quiet) { row-gap: var(--space-5); }
}
/* end v770-verdict-box */
/* v771 (a bare token again, for the reason v770 records: the cache key this
   ships under contains "v771-pack-hero", and check-asset-cache-keys rejects a
   block marker the key would rename on the next blanket bump.)

   Pack Value Lab read as a different site than the four pages it sits beside.
   Four things, in the order a visitor meets them:

   1. A shared control was under the thumb minimum. Fixed on the component,
      not on this page -- .gold-gate-cta (40px) is injected by entitlements.js
      into every gated surface, so it was short EVERYWHERE and scoping the fix
      to .pack-page would have left the same defect on Market Pulse, Flip
      Finder, the Advisor and the rest. (The "Back to Pulse" pill this note
      once also covered was retired in v911: the logo and the drawer already
      go home, and the pill cost every phone ~65px above the page's title.)

   2. The headline. Every converted hero paints its accented half with the
      shared .hero-accent -- red #ff2d4b (now --hero-accent) plus a glow -- and sets the base in
      Inter at clamp(2rem, 4vw, 3.35rem)/1. This page had sage green in Barlow
      Condensed at clamp(1.9rem, 4vw, 3.2rem)/1.03, which is the exact trap the
      comment above .mp-head h1 already warns about: a local display-font clamp
      that renders visibly narrower and smaller than the site around it. The
      accent is now the shared class itself (the markup emits .hero-accent, so
      there is one red to maintain, not two), and only the properties that
      actually differed are restated here.

   3. The triad was static. .dp-triad floats each slot on its own period so the
      row never pulses in unison; the markup here is page-local (.pv-slot /
      .pv-lift, because a caption is a pull's odds rather than a card's rating)
      so the rules are mirrored rather than reused, frame for frame, including
      the hover pause and the reduced-motion guard that returns the rotation
      without the motion. The 14s glow drift and the v738 overflow-x: clip pair
      were already in v769 and are left alone.

   4. The answer was a bordered, rounded, tinted panel sitting under the search
      field -- a card dropped into the hero rather than part of it. It loses the
      box and keeps the signal: a tone-coloured rule above it, the verdict word
      in the verdict colour, and spacing. Every element survives (verdict, "N%
      back", reasoning, "Buy this instead", method line and the official drop
      rates link) and the v770 two-row structure is untouched. */
/* ---- 1. the shared control, fixed on the component ---- */
.gold-gate-cta {
  min-height: 44px;
}
/* ---- 2. the headline, in line with the other four heroes ---- */
/* Colour (#f7fbff), weight (700) and text-shadow already matched, so they are
   not repeated. Family, size and leading did not. */
/* The floor is the site's 2rem, so every width below about 790px is an exact
   match. The cap is 3.15rem against the site's 3.35rem, and that 0.2rem is
   deliberate: this hero's copy column is 626px where Market Pulse's is ~710px,
   because the triad beside it needs a fixed 620px (three equal 1fr tracks that
   must each clear the 192px centre card -- shrink that column and the middle
   card overflows its track). The headline is also the only one on the site
   built from live data, so it has to hold any pack name. Measured at 3.35rem in
   626px, four of the five commonest names wrap to three lines and three of them
   strand "it." alone on the last one; at 3.15rem the common case is two lines.
   A 6% difference nobody can see beats an orphan everybody can. */
/* .dim stays muted -- "no drop table published" is an absence, not an accent,
   and red would read as an alert about the pack rather than about our data. */
/* ---- 3. the triad floats, mirroring .dp-triad frame for frame ---- */
/* Slot classes are a/b/c by rank; the plan renders a left, b centre, c right. */
@keyframes pvFloatL { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(10px); } }
@keyframes pvFloatC { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-12px); } }
@keyframes pvFloatR { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-9px); } }
/* ---- 4. the answer, seamless in the hero ---- */
.pack-page .pv-answer,
.pack-page .pv-answer.pl-band {
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--toneLine);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.pack-page .pv-answer.t-bad,
.pack-page .pv-answer.t-watch { background: none; }
/* .pl-band paints a 3px tone bar down its left edge to mark itself as a panel.
   With no panel there is nothing to mark, and the verdict colour is already
   carrying the signal on .pl-band-do. */
/* The footer rule drops to the neutral hairline: two tone-coloured rules in one
   block made the answer read as two stacked panels, which is the thing this
   change exists to stop. */
.pack-page .pv-answer .pv-foot { border-top-color: var(--line); }
@media (prefers-reduced-motion: reduce) {
/* The rotation is the composition, not the motion -- keep it. */
.pack-page .pv-slot.a .pv-lift { transform: rotate(-6deg); }
.pack-page .pv-slot.c .pv-lift { transform: rotate(7deg); }
}
/* end v771-pack-hero */
/* ===========================================================================
   v772 Pack Value Lab -- the hero answers in three lines

   The hero was asking for 169 words before the board began: 21 in the balance
   hint, 55 in the answer band, 18 in "Buy this instead", 18 in the method line,
   57 in the status paragraph. The answer itself is settled in four -- Yes, 104%
   back -- and everything after it was somebody still reading.

   What that buys, structurally:
     - the answer is a sentence, a figure line and a caveat. No panel.
     - the working (standing, per-pack figure, buy-instead, method) moved into
       the pack's own row in the board, which opens.
     - the status figures moved into the board's section head, where they
       describe the thing they are about.

   The caveat is the load-bearing part. "One pack can still come back with
   nothing" had been --dim, at the end of a paragraph, in a block most readers
   left before reaching it. It is the only sentence on this page with money
   behind it. It gets its own line at body colour, and it is never cut.
   =========================================================================== */
/* ---- 1. the answer: a rule and space, no box ---- */
/* The verdict word is the only colour the block carries. */
.pack-page .pv-say .v { color: var(--tone); }
/* The no-odds answer is a sentence about an absence, not a two-word verdict,
   so it needs the room a 22ch measure will not give it. */
/* Mono is reserved for figures standing on their own. Inside the sentence above
   it fought the display face -- different baselines, different rhythm, and the
   digits read as pasted in from somewhere else. */
.pack-page .pv-warn a { color: var(--cyan); font-weight: 400; }
/* ---- 2. the board row as a control ---- */
/* .pv-jump already carries min-height: 44px from v769; this adds the chevron
   and the open state. The whole name cell stays the target -- a 7px chevron
   with no hit area of its own is a decoration pretending to be a button. */
.pack-page .pv-jump .pv-cv {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-right: 1.6px solid var(--cyan);
  border-bottom: 1.6px solid var(--cyan);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}
.pack-page .pv-jump[aria-expanded="true"] .pv-cv { transform: rotate(-135deg); }
.pack-page .pv-row.is-open td {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--tone) 6%, transparent);
}
.pack-page .pv-detail td {
  padding-top: 0;
  background: color-mix(in srgb, var(--tone) 6%, transparent);
}
/* Safari before 16.2 has no color-mix; a flat wash is the right fallback --
   the tone is already carried by the return column and the verdict word. */
@supports not (background: color-mix(in srgb, red 6%, transparent)) {
.pack-page .pv-row.is-open td,
  .pack-page .pv-detail td { background: rgba(238, 244, 248, .045); }
}
.pack-page .pv-work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 11px 26px;
  padding: 2px 0 13px;
}
.pack-page .pv-work p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--dim);
}
.pack-page .pv-work p b { color: var(--muted); font-weight: 600; }
.pack-page .pv-work a { color: var(--cyan); }
.pack-page .pv-work .k {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--dim);
}
/* The gate sits in the grid as one more cell, not as a panel across it. */
.pack-page .pv-work .gold-gate-shell { display: contents; }
/* ---- 3. the status figures, in the head of what they describe ---- */
.pack-page .pv-sec .pv-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.pack-page .pv-sec .pv-meta .sep { color: #3a4a58; padding: 0 2px; }
.pack-page .pv-sec .pv-meta .edge { color: var(--red); }
.pack-page .pv-sec .pv-meta .win { color: var(--sage); }
@media (max-width: 640px) {
.pack-page .pv-sec .pv-meta { margin-left: 0; width: 100%; font-size: var(--t-small); }
.pack-page .pv-detail td { padding-left: 0; padding-right: 0; }
.pack-page .pv-work { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* end v772-pack-words */
/* ===========================================================================
   v775 Pack Value Lab -- the working was unreadable and the control was invisible

   Three faults in what v772 shipped, all of them mine and all of them the same
   mistake in different places: treating the row detail as a footnote.

   1. The control was a 7px chevron drawn from two 1.6px borders. At that size
      it reads as a stray mark rather than a thing you can press, and nothing
      else on the row said "there is more here". The row is the only way into
      the working now, so if the affordance is invisible the working may as well
      not exist.

   2. The detail set at 13px in --dim on labels at 11px in #5d7180, which is
      below the caption colour. That is footnote treatment for content that is
      the ANSWER to a deliberate click. It now sets at the same size as the
      board row it belongs to.

   3. All of it was grey. The open row carried a 6% tone wash and nothing else,
      so a block explaining a 104% verdict looked identical to one explaining a
      67% verdict. The wash carries properly now, and the figures inside it are
      mono like every other figure on the site.
   =========================================================================== */
/* ---- 1. the control ---- */
/* A bordered 22px well, not a mark. It reads as a control at a glance and holds
   its position through the rotation -- the old transform moved the chevron as
   it opened, which shunted the pack name sideways. */
/* The .pv-board in this selector is load-bearing, and it cost a measurement to
   find. v769 styles the row's sub-line with `.pack-page .pv-board .pv-pk span`
   -- three classes and a type selector -- and the chevron is a <span> inside
   .pv-pk, so that rule was landing on it: display: block instead of
   inline-flex, and `margin: 0 0 4px` wiping the right margin. The caret sat
   top-left in an uncentred box with the pack name jammed against it.
   Three classes lose to three classes plus a type. Four beat it.

   The margin is written long-hand for the same reason: v769 sets the
   shorthand, so overriding only margin-right leaves its 4px bottom behind. */
.pack-page .pv-board .pv-jump .pv-cv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0 11px 0 0;
  border: 1px solid rgba(95, 199, 223, .34);
  border-radius: var(--radius-m);
  background: rgba(95, 199, 223, .1);
  transform: none;
  transition: background .18s ease, border-color .18s ease;
}
.pack-page .pv-jump:hover .pv-cv,
.pack-page .pv-jump:focus-visible .pv-cv,
.pack-page .pv-jump[aria-expanded="true"] .pv-cv {
  background: rgba(95, 199, 223, .2);
  border-color: rgba(95, 199, 223, .6);
}
/* v772 rotated the ELEMENT, because the element was the caret. Now the element
   is a bordered well and the caret is its ::before, so that rule has to be
   turned off -- and it has to be turned off at its own specificity. It carries
   an attribute selector, which beats `.pack-page .pv-jump .pv-cv` above; left
   alone it spun the whole 22px well into a diamond and dragged it 5px out past
   the left edge of the button. Measured, not guessed:
   matrix(-0.707107, -0.707107, 0.707107, -0.707107, 0, 0). */
.pack-page .pv-jump[aria-expanded="true"] .pv-cv { transform: none; }
/* translateY flips with the rotation: a rotated square's visual centre is not
   its box centre, so the same offset that centres the caret pointing down puts
   it too high pointing up. */
/* ---- 2. the working reads like content, because it is ---- */
.pack-page .pv-work {
  gap: 14px 30px;
  padding: 4px 0 16px;
}
.pack-page .pv-work p {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--muted);
}
.pack-page .pv-work p b { color: var(--ink); font-weight: 600; }
/* Figures are mono everywhere else on this site; there is no reason for the
   only place that explains a figure to set it in body text. */
.pack-page .pv-work p b.n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pack-page .pv-work .k {
  margin-bottom: 5px;
  font-size: var(--t-small);
  color: var(--dim);
}
/* "official rates →" was breaking with the arrow alone on the second line. */
.pack-page .pv-work a { white-space: nowrap; }
/* ---- 3. the tone actually carries ---- */
.pack-page .pv-row.is-open td {
  background: color-mix(in srgb, var(--tone) 13%, transparent);
}
.pack-page .pv-detail td {
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  border-bottom-color: var(--toneLine);
}
@supports not (background: color-mix(in srgb, red 13%, transparent)) {
.pack-page .pv-row.is-open td,
  .pack-page .pv-detail td { background: rgba(238, 244, 248, .07); }
}
@media (max-width: 640px) {
/* The well keeps its 22px, but the gap closes: at 375 the name column is
     tight enough that 11px of it is a wrapped word. */
/* No type step-down here. The first draft dropped the working to 13px and the
     labels to 11px on narrow screens, which is the size that got it called
     unreadable in the first place -- and the excuse for it, horizontal room,
     does not exist: .pv-work is a single full-width column below 640. */
}
/* end v775-pack-detail */
/* ===========================================================================
   v778 Pack Value Lab -- the rail says the row opens

   v772 marked the row with a bare 7px caret in the left margin and nobody
   could see it. v775 replaced it with a bordered, filled, rounded 22px well,
   which was visible and was a component this design system does not have.

   The site already answers this question in three places and none of them
   looks like a well:

     .cdb-row[aria-expanded="true"]   Card Database -- NO GLYPH. A cyan tint,
                                      inset 3px 0 0 var(--cyan), and the row's
                                      name goes var(--cyan-ink).
     .nav-group > button::after       a bare 7px border-caret in currentColor,
                                      trailing its label.
     .squad-panel-caret               the same caret at 9px, also trailing.

   So: a bare caret behind a word, or no glyph and the row's own state doing the
   talking. What made v772 illegible was never the size -- it was that a caret
   alone in a margin has nothing to belong to. The nav's caret is the same 7px
   and reads fine, because it sits at the end of a word.

   This uses the Card Database's mechanic and turns it on before the click
   rather than only after it: the same inset bar, at 20% on every row, so a row
   looks like a thing that opens. Hover takes it to 55%, open takes it to full
   cyan with the tint. One box-shadow, three values, no new component.
   =========================================================================== */
.pack-page .pv-board tbody td:first-child {
  padding-left: 13px;
  box-shadow: inset 2px 0 0 rgba(95, 199, 223, .2);
  transition: box-shadow .16s ease;
}
/* The header label moves with the names, or the column reads as misaligned. */
.pack-page .pv-board thead th:first-child { padding-left: 13px; }
.pack-page .pv-board .pv-row:hover td:first-child {
  box-shadow: inset 2px 0 0 rgba(95, 199, 223, .55);
}
/* Open is the Card Database's exact value: 3px, full cyan.
   The tbody and the :first-child on the detail selector are not padding. The
   base rule above is `.pack-page .pv-board tbody td:first-child` -- three
   classes (:first-child is a pseudo-CLASS) and two elements. A plain
   `.pack-page .pv-board .pv-detail td` is three classes and ONE element, so it
   ties on class count and loses on element count: the open detail row kept
   drawing the 20% rest rail while the row above it went full cyan. Measured on
   the running page. Four classes settles it. */
.pack-page .pv-board .pv-row.is-open td:first-child,
.pack-page .pv-board tbody .pv-detail td:first-child {
  box-shadow: inset 3px 0 0 var(--cyan);
}
.pack-page .pv-board tbody .pv-detail td:first-child { padding-left: 13px; }
/* And the name brightens, which is the other half of what .cdb-row does. */
.pack-page .pv-row:hover .pv-jump,
.pack-page .pv-row.is-open .pv-jump { color: var(--cyan-ink); }
/* The well is gone. These null out v772's and v775's rules for it so a stale
   cached stylesheet cannot draw half a component next to the rail. */
.pack-page .pv-jump .pv-cv,
.pack-page .pv-board .pv-jump .pv-cv { display: none; }
@media (max-width: 640px) {
/* 13px is a lot of a 375px name column; the rail still reads at 10. */
.pack-page .pv-board tbody td:first-child,
  .pack-page .pv-board thead th:first-child,
  .pack-page .pv-board tbody .pv-detail td:first-child { padding-left: var(--space-4); }
}
/* end v778-pack-rail */
/* ===========================================================================
   v780 Pack Value Lab -- the board becomes a picture

   The old board was a five-column table of text, and it read like lego next to
   Market Pulse and Flip Finder. Measured against them, it diverged five ways
   and the biggest was not a colour:

     .mp-row img { width: 40px; border-radius: 3px; }
     .ff-row img { width: 48px; aspect-ratio: 5 / 7; }
   Every row on both of those boards carries a card. This one carried fifty-one
   lines of text. /api/pack-board has shipped each pack's best pull since v768 --
   52 of 56 packs have one, with art, name, overall and odds already priced --
   and the board threw all of it away.

   So: the table is gone, replaced by the .mp-row grid vocabulary. Every row
   carries the card you are most likely to pull out of that pack. The return
   stops being a number to read and becomes a length to see, drawn against one
   break-even line that runs down the whole board -- you do not read fifty-one
   figures, you see three bars cross the line and forty-eight fall short, which
   is the entire finding of this page in one look.

   Colour rules, and they are the ones that were broken before:
     - selection is CYAN, always. Never the pack's verdict tone. A maroon slab
       opening under a bad pack was the single ugliest thing on the page.
     - the tone lives on the FIGURE and the BAR, which is where .mp-num puts it.
     - only the packs that clear their price glow. Three of fifty-one, so it
       stays an event rather than a texture.
     - the band heading carries the tone once, instead of the word SKIP carrying
       it forty-eight times down the right edge.
   =========================================================================== */
/* ---- the header strip and the rows: .mp-cols / .mp-row geometry ---- */
.pack-page .pv-cols,
.pack-page .pv-list .pv-jump,
.pack-page .pv-break {
  display: grid;
  grid-template-columns: 30px 40px minmax(0, 1fr) 300px 64px;
  gap: var(--space-6);
  align-items: center;
}
/* .pv-jump keeps its name and its 44px floor from v769; the whole row is the
   control, so it is the row that has to be the button. */
.pack-page .pv-list .pv-jump {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(45, 58, 70, .4);
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.pack-page .pv-list .pv-jump:hover { background: rgba(95, 199, 223, .03); }
/* Selection is cyan. Always. .ff-row.is-picked, character for character. */
.pack-page .pv-list .pv-jump.is-open {
  background: rgba(95, 199, 223, .08);
  box-shadow: inset 3px 0 0 var(--cyan);
}
/* Out of reach recedes rather than vanishing -- it is still real information. */
/* 5:7 declared so the row reserves its height before the art arrives -- the
   same reason .ff-row img declares it. */
.pack-page .pv-nm small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--steel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pack-page .pv-nm .rt-short { font-family: var(--font-mono); font-weight: 400; color: var(--gold); }
/* ---- the bar, and the one line everything is measured against ---- */
/* --be is written by renderBoard from the same scale the bar widths use, so the
   line and the bars can never describe different scales. It defaults to the
   130% floor for the first paint. */
/* The default lives on the board container, which is also where renderBoard
   writes the real value as an inline style -- inline beats the sheet, and a
   default on .pv-list would shadow it and pin the line at 130 forever. */
.pack-page .t-good .pv-bar {
  background: linear-gradient(90deg, rgba(63, 227, 164, .35), var(--sage));
  /* Only the packs that clear get this. Three of fifty-one. */
  box-shadow: 0 0 14px rgba(63, 227, 164, .4);
}
.pack-page .t-watch .pv-bar { background: linear-gradient(90deg, rgba(241, 184, 75, .3), var(--gold)); }
.pack-page .t-bad .pv-bar { background: linear-gradient(90deg, rgba(255, 101, 124, .22), rgba(255, 101, 124, .72)); }
/* ---- the bands: .pl-label, which the affordability split already used ---- */
.pack-page .pv-band.is-win { color: var(--sage); }
.pack-page .pv-band.is-mid { color: var(--gold); }
.pack-page .pv-band.is-lose,
.pack-page .pv-band.is-none { color: var(--steel); }
/* ---- the panel: .mp-panel, character for character ---- */
.pack-page .pv-panel-close:hover { color: var(--ink); }
@media (max-width: 900px) {
/* The RANK drops, not the track. Hiding the bar would take this board's whole
     idea off every phone -- and with the track hidden the row had five children
     in four columns, so the art landed in the name's cell and every row skewed.
     Measured at 375 before it shipped. */
.pack-page .pv-cols,
  .pack-page .pv-list .pv-jump,
  .pack-page .pv-break { grid-template-columns: 40px minmax(0, 1fr) 92px 56px; gap: var(--space-4); }
/* The mockup dropped this to 10px. The page's own type floor is 11px and
     check-pack-value-lab enforces it across every block since v616, so it stays
     at --t-micro -- a one-pixel divergence from the mockup, in the direction of
     a rule we already keep. */
.pack-page .pv-nm small { font-size: var(--t-micro); }
}
/* end v780-pack-picture */
/* ===========================================================================
   v782 Pack Value Lab -- type up, spacing untouched

   The board reads small. Every size here goes up and NOT ONE margin, padding
   or gap changes, which is possible because of how the row is built: its height
   is set by the art, not by the text. The card is 40px wide at 5:7, so 57px
   tall, plus 8px of padding top and bottom -- a 73px row. The name and its
   sub-line were using 33px of that. There were 24px of headroom sitting unused.

   Measured before and after on the running page: the row is 73px either way.

   Sizes are lifted from Flip Finder's row, which is the closest thing on the
   site -- a ranked board of rows with a headline figure -- rather than picked:

     .ff-who strong    1.0625rem   the row's name
     .ff-who > span    --t-body    the row's sub-line
     .ff-day b         1.32rem     the figure the board is sorted by

   That last one carries a comment in styles.css worth quoting back at this
   board: "the sorted number is the loud one: a board sorted by a figure it
   whispers is..." -- and Per 100 was set at --t-base, one step above its own
   captions. It is the answer to the page. It should be the loudest thing in
   the row after the pack's name.

   Two things go up in CONTRAST rather than size, because raising them would
   wrap a line and wrapping a line is spacing: the section head's figure strip
   and the column header. Both move from --dim to --muted and --steel, which is
   what .mp-cols already uses.
   =========================================================================== */
/* The row: the name and its sub-line, at Flip Finder's values. */
.pack-page .pv-nm small { font-size: var(--t-body); }
/* The sorted figure. 1.25rem mono is 4 characters at roughly 48px, inside a
   64px column at full width and a 56px column at 375 -- it fits without the
   column moving, which is the whole constraint here. */
/* The rank sits beside a 17px name now, so --t-lead no longer reads as a rank
   so much as a second figure. Down half a step, and it recedes properly. */
/* The column header and the break-even caption. */
/* The band heading. Scoped to .pv-band, never to .pl-label itself -- that class
   is shared with the affordability labels on other surfaces and this is not a
   site-wide change. */
/* The panel. .mp-panel sets its meta at --t-micro and its sentence at --t-body;
   both go up a step here. That is a deliberate divergence from Market Pulse:
   this panel is the answer to a click somebody made on purpose, where the
   Market Pulse one rides along under a row they were already reading. */
/* Contrast, not size: this strip is one mono line and a step up would wrap it,
   which would change the height of the section head. */
.pack-page .pv-sec .pv-meta { color: var(--muted); }
@media (max-width: 900px) {
/* v780 dropped the sub-line to --t-micro here. The row is art-bound at 375
     too -- still 73px -- so the headroom exists on a phone as well, and the
     sub-line truncates on width at either size. It keeps the larger type. */
.pack-page .pv-nm small { font-size: var(--t-body); }
/* Per 100 stays inside its 56px column: four characters of mono at 1.25rem
     is about 48px. */
}
/* The close is a control, not a footnote. */
/* end v782-pack-type */
/* ===========================================================================
   v784 Help, Privacy and Terms, converted to the Broadcast system

   These three were the last public pages that had never touched it. Measured
   before this change, as a share of the text on the page, against the converted
   pages for scale (Card Database 77%, Pulse Rating 73%, Market Pulse 70%):

     help     5%     4 display elements in 80
     terms    2%     1 in 61
     privacy  1%     1 in 71

   That single element was the global .eyebrow rule. Nothing else on any of the
   three had ever used a design token.

   Two shapes, because they are two different jobs:

   HELP is somebody with a question, so it opens with the Card Database's search
   line and searches the questions and the glossary together.

   PRIVACY and TERMS are somebody who needs to be sure they saw everything, so
   every section is open, numbered and anchored, with a contents rail beside it.
   Nineteen <details> and seventeen <details> are gone. A closed <details> is
   invisible to Ctrl+F in most browsers, carries no anchor to link in a support
   reply, and hides a disclosure behind a click on the two pages that exist to
   disclose.
   =========================================================================== */
/* ---- shared: the hero, and the stamp under it ---- */
.help-hero .lg-said,
.help-hero .hf-said { max-width: 62ch; }
.help-hero .lg-stamp {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  color: var(--dim);
}
.help-hero .lg-stamp b { color: var(--muted); font-weight: 400; }
.help-hero .lg-stamp span { color: #3a4a58; }
/* ===================== Help: the search line ============================== */
/* .pv-field's pattern -- a visible label, a magnifier, one rule -- because it
   already works on the Card Database and the Pack Value Lab and costs a reader
   nothing new to learn. */
/* display:flex on the rule above outranks the [hidden] attribute's UA rule, so
   without this the field shows anyway when the script has not run -- which is
   the whole thing shipping it hidden was meant to prevent. */
/* The glossary term, in the display face at last. */
/* ===================== Privacy and Terms: the document ==================== */
.lg-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 30px;
}
.lg-rail { position: sticky; top: 84px; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; }
.lg-rail-head {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--dim);
}
.lg-rail a {
  display: block;
  padding: 7px 0 7px 13px;
  border-left: 2px solid rgba(45, 58, 70, .7);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.lg-rail a:hover { color: var(--cyan-ink); border-left-color: rgba(95, 199, 223, .5); }
.lg-rail a.is-here { color: var(--cyan-ink); border-left-color: var(--cyan); }
/* The browser does the scrolling on an anchor click, so the heading has to be
   told to clear the sticky header. Measured rather than guessed: the header is
   112px unstuck, and it only shrinks from there, so 124 leaves a little air at
   its tallest.

   There is no scroll-behavior here on purpose. The first version set it on
   .lg-doc, which does nothing -- that div is not a scroll container, the
   document is -- and setting it on html would change how every page on the site
   scrolls for the sake of two. A native jump is what the rest of the site does. */
.lg-sec { padding: 0 0 28px; scroll-margin-top: 124px; }
.lg-num {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.lg-num i { font-style: normal; color: #3a4a58; }
.lg-h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--ink);
}
.lg-doc p {
  margin: 0 0 11px;
  max-width: 76ch;
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--muted);
}
.lg-doc p:last-child { margin-bottom: 0; }
.lg-doc strong { color: var(--ink); font-weight: 600; }
.lg-doc a { color: var(--cyan); }
@media (max-width: 900px) {
/* The rail becomes a plain contents list above the document. Sticking it to
     the top of a phone would eat a third of the screen on a page that is
     nothing but reading. */
.lg-wrap { grid-template-columns: 1fr; gap: 22px; }
.lg-rail {
    position: static;
    max-height: none;
    padding-bottom: var(--space-9);
    border-bottom: 1px solid var(--line);
  }
.lg-rail a { padding: 9px 0 9px 13px; }
.lg-h { font-size: var(--t-lead); }
}
/* end v784-help-legal */
/* ===========================================================================
   v793 --sage was never a token

   I wrote var(--sage) in three places across the Pack Value Lab conversion.
   It has never existed: styles.css defines --red, --gold, --cyan, --steel and
   --ink, and sage has always been the literal var(--sage) -- see .t-good and
   .dp-slot.dp-sage.

   An undefined custom property makes the whole declaration invalid at
   computed-value time, so:

     .t-good .pv-bar   background: linear-gradient(..., var(--sage))
                       -> backgroundImage: none. The three packs that BEAT
                          their price had no bar at all on production, while
                          every losing pack's bar rendered, because those use
                          a literal rgba. The board's entire finding -- three
                          bars crossing the line -- was invisible.
     .pv-band.is-win   -> inherited ink instead of sage
     .pv-meta .win     -> inherited muted instead of sage

   My verification measured the bar's box width and its box-shadow. Both
   survive an invalid background. The fill was never checked.

   Sage is a real part of the vocabulary, so it becomes a real token rather
   than three more literals. check-design-tokens.mjs now fails on any var(--x)
   the stylesheet never defines.

   v802: --sage's declaration moved to the top :root alongside every other
   colour token (it was the last one still living down here on its own), and
   --green now resolves to it -- see the top :root for why.
   =========================================================================== */
/* --t-h3 is the same bug, on the Advisor's "Looking up X" line: no such token,
   so its font-size declaration is invalid and the lede inherits body size in a
   700-weight display face. A fallback rather than a new token, because I do not
   know what size that line was meant to be and --t-lead is the nearest thing
   the scale already has. */
.pa-lookup-lede { font-size: var(--t-h3, var(--t-lead)); }
/* Two more of the same class, both pre-existing and neither mine:

   --t-h3   .pa-lookup-lede's font-size, so the Advisor's "Looking up X" line
            renders at inherited body size in a 700-weight display face. Given a
            fallback above rather than a new token, because I do not know what
            size it was meant to be.

   --move-strength  .advisor-page .move-strength-panel em's width, set by
            nothing anywhere -- but nothing renders .move-strength-panel either,
            so this is dead CSS rather than a broken bar. Left alone and given a
            fallback only so the declaration is valid and the sweep below stays
            honest about what is actually broken. If that panel is ever built,
            the JS has to set --move-strength or the bar will be zero wide. */
/* end v793-sage-token */
/* v796-import-reveal
   Card Import and Sync Consent, converted to the Broadcast system as one
   component worn by two pages: the M2 "reveal" -- your cards blurred behind
   the gate, easing sharp as steps complete, with the three steps as a single
   connected strip instead of stacked boxes.

   Everything here is scoped to .imx-page. The 82 legacy rules for these pages
   all target .import-guide-* / .import-consent-* descendants, which the new
   markup simply does not use -- the sheet stays append-only and the old block
   matches nothing. (The mockup that fought those rules instead of sidestepping
   them needed four-class selectors to win; this needs none.)

   Values are lifted from shipped pages, named where they came from:
   - the said block is .pv-say/.pv-fig from the pack hero (v772)
   - the blur tiers extend .gold-gate-content's lock (blur 7px / .36)
   - ticks are 72px fixed: equal marks for equal meaning, whatever the cell width
   - every CTA clears the 44px tap floor */
.imx-page .imx-hero { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 34px;
  align-items: center; padding: 30px 0 8px; }
.imx-page .imx-head { display: flex; align-items: baseline; gap: var(--space-8); }
.imx-page .imx-head .eyebrow { margin: 0 0 10px; }
.imx-page .imx-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-body);
  color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.imx-page .imx-count b { color: var(--sage); font-weight: 600; }
.imx-page .imx-hero h1 { margin: 0 0 18px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; }
.imx-page .imx-say .v { color: var(--imx-tone-ink, var(--gold)); }
.imx-page .imx-fig b { color: var(--ink); font-weight: 600; }
.imx-page .imx-act { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-8); padding: 0 24px;
  border-radius: var(--radius-l); font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(241, 184, 75, .5); background: rgba(241, 184, 75, .13); color: var(--gold); }
.imx-page .imx-act:hover { background: rgba(241, 184, 75, .2); }
.imx-page .imx-act.cy { border-color: rgba(95, 199, 223, .55); background: rgba(95, 199, 223, .14); color: var(--cyan-ink); }
.imx-page .imx-act.cy:hover { background: rgba(95, 199, 223, .22); }
.imx-page .imx-act[disabled] { opacity: .45; cursor: not-allowed; }
/* the triad's page glow (gold: this is the Pro surface) and the easing lock */
.imx-page .dp-triad { --dp-glow-a: rgba(241, 184, 75, .14); --dp-glow-b: rgba(95, 199, 223, .12); }
.imx-page .imx-lock-7 { filter: blur(7px); opacity: .36; pointer-events: none; user-select: none;
  transition: filter .6s ease, opacity .6s ease; }
.imx-page .imx-lock-4 { filter: blur(4.5px); opacity: .55; pointer-events: none; user-select: none;
  transition: filter .6s ease, opacity .6s ease; }
.imx-page .imx-lock-2 { filter: blur(2px); opacity: .8; pointer-events: none; user-select: none;
  transition: filter .6s ease, opacity .6s ease; }
.imx-page .imx-lockline { margin: 4px 0 0; text-align: center; font-family: var(--font-mono);
  font-size: var(--t-small); color: var(--dim); }
/* the strip: three cells on one spine; works as div or ol */
.imx-page .imx-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 34px 0 0; padding: 0; list-style: none; border-top: 2px solid #2d3a46; }
.imx-page .imx-strip.is-arriving { grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.6fr); }
.imx-page .imx-cell { position: relative; margin: 0; padding: 18px 22px 22px 0; }
.imx-page .imx-cell + .imx-cell { padding-left: 22px; border-left: 1px solid rgba(45, 58, 70, .55); }
/* fixed 72px tick: full-width ticks made colour weight track column geometry */
.imx-page .imx-cell::before { content: ""; position: absolute; top: -2px; left: 0; width: 72px; height: 2px;
  background: var(--imx-tick, transparent); }
.imx-page .imx-cell + .imx-cell::before { left: 22px; }
.imx-page .imx-cell.is-done { --imx-tick: rgba(63, 227, 164, .6); }
.imx-page .imx-cell.is-now { --imx-tick: var(--cyan); }
.imx-page .imx-n { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.imx-page .imx-cell.is-done .imx-n { color: var(--sage); }
.imx-page .imx-cell.is-now .imx-n { color: var(--cyan); }
.imx-page .imx-cell h3 { margin: 6px 0 8px; font-family: var(--font-display); font-size: var(--t-lead); font-weight: 700;
  letter-spacing: .01em; color: var(--ink); }
.imx-page .imx-cell p { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
.imx-page .imx-cell.is-done p, .imx-page .imx-cell.is-next p { color: var(--dim); }
.imx-page .imx-cell p b, .imx-page .imx-cell p strong { color: var(--ink); font-weight: 600; }
.imx-page .imx-cell.is-done p b { color: var(--muted); }
.imx-page .imx-cell code { font-family: var(--font-mono); font-size: var(--t-body); color: var(--cyan); }
.imx-page .imx-cell .inline-link { font-size: var(--t-body); }
.imx-page .imx-cell .imx-act { margin-top: var(--space-5); }
.imx-page .imx-cell p + p { margin-top: var(--space-3); }
/* consent controls, set as content rather than a card */
.imx-page .imx-result b, .imx-page .imx-result strong { color: var(--ink); font-weight: 600; }
/* the optional performance consent: severable, its own quiet fold */
/* trust line + folds + manage + legal */
.imx-page .imx-wire b { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cyan); margin-right: var(--space-2); }
.imx-page .imx-wire .mono { font-family: var(--font-mono); color: var(--steel); }
.imx-page .imx-mbtn { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px;
  background: none; color: var(--muted); font-family: var(--font-display); font-size: var(--t-small);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.imx-page .imx-mbtn[disabled] { opacity: .45; cursor: not-allowed; }
.imx-page .imx-mbtn.danger { color: var(--red); border-color: rgba(255, 101, 124, .4); }
.imx-page .imx-legal { margin: 22px 0 56px; max-width: 78ch; font-size: var(--t-small); line-height: 1.7; color: var(--dim); }
@media (max-width: 1271px) {
/* Not 1080px: the triad column is a flat 620px that never yields, and these
     pages sit on the 1240px account-page shell, so it stops growing at a 1272px
     viewport. Between 1081 and 1271 the copy was squeezed to ~400px beside a
     620px triad -- the decoration outweighing the thing the page is for. */
.imx-page .imx-hero { grid-template-columns: 1fr; }
.imx-page .imx-hero .dp-triad, .imx-page .imx-lockline { display: none; }
}
@media (max-width: 900px) {
.imx-page .imx-strip, .imx-page .imx-strip.is-arriving { grid-template-columns: 1fr; border-top: 0; }
.imx-page .imx-cell { border-top: 2px solid #2d3a46; padding-right: 0; }
.imx-page .imx-cell + .imx-cell { padding-left: 0; border-left: 0; }
.imx-page .imx-cell::before, .imx-page .imx-cell + .imx-cell::before { left: 0; }
}
/* end v796-import-reveal */
/* v799-inventory-board
   Inventory Dashboard, converted: the Card Database's kit pointed at the
   member's own cards. Search line + one Refine control + dense rows that
   open a dock of plain sentences, under the reveal hero whose triad is the
   member's actual top three -- the same three cards the import page promises.

   Scoped to .inv-page on a main that keeps .inventory-page only for its
   shipped width rule; every other legacy .inventory-* rule targets component
   classes this markup never uses. The cdb-* classes used here are the
   Database's shipped ones, reused verbatim -- someone who has driven that
   page already knows how to drive this one. */
.inv-page .inv-hero .eyebrow { margin: 0 0 10px; }
.inv-page .inv-said.is-loaded { border-top-color: rgba(63, 227, 164, .4); }
.inv-page .inv-say .v { color: var(--cyan); }
.inv-page .is-loaded .inv-say .v { color: var(--sage); }
.inv-page .inv-fig b { color: var(--ink); font-weight: 600; }
.inv-page .inv-band b { color: var(--ink); font-weight: 600; }
.inv-page .inv-band .sg { color: var(--sage); }
.inv-page .inv-band .gd { color: var(--gold); }
/* onboarding controls, inside the empty-state said block */
.inv-page .inv-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-8); padding: 0 24px;
  border: 1px solid rgba(95, 199, 223, .55); border-radius: var(--radius-l); background: rgba(95, 199, 223, .14);
  color: var(--cyan-ink); font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.inv-page .inv-go:hover { background: rgba(95, 199, 223, .22); }
.inv-page .inv-mbtn { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px;
  background: none; color: var(--muted); font-family: var(--font-display); font-size: var(--t-small);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.inv-page .inv-mbtn.go { min-height: 44px; border-color: rgba(95, 199, 223, .55);
  background: rgba(95, 199, 223, .14); color: var(--cyan-ink); }
.inv-page .inv-mbtn.danger { color: var(--red); border-color: rgba(255, 101, 124, .4); }
/* the find line (shipped cdb-line/cdb-field) + refine */
.inv-page .cdb-count b { color: var(--ink); }
/* the board */
.inv-page .inv-row:hover, .inv-page .inv-row:focus-visible { background: rgba(95, 199, 223, .04); }
/* OVR and the owned count are answers, not captions: --muted measured 7.42:1
   here, which passes AA and still read as grey mush across a long list. The
   token comment is explicit that --ink is for "numbers that carry the answer",
   and these carry one. */
.inv-page .inv-num.is-ink { color: var(--ink); }
/* the dock */
.inv-page .inv-dock.t-sell, .inv-page .inv-dock.t-quick { --dock: var(--sage);
  background: linear-gradient(160deg, rgba(63, 227, 164, .05), transparent 55%), rgba(15, 24, 33, .6); }
.inv-page .inv-dock.t-exchange { --dock: var(--gold);
  background: linear-gradient(160deg, rgba(241, 184, 75, .05), transparent 55%), rgba(15, 24, 33, .6); }
.inv-page .inv-dock .figs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: var(--t-body); color: var(--dim); font-variant-numeric: tabular-nums; }
.inv-page .inv-dock .acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.inv-page .inv-foot .inline-link { font-size: var(--t-small); }
@media (max-width: 1311px) {
/* Not 1080px, and not the 1271px the imx pages use: same flat 620px triad
     column, but .inventory-page sits on the wider 1280px shell, so this hero
     does not stop growing until a 1312px viewport. */
.inv-page .inv-hero .dp-triad, .inv-page .inv-capline { display: none; }
}
/* end v799-inventory-board */
/* v800-program-deck
   Program Planner and Program Path, converted. The planner answers in the order
   a good analyst talks: the CALL in one sentence, then the CONTROLS, then the
   BOARD that produced it -- so a reader can disagree with the reasoning rather
   than the conclusion.

   Nothing here uses a native <select>. styles.css:3516 gives every bare select
   the pre-Broadcast field look at width:100%, so dropping one into a converted
   page silently renders the old design -- which is exactly what the first pass
   at this conversion did.
*/
/* ---- the controls are Pulse Rankings' shipped deck, not a new invention ----
   .pr-deck / .pr-deckhead / .pr-sorts / .pr-sort / .pr-positions are all
   UNSCOPED in styles.css -- the same reusable-kit situation as cdb-*. Rankings
   is the page this site does best, so the planner asks its question in exactly
   Rankings' words: a bordered deck, a micro-caps header, choices as cells in a
   hairline grid that EXPLAIN THEMSELVES, active marked by a cyan top bar and a
   cyan label rather than a filled pill, and secondary filters as outline pills
   that activate by border.

   The first pass invented filled segmented pills instead. They were not the
   legacy gradient, but they were not this either -- a third dialect on a site
   that already had one. Only two lines below are mine: the rail carries four
   goals rather than Rankings' five, and the mode tabs, which Rankings has no
   equivalent of because it has only one mode.

   What makes the deck ALIVE is not the frame, it is the content: every cell
   carries --pr-tile-art (the art of the answer that choice would give, washed
   behind at .16 and .42 when active) plus a .pr-sort-ans thumbnail, name and
   figure. A cell is a PREVIEW OF THE ANSWER, not a labelled box. The pass
   before this one rendered <b> and <small> only -- the skeleton with nothing
   in it -- which is exactly why it read as plain colourless boxes. The
   position pills carry --board-card-art the same way.

   COLOUR COMES FROM THE KIND OF QUESTION, NOT FROM WHICH CELL IS ACTIVE. Every
   choice declares one: pr-k-quality is cyan (how good it is), pr-k-money is
   gold (what it costs), pr-k-coll is sage (what you cannot buy). Active
   brightens INSIDE its own family -- inset 0 3px 0 var(--gold) for a money
   cell, not cyan -- and even the answer's figure line takes the family colour.
   That is the site's one-meaning-per-colour vocabulary applied to a control,
   and it means the rail is readable before you have touched anything: on
   Rankings, "Closest for less" and "Under 25,000" are gold because they are
   price questions and "No-sell only" is sage because it is a collection one.
   Earlier passes here made every header cyan-when-active and grey otherwise,
   which threw all of that away. Ours map cleanly: Squad and Fast rewards are
   quality, Collections is coll, Stubs is money -- and on the route rail,
   Cheapest is the money question. */
/* Scoped to the width the arity override is FOR. The deck already ships its
   own breakpoints -- 2 columns at <=1060, 1 column at <=640 -- and a bare
   `.pg-page .pr-deck .pr-sorts` is three classes with no media query, so it
   outranked both and pinned four columns all the way down to 375px, where the
   cells measured 76px and a label plus a sentence had nowhere to go. Overriding
   one property of a responsive component means scoping the override to that
   component's own range, or its responsiveness is silently switched off. */
/* TIGHTENED. Measured against Rankings: its cells are 238x190. Mine were the
   same 190 tall but 310 wide, because four columns share the width Rankings
   gives to five -- so every cell carried ~70px of air its content never used.
   The height came from two things sized for Rankings' needs, not ours: a 52x73
   thumbnail, and min-height:34px on the description so five differently-worded
   sentences line up. Our four descriptions are all one line, so that reserve is
   pure dead space. Smaller thumb, no reserve, tighter padding: ~190 -> ~140. */
.pg-page .pr-deck .pr-sort { padding: 12px 14px 13px; }
.pg-page .pr-sort-ans img, .pg-page .pr-sort-ans .pr-sort-noart { width: 38px; height: 53px; }
/* ---- reward mode: the same components asking a different question ---- */
.rw-route.is-pick .rw-bar { background: linear-gradient(90deg, rgba(63,227,164,.3), var(--sage)); }
/* end v800-program-deck */
/* v801-program-path
   The path page's own pieces. The planner's console conversion is a separate,
   larger job (518 lines of render layer across five functions plus the reward
   finder's sub-renderers); this block covers program.html only, which is a
   clean 262-line renderer and the page that carries the organic traffic --
   roughly one landing page per live program. */
.pg-page .pa-2xp b { color: var(--gold); font-weight: 600; }
/* end v801-program-path */
/* v804-inventory-scale
   A full collection is ~2,000 rows with card art. Rendering all of them into
   innerHTML froze the page, and render() runs on every keystroke, so the search
   box was unusable. Rows now come 100 at a time; these are the affordances for
   that, plus the last-successful-sync line the foot was missing. */
.inv-page .inv-foot .inv-sync { color: var(--sage); font-weight: 600; }
.inv-page .inv-foot .inv-syncat { color: var(--dim); }
/* end v804-inventory-scale */
/* v806-inventory-legible
   Two things Jason flagged on the Inventory board, and they are the same
   mistake in two places.

   1. TYPE. The board's own figures -- OVR, owned, liquid, the call -- were at
      --t-small/--t-body, 12 and 13px. That scale is for captions, and these
      are the page's primary data: the numbers a member came to read. They now
      sit at --t-base (15px), the size the design system calls "default body".
      Spacing is untouched, so nothing grows; the type just stops whispering.

   2. COLOUR. The Refine panel's call filters were uniform grey, while the
      board beside them already colours every call -- Sell sage, Hold steel,
      Squad cyan, Exchange gold. A filter for "Sell" that is not sage makes the
      reader learn the vocabulary twice. Same rule as the deck's kinds, in
      another place: colour comes from meaning, and it reads before you touch
      anything. The buttons already carry data-value, so this needs no JS. */
/* the shared Refine controls, on every page that uses them */
.cdb-opt { font-size: var(--t-base); padding: 8px 14px; }
.cdb-lab { font-size: var(--t-base); }
/* the call filters wear their call's colour */
.inv-page .cdb-panel [data-filter="action"][data-value="sell"],
.inv-page .cdb-panel [data-filter="action"][data-value="quick"] { color: #7fcfae; }
.inv-page .cdb-panel [data-filter="action"][data-value="hold"],
.inv-page .cdb-panel [data-filter="action"][data-value="watch"] { color: #a8bccb; }
.inv-page .cdb-panel [data-filter="action"][data-value="collect"],
.inv-page .cdb-panel [data-filter="action"][data-value="squad"] { color: #8fd6e8; }
.inv-page .cdb-panel [data-filter="action"][data-value="exchange"] { color: #dbb264; }
.inv-page .cdb-panel [data-filter="action"][data-value="sell"].is-on,
.inv-page .cdb-panel [data-filter="action"][data-value="quick"].is-on {
  border-color: var(--sage); color: #7cf0c4; background: rgba(63, 227, 164, .1); }
.inv-page .cdb-panel [data-filter="action"][data-value="hold"].is-on,
.inv-page .cdb-panel [data-filter="action"][data-value="watch"].is-on {
  border-color: var(--steel); color: var(--ink); background: rgba(138, 162, 181, .12); }
.inv-page .cdb-panel [data-filter="action"][data-value="exchange"].is-on {
  border-color: var(--gold); color: #ffd47a; background: rgba(241, 184, 75, .1); }
/* the board's figures, at reading size */
/* end v806-inventory-legible */
/* v807-column-hierarchy
   v806 lifted the board's figures to 15px, which was right, and lifted the
   COLUMN HEADERS with them, which was not: a header set at the same size as
   the value under it stops reading as a header at all. The complaint was that
   the data whispered, so the data is what should have grown.

   Headers go back to the micro-label tier and lean into being labels -- 11px,
   condensed, wider tracking, dim -- so the contrast against 15px mono figures
   is unmistakable. Same treatment the Card Database's column strip uses. */
/* The column strip was --dim knocked back a further 10%, landing at 5.15:1 --
   under the floor once the opacity is folded in. Labels sit at --muted (7.42:1)
   and keep their hierarchy through size and tracking, not through fading. */
/* end v807-column-hierarchy */
/* v808-planner-console
   The Program Planner console, converted. The page now answers in the order a
   good analyst talks -- the call, the controls, the board -- and both modes
   share those three surfaces: session mode ranks programs for tonight, reward
   mode states the route to one card. The deck is Rankings' shipped component
   (see check-deck-kind-colours.mjs for the rule its cells obey). */
.pg-page .cdb-count b { color: var(--ink); }
.pg-page .pg-status { margin: 10px 0 0; font-family: var(--font-mono);
  font-size: var(--t-small); color: var(--dim); }
/* board rows are buttons here (they pick a program), so strip the button skin */
.pg-page .pc-row { width: 100%; text-align: inherit; border: 0;
  border-bottom: 1px solid rgba(45, 58, 70, .45); background: none; font: inherit;
  color: inherit; cursor: pointer; }
.pg-page .pc-row:hover, .pg-page .pc-row:focus-visible { background: rgba(95, 199, 223, .04); }
.pg-page .pc-row .pc-why { text-align: left; }
.pg-page .pc-foot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.pg-page .pc-noart { display: grid; place-items: center; width: 42px; height: 56px;
  border: 1px dashed rgba(45, 58, 70, .9); border-radius: var(--radius-m);
  font-family: var(--font-mono); font-size: var(--t-base); color: var(--dim); }
/* end v808-planner-console */
/* v809-board-earns
   The board's right column is what you EARN, not a stubs-an-hour bar. Measured
   on the live catalog, 135 programs yield seven distinct rates (83 share one)
   and none fall below the break-even line the bars were drawn against, because
   both time and stub value come from category templates rather than per-program
   data. The reward card is the thing that actually differs. */
.pg-page .pc-row { grid-template-columns: 42px minmax(0, 1.15fr) minmax(0, 1fr); }
.pg-page .pc-earn { font-family: var(--font-display); font-size: var(--t-base);
  font-weight: 600; letter-spacing: .01em; color: var(--gold); text-align: right; }
.pg-page .pc-earn small { display: block; font-family: var(--font-mono);
  font-size: var(--t-small); font-weight: 400; letter-spacing: 0; color: var(--dim); }
.pg-page .pc-row .pc-why { grid-column: 2 / -1; }
@media (max-width: 760px) {
.pg-page .pc-row { grid-template-columns: 36px minmax(0, 1fr); }
.pg-page .pc-earn { grid-column: 2; text-align: left; margin-top: var(--space-1); }
}
/* end v809-board-earns
*/
/* ==========================================================================
   CARD ADVISOR -- the read surface (v813)
   --------------------------------------------------------------------------
   Scoped to .adv, which sits alongside .advisor-page on <main>. The page keeps
   its Watchlist, Compare, Newest, Matches and Help sections on the old markup;
   everything here replaces only the lookup and the answer.
   ========================================================================== */
/* C1 · THE SWITCHBOARD
   =========================================================================
   No Quick/Deep toggle. The card is always there, and the sections under it
   are not a scroll -- they are five ANSWER TILES, each already showing the
   number it would open with. You read the tiles, and you open the one you
   actually care about. One is open at a time, so the page never grows past
   about a screen and a half.

   That is the Card page's move (Beltran): art, a sentence, clear CTAs, and
   related things as tiles you can see before you commit to them. A tile that
   already tells you "buy now 174,999" is a better navigation control than a
   tab labelled "Market", because you may not need to open it at all.

   Card art: 200px. Bigger than the 116px strip that felt like a footnote,
   smaller than the 240px poster that pushed everything below the fold. */
.adv .cd { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--space-14); align-items: start;
  margin: 26px 0 0; }
.adv .cd-art { position: relative; }
.adv .cd-art img { width: 100%; height: auto; display: block; border-radius: 10px;
  box-shadow: 0 26px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); }
.adv .cd-nm span { font-family: var(--font-mono); font-size: .42em; font-weight: 500; color: var(--steel);
  margin-left: var(--space-5); vertical-align: .28em; letter-spacing: 0; }
/* the verdict: a sentence, then the number, the way the Card page reads */
.adv .vd .w { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700;
  line-height: 1; color: var(--sage); }
/* The verdict word takes the WINNING PATH'S KIND, exactly like the ladder
   label under it and the tile above it. There was no .k-sell rule, so "Sell
   him." fell through to the base sage and rendered the same green as "Collect
   him." -- while SELL in the ladder two lines below was gold. Money paths
   (sell / flip / quick sell) are gold, quality (keep) cyan, collection sage:
   the guarded pr-k-* vocabulary, one meaning per colour. */
.adv .vd.k-sell .w, .adv .vd.k-flip .w, .adv .vd.k-quick .w { color: var(--gold-ink); }
.adv .vd.k-keep .w { color: var(--cyan-ink); }
.adv .vd.k-collect .w { color: #5ce9b3; }
.adv .vd .n { font-family: var(--font-mono); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.adv .vd .u { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .cd-line { margin: 0 0 4px; max-width: 60ch; font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.adv .cd-why { margin: 8px 0 0; max-width: 60ch; font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
/* where he sits at his position -- the Card page's percentile rail */
.adv .pctl-tr i { position: absolute; top: -6px; width: 3px; height: 16px; border-radius: 2px; background: var(--cyan);
  box-shadow: 0 0 12px rgba(95,199,223,.8); }
.adv .pctl-k b { color: var(--cyan); font-weight: 500; }
.adv .go { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 48px; padding: 0 26px; border-radius: 9px;
  border: 1px solid rgba(95,199,223,.4); background: var(--cyan); color: #061016; box-shadow: 0 12px 30px rgba(95,199,223,.22);
  font-family: var(--font-display); font-size: var(--t-base); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; }
.adv .go2:hover { border-color: rgba(95,199,223,.5); color: var(--ink); }
.adv .meter { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
/* THE SWITCHBOARD: tiles that answer before you open them */
/* auto-fit, so the row fills whatever number of tiles it has -- three now,
   four when Trend joins, without a hardcoded count to update. */
.adv .sw { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--space-4); margin: 34px 0 0; }
.adv .tile { position: relative; display: flex; flex-direction: column; gap: 0; min-height: 104px;
  padding: 14px 16px 15px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--field); transition: border-color .16s, background .16s; }
.adv .tile:hover { border-color: rgba(95,199,223,.45); background: #0c141d; }
.adv .tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.adv .tile .k { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.adv .tile .v { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 1.28rem; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.adv .tile .s { margin-top: auto; padding-top: var(--space-3); font-size: var(--t-small); color: var(--dim); line-height: 1.35; }
.adv .tile .car { position: absolute; right: 14px; bottom: 13px; font-size: var(--t-micro); color: var(--dim); transition: transform .18s; }
.adv .tile.on { border-color: var(--cyan); background: #0b1520; box-shadow: inset 0 2px 0 var(--cyan); }
.adv .tile.on .k { color: var(--cyan); }
.adv .tile.on .car { transform: rotate(180deg); }
/* Each tile's figure takes its own meaning's colour, so the row is readable
   before anything is opened. */
.adv .tile.t-rate .v { color: var(--cyan); }
/* the opened panel */
.adv .pane { margin: 14px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.adv .pane-h h2 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); font-weight: 700;
  letter-spacing: .01em; color: var(--ink); }
.adv .pane-h span { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .pth { display: grid; grid-template-columns: 132px minmax(0,1fr) 150px 74px; gap: 0 20px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid rgba(45,58,70,.45); }
.adv .pth.win { border-left: 3px solid var(--sage); padding-left: var(--space-7); margin-left: -19px; }
.adv .pth .pn { font-family: var(--font-display); font-size: 1.26rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.adv .pth.k-money .pn { color: var(--gold-ink); }
.adv .pth.k-coll .pn { color: #5ce9b3; }
.adv .pth.k-quality .pn { color: var(--cyan-ink); }
.adv .pth.k-off .pn { color: var(--steel); }
.adv .pth .pn small { display: block; font-family: var(--font-mono); font-size: var(--t-small); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--dim); margin-top: 2px; }
.adv .pth p { margin: 0; font-size: var(--t-base); line-height: 1.55; color: var(--muted); }
.adv .pth p b { color: var(--ink); font-weight: 600; }
.adv .pth .fig { font-family: var(--font-mono); font-size: 1.24rem; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv .pth .fig small { display: block; font-size: var(--t-small); color: var(--dim); }
.adv .pth.win .fig { color: var(--sage); }
.adv .pth .tg { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-align: right; color: var(--dim); }
.adv .pth.win .tg { color: var(--sage); }
.adv .mk { display: grid; grid-template-columns: 150px minmax(0,1fr) 120px; gap: 0 18px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(45,58,70,.4); }
.adv .mk dt { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--dim); }
.adv .mk p { margin: 0; font-size: var(--t-base); line-height: 1.55; color: var(--muted); }
.adv .mk .fig { font-family: var(--font-mono); font-size: var(--t-base); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv .mk .fig.sg { color: var(--sage); }
.adv .mk .fig.dn { color: var(--red); }
.adv .mk .fig.gd { color: var(--gold); }
/* the situation: chips that wrap, not a grid with an orphan row */
.adv .ver { display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; gap: var(--space-6); align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(45,58,70,.4); cursor: pointer; }
.adv .ver:hover { background: rgba(95,199,223,.04); }
.adv .ver img { width: 46px; height: 65px; border-radius: var(--radius-s); display: block; }
.adv .ver .nm { font-size: var(--t-base); color: var(--ink); font-weight: 600; }
.adv .ver .nm small { display: block; font-family: var(--font-mono); font-size: var(--t-small); font-weight: 400; color: var(--dim); }
.adv .ver .ov { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 700; color: var(--cyan); }
.adv .ver .pr { font-family: var(--font-mono); font-size: var(--t-body); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
/* The source note is prose for players, so it is set like prose. Monospace
   made a plain-English sentence look like a log line. */
.adv .foot { margin: 26px 0 60px; max-width: 72ch; font-family: var(--font-body);
  font-size: var(--t-body); line-height: 1.7; color: var(--dim); }
/* search */
.adv .pick { position: relative; }
.adv .pick-list .nm { font-size: var(--t-base); color: var(--ink); font-weight: 600; }
.adv .pick-list .nm small { display: block; font-family: var(--font-mono); font-size: var(--t-small); font-weight: 400; color: var(--dim); margin-top: 2px; }
.adv .pick-list .ov { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--cyan); }
.adv .pick-list .pr { font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 8ch; text-align: right; }
.adv .st { margin: 12px 0 0; font-family: var(--font-body); font-size: var(--t-small); color: var(--dim); min-height: 1.3em; }
.adv .st.err { color: var(--red); }
.adv [hidden] { display: none !important; }
/* Four tiles, so this drops to a 2x2 rather than 3-plus-an-orphan. */
@media (max-width: 1100px) {
.adv .sw { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
.adv .cd { grid-template-columns: 150px minmax(0,1fr); gap: 22px; }
.adv .sw { grid-template-columns: repeat(2, minmax(0,1fr)); }
.adv .pth { grid-template-columns: minmax(0,1fr) 120px; }
.adv .pth p { grid-column: 1 / -1; margin-top: var(--space-1); }
.adv .pth .tg { grid-column: 2; }
.adv .mk { grid-template-columns: minmax(0,1fr) 110px; }
.adv .mk dt { grid-column: 1 / -1; }
.adv .sc { min-height: 56px; }
}
/* ---- the lookup, inside the hero ----------------------------------------
   Three things had to be fixed to stop this reading as a form bolted onto a
   banner:

   1. It is a SEARCH BAR, not a bare underline. In the hero the shipped
      .cdb-field underline had nothing to sit on and floated over the
      starfield looking unfinished. A soft inset field with a hairline gives
      it a body -- still not a pill, still no fill of its own colour.
   2. The "READ A CARD" label is gone. The hero sentence directly above it
      already says "Search any card", so the label was the third time the page
      said the same thing.
   3. z-index. .tool-hero carries isolation: isolate, so the results list was
      trapped in the hero's stacking context and the card block below painted
      straight over it. The hero gets its own layer instead.

   And the status line: .tool-page .tool-hero p:not(.eyebrow) is specificity
   (0,4,0) -- :not() carries its argument's weight -- so a plain .st at (0,2,0)
   lost and the line rendered at the hero's 16px. Measured, not guessed. */
.adv .tool-hero { position: relative; z-index: 40; }
/* The field adds height to the copy column, and the hero then grew past the
   483px it is on the live page -- with a min-height overshoot on top of the
   62px bottom padding, which read as a dead band under the field. Tightened
   so the copy column fits the space the stage already needs. */
.adv .hero-find .cdb-field { gap: 13px; padding: 0 16px; min-height: 54px; border: 1px solid rgba(95,199,223,.22);
  border-radius: var(--radius-xl); background: rgba(6,11,17,.62); backdrop-filter: blur(6px);
  transition: border-color .18s, background .18s, box-shadow .18s; }
.adv .hero-find .cdb-field:hover { border-color: rgba(95,199,223,.36); }
.adv .hero-find .cdb-field:focus-within { border-color: var(--cyan); background: rgba(6,11,17,.85);
  box-shadow: 0 0 0 3px rgba(95,199,223,.12); }
.adv .hero-find .cdb-mag { width: 20px; height: 20px; stroke: #55697a; transform: none; }
/* Beats .tool-page .tool-hero p:not(.eyebrow) at (0,4,0) with (0,4,1). */
/* ---- the card art is a link to that card's own page ---- */
.adv .cd-art, .adv .r-art, .adv .t-art { position: relative; display: block; overflow: hidden; border-radius: 10px;
  text-decoration: none; }
.adv .r-art { width: 190px; }
.adv .t-art { display: block; }
.adv .cd-art img, .adv .r-art img, .adv .t-art img { transition: transform .22s ease, filter .22s ease; }
.adv .cd-art:hover img, .adv .r-art:hover img, .adv .t-art:hover img { transform: scale(1.02); filter: brightness(1.06); }
.adv .cd-art:focus-visible, .adv .r-art:focus-visible, .adv .t-art:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* The affordance only appears on hover/focus, so the art reads as art until
   you reach for it. */
.adv .cd-art:hover .art-cta, .adv .r-art:hover .art-cta, .adv .t-art:hover .art-cta,
.adv .cd-art:focus-visible .art-cta, .adv .r-art:focus-visible .art-cta, .adv .t-art:focus-visible .art-cta { opacity: 1; transform: none; }
/* .hero-copy ships overflow:hidden, which CLIPPED the results list at every
   width no matter what z-index it carried -- a clip beats a stacking order.
   Making the field a grid child of the hero instead escaped the clip but
   added a whole row: the hero went 483 -> 958px, and matching the live
   hero exactly is the thing that must not move. So the field stays inside
   .hero-copy and the clip is lifted here instead. */
.adv .tool-hero .hero-copy { overflow: visible; }
/* ---- the paths pane is C3's ladder: each rung carries its own arithmetic ----
   The old "The market" tile is gone. Its numbers were only ever in a table
   because they had nowhere else to live; now buy/sell/tax sit under Sell, the
   spread and your risk bar under Flip, and the floor under Quick sell. Open a
   rung and you get that path's working -- not a filing cabinet you have to go
   and search. */
.adv .lad { border-top: 1px solid var(--line); }
.adv .rung { border-bottom: 1px solid rgba(45,58,70,.5); }
.adv .rh { display: grid; grid-template-columns: 26px 140px minmax(0,1fr) 152px 22px; gap: 0 18px; align-items: center;
  width: 100%; min-height: 66px; padding: 12px 0; border: 0; background: none; cursor: pointer; text-align: left; }
.adv .rh:hover { background: rgba(95,199,223,.035); }
.adv .rh .rk { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .rh .pn { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.adv .rung.k-money .pn { color: var(--gold-ink); }
.adv .rung.k-coll .pn { color: #5ce9b3; }
.adv .rung.k-quality .pn { color: var(--cyan-ink); }
.adv .rung.k-off .pn { color: var(--steel); }
.adv .rh .pn small { display: block; font-family: var(--font-mono); font-size: var(--t-small); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--dim); margin-top: 2px; }
.adv .rh .sy { font-size: var(--t-base); line-height: 1.5; color: var(--muted); }
.adv .rh .sy b { color: var(--ink); font-weight: 600; }
.adv .rh .fg { font-family: var(--font-mono); font-size: 1.34rem; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv .rh .cr { font-size: var(--t-small); color: var(--dim); text-align: right; transition: transform .18s; }
.adv .rung.win { box-shadow: inset 3px 0 0 var(--sage); }
.adv .rung.win .rh { padding-left: var(--space-7); }
.adv .rung.win .rh .fg, .adv .rung.win .rk { color: var(--sage); }
.adv .rung.on { background: rgba(95,199,223,.03); }
.adv .rung.on .rh .cr { transform: rotate(180deg); }
.adv .rb { padding: 2px 0 20px 44px; }
.adv .rung.win .rb { padding-left: 60px; }
.adv .rb-w b { color: var(--ink); font-weight: 600; }
.adv .ar { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 0 18px; align-items: baseline; max-width: 470px; padding: 8px 0; }
.adv .ar + .ar { border-top: 1px solid rgba(45,58,70,.4); }
.adv .ar dt { font-size: var(--t-base); line-height: 1.45; color: var(--muted); }
.adv .ar dt small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .ar dd { margin: 0; font-family: var(--font-mono); font-size: 1.04rem; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv .ar.neg dd { color: var(--red); }
.adv .ar.tot { margin-top: var(--space-2); padding-top: 11px; border-top: 1px solid #3d5063; }
.adv .ar.tot dt { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.adv .ar.tot dd { font-size: 1.4rem; font-weight: 600; color: var(--sage); }
.adv .rung.k-off .ar.tot dd, .adv .rung.k-quality .ar.tot dd { color: var(--ink); }
.adv .rung.win .rb-go { border-color: rgba(95,199,223,.4); background: var(--cyan); color: #061016; box-shadow: 0 10px 24px rgba(95,199,223,.2); }
.adv .rb-go:hover { border-color: rgba(95,199,223,.5); color: var(--ink); }
@media (max-width: 760px) {
.adv .rh { grid-template-columns: 22px minmax(0,1fr) 116px 18px; }
.adv .rh .sy { grid-column: 1 / -1; margin-top: var(--space-1); }
.adv .rb { padding-left: 22px; }
.adv .rung.win .rb { padding-left: 30px; }
.adv .ar { grid-template-columns: minmax(0,1fr) 110px; }
}
/* ---- polish: get the one action onto the first screen ----
   Measured at 1270x900 the CTA sat at y=968 -- 68px below the fold. The card
   block and the tile row were each carrying a 26-34px margin that the layout
   did not need once the search moved into the hero. */
/* 4px was chasing the fold and it left the card crowded right up against the
   hero's bottom edge. Moving the identity under the art freed ~50px in the
   right column, so the section can have real separation and the CTA still
   lands on the first screen. */
.adv .cd { margin-top: 34px; gap: 34px; }
.adv .cd-why { margin-top: var(--space-7); }
.adv .sw { margin-top: 22px; }
.adv .pane { margin-top: var(--space-5); padding-top: var(--space-8); }
/* ---- colour logic, reconciled with the rest of the site ------------------
   THE RATING bars now inherit the shipped .cp-t0..t5 tones from styles.css --
   the same ladder the Card page uses, declared bare there precisely so other
   pages can share it. Elite/Strong/Depth/Low come from the metric's own tier
   (server.mjs diamondPulseTier), so the colour always agrees with the word
   printed beside it. Before this every bar was sage-or-steel, which is the
   binary the Card page's own comment calls out as a bug it already fixed.

   THE TILE ROW, one meaning per colour:
     Every path      the winning path's kind  (gold sell/flip/quick,
                                               cyan keep, sage collect)
     The rating      cyan   -- a quality question, same as pr-k-quality
     Your situation  cyan only once you have changed something; the site uses
                     cyan for "ours / interactive", and untouched defaults are
                     not a value worth colouring
     Other versions  ink    -- a count, not a judgement */
/* NOT `.adv .at { --tone: ... }` -- that is (0,2,0) and would beat the bare
   .cp-t5 (0,1,0) the tone actually comes from, which silently painted every
   bar steel. The default belongs in the var() fallback, where it loses to a
   real tier. */
.adv .at span em { font-style: normal; font-family: var(--font-display); font-size: var(--t-micro);
  font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--tone, var(--dim));
  margin-left: 9px; opacity: .95; }
.adv .at span small { color: var(--dim); }
.adv .tile.t-sell .v, .adv .tile.t-flip .v, .adv .tile.t-quick .v { color: var(--gold-ink); }
.adv .tile.t-keep .v { color: var(--cyan-ink); }
.adv .tile.t-collect .v { color: #5ce9b3; }
.adv .tile.t-rate .v { color: var(--cyan); }
.adv .tile.t-set .v { color: var(--cyan); }
/* ---- the rating block, in the Card page's own .cp-attr shape -------------
   A full-width bar was spending ~1,300px to express a 0-99 value while the
   label column was pinned at 210px and wrapping "Collection Value Rank" onto
   two lines. The shipped answer already exists: label and value on one line,
   the bar as a hairline beneath them, several to a row. Same structure and the
   same .cp-t0..t5 tones, so this block and the Card page cannot drift. */
.adv .ats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 34px; }
.adv .at { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: var(--space-4); align-items: baseline; }
.adv .at span { font-size: var(--t-base); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.adv .at span em { font-style: normal; font-family: var(--font-display); font-size: var(--t-micro);
  font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--tone, var(--dim)); margin-left: var(--space-3); }
.adv .at span small { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); margin-left: var(--space-2); }
.adv .at b { font-family: var(--font-mono); font-size: var(--t-base); text-align: right;
  color: var(--tone, var(--ink)); font-variant-numeric: tabular-nums; }
.adv .at i { grid-column: 1 / -1; display: block; height: 4px; border-radius: var(--radius-pill);
  background: rgba(45,58,70,.8); overflow: hidden; margin-top: 5px; }
/* The bars grow in when the Rating tab opens. renderPane() replaces the pane's
   innerHTML, so these are brand-new nodes every time it is opened -- the
   animation fires on its own and needs no JS at all.

   scaleX, not width: transform runs on the compositor, so eight bars growing
   together never triggers layout or paint. Measured at 0ms of main-thread
   blocking (see below). Animating width would have been correctness-neutral
   and cost a layout pass per frame per bar. */
.adv .at i u { display: block; height: 100%; width: 100%; border-radius: var(--radius-pill);
  background: var(--tone, var(--steel)); transform-origin: left center;
  transform: scaleX(var(--v, 1));
  animation: c1grow .58s cubic-bezier(.2,.85,.25,1) both;
  animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes c1grow { from { transform: scaleX(0); } to { transform: scaleX(var(--v, 1)); } }
@media (prefers-reduced-motion: reduce) {
.adv .at i u { animation: none; transform: scaleX(var(--v, 1)); }
}
/* Elite and Strong are neighbours by design on the Card page, so the top tier
   earns a little light rather than a separate hue. */
.adv .at.cp-t5 i u { box-shadow: 0 0 8px rgba(63,227,164,.55); }
/* ---- the situation chips are dropdowns -----------------------------------
   Click-to-cycle meant up to eight clicks to reach a starter value, and gave
   no way to see what the options were before committing to one. These are a
   custom listbox rather than a native <select> on purpose: styles.css:3516
   carries a global `select { width: 100% }` with pre-Broadcast field chrome,
   so a bare select renders as the old design no matter what is around it. */
/* ---- the situation: inline settings, not a row of boxed chips ------------
   Seven bordered cards with a floating card under them was a lot of furniture
   for what is really a line of settings. The boxes are gone; each is a label
   over its value, separated by a hairline, exactly like the read rail. A value
   you have changed takes ink plus a short cyan underscore -- the same mark the
   rail uses -- so the row reads at a glance without any of them being a
   container.

   The menu is sized to the words in it: 30px rows, body-size type, one
   hairline and a shadow just heavy enough to lift it off the page. It hangs
   flush under the value it belongs to rather than under a card. */
.adv .sit { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adv .scwrap + .scwrap { border-left: 1px solid rgba(45,58,70,.55); }
.adv .sc { display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  width: 100%; min-height: 62px; padding: 11px 15px 13px; border: 0; border-radius: 0;
  background: none; cursor: pointer; text-align: left; transition: background .16s; }
.adv .scwrap:first-child .sc { padding-left: 0; }
.adv .sc:hover { background: rgba(95,199,223,.05); }
.adv .sc:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.adv .sc .k { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.adv .sc .v { display: inline-flex; align-items: baseline; gap: 7px; position: relative;
  font-size: var(--t-base); line-height: 1.2; color: var(--steel); padding-bottom: var(--space-1); }
.adv .sc .v i { font-style: normal; font-size: .58em; color: var(--dim); transition: transform .16s; }
.adv .sc.set .k { color: var(--cyan); }
.adv .sc.set .v { color: var(--ink); font-weight: 600; }
/* the "you changed this" mark, same as the read rail */
.adv .sc.set .v::after { content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 2px; background: var(--cyan); }
.adv .sc[aria-expanded="true"] .v { color: var(--ink); }
.adv .sc[aria-expanded="true"] .v i { transform: rotate(180deg); color: var(--cyan); }
.adv .scopt:hover, .adv .scopt:focus-visible { background: rgba(95,199,223,.1); color: var(--ink); outline: none; }
.adv .scopt.on { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--cyan); }
@media (max-width: 760px) {
.adv .scwrap:nth-child(odd) { border-left: 0; }
.adv .sc { min-height: 64px; }
}
/* the ranking rail: a scale, stated as one */
.adv .pctl-h span { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.adv .pctl-h b { font-family: var(--font-mono); font-size: var(--t-body); color: var(--cyan); font-weight: 500; }
.adv .pctl-k span { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dim); }
/* The rating tile carries the Pulse signature, so "100.7" reads as OUR number
   rather than a bare figure -- the same mark the triad in the hero uses. */
.adv .tile.t-rate .v { display: inline-flex; align-items: center; gap: 7px; }
.adv .tile.t-rate .pulse-mark { color: var(--cyan); }
/* ---- type review: one hero, one scale, grouped rhythm --------------------
   Measured before this: NINE distinct sizes in 280px (46.4/41.6/33.6/20/19.5/
   15/13/12/11 -- 19.5 and 20 being two sizes nobody can tell apart), three
   near-equal headline weights competing (name 46.4, verdict word 41.6, number
   33.6), and gaps of 4/5/10/13/16/14 which is no rhythm at all: everything
   equally spaced reads as a list rather than a composition.

   1. ONE HERO. The page promises "One card. One answer." -- so the ANSWER is
      the hero and the name is context. The card art already says who it is.
      Name drops 46 -> 30; the verdict keeps the top of the scale.
   2. FIVE SIZES, not nine: 46 hero / 30 name / 17 lede / 13 support / 11 label.
   3. MONO FOR FIGURES ONLY. The why-line moves to Inter in sentence case;
      lowercase monospace prose is what made this read like console output.
   4. GROUPED RHYTHM. 6px inside a unit, 22-26px between units, so the block
      has three beats (who / the call / the evidence) instead of seven. */
/* who -- context, not headline */
/* --t-base, not .62em. At .62em this computed to 17.5px against the lede's
   17px -- two sizes nobody can tell apart, which is the exact fault this pass
   set out to remove. Sitting it on a token keeps it there. */
.adv .cd-nm span { font-size: var(--t-base); font-weight: 500; vertical-align: .1em; margin-left: var(--space-4);
  color: var(--steel); letter-spacing: .02em; }
/* the call -- the one hero */
.adv .vd .w { font-size: clamp(2.2rem, 3.8vw, 2.9rem); line-height: 1; letter-spacing: -.005em; }
.adv .vd .n { font-size: clamp(1.7rem, 2.9vw, 2.35rem); line-height: 1; letter-spacing: -.02em; }
.adv .vd .u { font-size: var(--t-small); color: var(--dim); }
/* the evidence -- one voice, Inter, sentence case */
.adv .cd-line { font-size: 1.06rem; line-height: 1.55; color: var(--muted); max-width: 56ch; margin-bottom: 0; }
.adv .cd-why { margin-top: var(--space-8); max-width: 56ch; font-family: var(--font-body);
  font-size: var(--t-body); line-height: 1.6; color: var(--dim); }
.adv .cd-why b { color: var(--steel); font-weight: 600; }
.adv .meter { font-size: var(--t-small); }
/* ---- identity under the art --------------------------------------------- */
.adv .cd { align-items: start; }
.adv .cd-side .cd-who { margin: 14px 0 4px; }
.adv .cd-side .cd-nm { margin: 0; font-size: clamp(1.32rem, 1.7vw, 1.6rem); line-height: 1.06;
  letter-spacing: .005em; }
/* Under a 200px card the OVR reads better on its own line than trailing a name
   that may already have wrapped. */
.adv .cd-side .cd-nm span { display: block; margin: 6px 0 0; vertical-align: baseline;
  font-family: var(--font-mono); font-size: var(--t-body); letter-spacing: .06em; color: var(--steel); }
/* The verdict now leads its column, so it carries no top offset of its own. */
/* PHONE. `display: contents` on .cd-side was doing real damage here, measured
   at 375px: it promoted the art, the eyebrow and the name to grid items of
   .cd in their own right, so the two-column track stayed in force and

     - the verdict, the CTA, the why-line and the watch-outs were all crammed
       into the 150px ART column, 737px tall;
     - the name auto-placed into row 2 and landed 245px BELOW its own eyebrow,
       because row 1 had been stretched to the height of the card art.

   A phone gets one column. The art and the identity pair up inside .cd-side,
   which keeps them together without the outer grid ever seeing them, and the
   answer gets the full width it needs. */
@media (max-width: 760px) {
.adv .cd { grid-template-columns: minmax(0,1fr); gap: 0; }
/* The art spans both text rows rather than stretching to fill them. */
.adv .cd-side .cd-who { align-self: end; margin: 0 0 5px; }
.adv .cd-side .cd-nm { align-self: start; margin: 0; font-size: 1.42rem; }
.adv .wo, .adv .cd-why, .adv .cd-line { max-width: none; }
}
/* the stubs mark: currency figures only */
.adv .vd .n { display: inline-flex; align-items: center; gap: 9px; }
/* The coin is aligned to the DIGITS, not to the line box. Flexbox centring put
   it 9.3px too high: the flex line is 38px tall at this size but the numerals'
   ink only spans 27px above the baseline, so "centre" landed in the ascender
   space the digits never occupy. Sitting it on the baseline and lifting by half
   the cap height puts its middle through the middle of the numerals, and the em
   unit keeps that true at every clamp step. */
.adv .vd .n { align-items: baseline; }
/* The coin is sized in em, not px. A fixed 20px coin lined up perfectly at the
   1270 figure size and was 3.3px out at 900, because the figure scales with
   clamp() and the coin did not -- so no single offset could hold. Scaling both
   in em makes one offset correct at every step. */
.adv .vd .n .stub-mark { width: .55em; height: .55em; align-self: baseline;
  transform: translateY(0.057em); }
/* ---- the four gaps the old page had and this one did not -----------------

   WATCH-OUTS. Flat prose in the evidence voice, not a bordered card and not a
   colour. Red on this site means loss and gold means price; a caveat is
   neither, so it takes the muted voice and earns attention from position --
   directly under the number it qualifies -- rather than from hue. */
.adv .wo { margin: 12px 0 0; max-width: 62ch; font-family: var(--font-body);
  font-size: var(--t-body); line-height: 1.65; color: var(--steel); }
.adv .wo b { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold);
  margin-right: 11px; }
.adv .wo i { font-style: normal; color: #4a5c6b; margin: 0 9px; }
/* WHAT WOULD CHANGE THIS. Sits at the foot of the paths pane because every
   line reorders the ladder above it. */
.adv .mv li b { color: var(--ink); font-weight: 600; }
/* THE PLAYER. Attribute groups reuse .ats/.at whole -- same rows, same growing
   bars, same six .cp-t tones -- so the block is the rating block's sibling
   rather than a second way of drawing a rating. Only the grouping is new. */
.adv .agrp + .agrp { margin-top: var(--space-10); }
/* The peek figure takes its own rating's tier colour, off the shipped ladder. */
.adv .tile.t-attr .v { color: var(--tone, var(--ink)); }
/* THE FORM BLOCK is the Card page's .cp-form, unmodified. It only needs a
   little air under it before the ratings start. */
.adv #cForm { margin: 0 0 26px; }
.adv #cForm .cp-prose { margin: 0; max-width: 74ch; font-size: var(--t-base); line-height: 1.6; color: var(--muted); }
/* ROLE FIT leads the rating pane on its own line: it is ranked against the
   cards at his position, while every metric below it is ranked against all
   position players, so it cannot sit in the same grid without the two pools
   being read as one. */
.adv .at.lead { margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.adv .at.lead span { font-size: 1.1rem; color: var(--ink); }
.adv .at.lead b { font-size: 1.1rem; }
.adv .at.lead i { height: 5px; margin-top: 9px; }
/* the sibling-card row, borrowed whole from the Card page */
.adv .vx { margin: 24px 0 0; }
.adv .cp-vxhead { margin: 0 0 10px; }
.adv .cp-vxrow { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
/* ---- the watchlist button, under the identity ----------------------------
   app.js owns the Watchlist panel and builds the saved entry; this is only the
   control. Cyan when it is on, because cyan is "yours / interactive" here. */
.adv .watch { display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-l); border: 1px solid var(--line);
  background: none; color: var(--steel); cursor: pointer; font-family: var(--font-display);
  font-size: var(--t-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .16s, color .16s, background .16s; }
.adv .watch:hover { border-color: rgba(95,199,223,.5); color: var(--ink); }
.adv .watch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.adv .watch.on { border-color: rgba(95,199,223,.55); background: rgba(95,199,223,.1); color: var(--cyan); }
/* ---- market settings -----------------------------------------------------
   The two controls the read surface does not own. Closed by default: most
   readers never touch them, but an override has to be reachable when the live
   feed is stale. Fields are styled explicitly because styles.css carries a
   global `select { width: 100% }` with pre-Broadcast chrome (see the situation
   listbox comment) -- a bare select here would render as the old design. */
.adv .adv-tune { margin: 22px 0 0; border-top: 1px solid var(--line); }
.adv .adv-tune > summary { display: flex; align-items: baseline; gap: var(--space-5); padding: 13px 0;
  cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--t-micro);
  font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.adv .adv-tune > summary::-webkit-details-marker { display: none; }
.adv .adv-tune > summary::after { content: "\25BE"; margin-left: 2px; font-size: .9em; transition: transform .18s; }
.adv .adv-tune[open] > summary::after { transform: rotate(180deg); }
.adv .adv-tune > summary:hover { color: var(--steel); }
.adv .adv-tune > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.adv .adv-tune-hint { margin-left: auto; font-family: var(--font-body); font-size: var(--t-micro);
  letter-spacing: 0; text-transform: none; color: var(--dim); }
.adv .adv-tune-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 26px; padding: 2px 0 20px; }
.adv .adv-tune-f { display: flex; flex-direction: column; gap: var(--space-2); min-width: 168px; }
.adv .adv-tune-f > span { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.adv .adv-tune-f select, .adv .adv-tune-f input { width: 100%; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-l); border: 1px solid var(--line); background: rgba(6,11,17,.62); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--t-body); appearance: none; -webkit-appearance: none; }
.adv .adv-tune-f select { padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, #55697a 50%), linear-gradient(135deg, #55697a 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.adv .adv-tune-f select:focus, .adv .adv-tune-f input:focus { outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(95,199,223,.12); }
.adv .adv-tune-f input::placeholder { color: var(--dim); font-family: var(--font-body); }
.adv .adv-tune-c { display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  font-size: var(--t-body); color: var(--muted); cursor: pointer; }
.adv .adv-tune-c input { width: 16px; height: 16px; accent-color: var(--cyan); }
@media (max-width: 760px) {
.adv .adv-tune-f { min-width: 100%; }
}
/* ---- the free/Pro line ---------------------------------------------------
   Three verdicts a day, unlimited on Pro. What is rationed is being TOLD WHAT
   TO DO; the rating, the paths, the arithmetic and the prices are never gated,
   so the metered state still leaves a full page to read. Nothing is blurred --
   a blurred answer teaches people the tool is stingy, a limit teaches them it
   is good. */
.adv .meter { margin: 12px 0 0; font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .vd.is-metered .w { color: var(--steel); }
.adv .pro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 16px 0 0;
  max-width: 62ch; font-size: var(--t-body); line-height: 1.65; color: var(--muted); }
.adv .pro .gem { color: var(--gold); }
.adv .pro b { color: var(--gold); font-weight: 600; }
.adv .pro a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
   ADVISOR · the bottom half, in Broadcast
   --------------------------------------------------------------------------
   The lower page was carried over untouched from the pre-Broadcast design --
   ~125 legacy rules across 14 namespaces -- so the join was visible: Broadcast
   above, legacy below.

   Two sections are gone rather than restyled:

     Matches      a third view of the same result set. The typeahead already
                  lists it and the chip row already lists the player's other
                  cards; this filtered five rows behind six controls. Replaced
                  by one line to the Database when a search found other people.
     Newest cards never newest. handleNewestApi is cards.slice(0, 18) with no
                  date sort, so it showed the first 18 ALPHABETICALLY. Replaced
                  by suggested searches, which is what a page whose main input
                  is an empty box actually needs.

   What is left reuses shipped kits: help.html's hf-item and link row, the
   Database's row grid, and the pulse-feed marquee mechanic. Scoped under .adv.
   ========================================================================== */
/* ---- section frame ------------------------------------------------------
   A rule and a heading, not a bordered card with a gradient top edge. The old
   panels each being their own container is what made the lower page read as a
   stack of unrelated widgets. */
.adv .mx { margin: 44px 0 0; }
.adv .mx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 0 0 18px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.adv .mx-h h2 { margin: 0; font-family: var(--font-display); font-size: var(--t-title);
  font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.adv .mx-h .mx-sub { font-size: var(--t-body); color: var(--dim); }
.adv .mx-h .mx-r { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }
.adv .mx-h .mx-r b { color: var(--cyan); font-weight: 500; }
/* THE EYEBROW CARRIES THE COLOUR, not the heading.
   Every section heading was ink, so the lower page had no colour logic at all.
   Painting the h2 instead would be worse: cyan, gold and sage each mean a
   specific thing here, and a gold "Newest cards" would be claiming the section
   is about price. So the heading stays ink -- it is a label, not a value -- and
   the eyebrow above it takes the meaning:
       money  gold   the section is about stubs moving
       yours  cyan   the site's "ours / interactive" colour
       plain  steel  navigation and support carry no verdict */
.adv .mx-eb.is-money { color: var(--gold); }
.adv .mx-eb.is-yours { color: var(--cyan); }
/* ---- suggested searches: the pulse-feed marquee mechanic -----------------
   Same translateX(0 -> -50%) over a duplicated run that the site-wide feed
   strip uses, so there is one ticker idiom on the site rather than two.
   One row instead of a wrapping grid of eight, which is also the cheapest
   thing that can be done about page length. */
@keyframes adv-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* A ticker you cannot catch is a ticker you cannot use. */
.adv .tk-i:hover { border-color: rgba(95,199,223,.45); background: #0c141d; }
.adv .tk-nm b { display: block; font-family: var(--font-body); font-size: var(--t-base);
  font-weight: 600; color: var(--ink); white-space: nowrap; }
/* Sage up, red down -- the site's win/loss vocabulary, used for the one thing
   on this row that is genuinely a gain or a loss. */
@media (prefers-reduced-motion: reduce) {
.adv .tk-run[aria-hidden="true"] { display: none; }
}
/* ---- the Matches replacement: one line ---------------------------------- */
.adv .otherhits a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
/* ---- Watchlist rows: the Database's row grid ---------------------------- */
.adv .mx-row:hover { background: rgba(95,199,223,.05); }
/* Gold is price. A card that never reaches the market has no price, so it says
   so in steel rather than wearing money's colour for a number it hasn't got. */
.adv .mx-pr.is-off { color: var(--steel); }
/* ---- where to go next: a line, not a panel ------------------------------ */
.adv .mx-tools-row a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px;
  border-radius: var(--radius-l); border: 1px solid var(--line); color: var(--steel); text-decoration: none;
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; transition: border-color .16s, color .16s; }
/* ---- questions: help.html's shape ---------------------------------------- */
.adv .mx-faq { max-width: 82ch; }
.adv .mx-faq .hf-item { border-bottom: 1px solid rgba(45,58,70,.5); }
.adv .mx-help-more { margin: 18px 0 0; font-size: var(--t-body); color: var(--dim); }
.adv .mx-help-more a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
/* app.js un-hides the legacy panels itself once its fetches land, so the hidden
   attribute alone does not hold them. The class does: these nodes stay in the
   DOM for app.js to bind and render into, and never paint. */
/* No Rating column when nothing in the list has one -- the saved copy does not
   store pulseRating, so unless the card you are reading happens to be one you
   saved, that column was a row of dashes. */
/* ---- the no-price prompt -------------------------------------------------
   Replaces the standing "Market settings" drawer. That drawer cost 89px closed
   and 122px open on EVERY page view, held a game switch for a mode no other
   page on the site offers, and a sellable checkbox that let you assert a card
   was tradeable when the game says otherwise. What is left is the one control
   that earns its place, on the one card that needs it. */
.adv .nop { margin: 16px 0 0; padding: 15px 17px; max-width: 62ch;
  border: 1px solid rgba(241,184,75,.3); border-radius: 11px; background: rgba(241,184,75,.05); }
.adv .nop p { margin: 0 0 12px; font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
.adv .nop p b { color: var(--gold); font-weight: 600; }
.adv .nop-f button { min-height: 40px; padding: 0 18px; border-radius: var(--radius-l); cursor: pointer;
  border: 1px solid rgba(241,184,75,.45); background: none; color: var(--gold);
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
/* ==========================================================================
   THE DOCK · suggested searches, anchored to the window
   --------------------------------------------------------------------------
   Parked at the foot of the document it was still buried -- you had to reach
   the end of the page to find the thing that tells you what to look at next.
   Above the answer it would have pushed the card down, which is the one thing
   the page is for. So it docks: always there, never in the way, and it is the
   only persistent chrome the page carries now that the section rail is gone.
   ========================================================================== */
.adv-dockpad { }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(6, 11, 17, .92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); }
/* The separator is the site's own feed-strip hairline, not a new one. */
.dock::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(95,199,223,.36), rgba(85,214,165,.18), transparent);
  opacity: .8; }
.dock-in { display: flex; align-items: center; gap: var(--space-7); max-width: 1320px; margin: 0 auto;
  padding: 9px 24px; min-width: 0; }
/* Slimmer than the section version was: this is always on screen, so it takes
   the smallest row that still shows a card, a name and what it did. */
.dock .tk-nm b { font-size: var(--t-body); }
/* Collapsed: the label and the ticker go, the handle stays. */
.dock.is-shut .tk, .dock.is-shut .dock-lab { display: none; }
.dock.is-shut .dock-in { justify-content: flex-end; padding-top: var(--space-2); padding-bottom: var(--space-2); }
@media (max-width: 760px) {
.dock-in { gap: var(--space-4); padding: 7px 14px; }
/* The label is a luxury on a phone; the cards say what they are. */
}
/* ---- the no-sell mark ----------------------------------------------------
   The Show's own no-sell badge, sat on the art the way the game sits it there.
   A bordered box under the card said the same thing in more words and added a
   row to the identity column; this costs no layout at all. Sized in % of the
   art so it holds at 200px on desktop and 132px on a phone. */
/* Type-qualified on purpose: `.adv .cd-art img` sets width:100% at (0,2,1) and
   beat a bare `.adv .cd-ns` at (0,2,0), so the mark rendered 200x200 -- the
   whole card. Measured, not guessed. */
/* It must not ride the art's hover zoom, or the stamp drifts off the corner. */
/* ---- the typeahead, placed against the space that exists ------------------
   The list is absolutely positioned under the field, and on a phone the field
   sits ~519px down the hero: measured at 375x812 the list ran to y=939, past
   the fold before a keyboard opened, and with a keyboard up not one row was
   reachable. So it now caps itself to the visible height (visualViewport, so
   the keyboard counts) and flips above the field when that is where the room
   is. Desktop is unaffected -- there is always room below there. */
/* The index has no prices, so the picker is name / series / OVR. The price
   column it used to carry is on the answer, one click away. */
/* ==========================================================================
   ADVISOR · the empty state
   --------------------------------------------------------------------------
   Before a search the page was a hero followed by two navigation blocks, which
   reads as dead however good the hero is. Nothing new is fetched to fix it:
   the movers payload the dock already pulls becomes a grid, and whatever you
   have read or saved fills a second row.

   The item is the dock's own .tk-i. Only the container changes -- a marquee
   down there, a wrapping grid up here -- so the two can never drift.
   ========================================================================== */
/* ---- the triad was always clickable ------------------------------------
   Three live-picked cards with real ratings and prices sat in the hero,
   already wired to open, and nothing said so. */
.adv .hero-advisor-card:hover { transform: translateY(-4px); filter: brightness(1.07); }
/* ---- start here / pick up ------------------------------------------------
   auto-fill against a floor rather than a fixed count, so the row fills at
   whatever width it gets instead of stranding one card on a line of its own. */
/* 232px gave five columns and ~110px of name, which clipped every one of them
   ("Jacob Mis...", "Ken Singl..."). A card you cannot read the name of is not a
   suggestion. Four across, and the name gets the room. */
/* The dock squeezes this item to 46px because it is always on screen. Up here
   there is room, so it goes back to the roomier version. */
.adv .startgrid .tk-i { min-height: 66px; width: 100%; }
/* A card you read yesterday has no 24h move attached to why you are seeing it,
   so it shows its rating instead -- cyan, because the rating is ours. */
/* The Roadmap/What's-new cross-link lives in the lede as prose, not as a second
   button. It was a standalone CTA under the hero, which competed with the ship
   strip's own "See them all"; moving it into the sentence keeps it crawlable --
   the strip is rendered by JS, so a crawler would otherwise never see the two
   pages reference each other -- without stacking two calls to the same place. */
/* ==========================================================================
   ADVISOR · THE SELL VERDICT SHOWS TWO FIGURES
   --------------------------------------------------------------------------
   A Sell asks for two different numbers and used to print one. The headline
   was sellNet -- what lands in your stubs AFTER the 10% tax -- qualified by
   "stubs, after tax" at 12px beside a 46px figure. On Ohtani that read 186,998
   while The Show asks you to type 207,776; copying the big number lists 20,778
   under the recommendation and pays out 168,298. An 18,700 stub mistake made
   by reading the screen as laid out.

   So: one label each. Gold is price and sage is what you keep, which is what
   those colours mean everywhere else on the site, so the pair needs no legend.

   The tax note rides IN the label rather than under the figure. As a sub-line
   it left the two panels at different heights and pushed the figures apart;
   in the label both numbers share a baseline and the figures grow.
   ========================================================================== */
.adv .twofig .fig { display: grid; align-content: start; gap: 7px;
  padding: 13px 17px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.adv .twofig .fig.is-list { border-color: rgba(241,184,75,.45); background: rgba(241,184,75,.06); }
.adv .twofig .lab { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  line-height: 1; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
/* The mark is sized off the figure, same as the single-number verdict does. */
/* Narrow: stacked, and full width so the two figures still line up on the left
   rather than sitting at two different indents. */
@media (max-width: 560px) {
.adv .twofig .fig { width: 100%; }
}
/* --------------------------------------------------------------------------
   TYPE SCALE ON THE VERDICT BLOCK
   Six elements sat at 11-13px next to a 46px verdict word. Measured, then
   raised so nothing on the block is under 12px -- the same floor the Roadmap
   was brought to. The unit moves from --dim to --steel because it is the line
   that stops someone misreading the figure; it should not be the faintest
   thing near it.
   -------------------------------------------------------------------------- */
.adv .vd .u { font-size: var(--t-body); color: var(--steel); }
/* 12 -> 13 */
/* 13 -> 15 */
.adv .wo { font-size: var(--t-base); }
/* 13 -> 14 */
.adv .wo b { font-size: var(--t-small); }
/* 11 -> 12 */
/* 11 -> 12 */
/* 11 -> 12 */
/* 11 -> 12 */
/* ==========================================================================
   ADVISOR · OTHER VERSIONS, BESIDE THE ANSWER
   --------------------------------------------------------------------------
   The answer column is 1,006px wide and its widest element -- the rank bar --
   is 460px, so the block ended with a 1,240px row holding one 201px chip.
   For 412 players that single chip is the whole content of it.

   The versions now take a third column beside the answer, in space that was
   already empty, so the block does not get taller: measured 468px with one
   version and 468px with three, against 661px today.

   Above RAIL_MAX (four) the rail would run past the bottom of the answer and
   start setting the height itself -- 435px of chips against a 464px column is
   the last size that fits -- so it drops back to the full-width row. The grid
   does both without moving the element: .vx spans every column by default and
   is pulled into column three only when .has-rail is set.
   ========================================================================== */
.adv .cd.has-rail > .vx { grid-column: 3; grid-row: 1; margin: 22px 0 0;
  padding-left: 22px; border-left: 1px solid rgba(45,58,70,.7); }
/* Narrow: there is no room for a third column, so the rail becomes the row it
   would have been anyway. Without this the .has-rail rule outranks the
   single-column layout the mobile block sets and the answer gets crushed. */
@media (max-width: 900px) {
.adv .cd.has-rail > .vx { grid-column: 1 / -1; grid-row: auto;
    padding-left: 0; border-left: 0; margin-top: var(--space-10); }
}
/* ==========================================================================
   THE NAV AND THE PULSE FEED, IN THE SYSTEM'S VOICE
   --------------------------------------------------------------------------
   Every control on this site is Barlow Condensed, uppercase: .go, .go2, the
   eyebrows, the figure labels, the section heads. The primary navigation was
   the one surface still in Inter sentence case -- not by choice, but because
   .site-nav never declared a font-family at all and inherited the body face.

   N1 gives the nav the same spec as .go2, character for character:
   Barlow Condensed 700, uppercase, .05em, --t-base. A row of controls should
   look like the site's other controls. It is also narrower -- the pill goes
   from 657px to 618px, which buys back room at the widths where it crowds.

   Three off-system details go with it. Tracking was .03em, a value used
   nowhere else. The menu title was 13.44px, not a token. And the menu
   DESCRIPTION was weight 700 -- a full sentence of body copy set as bold as
   the heading above it; it drops to 400, which is what body copy is.

   Inside the menu the title keeps the display face but stays sentence case:
   these are names of tools, not labels.
   ========================================================================== */
.site-nav a,
.site-nav button { font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
.nav-link-title { font-family: var(--font-display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .01em; text-transform: none; }
.nav-link-desc { font-family: var(--font-body); font-size: var(--t-small); font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: 1.35; }
/* --------------------------------------------------------------------------
   The pulse feed carried four raw rem values -- .75, .6875, .78, .82 -- none
   of which are tokens, and no font-family, so it inherited Inter too. The
   status word ("LIVE", "ON DEMAND") is a label and takes the label voice; the
   feed NAME ("Pack drop rates") is content and stays in the reading face, one
   weight down from the 700 it was, because a chip label is not a heading.
   Colour is deliberately untouched here -- see the note in the commit about
   --green and --sage both existing.
   -------------------------------------------------------------------------- */
.pulse-feed-title { font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; }
.pulse-feed-chip b { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; }
.pulse-feed-chip strong { font-family: var(--font-body); font-size: var(--t-body); font-weight: 600;
  letter-spacing: normal; }
.pulse-feed-updated { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; }
.pulse-feed-compact { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600;
  letter-spacing: normal; }
.pulse-feed-compact b { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; }
.pulse-feed-compact em { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; }
/* The narrow sizes have to be restated here. They live in a @media block
   earlier in this file, and a later plain rule beats an earlier one inside a
   media query at equal specificity -- so without these the phone layout would
   silently inherit the desktop sizes. */
@media (max-width: 900px) {
.nav-link-title { font-size: 1.06rem; }
.nav-link-desc { font-size: var(--t-body); }
.pulse-feed-title { font-size: var(--t-micro); }
.pulse-feed-chip b { font-size: var(--t-micro); }
.pulse-feed-chip strong { font-size: var(--t-small); }
.pulse-feed-updated { font-size: var(--t-micro); }
}
/* ==========================================================================
   PROGRAM PLANNER -- rebuilt 2026-08-20.
   Replaces ~3,300 lines of planner CSS that had accumulated across 27
   clusters in this file. Markup, class names and rules are all new; nothing
   from the previous planner is reachable from the new page.
   ========================================================================== */
/* ===== Program Planner shell (rebuilt 2026-08-20) ===== */
.pp-call .eyebrow{display:inline-flex;align-items:center;gap: var(--space-4);margin:0 0 16px;padding-left:11px;
 border-left:3px solid var(--cyan);font-family:var(--font-display);font-size:17px;font-weight:700;
 line-height:1.1;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
/* One column. The second track held #programPrize, the finder's big target
   card -- a duplicate of the card the answer panel already shows, which is now
   gone. Nothing else ever occupied it, so leaving the 260px track declared
   reserved dead width on the grind board as well as the finder. */
/* The board and everything above it share one right edge. --board-measure is
   the width .pg2-rows, .rw-rows and the group strip were each hard-coding as
   1020px; the hero was not, so its featured card sat 218px past the board's
   right edge and read as misaligned.
   No max-width on the column itself. Capping it at 944px kept the grind hero's
   card 294px short of the board's right edge below it, which read as a
   misalignment -- the card and the board are the two things on that screen with
   a right edge, so they have to share it.
   The reason for the cap was prose, not layout, so the cap goes on the prose:
   a reading measure for the finder's two sentences, and nothing on the grid. */
.pp-copy{min-width:0}
.pp-link{border:0;background:none;padding:0;color:var(--cyan);cursor:pointer;
 font-family:var(--font-display);font-size:var(--t-base);font-weight:700;letter-spacing:.05em;
 text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.pp-link:hover{color:var(--cyan-ink)}
.pg2-more{margin-top:18px}
/* Holds the art column's width and paints nothing. It used to be a filled
   grey rectangle, which on the Team Affinity rows -- every one of which
   gives a pack or an icon rather than a named card -- read as sixty images
   that had failed to load. The row already says "no card" and "unrated" in
   words; it does not also need an empty frame implying something is missing. */
/* the mode switcher: tabs on the title's own line. One row of chrome instead
   of two, and the control sits in the same place whichever mode is live --
   the old layout pushed the inactive option to the far right, so the way back
   sat on the right in one mode and the left in the other */
.pp-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0 0 22px;
 padding-bottom: var(--space-6);border-bottom:1px solid var(--line)}
.pp-titlerow .eyebrow{margin:0}
/* .lad here is not the planner's ladder (that markup is gone): the advisor's
   "Every path, priced" deck in advisor-read.js renders .lad and takes its grid
   from this rule. It lives on past the kit that grew it. */
.lad{display:grid;gap:10px}
.rw3-lead{display:block}
/* ---- the group filter ----
   The first pass was rounded-999px pills,which is a control style this site
   does not use anywhere: Broadcast is hairlines and condensed caps,and a
   bordered capsule per label turns eight words into eight boxes.

   So the strip is TYPE on a baseline,in the same idiom as the mode switcher.
   The count rides inside the label in mono at tabular width,so switching
   groups cannot make the row reflow. The active mark is a 2px cyan underline
   that grows from the left on hover and settles filled when chosen -- the same
   left-edge language .is-picked uses on the rows below it. ---- */
/* ---- the rewards leaderboard,in the Rankings language ---- */
.rw{padding:2px 0 6px}
.rw-head span:nth-child(5){display:flex;align-items:baseline;gap:8px}
.rw-row.is-picked .rw-rank{color:var(--sage)}
.rw-more{margin-top: var(--space-8);border:0;background:none;color:var(--cyan);cursor:pointer;
 font-family:var(--font-display);font-size:var(--t-base);font-weight:700;letter-spacing:.05em;
 text-transform:uppercase;padding:0;text-decoration:underline;text-underline-offset:4px}
/* ---- G3's lead-in ---- */
.rw3-kick{width:max-content;max-width:100%;margin:0 0 8px;font-family:var(--font-display);
 font-size:var(--t-small);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
 color:var(--dim)}
.rw3-head{margin:0 0 22px;font-family:var(--font-display);font-size:var(--t-title);font-weight:700;
 line-height:1.06;color:var(--ink)}
/* ===== GP_CSS ===== */
/* ---- search. The finder was search-only in principle and had no field in
   practice: the only way in was a card we had already chosen for you. This is
   a rule with type on it rather than a bordered capsule -- the underline is
   the affordance,and it turns cyan on focus. ---- */
.fs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 30px;max-width:760px}
.fs-mark{font-style:normal;font-size:1.1rem;color:#3d5063;transition:color .16s ease}
.fs-field:focus-within .fs-mark{color:var(--cyan)}
/* ===== PG2_CSS ===== */
/* the captions each row used to repeat,written once */
.pg2-row.is-picked .pg2-rank{color:var(--cyan)}
/* the column that sets the order,drawn as well as printed */
.pg2-more{margin-top: var(--space-8);border:0;background:none;color:var(--cyan);cursor:pointer;
 font-family:var(--font-display);font-size:var(--t-base);font-weight:700;letter-spacing:.05em;
 text-transform:uppercase;padding:0;text-decoration:underline;text-underline-offset:4px}
/* ===== the axis head (both modes) =====
   The card is the axis; the program and the reward sit either side of it in
   equal centred columns. The grind reads play->earn, the finder reads
   card->route, and the head is the same shape in both -- that symmetry is the
   design, not a coincidence of content. */
.py{padding:6px 0 2px}
.py-axis{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 40px;
 align-items:center}
.py-side{display:grid;align-content:center;justify-items:center;text-align:center;padding:4px 0}
.py-lab{margin:0 0 8px;font-family:var(--font-display);font-size:var(--t-micro);font-weight:700;
 letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--cyan)}
.py-big{margin:0;font-family:var(--font-display);font-size:27px;font-weight:700;line-height:1.14;
 color:var(--ink);text-wrap:balance}
.py-sub{margin:10px 0 0;font-family:var(--font-body);font-size:var(--t-small);color:var(--dim)}
.py-dot{color:var(--line)}
.py-mid{position:relative;display:grid;justify-items:center;padding:0 40px}
.py-mid::before,.py-mid::after{content:"";position:absolute;top:12%;bottom:12%;width:1px;
 background:linear-gradient(180deg,transparent,rgba(238,244,248,.14),transparent)}
.py-mid::before{left:0}
.py-mid::after{right:0}
.py-artwrap{position:relative;display:block}
.py-artwrap::before{content:"";position:absolute;inset:-38px -34px;border-radius:50%;
 background:radial-gradient(closest-side,rgba(63,227,164,.20),rgba(95,199,223,.10) 55%,transparent 78%);
 pointer-events:none}
.py-art{position:relative;display:block;width:208px;height:auto;aspect-ratio:210/296;
 border-radius:10px;box-shadow:0 22px 52px rgba(0,0,0,.5)}
.py-ends{margin:16px 0 0;font-family:var(--font-mono);font-size:var(--t-small);color:var(--coral);
 font-weight:600}
.py-rungs{display:inline-flex;align-items:center;gap: var(--space-3);margin:16px 0 0;
 font-family:var(--font-mono);font-size:var(--t-small);color:var(--dim)}
.py-ends + .py-rungs{margin-top:8px}
.py-act{margin:18px 0 0;display:flex;justify-content:center}
.py-cta,.py-alt{display:inline-flex;align-items:center;justify-content:center;gap: var(--space-3);
 font-family:var(--font-display);font-size:var(--t-small);font-weight:700;
 letter-spacing:var(--track-caps);text-transform:uppercase;border-radius:7px;padding:12px 20px;
 text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .14s ease}
.py-cta{background:var(--cyan);color:#06222c;border:1px solid var(--cyan);
 box-shadow:0 10px 26px rgba(95,199,223,.22)}
.py-alt{background:transparent;color:var(--cyan);border:1px solid rgba(95,199,223,.38)}
.py-cta:hover,.py-alt:hover{transform:translateY(-2px)}
.py-cta i{font-style:normal}
.py-figs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 46px;margin:30px 0 0;
 padding:20px 0 0;border-top:1px solid var(--line)}
.py-figs span{display:grid;gap:3px;text-align:center}
.py-figs b{font-family:var(--font-mono);font-size:var(--t-lead);font-weight:600;color:var(--ink);
 font-variant-numeric:tabular-nums;line-height:1}
.py-figs b.cy{color:var(--cyan)}
.py-figs u{text-decoration:none;font-family:var(--font-mono);font-size:var(--t-small);color:var(--dim)}
@media (prefers-reduced-motion:reduce) {
.py-cta,.py-alt{transition:none}
}
@media (max-width:900px) {
.py-axis{grid-template-columns:minmax(0,1fr);gap:26px;justify-items:center}
.py-mid::before,.py-mid::after{display:none}
.py-mid{padding:0}
.py-art{width:164px}
}
.ld{margin:22px 0 10px}
.ld-arrow{font-style:normal;font-size:1.4rem;color:#3d5063;transition:transform .18s ease,color .18s ease}
.ld-row:hover .ld-name,.ld-row:hover .ld-arrow{color:var(--cyan)}
.ld-row.is-card:hover .ld-name,.ld-row.is-card:hover .ld-arrow{color:var(--gold)}
.ld-meta{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--dim)}
.ld-num{display:grid;justify-items:end;gap:2px;text-align:right}
.ld-num b{font-family:var(--font-mono);font-size:3rem;font-weight:600;line-height:.86;letter-spacing:-.03em}
.ld-num u{text-decoration:none;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--dim)}
/* ---- L3: two spines,side by side ---- */
.ld-3 .ld-row.is-grind{border-left-color:var(--cyan)}
.ld-3 .ld-row.is-card{border-left-color:var(--gold)}
.ld-3 .is-grind .ld-lab{color:var(--cyan)}
.ld-3 .is-card .ld-lab{color:var(--gold)}
.ld-3 .is-card .ld-go{color:var(--gold)}
/* ===== RV_CSS ===== */
/* the flare and spark burst are 230-240% of the card and live outside the
   back's clip,so on a narrow viewport the landing animation could push the
   document wider than the window. The stage clips them. */
.rv{display:inline-block;perspective:1200px;isolation:isolate}
/* The back: no asset,just gradients -- and it inherits the face's own box,so
   nothing reflows mid-spin. */
/* ---------------------------------------------------------------------------
   A REVEAL,NOT A SPIN.

   The first version rotated on Y the whole way,which puts the card face-on
   every half turn -- you could read who it was three times before it landed.
   That is a spinning card,not a reveal.

   So the spin and the turn are separated. The card holds rotateY(180deg) --
   face-down -- for the whole spin,and spins in-plane on Z instead,which
   never exposes the reverse. Only in the last stretch does Y travel 180 -> 0
   and the face arrive. The identity is not merely hard to read early,it is
   unrenderable: backface-visibility:hidden means the browser does not paint
   the face at all while it is turned away.

   0-55%   spinning face-down,decelerating
   55-70%  settled,still face-down -- a beat of held breath
   70-100% the turn
   --------------------------------------------------------------------------- */
@keyframes rvReveal{
  0%{transform:rotateY(180deg) rotateZ(0deg) scale(.86);
     animation-timing-function:cubic-bezier(.10,.72,.20,1)}
  55%{transform:rotateY(180deg) rotateZ(690deg) scale(1);
     animation-timing-function:cubic-bezier(.33,0,.67,1)}
  70%{transform:rotateY(180deg) rotateZ(720deg) scale(1);
     animation-timing-function:cubic-bezier(.55,.02,.22,1)}
  100%{transform:rotateY(0deg) rotateZ(720deg) scale(1)}
}
/* ===== RV_CSS ===== */
/* The pair runs longer than the finder's single card -- two cards landing in
   sequence needs room to read as a sequence,so the second is held back a full
   quarter second rather than the 120ms that made them look simultaneous. */
/* ===== FX_CSS ===== */
/* ---- holographic glare: a prismatic sweep tracking inversely to the cursor,so the highlight slides the opposite way as the card tilts ---- */
/* ---- the tilt. A rAF spring drives --tx/--ty; no CSS transition here or the
   spring and the transition fight and the card feels laggy. ---- */
.rv-inner.is-live .rv-face{box-shadow:0 22px 46px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.06)}
/* ---- flare: one radial pulse behind the card as it lands ---- */
@keyframes rvFlare{0%{opacity:0;transform:translateZ(-1px) scale(.4)}
 22%{opacity:1}100%{opacity:0;transform:translateZ(-1px) scale(1.15)}}
/* ---- sparks ---- */
@keyframes bsRay{0%{opacity:0;transform:scale(.28)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes bsRing{0%{opacity:0;transform:scale(.42);stroke-width:5}
 30%{opacity:.9}100%{opacity:0;transform:scale(1.5);stroke-width:.6}}
/* ---- the stat HUD. It sits BESIDE the card,not on it: the face IS the real
   card art,which already prints the name,position and team -- covering it
   with a second copy of the same facts hides the thing being revealed. ---- */
/* ===== BK_CSS ===== */
/* ---- the light burst. The reference clip's card sits in a starburst,which is
   most of why it reads as an event rather than a graphic. repeating-conic-
   gradient draws the rays; a radial mask keeps them hot at the middle and
   gone by the edges,so they never hit the card border as hard lines. ---- */
@keyframes bkRays{to{rotate:26deg}}
/* the rarity,named on the placeholder the way the clip names it */
.bk-d{display:none}
/* embers */
@keyframes bkEmber{0%{opacity:0;transform:translateY(0)}
 12%{opacity:.95}100%{opacity:0;transform:translateY(-150px)}}
/* ---- the placeholder card ---- */
.rv[data-rar="rd"]{--k1:#ff6d86;--k2:#8e1430;--k3:#ff9fae;--k4:#3a0a18}
.rv[data-rar="d"]{--k1:#6fd8ec;--k2:#4a3fa8;--k3:#8ff3cd;--k4:#0d1636}
/* the holo sheen -- a band that travels while the card is still face-down */
@keyframes bkHolo{from{transform:translateX(-42%)}to{transform:translateX(42%)}}
/* the silhouette */
.rv-sil{position:absolute;left:50%;top:44%;width:34%;aspect-ratio:341/620;translate:-50% -50%;
 pointer-events:none;background:var(--k1);opacity:.94;
 -webkit-mask:url("/assets/planner-batter-v1.webp") center/contain no-repeat;
 mask:url("/assets/planner-batter-v1.webp") center/contain no-repeat;
 filter:drop-shadow(0 0 12px color-mix(in srgb,var(--k1) 55%,transparent))}
/* the bright inner frame the placeholder cards carry */
/* ---- the perimeter pulse ----
   A rarity-coloured glow breathing around the card edge. It sits inside
   .rv-inner so it turns WITH the card rather than sitting flat behind it,and
   it carries no backface rule on purpose -- the edge should glow whichever
   face is toward you. Strong and quick while the card is still face-down,because that is the anticipation; slow and low once the real card has
   landed,so it frames the art instead of competing with it. ---- */
@keyframes rvPulse{0%,100%{opacity:.34;scale:1}50%{opacity:.72;scale:1.012}}
@keyframes rvPulseHot{0%,100%{opacity:.5;scale:1}50%{opacity:1;scale:1.025}}
/* ---- the morph: light at the edge-on instant ---- */
@keyframes rvMorph{0%,74%{opacity:0;transform:scaleX(.35)}
 85%{opacity:1;transform:scaleX(1.5)}100%{opacity:0;transform:scaleX(.4)}}
/* ===== FINAL_CSS ===== */
/* ---- "recommended" ----
   Two faults in the last pass. It was cyan,and cyan on this page already
   means ours-and-interactive: the chips,the pulse figures,the CTA,the
   highlighted row. A badge in the same hue as everything around it cannot say
   "this bit is a suggestion" -- it just joins in.

   So it is AMBER,solid,with dark type. Amber is the only warm note in the
   vocabulary and it is nearly absent from this page,so it is the one colour
   that separates on sight. Solid fill rather than a wash,because a hollow
   chip reads as another control and this is not one -- nothing happens when
   you press it. It is an annotation on someone else's data.

   (Gold does mean money elsewhere. A solid badge and a gold NUMERAL are
   different enough roles that they do not collide,but if you would rather
   keep amber exclusively for stubs,say so and it moves to violet.)

   Display is set in exactly one place below -- the previous version set it in
   the per-host rules too,which out-specified the hiding and painted both
   states at once. ---- */
.rec{align-items:center;gap:7px;padding:5px 11px;border-radius: var(--radius-xs);border:0;
 background:linear-gradient(180deg,#ffd77f 0%,var(--gold) 62%,#e0a52f 100%);color:#1b1305;
 font-family:var(--font-display);font-size:var(--t-micro);font-weight:700;line-height:1;
 letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
 box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 3px 12px rgba(241,184,75,.26);
 animation:recPulse 2.6s ease-in-out infinite}
/* A slow breath,not a blink. The badge is an aside on someone else's data,so
   it draws the eye once and then keeps a low idle -- the reveal is the loud
   motion on this page and nothing should compete with it. */
@keyframes recPulse{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 3px 12px rgba(241,184,75,.22)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 4px 22px rgba(241,184,75,.62)}}
@media (prefers-reduced-motion:reduce) {
.rec{animation:none}
}
.rec i{font-style:normal;font-size:.82em;opacity:.72}
.rec.is-own{background:none;color:var(--steel);box-shadow:none;animation:none;
 border:1px solid rgba(138,162,181,.38);padding:4px 10px}
/* the one place display is decided */
.rec{display:inline-flex}
.rec.is-own{display:none}
.py-flag .rec.is-own{display:inline-flex}
/* searching a card says nothing about which PROGRAM we recommend,so the
   grind badges are not governed by it -- the flag is the finder's alone */
/* hosts restate only what their own span rules would otherwise steal */
/* .pg2-prog span sets display:block,which out-specifies .rec and stretched
   the badge across the whole name column,so this host restates display. */
.pg2-prog .rec.is-own{color:var(--steel)}
/* ---- search,in the Card Database's own idiom: a bordered field with a caps
   label beside it,not a bare rule ---- */
.fs{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 28px;
 max-width:820px}
/* <input type="search"> carries a rounded shape of its own in Chrome,which
   drew a second capsule inside the field. appearance:none removes it; the
   cancel button gets toned down rather than left at browser default. */
.fs-none{padding: var(--space-6);font-size:var(--t-body);color:var(--dim)}
/* ---- the card's figure row ----
   It was a flex row of four spans at line-height:normal,and one of them (the
   pulse,16.6px) is bigger than the other three (12px). A taller line box
   pushed that caption below the rest,so the captions ran at two different
   heights and the whole row read crooked. Explicit line-heights put every
   value on one row and every caption on the next.

   The columns are Rankings' own widths,so the spacing is even by measure
   rather than by whatever each value happened to be wide. ---- */
/* ---- rows,in the Rankings grid,with figures over captions and no bars ---- */
.rw-fig.is-rate small{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:400;
 color:var(--dim)}
.rw-row.is-picked .rw-rank{color:var(--cyan)}
@media (max-width:900px) {
/* Four columns: rank, art, name, pulse. The header hid its other cells
     but the rows kept theirs, so three figures per row wrapped into an
     implicit second grid row and "108.9" sat in a 28px track. Rows and
     header now drop the same cells. */
.rw-head span:nth-child(4),.rw-head span:nth-child(6),.rw-head span:nth-child(7),
  .pg2-head span:nth-child(4),.pg2-head span:nth-child(6),.pg2-head span:nth-child(7),
  .rw-fig:not(.is-rate),.pg2-fig:not(.is-rate){display:none}
}
@media (max-width:640px) {
/* A name that wraps beats a name that ends in an ellipsis. */
/* Four figures wrapped 3+1; two by two reads as a pair of pairs. */
.py-figs{gap:16px 0}
.py-figs span{flex:0 0 50%}
}
/* ===== FINAL_CSS ===== */
#programKick{display:none}
/* ===== FINAL_CSS ===== */
/* ---- the page label ----
   At 12px/600 in #9db1c0 it was neither: too quiet to orient anyone,too
   present to be nothing. It is kept and made to work -- the section name is
   real orientation on a tool page,especially for someone who arrived from a
   nav menu. Display face,17px,ink,and a cyan bar to its left so it reads as
   "you are here" rather than as a caption. ---- */
.tool-page .eyebrow{display:inline-flex;align-items:center;gap: var(--space-4);margin:0 0 16px;
 padding-left:11px;border-left:3px solid var(--cyan);
 font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.1;
 letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
/* ---- and a last belt-and-braces reset on the field: no UA shape,no inner
   ring,whatever the browser wants to draw ---- */
.fs .fs-input,.fs input[type="search"]{appearance:none!important;-webkit-appearance:none!important;
 border:0!important;border-radius:0!important;background:transparent!important;
 box-shadow:none!important;outline:0!important}
.fs input[type="search"]::-webkit-search-decoration,.fs input[type="search"]::-webkit-search-results-button,.fs input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none;display:none}
.answer-2xp b, .path-2xp b, .pp-2xp b { color: var(--coral); }
/* Coral is the time signal in this palette, and a real deadline is the one time
   figure on the board that was measured rather than estimated. Only the two
   programs the game actually publishes a countdown for ever render this. */
/* Restored 2026-08-20: these rules were removed with the old planner CSS,
   but they style Rankings, Flip and the shared result rows. The planner-only
   selectors have been dropped from each list; the rest is verbatim. */
.page-result-row,
.page-result-main,
.page-result-link,
.page-result-metric,
.featured-card,
.match-card,
.inventory-row,
.squad-fit-card,
.squad-hole,
.pack-card,
.program-card {
  min-width: 0;
}
.page-result-row *,
.featured-card *,
.match-card *,
.inventory-row *,
.squad-fit-card *,
.squad-hole *,
.pack-card *,
.program-card * {
  overflow-wrap: anywhere;
}
.featured-card .featured-rank {
  color: #bffbff;
}
/* v4.23 Diamond Pulse theme unification */
.tool-page .tool-hero,
.tool-page .page-toolbar,
.tool-page .page-summary div,
.tool-page .featured-card,
.tool-page .page-result-row,
.tool-page .database-card,
.tool-page .pack-panel,
.tool-page .pack-compare,
.tool-page .pack-type-card,
.tool-page .inventory-panel,
.tool-page .inventory-next-card,
.tool-page .program-guide article,
.tool-page .program-session-builder,
.tool-page .program-session,
.tool-page .program-row,
.tool-page .program-detail,
.tool-page .squad-panel,
.tool-page .squad-detail,
.tool-page .squad-actions button,
.tool-page .squad-section,
.tool-page .squad-slot,
.tool-page .squad-fit-card,
.tool-page .squad-hole,
.tool-page .account-panel,
.tool-page .account-roadmap article,
.tool-page .help-card,
.tool-page .plan-card {
  border-color: rgba(0, 229, 255, 0.16);
  background:
    radial-gradient(circle at 14% -10%, rgba(0, 229, 255, 0.12), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(255, 45, 75, 0.08), transparent 26%),
    linear-gradient(145deg, rgba(1, 7, 13, 0.98), rgba(5, 12, 21, 0.96) 55%, rgba(2, 7, 13, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 229, 255, 0.08),
    0 18px 58px rgba(0, 0, 0, 0.36);
}
.tool-page:not(.advisor-page) .featured-card:hover,
.tool-page:not(.advisor-page) .featured-card:focus-visible,
.tool-page:not(.advisor-page) .page-result-row:hover,
.tool-page:not(.advisor-page) .page-result-row:focus-within,
.tool-page:not(.advisor-page) .database-card:hover,
.tool-page:not(.advisor-page) .database-card:focus-visible,
.tool-page:not(.advisor-page) .pack-type-card:hover,
.tool-page:not(.advisor-page) .pack-type-card:focus-visible,
.tool-page:not(.advisor-page) .pack-type-card.is-active,
.tool-page:not(.advisor-page) .program-row:hover,
.tool-page:not(.advisor-page) .program-row:focus-visible,
.tool-page:not(.advisor-page) .program-row.is-active,
.tool-page:not(.advisor-page) .squad-hole:hover,
.tool-page:not(.advisor-page) .squad-hole:focus-visible,
.tool-page:not(.advisor-page) .squad-hole.is-active,
.tool-page:not(.advisor-page) .squad-fit-card:hover,
.tool-page:not(.advisor-page) .squad-fit-card:focus-visible,
.tool-page:not(.advisor-page) .squad-fit-card.is-active,
.tool-page:not(.advisor-page) .page-tabs button:hover,
.tool-page:not(.advisor-page) .page-tabs button:focus-visible,
.tool-page:not(.advisor-page) .page-tabs button.is-active {
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.08),
    0 0 0 3px rgba(0, 229, 255, 0.1),
    0 20px 52px rgba(0, 0, 0, 0.4);
  outline: none;
}
/* v5.0.0-hf26 Decision surface layout cleanup */
.featured-strip .featured-card,
.rankings-featured {
  position: relative;
  overflow: hidden;
}
.featured-strip .featured-card .featured-card-top,
.rankings-featured .featured-card-top {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  width: auto;
  min-width: 0;
  display: block;
  pointer-events: none;
}
.featured-strip .featured-card > .featured-rank,
.rankings-featured > .featured-rank {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
}
.featured-strip .featured-card .featured-pill,
.rankings-featured .featured-pill {
  display: none;
}
/* v5.0.0-hf26 final rank marker overrides */
.featured-strip .featured-card .featured-card-top,
.rankings-featured .featured-card-top {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  width: auto;
  min-width: 0;
  display: block;
  pointer-events: none;
}
.featured-strip .featured-card > .featured-rank,
.rankings-featured > .featured-rank {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
}
.featured-strip .featured-card .featured-pill,
.rankings-featured .featured-pill {
  display: none;
}
.featured-strip .featured-card,
.rankings-featured {
  padding-right: clamp(72px, 7vw, 96px);
  padding-bottom: clamp(18px, 2vw, 24px);
}
.featured-strip .featured-card .featured-card-top,
.rankings-featured .featured-card-top,
.featured-strip .featured-card > .featured-rank,
.rankings-featured > .featured-rank {
  top: 16px;
  right: 18px;
  bottom: auto;
  transform: rotate(-7deg);
  transform-origin: center;
}
.program-page .program-row,
.featured-strip .featured-card,
.rankings-featured,
.page-result-row {
  --surface-accent: var(--dp-market);
  --surface-accent-rgb: 53, 212, 255;
}
.program-page .program-row.rank-best,
.featured-strip .featured-card.hot,
.rankings-featured.hot,
.featured-strip .featured-card.upgrade,
.rankings-featured.upgrade,
.page-result-row.upgrade {
  --surface-accent: var(--dp-danger);
  --surface-accent-rgb: 255, 77, 125;
}
.program-page .program-row.rank-easy,
.featured-strip .featured-card.neutral,
.rankings-featured.neutral,
.page-result-row.neutral,
.command-card.buy,
.command-card.command-upgrade {
  --surface-accent: var(--dp-positive);
  --surface-accent-rgb: 83, 240, 167;
  --command-accent: var(--dp-positive);
  --command-accent-rgb: 83, 240, 167;
}
.program-page .program-row.rank-value,
.featured-strip .featured-card.value,
.featured-strip .featured-card.flips,
.rankings-featured.value,
.rankings-featured.flips,
.page-result-row.value,
.page-result-row.flips,
.command-card.hold,
.command-card.watch,
.command-card.command-gatekeeper {
  --surface-accent: var(--dp-caution);
  --surface-accent-rgb: 246, 200, 88;
  --command-accent: var(--dp-caution);
  --command-accent-rgb: 246, 200, 88;
}
.program-page .program-row.rank-utility,
.featured-strip .featured-card.downgrade,
.rankings-featured.downgrade,
.page-result-row.downgrade,
.command-card.sell,
.command-card.avoid,
.command-card.command-downgrade {
  --surface-accent: var(--dp-cool);
  --surface-accent-rgb: 110, 167, 255;
  --command-accent: var(--dp-cool);
  --command-accent-rgb: 110, 167, 255;
}
.program-page .program-row.rank-depth,
.featured-strip .featured-card.sleepers,
.rankings-featured.sleepers,
.page-result-row.sleepers {
  --surface-accent: var(--dp-neutral);
  --surface-accent-rgb: 184, 201, 214;
}
.program-page .program-row,
.featured-strip .featured-card,
.rankings-featured,
.page-result-row {
  border-color: rgba(var(--surface-accent-rgb), 0.22);
  background:
    radial-gradient(circle at 12% -16%, rgba(var(--surface-accent-rgb), 0.13), transparent 34%),
    linear-gradient(145deg, rgba(var(--surface-accent-rgb), 0.055), rgba(3, 11, 18, 0.48)),
    rgba(4, 12, 20, 0.78);
}
.program-page .program-row:hover,
.program-page .program-row:focus-visible,
.program-page .program-row.is-active,
.featured-strip .featured-card:hover,
.featured-strip .featured-card:focus-visible,
.rankings-featured:hover,
.rankings-featured:focus-visible,
.page-result-row:hover,
.page-result-row:focus-within {
  border-color: rgba(var(--surface-accent-rgb), 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(var(--surface-accent-rgb), 0.11),
    0 0 0 3px rgba(var(--surface-accent-rgb), 0.07);
}
/* v5.0.0 ranking text-only hotfix */
.rankings-page .ranking-number,
.flip-page .ranking-number,
.rankings-page .featured-strip .featured-rank,
.flip-page .featured-strip .featured-rank,
.rankings-page .rankings-featured .featured-rank,
.flip-page .flip-featured .featured-rank {
  min-width: 3ch;
  width: auto;
  min-height: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-teal) 42%, #ff2d6a 88%);
  box-shadow: none;
  color: #6eeeff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 7px rgba(0, 229, 255, 0.28))
    drop-shadow(0 0 13px rgba(255, 45, 106, 0.14));
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.rankings-page .featured-strip .featured-rank,
.flip-page .featured-strip .featured-rank {
  display: inline-block;
}
/* The reward results list floats over the route board and the leaderboard.
   z-index only competes inside its own stacking context, so it sits in the same
   band as the Advisor picker rather than a local number that loses to anything
   above it. */
/* Sizes to its results. max-height only caps the scroll -- there is no floor,
   because reserving a screen of height for two matches was the fault that put
   ~336px of void between the search and the answer. */
.program-page .fs .fs-out { min-height: 0; }
/* A one-line "no matches" in a full-width panel reads as a broken page, so the
   empty state alone keeps a floor. */
/* v624-type-roles -- rebuilt 2026-08-20 for the new planner classes.
   One size per ROLE, so a control never has to be guessed at:
     --t-base  15px  action   -- a link or control that goes somewhere
     --t-body  13px  section  -- a label introducing a block
     --t-small 12px  caption  -- metadata, confidence, helper prose
     --t-micro 11px  chip     -- pills and tags only
   Colour alone was not a strong enough affordance at these sizes, so every
   standalone action carries an underline as well. */
.program-page .pp-link { font-size: var(--t-base); text-decoration: underline; text-underline-offset: 4px; }
/* An action inside a dense row matches that row rather than towering over it,
   but still carries its affordance. */
/* Section labels introduce content and must never be smaller or dimmer than it. */
/* A field label is a section label and shares its size. */
/* end v624-type-roles */
/* ---- the transition zone: head -> search -> board speaks Inter (v858) ----
   Judged side by side against the shipped page, the mockup of this stretch had
   silently lost the mono and display font tokens, fallen back to Inter at body
   size, and gained the page wrapper's 34px+rule+34px divider under the head --
   and that accidental render read better: calmer, more clearly separated, and
   the figures strip stopped sitting 2px off the search row. So the accident is
   the design now, on purpose. From the line under the card down through the
   board's column headers this zone is Inter at 16px; the board ROWS below keep
   the mono data voice they share with the rest of the site. These sit after
   the type-roles block because they override its sizes. Scoped to .pg-page,
   which the planner AND the path page carry, so the path page inherits the
   same head, figures strip and transition voice. */
.pg-page .py{position:relative;padding:6px 0 34px;border-bottom:1px solid var(--line);margin:0 0 34px}
.pg-page .py::after{content:"";position:absolute;left:0;right:0;bottom:0;height:132px;
 pointer-events:none;background:
 radial-gradient(52% 170% at 14% 100%,rgba(95,199,223,.07),transparent 70%),
 radial-gradient(52% 170% at 86% 100%,rgba(241,184,75,.05),transparent 70%)}
.pg-page .py-figs b{font-family:inherit;font-size:16px}
.pg-page .py-figs u{font-family:inherit;font-size:16px}
.pg-page .py-rungs{font-family:inherit;font-size:16px}
.pg-page .rw-cap span,
.pg-page .pg2-cap span{font-size:16px}
.pg-page .rw-head span,
.pg-page .pg2-head span{font-family:inherit;font-size:var(--t-base);letter-spacing:normal}
.pg-page .rw-fig small,
.pg-page .pg2-fig small,
.pg-page .pg2-fig u{font-family:inherit;font-size:11px}
.pg-page .rw-fig.is-rate,
.pg-page .pg2-fig.is-rate{font-family:inherit;font-size:var(--t-base);font-weight:700}
/* ---- the path page (v862): the planner's head, then the two true things ----
   The chrome is the planner's title row with the way back on it; the head is
   the planner's axis head (or the pair head when the reward is a set, not a
   card); below it sit the only two things that are about THIS program -- the
   reward path read from the game, and the game's own description. The verdict
   is one line. Nothing here comes from a category shell. */
.pg-page .pp-back{display:inline-flex;align-items:baseline;gap:7px;font-family:inherit;font-size:var(--t-base);
 font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--cyan);text-decoration:none}
.pg-page .pp-back:hover{text-decoration:underline;text-underline-offset:4px}
.pg-page .pp-back:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.pg-page .pp-back i{font-style:normal}
.pg-page .pp-sep{color:var(--line);font-size:16px}
.pg-page .pp-here{font-family:inherit;font-size:var(--t-base);font-weight:700;color:var(--ink);min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-page .py-axis.is-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;max-width:900px;margin:0 auto}
.pg-page .pa-verdict b{color:var(--ink)}
/* The verdict's tone: a win is sage, neutral counsel is steel, no call is ink --
   and none of them is an alarm, so no red on this page. */
.pg-page .pa-verdict.is-good b{color:var(--sage)}
.pg-page .pa-verdict.is-grind b{color:var(--steel)}
.pg-page .pa-verdict.is-neutral b{color:var(--ink)}
.pg-page .pa-body.is-two{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:0 56px;align-items:start}
.pg-page .pa-fine.is-stale{color:var(--coral)}
/* the ladder, in the same voice */
.pg-page .lad{max-width:440px}
.pg-page .lad-top{display:grid;gap:2px;margin:0}
.pg-page .lad-top b{font-size:var(--t-lead);font-weight:700;color:var(--ink)}
.pg-page .lad-top span{font-size:var(--t-body);color:var(--dim)}
.pg-page .lad-rows{display:grid;gap:4px}
.pg-page .lad-row{display:grid;grid-template-columns:18px minmax(0,1fr) 46px;align-items:center;gap: var(--space-3);
 font-size:var(--t-body);color:var(--dim);font-variant-numeric:tabular-nums}
.pg-page .lad-row i{height:5px;border-radius: var(--radius-xs);background:rgba(238,244,248,.07);overflow:hidden}
.pg-page .lad-row i b{display:block;height:100%;background:var(--cyan);border-radius: var(--radius-xs);opacity:.75}
.pg-page .lad-row u{text-decoration:none;text-align:right;color:var(--ink)}
.pg-page .lad-row.is-gap{opacity:.7}
.pg-page .lad-note{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--dim)}
@media (max-width:900px) {
.pg-page .py-axis.is-pair{grid-template-columns:minmax(0,1fr);gap:26px}
.pg-page .pa-body.is-two{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:640px) {
.pg-page .pp-sep,.pg-page .pp-here{display:none}
}
/* ---- the missions (v864): the path the button promises ----
   Each group as the game names it, each mission with its requirement, where it
   can be played, and what it pays in the program's own currency. The rung
   ladder beside it says what each rung pays. Nothing here is inferred. */
.pg-page .pa-group-note{margin:0 0 10px;max-width:70ch;font-size:var(--t-body);line-height:1.5;color:var(--dim)}
.pg-page .pa-mission{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:0 18px;align-items:start;
 padding:11px 0 12px;border-bottom:1px solid rgba(45,58,70,.55)}
.pg-page .pa-mission-name{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink)}
.pg-page .pa-mission-req{margin:4px 0 0;max-width:70ch;font-size:var(--t-body);line-height:1.5;color:var(--muted)}
.pg-page .pa-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:7px 0 0}
.pg-page .pa-where span{font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.pg-page .pa-where i{font-style:normal;font-size:var(--t-small);padding:2px 7px;border-radius: var(--radius-xs);color:var(--muted);
 background:rgba(238,244,248,.05);border:1px solid rgba(45,58,70,.7)}
.pg-page .pa-pts{display:grid;justify-items:end;text-align:right;gap:2px;padding-top:1px}
.pg-page .pa-pts b{font-size:var(--t-base);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pg-page .pa-pts u{text-decoration:none;font-size:var(--t-micro);color:var(--dim)}
/* the ladder now says what each rung pays */
.pg-page .lad-row{grid-template-columns:18px minmax(0,1fr) 46px}
.pg-page .lad-row.has-gift{grid-template-columns:18px minmax(0,1fr) 46px minmax(0,1.1fr)}
.pg-page .lad-gift{font-style:normal;font-size:var(--t-small);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-page .lad-gift.is-card{color:var(--sage)}
.pg-page .lad-gift.is-stubs{color:var(--gold)}
.pg-page .pa-sec + .pa-sec{margin-top:34px}
@media (max-width:640px) {
.pg-page .pa-mission{grid-template-columns:minmax(0,1fr)}
.pg-page .pa-pts{justify-items:start;text-align:left}
}
/* ---- the path, as a points budget (v865) ----
   Scoped to .pg-page, which BOTH program surfaces carry, so wherever a path is
   drawn it is drawn the same way.

   The column used to be one endless scroll: 23 missions for the Hall of Fame,
   36 for New Threads, each repeating the SAME nine "where to play" chips. Three
   facts out of the capture reshaped it. 1,137 of the 1,168 missions that name
   modes name the same nine, so the group says it once and only exceptions print
   per mission. All 588 Moments name no mode at all, so they collapse to a name
   and a number. And 43 of the 138 programs offer more points than they require
   -- the Hall of Fame offers 125 and needs 100 -- which the page never said.

   Colour is the vocabulary already on this page, not a new one: gold is stubs
   (money), sage is a card you gain and the points you can skip, a pack stays
   muted, coral is time, steel is a count that carries no meaning of its own,
   and the cyan bar is our read. */
.pg-page .py-figs.is-budget{justify-content:flex-start;gap:12px 44px;margin:0 0 26px;padding:0 0 22px;
 border-top:0;border-bottom:1px solid var(--line)}
.pg-page .py-figs.is-budget span{text-align:left;justify-items:start}
.pg-page .py-figs b.sg{color:var(--sage)}
.pg-page .py-figs b.co{color:var(--coral)}
/* a group is a row on a rule, never a card */
.pg-page .ea-groups{position:relative;border-top:1px solid var(--line)}
.pg-page .ea-g{border-bottom:1px solid rgba(45,58,70,.55)}
.pg-page .ea-g summary{display:grid;grid-template-columns:14px minmax(0,1fr) 190px 92px;gap:0 20px;
 align-items:center;padding:14px 0;cursor:pointer;list-style:none}
.pg-page .ea-g summary::-webkit-details-marker{display:none}
.pg-page .ea-g summary:hover .ea-g-name{color:var(--cyan-ink)}
.pg-page .ea-g summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px}
.pg-page .ea-arrow{width:8px;height:8px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
 transform:rotate(-45deg);transition:transform .18s ease,border-color .18s ease;margin-left:2px}
.pg-page .ea-g[open] .ea-arrow{transform:rotate(45deg);border-color:var(--cyan)}
.pg-page .ea-g-name{font-size:var(--t-base);font-weight:600;color:var(--ink);min-width:0;transition:color .16s ease}
.pg-page .ea-g-name i{display:block;margin-top:3px;font-style:normal;font-size:var(--t-body);font-weight:400;color:var(--dim)}
/* what a group banks, in the ladder's own colours */
.pg-page .ea-banks{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;margin-top:5px}
.pg-page .ea-banks em{font-style:normal;font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;color:#5b6b7a}
.pg-page .ea-bank{font-style:normal;font-size:var(--t-small);color:var(--muted)}
.pg-page .ea-bank + .ea-bank::before{content:"b7";margin-right: var(--space-3);color:var(--line)}
.pg-page .ea-bank.is-stubs{color:var(--gold)}
.pg-page .ea-bank.is-card{color:var(--sage)}
.pg-page .ea-bank.is-none{color:#5b6b7a;font-style:italic}
.pg-page .ea-bank.is-more{color:#5b6b7a}
/* the run to the target: one shared scale, a mark at the target, and a tick
   where each of this group's rungs falls */
.pg-page .ea-run{position:relative;display:block;height:6px}
.pg-page .ea-run-track{position:absolute;inset:0;border-radius: var(--radius-xs);background:rgba(238,244,248,.07)}
.pg-page .ea-run-track::after{content:"";position:absolute;left:var(--mark);top:-3px;bottom:-3px;width:1px;
 background:rgba(238,244,248,.34)}
.pg-page .ea-run-seg{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius: var(--radius-xs);
 overflow:hidden;background:linear-gradient(90deg,rgba(95,199,223,.55),var(--cyan))}
/* Past the target is steel. The split is a share of the SEGMENT: an absolutely
   positioned ::after resolves percentages against its own box, not the track. */
.pg-page .ea-run-seg::after{content:"";position:absolute;left:var(--n);right:0;top:0;bottom:0;
 border-radius:0 3px 3px 0;background:rgba(138,162,181,.5)}
/* Motion, and nothing structural depends on it: a sheen crosses the segment
   once. Its natural state is transparent, so if the animation never runs -- a
   tab that is not compositing, reduced motion, no JS -- the bar is already
   complete. Two earlier passes animated the bar's own width and left it at
   zero in exactly those cases. */
.pg-page .ea-run-seg::before{content:"";position:absolute;inset:0;border-radius: var(--radius-xs);opacity:0;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
 transform:translateX(-100%)}
.pg-page .ea-groups.is-fresh .ea-run-seg::before{animation:eaSheen .9s ease-out 1}
@keyframes eaSheen{
  0%{opacity:0;transform:translateX(-100%)}
  22%{opacity:.85}
  100%{opacity:0;transform:translateX(100%)}}
.pg-page .ea-tick{position:absolute;top:-2px;bottom:-2px;left:var(--x);width:1.5px;border-radius:1px;
 background:rgba(238,244,248,.45);transform:translateX(-50%)}
.pg-page .ea-tick.is-card{background:var(--sage);box-shadow:0 0 5px rgba(63,227,164,.6)}
.pg-page .ea-tick.is-stubs{background:var(--gold)}
.pg-page .ea-g .pa-pts u{white-space:nowrap}
.pg-page .ea-g.is-spare .pa-pts b{color:var(--steel)}
.pg-page .ea-g.is-spare .ea-g-name{color:var(--muted)}
.pg-page .ea-body{padding:2px 0 18px 34px}
.pg-page .ea-body .pa-mission:first-of-type{border-top:1px solid rgba(45,58,70,.55)}
.pg-page .ea-flat{list-style:none;margin:0;padding:0}
.pg-page .ea-flat li{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:0 18px;align-items:baseline;
 padding:8px 0;border-bottom:1px solid rgba(45,58,70,.35)}
.pg-page .ea-flat li:last-child{border-bottom:0}
.pg-page .ea-flat span{font-size:var(--t-base);color:var(--muted)}
.pg-page .ea-flat b{text-align:right;font-size:var(--t-base);font-weight:700;color:var(--ink);
 font-variant-numeric:tabular-nums}
.pg-page .ea-legend{margin:16px 0 0;max-width:70ch;font-size:var(--t-body);line-height:1.55;color:var(--dim)}
.pg-page .ea-legend b{color:var(--muted);font-weight:600}
@media (prefers-reduced-motion:reduce) {
.pg-page .ea-groups.is-fresh .ea-run-seg::before{animation:none}
.pg-page .ea-arrow{transition:none}
}
@media (max-width:760px) {
.pg-page .ea-g summary{grid-template-columns:14px minmax(0,1fr) 78px;gap:8px 14px}
.pg-page .ea-run{grid-column:2/-1;margin-top:2px}
.pg-page .ea-banks{display:none}
.pg-page .ea-body{padding-left:0}
}
/* How to get it. The program is the answer, so the program name is the only
   link in the block and the CTA repeats it as an action rather than sending
   you somewhere else. */
/* Ownership is violet everywhere on this site -- never the gain colour, which
   means something you won, and never the rating cyan. */
.program-page .fs-own:hover{color:var(--muted)}
/* The card is the link. It already looks like the thing you would press, so it
   does not need a button repeating it underneath -- but it does need to say so
   on hover and to focus visibly. */
/* ---- the roadmap board (v867) ----
   The page kept its argument -- no dates, the honest order, and a say in it --
   and moved into the language every converted page speaks: hairlines, Inter,
   tabular numerals, and the site's one-meaning-per-colour vocabulary. It also
   carries .pg-page now, so the figures strip and the type voice come from the
   same block the planner and path pages use.

   The namespace changed from rd- to rm- deliberately. `rd-` means Red Diamond
   everywhere else on this site (index, advisor, the planner) and the roadmap's
   rules survived only by being scoped to .roadmap-page; two meanings for one
   prefix is a collision waiting for the day someone forgets the scope.

   Colour never carries the stage alone: each column opens on a rule in its
   stage colour with the stage NAMED beside it. cyan = in flight (our live
   read), steel = merely queued (a count with no meaning of its own), gold =
   the thing asking for your attention, which here is the vote. */
.roadmap-page .py-figs.is-budget{justify-content:flex-start;gap:12px 44px;margin:0;padding:22px 0 0;
 border-top:1px solid var(--line);border-bottom:0}
/* the board */
.roadmap-page .is-now .rm-rule{background:var(--cyan)}
.roadmap-page .is-next .rm-rule{background:var(--steel)}
/* Muted, not gold. The recorded decision (check-roadmap) is that Considering
   reads as the faintest thing on the page -- it is the least certain work, and
   the loudest colour has no business on it. Gold stays on the CTA, where a
   button asking to be clicked is what gold means everywhere else. */
.roadmap-page .is-considering .rm-rule{background:#55697a}
.roadmap-page .is-now .rm-count{color:var(--cyan)}
/* an item is a row on a rule */
/* 44px, matching the touch-target pass shipped site-wide in v866. A standalone
   affordance at the foot of a card takes the control standard; the height comes
   from the hit area and the text stays the same size. */
.roadmap-page .rm-see:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
/* the vote -- the page's one interactive element, so it gets the affordance */
.roadmap-page .rm-pick[aria-pressed="true"] .rm-pick-mark{border-color:var(--gold);
 background:rgba(241,184,75,.14)}
.roadmap-page .rm-pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
/* the ask: served as HTML so it survives a script failure, moved into the
   Considering column once the board exists */
.roadmap-page .rm-cta:hover{background:rgba(241,184,75,.2);transform:translateY(-1px)}
@media (max-width:900px) {
.roadmap-page .rm-col + .rm-col{padding-top:8px}
}
/* v892-pricing-closing-cta -------------------------------------------------
   The pricing page closes on a second "Unlock Red Diamond Pro". It reuses
   .ac-price-act, but the copy inside the price band gets its spacing from
   .ac-price's own padding -- standing on its own as a child of the page it
   inherited none, and sat flush against the last answer above it while every
   other section on the page is separated by 26-34px. Match that rhythm.
   Scoped to the direct child so the one still inside .ac-price is untouched. */
/* end v892-pricing-closing-cta */
/* ---- Inventory: "Your sellable cards" view (v896) ------------------- */
/* The sellable view is the reason the import exists, but the toggle it hides
   behind was a borrowed utility control -- the same grey segmented box the
   database page uses for a table/grid switch. Scoped to this page only (the
   database page keeps its own), the two views read as named lenses: condensed
   caps, a cyan underline for the live one, and the money itself sitting on the
   tab. The number is the argument -- decoration would not have made the case. */
.inv-page .inv-viewbar .database-view-toggle { border: 0; border-radius: 0; overflow: visible;
  display: inline-flex; gap: 26px; }
/* The lead-in: money first, then the binder in proportion. Replaces a heading
   that repeated the tab, a total that repeated the tab's number, and a note
   that repeated the provenance line. */
/* One hairline, in true proportion, of every copy in the binder. Colour repeats
   the meanings the hero band already set: sage is money you can realise, gold
   is value the game is holding. A slice never disappears -- min-width keeps a
   two-copy sliver visible against 1,900 -- and the numbers are in the key, so
   nothing here is carried by colour alone. */
/* Refine, inline. It sits at the end of the control row now and never on a
   row of its own -- a filter is not a section heading. */
/* The panel it opens was a bordered card floating over the page. On this page
   it is a plain block under the control row: a rule above it, the same column
   as everything else, no box. */
/* Filters use the same frameless idiom as the sorts: type plus a cyan
   underline for active. NO pills, NO fills -- Jason rejected the bordered
   cyan pills on the mockup (boxes read as the legacy app). He then asked for
   more prominence, which is why these sit at t-base/--muted with a 3px
   underline while the sorts stay at t-micro/--dim: the filter row leads. */
/* Active state is a leading DOT, not an underline. The filters sit a few
   pixels under the binder bar, so an underline put a third coloured horizontal
   line into the same twenty pixels and stopped reading as state -- it read as
   part of the bar. A dot moves the marker onto the vertical axis, where the
   bar cannot compete with it. The sorts follow the same idiom so the row has
   one language, and the counts stay in mono. */
/* The 2px gap was sized for buttons that carried 10px of side padding. Once
   the padding came off (so the dot sits tight to its label) the sorts ran
   together -- the gap has to carry the separation now. */
/* ---- the card turns over -------------------------------------------------
   Clicking a card used to insert a panel into the grid, which ended that tile's
   row early and pushed everything after it down. The card turns in place now:
   nothing moves, several can be turned at once, and the back is a printed card
   back rather than a UI panel -- buff stock, a name plate, a ruled table, small
   print. Turned cards stay turned; changing a filter turns them all back. */
/* Facing away has to mean GONE: a merely rotated face still reads to a screen
   reader and still takes a tab stop. */
/* Nobody knows a card turns unless it says so. */
/* Every size here is a scale token, never a raw px: the back sits at the 11px
   floor and cannot drift under it. That floor is also why the back carries one
   net figure per route rather than price-and-net -- three columns of six-figure
   numbers will not fit on a 150px card at a legible size. */
@media (prefers-reduced-motion: reduce) {
/* No spin: the faces cross-fade in place. */
}
/* The copy count is the one thing on a tile that changes what the money means
   -- 2 copies is twice the sale -- so it reads at body size with a shadow that
   lifts it off the art, not as a micro-label lost in the corner. Violet is the
   system colour for what is YOURS. */
/* The Advisor's situation-tile provenance chip -- the card import fills
   sit.copy/sit.owned at read time (advisor-engine.js sitFor()), and this
   says so on the winning path's why-text and on "Your situation"'s own
   head (advisor-read.js's data-sit-auto spans), wherever that fill is
   actually in play for the card on screen. */
/* v913-hero-shell: one hero shell for every page that opens with .tool-hero.
   The shared hero was a bordered, tinted, box-shadowed panel with a per-page
   glow (Advisor, Squad Builder, Rankings, Account, Help, Pulse Rating, Pricing,
   Privacy, Terms), while every page converted since (Card Database, Market
   Pulse, Inventory, Pack Value Lab, Flip Finder, Roster Radar, My Dynasty,
   Roadmap) opens frameless: eyebrow, headline, one sentence, a hairline under.
   Visitors read the switch between the two as two different apps. This block
   takes every .tool-hero to the frameless shape the converted pages already
   use (.cdb-head is the reference: no frame, border-bottom: 1px solid
   var(--line), padding-bottom 14px). The floating-card stage (hero-fan) and
   the starfield canvas stay -- the canvas simply paints on the page ground.
   The 2px gradient rule .tool-page .tool-hero::before drew along the top edge
   of the panel; with no panel it is a stray line, so it goes too. */
.tool-hero,
.tool-page .tool-hero,
.program-page .tool-hero,
.rankings-page .tool-hero,
.pack-page .tool-hero,
.database-page .tool-hero,
.inventory-page .tool-hero,
.flip-page .tool-hero,
.squad-page .tool-hero,
.roster-page .tool-hero,
.help-page .tool-hero,
.account-hero,
.account-page .tool-hero.account-hero {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 10px 0 18px;
}
.tool-page .tool-hero::before {
  content: none;
}
.hero-stars {
  border-radius: 0;
}
@media (max-width: 760px) {
.tool-hero,
  .tool-page .tool-hero,
  .tool-page .tool-hero:has(.hero-stage) {
    padding: 6px 0 16px;
  }
}
/* end v913-hero-shell */
/* v914-shell-fixes: shared site footer (nav.js), skip-to-content link, and
   guides-template parity for packet D2 -- see build-position-pages.mjs */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--field);
  color: var(--cyan);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--t-small);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}
/* Legal-links footer: the old 4-column tools directory (Core Tools / Market /
   Site Information) lived only on index.html and duplicated the primary nav.
   nav.js now injects one row of Privacy / Terms / Help / Roadmap on every
   page, so the grid drops to two columns: wordmark, then the links. */
.site-footer .footer-grid {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.site-footer .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: flex-end;
}
.site-footer .footer-legal-links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--t-small);
}
@media (max-width: 640px) {
.site-footer .footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-5);
  }
.site-footer .footer-legal-links {
    justify-content: flex-start;
  }
}
/* end v914-shell-fixes */
/* v915-no-boxes: a card carries its own frame in its artwork, so nothing on
   this site draws a second frame around it. Ten selectors put box-shadow
   directly on card art (or a card-shaped element) -- that reads as a bordered
   tile behind the card. Each is switched to filter: drop-shadow(), which
   follows the art's own alpha instead of drawing a rectangle. Any shadow that
   was `inset`, or a zero-blur box-shadow ring (0 0 0 Npx), was a rim -- rims
   are exactly the second frame this rule bans, so those are dropped rather
   than translated; only the true offset/blur glow survives, at roughly half
   the blur radius (drop-shadow's blur maps to about box-shadow-blur / 2 for
   the same visual softness). Three surfaces (Market Pulse's three calls,
   the Squad Builder filter bar, Rankings' sort deck) also traded a bordered,
   filled, rounded panel for a hairline above the content, matching the Card
   Database's frameless pattern. */
/* ---- 1. .quick-card-art: outer glow + inset rim -> glow only ---- */
.quick-card-art {
  box-shadow: none;
  filter: drop-shadow(0 0 9px rgba(0, 229, 255, 0.12));
}
/* ---- 2. .prototype-card-art (base): drop shadow + glow ---- */
/* ---- 3. .prototype-card-art (hero fan variant): drop shadow only ---- */
/* ---- 4. .card-art: drop shadow + glow ---- */
.card-art {
  box-shadow: none;
  filter: drop-shadow(0 12px 29px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 23px rgba(95, 199, 223, 0.08));
}
/* ---- 5. .rankings-featured .page-card-art: drop shadow, ring dropped ---- */
/* ---- 6. .hero-art-card::after: glow only. NOTE: this pseudo-element is
   painted inside .hero-art-card, which has its own overflow: hidden (it
   relies on that clip to crop the hero art photo and run its mask-image) --
   a child's filter output is clipped by an ancestor's overflow, so this glow
   is still clipped at the parent's edge, same as the box-shadow it replaces.
   Left as-is rather than touching the parent's overflow. ---- */
.hero-art-card::after {
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.2));
}
/* ---- 7. .pa-rail-art: drop shadow only ---- */
/* ---- 8. .cd-art img: drop shadow, ring dropped ---- */
/* ---- 9. .py-art: drop shadow only ---- */
.py-art {
  box-shadow: none;
  filter: drop-shadow(0 11px 26px rgba(0, 0, 0, 0.5));
}
/* ---- 10. .ld-3 .ld-art: drop shadow, ring dropped ---- */
/* ---- Market Pulse: "worth buying / flip watch / avoid" was a bordered,
   filled, rounded panel with the three columns divided by a grid-gap trick.
   The outer box is gone; a hairline stands in its place, and the same
   divider trick (a border-left inset by the same gap it replaces) marks the
   columns, exactly as .mp-band already does two rows up the page. ---- */
.mp-col:not(:first-child) {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
/* .mp-calls drops to one column at <=1271px, so a left-hand divider between
   stacked full-width columns would read as a stray vertical stroke. Swap it
   for a top hairline at that breakpoint, matching how the columns actually
   stack. */
@media (max-width: 1271px) {
.mp-col:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 15px;
    margin-top: 15px;
  }
}
/* ---- Squad Builder: the filter bar (search, Game, Card pool, Filters) was
   a bordered, filled, rounded toolbar. Same swap: hairline above, no box.
   The floating "Filters" dropdown (.sf-panel) is left alone -- it is a
   popover anchored off the bar, not a static content section, so it keeps
   its border the way any other menu/overlay would. ---- */
/* ---- Rankings: "Rank the board by" was a bordered, filled, rounded deck,
   with the five sort tiles inside it using the same border+gap-background
   panel trick .mp-calls used. Outer box replaced with a hairline (the caps
   .pr-deckhead label already reads like a Card Database section label).
   The tiles keep their own background (var(--field)) and hover/active states --
   those are button affordances, not the panel this rule targets -- and pick
   up a border-left divider in place of the grid-gap line. ---- */
.pr-deck .pr-sort:not(:first-child) {
  border-left: 1px solid var(--line);
}
/* .pr-deck .pr-sorts reflows to 2 columns at <=1060px and 1 column at
   <=640px (its own existing breakpoints) -- a left-hand divider stops
   marking "a new column" once cells wrap, so both narrower widths swap it
   for a top hairline instead. */
@media (max-width: 640px) {
.pr-deck .pr-sort:not(:first-child) {
    border-top: 1px solid var(--line);
  }
}
/* end v915-no-boxes */
/* v917-buttons: 16 btn selectors and 31 cta selectors had grown into six
   unrelated shapes for the same job -- a cyan fill on Home, an OUTLINED cyan
   pill on Inventory, bordered condensed pills on Database and Squad Builder,
   a bordered box for "Show 40 more", and a caps link on the Planner. This
   block writes the four kinds ONCE and maps every live selector onto them by
   listing it in the same rule, so no markup moves. Canonical primary is what
   Home and the account drawer already ship (cyan fill, dark ink, 7px, 44px) --
   deliberately NOT a 999px pill, because adopting the pill would repaint Home. */
/* ---- 1. PRIMARY -- the one cyan-filled action per view. ---------------- */
/* .hero-search .hero-search-field .hero-search-go (0,3,0, line ~19635) still
   owns Home's border/radius/padding/font-size, so Home renders unchanged:
   this rule only supplies the fill, ink, height and shadow it already had. */
.btn-primary,
.primary-action,
.hero-search .hero-search-go,
.py-cta,
.access-choice-cta:not(.access-choice-cta-pro),
.recommend-button,
.inv-page .inv-go,
.inv-page .inv-mbtn.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--cyan);
  border-radius: 7px;
  background: var(--cyan);
  color: #061016;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(95, 199, 223, 0.24);
  filter: none;
}
/* Pages whose voice is condensed caps keep it; only the fill is unified. */
.btn-primary.is-caps,
.py-cta,
.inv-page .inv-go,
.inv-page .inv-mbtn.go {
  font-family: var(--font-display);
  font-size: var(--t-base);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
/* The Advisor's hero action keeps its 62px size -- it is the page's whole
   reason to exist -- but stops being the only mint-green button on the site. */
.btn-primary:hover,
.primary-action:hover,
.hero-search .hero-search-go:hover,
.py-cta:hover,
.access-choice-cta:not(.access-choice-cta-pro):hover,
.recommend-button:hover,
.inv-page .inv-go:hover,
.inv-page .inv-mbtn.go:hover {
  background: var(--cyan);
  color: #061016;
  filter: brightness(1.08);
}
.btn-primary:disabled,
.primary-action:disabled,
.py-cta:disabled,
.recommend-button:disabled,
.inv-page .inv-go:disabled,
.inv-page .inv-mbtn.go:disabled {
  opacity: 0.5;
  filter: none;
  box-shadow: none;
  cursor: not-allowed;
}
/* ---- 2. SECONDARY -- an inline underlined link, never a second button. -- */
/* The account drawer's "Sign in" needs the full (0,4,0) path to beat the
   pinned drawer sizing rule at line ~16925; every other context that carries
   its own higher-specificity rule (.reward-actions, .billing-page, the hidden
   .account-hero-actions) is deliberately left alone -- see the fifth kind. */
.btn-secondary,
.secondary-action,
.status-action,
.access-text-button,
.account-rail-step-link:not(.is-pro),
.py-alt,
.rc-go,
.ff-go,
.pp-more,
.site-header > .account-status-menu .account-menu-actions .secondary-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--cyan);
  font-weight: 600;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  cursor: pointer;
}
.btn-secondary:hover,
.secondary-action:hover,
.status-action:hover,
.access-text-button:hover,
.account-rail-step-link:not(.is-pro):hover,
.py-alt:hover,
.rc-go:hover,
.ff-go:hover,
.pp-more:hover,
.site-header > .account-status-menu .account-menu-actions .secondary-action:hover {
  background: none;
  color: #9df1ff;
  text-decoration-color: var(--cyan);
  transform: none;
}
.btn-secondary:disabled,
.secondary-action:disabled,
.status-action:disabled,
.py-alt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration-color: transparent;
}
/* ---- 3. CONTROL -- a chooser: Refine, Filters, sort. No fill, no border. */
/* Active is said with brighter ink and a 2px cyan underline, per the house
   rule that state is glow rather than a tinted panel. */
.btn-control,
.cdb-refine,
.sf-more,
.fv-autobtn,
.inv-page .inv-mbtn,
.imx-page .imx-mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  cursor: pointer;
}
.btn-control:hover,
.cdb-refine:hover,
.sf-more:hover,
.fv-autobtn:hover,
.inv-page .inv-mbtn:hover,
.imx-page .imx-mbtn:hover {
  border-color: transparent;
  background: none;
  color: var(--ink);
}
.btn-control.is-active,
.btn-control[aria-expanded="true"],
.cdb-refine[aria-expanded="true"],
.sf-more.is-active,
.sf-more[aria-expanded="true"] {
  border-color: transparent;
  background: none;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
.btn-control:disabled,
.cdb-refine:disabled,
.sf-more:disabled,
.fv-autobtn:disabled,
.inv-page .inv-mbtn[disabled],
.imx-page .imx-mbtn[disabled] {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
/* Danger stays a word in red, not a red box. */
.inv-page .inv-mbtn.danger,
.imx-page .imx-mbtn.danger {
  border-color: transparent;
  color: var(--red);
}
/* ---- 4. PAGINATE -- "Show 40 more" is a link; the count is a mono figure. */
.btn-paginate,
.cdb-more,
.mp-more,
.ff-more,
.rw-more,
.pg2-more,
.pack-page .pv-more,
.inv-page .inv-more .inv-mbtn {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
  width: auto;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  cursor: pointer;
}
.btn-paginate:hover,
.cdb-more:hover,
.mp-more:hover,
.ff-more:hover,
.rw-more:hover,
.pg2-more:hover,
.pack-page .pv-more:hover,
.inv-page .inv-more .inv-mbtn:hover {
  border-color: transparent;
  background: none;
  color: #9df1ff;
  text-decoration-color: var(--cyan);
}
/* inline-block stops the parent's underline propagating onto the count. */
.btn-paginate small,
.cdb-more small,
.mp-more small,
.ff-more small,
.pack-page .pv-more small {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--dim);
}
/* ---- 5. Focus is one thing everywhere: 2px cyan, offset 2px. ----------- */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-control:focus-visible,
.btn-paginate:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.status-action:focus-visible,
.access-text-button:focus-visible,
.access-choice-cta:focus-visible,
.account-rail-step-link:focus-visible,
.hero-search .hero-search-go:focus-visible,
.recommend-button:focus-visible,
.py-cta:focus-visible,
.py-alt:focus-visible,
.rc-go:focus-visible,
.ff-go:focus-visible,
.pp-more:focus-visible,
.cdb-refine:focus-visible,
.sf-more:focus-visible,
.fv-autobtn:focus-visible,
.cdb-more:focus-visible,
.mp-more:focus-visible,
.ff-more:focus-visible,
.rw-more:focus-visible,
.pg2-more:focus-visible,
.pack-page .pv-more:focus-visible,
.inv-page .inv-go:focus-visible,
.inv-page .inv-mbtn:focus-visible,
.imx-page .imx-mbtn:focus-visible,
.site-header > .account-status-menu .account-menu-actions .secondary-action:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* ---- 6. The 44px floor on phones, where earlier blocks shrink it. ------ */
@media (max-width: 760px) {
.fv-headright .fv-autobtn,
  .inv-page .inv-mbtn,
  .imx-page .imx-mbtn,
  .btn-primary,
  .btn-secondary,
  .btn-control,
  .btn-paginate {
    min-height: 44px;
  }
}
/* ---- 7. NOTE FOR THE OWNER, no change made here. ----------------------- */
/* Every money action -- .account-drawer-primary ("Go Pro - $5.99/mo"),
   .account-rail-step-link.is-pro, .access-choice-cta-pro, .gold-gate-cta,
   .account-page #planStripAct .pr-cta -- is a red/coral fill
   (linear-gradient(135deg, #ff4668, #f1c86d) or #ff2d4b -> #ff7a8d). In this
   palette red means LOSS and gold means MONEY, so the checkout action is
   currently saying the wrong word. .dy-cta on My Dynasty already uses gold
   (rgba(241,184,75,...)) and is the shape the rest should take. Colours are
   the owner's call, so nothing here is repainted. */
/* end v917-buttons */

/* v923-balanced-headlines: every page headline balances its line breaks, so
   a two-line hero reads "Free lookups. / One paid plan." rather than leaving
   one word of the accent phrase stranded on the first line. Balance keeps the
   line count and evens the lengths; it never adds a line. Browsers without it
   ignore the declaration. Jason asked for it from the Pricing page, 2026-09-02. */
main h1 { text-wrap: balance; }
/* end v923-balanced-headlines */

/* v924-header-row: above 1180px the nav pill was absolutely centred in the
   header, so it floated between the logo and the account cluster with a gap
   either side and read as three unrelated objects. It is a grid item now:
   logo, then the nav beside it, then Card Import and the account pill on the
   right -- one gap, in one place. 901-1180px already laid it out statically.
   Jason asked for it from the Pricing page, 2026-09-02. */
@media (min-width: 1181px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .site-nav { position: static; left: auto; transform: none; justify-self: start; }
}
/* end v924-header-row */
/* v931-hit-areas: 44px tap targets, no visual change */
@media (max-width: 760px) {
.site-footer a { padding-block: 12px; }
}
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* v931-feedback: board skeleton, toast, destructive action */

/* -- Board skeleton -- a placeholder for a board's rows while its first fetch
   is in flight, so the page does not sit empty before the real cards land.
   database.js, rankings.js, flip-finder.js and market-pulse.js each render
   six of these before their fetch starts; their existing render and error
   paths both replace it the same way they replace any other board markup. */
.board-skeleton {
  display: grid;
}
.board-skeleton-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(45, 58, 70, .55);
}
.board-skeleton-row:last-child {
  border-bottom: 0;
}
.board-skeleton-art,
.board-skeleton-bar {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: rgba(147, 164, 179, 0.08);
}
.board-skeleton-art {
  width: 36px;
  height: 50px;
}
.board-skeleton-lines {
  display: grid;
  gap: var(--space-3);
}
.board-skeleton-bar {
  height: 9px;
}
.board-skeleton-bar-a {
  width: 62%;
}
.board-skeleton-bar-b {
  width: 38%;
}
.board-skeleton-art::after,
.board-skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(238, 244, 248, 0.08), transparent);
  animation: shimmer 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .board-skeleton-art::after,
  .board-skeleton-bar::after {
    animation: none;
  }
}

/* -- Toast -- a transient status line for the pages that want one, on top of
   (not instead of) their existing inline status text. One instance is
   created and reused by public/toast.js. */
.dp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 7000;
  max-width: min(92vw, 420px);
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-l);
  background: rgba(8, 14, 22, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 2px 0 0 0 var(--cyan);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.dp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.dp-toast.is-good {
  box-shadow: inset 2px 0 0 0 var(--sage);
}
.dp-toast.is-warn {
  box-shadow: inset 2px 0 0 0 var(--gold);
}
.dp-toast.is-bad {
  box-shadow: inset 2px 0 0 0 var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .dp-toast {
    transform: translate(-50%, 0);
    transition: opacity 180ms ease;
  }
}

/* -- Destructive action -- same size/shape as .secondary-action, said in red
   instead of underlined cyan. .inv-mbtn.danger and .imx-mbtn.danger already
   carry the right colour and a transparent background from their own rules
   (core.css ~21413, ~21460, ~23874), so only the shared hover/focus
   behaviour is added here rather than restating colour or background. */
.destructive-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--red);
  font-weight: var(--w-semi);
  cursor: pointer;
  transition: color 140ms ease, box-shadow 140ms ease;
}
.destructive-action:hover,
.inv-page .inv-mbtn.danger:hover,
.imx-page .imx-mbtn.danger:hover {
  color: color-mix(in srgb, var(--red) 80%, white);
  box-shadow: inset 0 0 0 1px rgba(255, 101, 124, .45);
}
.destructive-action:focus-visible,
.inv-page .inv-mbtn.danger:focus-visible,
.imx-page .imx-mbtn.danger:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 101, 124, .45);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* end v931-feedback */

/* v934-hero-triad: one hero across the site.
   Market Pulse is the reference. Its hero gives the copy a fluid column and the
   triad a 540px minimum, which lets .dp-triad reach its 640px max. The Advisor
   and Squad Builder were on a narrower 0.72fr stage (447px and 468px), which is
   why their cards came out smaller than every other hero's. Both now emit the
   same .dp-slot markup, so this is the only geometry they need. */
/* Desktop only. The hero already collapses to one column at 900px, and this
   block sits after that media query, so leaving it unscoped forced the two
   column layout onto phones and squeezed the copy column to zero. */
/* v935: the containers no longer carry .hero-stage, so the old stage
   treatment (.tool-hero:has(.hero-stage): 62px padding, 520px min-height, a
   grid-line overlay) stops matching and the hero falls to the same frameless
   v913 shell Rankings uses -- flush under the feed, hairline beneath. The grid
   itself is .mp-hero's, verbatim. */
.advisor-page .tool-hero,
.squad-page .tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
@media (min-width: 901px) {
  .advisor-page .tool-hero,
  .squad-page .tool-hero {
    grid-template-columns: minmax(0, 1fr) minmax(540px, auto);
  }
}
/* Squad Builder's copy is three lines against a 430px triad; centred, its
   eyebrow landed 54px under the feed where Rankings and the Advisor land at 26.
   Top-align that one hero so all three start on the same line. */
.squad-page .tool-hero { align-items: start; }
.advisor-triad,
.squad-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-9);
  align-items: end;
  justify-items: center;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
/* Below that breakpoint the stage is only as wide as the phone, so the fixed
   150/192px cards have to come down with it. Market Pulse and the Card Database
   hide their triad here instead; the Advisor and Squad Builder have always shown
   card art on a phone, so they keep it at a size that fits. */
@media (max-width: 900px) {
  /* Market Pulse and Rankings hide their triad here. The Advisor and Squad
     Builder have always shown card art on a phone, so they keep all three in
     one compact row rather than stacking into a 700px-tall hero. The selector
     has to out-specify .tool-hero:has(.hero-stage) .hero-stage, which collapses
     every other stage to a single column. */
  .advisor-triad,
  .squad-triad {
    gap: var(--space-3);
    max-width: 100%;
  }
  .advisor-triad .dp-cd, .squad-triad .dp-cd { width: 96px; }
  .advisor-triad .dp-slot.is-centre .dp-cd, .squad-triad .dp-slot.is-centre .dp-cd { width: 118px; }
  /* The pill is sized for a 192px desktop column and ran off the right edge of
     a 114px one, so it wraps and shrinks instead of clipping. */
  .advisor-triad .dp-cat, .squad-triad .dp-cat {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    font-size: var(--t-micro);
    padding: 3px 7px;
    line-height: 1.25;
  }
}

/* v937-marks-and-boxes: every Pulse Rating carries the mark, every stub figure
   carries the coin, and the last bordered-and-filled controls come off. */
.stub-mark {
  /* The coin is sized through one property so a host rule for card art
     (".mp-row img { width: 40px }", ".ff-row img { aspect-ratio: 5 / 7 }")
     cannot stretch it into an oval -- it did, on Market Pulse and Flip Finder
     (v939). Width and height come from --coin and nothing else. */
  --coin: .82em;
  display: inline-block;
  width: var(--coin) !important;
  height: var(--coin) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
  border-radius: 50%;
  vertical-align: -.08em;
  margin-right: .24em;
}
.dp-val .stub-mark, .cp-figs .stub-mark, .cdb-fig .stub-mark { --coin: .7em; vertical-align: -.04em; }
.pr-price .stub-mark, .cdb-num .stub-mark, .cdb-keep .stub-mark, .mp-num .stub-mark, .mp-pair .stub-mark, .cp-vx u .stub-mark { --coin: .9em; margin-right: .2em; }
/* Squad Builder: the save chip and the Filters button were bordered pills with
   a cyan fill, the legacy app's signature. Both become inline text actions like
   Market Pulse's "Why so few?". */
.squad-save-chip,
.sf-more {
  border: 0;
  background: none;
  padding: 0 2px;
  border-radius: 0;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(95, 199, 223, .35);
  text-underline-offset: 4px;
}
.squad-save-chip:hover, .sf-more:hover { color: var(--cyan-ink); text-decoration-color: currentColor; border-color: transparent; }
/* Card pages: the two verdict buttons were a filled box and an outlined box.
   The primary is now the site's plain cyan action; the secondary an inline link. */
.cp-cta {
  border: 0;
  background: none;
  padding: 0 2px;
  border-radius: 0;
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(95, 199, 223, .35);
  text-underline-offset: 5px;
}
.cp-cta.is-plain { color: var(--muted); text-decoration-color: rgba(125, 143, 160, .35); }
.cp-cta:hover, .cp-cta:focus-visible { color: var(--cyan-ink); text-decoration-color: currentColor; }
.cp-cta-row { gap: 22px; }
/* Other versions of the card: frameless rows separated by a hairline, not
   bordered tiles. */
.cp-vx { border: 0; background: none; border-radius: 0; padding: 8px 0; border-bottom: 1px solid rgba(45, 58, 70, .55); }
.cp-vx:hover { border-color: var(--line); background: none; }

/* v938-inline-glyphs: the marks keep their own display no matter the host.
   Caption rules like ".pr-stat span { display: block }" and ".cp-figs div span"
   also match the Pulse mark, which is a span -- so on the Rankings band and the
   card page the mark stood on its own line above the number and pushed that
   figure below its neighbours. A glyph beside a number is inline by definition;
   nothing should ever stack it, hence the one !important pair in this file. */
.pulse-mark { display: inline-flex !important; }
.stub-mark { display: inline-block !important; }
/* Pulse Rating is one colour everywhere. A hero slot paints its figure in the
   slot accent (sage, gold, red), which is right for a price and wrong for a
   rating -- the rating is the number behind the brand mark and stays cyan even
   under a gold "Budget option" badge. The mark carries the same colour. */
.dp-val:has(.pulse-mark), .dp-val:has(.pulse-mark) .pulse-mark { color: var(--cyan); }

/* v944-phone-chip-and-figures: two phone fixes from the 2026-09-05 mobile QA.
   1. Once you scroll, the pulse feed condenses into a chip pinned at the top
      of the viewport (.is-sticky-compact). Below 900px the header is a logo
      and three controls, and the chip -- up to calc(100% - 24px) wide -- sat
      on top of all of them. It now docks just under the condensed header
      (nav.js measures the header and writes --chip-top, because the header is
      64px stuck on one page and 94px on another). The Advisor keeps its own
      bottom-pinned chip.
   2. The card page's figure row wrapped its last figure onto a second line at
      phone width, so the rating stood alone under the prices. A grid that
      fits as many 84px columns as the width allows keeps three figures on
      one row, and the captions may wrap to two lines. */
@media (max-width: 900px) {
  .pulse-feed-strip.is-sticky-compact:not(.advisor-page .pulse-feed-strip) { top: var(--chip-top, 70px); }
  .cp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 16px 12px; align-items: start; }
  .cp-figs div span { white-space: normal; }
  .cp-figsnote { grid-column: 1 / -1; }
}

/* Approved audit: preserve header artwork and reserve a separate status row. */
.catalog-chrome { position: sticky; top: 0; z-index: 100; background: #080e15; }
.catalog-chrome .site-header { position: relative; top: auto; }
.catalog-chrome .pulse-feed-strip,
.catalog-chrome .pulse-feed-strip.is-sticky-compact { position: relative; inset: auto; margin: 0 0 8px; width: 100%; max-width: 100%; }
.catalog-chrome .pulse-feed-strip.is-sticky-compact .pulse-feed-compact { flex-wrap: wrap; white-space: normal; gap: 4px 12px; }
.has-catalog-chrome .catalog-chrome .pulse-feed-strip.is-sticky-compact { inset: auto; }
html.has-catalog-chrome { scroll-padding-top: var(--catalog-chrome-height, 130px); }
.catalog-chrome .card-import-pill { min-width: 44px; min-height: 44px; }
.catalog-chrome .header-top { min-width: 44px; min-height: 44px; justify-content: center; }
@media (max-width: 900px) {
  .catalog-chrome .site-header { gap: 6px; }
  .catalog-chrome .brand { min-width: 0; }
  .catalog-chrome .brand-logo { max-width: 100%; object-fit: contain; }
  .catalog-chrome .site-header.is-stuck { padding-right: 50px; }
  .catalog-chrome .card-import-pill { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .catalog-chrome .header-top { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  .catalog-chrome .header-top::before, .catalog-chrome .header-top::after { inset: 0; }
}