/* igaming-wp front-end — modern card system.
 * All brand colours come from CSS custom properties the child theme defines:
 *   --ig-gold  --ig-gold-bright  --ig-accent  --ig-surface  --ig-ink
 *   --ig-card-grad (3-stop gradient)  --ig-text  --ig-text-dim
 * Fallbacks keep the default palette working with any theme.
 */

:root {--ig-gold: #d4a843;
  --ig-gold-bright: #f0c96a;
  --ig-accent: #1dbf73;
  --ig-surface: #16161f;
  --ig-ink: #0d0d14;
  --ig-card-grad: #1c1c2b; /* flat field, not a gradient */
  --ig-text: #f4f2ee;
  --ig-text-dim: rgba(244, 242, 238, 0.62);}

/* ---------- grids & cards ---------- */
.ig-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ig-card-art img, .ig-thumb { width: 100%; height: auto; border-radius: 12px; display: block; }
.casino-card, .ig-slot-card {background: var(--ig-card-grad); 
  border-radius: 16px; padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem;
  transition:border-color .25s, transform .25s;}
.casino-card:hover, .ig-slot-card:hover {transform: translateY(-2px);}
.ig-card-title { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.ig-card-title a { color: inherit; text-decoration: none; }
.ig-slot-card .rtp-badge { margin-top: .2rem; }
.ig-provider { margin: 0; font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--ig-text-dim); }
.ig-score { color: var(--ig-gold); font-weight: 700; }
.ig-bonus .bonus-amount { color: var(--ig-accent); font-weight: 700; font-size: 1.05em; }
.ig-card-excerpt { margin: .35rem 0 .5rem; opacity: .85; }
.rtp-badge, .volatility { display: inline-block; font-size: .875rem; padding: .2em .65em; border-radius: 999px; margin-right: .35rem; }
.rtp-badge { background: rgba(29, 191, 115, .14); color: var(--ig-accent); }
.volatility-low { background: rgba(29, 191, 115, .14); color: #1dbf73; }
.volatility-medium { background: rgba(212, 168, 67, .14); color: var(--ig-gold); }
.volatility-high { background: rgba(229, 80, 80, .14); color: #e55050; }
.ig-empty { opacity: .7; }
.ig-meta-table td input, .ig-meta-table td textarea { max-width: 100%; }

/* ---------- CTA ---------- */
.btn-cta {display: inline-block; text-align: center;
  background: var(--ig-gold);
  color: var(--ig-ink); font-weight: 800; letter-spacing: .02em;
  padding: .8em 1.4em; border-radius: 12px; text-decoration: none;
  transition:filter .2s;}
.btn-cta:hover, .btn-cta:focus-visible {filter: brightness(1.06);  text-decoration: none;}

/* ---------- filters ---------- */
.ig-filter-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ig-filter {padding: .35em .9em; border-radius: 999px;  color: inherit; text-decoration: none; font-size: .88rem; transition: border-color .2s, background .2s;}
.ig-filter:hover {}
.ig-filter.is-active {background: var(--ig-gold); color: var(--ig-ink);  font-weight: 700;}

/* ---------- ranked comparison cards ---------- */
.ig-ranked { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.4rem; }
.ig-rank-row { position: relative; }
.ig-card-shell {position: relative; display: grid; gap: 0;
  background: var(--ig-card-grad);
   border-radius: 20px;
  transition:border-color .3s, transform .3s;
  overflow: hidden;}
.ig-rank-row:hover .ig-card-shell {transform: translateY(-3px);}
.ig-rank-body { display: grid; grid-template-columns: minmax(180px, 240px) 1fr minmax(200px, 260px); gap: 1.4rem; padding: 1.5rem 1.6rem; align-items: center; }

.ig-rank-art {display: block; border-radius: 14px; overflow: hidden;}
.ig-rank-art img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.ig-rank-row:hover .ig-rank-art img { transform: scale(1.04); }

.ig-rank-main { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ig-rank-main .ig-card-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.ig-rank-main .ig-card-title a { color: var(--ig-text); }
.ig-rank-main .ig-card-title a:hover { color: var(--ig-gold-bright); }

/* top-pick ribbon */
.ig-ribbon {position: absolute; top: 14px; left: -34px; z-index: 2;
  transform: rotate(-45deg); transform-origin: center;
  background: var(--ig-gold);
  color: var(--ig-ink); font-size: .875rem; font-weight: 900; letter-spacing: .04em; text-transform: none;
  padding: .35em 2.6em;}

/* score pill top right */
.ig-score-pill {position: absolute; top: 12px; right: 14px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: .25rem;
  background: rgba(8, 10, 16, .78); 
   border-radius: 999px; padding: .4em .9em;}
.ig-score-pill b { color: var(--ig-gold-bright); font-size: 1.05rem; font-weight: 800; line-height: 1; }
.ig-score-pill i { color: var(--ig-text-dim); font-style: normal; font-size: .875rem; }

/* stars */
.ig-stars { position: relative; display: inline-block; width: 132px; height: 8px; background: rgba(255,255,255,.14); vertical-align: middle; }
.ig-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; display: block; background: var(--ig-gold); }

/* fact chips */
.ig-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ig-chip {display: inline-flex; align-items: center; gap: .45em; font-size: .875rem;  border-radius: 999px; padding: .3em .8em; color: var(--ig-text); background: rgba(255, 255, 255, .03);}
.ig-chip::before { content: ""; width: .5em; height: .5em; border-radius: 999px; background: var(--ig-gold); }
.ig-chip-fast::before {background: var(--ig-accent);}
.ig-chip-info::before { background: #6ea8ff; }
.ig-chip > span { color: var(--ig-text-dim); text-transform: none; font-size: .875rem; letter-spacing: 0; }

/* offer column */
.ig-rank-offer { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; justify-content: center; }
.ig-bonus-box {
  position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center;
  background: rgba(255, 255, 255, .04); background: rgba(212, 168, 67, .14);
  border-radius: 14px; padding: 1.3rem .9rem 1rem;
}
.ig-deal-tag {position: absolute; top: -.65rem; left: 50%; transform: translateX(-50%);
  background: var(--ig-gold); color: var(--ig-ink);
  font-size: .875rem; font-weight: 900; letter-spacing: .04em; text-transform: none;
  padding: .28em .9em; border-radius: 999px;}
.ig-bonus-line { display: flex; align-items: baseline; gap: .45rem; justify-content: center; }
.ig-bonus-pct { font-size: 2.2rem; font-weight: 900; color: var(--ig-text); line-height: 1; }
.ig-bonus-amount { font-size: 1.45rem; font-weight: 800; color: var(--ig-accent); line-height: 1; }
.ig-wager { opacity: .7; }
.ig-code-chip { display: inline-block; margin-top: .35rem; background: rgba(212, 168, 67, .14); padding: .3em .7em; border-radius: 6px; font-size: .9rem; color: var(--ig-gold-bright); }
.ig-review-link { font-size: .875rem; opacity: .75; text-align: center; color: inherit; }
.ig-review-link:hover { opacity: 1; color: var(--ig-gold-bright); }
.ig-rank-offer .btn-cta { width: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ig-rank-body { grid-template-columns: minmax(150px, 190px) 1fr; }
  .ig-rank-offer { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ig-bonus-box { flex: 1 1 220px; }
  .ig-rank-offer .btn-cta { flex: 1 1 160px; }
}
@media (max-width: 640px) {
  .ig-rank-body { grid-template-columns: 1fr; padding: 2.6rem 1.1rem 1.3rem; }
  .ig-rank-art { max-width: 100%; }
  .ig-ribbon { top: 10px; left: -40px; }
}

/* ---------- vertical premium cards (grids + archives) ---------- */
.ig-vcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ig-vcard:hover {transform: translateY(-2px);}
.ig-vcard-media { position: relative; display: block; }
.ig-vcard-media img { width: 100%; height: auto; border-radius: 0; display: block; }
.ig-vcard-media .ig-score-pill { position: absolute; top: .6rem; right: .6rem; }
.ig-vcard-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.ig-vcard-body .ig-stars { position: relative; display: inline-block; width: 132px; height: 8px; background: rgba(255,255,255,.14); vertical-align: middle; }
.ig-vcard-body .ig-bonus-box { margin-top: .15rem; }
.ig-vcard-body .ig-chips { margin: .1rem 0 0; }
.ig-provider { margin: 0; font-size: .875rem; letter-spacing: .16em; text-transform: none; color: var(--ig-text-dim); }
.ig-card-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.ig-vcard-cta { margin-top: auto; padding-top: .7rem; display: flex; flex-direction: column; gap: .45rem; align-items: center; }
.ig-vcard-cta .btn-cta { width: 100%; }
.ig-vslot-card .ig-vcard-media img { border-radius: 12px; margin: .8rem .8rem 0; width: calc(100% - 1.6rem); }

/* ---------- archive header band ---------- */
.ig-list-head { padding: 2.2rem 0 1.4rem; }
.ig-list-title { margin: 0 0 .5rem; font-family: var(--ig-display, inherit); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -0.02em; }
.ig-list-proof { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1rem 0 1.6rem; padding: 0;
  font-size: 1rem; line-height: 1.45; color: var(--ig-text-dim); }
.ig-list-proof span { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.ig-list-proof span + span { padding-left: 2rem; border-left: 1px solid var(--ig-line, rgba(244,242,238,.16)); }
.ig-list-proof b { font-family: var(--ig-display, inherit); font-size: 1.55rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ig-text, inherit); font-variant-numeric: tabular-nums; }

/* ---------- motion layer, every page ----------
   Gated on html.is-ready, which assets/igaming.js sets as soon as it runs: if the script never
   arrives (blocked, error, old browser), nothing on the page stays invisible. */
[data-reveal] { opacity: 0; transform: translateY(10px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* Two escapes for a script that never arrives: CSS knows whether scripting is off at all, and the
   head script arms a timer that drops the gate if assets/igaming.js did not set window.igReady. */
@media (scripting: none) { html.is-ready [data-reveal] { opacity: 1; transform: none; } }
html.not-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 720px) { .ig-list-proof { gap: .4rem 1.1rem; font-size: .95rem; }
  .ig-list-proof span + span { padding-left: 1.1rem; } }
.ig-list-sub { margin: 0; max-width: 60ch; color: var(--ig-text-dim); }

/* ---------- legal pages + disclaimer bands ---------- */
.ig-lead {margin: 0 0 1.8rem; padding: .9rem 1.1rem;
  font-size: 1.02rem; line-height: 1.65; color: var(--ig-text);
   border-left: 3px solid var(--ig-gold, #d4a843);
  border-radius: 10px; background: rgba(255,255,255,.03);}
.ig-legal h2 { margin: 2.4rem 0 .6rem; font-size: 1.22rem; line-height: 1.25; }
.ig-legal h2:first-of-type { margin-top: 1.4rem; }
.ig-legal p, .ig-legal li, .ig-legal address { max-width: none; }
.ig-legal address {font-style: normal; line-height: 1.75; margin: .4rem 0 1rem; padding: .85rem 1.05rem;
   border-radius: 10px; background: rgba(255,255,255,.03);}
.ig-legal code { font-size: .88em; padding: .12em .4em; border-radius: 5px; background: rgba(255,255,255,.06); }
.ig-stand {
  margin: 2.4rem 0 0; padding-top: .9rem; font-size: .875rem; letter-spacing: .02em; text-transform: none;
  color: var(--ig-text-dim); /* separation by space and tone, no rule above it */
}
.ig-legal-note {display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
  margin: 1.2rem 0 1.7rem; padding: .7rem 1rem;
  font-size: .95rem; line-height: 1.6; color: var(--ig-text-dim);
   border-left: 3px solid var(--ig-gold, #d4a843);
  border-radius: 10px; background: rgba(255,255,255,.025);}
.ig-legal-note strong { color: var(--ig-gold, #d4a843); letter-spacing: .06em; }
.ig-legal-note a { color: var(--ig-text-dim); text-decoration: underline; text-underline-offset: 2px; }
.ig-legal-note a:hover { color: var(--ig-text); }
@media (max-width: 560px) { .ig-legal-note { font-size: .95rem; padding: .65rem .8rem; } }

/* Mobile density. The ranked rows and the cards were built for a desktop column: stacked
   full-width artwork, three chip lines and a centred offer box made one entry ~600 px tall, so a
   four-item shortlist alone ate 2 400 px of a phone screen. Same content, half the height:
   thumb at the left, one title line, the two chips that decide the click, offer and button
   side by side. The full presentation stays on desktop and on the review page. */
@media (max-width: 640px) {
  .ig-ranked { gap: .75rem; margin: 1rem 0; }
  .ig-card-shell { border-radius: 14px; }
  .ig-rank-body { grid-template-columns: 104px minmax(0, 1fr); gap: .65rem .8rem; padding: 2rem .85rem .85rem; align-items: start; }
  .ig-rank-art { max-width: 104px; aspect-ratio: 16 / 9; }
  .ig-rank-main { gap: .25rem; }
  .ig-rank-main .ig-card-title { font-size: 1.12rem; }
  .ig-rank-main .ig-facts li:nth-child(3) { display: none; }   /* the payments chip is the longest, the review page lists them */
  .ig-rank-offer { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .55rem; }
  .ig-rank-offer .ig-bonus-box { flex: 1 1 auto; justify-items: start; text-align: left; padding: .5rem .6rem; gap: .15rem; }
  .ig-rank-offer .btn-cta { flex: 0 1 45%; font-size: .88rem; padding: .6rem .8rem; }
  .ig-rank-offer .ig-review-link { display: none; }             /* the title above already links */
  .ig-vcard-media img { aspect-ratio: 16 / 9; height: auto; max-height: 150px; object-fit: cover; }
  .ig-vslot-card .ig-vcard-media img { margin: .6rem .6rem 0; width: calc(100% - 1.2rem); max-height: 128px; }
  .ig-vcard-body { gap: .4rem; padding: .75rem .85rem .9rem; }
  .ig-vcard-body .ig-card-title { font-size: 1.05rem; }
  .ig-vcard-cta { padding-top: .5rem; }
  .ig-grid { gap: .8rem; }
  /* the rating sits on the artwork as a pill, so the star strip and the chip row are duplicates
     at this width — they cost two lines per card and say nothing new */
  .ig-rank-body .ig-stars, .ig-vcard-body .ig-stars, .ig-vcard-body .ig-facts { display: none; }
  .ig-rank-body { padding: 1.7rem .85rem .85rem; }
  .ig-rank-main .ig-card-excerpt, .ig-vcard-body .ig-card-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .9rem; margin: .1rem 0 0;
  }
  .ig-vcard-body .ig-bonus-box { padding: .45rem .55rem; gap: .1rem; }
  .ig-vcard-body .ig-vcard-cta { padding-top: .45rem; }
  .ig-vcard-cta { padding-top: .45rem; }
}



/* ---------- review (detail page) ---------- */
.ig-review-head {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .75fr); gap: 1.2rem 1.4rem;
  align-items: stretch; background: var(--ig-card-grad);
   border-radius: 18px;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);  margin: 0 0 1.2rem;}
.ig-review-id { display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
.ig-review-art { grid-column: 1 / -1; min-width: 0; }
.ig-review-art img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 14px; display: block; }
.ig-review-name { min-width: 0; }
.ig-review-brand { margin: 0 0 .3rem; font-size: .875rem; text-transform: none; letter-spacing: .14em; color: var(--ig-text-dim); }
.ig-review-score { display: flex; align-items: center; gap: .6rem; margin: .15rem 0 .45rem; color: var(--ig-text-dim); }
.ig-review-score strong { color: var(--ig-gold); font-size: 1.5rem; line-height: 1; }
.ig-tested { margin: .2rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }
.ig-review-offer {display: flex; flex-direction: column; gap: .45rem; align-items: flex-start;
  background: rgba(255,255,255,.045); 
  border-radius: 14px; padding: 1rem 1.1rem;}
.ig-review-offer .ig-bonus-line { display: flex; align-items: baseline; gap: .45rem; margin: .1rem 0; flex-wrap: wrap; }
.ig-review-cta { margin-top: .35rem; width: 100%; text-align: center; }
.ig-legal-inline { margin: .35rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }
.ig-code-line { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .875rem; letter-spacing: .09em; text-transform: none; color: var(--ig-text-dim); }
.ig-bonus-terms { margin: .1rem 0 .3rem; font-size: .9rem; color: var(--ig-text-dim); }

.ig-factstrip {display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
   border-radius: 14px; overflow: hidden; margin: 0 0 1.8rem;}
.ig-fact { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; background: var(--ig-surface); }
.ig-fact span { font-size: .875rem; letter-spacing: .09em; text-transform: none; color: var(--ig-text-dim); }
.ig-fact strong { font-size: .98rem; color: var(--ig-text); }

.ig-verdict, .ig-proscons, .ig-facts-table, .ig-related { margin: 0 0 2.1rem; }
.ig-verdict {background: rgba(255,255,255,.035); 
  border-left: 3px solid var(--ig-gold); border-radius: 14px; padding: clamp(1rem, 2.5vw, 1.5rem);}
.ig-verdict h2 { margin-top: 0; }
.ig-verdict-text { margin: .2rem 0 1rem; font-size: 1.02rem; line-height: 1.6; }
.ig-rating-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ig-rating { display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(5rem, 2fr) auto; gap: .7rem; align-items: center; }
.ig-rating-label { font-size: .9rem; color: var(--ig-text-dim); }
.ig-rating-bar { display: block; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.11); overflow: hidden; }
.ig-rating-bar i {display: block; height: 100%; border-radius: 999px; background: var(--ig-gold);}
.ig-rating-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--ig-gold); }
.ig-method { margin: 1rem 0 0; font-size: .9rem; }

.ig-proscons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.ig-pros, .ig-cons {background: rgba(255,255,255,.03);  border-radius: 14px; padding: 1rem 1.1rem;}
.ig-pros h3, .ig-cons h3 { margin: 0 0 .6rem; font-size: .875rem; letter-spacing: .1em; text-transform: none; }
.ig-pros h3 { color: var(--ig-accent); }
.ig-cons h3 { color: #ff9270; }
.ig-pros ul, .ig-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ig-pros li, .ig-cons li { position: relative; padding-left: 1.5rem; font-size: .94rem; line-height: 1.5; }
.ig-pros li::before { content: '\2713'; position: absolute; left: 0; color: var(--ig-accent); font-weight: 700; }
.ig-cons li::before { content: '\2013'; position: absolute; left: 0; color: #ff9270; font-weight: 700; }

.ig-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ig-table th, .ig-table td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.ig-table th { width: 38%; color: var(--ig-text-dim); font-weight: 600; }
.ig-table tr:last-child th, .ig-table tr:last-child td { border-bottom: 0; }
.ig-table-note { margin: .6rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }

.ig-related-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.ig-related-list a {display: flex; gap: .9rem; align-items: center; text-decoration: none;
  background: rgba(255,255,255,.03); 
  border-radius: 14px; padding: .6rem .8rem; transition: border-color .2s, background .2s;}
.ig-related-list a:hover {background: rgba(255,255,255,.06);}
.ig-art-xs { flex: 0 0 200px; width: 200px; height: auto; border-radius: 10px; }
.ig-related-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ig-related-name { font-weight: 700; color: var(--ig-text); }
.ig-related-deal { font-size: .9rem; color: var(--ig-accent); }
.ig-related-score { font-size: .8rem; font-weight: 700; color: var(--ig-gold); }
.ig-all-link { margin: .5rem 0 0; font-size: .9rem; }

/* FAQ accordion — the schema.org FAQ data is read back out of these blocks, so keep the markup. */
.ig-faq details {background: rgba(255,255,255,.03);  border-radius: 12px; padding: .7rem 1rem; margin: 0 0 .6rem;}
.ig-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::after { content: '+'; float: right; color: var(--ig-gold); font-weight: 700; }
.ig-faq details[open] summary::after { content: '\2013'; }
.ig-faq details p { margin: .6rem 0 0; color: var(--ig-text-dim); }

.ig-slot-head { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .6fr); }
.ig-review-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .5rem; }

@media (max-width: 860px) {
  .ig-review-head, .ig-slot-head { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ig-review-id { flex-direction: column; align-items: stretch; }
  .ig-review-art { grid-column: auto; }
  .ig-rating { grid-template-columns: 1fr auto; }
  .ig-rating-bar { grid-column: 1 / -1; order: 3; }
  .ig-table th { width: 44%; }
  .ig-art-xs { flex-basis: 120px; width: 120px; }
}

/* Breadcrumb on detail pages — small, dim, never competes with the title. */
.ig-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .9rem; font-size: .8rem; color: var(--ig-text-dim); }
.ig-crumbs a { color: var(--ig-text-dim); text-decoration: none; }
.ig-crumbs a:hover { color: var(--ig-gold); }
.ig-crumbs span[aria-hidden] { opacity: .55; }

/* Legal pages: an unset owner detail shows as a field, never as an invented fact. */
.ig-needs-value { display: inline-block; padding: .05em .4em; background: rgba(212, 168, 67, .14); border-radius: 6px; color: var(--ig-gold); font-size: .92em; }
.ig-notice {background: rgba(212,168,67,.09);  border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; color: var(--ig-text);}
.ig-notice code { font-size: .85em; }

/* nothing meant to be read below 14px — the inspector measures it, readers feel it */
.ig-wager, .ig-card-meta, .ig-review-link, .ig-vcard-cta .ig-review-link { font-size: .875rem; }


/* ---------- site chrome: one bar, one footer, on every page type ---------- */
:root { --ig-line: rgba(244, 242, 238, .10); --ig-page-bg: var(--ig-surface); }

.ig-sitebar {
	position: sticky; top: 0; z-index: 90;
	background: var(--ig-page-bg);
	border-bottom: 1px solid var(--ig-line);
	transition: background .25s, box-shadow .25s;
}
/* The bar over content reads better with a floor under it; the class is added on scroll. */
.ig-sitebar.is-stuck { background: color-mix(in oklab, var(--ig-page-bg) 92%, black);
	box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .9); }
.ig-sitebar-inner {
	display: flex; align-items: center; gap: 1rem;
	max-width: var(--ig-measure, 1168px); margin-inline: auto;
	padding: .65rem clamp(1rem, 4vw, 2rem);
}
.ig-brand { display: inline-flex; align-items: center; color: var(--ig-text); text-decoration: none; }
.ig-brand .ig-mark { width: 30px; height: 30px; color: var(--ig-brand, var(--ig-gold)); }
.ig-brand .ig-logo-word { margin-left: .5rem; font: 800 1.28rem/1 var(--ig-display, sans-serif);
	letter-spacing: -.02em; }
.ig-nav { margin-left: auto; }
.ig-nav-list { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.5rem);
	list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.ig-nav-list a { position: relative; display: block; padding: .4rem 0; color: var(--ig-text-dim);
	text-decoration: none; transition: color .18s; }
.ig-nav-list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .02rem; height: 2px;
	background: var(--ig-brand, var(--ig-gold)); transition: right .22s cubic-bezier(.2, .8, .2, 1); }
.ig-nav-list a:hover { color: var(--ig-text); }
.ig-nav-list a:hover::after, .ig-nav-list .current-menu-item a::after { right: 0; }
.ig-nav-list .current-menu-item a { color: var(--ig-text); }
.ig-bar-cta { margin-left: .35rem; padding: .52rem .95rem; border-radius: 999px;
	background: var(--ig-accent); color: var(--ig-ink); white-space: nowrap;
	font: 600 .9rem/1 var(--ig-body, sans-serif); text-decoration: none;
	transition: filter .18s, transform .18s; }
.ig-bar-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Phones: the same links inside a disclosure, no JavaScript required, no duplicate bar. */
.ig-navdisc { display: none; margin-left: auto; position: relative; }
.ig-navdisc > summary { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .75rem;
	border: 1px solid var(--ig-line); border-radius: 9px; cursor: pointer; list-style: none;
	color: var(--ig-text); font: 600 .9rem/1 var(--ig-body, sans-serif); }
.ig-navdisc > summary::-webkit-details-marker { display: none; }
.ig-navdisc-bars { display: inline-block; width: 15px; height: 11px;
	background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.6px no-repeat,
		linear-gradient(currentColor, currentColor) 0 5px / 100% 1.6px no-repeat,
		linear-gradient(currentColor, currentColor) 0 10px / 100% 1.6px no-repeat; }
.ig-navdisc nav { display: none; }
.ig-bar-cta--disc { display: none; }
@media (max-width: 900px) {
	/* Pinned here it only overlaps things: the links are in a disclosure, and a 56px bar floating
	   over the page hides a statement mid-scroll and costs the first screen on a phone. */
	.ig-sitebar { position: static; }
	.ig-sitebar.is-stuck { box-shadow: none; }
	.ig-nav, .ig-bar-cta:not(.ig-bar-cta--disc) { display: none; }
	.ig-navdisc { display: block; }
	.ig-navdisc[open] nav { display: block; position: absolute; right: 0; top: calc(100% + .45rem);
		min-width: 15.5rem; padding: .5rem .9rem .3rem; background: var(--ig-page-bg);
		border: 1px solid var(--ig-line); border-radius: 12px;
		box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .95); }
	.ig-navdisc[open] .ig-nav-list { display: grid; gap: .1rem; }
	.ig-navdisc[open] .ig-nav-list a { padding: .5rem 0; }
	.ig-bar-cta--disc { display: inline-flex; margin: .55rem 0 .35rem; justify-content: center; }
}

