/* Royal Reels — Australia (live brand palette) */
:root{
  --bg:#141414;             /* primary background */
  --bg-2:#0b0b0b;           /* deepest black */
  --panel:#201e25;          /* card panel */
  --panel-2:#2a2730;        /* alt card / hover */
  --line:#3e3e3e;           /* divider */
  --line-2:#444;            /* secondary divider */
  --t1:#ffffff;             /* primary text */
  --t2:#cfcfcf;             /* muted text */
  --t3:#9a9a9a;             /* faint text */
  --g:#ffc42e;              /* brand gold (CTA + accent) */
  --g-2:#e0a91d;            /* gold hover */
  --g-soft:rgba(255,196,46,.14);
  --green:#00fa00;          /* brand bright green accent */
  --r:#a52a2a;              /* deep red accent */
  --ok:#00fa00;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Raleway','Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--t1);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--g);text-decoration:none}
a:hover{color:var(--t1)}
h1,h2,h3,h4,h5{font-family:'Playfair Display','Raleway',serif;font-weight:800;color:var(--t1);line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
h1{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:900;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,2.6vw,2.3rem)}
h3{font-size:1.35rem;margin-top:6px}
h4{font-size:1.08rem;margin:0 0 8px;font-family:'Raleway',sans-serif}
p{margin:0 0 14px}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
section{padding:56px 0;border-bottom:1px solid var(--line)}
.section--alt{background:var(--bg-2)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.section__lede{color:var(--t2);max-width:880px;font-size:1.04rem}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g);padding:6px 12px;border:1px solid var(--g);border-radius:999px;margin-bottom:14px;background:var(--g-soft)}

/* Ticker */
.ticker{
  background:#000;
  color:#fff;font-size:.92rem;text-align:center;padding:9px 14px;
  border-bottom:1px solid var(--g);
}
.ticker a{color:var(--g);font-weight:700;margin-left:6px}
.ticker b{color:var(--g)}

/* Header */
.top{position:sticky;top:0;z-index:30;background:rgba(11,11,11,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--g)}
.top__row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:18px}
.top nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.top nav a{color:var(--t2);font-weight:600;font-size:.96rem}
.top nav a:hover{color:var(--g)}

/* Brand wordmark — black background, gold serif type */
.brand-logo{display:inline-flex;align-items:center;gap:0;text-decoration:none;line-height:1}
.brand-logo img{max-height:42px;width:auto;display:block}
.brand-logo .wordmark{
  font-family:'Playfair Display','Times New Roman',serif;
  font-weight:900;font-style:italic;
  font-size:1.65rem;letter-spacing:.02em;
  background:linear-gradient(180deg,#ffe27a 0%, #ffc42e 50%, #b8861f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.brand-logo .wordmark .amp{color:var(--g);font-weight:400;margin:0 4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;padding:11px 22px;border-radius:6px;border:1px solid transparent;transition:all .18s ease;cursor:pointer;font-size:.97rem;line-height:1;text-transform:uppercase;letter-spacing:.04em}
.btn--g{background:var(--g);color:#000;border-color:var(--g)}
.btn--g:hover{background:var(--g-2);color:#000;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,196,46,.32)}
.btn--out{background:transparent;color:var(--t1);border-color:var(--line)}
.btn--out:hover{border-color:var(--g);color:var(--g)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--t1);border-color:rgba(255,255,255,.18)}
.btn--lg{padding:15px 30px;font-size:1.04rem}

/* Hero */
.hero{padding:30px 0 56px;border:none}
.hero__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:stretch;margin-top:28px}
.tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g);background:var(--g-soft);padding:6px 12px;border-radius:999px;border:1px solid var(--g);margin-bottom:14px}
.hero__lead{font-size:1.08rem;color:var(--t2);max-width:680px}
.hero__cta{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap}
.hero__trust{display:flex;gap:22px;flex-wrap:wrap;color:var(--t3);font-size:.92rem;margin-top:14px}
.hero__trust b{color:var(--g);font-weight:700}
.g-text{color:var(--g)}

