/* ==========================================================================
   Spread-Bet.co.uk homepage design system v1 ("Ledger")
   ==========================================================================

   WHERE THIS RUNS. Only on `/`. The file is read with `?raw` by
   src/pages/index.astro and written into the spliced shell head as a literal
   <style> element. It is not imported as a stylesheet and never enters the
   bundle, so no other page can load it. Astro injects bundled CSS by finding
   a <head> in the component tree, and this page's head arrives through
   `set:html`, so a plain `import` of this file would have had nowhere to land.

   WHY EVERY RULE IS SCOPED. The homepage keeps the theme's header, mega menu,
   breadcrumb strip and footer, and the theme's stylesheet is still on the page
   underneath this one. Two scopes do the work:

     body.sb-home     the class index.astro adds to the shell's body tag. It
                      carries the palette and outranks the theme's bare `body`.
     .sb-main         the wrapper around everything this page authors. Element
                      rules (h1, p, ul, img) live under it so they cannot reach
                      the theme's chrome.

   The chrome is restyled by naming the theme's own classes under .sb-home, at
   the end of this file. Colour, type and rules only: the mega menu's layout
   and its hover behaviour are the theme's and stay the theme's.

   Type matches the rest of the site: 'Roboto Slab' for display and 'Roboto' for
   body, both already loaded by the shell head on every page, so this file
   still adds zero font downloads. Tabular numerals on every figure.
   ========================================================================== */

.sb-home {
  /* colour */
  --paper: #fbfaf7;
  --card: #ffffff;
  --ink: #101b2d;
  --ink-2: #46536b;
  --ink-3: #6b7688;
  --rule: #e5e1d7;
  --rule-soft: #efece4;
  --accent: #0b7a5c;
  --accent-ink: #075a44;
  --risk: #a03418;
  --risk-tint: #faf0ea;
  --risk-rule: #e5c4b4;

  /* type */
  --serif: 'Roboto Slab', Georgia, serif;
  --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /*
   * The scale is the site's, measured off the live pages on 28 Aug 2026 rather
   * than invented here, so the homepage sets words the way the rest of the site
   * sets them:
   *
   *   h1   Roboto Slab 700 at 50px        (/betting/guide/, /betting/tax/)
   *   h2   Roboto Slab 700 at 36px        (guide and tax; the listing pages
   *                                        run the same weight at 30px)
   *   h3   Roboto Slab 500 at 28px        (guide, tax)
   *   body Roboto 400 at 18px / 27px      (/reviews/, /betting/platforms/,
   *                                        the hub pages this one belongs with)
   *
   * The h2 and h1 steps down at 991px and 767px are the theme's own ladder for
   * a 36px heading, not new breakpoints.
   */
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.125rem;   /* 18px, the hub-page body size */
  --fs-3: 1.375rem;
  --fs-4: clamp(1.5625rem, 4vw, 2.25rem);   /* 25px to 36px */
  --fs-5: clamp(2rem, 5.5vw, 3.125rem);     /* 32px to 50px */

  /* rhythm */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --radius: 10px;
  --radius-s: 6px;
  --wrap: 72.5rem; /* 1160px */
}

/* ---------- base ---------- */
body.sb-home {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-2);
  line-height: 1.5;   /* 27px at 18px, the measure the hub pages set */
  -webkit-font-smoothing: antialiased;
}
.sb-home .sb-main,
.sb-home .sb-main *,
.sb-home .sb-main *::before,
.sb-home .sb-main *::after { box-sizing: border-box; }
.sb-home .sb-main img { max-width: 100%; height: auto; display: block; }
.sb-home .sb-main a { color: var(--accent); text-underline-offset: 2px; }
.sb-home .sb-main a:hover { color: var(--accent-ink); }
/*
 * Heading weight is 700 for h1 and h2 and 500 for h3, which is what the rest of
 * the site sets: /betting/guide/, /betting/tax/, /reviews/ and
 * /betting/platforms/ all render their h2 at 700, and the two content pages
 * render h3 at 500. This page previously used 400 everywhere.
 *
 * WORTH KNOWING. These weights were synthesised until the evening of 28 Aug
 * 2026, along with every other bold Slab heading on the site: the shells asked
 * for `family=Roboto+Slab` with no weight axis, so 400 was the only face
 * downloaded and enumerating document.fonts on any page confirmed it. The fix
 * was the shell change this comment used to describe as out of scope,
 * `family=Roboto+Slab:wght@400;700`, applied to all 38 shells, the 27 mirrors
 * and the one page that carries its own head. The weight is now a real face
 * here and on every other page, which is what the house treatment was always
 * meant to be.
 *
 * The axis was added to the Slab family alone. Thirty of those requests also
 * carry `Roboto:ital@0;1`, and the eight that already had the weight axis had
 * traded that italic away for it; overwriting the whole href to match them
 * would have synthesised the obliques on 102 `<em>` elements instead. Adding to
 * a font request is safe, and swapping one is not.
 */
