/* THE READOUT — layer 18, and the last one index.html loads.
 *
 * WHAT THIS FILE IS FOR
 * ---------------------
 * Layers 01–16 grew as a series of passes over a component-library look: a
 * base, a "polish" pass, a "premium contrast" pass, a "cinematic" pass. Those
 * passes are where the generated-build signature lived — ambient green washes,
 * gradient-filled cards, 70px shadows, backdrop blur, hover lifts, pills — and
 * they were edited in place on 28 August rather than papered over, because
 * fighting them from a later layer would have left both looks in the file.
 *
 * What is LEFT for this layer is the part that is additive: the devices the new
 * language needs that did not exist before. Three of them:
 *
 *   1. THE SECTION RULE. A hairline with a 22px green index mark at its left
 *      end and a mono label riding above it. It replaces the card box. Defined
 *      in layer 00 (.fp-card-head) and applied to the older <h2> sections in
 *      layer 04; this file handles the stragglers and the rhythm around them.
 *
 *   2. THE BREADTH TAPE. Market Health was a donut gauge — the single most
 *      template-identifiable component there is, and the wrong shape for its
 *      own data. Breadth is 29 of 30: a proportion of a line, not an arc of an
 *      invented /100. It is a line now.
 *
 *   3. ONE VOICE FOR EVERY LABEL. The mono face carries all the structure —
 *      labels, units, column heads, band names, controls. The humanist face is
 *      left with headings and prose. That split is the identity decision; see
 *      the .fp-label note in layer 00 for why it is worth the risk.
 *
 * WHY IT IS SAFE TO ADD A LAYER HERE: document order is load-bearing in this
 * stylesheet (see docs/frontend-architecture.md), and this file is appended
 * LAST, so nothing below it can be shadowed by it. It is also loaded only by
 * index.html — landing.html and the content pages take 00-tokens.css and their
 * own layers, so the palette is shared while the app's structure is not
 * imposed on a marketing page.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. RHYTHM — whitespace instead of walls.
 *
 * When every section was a box, the boxes did the separating and 24px between
 * them was enough. Strata need more air than objects do: the gap IS the
 * boundary now, so it has to be unmistakable. 44px reads as "a new subject",
 * where 24px read as "the next item in a list".
 * ════════════════════════════════════════════════════════════════════ */
/* The base gaps are NOT set here. They live at their source — 01-base.css for
   the shell and the column, 11-responsive.css for narrow desktop, and
   16-final-mobile.css for phones — because an unconditional rule in this layer
   would silently kill every narrower @media declaration in the layers above it.
   Media queries carry no specificity, so document order decides, and this file
   is last. `npm run check:layout` catches exactly this and did.
   The tablet step is in 11-responsive.css for the same reason — it has to sit
   BETWEEN the base rule and the phone rule, and this layer is after both. */

/* ═══════════════════════════════════════════════════════════════════════
 * 2. THE PAGE HEAD.
 *
 * "Good morning, RyanT_test" at 28px bold was the largest thing on Today,
 * above a market reading of 97. The greeting is not the news. It keeps its
 * place and its warmth and gives up its scale — the number below it is what
 * the page is for.
 * ════════════════════════════════════════════════════════════════════ */
.fp-home-head {
  align-items: baseline;
  padding-bottom: var(--fp-3);
  margin-bottom: var(--fp-2);
}
.fp-home-head .fp-h1 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fp-text);
}
.fp-home-head .fp-caption { color: var(--fp-text-muted); }

/* The live indicator stops being a sixth pill. A dot, a word and a time, in the
   same mono voice as every other piece of metadata on the page — which is what
   it is. The dot is the accent, and it is the accent because "are these numbers
   current" is the one thing on this line a person might act on. */
.fp-home-head .live-pill {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: var(--fp-2);
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-faint);
}
.fp-home-head .live-pill svg { color: var(--fp-brand); }

/* ═══════════════════════════════════════════════════════════════════════
 * 3. THE WORDMARK — smaller. It was set at --fp-size-h1, so the product's own
 * name was competing with the market reading for the largest thing on screen.
 * A wordmark identifies; it does not need to dominate.
 * ════════════════════════════════════════════════════════════════════ */
.sidebar > .fp-wordmark,
.sidebar h1 {
  font-size: 17px;
  letter-spacing: -.01em;
  margin-bottom: var(--fp-5);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. THE BREADTH TAPE — Market Health.
 *
 * WHAT CHANGED AND WHAT DID NOT. The reading is identical: breadth, the share
 * of tracked coins up over 24 hours, with the volume-derived context word
 * beneath it. renderMarketHealth() in 07-market.js is untouched, including the
 * 45-point colour threshold and the GAUGE_CIRCUMFERENCE constant — a straight
 * path declared `M0 3 H326.7` has a length of exactly 326.7, so the same
 * stroke-dashoffset arithmetic that drew the arc draws the tape. Not a
 * coincidence, but not a trick either: it is why this was cheap enough to do.
 *
 * WHY A LINE. Breadth is a count out of a count. An arc says "score out of a
 * hundred", which is the thing the code comment in 07-market.js goes out of its
 * way to insist this is NOT ("breadth is deliberately not called a score"). The
 * shape now agrees with the sentence.
 * ════════════════════════════════════════════════════════════════════ */
.fp-tape {
  flex: 1 1 100%;
  min-width: 0;
}
.fp-tape-value {
  display: block;
  font-family: var(--fp-font-num);
  font-size: var(--fp-size-readout);
  line-height: var(--fp-lh-readout);
  font-weight: 500;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--fp-text);
}
/* The unit lives on the scale line under the tape, not as a ::after on the
   figure. renderMarketHealth() writes an em-dash into this element when no coin
   has moved — a real state it takes care to distinguish from zero — and a
   suffixed "%" would have rendered that as "—%". */
