/* Structural base, shipped with every page ahead of its theme.

   Themes used to carry their own layout CSS, which meant a theme paired with a
   layout it was not written for rendered unstyled. This file owns the structure
   for every layout, so any theme works with any layout. The theme file loads
   after this one and overrides whatever it wants.

   House rules baked in here:
     - the offer block sits at the top of the page, or sticky when it is a rail
     - logos always sit on a plate so dark themes never hide a dark logo
     - every UI anchor names its own colour, never the browser default
     - nothing scrolls sideways */

:root {
  --logo-plate: transparent;
  --line: #dddddd;
  --ink-strong: #111111;
  --ink-dim: #777777;
  --accent: #444444;
  --accent-ink: #ffffff;
}

* { box-sizing: border-box; }
img, svg { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; }
main { max-width: 46rem; margin: 0 auto; padding: 0 1.35rem 4rem; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* UI anchors, not prose links. Any one of these left without a colour falls back
   to the browser default #0000EE, which was unreadable on the dark themes.
   Declared early so a theme can still override any of them. */
.cta, .cta-sm { color: var(--accent-ink); }
.inline-cta, .drop-link, .chip, .pn-off, .gl-off, .pc-go,
.gl-index a { color: var(--ink, var(--ink-strong)); }

/* logos: always legible, whatever the ground */
.offer-logo {
  width: auto; max-width: 100%; height: auto; max-height: 2.1rem; object-fit: contain;
  background: var(--logo-plate); border-radius: 4px;
  padding: 0.3rem 0.5rem;
}
/* Breathing room inside the plate. This used to hang off a data-plate
   attribute that nothing set, so the artwork touched the plate edge. */
.offer-wordmark { font-weight: 800; color: var(--ink-strong); }
.offer-brand, .mini-brand, .sc-brand, .chip-brand, .gl-off-brand, .feature-brand, .pc-brand {
  display: flex; align-items: center; justify-content: center;
}

/* ---- hero / masthead ---------------------------------------------------- */

.hero { text-align: center; padding: 3rem 0 2.25rem; }
.masthead, .gl-head, .sc-head, .chat-head, .slip-head, .statement, .topline { padding: 3rem 0 1.75rem; }
.kicker, .eyebrow, .chat-who { margin: 0 0 0.75rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.standfirst, .lede, .gl-lede, .sc-method, .slip-sub { margin: 0; color: var(--ink-dim); }

/* ---- offers: stack ------------------------------------------------------ */

.offers { display: grid; gap: 0.75rem; margin: 0 0 2.75rem; }
.offer { display: grid; grid-template-columns: minmax(6rem, 1fr) 1.1fr auto; align-items: center;
         gap: 1.2rem; padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: 10px; }
.offer-terms { display: flex; flex-direction: column; text-align: center; line-height: 1.4;
               color: var(--ink-dim); font-size: 0.93rem; }

/* ---- offers: comparison table ------------------------------------------- */

.cmp { width: 100%; border-collapse: collapse; margin: 0 0 0.9rem; }
.cmp thead th { text-align: left; padding: 0 0 0.5rem; border-bottom: 1px solid var(--line);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp td { padding: 0.95rem 0.75rem 0.95rem 0; vertical-align: middle; }
.cmp td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.cmp-brand { width: 32%; }
.cmp-terms span { display: block; line-height: 1.38; }
.cmp-note { margin: 0 0 2.25rem; font-size: 0.86rem; color: var(--ink-dim); }

/* ---- offers: featured panel --------------------------------------------- */

.feature { margin: 0 0 2.75rem; }
.feature-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1.6rem; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 0.7rem; }
.feature-terms { margin: 0; font-size: 1.1rem; font-weight: 650; color: var(--ink-strong); }
.feature-rest { display: grid; gap: 0.5rem; }
.mini { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; }
.mini-terms { font-size: 0.86rem; line-height: 1.4; color: var(--ink-dim); }

/* ---- offers: ranked picks ----------------------------------------------- */

.picks { margin: 0 0 2.75rem; padding: 1.4rem 1.5rem 0.5rem; border: 1px solid var(--line); border-radius: 12px; }
.picks-h { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim); }
.picks-list { margin: 0; padding: 0; list-style: none; }
.picks-list li { margin-bottom: 1.1rem; }
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.pick-head .cta-sm { width: auto; flex: 0 0 auto; min-width: 6.5rem; }
.pick-terms { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-dim); }