.sb-home .sb-main h1,
.sb-home .sb-main h2,
.sb-home .sb-main h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  text-align: left;
  text-transform: none;
}
.sb-home .sb-main h3 { font-weight: 500; }
.sb-home .sb-main p { margin: 0 0 1em; }
.sb-home .sb-main p:last-child { margin-bottom: 0; }
.sb-home .num,
.sb-home .sb-score,
.sb-home .sb-avg,
.sb-home .sb-fact dd { font-variant-numeric: tabular-nums; }

.sb-home .sb-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-3); width: 100%; }
.sb-home .sb-section { padding-block: var(--sp-5); }
@media (min-width: 60em) { .sb-home .sb-section { padding-block: var(--sp-6); } }
.sb-home .sb-section + .sb-section { border-top: 1px solid var(--rule-soft); }

.sb-home .sb-main .sb-h2 { font-size: var(--fs-4); margin-bottom: var(--sp-1); }
.sb-home .sb-main .sb-lede { color: var(--ink-2); max-width: 46rem; margin-bottom: var(--sp-3); }
.sb-home .sb-kicker {
  font-family: var(--sans); font-size: var(--fs-0); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
}

/* ---------- hero ---------- */
.sb-home .sb-hero { padding-block: var(--sp-4); }
.sb-home .sb-hero-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 60em) {
  .sb-home .sb-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: var(--sp-5);
  }
}
.sb-home .sb-main .sb-hero h1 { font-size: var(--fs-5); }
.sb-home .sb-main .sb-hero-sub {
  color: var(--ink-2); font-size: var(--fs-3);
  font-family: var(--serif); margin: 0.5rem 0 1rem;
}
.sb-home .sb-main .sb-hero-intro { max-width: 38rem; margin-bottom: var(--sp-3); }
.sb-home .sb-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: 0.625rem; }
.sb-home .sb-main a.sb-btn {
  display: inline-flex; align-items: center; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 700; font-size: var(--fs-2);
  padding: 0.8125rem 1.375rem; border-radius: var(--radius-s);
  border: 1px solid var(--accent-ink);
  /* 44px, the batch floor. This is the page's primary route to the money page. */
  min-height: 44px;
}
.sb-home .sb-main a.sb-btn:hover { background: var(--accent-ink); color: #fff; }
.sb-home .sb-main a.sb-btn-ghost {
  display: inline-flex; align-items: center; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: var(--fs-2); padding: 0.8125rem 1.375rem;
  border-radius: var(--radius-s); border: 1px solid var(--rule);
  background: var(--card); min-height: 44px;
}
.sb-home .sb-main a.sb-btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.sb-home .sb-main .sb-cta-note { font-size: var(--fs-0); color: var(--ink-3); margin: 0 0 var(--sp-3); }
.sb-home .sb-main .sb-chips-label {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem;
}
.sb-home .sb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.sb-home .sb-chips li { list-style: none; margin: 0; padding: 0; }
.sb-home .sb-main .sb-chips a {
  align-items: center; display: inline-flex; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: var(--fs-1); padding: 0.375rem 0.875rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
  min-height: 44px;
}
.sb-home .sb-main .sb-chips a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* the teaser card
   WAVE 1, 30 Aug 2026. This was the ranking card: a kicker, three scored rows,
   a harvest footnote and a "see all 14 ranked" link. The rows and everything
   that positioned them went with the block, because the scored top three is
   /betting/platforms/'s answer and this page is no longer allowed a copy of it.
   The frame stays, holding the teaser paragraph and the loss disclosure, so the
   hero band still has the one white object it is composed around. */
.sb-home .sb-rank-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-3); box-shadow: 0 1px 0 rgba(16, 27, 45, 0.03);
}
.sb-home .sb-main .sb-teaser-lede {
  margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--ink);
}
.sb-home .sb-main .sb-teaser-lede a { font-weight: 700; }
.sb-home .sb-main .sb-rank-risk {
  margin-top: var(--sp-2); padding: 0.75rem 0.875rem; background: var(--risk-tint);
  border: 1px solid var(--risk-rule); border-radius: var(--radius-s);
  font-size: var(--fs-0); color: var(--risk);
}
.sb-home .sb-main .sb-rank-risk a { color: var(--risk); font-weight: 600; }