.fp-tape-svg {
  display: block;
  width: 100%;
  height: 6px;
  margin: var(--fp-3) 0 var(--fp-2) 0;
}
/* Butt caps, not round: a round cap on a 4px stroke overhangs the zero end by
   2px, so an empty tape draws a mark and a full one runs past its own scale. */
.fp-tape-svg .fp-gauge-track,
.fp-tape-svg .fp-gauge-fill {
  stroke-width: 4;
  stroke-linecap: butt;
}
.fp-tape-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fp-3);
  flex-wrap: wrap;
}
/* The context word — Calm / Active / Volatile. It is a band name, so it is set
   as one: mono, caps, letterspaced. Same treatment as every other band in the
   product, which is the point of having a treatment. */
.fp-tape .fp-gauge-label {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin: 0;
  max-width: none;
  white-space: normal;
}
.fp-tape-scale {
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-faint);
}
/* The read sits beside the tape on a wide screen and under it on a narrow one.
   Measure is capped at 62ch — the sentence is three clauses of prose and it was
   running the full width of a 1400px window, which is unreadable however calm
   the type is. */
.fp-health-body { align-items: flex-start; gap: var(--fp-4) var(--fp-6); }
.fp-health-read { max-width: 62ch; }

@media (min-width: 900px) {
  .fp-health-body { flex-wrap: nowrap; }
  .fp-tape { flex: 0 1 46%; }
  .fp-health-read { flex: 1 1 auto; padding-top: var(--fp-2); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. BANDS, NOT PILLS.
 *
 * Strong / Medium / Weak is a measured band, and so is every other chip in the
 * product. A capsule is the shape of a tag someone applied; a squared chip with
 * a rule under it is the shape of a reading. The ramp itself is unchanged — it
 * still goes by FILL rather than by hue, which is the 7 August colour-vision
 * decision and is not this pass's to reopen.
 * ════════════════════════════════════════════════════════════════════ */
.signal-pill {
  border-radius: var(--fp-radius-sm);
  padding: 3px 7px;
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
}

/* The score. Mono at 900 was a synthesised bold — the face has no such weight,
   so the browser was smearing it. It is the number in its own right now. */
.score-big {
  font-family: var(--fp-font-num);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: var(--fp-track-num);
  font-variant-numeric: tabular-nums;
}

/* Momentum ticks. Squared, because a 4px capsule at 2px radius is a smudge, and
   because a row of ticks is a scale — the same object as the tape above, at a
   different size. */
.momentum-bars { gap: 2px; }
.momentum-bars span {
  width: 3px;
  height: 14px;
  border-radius: 0;
  background: rgba(255,255,255,.10);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. CONTROLS SPEAK IN THE SAME VOICE.
 *
 * Buttons were 13px semibold sentence case in the UI face — the same register
 * as body copy, which is why "Read full breakdown" read as loud as the market
 * summary above it. They are labels for actions, so they are set as labels.
 * ════════════════════════════════════════════════════════════════════ */
.fp-btn,
.fp-linkbtn {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
}
.fp-btn { padding: 9px 13px; }

/* The secondary button loses its fill: a tinted rectangle on a flat ground is
   another box, and the border already states the boundary at the 3.3:1 the
   control token was measured for. */
.fp-btn {
  background: transparent;
  border-color: var(--fp-border-control);
}
.fp-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--fp-brand);
  color: var(--fp-text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. THE THINGS THAT WERE PURELY DECORATIVE.
 * ════════════════════════════════════════════════════════════════════ */

/* The AI orb: a 34px gradient sphere with a specular highlight, sitting in the
   AI Summary header saying nothing. It was repainted into the palette on
   25 August, which made it a palette-compliant fake 3D object rather than a
   non-compliant one. It is out. The section rule names the section. */
.fp-orb { display: none; }

/* The Track Record rail promo. It is the trust asset and it stays in the rail —
   that placement was Ryan's call and it is the right one. It does not need to
   be a card to be there: a rule and the accent mark, like every other section
   in the product. */
.fp-nav-promo {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
  padding: var(--fp-3) 0 0 0;
  position: relative;
}
.fp-nav-promo::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--fp-rule-index-w);
  height: 1px;
  background: var(--fp-brand);
}
.fp-nav-promo-head {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.fp-nav-promo-head svg { display: none; }

/* The coin drawer and the mobile sheet genuinely float over the page, so they
   keep an edge — but a flat one. The radial green wash in layer 03 was the
   sixth instance of the atmosphere this pass removed everywhere else. */
.right-panel,
#drawer {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. METADATA IS MONO, EVERYWHERE.
 *
 * The last of the split: captions, table heads, tooltips' trigger discs and the
 * small print all carried the UI face at 11–12px, which put them in the same
 * voice as prose and made them compete with it. In mono at 10–11px with the
 * label tracking they read as annotation, which is what they are — and prose
 * gets its register back.
 * ════════════════════════════════════════════════════════════════════ */
/* .fp-caption STAYS IN THE READING FACE, and that is a correction made by
 * looking at it. It was moved to mono with everything else here, and it broke
 * the rule the split is built on.
 *
 * .fp-caption is a SIZE, not a role. It is on "Here's what's happening in the
 * market right now", on "Every signal we have published — wins and losses", and
 * on the two-line explanation under the Track Record table — full sentences a
 * person reads left to right. In mono at 11px those became a wall of typewriter
 * text, and the page stopped having a prose voice at all.
 *
 * The line is: MONO NAMES THINGS, THE READING FACE SAYS THINGS. A label, a
 * unit, a band, a column head, a timestamp — mono. A sentence — never. */
.fp-caption { letter-spacing: 0; }

/* .label is the older, unclassed twin of .fp-label and it IS a role: it sits
   above the four Daily Pulse figures and above the metric strip. It joins the
   labels. The #888 it carried was off the text ramp entirely. */
.label {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  color: var(--fp-text-muted);
}

/* The tooltip trigger. A 14px circle with a "?" in it, repeated five times
   across the Market Overview row, was five more small round objects. Squared,
   quieter, same target size. */
.tooltip-icon {
  border-radius: var(--fp-radius-sm);
  font-family: var(--fp-font-num);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. NARROW SCREENS.
 *
 * 76% of this product's traffic is mobile, so the readout has to survive a
 * 320px column. It steps down rather than wrapping: the tape is full width at
 * every size, and only the figure changes scale.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .fp-tape-value { font-size: 56px; }
  .fp-home-head .fp-h1 { font-size: 18px; }
  .filter-tab { margin-right: var(--fp-3); }
  /* The section rule runs edge to edge on a phone — there is no card inset to
     hold it in, and a rule that stops short of the screen edge reads as a
     mistake rather than as a margin. */
  .main-card h2,
  .fp-card-head { padding-top: 6px; }
}
@media (max-width: 380px) {
  .fp-tape-value { font-size: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. EMPTY SLOTS MUST NOT RESERVE SPACE.
 *
 * Found by measuring, not by eye, after the rhythm went from 24px to 44px.
 * #homePersonalise and #verifyBanner are both rendered-into containers that sit
 * empty for most visitors, and .main-dashboard is a flex column — so a
 * zero-height child still costs a full gap on each side. Two of them in a row
 * put 88px of nothing between the page head and the first reading. It was
 * invisible at 24px and obvious at 44px, which is the sort of thing a larger
 * rhythm exposes rather than causes.
 * ════════════════════════════════════════════════════════════════════ */
#homePersonalise:empty,
#verifyBanner:empty,
#accountChip:empty { display: none; }

.fp-home-head { align-items: center; }
.fp-home-actions { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════
 * 11. THE MARKET OVERVIEW READINGS.
 *
 * Five figures that share one caption line. As cards they wrapped 4 + 1, which
 * orphaned the fifth on its own row at every width — the layout consequence of
 * the duplicate-reading question that is still open in PROJECT_STATUS.md, and
 * not something this pass is trying to settle. As ruled readings they sit on a
 * flexible grid and a fifth is simply the fifth.
 * ════════════════════════════════════════════════════════════════════ */
.market-stats {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--fp-4) var(--fp-5);
  margin-top: var(--fp-5);
}
#marketDataStatus {
  grid-column: 1 / -1;
  margin-top: 0 !important;
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-faint) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. THE ALERT TOAST.
 *
 * The card is the one surface in the product that genuinely floats — it is
 * pinned over whatever is on screen — so it keeps a fill and an edge. What it
 * gives up is the 26px coloured halo behind it. The left border already carries
 * the priority and the direction (that is the 6 August fix, and it is right);
 * the halo was the same information a third time, in the loudest possible form,
 * over the top of the page.
 * ════════════════════════════════════════════════════════════════════ */
.popup {
  background: var(--fp-surface-raised);
  border: 1px solid var(--fp-border);
  border-left: 2px solid var(--fp-brand);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-lift);
}
.popup.huge  { box-shadow: var(--fp-shadow-lift); }
.popup.whale { background: var(--fp-surface-raised); box-shadow: var(--fp-shadow-lift); }
.popup.whale.down { background: var(--fp-surface-raised); box-shadow: var(--fp-shadow-lift); }
/* The toast's first line is a category, so it is set as one. */
.popup strong:first-child,
.popup > div:first-child {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 13. THE TRACK RECORD SUMMARY — a description list, set as one.
 *
 * Signals fired / Correct / Missed / Awaiting 24h against four figures. The
 * terms are labels and the figures are readings, so they take the two voices
 * the rest of the product uses, and the numbers align on a common right edge
 * because they are tabular.
 * ════════════════════════════════════════════════════════════════════ */
.fp-track-home dt {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.fp-track-home dd {
  font-weight: 500;
  letter-spacing: var(--fp-track-num);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 14. THE MOVERS ROW — one fact, one emphasis.
 *
 * The row states two things (how strong the signal is, and how far the coin
 * moved) and it was encoding them SIX times: a band chip, a score out of 100, a
 * direction word, a ten-segment meter, a full sentence of explanation, and a
 * red volatility line — thirty times down the page.
 *
 * Nothing here has been deleted. Every one of those six is still in the row,
 * because each is the only place some reader will find what they need: the chip
 * for a glance, the number for a comparison, the sentence for someone who does
 * not yet know what a signal score is. What changed is that they are now RANKED
 * — one lead, one scale, one note — instead of six things shouting at the same
 * volume. That is the difference between a dense row and a loud one.
 * ════════════════════════════════════════════════════════════════════ */
.fp-cell-lead {
  color: var(--fp-text-body);
  font-size: 14px;
  margin-bottom: 6px;
}
.fp-cell-meta {
  display: block;
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fp-text-faint);
}
.fp-cell-meta--tight { margin-top: 5px; letter-spacing: var(--fp-track-label); }
.fp-cell-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fp-text-faint);
  max-width: 210px;
}
/* The 24h move is the column a person scans, so it is the one number in the row
   allowed to be large. 900 was a synthesised bold on a mono face. */
.fp-cell-change {
  font-family: var(--fp-font-num);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--fp-track-num);
  font-variant-numeric: tabular-nums;
}

/* Rank 1 was a solid green band across the full row, on top of a crown glyph
   and the row already being first. The mark is enough — and it is the same mark
   the nav and every section rule use. */
.signal-table tbody tr.is-lead {
  box-shadow: inset 2px 0 0 var(--fp-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 15. THE LEADERBOARD — a ranking, set as a table of ranks.
 * ════════════════════════════════════════════════════════════════════ */
#leaderboard > div.fp-rank-row {
  border-bottom: 1px solid var(--fp-rule-soft);
}
#leaderboard > div.fp-rank-row:last-child { border-bottom: 0; }
#leaderboard > div.fp-rank-row:hover { background: rgba(255,255,255,.028); }
.fp-rank-no {
  font-family: var(--fp-font-num);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fp-text-faint);
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 16. SECTION HEADS THAT SHARE A ROW WITH A CONTROL.
 *
 * Four sections put their <h2> in a flex row beside a search box or a filter
 * strip. The rule is drawn on the heading, so on those four it ran only as wide
 * as the words — a 90px stub where every other section had a full-width line.
 * The rule moves to the ROW in those cases, which is where it belonged.
 * ════════════════════════════════════════════════════════════════════ */
#coinMonitor > div:first-child,
#trackRecordSection > div:first-child {
  position: relative;
  padding-top: var(--fp-2);
  border-top: 1px solid var(--fp-rule);
}
#coinMonitor > div:first-child::before,
#trackRecordSection > div:first-child::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--fp-rule-index-w);
  height: 1px;
  background: var(--fp-brand);
}
#coinMonitor > div:first-child h2,
#trackRecordSection > div:first-child h2 {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 0;
}
#coinMonitor > div:first-child h2::before,
#trackRecordSection > div:first-child h2::before { display: none; }

