/* ==========================================================================
   EU303 — Situs Slot Gacor Online Indonesia
   Palette lifted verbatim from the money site's app.css :root tokens.
   Layout follows Indonesian slot-lobby conventions (marquee, icon category
   rail, bare full-bleed banner, payment wall, bottom tab bar,
   floating contact rail) with the long-form SEO prose on an inset paper band.
   ========================================================================== */

:root {
  /* --- brand, all verified in tentusaja303.com/css/app.css --------------- */
  --eu-red: #ff0031;              /* --danger / --red                       */
  --eu-red-deep: #b00022;         /* .text-red-gradient start               */
  --eu-gold: #ffc929;             /* --primary                              */
  --eu-gold-hi: #ffed4a;          /* --warning / --yellow                   */
  --eu-gold-warm: #ff8f11;        /* .bg-yellow-gradient end                */
  --eu-amber: #fa8b0d;            /* .text-theme-yellow (dark grounds only) */
  --eu-on-gold: #000;             /* real .btn-primary colour               */
  --eu-ink: #292421;              /* --floating-bg-color / .bg-dark-theme   */
  --eu-ink-900: #231f20;          /* .content-page-bg                       */
  --eu-ink-800: #241e20;          /* --form-bg-main                         */
  --eu-ink-700: #3f3a37;          /* .bg-brown                              */
  --eu-paper: #f3f5f6;            /* --seo-content-bg                       */
  --eu-paper-2: #fff;
  --eu-muted: #505050;            /* --main-font-color, 7.4:1 on paper      */

  /* --- derived, chosen for WCAG AA rather than copied ------------------- */
  --eu-link: #8a5a00;             /* 5.4:1 on paper (amber is only 2.2:1)   */
  --eu-link-dark: var(--eu-gold); /* 10.7:1 on ink                          */
  --eu-ok-ink: #0b6b0b;           /* on the light plate below              */
  --eu-ok-plate: #dff3df;
  --eu-hair: rgba(255, 201, 41, .22);
  --eu-hair-2: rgba(255, 255, 255, .09);
  --eu-scrim-bg: rgba(0, 0, 0, .62);

  --eu-grad-gold: linear-gradient(90deg, #ffc929 0%, #ff8f11 100%);
  --eu-grad-btn: linear-gradient(90deg, #ffc929 0%, #ffed4a 100%);
  --eu-grad-ink: linear-gradient(180deg, #3f3a37 0%, #231f20 100%);

  --eu-wrap: 1180px;
  --eu-measure: 72ch;
  --eu-r: 10px;
  --eu-r-lg: 14px;
  --eu-shadow: 0 6px 22px rgba(0, 0, 0, .42);

  /* real height incl. the iOS home-indicator inset, so every offset agrees */
  --eu-tab-h: calc(58px + env(safe-area-inset-bottom, 0px));
  --eu-head-h: 119px;             /* no-JS fallback: 56 brand row + 63 rail */

  --eu-z-head: 1000;
  --eu-z-tab: 1001;
  --eu-z-top: 1120;
  --eu-z-frail: 1150;
  --eu-z-scrim: 1200;
  --eu-z-drawer: 1201;

  --eu-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --eu-font-cond: "Roboto Condensed", Roboto, "Arial Narrow", var(--eu-font);
}

@media (min-width: 992px) { :root { --eu-head-h: 64px; } }

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

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

body {
  margin: 0;
  font-family: var(--eu-font);
  font-size: 16.5px;
  line-height: 1.72;
  color: #f0eae4;
  background: var(--eu-ink);
  overflow-wrap: break-word;
}

/* Mobile-first, and only ONE bottom reservation for the fixed tab bar.
   Declared as the BASE (not inside a max-width query) so no fractional
   viewport width can fall between the breakpoints and lose it. */
body { padding-bottom: var(--eu-tab-h); }

body.eu-lock { overflow: hidden; }   /* no touch-action: it breaks drawer scroll */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--eu-link-dark); text-decoration: none; }
a:hover { color: var(--eu-gold-hi); text-decoration: underline; }
strong { font-weight: 700; color: #fff; }

:focus-visible {
  outline: 3px solid var(--eu-gold-hi);
  outline-offset: 2px;
  border-radius: 3px;
}

.eu-wrap { width: 100%; max-width: var(--eu-wrap); margin-inline: auto; padding-inline: 14px; }
.eu-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.eu-skip {
  position: absolute; left: 10px; top: -70px; z-index: 1300;
  background: var(--eu-grad-btn); color: var(--eu-on-gold); font-weight: 700;
  padding: 11px 18px; border-radius: 0 0 var(--eu-r) var(--eu-r); transition: top .16s;
}
.eu-skip:focus { top: 0; text-decoration: none; }

/* ---------------------------------------------------------------- buttons */
.eu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--eu-font); font-size: 14.5px; font-weight: 700;
  letter-spacing: .3px; text-align: center; white-space: nowrap;
  transition: filter .16s, box-shadow .16s;
}
.eu-btn:hover { text-decoration: none; filter: brightness(1.07); }
.eu-btn--gold {
  background: var(--eu-grad-btn); color: var(--eu-on-gold);
  box-shadow: 0 4px 14px rgba(255, 201, 41, .3);
}
.eu-btn--gold:hover { color: var(--eu-on-gold); }
.eu-btn--wire {
  background: transparent; color: var(--eu-gold);
  border: 1.6px solid var(--eu-gold);
}
.eu-btn--wire:hover { background: rgba(255, 201, 41, .12); color: var(--eu-gold-hi); }
.eu-btn--red { background: var(--eu-red-deep); color: #fff; }
.eu-btn--red:hover { color: #fff; }
.eu-btn--xs { padding: 7px 13px; font-size: 12.6px; }
.eu-btn--lg { padding: 14px 26px; font-size: 16px; }
.eu-btn--full { width: 100%; }

/* --------------------------------------------------------------- marquee */
.eu-marquee {
  background: var(--eu-ink-900);
  border-bottom: 1px solid var(--eu-hair);
  font-size: 12.4px; color: var(--eu-gold-hi);
}
.eu-marquee .eu-wrap { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.eu-marquee__vp { flex: 1; min-width: 0; overflow: hidden; }
.eu-marquee__track {
  display: inline-flex; gap: 34px; white-space: nowrap;
  will-change: transform; animation: eu-slide 34s linear infinite;
}
.eu-marquee__track strong { color: var(--eu-gold); font-weight: 700; }
@keyframes eu-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eu-clock {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; letter-spacing: .4px;
  color: #cdbfae; font-size: 12px;
}

/* ---------------------------------------------------------------- header */
.eu-head {
  position: sticky; top: 0; z-index: var(--eu-z-head);
  background: var(--eu-ink-900);
  border-bottom: 2px solid transparent;
  border-image: var(--eu-grad-gold) 1;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .5);
}

/* brand + category nav + auth, all on one row from 992px up.
   Below that the nav wraps to its own full-width line via flex-wrap. */
.eu-head__mid { border-bottom: 1px solid var(--eu-hair-2); }
.eu-head__mid .eu-wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; min-height: 56px;
}
.eu-logo {
  display: flex; align-items: center;
  flex: 1 1 auto; justify-content: center;
  padding-right: 52px;            /* burger 42 + gap 10, so it truly centres */
}
.eu-logo img { width: auto; height: 30px; }
/* hidden by default: on narrow viewports .eu-cta-m under the banner is the
   only Masuk/Daftar pair. Revealed in the >=992px block, never the reverse. */
.eu-head__auth { margin-left: auto; display: none; align-items: center; gap: 7px; order: 1; }
/* matched widths so Masuk/Daftar read as a deliberate pair, not two odd pills */
.eu-head__auth .eu-btn {
  min-width: 74px; padding: 8px 14px; font-size: 12.8px; letter-spacing: .2px;
}
.eu-head__nav {
  order: 2; flex: 1 0 100%;          /* own line on phones */
  min-width: 0;
  margin-inline: -14px;              /* bleed to the viewport edges */
  border-top: 1px solid var(--eu-hair-2);
  background: var(--eu-ink-800);
}

.eu-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 42px; height: 38px; padding: 0 9px; flex: 0 0 auto;
  background: rgba(255, 201, 41, .1); border: 1px solid var(--eu-hair);
  border-radius: 9px; cursor: pointer;
}
.eu-burger span { display: block; height: 2.4px; border-radius: 2px; background: var(--eu-gold); }

