/* jili-malaysia.games — shared stylesheet. Dark casino-familiar, gold accent, mobile-first. */
:root{
  --ground:#0E0B08; --surface:#181310; --surface-2:#221B16; --line:#332A22;
  --ink:#F4EFE8; --ink-dim:#B8AB9C; --ink-faint:#8A7E71;
  --gold:#E5B655; --gold-deep:#B98A2B; --gold-wash:rgba(229,182,85,.10);
  --red:#D2483B; --red-wash:rgba(210,72,59,.12);
  --green:#3FA97A; --green-wash:rgba(63,169,122,.12);
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

.wrap{max-width:74rem;margin:0 auto;padding:0 1.15rem}
.section{padding:2.75rem 0}
.section-tight{padding:1.5rem 0}
.divider{border:0;border-top:1px solid var(--line);margin:2rem 0}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.stack{display:flex;flex-direction:column;gap:.9rem}
.grid{display:grid;gap:.85rem}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}

h1,h2,h3,h4{font-family:'Archivo',ui-sans-serif,sans-serif;margin:0;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.85rem,5.4vw,2.9rem);font-weight:800;margin:0 0 .8rem}
h2{font-size:clamp(1.35rem,3.4vw,1.95rem);font-weight:700;margin:2.4rem 0 .85rem}
h3{font-size:1.09rem;font-weight:700;margin:1.6rem 0 .5rem}
h4{font-size:.96rem;font-weight:700;margin:1.1rem 0 .4rem;color:var(--ink-dim)}
p{margin:0 0 1rem}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#F2CE84}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.lede{font-size:1.09rem;color:var(--ink-dim);max-width:44rem}
.prose{max-width:44rem}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.1rem}
.prose li{margin-bottom:.42rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,11,8,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:3.85rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;line-height:1.15;text-decoration:none;color:var(--ink)}
.brand-mark{height:1.62rem;width:auto;flex:none;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand strong{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.16rem;letter-spacing:-.02em}
.brand strong em{font-style:normal;color:var(--gold)}
.brand-sub{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.15rem}
.nav{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;margin-left:auto}
.nav a{display:block;padding:.4rem .6rem;font-size:.85rem;font-weight:600;color:var(--ink-dim);
  text-decoration:none;border-radius:var(--r)}
.nav a:hover,.nav a[aria-current]{color:var(--gold);background:var(--gold-wash)}
.lang-switch{display:flex;gap:.25rem;border:1px solid var(--line);border-radius:var(--r);padding:.15rem}
.lang-switch a{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.06em;
  padding:.28rem .45rem;text-decoration:none;color:var(--ink-faint);border-radius:2px}
.lang-switch a[aria-current]{background:var(--gold);color:#1A1206;font-weight:600}

/* hero */
.hero{padding:2.4rem 0 1.6rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(229,182,85,.055),transparent)}
.hero-inner{max-width:44rem}
.hero-art{margin-top:1.4rem;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);min-height:9rem;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;padding:1.2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:.72rem 1.15rem;border-radius:var(--r);border:1px solid transparent;
  background:var(--gold);color:#1A1206;text-decoration:none;cursor:pointer;
  transition:background .14s ease,transform .14s ease}
.btn:hover{background:#F2CE84;color:#1A1206}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:1.05rem;padding:.9rem 1.5rem}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--gold-deep);color:var(--gold)}
.btn-block{width:100%}
/* THE BIG RECTANGLE */
.btn-play{display:flex;align-items:center;justify-content:center;width:100%;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.15rem,4.2vw,1.6rem);
  letter-spacing:.01em;text-transform:uppercase;text-align:center;
  padding:1.25rem 1.4rem;margin:1.35rem 0;
  background:linear-gradient(180deg,#F0C468,var(--gold) 46%,var(--gold-deep));
  color:#1A1206;text-decoration:none;border:1px solid #F5D693;border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 26px -12px rgba(229,182,85,.7);
  transition:filter .14s ease,transform .14s ease}
.btn-play:hover{filter:brightness(1.07);color:#1A1206}
.btn-play:active{transform:translateY(1px)}

/* cards & tiles */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.05rem}
.card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-bottom:.6rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.card-bd{font-size:.93rem;color:var(--ink-dim)}
.card-bd p:last-child{margin-bottom:0}

.tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  transition:border-color .14s ease,transform .14s ease}
.tile:hover{border-color:var(--gold-deep);transform:translateY(-2px);color:var(--ink)}
.tile-art{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.7rem;background:linear-gradient(145deg,var(--surface-2),#12100D);
  border-bottom:1px solid var(--line);font-family:'Archivo',sans-serif;font-weight:800;
  font-size:.9rem;line-height:1.14;color:var(--gold);letter-spacing:-.01em}
.tile-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:.88rem;padding:.55rem .6rem .15rem}
.tile-meta{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;
  color:var(--ink-faint);padding:0 .6rem .6rem}