/* The right rail's own heading. It sits in .right-panel rather than .main-card,
   so it was the last <h2> in the product still set as a 20px white title. */
.right-panel > h2,
.right-panel h2:first-child {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin: 0 0 var(--fp-3) 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 17. THE MARKETS HERO.
 *
 * The single most emphatic thing in the product, and it was spending that
 * emphasis on five containers: a green badge, a green status capsule, a
 * coloured major-move capsule, a coloured volatility capsule and a green-bordered
 * tip box — all wrapped around a coin name and a price. The name and the price
 * are the news. Everything else is annotation, and is set as annotation.
 * ════════════════════════════════════════════════════════════════════ */
.hero-badge {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-brand);
}

/* The status strip. Readings divided by hairlines rather than boxed
   individually — one object instead of three. */
.hero-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--fp-3);
  border-top: 1px solid var(--fp-rule);
  border-bottom: 1px solid var(--fp-rule);
  padding: var(--fp-2) 0;
}
.hero-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--fp-3);
  border-left: 1px solid var(--fp-rule);
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.hero-strip-item:first-child { padding-left: 0; border-left: 0; }
.hero-strip-item--brand { color: var(--fp-brand); }
.hero-strip-item svg { width: 12px; height: 12px; }

/* The plain-English read. It was in a tinted box with a lightbulb glyph — the
   icon that means "tip", on a product whose first rule is that it never gives
   advice. It is a sentence about what is happening, so it is set as one. */