/* category icon rail */
.eu-catrail {
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eu-catrail::-webkit-scrollbar { display: none; }
.eu-catrail li { flex: 0 0 auto; scroll-snap-align: start; }
.eu-catrail a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 78px; min-height: 62px; padding: 7px 4px;
  color: #cdbfae; font-size: 10.6px; font-weight: 600; line-height: 1.2;
  text-align: center; letter-spacing: .2px;
  border-bottom: 3px solid transparent;
}
.eu-catrail a:hover { color: var(--eu-gold-hi); text-decoration: none; background: rgba(255, 201, 41, .07); }
.eu-catrail .eu-ico { width: 24px; height: 24px; }
.eu-catrail a[aria-current="page"] {
  color: var(--eu-gold); background: rgba(255, 201, 41, .1);
  border-bottom-color: var(--eu-red);
}

/* ------------------------------------------------------- drawer + scrim */
.eu-scrim {
  position: fixed; inset: 0; z-index: var(--eu-z-scrim);
  background: var(--eu-scrim-bg);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.eu-scrim.is-on { opacity: 1; visibility: visible; }

.eu-drawer {
  position: fixed; top: 0; left: 0; z-index: var(--eu-z-drawer);
  width: min(300px, 86vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--eu-ink);
  border-right: 2px solid transparent; border-image: var(--eu-grad-gold) 1;
  transform: translateX(-100%); transition: transform .2s ease, visibility .2s;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;               /* removes focusability while closed */
}
.eu-drawer.is-on { transform: translateX(0); visibility: visible; }
.eu-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--eu-hair);
}
.eu-drawer__top img { height: 27px; width: auto; }
.eu-drawer__x {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--eu-hair);
  border-radius: 9px; color: var(--eu-gold); font-size: 19px; line-height: 1; cursor: pointer;
}
.eu-drawer nav ul { margin: 0; padding: 8px 10px; list-style: none; }
.eu-drawer nav a {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 10px 12px; border-radius: 9px;
  color: #ece4dc; font-weight: 600; font-size: 14.8px;
}
.eu-drawer nav a:hover { background: var(--eu-ink-700); color: #fff; text-decoration: none; }
.eu-drawer nav a[aria-current="page"] { color: var(--eu-gold); background: rgba(255, 201, 41, .12); }
.eu-drawer nav .eu-ico { width: 19px; height: 19px; flex: 0 0 auto; }
.eu-drawer__foot {
  margin-top: auto; padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--eu-hair); display: grid; gap: 8px;
}
.eu-drawer__foot .eu-row { font-size: 13.2px; color: #c9bbac; }
.eu-drawer__foot .eu-row a { color: var(--eu-gold); }
.eu-drawer__note { font-size: 11.6px; color: #8f8378; text-align: center; margin: 2px 0 0; }

/* ---------------------------------------------------------------- banner */
.eu-banner { background: var(--eu-ink-900); }
.eu-banner img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center;
}

/* mobile-only auth pair directly under the banner */
.eu-cta-m {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  padding: 12px 14px; background: var(--eu-ink-900);
  border-bottom: 1px solid var(--eu-hair);
}
.eu-cta-m .eu-btn { width: 100%; }

/* ---------------------------------------------------------------- ticker */
.eu-ticker {
  background: linear-gradient(90deg, var(--eu-red-deep), #8c001b);
  border-block: 1px solid rgba(255, 201, 41, .3);
  padding: 16px 0;
}
.eu-ticker__facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
/* each feature is its own panel; the dark plate also lifts white text well
   clear of AA on the red ground */
.eu-fact {
  padding: 11px 12px; text-align: center;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 201, 41, .4);
  border-radius: var(--eu-r);
}
.eu-fact strong {
  display: block; color: var(--eu-gold-hi);
  font-size: 14px; line-height: 1.3;
}
.eu-fact span {
  display: block; margin-top: 3px; color: #fff;
  font-size: 12.4px; line-height: 1.4;
}

/* ------------------------------------------------------- section titles */
/* NOTE: heading-free on purpose — the only H1/H2/H3 belong to the article. */
.eu-sec { padding: 22px 0; }
.eu-sec__t, .eu-provwall__t {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--eu-font-cond); font-size: 15.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--eu-gold);
}
.eu-sec__t::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 20px; border-radius: 3px;
  background: var(--eu-grad-gold);
}
.eu-sec__t .eu-more { margin-left: auto; }