/* ---------- the quality-node grid (Batch 6 §12.2) ----------

   Twelve routes, one idiom. Deliberately leaner than .sb-card: no icon, no
   body copy, a title that is the destination's own H1 and, where the data
   layer holds one, a single rendered fact. A card that has to be read is not
   a route.

   Four columns at desktop and two below it, which is the same rhythm the two
   grids it replaces used, so nothing about the page's vertical measure moves.
   One column under 34em: at 375px a two-column grid puts a nine-word H1 into a
   column 150px wide and every card becomes five lines of two words. */
.sb-home .sb-qgrid { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 34em) { .sb-home .sb-qgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .sb-home .sb-qgrid { grid-template-columns: repeat(4, 1fr); } }

.sb-home .sb-main a.sb-qcard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-decoration: none;
  color: var(--ink);
  /* The whole card is the target, and 44px is the floor a thumb needs. */
  min-height: 44px;
}
.sb-home .sb-main a.sb-qcard:hover,
.sb-home .sb-main a.sb-qcard:focus-visible { border-color: var(--accent); }
.sb-home .sb-main a.sb-qcard:hover .sb-qcard-t { color: var(--accent-ink); }

.sb-home .sb-main .sb-qcard-t {
  font-family: var(--serif);
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
/* The fact is a figure, so it is set in the figure face and never competes
   with the anchor above it for the eye. */
.sb-home .sb-main .sb-qcard-f {
  font-size: var(--fs-0);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* The answer block that replaced the hero's two paragraphs. One measure, the
   same colour the hero's other body copy takes on the ink band. */
.sb-home .sb-main .sb-hero-answer { max-width: 44rem; color: var(--on-ink-2); margin-bottom: 0; }

/* ---------- card grids ---------- */
.sb-home .sb-grid { display: grid; gap: var(--sp-2); }
@media (min-width: 60em) {
  .sb-home .sb-grid-5 { grid-template-columns: repeat(5, 1fr); }
  .sb-home .sb-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 40em) and (max-width: 59.99em) {
  .sb-home .sb-grid-5,
  .sb-home .sb-grid-4 { grid-template-columns: 1fr 1fr; }
}
.sb-home .sb-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-3); display: block; text-decoration: none; color: var(--ink);
}
.sb-home .sb-main a.sb-card { color: var(--ink); text-decoration: none; }
.sb-home .sb-main a.sb-card:hover { border-color: var(--accent); }
.sb-home .sb-main a.sb-card:hover .sb-card-t { color: var(--accent-ink); }
.sb-home .sb-main .sb-card-t {
  /* A card title is a sub-heading, so it takes the site's h3 weight. */
  font-family: var(--serif); font-size: var(--fs-3); font-weight: 500;
  display: block; margin: 0 0 0.375rem; line-height: 1.2; color: var(--ink);
}
.sb-home .sb-main .sb-card-b { color: var(--ink-2); font-size: var(--fs-1); }
.sb-home .sb-card .num { font-weight: 700; color: var(--ink); }
.sb-home .sb-main .sb-grid-5 .sb-card-t { font-size: 1.1875rem; }

/* WAVE 1, 30 Aug 2026: the .sb-brokers logo wall was the census, and the census
   is gone. Its rules went with it rather than sitting here describing a block
   no page renders. */