.hero-read {
  margin-top: var(--fp-3);
  color: var(--fp-text-body);
  font-size: 14px;
  line-height: 1.55;
  max-width: 46ch;
}

/* Layer 04 hung a 16px green glow on these three. */
.hero-status,
.signal-pill,
.confidence-badge { box-shadow: none; }

/* The hero metric strip already divides its four readings with rules, which is
   the right device — it only needed the label voice. */
.hero-metric small {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.hero-metric strong { font-weight: 500; letter-spacing: var(--fp-track-num); }

/* The range tabs are tabs, like the filter tabs, for the same reason. */
.hero-tabs button {
  border-radius: var(--fp-radius-sm);
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 18. THE TOOLTIP DISC SITS BESIDE ITS LABEL, NOT UNDER IT.
 *
 * .market-stat span went display:block for the label, which made the nested
 * .tooltip-wrap a block too — so the "?" dropped onto its own line under every
 * caption on the Market Overview row. It was hidden inside a card; on an open
 * grid it is five orphaned discs.
 * ════════════════════════════════════════════════════════════════════ */
.market-stat span .tooltip-wrap,
.market-stat span .fp-explain { display: inline-block; vertical-align: -1px; }
.market-stat .tooltip-icon { width: 14px; height: 14px; line-height: 14px; font-size: 9px; }

/* ═══════════════════════════════════════════════════════════════════════
 * 19. THE SIGNAL READ.
 *
 * The sentence that says, in English, what the hero's score means. It was in a
 * dark inset box with a 1px border, introduced by an amber label and a
 * direction glyph. Amber means "be careful" everywhere else in this palette, so
 * a neutral summary was wearing a warning colour.
 * ════════════════════════════════════════════════════════════════════ */
.hero-verdict {
  padding: var(--fp-3) 0 0 0;
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
  background: transparent;
  color: var(--fp-text-body);
  position: relative;
}
.hero-verdict::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--fp-rule-index-w);
  height: 1px;
  background: var(--fp-brand);
}
.fp-verdict-label {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin-right: var(--fp-2);
}

