/*
Theme Name: Free Spins Club Gazette
Template: astra
Version: 1.0.4
Text Domain: gazette
*/

/* ----------------------------------------------------------------
   Free Spins Club Gazette, broadsheet stylesheet
   Sections:
   1 tokens, 2 base, 3 Astra frame, 4 sheet measure, 5 crumbs,
   6 hero, 7 scrollwrap and ticker, 8 contents, 9 sections,
   10 figures, 11 tables, 12 FAQ, 13 care, 14 board, 15 calculator,
   16 directory, 17 onward, 18 colophon, 19 details, 20 breakpoints,
   21 motion and print
   ---------------------------------------------------------------- */

/* 1. Tokens ------------------------------------------------------ */

:root {
  --gz-ivory: #FAF6EE;
  --gz-navy: #12264C;
  --gz-copper: #B0642F;
  --gz-ink: #232A31;
  --gz-rule: #D8CFC0;
  --gz-panel: #FFFDF8;
  --gz-ok: #3A6B4F;
  --gz-warn: #8A3B2E;
  --gz-muted: #5C6470;
  --gz-font-head: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --gz-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 2. Base -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--gz-ivory);
  color: var(--gz-ink);
  font-family: var(--gz-font-body);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gz-font-head);
  font-weight: 700;
  color: var(--gz-navy);
  line-height: 1.22;
  margin: 0 0 .6em;
}

p { margin: 0 0 1em; }

a {
  color: var(--gz-copper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--gz-navy); }

ul, ol {
  margin: 0 0 1em;
  padding-left: 1.35rem;
}

li { margin: 0 0 .3em; }
li::marker { color: var(--gz-copper); }

img, svg, video {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--gz-rule);
  margin: 2rem 0;
}

blockquote {
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 3px solid var(--gz-navy);
  font-family: var(--gz-font-head);
  font-size: 1.05rem;
  color: var(--gz-navy);
}

button, .button, input[type="submit"], input[type="button"], input[type="reset"],
.ast-button, .wp-block-button__link {
  border-radius: 0;
  font-family: var(--gz-font-body);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gz-navy);
  outline-offset: 2px;
}

::selection {
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
}

/* Numerals read in columns everywhere numbers line up. */
.gz-table,
.gz-ticker,
.gz-figure figcaption,
.gz-calc input,
.gz-calc output,
.gzb-score,
.gzb-rank,
.gz-hero-meta,
.gz-num {
  font-variant-numeric: tabular-nums;
}

.gz-ok { color: var(--gz-ok); }
.gz-warn { color: var(--gz-warn); }
.gz-table .gz-ok,
.gz-table .gz-warn { font-weight: 600; }

/* 3. Astra frame ------------------------------------------------- */

/* The measure belongs to .gz-sheet, so the theme container stays
   out of the way on public views. */
.site-content .ast-container,
.site-content .ast-narrow-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.site-content #primary {
  width: 100%;
  margin: 0;
}

.ast-article-single,
.ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.entry-content > :first-child { margin-top: 0; }

/* The fragment carries its own hero heading and breadcrumb, so the
   theme title block and the Astra breadcrumb stay hidden on public
   views, and reader comments stay off the sheet. */
body.gz-public .entry-header,
body.gz-public .ast-breadcrumbs,
body.gz-public .comments-area { display: none; }

/* 3.1 Site header ------------------------------------------------ */

/* Single header contract: the parent Astra header actions are
   removed in functions.php after they register, and the empty
   masthead shell is hidden here as belt and braces, so exactly one
   header prints per page whichever hook fires first. */
body.gz-public #masthead { display: none; }

/* The child header. Full width navy bar with a 2px copper rule
   underneath; the inner row shares the sheet measure and its
   inline padding, brand to the left, menu to the right. */
.gz-site-header {
  background-color: var(--gz-navy);
  border-bottom: 2px solid var(--gz-copper);
}

.gz-header-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: .25rem;
}

/* Brand: serif wordmark with the tagline beneath it. */
.gz-brand {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: .1rem;
  margin: 0;
  padding: .3rem 0;
}

.gz-brand-name {
  color: var(--gz-ivory);
  font-family: var(--gz-font-head);
  font-size: 1.45rem;
  line-height: 1.15;
  text-decoration: none;
}

.gz-brand-name:hover,
.gz-brand-name:focus-visible { color: var(--gz-copper); }

