/* Home page — Audit Ledger theme.
   Verified track-record motif: hairline rules, ledger scorecards,
   monospace figures, flat verification-green accents. */

.home {
  --home-bg: var(--bg-main);
  --home-text: var(--text);
  --home-muted: var(--text-muted);
  --home-primary: var(--primary);
  --home-ring: var(--ring);
  --home-card: var(--bg-elevated);
  --home-card-border: var(--border);
  --home-success: var(--success);
  --home-danger: var(--danger);
}

.home .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* ============ Hero ============ */
.hero { padding: 5rem 0 3rem; background: var(--bg-surface); }
.hero h1 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw + 1rem, 3rem); line-height: 1.05; color: var(--text-bright); }
.hero .lead { margin: 0 0 1.5rem; color: var(--home-muted); font-size: 1.05rem; max-width: 60ch; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ============ Rail — breadth: widest moves across the whole corpus ============ */
.tape-rail {
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border);
}
.tape-rail-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}
/* The track runs past the container to the viewport edge, so a cut-off chip
   shows there is more tape than fits rather than ending flush and looking
   complete at seven symbols. The stamp keeps the page's left margin. */
.home .tape-rail-track {
  margin-right: calc(-1 * max(1rem, (100vw - 1100px) / 2 + 1rem));
}
.tape-rail-stamp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.85rem 1.1rem 0.85rem 0;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  white-space: nowrap;
}
.tape-rail-track {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tape-rail-track::-webkit-scrollbar { height: 3px; }
.tape-rail-track::-webkit-scrollbar-thumb { background: var(--border); }
.rail-chip {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.rail-chip:hover { background: var(--bg-highlight); }
.rail-chip-ticker {
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.04em;
}
/* Sits between ticker and figure so the number is never read bare. Sized down
   to a tag: it qualifies the move, it doesn't compete with it. */
.rail-chip-action {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.rail-chip-action--sell { color: var(--secondary); }
.rail-chip-move { font-weight: 500; }
.rail-chip-move.positive { color: var(--success); }
.rail-chip-move.negative { color: var(--danger); }

/* ============ Masthead ============ */
.masthead {
  background: var(--bg-main);
  padding: 4rem 0 3.25rem;
}
.masthead-content {
  max-width: 780px;
}
.hero-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: none;
}
.masthead .lead {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 0 2.25rem;
}

/* Chrome, not data: the accent marks a phrase, so it takes the interactive
   green rather than the gain green reserved for computed direction. */
.accent {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary-dark);
}

/* Legacy hero classes (influencers index/top pages) — flat audit styling */
.hero-gradient {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  padding: 5rem 0 3.5rem;
  position: relative;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.hero-gradient .hero-title { text-align: left; }
.hero-gradient .lead {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 0 2.25rem;
}
.home .button_to { display: inline-block; margin: 0; }
.home .button_to button { font: inherit; }

/* ============ Tape — chronology: the calls, newest first ============ */
.tape-section {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  padding: 3rem 0 3.5rem;
}

/* Eight columns of one record, read left to right as a derivation: entry and
   latest make the move, and the move against the index makes the excess. The
   rule between rows is the gutter. */
.tape {
  --tape-cols: 4.25rem minmax(6rem, 1.05fr) 4.75rem 5.25rem 5.25rem 5.75rem 5.75rem minmax(5.5rem, 0.9fr);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.tape-head,
.tape-row {
  display: grid;
  grid-template-columns: var(--tape-cols);
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.7rem 1.1rem;
}
.tape-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-darker);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
}
.tape-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tape-row {
  border-top: 1px solid var(--border-light);
  transition: background 0.15s ease;
}
.tape-rows > .tape-row:first-child { border-top: none; }
.tape-row:hover { background: var(--bg-highlight); }

.tape-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text);
  min-width: 0;
}
.tape-cell-label { display: none; }

.tape-date-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.tape-date-link:hover {
  color: var(--text-bright);
  border-bottom-color: var(--border);
}