/* ---- offers: sticky side rail ------------------------------------------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; align-items: start; }
.split-main { min-width: 0; }
.split-side { position: sticky; top: 1rem; }
.side-h { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-dim); }
.side-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem;
  padding: 1rem; margin-bottom: 0.65rem; border: 1px solid var(--line); border-radius: 10px; }
.side-terms { font-size: 0.85rem; line-height: 1.4; color: var(--ink-dim); }
.side-offer .cta-sm { width: 100%; }

/* ---- offers: slip ------------------------------------------------------- */

.slip { margin: 0 0 2.25rem; }
.slip-hd { display: flex; justify-content: space-between; margin: 0 0 0.85rem; padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--line); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); }
.srow { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr auto auto; align-items: center;
  gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px dashed var(--line); }
.sr-dots { border-bottom: 1px dotted var(--line); height: 0.7em; }
.sr-val { text-align: right; font-size: 0.85rem; line-height: 1.4; color: var(--ink-strong); }
.sr-go { justify-self: end; }
.perf { position: relative; height: 1.5rem; margin: 0.4rem 0 1rem; }
.perf::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--line); }
.slip-foot { margin: 0 0 1.5rem; font-size: 0.85rem; color: var(--ink-dim); }

/* ---- offers: chat chips ------------------------------------------------- */

.thread { display: flex; flex-direction: column; gap: 0.6rem; }
.msg { max-width: 88%; padding: 0.85rem 1.05rem; border-radius: 14px; border: 1px solid var(--line);
       background: var(--msg-them, transparent); }
.msg p { margin: 0 0 0.7rem; }
.msg p:last-child { margin-bottom: 0; }
.msg > :first-child { margin-top: 0; }
.msg > :last-child { margin-bottom: 0; }
.msg.them { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--msg-me, transparent);
          color: var(--ink-strong); font-weight: 600; }
.msg.cards { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; max-width: 94%; }
.chip { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.3rem 0.85rem; align-items: center;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.chip-brand { grid-row: span 2; }
.chip-terms { font-size: 0.83rem; line-height: 1.35; }
.chip-go { grid-row: span 2; justify-self: end; align-self: center; }

/* ---- offers: glossary strip --------------------------------------------- */

.gl-index { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.15rem;
  padding: 0.55rem 0; margin-bottom: 1.5rem; background: var(--bg, transparent);
  border-bottom: 1px solid var(--line); }
.gl-index a { font-size: 0.78rem; font-weight: 700; text-decoration: none; color: var(--ink-dim);
  padding: 0.3rem 0.5rem; border-radius: 4px; min-width: 1.9rem; text-align: center; }
.gl-index a:hover { background: var(--accent); color: var(--accent-ink); }
.gl-offers { display: grid; gap: 0.5rem; margin: 0 0 2.25rem; }
.gl-off { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.8rem 1.05rem; border: 1px solid var(--line); text-decoration: none; }
.gl-off-terms { font-size: 0.85rem; line-height: 1.4; color: var(--ink-dim); }
.gl-off-go { justify-self: end; white-space: nowrap; }
.gl-list { margin: 0 0 2.5rem; }
.gl-group { display: grid; grid-template-columns: 3rem 1fr; gap: 1.15rem; padding: 1.4rem 0;
  border-top: 1px solid var(--line); scroll-margin-top: 3.5rem; }
.gl-letter { margin: 0; font-size: 2.2rem; font-weight: 800; line-height: 0.9; color: var(--line); }
.gl-terms { min-width: 0; }
.gl-list dt { font-weight: 700; color: var(--ink-strong); margin-bottom: 0.25rem; }
.gl-list dd { margin: 0 0 1.05rem; }

/* ---- offers: scorecard -------------------------------------------------- */

.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 2.5rem; }
.crit { padding: 1.3rem; border: 1px solid var(--line); border-radius: 10px; }
.crit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.crit h3 { margin: 0 0 0.4rem; }
.crit-w { font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--accent); flex: 0 0 auto; }
.crit-w span { font-size: 0.78rem; opacity: 0.7; }
.bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 0.3rem 0 0.95rem; }
.bar span { display: block; height: 100%; background: var(--accent); }
.crit-test, .crit-why { margin: 0 0 0.65rem; font-size: 0.9rem; line-height: 1.55; }
.crit-why { margin-bottom: 0; color: var(--ink-dim); }
.sc-offers { margin: 0 0 2.75rem; }
.sc-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.5rem; }
.sc-terms { font-size: 0.88rem; line-height: 1.4; color: var(--ink-dim); }