.gz-brand-tag {
  color: rgba(250, 246, 238, 0.75);
  font-size: .8125rem;
}

/* Menu: one row at every width and the list itself never wraps.
   From 768px it sits beside the brand; below 1100px the row
   scrolls horizontally instead of wrapping. */
.gz-nav {
  flex: 0 1 auto;
  min-width: 0;
}

.gz-nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.gz-nav-list > li { flex: 0 0 auto; }

/* Submenus stay hidden until a width that can show them. */
.gz-nav-sub { display: none; }

.gz-nav-link {
  display: inline-block;
  color: var(--gz-ivory);
  padding: .6rem .9rem;
  font-size: .9rem;
  letter-spacing: .02em;
  text-decoration: none;
}

.gz-nav-link:hover,
.gz-nav-link:focus-visible { color: var(--gz-copper); }

.gz-nav-item.current-menu-item > .gz-nav-link,
.gz-nav-item.current_page_item > .gz-nav-link,
.gz-nav-link[aria-current="page"] { color: var(--gz-copper); }

/* Under 768px the header wraps exactly once: brand row above, nav
   row below. Both rows stay single line, so the menu never reads
   as two rows of items. */
@media (max-width: 767.98px) {
  .gz-brand { flex: 0 0 100%; }
  .gz-nav { flex: 0 0 100%; }
}

/* From 768px the brand and the menu hold one visual row. */
@media (min-width: 768px) {
  .gz-header-inner { flex-wrap: nowrap; }
}

/* Below 1100px the top level row scrolls instead of wrapping and
   the dropdown panels stay hidden, so only the top level items
   show. The overflow rule lives here and nowhere else: at 1100px
   and up the list keeps overflow visible so the absolute panels
   escape it unclipped. */
@media (max-width: 1099.98px) {
  .gz-nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 246, 238, 0.35) transparent;
  }
  .gz-nav-sub { display: none; }
}

/* Dropdowns from 1100px. The panel hangs from its item and is
   lifted by the shadow alone: a pseudo element at a negative
   z-index would paint above the bar it sits on, so there is none.
   Overflow stays visible at this width, so the panel is readable
   and unclipped. */
@media (min-width: 1100px) {
  .gz-nav-drop { position: relative; }

  .gz-nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    background-color: var(--gz-navy);
    border: 1px solid rgba(250, 246, 238, 0.25);
    box-shadow: 0 10px 24px rgba(18, 38, 76, 0.35);
    padding: .5rem 0;
    margin: 0;
    list-style: none;
    z-index: 50;
  }

  .gz-nav-drop:hover > .gz-nav-sub,
  .gz-nav-drop:focus-within > .gz-nav-sub { display: block; }

  .gz-nav-sub a {
    display: block;
    padding: .5rem 1rem;
    color: var(--gz-ivory);
    text-decoration: none;
    font-size: .85rem;
  }

  .gz-nav-sub a:hover {
    color: var(--gz-copper);
    background-color: rgba(250, 246, 238, 0.08);
  }
}

/* Footer shares the navy treatment. */
.site-footer {
  background-color: var(--gz-navy);
  color: rgba(250, 246, 238, 0.85);
  border-top: 2px solid var(--gz-copper);
}

.site-footer a { color: var(--gz-ivory); }
.site-footer a:hover,
.site-footer a:focus { color: var(--gz-copper); }

.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: var(--gz-ivory);
  font-family: var(--gz-font-head);
}

/* 4. Sheet measure ----------------------------------------------- */

/* One measure: .gz-sheet is the single content column at 72rem.
   Every flow block spans it edge to edge. Insets live only inside
   objects with their own edge: table cells, figure frames, board
   columns, the two column FAQ and contents lists on desktop. */
.gz-sheet {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: 1.5rem 3.5rem;
}

.gz-sheet,
.gz-sheet *,
.gz-sheet *::before,
.gz-sheet *::after { box-sizing: border-box; }

.gz-sheet p,
.gz-sheet li,
.gz-sheet dd {
  max-width: none;
  overflow-wrap: break-word;
}

.gz-sheet [id] { scroll-margin-top: 5.5rem; }

/* 5. Crumbs ------------------------------------------------------ */

/* Breadcrumb: copper with a spaced slash separator. It can arrive
   before the sheet, so it carries its own copy of the measure. */
.gz-crumbs,
.gz-crumb {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: 1.25rem 0;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--gz-copper);
}