/* ---------- data figures: drawn from this post's own numbers, never stock imagery ---------- */
.ig-figs { display: grid; gap: 1.8rem; margin: 2.6rem 0; }
.ig-fig { margin: 0; }
.ig-fig-img { width: 100%; height: auto; border-radius: 14px; display: block; }
.ig-fig figcaption { margin-top: .6rem; font-size: .875rem; line-height: 1.55; color: var(--ig-text-dim); }
@media (min-width: 1100px) { .ig-figs { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ---------- the house signature: measured numbers set as a protocol, not as body copy ---------- */
:root { --ig-num: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; }
.ig-num, .ig-score, .ig-board-amount, .ig-board-cell b, .ig-ledgercard-score b, .ig-ledgercard-rows b,
.ig-bonus .bonus-amount, .ig-fact-strip b {   /* prose stays in the text face; only figures get the protocol face */
	font-family: var(--ig-num);
	font-weight: 600;      /* the weight we ship: ask for the real 600, never a synthesised bold */
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
/* A ticket edge instead of a pill: the same cut on the bar CTA, the board CTA and the active tick. */
.ig-bar-cta, .ig-board-cta .btn, .ig-cta .btn {
	border-radius: 3px 12px 3px 12px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	padding-right: 1.35rem;
}
.ig-nav-list .current-menu-item a::before { content: ""; position: absolute; left: -.55rem; top: 50%;
	width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); background: var(--ig-brand, var(--ig-gold)); }
@media (max-width: 900px) { .ig-nav-list .current-menu-item a::before { left: -.35rem; } }