.tape-asset {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.tape-ticker {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.tape-ticker:hover { color: var(--primary); }
.tape-exchange {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.tape-action {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tape-action--sell { color: var(--secondary); }

.tape-move-value { font-weight: 600; }
.tape-move-value.positive { color: var(--success); }
.tape-move-value.negative { color: var(--danger); }

/* A call priced days after it was made has had no time to move. Saying so is
   more honest than printing 0.0%. */
.tape-unscored {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: help;
}

.tape-caller { min-width: 0; }
.tape-caller-link {
  display: block;
  font-size: 0.78rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tape-caller-link:hover { color: var(--text-bright); }

/* ============ Board — the ranked leaderboard (/top-influencer) ============
   A leaderboard's whole job is comparison, so the entries run as one aligned
   tape rather than as a card wall: rank, channel, return, and the evidence
   behind that return each hold a column, and #10 is one vertical scan from
   #1. Construction follows .tape above — fixed track sizes so the head grid
   and the row grids resolve identically, hairlines instead of gaps. */
.board-masthead {
  padding: 3.5rem 0 2.25rem;
}
.board-masthead .lead {
  margin-bottom: 1.25rem;
}

/* The measurement basis, stated once, in the figure face that carries it. */
.board-basis {
  margin: 0 0 1.75rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.board-section {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  padding: 2.75rem 0 4rem;
}
.board-heading {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text-bright);
}

.board {
  --board-cols: 3.25rem minmax(6rem, 1.2fr) 6.75rem 6.75rem minmax(3.5rem, 0.85fr) 4.5rem 6rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.board-head,
.board-row {
  display: grid;
  grid-template-columns: var(--board-cols);
  align-items: center;
  gap: 0 1rem;
  padding: 0.8rem 1.1rem;
}
.board-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-darker);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}
.board-col-alpha,
.board-col-return,
.board-col-count { text-align: right; }

.board-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.board-entry { display: block; }
.board-entry + .board-entry { border-top: 1px solid var(--border-light); }

.board-row {
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.board-row:hover { background: var(--bg-highlight); }
.board-row:focus-visible {
  outline: none;
  background: var(--bg-highlight);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.board-rank {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Signal amber is the system's top-rank marker — it distinguishes without
   claiming direction, which is what the old crown emoji was reaching for. */
.board-row--leader .board-rank { color: var(--secondary); }

.board-channel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.board-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
}
.board-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-row:hover .board-name { color: var(--primary); }

/* The board ranks on alpha, so alpha carries the display weight and the raw
   return sits beside it one step quieter — the figure it was derived from,
   not a competing headline. */
.board-alpha {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.board-alpha.positive { color: var(--success); }
.board-alpha.negative { color: var(--danger); }
/* Not a result, an unanswered question — it takes the muted tone rather than
   the loss colour, which would read as a negative alpha. */
.board-alpha.is-absent { color: var(--text-dim); }

.board-return {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  color: var(--text-muted);
}
.board-return.positive,
.board-return.negative { color: var(--text-muted); }

/* Real proportion against the field leader — the falloff from first to last
   is the point, so the track is never filled by a clamp. */
.board-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--bg-highlight);
  overflow: hidden;
}
.board-bar-fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  animation: board-bar-draw 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.board-bar-fill.positive { background: var(--success); }
.board-bar-fill.negative { background: var(--danger); }

@keyframes board-bar-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.board-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.board-cell-label { display: none; }

@media (prefers-reduced-motion: reduce) {
  .board-bar-fill { animation: none; }
}

/* One entry reflows to three lines: who and how much, the bar spanning the
   full width beneath it, then the evidence. Column headers give way to
   inline labels so no bare count loses its name. */
@media (max-width: 768px) {
  .board-masthead {
    padding: 2.75rem 0 2rem;
  }
  .board-section {
    padding: 2.25rem 0 3rem;
  }
  .board-head { display: none; }
  .board-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank   channel alpha"
      "bar    bar     bar"
      "return return  return"
      "videos videos  calls";
    gap: 0.65rem 0.75rem;
    padding: 0.95rem 1rem;
  }
  .board-rank    { grid-area: rank; }
  .board-channel { grid-area: channel; }
  .board-alpha   { grid-area: alpha; }
  .board-bar     { grid-area: bar; }
  /* The ranked figure keeps the headline slot beside the channel; the raw
     return drops to the evidence row and takes an inline label there, since
     without the column header nothing else says which figure it is. */
  .board-return {
    grid-area: return;
    text-align: left;
  }
  .board-return .board-cell-label {
    display: inline;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-right: 0.35rem;
  }
  .board-count--videos {
    grid-area: videos;
    text-align: left;
  }
  .board-count--calls { grid-area: calls; }
  .board-count .board-cell-label {
    display: inline;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-right: 0.35rem;
  }
}


/* ============ Roster — the whole field (/influencers) ============
   The leaderboard answers "who is best"; the roster answers "who is tracked,
   and how do they compare on the column I care about". Same tape construction
   as .board — fixed tracks, hairlines instead of gaps — with two differences
   the directory needs: the column headers are the sort control, and a figure
   standing on too few scored videos carries a footnote mark rather than being
   quietly reordered away. */
.roster-masthead {
  padding: 3.5rem 0 2.25rem;
}
.roster-masthead .lead {
  margin-bottom: 1.25rem;
}

.roster-section {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  padding: 2.75rem 0 4rem;
}

/* Heading and search share a baseline: the search is a filter on the thing
   the heading names, not a separate feature with a panel of its own. */
.roster-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.roster-head-row .board-heading {
  margin: 0;
}

.roster-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.roster-search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.roster-search-icon {
  position: absolute;
  left: 0.7rem;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-muted);
  pointer-events: none;
}
.roster-search-input {
  width: 15rem;
  max-width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-bright);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem 0.5rem 2.1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}
.roster-search-input::placeholder { color: var(--text-muted); }
.roster-search-input::-webkit-search-cancel-button { display: none; }
.roster-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.roster-search-clear {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem;
  transition: color 0.15s ease;
}
.roster-search-clear:hover { color: var(--text-bright); }
.roster-search-clear:focus-visible {
  outline: none;
  color: var(--text-bright);
  box-shadow: 0 0 0 3px var(--ring);
}

/* What the roster is currently showing, stated where the eye lands before
   the first row. */
.roster-count {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.roster {
  /* The return track is sized for the longest translated header
     ("Rendement moyen 12M") plus its caret, and the alpha track for
     "12M vs. indice" plus its own, so the head row stays one line in all three
     locales. Both are sort controls, so neither may wrap. */
  --roster-cols: minmax(6rem, 1.1fr) 9rem 10.5rem minmax(3rem, 0.8fr) 4.75rem 4.75rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.roster-head,
.roster-row {
  display: grid;
  grid-template-columns: var(--roster-cols);
  align-items: center;
  gap: 0 1rem;
  padding: 0.55rem 1.1rem;
}
.roster-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-darker);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}
/* Only the mobile strip needs to say what these links do; with the columns
   aligned under them it is self-evident. */
.roster-head-label { display: none; }
.roster-col-bar { color: var(--text-muted); }

/* A header that sorts has to look pressable without becoming a button — the
   hollow-to-lit gesture is carried by the caret alone. */
.roster-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  padding: 0.15rem 0;
  transition: color 0.15s ease;
}
.roster-sort:hover { color: var(--text-bright); }
.roster-sort:focus-visible {
  outline: none;
  color: var(--text-bright);
  box-shadow: 0 0 0 3px var(--ring);
}
.roster-sort.is-active { color: var(--text-bright); }
.roster-caret {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  opacity: 0;
  color: var(--primary);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.roster-sort:hover .roster-caret { opacity: 0.45; }
.roster-sort.is-active .roster-caret { opacity: 1; }
.roster-col-alpha,
.roster-col-return,
.roster-col-videos,
.roster-col-calls {
  justify-content: flex-end;
  text-align: right;
}

.roster-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.roster-entry { display: block; }
.roster-entry + .roster-entry { border-top: 1px solid var(--border-light); }

.roster-row {
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.roster-row:hover { background: var(--bg-highlight); }
.roster-row:focus-visible {
  outline: none;
  background: var(--bg-highlight);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.roster-channel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.roster-avatar {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
}
.roster-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.roster-avatar img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.roster-name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-row:hover .roster-name { color: var(--primary); }

/* The roster sorts on alpha by default, so alpha holds the display weight and
   the raw return follows a step quieter — the figure alpha was derived from,
   not a rival headline. */
.roster-alpha {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.roster-alpha.positive { color: var(--success); }
.roster-alpha.negative { color: var(--danger); }
/* An unanswered comparison, not a bad one — muted rather than coloured, which
   would read as a negative alpha. */
.roster-alpha.is-absent { color: var(--text-dim); }

.roster-return {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  color: var(--text-muted);
}
.roster-return.positive,
.roster-return.negative,
.roster-return.is-absent { color: var(--text-muted); }

/* The footnote mark rides inside the figure column so the digits stay in
   their track — it qualifies the basis of the number, not its sign. */
.roster-mark {
  color: var(--text);
  font-weight: 500;
  margin-left: 0.1em;
}

.roster-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--bg-highlight);
  overflow: hidden;
}
.roster-bar-fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  animation: board-bar-draw 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.roster-bar-fill.positive { background: var(--success); }
.roster-bar-fill.negative { background: var(--danger); }
/* A comparison bar is a claim about rank. On a channel with too few scored
   videos to rank, it steps back to the deep variant — the figure is still
   real, its position in the field is not. */
.roster-bar-fill.positive.is-thin { background: var(--success-dark); }
.roster-bar-fill.negative.is-thin { background: var(--danger-dark); }

.roster-count-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.roster-count-cell.is-thin { color: var(--text-muted); }
.roster-cell-label { display: none; }

.roster-legend {
  margin: 0.9rem 0 0;
  max-width: 78ch;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .roster-bar-fill { animation: none; }
}

/* One entry reflows to three lines, matching the board: who and how much,
   the bar spanning beneath it, then the evidence. The header row loses its
   column alignment, so it stops being a set of labels and becomes what it
   already was underneath — a labelled strip of sort links. */
@media (max-width: 768px) {
  .roster-masthead {
    padding: 2.75rem 0 2rem;
  }
  .roster-section {
    padding: 2.25rem 0 3rem;
  }
  .roster-head-row {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }
  .roster-search {
    flex-wrap: wrap;
  }
  .roster-search-field { flex: 1 1 12rem; }
  .roster-search-input { width: 100%; }

  .roster-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.7rem 1rem;
  }
  .roster-head-label {
    display: inline;
    color: var(--text-muted);
  }
  .roster-col-bar { display: none; }
  .roster-sort {
    justify-content: flex-start;
    text-align: left;
  }

  .roster-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "channel channel"
      "alpha   return"
      "bar     bar"
      "videos  calls";
    gap: 0.65rem 0.75rem;
    padding: 0.95rem 1rem;
  }
  .roster-channel { grid-area: channel; }
  /* The two figures share a row so the subtraction stays visible; each takes
     an inline label, since without the column headers nothing else says which
     is the excess and which the raw return. */
  .roster-alpha {
    grid-area: alpha;
    text-align: left;
  }
  .roster-return  { grid-area: return; }
  .roster-alpha .roster-cell-label,
  .roster-return .roster-cell-label {
    display: inline;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-right: 0.35rem;
  }
  .roster-bar     { grid-area: bar; }
  .roster-count-cell--videos {
    grid-area: videos;
    text-align: left;
  }
  .roster-count-cell--calls { grid-area: calls; }
  .roster-count-cell .roster-cell-label {
    display: inline;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-right: 0.35rem;
  }
}

/* ============ Corroboration — traction, not argument ============ */
.corroboration {
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}
.corroboration-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-align: center;
}
.corroboration-sep { color: var(--text-dim); }