.gz-sheet .gz-crumbs,
.gz-sheet .gz-crumb {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  margin: 0 0 1.25rem;
}

.gz-crumbs a,
.gz-crumb a {
  color: var(--gz-copper);
  text-decoration: none;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-crumbs a:hover,
.gz-crumbs a:focus-visible,
.gz-crumb a:hover,
.gz-crumb a:focus-visible {
  color: var(--gz-navy);
  border-bottom-color: var(--gz-navy);
}

.gz-crumbs [aria-current="page"],
.gz-crumb [aria-current="page"] { color: var(--gz-navy); }
.gz-crumbs-sep { margin-inline: .45rem; color: var(--gz-copper); }

/* 6. Hero -------------------------------------------------------- */

.gz-hero {
  border-top: 4px solid var(--gz-navy);
  padding: 2rem 0 1.75rem;
}

.gz-kicker {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gz-copper);
  margin: 0 0 .85rem;
}

.gz-hero h1,
.gz-hero-title {
  font-size: clamp(1.85rem, 1rem + 5vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.gz-standfirst {
  font-family: var(--gz-font-head);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.9vw, 1.45rem);
  line-height: 1.45;
  color: var(--gz-ink);
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gz-muted);
}

.gz-hero-meta span { display: inline-block; }

/* 7. Scrollwrap and ticker --------------------------------------- */

/* Scroll wrappers: every table and the ticker sit inside one, and
   they are the only place horizontal scrolling happens. */
.gz-scrollwrap,
.gz-tablewrap {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gz-rule) transparent;
}

.gz-scrollwrap::-webkit-scrollbar,
.gz-tablewrap::-webkit-scrollbar { height: 6px; }

.gz-scrollwrap::-webkit-scrollbar-track,
.gz-tablewrap::-webkit-scrollbar-track { background: transparent; }

.gz-scrollwrap::-webkit-scrollbar-thumb,
.gz-tablewrap::-webkit-scrollbar-thumb { background: var(--gz-rule); }

/* Ticker: one row, copper interpuncts, top and bottom hairline. */
.gz-ticker {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 1.1rem;
  width: max-content;
  min-width: 100%;
  padding: .6rem 0;
  border-top: 1px solid var(--gz-rule);
  border-bottom: 1px solid var(--gz-rule);
  font-size: .875rem;
  color: var(--gz-ink);
  white-space: nowrap;
}

.gz-ticker-label {
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gz-navy);
}

.gz-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}

.gz-ticker-item + .gz-ticker-item::before {
  content: "\00B7";
  color: var(--gz-copper);
  font-weight: 700;
  margin-right: 1.1rem;
}

.gz-ticker-dot {
  color: var(--gz-copper);
  font-weight: 700;
}

.gz-ticker .gz-up { color: var(--gz-ok); }
.gz-ticker .gz-down { color: var(--gz-warn); }

/* 8. Contents ---------------------------------------------------- */

/* Contents list: two columns with a hairline rule on desktop, one
   column under 768px. */
.gz-toc { margin: 0 0 2.25rem; }

.gz-toc h2 { margin: 0 0 1rem; }

.gz-toc-list,
.gz-toc ol,
.gz-toc ul {
  margin: 0;
  padding-left: 1.4rem;
}

.gz-toc li {
  padding: .28rem 0;
  break-inside: avoid;
}

.gz-toc li::marker {
  color: var(--gz-copper);
  font-variant-numeric: tabular-nums;
}

.gz-toc a {
  color: var(--gz-navy);
  text-decoration: none;
}

.gz-toc a:hover,
.gz-toc a:focus-visible { color: var(--gz-copper); }

@media (min-width: 768px) {
  .gz-toc-list,
  .gz-toc ol,
  .gz-toc ul {
    column-count: 2;
    column-gap: 3rem;
    column-rule: 1px solid var(--gz-rule);
  }
}

/* 9. Sections ---------------------------------------------------- */

/* Section headings: serif, preceded by a 2px navy top rule. */
.gz-sheet h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  border-top: 2px solid var(--gz-navy);
  padding-top: .85rem;
  margin: 2.75rem 0 1rem;
}

.gz-sheet > h2:first-child { margin-top: 0; }

.gz-sheet h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 .6rem;
}

.gz-sheet h4 {
  font-size: 1rem;
  margin: 1.5rem 0 .5rem;
}

/* 10. Figures ---------------------------------------------------- */