.op-card{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.op-rank{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.3rem;color:var(--gold);
  min-width:1.7rem;text-align:center;font-variant-numeric:tabular-nums}
.op-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem}
.op-offer{font-size:.88rem;color:var(--ink-dim)}
.op-terms{grid-column:1/-1;font-size:.74rem;color:var(--ink-faint);border-top:1px solid var(--line);
  padding-top:.5rem;margin-top:.15rem}
@media(max-width:34rem){.op-card{grid-template-columns:auto 1fr}
  .op-card .btn{grid-column:1/-1;width:100%}}

/* data */
.spec{overflow-x:auto;margin:0 0 1.3rem;border:1px solid var(--line);border-radius:var(--r)}
.spec table{border-collapse:collapse;width:100%;min-width:24rem;font-size:.88rem}
.spec th,.spec td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--line)}
.spec th{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;background:var(--surface-2)}
.spec td{color:var(--ink-dim)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.stat-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.stat-k{color:var(--ink-faint)}
.stat-v{font-family:'IBM Plex Mono',monospace;color:var(--ink)}

.verify{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.03em;background:var(--red-wash);color:#F09C90;border:1px dashed #7E3A32;
  border-radius:2px;padding:.1rem .38rem}

/* badges & notes */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-family:'IBM Plex Mono',monospace;
  font-size:.63rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:.26rem .5rem;border-radius:2px;background:var(--surface-2);color:var(--ink-dim);
  border:1px solid var(--line)}
.badge-verified{background:var(--green-wash);color:#7FD4AC;border-color:#2A6349}
.badge-info{background:var(--gold-wash);color:var(--gold);border-color:var(--gold-deep)}
.badge-promo{background:var(--red-wash);color:#F09C90;border-color:#7E3A32}

.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:.95rem 1.1rem;margin:0 0 1.3rem;font-size:.93rem}
.note p:last-child{margin-bottom:0}
.note-warn{border-left-color:var(--red)}
.disclaimer{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.66;color:var(--ink-faint)}
.disclaimer strong{color:var(--ink-dim)}

/* content bits */
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.05em;
  color:var(--ink-faint);margin:0 0 1rem}
.breadcrumb a{color:var(--ink-faint);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;margin:0 0 1.5rem;font-size:.9rem}
.toc ul{list-style:none;margin:.4rem 0 0;padding:0;columns:2;column-gap:1.4rem}
.toc li{margin-bottom:.3rem}
@media(max-width:34rem){.toc ul{columns:1}}
.faq{margin:0}
.faq-q{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;
  margin:1.35rem 0 .35rem;color:var(--ink)}
.faq-a{font-size:.93rem;color:var(--ink-dim);margin:0 0 .9rem}

/* footer */
.site-footer{margin-top:3.5rem;border-top:1px solid var(--line);background:#0B0906;
  padding:2.2rem 0 1.4rem}
.footer-cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.footer-cols h4{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .6rem;font-weight:500}
.footer-cols ul{list-style:none;margin:0;padding:0;font-size:.86rem}
.footer-cols li{margin-bottom:.38rem}
.footer-cols a{color:var(--ink-dim);text-decoration:none}
.footer-cols a:hover{color:var(--gold)}
.legal-strip{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;
  align-items:center}
.legal-strip .badge{background:transparent}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}
  .tile:hover,.btn:active,.btn-play:active{transform:none}}

/* ============ ARTWORK LAYER (added for filled-image build) ============ */
.tile-art{padding:0;aspect-ratio:4/3;overflow:hidden;position:relative}
.tile-svg{display:block;width:100%;height:100%}
.tile-art>picture{display:block;width:100%;height:100%}
.tile-img{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface-2)}
/* a lone tile in an auto-fit grid must not stretch to the full container */
.grid>.tile:only-child{max-width:17rem}
.hero-svg{display:block;width:100%;height:100%;object-fit:cover}
.hero-banner{position:relative;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:0 0 1.35rem;min-height:11rem;background:var(--surface)}
.hero-banner .hero-svg{position:absolute;inset:0}
.hero-banner-in{position:relative;padding:1.5rem 1.35rem;max-width:33rem}
/* JILI logo — sits in the HTML, not the background art, so it survives the
   aspect-ratio crop the background SVG applies at every screen size */
.hero-mark{position:absolute;z-index:1;right:clamp(1rem,3.5vw,2.8rem);top:50%;
  transform:translateY(-50%);width:clamp(124px,19vw,238px);height:auto;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.6));pointer-events:none}