.bn-hero{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--g);margin-bottom:18px;box-shadow:0 18px 48px rgba(0,0,0,.5)}
.bn-hero img{width:100%;display:block;aspect-ratio: 2692/981; object-fit:cover}
.bn-hero__copy{position:absolute;inset:auto 0 0 0;padding:22px 28px;background:linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.4) 70%, transparent 100%)}
.bn-hero__copy h2{margin:0 0 6px;font-size:clamp(1.2rem,2.6vw,2rem)}
.bn-hero__copy p{color:var(--t2);margin:0 0 12px;max-width:760px}
.bn-hero__cta{display:inline-block;background:var(--g);color:#000;font-weight:800;padding:11px 22px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}

/* Offer panel */
.offer{background:var(--panel);border:1px solid var(--g);border-radius:10px;padding:24px 22px;position:relative;box-shadow:0 14px 38px rgba(0,0,0,.5)}
.offer__ribbon{position:absolute;top:-12px;left:22px;background:var(--g);color:#000;padding:5px 12px;border-radius:4px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.offer__big{font-family:'Playfair Display',serif;font-weight:900;font-size:2.6rem;line-height:1;margin:8px 0 4px;letter-spacing:-.02em;color:var(--g)}
.offer__big small{display:block;font-size:.78rem;color:var(--t3);font-weight:600;letter-spacing:.05em;margin-top:4px;font-family:'Raleway',sans-serif}
.offer__sub{color:var(--t2);font-size:.96rem;margin:6px 0 14px}
.offer__row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.offer__row b{display:block;color:var(--t1);font-size:.98rem}
.offer__row span{display:block;color:var(--t3);font-size:.86rem;margin-top:2px}
.dot{width:30px;height:30px;border-radius:50%;background:var(--g);color:#000;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.terms{font-size:.74rem;color:var(--t3);margin-top:14px}

/* Stats */
.stats{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stats__grid > div{display:flex;flex-direction:column}
.stats__grid b, .stats__grid .g-text{font-size:1.9rem;font-weight:900;line-height:1;color:var(--g);letter-spacing:-.02em;font-family:'Playfair Display',serif}
.stats__grid span:last-child{color:var(--t3);font-size:.88rem;margin-top:6px;letter-spacing:.04em}

/* TOC */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.toc h4{margin:0 0 12px;color:var(--g);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em}
.toc__list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px;padding:0;list-style:none;margin:0}
.toc__list a{color:var(--t2);font-size:.94rem}
.toc__list a:hover{color:var(--g)}

/* Game lobby */
.game-bar{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:transparent;color:var(--t2);border:1px solid var(--line);padding:8px 18px;border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .15s ease}
.chip:hover{border-color:var(--g);color:var(--g)}
.chip.is-active{background:var(--g);color:#000;border-color:var(--g)}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;margin-top:22px}
.tile{background:var(--panel);border-radius:8px;overflow:hidden;border:1px solid var(--line);transition:all .2s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--g);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.tile__media{position:relative;overflow:hidden;aspect-ratio:224/308;background:#000}
.tile__media img{width:100%;height:100%;object-fit:cover}
.tile__cat{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.9);color:var(--g);padding:3px 10px;border-radius:4px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--g);z-index:2}
.tile__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.95) 100%);opacity:0;transition:opacity .2s ease;padding:14px}
.tile:hover .tile__overlay{opacity:1}
.tile__name{padding:10px 12px;font-weight:700;font-size:.92rem;color:var(--t1)}
.tile__provider{display:block;color:var(--t3);font-size:.78rem;font-weight:500;margin-top:2px}
.is-hidden{display:none}
.is-visible{display:block}
.more-btn{display:block;margin:28px auto 0}