.avatar-picture{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============ Trending stocks ============ */
.trending-stocks { padding: 4.5rem 0 0; }
.trending-stocks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
}
.trending-stock-card {
  display: block;
  padding: 1.75rem 1.75rem 1.5rem;
  text-decoration: none;
  border-left: 1px solid var(--border);
  transition: background 0.15s ease;
}
.trending-stock-card:first-child { border-left: none; }
.trending-stock-card:hover { background: var(--bg-highlight); }
.trending-stock-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.trending-stock-rank {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.trending-stock-rank::after {
  content: ' /';
  color: var(--text-dim);
}
.trending-stock-exchange {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
}
.trending-stock-ticker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.1;
}
.trending-stock-name {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-stock-return {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.trending-stock-return.positive { color: var(--success); }
.trending-stock-return.negative { color: var(--danger); }
.trending-stock-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============ Section heads ============ */
.leaders { padding: 4.5rem 0 4rem; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.section-head h1,
.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.01em;
}
.section-head .muted { color: var(--home-muted); margin: 0; }

.section-head-modern {
  margin-bottom: 3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.section-head-modern h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.01em;
}
.section-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 400;
}

.avatar { width: 40px; height: 40px; border-radius: 2px; display: grid; place-items: center; background: var(--bg-highlight); }
.influencer h3 { margin: 0; font-size: 1.05rem; color: var(--text-bright); }
.sub { margin: 0; color: var(--home-muted); font-size: .9rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 0; }
.metrics dt { color: var(--home-muted); font-size: .78rem; }
.metrics dd { margin: .1rem 0 0; font-weight: 700; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.metrics .pos { color: var(--home-success); }

/* ============ How it works ============ */
.how {
  padding: 5rem 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  counter-reset: how-step;
}

.step {
  counter-increment: how-step;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: border-color 0.2s ease;
}
.step:hover {
  border-color: var(--text-muted);
}
.step:focus-within {
  box-shadow: 0 0 0 2px var(--ring);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.step-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
}

.step-icon--youtube {
  color: var(--danger);
  border-color: rgba(194, 95, 76, 0.4);
}

.step-icon--youtube svg {
  width: 1.4rem;
  height: 1.4rem;
}

.step-icon--price {
  color: var(--success);
  border-color: rgba(93, 169, 122, 0.4);
}

.step-icon--price svg {
  width: 1.3rem;
  height: 1.3rem;
}

.step-icon--chart {
  color: var(--secondary);
  border-color: rgba(201, 164, 92, 0.4);
}

.step-icon--chart svg {
  width: 1.3rem;
  height: 1.3rem;
}

.step-kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.step-kicker::after {
  content: counter(how-step, decimal-leading-zero);
  color: var(--primary);
  font-size: 0.9rem;
}

.step-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.01em;
}

.step-desc {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.home-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.home-cta {
  padding: 4.5rem 0 5rem;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
}

.home-cta h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-bright);
}