.hero-banner-in{position:relative;z-index:2}
@media(max-width:52rem){
  .hero-mark{top:.9rem;right:.9rem;transform:none;width:84px;opacity:.95}
  /* keep the kicker and headline clear of the logo */
  .hero-banner-in{padding-right:6rem}
}
.hero-banner h1{margin-bottom:.55rem}

/* provider / payment strips */
.strip{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 1.1rem}
.chip{display:inline-flex;align-items:center;gap:.38rem;font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.03em;color:var(--ink-dim);background:var(--surface);
  border:1px solid var(--line);border-radius:2px;padding:.36rem .55rem}
.pay-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;color:var(--ink-dim);background:var(--surface);border:1px solid var(--line);
  border-radius:2px;padding:.32rem .5rem}
.pay-chip svg{width:1.35rem;height:.9rem;flex:none}

/* promo rail — the pattern MY casino sites use above the lobby */
.rail{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:0 0 1.3rem}
.promo{position:relative;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);background:linear-gradient(135deg,var(--surface-2),var(--surface));
  padding:.85rem .95rem}
.promo-k{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .28rem}
.promo-v{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;line-height:1.2;margin:0}
.promo-s{font-size:.78rem;color:var(--ink-faint);margin:.3rem 0 0}

/* section head with a "see all" on the right, like a lobby rail */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:2.4rem 0 .9rem;flex-wrap:wrap}
.sec-head h2{margin:0}
.sec-head a{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.05em;
  text-decoration:none;white-space:nowrap}


.tile-tag{position:absolute;top:.5rem;left:.5rem;z-index:2;font-family:'IBM Plex Mono',monospace;
  font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .38rem;border-radius:2px;
  background:rgba(6,4,2,.72);border:1px solid var(--gold-deep);color:var(--gold)}

/* ============ READABILITY: constrain measure, not the container ============
   Sections are full-width; the text inside them is not. ~46rem lands at
   65-75 characters per line, which is the readable band.                     */
main p, main > section li, .prose li{max-width:46rem}
.faq-a{max-width:46rem}
/* components manage their own width — unset inside them */
.card p,.card-bd p,.note p,.promo p,.op-card p,.op-offer,.op-terms,.disclaimer p,
.legal-strip span,.hero-banner-in p,.toc p,.toc li,.tile-meta,.spec p,.strip p,
.footer-cols li,.rail p,.grid p{max-width:none}
/* a lone paragraph directly after a heading reads better slightly wider */
.lede{max-width:44rem}

/* ============ INNER-PAGE FURNITURE ============ */
.rel{margin:2.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.rel h2{margin:0 0 .9rem;font-size:1.25rem}
.callout{display:grid;gap:.9rem 1.4rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
 padding:1.1rem 1.2rem;margin:0 0 1.4rem}
.callout h3{margin:0 0 .3rem;font-size:.95rem}
.callout p{margin:0;font-size:.88rem;color:var(--ink-dim);max-width:none}
/* keep long tables from crushing on mobile */
.spec table{min-width:22rem}
@media(max-width:34rem){.spec th,.spec td{padding:.5rem .6rem;font-size:.82rem}}

/* ==================================================================
   DEFENSIVE LAYER — makes the failure modes the audit found impossible
   ================================================================== */

/* 1. Nothing can go full-bleed. Any direct child of <main> that is not a
      <section> gets the container treatment automatically.               */
main > *:not(section){max-width:74rem;margin-left:auto!important;margin-right:auto!important;
  padding-left:1.15rem;padding-right:1.15rem;box-sizing:border-box}
main > section{padding-left:0;padding-right:0;max-width:none}

/* 2. op-card button spans the full card at EVERY width, not just mobile.
      (was trapped in @media(max-width:34rem) — desktop was broken)       */
.op-card .btn{grid-column:1/-1;width:100%}
.op-card .op-offer,.op-card .badge{grid-column:1/-1}

/* 3. .toc works with bare anchors as well as ul/li */
.toc a{display:inline-block;padding:.18rem 0;margin-right:1.1rem;font-size:.9rem}
.toc ul{columns:2;column-gap:1.4rem}
.toc ul a{margin-right:0}
@media(max-width:34rem){.toc ul{columns:1}}

/* 4. Vertical rhythm: stop .section padding + h2 margin + .divider stacking */
.section + .section,.section-tight + .section,.section + .section-tight{padding-top:0}
.section > .wrap > h2:first-child,.section-tight > .wrap > h2:first-child,
.wrap > .sec-head:first-child h2{margin-top:0}
.divider + section,.divider + .section{padding-top:0}
section + .divider,.section + .divider{margin-top:0}

/* 5. A hero banner with no text over it is decoration, not a hero — shrink it
      so it stops pushing the h1 and CTA below the fold.                   */
.hero-banner{min-height:0}
.hero-banner:has(.hero-banner-in){min-height:11rem}
.hero-banner:not(:has(.hero-banner-in)) .hero-svg{max-height:9rem}
.hero-inner{margin-left:0;margin-right:0}   /* never centre the hero column */

/* 6. Non-interactive tiles must not look clickable */
div.tile{cursor:default}
div.tile:hover{border-color:var(--line);transform:none}

/* 7. .disclaimer is a page-closing block. Used inline it must not draw a rule. */
p.disclaimer,.card .disclaimer,.op-card .disclaimer{margin-top:.6rem;padding-top:0;
  border-top:0;font-size:.76rem}

/* 8. cta-dock never breaks its measure. The bleed-to-edge trick fought the
      main>* container rule and pushed the button past the text column.        */
.cta-dock{margin-top:1.6rem;padding:0;background:none;border-top:0;position:static}
.cta-dock .btn-play{margin:0}
.cta-dock .tile-meta{margin:.5rem 0 0}
/* sticky only on small screens, and only within its own container */
@media(max-width:52rem){
  .cta-dock{position:sticky;bottom:0;padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(14,11,8,0),rgba(14,11,8,.97) 40%)}
}