/* Figures: framed plates with copper small caps captions. */
.gz-figure {
  margin: 2.25rem 0;
  border: 1px solid var(--gz-rule);
  background-color: var(--gz-panel);
  padding: 1rem;
}

.gz-figure img,
.gz-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.gz-figure figcaption {
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--gz-rule);
  color: var(--gz-copper);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
}

/* Chart defaults for the inline SVG plates. A figure can override
   fills and strokes per plate. */
.gz-chart {
  display: block;
  width: 100%;
  height: auto;
}

.gz-chart text {
  font-family: var(--gz-font-body);
  font-size: 12px;
  fill: var(--gz-ink);
}

.gz-chart .gz-axis,
.gz-chart .gz-grid {
  stroke: var(--gz-rule);
  stroke-width: 1;
  fill: none;
}

.gz-chart .gz-bar { fill: var(--gz-navy); }
.gz-chart .gz-bar-accent,
.gz-chart .gz-bar--accent { fill: var(--gz-copper); }

.gz-chart .gz-line {
  fill: none;
  stroke: var(--gz-navy);
  stroke-width: 2;
}

.gz-chart .gz-line-accent,
.gz-chart .gz-line--accent { stroke: var(--gz-copper); }

/* 11. Tables ----------------------------------------------------- */

/* Tables: collapsed hairlines, navy header row, panel zebra rows,
   tabular numerals. The scroll wrapper carries the overflow. */
.gz-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gz-rule);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gz-ink);
}

.gz-scrollwrap .gz-table,
.gz-tablewrap .gz-table { min-width: 40rem; }

.gz-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--gz-font-head);
  color: var(--gz-navy);
  font-size: 1.05rem;
  padding: 0 0 .7rem;
}

.gz-table th,
.gz-table td {
  padding: .65rem 1rem;
  border: 1px solid var(--gz-rule);
  vertical-align: top;
  text-align: left;
}

.gz-table thead th {
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
  border-color: var(--gz-navy);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.gz-table tbody th {
  font-weight: 600;
  color: var(--gz-navy);
}

.gz-table tbody tr:nth-child(even) { background-color: var(--gz-panel); }

.gz-table tfoot td,
.gz-table tfoot th {
  border-top: 2px solid var(--gz-navy);
  font-weight: 700;
  color: var(--gz-navy);
}

.gz-table .gz-num {
  text-align: right;
  white-space: nowrap;
}

.gz-table-note {
  font-size: .8125rem;
  color: var(--gz-muted);
  margin: .6rem 0 0;
}

/* 12. FAQ -------------------------------------------------------- */

/* FAQ: two columns with a visible hairline rule on desktop, one
   column under 768px. */
.gz-faq { margin: 2.5rem 0; }

.gz-faq > h2 { margin: 0 0 1.25rem; }

.gz-faq-item {
  break-inside: avoid;
  padding: 0 0 1.1rem;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-faq-item h3,
.gz-faq-item h4 {
  font-size: 1.05rem;
  margin: 0 0 .45rem;
}

.gz-faq-item p {
  margin: 0;
  font-size: .9375rem;
}

.gz-faq-item p + p { margin-top: .45rem; }

@media (min-width: 768px) {
  .gz-faq {
    column-count: 2;
    column-gap: 3rem;
    column-rule: 1px solid var(--gz-rule);
  }
  .gz-faq > h2 { column-span: all; }
}

/* 13. Care ------------------------------------------------------- */

/* Care block: panel with a 3px copper left edge. */
.gz-care {
  background-color: var(--gz-panel);
  border: 1px solid var(--gz-rule);
  border-left: 3px solid var(--gz-copper);
  padding: 1.25rem 1.5rem;
  margin: 2.25rem 0;
}

.gz-care h2,
.gz-care h3 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 .6rem;
  font-size: 1.15rem;
}

.gz-care p {
  margin: 0 0 .6rem;
  font-size: .9375rem;
}

.gz-care p:last-child { margin-bottom: 0; }
.gz-care a { color: var(--gz-copper); }

/* 14. Board ------------------------------------------------------ */

/* Board: comparison columns. Four across at 1100px and up, two by
   two from 640px, stacked below. The header strip is navy with an
   ivory serif rank numeral and a copper score badge. The column
   footer holds the CTA: ivory button, navy border, copper hover. */
.gz-board,
.gz-board--columns { margin: 2.5rem 0; }

.gzb-title,
.gz-board-title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  border-top: 2px solid var(--gz-navy);
  padding-top: .85rem;
  margin: 0 0 1.25rem;
}