.home-cta .lead {
  margin: 0 0 2rem;
  color: var(--text);
  max-width: 60ch;
}

/* CTA */
.cta { padding: 2.5rem 0 3rem; }
.signup { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.signup input[type="email"] { flex: 1; min-width: 220px; padding: .75rem .9rem; border-radius: 2px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); outline: none; }
.signup input[type="email"]:focus { border-color: var(--home-primary); box-shadow: 0 0 0 2px var(--home-ring); }
.tiny { color: var(--home-muted); font-size: .8rem; }

/* ============ Analyses section ============ */
.analyses-section {
  padding: 2.5rem 0 4rem;
  background: var(--bg-main);
  min-height: 100vh;
}
.analyses-section .section-head { align-items: center; }

/* ============ Influencers grid (leaders) ============ */
/* One strip, hairline-divided: the same construction the tape and the trending
   row use. No gap — the rule is the gutter. */
.influencers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--border);
  margin-top: 0;
}

.influencer-card {
  position: relative;
  display: block;
  background: var(--bg-elevated);
  padding: 1.75rem;
  border-left: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.influencers-grid > .influencer-card:first-child { border-left: none; }
.influencer-card:hover {
  background: var(--bg-highlight);
}

/* Rank tag — entry number, no medals and no ledger glyph */
.rank-badge {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.3rem 0.55rem;
  background: var(--bg-surface);
}
.rank-badge .rank-number { font-family: var(--font-mono); }
.rank-badge .rank-icon { font-size: 0.95rem; }

/* Creator entries support the asset data; they no longer outweigh it, so the
   portrait drops to a byline mark and the block reads left-aligned. */
.card-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.avatar-wrapper {
  position: relative;
  margin-top: 0.75rem;
}
.influencer-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
}
.influencer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  background: var(--bg-highlight);
}