/* ---------- split sections: trust and method ---------- */
.sb-home .sb-split { display: grid; gap: var(--sp-4); }
@media (min-width: 60em) {
  .sb-home .sb-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
}
.sb-home .sb-main .sb-split p { color: var(--ink-2); max-width: 46rem; }
.sb-home .sb-fact {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-3); margin: 0;
}
.sb-home .sb-fact div { display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: 0.625rem; }
.sb-home .sb-fact div + div { border-top: 1px solid var(--rule-soft); }
.sb-home .sb-fact dt { color: var(--ink-2); font-size: var(--fs-1); }
.sb-home .sb-fact dd { margin: 0; font-weight: 700; font-size: var(--fs-1); text-align: right; }
.sb-home .sb-figure {
  margin: 0; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--sp-3);
}
.sb-home .sb-figure figcaption { font-size: var(--fs-0); color: var(--ink-3); margin-top: var(--sp-2); }

/* ---------- calculator ---------- */
.sb-home .sb-calc-slot {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-3); align-self: start;
}

/* ---------- faq ---------- */
.sb-home .sb-faq { max-width: 50rem; }
.sb-home .sb-faq details { border-bottom: 1px solid var(--rule); }
.sb-home .sb-faq details:first-of-type { border-top: 1px solid var(--rule); }
.sb-home .sb-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-2); padding-block: var(--sp-2); min-height: 44px;
}
.sb-home .sb-faq summary::-webkit-details-marker { display: none; }
.sb-home .sb-main .sb-faq summary h3 { font-family: var(--serif); font-size: var(--fs-3); margin: 0; }
.sb-home .sb-faq summary::after {
  content: "+"; font-family: var(--sans); font-weight: 400;
  color: var(--ink-3); font-size: 1.5rem; line-height: 1;
}
.sb-home .sb-faq details[open] summary::after { content: "\2212"; }
.sb-home .sb-main .sb-faq-a { padding-bottom: var(--sp-3); color: var(--ink-2); max-width: 44rem; }

/* ---------- risk panel ---------- */
.sb-home .sb-risk { background: var(--risk-tint); border-block: 1px solid var(--risk-rule); }
.sb-home .sb-main .sb-risk .sb-h2 { color: var(--risk); }
.sb-home .sb-main .sb-risk p { color: var(--ink-2); max-width: 46rem; }

/* ---------- the topical entry grid ----------
   The markup is the one scripts/topical-entry-grid.mjs writes, byte for byte,
   so only the presentation is set here. */
/* The theme gives this block 15px of its own inline padding, a 40px top margin
   and an off-palette top rule. Inside .sb-wrap that double-inset it by 15px
   against every other section, so the theme's box is cleared and Ledger sets
   the whole thing. */
.sb-home .sb-main .topical-entry-grid {
  padding: var(--sp-5) 0 var(--sp-6);
  margin: 0;
  /* The risk panel above already closes with its own rule; a second one here
     would render as a double line. */
  border: 0;
  background: none;
}
.sb-home .sb-main .topical-entry-grid > p {
  /* This is the grid's heading in everything but tag name, so it is set like
     one. The tag stays a <p> because topical-entry-grid.mjs writes it. */
  font-family: var(--serif); font-size: var(--fs-4); font-weight: 700;
  color: var(--ink); margin: 0 0 var(--sp-2); line-height: 1.2;
}
.sb-home .topical-entry-grid ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem var(--sp-3);
}
@media (min-width: 40em) { .sb-home .topical-entry-grid ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .sb-home .topical-entry-grid ul { grid-template-columns: repeat(3, 1fr); } }
.sb-home .topical-entry-grid li { list-style: none; margin: 0; padding: 0; }
.sb-home .sb-main .topical-entry-grid a {
  align-items: center; display: flex; min-height: 44px;
  font-weight: 600; text-decoration: none;
}
.sb-home .sb-main .topical-entry-grid a:hover { text-decoration: underline; }

/* ---------- a11y ---------- */
.sb-home .sb-main :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   The theme's chrome, wearing Ledger
   ==========================================================================
   Colour, type and rules only. The mega menu keeps the theme's layout, its
   hover behaviour and its mobile toggle, because those are shared with every
   other page and forking them is the thing nav-parity exists to prevent.
   ========================================================================== */