/* 9. Any table can scroll rather than crush */
.wrap table:not(.spec table){display:block;overflow-x:auto;max-width:100%}

/* ==================================================================
   CASINO-REGISTER PATTERNS — conventions the reference sites use
   (pnt96.org / pnt96.online: 440-720 words, 27-39 images, 10-15 CTAs)
   ================================================================== */

/* provider / partner strip — "leading game studios" row */
.providers{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));margin:0 0 1.3rem}
.prov{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3.6rem;padding:.5rem .6rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);font-family:'Archivo',sans-serif;font-weight:800;font-size:.82rem;
  letter-spacing:-.01em;color:var(--gold);text-decoration:none}
a.prov:hover{border-color:var(--gold-deep);color:#F2CE84}

/* numbered "how to start" steps */
.steps{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  margin:0 0 1.4rem;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1rem 1rem .9rem 2.9rem;counter-increment:step}
.step::before{content:counter(step);position:absolute;left:.85rem;top:.9rem;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:1.35rem;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.step h3{margin:0 0 .25rem;font-size:.95rem}
.step p{margin:0;font-size:.85rem;color:var(--ink-dim);max-width:none}

/* quick-pick category row under the hero */
.picks{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));margin:0 0 1.3rem}
.pick{display:flex;flex-direction:column;gap:.2rem;padding:.75rem .85rem;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.pick strong{font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;color:var(--gold)}
.pick span{font-size:.76rem;color:var(--ink-faint)}
a.pick:hover{border-color:var(--gold-deep)}

/* compact fact row — replaces paragraphs of hedging prose */
.facts{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0 0 1.3rem}
.fact{padding:.7rem .85rem;background:var(--surface);border:1px solid var(--line);
  border-left:2px solid var(--gold-deep);border-radius:var(--r)}
.fact b{display:block;font-family:'Archivo',sans-serif;font-size:.88rem;margin-bottom:.15rem}
.fact span{font-size:.8rem;color:var(--ink-dim)}

/* tighter section rhythm for dense pages */
.dense{padding:1.6rem 0}
.dense h2{margin:0 0 .7rem;font-size:1.3rem}
.dense h3{margin:1.1rem 0 .35rem;font-size:1rem}
.dense p{margin:0 0 .7rem}

/* E-E-A-T byline */
.byline{font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.7;color:var(--ink-faint);
 border-top:1px solid var(--line);padding-top:.9rem;margin:2.2rem 0 0;max-width:none}
.byline a{color:var(--ink-dim)}
.byline a:hover{color:var(--gold)}

/* Placeholders are VISIBLE and honest — an empty cell reads as broken,
   and an invisible marker made the sourcing policy untrue. */
.tbc{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
 letter-spacing:.02em;color:#C7A96A;background:rgba(229,182,85,.09);
 border:1px dashed var(--gold-deep);border-radius:2px;padding:.1rem .4rem;cursor:help}
.fact span .tbc,.op-offer .tbc{font-size:.64rem}
.op-card .btn{margin-top:.5rem}

/* operator logos in cards */
.op-logo{display:flex;align-items:center;justify-content:flex-start;
 height:2.6rem;margin:0 0 .35rem}
.op-logo img{max-height:2.6rem;width:auto;max-width:9rem;object-fit:contain}
@media(max-width:34rem){.op-logo{justify-content:center}}

/* build-TODO reveal (local preview only) */