/* 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
     - 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; }

/* logos: always legible, whatever the ground */
.offer-logo {
  max-width: 100%; height: auto; max-height: 2.1rem; object-fit: contain;
  background: var(--logo-plate); border-radius: 4px;
}
:root[data-plate] .offer-logo, .offer-logo[data-plate] { padding: 0.25rem 0.4rem; }
.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-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); }
.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.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; 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 { font-size: 0.75rem; font-weight: 700; color: var(--accent); }

/* ---- 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; 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-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.4rem; }
  .chip-brand { grid-row: auto; justify-content: flex-start; }
  .gl-off { grid-template-columns: 1fr; gap: 0.4rem; }
  .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); }
.panel-open { min-height: 100svh; }
.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 15, built for the scorecard layout.
   Instrument-panel look: cool graphite, cyan readouts, weighted score bars and
   criteria laid out as cards on a grid. Reads like a test report, not an advert. */

:root {
  --bg: #101418;
  --logo-plate: #ffffff;
  --panel: #171d23;
  --panel-2: #1f272f;
  --line: #2a333c;
  --ink: #aab6c0;
  --ink-strong: #f2f7fa;
  --ink-dim: #6e7d89;
  --accent: #24c3d9;
  --accent-hover: #17a3b7;
  --accent-ink: #04191d;
  --max: 58rem;
  --measure: 38rem;
  --sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
       font-size: 16.5px; line-height: 1.68; -webkit-font-smoothing: antialiased; }
main { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem 4.5rem; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sc-head { padding: 3.5rem 0 2rem; max-width: 44rem; }
.kicker { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
          letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0 0 1.15rem; font-size: clamp(1.9rem, 5.4vw, 2.9rem); line-height: 1.08;
     letter-spacing: -0.03em; font-weight: 750; color: var(--ink-strong); }
.sc-method { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-dim);
             border-left: 2px solid var(--accent); padding-left: 1.1rem; }

/* criteria grid */

.sc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 0 0 3.5rem; }
.crit { padding: 1.35rem; background: var(--panel); 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.5rem; font-size: 1.02rem; font-weight: 700; color: var(--ink-strong); }
.crit-w { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1;
          color: var(--accent); flex: 0 0 auto; }
.crit-w span { font-size: 0.8rem; opacity: 0.7; }

.bar { height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; margin: 0.35rem 0 1rem; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.crit-test, .crit-why { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.55; }
.crit-why { margin-bottom: 0; color: var(--ink-dim); }
.crit strong { color: var(--ink-strong); font-weight: 700; }

/* the operators, as a readout rather than a pitch */

.sc-offers { margin: 0 0 3.5rem; }
.sc-offers h2 { margin: 0 0 1rem; }
.sc-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 1.25rem;
          padding: 1.05rem 1.2rem; background: var(--panel); border: 1px solid var(--line);
          border-radius: 8px; margin-bottom: 0.5rem; }
.sc-brand { display: flex; align-items: center; justify-content: center; }
.offer-logo { max-width: 100%; height: auto; max-height: 1.8rem; object-fit: contain;
              background: #fff; border-radius: 3px; padding: 0.22rem 0.35rem; }
.offer-wordmark { font-size: 1rem; font-weight: 800; color: var(--ink-strong); }
.sc-terms { font-size: 0.88rem; color: var(--ink-dim); line-height: 1.4; }

.cta { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 6px; background: var(--accent);
       color: var(--accent-ink); font-weight: 750; font-size: 0.86rem; letter-spacing: 0.03em;
       text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cta:hover { background: var(--accent-hover); }
.cta:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 2px; }

/* prose */

.sc-prose { max-width: var(--measure); }
h2 { margin: 2.75rem 0 0.95rem; font-size: 1.35rem; letter-spacing: -0.02em; font-weight: 750;
     color: var(--ink-strong); }
h3 { margin: 2rem 0 0.5rem; font-family: var(--mono); font-size: 0.86rem; font-weight: 700;
     letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
p { margin: 0 0 1.1rem; }
.steps { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.steps li { margin-bottom: 0.8rem; }
.steps li::marker { color: var(--accent); font-weight: 750; }

.drops { margin: 1.15rem 0 0; }
.drop { border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
        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;
                font-size: 0.94rem; 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: var(--panel-2); }
.drop summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drop summary::after { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-.1rem,-.1rem); transition: transform .18s ease; }
.drop[open] summary::after { transform: rotate(-135deg) translate(-.1rem,-.1rem); }
.drop[open] summary { border-bottom: 1px solid var(--line); }
.drop-body { padding: 1rem 1.1rem 0.3rem; }
.drop-body p { margin: 0 0 0.9rem; font-size: 0.92rem; }
.drop-link { color: var(--accent); font-weight: 700; }

footer { max-width: var(--max); margin: 0 auto; padding: 2rem 1.5rem 3.5rem;
         border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.6; 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.45rem; height: 1.45rem; flex: 0 0 auto; opacity: 0.85; }
.rg-text { margin: 0; }
.tm { margin: 1.2rem 0 0; color: #56636e; }
.draftbar { background: #0b3a42; color: #cdf3f9; font-family: var(--mono); font-size: 0.78rem;
            line-height: 1.5; text-align: center; padding: 0.7rem 1.25rem; }

@media (max-width: 46rem) {
  .sc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 16px; }
  main { padding: 0 1.1rem 3rem; }
  .sc-head { padding: 2.5rem 0 1.5rem; }
  h1 { font-size: 1.75rem; }
  .sc-row { grid-template-columns: 1fr auto; gap: 0.6rem 1rem; }
  .sc-brand { justify-content: flex-start; }
  .sc-terms { grid-column: 1 / -1; }
  h2 { font-size: 1.22rem; }
  footer { padding: 1.75rem 1.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; }
}

/* dark ground: keep dark logos legible */
.offer-logo { padding: 0.25rem 0.4rem; }