.sb-home .bh-header-container,
.sb-home .bh-header-area { background: var(--card); }
.sb-home section.navigation { background: var(--card); border-bottom: 1px solid var(--rule); }
.sb-home .bh-main-menu ul.menu > li > a,
.sb-home .bh-main-menu ul.menu > li > a strong {
  color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: var(--fs-1);
}
.sb-home .bh-main-menu ul.menu > li > a:hover,
.sb-home .bh-main-menu ul.menu > li > a:hover strong { color: var(--accent-ink); }
.sb-home .bh-main-menu ul.sub-menu {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(16, 27, 45, 0.12);
}
.sb-home .bh-main-menu ul.sub-menu a,
.sb-home .bh-main-menu ul.sub-menu a strong {
  color: var(--ink-2); font-family: var(--sans); font-weight: 500; font-size: var(--fs-1);
}
.sb-home .bh-main-menu ul.sub-menu a:hover,
.sb-home .bh-main-menu ul.sub-menu a:hover strong { color: var(--accent-ink); }

.sb-home section.breadcrumbs { background: var(--paper); border-bottom: 1px solid var(--rule-soft); }
.sb-home section.breadcrumbs .container--center { color: var(--ink-3); font-size: var(--fs-0); }
.sb-home section.breadcrumbs a { color: var(--ink-3); }

.sb-home section.content { background: var(--paper); }

.sb-home footer.footer { background: var(--ink); }
.sb-home footer.footer,
.sb-home footer.footer p,
.sb-home footer.footer li { color: #c8cfdb; }
.sb-home footer.footer a { color: #c8cfdb; }
.sb-home footer.footer a:hover { color: #ffffff; }
.sb-home footer.footer h2,
.sb-home footer.footer h3,
.sb-home footer.footer h4 { color: #ffffff; font-family: var(--serif); }

/* ==========================================================================
   v2 additions: founders, loss chart, calculator embed
   ========================================================================== */

/* ---------- founder cards (Why Trust) ----------
   Real photographs that already live in /wp-content/uploads/. Each card links
   to the founder's /about-us/ profile, which is where their Person entity is
   defined; nothing here re-declares it. */
.sb-home .sb-founders {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-3); padding: 0; max-width: 46rem;
}
@media (min-width: 40em) { .sb-home .sb-founders { grid-template-columns: 1fr 1fr; } }
.sb-home .sb-founder { list-style: none; margin: 0; padding: 0; }
.sb-home .sb-main .sb-founder a {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-2); text-decoration: none; color: var(--ink); min-height: 44px;
}
.sb-home .sb-main .sb-founder a:hover { border-color: var(--accent); }
.sb-home .sb-main .sb-founder img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--rule);
}
.sb-home .sb-main .sb-founder-name {
  display: block; font-family: var(--serif); font-size: var(--fs-2);
  font-weight: 500; line-height: 1.25;
}
.sb-home .sb-main .sb-founder a:hover .sb-founder-name { color: var(--accent-ink); }
.sb-home .sb-main .sb-founder-line {
  display: block; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.45; margin-top: 2px;
}

/* WAVE 1, 30 Aug 2026: the .sb-losschart rules and the .sb-calc-embed frame
   went with the blocks they dressed. The per-broker loss bars were a ranked
   14-item broker list inside the risk panel, and the embedded BetCalculator
   was /betting/calculator/ rendered on a second URL. Neither is on this page
   any more, so neither has styles here. */

/* ==========================================================================
   v3: the page had one texture from top to bottom
   ==========================================================================

   WHAT THIS FIXES. Twelve sections, each an H2 over white cards on cream,
   separated by 6rem of nothing. Every section carried the same weight, so
   nothing on the page told a reader where to look first, and the top of the
   document opened on text beside more text.

   Four moves, in order of how much they change:

     1. the hero sits on an ink band, so the page opens with a dark field and
        the ranking card reads as a white object on it rather than one more
        card on cream.
     2. a measured strip under the hero, four figures from the data layer,
        because the thing this site does that others do not is measure, and
        that was invisible above the fold.
     3. sections alternate paper and white and the gap between them tightens,
        so the page reads as a sequence rather than a scroll.
     4. line icons on the two card grids and rank and score on the logo wall,
        so a grid of text becomes something the eye can scan.

   ACCESSIBILITY. Every pairing on the ink band was measured: paper on ink is
   15.9:1, the muted tint is 8.4:1, white on the accent button is 4.6:1. Icons
   are decorative and carry aria-hidden, because the card title beside each one
   already says what it says. Nothing here is conveyed by colour alone.
   ========================================================================== */