/* The "how this score is built" disclosure. Same treatment as the welcome
   card: a rule down its left edge marks it as an aside rather than a tinted
   panel marking it as a separate object. */
.fp-explain-panel {
  margin-top: var(--fp-3);
  padding: 0 0 0 var(--fp-3);
  border-left: 1px solid var(--fp-brand);
  color: var(--fp-text-body);
  font-size: 13px;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 20. THE WATCHLIST ROW — the same row as Top Movers, so the same treatment.
 * ════════════════════════════════════════════════════════════════════ */
#myCoins .coin-card:hover,
#watchlistPanel .coin-card:hover { background: rgba(255,255,255,.028); }
#myCoins .coin-card > div:nth-child(4) {
  font-family: var(--fp-font-num);
  font-weight: 500 !important;
  letter-spacing: var(--fp-track-num);
  font-variant-numeric: tabular-nums;
}

/* The four Daily Pulse figures. Mono, weight 500 — they were 26px at weight
   900, a weight neither font stack actually has (system UI tops out at 800,
   the mono face at 700), so the browser was synthesising the bold by smearing
   each glyph sideways. It reads heavy rather than strong, and on figures that
   is the wrong kind of loud. */
.fp-pulse-figure {
  margin-top: 6px;
  font-family: var(--fp-font-num);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* The track-record badge beside the Daily Pulse heading. It is a footnote about
   sample size, and it was a green-bordered green-tinted capsule — the loudest
   possible way to state the quietest fact on the page. */
#trackRecordBadge {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--fp-font-num) !important;
  font-size: 10px !important;
  letter-spacing: .04em;
  color: var(--fp-text-faint) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 21. THE LEFT COLUMN IS ONE COLUMN.
 *
 * The single most damaging leftover from the card era, and it is invisible
 * until the cards are gone: sections that carried their own inset now start
 * their content at a different x than sections that did not. The hero began at
 * 20px and Top Movers at 0, so the page had two left edges 20px apart — which
 * on a layout whose whole structure is a rule starting at the content column
 * reads as a misalignment rather than as a nested box.
 *
 * Every section now shares one origin. Vertical padding stays where a section
 * needs internal air; horizontal padding goes.
 * ════════════════════════════════════════════════════════════════════ */
#topSignalHero {
  padding: 0;
  min-height: 0;
  border-radius: 0;
  overflow: visible;   /* it clipped the blob that no longer exists */
}
.main-card { padding-left: 0; padding-right: 0; }

/* ═══════════════════════════════════════════════════════════════════════
 * 22. THE COIN DRAWER.
 *
 * It floats, so it keeps its fill and its edge — but the readings inside it
 * take the same two voices as everywhere else: the row name is a label, the
 * value is a value.
 * ════════════════════════════════════════════════════════════════════ */