/* ---- offers: chooser ---------------------------------------------------- */

.chooser { margin: 0 0 2.75rem; }
.pick-in { position: absolute; opacity: 0; pointer-events: none; }
.pick-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.pick-tabs label { padding: 0.68rem 1.3rem; border: 1px solid var(--line); border-radius: 999px;
  font-weight: 650; color: var(--ink-dim); cursor: pointer; user-select: none; }
.verdict { display: none; }
.verdict p { margin: 0 0 1.2rem; color: var(--ink-strong); border-left: 3px solid var(--accent);
  padding-left: 1.1rem; }
.pick-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.75rem; }
.pc { position: relative; padding: 1.3rem; text-align: center; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; }
.pc-hit { position: absolute; inset: 0; z-index: 1; border-radius: 12px; cursor: pointer; }
.pc-go { position: relative; z-index: 2; font-size: 0.82rem; font-weight: 700; color: var(--accent);
  text-decoration: none; }
.pc-badge { display: none; margin: 0 0 0.55rem; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.pc-terms { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink-dim); }
.tick { display: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor;
  margin-right: 0.5rem; vertical-align: 0.05em; }

#perfil-deportes:checked ~ .pick-tabs label[for="perfil-deportes"] .tick,
#perfil-casino:checked   ~ .pick-tabs label[for="perfil-casino"] .tick,
#perfil-cripto:checked   ~ .pick-tabs label[for="perfil-cripto"] .tick { display: inline-block; }
#perfil-deportes:checked ~ .pick-tabs label[for="perfil-deportes"],
#perfil-casino:checked   ~ .pick-tabs label[for="perfil-casino"],
#perfil-cripto:checked   ~ .pick-tabs label[for="perfil-cripto"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#perfil-deportes:checked ~ .pick-out .v-deportes,
#perfil-casino:checked   ~ .pick-out .v-casino,
#perfil-cripto:checked   ~ .pick-out .v-cripto { display: block; }
#perfil-deportes:checked ~ .pick-cards .pc-epicbet .pc-badge,
#perfil-casino:checked   ~ .pick-cards .pc-respin .pc-badge,
#perfil-cripto:checked   ~ .pick-cards .pc-bcgame .pc-badge { display: block; }
#perfil-deportes:checked ~ .pick-cards .pc-epicbet,
#perfil-casino:checked   ~ .pick-cards .pc-respin,
#perfil-cripto:checked   ~ .pick-cards .pc-bcgame { border-color: var(--accent); }
#perfil-deportes:checked ~ .bento-wrap .b-deportes,
#perfil-casino:checked   ~ .bento-wrap .b-casino,
#perfil-cripto:checked   ~ .bento-wrap .b-cripto { display: grid; }

.bento-wrap { margin: 2.25rem 0 0; }
.bento { display: none; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; }
.tile { padding: 1.2rem; border: 1px solid var(--line); border-radius: 10px; }
.tile-1, .tile-2 { grid-column: span 3; }
.tile-3, .tile-4, .tile-5 { grid-column: span 2; }
.tile-6 { grid-column: span 6; }
.tile-k { margin: 0 0 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); }
.tile-v { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 750; line-height: 1.2; color: var(--ink-strong); }
.tile-n { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-dim); }

/* ---- buttons ------------------------------------------------------------ */

.cta { display: inline-block; padding: 0.7rem 1.6rem; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink); font-weight: 700; text-decoration: none; text-align: center;
  white-space: nowrap; }
.cta-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.cta:focus-visible, .pc-go:focus-visible, .chip:focus-visible, .gl-off:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- disclosure --------------------------------------------------------- */

.drops { margin: 1.1rem 0 0; }
.drop { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.55rem; overflow: hidden; }
.drop summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: 0.8rem 1.1rem; cursor: pointer; font-weight: 700;
  color: var(--ink-strong); list-style: none; -webkit-tap-highlight-color: transparent; }