/* ----------------------------------------------------------- game tiles */
.eu-lobby { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.eu-lobby--rail {
  display: flex; gap: 11px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.eu-lobby--rail .eu-tile { flex: 0 0 172px; scroll-snap-align: start; }

.eu-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--eu-grad-ink);
  border: 1px solid var(--eu-hair); border-radius: var(--eu-r);
  border-top: 3px solid var(--eu-gold);
  transition: transform .15s, box-shadow .15s;
}
.eu-tile:hover { transform: translateY(-3px); box-shadow: var(--eu-shadow); }
.eu-tile__art { position: relative; margin: 0; background: #120c0d; }
.eu-tile__art img { width: 100%; aspect-ratio: 325 / 250; object-fit: cover; }
.eu-tile__ribbon {
  position: absolute; top: 7px; left: 7px;
  padding: 3px 9px; border-radius: 99px;
  background: var(--eu-red-deep); color: #fff;          /* 7.4:1 for 10px text */
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
}
.eu-tile__name {
  margin: 0; padding: 9px 10px 4px; font-size: 13.6px; font-weight: 700;
  color: #fff; line-height: 1.3;
}
/* RTP meter — mirrors the money site's own progress-bar + percentage board */
.eu-tile__rtp { margin-top: auto; padding: 0 10px 11px; }
.eu-tile__bar {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .42); border: 1px solid var(--eu-hair-2);
}
.eu-tile__bar span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--eu-grad-gold);
}
.eu-tile__pct {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin: 6px 0 0;
}
.eu-tile__pct span {
  font-family: var(--eu-font-cond); font-size: 10.4px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #bdae9e;
}
.eu-tile__pct strong {
  font-size: 14.2px; font-weight: 700; color: var(--eu-gold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ crumb ---- */
.eu-crumb { background: var(--eu-ink-800); border-bottom: 1px solid var(--eu-hair-2); font-size: 12.8px; }
.eu-crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0; padding: 9px 0; list-style: none;
}
.eu-crumb li { display: flex; align-items: center; gap: 7px; color: #b6a898; }
.eu-crumb li + li::before { content: "\203A"; color: var(--eu-gold); }
.eu-crumb a { color: #cdbfae; }
.eu-crumb [aria-current="page"] { color: var(--eu-gold); font-weight: 600; }

/* ================= the light paper band that carries ALL prose ========== */
.eu-paper {
  background: var(--eu-paper);
  border-top: 4px solid transparent; border-image: var(--eu-grad-gold) 1;
  color: #292421;
  padding: 26px 0 34px;
}
/* minmax(0,1fr): an implicit auto column would size to the article's 72ch
   max-width and overflow narrow phones instead of shrinking */
.eu-paper__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.eu-article {
  /* min() so a wide scrolling table's min-content can never push the column
     past the viewport — 100% wins on phones, the reading measure on desktop */
  max-width: min(var(--eu-measure), 100%);
  margin-inline: auto;              /* no dead gutter between 992 and 1180 */
  min-width: 0;
}
.eu-article > :first-child { margin-top: 0; }

.eu-article h1 {
  margin: 0 0 14px; font-size: clamp(1.55rem, 5.2vw, 2.35rem);
  line-height: 1.2; font-weight: 700; letter-spacing: -.3px; color: #1d1a18;
}
.eu-article h2 {
  position: relative; clear: both;   /* never wrap into a floated figure */
  margin: 38px 0 13px; padding-bottom: 9px;
  font-size: clamp(1.24rem, 3.5vw, 1.6rem); line-height: 1.3;
  font-weight: 700; color: #1d1a18;
}
.eu-article h2::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  margin-right: 9px; vertical-align: baseline;
  background: linear-gradient(135deg, var(--eu-red), var(--eu-red-deep));
  transform: rotate(45deg);
}
.eu-article h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 62px; height: 4px; border-radius: 2px; background: var(--eu-grad-gold);
}
.eu-article h3 {
  clear: both; margin: 26px 0 9px;
  font-family: var(--eu-font-cond);
  font-size: clamp(1.02rem, 2.7vw, 1.16rem); line-height: 1.36;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #8a5a00;
}
.eu-article p { margin: 0 0 15px; }
.eu-article a { color: var(--eu-link); text-decoration: underline; text-underline-offset: 2px; }
.eu-article a:hover { color: var(--eu-red-deep); }
.eu-article strong { color: #1d1a18; }
.eu-article h2, .eu-article h3 { scroll-margin-top: calc(var(--eu-head-h) + 14px); }

.eu-ul, .eu-ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.eu-ul > li, .eu-ol > li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.eu-ul > li::before {
  content: ""; position: absolute; left: 7px; top: .62em;
  width: 9px; height: 9px; background: var(--eu-grad-gold);
  transform: rotate(45deg); border-radius: 1px;
}
.eu-ol { counter-reset: eu-n; }
.eu-ol > li { counter-increment: eu-n; padding-left: 38px; }
.eu-ol > li::before {
  content: counter(eu-n); position: absolute; left: 0; top: .06em;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
  background: var(--eu-red-deep); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}

.eu-steps { counter-reset: eu-s; clear: both; margin: 20px 0; padding: 0; list-style: none; }
.eu-steps li { counter-increment: eu-s; position: relative; padding: 0 0 19px 48px; margin: 0; }
.eu-steps li::before {
  content: counter(eu-s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: var(--eu-grad-gold); color: var(--eu-on-gold); font-weight: 700; font-size: 14.5px;
}
.eu-steps li::after {
  content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 2px;
  width: 2px; background: rgba(0, 0, 0, .14);
}
.eu-steps li:last-child { padding-bottom: 0; }
.eu-steps li:last-child::after { display: none; }

.eu-note {
  clear: both; border-left: 4px solid var(--eu-gold);
  background: #fff8e4; border-radius: 0 var(--eu-r) var(--eu-r) 0;
  padding: 13px 16px; margin: 20px 0;
}
.eu-note p:last-child { margin-bottom: 0; }

.eu-inset {
  margin: 6px 0 16px; border-radius: var(--eu-r); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .16); background: #fff;
}
.eu-inset img { width: 100%; }
.eu-inset figcaption { padding: 7px 10px; font-size: 12.4px; color: var(--eu-muted); }

/* tables: min-width is set per-table inline from its column count */
.eu-table {
  clear: both; overflow-x: auto; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%;    /* keep the scroller off the layout width */
  margin: 20px 0 6px; border: 1px solid rgba(0, 0, 0, .16);
  border-radius: var(--eu-r); background: #fff;
}
.eu-table table { width: 100%; border-collapse: collapse; font-size: 14.6px; }
.eu-table caption { caption-side: top; padding: 11px 13px 0; color: var(--eu-muted); font-size: 12.8px; text-align: left; }
.eu-table th, .eu-table td {
  padding: 11px 13px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.eu-table thead th {
  background: var(--eu-red-deep); color: #fff;        /* 7.4:1, not #ff0031 */
  font-size: 12.6px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap;
}
.eu-table tbody th { color: #1d1a18; font-weight: 700; }
.eu-table tbody tr:nth-child(even) { background: #f7f8f9; }
.eu-table tbody tr:last-child th, .eu-table tbody tr:last-child td { border-bottom: 0; }
.eu-table__hint { font-size: 12.2px; color: var(--eu-muted); margin: 0 0 20px; }

/* FAQ */
.eu-faq { clear: both; margin: 18px 0 6px; display: grid; gap: 9px; }
.eu-faq details { background: #fff; border: 1px solid rgba(0, 0, 0, .16); border-radius: var(--eu-r); }
.eu-faq details[open] { border-color: var(--eu-gold); }
.eu-faq summary {
  position: relative;                /* the +/- marker anchors to THIS */
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 46px 13px 15px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; color: #1d1a18;
}
.eu-faq summary::-webkit-details-marker { display: none; }
.eu-faq summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.eu-faq summary::after {
  content: "+"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px;
  background: #f1e2bb; color: #6b4700; font-size: 17px; font-weight: 700; line-height: 1;
}
.eu-faq details[open] summary::after { content: "\2212"; background: var(--eu-gold); color: var(--eu-on-gold); }
.eu-faq summary:hover { color: var(--eu-link); }
.eu-faq__a { padding: 0 15px 14px; }
.eu-faq__a p { margin: 0; color: #34302c; }

/* table of contents — <details> below 1180, sticky aside above */
.eu-toc {
  margin: 0 0 22px; background: #fff; border: 1px solid rgba(0, 0, 0, .16);
  border-left: 4px solid var(--eu-gold); border-radius: 0 var(--eu-r) var(--eu-r) 0;
}
.eu-toc > summary {
  padding: 12px 15px; cursor: pointer; list-style: none;
  font-family: var(--eu-font-cond); font-weight: 700; font-size: 13.6px;
  letter-spacing: 1.4px; text-transform: uppercase; color: #6b4700;
}
.eu-toc > summary::-webkit-details-marker { display: none; }
.eu-toc ol { margin: 0; padding: 0 15px 14px 34px; font-size: 14.2px; }
.eu-toc li { margin-bottom: 6px; }
.eu-toc a { color: var(--eu-link); }

.eu-aside { display: none; }
.eu-aside__box {
  background: #fff; border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--eu-r); padding: 14px; margin-bottom: 14px;
}
.eu-aside__t {
  margin: 0 0 10px; font-family: var(--eu-font-cond); font-size: 13px;
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #6b4700;
}
.eu-aside__toc { counter-reset: eu-t; margin: 0; padding: 0; list-style: none; font-size: 13.8px; }
.eu-aside__toc li { counter-increment: eu-t; margin-bottom: 7px; padding-left: 22px; position: relative; line-height: 1.45; }
.eu-aside__toc li::before {
  content: counter(eu-t); position: absolute; left: 0; top: .18em;
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px;
  background: #f1e2bb; color: #6b4700; font-size: 10.4px; font-weight: 700; line-height: 1;
}
.eu-aside__toc a { color: #3a352f; }
.eu-aside__toc a:hover { color: var(--eu-link); }
.eu-aside__cta { background: var(--eu-grad-ink); border-color: var(--eu-hair); text-align: center; }
.eu-aside__cta p { margin: 0 0 11px; font-size: 13.4px; color: #d9cec2; }
.eu-aside__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.eu-aside__mini img { border-radius: 6px; border: 1px solid rgba(0, 0, 0, .14); }

/* ------------------------------------------------------- payment wall -- */
.eu-pay { background: var(--eu-ink-800); padding: 24px 0; }
.eu-paytype {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 10px;
  font-family: var(--eu-font-cond); font-size: 12.6px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: #cdbfae;
}
.eu-paytype::after { content: ""; flex: 1; height: 1px; background: var(--eu-hair-2); }
.eu-pay__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.eu-pay__it {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; background: #fff; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.eu-pay__it img { width: 100%; max-width: 84px; height: auto; }
.eu-pay__it span { font-size: 11.4px; font-weight: 600; color: #3a352f; text-align: center; line-height: 1.25; }
.eu-pay__badge {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 4px 8px; text-align: center;
  font-family: var(--eu-font-cond); font-size: 13px; font-weight: 700;
  letter-spacing: .8px; color: #3a352f;
}
.eu-status {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  background: var(--eu-ok-plate); color: var(--eu-ok-ink);   /* AA on plate */
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}

/* ------------------------------------------------------- provider wall - */
.eu-provwall { background: var(--eu-paper-2); color: #292421; padding: 24px 0; }
.eu-provwall__t { color: #6b4700; }
.eu-provwall__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px;
}
.eu-provwall__grid img {
  width: 100%; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .14);
}
.eu-provwall__links { display: flex; flex-wrap: wrap; gap: 7px; }
.eu-provwall__links a {
  padding: 5px 12px; border-radius: 99px; background: #f3f5f6;
  border: 1px solid rgba(0, 0, 0, .12); color: #3a352f;
  font-size: 12.6px; font-weight: 600;
}
.eu-provwall__links a:hover { background: var(--eu-gold); color: var(--eu-on-gold); text-decoration: none; }

/* --------------------------------------------------------- CTA band ---- */
.eu-ctaband {
  background: linear-gradient(135deg, var(--eu-red-deep), #7d0018);
  border-block: 1px solid rgba(255, 201, 41, .3);
  padding: 28px 0; text-align: center;
}
.eu-ctaband h2 {
  margin: 0 0 9px; font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  font-weight: 700; color: #fff;
  scroll-margin-top: calc(var(--eu-head-h) + 14px);
}
.eu-ctaband p { margin: 0 auto 16px; max-width: 620px; color: #ffe9c9; font-size: 15px; }
.eu-ctaband__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------- footer -- */
.eu-foot { background: var(--eu-ink-900); border-top: 2px solid transparent; border-image: var(--eu-grad-gold) 1; font-size: 14.4px; color: #bdae9e; }
.eu-foot__sep { border: 0; border-top: 1px solid var(--eu-hair-2); margin: 0; }
.eu-foot__b { padding: 22px 0; }
.eu-foot__ct {
  margin: 0 0 11px; font-family: var(--eu-font-cond); font-size: 13px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eu-gold);
}
.eu-foot img.eu-foot__logo { height: 32px; width: auto; margin-bottom: 11px; }
.eu-foot ul { margin: 0; padding: 0; list-style: none; }
.eu-foot li { margin-bottom: 8px; }
.eu-foot a { color: #cdbfae; }
.eu-foot a:hover { color: var(--eu-gold); }
.eu-foot p { margin: 0 0 11px; line-height: 1.66; }
.eu-foot__map { display: grid; gap: 22px; }
.eu-foot__provlinks { display: flex; flex-wrap: wrap; gap: 6px; }
.eu-foot__provlinks a {
  padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--eu-hair-2); font-size: 12.4px;
}
.eu-foot__comply { display: flex; gap: 13px; align-items: flex-start; }
.eu-badge18 {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--eu-gold); color: var(--eu-gold); font-weight: 700; font-size: 14px;
  flex: 0 0 auto;
}
.eu-foot__comply p { font-size: 13.4px; color: #a3968a; margin: 0; }
.eu-foot__end { padding: 15px 0 20px; font-size: 12.8px; color: #8f8378; text-align: center; }
.eu-foot__end p { margin: 0 0 4px; }

/* ------------------------------------------------------ bottom tab bar - */
.eu-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--eu-z-tab);
  display: flex; align-items: stretch;
  height: var(--eu-tab-h); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--eu-ink-900); border-top: 1px solid var(--eu-hair);
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.eu-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 5px 2px; color: #b6a898; font-size: 10.2px; font-weight: 600;
  line-height: 1.15; text-align: center;
}
.eu-tab:hover, .eu-tab:focus-visible { color: var(--eu-gold); text-decoration: none; }
.eu-tab .eu-ico { width: 21px; height: 21px; }
.eu-tab.is-on { color: var(--eu-gold); }
.eu-tab--cta { position: relative; }
.eu-tab--cta .eu-tab__pop {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%;
  background: var(--eu-grad-btn); color: var(--eu-on-gold);
  border: 3px solid var(--eu-ink-900);
  box-shadow: 0 0 0 2px var(--eu-red-deep);
}
.eu-tab--cta .eu-tab__pop .eu-ico { width: 23px; height: 23px; }
.eu-tab--cta span { margin-top: 30px; color: var(--eu-gold); }

/* --------------------------------------------------- floating left rail  */
.eu-frail {
  position: fixed; left: 0; top: 52%; transform: translateY(-50%);
  z-index: var(--eu-z-frail); display: flex; align-items: flex-start;
}
.eu-frail__col {
  display: grid; gap: 1px; overflow: hidden;
  border-radius: 0 var(--eu-r) var(--eu-r) 0;
  transition: max-width .28s ease, opacity .28s ease;
  max-width: 0; opacity: 0;
}
.eu-frail.is-open .eu-frail__col { max-width: 58px; opacity: 1; }
.eu-frail__b {
  width: 52px; height: 50px; display: grid; place-items: center;
  background: var(--eu-ink-900); border: 1px solid var(--eu-hair); border-left: 0;
  color: var(--eu-gold);
}
.eu-frail__b:hover { background: var(--eu-ink-700); color: var(--eu-gold-hi); }
.eu-frail__b .eu-ico { width: 22px; height: 22px; }
.eu-frail__tab {
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 13px 6px; border: 1px solid var(--eu-hair); border-left: 0;
  border-radius: 0 var(--eu-r) var(--eu-r) 0;
  background: var(--eu-grad-btn); color: var(--eu-on-gold);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer;
}

/* ------------------------------------------------------------- to top -- */
.eu-top {
  position: fixed; right: 13px; z-index: var(--eu-z-top);
  bottom: calc(var(--eu-tab-h) + 12px);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--eu-ink-900); border-radius: 50%;
  background: var(--eu-grad-btn); color: var(--eu-on-gold); cursor: pointer;
  box-shadow: var(--eu-shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.eu-top.is-on { opacity: 1; visibility: visible; transform: none; }
.eu-top svg { width: 20px; height: 20px; }

.eu-ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ====================================================== breakpoints ===== */
@media (min-width: 480px) {
  .eu-pay__grid { grid-template-columns: repeat(4, 1fr); }
  .eu-provwall__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 560px) {
  .eu-lobby { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .eu-ticker__facts { grid-template-columns: repeat(4, 1fr); }
  .eu-lobby { grid-template-columns: repeat(4, 1fr); }
  .eu-pay__grid { grid-template-columns: repeat(6, 1fr); }
  .eu-foot__map { grid-template-columns: repeat(3, 1fr); }
  /* the only float in the build, and everything structural clears it */
  .eu-inset { float: right; width: 240px; margin: 4px 0 14px 20px; }
}

@media (min-width: 992px) {
  body { font-size: 17px; }
  .eu-wrap { padding-inline: 22px; }
  .eu-head__mid .eu-wrap { min-height: 64px; flex-wrap: nowrap; }
  .eu-logo img { height: 36px; }
  .eu-burger, .eu-cta-m, .eu-tabbar { display: none; }
  /* nav joins the brand row. DOM order is logo -> auth -> nav, so order:
     is required to lay it out logo | nav (fills) | auth (right). */
  .eu-head__nav {
    order: 1; flex: 1 1 auto;
    margin-inline: 0; border-top: 0; background: none;
  }
  body { padding-bottom: 0; }
  .eu-head__auth { display: flex; order: 2; margin-left: 0; flex: 0 0 auto; }
  .eu-logo { flex: 0 0 auto; justify-content: flex-start; padding-right: 0; }
  .eu-head__auth .eu-btn { min-width: 80px; padding: 9px 16px; font-size: 13.2px; }
  .eu-catrail { justify-content: center; }
  .eu-catrail a { width: 100px; min-height: 54px; font-size: 11px; }
  .eu-catrail .eu-ico { width: 22px; height: 22px; }
  /* exactly the client artwork's own aspect, so desktop crops nothing */
  .eu-banner img { aspect-ratio: 3 / 1; }
  .eu-sec { padding: 30px 0; }
  .eu-paper { padding: 34px 0 44px; }
  .eu-top { bottom: 24px; right: 22px; width: 48px; height: 48px; }
}

@media (min-width: 1180px) {
  /* room to breathe once the wrap stops growing */
  .eu-catrail a { width: 116px; font-size: 11.6px; }
  .eu-catrail .eu-ico { width: 24px; height: 24px; }
  .eu-paper__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .eu-article { margin-inline: 0; }
  .eu-aside { display: block; position: sticky; top: calc(var(--eu-head-h) + 16px); }
  /* the sticky aside owns the ToC at this width — don't show it twice */
  .eu-toc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .eu-marquee__track { animation: none; }
  .eu-tile:hover { transform: none; }
}

@media print {
  .eu-marquee, .eu-head, .eu-drawer, .eu-scrim, .eu-tabbar, .eu-frail, .eu-top,
  .eu-banner, .eu-cta-m, .eu-ticker, .eu-lobby, .eu-ctaband, .eu-pay { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .eu-paper { background: #fff; }
}