.detail-line > span:first-child,
.detail-row > span:first-child {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.detail-price {
  font-weight: 500;
  letter-spacing: -.03em;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 23. TWO CORRECTIONS FROM DRIVING IT AT 390px.
 * ════════════════════════════════════════════════════════════════════ */

/* (a) THE PRIMARY BUTTON LOST ITS FILL — and it took the one green button on
 * the signed-out Today page with it.
 *
 * Section 6 above sets `.fp-btn { background: transparent }` to strip the
 * tinted-rectangle look off secondary buttons. `.fp-btn--primary` sets its
 * background in layer 00, and both selectors are (0,1,0) — so this layer, being
 * later, silently won and "Sign up free" rendered as a faint outline.
 *
 * The fix is to restate the two variants HERE, after the base, rather than to
 * weaken the base rule: a variant class has to be able to override its own
 * component, and in a stylesheet where document order decides that means the
 * variant declaration has to come last. Exactly the failure mode the
 * `button:hover` note in 00-tokens.css describes, one layer further out. */
.fp-btn--primary {
  background: var(--fp-brand);
  border-color: transparent;
  color: var(--fp-brand-ink);
}
.fp-btn--primary:hover {
  background: var(--fp-brand);
  border-color: transparent;
  filter: brightness(1.08);
  color: var(--fp-brand-ink);
}
.fp-btn--ghost {
  background: transparent;
  border-color: var(--fp-brand-40);
  color: var(--fp-brand);
}
.fp-btn--ghost:hover {
  background: var(--fp-brand-08);
  border-color: var(--fp-brand);
  color: var(--fp-brand);
}

/* (b) A HEADING THAT DECLARES ITS OWN ROLE IS A HEADING, NOT A SECTION LABEL.
 *
 * Layer 04 turns every bare `.main-card h2` into the mono section label, which
 * is right for the sixteen sections that use an unclassed <h2> as a name. The
 * welcome card's <h2> carries `.fp-h1` because it is a genuine headline — "Get
 * crypto insights in 60 seconds." — and it came out as three wrapped lines of
 * letterspaced mono caps, which is what happens when a sentence is set as a
 * label. If the markup names a type role, the type role wins. */
.main-card h2.fp-h1,
.main-card h2.fp-h2,
.main-card h2.fp-display {
  font-family: var(--fp-font);
  font-size: var(--fp-size-h1);
  line-height: var(--fp-lh-h1);
  font-weight: 600;
  letter-spacing: var(--fp-track-tight);
  text-transform: none;
  color: var(--fp-text);
  border-top: 0;
  padding-top: 0;
}
.main-card h2.fp-h2  { font-size: var(--fp-size-h2); line-height: var(--fp-lh-h2); }
.main-card h2.fp-h1::before,
.main-card h2.fp-h2::before,
.main-card h2.fp-display::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
 * 24. THE INDEX MARK AND THE RULE ARE ONE LINE.
 *
 * The first implementation drew the rule as `border-top` and the green mark as
 * an absolutely-positioned ::before at `top: -1px`. Those are two different
 * boxes: an absolute child is positioned against the PADDING box, so on a
 * fractional device pixel ratio the mark and the border round to different
 * physical rows and the green sits a hair above its own rule. Visible at 2x on
 * a phone, and a 1px misregistration is exactly the kind of thing that makes a
 * layout read as approximate.
 *
 * They are the same line now: one background gradient painting green for the
 * first 22px and the rule colour for the rest, sized to 1px and pinned to the
 * top edge. One box, one rounding, always registered.
 * ════════════════════════════════════════════════════════════════════ */
.fp-card-head,
.main-card h2,
.market-stat,
.fp-nav-promo,
.hero-verdict,
#coinMonitor > div:first-child,
#trackRecordSection > div:first-child {
  border-top: 0;
  background-image: linear-gradient(
    to right,
    var(--fp-brand) 0,
    var(--fp-brand) var(--fp-rule-index-w),
    var(--fp-rule) var(--fp-rule-index-w),
    var(--fp-rule) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.fp-card-head::before,
.main-card h2::before,
.fp-nav-promo::before,
.hero-verdict::before,
#coinMonitor > div:first-child::before,
#trackRecordSection > div:first-child::before { content: none; }

/* The market readings share a row, so only the first in each row would want the
   index mark — five of them in a line reads as a dashed rule rather than as
   five section starts. They take the plain hairline; the section they sit in
   (Market Overview) already carries the marked one. */
.market-stat {
  background-image: linear-gradient(to right, var(--fp-rule), var(--fp-rule));
}

/* THE DOUBLE RULE. `.main-card h2` (layer 04) exists for the sixteen sections
   whose heading is a bare <h2>. But a .fp-card-head contains an
   `<h2 class="fp-card-title">`, so those sections drew the rule TWICE — once on
   the head and once on the h2 inside it, four pixels apart. That is what the
   stray second hairline above every marked section was.
   The head owns the rule wherever there is a head; the h2 inside it is only a
   name. */
.fp-card-head h2,
.main-card h2.fp-card-title {
  background-image: none;
  border-top: 0;
  padding-top: 0;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 25. THE LAST TWO ROUND OBJECTS.
 * ════════════════════════════════════════════════════════════════════ */

/* The orb was hidden in section 7 as a card-header ornament. It also opens the
   AI Assistant's empty state, where it is a 34px gradient sphere with a
   specular highlight floating above the copy — the "AI" ball, and the single
   most recognisable ornament in this whole category. The empty state says what
   the assistant does in three sentences; it does not need a mascot. */
.fp-empty .fp-orb { display: none; }
.fp-empty-title {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.fp-empty-body { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* The suggested prompts. They are questions someone can ask, so they read as a
   list of questions rather than as a row of capsules: squared, with the rule
   doing the separating. Four pills in a row was the sixth pill treatment. */
.fp-chip {
  border-radius: var(--fp-radius-sm);
  background: transparent;
  border-color: var(--fp-border-control);
  font-size: 12px;
}
.fp-chip:hover { background: rgba(255,255,255,.04); border-color: var(--fp-brand); }

/* ═══════════════════════════════════════════════════════════════════════
 * 26. THE GRAPH-PAPER OVERLAY.
 *
 * 03-mobile.css lays a 26px grid of hairlines over the whole Markets hero at
 * .25 opacity. It is texture — a background pattern with no referent in the
 * data, which is the definition of the thing this pass exists to remove. The
 * near-miss is that a technical grid is almost on-brief for an instrument, and
 * that is exactly why it has to go rather than stay: the rules in this design
 * all MEAN something (a section starts here, the content column starts here),
 * and a decorative grid teaches the reader that some of them do not.
 * ════════════════════════════════════════════════════════════════════ */
#topSignalHero::before { content: none; }

/* The hero coin logo. 900 again — a synthesised bold on the single letter the
   disc falls back to when a logo image will not load. */
.hero-coin-logo { font-weight: 500; border-color: var(--fp-border); }

/* ═══════════════════════════════════════════════════════════════════════
 * 27. THE MOVERS TABLE ON A PHONE.
 *
 * Five columns will not fit 390px and never did — #coins has scrolled
 * horizontally since long before this pass, and the page itself does not scroll
 * (check:viewports confirms at 320/375/390). What WAS wrong is that the columns
 * had no floor, so the browser squeezed the momentum cell to about 110px and
 * the explanation broke into seven one-word lines, making a 340px row.
 *
 * Giving the two prose columns a minimum turns that into a normal measure. The
 * row gets wider than the screen, which it already was, and the scroll it
 * already had now buys something.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* THE MOVERS TABLE FITS THE PHONE. Corrected 28 Aug after Ryan sent a
   * screenshot from a real handset.
   *
   * The previous version of this block set min-widths on the coin and momentum
   * columns to stop the explanation wrapping into a column of single words. It
   * did stop that — and pushed the table to 566px inside a 358px viewport, so
   * 208px sat behind a horizontal scroll with no affordance. What was hidden
   * was the 24h change and the watch star: the number people came for and the
   * only action on the row. That is a worse trade than ugly wrapping, and it
   * was mine.
   *
   * MEASURED, not guessed: five columns do not fit 358px under any combination
   * of padding, logo size and type scale I tried — the best was still 97px
   * short. One column has to go, so it is the one whose information the row
   * already states twice: momentum. "Increasing / Building / Low" is the same
   * reading as the STRONG / MEDIUM / WEAK chip and the score beside it, and the
   * full momentum detail — word, meter and sentence — is one tap away in the
   * coin drawer. Nothing is unreachable; it is one fewer encoding of two facts
   * on the screen that has the least room for six.
   *
   * Desktop keeps all five columns. This is a phone composition, not a cut. */
  .signal-table { width: 100%; }
  .signal-table td:nth-child(1) { min-width: 0; }
  .signal-table th:nth-child(3),
  .signal-table td:nth-child(3) { display: none; }
  .signal-table td { padding: 12px 8px 12px 0 !important; }
  .signal-table .coin-avatar { --avatar-size: 28px; width: 28px; height: 28px; }
  .fp-cell-change { font-size: 15px; }
  /* The row sparkline gives up the last 12px rather than the coin name losing
     a character. 90px of trend line beside a 15px percentage is more chart than
     the number needs at this size, and the avatar is pinned by a min-width in
     11-responsive.css that this rule is not going to win against politely. */
  .signal-table .trend-spark { width: 56px; }
}

/* Small phones. At 320px the four remaining columns are still 48px over, and
   the sparkline is the only thing left in the row that is not a number, a name
   or a control. The percentage IS the reading; the 56px trend line beside it is
   a courtesy, and it is the right thing to drop on the narrowest screen the
   product supports. The full chart is in the coin drawer. */
@media (max-width: 360px) {
  .signal-table .trend-spark { display: none; }
  /* --avatar-size is set INLINE by coinLogoHTML(), so a stylesheet rule cannot
     reach it without !important. Used deliberately and only here, to answer an
     inline style — the same reasoning 00-tokens.css records for .fp-btn:hover. */
  .signal-table .coin-avatar { --avatar-size: 26px !important; }

  /* AND THEN IT STILL DOES NOT QUITE FIT, so it says so.
   *
   * Four columns of real data in 288px is at the limit: after dropping the
   * momentum column, the sparkline and 12px of avatar, the row is still ~30px
   * over. The remaining options were all shrinking type or truncating coin
   * names, which trades a legible row for a hidden scrollbar — a worse deal
   * than the one this whole fix exists to undo.
   *
   * So the scroll stays at 320px and becomes VISIBLE, using the convention
   * 06-cinematic.css already defines for exactly this: a mask that fades the
   * right edge whenever there is more to reach. 390px — where the traffic
   * actually is — fits with nothing hidden. */
  #coins {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  #coins::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PHASE 3 — IDENTITY. Five changes, each one an existing FlowPulse
 * convention applied where the page's own content asked for it. No new
 * device was invented for this pass.
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. THE RECORD IS THE POINT OF THE TRACK RECORD ──────────────────────
 *
 * The worst hierarchy inversion left in the product. This page exists to say
 * one thing — "here is every signal we published, including the ones we got
 * wrong" — and the four figures that ARE that claim were a 15px description
 * list in a 150px column, while the sample table beside them took the width.
 * The rail calls this the trust asset. It was rendered as small print.
 *
 * They become readouts, using the convention the product already has for a
 * number that matters (mono, tabular, large, mono label beneath). Same four
 * numbers, same colours, same ids — renderTrackRecord() is untouched. The
 * only thing that changed is that the page now looks like it means it.
 * ─────────────────────────────────────────────────────────────────────── */
.fp-track-counts {
  /* TWO ACROSS, NOT FOUR. Four fit the width I was looking at and overran the
     column at every other one — .fp-track-body is a two-column grid above
     820px and the counts live in the left one, so a four-across row of 46px
     figures pushed "AWAITING 24H" straight through the signal table beside it.
     Caught in the render, not the markup. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fp-4) var(--fp-5);
  align-items: start;
}
.fp-track-counts > div {
  /* The markup is <dt> then <dd>; column-reverse puts the figure above its
     own label without touching the document order a screen reader follows. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
}
.fp-track-counts dd {
  margin: 0;
  font-family: var(--fp-font-num);
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.fp-track-counts dt {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  white-space: nowrap;
}


/* ── 2. THE LAST CARD IN THE APP ─────────────────────────────────────────
 *
 * `.fp-personalise` was the only rounded, tinted, bordered box left on any
 * app view — and on a 390px phone it was the first thing on Today, above the
 * market reading, with a full-width solid green button in it. The brief for
 * this product is that a call to action should be obvious without becoming
 * the visual centre of the whole page; this one was the visual centre.
 *
 * It becomes a section like every other section: the rule, the index mark,
 * the mono label. The ask is unchanged and the button is still brand green —
 * it is simply no longer shouting over the number the page is for.
 * ─────────────────────────────────────────────────────────────────────── */
.fp-personalise {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--fp-3) 0 0;
  box-shadow: none;
  position: relative;
  background-image: linear-gradient(
    to right,
    var(--fp-brand) 0,
    var(--fp-brand) var(--fp-rule-index-w),
    var(--fp-rule) var(--fp-rule-index-w),
    var(--fp-rule) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.fp-personalise-title {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.fp-personalise-body { max-width: 62ch; margin-top: var(--fp-2); }
@media (max-width: 620px) {
  /* Full-width green on a phone made the ask the loudest object on the
     screen. It sizes to its own label now, like every other control. */
  .fp-personalise-cta .fp-btn { width: auto; }
}

/* ── 3. "WHAT IS DRIVING IT" LOSES ITS NUMBERED DISCS ────────────────────
 *
 * Brand-tinted circles with a bold brand numeral in them — the same device
 * removed from Learn's five steps earlier in the week, still here on
 * Intelligence. Two problems: it is the STEP 01 pattern in a smaller hat,
 * and the drivers are not a sequence — they are the two or three things that
 * moved the score, in order of size. An ordinal is fine; a disc around it is
 * decoration, and a brand-coloured disc spends the accent on furniture.
 *
 * The numeral moves into the margin in the numeric face, which is exactly
 * what Learn's steps do. One convention, two pages.
 * ─────────────────────────────────────────────────────────────────────── */
.fp-why-drivers li::before {
  width: 16px;
  height: auto;
  margin-top: 1px;
  border-radius: 0;
  background: transparent;
  color: var(--fp-text-faint);
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  text-align: right;
}
.fp-why-drivers li { gap: var(--fp-3); }

/* "What would change this read" was a tinted, rounded inset with a 3px bar.
   It is an aside, and the product already has one way of marking an aside:
   a hairline down its left edge. */
.fp-why-invalidation {
  padding: 2px 0 2px var(--fp-3);
  border-radius: 0;
  background: transparent;
  border-left: 1px solid var(--fp-text-faint);
}

/* THE RECORD GETS THE FULL WIDTH.
 *
 * .fp-track-body is a 340px + 1fr grid: the counts on the left, the sample
 * table on the right. That was right when the counts were a 15px list. With
 * them at readout scale the left column empties after two rows while the right
 * one runs on, so the page had a tall void down its left side and the table's
 * two footnotes sat indented to the right column while every other line on the
 * page started at the left edge. Ryan spotted it.
 *
 * One column: the record reads across the top at full width, the table sits
 * under it, and everything shares one left edge again. */
.fp-track-body { grid-template-columns: 1fr; gap: var(--fp-5); }
@media (min-width: 620px) {
  /* Four across now that there is room for four. */
  .fp-track-counts {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    gap: var(--fp-3) clamp(var(--fp-6), 7vw, var(--fp-8));
  }
}

/* ── ONE LEFT EDGE ON A PHONE ─────────────────────────────────────────────
 *
 * Two blocks were still centring themselves at narrow widths, both left over
 * from the layout that existed before the tape:
 *
 *   .fp-health-read   the market sentence and "View full analysis" centred
 *                     under the reading — correct when a 132px ring sat above
 *                     them and the whole card was a centred composition, and
 *                     wrong now that the reading is a left-aligned figure with
 *                     a full-width tape under it.
 *   .fp-personalise-cta   the signup button and its link centred in the
 *                     column, which is the last thing on Today still composed
 *                     around a centre line.
 *
 * Everything else on a 390px screen starts at the same x. These two now do
 * too, which is most of what makes a narrow column read as deliberate rather
 * than as a desktop layout that got squeezed.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .fp-health-body { justify-content: flex-start; }
  .fp-health-read { text-align: left; }
  .fp-personalise-cta { align-items: flex-start; }
}

/* ── THE WELCOME CARD WAS SQUASHED AGAINST ITS OWN RULE ──────────────────
 *
 * Reported from a handset. Three things, measured:
 *
 *   padding-left: 0    The card is marked by a 2px brand rule down its left
 *                      edge, and Phase 1 gave it 24px of padding to sit off
 *                      that rule. Layer 12's mobile rule — `.main-card
 *                      { padding: 16px 0 !important }` — lands later and won,
 *                      so on a phone every line started hard against the green.
 *                      That is the whole "squashed" feeling: an aside marked by
 *                      a rule needs air between the rule and the words, or the
 *                      rule reads as a container wall instead.
 *
 *   line-height 1.15   Fine for a one-line 26px heading, tight for one that
 *                      wraps. "Get crypto insights in 60 / seconds." had 3.9px
 *                      of leading between two 26px lines.
 *
 *   10px below it      The headline sat almost on top of the sentence under it.
 *
 * The `!important` is deliberate and answers the one above it, which is the
 * same reasoning 00-tokens.css records for .fp-btn:hover.
 * ─────────────────────────────────────────────────────────────────────── */
.fp-welcome-card {
  padding-left: var(--fp-4) !important;
  padding-right: var(--fp-3) !important;
}
/* `.main-card h2.fp-welcome-card` cannot exist — the class is on the section,
   not the heading — so this needs the section AND the same two-part heading
   selector to out-specify the role rule above at (0,2,1). */
.main-card.fp-welcome-card h2.fp-h1 {
  line-height: 1.24;
  margin-bottom: var(--fp-3) !important;
  /* 22ch made the headline wrap earlier than the paragraph beneath it, which
     is what produced the orphaned "seconds." on a 358px column. */
  max-width: none !important;
}
.main-card.fp-welcome-card .fp-body { margin-bottom: var(--fp-4) !important; }
.main-card.fp-welcome-card h2.fp-h1 { padding-right: 44px; }

@media (max-width: 600px) {
  /* The dismiss control has to clear the new right padding rather than sit on
     the words; the headline already reaches within a few pixels of it. */
  .main-card.fp-welcome-card h2.fp-h1 { padding-right: 44px; }
}