.drop summary::-webkit-details-marker { display: none; }
.drop summary::marker { content: ""; }
.drop summary::after { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-0.1rem, -0.1rem); }
.drop[open] summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }
.drop-body { padding: 0.9rem 1.1rem 0.25rem; }
.drop-link { color: var(--accent); font-weight: 700; }

/* ---- steps and footer --------------------------------------------------- */

.steps { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.steps li { margin-bottom: 0.8rem; }
.steps li::marker { color: var(--accent); font-weight: 700; }

footer { max-width: 46rem; margin: 0 auto; padding: 1.9rem 1.35rem 3.25rem;
  border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.6; color: var(--ink-dim); }
.rg { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.7rem; }
.rg-mark { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; opacity: 0.85; }
.rg-text { margin: 0; }
.tm { margin: 1.15rem 0 0; }
.draftbar { font-size: 0.8rem; line-height: 1.5; text-align: center; padding: 0.65rem 1.25rem; }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split-side { position: static; }
  .side-offer { flex-direction: row; align-items: center; gap: 1rem; }
  .side-terms { flex: 1; }
  .side-offer .cta-sm { width: auto; }
}

@media (max-width: 46rem) {
  .sc-grid { grid-template-columns: 1fr; }
  .pick-cards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-1, .tile-2, .tile-3, .tile-4, .tile-5 { grid-column: span 1; }
  .tile-6 { grid-column: span 2; }
}

@media (max-width: 40rem) {
  main { padding: 0 1.05rem 3rem; }
  footer { padding: 1.75rem 1.05rem 2.75rem; }
  .offer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.8rem; }
  .cmp thead { display: none; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.9rem; padding: 0.85rem 0; align-items: center; }
  .cmp td { padding: 0; }
  .cmp-brand { width: auto; }
  .cmp-terms { grid-column: 1 / -1; }
  .cmp td:last-child { text-align: right; }
  .mini, .sc-row { grid-template-columns: 1fr auto; gap: 0.5rem 0.9rem; }
  .mini-terms, .sc-terms { grid-column: 1 / -1; }
  .srow { grid-template-columns: 1fr auto; gap: 0.45rem 0.75rem; }
  .sr-dots { display: none; }
  .sr-val { grid-column: 1 / -1; text-align: left; }
  .sr-go { grid-row: 1; grid-column: 2; }
  .chip { grid-template-columns: 1fr; gap: 0.5rem; }
  .chip-brand { grid-row: auto; justify-content: flex-start; }
  .chip-go { grid-row: auto; justify-self: start; }
  .gl-off { grid-template-columns: 1fr; gap: 0.55rem; }
  .gl-off-go { justify-self: start; }
  .gl-off-brand { justify-content: flex-start; }
  .gl-group { grid-template-columns: 2.2rem 1fr; gap: 0.8rem; }
  .gl-letter { font-size: 1.8rem; }
  .bento { grid-template-columns: 1fr; }
  .tile-6 { grid-column: span 1; }
  .feature-card .cta { width: 100%; }
  .msg { max-width: 93%; }
  .pick-tabs label { padding: 0.72rem 1.1rem; }
}

/* ---- layouts 11 to 20: structure only ------------------------------------
   Added after the first ten. Aesthetics stay in the theme files; what follows
   is the minimum that makes each of these readable under ANY theme. */

/* terminal */
.term { border: 1px solid var(--line); border-radius: 0 0 6px 6px; padding: 1.2rem 1.3rem 1.6rem; }
.term-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; font-size: 0.72rem; }
.term-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); display: block; }
.term-bar span { margin-left: auto; }
.cmd { margin: 1.6rem 0 0.55rem; word-break: break-word; }
.cmd:first-child { margin-top: 0; }
.ps1 { color: var(--accent); margin-right: 0.5rem; font-weight: 700; }
.cur { display: inline-block; width: 0.5rem; height: 1rem; background: var(--accent);
  vertical-align: -0.15rem; margin-left: 0.3rem; }