.gz-board--columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
}

.gz-board--columns > .gzb-title,
.gz-board--columns > .gz-board-title,
.gz-board--columns > .gzb-note,
.gz-board--columns > .gz-board-note,
.gz-board--columns > h2,
.gz-board--columns > p {
  grid-column: 1 / -1;
}

.gzb-col,
.gz-board-col,
.gz-board--columns > article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--gz-panel);
  border: 1px solid var(--gz-rule);
}

.gzb-head,
.gz-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
  border-bottom: 1px solid var(--gz-navy);
}

.gzb-rank,
.gz-board-rank {
  font-family: var(--gz-font-head);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gz-ivory);
}

.gzb-score,
.gz-board-score {
  min-width: 2.6rem;
  text-align: center;
  background-color: var(--gz-copper);
  color: var(--gz-ivory);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  padding: .4rem .6rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.gzb-body,
.gz-board-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.gzb-brand,
.gz-board-brand {
  font-family: var(--gz-font-head);
  color: var(--gz-navy);
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
}

.gzb-offer,
.gz-board-offer {
  margin: 0 0 .9rem;
  font-size: .9rem;
  color: var(--gz-ink);
}

.gzb-chips,
.gz-board-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gz-rule);
  font-size: .85rem;
}

.gzb-chips li,
.gz-board-chips li {
  position: relative;
  margin: 0;
  padding: .45rem 0 .45rem 1rem;
  border-bottom: 1px solid var(--gz-rule);
}

.gzb-chips li:last-child,
.gz-board-chips li:last-child { border-bottom: 0; }

.gzb-chips li::before,
.gz-board-chips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: .45rem;
  height: .45rem;
  background-color: var(--gz-copper);
}

.gzb-foot,
.gz-board-foot {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--gz-rule);
}

.gzb-cta,
.gz-board-cta {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--gz-ivory);
  color: var(--gz-navy);
  border: 1px solid var(--gz-navy);
  border-radius: 0;
  padding: .7rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.gzb-cta:hover,
.gzb-cta:focus-visible,
.gz-board-cta:hover,
.gz-board-cta:focus-visible {
  color: var(--gz-copper);
  border-color: var(--gz-copper);
}

.gzb-note,
.gz-board-note {
  font-size: .8125rem;
  color: var(--gz-muted);
  margin: 1rem 0 0;
}

@media (min-width: 640px) {
  .gz-board--columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .gz-board--columns {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

/* 15. Calculator ------------------------------------------------- */

/* Calculator: panel with its own edge, two field columns from
   600px. The note string from the markup prints unchanged. */
.gz-calc {
  background-color: var(--gz-panel);
  border: 1px solid var(--gz-rule);
  border-top: 2px solid var(--gz-navy);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin: 2.5rem 0;
}

.gz-calc h2,
.gz-calc h3 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 1rem;
}

.gz-calc h2 { font-size: 1.35rem; }
.gz-calc h3 { font-size: 1.1rem; }

.gz-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.gz-calc label,
.gz-calc .gz-calc-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gz-navy);
  margin: 0 0 .35rem;
}

.gz-calc input[type="number"],
.gz-calc input[type="text"],
.gz-calc select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--gz-rule);
  border-radius: 0;
  background-color: #ffffff;
  color: var(--gz-ink);
  font-family: var(--gz-font-body);
  font-size: 1rem;
}

.gz-calc fieldset {
  border: 1px solid var(--gz-rule);
  margin: 0 0 1.25rem;
  padding: 1rem;
}

.gz-calc-results,
.gz-calc .gz-calc-out {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gz-rule);
}

.gz-calc-results dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gz-muted);
}

.gz-calc-results dd {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gz-navy);
}

.gz-calc output {
  font-weight: 700;
  color: var(--gz-navy);
}

.gz-calc-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-calc-result:last-child { border-bottom: 0; }

.gz-calc-result strong,
.gz-calc-result output { color: var(--gz-navy); }

.gz-calc-note,
.gz-calc .gz-calc-note {
  font-size: .8125rem;
  color: var(--gz-muted);
  margin: 1rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--gz-rule);
}

.gz-calc table {
  width: 100%;
  border-collapse: collapse;
}