.influencer-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-bright);
  text-align: left;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Performance ledger block */
.performance-showcase {
  width: 100%;
  background: var(--bg-surface);
  padding: 1.25rem;
  border-radius: 2px;
  border: 1px solid var(--border);
}
.performance-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  text-align: left;
}
.performance-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.trend-icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: var(--success);
  stroke-width: 2.5;
}
.performance-value span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--success);
}

.performance-value.negative span {
  color: var(--danger);
}

/* A channel whose benchmark hasn't been fetched yet has no excess return to
   report. Muted, not red — the absence of an answer is not a bad one. */
.performance-value.is-absent span {
  color: var(--text-dim);
}

.performance-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-highlight);
  overflow: hidden;
  position: relative;
}
.performance-fill {
  height: 100%;
  background: var(--success);
}

.performance-fill.negative {
  background: var(--danger);
}

/* Stats Row */
.stats-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.stat-label {
  color: var(--text-muted);
}

.stat-value {
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.stat-value.negative {
  color: var(--home-danger);
}

.stat-value.positive {
  color: var(--home-success);
}
.stat-item svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--primary);
  flex-shrink: 0;
}

/* Card Actions */
.card-actions {
  width: 100%;
  margin-top: 0.5rem;
}
.analysis-card-link { text-decoration: none; color: inherit; display: block; }
.analysis-card-link:hover .analysis-item { border-color: var(--text-muted); }
.analysis-item { display: flex; gap: 1rem; padding: 1rem 1.25rem; transition: border-color 0.2s ease; cursor: pointer; background: var(--bg-elevated); border-radius: 3px; border: 1px solid var(--border); }
.analysis-thumbnail { flex-shrink: 0; width: 160px; height: 90px; border-radius: 2px; overflow: hidden; background: var(--bg-highlight); }
.analysis-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.analysis-content { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.analysis-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.25rem 0;
  color: var(--text-bright);
}
.analysis-title a {
  color: var(--home-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.analysis-title a:hover {
  color: var(--home-primary);
}
.analysis-url { font-size: .8rem; font-family: var(--font-mono); color: var(--home-muted); }
.analysis-url a { color: var(--home-muted); text-decoration: none; word-break: break-all; }
.analysis-url a:hover { text-decoration: underline; color: var(--home-primary); }
.analysis-author { font-weight: 600; color: var(--home-text); font-size: .9rem; }
.analysis-author a {
  color: var(--home-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.analysis-author a:visited { color: var(--home-text); }
.analysis-author a:hover {
  color: var(--secondary);
  border-color: var(--secondary);
}
.analysis-meta { display: flex; gap: 1rem; align-items: center; font-size: .875rem; }
.status {
  padding: .35rem .7rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: 0.06em;
  display: inline-block;
}
.status-pending {
  background: rgba(201, 164, 92, 0.12);
  color: var(--warning);
  border: 1px solid rgba(201, 164, 92, 0.35);
}
.status-processing {
  background: rgba(139, 167, 147, 0.12);
  color: var(--info);
  border: 1px solid rgba(139, 167, 147, 0.35);
}
.status-analyzed, .status-completed {
  background: rgba(93, 169, 122, 0.12);
  color: var(--success);
  border: 1px solid rgba(93, 169, 122, 0.35);
}
.status-failed {
  background: rgba(194, 95, 76, 0.12);
  color: var(--danger);
  border: 1px solid rgba(194, 95, 76, 0.35);
}
.analysis-tickers { display: flex; flex-wrap: wrap; gap: .4rem; }
.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: 0.04em;
}
.ticker-chip .ticker-action { font-size: .62rem; line-height: 1; }
.ticker-buy {
  background: rgba(93, 169, 122, 0.12);
  color: var(--success);
  border: 1px solid rgba(93, 169, 122, 0.35);
}
.ticker-sell {
  background: rgba(194, 95, 76, 0.12);
  color: var(--danger);
  border: 1px solid rgba(194, 95, 76, 0.35);
}
.date { color: var(--home-muted); font-family: var(--font-mono); font-size: .8rem; }
.empty-state { text-align: center; padding: 3rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 3px; margin-top: 1rem; }
.empty-message { font-size: 1.1rem; color: var(--text-bright); margin: 0 0 .5rem; font-weight: 500; }
.empty-hint { color: var(--home-muted); margin: 0; font-size: .95rem; }
.empty-hint a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}
.empty-hint a:hover { color: var(--text-bright); }
.empty-hint a:focus-visible {
  outline: none;
  color: var(--text-bright);
  box-shadow: 0 0 0 3px var(--ring);
}
.external-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}
.external-link:hover {
  color: var(--success);
  text-decoration: none;
}
.external-link::after {
  content: '↗';
  font-size: 0.9rem;
  opacity: 0.7;
}
.analysis-detail .section-title {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.performance-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(201, 164, 92, 0.12);
  color: var(--warning);
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(201, 164, 92, 0.35);
}

.performance-badge svg {
  width: 1rem;
  height: 1rem;
}

/* The badge carries a computed video return, so a scored one takes the market
   pair and the amber base is left to the state that has no figure yet.
   (Previously supplied by portfolio.css, which now owns only the book.) */
.performance-badge.positive {
  background: rgba(93, 169, 122, 0.12);
  border-color: rgba(93, 169, 122, 0.35);
  color: var(--success);
}

.performance-badge.negative {
  background: rgba(194, 95, 76, 0.12);
  border-color: rgba(194, 95, 76, 0.35);
  color: var(--danger);
}

.performance-badge.neutral {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-muted);
}