.out { padding-left: 1.25rem; border-left: 1px solid var(--line); margin-bottom: 0.5rem; }
.out p:last-child { margin-bottom: 0; }
.term-tbl { width: 100%; border-collapse: collapse; }
.term-tbl td { padding: 0.55rem 0.7rem 0.55rem 0; vertical-align: middle; border-bottom: 1px dashed var(--line); }
.term-tbl tr:last-child td { border-bottom: 0; }
.tt-brand { width: 8rem; }
.tt-go { text-align: right; white-space: nowrap; }

/* panels */
.panels { scroll-snap-type: y proximity; }
.panel { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center;
  max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem; border-bottom: 1px solid var(--line); }
/* Sized to its content. Claiming the viewport left a screen of dead space. */
.panel-open { padding-top: 3.25rem; }
.pn-offers { display: grid; gap: 0.6rem; margin: 0 0 1.75rem; }
.pn-off { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.05rem 1.25rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.pn-terms { font-size: 0.92rem; line-height: 1.4; color: var(--ink-dim); }
.pn-go { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.pn-n { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; color: var(--accent); }
.pn-scroll { margin: 0; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }

/* broadsheet */
.bs-head { padding: 2.25rem 0 0; }
.bs-rule { display: flex; justify-content: space-between; margin: 0 0 1.5rem; padding: 0.4rem 0;
  border-top: 3px solid var(--ink-strong); border-bottom: 1px solid var(--ink-strong);
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.bs-stand { margin: 0 auto 1.6rem; max-width: 34rem; text-align: center; }
.bs-box { border: 2px solid var(--ink-strong); padding: 1rem 1.15rem 0.85rem; margin: 0 0 1.9rem; }
.bs-box-h { margin: 0 0 0.85rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); }
.bs-line { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.65rem 0; border-top: 1px solid var(--line); }
.bs-line:first-of-type { border-top: 0; }
.bs-terms { font-size: 0.85rem; line-height: 1.4; color: var(--ink-dim); }
.bs-cols { column-count: 2; column-gap: 2rem; column-rule: 1px solid var(--line); }
.bs-cols h2 { column-span: all; }
.bs-cols h3 { break-after: avoid; }
.bs-foot { margin-top: 1.9rem; padding-top: 1.2rem; border-top: 2px solid var(--ink-strong); }

/* board */
.bd { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 0 0 2.5rem; }
.bd-row { display: grid; grid-template-columns: 9rem 1fr 7rem; align-items: center; gap: 1.2rem;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); }
.bd-row:last-child { border-bottom: 0; }
.bd-hd { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.bd-terms { display: flex; flex-direction: column; gap: 0.15rem; }
.bd-go { text-align: right; }

/* notebook */
.nb-meta { display: flex; justify-content: space-between; margin: 0 0 0.85rem; }
.nb-card { position: relative; border: 1px solid var(--line); border-radius: 3px;
  padding: 1.15rem 1.3rem 1rem; margin: 0 0 2.5rem; }
.nb-card-h { margin: 0 0 0.85rem; font-size: 0.9rem; color: var(--accent); }
.nb-off { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.65rem 0; border-top: 1px dashed var(--line); }
.nb-off:first-of-type { border-top: 0; }
.nb-terms { font-size: 0.88rem; line-height: 1.4; color: var(--ink-dim); }
.nb-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.9rem; margin-bottom: 1.9rem; }
.nb-note { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.35; color: var(--accent); text-align: right; }
.nb-body { min-width: 0; }
.nb-body p:last-child { margin-bottom: 0; }

/* programme */
.pg-head { padding: 2.25rem 0 1.4rem; text-align: center; border-bottom: 3px solid var(--accent);
  margin-bottom: 1.9rem; }
.pg-comp { margin: 0 0 0.75rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent); }
.pg-sub { margin: 0 auto; max-width: 32rem; }
.pg-sheet { margin: 0 0 2.5rem; }
.pg-sheet-h { margin: 0 0 0.95rem; text-align: center; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.pg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.pg-team { display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  padding: 1.15rem 0.95rem; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  text-align: center; }
.pg-crest { display: flex; align-items: center; justify-content: center; min-height: 2.3rem; }
.pg-line { list-style: none; margin: 0; padding: 0; width: 100%; }
.pg-line li { padding: 0.38rem 0; border-top: 1px dashed var(--line); font-size: 0.87rem;
  line-height: 1.4; color: var(--ink-dim); }
.pg-line li:first-child { border-top: 0; }

/* exam */
.ex-meta { display: flex; justify-content: space-between; margin: 0 0 0.95rem; padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink-strong); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.ex-instr { border: 1px solid var(--line); padding: 0.95rem 1.1rem; }
.ex-instr-h { margin: 0 0 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); }
.ex-instr p { margin: 0; }
.ex-key { margin: 1.6rem 0 2.25rem; border: 2px solid var(--accent); padding: 0.95rem 1.1rem 0.8rem; }
.ex-key-h { margin: 0 0 0.8rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); }
.ex-row { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.6rem 0; border-top: 1px solid var(--line); }
.ex-row:first-of-type { border-top: 0; }
.ex-terms { font-size: 0.85rem; line-height: 1.4; color: var(--ink-dim); }
.ex-qs { list-style: none; counter-reset: q; margin: 0 0 1.9rem; padding: 0; }
.ex-qs > li { counter-increment: q; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.ex-marks { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--accent); text-align: right; }
.ex-marks::before { content: counter(q) ". "; display: block; font-size: 1.1rem; color: var(--ink-strong); }
.ex-q p:last-child { margin-bottom: 0; }