.gz-calc table th,
.gz-calc table td {
  padding: .5rem .35rem;
  border-bottom: 1px solid var(--gz-rule);
  text-align: left;
}

@media (min-width: 600px) {
  .gz-calc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 16. Directory -------------------------------------------------- */

/* Directory: rule separated links, two columns with a hairline
   rule from 768px. */
.gz-dir { margin: 2.5rem 0; }

.gz-dir-list,
.gz-dir ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.gz-dir li,
.gz-dir-item {
  break-inside: avoid;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-dir a,
.gz-dir-item a {
  display: block;
  padding: .6rem 0;
  color: var(--gz-navy);
  font-weight: 600;
  text-decoration: none;
}

.gz-dir a:hover,
.gz-dir a:focus-visible,
.gz-dir-item a:hover,
.gz-dir-item a:focus-visible { color: var(--gz-copper); }

.gz-dir .gz-dir-count,
.gz-dir small {
  color: var(--gz-muted);
  font-weight: 400;
  font-size: .8125rem;
  margin-left: .4rem;
}

@media (min-width: 768px) {
  .gz-dir-list,
  .gz-dir ul {
    column-count: 2;
    column-gap: 3rem;
    column-rule: 1px solid var(--gz-rule);
  }
}

/* 17. Onward ----------------------------------------------------- */

/* Onward: copper arrowed links in a two column grid from 768px. */
.gz-onward { margin: 2.75rem 0 0; }

.gz-onward h2,
.gz-onward h3,
.gz-onward-title {
  border-top: 2px solid var(--gz-navy);
  padding-top: .85rem;
  margin: 0 0 1rem;
}

.gz-onward h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
.gz-onward h3,
.gz-onward-title { font-size: 1.15rem; }

.gz-onward-list,
.gz-onward ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem 3rem;
}

.gz-onward li {
  margin: 0;
  padding: 0 0 .55rem;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-onward a {
  color: var(--gz-navy);
  font-weight: 600;
  text-decoration: none;
}

.gz-onward a::before {
  content: "\2192";
  color: var(--gz-copper);
  font-weight: 400;
  margin-right: .5rem;
}

.gz-onward a:hover,
.gz-onward a:focus-visible { color: var(--gz-copper); }

@media (min-width: 768px) {
  .gz-onward-list,
  .gz-onward ul { grid-template-columns: repeat(2, 1fr); }
}

/* 18. Colophon --------------------------------------------------- */

/* Colophon: small and muted, the last word on every page. */
.gz-colophon {
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gz-rule);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--gz-muted);
}

.gz-colophon p { margin: 0 0 .55rem; }
.gz-colophon p:last-child { margin-bottom: 0; }
.gz-colophon a { color: var(--gz-muted); }
.gz-colophon a:hover,
.gz-colophon a:focus-visible { color: var(--gz-copper); }

/* 19. Details ---------------------------------------------------- */

/* Details: the comparison table fallback can arrive as a
   disclosure, so it gets its own edge like every panel. */
.gz-sheet details {
  border: 1px solid var(--gz-rule);
  background-color: var(--gz-panel);
  padding: .85rem 1rem;
  margin: 1.5rem 0;
}

.gz-sheet summary {
  cursor: pointer;
  font-family: var(--gz-font-head);
  font-weight: 700;
  color: var(--gz-navy);
}

.gz-sheet summary::marker { color: var(--gz-copper); }

/* 20. Breakpoints ------------------------------------------------ */

@media (min-width: 600px) {
  .gz-hero { padding: 2.25rem 0 1.9rem; }
}

@media (min-width: 1024px) {
  body {
    font-size: 1.0625rem;
    line-height: 1.66;
  }
  .gz-sheet { padding-block: 2rem 4rem; }
  .gz-hero { padding: 2.75rem 0 2.25rem; }
  .gz-ticker { font-size: .9rem; }
  .gzb-brand,
  .gz-board-brand { font-size: 1.35rem; }
}

@media (max-width: 390px) {
  .gz-sheet { padding-inline: .85rem; }
  .gz-crumbs,
  .gz-crumb { padding-inline: .85rem; }
  .gz-hero { padding: 1.5rem 0 1.25rem; }
  .gz-care { padding: 1rem; }
  .gz-figure { padding: .85rem; }
  .gz-ticker { font-size: .8125rem; }
  .gz-table { font-size: .875rem; }
  .gz-table th,
  .gz-table td { padding: .55rem .7rem; }
  .gzb-head,
  .gz-board-head { padding: .7rem .85rem; }
  .gzb-rank,
  .gz-board-rank { font-size: 1.75rem; }
  .gzb-body,
  .gz-board-body { padding: .85rem; }
}