.sb-home {
  --ink-band: #0d1726;
  --ink-band-2: #142236;
  --on-ink: #f2f0ea;
  --on-ink-2: #a9b4c4;
  --accent-on-ink: #3fbc90;
}

/* ---------- rhythm: tighter, and alternating ---------- */
.sb-home .sb-section { padding-block: var(--sp-4); }
@media (min-width: 60em) { .sb-home .sb-section { padding-block: var(--sp-5); } }
/* The alternation carries the separation now, so the hairline between every
   pair of sections is gone; it was drawing a line between two identical
   fields. */
.sb-home .sb-section + .sb-section { border-top: 0; }
.sb-home .sb-section-alt { background: var(--card); border-block: 1px solid var(--rule-soft); }

/* A short label above each H2. It names the section's job in two or three
   words, which gives the eye a fixed point to land on at the top of each
   band. */
.sb-home .sb-main .sb-eyebrow {
  font-family: var(--sans); font-size: var(--fs-0); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 0.375rem;
}

/* ---------- the hero band ---------- */
.sb-home .sb-hero {
  background: var(--ink-band);
  /* The photograph, when one is set, sits under a scrim heavy enough that the
     text contrast above does not depend on which part of the image is behind
     it. With no --hero-image the band is flat ink and everything still works. */
  background-image:
    linear-gradient(100deg, rgba(13,23,38,0.97) 0%, rgba(13,23,38,0.88) 46%, rgba(13,23,38,0.72) 100%),
    var(--hero-image, none);
  background-size: cover;
  background-position: center 38%;
  padding-block: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--ink-band-2);
}
@media (min-width: 60em) { .sb-home .sb-hero { padding-block: var(--sp-5) var(--sp-6); } }
.sb-home .sb-main .sb-hero h1 { color: var(--on-ink); }
.sb-home .sb-main .sb-hero-sub { color: var(--on-ink-2); }
.sb-home .sb-main .sb-hero-intro { color: var(--on-ink-2); }
.sb-home .sb-main .sb-hero .sb-cta-note,
.sb-home .sb-main .sb-hero .sb-chips-label { color: var(--on-ink-2); }
/* The ghost button was a cream box on cream; on ink it is an outline. */
.sb-home .sb-main .sb-hero a.sb-btn-ghost {
  background: transparent; color: var(--on-ink); border-color: rgba(242,240,234,0.42);
}
.sb-home .sb-main .sb-hero a.sb-btn-ghost:hover {
  border-color: var(--on-ink); background: rgba(242,240,234,0.08); color: var(--on-ink);
}
.sb-home .sb-main .sb-hero .sb-chips a {
  background: transparent; border-color: rgba(242,240,234,0.28); color: var(--on-ink);
}
.sb-home .sb-main .sb-hero .sb-chips a:hover {
  border-color: var(--accent-on-ink); color: var(--accent-on-ink);
}
/* The card is the one white object on the band, which is the point. */
.sb-home .sb-hero .sb-rank-card {
  box-shadow: 0 18px 48px rgba(0,0,0,0.34);
  border-color: transparent;
}

/* ---------- the measured strip ---------- */
.sb-home .sb-measures { background: var(--ink-band-2); }
.sb-home .sb-measures ul {
  list-style: none; margin: 0; padding-block: var(--sp-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-2);
}
@media (min-width: 60em) { .sb-home .sb-measures ul { grid-template-columns: repeat(4, 1fr); } }
.sb-home .sb-measures li { list-style: none; margin: 0; padding: 0; }
.sb-home .sb-measures .m-fig {
  display: block; font-family: var(--serif); font-size: clamp(1.75rem, 4.4vw, 2.5rem);
  font-weight: 700; line-height: 1.05; color: var(--on-ink); font-variant-numeric: tabular-nums;
}
.sb-home .sb-measures .m-lab {
  display: block; font-size: var(--fs-0); color: var(--on-ink-2);
  margin-top: 0.25rem; line-height: 1.4;
}