/* contract */
.ct-ref { display: flex; justify-content: space-between; margin: 0 0 1rem; font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.ct-annex { margin: 1.9rem 0 2.1rem; border: 1px solid var(--ink-strong); }
.ct-annex-h { margin: 0; padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--ink-strong);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.ct-table { width: 100%; border-collapse: collapse; }
.ct-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ct-table tr:last-child td { border-bottom: 0; }
.ct-brand { width: 7.5rem; }
.ct-terms { font-size: 0.83rem; line-height: 1.4; color: var(--ink-dim); }
.ct-go { text-align: right; white-space: nowrap; }
.ct-recital { border-left: 2px solid var(--line); padding-left: 0.95rem; margin-bottom: 1.6rem; }
.ct-n { display: block; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.2rem; }
.ct-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; margin: 2.75rem 0 0; }
.ct-sign span { display: block; border-top: 1px solid var(--ink-strong); }
.ct-sign p { margin: 0.35rem 0 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); }

/* field guide */
.fg-head { padding: 2.5rem 0 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.fg-kick { margin: 0 0 0.75rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); }
.fg-sub { margin: 0; }
.fg-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 2.25rem; }
.fg-plate { margin: 0; padding: 0.95rem; border: 1px solid var(--line); text-align: center; }
.fg-img { display: flex; align-items: center; justify-content: center; min-height: 2.9rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; }
.fg-name { margin: 0 0 0.3rem; font-weight: 700; color: var(--ink-strong); }
.fg-desc { margin: 0 0 0.8rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-dim); }
.fg-entry { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 1.4rem;
  padding: 1.3rem 0; border-top: 1px solid var(--line); }
.fg-tag { margin: 0.2rem 0 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); text-align: right; line-height: 1.4; }
.fg-text p:last-child { margin-bottom: 0; }

/* catalogue card */
.lc-card { position: relative; border: 1px solid var(--line); border-radius: 2px;
  padding: 1.3rem 1.4rem 2.2rem; margin: 0 0 0.9rem; }
.lc-call, .lc-h { margin: 0 0 0.65rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); }
.lc-note { margin: 0; color: var(--ink-dim); }
.lc-card p:last-child { margin-bottom: 0; }
.lc-item { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 0.55rem 0; border-top: 1px dashed var(--line); }
.lc-item:first-of-type { border-top: 0; }
.lc-terms { font-size: 0.82rem; line-height: 1.4; color: var(--ink-dim); }