.performance-indicator.positive {
  background: rgba(93, 169, 122, 0.12);
  color: var(--success);
  border: 1px solid rgba(93, 169, 122, 0.35);
}

.metric-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-bright);
}

.profit-metric .metric-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.highlighted-text {
  background: rgba(201, 164, 92, 0.25);
  color: var(--text-bright);
  padding: 0.15rem 0.35rem;
  border-radius: 2px;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--secondary);
}
.influencer-info {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0.5rem 0;
}
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.author-name { font-weight: 600; font-size: 1.05rem; color: var(--text-bright); }
.author-name a {
  color: var(--home-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.author-name a:visited { color: var(--home-text); }
.author-name a:hover {
  color: var(--secondary);
  border-color: var(--secondary);
}

.price-header .section-title {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.price-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.price-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.price-currency {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 500;
}

.price-amount {
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.35rem;
  font-weight: 600;
}

.calendar-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

@media (max-width: 768px) {

  .price-amount {
    font-size: 1.9rem;
  }

  .price-currency {
    font-size: 1.2rem;
  }
}

.profit-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  font-weight: 600;
}

.profit-positive {
  color: var(--success);
}

.profit-negative {
  color: var(--danger);
}

.profit-neutral {
  color: var(--text-muted);
  font-weight: 500;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .influencers-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
  }

}

@media (max-width: 900px) {
  .scoreboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .scorecard {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .scorecard:first-child { border-top: none; }
  .scorecard:last-child { border-right: none; }

  .trending-stocks-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .trending-stock-card {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .trending-stock-card:first-child { border-top: none; }
}

@media (max-width: 768px) {
  .home .container {
    padding: 0 1.25rem;
  }

  .masthead {
    padding: 2.75rem 0 2.5rem;
  }
  .hero-title {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    line-height: 1.05;
  }
  .masthead .lead {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* The rail keeps its stamp, stacked above a track the thumb can push. */
  .tape-rail-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .tape-rail-stamp {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0;
  }
  /* Matches the wider container padding below 768px. */
  .home .tape-rail-track {
    margin-right: -1.25rem;
  }

  /* One record reflows to three lines: identity and move, then the
     arithmetic, then who called it. Column headers give way to inline
     labels so no figure loses its name. */
  .tape-section {
    padding: 2.5rem 0 3rem;
  }
  .tape-head { display: none; }
  .tape-row {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "asset  asset  asset  move"
      "date   entry  latest alpha"
      "action caller caller caller";
    gap: 0.45rem 0.8rem;
    padding: 0.95rem 1rem;
  }
  .tape-asset  { grid-area: asset; }
  .tape-move   { grid-area: move; text-align: right; }
  /* Takes the slot that was empty padding, directly under the move it
     qualifies, so the two figures stack in the same column. */
  .tape-alpha  { grid-area: alpha; text-align: right; }
  .tape-date   { grid-area: date; }
  .tape-entry  { grid-area: entry; }
  .tape-latest { grid-area: latest; }
  .tape-action { grid-area: action; }
  .tape-caller { grid-area: caller; }
  .tape-cell-label {
    display: inline;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.3rem;
  }

  .cta-row {
    gap: 0.875rem;
    flex-direction: column;
    width: 100%;
  }

  .cta-row .btn,
  .cta-row .btn-ghost-modern,
  .cta-row .btn-primary-modern,
  .cta-row .button_to {
    width: 100%;
  }

  .cta-row .button_to button {
    width: 100%;
    min-height: 48px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .section-head .btn {
    width: 100%;
    min-height: 48px;
  }

  .section-head-modern h2 {
    font-size: 1.75rem;
  }

  .analyses-grid {
    gap: 1.25rem;
  }

  .analysis-item {
    flex-direction: column;
    padding: 1rem;
  }

  .analysis-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-bottom: 0.75rem;
  }

  .influencers-grid {
    grid-template-columns: 1fr;
  }
  .influencer-card {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .influencers-grid > .influencer-card:first-child { border-top: none; }

  .influencer-card {
    padding: 1.75rem 1.5rem;
  }

  .rank-badge {
    top: 1rem;
    right: 1rem;
  }

  .influencer-avatar {
    width: 88px;
    height: 88px;
  }

  .influencer-name {
    font-size: 1.25rem;
  }

  .performance-showcase {
    padding: 1.25rem 1rem;
  }

  .performance-value span {
    font-size: 1.45rem;
  }

  .stat-item {
    font-size: 0.9rem;
  }

  .btn-primary-modern,
  .card-actions .btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.9rem;
    width: 100%;
    min-height: 48px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .step {
    padding: 1.5rem;
  }

  .home-cta h2 {
    font-size: 1.85rem;
  }

  .home-cta .lead {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .home .container {
    padding: 0 1rem;
  }
  /* The container's padding narrows here, so the rail's bleed has to narrow
     with it — a wider negative margin pushes the track past the viewport edge
     and gives the whole page a horizontal scrollbar. */
  .home .tape-rail-track {
    margin-right: -1rem;
  }

  .audit-hero {
    padding: 3rem 0 2.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .hero-kicker {
    font-size: 0.68rem;
  }

  .cta-row {
    gap: 0.75rem;
  }

  .btn,
  .btn-ghost-modern,
  .btn-primary-modern {
    font-size: 0.8rem;
    padding: 0.75rem 1.25rem;
  }

  .scorecard {
    padding: 1.4rem 1.25rem 1.25rem;
  }

  .scorecard-value {
    font-size: 1.75rem;
  }

  .calls-split {
    flex-direction: column;
    gap: 0.3rem;
  }

  .section-head-modern h2 {
    font-size: 1.5rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  .influencer-card {
    padding: 1.5rem 1.25rem;
  }

  .influencer-avatar {
    width: 80px;
    height: 80px;
  }

  .influencer-name {
    font-size: 1.15rem;
  }

  .performance-showcase {
    padding: 1.1rem 1rem;
  }

  .performance-label {
    font-size: 0.68rem;
  }

  .performance-value span {
    font-size: 1.3rem;
  }

  .stats-row {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .stat-item {
    width: 100%;
    justify-content: space-between;
  }

  .step-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .step-title {
    font-size: 1.2rem;
  }

  .step-desc {
    font-size: 0.9rem;
  }

}

@media (min-width: 900px) {
  .hero { padding: 6rem 0 3.5rem; }
}

/* ── Video analysis comments ─────────────────────────────────────────── */
/* The section follows the page's band idiom: heading on the band, panels
   around the content. The composer is one instrument — field and footer
   inside a single well — rather than a field with a button parked beside it. */
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.comments-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
}

.comments-count {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-surface);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
}

/* ── Composer ────────────────────────────────────────────────────────── */
.comment-composer {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The textarea is borderless inside the well, so the well itself carries the
   focus treatment — otherwise keyboard focus would have nothing to land on. */
.comment-composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.comment-composer-field {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}

/* Matched to .comment-body's measure so a draft wraps where it will wrap once
   posted, and the composer's text column lines up with the thread below it. */
.comment-form textarea {
  flex: 1;
  min-width: 0;
  max-width: 68ch;
  min-height: 3.4rem;
  max-height: 240px;
  padding: 0;
  border: 0;
  background: none;
  resize: none;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
}

.comment-form textarea:focus {
  outline: none;
}

.comment-form textarea::placeholder {
  color: var(--text-muted);
}

.comment-composer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem 0.65rem 1.1rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-surface);
}

/* --text rather than a dimmer step: at 0.7rem the size already does the
   quieting, and --text-muted on this recessed foot lands at 4.1:1. */
.comment-composer-hint {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text);
}

.comment-composer-hint kbd {
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-highlight);
  font-family: inherit;
  font-size: 0.92em;
  color: inherit;
}

/* Only rendered once the limit is within reach — see comments_controller. */
.comment-composer-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.comment-composer-count.is-spent { color: var(--danger); }

.comment-send-btn {
  flex-shrink: 0;
}

/* An empty composer has nothing to post, and says so. Driven off the
   placeholder rather than JS so a Turbo-replaced form is never stale — the
   field is `required`, so the browser blocks the submit either way. */
.comment-form:has(textarea:placeholder-shown) .comment-send-btn,
.comment-form:has(textarea:placeholder-shown) .comment-send-btn:hover {
  background: var(--bg-highlight);
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}

.comment-form-error {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--danger-dark);
  border-radius: 2px;
  color: var(--danger);
  font-size: 0.85rem;
}

.comment-sign-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.comment-sign-in-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
}

/* ── Thread ──────────────────────────────────────────────────────────── */
.comments-list {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.comments-empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.comments-empty p { margin: 0; }

/* Hide the empty state once a comment exists (including live appends) */
.comments-list:has(.comment) .comments-empty {
  display: none;
}

.comment {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
}

/* The rule is the gutter. The first row's previous sibling is the (hidden)
   empty state, so it correctly gets no rule above it. */
.comment + .comment {
  border-top: 1px solid var(--border-light);
}

.comment-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.comment-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-avatar--composer {
  margin-top: 0.15rem;
}

.comment-content {
  min-width: 0;
  flex: 1;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.comment-author {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-bright);
}

.comment-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Comments are prose, so they get a prose measure — the panel is 1100px wide
   and an unbroken 130-character line is not readable at any size. */
.comment-body {
  margin: 0.3rem 0 0;
  max-width: 68ch;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.comment-reply-btn {
  margin: 0.45rem 0 0 -0.5rem;
  padding: 0.3rem 0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.comment-reply-btn:hover {
  background: var(--bg-highlight);
  color: var(--primary);
}

.comment-reply-btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Replies are prose under their parent, not a data strip: the rail groups
   them and a small gap separates them. */
.comment-replies {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}

.comment-replies:empty {
  display: none;
}

.comment-reply {
  padding: 0;
  gap: 0.7rem;
}

.comment-reply + .comment-reply {
  border-top: 0;
}

.comment-reply .comment-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

/* Composing a reply is joining that list, so the form shares the replies'
   indent and rail. When replies already exist the rails must meet, or the
   line reads as broken. */
.comment-reply-form {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}

.comment-replies + .comment-reply-form {
  margin-top: 0;
  padding-top: 1rem;
}

.comment-reply-form textarea {
  min-height: 2.6rem;
}

.comment-reply-form .comment-composer-field {
  padding: 0.8rem 1rem;
}

@media (max-width: 640px) {
  .comment-composer-field,
  .comment {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .comment-composer-foot {
    flex-wrap: wrap;
    padding: 0.65rem 1rem;
  }

  /* Hint above the control row rather than beside it — reading order, not
     just visual order. */
  .comment-composer-hint {
    flex-basis: 100%;
    order: 1;
  }

  .comment-composer-count {
    order: 2;
  }

  .comment-send-btn {
    order: 3;
    margin-left: auto;
  }

  .comment-sign-in {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-sign-in .btn {
    text-align: center;
  }

  /* Every 1rem of rail is a rem the reply text doesn't get. */
  .comment-replies,
  .comment-reply-form {
    padding-left: 0.75rem;
  }
}

/* "Enter to post" is a keyboard affordance. On a touch device it is not
   advice, it is clutter. */
@media (hover: none) and (pointer: coarse) {
  .comment-composer-hint {
    display: none;
  }
}