/* ---------- icons on the card grids ---------- */
.sb-home .sb-main .sb-card-icon {
  display: block; width: 26px; height: 26px; margin-bottom: 0.75rem;
  color: var(--accent); stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sb-home .sb-main a.sb-card:hover .sb-card-icon { color: var(--accent-ink); }

/* ---------- the logo wall, ranked ---------- */
.sb-home .sb-main .sb-broker a { position: relative; padding-top: 1.375rem; }
.sb-home .sb-main .sb-broker-rank {
  position: absolute; top: 0.5rem; left: 0.625rem;
  font-size: var(--fs-0); font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sb-home .sb-main .sb-broker-score {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  color: var(--ink); background: var(--rule-soft); border-radius: 999px;
  padding: 0.0625rem 0.5rem; font-variant-numeric: tabular-nums;
}

/* ---------- motion ---------- */
.sb-home .sb-main a.sb-card,
.sb-home .sb-main .sb-broker a,
.sb-home .sb-main a.sb-btn,
.sb-home .sb-main a.sb-btn-ghost { transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; }
@media (prefers-reduced-motion: reduce) {
  .sb-home .sb-main * { transition: none !important; animation: none !important; }
}

/* ---------- the hero's dot field ----------
   A lattice of dots on a radial falloff, centred behind the ranking card so
   the card reads as the thing the light is coming off. Two pseudo-elements
   and no request: the lattice is one repeating radial-gradient sized to a
   grid, the falloff is a mask, and the orbs are three more gradients. An SVG
   of the same field would be roughly eight hundred <circle> elements and
   about 36 KB of markup; a video of it would be an order of magnitude worse
   and would cost the largest paint on the page.

   Everything sits behind the content (z-index and a stacking context on the
   wrap), and the card is opaque, so nothing here touches text contrast. The
   drift is 24 seconds, has no start or end state a reader can miss, and stops
   entirely under prefers-reduced-motion, where the field stays as a static
   texture. */
.sb-home .sb-hero { position: relative; overflow: hidden; isolation: isolate; }
.sb-home .sb-hero > .sb-wrap { position: relative; z-index: 1; }

.sb-home .sb-hero::before,
.sb-home .sb-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* the lattice */
.sb-home .sb-hero::before {
  background-image: radial-gradient(circle, rgba(203, 224, 234, 0.78) 1.15px, transparent 1.25px);
  background-size: 16px 16px;
  background-position: center;
  -webkit-mask-image: radial-gradient(44% 76% at 76% 46%, #000 0%, rgba(0,0,0,0.66) 40%, transparent 76%);
  mask-image: radial-gradient(44% 76% at 76% 46%, #000 0%, rgba(0,0,0,0.66) 40%, transparent 76%);
  opacity: 0.72;
}
@media (max-width: 60em) {
  /* On a phone the card sits under the copy rather than beside it, so the
     field recentres and eases off; a dense lattice behind body text at that
     width is noise. */
  .sb-home .sb-hero::before {
    -webkit-mask-image: radial-gradient(76% 42% at 50% 76%, #000 0%, rgba(0,0,0,0.55) 40%, transparent 76%);
    mask-image: radial-gradient(76% 42% at 50% 76%, #000 0%, rgba(0,0,0,0.55) 40%, transparent 76%);
    opacity: 0.38;
  }
}

/* the orbs */
.sb-home .sb-hero::after {
  background-image:
    radial-gradient(circle at 78% 18%, rgba(63, 188, 144, 0.22) 0%, transparent 24%),
    radial-gradient(circle at 94% 58%, rgba(96, 165, 214, 0.18) 0%, transparent 26%),
    radial-gradient(circle at 80% 92%, rgba(63, 188, 144, 0.15) 0%, transparent 28%);
  animation: sb-drift 24s ease-in-out infinite alternate;
}
@keyframes sb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.4%, 1.8%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-home .sb-hero::after { animation: none; }
}