/* 21. Motion and print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition: none;
    animation: none;
  }
}

@media print {
  body {
    background-color: #ffffff;
    color: #000000;
  }
  .site-header,
  .gz-site-header,
  .site-footer { display: none; }
  .gz-scrollwrap,
  .gz-tablewrap { overflow: visible; }
  .gz-scrollwrap .gz-table,
  .gz-tablewrap .gz-table { min-width: 0; }
  .gz-board--columns { grid-template-columns: repeat(2, 1fr); }
  .gz-care,
  .gz-figure,
  .gzb-col,
  .gz-board-col { break-inside: avoid; }
  a { color: inherit; }
}

/* 22. Board markup bridge ---------------------------------------- */

/* The board plugin renders double underscore class names and wraps
   the four articles in a .gz-board__grid div, so the legacy hyphen
   rules above never reach the live markup and the root itself must
   not carry the grid. The bridge returns the root to plain block
   flow, then gives the real classes the same treatment as their
   hyphen counterparts. The sheet h2 and h3 rules outgun single
   classes, so the board title and the brand ride on the root class
   as well. */

.gz-board.gz-board--columns {
  display: block;
}

.gz-board .gz-board__title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  border-top: 2px solid var(--gz-navy);
  padding-top: .85rem;
  margin: 0 0 1.25rem;
}

.gz-board__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
}

.gz-board__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--gz-panel);
  border: 1px solid var(--gz-rule);
}

.gz-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
  border-bottom: 1px solid var(--gz-navy);
}

.gz-board__rank {
  font-family: var(--gz-font-head);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gz-ivory);
  font-variant-numeric: tabular-nums;
}

.gz-board__score {
  min-width: 2.6rem;
  text-align: center;
  background-color: var(--gz-copper);
  color: var(--gz-ivory);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  padding: .4rem .6rem;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gz-board .gz-board__brand {
  font-family: var(--gz-font-head);
  color: var(--gz-navy);
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0;
  padding: 1rem 1rem 0;
}

.gz-board__offer {
  margin: 0 0 .9rem;
  padding: 0 1rem;
  font-size: .9rem;
  color: var(--gz-ink);
}

.gz-board__chips {
  list-style: none;
  margin: 0 1rem 1rem;
  padding: 0;
  border-top: 1px solid var(--gz-rule);
  font-size: .85rem;
}

.gz-board__chips li {
  position: relative;
  margin: 0;
  padding: .45rem 0 .45rem 1rem;
  border-bottom: 1px solid var(--gz-rule);
}

.gz-board__chips li:last-child { border-bottom: 0; }

.gz-board__chips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: .45rem;
  height: .45rem;
  background-color: var(--gz-copper);
}

.gz-board__foot {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--gz-rule);
}

.gz-board__cta {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--gz-ivory);
  color: var(--gz-navy);
  border: 1px solid var(--gz-navy);
  border-radius: 0;
  padding: .7rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.gz-board__cta:hover,
.gz-board__cta:focus-visible {
  color: var(--gz-copper);
  border-color: var(--gz-copper);
}

.gz-board__note {
  font-size: .8125rem;
  color: var(--gz-muted);
  margin: 1rem 0 0;
}

/* The slot wrapper keeps the single sheet measure: full width, no
   inner padding and no own edge, margins like every other flow
   block. The leadin is a small navy serif paragraph with a bottom
   hairline above the board. */
.gz-board-slot {
  width: 100%;
  max-width: none;
  margin: 2.5rem 0;
  padding: 0;
  border: 0;
  background: none;
}

.gz-board-leadin {
  font-family: var(--gz-font-head);
  color: var(--gz-navy);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--gz-rule);
}

@media (min-width: 640px) {
  .gz-board__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .gz-board__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .gz-board .gz-board__brand { font-size: 1.35rem; }
}

@media (max-width: 390px) {
  .gz-board__head { padding: .7rem .85rem; }
  .gz-board__rank { font-size: 1.75rem; }
}

@media print {
  .gz-board__grid { grid-template-columns: repeat(2, 1fr); }
  .gz-board__col { break-inside: avoid; }
}