@media (max-width: 46rem) {
  .pg-cols, .fg-plates, .bs-cols { grid-template-columns: 1fr; column-count: 1; }
  .nb-row, .fg-entry { grid-template-columns: 1fr; gap: 0.3rem; }
  .nb-note, .fg-tag { text-align: left; }
  .ct-sign { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 40rem) {
  .pn-off, .bs-line, .nb-off, .ex-row, .lc-item { grid-template-columns: 1fr auto; gap: 0.4rem 0.9rem; }
  .pn-terms, .bs-terms, .nb-terms, .ex-terms, .lc-terms { grid-column: 1 / -1; }
  .bd-row { grid-template-columns: 1fr auto; gap: 0.5rem 0.9rem; }
  .bd-terms { grid-column: 1 / -1; }
  .bd-hd { display: none; }
  .ex-qs > li { grid-template-columns: 1fr; gap: 0.3rem; }
  .ex-marks { text-align: left; }
  .ex-marks::before { display: inline; font-size: 1rem; }
  .ct-table td { display: block; padding: 0.28rem 0.85rem; }
  .ct-table tr { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  .ct-brand { width: auto; }
  .ct-go { text-align: left; }
  .term-tbl td { display: block; padding: 0.25rem 0; border: 0; }
  .term-tbl tr { display: block; padding: 0.65rem 0; border-bottom: 1px dashed var(--line); }
  .tt-brand { width: auto; }
  .tt-go { text-align: left; padding-top: 0.45rem; }
  .panel { padding: 2.25rem 1.1rem; }
}


/* Theme 3: light, petrol hero band, offers as ranked cards with number badges.
   Rank numbers come from a CSS counter so the markup stays identical. */

:root {
  --bg: #ffffff;
  --logo-plate: transparent;
  --surface: #f8f9fc;
  --line: #e6e8ef;
  --ink: #444a57;
  --ink-strong: #191d28;
  --ink-dim: #767d8d;
  --accent: #0e7490;
  --accent-hover: #155e75;
  --accent-ink: #ffffff;
  --band: #0b3d4a;
  --band-ink: #dff3f9;
  --max: 47rem;
  --font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

main { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 4rem; }

/* full-bleed hero band */

.hero {
  margin: 0 -1.25rem 2.5rem;
  text-align: center;
  background: var(--band);
  color: var(--band-ink);
  padding: 3.25rem 1.5rem 2.75rem;
  margin-bottom: 2.5rem;
  border-radius: 0 0 22px 22px;
}

h1 {
  margin: 0 auto 1.6rem;
  max-width: 30rem;
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 700;
  /* White only inside the dark hero band. Layouts that use a plain masthead put
     the h1 straight on the page, where white on white read as blank space. */
  color: var(--ink-strong);
}

.hero h1 { color: #fff; }

.cta {
  display: inline-block;
  min-width: 11rem;
  padding: 0.85rem 2.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.02rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(14, 116, 144, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cta-sm {
  min-width: 6.75rem; padding: 0.55rem 1.4rem;
  font-size: 0.9rem; box-shadow: none;
}

/* offers: ranked cards */

.offers {
  margin: 0 1.25rem 3rem;
  display: grid;
  gap: 0.9rem;
}

.offer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.offer:first-child { border-color: var(--accent); box-shadow: 0 3px 14px rgba(14,116,144,0.12); }

.offer-brand { display: flex; align-items: center; }
.offer-logo { max-width: 100%; height: auto; max-height: 2.4rem; object-fit: contain; }
.offer-wordmark { font-size: 1.2rem; font-weight: 700; color: var(--ink-strong); }

.offer-terms {
  display: flex; flex-direction: column;
  text-align: left;
  color: var(--ink-dim);
  font-size: 0.93rem;
  line-height: 1.42;
}

/* prose */

.prose { max-width: 38rem; margin: 0 auto; padding: 0 1.25rem; }

h2 {
  margin: 2.75rem 0 0.9rem;
  font-size: 1.42rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--ink-strong);
}
h3 {
  margin: 1.9rem 0 0.55rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--accent);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-strong);
}
p { margin: 0 0 1.1rem; }

.steps { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.steps li { margin-bottom: 0.85rem; }
.steps li::marker { color: var(--accent); font-weight: 700; }

/* dropdowns */

.drops { margin: 1.25rem 0 0; }

.drop {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.drop summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-strong);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary::marker { content: ""; }
.drop summary:hover { background: #f1f2f8; }
.drop summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drop summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: no-repeat center / 0.55rem 0.55rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 0.55rem 0.55rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.drop[open] summary::after { transform: rotate(180deg); }
.drop[open] summary { border-bottom: 1px solid var(--line); }
.drop-body { padding: 1.05rem 1.25rem 0.35rem; }
.drop-body p { margin: 0 0 0.9rem; font-size: 0.96rem; }
.drop-link { color: var(--accent); font-weight: 600; }

/* footer */

footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink-dim);
}
footer a { color: var(--ink-strong); }
.rg { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; }
.rg-mark { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; opacity: 0.9; }
.rg-text { margin: 0; }
.tm { margin: 1.25rem 0 0; color: #9aa1b1; }

.draftbar {
  background: #ffe9a8; color: #4a3600;
  font-size: 0.82rem; line-height: 1.5;
  text-align: center; padding: 0.7rem 1.25rem;
}

/* mobile */

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .hero { padding: 2.5rem 1.15rem 2.25rem; border-radius: 0 0 16px 16px; }
  h1 { font-size: 1.6rem; }
  .cta { width: 100%; max-width: 21rem; }
  .cta-sm { width: auto; min-width: 6.75rem; }
  .offers { margin: 0 1rem 2.5rem; }
  .offer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "terms" "cta";
    justify-items: start;
    gap: 0.8rem 1rem;
  }
  .offer-terms { grid-area: terms; text-align: left; }
  .offer .cta-sm { grid-area: cta; width: 100%; text-align: center; }
  .prose { padding: 0 1rem; }
  h2 { font-size: 1.3rem; }
  .drop summary { padding: 0.8rem 1rem; font-size: 0.96rem; }
  .drop-body { padding: 0.9rem 1rem 0.25rem; }
  footer { padding: 1.75rem 1rem 3rem; }
}

img, svg { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

/* ---- body formats -------------------------------------------------------
   Which of these a page uses is set by bodyFormat in its brand config. Only
   one appears per page; the rest are inert. */

.bf-num { list-style: none; counter-reset: bfn; margin: 0; padding: 0; }
.bf-num > li { counter-increment: bfn; position: relative; padding-left: 3rem; margin-bottom: 2rem; }
.bf-num > li::before { content: counter(bfn, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem;
  font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--accent); opacity: 0.85; }

.bf-check { list-style: none; margin: 0; padding: 0; }
.bf-check > li { position: relative; padding-left: 2.1rem; margin-bottom: 1.85rem; }
.bf-check > li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.85rem; height: 0.45rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.bf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0 0 1.5rem; }
.bf-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 10px; }
.bf-card h3 { margin-top: 0; }
.bf-card p:last-child { margin-bottom: 0; }

.bf-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.bf-table th { width: 30%; text-align: left; vertical-align: top; padding: 1.05rem 1.15rem 1.05rem 0;
  border-top: 1px solid var(--line); color: var(--ink-strong); font-weight: 700; font-size: 0.95rem; }
.bf-table td { vertical-align: top; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.bf-table td p:last-child { margin-bottom: 0; }

.bf-qa { padding: 0 0 0 1.15rem; border-left: 2px solid var(--line); margin-bottom: 1.75rem; }
.bf-qa h3 { margin-top: 0; }
.bf-qa h3::before { content: "\203A "; color: var(--accent); }

.bf-time { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--line); }
.bf-time > li { position: relative; margin-bottom: 2.1rem; }
.bf-time > li::before { content: ""; position: absolute; left: -2.05rem; top: 0.5rem; width: 0.55rem; height: 0.55rem;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg, transparent); }
.bf-time > li h3 { margin-top: 0; }

.bf-side { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 1.75rem; margin-bottom: 1.85rem; }
.bf-side h3 { margin: 0; font-size: 0.88rem; text-align: right; color: var(--ink-dim); }
.bf-side-body p:last-child { margin-bottom: 0; }

.bf-lead { font-size: 1.08em; border-left: 3px solid var(--accent); padding-left: 1rem; }

.bf-acc { margin: 0 0 1.5rem; }

@media (max-width: 46rem) {
  .bf-cards { grid-template-columns: 1fr; }
  .bf-side { grid-template-columns: 1fr; gap: 0.35rem; }
  .bf-side h3 { text-align: left; }
  .bf-table th, .bf-table td { display: block; width: auto; padding: 0; }
  .bf-table th { border-top: 1px solid var(--line); padding-top: 1rem; }
  .bf-table td { padding-bottom: 1rem; }
  .bf-num > li { padding-left: 2.5rem; }
}