/* Wide banners */
.bn-wide{position:relative;border-radius:10px;overflow:hidden;margin:26px 0;border:1px solid var(--g)}
.bn-wide img{width:100%;display:block}
.bn-wide__copy{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, transparent 100%)}
.bn-wide__copy .inner{max-width:560px;padding:26px 32px}
.bn-wide__copy h3{color:var(--t1);font-size:clamp(1.2rem,2vw,1.65rem);margin:0 0 6px}
.bn-wide__copy p{color:var(--t2);margin:0 0 14px}
.bn-wide__cta{display:inline-block;background:var(--g);color:#000;font-weight:800;padding:11px 22px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}

.bn-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.bn-strip a{position:relative;border-radius:8px;overflow:hidden;display:block;border:1px solid var(--line)}
.bn-strip img{width:100%;display:block;aspect-ratio: 16/7; object-fit:cover}
.bn-strip .lbl{position:absolute;left:14px;bottom:12px;color:#fff;background:rgba(0,0,0,.78);border:1px solid var(--g);padding:6px 12px;border-radius:6px;font-weight:800;font-size:.92rem;line-height:1.1}
.bn-strip .lbl small{display:block;font-size:.68rem;color:var(--g);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:4px}

/* Promo grid */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:22px}
.promo{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;gap:14px;transition:border-color .15s}
.promo:hover{border-color:var(--g)}
.promo__day{flex-shrink:0;text-align:center;background:#000;border:1px solid var(--g);border-radius:8px;padding:10px 14px;color:var(--g);font-weight:900;font-size:1.25rem;letter-spacing:-.01em;line-height:1.1;font-family:'Playfair Display',serif}
.promo__day span{display:block;color:var(--t3);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;font-family:'Raleway',sans-serif}
.promo .val{display:inline-block;color:var(--g);font-weight:800;font-size:.96rem;margin:2px 0 6px}

/* Types/cards */
.types-grid,.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.type-card,.live-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.type-card h4,.live-card h4{color:var(--g);margin:0 0 8px}
.type-card p,.live-card p{color:var(--t2);font-size:.95rem;margin:0}
.type-card ul{padding-left:20px;margin:6px 0 0;color:var(--t2)}
.type-card ul li{margin-bottom:8px;font-size:.95rem}

/* VIP */
.vip{background:linear-gradient(135deg,var(--panel) 0%, #000 100%);border:1px solid var(--g);border-radius:12px;padding:30px}
.vip h3{margin-top:0}
.vip__track{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:18px 0 14px}
.vip__tier{background:#000;border:1px solid var(--line);border-radius:6px;padding:12px 6px;text-align:center}
.vip__tier b{display:block;color:var(--g);font-size:.86rem;letter-spacing:.02em}
.vip__tier span{display:block;color:var(--t3);font-size:.72rem;font-weight:700;margin-top:4px}
.vip__note{background:var(--g-soft);border:1px dashed var(--g);border-radius:8px;padding:14px;color:var(--t1);font-size:.95rem;margin-top:10px}
.vip__note b{color:var(--g)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;position:relative}
.step__n{display:inline-block;background:var(--g);color:#000;font-weight:900;width:34px;height:34px;border-radius:50%;text-align:center;line-height:34px;margin-bottom:8px}
.step h4{margin:0 0 6px}
.step p{color:var(--t2);font-size:.93rem;margin:0}

/* Tables */
table.data{width:100%;border-collapse:collapse;margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
table.data thead th{background:#000;color:var(--g);font-weight:700;letter-spacing:.04em}
table.data td b{color:var(--t1)}

.logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:18px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.logos img{max-height:36px;width:auto;filter:brightness(1.08) contrast(1.1)}

/* Studios */
.studios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.studio{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;gap:14px;align-items:flex-start}
.studio__logo{flex-shrink:0;width:64px;height:64px;background:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.studio__logo img{max-width:46px;max-height:46px}
.studio h4{margin:0 0 4px;color:var(--t1)}
.studio p{color:var(--t2);font-size:.92rem;margin:0}
.prov-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;padding:18px;background:#000;border:1px solid var(--line);border-radius:10px;justify-content:center}
.prov-strip .item img{max-height:36px;filter:brightness(1.08)}

/* Releases */
.releases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.release{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.release img{width:100%;aspect-ratio:16/9;object-fit:cover}
.release__body{padding:14px}
.release__body h4{margin:0 0 4px;font-size:1rem}
.release__body p{color:var(--t3);font-size:.86rem;margin:0}
.badge{display:inline-block;background:var(--green);color:#000;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:4px;margin-bottom:8px}

/* Support */
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.support{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.support h4{color:var(--g);margin:0 0 8px}
.support .channel{display:block;color:var(--t1);font-weight:700;margin-bottom:4px}
.support .hours{display:block;color:var(--t3);font-size:.88rem}

/* Glossary */
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:18px}
.gloss{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.gloss b{display:block;color:var(--g);margin-bottom:4px;font-size:1.02rem}
.gloss p{color:var(--t2);font-size:.92rem;margin:0}

/* FAQ */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--t1);list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1rem}
.faq summary::after{content:'+';color:var(--g);font-weight:900;font-size:1.4rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 18px;color:var(--t2);font-size:.96rem;border-top:1px solid var(--line);padding-top:14px}

/* Terms list */
.terms-list{padding-left:20px;margin:14px 0;color:var(--t2)}
.terms-list li{margin-bottom:10px;line-height:1.6}
.terms-list li b{color:var(--t1)}

/* Footer */
footer{background:#000;padding:46px 0 24px;border-top:1px solid var(--g)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.f-grid h5{color:var(--g);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.f-grid ul{list-style:none;padding:0;margin:0}
.f-grid ul li{margin-bottom:8px}
.f-grid ul a{color:var(--t2);font-size:.94rem}
.f-grid ul a:hover{color:var(--g)}
.f-pay{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;align-items:center}
.f-pay img{max-height:24px}
.f-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);margin-top:32px;padding-top:18px;color:var(--t3);font-size:.86rem}
.f-bottom .age b{color:var(--g);font-size:1rem;margin-right:6px}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.is-open{display:flex}
.modal__box{background:var(--panel);border:1px solid var(--g);border-radius:10px;max-width:980px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
.modal__bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#000}
.modal__close{background:transparent;border:none;color:var(--t1);font-size:1.5rem;cursor:pointer;line-height:1}
.modal__frame{flex:1;background:#000;min-height:480px}
.modal__frame iframe{width:100%;height:100%;min-height:480px;border:none}
.modal__cta{padding:14px 18px;background:#000;text-align:center}

/* Responsive */
@media (max-width:960px){
  .hero__grid,.f-grid{grid-template-columns:1fr}
  .toc__list{grid-template-columns:repeat(2,1fr)}
  .vip__track{grid-template-columns:repeat(5,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .bn-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .top nav a:not(.btn){display:none}
  .top nav{gap:8px}
  .section__head{flex-direction:column;align-items:flex-start}
  .vip__track{grid-template-columns:repeat(2,1fr)}
  .game-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .toc__list{grid-template-columns:1fr}
  .promo{flex-direction:column}
  .stats__grid{grid-template-columns:1fr 1fr}
  .bn-strip{grid-template-columns:1fr}
  .brand-logo .wordmark{font-size:1.3rem}
}

/* ============================================================
   NO-OVERLAP SAFETY LAYER (appended)
   ------------------------------------------------------------
   Guards against text overlapping when images fail to load,
   when the brand wordmark and image both render at once,
   when the sticky header collides with anchored scroll targets,
   and when long FAQ summaries clip the +/- chevron.
   ============================================================ */

/* Brand logo: show ONLY image or wordmark, never both.
   The .is-fallback class is toggled by JS when the image errors. */
.brand-logo{gap:0}
.brand-logo img{display:inline-block;max-height:42px;width:auto}
.brand-logo .wordmark{display:none}
.brand-logo.is-fallback img{display:none !important}
.brand-logo.is-fallback .wordmark{display:inline-block !important}

/* Reserve banner height when the underlying image hasn't loaded so the
   absolutely-positioned copy doesn't crash into the section below it. */
.bn-hero{min-height:280px;background:linear-gradient(135deg,#2a0f3d 0%,#0b0b0b 100%)}
.bn-hero img{background:#0b0b0b}
.bn-wide{min-height:200px;background:linear-gradient(135deg,#201e25 0%,#0b0b0b 100%)}
.bn-strip a{min-height:120px;background:linear-gradient(135deg,#201e25 0%,#0b0b0b 100%)}

/* Stronger gradient under hero/banner copy so the text never goes
   unreadable on a missing-image background. */
.bn-hero__copy{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.15) 100%)}
.bn-wide__copy{background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%)}

/* Game tile placeholder so the overlay button row never lands on bare bg */
.tile__media{background:linear-gradient(135deg,#201e25 0%,#0b0b0b 100%)}

/* Studio / payment / provider logo placeholder swatches */
.studio__logo{background:#0b0b0b}
.studio__logo img,.logos img,.f-pay img,.prov-strip img{background:rgba(255,196,46,.04)}

/* Sticky header — keep a real backdrop so anchored sections that scroll
   under it never bleed through. */
.top{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,11,11,.96)}

/* Anchored scroll positioning: jumping to #section now lands BELOW the
   sticky header instead of underneath it. */
section[id]{scroll-margin-top:84px}

/* FAQ chevron never collides with long summary text. */
.faq details{position:relative}
.faq summary{position:relative;padding:14px 56px 14px 18px;line-height:1.4}
.faq summary::after{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}

/* TOC long links wrap cleanly rather than clipping their neighbour */
.toc__list a{display:inline-block;line-height:1.45;padding:2px 0}

/* Card heights match within a row so adjacent text doesn't end up at
   different baselines that look like a layout glitch. */
.type-card,.live-card,.support,.gloss,.studio,.promo,.step,.tile{min-height:auto}
.types-grid > *,.live-grid > *,.support-grid > *,.gloss-grid > *,.studios-grid > *,.promo-grid > *,.steps > *{display:flex;flex-direction:column}

/* Hero CTA button row wraps before crashing into the offer panel */
.hero__cta,.hero__trust{flex-wrap:wrap}

/* Ticker bar separates from sticky header cleanly */
.ticker{position:relative;z-index:31}

/* Mobile: brand logo shrinks and nav buttons don't overflow */
@media (max-width:640px){
  .top__row{gap:8px;flex-wrap:wrap}
  .brand-logo img{max-height:32px}
  .brand-logo .wordmark{font-size:1.2rem}
  .ticker{font-size:.82rem;padding:7px 10px}
}

/* Offer panel ribbon stays inside the gold border, never clips header */
.offer{margin-top:14px}

/* Stats: collapse to 2-up on tablet before 1-up on mobile (no overflow) */
@media (max-width:760px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
}

/* Tables stay scrollable on narrow screens instead of overflowing */
@media (max-width:640px){
  table.data{display:block;overflow-x:auto;white-space:nowrap}
}