/* FXClock widget (FEC Tools No. 04) v1.3.0
 * Path: components/com_bonuses/css/fxclock.css
 * Scoped under .fxc-section. fec-edition tokens with the same fallbacks the
 * Comparator uses (fec_cmp.css), so the widget inherits the site theme.
 */

.fxc-section {
  --fxc-ink: var(--ink, #14110d);
  --fxc-mute: var(--ink-3, #5a5347);
  --fxc-mute2: var(--ink-4, #8a8275);
  --fxc-line: var(--rule, #d9d2c2);
  --fxc-line2: var(--rule-2, #e7e0d0);
  --fxc-card: var(--paper, #fdfbf6);
  --fxc-soft: var(--bg-2, #efeadf);
  --fxc-accent: var(--accent, #0b6b62);
  --fxc-amber: var(--warn, #a85a1c);
  --fxc-amber-soft: var(--warn-soft, #f1ddc0);
  --fxc-green: var(--verified, #1c7a4a);
  --fxc-green-soft: var(--verified-soft, #d6ead8);
  --fxc-brick: var(--danger, #9a2828);
  --fxc-radius: 10px;
  --fxc-radius-card: 14px;
  color: var(--fxc-ink);
}
.fxc-section, .fxc-section * { box-sizing: border-box; }

.fxc-section .fxc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .fxc-section .fxc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.fxc-section .fxc-label {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}
.fxc-section .fxc-muted { color: var(--fxc-mute2); font-size: 14px; }
.fxc-section .fxc-p { font-size: 16px; line-height: 1.45; margin: 12px 0 0; }
.fxc-section .fxc-brick { color: var(--fxc-brick); }
.fxc-section .fxc-green { color: var(--fxc-green); }

.fxc-section .fxc-big {
  font-size: 44px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 8px;
}
.fxc-section .fxc-big-empty { color: var(--fxc-mute2); }

/* distribution bars */
.fxc-section .fxc-bars { margin-top: 14px; }
.fxc-section .fxc-bar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin-top: 6px;
}
.fxc-section .fxc-bar-l { color: var(--fxc-mute); }
.fxc-section .fxc-bar-t { display: block; height: 9px; background: var(--fxc-soft); border-radius: 2px; overflow: hidden; }
.fxc-section .fxc-bar-f { display: block; height: 9px; background: var(--fxc-ink); border-radius: 2px; }
.fxc-section .fxc-bar-n { text-align: right; font-variant-numeric: tabular-nums; }

.fxc-section .fxc-counts { margin-top: 14px; font-size: 13px; color: var(--fxc-mute); line-height: 1.5; }

/* running list */
.fxc-section .fxc-list { list-style: none; margin: 0; padding: 0; }
.fxc-section .fxc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--fxc-line);
}
.fxc-section .fxc-row:first-child { border-top: 0; }
.fxc-section .fxc-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fxc-section .fxc-time {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fxc-section .fxc-row-sub { font-size: 13px; color: var(--fxc-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxc-section .fxc-row-mine .fxc-time { color: var(--fxc-green); }

.fxc-section .fxc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fxc-amber);
  flex: 0 0 auto;
  display: inline-block;
  animation: fxcpulse 1.6s ease-in-out infinite;
}
@keyframes fxcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .fxc-section .fxc-dot { animation: none; } }

.fxc-section .fxc-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--fxc-ink);
  border-radius: 4px;
  font-size: 12px; font-weight: 600;
  flex: 0 0 auto;
}
.fxc-section .fxc-grade-line { margin-top: 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }

.fxc-section .fxc-received {
  border: 0; cursor: pointer;
  background: var(--fxc-green-soft); color: var(--fxc-green);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: var(--fxc-radius);
}

/* actions + buttons: .btn/.btn-primary come from the edition stylesheet; the ghost
   variant is styled here explicitly (specificity above .fecx .btn) */
.fxc-section .fxc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.fxc-section .fxc-actions .fxc-btn { font: inherit; font-weight: 800; cursor: pointer; }
.fxc-section .fxc-actions .fxc-btn-ghost {
  background: transparent; color: var(--fxc-ink);
  border: 1px solid var(--fxc-ink); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; text-decoration: none;
}
.fxc-section .fxc-actions .fxc-btn-ghost:hover { background: var(--fxc-soft); }
.fxc-section .fxc-actions .fxc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* panel */
.fxc-section .fxc-panel { margin-top: 20px; }
.fxc-section .fxc-form {
  max-width: 560px;
  background: var(--fxc-card);
  border: 1px solid var(--fxc-line2);
  border-radius: var(--fxc-radius-card);
  padding: 20px;
}
.fxc-section .fxc-h { font-size: 24px; margin: 8px 0 4px; line-height: 1.15; }
.fxc-section .fxc-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fxc-mute); font: inherit; font-size: 14px;
}
.fxc-section .fxc-live-l { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fxc-mute); }
.fxc-section .fxc-q { margin-top: 18px; }
.fxc-section .fxc-q-l { font-size: 15px; font-weight: 600; }
.fxc-section .fxc-q-h { font-size: 13px; color: var(--fxc-mute); margin-top: 2px; }
.fxc-section .fxc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fxc-section .fxc-chip {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--fxc-line); border-radius: var(--fxc-radius);
  background: transparent; color: var(--fxc-ink);
}
.fxc-section .fxc-chip.is-on { background: var(--fxc-ink); color: var(--fxc-card); border-color: var(--fxc-ink); }
.fxc-section .fxc-input {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 10px; padding: 9px 11px;
  font: inherit; font-size: 14px;
  border: 1px solid var(--fxc-line); border-radius: var(--fxc-radius);
  background: var(--fxc-card); color: var(--fxc-ink);
  resize: none;
}
.fxc-section .fxc-email { margin-top: 10px; }
.fxc-section .fxc-check { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; cursor: pointer; }
.fxc-section .fxc-consent { margin-top: 14px; font-size: 13px; }
.fxc-section .fxc-count { text-align: right; font-size: 12px; color: var(--fxc-mute); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fxc-section .fxc-error { color: var(--fxc-brick); font-size: 14px; margin: 12px 0 0; }
.fxc-section .fxc-link { background: none; border: 0; padding: 0; margin-top: 12px; cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; }

/* receipt */
.fxc-section .fxc-receipt {
  background: var(--fxc-card);
  border: 1px solid var(--fxc-ink);
  border-top: 2px dashed var(--fxc-ink);
  border-radius: 4px;
  padding: 18px;
}
.fxc-section .fxc-receipt-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--fxc-line); font-size: 13px; color: var(--fxc-mute); }
.fxc-section .fxc-shift { margin-top: 16px; padding: 14px; background: var(--fxc-amber-soft); border-radius: var(--fxc-radius); font-size: 14px; font-variant-numeric: tabular-nums; }
.fxc-section .fxc-shift-t { font-weight: 600; font-size: 15px; margin-bottom: 2px; }

.fxc-section .fxc-foot { margin-top: 18px; font-size: 13px; color: var(--fxc-mute); line-height: 1.5; }

.fxc-section button:focus-visible, .fxc-section a:focus-visible, .fxc-section input:focus-visible, .fxc-section textarea:focus-visible {
  outline: 3px solid rgb(11 107 98 / .30); outline-offset: 2px;
}

/* ribbon under the stats strip (rendered by fxc_widget_render_ribbon) */
.fxc-ribbon {
  --fxc-ink: var(--ink, #14110d);
  --fxc-mute: var(--ink-3, #5a5347);
  --fxc-line: var(--rule-2, #e7e0d0);
  --fxc-card: var(--paper, #fdfbf6);
  --fxc-amber: var(--warn, #a85a1c);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 14px 0 22px; padding: 12px 16px;
  background: var(--fxc-card); border: 1px solid var(--fxc-line); border-radius: 14px;
  color: var(--fxc-ink); font-size: 14px; line-height: 1.4;
}
.fxc-ribbon, .fxc-ribbon * { box-sizing: border-box; }
.fxc-ribbon .fxc-ribbon-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fxc-amber); }
.fxc-ribbon .fxc-ribbon-eyebrow { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fxc-mute); flex: 0 0 auto; }
.fxc-ribbon .fxc-ribbon-text { flex: 1 1 320px; min-width: 0; }
.fxc-ribbon .fxc-ribbon-links { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.fxc-ribbon .fxc-ribbon-link {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--fxc-ink); color: var(--fxc-ink); text-decoration: none; font-weight: 800; font-size: 13px;
}
.fxc-ribbon .fxc-ribbon-link-primary { background: var(--fxc-ink); color: var(--fxc-card); }
.fxc-ribbon .fxc-ribbon-link:hover { opacity: .92; }
.fxc-ribbon a:focus-visible { outline: 3px solid rgb(11 107 98 / .30); outline-offset: 2px; }
@media (max-width: 640px) { .fxc-ribbon .fxc-ribbon-links { margin-left: 0; width: 100%; } .fxc-ribbon .fxc-ribbon-link { flex: 1 1 auto; text-align: center; } }

.fxc-section .fxc-foot-link { color: var(--fxc-ink); text-decoration: underline; text-underline-offset: 2px; }

/* review page chrome: stats strip cell and FXShield fourth cell (rendered by fec_common_lib when $vm[fxclock] is set) */
.fecx .cr-stats-row .stat-fxclock .v a { color: inherit; text-decoration: none; }
.fecx .cr-stats-row .stat-fxclock .v a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fecx .cr-fx-prg.cr-fx-prg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .fecx .cr-fx-prg.cr-fx-prg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fecx .cr-fx-prg-cell--fxclock .k small { font-weight: 400; opacity: .8; }
.fecx .cr-fx-prg-cell--fxclock .v a { color: inherit; text-decoration: none; }
.fecx .cr-fx-prg-cell--fxclock .v a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* homepage band (rendered by fxc_widget_render_home_band) */
.fxc-home {
  --fxc-ink: var(--ink, #14110d);
  --fxc-mute: var(--ink-3, #5a5347);
  --fxc-mute2: var(--ink-4, #8a8275);
  --fxc-line: var(--rule-2, #e7e0d0);
  --fxc-card: var(--paper, #fdfbf6);
  --fxc-soft: var(--bg-2, #efeadf);
  color: var(--fxc-ink);
}
.fxc-home, .fxc-home * { box-sizing: border-box; }
.fxc-home .fxc-home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 760px) { .fxc-home .fxc-home-tiles { grid-template-columns: minmax(0, 1fr); } }
.fxc-home .fxc-home-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; background: var(--fxc-card); border: 1px solid var(--fxc-line); border-radius: 14px;
  color: var(--fxc-ink); text-decoration: none;
}
.fxc-home .fxc-home-tile:hover { border-color: var(--fxc-ink); }
.fxc-home .fxc-home-tile-time { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fxc-home .fxc-home-tile-brand { font-size: 15px; font-weight: 600; margin-top: 8px; }
.fxc-home .fxc-home-tile-sub { font-size: 13px; color: var(--fxc-mute2); }
.fxc-home .fxc-home-tile .fxc-grade {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--fxc-ink); border-radius: 4px; font-size: 12px; font-weight: 600;
}
.fxc-home .fxc-home-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fxc-home .fxc-ribbon-link {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--fxc-ink); color: var(--fxc-ink); text-decoration: none; font-weight: 800; font-size: 13.5px;
}
.fxc-home .fxc-ribbon-link-primary { background: var(--fxc-ink); color: var(--fxc-card); }
.fxc-home .fxc-foot { margin-top: 14px; font-size: 13px; color: var(--fxc-mute2); line-height: 1.5; }
.fxc-home a:focus-visible { outline: 3px solid rgb(11 107 98 / .30); outline-offset: 2px; }

.fxc-home .fxc-home-group { margin-top: 14px; }
.fxc-home .fxc-home-group[hidden] { display: none; }
.fxc-home .fxc-home-group-l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fxc-mute2); font-family: ui-monospace, Menlo, monospace; margin: 0 0 8px; }
.fxc-home .fxc-home-tile--running .fxc-home-tile-time { display: flex; align-items: center; gap: 10px; }
.fxc-home .fxc-home-tile--running .fxc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn, #a85a1c); flex: 0 0 auto; display: inline-block; animation: fxcpulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fxc-home .fxc-home-tile--running .fxc-dot { animation: none; } }

.fxc-section .fxc-answer { font-size: 17px; line-height: 1.5; margin: 6px 0 10px; max-width: 62ch; }
/* ============================================================================
 * fec-edition.css  -  ChipFolio editorial design system
 * ----------------------------------------------------------------------------
 * Site-wide editorial redesign, homepage first.
 *
 * SCOPE & SAFETY
 *   Every rule is scoped under the root class ".fecx". It overrides nothing in
 *   fecv2.css and styles nothing until an element carries class="fecx".
 *   index.php (step two) loads this file on the homepage only and adds
 *   class="fecx" to <body> when $isHome. Inner pages keep fecv2.css alone
 *   until they migrate in later steps.
 *
 * WHAT THIS COVERS
 *   - Homepage SECTION styling: hero, freshness ticker, the Big Board,
 *     browse-by-type, FXCheck explainer, reviews, live activity, blog, FAQ,
 *     newsletter - plus shared tokens, buttons, chips, tags.
 *   - TOPBAR & FOOTER: restyles the EXISTING .fec-topbar / .fec-footer markup
 *     (Joomla module includes, user dropdown, search trigger) under .fecx -
 *     see the block at the end of this file. That markup is left untouched.
 *
 * TRANSITIONAL STATE
 *   Until the section helpers (fec_render_*) are converted, the homepage shows
 *   an editorial frame (topbar / footer / warm background) around section
 *   markup still styled by fecv2.css. That mix is expected during migration.
 *
 * TYPOGRAPHY
 *   Headlines use the site's current font (system sans, same as fecv2). The
 *   --serif token is a single switch: point it at a real self-hosted display
 *   face later if the editorial look needs more distinction.
 * ============================================================================ */

/* ====================================================================
   fec-edition.css  -  editorial design system, scoped under .fecx
   Append as a new stylesheet; loaded only on pages with class="fecx".
   ==================================================================== */

/* ---- design tokens ---- */
.fecx{
  --bg:#f7f4ed;        /* warm off-white paper */
  --bg-2:#efeadf;
  --paper:#fdfbf6;
  --ink:#14110d;
  --ink-2:#2a2620;
  --ink-3:#5a5347;
  --ink-4:#8a8275;
  --rule:#d9d2c2;
  --rule-2:#e7e0d0;
  --accent:#0b6b62;    /* refined teal */
  --accent-ink:#074842;
  --accent-soft:#d9e9e5;
  --verified:#1c7a4a;  --verified-soft:#d6ead8;
  --warn:#a85a1c;      --warn-soft:#f1ddc0;
  --danger:#9a2828;    --danger-soft:#efd9d9;
  --radius:14px;  --radius-sm:8px;  --maxw:1280px;
  /* headlines use the site's current font; --serif kept as a one-line switch */
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Consolas",monospace;
}

/* ---- base (scoped) ---- */
.fecx,.fecx *{box-sizing:border-box}
.fecx{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  margin:0}
.fecx a{color:inherit;text-decoration:none}
.fecx button{font:inherit;cursor:pointer}
.fecx h1,.fecx h2,.fecx h3,.fecx h4{margin:0}
.fecx .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.fecx .wrap--narrow{max-width:900px}
.fecx ::selection{background:var(--accent-soft)}

/* ---- shared bits ---- */
.fecx .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink)}
.fecx .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-4);
  display:inline-block;flex:0 0 auto}

.fecx .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;
  border-radius:999px;font-size:14px;font-weight:500;border:1px solid transparent;
  transition:transform .05s ease,background .12s ease}
.fecx .btn:active{transform:translateY(1px)}
.fecx .btn-primary{background:var(--ink);color:var(--bg)}
.fecx .btn-primary:hover{background:var(--ink-2)}
.fecx .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.fecx .btn-ghost:hover{background:var(--bg-2)}
.fecx .btn-yes{background:var(--verified);color:var(--bg);border-color:var(--verified);font-weight:600}
.fecx .btn-yes:hover{opacity:.92}
.fecx .btn-sm{padding:7px 13px;font-size:13px}

.fecx .section{padding:60px 0;border-bottom:1px solid var(--rule)}
.fecx .section-tight{padding:26px 0}
.fecx .sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px}
.fecx .sec-head .left{display:flex;flex-direction:column;gap:9px;min-width:0}
.fecx .sec-title{font-family:var(--serif);font-weight:600;font-size:30px;
  letter-spacing:-.02em;line-height:1.12}
.fecx .sec-sub{color:var(--ink-3);font-size:14px;max-width:64ch}
.fecx .sec-sub b{color:var(--ink-2);font-weight:600}
.fecx .sec-link,
.fecx .fec-minirow__link{font-size:13px;color:var(--accent);display:inline-flex;
  align-items:center;gap:5px;border-bottom:1px dotted var(--accent);
  padding-bottom:2px;white-space:nowrap}
.fecx .sec-link:hover,
.fecx .fec-minirow__link:hover{color:var(--accent-ink)}

/* ---- topbar ---- */
.fecx .topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule);
  background:hsl(45 33% 95% / .85);-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)}
.fecx .topbar-inner{display:flex;align-items:center;gap:22px;height:62px}
.fecx .brand{font-family:var(--serif);font-weight:600;font-size:19px;
  letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.fecx .brand-mark{width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  background:var(--ink);color:var(--bg);font-family:var(--serif);font-weight:600;
  display:grid;place-items:center;font-size:17px}
.fecx .brand .tld{color:var(--accent)}
.fecx .nav{display:flex;gap:3px;margin-left:6px}
.fecx .nav a{font-size:13.5px;color:var(--ink-2);padding:8px 11px;border-radius:999px}
.fecx .nav a:hover{background:var(--bg-2);color:var(--ink)}
.fecx .nav-spacer{flex:1}
.fecx .geo-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border-radius:999px;border:1px solid var(--rule);background:var(--paper);
  font-size:13px;color:var(--ink-2)}
.fecx .geo-pill:hover{border-color:var(--ink-4)}
.fecx .geo-flag{font-size:14px}
.fecx .icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--rule);
  background:var(--paper);display:grid;place-items:center;color:var(--ink-2)}
.fecx .icon-btn:hover{border-color:var(--ink-4)}
.fecx .signin{padding:8px 15px;border-radius:999px;border:1px solid var(--ink);
  background:transparent;font-size:13.5px;font-weight:500;color:var(--ink)}
.fecx .signin:hover{background:var(--ink);color:var(--bg)}
.fecx .burger{display:none;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-2)}

/* ---- hero ---- */
.fecx .hero{padding:44px 0;border-bottom:1px solid var(--rule)}
.fecx .hero-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:54px;align-items:end}
.fecx .dateline{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.03em;display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.fecx .dateline b{color:var(--ink)}
.fecx .h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,62px);
  line-height:1.03;letter-spacing:-.025em;margin:18px 0 22px;color:var(--ink)}
.fecx .h1 em{font-style:italic;color:var(--accent);font-weight:600}
.fecx .hero-sub{font-size:17px;line-height:1.46;color:var(--ink-2);
  max-width:52ch;margin:0 0 26px}
.fecx .hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.fecx .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);margin-top:30px;padding-top:18px}
.fecx .hero-stat{padding-right:14px}
.fecx .hero-stat .num{font-family:var(--serif);font-weight:600;font-size:27px;
  letter-spacing:-.02em}
.fecx .hero-stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* hero featured card */
.fecx .featured-card{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;
  container-type:inline-size}
.fecx .featured-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 90% -10%,var(--accent-soft) 0%,transparent 60%)}
.fecx .featured-card>*{position:relative}
.fecx .featured-stamp{position:absolute;top:18px;right:18px;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-soft);padding:5px 9px;border-radius:999px}
.fecx .featured-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:12px}
.fecx .featured-title{font-family:var(--serif);font-size:22px;line-height:1.2;
  letter-spacing:-.01em;font-weight:700;margin:8px 0 4px}
.fecx .featured-offer{display:flex;align-items:baseline;gap:12px;margin:18px 0 14px;
  padding-bottom:14px;border-bottom:1px dashed var(--rule)}
.fecx .featured-amount{font-family:var(--serif);font-weight:700;font-size:48px;
  line-height:1;letter-spacing:-.03em;color:var(--ink)}
.fecx .featured-unit{font-size:14px;color:var(--ink-3)}
.fecx .featured-cap{font-size:12px;color:var(--ink-3);margin-top:2px}
.fecx .featured-cap b{color:var(--ink-2)}
.fecx .featured-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:16px}
.fecx .featured-actions{display:flex;gap:10px}

/* ---- FX score chip ---- */
.fecx .fx-score{display:inline-flex;align-items:center;gap:8px;padding:5px 9px 5px 7px;
  border:1px solid var(--rule);border-radius:999px;background:var(--paper);
  font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.fecx .fx-meter{width:36px;height:4px;border-radius:2px;background:var(--rule);
  position:relative;overflow:hidden;flex:0 0 auto}
.fecx .fx-meter>span{position:absolute;inset:0;background:var(--verified);
  transform-origin:left}
.fecx .fx-score.warn .fx-meter>span{background:var(--warn)}
.fecx .fx-score.danger .fx-meter>span{background:var(--danger)}


/* ---- big board (FEC V2.1 - Claude Design board) ---- */
.fecx .viewtoggle{display:flex;border:1px solid var(--rule);border-radius:999px;
  padding:3px;background:var(--paper);flex:0 0 auto}
.fecx .viewtoggle button{border:none;background:transparent;display:inline-flex;
  align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;
  color:var(--ink-2)}
.fecx .viewtoggle button.active{background:var(--ink);color:var(--bg)}
.fecx .filterbar{display:flex;flex-wrap:wrap;gap:8px;padding:14px;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:20px;
  align-items:center}
.fecx .fbar-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--bg)}
.fecx .fbar-search svg{opacity:.5;flex:0 0 auto}
.fecx .fbar-search input{border:none;background:transparent;outline:none;font:inherit;
  color:var(--ink);width:100%}
.fecx .fbar-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-left:6px}
.fecx .fbar-group{display:flex;gap:8px;flex-wrap:wrap}
.fecx .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:999px;background:var(--bg);border:1px solid var(--rule);
  font-size:13px;color:var(--ink-2);cursor:pointer}
.fecx .chip:hover{border-color:var(--ink-4);color:var(--ink)}
.fecx .chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fecx .table-wrap{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.fecx .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fecx .bonus-table{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
.fecx .bonus-table thead th{text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;
  background:var(--bg-2);border-bottom:1px solid var(--rule)}
.fecx .bonus-table tbody td{padding:14px;border-bottom:1px solid var(--rule-2);
  vertical-align:middle}
.fecx .bonus-table tbody tr:last-child td{border-bottom:none}
.fecx .bonus-table tbody tr:hover{background:var(--bg)}
.fecx .bt-casino{display:flex;align-items:center;gap:10px;min-width:180px}
.fecx .bt-casino>div{min-width:0}
.fecx .bt-casino .name,.fecx .bt-casino .sub{max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fecx .bt-casino .name{font-weight:500;font-size:14px;color:var(--ink)}
.fecx .bt-casino .sub{font-size:11px;color:var(--ink-3)}
.fecx .bt-amount{font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.fecx .bt-amount small{font-family:var(--sans);font-size:11px;color:var(--ink-3);
  font-weight:400;letter-spacing:0;display:block;margin-top:2px}
.fecx .bt-code{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:4px;
  background:var(--bg);border:1px dashed var(--rule);color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;cursor:copy}
.fecx .bt-code:hover{border-color:var(--accent);color:var(--accent-ink)}
.fecx .bt-nocode{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.fecx .bt-wager,.fecx .bt-max{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.fecx .bt-listed{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  white-space:nowrap}
.fecx .bt-actions{text-align:right}
.fecx .casino-chip{border-radius:50%;border:1px solid var(--rule-2);
  display:grid;place-items:center;font-family:var(--sans);font-weight:600;flex-shrink:0}
/* card grid - auto-fits 3 / 2 / 1 columns, never overflows its container */
.fecx .bonus-grid{display:none;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.fecx .board.is-cards .table-wrap{display:none}
.fecx .board.is-cards .bonus-grid{display:grid}
.fecx .bonus-card{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;
  gap:12px;position:relative}
.fecx .bonus-card-head{display:flex;align-items:center;gap:10px}
.fecx .bonus-card-head>div{flex:1;min-width:0}
.fecx .bonus-card-head .fx-score{margin-left:auto}
.fecx .bc-name,.fecx .bc-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fecx .bc-name{font-weight:500;font-size:15px}
.fecx .bc-sub{font-size:12px;color:var(--ink-3)}
.fecx .bc-amount{font-family:var(--serif);font-size:34px;line-height:1;font-weight:700;
  letter-spacing:-.025em}
.fecx .bc-amount small{font-family:var(--sans);font-size:13px;color:var(--ink-3);
  font-weight:400;letter-spacing:0;margin-left:4px}
.fecx .bc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.fecx .kv{font-family:var(--mono)}
.fecx .kv .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.fecx .kv .v{font-size:14px;color:var(--ink);margin-top:3px}
.fecx .bc-actions{display:flex;gap:8px;margin-top:auto}
/* board state */
.fecx .board-foot{margin-top:18px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap}
.fecx .board-foot .count{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fecx .board-foot .count b{color:var(--ink-2)}
.fecx .board-empty{display:none;padding:34px;text-align:center;color:var(--ink-3);
  font-size:14px}
.fecx .board.is-empty .board-empty{display:block}
.fecx .board.is-empty .table-wrap,.fecx .board.is-empty .bonus-grid{display:none}

/* ---- browse by type ---- */
.fecx .type-grid{display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  overflow:hidden}
.fecx .type-cell{padding:22px 20px;border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);display:flex;flex-direction:column;gap:7px;
  position:relative;transition:background .1s ease}
.fecx .type-cell:hover{background:var(--bg-2)}
.fecx .type-cell:nth-child(6n){border-right:none}
.fecx .type-cell:nth-last-child(-n+6){border-bottom:none}
.fecx .type-cell .glyph{line-height:0;color:var(--ink)}
.fecx .type-cell .glyph svg{width:26px;height:26px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fecx .type-cell .name{font-weight:500;font-size:14px}
.fecx .type-cell .count{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fecx .type-cell .arrow{position:absolute;top:14px;right:14px;color:var(--ink-4);
  transition:transform .15s ease}
.fecx .type-cell:hover .arrow{transform:translate(2px,-2px);color:var(--ink)}

/* ---- how FXCheck works ---- */
.fecx .fx-explain{display:grid;grid-template-columns:1fr 1.18fr;gap:54px;
  align-items:start}
.fecx .fx-pull{font-family:var(--serif);font-size:31px;line-height:1.16;
  letter-spacing:-.02em;font-weight:600;margin:0 0 16px}
.fecx .fx-pull em{color:var(--accent);font-style:italic}
.fecx .fx-lede{color:var(--ink-3);font-size:14px;max-width:44ch;margin:0 0 20px}
.fecx .fx-steps{border-left:1px solid var(--rule)}
.fecx .fx-step{padding:18px 0 18px 26px;position:relative;
  border-bottom:1px solid var(--rule-2);counter-increment:fxstep}
.fecx .fx-step:last-child{border-bottom:none}
.fecx .fx-step::before{content:counter(fxstep,decimal-leading-zero);
  position:absolute;left:-1px;top:20px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--bg);
  border:1px solid var(--rule);font-family:var(--mono);font-size:10px;
  color:var(--accent-ink);display:grid;place-items:center}
.fecx .fx-steps{counter-reset:fxstep}
.fecx .fx-step h4{font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:-.01em;margin:0 0 4px}
.fecx .fx-step p{margin:0;font-size:13.5px;color:var(--ink-3)}

/* ---- reviews ---- */
.fecx .review-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fecx .review-card{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px}
.fecx .review-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fecx .review-name{font-weight:500;font-size:14px}
.fecx .review-sub{font-size:11px;color:var(--ink-3)}
.fecx .score-block{display:flex;align-items:baseline;gap:8px;padding:12px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  margin-bottom:12px}
.fecx .score-num{font-family:var(--serif);font-size:36px;line-height:1;
  font-weight:700;letter-spacing:-.02em}
.fecx .score-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.fecx .score-rank{margin-left:auto;font-family:var(--mono);font-size:11px;
  color:var(--ink-3)}
.fecx .review-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:14px}
.fecx .review-actions{display:flex;gap:8px}
.fecx .review-actions .btn{flex:1;justify-content:center}

/* ---- editorial / blog ---- */
.fecx .blog-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px}
.fecx .blog-card{display:flex;flex-direction:column;gap:11px;
  color:inherit;text-decoration:none}
.fecx .blog-thumb{aspect-ratio:16/9;border-radius:var(--radius);position:relative;
  overflow:hidden;border:1px solid var(--rule);
  background:linear-gradient(135deg,var(--bg-2),var(--rule))}
.fecx .blog-thumb img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.fecx .blog-thumb .stripes{position:absolute;inset:0;opacity:.4;
  background-image:repeating-linear-gradient(45deg,var(--rule-2) 0 8px,transparent 8px 16px)}
.fecx .blog-thumb::after{content:attr(data-label);position:absolute;left:12px;
  bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper);
  padding:3px 8px;border-radius:6px;border:1px solid var(--rule)}
.fecx .blog-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.04em}
.fecx .blog-title{font-family:var(--serif);font-size:18px;line-height:1.25;
  font-weight:700;letter-spacing:-.01em;transition:color .12s ease}
.fecx .blog-card.lead .blog-title{font-size:23px}
.fecx .blog-card:hover .blog-title{color:var(--accent-ink)}
.fecx .blog-excerpt{color:var(--ink-3);font-size:14px;margin:0}

/* ---- FAQ ---- */
.fecx .faq-list{border-top:1px solid var(--rule)}
.fecx .faq-item{border-bottom:1px solid var(--rule)}
.fecx .faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink)}
.fecx .faq-q::-webkit-details-marker{display:none}
.fecx .faq-q .plus{font-family:var(--sans);font-size:22px;line-height:1;
  color:var(--ink-3);font-weight:300;flex:0 0 auto;transition:transform .2s ease}
.fecx .faq-item[open] .faq-q .plus{transform:rotate(45deg)}
.fecx .faq-a{padding:0 0 22px;color:var(--ink-2);font-size:15px;
  max-width:72ch;line-height:1.55}
.fecx .faq-a p{margin:0}

/* ---- newsletter — restyles the shared .fec-nl email-capture block ---- */
/* No border-bottom: the dark .fec-nl__inner box (border-radius, contrasted bg)
   is already a self-contained visual block, and on the bonus-detail page the
   following .bd-related section provides its own border-top separator. Adding
   border-bottom here produced a doubled separator (the newsletter function
   also emits a <script> sibling, breaking adjacent-sibling CSS workarounds). */
.fecx .fec-nl{padding:60px 28px}
.fecx .fec-nl__inner{max-width:var(--maxw);margin:0 auto;
  background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:52px;
  display:grid;grid-template-columns:1.15fr 1fr;gap:8px 40px;align-items:center}
.fecx .fec-nl__heading{grid-column:1;grid-row:1;font-family:var(--serif);
  font-size:31px;line-height:1.12;font-weight:700;letter-spacing:-.02em;
  margin:0;color:var(--bg)}
.fecx .fec-nl__sub{grid-column:1;grid-row:2;color:rgba(255,255,255,.72);
  font-size:14px;line-height:1.5;margin:0}
.fecx .fec-nl__form{grid-column:2;grid-row:1/3;display:flex;
  flex-direction:column;gap:11px;margin:0}
.fecx .fec-nl__row{display:flex;gap:8px}
.fecx .fec-nl__email{flex:1;background:rgba(255,255,255,.06);color:var(--bg);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:12px 17px;
  outline:none;font:inherit;font-size:14px}
.fecx .fec-nl__email::placeholder{color:var(--ink-4)}
.fecx .fec-nl__email:focus{border-color:var(--accent)}
.fecx .fec-nl__submit{background:var(--accent);color:#fff;border:none;
  border-radius:999px;padding:12px 24px;font-weight:500;font-size:14px;
  cursor:pointer;white-space:nowrap}
.fecx .fec-nl__submit:hover{background:var(--accent-ink)}
.fecx .fec-nl__submit:disabled{opacity:.6;cursor:default}
.fecx .fec-nl__consent{font-size:12px;color:rgba(255,255,255,.6);display:flex;
  align-items:flex-start;gap:8px;line-height:1.45}
.fecx .fec-nl__consent input{margin-top:2px;flex:0 0 auto}
.fecx .fec-nl__consent a{color:var(--bg);text-decoration:underline}
.fecx .fec-nl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fecx .fec-nl__status{font-size:13px;min-height:1.1em;color:var(--bg)}
.fecx .fec-nl__status--error{color:#ff9d9d}
.fecx .fec-nl__status--success{color:var(--verified-soft)}

/* ---- footer ---- */
.fecx .footer{padding:50px 0 38px;color:var(--ink-3);font-size:13px}
.fecx .footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;
  margin-bottom:30px}
.fecx .footer-about{max-width:38ch;line-height:1.5}
.fecx .footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 13px}
.fecx .footer ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:9px}
.fecx .footer a:hover{color:var(--ink)}
.fecx .footer-badges{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.fecx .responsible{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;
  border-radius:999px;background:var(--bg-2);border:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fecx .responsible .age{width:22px;height:22px;border-radius:50%;background:var(--ink);
  color:var(--bg);display:grid;place-items:center;font-size:9px;font-weight:600;
  font-family:var(--sans)}
.fecx .footer-bottom{display:flex;justify-content:space-between;gap:16px;
  padding-top:20px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:11px;letter-spacing:.02em;flex-wrap:wrap}

/* ---- copy toast ---- */
.fecx .copy-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,14px);
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;
  font-family:var(--mono);font-size:12px;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;z-index:100}
.fecx .copy-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- FXCheck live ticker ---- */
.fecx .live-dot{width:8px;height:8px;border-radius:50%;background:#d33;
  display:inline-block;flex:0 0 auto;box-shadow:0 0 0 0 rgba(221,51,51,.6);
  animation:fecx-live-pulse 2s infinite}
@keyframes fecx-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(221,51,51,.5)}
  70%{box-shadow:0 0 0 8px rgba(221,51,51,0)}
  100%{box-shadow:0 0 0 0 rgba(221,51,51,0)}}
@media (prefers-reduced-motion:reduce){.fecx .live-dot{animation-duration:4s}}
.fecx .ticker{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.fecx .ticker-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--rule);background:var(--bg-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.fecx .ticker-head .live-dot{margin-right:2px}
.fecx .ticker-head__note{margin-left:auto;color:var(--ink-4)}
.fecx .ticker-list{list-style:none;margin:0;padding:0;display:block;width:100%}
.fecx .ticker-list li{display:block;width:100%;margin:0;padding:0;float:none;
  border-bottom:1px solid var(--rule-2)}
.fecx .ticker-list li:last-child{border-bottom:none}
.fecx .ticker-list a{display:grid;width:100%;max-width:none;float:none;
  box-sizing:border-box;grid-template-columns:70px 1fr auto auto;
  gap:14px;align-items:center;padding:11px 16px;font-size:13px;
  color:inherit;text-decoration:none;transition:background .1s ease}
.fecx .ticker-list a:hover{background:var(--bg-2)}
.fecx .ticker-list .t{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fecx .ticker-list .what b{font-weight:600}
.fecx .ticker-list .what-detail{color:var(--ink-3);margin-left:8px}
.fecx .ticker-list .who{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fecx .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.fecx .tag-ok{background:var(--verified-soft);color:var(--verified)}
.fecx .tag-warn{background:var(--warn-soft);color:var(--warn)}
.fecx .tag-info{background:var(--accent-soft);color:var(--accent-ink)}
@media (max-width:600px){
  .fecx .ticker-list a{grid-template-columns:1fr auto;gap:5px 12px;padding:12px 14px}
  .fecx .ticker-list .t{grid-column:1;grid-row:1}
  .fecx .ticker-list .tag{grid-column:2;grid-row:1;justify-self:end}
  .fecx .ticker-list .what{grid-column:1/-1;grid-row:2}
  .fecx .ticker-list .who{grid-column:1/-1;grid-row:3}
  .fecx .ticker-list .what-detail{margin-left:0;display:block;margin-top:2px}
}

/* ---- trust pillars ---- */
.fecx .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.fecx .trust-col{border-top:2px solid var(--ink);padding-top:18px}
.fecx .trust-kicker{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.fecx .trust-ico{line-height:0;color:var(--ink)}
.fecx .trust-ico svg{width:18px;height:18px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fecx .trust-title{font-family:var(--serif);font-size:19px;font-weight:700;
  letter-spacing:-.01em;line-height:1.25;margin:13px 0 8px}
.fecx .trust-text{font-size:14px;line-height:1.6;color:var(--ink-3);margin:0 0 14px}

/* ---- responsive ---- */
@media (max-width:1080px){
  .fecx .type-grid{grid-template-columns:repeat(3,1fr)}
  .fecx .type-cell:nth-child(6n){border-right:1px solid var(--rule-2)}
  .fecx .type-cell:nth-child(3n){border-right:none}
  .fecx .type-cell:nth-last-child(-n+6){border-bottom:1px solid var(--rule-2)}
  .fecx .type-cell:nth-last-child(-n+3){border-bottom:none}
}
@media (max-width:920px){
  .fecx .hero-grid,.fecx .fx-explain,.fecx .trust-grid{grid-template-columns:1fr;gap:34px}
  .fecx .review-row{grid-template-columns:1fr}
  .fecx .blog-row{grid-template-columns:1fr;gap:20px}
  .fecx .nav{display:none}
  .fecx .burger{display:grid;place-items:center}
  .fecx .fec-nl{padding:48px 18px}
  .fecx .fec-nl__inner{grid-template-columns:1fr;gap:20px;padding:36px}
  .fecx .fec-nl__heading,.fecx .fec-nl__sub,.fecx .fec-nl__form{grid-column:auto;grid-row:auto}
}
@media (max-width:760px){
  .fecx .wrap{padding:0 18px}
  .fecx .section{padding:44px 0}
  .fecx .hero{padding-top:28px}
  .fecx .viewtoggle{display:none}
  .fecx .table-wrap{display:none}
  .fecx .bonus-grid{display:grid}
  .fecx .filterbar{border-radius:var(--radius);border-bottom:1px solid var(--rule)}
  .fecx .review-row,.fecx .type-grid{grid-template-columns:1fr}
  .fecx .type-cell{border-right:none!important}
  .fecx .hero-stats{grid-template-columns:1fr 1fr;gap:14px 0}
  .fecx .signin,.fecx .icon-btn{display:none}
  .fecx .footer-grid{grid-template-columns:1fr 1fr}
  .fecx .footer-about{grid-column:1/-1}
  .fecx .sec-head{flex-direction:column;align-items:flex-start}
}
@container (max-width:540px){
  .fecx .featured-stamp{position:static;display:inline-block;margin-bottom:12px}
}
@media (max-width:480px){
  .fecx .footer-grid{grid-template-columns:1fr}
}

/* ============================================================================
 * TOPBAR & FOOTER  -  step two
 * Restyles the EXISTING .fec-topbar / .fec-footer markup under .fecx. The
 * markup in index.php is NOT changed (it carries the Joomla module includes,
 * the user dropdown and the search trigger). These rules win over fecv2.css
 * by specificity:  .fecx .fec-xxx  (0,2,0)  beats  .fec-xxx  (0,1,0).
 * ============================================================================ */

/* ---- topbar ---- */
.fecx .fec-topbar{
  background:hsl(45 33% 95% / .92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}

/* brand */
.fecx .fec-brand:hover{background:var(--bg-2)}
.fecx .fec-brand__mark{background:var(--paper);border:1px solid var(--rule)}
.fecx .fec-brand__mark:after{background:var(--accent)}
.fecx .fec-brand__title{color:var(--ink)}
.fecx .fec-brand__dot{color:var(--accent)}
.fecx .fec-brand__sub{color:var(--ink-3)}

/* primary nav - Joomla module emits ul.menu > li > a */
.fecx .fec-nav a,
.fecx .fec-nav span{font-weight:500;color:var(--ink-2)}
.fecx .fec-nav a:hover{background:var(--bg-2);border-color:var(--rule);color:var(--ink)}
.fecx .fec-nav li.active>a,
.fecx .fec-nav li.current>a{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fecx .fec-nav li ul{background:var(--paper);border-color:var(--rule)}
.fecx .fec-nav li ul a:hover{background:var(--bg-2)}

/* right-side controls: search trigger, user button, burger */
.fecx .fec-toolbtn,
.fecx .fec-burger{border-color:var(--rule);background:var(--paper);color:var(--ink-2)}
.fecx .fec-toolbtn:hover,
.fecx .fec-burger:hover{border-color:var(--ink-4)}
.fecx .fec-user__btn{border-color:var(--rule);background:var(--paper);color:var(--ink-2)}
.fecx .fec-user__btn:hover{border-color:var(--ink-4)}
.fecx .fec-avatar{background:var(--accent-soft);border-color:var(--rule);color:var(--accent-ink)}

/* user dropdown panel */
.fecx .fec-dd{background:var(--paper);border-color:var(--rule)}
.fecx .fec-dd__head{background:var(--bg-2);border-color:var(--rule)}
.fecx .fec-dd__title{color:var(--ink)}
.fecx .fec-dd__sub{color:var(--ink-3)}
.fecx .fec-dd__item{color:var(--ink-2)}
.fecx .fec-dd__item:hover{background:var(--bg-2);border-color:var(--rule)}
.fecx .fec-dd__sep{background:var(--rule)}

/* mobile nav drawer (fecv2 turns .fec-nav into a panel under 980px) */
@media (max-width:980px){
  .fecx .fec-nav{background:var(--paper);border-color:var(--rule)}
}

/* ---- footer ---- */
.fecx .fec-footer{background:var(--bg-2);border-top:1px solid var(--rule);color:var(--ink-3)}
.fecx .fec-footer__brand{background:var(--paper);border:1px solid var(--rule)}
.fecx .fec-footer__mark{background:var(--bg-2);border:1px solid var(--rule)}
.fecx .fec-footer__mark:after{background:var(--accent)}
.fecx .fec-footer__title{color:var(--ink)}
.fecx .fec-footer__dot{color:var(--accent)}
.fecx .fec-footer__sub,
.fecx .fec-footer__muted{color:var(--ink-3)}
.fecx .fec-footer__h{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.fecx .fec-footer__a{color:var(--ink-2);font-weight:400}
.fecx .fec-footer__a:hover{color:var(--ink)}
.fecx .fec-footer__badge{background:var(--ink);color:var(--bg);border:0}
.fecx .fec-footer__bottom{border-top:1px solid var(--rule)}


/* ============================================================================
 * BONUSES HUB  -  inner-page components (migration: step 1)
 * ----------------------------------------------------------------------------
 *   Scoped .hub-* / .lf-* / .crumbs rules for the com_bonuses "hub" listing
 *   page. Ported from the Bonuses Hub mockup - declarations unchanged, every
 *   selector prefixed ".fecx". Inert until the hub markup carries class="fecx"
 *   (added when the hub view / renderer are converted, steps 2-5).
 * ============================================================================ */

/* ---- Breadcrumb ---- */
.fecx .crumbs{
  padding: 18px 0 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.fecx .crumbs a:hover{ color: var(--ink); }
.fecx .crumbs .sep{ color: var(--ink-4); }

/* ---- Hub hero / intro card ---- */
.fecx .hub-hero{ padding: 24px 0 36px; border-bottom: 1px solid var(--rule); }
.fecx .hub-hero-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 36px;
  align-items: start;
}
.fecx .hub-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 30px;
}
.fecx .hub-title{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: 4px 0 14px;
  color: var(--ink);
}
.fecx .hub-intro{ color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 0 0 18px; max-width: 60ch; }
.fecx .hub-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fecx .hub-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2);
}
.fecx .hub-pill::before{ content: "✓"; color: var(--verified); font-weight: 700; }
.fecx .hub-verdict{
  border-left: 2px solid var(--accent);
  padding: 12px 0 12px 16px;
  margin: 18px 0 14px;
  font-size: 14px;
  color: var(--ink-2);
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 30%);
}
.fecx .hub-verdict strong{ font-weight: 600; color: var(--ink); }
.fecx .hub-disclosure{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.fecx .hub-disclosure a{ color: var(--accent); border-bottom: 1px dotted var(--accent); padding-bottom: 1px; }

/* Right meta panel */
.fecx .hub-meta{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.fecx .hub-meta-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-meta-list li{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-2);
}
.fecx .hub-meta-list li:last-child{ border-bottom: none; }
.fecx .hub-meta-list .k{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .hub-meta-list .v{ font-size: 13px; color: var(--ink); font-weight: 500; }
.fecx .hub-tip{
  font-size: 13px; color: var(--ink-2);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border-left: 2px solid var(--ink-3);
}
.fecx .hub-tip b{
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
  font-weight: 500;
}

/* ---- Browse chips row ---- */
.fecx .hub-browse{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 24px 0 16px;
}
.fecx .hub-browse-chip{
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.1s ease;
}
.fecx .hub-browse-chip:hover{ border-color: var(--ink); }
.fecx .hub-browse-chip::before{ content: "→"; color: var(--ink-3); }
.fecx .hub-browse-chip .n{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ---- Updated row + Read first ---- */
.fecx .hub-updated{
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.fecx .hub-updated b{ color: var(--ink); font-weight: 600; }
.fecx .hub-readfirst{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.fecx .hub-readfirst .lbl{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
.fecx .hub-readfirst a{
  font-size: 13px; color: var(--accent-ink);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.fecx .hub-readfirst a:hover{ background: var(--paper); border-color: var(--accent); }

/* ---- Filter bar (hub specific) ---- */
.fecx .hub-filter{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 24px;
  position: sticky; top: 60px; z-index: 5;
}
.fecx .hub-filter-left{ display: flex; align-items: center; gap: 10px; }
.fecx .hub-filter-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-size: 13px; color: var(--ink);
}
.fecx .hub-filter-btn .badge{
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
}
.fecx .hub-filter-right{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fecx .hub-filter-right .chip{ background: transparent; }
.fecx .hub-filter-right .chip.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- Editor's Picks band ---- */
.fecx .hub-picks-band{
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.fecx .hub-picks-band-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.fecx .hub-picks-band-title{
  display: flex; align-items: baseline; gap: 12px;
}
.fecx .hub-picks-band-title h3{
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; margin: 0;
}
.fecx .hub-picks-band-title .star{ color: var(--accent); }
.fecx .hub-picks-band-title .stamp{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 8px; border-radius: 999px;
}
.fecx .hub-picks-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

/* ---- Editor's Picks "Why these three" — info-button + popover ----
   The fec-info-btn / fec-info-popover component (markup, positioning,
   and the <=560px bottom-sheet) is owned by fecv2.css. Here we only
   re-skin its surfaces and colours, from the fecv2 white + cold-grey
   palette to the editorial cream/ink/teal one, so it sits naturally
   inside the cream picks band. Layout and positioning are untouched. */
.fecx .fec-info-btn{
  background: var(--paper); border-color: var(--rule); color: var(--ink-2);
}
.fecx .fec-info-btn:hover,
.fecx .fec-info-btn[aria-expanded="true"]{
  border-color: var(--ink-3); color: var(--ink);
}
.fecx .fec-info-btn[aria-expanded="true"]{ background: var(--bg); }
.fecx .fec-info-popover{
  background: var(--paper); border-color: var(--rule); color: var(--ink-2);
}
.fecx .fec-info-popover__arrow{ background: var(--paper); border-color: var(--rule); }
.fecx .fec-info-popover__title{ color: var(--ink); }
.fecx .fec-info-popover__intro{ color: var(--ink-3); }
.fecx .fec-info-popover__list li{ background: var(--bg-2); }
.fecx .fec-info-popover__metric{ color: var(--ink-2); }
.fecx .fec-info-popover__weight,
.fecx .fec-info-popover__link{ color: var(--accent); }
.fecx .fec-info-popover__note{ color: var(--ink-3); border-top-color: var(--rule); }
.fecx .fec-info-popover__close{ color: var(--ink-3); }
.fecx .fec-info-popover__close:hover,
.fecx .fec-info-popover__close:focus-visible{ background: var(--bg-2); color: var(--ink); }

/* ---- Bonus grid (hub) ---- */
.fecx .hub-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fecx .hub-bonus{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.fecx .hub-bonus.fx-verified{ border-color: rgba(28, 122, 74, 0.4); }
.fecx .hub-bonus-head{ display: flex; align-items: center; gap: 10px; }
.fecx .hub-bonus-name{ font-weight: 600; font-size: 14px; color: var(--ink); }
.fecx .hub-bonus-sub{ font-size: 12px; color: var(--ink-3); }
.fecx .hub-bonus-tags{ display: flex; gap: 6px; margin-left: auto; flex-direction: column; align-items: flex-end; }
.fecx .hub-bonus-amount{
  font-family: var(--serif); font-size: 32px; line-height: 1; font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  padding: 4px 0 6px;
}
.fecx .hub-bonus-amount sup{ font-size: 60%; vertical-align: super; font-weight: 600; margin-right: 2px; }
.fecx .hub-bonus-amount .unit{
  display: block; font-family: var(--sans); font-size: 11px;
  font-weight: 400; color: var(--ink-3);
  letter-spacing: 0; margin-top: 4px;
}
.fecx .hub-bonus-codeline{
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.fecx .hub-bonus-codeline b{ color: var(--ink); font-weight: 600; }
.fecx .hub-bonus-status{ display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.fecx .hub-bonus-facts{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  text-align: center;
}
.fecx .hub-bonus-facts .k{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.fecx .hub-bonus-facts .v{ font-size: 13px; color: var(--ink); font-weight: 500; }
.fecx .hub-bonus-facts .v.fx{ font-family: var(--mono); }
.fecx .hub-bonus-facts .yes{ color: var(--verified); }
.fecx .hub-bonus-facts .no{ color: var(--ink-4); }
.fecx .hub-bonus-meta{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.fecx .hub-bonus-cta{ display: flex; gap: 8px; margin-top: auto; }
.fecx .hub-bonus-cta .btn{ flex: 1; justify-content: center; }
.fecx .tag-expires{
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---- Pagination ---- */
.fecx .hub-pager{
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 32px 0;
}
.fecx .hub-pager a, .fecx .hub-pager span{
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.fecx .hub-pager a:hover{ border-color: var(--rule); color: var(--ink); }
.fecx .hub-pager .active{
  background: var(--ink); color: var(--bg); font-weight: 600;
}
.fecx .hub-pager .ell{ color: var(--ink-4); }

/* ---- Editorial long-form with TOC sidebar ---- */
.fecx .hub-longform{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 48px 0;
}
.fecx .hub-toc{
  position: sticky; top: 80px;
  align-self: start;
}
.fecx .hub-toc .lbl{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
/* Rail line is drawn by box-shadow inset on each <a>, NOT by border-left on the
   <ul>. This eliminates the dependency on the ul's padding (which legacy CSS
   can inflate, pushing the rail right while the <a> border-left stays at the
   left edge, creating a visible offset between the rail and the active accent).
   Adjacent <a> items have no gap so their box-shadows form a continuous rail. */
.fecx .hub-toc ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fecx .hub-toc ul li { margin: 0; padding: 0; border: 0; list-style: none; background: transparent; }
.fecx .hub-toc ul li a { border: 0; background: transparent; }
.fecx .hub-toc li a{
  display: block; padding: 7px 12px;
  font-size: 13px; color: var(--ink-3);
  box-shadow: inset 1px 0 var(--rule);
}
.fecx .hub-toc li a:hover{ color: var(--ink); }
.fecx .hub-toc li a.active{ color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 var(--accent); }

.fecx .hub-content{ max-width: 100ch; min-width: 0; }
.fecx .hub-content section{ padding: 24px 0 36px; border-bottom: 1px solid var(--rule-2); }
.fecx .hub-content section:last-child{ border-bottom: none; }
.fecx .hub-content .kicker{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.fecx .hub-content h2{
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 18px;
}
.fecx .hub-content p{ font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.fecx .hub-content p:last-child{ margin-bottom: 0; }
/* plain prose elements (the editorial body uses h3 / ul / inline links) */
.fecx .hub-content h3{
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
  margin: 24px 0 8px; color: var(--ink);
}
.fecx .hub-content ul{ margin: 0 0 14px; padding-left: 20px; }
.fecx .hub-content li{ font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.fecx .hub-content li:last-child{ margin-bottom: 0; }
.fecx .hub-content strong{ color: var(--ink); font-weight: 600; }
.fecx .hub-content a{ color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.fecx .hub-content a:hover{ border-color: var(--accent); }
.fecx .hub-content .lf-kvlist{
  list-style: none; margin: 0 0 18px; padding: 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-content .lf-kvlist li{
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-2);
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  font-size: 14px;
}
.fecx .hub-content .lf-kvlist .k{ font-weight: 600; color: var(--ink); }
.fecx .hub-content .lf-kvlist .v{ color: var(--ink-2); }
.fecx .hub-content .lf-callout{
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 18px 0;
}
.fecx .hub-content .lf-callout h4{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 8px;
  font-weight: 600;
}
.fecx .hub-content .lf-callout p{ color: var(--accent-ink); margin: 0; font-size: 14px; line-height: 1.5; }

.fecx .hub-content .lf-category{
  margin: 18px 0;
  padding: 18px 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-content .lf-category h3{
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.fecx .hub-content .lf-category dl{
  display: grid; grid-template-columns: 110px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}
.fecx .hub-content .lf-category dt{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.fecx .hub-content .lf-category dd{
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

.fecx .hub-content .lf-step{
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-content .lf-step .num{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 4px;
  font-weight: 600;
}
.fecx .hub-content .lf-step h4{
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.fecx .hub-content .lf-step p{ font-size: 14px; margin: 0; }

.fecx .hub-content .lf-examples{
  margin: 18px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.fecx .hub-content .lf-examples h4{
  margin: 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.fecx .hub-content .lf-examples table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.fecx .hub-content .lf-examples td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}
.fecx .hub-content .lf-examples tr:last-child td{ border-bottom: none; }
.fecx .hub-content .lf-examples .offer{ font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.fecx .hub-content .lf-examples .ev{ font-family: var(--mono); font-weight: 600; }
.fecx .hub-content .lf-examples .ev.pos{ color: var(--verified); }
.fecx .hub-content .lf-examples .ev.neg{ color: var(--danger); }
.fecx .hub-content .lf-examples .note{ color: var(--ink-3); font-size: 12px; }

/* ---- Decision Notes: additions for long-form content ---- */

/* Section title for bd-notes */
.fecx .bd-notes h2.bd-section-title{
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 24px;
}

/* Definition list: bold key 240px col + value */
.fecx .hub-content .lf-termlist{
  list-style: none; margin: 0 0 18px; padding: 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-content .lf-termlist li{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: 14px;
}
.fecx .hub-content .lf-termlist .k{ font-weight: 600; color: var(--ink); }
.fecx .hub-content .lf-termlist .v{ color: var(--ink-2); }

/* Inline sub-definition (Main game / Country-dependent alternatives) */
.fecx .hub-content .lf-subdef{ font-size: 14px; margin: 4px 0; }
.fecx .hub-content .lf-subdef b{ font-weight: 600; }

/* Step-by-step numbered list (01, 02, 03...) */
.fecx .hub-content .lf-steps{
  margin: 12px 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: bdstep;
}
.fecx .hub-content .lf-steps li{
  counter-increment: bdstep;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.fecx .hub-content .lf-steps li::before{
  content: counter(bdstep, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px;
  color: var(--accent);
  padding-top: 2px;
  font-weight: 600;
}

/* Verdict: two-column good (green) / bad (red) cards */
.fecx .hub-content .lf-twocol{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.fecx .hub-content .lf-twocol > div{
  padding: 16px 18px;
  border-radius: var(--radius-sm);
}
.fecx .hub-content .lf-twocol .good{ background: var(--verified-soft); }
.fecx .hub-content .lf-twocol .bad{ background: var(--warn-soft); }
.fecx .hub-content .lf-twocol h4{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 10px;
  font-weight: 600;
}
.fecx .hub-content .lf-twocol .good h4{ color: var(--verified); }
.fecx .hub-content .lf-twocol .bad h4{ color: var(--warn); }
.fecx .hub-content .lf-twocol ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.fecx .hub-content .lf-twocol .good li::before{ content: "\2713 "; color: var(--verified); font-weight: 600; }
.fecx .hub-content .lf-twocol .bad li::before { content: "\00d7 "; color: var(--warn); font-weight: 600; }

/* Quick Math table (Decision Notes) */
.fecx .hub-content .lf-quickmath {
  margin: 18px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}
.fecx .hub-content .lf-quickmath h4 {
  margin: 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.fecx .hub-content .lf-quickmath table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.fecx .hub-content .lf-quickmath td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
  line-height: 1.45;
}
.fecx .hub-content .lf-quickmath tr:last-child td { border-bottom: none; }
.fecx .hub-content .lf-quickmath td:first-child {
  width: 42%; font-weight: 600; color: var(--ink);
}
.fecx .hub-content .lf-quickmath td:last-child {
  color: var(--ink-2); font-family: var(--mono);
}

/* Fine print (RTP disclaimer, deposit note) */
.fecx .hub-content .lf-fineprint {
  font-size: 12px; color: var(--ink-3);
  margin: 8px 0 0; line-height: 1.5;
}

.fecx .hub-content .lf-q{
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .hub-content .lf-q h4{
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.fecx .hub-content .lf-q p{ font-size: 14px; margin: 0; }

.fecx .hub-content .lf-term{
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
}
.fecx .hub-content .lf-term .t{
  font-weight: 600; color: var(--ink); font-size: 14px;
}
.fecx .hub-content .lf-term .d{
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
}

/* ---- Byline ---- */
.fecx .hub-byline{
  display: flex; justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  flex-wrap: wrap; gap: 16px;
}
.fecx .hub-byline .person{ display: flex; flex-direction: column; gap: 2px; }
.fecx .hub-byline .who{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .hub-byline .name{ color: var(--ink); font-weight: 600; }
.fecx .hub-byline .name a{ border-bottom: 1px dotted var(--ink-3); padding-bottom: 1px; }
.fecx .hub-byline .role{ color: var(--ink-3); }
.fecx .hub-byline .updated{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  align-self: flex-end;
}

@media (max-width: 1000px) {
  .fecx .hub-hero-grid{ grid-template-columns: 1fr; gap: 20px; }
  .fecx .hub-picks-grid, .fecx .hub-grid{ grid-template-columns: repeat(2, 1fr); }
  .fecx .hub-longform{ grid-template-columns: 1fr; gap: 24px; }
  .fecx .hub-toc{ position: static; }
  .fecx .hub-content .lf-kvlist li, .fecx .hub-content .lf-category dl, .fecx .hub-content .lf-term{ grid-template-columns: 1fr; }}
@media (max-width: 640px) {
  .fecx .hub-picks-grid, .fecx .hub-grid{ grid-template-columns: 1fr; }
  .fecx .hub-filter{ flex-direction: column; align-items: stretch; }
  /* Picks-band header: keep the title group and the info-button on one
     row, but let the title wrap (the stamp drops below the heading) and
     top-align the button, so the "i" sits up by the heading instead of
     floating low beside the wrapped stamp. */
  .fecx .hub-picks-band-head{ align-items: flex-start; }
  .fecx .hub-picks-band-title{ flex-wrap: wrap; align-items: center; gap: 6px 10px; }
}

/* ================================================================
   FEC V2.1 — HUB SHELL
   Restyles the existing com_bonuses view chrome under .fecx:
   breadcrumb, status minirow, listing-grid wrapper, pager.
   Markup is left byte-identical (no JS hooks touched); these rules
   are inert on every non-hub page since only the hub carries .fecx.
   The filter toolbar (#fecFilters) is restyled separately (step 4c).
   ================================================================ */

/* Breadcrumb — fec_render_breadcrumb_html(): <nav.fec-breadcrumb><ol><li> */
.fecx .fec-breadcrumb{
  padding: 18px 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.fecx .fec-breadcrumb ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.fecx .fec-breadcrumb li{ display: flex; align-items: center; gap: 8px; }
.fecx .fec-breadcrumb li + li::before{ content: "/"; color: var(--ink-4); }
.fecx .fec-breadcrumb a{ color: var(--ink-3); }
.fecx .fec-breadcrumb a:hover{ color: var(--ink); }
.fecx .fec-breadcrumb li[aria-current]{ color: var(--ink); }

/* Status minirow — restyled to the mockup's .hub-updated (point 3):
   no green box — a top hairline + a mono caption. The .fec-minirow
   markup belongs to the shared view (all 8 com_bonuses pages emit it),
   but every rule here is .fecx-scoped, so only the hub changes.
   .fec-minirow clones .fecx .wrap geometry (max-width / centred /
   28px sides) so its inner edge-aligns with the Read-first box and
   the toolbar card; the hairline + caption sit on __inner. */
.fecx .fec-minirow{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  background: transparent;
}
.fecx .fec-minirow__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
}
.fecx .fec-minirow__left{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fecx .fec-minirow__item{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.fecx .fec-minirow__item strong{ color: var(--ink); font-weight: 600; }
.fecx .fec-minirow__dot{ color: var(--ink-4); }
/* The link's look (dotted underline, accent, no pill) comes from the
   shared .sec-link rule at the top of this file. fecv2.css also has a
   base .fec-minirow__link rule painting a pill (radius / border / fill
   / weight 900 / padding); the shared rule doesn't set those, so they
   leak through. The reset below kills every pill property -> identical
   to a homepage .sec-link. border-bottom is left alone on purpose (the
   shared rule owns the dotted underline). Done .fecx-scoped: fecv2.css
   is the global base and its .fec-minirow__link also styles the 7
   un-migrated sibling pages, so editing it there would strip their
   pill too. The arrow is added via ::after — the view markup has none. */
.fecx .fec-minirow__link{
  padding: 0 0 2px;
  border-top: 0; border-right: 0; border-left: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;
}
.fecx .fec-minirow__link::after{ content: "\2192"; }

/* Listing-grid wrapper — the bonus cards inside come from $output (step 5).
   The grid mechanics (display:grid, the auto-fill columns, the 24px gap
   and the 2-col / 1-col responsive steps) are owned by fecv2.css with
   !important — they cannot, and need not, be set here. The step-4b
   repeat(3,1fr) / gap:14px never won against that !important and has
   been dropped as dead code. This rule now only aligns the grid to the
   .wrap content column (max-width, centred, 28px sides) so the bonus
   cards line up with the picks band / Read-first / status row above. */
.fecx .fec-grid{ max-width: var(--maxw); margin: 16px auto; padding: 0 28px; }

/* Pager — Zebra_Pagination: <nav.fec-pg><ul.pagination><li><a|span>.
   Echoed bare by the view, so it carries the .wrap constraint itself
   (max-width + centred) — needed once point 5 neutralises .fec-container,
   otherwise the <nav> would span the full viewport. */
.fecx .fec-pg{ max-width: var(--maxw); margin: 0 auto; padding: 32px 0; }
.fecx .fec-pg .pagination{
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.fecx .fec-pg li{ display: block; }
.fecx .fec-pg li a, .fecx .fec-pg li span{
  min-width: 36px; height: 36px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  text-decoration: none;
}
.fecx .fec-pg li a:hover{ border-color: var(--rule); color: var(--ink); }
.fecx .fec-pg li.active a{ background: var(--ink); color: var(--bg); font-weight: 600; }
.fecx .fec-pg li.disabled a{ color: var(--ink-4); cursor: default; }
.fecx .fec-pg li.disabled a:hover{ border-color: transparent; color: var(--ink-4); }
.fecx .fec-pg li span{ color: var(--ink-4); }

/* ================================================================
   FEC V2.1 — HUB FILTER TOOLBAR (step 4c — container redesigned, point 3)
   The button / chip / panel skins further below are UNCHANGED. Point 3
   rebuilds only the toolbar CONTAINER to the mockup's .filterbar:
   a contained, rounded --paper card instead of the full-bleed strip.

   .fec-toolbar keeps fecv2.css's position:sticky / top / z-index — it
   is still sticky, exactly as before. (fecv2.js only toggles
   .is-condensed on scrollY>80; there is no fixed / 100vw JS, so this
   is a pure CSS reskin with no script conflict.) We DO cancel the
   full-bleed (width:100vw + the 50vw negative side margins) and give
   .fec-toolbar the SAME box as .fecx .wrap (max-width / centred /
   28-18px side padding) — that is what keeps the card edge-aligned
   with the status row and the picks band. The visible card skin then
   lives on .fec-toolbar__inner, which fills that box. Everything is
   .fecx-scoped → the 7 sibling pages still get fecv2.css untouched.
   ================================================================ */

/* --- toolbar: invisible sticky wrapper, geometry cloned from .wrap --- */
.fecx .fec-toolbar{
  width: auto;
  max-width: var(--maxw);
  margin: 0 auto 20px;
  padding: 0 28px;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* --- .fec-toolbar__inner: the visible card (mockup .filterbar) --- */
.fecx .fec-toolbar__inner{
  padding: 14px;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.fecx .fec-toolbar.has-active-filters .fec-toolbar__inner,
.fecx .fec-toolbar.has-filters .fec-toolbar__inner{ border-color: var(--ink-4); }
/* Stuck state: when the sticky toolbar is pinned under the topbar, square
   the card's top corners so it reads as flush-attached to the menu, not a
   floating rounded card. .is-stuck is toggled by a small scroll listener
   (CSS alone can't detect sticky-stuck in these browsers). */
.fecx .fec-toolbar.is-stuck .fec-toolbar__inner{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- Filters button --- */
.fecx .fec-toolbtn{
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 500;
}
.fecx .fec-toolbtn:hover{ border-color: var(--ink-3); }
.fecx .fec-toolbtn[aria-expanded="true"]{ background: var(--bg-2); border-color: var(--ink-3); }
.fecx .fec-badgecount,
.fecx .fec-activecount{
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-2); font-family: var(--mono); font-weight: 600;
}

/* --- quick chips --- */
.fecx .fec-qchip{
  border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink-2); font-family: var(--sans); font-weight: 500;
}
.fecx .fec-qchip:hover{ border-color: var(--ink-3); background: var(--bg); }
.fecx .fec-qchip[aria-pressed="true"]{
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.fecx .fec-qchip[aria-pressed="true"]:hover{ background: var(--ink); border-color: var(--ink); }
.fecx .fec-qchip[data-fec-qchip="fx"][aria-pressed="true"]{
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.fecx .fec-qchip[data-fec-qchip="fx"][aria-pressed="true"]:hover{
  background: var(--accent-ink); border-color: var(--accent-ink);
}

/* --- filter panel: skin only (NEVER set display — `hidden` drives it) --- */
.fecx .fec-filters{ border-top-color: var(--rule); background: var(--paper); }
.fecx .fec-fgrp{ border-bottom-color: var(--rule); }
.fecx .fec-fgrp__title{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.fecx .fec-fhint{ font-size: 12px; color: var(--ink-3); }
.fecx .fec-filterchip{
  border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink-2); font-family: var(--sans); font-weight: 500;
}
.fecx .fec-filterchip:hover{ border-color: var(--ink-3); }
.fecx .fec-filterchip[aria-pressed="true"]{
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}

/* --- filter footer (Reset / Apply) — scoped to the panel only --- */
.fecx .fec-factions{ background: var(--paper); border-top-color: var(--rule); }
.fecx .fec-factions .fec-btn{
  border-radius: var(--radius-sm); font-family: var(--sans); font-weight: 600;
}
.fecx .fec-factions .fec-btn--ghost{
  background: var(--bg); border: 1px solid var(--rule); color: var(--ink-2);
}
.fecx .fec-factions .fec-btn--ghost:hover{ border-color: var(--ink-3); color: var(--ink); }
.fecx .fec-factions .fec-btn--primary{
  background: var(--ink); border: 1px solid var(--ink); color: var(--bg);
}
.fecx .fec-factions .fec-btn--primary:hover{ opacity: .92; }

/* --- filter panel: mobile bottom-sheet (Strada A) ----------------
   fecv2.css runs the panel in-flow inside the sticky toolbar and
   caps it with max-height:calc(100vh - topbar - 74px) — a calc that
   ignores the toolbar's own chip rows, so on mobile the panel runs
   taller than the viewport: the sticky Reset/Apply bar drops off
   screen and the in-flow panel entangles messily with page scroll.
   On <=980px we detach the panel into a fixed bottom-sheet with a
   real, viewport-bounded height — .fec-factions then pins reliably
   and the sheet is fully self-contained. Driven by .is-filters-open
   (added to .fec-toolbar by fecv2.js). Hub-scoped; siblings inherit
   it when they migrate. */
.fecx .fec-filters-scrim{ display: none; }  /* JS-injected; shown only as the mobile sheet scrim */
@media (max-width: 980px){
  .fecx .fec-toolbar.is-filters-open .fec-filters{
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none;
    margin: 0;
    padding: 10px 0 0;
    max-height: 85vh;            /* fallback for browsers without dvh */
    max-height: 85dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 40px rgba(20, 17, 13, .22);
    z-index: 2;
    animation: fec-filtersheet-in .22s ease-out;
  }
  /* room for the pinned action bar (incl. iOS home-indicator inset) */
  .fecx .fec-toolbar.is-filters-open .fec-filters__inner{
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .fecx .fec-toolbar.is-filters-open .fec-factions{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* grab handle — visual cue that the sheet is dismissable */
  .fecx .fec-toolbar.is-filters-open .fec-filters::before{
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 6px auto 10px;
    border-radius: 999px;
    background: var(--ink-4);
  }
  /* scrim behind the sheet — a real <div> (injected by JS), so it is
     tappable: a tap dismisses the sheet. CSS shows/hides it via
     .is-filters-open, exactly as the former ::after scrim did. */
  .fecx .fec-toolbar.is-filters-open .fec-filters-scrim{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 13, .42);
    z-index: 1;
    animation: fec-filtersheet-fade .22s ease-out;
  }
}
@keyframes fec-filtersheet-in{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}
@keyframes fec-filtersheet-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .fecx .fec-toolbar.is-filters-open .fec-filters,
  .fecx .fec-toolbar.is-filters-open .fec-filters-scrim{ animation: none; }
}

/* ================================================================
   FEC V2.1 — HUB BONUS CARD (step 5a)
   States and elements the mockup placeholder did not cover, plus the
   card CTA. The CTA keeps the canonical .fec-btn markup: Details is a
   plain link, PLAY comes from fec_render_cta() (so it retains
   rel="nofollow sponsored noopener") — both are restyled here.
   ================================================================ */

/* extra .tag variants for the 4 FXCheck states (verified=tag-ok already) */
.fecx .tag-mute{ background: var(--bg-2); color: var(--ink-3); }
.fecx .tag-bad{ background: var(--danger-soft); color: var(--danger); }

/* non-active offers (unavailable / expired / geo-blocked) -- "archived" look
   matching the mockup: solid muted background instead of an opacity wash,
   text dimmed via colour. The opacity approach desaturated everything
   uniformly (looked like a stale ghost); the solid-bg approach reads as
   "stamped / archived" while keeping content legible. */
.fecx .hub-bonus--dim {
  background: var(--bg-2);
  border-color: var(--rule-2);
}
.fecx .hub-bonus--dim .hub-bonus-amount { color: var(--ink-3); }
.fecx .hub-bonus--dim .hub-bonus-name { color: var(--ink-2); }
.fecx .hub-bonus--dim .hub-bonus-sub { color: var(--ink-4); }

/* Expired date stamp ("Expired Nov 2025") emitted by the lib for non-ACTIVE
   cards. Sits between facts row and the CTA. Mono + muted to read as an
   archival breadcrumb, not as a primary signal. */
.fecx .hub-bonus-expired-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-align: center;
  padding-top: 4px;
}

/* card CTA — Details + PLAY both carry .fec-btn; restyle to V2.1 buttons */
.fecx .hub-bonus-cta .fec-btn{
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.fecx .hub-bonus-cta .fec-btn--ghost{ background: var(--bg); color: var(--ink-2); }
.fecx .hub-bonus-cta .fec-btn--ghost:hover{ border-color: var(--ink-3); color: var(--ink); }
.fecx .hub-bonus-cta .fec-btn--primary{ background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fecx .hub-bonus-cta .fec-btn--primary:hover{ opacity: .92; }

/* ================================================================
   FEC V2.1 — Sticky CTA bar (appears on scroll past hero)
   Markup is legacy (.fec-cta-sticky / .fec-btn etc.); behavior is
   controlled by JS via .is-on on the bar + .has-sticky-cta on body.
   We only restyle here to align visually with the bd-hero actions.
   ================================================================ */
.fecx .fec-cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 12px 16px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
.fecx .fec-cta-sticky.is-on { transform: translateY(0); }
.fecx .fec-cta-sticky__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.fecx .fec-cta-sticky .fec-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 17px;
  min-width: 110px;
  border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.fecx .fec-cta-sticky .fec-btn:active { transform: translateY(1px); }
.fecx .fec-cta-sticky .fec-btn--ghost {
  background: transparent;
  color: var(--ink);
}
.fecx .fec-cta-sticky .fec-btn--ghost:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
.fecx .fec-cta-sticky .fec-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.fecx .fec-cta-sticky .fec-btn--primary:hover { opacity: .92; }
body.fecx.has-sticky-cta { padding-bottom: 68px; }

@media (max-width: 640px) {
  .fecx .fec-cta-sticky { padding: 10px 12px; }
  .fecx .fec-cta-sticky__inner { gap: 8px; justify-content: stretch; }
  .fecx .fec-cta-sticky .fec-btn {
    flex: 1; min-width: 0;
    padding: 11px 12px; font-size: 13px;
  }
}

/* ================================================================
   FEC V2.1 — HUB chip rows: horizontal scroll on mobile (<=640px)
   .hub-browse and .hub-readfirst wrap to 2-3 lines on narrow screens,
   adding page height. Below 640px each becomes a single sideways-
   scrolling row; the scrollbar is hidden. .hub-browse (transparent)
   gets a right-edge fade as the scroll hint; .hub-readfirst is a solid
   box, so it keeps a crisp edge and relies on the clipped last link.
   ================================================================ */
@media (max-width: 640px) {
  .fecx .hub-browse,
  .fecx .hub-readfirst {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                       /* Firefox */
  }
  .fecx .hub-browse::-webkit-scrollbar,
  .fecx .hub-readfirst::-webkit-scrollbar { display: none; }   /* WebKit */

  /* items keep their size and never wrap internally */
  .fecx .hub-browse-chip,
  .fecx .hub-readfirst .lbl,
  .fecx .hub-readfirst a { flex: 0 0 auto; white-space: nowrap; }

  /* .hub-browse: right-edge fade signals there is more to scroll */
  .fecx .hub-browse {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ================================================================
   FEC V2.1 — status row, toolbar and listing grid all follow .fecx
   .wrap's side padding on mobile (.fecx .wrap drops 28px -> 18px at
   <=760px), keeping every block edge-aligned at all sizes.
   ================================================================ */
@media (max-width: 760px) {
  .fecx .fec-minirow,
  .fecx .fec-toolbar,
  .fecx .fec-grid { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================================
 * BONUS DETAIL VIEW  (.bd-*)
 * ----------------------------------------------------------------------------
 * Single-bonus detail page (com_bonuses view=details). Gated by
 * fec_is_fecx_detail() -> .fecx body class (see index.php).
 * The Decision-notes block reuses the hub long-form shell (.hub-longform /
 * .hub-toc / .hub-content); rules that touch those shared classes are scoped
 * under .bd-notes / .bd-related so they cannot affect the hub or its siblings.
 * ============================================================================ */

/* ---- Hero card ---- */
.fecx .bd-hero { padding: 20px 0 32px; }
.fecx .bd-hero-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.fecx .bd-hero-left { display: flex; flex-direction: column; gap: 14px; }
.fecx .bd-hero-casinoline {
  display: flex; align-items: center; gap: 12px;
}
.fecx .bd-hero-casino { font-weight: 600; font-size: 15px; color: var(--ink); }
.fecx .bd-hero-statuses {
  display: flex; gap: 6px; margin-left: auto;
}
.fecx .bd-hero-statuses .tag-active {
  background: var(--verified-soft);
  color: var(--verified);
}
.fecx .bd-hero-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.fecx .bd-hero-title .amount { color: var(--accent); font-size: inherit; }
.fecx .bd-hero-title .what {
  border-bottom: 2px solid var(--rule);
  padding-bottom: 1px;
  font-size: inherit;
}
.fecx .bd-hero-game-meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-3);
  display: flex; gap: 14px; align-items: center;
}
.fecx .bd-hero-game-meta .meta-rel { color: var(--ink-2); }
.fecx .bd-hero-game-meta a.meta-rel {
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
.fecx .bd-hero-game-meta .meta-rel .lbl {
  color: var(--accent);
  font-weight: 600;
}
.fecx .bd-hero-game-meta a.meta-rel:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.fecx .bd-hero-game-meta a.meta-rel:hover .lbl {
  color: var(--accent-ink);
}

/* FXCheck panel (right) */
.fecx .bd-fxpanel {
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--rule-2);
}
.fecx .bd-fxpanel-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .bd-fxpanel-head .tag-verified {
  background: var(--verified-soft);
  color: var(--verified);
  font-size: 10px; padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: auto;
  letter-spacing: 0.08em;
}
.fecx .bd-fxstats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2.4fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.fecx .bd-fxstat {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-right: 1px solid var(--rule-2);
  font-size: 12px;
}
.fecx .bd-fxstat:last-child { border-right: none; }
.fecx .bd-fxstat .k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .bd-fxstat .v {
  font-weight: 700; color: var(--ink);
}
.fecx .bd-fxstat .v.yes { color: var(--verified); }
.fecx .bd-fxstat .v.no { color: var(--ink-4); }
.fecx .bd-fxstat.fresh .v {
  font-family: var(--mono); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  white-space: nowrap;
}
.fecx .bd-fxstat.fresh .v::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verified);
  box-shadow: 0 0 0 0 rgba(28,122,74,0.6);
  animation: fecx-fresh-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes fecx-fresh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(28,122,74,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(28,122,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,122,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .fecx .bd-fxstat.fresh .v::before { animation-duration: 4s; }
}
.fecx .bd-hero-actions {
  display: flex; gap: 10px; margin-top: auto;
  justify-content: flex-end;
}
.fecx .bd-hero-actions .btn { min-width: 110px; justify-content: center; }
.fecx .bd-hero-actions .btn-play { letter-spacing: 0.08em; font-weight: 600; }

/* ---- Jump-to nav ---- */
.fecx .bd-jumpto {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 24px;
  position: sticky; top: 60px; z-index: 5;
}
.fecx .bd-jumpto .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .bd-jumpto .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fecx .bd-jumpto a.chip { background: var(--bg); }
.fecx .bd-jumpto a.chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- Vote widget ---- */
.fecx .bd-vote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 24px;
  margin-bottom: 20px;
}
.fecx .bd-vote h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.fecx .bd-vote p { color: var(--ink-3); margin: 0; font-size: 13px; }
.fecx .bd-vote p a {
  color: var(--accent); border-bottom: 1px dotted var(--accent); padding-bottom: 1px;
}
.fecx .bd-vote-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fecx .bd-vote-actions .btn { min-width: 70px; justify-content: center; }
.fecx .bd-vote-fxnote {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--ink-4);
  margin-top: 6px;
}
.fecx .bd-vote-fxnote b { color: var(--ink-3); }

/* ---- Reports list ---- */
.fecx .bd-reports {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.fecx .bd-reports-head {
  padding: 16px 22px 8px;
  border-bottom: 1px solid var(--rule-2);
}
.fecx .bd-reports-head h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.fecx .bd-reports-head .sub {
  font-size: 12px; color: var(--ink-3);
}
.fecx .bd-reports-list { list-style: none; margin: 0; padding: 0; }
.fecx .bd-reports-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--rule-2);
}
.fecx .bd-reports-list li:last-child { border-bottom: none; }
.fecx .bd-reports-row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.fecx .bd-reports-row1 .user { font-weight: 600; color: var(--ink); }
.fecx .bd-reports-row1 .flag {
  display: inline-block;
  width: 18px; height: 18px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  flex-shrink: 0;
}
.fecx .bd-reports-row1 .sep { color: var(--ink-4); font-size: 11px; }
.fecx .bd-reports-row1 .action {
  color: var(--verified);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
}
.fecx .bd-reports-row1 .time {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.fecx .bd-reports-list .note {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
  padding-left: 0;
}
.fecx .bd-reports-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--rule-2);
  background: var(--bg-2);
  display: flex; justify-content: space-between; align-items: center;
}
.fecx .bd-reports-foot .meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

/* ---- Stats grid (2x2) ---- */
.fecx .bd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.fecx .bd-stat-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.fecx .bd-stat-card h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.fecx .bd-stat-card .kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.fecx .bd-stat-card .kvs.single { grid-template-columns: 1fr; }
.fecx .bd-stat-card .kv .k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.fecx .bd-stat-card .kv .v {
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.fecx .bd-stat-card .kv .v.yes { color: var(--verified); font-weight: 600; }
.fecx .bd-stat-card .kv .v.no { color: var(--danger); font-weight: 600; }

/* Watch out for */
.fecx .bd-watchout-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fecx .bd-watchout-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  align-items: start;
}
.fecx .bd-watchout-list li .sev {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 7px;
  background: var(--ink-4);
  align-self: start;
}
.fecx .bd-watchout-list li.high .sev { background: var(--danger); }
.fecx .bd-watchout-list li.med .sev { background: var(--warn); }
.fecx .bd-watchout-list li.low .sev { background: var(--ink-3); }
.fecx .bd-watchout-list .text { font-weight: 600; font-size: 14px; color: var(--ink); }
.fecx .bd-watchout-list .detail { font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }

/* Eligibility */
.fecx .bd-elig-list {
  display: flex; flex-wrap: wrap;
}
.fecx .bd-elig-list .country,
.fecx .bd-elig-list .more {
  margin: 0 8px 8px 0;
}
.fecx .bd-elig-list .country {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  font-size: 12px; color: var(--ink-2);
}
.fecx .bd-elig-list .more {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
  list-style: none;
}
.fecx .bd-elig-list .more::-webkit-details-marker { display: none; }
.fecx .bd-elig-list .more::after { content: " \203A"; margin-left: 2px; }
.fecx .bd-elig-list .bd-elig-more { display: contents; }
.fecx .bd-elig-list .bd-elig-more:not([open]) > .country { display: none; }
.fecx .bd-elig-list .bd-elig-more[open] > .more { display: none; }

/* ---- Decision notes block ---- */
.fecx .bd-notes {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 32px;
}
.fecx .bd-notes h2.bd-section-title {
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 24px;
}
.fecx .bd-notes .hub-longform {
  padding: 0;
}
.fecx .bd-notes .hub-toc { top: 80px; }
/* When the TOC navigates via #hash, leave room for the sticky topbar (60px)
   and the bd-jumpto bar (sticky at top: 60px). 110px clears both with breathing room. */
.fecx .bd-notes .hub-content section[id] { scroll-margin-top: 110px; }

/* Long-form additions */
.fecx .bd-notes .hub-content h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 20px 0 12px;
}
.fecx .bd-notes .hub-content .lf-termlist {
  list-style: none; margin: 0 0 18px; padding: 0;
  border-top: 1px solid var(--rule-2);
}
.fecx .bd-notes .hub-content .lf-termlist li {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: 14px;
}
.fecx .bd-notes .hub-content .lf-termlist .k { font-weight: 600; color: var(--ink); }
.fecx .bd-notes .hub-content .lf-termlist .v { color: var(--ink-2); }
.fecx .bd-notes .hub-content .lf-subdef {
  font-size: 14px; margin: 4px 0 4px;
}
.fecx .bd-notes .hub-content .lf-subdef b { font-weight: 600; }
.fecx .bd-notes .hub-content .lf-steps {
  margin: 12px 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: bdstep;
}
.fecx .bd-notes .hub-content .lf-steps li {
  counter-increment: bdstep;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.fecx .bd-notes .hub-content .lf-steps li::before {
  content: counter(bdstep, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px;
  color: var(--accent);
  padding-top: 2px;
  font-weight: 600;
}
.fecx .bd-notes .hub-content .lf-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.fecx .bd-notes .hub-content .lf-twocol > div {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
}
.fecx .bd-notes .hub-content .lf-twocol .good { background: var(--verified-soft); }
.fecx .bd-notes .hub-content .lf-twocol .bad { background: var(--warn-soft); }
.fecx .bd-notes .hub-content .lf-twocol h4 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 10px;
  font-weight: 600;
}
.fecx .bd-notes .hub-content .lf-twocol .good h4 { color: var(--verified); }
.fecx .bd-notes .hub-content .lf-twocol .bad h4 { color: var(--warn); }
.fecx .bd-notes .hub-content .lf-twocol ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.fecx .bd-notes .hub-content .lf-twocol .good li::before { content: "✓ "; color: var(--verified); font-weight: 600; }
.fecx .bd-notes .hub-content .lf-twocol .bad li::before { content: "× "; color: var(--warn); font-weight: 600; }

/* ---- FAQ inside decision notes (native details/summary) ---- */
.fecx .bd-faq {
  margin-top: 8px;
}
.fecx .bd-faq details {
  margin-bottom: 10px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
}
.fecx .bd-faq summary {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  list-style: none; /* Firefox: hide native disclosure triangle */
}
.fecx .bd-faq summary::-webkit-details-marker {
  display: none; /* Safari/Chrome: hide native disclosure triangle */
}
/* Custom chevron via ::after, rotates 90deg when open */
.fecx .bd-faq summary::after {
  content: "\203A"; /* right single angle quotation mark */
  color: var(--ink-3);
  transition: transform 0.2s ease, color 0.2s ease;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
  padding-left: 12px;
  flex-shrink: 0;
}
.fecx .bd-faq details[open] summary::after {
  transform: rotate(90deg);
  color: var(--accent);
}
.fecx .bd-faq .bd-faq-a {
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.fecx .bd-faq .bd-faq-a p {
  margin: 0 0 10px;
}
.fecx .bd-faq .bd-faq-a p:last-child {
  margin: 0;
}

/* ---- Byline (long form) ---- */
.fecx .bd-author {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px; align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.fecx .bd-author .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-2), var(--rule));
  /* Use inset shadow instead of border: takes no layout space, so the inner
     content (initials or photo) can fill the full visible circle. The img
     paints on top of the inset shadow and covers it; the initials placeholder
     still shows the subtle ring. */
  box-shadow: inset 0 0 0 1px var(--rule);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  color: var(--ink);
  overflow: hidden; /* clip child <img> to the circular shape */
}
/* When an actual photo is present, fill the avatar and crop proportionally
   so the face is centered, not squashed into the square viewport. Scaled to
   110% to overcome sub-pixel rendering gaps at the rounded edge; the parent
   grid's `place-items: center` centers the oversize image, and the parent's
   `overflow: hidden` clips the excess. */
.fecx .bd-author .avatar img {
  width: 110%; height: 110%;
  object-fit: cover;
  display: block;
}
.fecx .bd-author .who {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .bd-author .name {
  font-weight: 700; font-size: 15px; color: var(--ink);
  margin-top: 2px;
}
.fecx .bd-author .role { font-size: 13px; color: var(--ink-3); }
.fecx .bd-author .meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  margin-top: 6px;
}
.fecx .bd-author .meta b { color: var(--ink-2); font-weight: 600; }
.fecx .bd-author .bio { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ---- Related ---- */
.fecx .bd-related { padding: 32px 0; border-top: 1px solid var(--rule); }
.fecx .bd-related h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.fecx .bd-related .alllink {
  font-size: 13px; color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.fecx .bd-related .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.fecx .bd-related .hub-bonus .match-tag {
  position: absolute; top: -1px; left: 16px;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.fecx .bd-related .hub-bonus .match-tag.closest { color: var(--verified); border-color: rgba(28,122,74,0.4); }
.fecx .bd-related .hub-bonus .match-tag.alternative { color: var(--ink-3); }

/* ---- Bottom nav ---- */
.fecx .bd-bottomnav {
  display: flex; justify-content: center; align-items: center; gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2);
}
.fecx .bd-bottomnav a:hover { color: var(--ink); }
.fecx .bd-bottomnav a.back-top { color: var(--ink); font-weight: 500; }

/* ============================================================================
 * CASINO BONUSES HUB (cb-*)
 * Used by BonusesViewCasino (default.php). Editorial hub listing all bonuses
 * for a single casino. Sections: head, intro, fxbox, tabs, section-title,
 * watchout. Bonus cards reuse the shared .hub-bonus / .hub-grid.
 *
 * Backward compat: editorial intro overrides in helpers/intro_overrides_cid.php
 * use the legacy `.fec-intro` / `.fec-intro__links` / `.fec-dot` markup and
 * `<strong>` for emphasis. Each .cb-intro rule below also targets the legacy
 * class so the override files keep working unchanged.
 * ============================================================================ */

/* ---- Head: eyebrow + grid (title-left, updated-pill-right) + tagline ---- */
.fecx .cb-head { padding: 24px 0 16px; }
.fecx .cb-head-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px;
}
.fecx .cb-head-left { display: flex; flex-direction: column; gap: 10px; }
.fecx .cb-head-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.fecx .cb-head-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.fecx .cb-head-meta {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--ink-3);
  display: flex; gap: 14px; align-items: center;
}
.fecx .cb-head-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
  display: inline-block;
}
.fecx .cb-head-tagline {
  font-size: 14px; color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.fecx .cb-head-tag {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 13px; color: var(--ink-3);
  gap: 6px;
}

/* Updated pill (outer rounded container + inner mini-pill for relative time).
   Layout in mockup:
     [ UPDATED  May 14, 2026  ( Updated 6 days ago ) ]
   Outer:  thin border, transparent bg, pill-shaped, mono typography.
   Inner:  bg-2 mini-pill for the "X days ago" relative label. */
.fecx .cb-updated {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 4px 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.fecx .cb-updated-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-right: 8px;
}
.fecx .cb-updated-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-right: 10px;
}
.fecx .cb-updated-rel {
  /* Subtle overlay (5% black) rather than --bg-2 so the inner pill
     reads as a tonal echo of the outer rather than a contrasting block. */
  background: var(--bg-2);
  color: var(--ink-3);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
}

/* ---- Intro (editorial brand block) -----------------------------------------
   Aliases: targets both .cb-intro (new) and .fec-intro (legacy override files).
*/
.fecx .cb-intro,
.fecx .fec-intro {
  padding: 20px 0 8px;
}
.fecx .cb-intro p,
.fecx .fec-intro p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 78ch;
}
.fecx .fec-intro a { font-size: 14px; }
.fecx .cb-intro p b,
.fecx .cb-intro p strong,
.fecx .fec-intro p b,
.fecx .fec-intro p strong {
  color: var(--ink); font-weight: 600;
}
.fecx .cb-intro-links,
.fecx .fec-intro__links {
  display: flex; flex-wrap: wrap; gap: 16px 22px;
  font-size: 14px;
  padding-bottom: 8px;
  margin: 0; /* reset <p> margin in legacy override markup */
  max-width: none;
}
.fecx .cb-intro-links a,
.fecx .fec-intro__links a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 1px;
  transition: color 0.1s ease, border-bottom-color 0.1s ease;
}
.fecx .cb-intro-links a:hover,
.fecx .fec-intro__links a:hover {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.fecx .cb-intro-links .dot,
.fecx .fec-intro__links .fec-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
  align-self: center;
  display: inline-block;
}

/* ---- FXCheck box (casino-level summary + recent reports list) -------------- */
.fecx .cb-fxbox {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 24px 0 28px;
}
.fecx .cb-fxbox-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 14px;
}
.fecx .cb-fxbox-title { display: flex; flex-direction: column; gap: 4px; }
.fecx .cb-fxbox-title h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.fecx .cb-fxbox-title .sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-3);
  display: flex; gap: 10px; align-items: center;
}
.fecx .cb-fxbox-title .sub a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.fecx .cb-fxbox-stats {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px;
}
.fecx .cb-fxbox-stats .positive {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--verified-soft);
  color: var(--verified);
  font-weight: 600;
}
.fecx .cb-fxbox-stats .positive::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verified);
}
.fecx .cb-fxbox-stats .reports { color: var(--ink-3); }
.fecx .cb-fxbox-list { display: flex; flex-direction: column; gap: 8px; }
.fecx .cb-fxbox-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.fecx .cb-fxbox-item .icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.fecx .cb-fxbox-item .icon.yes { color: var(--verified); }
.fecx .cb-fxbox-item .icon.no  { color: var(--danger); }
.fecx .cb-fxbox-item .body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.fecx .cb-fxbox-item .body .row1 {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.fecx .cb-fxbox-item .body .verdict { font-weight: 600; }
.fecx .cb-fxbox-item .body .verdict.yes { color: var(--verified); }
.fecx .cb-fxbox-item .body .verdict.no  { color: var(--danger); }
.fecx .cb-fxbox-item .body .btype a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.fecx .cb-fxbox-item .body .ago {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.fecx .cb-fxbox-item .body .comment {
  font-size: 12px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}
.fecx .cb-fxbox-item .view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}
.fecx .cb-fxbox-item .view:hover { border-color: var(--ink-3); color: var(--ink); }
.fecx .cb-fxbox-cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  flex-wrap: wrap; gap: 10px;
}
.fecx .cb-fxbox-cta-left {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink-2);
}
.fecx .cb-fxbox-cta-left b { color: var(--ink); font-weight: 600; }
.fecx .cb-fxbox-cta-left a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.fecx .cb-fxbox-cta-right {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 0.04em;
}
.fecx .cb-fxbox-empty {
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-3);
}

/* ---- Tabs (Active / Show expired / sort label) ---------------------------- */
.fecx .cb-tabs {
  display: flex; align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
  border-top: 1px solid var(--rule-2);
}
.fecx .cb-tabs .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px; color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.fecx .cb-tabs .tab:hover { color: var(--ink); }
.fecx .cb-tabs .tab.active {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.fecx .cb-tabs .tab .count {
  font-family: var(--mono); font-size: 11px;
  opacity: 0.7;
}
.fecx .cb-tabs-spacer { flex: 1; }
.fecx .cb-tabs .sort {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

/* ---- Section title (h2 + right-aligned counter) --------------------------- */
.fecx .cb-section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 24px 0 16px;
}
.fecx .cb-section-title h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.fecx .cb-section-title .meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

/* ---- Watchout callout (bottom of list, generic warnings) ------------------ */
.fecx .cb-watchout {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 32px 0 16px;
}
.fecx .cb-watchout h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.fecx .cb-watchout-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fecx .cb-watchout-list li {
  font-size: 14px; color: var(--ink-2);
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}
.fecx .cb-watchout-list li::before {
  content: "\2192"; /* right arrow */
  color: var(--ink-3);
  font-family: var(--mono);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.5;
}
.fecx .cb-watchout-list b { color: var(--ink); font-weight: 600; }

/* ---- Pagination (hub-pager) reused at the bottom of the casino list ------- */
/* (already styled via shared .hub-pager rules in BONUSES HUB section above) */

@media (max-width: 900px) {
  .fecx .bd-hero-card { grid-template-columns: 1fr; }
  .fecx .bd-stats { grid-template-columns: 1fr; }
  .fecx .bd-fxstats { grid-template-columns: 1fr 1fr; }
  .fecx .bd-fxstat { border-bottom: 1px solid var(--rule-2); }
  .fecx .bd-notes { padding: 22px 18px; }
  .fecx .bd-notes .hub-content .lf-twocol { grid-template-columns: 1fr; }
  .fecx .bd-notes .hub-content .lf-termlist li { grid-template-columns: 1fr; gap: 4px; }
  /* Jump-to: scroll orizzontale invece di wrap, con fade hint a destra */
  .fecx .bd-jumpto { overflow: hidden; }
  .fecx .bd-jumpto::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--paper));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .fecx .bd-jumpto .lbl { white-space: nowrap; }
  .fecx .bd-jumpto .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 24px;
  }
  .fecx .bd-jumpto .chips::-webkit-scrollbar { display: none; }
  .fecx .bd-jumpto .chip { flex-shrink: 0; white-space: nowrap; }
  /* CASINO BONUSES HUB responsive */
  .fecx .cb-head-grid { grid-template-columns: 1fr; }
  .fecx .cb-head-tag { align-items: flex-start; }
  .fecx .cb-fxbox-head { flex-direction: column; align-items: flex-start; }
  .fecx .cb-fxbox-stats { margin-left: 0; }
  .fecx .cb-fxbox-item { grid-template-columns: 22px 1fr; }
  .fecx .cb-fxbox-item .view { grid-column: 2; justify-self: end; margin-top: 4px; }
  .fecx .cb-tabs { flex-wrap: wrap; }
  .fecx .cb-tabs-spacer { display: none; }
}

/* Hero mobile tightening (≤640px) — title smaller, card padding ridotto,
   casino-line wrappable, game-meta items atomici con row-gap. */
@media (max-width: 640px) {
  .fecx .bd-hero-card { padding: 18px 16px; }
  .fecx .bd-hero-title { font-size: 24px; }
  .fecx .bd-hero-casinoline { flex-wrap: wrap; row-gap: 8px; }
  /* Badge mobile: stanno vicini al casino name (no auto-right), più piccoli */
  .fecx .bd-hero-statuses { margin-left: 0; }
  .fecx .bd-hero-statuses .tag { font-size: 9px; padding: 2px 6px; }
  .fecx .bd-hero-game-meta {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 10px;
  }
  .fecx .bd-hero-game-meta > span,
  .fecx .bd-hero-game-meta > a { white-space: nowrap; }
  /* .bd-related header (title + "See all..." link): on narrow screens they
     don't fit on the same flex row and both wrap into mangled multi-line
     blocks. Stack vertically with the link below the title. */
  .fecx .bd-related .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  /* .cb-fxbox-cta-left: the "Tried a bonus here? Report your experience"
     pair sits in a flex row with gap:12px; on narrow screens both children
     wrap internally into mangled 2-line stacks. Make the inner row a column
     so each text gets its own line. The outer .cb-fxbox-cta already wraps
     (flex-wrap: wrap) so the cta-right disclaimer drops below on its own. */
  .fecx .cb-fxbox-cta-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================================
 * BONUS DETAIL -- interactive pieces not covered by the mockup
 * Vote submission form, FXCheck "why issues" accordion, report/message states.
 * Same .fecx scoping + design tokens as the rest of this file.
 * ============================================================================ */

/* ---- Vote widget: main column, message, verified line ---- */
.fecx .bd-vote-main { flex: 1 1 320px; min-width: 0; }
.fecx .bd-vote-msg { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.fecx .bd-vote-msg:empty { display: none; }
.fecx .bd-vote-msg a,
.fecx .bd-see-reports {
  color: var(--accent); border-bottom: 1px dotted var(--accent); padding-bottom: 1px;
}
.fecx .bd-vote-msg.is-success { color: var(--verified); }
.fecx .bd-vote-msg.is-error   { color: var(--danger); }
.fecx .bd-vote-msg.is-info    { color: var(--ink-3); }
.fecx .bd-vote-verified { font-size: 12px; color: var(--verified); margin-top: 8px; }
.fecx .bd-vote-verified[hidden] { display: none; }
.fecx .bd-vote-verified strong { font-weight: 700; }

/* ---- Vote widget: inline submission form (kept inline per design call) ---- */
.fecx .bd-vote-form {
  flex-basis: 100%;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding-top: 16px;
  border-top: 1px solid var(--rule-2);
}
.fecx .bd-vote-field { display: flex; flex-direction: column; gap: 4px; }
.fecx .bd-vote-field-k { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fecx .bd-vote-name,
.fecx .bd-vote-comment {
  font: inherit; font-size: 13px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 8px 10px; width: 100%;
}
.fecx .bd-vote-name:focus,
.fecx .bd-vote-comment:focus { outline: none; border-color: var(--accent); }
.fecx .bd-vote-comment { resize: vertical; min-height: 64px; }
.fecx .bd-vote-submit { align-self: flex-start; }

/* ---- Vote button + form states (toggled by the FXCheck JS) ---- */
.fecx .bd-vote-actions .btn.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.fecx .bd-vote-actions .btn.is-disabled,
.fecx .bd-vote-actions .btn[disabled],
.fecx .bd-vote-submit[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- "Why people report issues" accordion (.bd-whystats) ---- */
.fecx .bd-whystats {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.fecx .bd-whystats-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0;
  padding: 14px 18px; text-align: left; cursor: pointer; font: inherit;
}
.fecx .bd-whystats-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.fecx .bd-whystats-hint {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-left: auto;
}
.fecx .bd-whystats-chev { color: var(--ink-4); display: flex; transition: transform 0.15s ease; }
.fecx .bd-whystats-toggle[aria-expanded="true"] .bd-whystats-chev { transform: rotate(180deg); }
.fecx .bd-whystats-panel { border-top: 1px solid var(--rule-2); }
.fecx .bd-whystats-panel[hidden] { display: none; }
.fecx .bd-whystats-body { padding: 14px 18px; }
.fecx .bd-whystats-intro { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.fecx .bd-whystats-reasons { list-style: none; margin: 0 0 10px; padding: 0; }
.fecx .bd-whystats-reasons li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px;
}
.fecx .bd-whystats-reasons li:last-child { border-bottom: none; }
.fecx .bd-whystats-reasons .k { color: var(--ink-2); }
.fecx .bd-whystats-reasons .v {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.fecx .bd-whystats-cta { margin: 0; font-size: 13px; }

/* ---- Reports: footer status, empty state, per-report outcome accent ---- */
.fecx .bd-reports-status { font-size: 12px; color: var(--ink-3); }
.fecx .bd-reports-status:empty { display: none; }
.fecx .bd-reports-empty { list-style: none; padding: 16px 0; color: var(--ink-4); font-size: 13px; }
.fecx .bd-report--yes .action { color: var(--verified); }
.fecx .bd-report--no .action  { color: var(--warn); }

/* ========================================================================
   FEC V2.1 — Editorial Team page styles (.tm-* family)
   Ported from Editorial_Team_bundle.html mockup. All selectors are
   .fecx-scoped so the rules stay inert outside the team page.
   ======================================================================== */

.fecx .tm-hero {
  padding: 32px 0 48px;
  border-bottom: 1px solid var(--rule);
}

.fecx .tm-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: end;
}

.fecx .tm-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 14px 0 22px;
  max-width: 18ch;
}

.fecx .tm-title em {
  color: var(--accent);
  font-style: normal;
}

.fecx .tm-intro {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}

.fecx .tm-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.fecx .tm-hero-stat {
  padding: 18px 20px;
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}

.fecx .tm-hero-stat:nth-child(2n) {
  border-right: none;
}

.fecx .tm-hero-stat:nth-last-child(-n+2) {
  border-bottom: none;
}

.fecx .tm-hero-stat .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.fecx .tm-hero-stat .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.fecx .tm-principles {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}

.fecx .tm-principles-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.fecx .tm-principles-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}

.fecx .tm-principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.fecx .tm-principle {
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fecx .tm-principle:nth-child(1) {
  padding-right: 24px;
}

.fecx .tm-principle:nth-child(n+2) {
  padding-left: 24px;
}

.fecx .tm-principle:last-child {
  border-right: none;
  padding-right: 0;
}

.fecx .tm-principle .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
}

.fecx .tm-principle h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.fecx .tm-principle p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

.fecx .tm-bylines {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}

.fecx .tm-bylines-head {
  margin-bottom: 28px;
}

.fecx .tm-bylines-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}

.fecx .tm-bylines-head .sub {
  color: var(--ink-3);
  font-size: 14px;
  max-width: 60ch;
}

.fecx .tm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.fecx .tm-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
}

.fecx .tm-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.fecx .tm-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 40% 28%, hsla(var(--avatar-hue, 220), 35%, 88%, 0.95) 0%, hsla(var(--avatar-hue, 220), 30%, 78%, 0.7) 35%, hsla(var(--avatar-hue, 220), 30%, 68%, 0.5) 70%);
}

.fecx .tm-avatar::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: hsla(var(--avatar-hue, 220), 35%, 65%, 0.7);
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}

.fecx .tm-avatar .head {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: hsla(var(--avatar-hue, 220), 40%, 78%, 0.95);
  border: 1.5px solid hsla(var(--avatar-hue, 220), 35%, 60%, 0.5);
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 1;
}

.fecx .tm-avatar .initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: hsla(var(--avatar-hue, 220), 50%, 25%, 0.85);
  z-index: 2;
}

.fecx .tm-card .body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fecx .tm-card-titleline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fecx .tm-card-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.fecx .tm-card-name a:hover {
  color: var(--accent);
}

.fecx .tm-card-role {
  font-size: 14px;
  color: var(--ink-2);
}

.fecx .tm-card-role .div {
  color: var(--ink-4);
  margin: 0 6px;
}

.fecx .tm-card-role .sub {
  color: var(--ink-3);
}

.fecx .tm-card-tagline {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent-ink);
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.fecx .theme-dark .tm-card-tagline {
  color: var(--accent);
}

.fecx .tm-card-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.fecx .tm-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fecx .tm-specialty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  font-size: 12px;
  color: var(--ink-2);
}

.fecx .tm-specialty::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}

.fecx .tm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 12px 0;
}

.fecx .tm-stats .stat {
  text-align: left;
}

.fecx .tm-stats .stat:nth-child(n+2) {
  border-left: 1px solid var(--rule-2);
  padding-left: 14px;
}

.fecx .tm-stats .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}

.fecx .tm-stats .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.fecx .tm-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fecx .tm-recent .lbl-row {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.fecx .tm-recent .item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
}

/* Chip stays its inline-styled 36×36; don't let flexbox shrink it. */
.fecx .tm-recent .casino-chip {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

/* Two-line label: brand (bold) over bonus title (lighter, smaller).
   The whole label is a single <a> for big click target. The flex:1 +
   min-width:0 combo ensures the link fills the remaining row width
   AND allows internal text to wrap when needed (rather than overflowing). */
.fecx .tm-recent .item-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  color: var(--ink);
}

.fecx .tm-recent .item-link:hover {
  color: var(--accent-ink);
}

.fecx .tm-recent .item-brand {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.fecx .tm-recent .item-link:hover .item-brand {
  color: var(--accent-ink);
}

.fecx .tm-recent .item-title {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* Legacy .kind chip rules below are kept inert (not emitted by current
   template) for backward compatibility — older snapshots may still reference
   them. Safe to remove in a future cleanup. */
.fecx .tm-recent .kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
}

.fecx .tm-recent .kind.review {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.fecx .tm-recent .kind.guide {
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
}

.fecx .tm-recent .kind.report {
  background: var(--verified-soft);
  color: var(--verified);
}

.fecx .tm-recent .item a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
}

.fecx .tm-recent .item a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-ink);
}

.fecx .tm-card-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.fecx .tm-card-foot a {
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

.fecx .tm-card-foot a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.fecx .tm-contact {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}

.fecx .tm-contact-inner {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

.fecx .theme-dark .tm-contact-inner {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
}

.fecx .tm-contact .eyebrow {
  color: var(--ink-4);
}

.fecx .tm-contact h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 8px 0 14px;
  color: var(--bg);
}

.fecx .theme-dark .tm-contact h2 {
  color: var(--ink);
}

.fecx .tm-contact p {
  color: var(--ink-4);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}

.fecx .tm-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fecx .tm-contact-actions .btn {
  justify-content: center;
  padding: 14px 22px;
}

.fecx .tm-contact-actions .btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 13px;
  font-weight: 500;
}

.fecx .tm-contact-actions .btn-primary:hover {
  background: var(--accent-ink);
}

.fecx .tm-contact-actions .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bg);
  font-size: 13px;
}

.fecx .theme-dark .tm-contact-actions .btn-ghost {
  border-color: var(--rule);
  color: var(--ink);
}

@media (max-width: 1000px) {
  .fecx .tm-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fecx .tm-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fecx .tm-principle {
    padding: 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rule-2);
  }

  .fecx .tm-grid {
    grid-template-columns: 1fr;
  }

  .fecx .tm-contact-inner {
    grid-template-columns: 1fr;
    padding: 32px;
  }

}

@media (max-width: 640px) {
  .fecx .tm-principles-grid {
    grid-template-columns: 1fr;
  }

  .fecx .tm-card {
    grid-template-columns: 72px 1fr;
    gap: 16px;
    padding: 20px;
  }

  .fecx .tm-avatar {
    width: 72px;
    height: 72px;
  }

  .fecx .tm-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fecx .tm-stats .stat:nth-child(n+2) {
    border-left: none;
    padding-left: 0;
  }

  .fecx .tm-recent .item {
    gap: 8px;
  }

}


/* Photo avatar override.
   When .tm-avatar has the --photo modifier (real avatar_url in DB), the
   generative pseudo-elements (radial gradient backdrop + initials head)
   would render UNDER the photo. Hide them, and make the inner <img>
   fill the avatar box and crop cleanly. */
.fecx .tm-avatar--photo::before,
.fecx .tm-avatar--photo::after {
  display: none;
}

.fecx .tm-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================================
   FEC V2.1 — Single Author Profile page styles (.au-* family)
   Ported from Author_Profile_bundle.html mockup. All selectors are
   .fecx-scoped so the rules stay inert outside the author page.
   ======================================================================== */

.fecx .au-hero {
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--rule);
}

.fecx .au-hero-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 32px;
  align-items: center;
}

.fecx .au-avatar {
  width: 130px;
  height: 130px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.fecx .au-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 40% 28%, hsla(var(--avatar-hue, 220), 35%, 88%, 0.95) 0%,
                                       hsla(var(--avatar-hue, 220), 30%, 78%, 0.7)  35%,
                                       hsla(var(--avatar-hue, 220), 30%, 65%, 0.5)  70%);
}

.fecx .au-avatar::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: hsla(var(--avatar-hue, 220), 35%, 65%, 0.7);
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
}

.fecx .au-avatar .head {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: hsla(var(--avatar-hue, 220), 40%, 78%, 0.95);
  border: 1.5px solid hsla(var(--avatar-hue, 220), 35%, 60%, 0.5);
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 1;
}

.fecx .au-avatar .initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  color: hsla(var(--avatar-hue, 220), 50%, 25%, 0.85);
  z-index: 2;
}

.fecx .au-hero-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fecx .au-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.fecx .au-role {
  font-size: 15px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fecx .au-role .div {
  color: var(--ink-4);
}

.fecx .au-role .sub {
  color: var(--ink-3);
}

.fecx .au-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent-ink);
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  margin: 8px 0 4px;
  max-width: 56ch;
}

.fecx .theme-dark .au-tagline {
  color: var(--accent);
}

.fecx .au-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 8px;
}

.fecx .au-meta-row b {
  color: var(--ink-2);
  font-weight: 600;
}

.fecx .au-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.fecx .au-hero-actions .btn {
  white-space: nowrap;
}

.fecx .au-stats-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.fecx .au-stats-strip .stat {
  padding: 18px 22px;
  border-right: 1px solid var(--rule-2);
}

.fecx .au-stats-strip .stat:last-child {
  border-right: none;
}

.fecx .au-stats-strip .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.fecx .au-stats-strip .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.fecx .au-main {
  padding: 32px 0 48px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.fecx .au-bio-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 24px;
}

.fecx .au-bio-card h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
  font-weight: 600;
}

.fecx .au-bio-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 72ch;
}

.fecx .au-creds {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 28px;
  margin-bottom: 28px;
}

.fecx .au-creds .heading {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fecx .au-creds .heading .verified {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--verified-soft);
  color: var(--verified);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.fecx .au-creds ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fecx .au-creds li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-2);
  font-size: 14px;
}

.fecx .au-creds li:first-child {
  border-top: none;
  padding-top: 0;
}

.fecx .au-creds .t {
  font-weight: 600;
  color: var(--ink);
}

.fecx .au-creds .d {
  color: var(--ink-3);
  line-height: 1.5;
}

.fecx .au-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-2);
  flex-wrap: wrap;
}

.fecx .au-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.fecx .au-tabs .tab:hover {
  color: var(--ink);
}

.fecx .au-tabs .tab.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.fecx .au-tabs .tab .count {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.7;
}

.fecx .au-tab-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
  flex-wrap: wrap;
}

.fecx .au-tab-toolbar .sub-chips {
  display: flex;
  gap: 6px;
}

.fecx .au-tab-toolbar .sub-chips .chip {
  background: var(--paper);
  font-size: 12px;
  padding: 5px 12px;
}

.fecx .au-tab-toolbar .sub-chips .chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.fecx .au-tab-toolbar .total {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.fecx .au-list {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.fecx .au-row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-2);
  font-size: 13px;
  transition: background 0.1s ease;
}

.fecx .au-row:last-child {
  border-bottom: none;
}

.fecx .au-row:hover {
  background: var(--bg);
}

.fecx .au-row.expired {
  opacity: 0.65;
}

.fecx .au-row .casino-chip {
  width: 36px;
  height: 36px;
}

.fecx .au-row .main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fecx .au-row .main .top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.fecx .au-row .main .casino {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.fecx .au-row .main .id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.fecx .au-row .main .sub {
  font-size: 12px;
  color: var(--ink-3);
}

.fecx .au-row .amount {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  min-width: 90px;
}

.fecx .au-row .wager {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.fecx .au-row .fx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

.fecx .au-row .fx b.yes {
  color: var(--verified);
  font-weight: 700;
}

.fecx .au-row .fx b.no {
  color: var(--ink-4);
  font-weight: 500;
}

.fecx .au-row .status {
  min-width: 90px;
  text-align: right;
}

.fecx .au-row .status .tag-active {
  background: var(--verified-soft);
  color: var(--verified);
}

.fecx .au-row .meta-row {
  grid-column: 2 / -1;
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.fecx .au-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fecx .au-side-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 22px;
}

.fecx .au-side-card h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 12px;
}

.fecx .au-side-card .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--rule-2);
}

.fecx .au-side-card .row:last-child {
  border-bottom: none;
}

.fecx .au-side-card .row .k {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.fecx .au-side-card .row .v {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

.fecx .au-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fecx .au-expertise .item {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-2);
}

.fecx .au-side-card .social-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fecx .au-side-card .social-row a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
}

.fecx .au-side-card .social-row a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.fecx .au-side-card .social-row .ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.fecx .au-side-cta {
  background: var(--ink);
  color: var(--bg);
  padding: 20px 22px;
  border-radius: var(--radius);
}

.fecx .au-side-cta h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--bg);
}

.fecx .au-side-cta p {
  color: var(--ink-4);
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

.fecx .au-side-cta .btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  width: 100%;
  justify-content: center;
}

.fecx .au-side-cta .btn:hover {
  background: var(--accent-ink);
}

@media (max-width: 1000px) {
  .fecx .au-hero-card {
    grid-template-columns: 100px 1fr;
    gap: 20px;
  }

  .fecx .au-hero-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }

  .fecx .au-avatar {
    width: 100px;
    height: 100px;
  }

  .fecx .au-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .fecx .au-stats-strip .stat:nth-child(2) {
    border-right: none;
  }

  .fecx .au-stats-strip .stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--rule-2);
  }

  .fecx .au-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fecx .au-row {
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
  }

  .fecx .au-row .wager, .fecx .au-row .fx {
    display: none;
  }

}


/* FEC V2.1 additions to the mockup port:
   - au-row is rendered as <a> in our template (not <div>) so the whole row
     is a click target. The base au-row rule from the mockup doesn't reset
     the default <a> styles, so the link defaults (underline + accent color)
     would bleed through. These two lines neutralise that without touching
     the visual design.
   - au-avatar--photo: hide the generative pseudo-elements + head/initials
     spans when an avatar_url is set, and make the inner <img> fill the
     square box with object-fit:cover. */
.fecx .au-row {
  color: inherit;
  text-decoration: none;
}

.fecx .au-avatar--photo::before,
.fecx .au-avatar--photo::after {
  display: none;
}

.fecx .au-avatar--photo .head,
.fecx .au-avatar--photo .initials {
  display: none;
}

.fecx .au-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============================================================================
   au-* — Single Author profile pagination
   Joomla 2.5 JPagination default chrome (used by /authors/<slug> bonuses tab).

   Emitted markup (no class on <ul>, .pagenav on inner a/span):
     .au-bonuses__pagination > ul > li[.pagination-(start|prev|next|end)]?
       > (a|span).pagenav
   Conventions:
     - current page  = bare <li> + <span class="pagenav">
     - disabled nav  = <li class="pagination-*"> + <span class="pagenav">
     - clickable     = <li> or <li class="pagination-*"> + <a class="pagenav">
   ============================================================================ */
.au-bonuses__pagination {
  margin-top: 24px;
}

.au-bonuses__pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.au-bonuses__pagination li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.au-bonuses__pagination .pagenav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line, #e7e3da);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-1, #1c1f24);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  box-sizing: border-box;
}

.au-bonuses__pagination a.pagenav:hover {
  background: var(--bg-2, #f5f1e8);
  border-color: var(--ink-1, #1c1f24);
}

/* Current page: <li> senza classi .pagination-* + <span class="pagenav"> */
.au-bonuses__pagination li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span.pagenav {
  background: var(--ink-1, #1c1f24);
  color: #fff;
  border-color: var(--ink-1, #1c1f24);
  cursor: default;
}

/* Disabled nav controls (Start/Prev a pagina 1, Next/End all'ultima) */
.au-bonuses__pagination li.pagination-start > span.pagenav,
.au-bonuses__pagination li.pagination-prev > span.pagenav,
.au-bonuses__pagination li.pagination-next > span.pagenav,
.au-bonuses__pagination li.pagination-end > span.pagenav {
  color: var(--ink-3, #9ca3af);
  background: transparent;
  border-color: var(--line, #ede9de);
  cursor: default;
}

/* Responsive: su mobile compatta gap + nasconde Start/End se troppo stretto */
@media (max-width: 480px) {
  .au-bonuses__pagination ul {
    gap: 4px;
  }
  .au-bonuses__pagination .pagenav {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* ============================================================================
 * FEC V2.1 — Similar offers cards: match-label pill (.fec-similar__*)
 * ----------------------------------------------------------------------------
 * fec_render_similar_offers() emits a BEM wrapper around each .hub-bonus card:
 *
 *   <div class="fec-similar__card">
 *     <div class="fec-similar__tag fec-similar__tag--MODIFIER">Label</div>
 *     <div class="hub-bonus">... shared card markup ...</div>
 *   </div>
 *
 * The match-label is a SIBLING of .hub-bonus inside a fec-similar wrapper —
 * not a child of .hub-bonus as the original mockup expected. This keeps the
 * shared .hub-bonus card clean (it is reused across the hub, casino page,
 * and details view) and isolates the cross-sell decoration in its own scope.
 *
 * MODIFIERS (built in lib L4293 from $label via str_replace + preg_replace):
 *   --closestmatch       "Closest match"     top match, strong verified
 *   --lowerwager         "Lower wager"       trade-off positive
 *   --highercap          "Higher cap"        trade-off positive
 *   --cashable           "Cashable"          trade-off positive
 *   --higheryesrate      "Higher Yes-rate"   trade-off positive
 *   --alternativepick    "Alternative pick"  fallback, muted
 *
 * Scoped to .fecx .bd-related — these cards only appear in the bonus-detail
 * "Similar offers from other casinos" section.
 * ============================================================================ */

.fecx .bd-related .fec-similar__card {
  position: relative;
}

.fecx .bd-related .fec-similar__tag {
  position: absolute;
  top: -1px;
  left: 16px;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Top match — strongest visual, solid verified-soft pill */
.fecx .bd-related .fec-similar__tag--closestmatch {
  color: var(--verified);
  background: var(--verified-soft);
  border-color: rgba(28, 122, 74, 0.4);
}

/* Trade-off positives — verified outline, paper bg (subtler than closest) */
.fecx .bd-related .fec-similar__tag--lowerwager,
.fecx .bd-related .fec-similar__tag--highercap,
.fecx .bd-related .fec-similar__tag--cashable,
.fecx .bd-related .fec-similar__tag--higheryesrate {
  color: var(--verified);
  border-color: rgba(28, 122, 74, 0.4);
}

/* Fallback — muted (already covered by base color: ink-3, kept explicit
   to document intent and resist later refactors of the base rule) */
.fecx .bd-related .fec-similar__tag--alternativepick {
  color: var(--ink-3);
}

/* ============================================================================
 * FEC V2.1 — Tournaments page (.tn-* family)
 *
 * Appended for the com_tournaments view=show migration. All selectors are
 * scoped under .fecx so the rules stay inert on every non-fecx page.
 *
 * Notes:
 *  - `.live-dot` + `@keyframes live-pulse` are emitted as part of this block.
 *    If either already exists elsewhere in this stylesheet from an earlier
 *    section, the duplicate is harmless (identical declarations; last-write
 *    wins). Safe to delete this first block of two rules if you confirm a
 *    pre-existing definition.
 *  - `.tn-filter` is `position: sticky; top: 60px;` — assumes the global
 *    .fec-topbar height stays at ~60px. If the topbar grows in a future
 *    redesign, bump the `top` value accordingly.
 *  - Mobile breakpoint (max-width: 900px): hides Prize + Start columns to
 *    keep the table scannable. Pager + filter row remain visible.
 *  - .bd-faq and .hub-pager are reused from earlier sections of this
 *    stylesheet (defined for the bonus details + bonus hub pages); no new
 *    declarations needed here.
 * ========================================================================== */

.fecx .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d33; display: inline-block;
  box-shadow: 0 0 0 0 rgba(221,51,51,0.6);
  animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(221,51,51,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(221,51,51,0); }
  100% { box-shadow: 0 0 0 0 rgba(221,51,51,0); }
}

/* ====================================================================
   TOURNAMENTS PAGE
   ==================================================================== */

/* ---- Header card ---- */

.fecx .tn-head { padding: 20px 0 24px; }

.fecx .tn-head-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
}

.fecx .tn-head-left { display: flex; flex-direction: column; gap: 8px; }

.fecx .tn-head-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: 6px 0 4px;
}

.fecx .tn-head-intro {
  color: var(--ink-2); font-size: 15px;
  max-width: 60ch; margin: 0 0 12px;
}

.fecx .tn-head-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.fecx .tn-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  font-size: 12px; color: var(--ink-2);
}

.fecx .tn-trust-pill::before {
  content: "✓"; color: var(--verified); font-weight: 700; font-size: 11px;
}

/* Right: live status panel */

.fecx .tn-status {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
  min-width: 200px;
}

.fecx .tn-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #d33; font-weight: 700;
  padding: 6px 12px;
  background: rgba(221, 51, 51, 0.08);
  border-radius: 999px;
  border: 1px solid rgba(221, 51, 51, 0.2);
}

.fecx .tn-monitoring {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}

.fecx .tn-monitoring b { color: var(--ink); font-weight: 700; }

.fecx .tn-update-row {
  display: flex; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

.fecx .tn-update-row .pill {
  padding: 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
}

.fecx .tn-update-row .pill b { color: var(--ink); font-weight: 700; }

.fecx .tn-update-row .pill.live {
  border-color: var(--verified);
  color: var(--verified);
}

/* Editor tip */

.fecx .tn-tip {
  margin-top: 18px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px; color: var(--accent-ink);
}

.fecx .tn-tip b { font-weight: 600; }

.fecx .tn-tip em { font-style: italic; }

/* ---- Filter bar ---- */

.fecx .tn-filter {
  position: sticky; top: 60px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.fecx .tn-filter .search-block {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px;
}

.fecx .tn-filter .search-block input {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 14px 9px 36px;
  background: var(--bg);
  font: inherit; color: var(--ink);
  outline: none;
  position: relative;
}

.fecx .tn-filter .search-wrap {
  position: relative; flex: 1; min-width: 200px;
  display: flex; align-items: center;
}

.fecx .tn-filter .search-wrap svg { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }

.fecx .tn-filter .search-wrap input {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 14px 9px 36px;
  background: var(--bg);
  font: inherit; color: var(--ink);
  outline: none;
}

.fecx .tn-filter .search-lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}

.fecx .tn-filter .filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-size: 13px; color: var(--ink);
}

.fecx .tn-filter .filter-btn:hover { border-color: var(--ink); }

.fecx .tn-filter .filter-btn .badge {
  font-family: var(--mono); font-size: 10px;
  background: var(--ink); color: var(--bg);
  padding: 1px 7px; border-radius: 999px;
  font-weight: 600;
}

.fecx .tn-filter .sort-select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  border: none;
  font-size: 13px;
  font-weight: 500;
}

.fecx .tn-filter .sort-select select {
  background: transparent; border: none;
  color: inherit; font: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4px;
}

.fecx .tn-filter .sort-select select option { color: var(--ink); background: var(--bg); }

/* Quick chips row below filter */

.fecx .tn-quickchips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.fecx .tn-quickchips .chip { background: var(--paper); }

.fecx .tn-quickchips .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- Table ---- */

.fecx .tn-table-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.fecx .tn-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.fecx .tn-table thead th {
  text-align: left;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.fecx .tn-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}

.fecx .tn-table tbody tr:last-child td { border-bottom: none; }

.fecx .tn-table tbody tr:hover { background: var(--bg); }

.fecx .tn-table tbody tr.unavailable { opacity: 0.6; }

.fecx .tn-table tbody tr.featured { background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 40%); }

.fecx .tn-table tbody tr.featured:hover { background: linear-gradient(90deg, var(--accent-soft) 0%, var(--bg) 60%); }

.fecx .tn-tname {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 200px;
}

.fecx .tn-tname .n {
  font-weight: 600; font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}

.fecx .tn-tname .star { color: var(--accent); font-size: 12px; }

.fecx .tn-tname .sub {
  font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}

.fecx .tn-tname .sub a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}

.fecx .tn-tname .sub .arrow { color: var(--ink-4); }

.fecx .tn-amount {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink); font-weight: 600;
  white-space: nowrap;
}

.fecx .tn-amount.free {
  color: var(--verified);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.fecx .tn-amount.zero { color: var(--ink-4); font-weight: 500; }

.fecx .tn-prize {
  font-family: var(--mono); font-size: 14px;
  color: var(--ink); font-weight: 700;
  white-space: nowrap;
}

.fecx .tn-prize.zero { color: var(--ink-4); font-weight: 500; font-size: 12px; }

.fecx .tn-state {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}

.fecx .tn-state .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verified);
  box-shadow: 0 0 0 0 rgba(28, 122, 74, 0.6);
  animation: live-pulse 2s infinite;
}

.fecx .tn-state.upcoming::before {
  content: "▶"; color: var(--ink-4); font-size: 9px;
}

.fecx .tn-end {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px;
}

.fecx .tn-end.soon { color: var(--warn); font-weight: 600; }

.fecx .tn-end.critical { color: var(--danger); font-weight: 700; }

.fecx .tn-end .when {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.fecx .tn-cta { text-align: right; min-width: 140px; }

.fecx .tn-join-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; border: none;
  font-size: 13px; font-weight: 500;
}

.fecx .tn-join-btn:hover { background: var(--ink-2); }

.fecx .tn-unavail {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px;
}

.fecx .tn-unavail .btn-disabled {
  padding: 7px 16px;
  background: var(--bg-2);
  color: var(--ink-4);
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 13px;
  cursor: not-allowed;
}

.fecx .tn-unavail .why {
  font-family: var(--mono); font-size: 10px;
  color: var(--warn); letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- How it works ---- */

.fecx .tn-howitworks {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}

.fecx .tn-howitworks-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}

.fecx .tn-howitworks h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: 32px; letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 8px 0 18px;
}

.fecx .tn-howitworks p {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 56ch;
}

.fecx .tn-howitworks-points {
  display: grid; gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.fecx .tn-howitworks-points .point {
  padding: 18px 22px;
  border-bottom: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: start;
}

.fecx .tn-howitworks-points .point:last-child { border-bottom: none; }

.fecx .tn-howitworks-points .point .t {
  font-family: var(--serif); font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em;
  color: var(--accent);
}

.fecx .tn-howitworks-points .point .d {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}

/* ---- FAQ ---- */

.fecx .tn-faq-section { padding: 56px 0; }

.fecx .tn-faq-section h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: 28px; letter-spacing: -0.02em;
  margin: 8px 0 6px;
}

.fecx .tn-faq-section .sub { color: var(--ink-3); font-size: 14px; margin: 0 0 20px; max-width: 60ch; }

/* ---- Filter drawer ---- */

.fecx .tn-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}

.fecx .tn-drawer-overlay.open { opacity: 1; pointer-events: all; }

.fecx .tn-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--bg);
  z-index: 91;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--rule);
}

.fecx .tn-drawer.open { transform: translateX(0); }

.fecx .tn-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
}

.fecx .tn-drawer-head h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  margin: 0; letter-spacing: -0.01em;
}

.fecx .tn-drawer-head .close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: none; color: var(--ink-2);
  cursor: pointer;
}

.fecx .tn-drawer-head .close:hover { background: var(--bg-2); color: var(--ink); }

.fecx .tn-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
}

.fecx .tn-drawer-group h4 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
  font-weight: 600;
}

.fecx .tn-drawer-group label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.fecx .tn-drawer-group label:hover { color: var(--ink); }

.fecx .tn-drawer-group input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
}

.fecx .tn-drawer-group input[type="number"],
.fecx .tn-drawer-group select {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  font: inherit; color: var(--ink);
  outline: none;
}

.fecx .tn-drawer-group .hint {
  font-size: 12px; color: var(--ink-3); margin-top: 6px;
}

.fecx .tn-drawer-foot {
  display: flex; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.fecx .tn-drawer-foot .btn { flex: 1; justify-content: center; }

@media (max-width: 900px) {
  .fecx .tn-head-card { grid-template-columns: 1fr; }
  .fecx .tn-status { align-items: flex-start; }
  .fecx .tn-howitworks-grid { grid-template-columns: 1fr; gap: 24px; }
  .fecx .tn-howitworks-points .point { grid-template-columns: 1fr; gap: 6px; }
  .fecx .tn-table thead th:nth-child(3),
.fecx .tn-table tbody td:nth-child(3),
.fecx .tn-table thead th:nth-child(4),
.fecx .tn-table tbody td:nth-child(4) { display: none; }
  .fecx .tn-drawer { width: 100%; }
}

/* ---- Extras: classes used by the PHP view that the mockup does NOT
       declare separately (because the mockup either inlined the styles
       or did not have these UI states). ---- */

/* Header subtitle when paginated: "— Page 2 of 5" */
.fecx .tn-head-page {
  font-family: var(--mono);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-left: 6px;
  vertical-align: middle;
}

/* FAQ "Open all / Close all" controls row */
.fecx .tn-faq-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* Empty state (no rows after filter/search) */
.fecx .tn-zero {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  margin: 12px 0 20px;
}
.fecx .tn-zero__title {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--ink);
}
.fecx .tn-zero__text {
  color: var(--ink-2); font-size: 14px;
  max-width: 48ch; margin: 0 auto 16px;
}
.fecx .tn-zero__actions {
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}

/* ============================================================================
 * FEC V2.1 — Tournaments page (fix 02: fixed-width scrollable table + affordance)
 *
 * Supersedes fix 01. Two changes:
 *
 *  1) Table layout. Switch from "hide Prize + Start columns at < 900px"
 *     to "fixed-width table, always scrollable horizontally when the
 *     viewport is narrower than the table". All 6 columns are kept at
 *     every breakpoint, so column proportions stay consistent with
 *     desktop. No information loss, no layout shift across breakpoints.
 *
 *  2) Scroll affordance. A right-edge gradient shadow inside the wrap
 *     tells the user "there is more to the right, swipe / scroll".
 *     Pure CSS, no JS. The shadow is a ::after positioned absolute
 *     against the wrap (which is position: relative); the table scrolls
 *     UNDER the shadow because the wrap is the scroll viewport, not the
 *     table. The shadow is gated by a media query so it only appears at
 *     viewports narrow enough that overflow is plausible.
 *
 * If fix 01 is already deployed in this stylesheet, this block overrides
 * its declarations (same specificity, later cascade wins). Safe to leave
 * fix 01 in place — it's effectively dead but harmless.
 * ========================================================================== */

.fecx .tn-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.fecx .tn-table {
  /* Always wide enough for the 6 columns at their natural proportions.
     At viewports >= ~1180px (typical container width) the wrap matches
     the table width and there's no scroll. Below that, horizontal scroll
     kicks in automatically. */
  min-width: 1100px;
}

/* Cancel the column-hide media query from the base block. We want the
   full 6-column layout at every breakpoint now. */
@media (max-width: 900px) {
  .fecx .tn-table thead th:nth-child(3),
  .fecx .tn-table tbody td:nth-child(3),
  .fecx .tn-table thead th:nth-child(4),
  .fecx .tn-table tbody td:nth-child(4) {
    display: table-cell;
  }
  /* And restore .tn-tname's min-width that fix 01 zeroed out. */
  .fecx .tn-tname {
    min-width: 200px;
  }
}

/* ============================================================================
 * FEC V2.1 — Tournaments page (fix 03: scroll-shadow via background-attachment)
 *
 * Supersedes the ::after pseudo from fix 02. The pseudo approach failed in
 * practice because when an absolutely positioned child sits inside an
 * overflow-scrollable parent, browsers can attach it to the scrollable
 * content box rather than the visible padding box. Scrolling the table
 * dragged the pseudo with it, so the shadow appeared mid-table instead of
 * pinned to the right edge of the viewport.
 *
 * The robust pattern for "shadow stays at the right edge of the scroll
 * viewport" is to paint the shadow as a background layer on the wrap
 * itself, using two stacked gradients with different background-attachment
 * values (Lea Verou, 2012 — https://lea.verou.me/blog/2012/04/background-attachment-local/):
 *
 *  - "Cover" layer: paper-coloured gradient fading to transparent, 40px
 *    at the right edge, attachment: LOCAL — scrolls WITH the table. When
 *    the user reaches the far right of the scroll, this cover slides into
 *    view and masks the shadow underneath.
 *  - "Shadow" layer: soft dark gradient fading to transparent, 24px at
 *    the right edge, attachment: SCROLL (default) — fixed to the wrap's
 *    viewport. Always painted at the right edge of the visible rectangle.
 *  - "Base" solid colour at the bottom of the layer stack so the wrap
 *    keeps its paper background outside the gradient regions.
 *
 * Net effect: shadow visible when there is hidden content to the right;
 * invisible at end-of-scroll (cover masks it), and invisible when the
 * table already fits (no scroll happens, so nothing to indicate).
 *
 * Gated by @media (max-width: 1180px) to keep the desktop appearance
 * untouched. Above that breakpoint the wrap reverts to the simple solid
 * paper background defined in the base block.
 * ========================================================================== */


@media (max-width: 1180px) {
  .fecx .tn-table-wrap {
    /* Layer order (top -> bottom): cover, shadow, base.
       Cover sits on top of shadow so when they overlap at end-of-scroll
       the cover wins and the shadow visually disappears. */
    background:
      linear-gradient(to left, var(--paper) 0%, transparent 60%)
        right top / 40px 100% no-repeat local,
      linear-gradient(to left, rgba(0, 0, 0, 0.14), transparent)
        right top / 28px 100% no-repeat scroll,
      var(--paper);
  }
}

/* ============================================================================
 * FEC V2.1 — Tournaments + .fecx pages (fix 04: pager mobile cleanup)
 *
 * fecv2.css ships a mobile pager compact mode under @media (max-width: 560px):
 *
 *   .fec-pg .pagination li               { display: none }
 *   .fec-pg .pagination li.active,
 *   .fec-pg .pagination li.pagination-next,
 *   .fec-pg .pagination li.pagination-next.disabled { display: inline-flex }
 *   .fec-pg .pagination li.active a      { min-width: auto; padding: 0 14px }
 *   .fec-pg .pagination li.active a:before { content: "Page "; ... }
 *
 * The "Page " prefix only made sense in that compact mode (where every other
 * page number is hidden and the active label needs to read as
 * "Page 1 of N"). On .fecx pages we keep all page numbers visible, so the
 * "Page" label becomes a redundant prefix that also pushes the active
 * button into a wider, squared-corner shape against its round siblings.
 *
 * Fix (scoped to .fecx, fecv2.css untouched, legacy pages unaffected):
 *   - Cancel the ::before content so the active button shows just "1".
 *   - Restore min-width:44px and padding:0 so its box matches the other
 *     pill buttons defined by .fec-pg .pagination a (44x44 round).
 *   - Restore visibility of all <li>: the compact "hide siblings" UX
 *     made sense alongside a "Page N" label, but with just a number on
 *     the active button we want the full pager visible for navigation.
 *
 * Specificity: each rule prepends ".fecx " to the fecv2 selector, so the
 * specificity is exactly +1 class higher (e.g. 0,4,2 vs 0,3,2 for the
 * ::before rule) and wins inside .fecx pages only.
 * ========================================================================== */

@media (max-width: 560px) {
  .fecx .fec-pg .pagination li.active a::before {
    content: none;
  }
  .fecx .fec-pg .pagination li.active a {
    min-width: 44px;
    padding: 0;
  }
  .fecx .fec-pg .pagination li {
    display: inline-flex;
  }
}


/* ============================================================================
 * FEC V2.1 — .fecx pager (fix 07: active button rendering)
 *
 * The rule .fecx .hub-pager .active around L936 of this file applies a
 * background on the <li class="active"> wrapper. The base fec-pg stylesheet
 * (fecv2.css) already paints the inner <a> as a round dark button; the
 * <li>-level background drew a square panel on top of that pill, occluding
 * its round shape. We neutralize the wrapper background here (same
 * specificity 0,3,0 — later in source order wins; no !important required)
 * and move the typography intent to the <a> child where the visible pill
 * actually lives.
 * * Supersedes earlier hack attempts targeting .fec-pg .pagination
 * li.active a (wrong selector for this DOM); those have been removed.
 * ========================================================================== */

.fecx .hub-pager .active {
  background: transparent;
}
.fecx .hub-pager .active a {
  font-weight: 600;
}

/* ============================================================================
 * FEC V2.1 — Tournaments FAQ accordion (fix 08: .bd-faq styling)
 *
 * The .bd-faq markup is rendered correctly with Schema.org FAQPage semantics,
 * but it was left unstyled — questions, answers and chevrons all collapsed
 * into a flat run of paragraphs in the rendered page. The mockup defines the
 * styling under `.bd-faq` (originally part of the bonus-detail page, but the
 * accordion is generic and reused on the tournaments page too).
 *
 * Behavior:
 *  - Each .item is a padded card (bg-2, soft border, small radius)
 *  - .q is the clickable header row with a chevron on the right
 *  - .a is hidden by default (display:none) and revealed by .item.open
 *  - .chev rotates 90deg + accent color on open state
 *  - First item gets `class="item open"` server-side (PHP $i === 0 default),
 *    so it appears expanded on initial render. JS toggles `.open` on click.
 *
 * Selectors are unscoped (.bd-faq) to match the legacy bonus-detail usage
 * exactly. Safe because .bd-faq is a specific enough class name and only
 * appears inside .fecx pages in this build.
 * ========================================================================== */

.bd-faq {
  margin-top: 8px;
}
.bd-faq .item {
  margin-bottom: 10px;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
}
.bd-faq .q {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.bd-faq .chev {
  color: var(--ink-3);
  transition: transform 0.2s ease;
  font-family: monospace;
  font-size: 14px;
}
.bd-faq .item.open .chev {
  transform: rotate(90deg);
  color: var(--accent);
}
.bd-faq .a {
  display: none;
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.bd-faq .item.open .a {
  display: block;
}

/* ============================================================================
   Slot link styling for bonus specifics card
   Add to the existing details-page stylesheet (fecv2.details.css or wherever
   the .bd-stat-card / .kv styles live). Two classes added: bd-slot-link and
   bd-slot-link-info.
   ============================================================================ */

.bd-stat-card .kv .bd-slot-link {
  color: #0b6b62;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(11, 107, 98, 0.4);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.bd-stat-card .kv .bd-slot-link:hover,
.bd-stat-card .kv .bd-slot-link:focus {
  color: #084e47;
  border-bottom-color: #0b6b62;
}

.bd-stat-card .kv .bd-slot-link-info {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.95em;
  color: #0b6b62;
  opacity: 0.7;
  vertical-align: baseline;
  cursor: help;
}

.bd-stat-card .kv .bd-slot-link:hover .bd-slot-link-info,
.bd-stat-card .kv .bd-slot-link:focus .bd-slot-link-info {
  opacity: 1;
}

/* ============================================================
 * FEC v2.1 — SPRINT 2 STYLESHEET BUNDLE
 * ============================================================
 *
 * Single-file bundle merging every sprint-2-only CSS section
 * extracted from fec_template_test.php inline <style>. Intended
 * to be appended to /css/fec-edition.css at sprint 2 deploy.
 *
 * Sections included (in render order):
 *   1. Progressive jackpots table        (cr-jpot-*)
 *   2. Tournaments 3-up card grid        (cr-tourn-*, cr-tournaments)
 *   3. Write-a-review form               (cr-review-write, cr-rw-*)
 *   4. Write-review JS-driven states     (cr-rw-*.is-error/is-loading/
 *                                         is-submitted, cr-rw-error-msg)
 *
 * NOT included (already live in fec-edition.css from sprint 1):
 *   - Withdrawal block (cr-withdrawal-*)
 *   - Warning banner, casino state banner
 *   - Hero, stats strip, sidebar, player reviews
 *   - Base tokens (--bg, --paper, --ink, --verified, etc.)
 *
 * Dependencies on sprint-1 tokens:
 *   --paper, --ink, --verified — these MUST exist in :root
 *   when this file loads. They are defined in fec-edition.css.
 *
 * Scoping:
 *   All selectors live under .fecx (the body class added by the
 *   v2 article view) thanks to fec-edition.css's wrapping. If you
 *   inline this file outside .fecx, prepend ".fecx " to every rule.
 *
 * Source of truth: fec_template_test.php inline <style>.
 * Re-generate by running the inline → bundle pass at sprint close.
 * ============================================================ */



/* ============================================================
   PROGRESSIVE JACKPOTS TABLE
   ============================================================ */
.cr-jpot-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
}
.cr-jpot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.10);
  border-radius: 12px;
  overflow: hidden;
}
.cr-jpot-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,17,13,0.55);
  padding: 12px 16px;
  background: rgba(20,17,13,0.03);
  border-bottom: 1px solid rgba(20,17,13,0.08);
}
.cr-jpot-table .cr-jpot-th-amount,
.cr-jpot-table .cr-jpot-th-num    { text-align: right; }
.cr-jpot-table .cr-jpot-th-jindex { text-align: right; min-width: 140px; }

.cr-jpot-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(20,17,13,0.05);
  vertical-align: middle;
}
.cr-jpot-table tbody tr:first-child td { border-top: none; }

.cr-jpot-game-name {
  font-weight: 700;
  color: #14110d;
  margin-bottom: 3px;
}
.cr-jpot-game-meta {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cr-jpot-sep { opacity: 0.5; }

.cr-jpot-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cr-jpot-dot--good { background: #1c7a4a; }
.cr-jpot-dot--fair { background: #c4ad7a; }
.cr-jpot-dot--poor { background: #9a2828; }

.cr-jpot-source--local {
  color: #0b6b62;
  font-weight: 600;
}
.cr-jpot-source--pooled {
  color: rgba(20,17,13,0.55);
}

.cr-jpot-amount {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
  color: #14110d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cr-jpot-amount--nearavg  { color: #a85a1c; }
.cr-jpot-amount--aboveavg { color: #9a2828; }

.cr-jpot-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(20,17,13,0.75);
  white-space: nowrap;
}

.cr-jpot-jindex-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.cr-jpot-jindex-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
  color: #14110d;
}
.cr-jpot-jindex-bar {
  display: inline-block;
  width: 80px; height: 6px;
  background: rgba(20,17,13,0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.cr-jpot-jindex-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #c4ad7a, #1c7a4a);
  border-radius: 3px;
}

.cr-jpot-legend {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 12px;
  color: rgba(20,17,13,0.65);
}
.cr-jpot-legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.cr-jpot-legend-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: rgba(20,17,13,0.55);
  margin-right: -4px;
}
.cr-jpot-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-jpot-legend-chip {
  display: inline-block;
  width: 12px; height: 8px;
  border-radius: 2px;
}
.cr-jpot-legend-chip--nearavg  { background: #a85a1c; }
.cr-jpot-legend-chip--aboveavg { background: #9a2828; }

@media (max-width: 780px) {
  .cr-jpot-table-wrap { overflow-x: visible; }
  .cr-jpot-table,
  .cr-jpot-table thead,
  .cr-jpot-table tbody,
  .cr-jpot-table tr,
  .cr-jpot-table td { display: block; width: 100%; }
  .cr-jpot-table thead { display: none; }
  .cr-jpot-table tr {
    border-bottom: 1px solid rgba(20,17,13,0.08);
    padding: 12px 14px;
  }
  .cr-jpot-table tr:last-child { border-bottom: none; }
  .cr-jpot-table tbody td {
    padding: 4px 0;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
  }
  .cr-jpot-table tbody td.cr-jpot-game {
    display: block;
    text-align: left;
    margin-bottom: 8px;
  }
  .cr-jpot-table tbody td:before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(20,17,13,0.55);
    margin-right: 12px;
  }
  .cr-jpot-table tbody td.cr-jpot-game:before { display: none; }
}


/* ============================================================
   TOURNAMENTS — 3-up "mini" card grid (sprint 2)
   ============================================================ */
.cr-tournaments { padding: 24px 0; }

.cr-tourn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cr-tourn-card {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.08);
  border-radius: 10px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Status pill ---- */
.cr-tourn-status {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.cr-tourn-status--running {
  background: rgba(28,122,74,0.12);
  color: #1c7a4a;
}
.cr-tourn-status--running:before {
  content: '\25CF';
  margin-right: 5px;
}
.cr-tourn-status--imminent {
  background: rgba(168,90,28,0.12);
  color: #a85a1c;
}
.cr-tourn-status--scheduled {
  background: rgba(20,17,13,0.06);
  color: rgba(20,17,13,0.6);
}

/* ---- Tournament name + game ---- */
.cr-tourn-name {
  font-size: 16px;
  font-weight: 800;
  color: #14110d;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.cr-tourn-game {
  font-size: 13px;
  color: rgba(20,17,13,0.6);
  line-height: 1.4;
}
.cr-tourn-game:before {
  content: '\21B3';
  margin-right: 5px;
  color: rgba(20,17,13,0.35);
}

/* ---- Stats: prize + entry, 2-col ---- */
.cr-tourn-stats {
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cr-tourn-stat { margin: 0; }
.cr-tourn-stat dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(20,17,13,0.5);
  font-weight: 700;
  margin: 0 0 3px 0;
}
.cr-tourn-stat dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #14110d;
  font-variant-numeric: tabular-nums;
}

/* ---- Time line (countdown / absolute) ---- */
.cr-tourn-time {
  font-size: 13px;
  color: rgba(20,17,13,0.7);
  padding: 7px 10px;
  background: rgba(20,17,13,0.04);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---- CTA pinned to bottom of card ---- */
.cr-tourn-cta {
  margin-top: auto;
  padding-top: 4px;
}
.cr-tourn-cta .btn {
  width: 100%;
  justify-content: center;
}
.cr-tourn-cta-arr {
  display: inline-block;
  font-size: 13px;
  margin-left: 4px;
}

/* ---- Mobile <780px: 1-col stack ---- */
@media (max-width: 780px) {
  .cr-tourn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WRITE-A-REVIEW FORM — collapsible <details>, CSS-only stars
   ============================================================ */
.cr-review-write { padding: 28px 0; }

/* Collapse machinery */
.cr-rw-details { padding: 0; }
.cr-rw-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 4px;
  user-select: none;
}
.cr-rw-details > summary::-webkit-details-marker { display: none; }
.cr-rw-summary-text .eyebrow { margin-bottom: 4px; }
.cr-rw-title { margin: 0; }
.cr-rw-summary-arrow {
  font-size: 32px;
  font-weight: 200;
  color: rgba(20,17,13,0.4);
  line-height: 1;
  transition: transform 0.2s ease, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cr-rw-summary-teaser {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: rgba(20,17,13,0.6);
  font-weight: 400;
  line-height: 1.5;
}

/* ----- Closed state: card-button vibe (high visibility) ----- */
.cr-rw-details:not([open]) > .cr-rw-summary {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.1);
  border-radius: 12px;
  padding: 22px 84px 22px 24px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.cr-rw-details:not([open]) > .cr-rw-summary:hover {
  border-color: rgba(28,122,74,0.45);
  box-shadow: 0 6px 20px rgba(20,17,13,0.07);
}
.cr-rw-details:not([open]) > .cr-rw-summary:active {
  transform: translateY(1px);
}
.cr-rw-details:not([open]) .cr-rw-summary-text .eyebrow {
  color: #1c7a4a;
}
.cr-rw-details:not([open]) .cr-rw-summary-arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c7a4a;
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px; /* optical center of + glyph */
  box-shadow: 0 2px 8px rgba(28,122,74,0.25);
}
.cr-rw-details:not([open]) > .cr-rw-summary:hover .cr-rw-summary-arrow {
  background: #14583a;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 14px rgba(28,122,74,0.35);
}

/* ----- Open state: sober, the form is the focus now ----- */
.cr-rw-details[open] > .cr-rw-summary {
  background: transparent;
  border: none;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(20,17,13,0.06);
  margin-bottom: 4px;
}
.cr-rw-details[open] .cr-rw-summary-arrow {
  position: static;
  transform: rotate(45deg);
  width: auto;
  height: auto;
  background: transparent;
  color: rgba(20,17,13,0.4);
  box-shadow: none;
  padding: 0;
}
.cr-rw-details[open] .cr-rw-summary-teaser {
  display: none;
}

.cr-rw-subtitle { margin: 16px 0 24px; }

/* Status banner (populated by JS on submit) */
.cr-rw-status { margin: 0 0 16px; padding: 0; }
.cr-rw-status[data-state="error"] {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(168,38,38,0.08);
  color: #9a2828;
  border: 1px solid rgba(168,38,38,0.2);
  font-size: 14px;
}
.cr-rw-status[data-state="success"] {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(28,122,74,0.08);
  color: #1c7a4a;
  border: 1px solid rgba(28,122,74,0.2);
  font-size: 14px;
}

/* Form layout */
.cr-rw-form {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.08);
  border-radius: 10px;
  padding: 24px;
}

.cr-rw-field { margin-bottom: 18px; }
.cr-rw-field:last-of-type { margin-bottom: 0; }

.cr-rw-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #14110d;
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}
.cr-rw-req { color: #9a2828; margin-left: 2px; }
.cr-rw-optional {
  color: rgba(20,17,13,0.5);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
}

.cr-rw-form input[type="text"],
.cr-rw-form input[type="email"],
.cr-rw-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(20,17,13,0.15);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: #14110d;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.cr-rw-form input:focus,
.cr-rw-form textarea:focus {
  border-color: #1c7a4a;
  box-shadow: 0 0 0 3px rgba(28,122,74,0.1);
  outline: none;
}
.cr-rw-form textarea { resize: vertical; min-height: 160px; line-height: 1.5; }

.cr-rw-help {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  margin-top: 5px;
}
.cr-rw-counter { text-align: right; font-variant-numeric: tabular-nums; }
.cr-rw-counter-value { font-weight: 700; color: #14110d; }
.cr-rw-counter-value.is-under { color: #a85a1c; }
.cr-rw-counter-value.is-over  { color: #9a2828; }
.cr-rw-counter-value.is-valid { color: #1c7a4a; }

/* Honeypot - hidden off-screen but not display:none (which some bots detect) */
.cr-rw-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Star rating - radios in DOM reverse, flex row-reverse, fill on :checked ~ */
.cr-rw-field-rating {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.cr-rw-field-rating .cr-rw-label { float: none; }
.cr-rw-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}
.cr-rw-stars input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cr-rw-stars label {
  font-size: 32px;
  line-height: 1;
  color: rgba(20,17,13,0.18);
  cursor: pointer;
  padding: 2px;
  transition: color 0.12s;
}
.cr-rw-stars label:hover,
.cr-rw-stars label:hover ~ label,
.cr-rw-stars input[type="radio"]:checked ~ label {
  color: #d4a017;
}
.cr-rw-stars input[type="radio"]:focus-visible + label {
  outline: 2px solid #1c7a4a;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Row layout (country + show-country checkbox side by side) */
.cr-rw-field-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.cr-rw-field-col { flex: 1 1 220px; min-width: 0; }
.cr-rw-field-checkbox {
  display: flex;
  align-items: flex-end;
  padding-bottom: 11px;
}
.cr-rw-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(20,17,13,0.8);
}
.cr-rw-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1c7a4a;
  cursor: pointer;
}

/* Country toggle: read-only display + checkbox in a single bordered row.
   Replaces the previous free-form text input + checkbox pair. */
.cr-rw-field-location {
  background: rgba(28,122,74,0.04);
  border: 1px solid rgba(28,122,74,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.cr-rw-field-location:hover {
  border-color: rgba(28,122,74,0.35);
  background: rgba(28,122,74,0.06);
}
.cr-rw-location-toggle {
  margin: 0;
  width: 100%;
}
.cr-rw-location-text {
  font-size: 14px;
  color: rgba(20,17,13,0.85);
  line-height: 1.45;
}
.cr-rw-location-text strong {
  color: #14583a;
  font-weight: 700;
}

/* Turnstile widget wrapper */
.cr-rw-field-turnstile {
  margin-top: 8px;
}

/* Actions row */
.cr-rw-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(20,17,13,0.06); }
.cr-rw-submit { min-width: 180px; }
.cr-rw-submit[disabled],
.cr-rw-submit.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cr-rw-privacy {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  margin: 12px 0 0;
  line-height: 1.55;
  max-width: 640px;
}

/* Mobile */
@media (max-width: 600px) {
  .cr-rw-form { padding: 18px; }
  .cr-rw-stars label { font-size: 28px; }
  .cr-rw-field-row { flex-direction: column; gap: 12px; }
  .cr-rw-field-checkbox { padding-bottom: 0; padding-top: 4px; }
  .cr-rw-submit { width: 100%; }
  /* Closed summary: tighter padding, smaller fab */
  .cr-rw-details:not([open]) > .cr-rw-summary {
    padding: 18px 70px 18px 18px;
    border-radius: 10px;
  }
  .cr-rw-details:not([open]) .cr-rw-summary-arrow {
    width: 34px;
    height: 34px;
    font-size: 22px;
    right: 16px;
  }
  .cr-rw-summary-teaser { font-size: 13px; margin-top: 6px; }
  .cr-rw-title { font-size: 22px; line-height: 1.25; }
}

/* ====== Sprint 2 step 5 — write-review JS-driven states ====== */

/* Field error state (server-side validation echoes per-field) */
.cr-rw-field.is-error > .cr-rw-form input,
.cr-rw-field.is-error input[type="text"],
.cr-rw-field.is-error input[type="email"],
.cr-rw-field.is-error textarea {
  border-color: #9a2828;
  box-shadow: 0 0 0 3px rgba(168,38,38,0.08);
}
.cr-rw-field.is-error input:focus,
.cr-rw-field.is-error textarea:focus {
  border-color: #9a2828;
  box-shadow: 0 0 0 3px rgba(168,38,38,0.18);
}
.cr-rw-field-rating.is-error .cr-rw-stars {
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  background: rgba(168,38,38,0.06);
  outline: 1px solid rgba(168,38,38,0.25);
}
.cr-rw-error-msg {
  font-size: 12px;
  color: #9a2828;
  margin-top: 6px;
  font-weight: 600;
  line-height: 1.4;
}

/* Submit button loading state (spinner) */
.cr-rw-submit.is-loading {
  position: relative;
  pointer-events: none;
}
.cr-rw-submit.is-loading::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: cr-rw-spin 0.7s linear infinite;
}
@keyframes cr-rw-spin { to { transform: rotate(360deg); } }

/* Success state: hide the form, keep the status banner visible */
.cr-rw-details.is-submitted .cr-rw-form,
.cr-rw-details.is-submitted .cr-rw-subtitle {
  display: none;
}
.cr-rw-details.is-submitted .cr-rw-status {
  margin-top: 16px;
}

/* No-JS / page-load banner from ?fec_review_status= */
.cr-rw-status[data-state="success"],
.cr-rw-status[data-state="error"] {
  scroll-margin-top: 80px;
}

/* ============================================================================
   Slot link + Slot disclosure box for bonus details pages
   Add to the existing details-page stylesheet (fecv2.details.css or wherever
   the .bd-stat-card / .kv styles live).
   ============================================================================ */

/* -------- Inline slot link in specifics card -------- */

.bd-stat-card .kv .bd-slot-link {
  color: #0b6b62;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(11, 107, 98, 0.4);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.bd-stat-card .kv .bd-slot-link:hover,
.bd-stat-card .kv .bd-slot-link:focus {
  color: #084e47;
  border-bottom-color: #0b6b62;
}

.bd-stat-card .kv .bd-slot-link-info {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.95em;
  color: #0b6b62;
  opacity: 0.7;
  vertical-align: baseline;
  cursor: help;
}

.bd-stat-card .kv .bd-slot-link:hover .bd-slot-link-info,
.bd-stat-card .kv .bd-slot-link:focus .bd-slot-link-info {
  opacity: 1;
}

/* -------- Slot disclosure box (full-width, below stats grid) -------- */

.bd-slot-disclosure {
  margin: 24px 0 24px;
  padding: 22px 26px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
}

.bd-slot-disclosure p {
  margin: 0 0 10px;
}

.bd-slot-disclosure p:last-child {
  margin-bottom: 0;
}

.bd-slot-disclosure-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.bd-slot-disclosure-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  margin-top: 14px !important;
  font-size: 13.5px;
}

.bd-slot-disclosure-link {
  color: #0b6b62;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 107, 98, 0.3);
  transition: border-color 0.15s;
}

.bd-slot-disclosure-link:hover,
.bd-slot-disclosure-link:focus {
  border-bottom-color: #0b6b62;
}

.bd-slot-disclosure-link-secondary {
  color: #555;
  border-bottom-color: rgba(20, 17, 13, 0.2);
}

.bd-slot-disclosure-link-secondary:hover,
.bd-slot-disclosure-link-secondary:focus {
  color: #14110d;
  border-bottom-color: #14110d;
}

/* Multi-tier variant — yellow/warning palette */
.bd-slot-disclosure-multitier {
  background: #fbeed7;
  border: 1px solid #f0d28e;
  border-left: 4px solid #c89a3a;
}

.bd-slot-disclosure-multitier .bd-slot-disclosure-label {
  color: #8c6610;
}

/* Opaque provider variant — neutral teal palette */
.bd-slot-disclosure-opaque {
  background: rgba(11, 107, 98, 0.06);
  border: 1px solid rgba(11, 107, 98, 0.15);
  border-left: 4px solid #0b6b62;
}

.bd-slot-disclosure-opaque .bd-slot-disclosure-label {
  color: #0b6b62;
}

/* Mobile refinements */
@media (max-width: 600px) {
  .bd-slot-disclosure {
    padding: 16px 18px;
    font-size: 14.5px;
    margin: 20px 0 20px;
  }
  .bd-slot-disclosure-links {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================================
   RTP verifications tab — author profile page (com_authors)
   Paste into fec-edition.css or include as a separate stylesheet.
   ============================================================================ */

/* Tab intro paragraph */
.fecx .au-tab-toolbar .au-tab-intro {
  flex: 1;
  font-size: 13px;
  color: var(--ink-3, #666);
  line-height: 1.5;
  max-width: 580px;
}
.fecx .au-tab-toolbar .au-tab-intro p {
  margin: 0;
}

/* List wrapper */
.fecx .au-rtp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Each row is a full-width link */
.fecx .au-rtp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20, 17, 13, 0.08);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.05s;
}
.fecx .au-rtp-row:hover,
.fecx .au-rtp-row:focus {
  border-color: rgba(11, 107, 98, 0.4);
}
.fecx .au-rtp-row:active {
  transform: translateY(1px);
}

.fecx .au-rtp-row .main {
  flex: 1;
  min-width: 0;
}

.fecx .au-rtp-row .top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.fecx .au-rtp-row .name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #14110d);
  line-height: 1.3;
}

.fecx .au-rtp-row .provider {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent, #0b6b62);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fecx .au-rtp-row .meta-row {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3, #777);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.fecx .au-rtp-row .rtp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, #0b6b62);
  font-feature-settings: "tnum";
  white-space: nowrap;
  flex-shrink: 0;
}

/* When stats strip grows to 5 columns, reduce per-cell padding on mobile so it
   doesn't overflow. The base .au-stats-strip handles flex-wrap. */
@media (max-width: 720px) {
  .fecx .au-stats-strip .stat {
    flex: 1 1 30%;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .fecx .au-rtp-row {
    padding: 12px 14px;
    gap: 10px;
  }
  .fecx .au-rtp-row .name { font-size: 15.5px; }
  .fecx .au-rtp-row .rtp { font-size: 15px; }
}

/* ============================================================================
   RTP verifications tab — author profile page (com_authors)
   Paste into fec-edition.css or include as a separate stylesheet.
   ============================================================================ */

/* Tab intro paragraph */
.fecx .au-tab-toolbar .au-tab-intro {
  flex: 1;
  font-size: 13px;
  color: var(--ink-3, #666);
  line-height: 1.5;
  max-width: 580px;
}
.fecx .au-tab-toolbar .au-tab-intro p {
  margin: 0;
}

/* List wrapper */
.fecx .au-rtp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Each row is a full-width link */
.fecx .au-rtp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20, 17, 13, 0.08);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.05s;
}
.fecx .au-rtp-row:hover,
.fecx .au-rtp-row:focus {
  border-color: rgba(11, 107, 98, 0.4);
}
.fecx .au-rtp-row:active {
  transform: translateY(1px);
}

.fecx .au-rtp-row .main {
  flex: 1;
  min-width: 0;
}

.fecx .au-rtp-row .top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.fecx .au-rtp-row .name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #14110d);
  line-height: 1.3;
}

.fecx .au-rtp-row .provider {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent, #0b6b62);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fecx .au-rtp-row .meta-row {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3, #777);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.fecx .au-rtp-row .rtp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, #0b6b62);
  font-feature-settings: "tnum";
  white-space: nowrap;
  flex-shrink: 0;
}

/* When stats strip grows to 5 columns, reduce per-cell padding on mobile so it
   doesn't overflow. The base .au-stats-strip handles flex-wrap. */
@media (max-width: 720px) {
  .fecx .au-stats-strip .stat {
    flex: 1 1 30%;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .fecx .au-rtp-row {
    padding: 12px 14px;
    gap: 10px;
  }
  .fecx .au-rtp-row .name { font-size: 15.5px; }
  .fecx .au-rtp-row .rtp { font-size: 15px; }
}

/* ============================================================================
   Stats strip — 5 cells responsive
   Replaces the previous 4-column fixed grid. Wraps fluidly:
     >=900px : 5 in one row
     600-900 : 3+2
     <600px  : 2+2+1
   "17+ yrs" stays last in HTML so it always falls at the end.
   ============================================================================ */

.fecx .au-stats-strip {
  display: flex;
  flex-wrap: wrap;
  /* If the previous CSS had grid, neutralize it: */
  grid-template-columns: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20, 17, 13, 0.08);
}

.fecx .au-stats-strip .stat {
  flex: 1 1 160px;
  min-width: 160px;
  padding: 22px 28px;
  border-right: 1px solid rgba(20, 17, 13, 0.08);
  /* Border-bottom for wrapped rows on narrow viewports — gives a clean
     separator between the 2-up rows when 5 cells wrap to 2+2+1 */
  box-sizing: border-box;
}

/* Strip the trailing border on the visually last cell of the last row.
   We can't reliably target this with pure CSS for variable wraps, so we
   rely on overflow:hidden on the parent (border-right that goes past
   the right edge is clipped). Plus an explicit reset for the DOM-last
   cell as a baseline. */
.fecx .au-stats-strip .stat:last-child {
  border-right: 0;
}

/* On narrow viewports where cells wrap to multiple rows, add a subtle
   horizontal divider between rows (since the right-border doesn't help). */
@media (max-width: 900px) {
  .fecx .au-stats-strip .stat {
    border-bottom: 1px solid rgba(20, 17, 13, 0.08);
  }
  /* Remove bottom border on the last row's cells — hard with pure CSS for
     dynamic wrap; we leave it as-is since the parent overflow:hidden plus
     border-radius keeps the visual clean. */
}

/* ============================================================================
 * SPRINT3_listing_full.css  -  catid=8 casino directory bundle
 * ----------------------------------------------------------------------------
 * Append at end of /css/fec-edition.css when sprint 3 deploys. Every rule is
 * scoped under .fecx (lesson #10) to match the rest of the editorial design
 * system. Uses the existing CSS tokens (--ink, --paper, --accent, --radius
 * etc) defined at the top of fec-edition.css under .fecx{...}.
 *
 * SCOPE
 *   - .btn-disabled (+ data-status variants)   - missing utility, listing uses it
 *   - .cl-hero* / .cl-hero-card / etc          - listing hero
 *   - .cl-cofm-* (spotlight)                   - Casino of the Month card
 *   - .cl-alphabet* / .cl-alpha-btn            - A-Z jump bar
 *   - .cl-filterbar* (sticky)                  - quick chips + sort dropdown
 *   - .cl-view-toggle / .cl-view-btn           - row|grid toggle
 *   - .cl-list-stack + .cl-list-card overrides - row layout for .review-card
 *   - .cl-list-stack[data-view="grid"]         - 3-col grid layout switch
 *   - .chip[data-filter].active                - filter active state
 *   - .cl-list-card.cl-hidden                  - filtered-out state
 *   - .cl-list-card.cl-pending                 - infinite-scroll pending
 *   - .cl-list-sentinel                        - infinite-scroll trigger
 *   - .cl-empty-filtered                       - 0-match empty state
 *   - .cl-list-newtag + .editors-pick variant  - card decorations
 *   - Responsive (1100 / 900 / 800 / 600)
 *
 * NOT IN THIS BUNDLE (already in fec-edition.css under .fecx):
 *   tokens, .wrap, .btn, .btn-primary, .btn-ghost, .btn-sm, .chip (base),
 *   .casino-chip (base), .hub-pill, .eyebrow, .review-card (base),
 *   .review-head/.review-name/.review-sub, .score-block/.score-num/.score-label/
 *   .score-rank, .review-meta/.kv, .review-actions.
 * ============================================================================ */


/* ====================================================================
 * .btn-disabled  -  Listing CTA "Visit casino" disabled states
 * ==================================================================== */
.fecx .btn-disabled{
  background:var(--bg-2);color:var(--ink-4);
  border:1px solid var(--rule);cursor:not-allowed;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;font-size:13px;border-radius:999px;font-weight:500;
}
.fecx .btn-disabled .why{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.04em;text-transform:uppercase;opacity:0.85;
}
.fecx .btn-disabled[data-status="suspended"]{
  background:var(--warn-soft);color:var(--warn);
  border-color:rgba(168,90,28,0.35);
}
.fecx .btn-disabled[data-status="closed"]{
  background:var(--bg-2);color:var(--ink-4);
}
.fecx .btn-disabled[data-status="blacklisted"]{
  background:rgba(154,40,40,0.08);color:var(--danger);
  border-color:rgba(154,40,40,0.4);font-weight:600;
}
.fecx .btn-disabled[data-status="unavailable"]{
  background:var(--bg-2);color:var(--ink-4);
}


/* ====================================================================
 * Hero card (.cl-hero / .cl-hero-card)
 * ==================================================================== */
.fecx .cl-hero{padding:20px 0 24px}
.fecx .cl-hero-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 30px;display:grid;grid-template-columns:1.5fr 1fr;gap:36px;
  align-items:start;
}
.fecx .cl-hero-left{display:flex;flex-direction:column;gap:12px}
.fecx .cl-hero-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,3.6vw,42px);line-height:1.05;letter-spacing:-0.025em;
  margin:4px 0;
}
.fecx .cl-hero-intro{
  font-size:15px;line-height:1.55;color:var(--ink-2);
  margin:0 0 6px;max-width:62ch;
}
.fecx .cl-hero-pills{display:flex;flex-wrap:wrap;gap:6px}
.fecx .cl-hero-side{border-left:1px solid var(--rule-2);padding-left:24px}
.fecx .cl-hero-side .heading{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  margin-bottom:12px;
}
.fecx .cl-hero-side ul{list-style:none;padding:0;margin:0}
.fecx .cl-hero-side li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:13px;
}
.fecx .cl-hero-side li:last-child{border-bottom:none}
.fecx .cl-hero-side .k{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3);
}
.fecx .cl-hero-side .v{color:var(--ink);font-weight:500}


/* ====================================================================
 * Casino of the Month spotlight (.cl-cofm-*)
 * Lives between hero and alphabet. NOT subject to filter/sort.
 * ==================================================================== */
.fecx .cl-cofm-spotlight{padding:4px 0 24px}
.fecx .cl-cofm-card{
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--paper) 55%,var(--paper) 100%);
  border:1px solid var(--accent);border-radius:var(--radius);
  padding:28px 32px;display:grid;grid-template-columns:1.4fr 220px;gap:36px;
  align-items:center;position:relative;
}
.fecx .cl-cofm-meta{display:flex;flex-direction:column;gap:12px;min-width:0}
.fecx .cl-cofm-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:700;
}
.fecx .cl-cofm-titlerow{display:flex;align-items:center;gap:16px;min-width:0}
.fecx .cl-cofm-titlerow>div{display:flex;flex-direction:column;flex:1;min-width:0}
.fecx .cl-cofm-name{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-0.025em;
  color:var(--ink);
}
.fecx .cl-cofm-provider{
  font-size:13px;color:var(--ink-3);font-family:var(--mono);letter-spacing:0.01em;
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-cofm-blurb{
  font-size:15px;line-height:1.5;color:var(--ink-2);margin:4px 0;max-width:60ch;
}
.fecx .cl-cofm-stats{
  display:flex;gap:28px;margin-top:4px;padding-top:14px;
  border-top:1px solid rgba(11,107,98,0.18);
}
.fecx .cl-cofm-stats .kv{display:flex;flex-direction:column;gap:3px;font-family:var(--mono)}
.fecx .cl-cofm-stats .k{
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
}
.fecx .cl-cofm-stats .v{
  font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);
  letter-spacing:-0.02em;
}
.fecx .cl-cofm-cta{display:flex;flex-direction:column;gap:10px}
.fecx .cl-cofm-cta .btn{justify-content:center;width:100%;padding:13px 18px;font-size:14px}
.fecx .cl-cofm-cta .btn-primary{background:var(--accent);color:#fff}
.fecx .cl-cofm-cta .btn-primary:hover{background:var(--accent-ink)}


/* ====================================================================
 * Editorial intro article (.cl-intro / .cl-intro-card / .cl-intro-body)
 * Renders between COFM spotlight and alphabet bar. Trusted prose body
 * (from jos_content.introtext or jos_categories.description). Sprint 3
 * step 2F.
 * ==================================================================== */
.fecx .cl-intro{padding:4px 0 24px}
.fecx .cl-intro-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 36px;
}
.fecx .cl-intro-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:10px;
}
.fecx .cl-intro-body{
  font-size:15px;line-height:1.65;color:var(--ink-2);max-width:72ch;
}
.fecx .cl-intro-body>*:first-child{margin-top:0}
.fecx .cl-intro-body>*:last-child{margin-bottom:0}
.fecx .cl-intro-body p{margin:0 0 12px}
.fecx .cl-intro-body h2,
.fecx .cl-intro-body h3,
.fecx .cl-intro-body h4{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  margin:22px 0 10px;line-height:1.2;
}
.fecx .cl-intro-body h2{font-size:22px;letter-spacing:-0.015em}
.fecx .cl-intro-body h3{font-size:18px}
.fecx .cl-intro-body h4{font-size:16px}
.fecx .cl-intro-body a{
  color:var(--accent-ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:2px;
}
.fecx .cl-intro-body a:hover{text-decoration-color:var(--accent)}
.fecx .cl-intro-body strong{font-weight:600;color:var(--ink)}
.fecx .cl-intro-body em{font-style:italic}
.fecx .cl-intro-body ul,
.fecx .cl-intro-body ol{margin:8px 0 14px;padding-left:22px}
.fecx .cl-intro-body li{margin-bottom:4px}
.fecx .cl-intro-body blockquote{
  margin:14px 0;padding:4px 0 4px 18px;border-left:3px solid var(--rule);
  color:var(--ink-3);font-style:italic;
}
.fecx .cl-intro-body img{
  max-width:100%;height:auto;border-radius:var(--radius-sm);margin:12px 0;
}

/* Clamp + "Read more" toggle */
.fecx .cl-intro-clampable .cl-intro-clamp{
  position:relative;max-height:20rem;overflow:hidden;
  transition:max-height 0.25s ease-in-out;
}
.fecx .cl-intro-clampable .cl-intro-clamp::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(253,251,246,0) 0%,var(--paper) 80%);
}
.fecx .cl-intro-clampable.is-expanded .cl-intro-clamp{max-height:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-clamp::after{display:none}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-clamp{max-height:none}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-clamp::after{display:none}
.fecx .cl-intro-readmore{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--rule);
  background:var(--bg);color:var(--ink);font:inherit;font-size:13px;
  font-weight:500;cursor:pointer;transition:background 0.12s,border-color 0.12s;
}
.fecx .cl-intro-readmore:hover{background:var(--bg-2);border-color:var(--ink-4)}
.fecx .cl-intro-readmore-chev{font-size:10px;color:var(--ink-3)}
.fecx .cl-intro-readmore-less{display:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-readmore-more{display:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-readmore-less{
  display:inline-flex;gap:6px;align-items:center;
}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-readmore{display:none}


/* ====================================================================
 * Alphabet bar (.cl-alphabet-wrap / .cl-alphabet / .cl-alpha-btn)
 * ==================================================================== */
.fecx .cl-alphabet-wrap{padding:4px 0}
.fecx .cl-alphabet{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:20px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.fecx .cl-alphabet .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-right:12px;
}
.fecx .cl-alpha-btn{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink-2);
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background 0.1s ease,color 0.1s ease;
}
.fecx .cl-alpha-btn:hover{background:var(--bg-2);color:var(--ink)}
.fecx .cl-alpha-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fecx .cl-alpha-btn[data-disabled="true"]{opacity:0.3;cursor:default}


/* ====================================================================
 * Sticky filter bar (.cl-filterbar-wrap / .cl-filterbar)
 * Sticky lives on the WRAP so the parent container height stays right.
 * ==================================================================== */
.fecx .cl-filterbar-wrap{
  position:sticky;top:0;z-index:5;background:var(--bg);padding:16px 0 8px;
}
.fecx .cl-filterbar-wrap::after{
  content:"";display:block;height:1px;margin:0 auto;
  max-width:var(--maxw);background:transparent;transition:background 0.15s;
}
.fecx .cl-filterbar{
  position:static;display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  flex-wrap:wrap;
}
.fecx .cl-filterbar .quick-chips{display:flex;gap:6px;flex-wrap:wrap}
.fecx .cl-filterbar .sort-block{margin-left:auto;display:flex;align-items:center;gap:8px}
.fecx .cl-filterbar .sort-block .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.fecx .cl-filterbar .sort-block select{
  background:var(--bg);color:var(--ink);border:1px solid var(--rule);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;
  outline:none;cursor:pointer;
}
.fecx .cl-filterbar .showing{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3);
  width:100%;padding-top:8px;border-top:1px dashed var(--rule-2);margin-top:4px;
}
.fecx .cl-filterbar .showing b{color:var(--ink);font-weight:700}


/* ====================================================================
 * View toggle (.cl-view-toggle / .cl-view-btn)  -  Row | Grid
 * ==================================================================== */
.fecx .cl-view-toggle{
  display:inline-flex;gap:0;margin-left:6px;
  border:1px solid var(--rule);border-radius:999px;padding:2px;background:var(--bg);
}
.fecx .cl-view-btn{
  background:transparent;border:none;padding:4px 12px;font-size:12px;
  font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;border-radius:999px;
  transition:background 0.12s,color 0.12s;
}
.fecx .cl-view-btn:hover{color:var(--ink)}
.fecx .cl-view-btn.active{background:var(--ink);color:var(--bg)}


/* ====================================================================
 * Filter chip active state (.chip[data-filter].active)
 * Only when used as a filter chip in the listing - adds ✓ prefix.
 * ==================================================================== */
.fecx .chip[data-filter].active{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}
.fecx .chip[data-filter].active::before{
  content:"\2713";margin-right:4px;font-weight:700;
}


/* ====================================================================
 * Main + list stack + list card (row-full-width listing layout)
 * ==================================================================== */
.fecx .cl-main{padding:8px 0 48px}
.fecx .cl-empty{padding:60px 0;text-align:center;color:var(--ink-3)}
.fecx .cl-list-stack{display:flex;flex-direction:column;gap:12px}

/* The card itself: 4-col grid laying .review-* blocks horizontally */
.fecx .review-card.cl-list-card{
  display:grid;grid-template-columns:1.7fr 200px 1fr 220px;gap:28px;
  align-items:center;padding:18px 24px;
}

/* Listing-specific head wrapper */
.fecx .cl-list-card .review-head{margin-bottom:0;min-width:0}
.fecx .cl-list-card .review-head>div{
  display:flex;flex-direction:column;flex:1;min-width:0;
}
.fecx .cl-list-card .review-name{
  font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-card .review-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-provsep{color:var(--ink-4);margin:0 2px;font-weight:400}

/* Score block: no internal padding/borders (grid cells provide separation) */
.fecx .cl-list-card .score-block{
  padding:0;border-top:none;border-bottom:none;margin-bottom:0;
  flex-direction:column;align-items:flex-start;gap:2px;
  border-left:1px solid var(--rule-2);padding-left:24px;
}
.fecx .cl-list-card .score-num{font-size:32px}
.fecx .cl-list-card .score-rank{margin-left:0;margin-top:4px}

/* Meta: keep 3-col KV; left-bordered divider */
.fecx .cl-list-card .review-meta{
  margin-bottom:0;border-left:1px solid var(--rule-2);padding-left:24px;
}

/* Actions: stack vertically inside the row cell */
.fecx .cl-list-card .review-actions{
  flex-direction:column;align-items:stretch;
  border-left:1px solid var(--rule-2);padding-left:24px;
}
.fecx .cl-list-card .review-actions .btn,
.fecx .cl-list-card .review-actions .btn-disabled{
  justify-content:center;width:100%;padding:9px 14px;font-size:13px;
}

/* State opacity + border tone (soft visibility for non-ACTIVE) */
.fecx .cl-list-card[data-status="closed"],
.fecx .cl-list-card[data-status="suspended"],
.fecx .cl-list-card[data-status="blacklisted"]{opacity:0.88}
.fecx .cl-list-card[data-status="blacklisted"]{border-color:rgba(154,40,40,0.35)}
.fecx .cl-list-card[data-status="unavailable"]{opacity:0.75}


/* ====================================================================
 * Floating tags and Editor's Pick variant
 * ==================================================================== */
.fecx .cl-list-newtag{
  position:absolute;top:-1px;right:22px;transform:translateY(-50%);
  background:var(--accent-soft);color:var(--accent-ink);
  font-family:var(--mono);font-size:9px;letter-spacing:0.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;
  border:1px solid var(--paper);font-weight:700;
}

.fecx .cl-list-card.editors-pick{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--paper) 35%);
}
.fecx .cl-list-card.editors-pick::before{
  content:"\2605 EDITOR'S PICK";position:absolute;top:-1px;left:22px;
  transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  letter-spacing:0.1em;padding:4px 10px;background:var(--accent);color:#fff;
  border-radius:999px;font-weight:600;
}
.fecx .cl-list-card.editors-pick .review-name{color:var(--accent-ink)}
.fecx .cl-list-card.editors-pick .score-num{color:var(--accent-ink)}
.fecx .cl-list-card.editors-pick .btn-primary{background:var(--accent);color:#fff}
.fecx .cl-list-card.editors-pick .btn-primary:hover{background:var(--accent-ink)}


/* ====================================================================
 * Grid view (data-view="grid") - resets the .cl-list-card row override
 * back to the vertical .review-card stack, in a 3-col grid.
 * ==================================================================== */
.fecx .cl-list-stack[data-view="grid"]{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.fecx .cl-list-stack[data-view="grid"] .review-card.cl-list-card{
  display:flex;flex-direction:column;gap:12px;padding:20px;align-items:stretch;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-head{margin-bottom:0}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-name{
  font-size:15px;white-space:normal;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-block{
  flex-direction:row;align-items:baseline;gap:8px;padding:10px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  border-left:none;padding-left:0;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-num{font-size:32px}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-rank{margin-left:auto;margin-top:0}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-meta{
  border-left:none;padding-left:0;margin:0;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions{
  flex-direction:row;border-left:none;padding-left:0;margin-top:auto;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions .btn,
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions .btn-disabled{
  flex:1;font-size:12px;padding:8px 10px;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card.editors-pick::before{
  left:16px;font-size:9px;padding:3px 8px;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-newtag{right:16px}


/* ====================================================================
 * JS-driven states - filter hide + infinite scroll pending
 * ==================================================================== */
.fecx .cl-list-card.cl-hidden{display:none !important}
.fecx .cl-list-card.cl-pending{display:none !important}


/* ====================================================================
 * Infinite-scroll sentinel  (60px-tall trigger after the stack)
 * ==================================================================== */
.fecx .cl-list-sentinel{
  height:60px;display:flex;align-items:center;justify-content:center;
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.fecx .cl-list-sentinel[hidden]{display:none}
.fecx .cl-list-sentinel-label::before{content:"\2193  ";margin-right:4px}


/* ====================================================================
 * Empty-filtered state  (revealed by JS when all cards filtered out)
 * ==================================================================== */
.fecx .cl-empty-filtered{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:50px 28px;margin-top:12px;background:var(--paper);
  border:1px dashed var(--rule);border-radius:var(--radius);text-align:center;
}
.fecx .cl-empty-filtered[hidden]{display:none}
.fecx .cl-empty-filtered-icon{
  font-family:var(--mono);font-size:22px;color:var(--ink-4);letter-spacing:0.2em;
}
.fecx .cl-empty-filtered-title{
  font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:600;
}
.fecx .cl-empty-filtered-hint{font-size:13px;color:var(--ink-3);margin-bottom:6px}


/* ====================================================================
 * Responsive
 *   <1100  row layout drops the meta column
 *   <900   hero + COFM collapse to 1-col; grid view -> 2-col
 *   <800   row layout collapses to vertical stack
 *   <600   alphabet bar tighter; grid view -> 1-col
 * ==================================================================== */

@media (max-width:1100px){
  .fecx .review-card.cl-list-card{
    grid-template-columns:1.5fr 160px 220px;gap:20px;
  }
  .fecx .cl-list-card .review-meta{display:none}
}

@media (max-width:900px){
  .fecx .cl-hero-card{grid-template-columns:1fr;gap:16px}
  .fecx .cl-hero-side{
    border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:16px;
  }
  .fecx .cl-list-stack[data-view="grid"]{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:800px){
  .fecx .review-card.cl-list-card{
    grid-template-columns:1fr;gap:14px;padding:18px;
  }
  .fecx .cl-list-card .score-block,
  .fecx .cl-list-card .review-actions{
    border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:14px;
  }
  .fecx .cl-list-card .score-block{flex-direction:row;align-items:baseline}
  .fecx .cl-list-card .score-rank{margin-left:auto}
  .fecx .cl-list-card .review-meta{
    display:grid;border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:14px;
  }
  .fecx .cl-list-card .review-actions{flex-direction:row}
  .fecx .cl-list-card .review-actions .btn,
  .fecx .cl-list-card .review-actions .btn-disabled{flex:1}
  .fecx .cl-cofm-card{grid-template-columns:1fr;gap:20px;padding:22px}
  .fecx .cl-cofm-stats{flex-wrap:wrap;gap:18px}
  .fecx .cl-cofm-stats .v{font-size:18px}
  .fecx .cl-intro-card{padding:22px}
  .fecx .cl-intro-body{font-size:14px}
  .fecx .cl-intro-clampable .cl-intro-clamp{max-height:16rem}
}

@media (max-width:600px){
  .fecx .cl-alphabet{gap:4px}
  .fecx .cl-alpha-btn{width:28px;height:28px;font-size:12px}
  .fecx .cl-alphabet .lbl{display:none}
  .fecx .cl-list-stack[data-view="grid"]{grid-template-columns:1fr}
}

/* end SPRINT3_listing_full.css */

/* ============================================================================
 * SPRINT3_listing_full.css  -  catid=8 casino directory bundle
 * ----------------------------------------------------------------------------
 * Append at end of /css/fec-edition.css when sprint 3 deploys. Every rule is
 * scoped under .fecx (lesson #10) to match the rest of the editorial design
 * system. Uses the existing CSS tokens (--ink, --paper, --accent, --radius
 * etc) defined at the top of fec-edition.css under .fecx{...}.
 *
 * SCOPE
 *   - .btn-disabled (+ data-status variants)   - missing utility, listing uses it
 *   - .cl-hero* / .cl-hero-card / etc          - listing hero
 *   - .cl-cofm-* (spotlight)                   - Casino of the Month card
 *   - .cl-alphabet* / .cl-alpha-btn            - A-Z jump bar
 *   - .cl-filterbar* (sticky)                  - quick chips + sort dropdown
 *   - .cl-view-toggle / .cl-view-btn           - row|grid toggle
 *   - .cl-list-stack + .cl-list-card overrides - row layout for .review-card
 *   - .cl-list-stack[data-view="grid"]         - 3-col grid layout switch
 *   - .chip[data-filter].active                - filter active state
 *   - .cl-list-card.cl-hidden                  - filtered-out state
 *   - .cl-list-card.cl-pending                 - infinite-scroll pending
 *   - .cl-list-sentinel                        - infinite-scroll trigger
 *   - .cl-empty-filtered                       - 0-match empty state
 *   - .cl-list-newtag + .editors-pick variant  - card decorations
 *   - Responsive (1100 / 900 / 800 / 600)
 *
 * NOT IN THIS BUNDLE (already in fec-edition.css under .fecx):
 *   tokens, .wrap, .btn, .btn-primary, .btn-ghost, .btn-sm, .chip (base),
 *   .casino-chip (base), .hub-pill, .eyebrow, .review-card (base),
 *   .review-head/.review-name/.review-sub, .score-block/.score-num/.score-label/
 *   .score-rank, .review-meta/.kv, .review-actions.
 * ============================================================================ */


/* ====================================================================
 * .btn-disabled  -  Listing CTA "Visit casino" disabled states
 * ==================================================================== */
.fecx .btn-disabled{
  background:var(--bg-2);color:var(--ink-4);
  border:1px solid var(--rule);cursor:not-allowed;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;font-size:13px;border-radius:999px;font-weight:500;
}
.fecx .btn-disabled .why{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.04em;text-transform:uppercase;opacity:0.85;
}
.fecx .btn-disabled[data-status="suspended"]{
  background:var(--warn-soft);color:var(--warn);
  border-color:rgba(168,90,28,0.35);
}
.fecx .btn-disabled[data-status="closed"]{
  background:var(--bg-2);color:var(--ink-4);
}
.fecx .btn-disabled[data-status="blacklisted"]{
  background:rgba(154,40,40,0.08);color:var(--danger);
  border-color:rgba(154,40,40,0.4);font-weight:600;
}
.fecx .btn-disabled[data-status="unavailable"]{
  background:var(--bg-2);color:var(--ink-4);
}


/* ====================================================================
 * Hero card (.cl-hero / .cl-hero-card)
 * ==================================================================== */
.fecx .cl-hero{padding:20px 0 24px}
.fecx .cl-hero-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 30px;display:grid;grid-template-columns:1.5fr 1fr;gap:36px;
  align-items:start;
}
.fecx .cl-hero-left{display:flex;flex-direction:column;gap:12px}
.fecx .cl-hero-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,3.6vw,42px);line-height:1.05;letter-spacing:-0.025em;
  margin:4px 0;
}
.fecx .cl-hero-intro{
  font-size:15px;line-height:1.55;color:var(--ink-2);
  margin:0 0 6px;max-width:62ch;
}
.fecx .cl-hero-pills{display:flex;flex-wrap:wrap;gap:6px}
.fecx .cl-hero-side{border-left:1px solid var(--rule-2);padding-left:24px}
.fecx .cl-hero-side .heading{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  margin-bottom:12px;
}
.fecx .cl-hero-side ul{list-style:none;padding:0;margin:0}
.fecx .cl-hero-side li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:13px;
}
.fecx .cl-hero-side li:last-child{border-bottom:none}
.fecx .cl-hero-side .k{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3);
}
.fecx .cl-hero-side .v{color:var(--ink);font-weight:500}


/* ====================================================================
 * Casino of the Month spotlight (.cl-cofm-*)
 * Lives between hero and alphabet. NOT subject to filter/sort.
 * ==================================================================== */
.fecx .cl-cofm-spotlight{padding:4px 0 24px}
.fecx .cl-cofm-card{
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--paper) 55%,var(--paper) 100%);
  border:1px solid var(--accent);border-radius:var(--radius);
  padding:28px 32px;display:grid;grid-template-columns:1.4fr 220px;gap:36px;
  align-items:center;position:relative;
}
.fecx .cl-cofm-meta{display:flex;flex-direction:column;gap:12px;min-width:0}
.fecx .cl-cofm-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:700;
}
.fecx .cl-cofm-titlerow{display:flex;align-items:center;gap:16px;min-width:0}
.fecx .cl-cofm-titlerow>div{display:flex;flex-direction:column;flex:1;min-width:0}
.fecx .cl-cofm-name{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-0.025em;
  color:var(--ink);
}
.fecx .cl-cofm-provider{
  font-size:13px;color:var(--ink-3);font-family:var(--mono);letter-spacing:0.01em;
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-cofm-blurb{
  font-size:15px;line-height:1.5;color:var(--ink-2);margin:4px 0;max-width:60ch;
}
.fecx .cl-cofm-stats{
  display:flex;gap:28px;margin-top:4px;padding-top:14px;
  border-top:1px solid rgba(11,107,98,0.18);
}
.fecx .cl-cofm-stats .kv{display:flex;flex-direction:column;gap:3px;font-family:var(--mono)}
.fecx .cl-cofm-stats .k{
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
}
.fecx .cl-cofm-stats .v{
  font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);
  letter-spacing:-0.02em;
}
.fecx .cl-cofm-cta{display:flex;flex-direction:column;gap:10px}
.fecx .cl-cofm-cta .btn{justify-content:center;width:100%;padding:13px 18px;font-size:14px}
.fecx .cl-cofm-cta .btn-primary{background:var(--accent);color:#fff}
.fecx .cl-cofm-cta .btn-primary:hover{background:var(--accent-ink)}


/* ====================================================================
 * Editorial intro article (.cl-intro / .cl-intro-card / .cl-intro-body)
 * Renders between COFM spotlight and alphabet bar. Trusted prose body
 * (from jos_content.introtext or jos_categories.description). Sprint 3
 * step 2F.
 * ==================================================================== */
.fecx .cl-intro{padding:4px 0 24px}
.fecx .cl-intro-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 36px;
}
.fecx .cl-intro-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:10px;
}
.fecx .cl-intro-body{
  font-size:15px;line-height:1.65;color:var(--ink-2);max-width:72ch;
}
.fecx .cl-intro-body>*:first-child{margin-top:0}
.fecx .cl-intro-body>*:last-child{margin-bottom:0}
.fecx .cl-intro-body p{margin:0 0 12px}
.fecx .cl-intro-body h2,
.fecx .cl-intro-body h3,
.fecx .cl-intro-body h4{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  margin:22px 0 10px;line-height:1.2;
}
.fecx .cl-intro-body h2{font-size:22px;letter-spacing:-0.015em}
.fecx .cl-intro-body h3{font-size:18px}
.fecx .cl-intro-body h4{font-size:16px}
.fecx .cl-intro-body a{
  color:var(--accent-ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:2px;
}
.fecx .cl-intro-body a:hover{text-decoration-color:var(--accent)}
.fecx .cl-intro-body strong{font-weight:600;color:var(--ink)}
.fecx .cl-intro-body em{font-style:italic}
.fecx .cl-intro-body ul,
.fecx .cl-intro-body ol{margin:8px 0 14px;padding-left:22px}
.fecx .cl-intro-body li{margin-bottom:4px}
.fecx .cl-intro-body blockquote{
  margin:14px 0;padding:4px 0 4px 18px;border-left:3px solid var(--rule);
  color:var(--ink-3);font-style:italic;
}
.fecx .cl-intro-body img{
  max-width:100%;height:auto;border-radius:var(--radius-sm);margin:12px 0;
}

/* Clamp + "Read more" toggle */
.fecx .cl-intro-clampable .cl-intro-clamp{
  position:relative;max-height:20rem;overflow:hidden;
  transition:max-height 0.25s ease-in-out;
}
.fecx .cl-intro-clampable .cl-intro-clamp::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(253,251,246,0) 0%,var(--paper) 80%);
}
.fecx .cl-intro-clampable.is-expanded .cl-intro-clamp{max-height:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-clamp::after{display:none}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-clamp{max-height:none}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-clamp::after{display:none}
.fecx .cl-intro-readmore{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--rule);
  background:var(--bg);color:var(--ink);font:inherit;font-size:13px;
  font-weight:500;cursor:pointer;transition:background 0.12s,border-color 0.12s;
}
.fecx .cl-intro-readmore:hover{background:var(--bg-2);border-color:var(--ink-4)}
.fecx .cl-intro-readmore-chev{font-size:10px;color:var(--ink-3)}
.fecx .cl-intro-readmore-less{display:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-readmore-more{display:none}
.fecx .cl-intro-clampable.is-expanded .cl-intro-readmore-less{
  display:inline-flex;gap:6px;align-items:center;
}
.fecx .cl-intro-clampable.is-not-clampable .cl-intro-readmore{display:none}


/* ====================================================================
 * Alphabet bar (.cl-alphabet-wrap / .cl-alphabet / .cl-alpha-btn)
 * ==================================================================== */
.fecx .cl-alphabet-wrap{padding:4px 0}
.fecx .cl-alphabet{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:20px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.fecx .cl-alphabet .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-right:12px;
}
.fecx .cl-alpha-btn{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink-2);
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background 0.1s ease,color 0.1s ease;
}
.fecx .cl-alpha-btn:hover{background:var(--bg-2);color:var(--ink)}
.fecx .cl-alpha-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fecx .cl-alpha-btn[data-disabled="true"]{opacity:0.3;cursor:default}


/* ====================================================================
 * Sticky filter bar (.cl-filterbar-wrap / .cl-filterbar)
 * Sticky lives on the WRAP so the parent container height stays right.
 * ==================================================================== */
.fecx .cl-filterbar-wrap{
  /* top:60px clears the global .topbar / .fec-topbar (sticky at top:0,
     z-index:50, height ~60-62px). Matches the convention used by the
     hub-bonuses toolbar and slot filters across the site. */
  position:sticky;top:60px;z-index:5;background:var(--bg);padding:16px 0 8px;
}
.fecx .cl-filterbar-wrap::after{
  content:"";display:block;height:1px;margin:0 auto;
  max-width:var(--maxw);background:transparent;transition:background 0.15s;
}
.fecx .cl-filterbar{
  position:static;display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  flex-wrap:wrap;
}
.fecx .cl-filterbar .quick-chips{display:flex;gap:6px;flex-wrap:wrap}
.fecx .cl-filterbar .sort-block{margin-left:auto;display:flex;align-items:center;gap:8px}
.fecx .cl-filterbar .sort-block .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.fecx .cl-filterbar .sort-block select{
  background:var(--bg);color:var(--ink);border:1px solid var(--rule);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;
  outline:none;cursor:pointer;
}
.fecx .cl-filterbar .showing{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3);
  width:100%;padding-top:8px;border-top:1px dashed var(--rule-2);margin-top:4px;
}
.fecx .cl-filterbar .showing b{color:var(--ink);font-weight:700}


/* ====================================================================
 * View toggle (.cl-view-toggle / .cl-view-btn)  -  Row | Grid
 * ==================================================================== */
.fecx .cl-view-toggle{
  display:inline-flex;gap:0;margin-left:6px;
  border:1px solid var(--rule);border-radius:999px;padding:2px;background:var(--bg);
}
.fecx .cl-view-btn{
  background:transparent;border:none;padding:4px 12px;font-size:12px;
  font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;border-radius:999px;
  transition:background 0.12s,color 0.12s;
}
.fecx .cl-view-btn:hover{color:var(--ink)}
.fecx .cl-view-btn.active{background:var(--ink);color:var(--bg)}


/* ====================================================================
 * Filter chip active state (.chip[data-filter].active)
 * Only when used as a filter chip in the listing - adds ✓ prefix.
 * ==================================================================== */
.fecx .chip[data-filter].active{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}
.fecx .chip[data-filter].active::before{
  content:"\2713";margin-right:4px;font-weight:700;
}


/* ====================================================================
 * Main + list stack + list card (row-full-width listing layout)
 * ==================================================================== */
.fecx .cl-main{padding:8px 0 48px}
.fecx .cl-empty{padding:60px 0;text-align:center;color:var(--ink-3)}
.fecx .cl-list-stack{display:flex;flex-direction:column;gap:12px}

/* The card itself: 4-col grid laying .review-* blocks horizontally */
.fecx .review-card.cl-list-card{
  position:relative;            /* anchor for .editors-pick::before ribbon */
  overflow:visible;             /* don't clip the ribbon that sits above top edge */
  display:grid;grid-template-columns:1.7fr 200px 1fr 220px;gap:28px;
  align-items:center;padding:18px 24px;
}

/* Listing-specific head wrapper */
.fecx .cl-list-card .review-head{margin-bottom:0;min-width:0}
.fecx .cl-list-card .review-head>div{
  display:flex;flex-direction:column;flex:1;min-width:0;
}
.fecx .cl-list-card .review-name{
  font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-card .review-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-provsep{color:var(--ink-4);margin:0 2px;font-weight:400}

/* Score block: no internal padding/borders (grid cells provide separation) */
.fecx .cl-list-card .score-block{
  padding:0;border-top:none;border-bottom:none;margin-bottom:0;
  flex-direction:column;align-items:flex-start;gap:2px;
  border-left:1px solid var(--rule-2);padding-left:24px;
}
.fecx .cl-list-card .score-num{font-size:32px}
.fecx .cl-list-card .score-rank{margin-left:0;margin-top:4px}

/* Meta: keep 3-col KV; left-bordered divider */
.fecx .cl-list-card .review-meta{
  margin-bottom:0;border-left:1px solid var(--rule-2);padding-left:24px;
}

/* Actions: stack vertically inside the row cell */
.fecx .cl-list-card .review-actions{
  flex-direction:column;align-items:stretch;
  border-left:1px solid var(--rule-2);padding-left:24px;
}
.fecx .cl-list-card .review-actions .btn,
.fecx .cl-list-card .review-actions .btn-disabled{
  justify-content:center;width:100%;padding:9px 14px;font-size:13px;
}

/* State opacity + border tone (soft visibility for non-ACTIVE) */
.fecx .cl-list-card[data-status="closed"],
.fecx .cl-list-card[data-status="suspended"],
.fecx .cl-list-card[data-status="blacklisted"]{opacity:0.88}
.fecx .cl-list-card[data-status="blacklisted"]{border-color:rgba(154,40,40,0.35)}
.fecx .cl-list-card[data-status="unavailable"]{opacity:0.75}


/* ====================================================================
 * Floating tags and Editor's Pick variant
 * ==================================================================== */
.fecx .cl-list-newtag{
  position:absolute;top:-1px;right:22px;transform:translateY(-50%);
  background:var(--accent-soft);color:var(--accent-ink);
  font-family:var(--mono);font-size:9px;letter-spacing:0.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;
  border:1px solid var(--paper);font-weight:700;
}

.fecx .cl-list-card.editors-pick{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--paper) 35%);
}
.fecx .cl-list-card.editors-pick::before{
  content:"\2605 EDITOR'S PICK";position:absolute;top:-1px;left:22px;
  transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  letter-spacing:0.1em;padding:4px 10px;background:var(--accent);color:#fff;
  border-radius:999px;font-weight:600;
}
.fecx .cl-list-card.editors-pick .review-name{color:var(--accent-ink)}
.fecx .cl-list-card.editors-pick .score-num{color:var(--accent-ink)}
.fecx .cl-list-card.editors-pick .btn-primary{background:var(--accent);color:#fff}
.fecx .cl-list-card.editors-pick .btn-primary:hover{background:var(--accent-ink)}


/* ====================================================================
 * Grid view (data-view="grid") - resets the .cl-list-card row override
 * back to the vertical .review-card stack, in a 3-col grid.
 * ==================================================================== */
.fecx .cl-list-stack[data-view="grid"]{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.fecx .cl-list-stack[data-view="grid"] .review-card.cl-list-card{
  display:flex;flex-direction:column;gap:12px;padding:20px;align-items:stretch;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-head{margin-bottom:0}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-name{
  font-size:15px;white-space:normal;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-block{
  flex-direction:row;align-items:baseline;gap:8px;padding:10px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  border-left:none;padding-left:0;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-num{font-size:32px}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .score-rank{margin-left:auto;margin-top:0}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-meta{
  border-left:none;padding-left:0;margin:0;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions{
  flex-direction:row;border-left:none;padding-left:0;margin-top:auto;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions .btn,
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .review-actions .btn-disabled{
  flex:1;font-size:12px;padding:8px 10px;
}
/* CTA parity (sprint 3): hide the .why fragment ("IN YOUR REGION", etc)
   inside .btn-disabled when in grid view, so the button text fits on
   one line and matches the height of the sibling "Read review" / "Visit
   casino" buttons. The .why text stays in the DOM (aria-label on the
   parent still announces it to screen readers). */
.fecx .cl-list-stack[data-view="grid"] .cl-list-card .btn-disabled .why{
  display:none;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-card.editors-pick::before{
  left:16px;font-size:9px;padding:3px 8px;
}
.fecx .cl-list-stack[data-view="grid"] .cl-list-newtag{right:16px}


/* ====================================================================
 * JS-driven states - filter hide + infinite scroll pending
 * ==================================================================== */
.fecx .cl-list-card.cl-hidden{display:none !important}
.fecx .cl-list-card.cl-pending{display:none !important}


/* ====================================================================
 * Infinite-scroll sentinel  (60px-tall trigger after the stack)
 * ==================================================================== */
.fecx .cl-list-sentinel{
  height:60px;display:flex;align-items:center;justify-content:center;
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.fecx .cl-list-sentinel[hidden]{display:none}
.fecx .cl-list-sentinel-label::before{content:"\2193  ";margin-right:4px}


/* ====================================================================
 * Empty-filtered state  (revealed by JS when all cards filtered out)
 * ==================================================================== */
.fecx .cl-empty-filtered{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:50px 28px;margin-top:12px;background:var(--paper);
  border:1px dashed var(--rule);border-radius:var(--radius);text-align:center;
}
.fecx .cl-empty-filtered[hidden]{display:none}
.fecx .cl-empty-filtered-icon{
  font-family:var(--mono);font-size:22px;color:var(--ink-4);letter-spacing:0.2em;
}
.fecx .cl-empty-filtered-title{
  font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:600;
}
.fecx .cl-empty-filtered-hint{font-size:13px;color:var(--ink-3);margin-bottom:6px}


/* ====================================================================
 * Responsive
 *   <1100  row layout drops the meta column
 *   <900   hero + COFM collapse to 1-col; grid view -> 2-col
 *   <800   row layout collapses to vertical stack
 *   <600   alphabet bar tighter; grid view -> 1-col
 * ==================================================================== */

@media (max-width:1100px){
  .fecx .review-card.cl-list-card{
    grid-template-columns:1.5fr 160px 220px;gap:20px;
  }
  .fecx .cl-list-card .review-meta{display:none}
}

@media (max-width:900px){
  .fecx .cl-hero-card{grid-template-columns:1fr;gap:16px}
  .fecx .cl-hero-side{
    border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:16px;
  }
  .fecx .cl-list-stack[data-view="grid"]{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:800px){
  .fecx .review-card.cl-list-card{
    grid-template-columns:1fr;gap:14px;padding:18px;
  }
  .fecx .cl-list-card .score-block,
  .fecx .cl-list-card .review-actions{
    border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:14px;
  }
  .fecx .cl-list-card .score-block{flex-direction:row;align-items:baseline}
  .fecx .cl-list-card .score-rank{margin-left:auto}
  .fecx .cl-list-card .review-meta{
    display:grid;border-left:none;padding-left:0;
    border-top:1px solid var(--rule-2);padding-top:14px;
  }
  .fecx .cl-list-card .review-actions{flex-direction:row}
  .fecx .cl-list-card .review-actions .btn,
  .fecx .cl-list-card .review-actions .btn-disabled{flex:1}
  /* CTA parity in mobile row view: same as grid - hide .why so the
     disabled button matches the height of "Read review" / "Visit casino". */
  .fecx .cl-list-card .btn-disabled .why{display:none}
  .fecx .cl-cofm-card{grid-template-columns:1fr;gap:20px;padding:22px}
  .fecx .cl-cofm-stats{flex-wrap:wrap;gap:18px}
  .fecx .cl-cofm-stats .v{font-size:18px}
  .fecx .cl-intro-card{padding:22px}
  .fecx .cl-intro-body{font-size:14px}
  .fecx .cl-intro-clampable .cl-intro-clamp{max-height:16rem}

  /* Filter chips: horizontal scroll on narrow viewports with a right-edge
     fade signaling there's more to scroll (pattern aligned to hub-bonuses
     .hub-browse). Hides the scrollbar but keeps the area swipe-friendly. */
  .fecx .cl-filterbar{gap:14px}   /* more breathing room between wrapped rows */
  .fecx .cl-filterbar .quick-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                          /* Firefox */
    padding-right:28px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .fecx .cl-filterbar .quick-chips::-webkit-scrollbar{display:none} /* WebKit */
  .fecx .cl-filterbar .quick-chips .chip{flex:0 0 auto;white-space:nowrap}

  /* Hide the Row/Grid toggle on narrow viewports - the grid is forced
     to one column at this width anyway, so the toggle is redundant. */
  .fecx .cl-filterbar .cl-view-toggle{display:none}
}

@media (max-width:600px){
  .fecx .cl-alphabet{gap:4px}
  .fecx .cl-alpha-btn{width:28px;height:28px;font-size:12px}
  .fecx .cl-alphabet .lbl{display:none}
  .fecx .cl-list-stack[data-view="grid"]{grid-template-columns:1fr}
}


/* ====================================================================
 * Sticky boundary for the filter toolbar (.cl-filterbar inside)
 * Wrapper added by the lib around filterbar + .cl-main (the list stack
 * + pagination). position:relative makes this the containing block for
 * the sticky child, so scrolling past .listing-results breaks the
 * sticky - the filterbar stops following at the end of the directory,
 * before the editorial intro article.
 * ==================================================================== */
.fecx .listing-results{position:relative}


/* ====================================================================
 * Casino of the Month - accent override (sprint 3 step 2E v3)
 * Differentiates COFM from .cl-list-card.editors-pick (which uses the
 * editorial green --accent). COFM gets a warm amber/gold palette to
 * read as "award/feature of the month" rather than "editorial pick"
 * (similar but semantically distinct). Local CSS vars only - no global
 * tokens touched, fully revertible by removing this block.
 * ==================================================================== */
.fecx .cl-cofm-card{
  --cofm-accent: #b07300;        /* amber-700: distinct from --accent green */
  --cofm-accent-ink: #6b4400;    /* amber-900: deeper for text + hover */
  --cofm-accent-soft: #fdf6e3;   /* warm cream wash, neutral against paper */
  background:linear-gradient(135deg,var(--cofm-accent-soft) 0%,var(--paper) 55%,var(--paper) 100%);
  border-color:var(--cofm-accent);
}
.fecx .cl-cofm-eyebrow{color:var(--cofm-accent-ink)}
.fecx .cl-cofm-stats{border-top-color:rgba(176,115,0,0.18)}
.fecx .cl-cofm-cta .btn-primary{background:var(--cofm-accent);color:#fff}
.fecx .cl-cofm-cta .btn-primary:hover{background:var(--cofm-accent-ink)}

/* Eyebrow row holds the "Casino of the Month · May 2026" label and the
   info popover trigger button side by side. Wraps gracefully on narrow
   viewports (info button drops below the label). */
.fecx .cl-cofm-eyebrow-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:8px;
}
.fecx .cl-cofm-eyebrow-row .cl-cofm-eyebrow{margin:0}
/* Info button: amber-toned to harmonize with the COFM accent (the
   bonuses-hub instance uses the editorial green) */
.fecx .cl-cofm-card .fec-info-btn{
  color:var(--cofm-accent-ink);
  border-color:var(--cofm-accent);
}
.fecx .cl-cofm-card .fec-info-btn:hover,
.fecx .cl-cofm-card .fec-info-btn:focus{
  background:var(--cofm-accent-soft);
  border-color:var(--cofm-accent-ink);
}

/* end SPRINT3_listing_full.css */


/* ====================================================================
 * Casino of the Month - single review page amber overrides
 * ====================================================================
 * Matches the listing-page COFM accent (amber gold) on the single
 * review page. Two surfaces:
 *
 *   - .cr-badge--cofm        Hero eyebrow pill ("Casino of the Month · Aug 1, 2021")
 *   - .cr-side-card--cofm    Sidebar archive card (footer of the right column)
 *
 * Previously both used .--info (generic blue/cyan info palette) which
 * collided with the editorial green accent. Distinct amber signals
 * "award/feature of the month" rather than "informational" or "editorial
 * pick".
 * ==================================================================== */
.fecx .cr-badge--cofm{
  background:#fdf6e3;
  color:#6b4400;
  border:1px solid #b07300;
}
.fecx .cr-side-card--cofm{
  background:#fdf6e3;
  border-color:#b07300;
}
.fecx .cr-side-card--cofm h3{color:#6b4400}
.fecx .cr-side-card--cofm .cr-side-status{color:#b07300}


/* ====================================================================
 * Sidebar additions (sprint 3 - single review page refinement)
 *
 * cr-side-chip--restricted : warn/danger accent for Restricted Countries
 *                            chips (not accepted here, semantically
 *                            distinct from neutral Software/Banking).
 * cr-yesno + cr-yesno--yes/no : Yes/No badge in the Casino Details k/v
 *                            row (used for Live support). Yes = verified
 *                            green + check icon; No = inert grey.
 * ==================================================================== */
.fecx .cr-side-chip--restricted{
  background:rgba(154,40,40,0.07);
  color:var(--danger);
  border-color:rgba(154,40,40,0.20);
}

.fecx .cr-yesno{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;
}
.fecx .cr-yesno--yes{color:var(--verified)}
.fecx .cr-yesno--no{color:var(--ink-4)}
.fecx .cr-yesno-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--verified);color:#fff;
  font-size:10px;line-height:1;font-weight:700;
}

/* Sidebar chip truncation: native <details>/<summary> toggle - no JS.
   Pattern aligned to hub-bonuses .bd-elig-list. display:contents on
   the <details> so its children participate in the parent flex wrap.
   :not([open]) hides the collapsed chips and shows the +N more link;
   [open] shows the chips and hides the link. */
.fecx .cr-side-chips-more{display:contents}
.fecx .cr-side-chips-more:not([open]) > .cr-side-chip{display:none}
.fecx .cr-side-chips-more[open] > .cr-side-chip-more{display:none}
.fecx .cr-side-chip-more{
  display:inline-block;
  padding:5px 10px;
  font-size:12px;
  color:var(--accent);
  border-bottom:1px dotted var(--accent);
  cursor:pointer;
  list-style:none;
  font-family:var(--mono);
}
.fecx .cr-side-chip-more::-webkit-details-marker{display:none}
.fecx .cr-side-chip-more::after{content:" \203A";margin-left:2px}


/* ====================================================================
 * Withdrawal tile - empty state microcopy
 * Used when a payment method has neither Time nor Limits populated.
 * Replaces the previous two em-dash placeholders ("—/—") with a single
 * clearer "Not offered" italic line, sitting where the rows would be.
 * ==================================================================== */
.fecx .cr-wd-tile__notoffered{
  font-size:13px;
  color:var(--ink-4);
  font-style:italic;
  text-align:center;
  padding:24px 0;
  letter-spacing:0.01em;
}


/* ====================================================================
 * Review form refinements (Sprint 3 - single review page)
 *
 * 1. Stars inactive: bump contrast from 0.18 to 0.32 alpha so they
 *    don't disappear into the paper background.
 * 2. Counter live color states: red below min, green in range,
 *    amber near max, red at cap. Driven by an inline IIFE in the form.
 * 3. Submit button loading state: inline spinner + visually disabled
 *    pointer-events. Label is replaced by "Submitting..." via JS.
 * ==================================================================== */

/* Stars - inactive state more visible */
.fecx .cr-rw-stars label{
  color:rgba(20,17,13,0.32);  /* override from 0.18 (too pale on paper) */
}

/* Counter live color states (BEM modifiers, applied by IIFE) */
.fecx .cr-rw-counter-value--below-min{color:var(--danger)}
.fecx .cr-rw-counter-value--ok{color:var(--verified)}
.fecx .cr-rw-counter-value--near-max{color:var(--warn)}
.fecx .cr-rw-counter-value--max{color:var(--danger)}

/* Submit button loading state */
.fecx .cr-rw-submit--loading{
  pointer-events:none;
  opacity:0.85;
}
.fecx .cr-rw-submit--loading::after{
  content:"";
  display:inline-block;
  width:14px;height:14px;
  margin-left:8px;
  vertical-align:-2px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:cr-rw-spin 0.8s linear infinite;
}
@keyframes cr-rw-spin{ to{ transform:rotate(360deg); } }


/* ====================================================================
 * Player reviews section refinements
 *
 * 1. cr-reviews-write: the summary card's "+ Write a review" anchor
 *    previously had no CSS at all - inherited generic <a> styling and
 *    rendered as an unreadable solid-black box (text color matched bg).
 *    Style it as a clear secondary CTA (ghost button with accent border).
 *
 * 2. cr-review-item--hidden: client-side pagination. The lib emits the
 *    first N reviews visible, the rest with this modifier. The
 *    "Show more reviews" button (.cr-reviews-loadmore) reveals next N
 *    per click and updates the counter.
 * ==================================================================== */

/* Summary card "Write a review" anchor → ghost CTA */
.fecx .cr-reviews-write{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
  white-space:nowrap;
}
.fecx .cr-reviews-write:hover{
  background:var(--ink);
  color:var(--paper);
}

/* Pagination - hidden review items */
.fecx .cr-review-item--hidden{display:none}

/* Load-more control: button + counter */
.fecx .cr-reviews-loadmore{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:20px 0 4px;
  padding:16px;
}
.fecx .cr-reviews-loadmore__btn{
  appearance:none;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink);
  padding:10px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
}
.fecx .cr-reviews-loadmore__btn:hover{
  background:var(--bg-2);
  border-color:var(--ink-3);
}
.fecx .cr-reviews-loadmore__counter{
  font-size:13px;
  color:var(--ink-3);
  font-family:var(--mono);
}
.fecx .cr-reviews-loadmore__counter strong{
  color:var(--ink);
  font-weight:700;
}


/* ====================================================================
 * Frank Score info popover - sits inside .cr-frank, anchored at the
 * bottom of the side panel. Reuses .fec-info-btn / .fec-info-popover
 * classes already styled in fec-edition.css.
 *
 * NOTE: fecv2.css owns the popover's layout (position/padding/shadow)
 * but scopes the rules deeper than .fec-editors-picks__info alone -
 * they don't cascade when the wrapper is just .cr-frank-info. So we
 * re-declare the layout primitives here for the single-review hero
 * usage; the editorial green/cream colours still come from fec-edition.
 * ==================================================================== */
.fecx .cr-frank-info{
  position:relative;          /* anchor for the absolute popover */
  margin-top:12px;
  display:flex;
  justify-content:flex-end;   /* right-aligned under the influence bars */
}
.fecx .cr-frank-info .fec-info-popover{
  /* !important here intentional: fecv2.css base layer scopes position
     under .fec-editors-picks (the full picks band wrapper, not just
     .fec-editors-picks__info), so its rules win specificity even though
     we're inside that __info class. Workaround until we can refactor
     fecv2.css to use a lower-specificity base. */
  position:absolute !important;
  bottom:100% !important;
  right:0 !important;
  left:auto !important;
  top:auto !important;
  margin-bottom:10px;
  width:320px;
  max-width:90vw;
  padding:16px 20px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,0.18);
  z-index:1001 !important;
}
.fecx .cr-frank-info .fec-info-popover[hidden]{display:none}
.fecx .cr-frank-info .fec-info-popover__arrow{
  position:absolute;
  top:100%;                   /* arrow below popover, pointing down toward the button */
  right:24px;
  width:12px;height:12px;
  background:var(--paper);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transform:translateY(-6px) rotate(45deg);
}
.fecx .cr-frank-info .fec-info-popover__title{
  margin:0 0 8px;font-size:15px;font-weight:700;
}
.fecx .cr-frank-info .fec-info-popover__intro{
  margin:0 0 12px;font-size:13px;line-height:1.5;
}
.fecx .cr-frank-info .fec-info-popover__list{
  list-style:none;margin:0 0 12px;padding:0;
}
.fecx .cr-frank-info .fec-info-popover__list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;margin-bottom:4px;border-radius:8px;font-size:13px;
}
.fecx .cr-frank-info .fec-info-popover__metric{font-weight:500}
.fecx .cr-frank-info .fec-info-popover__weight{font-weight:600;font-family:var(--mono);font-size:12px}
.fecx .cr-frank-info .fec-info-popover__note{
  margin:12px 0;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.5;
}
.fecx .cr-frank-info .fec-info-popover__link{
  font-weight:600;font-size:13px;text-decoration:none;
}
.fecx .cr-frank-info .fec-info-popover__close{
  position:absolute;top:8px;right:10px;
  background:none;border:0;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;
}

/* Mobile: full-width bottom sheet */
@media (max-width:560px){
  .fecx .cr-frank-info .fec-info-popover{
    position:fixed !important;
    bottom:0 !important;left:0 !important;right:0 !important;
    top:auto !important;
    width:100% !important;max-width:100% !important;
    border-radius:16px 16px 0 0;
    margin:0;padding:20px 20px 32px;
    box-shadow:0 -8px 32px rgba(0,0,0,0.24);
    z-index:1001 !important;
  }
  .fecx .cr-frank-info .fec-info-popover__arrow{display:none}
}

/* Backdrop: shared across all .fec-info-popover instances (created
   dynamically via JS as .fec-info-backdrop appended to body). Explicit
   z-index just below any popover (1001), and a dim rgba background. */
.fecx .fec-info-backdrop,
.fec-info-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,17,13,0.48);
  z-index:1000;
}



/* ====================================================================
 * SPRINT 1+2 SINGLE REVIEW PAGE - BASE LAYER
 * Late migration from the sandbox <style> inline (fec_template_test.php
 * lines 269-1745). These rules define the markup primitives for the
 * single casino review (.cr-hero-card, .cr-stats-strip, .cr-side-card,
 * .cr-review-item, .cr-wd-tile, etc) and were never moved to the
 * production stylesheet during sprint 1+2 because the sandbox carried
 * them inline. The SPRINT3 refinements above override them where needed
 * via the higher-specificity .fecx selector.
 * ==================================================================== */
.cr-breadcrumb {
  padding: 16px 28px 0;
}
.cr-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.cr-breadcrumb li:not(:first-child)::before {
  content: "›"; color: var(--ink-4); margin-right: 8px;
}
.cr-breadcrumb a { color: var(--ink-3); }
.cr-breadcrumb a:hover { color: var(--accent); }
.cr-breadcrumb li[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---- Eyebrow ---- */
.cr-eyebrow {
  font: 11px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Hero card ---- */
.cr-hero { padding: 24px 0 8px; }
.cr-hero-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.cr-hero-left { display: flex; flex-direction: column; gap: 20px; }
.cr-hero-name-row { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.cr-hero-title {
  font-size: 36px; line-height: 1.1; margin: 0;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
}
.cr-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.cr-hero-stat .k {
  font: 11px var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.cr-hero-stat .v {
  font-size: 22px; font-weight: 700; color: var(--ink);
  line-height: 1.2;
}
.cr-hero-stat .v sup { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }

/* ---- Stars ---- */
.cr-stars {
  font-size: 14px; letter-spacing: 1px; color: var(--warn);
  display: inline-block; vertical-align: middle;
}
.cr-stars-half { color: var(--warn); }
.cr-stars-empty { color: var(--rule); }

/* ---- Sentiment bar ---- */
.cr-sentiment { display: flex; flex-direction: column; gap: 8px; }
.cr-sentiment-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--bg-2);
  display: flex;
}
.cr-sentiment-bar .seg { height: 100%; transition: width 0.3s; }
.cr-sentiment-bar .seg-pos { background: var(--verified); }
.cr-sentiment-bar .seg-neu { background: var(--neu); }
.cr-sentiment-bar .seg-neg { background: var(--danger); }
.cr-sentiment-legend {
  display: flex; gap: 16px; font-size: 12px;
  color: var(--ink-3);
}
.cr-sentiment-legend .item { display: inline-flex; align-items: center; gap: 4px; }
.cr-sentiment-legend .item.pos::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--verified); display:inline-block; }
.cr-sentiment-legend .item.neu::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--neu); display:inline-block; }
.cr-sentiment-legend .item.neg::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--danger); display:inline-block; }
.cr-sentiment-legend b { color: var(--ink); font-weight: 700; }
.cr-sentiment-empty {
  padding: 12px 16px; background: var(--bg-2); border-radius: var(--radius-sm);
  color: var(--ink-3); font-size: 13px; text-align: center;
}

/* ---- CTAs ---- */
.cr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; border: 1px solid transparent;
  cursor: pointer; transition: background 0.15s, transform 0.05s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: white;
}
.btn-primary:hover { background: #084842; }
.btn-ghost {
  background: transparent; color: var(--ink-2);
  border-color: var(--rule);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--ink-4); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.cr-arr { font-size: 16px; line-height: 1; }

/* ---- Brand chip ---- */
.cr-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: white; font-weight: 700;
  line-height: 1; flex-shrink: 0;
}

/* ---- Frank Score panel ---- */
.cr-frank {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.cr-frank-top { display: flex; gap: 20px; align-items: center; }

.cr-donut { position: relative; flex-shrink: 0; }
.cr-donut svg { display: block; width: 100%; height: 100%; }
.cr-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.cr-donut-v { font-size: 28px; font-weight: 700; color: var(--ink); }
.cr-donut-lbl {
  font: 10px var(--mono); letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}

.cr-frank-components { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cr-frank-comp {
  display: grid; grid-template-columns: 12px 1fr auto;
  align-items: center; gap: 8px;
  font-size: 13px;
}
.cr-frank-comp .swatch {
  width: 10px; height: 10px; border-radius: 50%;
}
.cr-frank-comp .lbl { color: var(--ink-2); }
.cr-frank-comp .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.cr-influence { display: flex; flex-direction: column; gap: 12px; }
.cr-influence-row .row-top {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-3); margin-bottom: 4px;
}
.cr-influence-row .row-top .k { font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cr-influence-row .row-top .v { font-weight: 700; color: var(--ink); font-size: 14px; }
.cr-influence-row .row-top .v sup { font-size: 9px; }
.cr-influence-row .bar {
  height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden;
}
.cr-influence-row .bar span { display: block; height: 100%; transition: width 0.3s; }

/* ---- Stats strip ---- */
.cr-stats-strip { padding: 8px 0 24px; }
.cr-stats-row {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.cr-stats-row .stat {
  padding: 16px 20px;
  border-right: 1px solid var(--rule-2);
}
.cr-stats-row .stat:last-child { border-right: none; }
.cr-stats-row .stat .k {
  font: 11px var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.cr-stats-row .stat .v {
  font-size: 18px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.cr-stats-row .stat .v.mono { font-family: var(--mono); font-size: 14px; }
.cr-stats-row .stat .v.sentiment { color: var(--verified); }
.cr-stats-row .stat .v sup { font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* ---- Main 2-col layout ---- */
.cr-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  padding: 24px 0;
}
.cr-content {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
}
.cr-content h1, .cr-content h2, .cr-content h3 {
  color: var(--ink); margin-top: 1.2em;
}
.cr-content h2 { font-size: 22px; margin-top: 1.4em; }
.cr-content h3 { font-size: 17px; margin-top: 1.2em; }
.cr-content p { margin: 0.9em 0; }
.cr-content a { color: var(--accent); text-decoration: underline; }

/* ---- Sidebar ---- */
.cr-sidebar { display: flex; flex-direction: column; gap: 16px; }
.cr-side-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
}
.cr-side-card h3 {
  font-size: 13px; font-family: var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.cr-side-count { color: var(--ink-4); font-weight: 500; }
.cr-side-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--rule-2);
  font-size: 13px;
}
.cr-side-row:first-of-type { border-top: none; padding-top: 0; }
.cr-side-row .k { color: var(--ink-3); font-size: 12px; }
.cr-side-row .v { color: var(--ink); font-weight: 500; }
.cr-side-row .v a { color: var(--accent); text-decoration: underline; }
.cr-side-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cr-side-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-2);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-2);
}

/* ---- Placeholder section ---- */
.placeholder {
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 20px 28px;
  margin: 16px 0;
  color: var(--ink-3);
  font-size: 13px;
  font-family: var(--mono);
}
.placeholder b { color: var(--warn); }

/* ---- Player reviews ---- */
.cr-reviews { padding: 24px 0; background: var(--bg-2); }
.cr-reviews h2 {
  font-size: 26px; color: var(--ink);
  margin: 0 0 24px; letter-spacing: -0.01em;
}
.cr-reviews-summary {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 16px;
}
.cr-reviews-summary .count-block .count {
  font-size: 36px; font-weight: 700; color: var(--ink);
  display: block; line-height: 1;
}
.cr-reviews-summary .count-block .count-lbl {
  font: 11px var(--mono); color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cr-reviews-summary .overall {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cr-reviews-summary .overall .lbl {
  font: 11px var(--mono); color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-right: 4px;
}
.cr-reviews-summary .overall .score {
  font-size: 24px; font-weight: 700; color: var(--ink);
}
.cr-reviews-summary .overall .sep { color: var(--rule); }
.cr-reviews-summary .overall .sent { color: var(--verified); font-weight: 600; font-size: 13px; }
.cr-reviews-write {
  padding: 10px 18px;
  background: var(--ink);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: none;
}
.cr-reviews-write:hover { background: var(--ink-2); }
.cr-review-list { display: flex; flex-direction: column; gap: 12px; }
.cr-review-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.cr-review-head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.cr-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.cr-review-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-review-who .user { font-weight: 700; color: var(--ink); font-size: 14px; }
.cr-review-who .badge {
  font-size: 11px; color: var(--ink-3);
  background: var(--bg-2);
  padding: 2px 8px; border-radius: 100px;
}
.cr-review-meta { text-align: right; }
.cr-review-meta .date {
  display: block; font: 11px var(--mono);
  color: var(--ink-4); margin-top: 2px;
}
.cr-review-text {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 14px; line-height: 1.6;
}
.cr-review-criteria {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 12px 0 0;
  padding: 12px 0 0; border-top: 1px solid var(--rule-2);
}
.cr-review-criteria > div {
  display: flex; flex-direction: column; align-items: flex-start;
}
.cr-review-criteria dt {
  font: 10px var(--mono); color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cr-review-criteria dd {
  margin: 0; font-weight: 700; color: var(--ink);
  font-size: 14px;
}
.cr-review-reply {
  margin: 12px 0 0; padding: 12px 16px;
  background: var(--bg-2); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.cr-review-reply .reply-head {
  font: 11px var(--mono); color: var(--accent);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.cr-review-reply p { margin: 0; color: var(--ink-2); font-size: 13px; }

.cr-reviews-empty {
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--ink-3);
}
.cr-reviews-empty p { margin: 0 0 16px; }

/* ---- Footer ---- */
.test-footer {
  background: var(--ink); color: var(--ink-4);
  padding: 24px 28px; text-align: center;
  font: 12px var(--mono);
}
.test-footer b { color: var(--verified); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .cr-hero-card { grid-template-columns: 1fr; }
  .cr-stats-row { grid-template-columns: repeat(2, 1fr); }
  .cr-stats-row .stat:nth-child(2n) { border-right: none; }
  .cr-main { grid-template-columns: 1fr; }
  .cr-reviews-summary { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 580px) {
  .cr-hero-title { font-size: 28px; }
  .cr-hero-stats { grid-template-columns: 1fr; }
  .cr-frank-top { flex-direction: column; }
}

/* ============================================================
   PROGRESSIVE JACKPOTS TABLE
   ============================================================ */
.cr-jpot-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
}
.cr-jpot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.10);
  border-radius: 12px;
  overflow: hidden;
}
.cr-jpot-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,17,13,0.55);
  padding: 12px 16px;
  background: rgba(20,17,13,0.03);
  border-bottom: 1px solid rgba(20,17,13,0.08);
}
.cr-jpot-table .cr-jpot-th-amount,
.cr-jpot-table .cr-jpot-th-num    { text-align: right; }
.cr-jpot-table .cr-jpot-th-jindex { text-align: right; min-width: 140px; }

.cr-jpot-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(20,17,13,0.05);
  vertical-align: middle;
}
.cr-jpot-table tbody tr:first-child td { border-top: none; }

.cr-jpot-game-name {
  font-weight: 700;
  color: #14110d;
  margin-bottom: 3px;
}
.cr-jpot-game-meta {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cr-jpot-sep { opacity: 0.5; }

.cr-jpot-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cr-jpot-dot--good { background: #1c7a4a; }
.cr-jpot-dot--fair { background: #c4ad7a; }
.cr-jpot-dot--poor { background: #9a2828; }

.cr-jpot-source--local {
  color: #0b6b62;
  font-weight: 600;
}
.cr-jpot-source--pooled {
  color: rgba(20,17,13,0.55);
}

.cr-jpot-amount {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
  color: #14110d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cr-jpot-amount--nearavg  { color: #a85a1c; }
.cr-jpot-amount--aboveavg { color: #9a2828; }

.cr-jpot-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(20,17,13,0.75);
  white-space: nowrap;
}

.cr-jpot-jindex-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.cr-jpot-jindex-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
  color: #14110d;
}
.cr-jpot-jindex-bar {
  display: inline-block;
  width: 80px; height: 6px;
  background: rgba(20,17,13,0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.cr-jpot-jindex-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #c4ad7a, #1c7a4a);
  border-radius: 3px;
}

.cr-jpot-legend {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 12px;
  color: rgba(20,17,13,0.65);
}
.cr-jpot-legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.cr-jpot-legend-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: rgba(20,17,13,0.55);
  margin-right: -4px;
}
.cr-jpot-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-jpot-legend-chip {
  display: inline-block;
  width: 12px; height: 8px;
  border-radius: 2px;
}
.cr-jpot-legend-chip--nearavg  { background: #a85a1c; }
.cr-jpot-legend-chip--aboveavg { background: #9a2828; }

@media (max-width: 780px) {
  .cr-jpot-table-wrap { overflow-x: visible; }
  .cr-jpot-table,
  .cr-jpot-table thead,
  .cr-jpot-table tbody,
  .cr-jpot-table tr,
  .cr-jpot-table td { display: block; width: 100%; }
  .cr-jpot-table thead { display: none; }
  .cr-jpot-table tr {
    border-bottom: 1px solid rgba(20,17,13,0.08);
    padding: 12px 14px;
  }
  .cr-jpot-table tr:last-child { border-bottom: none; }
  .cr-jpot-table tbody td {
    padding: 4px 0;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
  }
  .cr-jpot-table tbody td.cr-jpot-game {
    display: block;
    text-align: left;
    margin-bottom: 8px;
  }
  .cr-jpot-table tbody td:before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(20,17,13,0.55);
    margin-right: 12px;
  }
  .cr-jpot-table tbody td.cr-jpot-game:before { display: none; }
}

/* ============================================================
   TOURNAMENTS — 3-up "mini" card grid (sprint 2)
   ============================================================ */
.cr-tournaments { padding: 24px 0; }

.cr-tourn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cr-tourn-card {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.08);
  border-radius: 10px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Status pill ---- */
.cr-tourn-status {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.cr-tourn-status--running {
  background: rgba(28,122,74,0.12);
  color: #1c7a4a;
}
.cr-tourn-status--running:before {
  content: '\25CF';
  margin-right: 5px;
}
.cr-tourn-status--imminent {
  background: rgba(168,90,28,0.12);
  color: #a85a1c;
}
.cr-tourn-status--scheduled {
  background: rgba(20,17,13,0.06);
  color: rgba(20,17,13,0.6);
}

/* ---- Tournament name + game ---- */
.cr-tourn-name {
  font-size: 16px;
  font-weight: 800;
  color: #14110d;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.cr-tourn-game {
  font-size: 13px;
  color: rgba(20,17,13,0.6);
  line-height: 1.4;
}
.cr-tourn-game:before {
  content: '\21B3';
  margin-right: 5px;
  color: rgba(20,17,13,0.35);
}

/* ---- Stats: prize + entry, 2-col ---- */
.cr-tourn-stats {
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cr-tourn-stat { margin: 0; }
.cr-tourn-stat dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(20,17,13,0.5);
  font-weight: 700;
  margin: 0 0 3px 0;
}
.cr-tourn-stat dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #14110d;
  font-variant-numeric: tabular-nums;
}

/* ---- Time line (countdown / absolute) ---- */
.cr-tourn-time {
  font-size: 13px;
  color: rgba(20,17,13,0.7);
  padding: 7px 10px;
  background: rgba(20,17,13,0.04);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---- CTA pinned to bottom of card ---- */
.cr-tourn-cta {
  margin-top: auto;
  padding-top: 4px;
}
.cr-tourn-cta .btn {
  width: 100%;
  justify-content: center;
}
.cr-tourn-cta-arr {
  display: inline-block;
  font-size: 13px;
  margin-left: 4px;
}

/* ---- Mobile <780px: 1-col stack ---- */
@media (max-width: 780px) {
  .cr-tourn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WRITE-A-REVIEW FORM — collapsible <details>, CSS-only stars
   ============================================================ */
.cr-review-write { padding: 28px 0; }

/* Collapse machinery */
.cr-rw-details { padding: 0; }
.cr-rw-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 4px;
  user-select: none;
}
.cr-rw-details > summary::-webkit-details-marker { display: none; }
.cr-rw-summary-text .eyebrow { margin-bottom: 4px; }
.cr-rw-title { margin: 0; }
.cr-rw-summary-arrow {
  font-size: 32px;
  font-weight: 200;
  color: rgba(20,17,13,0.4);
  line-height: 1;
  transition: transform 0.2s ease, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cr-rw-summary-teaser {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: rgba(20,17,13,0.6);
  font-weight: 400;
  line-height: 1.5;
}

/* ----- Closed state: card-button vibe (high visibility) ----- */
.cr-rw-details:not([open]) > .cr-rw-summary {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.1);
  border-radius: 12px;
  padding: 22px 84px 22px 24px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.cr-rw-details:not([open]) > .cr-rw-summary:hover {
  border-color: rgba(28,122,74,0.45);
  box-shadow: 0 6px 20px rgba(20,17,13,0.07);
}
.cr-rw-details:not([open]) > .cr-rw-summary:active {
  transform: translateY(1px);
}
.cr-rw-details:not([open]) .cr-rw-summary-text .eyebrow {
  color: #1c7a4a;
}
.cr-rw-details:not([open]) .cr-rw-summary-arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c7a4a;
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px; /* optical center of + glyph */
  box-shadow: 0 2px 8px rgba(28,122,74,0.25);
}
.cr-rw-details:not([open]) > .cr-rw-summary:hover .cr-rw-summary-arrow {
  background: #14583a;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 14px rgba(28,122,74,0.35);
}

/* ----- Open state: sober, the form is the focus now ----- */
.cr-rw-details[open] > .cr-rw-summary {
  background: transparent;
  border: none;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(20,17,13,0.06);
  margin-bottom: 4px;
}
.cr-rw-details[open] .cr-rw-summary-arrow {
  position: static;
  transform: rotate(45deg);
  width: auto;
  height: auto;
  background: transparent;
  color: rgba(20,17,13,0.4);
  box-shadow: none;
  padding: 0;
}
.cr-rw-details[open] .cr-rw-summary-teaser {
  display: none;
}

.cr-rw-subtitle { margin: 16px 0 24px; }

/* Status banner (populated by JS on submit) */
.cr-rw-status { margin: 0 0 16px; padding: 0; }
.cr-rw-status[data-state="error"] {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(168,38,38,0.08);
  color: #9a2828;
  border: 1px solid rgba(168,38,38,0.2);
  font-size: 14px;
}
.cr-rw-status[data-state="success"] {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(28,122,74,0.08);
  color: #1c7a4a;
  border: 1px solid rgba(28,122,74,0.2);
  font-size: 14px;
}

/* Form layout */
.cr-rw-form {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.08);
  border-radius: 10px;
  padding: 24px;
}

.cr-rw-field { margin-bottom: 18px; }
.cr-rw-field:last-of-type { margin-bottom: 0; }

.cr-rw-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #14110d;
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}
.cr-rw-req { color: #9a2828; margin-left: 2px; }
.cr-rw-optional {
  color: rgba(20,17,13,0.5);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
}

.cr-rw-form input[type="text"],
.cr-rw-form input[type="email"],
.cr-rw-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(20,17,13,0.15);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: #14110d;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.cr-rw-form input:focus,
.cr-rw-form textarea:focus {
  border-color: #1c7a4a;
  box-shadow: 0 0 0 3px rgba(28,122,74,0.1);
  outline: none;
}
.cr-rw-form textarea { resize: vertical; min-height: 160px; line-height: 1.5; }

.cr-rw-help {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  margin-top: 5px;
}
.cr-rw-counter { text-align: right; font-variant-numeric: tabular-nums; }
.cr-rw-counter-value { font-weight: 700; color: #14110d; }
.cr-rw-counter-value.is-under { color: #a85a1c; }
.cr-rw-counter-value.is-over  { color: #9a2828; }
.cr-rw-counter-value.is-valid { color: #1c7a4a; }

/* Honeypot - hidden off-screen but not display:none (which some bots detect) */
.cr-rw-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Star rating - radios in DOM reverse, flex row-reverse, fill on :checked ~ */
.cr-rw-field-rating {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.cr-rw-field-rating .cr-rw-label { float: none; }
.cr-rw-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}
.cr-rw-stars input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cr-rw-stars label {
  font-size: 32px;
  line-height: 1;
  color: rgba(20,17,13,0.18);
  cursor: pointer;
  padding: 2px;
  transition: color 0.12s;
}
.cr-rw-stars label:hover,
.cr-rw-stars label:hover ~ label,
.cr-rw-stars input[type="radio"]:checked ~ label {
  color: #d4a017;
}
.cr-rw-stars input[type="radio"]:focus-visible + label {
  outline: 2px solid #1c7a4a;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Row layout (country + show-country checkbox side by side) */
.cr-rw-field-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.cr-rw-field-col { flex: 1 1 220px; min-width: 0; }
.cr-rw-field-checkbox {
  display: flex;
  align-items: flex-end;
  padding-bottom: 11px;
}
.cr-rw-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(20,17,13,0.8);
}
.cr-rw-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1c7a4a;
  cursor: pointer;
}

/* Country toggle: read-only display + checkbox in a single bordered row.
   Replaces the previous free-form text input + checkbox pair. */
.cr-rw-field-location {
  background: rgba(28,122,74,0.04);
  border: 1px solid rgba(28,122,74,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.cr-rw-field-location:hover {
  border-color: rgba(28,122,74,0.35);
  background: rgba(28,122,74,0.06);
}
.cr-rw-location-toggle {
  margin: 0;
  width: 100%;
}
.cr-rw-location-text {
  font-size: 14px;
  color: rgba(20,17,13,0.85);
  line-height: 1.45;
}
.cr-rw-location-text strong {
  color: #14583a;
  font-weight: 700;
}

/* Turnstile widget wrapper */
.cr-rw-field-turnstile {
  margin-top: 8px;
}

/* Actions row */
.cr-rw-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(20,17,13,0.06); }
.cr-rw-submit { min-width: 180px; }
.cr-rw-submit[disabled],
.cr-rw-submit.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cr-rw-privacy {
  font-size: 12px;
  color: rgba(20,17,13,0.55);
  margin: 12px 0 0;
  line-height: 1.55;
  max-width: 640px;
}

/* Mobile */
@media (max-width: 600px) {
  .cr-rw-form { padding: 18px; }
  .cr-rw-stars label { font-size: 28px; }
  .cr-rw-field-row { flex-direction: column; gap: 12px; }
  .cr-rw-field-checkbox { padding-bottom: 0; padding-top: 4px; }
  .cr-rw-submit { width: 100%; }
  /* Closed summary: tighter padding, smaller fab */
  .cr-rw-details:not([open]) > .cr-rw-summary {
    padding: 18px 70px 18px 18px;
    border-radius: 10px;
  }
  .cr-rw-details:not([open]) .cr-rw-summary-arrow {
    width: 34px;
    height: 34px;
    font-size: 22px;
    right: 16px;
  }
  .cr-rw-summary-teaser { font-size: 13px; margin-top: 6px; }
  .cr-rw-title { font-size: 22px; line-height: 1.25; }
}

/* ============================================================
   WITHDRAWAL BLOCK — pending strip + 5 method tiles
   ============================================================ */
.cr-withdrawal .sec-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.cr-wd-pending {
  flex-shrink: 0;
  text-align: right;
  padding: 12px 16px;
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.08);
  border-radius: 10px;
  min-width: 160px;
}
.cr-wd-pending__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,17,13,0.55);
  margin-bottom: 4px;
}
.cr-wd-pending__value {
  font-size: 16px;
  font-weight: 700;
  color: #14110d;
}

.cr-wd-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.cr-wd-tile {
  background: var(--paper, #fdfbf6);
  border: 1px solid rgba(20,17,13,0.10);
  border-radius: 12px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s ease;
}
.cr-wd-tile--empty {
  background: transparent;
  border-style: dashed;
  color: rgba(20,17,13,0.50);
}
.cr-wd-tile__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-wd-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(11,107,98,0.10);  /* teal tint */
  color: #0b6b62;
  flex-shrink: 0;
}
.cr-wd-tile--empty .cr-wd-tile__icon {
  background: rgba(20,17,13,0.05);
  color: rgba(20,17,13,0.35);
}
.cr-wd-tile__label {
  font-size: 13px;
  font-weight: 700;
  color: #14110d;
}
.cr-wd-tile--empty .cr-wd-tile__label { color: rgba(20,17,13,0.55); }

.cr-wd-tile__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cr-wd-tile__k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,17,13,0.50);
}
.cr-wd-tile__v {
  font-size: 13px;
  line-height: 1.4;
  color: #14110d;
}
.cr-wd-tile--empty .cr-wd-tile__v { color: rgba(20,17,13,0.35); }

@media (max-width: 980px) {
  .cr-wd-grid { grid-template-columns: repeat(3, 1fr); }
  .cr-wd-tile:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 580px) {
  .cr-wd-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-withdrawal .sec-head { flex-direction: column; align-items: stretch; }
  .cr-wd-pending { text-align: left; }
}

/* ============================================================
   EDITORIAL WARNING BANNER — jr_warning + jr_warningtitle.
   Distinct visual tone from state banner: cream/sand bg with a
   red accent rail on the left so the two banners stack cleanly
   when both fire on the same page.
   ============================================================ */
.cr-warning-banner {
  margin: 0 0 14px 0;
  background: #fbf3e5;
  border: 1px solid #e6d9b8;
  border-left: 5px solid #9a2828;
  border-radius: 10px;
  padding: 16px 0;
}
.cr-warning-banner__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cr-warning-banner__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  color: #9a2828;
  padding-top: 2px;
}
.cr-warning-banner__text { flex: 1; min-width: 0; }
.cr-warning-banner__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.3;
  color: #6e1f1f;
}
.cr-warning-banner__body {
  font-size: 14px;
  line-height: 1.55;
  color: #4a3a1f;
}
.cr-warning-banner__body > *:first-child { margin-top: 0; }
.cr-warning-banner__body > *:last-child  { margin-bottom: 0; }
.cr-warning-banner__body a {
  color: #9a2828;
  text-decoration: underline;
}
.cr-warning-banner__body a:hover { color: #6e1f1f; }

/* ============================================================
   CASINO STATES — banner, eyebrow badges, hero tone modifiers,
   sidebar status cards. Sprint 1 / ondata stati.
   ============================================================ */

/* ---- State banner (above hero) ---- */
.cr-state-banner {
  margin: 0 0 16px 0;
  padding: 18px 0;
  border-radius: 12px;
  border: 1px solid transparent;
}
.cr-state-banner__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cr-state-banner__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.cr-state-banner__text { flex: 1; min-width: 0; }
.cr-state-banner__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.cr-state-banner__reason { margin: 8px 0 0 0; font-size: 14px; }
.cr-state-banner__expl   { margin: 8px 0 0 0; font-size: 14px; line-height: 1.55; }
.cr-state-banner__expl > *:first-child { margin-top: 0; }
.cr-state-banner__expl > *:last-child  { margin-bottom: 0; }

.cr-state-banner--danger {
  background: #fbecec;
  border-color: #e2bcbc;
  color: #6e1f1f;
}
.cr-state-banner--danger .cr-state-banner__title { color: #9a2828; }
.cr-state-banner--danger .cr-state-banner__icon  { color: #9a2828; }

.cr-state-banner--warn {
  background: #fbf2e8;
  border-color: #e3c9a8;
  color: #6e4419;
}
.cr-state-banner--warn .cr-state-banner__title { color: #a85a1c; }
.cr-state-banner--warn .cr-state-banner__icon  { color: #a85a1c; }

.cr-state-banner--muted {
  background: #f0ece4;
  border-color: #d4cbb8;
  color: #4a4338;
}
.cr-state-banner--muted .cr-state-banner__title { color: #4a4338; }
.cr-state-banner--muted .cr-state-banner__icon  { color: #6e6754; }

/* ---- Eyebrow badges (inside hero) ---- */
.cr-eyebrow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cr-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
}
.cr-badge--danger { background: #9a2828; color: #fff; }
.cr-badge--warn   { background: #a85a1c; color: #fff; }
.cr-badge--muted  { background: #e8e1cf; color: #4a4338; border-color: #d4cbb8; }
.cr-badge--info   { background: #e6efed; color: #0b6b62; border-color: #c4d8d4; }

/* ---- Hero tone modifiers ---- */
.cr-hero-card--blacklisted {
  background: linear-gradient(to bottom, #fbecec 0%, #fdfbf6 90px);
  border-color: #e2bcbc;
}
.cr-hero-card--blacklisted .cr-frank-donut svg { filter: grayscale(0.7) opacity(0.85); }

.cr-hero-card--suspended {
  background: linear-gradient(to bottom, #fbf2e8 0%, #fdfbf6 90px);
  border-color: #e3c9a8;
}

.cr-hero-card--closed {
  background: #f7f4ed;
  border-color: #d4cbb8;
}
.cr-hero-card--closed .cr-frank-donut svg,
.cr-hero-card--closed .cr-hero-title {
  filter: grayscale(0.9) opacity(0.8);
}

.cr-hero-card--geo_blocked {
  /* Casino is fine, just not for this visitor — keep neutral tone, no recolouring */
}

/* Disabled CTA (used in geo-block) */
.btn.btn-disabled,
.btn[disabled] {
  background: #c4ad7a;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Sidebar status cards ---- */
.cr-side-card--danger {
  background: #fbecec;
  border-color: #e2bcbc;
}
.cr-side-card--danger h3 { color: #9a2828; }
.cr-side-card--warn {
  background: #fbf2e8;
  border-color: #e3c9a8;
}
.cr-side-card--warn h3 { color: #a85a1c; }
.cr-side-card--muted {
  background: #f0ece4;
  border-color: #d4cbb8;
}
.cr-side-card--muted h3 { color: #4a4338; }
.cr-side-card--info {
  background: #e6efed;
  border-color: #c4d8d4;
}
.cr-side-card--info h3 { color: #0b6b62; }

.cr-side-status {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cr-side-card p {
  margin: 6px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ====== Sprint 2 step 5 — write-review JS-driven states ====== */

/* Field error state (server-side validation echoes per-field) */
.cr-rw-field.is-error > .cr-rw-form input,
.cr-rw-field.is-error input[type="text"],
.cr-rw-field.is-error input[type="email"],
.cr-rw-field.is-error textarea {
  border-color: #9a2828;
  box-shadow: 0 0 0 3px rgba(168,38,38,0.08);
}
.cr-rw-field.is-error input:focus,
.cr-rw-field.is-error textarea:focus {
  border-color: #9a2828;
  box-shadow: 0 0 0 3px rgba(168,38,38,0.18);
}
.cr-rw-field-rating.is-error .cr-rw-stars {
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  background: rgba(168,38,38,0.06);
  outline: 1px solid rgba(168,38,38,0.25);
}
.cr-rw-error-msg {
  font-size: 12px;
  color: #9a2828;
  margin-top: 6px;
  font-weight: 600;
  line-height: 1.4;
}

/* Submit button loading state (spinner) */
.cr-rw-submit.is-loading {
  position: relative;
  pointer-events: none;
}
.cr-rw-submit.is-loading::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: cr-rw-spin 0.7s linear infinite;
}
@keyframes cr-rw-spin { to { transform: rotate(360deg); } }

/* Success state: hide the form, keep the status banner visible */
.cr-rw-details.is-submitted .cr-rw-form,
.cr-rw-details.is-submitted .cr-rw-subtitle {
  display: none;
}
.cr-rw-details.is-submitted .cr-rw-status {
  margin-top: 16px;
}

/* No-JS / page-load banner from ?fec_review_status= */
.cr-rw-status[data-state="success"],
.cr-rw-status[data-state="error"] {
  scroll-margin-top: 80px;
}

/* ============================================================
   FLAG / UNDER REVIEW (jr_flag = '*flagged*') — additions
   Append to fec-edition.css if `grep -c "cr-flag-banner"` = 0.
   ============================================================ */

/* Banner — casino review page + single bonus page.
   Amber variant of .cr-warning-banner: casino is still live and
   playable, tone = caution, not danger (red stays for blacklist). */
.cr-flag-banner {
  margin: 0 0 14px 0;
  background: #fdf6ec;
  border: 1px solid #ecd9bb;
  border-left: 5px solid #a85a1c;
  border-radius: 10px;
  padding: 16px 0;
}
.cr-flag-banner__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cr-flag-banner__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  color: #a85a1c;
  padding-top: 2px;
}
.cr-flag-banner__text { flex: 1; min-width: 0; }
.cr-flag-banner__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.3;
  color: #7a4012;
}
.cr-flag-banner__body {
  font-size: 14px;
  line-height: 1.55;
  color: #4a3a1f;
}
.cr-flag-banner__body > *:first-child { margin-top: 0; }
.cr-flag-banner__body > *:last-child  { margin-bottom: 0; }

/* Badge — inline next to the casino name on cards (directory grid,
   home latest, other-casinos, bonus cards). Compact amber pill; the
   short jr_flagreason rides in title= (native tooltip on hover). */
.fec-flag-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #a85a1c;
  background: #f7e8d4;
  border: 1px solid #e3c9a3;
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: default;
}

/* ====================================================================
 * FXShield "Safety analysis" — full-width section below the casino hero
 * Append to fec-edition.css (the file with .cr-frank / .cr-hero-card).
 * Purge CloudFlare after. Replaces any earlier .cr-fx block.
 * ==================================================================== */

/* Section band */
.fecx .cr-fx-section { margin-top: 20px; margin-bottom: 20px; }
.fecx .cr-fx-section .eyebrow { margin-bottom: 4px; }
.fecx .cr-fx-section__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Panel — horizontal: left (ring + swatches) | divider | right (PRG + proof) */
.fecx .cr-fx {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* LEFT */
.fecx .cr-fx-left { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.fecx .cr-fx-ring { flex: 0 0 auto; width: 132px; height: 132px; }
.fecx .cr-fx-ring svg { width: 100%; height: 100%; display: block; }
.fecx .cr-fx-meta { display: flex; flex-direction: column; gap: 11px; }
.fecx .cr-fx-row { display: flex; align-items: center; gap: 10px; }
.fecx .cr-fx-row .swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fecx .cr-fx-row .lbl { font-size: 15px; color: var(--ink-2); }
.fecx .cr-fx-row .v { font-size: 15px; font-weight: 500; color: var(--ink); }
.fecx .cr-fx-cap { color: var(--danger); }
.fecx .cr-fx-alsolic { margin-top: 4px; max-width: 320px; }
.fecx .cr-fx-alsolic-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); margin-bottom: 2px; }
.fecx .cr-fx-alsolic-v { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.fecx .cr-fx-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-weight: 500; font-size: 12px; color: #fff;
}
.fecx .cr-fx-grade-A { background: #1c7a4a; }
.fecx .cr-fx-grade-B { background: #5d7a1f; }
.fecx .cr-fx-grade-C { background: var(--warn); }
.fecx .cr-fx-grade-D { background: #9a6b10; }

/* DIVIDER */
.fecx .cr-fx-divider { width: 1px; align-self: stretch; background: var(--rule-2); flex: 0 0 auto; }

/* RIGHT */
.fecx .cr-fx-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fecx .cr-fx-prg-head { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; }
.fecx .cr-fx-prg-sub { font-weight: 400; color: var(--ink-4); font-size: 12px; }
.fecx .cr-fx-prg { display: flex; }
.fecx .cr-fx-prg-cell { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fecx .cr-fx-prg-cell + .cr-fx-prg-cell { padding-left: 20px; border-left: 1px solid var(--rule-2); }
.fecx .cr-fx-prg-cell .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.fecx .cr-fx-prg-cell .v { font-size: 20px; font-weight: 500; color: var(--ink); }
.fecx .cr-fx-gap-bad  { color: var(--danger) !important; }
.fecx .cr-fx-gap-good { color: #1c7a4a !important; }

.fecx .cr-fx-delta { font-size: 13px; color: var(--ink-3); }
.fecx .cr-fx-up   { color: #1c7a4a; font-weight: 500; }
.fecx .cr-fx-down { color: var(--danger); font-weight: 500; }

/* Bottom row: evidence (left) + how-link (right) */
.fecx .cr-fx-bottom {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--rule-2); padding-top: 16px;
}
.fecx .cr-fx-evidence { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.fecx .cr-fx-ev-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.fecx .cr-fx-ev-thumb {
  display: block; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper); flex: 0 0 auto;
}
.fecx .cr-fx-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fecx .cr-fx-ev-pdf { display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--ink-4); font-size: 12px; text-decoration: none; }
.fecx .cr-fx-ev-caption { font-size: 13px; color: var(--ink-3); }
.fecx .cr-fx-howlink { margin-left: auto; flex: 0 0 auto; }

/* Responsive: stack left/right under ~720px */
@media (max-width: 720px) {
  .fecx .cr-fx { flex-direction: column; align-items: stretch; gap: 22px; }
  .fecx .cr-fx-divider { width: auto; height: 1px; }
  .fecx .cr-fx-left { justify-content: center; }
  .fecx .cr-fx-bottom { flex-wrap: wrap; }
  .fecx .cr-fx-howlink { margin-left: 0; }
}

/* ---- FXCheck: card micro-report (inline AJAX, Phase 2) ---- */
.fecx .hub-bonus-ask{ margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); }
.fecx .hub-bonus-ask__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fecx .hub-bonus-ask__q{ font-size:11.5px; color:var(--ink-4); font-weight:500; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.fecx .hub-bonus-ask.is-done .hub-bonus-ask__q{ color:var(--verified); }
.fecx .hub-bonus-ask__btns{ display:inline-flex; gap:6px; }
.fecx .hub-ask{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; line-height:1; padding:6px 10px; border-radius:999px; border:1px solid var(--rule); background:var(--bg); color:var(--ink-3); text-decoration:none; cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease; }
.fecx .hub-ask svg{ width:14px; height:14px; }
.fecx .hub-ask--yes:hover, .fecx .hub-ask--yes.is-selected{ color:var(--verified); border-color:var(--verified); background:var(--verified-soft); }
.fecx .hub-ask--no:hover,  .fecx .hub-ask--no.is-selected{ color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }
.fecx .hub-ask:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.fecx .hub-bonus-ask.is-done .hub-ask[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.fecx .hub-bonus-ask__form{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fecx .hub-bonus-ask__form[hidden]{ display:none; }
.fecx .hub-ask__name, .fecx .hub-ask__comment{ flex:1 1 100%; min-width:0; font-size:12.5px; color:var(--ink); padding:7px 9px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--bg); }
.fecx .hub-ask__name:focus, .fecx .hub-ask__comment:focus{ outline:none; border-color:var(--accent); }
.fecx .hub-ask__submit{ flex:1 1 100%; font-size:12.5px; font-weight:600; line-height:1; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; }
.fecx .hub-ask__submit:disabled{ opacity:.45; cursor:not-allowed; }
.fecx .hub-ask__submit:not(:disabled):hover{ opacity:.92; }
.fecx .hub-ask__msg{ flex:1 1 100%; font-size:11.5px; line-height:1.35; }
.fecx .hub-ask__msg.is-error{ color:var(--danger); }
.fecx .hub-ask__msg.is-info{ color:var(--ink-4); }
.fecx .hub-ask__msg.is-success{ color:var(--verified); }
@media (max-width:380px){ .fecx .hub-bonus-ask__row{ flex-direction:column; align-items:stretch; } .fecx .hub-bonus-ask__btns{ justify-content:stretch; } .fecx .hub-ask{ flex:1; justify-content:center; } }
.fecx .hub-bonus-ask__q--done{ display:inline-flex; align-items:center; gap:5px; color:var(--verified); }
.fecx .hub-ask-seereports{ font-size:11.5px; font-weight:600; color:var(--ink-4); text-decoration:none; white-space:nowrap; }
.fecx .hub-ask-seereports:hover{ color:var(--accent); text-decoration:underline; }

.cr-sisters-section .cr-sisters-map { margin-top: 6px; }
.cr-sisters-map svg { display: block; max-width: 560px; margin: 0 auto; }

/* ====================================================================
 * FXShield "Safety analysis" — full-width section below the casino hero
 * Append to fec-edition.css (the file with .cr-frank / .cr-hero-card).
 * Purge CloudFlare after. Replaces any earlier .cr-fx block.
 * ==================================================================== */

/* Section band */
.fecx .cr-fx-section { margin-top: 20px; margin-bottom: 20px; }
.fecx .cr-fx-section .eyebrow { margin-bottom: 4px; }
.fecx .cr-fx-section__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Panel — horizontal: left (ring + swatches) | divider | right (PRG + proof) */
.fecx .cr-fx {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* LEFT */
.fecx .cr-fx-left { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.fecx .cr-fx-ring { flex: 0 0 auto; width: 132px; height: 132px; }
.fecx .cr-fx-ring svg { width: 100%; height: 100%; display: block; }
.fecx .cr-fx-meta { display: flex; flex-direction: column; gap: 11px; }
.fecx .cr-fx-row { display: flex; align-items: center; gap: 10px; }
.fecx .cr-fx-row .swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fecx .cr-fx-row .lbl { font-size: 15px; color: var(--ink-2); }
.fecx .cr-fx-row .v { font-size: 15px; font-weight: 500; color: var(--ink); }
.fecx .cr-fx-cap { color: var(--danger); }
.fecx .cr-fx-alsolic { margin-top: 4px; max-width: 320px; }
.fecx .cr-fx-alsolic-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); margin-bottom: 2px; }
.fecx .cr-fx-alsolic-v { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.fecx .cr-fx-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-weight: 500; font-size: 12px; color: #fff;
}
.fecx .cr-fx-grade-A { background: #1c7a4a; }
.fecx .cr-fx-grade-B { background: #5d7a1f; }
.fecx .cr-fx-grade-C { background: var(--warn); }
.fecx .cr-fx-grade-D { background: #9a6b10; }

/* DIVIDER */
.fecx .cr-fx-divider { width: 1px; align-self: stretch; background: var(--rule-2); flex: 0 0 auto; }

/* RIGHT */
.fecx .cr-fx-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fecx .cr-fx-prg-head { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; }
.fecx .cr-fx-prg-sub { font-weight: 400; color: var(--ink-4); font-size: 12px; }
.fecx .cr-fx-prg { display: flex; }
.fecx .cr-fx-prg-cell { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fecx .cr-fx-prg-cell + .cr-fx-prg-cell { padding-left: 20px; border-left: 1px solid var(--rule-2); }
.fecx .cr-fx-prg-cell .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.fecx .cr-fx-prg-cell .v { font-size: 20px; font-weight: 500; color: var(--ink); }
.fecx .cr-fx-gap-bad  { color: var(--danger) !important; }
.fecx .cr-fx-gap-good { color: #1c7a4a !important; }

.fecx .cr-fx-delta { font-size: 13px; color: var(--ink-3); }
.fecx .cr-fx-up   { color: #1c7a4a; font-weight: 500; }
.fecx .cr-fx-down { color: var(--danger); font-weight: 500; }

/* Bottom row: evidence (left) + how-link (right) */
.fecx .cr-fx-bottom {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--rule-2); padding-top: 16px;
}
.fecx .cr-fx-evidence { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.fecx .cr-fx-ev-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.fecx .cr-fx-ev-thumb {
  display: block; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper); flex: 0 0 auto;
}
.fecx .cr-fx-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fecx .cr-fx-ev-pdf { display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--ink-4); font-size: 12px; text-decoration: none; }
.fecx .cr-fx-ev-caption { font-size: 13px; color: var(--ink-3); }
.fecx .cr-fx-links { margin-left: auto; flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.fecx .cr-fx-howlink { flex: 0 0 auto; }
.fecx .cr-fx-reportlink { flex: 0 0 auto; }

/* Responsive: the two-column layout needs real horizontal room. Stack it
   below ~900px so tablets and landscape phones (~844-926px) don't get the
   squeezed desktop layout where the right column collapses and evidence
   thumbs pile up vertically. */
@media (max-width: 900px) {
  .fecx .cr-fx {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 22px 20px;
  }
  .fecx .cr-fx-divider { width: auto; height: 1px; align-self: auto; }
  .fecx .cr-fx-left { justify-content: flex-start; }
  .fecx .cr-fx-bottom { flex-wrap: wrap; row-gap: 12px; }
  .fecx .cr-fx-evidence { flex: 1 1 100%; }
  .fecx .cr-fx-links { margin-left: 0; flex-wrap: wrap; width: 100%; }
}

/* Narrow phones (portrait): tighten further and let the ring sit above meta. */
@media (max-width: 560px) {
  .fecx .cr-fx-left { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fecx .cr-fx-ring { width: 110px; height: 110px; }
  .fecx .cr-fx-prg-cell .v { font-size: 18px; }
  .fecx .cr-fx-prg-cell + .cr-fx-prg-cell { padding-left: 14px; }
}

/* ============================================================
 * FXShield tier badge — listing cards (grid + row)
 * Append to fec-edition.css. Colours = the tier palette already
 * used by the FXShield panel and the desk form.
 * ============================================================ */
.fecx .score-block .fx-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.fecx .score-block .fx-badge:hover { filter: brightness(0.95); text-decoration: none; }

.fecx .fx-badge--reliable  { background: #e2efe6; color: #1c7a4a; }
.fecx .fx-badge--solid     { background: #eaf0dc; color: #5d7a1f; }
.fecx .fx-badge--caution   { background: #f6ead8; color: #a8631c; }
.fecx .fx-badge--high-risk { background: #f7e3d6; color: #b4541a; }
.fecx .fx-badge--critical  { background: #f5dddd; color: #9a2828; }
:root{--fec-container:1280px;--fec-topbar-h:72px;--fec-dd-gap:0;--fec-scroll-offset:calc(var(--fec-topbar-h) + 74px);--fec-bg:#fff;--fec-text:#111;--fec-muted:rgba(0,0,0,0.65);--fec-border:rgba(0,0,0,0.08);--fec-border-2:rgba(0,0,0,0.12);--fec-bg-2:rgba(0,0,0,0.03);--fec-bg-3:rgba(0,0,0,0.05);--fec-line:var(--fec-border);--fec-soft:rgba(0,0,0,0.04);--fec-link:#00a7a7;--fec-accent:var(--fec-link);--fec-danger:rgba(180,0,0,0.88);--fec-shadow:0 10px 30px rgba(0,0,0,0.06);--fec-r:16px;--fec-r-sm:12px;--fec-radius:14px;--fec-radius-sm:10px}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--fec-bg);color:var(--fec-text);font:14px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit}a:hover{opacity:.92}:target{scroll-margin-top:var(--fec-scroll-offset)}a:focus-visible,button:focus-visible{outline:3px solid rgb(0 0 0 / .25);outline-offset:2px}.fec-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fec-container{width:100%;max-width:var(--fec-container);margin:0 auto;padding:0 16px}.fec-ico{opacity:.65}#system-message{margin:12px 0}#system-message dd{margin:0 0 8px}#system-message .error,#system-message .message,#system-message .notice{padding:12px 14px;border:1px solid var(--fec-border);background:rgb(0 0 0 / .02);border-radius:var(--fec-r-sm)}.fec-topbar{position:sticky;top:0;z-index:1000;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#fff;border-bottom:1px solid var(--fec-border)}@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.fec-topbar{background:hsl(0 0% 100% / .88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}.fec-topbar__inner{max-width:var(--fec-container);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;overflow:visible}.fec-topbar__left{display:flex;align-items:center;gap:12px;min-width:220px}.fec-topbar__right{display:flex;align-items:center;gap:10px;overflow:visible}.fec-topbar__slot:empty{display:none}.fec-brand{display:flex;gap:10px;padding:6px 8px;border-radius:var(--fec-r-sm)}.fec-brand:hover{background:var(--fec-bg-2)}.fec-brand__mark{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,rgb(0 167 167 / .2),rgb(0 0 0 / .06));border:1px solid var(--fec-border)}.fec-brand__text{display:flex;flex-direction:column;line-height:1.05}.fec-brand__title{font-weight:900;letter-spacing:.2px}.fec-brand__sub{margin-top:2px;font-size:12px;color:var(--fec-muted)}.fec-nav ul{list-style:none;margin:0;padding:0}.fec-nav ul.menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.fec-nav a,.fec-nav span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;text-decoration:none;font-weight:900;color:rgb(0 0 0 / .75);border:1px solid #fff0;transition:background .12s ease,border-color .12s ease}.fec-nav a:hover{background:rgb(0 0 0 / .04);border-color:var(--fec-border)}.fec-nav li.active>a,.fec-nav li.current>a{background:#111;color:#fff;border-color:#111}.fec-nav li{position:relative}.fec-nav li ul{display:none;position:absolute;top:calc(100% + var(--fec-dd-gap));left:0;min-width:240px;padding:8px;border-radius:var(--fec-r);border:1px solid var(--fec-border);background:hsl(0 0% 100% / .98);box-shadow:var(--fec-shadow);z-index:1200}.fec-nav li:hover>ul{display:block}.fec-nav li ul a{display:flex;width:100%;border-radius:var(--fec-r-sm);padding:10px 12px;font-weight:900}.fec-user{position:relative}.fec-user__btn{display:inline-flex;align-items:center;gap:10px;padding:7px 10px;border-radius:999px;border:1px solid var(--fec-border-2);background:#fff0;cursor:pointer;font-weight:900;color:rgb(0 0 0 / .8)}.fec-user__btn:hover{border-color:rgb(0 0 0 / .22)}.fec-avatar{width:30px;height:30px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:rgb(0 0 0 / .06);border:1px solid var(--fec-border-2);color:rgb(0 0 0 / .8)}.fec-user__name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-caret{width:10px;height:10px;border-right:2px solid rgb(0 0 0 / .55);border-bottom:2px solid rgb(0 0 0 / .55);transform:rotate(45deg);border-radius:1px;opacity:.9}.fec-dd{position:absolute;right:0;top:calc(100% + var(--fec-dd-gap));width:320px;border-radius:18px;border:1px solid var(--fec-border);background:hsl(0 0% 100% / .98);box-shadow:var(--fec-shadow);overflow:hidden;z-index:1200;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}@media (hover:hover) and (pointer:fine){.fec-user:hover .fec-dd{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.fec-user:after{content:"";position:absolute;right:0;top:100%;width:340px;height:12px;background:#fff0}}.fec-user.is-open .fec-dd{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.fec-dd__head{padding:14px 14px 12px;border-bottom:1px solid var(--fec-border);background:rgb(0 0 0 / .02)}.fec-dd__title{font-weight:900}.fec-dd__sub{margin-top:4px;font-size:12px;color:var(--fec-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-dd__items{padding:10px}.fec-dd__item{display:flex;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;font-weight:900;color:rgb(0 0 0 / .78);border:1px solid #fff0}.fec-dd__item:hover{background:rgb(0 0 0 / .04);border-color:var(--fec-border)}.fec-dd__sep{height:1px;background:var(--fec-border);margin:8px 6px}.fec-dd__item--danger{color:var(--fec-danger)}.fec-dd__item--danger:hover{background:rgb(180 0 0 / .06);border-color:rgb(180 0 0 / .14)}.fec-burger{display:none;width:42px;height:40px;border-radius:14px;border:1px solid var(--fec-border-2);background:#fff;cursor:pointer}.fec-burger:hover{border-color:rgb(0 0 0 / .22)}.fec-burger__lines{display:block;width:18px;height:2px;margin:0 auto;background:rgb(0 0 0 / .7);border-radius:999px;position:relative}.fec-burger__lines:after,.fec-burger__lines:before{content:"";position:absolute;left:0;width:18px;height:2px;background:rgb(0 0 0 / .7);border-radius:999px}.fec-burger__lines:before{top:-6px}.fec-burger__lines:after{top:6px}body.fecv2.is-nav-open{overflow:unset}@media (max-width:980px){.fec-user__name{display:none}.fec-burger{display:inline-flex;align-items:center;justify-content:center}.fec-nav{position:fixed;left:16px;right:16px;top:calc(var(--fec-topbar-h) + 8px);padding:10px;border-radius:18px;border:1px solid var(--fec-border);background:hsl(0 0% 100% / .96);box-shadow:var(--fec-shadow);display:none;z-index:1100;max-height:calc(100dvh - var(--fec-topbar-h) - 16px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}body.fecv2.is-nav-open .fec-nav{display:block}.fec-nav ul.menu{flex-direction:column;align-items:stretch;gap:6px}.fec-nav a{justify-content:space-between;border-radius:14px;padding:11px 12px}.fec-nav li ul{position:static;display:block;margin-top:6px;box-shadow:none;background:rgb(0 0 0 / .02);border-radius:var(--fec-r-sm)}}.fec-main{padding:14px 0 30px}.fec-toolbar{position:sticky;top:var(--fec-topbar-h);z-index:999;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-bottom:1px solid rgb(0 0 0 / .08);background:hsl(0 0% 100% / .92)}@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.fec-toolbar{background:hsl(0 0% 100% / .82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}.fec-toolbar.has-active-filters,.fec-toolbar.has-filters{border-bottom-color:rgb(0 0 0 / .14)}.fec-toolbar__inner{max-width:var(--fec-container);margin:0 auto;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}.fec-toolbar__left,.fec-toolbar__right{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;min-width:0}.fec-toolbar__right{justify-content:flex-end}.fec-toolbtn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;border:1px solid rgb(0 0 0 / .12);border-radius:999px;padding:9px 12px;background:#fff;color:rgb(0 0 0 / .88);font:inherit;text-decoration:none;cursor:pointer;font-weight:800}.fec-toolbtn:hover{border-color:rgb(0 0 0 / .22)}.fec-toolbtn:active,.fec-toolbtn:focus,.fec-toolbtn:visited{color:rgb(0 0 0 / .88);text-decoration:none}.fec-toolbtn *{color:inherit}.fec-toolbtn:focus-visible{outline:2px solid rgb(0 0 0 / .18);outline-offset:2px}.fec-toolbtn[aria-expanded=true]{background:rgb(0 0 0 / .03);border-color:rgb(0 0 0 / .22)}.fec-toolbtn .fec-ico{display:inline-grid;place-items:center;width:18px;height:18px;line-height:1;font-size:16px;top:-2px;position:relative}.fec-toolbtn[aria-expanded=true] .fec-ico{color:#fff0;position:relative}.fec-toolbtn[aria-expanded=true] .fec-ico:after{content:"x";position:absolute;inset:0;display:grid;place-items:center;color:rgb(0 0 0 / .65);font-weight:900}.fec-activecount,.fec-badgecount{margin-left:8px;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:1px solid rgb(0 0 0 / .12);background:rgb(0 0 0 / .04);color:rgb(0 0 0 / .75)}.fec-toolbar.has-active-filters .fec-activecount,.fec-toolbar.has-filters .fec-activecount{background:rgb(0 0 0 / .08)}.fec-tabs{display:inline-flex;gap:6px;border:1px solid rgb(0 0 0 / .1);background:rgb(0 0 0 / .03);padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.fec-tabs::-webkit-scrollbar{display:none}.fec-tab{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:800;color:rgb(0 0 0 / .75);white-space:nowrap}.fec-tab:hover{background:rgb(0 0 0 / .06)}.fec-searchpage .fec-tab.is-active{background:#111;color:#fff}.fec-tab.is-active:hover{background:#111}.fec-sort__select{border:1px solid rgb(0 0 0 / .12);border-radius:999px;padding:9px 12px;background:#fff;font-weight:800}.fec-sort__select[data-sort-active="1"]{border-color:rgb(0 0 0 / .22);background:rgb(0 0 0 / .02)}.fec-meta-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0;font-size:13px;color:rgb(0 0 0 / .65)}.fec-meta-bar strong{color:rgb(0 0 0 / .85);font-weight:900}.fec-how,.fec-meta-bar__link{color:var(--fec-link);text-decoration:none;font-weight:800}.fec-how:hover,.fec-meta-bar__link:hover{text-decoration:underline}.fec-toolbar.is-condensed .fec-toolbar__inner{padding-top:7px;padding-bottom:7px}.fec-toolbar.is-condensed .fec-tab{padding:7px 10px}.fec-toolbar.is-condensed .fec-sort__select,.fec-toolbar.is-condensed .fec-toolbtn{padding:9px 10px}@media (max-width:720px){.fec-toolbar__inner{flex-wrap:nowrap;gap:10px;align-items:center}.fec-toolbar__left{flex:1 1 auto;overflow:hidden}.fec-toolbar__right{flex:0 0 auto;min-width:0;gap:8px;justify-content:flex-end}.fec-meta-bar{display:none}.fec-sort__select{padding:11px 12px}}.fec-toolbar.is-filters-open .fec-meta-bar{display:flex}@media (max-width:560px){.fec-toolbar .fec-tab{padding:10px 14px;font-size:14px}.fec-toolbar__right{justify-content:flex-start}}.fec-toolbar.is-fixed{position:fixed;top:var(--fec-topbar-h);left:0;right:0;z-index:9999}.fec-filters{border-top:1px solid rgb(0 0 0 / .06);padding:10px 0 12px;position:relative}.fec-filters__inner{max-width:var(--fec-container);margin:0 auto;position:relative;padding:0 max(16px,env(safe-area-inset-right)) 74px max(16px,env(safe-area-inset-left))}.fec-fgrp{padding:10px 0 14px;border-bottom:1px solid rgb(0 0 0 / .06)}.fec-fgrp:last-child{border-bottom:0}.fec-fgrp__title{font-weight:900;font-size:13px;color:rgb(0 0 0 / .72);margin:0 0 8px}.fec-chips{display:flex;flex-wrap:wrap;gap:8px}.fec-fhint{margin-top:8px;font-size:12.5px;line-height:1.35;color:rgb(0 0 0 / .58)}.fec-filters__row{display:flex;gap:10px 12px;align-items:flex-start;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid rgb(0 0 0 / .06)}.fec-filters__row:last-of-type{border-bottom:0}.fec-filters__label{flex:0 0 120px;font-weight:900;color:rgb(0 0 0 / .7);font-size:13px;padding-top:6px}.fec-filters__chips{flex:1 1 auto;display:flex;gap:8px;flex-wrap:wrap}.fec-filterchip{appearance:none;border:1px solid rgb(0 0 0 / .12);background:#fff;border-radius:999px;padding:9px 12px;font-weight:800;font-size:13px;cursor:pointer}.fec-filterchip[aria-pressed=true]{background:rgb(0 0 0 / .06);border-color:rgb(0 0 0 / .2)}.fec-factions,.fec-filters__footer{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:10px 16px 12px;background:linear-gradient(0deg,hsl(0 0% 100% / .98),hsl(0 0% 100% / .92) 70%,#fff0);border-top:1px solid rgb(0 0 0 / .08)}.fec-factions .fec-btn,.fec-filters__footer .fec-btn{height:44px;border-radius:12px;font-weight:900}@media (max-width:560px){.fec-factions,.fec-filters__footer{grid-template-columns:1fr 1fr}}@media (min-width:721px){.fec-factions,.fec-filters__footer{grid-template-columns:auto auto;justify-content:flex-end;max-width:520px;margin-left:auto}.fec-factions .fec-btn,.fec-filters__footer .fec-btn{min-width:160px;height:42px;padding:0 18px;font-size:14px}.fec-factions .fec-btn--ghost,.fec-filters__footer .fec-btn--ghost{border:0;background:#fff0;color:rgb(0 0 0 / .65)}}@media (max-width:980px){.fec-filters{max-height:calc(100vh - var(--fec-topbar-h) - 74px);overflow:auto;-webkit-overflow-scrolling:touch}.fec-filters__label{flex:1 1 100%;padding-top:0}}.fec-quick{display:none;gap:6px;flex-wrap:nowrap;align-items:center;min-width:0}.fec-chip,.fec-qchip{border:1px solid rgb(0 0 0 / .12);background:rgb(0 0 0 / .03);border-radius:999px;padding:8px 10px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}.fec-chip[aria-pressed=true],.fec-qchip[aria-pressed=true]{background:#111;color:#fff;border-color:#111}@media (max-width:720px){.fec-quick{display:flex}}.fec-hero{padding:14px 0 6px}.fec-hero__inner{max-width:var(--fec-container);margin:0 auto;padding:0 16px}.fec-hero__top{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px 18px;background:rgb(0 0 0 / .02);border:1px solid rgb(0 0 0 / .08);border-radius:18px;padding:16px}.fec-hero__title{margin:0;font-size:28px;line-height:1.08;letter-spacing:-.4px;font-weight:900;color:rgb(0 0 0 / .9)}.fec-hero__sub{margin:10px 0 0;font-size:15px;line-height:1.45;color:rgb(0 0 0 / .7);max-width:62ch}.fec-hero__trust{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}.fec-hero__trust-item{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .1);background:hsl(0 0% 100% / .8);font-size:13px;font-weight:900;color:rgb(0 0 0 / .78)}.fec-hero__verdict{margin:12px 0 0;padding:12px;border-radius:14px;border:1px solid rgb(0 0 0 / .1);background:hsl(0 0% 100% / .92);font-size:14px;line-height:1.45;color:rgb(0 0 0 / .8)}.fec-hero__verdict strong{font-weight:900}.fec-hero__disclosure{margin:10px 0 0;font-size:13px;line-height:1.45;color:rgb(0 0 0 / .58)}.fec-hero__link{color:var(--fec-link);text-decoration:none;font-weight:900}.fec-hero__link:hover{text-decoration:underline}.fec-hero__side{display:flex;align-items:flex-start;justify-content:flex-end}.fec-hero__chips{gap:8px;justify-content:flex-end}@media (max-width:980px){.fec-hero__top{grid-template-columns:1fr}.fec-hero__chips,.fec-hero__side{justify-content:flex-start}}@media (max-width:560px){.fec-hero{padding-top:10px}.fec-hero__title{font-size:24px;letter-spacing:-.2px}.fec-hero__sub{font-size:15px}.fec-hero__trust-item{font-size:13px;padding:8px 10px}.fec-hero__verdict{font-size:14px}.fec-hero__badges{opacity:.85}.fec-hero__badges .fec-pill{font-size:13px;padding:6px 10px}}:root{--fec-scope-container:860px}.fec-scope{margin:10px 0 6px}.fec-scope__inner{max-width:var(--fec-scope-container);margin:0 auto;padding:0 16px;display:flex;justify-content:center}.fec-scope__tabs{display:inline-flex;gap:6px;padding:4px;border-radius:999px;border:1px solid rgb(0 0 0 / .1);background:rgb(0 0 0 / .03);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.fec-scope__tabs::-webkit-scrollbar{display:none}.fec-scope__tabs .fec-tab{padding:9px 12px;font-size:14px}@media (max-width:560px){.fec-scope__inner{padding:0 14px;justify-content:flex-start}.fec-scope__tabs{width:100%;justify-content:space-between}.fec-scope__tabs .fec-tab{flex:1 1 0%;justify-content:center}}@media (max-width:560px){.fec-tabs--below,.fec-tabs-below,.fec-tabs.is-secondary{display:none!important}}.fec-minirow{margin:10px 0 8px}.fec-minirow__inner{max-width:var(--fec-container);margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;font-size:13px;color:rgb(0 0 0 / .62)}.fec-minirow strong{color:rgb(0 0 0 / .88);font-weight:900}.fec-minirow__left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.fec-minirow__item{white-space:nowrap}.fec-minirow__dot{opacity:.45}.fec-minirow__right{display:flex;align-items:center}.fec-minirow__link{color:var(--fec-link);text-decoration:none;font-weight:900;padding:6px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .1);background:rgb(0 0 0 / .02)}.fec-minirow__link:hover{border-color:rgb(0 0 0 / .18);background:rgb(0 0 0 / .04)}@media (max-width:560px){.fec-minirow__inner{padding:0 14px;font-size:14px;flex-direction:column;align-items:flex-start;gap:8px}.fec-minirow__left{width:100%;row-gap:6px}.fec-minirow__dot{display:none}.fec-minirow__right{width:100%}.fec-minirow__link{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:600;padding:4px 0;border:0;background:none;color:var(--fec-accent,#2aa6a6)}.fec-minirow{padding-top:6px;padding-bottom:6px;margin-bottom:8px}}.fec-jumplinks{margin:10px 0 12px}.fec-jumplinks__inner{max-width:var(--fec-container);margin:0 auto;padding:0 16px;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:13px;color:rgb(0 0 0 / .62)}.fec-jumplinks__inner::-webkit-scrollbar{display:none}.fec-jumplinks__label{font-weight:900;color:rgb(0 0 0 / .7);margin-right:2px;white-space:nowrap}.fec-jumplinks__a{font-weight:900;color:var(--fec-link);padding:6px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .1);background:rgb(0 0 0 / .02);white-space:nowrap}.fec-jumplinks__a:hover{background:rgb(0 0 0 / .04);border-color:rgb(0 0 0 / .18)}@media (max-width:560px){.fec-jumplinks{margin-bottom:6px}.fec-jumplinks__inner{padding-left:14px;padding-right:14px;font-size:14px}.fec-jumplinks__label{display:none}.fec-jumplinks__a{padding:6px 10px;font-size:13.5px;background:none;border:1px dashed rgb(0 0 0 / .12);font-weight:600}}.item-page h2[id],.item-page h3[id]{scroll-margin-top:var(--fec-scroll-offset)}.fec-grid,.listing-results.fec-grid{display:grid!important;grid-auto-flow:row;grid-auto-rows:auto;align-content:start;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:24px!important;margin:16px 0;align-items:stretch}.fec-grid>*,.listing-results.fec-grid>*{float:none!important;clear:none!important;position:relative;min-width:0}@media (max-width:992px){.fec-grid,.listing-results.fec-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media (max-width:560px){.fec-grid,.listing-results.fec-grid{grid-template-columns:1fr!important}}.fec-card{background:#fff;border:1px solid rgb(0 0 0 / .08);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px;height:100%}.fec-card__head{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"logo brand" "logo right";align-items:start;column-gap:12px;row-gap:8px}.fec-card__logo{grid-area:logo;width:52px;height:52px;border-radius:50%;border:1px solid rgb(0 0 0 / .08);display:block}.fec-card__brand{grid-area:brand;min-width:0}.fec-card__brandname{font-size:15px;line-height:1.15;font-weight:800}.fec-card__brandname,.fec-card__type{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fec-card__type{margin-top:2px;font-size:12.5px;line-height:1.2;opacity:.72}.fec-card__right{grid-area:right;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;white-space:normal}.fec-card__amount{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;text-align:center}.fec-card__game{font-size:12.5px;opacity:.75;text-align:center}.fec-card__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid rgb(0 0 0 / .06);padding-top:10px;text-align:center}.fec-card__facts strong{display:block;font-size:15px;font-weight:700}.fec-card__facts span{font-size:11px;text-transform:uppercase;opacity:.6;letter-spacing:.02em}.fec-card__fact--fec strong{font-variant-numeric:tabular-nums}.fec-card__fact--fec{cursor:help;position:relative;pointer-events:auto}.fec-fb-yes{color:#0f5132}.fec-fb-no{color:#842029}.fec-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgb(0 0 0 / .12);font:inherit;line-height:1;text-decoration:none;-webkit-font-smoothing:inherit}.fec-btn--ghost{background:#fff;color:#111}.fec-btn--ghost:hover{background:rgb(0 0 0 / .03);border-color:rgb(0 0 0 / .22)}.fec-btn--primary{background:#111;border-color:#111;box-shadow:0 10px 24px rgb(0 0 0 / .1)}.fec-btn--primary:hover{opacity:.92}.fec-card__cta{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:stretch;margin-top:auto}.fec-card__cta .fec-btn{width:100%;height:48px;padding:0 14px;font-size:15px;border-radius:12px;font-weight:900;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:560px){.fec-card__cta{grid-template-columns:1fr}}.fec-card__note{margin-top:.6rem;min-height:44px;display:flex;align-items:center;padding:.55rem .75rem;border-radius:12px;font-size:14px;line-height:1.25;letter-spacing:-.01em;background:rgb(0 0 0 / .035);border:1px solid rgb(0 0 0 / .06);color:rgb(0 0 0 / .78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fec-card__note:empty{background:#fff0;border-color:#fff0;padding:0}.fec-mini{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 12px;margin:6px 10px 0;border-top:1px solid rgb(0 0 0 / .06);font-size:12px;line-height:1.2}.fec-mini__badge,.fec-mini__counts{font-weight:700;white-space:nowrap}.fec-mini__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:rgb(0 0 0 / .03)}.fec-mini__counts{opacity:.75}@media (max-width:640px){.fec-mini{padding:9px 10px;margin:6px 8px 0;font-size:11.5px}.fec-mini__badge{padding:3px 8px}}.fec-card__meta{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:.55rem!important;margin-bottom:.35rem!important;flex-wrap:wrap!important}.fec-card__check,.fec-pill{height:28px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;border-radius:999px!important;font-size:13px!important;font-weight:700!important;line-height:1!important;letter-spacing:-.01em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.fec-card__check{order:-1!important;border:1px solid rgb(0 0 0 / .12)!important;background:hsl(0 0% 100% / .86)!important;box-shadow:0 6px 18px rgb(0 0 0 / .06)!important}.fec-check__dot{width:8px!important;height:8px!important;border-radius:999px!important;background:currentColor!important;opacity:.75!important}.fec-pill,.fec-pill--excl{border:1px solid rgb(0 0 0 / .12)!important;background:rgb(0 0 0 / .04)!important;color:rgb(0 0 0 / .78)!important}.fx--verified .fec-card__check{color:#1f6b3a!important;background:rgb(31 107 58 / .06)!important;border-color:rgb(31 107 58 / .25)!important}.fx--mixed .fec-card__check{color:#7a5a00!important;background:rgb(122 90 0 / .06)!important;border-color:rgb(122 90 0 / .25)!important}.fx--issues .fec-card__check{color:#7a1f1f!important;background:rgb(122 31 31 / .06)!important;border-color:rgb(122 31 31 / .25)!important}.fx--lowdata .fec-card__check{color:#555!important;background:rgb(0 0 0 / .03)!important;border-color:rgb(0 0 0 / .18)!important;border-style:dashed!important}.fec-card__check[title],.fec-card__fact--fec[data-tip]{cursor:help}.fec-btn--primary.disabled,.fec-btn.disabled,.fec-btn.is-disabled,.fec-btn[aria-disabled=true]{opacity:.55!important;cursor:not-allowed!important;pointer-events:none!important;filter:saturate(.85)!important}.fec-card--expired,.fec-card--geo,.fec-card--unavailable{filter:saturate(.92)!important}@media (max-width:680px){.fec-card__meta{position:sticky;top:0;z-index:2;padding-bottom:.35rem;background:linear-gradient(180deg,hsl(0 0% 100% / .92),hsl(0 0% 100% / .88) 60%,#fff0);max-height:2.2em;overflow:hidden}}.fec-pg{display:flex;justify-content:center;margin:28px 0 16px}.fec-pg .pagination{display:flex;align-items:center;gap:6px;padding:0;margin:0;list-style:none;flex-wrap:wrap}.fec-pg .pagination li{display:inline-flex}.fec-pg .pagination a,.fec-pg .pagination span{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;text-decoration:none;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:#fff;color:#111}.fec-pg .pagination a:hover{border-color:rgb(0 0 0 / .25);background:rgb(0 0 0 / .04)}.fec-pg .pagination .active a{background:#111;color:#fff;border-color:#111;pointer-events:none}.fec-pg .pagination .disabled a{opacity:.35;pointer-events:none}.fec-pg .pagination span{border:none;background:#fff0;color:rgb(0 0 0 / .45);font-weight:600;pointer-events:none}.fec-pg .pagination .pagination-next a{font-size:16px;font-weight:900}@media (max-width:560px){.fec-pg{margin:22px 0 10px}.fec-pg .pagination{gap:10px;width:100%;justify-content:center}.fec-pg .pagination li{display:none}.fec-pg .pagination li.active,.fec-pg .pagination li.pagination-next,.fec-pg .pagination li.pagination-next.disabled{display:inline-flex}.fec-pg .pagination a,.fec-pg .pagination span{min-width:44px;height:44px;font-size:15px}.fec-pg .pagination li.pagination-next a{min-width:54px;padding:0 14px}.fec-pg .pagination li.active a{min-width:auto;padding:0 14px}.fec-pg .pagination li.active a:before{content:"Page ";font-weight:800;opacity:.9}}.fec-pg .pagination a:focus-visible{outline:3px solid rgb(0 0 0 / .25);outline-offset:2px}.item-page{max-width:860px;margin:34px auto 10px;padding:0 16px;color:rgb(0 0 0 / .82);line-height:1.65;font-size:16.5px}.item-page h2{font-size:28px;line-height:1.18;letter-spacing:-.02em;margin:26px 0 12px;color:#111}.item-page h3{font-size:20px;line-height:1.25;margin:22px 0 10px;color:#111}.item-page p{margin:0 0 14px}.item-page ol,.item-page ul{margin:10px 0 16px 18px;padding:0}.item-page li{margin:8px 0}.item-page a{color:var(--fec-link);text-decoration:none;font-weight:700}.item-page a:hover{text-decoration:underline}.item-page strong{font-weight:800;color:rgb(0 0 0 / .9)}@media (max-width:560px){.item-page{margin-top:26px;font-size:16px}.item-page h2{font-size:22px}.item-page h3{font-size:18px}}.fec-article-meta{margin-top:42px;padding-top:18px;border-top:1px solid rgb(0 0 0 / .08);font-size:14px;line-height:1.45;color:rgb(0 0 0 / .65)}.fec-article-meta__line{margin:0 0 6px}.fec-article-meta__updated{margin-top:8px;font-size:13px;color:rgb(0 0 0 / .55)}.fec-faq{margin-top:18px}.fec-faq__item{border:1px solid rgb(0 0 0 / .08);border-radius:14px;background:rgb(0 0 0 / .02);overflow:hidden;margin:10px 0}.fec-faq__q{list-style:none;cursor:pointer;padding:14px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;line-height:1.2;background:#fff}.fec-faq__q::-webkit-details-marker{display:none}.fec-faq__q:before{content:"";width:10px;height:10px;border-right:2px solid rgb(0 0 0 / .55);border-bottom:2px solid rgb(0 0 0 / .55);transform:rotate(-45deg);transition:transform .16s ease;flex:0 0 auto;margin-left:2px}.fec-faq__item[open] .fec-faq__q{background:rgb(0 0 0 / .02)}.fec-faq__item[open] .fec-faq__q:before{transform:rotate(45deg)}.fec-faq__a{padding:12px 14px 14px;background:#fff;border-top:1px solid rgb(0 0 0 / .08)}.fec-faq__a li,.fec-faq__a p{font-size:14.5px;line-height:1.55;color:rgb(0 0 0 / .78);margin:0}.fec-faq__a p+p{margin-top:10px}.fec-faq__a ul{margin:8px 0 0 18px}.fec-faq__q:focus-visible{outline:3px solid rgb(0 167 167 / .28);outline-offset:3px;border-radius:12px}@media (prefers-reduced-motion:reduce){.fec-faq__q:before{transition:none}}@media (max-width:480px){.fec-faq__q{font-size:15.5px;padding:13px 12px}.fec-faq__a{padding:11px 12px 13px}}.fec-faqctrl{display:flex;gap:10px;align-items:center;margin:10px 0 12px;flex-wrap:wrap}.fec-faqctrl__btn{appearance:none;border:1px solid rgb(0 0 0 / .12);background:#fff;color:#111;border-radius:999px;padding:9px 12px;font-weight:800;font-size:13px;cursor:pointer}.fec-faqctrl__btn:hover{background:rgb(0 0 0 / .03)}.fec-faqctrl__btn:focus-visible{outline:3px solid rgb(0 167 167 / .28);outline-offset:3px}.author-card{margin:28px 0 0;padding-top:16px;border-top:1px solid #e9e9e9;background:#fff0}.author-card__inner{padding:0}.author-card__primary,.author-card__secondary{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;line-height:1.35;margin:0}.author-card__secondary{margin-top:6px}.author-card strong,.jump-links__label{font-weight:700;letter-spacing:.03em;text-transform:uppercase}.author-card strong{font-size:11px;color:#8a8a8a}.author-card__role{color:#6f6f6f;font-size:13px}.author-card__updated{margin-top:10px;font-size:12px;color:#9a9a9a}.author-card__bio{margin-top:8px;font-size:13px;color:#5f5f5f;line-height:1.45;max-width:820px}.jump-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 8px;padding:8px 10px;background:#f7f7f7;border:1px solid #e9e9e9;border-radius:2px}.jump-links__label{font-size:11px;color:#8a8a8a;margin-right:2px}.jump-links a{font-size:13px;padding:2px 6px;border-radius:2px;background:#fff;border:1px solid #e9e9e9;color:var(--fec-link);text-decoration:none;font-weight:600}.jump-links a:hover{text-decoration:underline}.affiliate-disclosure{margin:6px 0 10px;font-size:12px;line-height:1.45;color:#7a7a7a}.affiliate-disclosure a,.author-card a{color:var(--fec-link);text-decoration:none;font-weight:600}.affiliate-disclosure a:hover,.author-card a:hover{text-decoration:underline}@media (max-width:768px){.author-card__bio,.jump-links a{font-size:12.5px}.author-card{margin-top:22px;padding-top:12px}.author-card__secondary{margin-top:4px}.jump-links{margin:8px 0 6px;padding:6px 8px;gap:6px}.affiliate-disclosure{margin:4px 0 8px;font-size:11.5px}}.fec-footer{margin-top:34px;border-top:1px solid var(--fec-border);background:rgb(0 0 0 / .02)}.fec-footer__inner{padding:22px 16px 16px}.fec-footer__top{display:grid;grid-template-columns:280px 1fr;gap:18px 24px;align-items:start}.fec-footer__brand{display:flex;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgb(0 0 0 / .06);background:hsl(0 0% 100% / .65)}.fec-footer__mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,rgb(0 167 167 / .18),rgb(0 0 0 / .06));border:1px solid rgb(0 0 0 / .1)}.fec-footer__brandtxt{display:flex;flex-direction:column;line-height:1.05}.fec-footer__title{font-weight:900;letter-spacing:.2px}.fec-footer__sub{margin-top:3px;font-size:12px;color:rgb(0 0 0 / .6)}.fec-footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}.fec-footer__h{font-weight:900;margin-bottom:8px;color:rgb(0 0 0 / .85)}.fec-footer__a{display:block;padding:7px 0;text-decoration:none;color:rgb(0 0 0 / .72);font-weight:700}.fec-footer__a:hover{color:rgb(0 0 0 / .9);text-decoration:underline}.fec-footer__mini{margin:10px 0 6px;display:flex;gap:10px;align-items:center}.fec-footer__badge{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:hsl(0 0% 100% / .7);font-weight:900;font-size:12px}.fec-footer__muted{color:rgb(0 0 0 / .6);font-size:12.5px;line-height:1.45}.fec-footer__bottom{margin-top:16px;padding-top:14px;border-top:1px solid rgb(0 0 0 / .06);display:flex;gap:10px 16px;justify-content:space-between;flex-wrap:wrap}@media (max-width:980px){.fec-footer__top{grid-template-columns:1fr}.fec-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.fec-footer__cols{grid-template-columns:1fr}.fec-footer__brand{width:100%}}.fec-pill--expires{border:1px dashed rgb(180 120 0 / .3)!important;background:rgb(180 120 0 / .08)!important;color:rgb(120 80 0 / .92)!important;font-weight:700!important}.fec-brand{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit}.fec-brand__title{font-weight:600;letter-spacing:-.01em;white-space:nowrap}.fec-brand__dot{display:inline-block;margin:0 .14em;font-size:.9em;line-height:1;transform:translateY(-.02em);position:relative;top:-.02em}.fec-brand__sub{font-size:.7rem;opacity:.55;letter-spacing:.08em;text-transform:uppercase;margin-left:.1rem;position:relative;top:2px}.fec-brand__mark{width:40px;height:40px;border-radius:14px;background:#f3f4f6;border:1px solid rgb(0 0 0 / .08);position:relative;flex:0 0 auto;transform:translateY(1px)}.fec-brand__mark:before{position:absolute;inset:9px;border-radius:999px;border:1px solid rgb(0 0 0 / .1)}.fec-brand__mark:after{content:"";position:absolute;width:7px;height:7px;border-radius:999px;background:rgb(0 0 0 / .85);top:50%;left:50%;transform:translate(-50%,-50%)}.fec-footer__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}.fec-footer__mark{width:32px;height:32px;border-radius:10px;background:rgb(0 0 0 / .04);border:1px solid rgb(0 0 0 / .08);position:relative;flex:0 0 auto;transform:translateY(1px)}.fec-footer__mark:after{content:"";position:absolute;width:6px;height:6px;border-radius:999px;background:rgb(0 0 0 / .85);top:50%;left:50%;transform:translate(-50%,-50%)}.fec-footer__title{font-weight:600;letter-spacing:-.01em;white-space:nowrap}.fec-footer__dot{font-size:.9em;margin:0 .14em;position:relative;top:-.02em}.fec-footer__sub{font-size:.75rem;opacity:.6;margin-top:2px;display:block}.fec-user__btn,.fec-user__btn:focus,.fec-user__btn:focus-visible,.fec-user__btn:hover{text-decoration:none}.fec-user.is-guest .fec-user__name{position:relative;font-weight:500}.fec-user.is-guest .fec-user__name:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:0;transform:scaleX(.8);transition:opacity .15s ease,transform .15s ease}.fec-user.is-guest .fec-user__btn:focus-visible .fec-user__name:after,.fec-user.is-guest .fec-user__btn:hover .fec-user__name:after{opacity:.6;transform:scaleX(1)}.fec-user.is-guest .fec-caret{display:none}.fec-user.is-guest .fec-user__btn{padding-right:.25rem;padding:.35rem .65rem;border-radius:999px;background:#fff0;border:1px solid rgb(0 0 0 / .12);font-weight:500}.fec-user.is-guest .fec-user__name{font-size:.85rem;letter-spacing:.02em;text-transform:none}.fec-user.is-guest .fec-avatar{display:none}.fec-user.is-guest .fec-user__btn:hover{border-color:rgb(0 0 0 / .25)}.fec-user.is-guest .fec-user__btn:hover .fec-user__name{text-decoration:underline;text-underline-offset:2px}.fec-user.is-guest .fec-user__btn:focus-visible{outline:2px solid rgb(0 0 0 / .35);outline-offset:2px}.fec-user.is-logged .fec-user__btn{border:none;background:#fff0;font-weight:600}.fec-hero__steps{display:grid;gap:.25rem;margin:.75rem 0 1rem;padding:0;list-style:none}.fec-hero__step{font-size:.95rem;color:#333}.fec-hero__side{max-width:320px}.fec-hero__note{margin-top:.75rem;font-size:.9rem;line-height:1.45;color:#444}.fec-hero__note strong{font-weight:600}.fec-hero__chips{display:flex;flex-wrap:wrap;gap:.4rem}.fec-hero__chips+.fec-hero__note{padding-left:.1rem}@media (max-width:768px){.fec-hero__side{max-width:none;margin-top:1rem}.fec-hero__note{font-size:.85rem}}.fec-zero{border:1px solid rgb(0 0 0 / .12);border-radius:14px;background:rgb(0 0 0 / .02);padding:14px;margin:10px 0 14px}.fec-zero__title{margin:0 0 6px;font-size:15px;line-height:1.2;letter-spacing:-.01em}.fec-zero__text{margin:0 0 10px;font-size:13px;line-height:1.45;color:rgb(0 0 0 / .78)}.fec-zero__actions{display:flex;gap:8px;flex-wrap:wrap}.fec-zero .fec-btn{padding:10px 12px;border-radius:999px}.fec-zero~.fec-pg{display:none!important}body:has(.fec-zero:not([hidden]):not([aria-hidden="true"])) .fec-pg{display:none!important}.fec-quicklinks__link:before{content:"→";opacity:.4;font-size:.75rem}.fec-quicklinks{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}.fec-quicklinks__link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:999px;font-size:.85rem;font-weight:500;line-height:1;color:#111;background:rgb(0 0 0 / .04);border:1px solid rgb(0 0 0 / .08);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}.fec-quicklinks__link:focus-visible,.fec-quicklinks__link:hover{background:rgb(0 0 0 / .07);border-color:rgb(0 0 0 / .15);color:#000}.fec-quicklinks__link[aria-current=page]{background:#000;color:#fff;border-color:#000}@media (max-width:640px){.fec-quicklinks{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.fec-quicklinks::-webkit-scrollbar{display:none}.fec-quicklinks__link{flex:0 0 auto}}.fec-jumplinks{margin:.75rem 0 1rem}.fec-jumplinks__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}.fec-jumplinks__label{font-size:.8rem;font-weight:500;color:rgb(0 0 0 / .55)}.fec-jumplinks__a{font-size:.8rem;font-weight:500;line-height:1;color:rgb(0 0 0 / .7);text-decoration:none;padding:.25rem .45rem;border-radius:6px;transition:color .12s ease,background-color .12s ease}.fec-jumplinks__a:focus-visible,.fec-jumplinks__a:hover{color:#000;background:rgb(0 0 0 / .06)}.fec-jumplinks__a.is-active{color:#000;background:rgb(0 0 0 / .08)}@media (max-width:640px){.fec-jumplinks__inner{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.fec-jumplinks__inner::-webkit-scrollbar{display:none}.fec-jumplinks__a{flex:0 0 auto}}.fec-jumplinks{opacity:.9}.fec-ql{display:flex;align-items:flex-start;gap:.6rem;margin:.75rem 0 .25rem}@media (max-width:640px){.fec-ql{flex-direction:column;gap:.35rem}}.fec-ql__label{font-size:.85rem;font-weight:600;color:rgb(0 0 0 / .62);line-height:2.65;padding-top:.35rem}@media (max-width:640px){.fec-ql__label{padding-top:0}}@media (max-width:640px){.fec-quicklinks{width:100%;overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch}.fec-quicklinks__link{flex:0 0 auto}}@media (max-width:640px){.fec-quicklinks{padding-left:.1rem}}.fec-cookie{position:fixed;inset:auto 0 0 0;z-index:9999;padding:12px;background:hsl(0 0% 100% / .92);backdrop-filter:blur(6px);border-top:1px solid rgb(0 0 0 / .08)}.fec-cookie[hidden]{display:none}.fec-cookie__inner{max-width:1120px;margin:0 auto;display:grid;gap:12px}@media (min-width:768px){.fec-cookie__inner{grid-template-columns:1fr auto;align-items:center}}.fec-cookie__text strong{display:block;font-size:14px;font-weight:600;margin-bottom:4px}.fec-cookie__text p{font-size:13px;line-height:1.4;color:#333;margin:0}.fec-cookie__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.fec-btn{font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid #fff0;cursor:pointer}.fec-btn--primary{background:#000;color:#fff}.fec-btn--primary:hover{opacity:.9}.fec-btn--ghost{background:#fff0;border-color:rgb(0 0 0 / .15);color:#000}.fec-link{background:none;border:0;padding:8px;font-size:12px;color:#555;cursor:pointer}.fec-link:hover{text-decoration:underline}.fec-btn:focus-visible,.fec-link:focus-visible{outline:2px solid #000;outline-offset:2px}.fec-cookie__settings{border-top:1px solid rgb(0 0 0 / .08);padding-top:10px}.fec-cookie__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 0}.fec-cookie__rowtitle{font-size:13px;font-weight:600;margin-bottom:2px}.fec-cookie__rowdesc{font-size:12px;color:#444}.fec-cookie__pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:rgb(0 0 0 / .03);color:#111}.fec-cookie__save{display:flex;justify-content:flex-end;padding-top:6px}.fec-switch{position:relative;display:inline-flex;align-items:center}.fec-switch input{position:absolute;opacity:0;width:1px;height:1px}.fec-switch__ui{width:42px;height:24px;border-radius:999px;border:1px solid rgb(0 0 0 / .15);background:rgb(0 0 0 / .06);display:inline-block;position:relative;transition:background .15s ease,border-color .15s ease}.fec-switch__ui:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:#fff;border:1px solid rgb(0 0 0 / .12);transition:transform .15s ease}.fec-switch input:checked+.fec-switch__ui{background:#000;border-color:#000}.fec-switch input:checked+.fec-switch__ui:after{transform:translateX(18px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fec-search[hidden]{display:none}.fec-search{position:fixed;inset:0;z-index:9999}.fec-search__backdrop{position:absolute;inset:0;background:rgb(0 0 0 / .35);backdrop-filter:blur(2px)}.fec-search__panel{position:relative;width:min(760px, calc(100vw - 24px));margin:84px auto 0 auto;border-radius:16px;background:#fff;border:1px solid rgb(0 0 0 / .10);box-shadow:0 16px 44px rgb(0 0 0 / .20);overflow:hidden}.fec-search__top{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid rgb(0 0 0 / .08);background:rgb(255 255 255 / .96)}.fec-search__back{display:none;width:36px;height:36px;border-radius:999px;border:1px solid rgb(0 0 0 / .10);background:#fff}.fec-search__esc{display:flex;align-items:center;justify-content:center;height:36px;padding:0 10px;border-radius:10px;border:1px solid rgb(0 0 0 / .10);background:#fff;font-size:12px;letter-spacing:.02em}.fec-search__field{position:relative;flex:1;height:40px;display:flex;align-items:center;border-radius:12px;border:1px solid rgb(0 0 0 / .12);background:#fff}.fec-search__icon{width:38px;display:flex;justify-content:center;opacity:.65}.fec-search__input{flex:1;height:40px;border:0;outline:none;background:#fff0;font-size:14px;padding-right:36px}.fec-search__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;border:1px solid rgb(0 0 0 / .10);background:#fff}.fec-search__popular{padding:12px 12px 0 12px}.fec-search__hint{font-size:12px;opacity:.65;margin:0 0 8px 0}.fec-search__chips{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px}.fec-chip{border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:#fff;padding:8px 10px;font-size:13px}.fec-search__body{max-height:min(62vh, 560px);overflow:auto;padding:10px 12px 12px 12px}.fec-search__state{padding:18px 6px}.fec-search__emptytitle{font-weight:600;margin-bottom:6px}.fec-search__emptyhint{opacity:.70;font-size:14px}.fec-search__group{padding:10px 0 6px 0}.fec-search__ghead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 8px 0}.fec-search__gtitle{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.70}.fec-search__gcount{font-size:12px;opacity:.55}.fec-search__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.fec-search__link{display:block;padding:10px 10px;border-radius:14px;border:1px solid rgb(0 0 0 / .10);text-decoration:none;color:inherit;background:#fff}.fec-search__link:focus-visible{outline:2px solid #000;outline-offset:2px}.fec-search__title{font-size:14px;font-weight:600;line-height:1.25;margin-bottom:6px}.fec-search__meta{display:flex;flex-wrap:wrap;gap:6px}.fec-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);font-size:12px;opacity:.88;background:#fff}.fec-pill--fx{border-color:rgb(0 0 0 / .20);font-weight:600}.fec-search__footer{padding:10px 0 0 0;border-top:1px solid rgb(0 0 0 / .06);margin-top:10px}.fec-search__viewall{display:flex;justify-content:flex-end;padding:10px 2px 0 2px;text-decoration:none;font-weight:600}.fec-skel{display:flex;flex-direction:column;gap:10px}.fec-skel__line{height:14px;border-radius:999px;background:rgb(0 0 0 / .08)}@media (max-width:820px){.fec-search__panel{width:100%;height:100%;margin:0;border-radius:0;border:0}.fec-search__top{position:sticky;top:0;z-index:2;padding:10px}.fec-search__back{display:inline-flex;align-items:center;justify-content:center}.fec-search__esc{display:none}.fec-search__body{max-height:none;height:calc(100vh - 64px);padding-bottom:18px}}.fec-ico{display:inline-flex;align-items:center;justify-content:center}.fec-ico__svg{display:block}.fec-search__trigger{line-height:0}.fec-search__trigger{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.fec-ico{display:inline-flex;align-items:center;justify-content:center}.fec-ico__svg{display:block}.fec-search__trigger .fec-ico__svg{transform:translateY(.5px)}html.is-search-open,html.is-search-open body{overflow:hidden}@media (min-width:821px){.fec-search__esc{display:none}}.fec-search__field{height:44px;border-radius:999px;padding-right:8px}.fec-search__input{font-size:15px}.fec-search__link{padding:10px 12px;border-radius:12px}.fec-search__title{font-size:14px;font-weight:600}.fec-search__meta{gap:4px}.fec-search__meta .fec-pill{height:20px;font-size:11px}.fec-search__footer{margin-top:6px;padding-top:6px}.fec-search__viewall{font-size:14px;opacity:.9}.fec-search__viewall:hover{text-decoration:underline}.fec-search__list .fec-search__item:first-child .fec-search__link{border-color:rgb(0 0 0 / .25)}.fec-search__popular{padding-bottom:14px;border-bottom:1px solid rgb(0 0 0 / .06)}.fec-chip{border-color:rgb(0 0 0 / .12);background:rgb(0 0 0 / .02)}.fec-chip:hover{border-color:rgb(0 0 0 / .22);background:rgb(0 0 0 / .04)}.fec-search__hint{opacity:.6;font-weight:500}.fec-search__recent{margin-top:14px}.fec-search__clearrec{margin-left:10px;border:0;background:#fff0;font:inherit;opacity:.65;cursor:pointer}.fec-search__clearrec:hover{opacity:.9;text-decoration:underline}.fec-search[hidden],.fec-search [hidden]{display:none!important}.fec-search .fec-search-overlay{position:fixed;inset:0;z-index:9999}html.is-search-open,html.is-search-open body{overflow:hidden}.fec-search__panel{position:relative;z-index:1}.fec-search__groups[hidden]{display:none!important}.fec-search__body{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.fec-search__popular,.fec-search__recent{padding:18px 20px}.fec-search__recent{border-top:1px solid rgb(0 0 0 / .08);padding-top:14px}.fec-search__sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-weight:600}.fec-search__clearrec{appearance:none;border:0;background:#fff0;padding:6px 10px;border-radius:999px;font:inherit;color:rgb(0 0 0 / .65);cursor:pointer}.fec-search__clearrec:hover{background:rgb(0 0 0 / .05);color:rgb(0 0 0 / .85)}.fec-search__clearrec:focus-visible{outline:2px solid rgb(0 0 0 / .35);outline-offset:2px}.fec-search__chips{display:flex;flex-wrap:wrap;gap:10px}.fec-search__recent .fec-chip{font-weight:600;text-transform:lowercase}@media (max-width:720px){.fec-search__popular,.fec-search__recent{padding:14px 14px}}.fec-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:rgb(0 0 0 / .03);font-size:12px;line-height:1;color:rgb(0 0 0 / .78);white-space:nowrap}.fec-pill.is-expired{border-color:rgb(0 0 0 / .18);background:rgb(0 0 0 / .06);color:rgb(0 0 0 / .72)}.fec-pill.is-expired::before{content:"•";opacity:.65}.fec-pill.fec-pill--fx{border-color:rgb(0 0 0 / .18);background:rgb(0 0 0 / .05);font-weight:700}.fec-search__item+.fec-search__item{margin-top:10px}.fec-search__link{display:block;padding:12px 14px;border-radius:14px;border:1px solid rgb(0 0 0 / .08);background:#fff;text-decoration:none;color:inherit}.fec-search__link:hover{border-color:rgb(0 0 0 / .14);box-shadow:0 6px 18px rgb(0 0 0 / .08)}.fec-search__link:focus-visible{outline:2px solid rgb(0 0 0 / .35);outline-offset:2px}.fec-search__backdrop{background:rgb(0 0 0 / .42)}.fec-search__panel{max-width:980px;width:calc(100% - 56px);margin:72px auto 0;border-radius:20px}.fec-search__top{padding:16px 18px}.fec-search__field{border-radius:999px}.fec-search__body{padding:0 18px 18px}@media (max-width:720px){.fec-search__panel{width:calc(100% - 24px);margin:18px auto 0;border-radius:18px}.fec-search__top{padding:14px}.fec-search__body{padding:0 14px 14px}}.fec-search__input::-webkit-search-decoration,.fec-search__input::-webkit-search-cancel-button,.fec-search__input::-webkit-search-results-button,.fec-search__input::-webkit-search-results-decoration{-webkit-appearance:none;display:none}.fec-search__input{-webkit-appearance:none}.fec-search,.fec-search *{box-sizing:border-box}.fec-search__panel{overflow:hidden}.fec-search__body{overflow:auto;-webkit-overflow-scrolling:touch}.fec-search__chips{flex-wrap:wrap;overflow:hidden}.fec-search__field{background:#fff}.fec-search__item.is-active>.fec-search__link,.fec-search__link.is-active{outline:none;box-shadow:0 0 0 2px rgb(0 0 0 / .08) inset;background:rgb(0 0 0 / .03);border-radius:14px}.fec-search__title mark.fec-hit{background:rgb(255 220 0 / .35);padding:0 .15em;border-radius:.35em}.fec-search .fec-pill{appearance:none;-webkit-appearance:none;border:0;background:#fff0;padding:0;font:inherit;color:inherit;cursor:pointer}.fec-search .fec-pill:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}.fec-searchpage{max-width:var(--fec-container,1280px);margin:0 auto;padding:18px 0 28px}.fec-searchpage__head{display:grid;gap:10px;margin-bottom:14px}.fec-searchpage__title{font-size:22px;line-height:1.2;margin:0}.fec-searchpage__q{font-size:13px;opacity:.8}.fec-searchpage__tabs{display:flex;gap:8px;flex-wrap:wrap}.fec-searchpage__tabs .fec-tab{appearance:none;border:1px solid rgb(0 0 0 / .14);background:rgb(0 0 0 / .03);padding:8px 10px;border-radius:999px;font:inherit;cursor:pointer}.fec-tab__count{margin-left:6px;font-size:12px;opacity:.75}.fec-searchpage__list{list-style:none;padding:0;margin:0}.fec-searchpage__more{margin-top:14px}.fec-searchpage__state{margin:10px 0}.fec-search__link{display:block;padding:12px;border-radius:14px;border:1px solid rgb(0 0 0 / .10)}.fec-search__link:hover{border-color:rgb(0 0 0 / .18)}@media (max-width:560px){.fec-searchpage{padding-left:12px;padding-right:12px}}.fec-user.is-guest .fec-user__btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgb(0 0 0 / .12);border-radius:999px;background:#fff;color:#111;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none}.fec-user.is-guest .fec-avatar{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;border:1px solid rgb(0 0 0 / .12);font-weight:700}@media (max-width:460px){.fec-user.is-guest .fec-user__btn{padding:10px}.fec-user.is-guest .fec-user__label{display:none}}.fec-topbar,.fec-header,.fec-navtop{min-width:0}.fec-topbar__inner,.fec-header__inner,.fec-navtop__inner{display:flex;align-items:center;gap:10px;min-width:0}.fec-topbar__actions,.fec-header__actions,.fec-navtop__actions{display:flex;align-items:center;gap:10px;min-width:0;margin-left:auto}.fec-topbar__actions>*{flex:0 0 auto}[data-search-open],.fec-search-open,.fec-topbar__searchbtn{flex:0 0 auto;white-space:nowrap}.fec-user{min-width:0}.fec-user__btn{min-width:0;max-width:220px}.fec-user__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:460px){.fec-topbar__actions,.fec-header__actions,.fec-navtop__actions{gap:8px}.fec-user.is-logged .fec-user__name{display:none}.fec-user__btn{padding:10px 12px}}.fec-topbar,.fec-toolbar{position:sticky;left:0;right:0}.fec-topbar__inner{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.fec-toolbar__inner{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}html,body{overflow-x:clip}@supports not (overflow-x:clip){html,body{overflow-x:hidden}}.fec-search__panel{display:flex;flex-direction:column;min-height:0}.fec-search__body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.fec-navuser{list-style:none;margin:0;padding:0}.fec-navuser__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border-radius:14px;border:1px solid rgb(0 0 0 / .10);background:#fff;text-decoration:none;font-weight:900;color:rgb(0 0 0 / .85)}.fec-navuser__btn:hover{background:rgb(0 0 0 / .03);border-color:rgb(0 0 0 / .16)}.fec-navuser__avatar{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;background:rgb(0 0 0 / .06);border:1px solid rgb(0 0 0 / .12);font-weight:900}.fec-navuser__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-navuser__caret{width:10px;height:10px;border-right:2px solid rgb(0 0 0 / .55);border-bottom:2px solid rgb(0 0 0 / .55);transform:rotate(45deg);flex:0 0 auto;opacity:.9}.fec-navuser__wrap{position:relative}.fec-navuser__dd{display:none;margin-top:8px;border-radius:14px;border:1px solid rgb(0 0 0 / .10);background:rgb(0 0 0 / .02);overflow:hidden}.fec-navuser__wrap.is-open .fec-navuser__dd{display:block}.fec-navuser__head{padding:12px;border-bottom:1px solid rgb(0 0 0 / .08);background:rgb(255 255 255 / .7)}.fec-navuser__title{font-weight:900}.fec-navuser__sub{margin-top:3px;font-size:12px;color:rgb(0 0 0 / .62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-navuser__items{padding:10px;display:grid;gap:6px}.fec-navuser__item{display:flex;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:900;color:rgb(0 0 0 / .78);background:#fff;border:1px solid rgb(0 0 0 / .08)}.fec-navuser__item:hover{background:rgb(0 0 0 / .03);border-color:rgb(0 0 0 / .14)}.fec-navuser__sep{height:1px;background:rgb(0 0 0 / .10);margin:4px 2px}.fec-navuser__item--danger{color:rgb(180 0 0 / .88)}.fec-navuser__btn--guest{justify-content:flex-start}.fec-navuser__btn--guest .fec-navuser__caret{display:none}@media (max-width:420px){.fec-navuser__label{display:none}}@media (min-width:981px){.fec-navuser{display:none!important;.fec-nav__user}}.fec-navuser{list-style:none;margin:0 0 10px 0;padding:0}.fec-navuser__wrap{position:relative}.fec-navuser__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:rgb(0 0 0 / .02);border:1px solid rgb(0 0 0 / .08);font:inherit;font-weight:800;color:rgb(0 0 0 / .88);text-decoration:none;cursor:pointer}.fec-navuser__btn:hover{border-color:rgb(0 0 0 / .14);background:rgb(0 0 0 / .03)}.fec-navuser__btn:focus-visible{outline:2px solid rgb(0 0 0 / .35);outline-offset:2px}.fec-navuser__avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;font-weight:900;background:rgb(0 0 0 / .06);border:1px solid rgb(0 0 0 / .10);color:rgb(0 0 0 / .85)}.fec-navuser__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-navuser__caret{width:10px;height:10px;flex:0 0 auto;border-right:2px solid rgb(0 0 0 / .55);border-bottom:2px solid rgb(0 0 0 / .55);transform:rotate(45deg);border-radius:1px;opacity:.9}.fec-navuser__btn--guest{justify-content:flex-start;gap:12px}.fec-navuser__btn--guest .fec-navuser__caret{display:none!important}.fec-navuser__label{font-weight:900;font-size:15px}.fec-navuser__dd{margin-top:10px;border-radius:16px;border:1px solid rgb(0 0 0 / .08);background:#fff;box-shadow:0 16px 44px rgb(0 0 0 / .10);overflow:hidden;display:none}.fec-navuser__wrap.is-open .fec-navuser__dd{display:block}.fec-navuser__head{padding:12px 14px;border-bottom:1px solid rgb(0 0 0 / .08);background:rgb(0 0 0 / .02)}.fec-navuser__title{font-weight:900}.fec-navuser__sub{margin-top:4px;font-size:12px;color:rgb(0 0 0 / .65);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fec-navuser__items{padding:10px}.fec-navuser__item{display:flex;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;font-weight:900;color:rgb(0 0 0 / .78);border:1px solid #fff0}.fec-navuser__item:hover{background:rgb(0 0 0 / .04);border-color:rgb(0 0 0 / .08)}.fec-navuser__sep{height:1px;background:rgb(0 0 0 / .08);margin:8px 6px}.fec-navuser__item--danger{color:rgb(180 0 0 / .88)}.fec-navuser__item--danger:hover{background:rgb(180 0 0 / .06);border-color:rgb(180 0 0 / .14)}@media (min-width:981px){.fec-navuser{display:none!important}}@media (min-width:981px){.fec-navuser{display:none!important}}@media (max-width:980px){.fec-topbar__right .fec-user{display:none!important}}html.is-search-open,body.is-search-open{overflow:hidden}.fec-search{position:fixed;inset:0;z-index:9999}.fec-search__backdrop{position:absolute;inset:0}.fec-search__panel{position:relative;height:100dvh;max-height:100dvh;display:flex;flex-direction:column}.fec-search__body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.fec-search__top{flex:0 0 auto}.fec-search__groups{overflow:visible}.fec-search__input{font-size:16px;line-height:1.2}.fec-search input,.fec-search textarea,.fec-search select{font-size:16px}.fec-search__footer{position:sticky;bottom:0;z-index:2;background:#fff;border-top:1px solid rgb(0 0 0 / .08);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}.fec-search__groups{padding-bottom:72px}.fec-search__panel{height:100svh;max-height:100svh}@supports (height:100dvh){.fec-search__panel{height:100dvh;max-height:100dvh}}.fec-scope__tabs .fec-tab.is-active{background:#111;color:#fff}.fec-breadcrumb{font-size:13px;line-height:1.3;margin:0 0 10px}.fec-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}.fec-breadcrumb li{display:flex;align-items:center;gap:6px}.fec-breadcrumb li+li:before{content:"›";opacity:.55}.fec-breadcrumb a{text-decoration:none}.fec-breadcrumb a:hover{text-decoration:underline}.fec-hero__left,.fec-hero__brand,.fec-hero__title{min-width:0}.fec-hero__typeLink{max-width:100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}@media (max-width:480px){.fec-hero__typeLink{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}}.fec-info-btn:hover,.fec-info-btn[aria-expanded=true]{border-color:rgb(0 0 0 / .22);color:rgb(0 0 0 / .88)}.fec-editors-picks{margin:18px 0 22px;padding:18px;border-radius:var(--fec-r);border:1px solid rgb(0 167 167 / .18);background:linear-gradient(180deg,rgb(0 167 167 / .04),rgb(0 167 167 / .015) 60%,#fff)}.fec-editors-picks__head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}.fec-editors-picks__title{margin:0;font-size:18px;line-height:1.2;letter-spacing:-.01em;font-weight:900;color:rgb(0 0 0 / .9);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.fec-editors-picks__star{color:var(--fec-link);font-size:20px;line-height:1}.fec-editors-picks__sub{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fec-link);padding:3px 8px;border-radius:999px;background:rgb(0 167 167 / .1);border:1px solid rgb(0 167 167 / .2)}.fec-editors-picks__info{position:relative;flex-shrink:0}.fec-info-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:#fff;color:rgb(0 0 0 / .68);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1;transition:border-color .12s,color .12s,background .12s}.fec-info-btn[aria-expanded=true]{background:rgb(0 0 0 / .04)}.fec-info-btn__icon{font-size:15px;line-height:1;opacity:.85}.fec-info-popover{position:absolute;top:calc(100% + 8px);right:0;z-index:10;width:min(320px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;border:1px solid rgb(0 0 0 / .12);background:#fff;box-shadow:0 12px 32px rgb(0 0 0 / .12),0 2px 6px rgb(0 0 0 / .04);font-size:13px;line-height:1.5;color:rgb(0 0 0 / .78)}.fec-info-popover[hidden]{display:none}.fec-info-popover__arrow{position:absolute;top:-7px;right:18px;width:12px;height:12px;background:#fff;border-top:1px solid rgb(0 0 0 / .12);border-left:1px solid rgb(0 0 0 / .12);transform:rotate(45deg)}.fec-info-popover__title{margin:0 0 6px;font-size:13px;font-weight:900;color:rgb(0 0 0 / .9)}.fec-info-popover__intro{margin:0 0 12px;font-size:12.5px;color:rgb(0 0 0 / .7)}.fec-info-popover__list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}.fec-info-popover__list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 10px;border-radius:8px;background:rgb(0 0 0 / .03);font-size:12.5px}.fec-info-popover__metric{font-weight:700;color:rgb(0 0 0 / .8)}.fec-info-popover__weight{font-weight:900;color:var(--fec-link);font-variant-numeric:tabular-nums}.fec-info-popover__note{margin:0 0 10px;padding-top:10px;font-size:12px;color:rgb(0 0 0 / .6);border-top:1px solid rgb(0 0 0 / .06)}.fec-info-popover__link{display:inline-block;font-size:12.5px;font-weight:800;color:var(--fec-link);text-decoration:none}.fec-info-popover__link:hover{text-decoration:underline}.fec-editors-picks__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}@media (max-width:992px){.fec-editors-picks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.fec-editors-picks__grid{grid-template-columns:1fr;gap:18px}.fec-editors-picks{padding:14px}.fec-info-btn__label,.fec-info-popover__arrow{display:none}.fec-editors-picks__info{position:static}.fec-info-popover{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / .15);padding:24px 18px calc(20px + env(safe-area-inset-bottom,0px));z-index:9999;animation:.22s fecPopoverSlideUp}.fec-info-popover::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:999px;background:rgb(0 0 0 / .18)}.fec-info-popover__close{position:absolute;top:14px;right:12px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:#fff0;color:rgb(0 0 0 / .55);font-size:22px;line-height:1;cursor:pointer;border-radius:999px;font-family:inherit}.fec-info-popover__close:focus-visible,.fec-info-popover__close:hover{background:rgb(0 0 0 / .06);color:rgb(0 0 0 / .85);outline:0}.fec-info-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / .42);z-index:9998;animation:.18s fecBackdropFade}}@keyframes fecPopoverSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fecBackdropFade{from{opacity:0}to{opacity:1}}@media (min-width:561px){.fec-info-backdrop,.fec-info-popover__close{display:none}}.fec-editor-pick{display:flex}.fec-editor-pick>.fec-card{flex:1;border-color:rgb(0 167 167 / .35);box-shadow:0 8px 24px rgb(0 167 167 / .08),0 2px 6px rgb(0 0 0 / .04)}.fec-quickchips{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.fec-qchip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgb(0 0 0 / .12);background:#fff;color:rgb(0 0 0 / .8);font:inherit;font-size:13px;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap;transition:border-color .12s ease,background .12s ease,color .12s ease}.fec-qchip:hover{border-color:rgb(0 0 0 / .25);background:rgb(0 0 0 / .02)}.fec-qchip:focus-visible{outline:2px solid rgb(0 0 0 / .35);outline-offset:2px}.fec-qchip[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}.fec-qchip[aria-pressed="true"]:hover{background:#000;border-color:#000}.fec-qchip__icon{font-size:14px;line-height:1;opacity:.85}.fec-qchip[aria-pressed="true"] .fec-qchip__icon{opacity:1}.fec-qchip[data-fec-qchip="fx"][aria-pressed="true"]{background:var(--fec-link);border-color:var(--fec-link);color:#fff}.fec-qchip[data-fec-qchip="fx"][aria-pressed="true"]:hover{background:#008888;border-color:#008888}@media (max-width:720px){.fec-toolbar__inner{flex-wrap:wrap}.fec-toolbar__right{width:100%;order:2;margin-top:6px}.fec-quickchips{width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}.fec-quickchips::-webkit-scrollbar{display:none}.fec-qchip{flex:0 0 auto;height:34px;padding:0 12px;font-size:12.5px}}@media (max-width:560px){.fec-editors-picks__head{flex-wrap:nowrap;align-items:center;gap:8px}.fec-editors-picks__title{flex:1 1 auto;min-width:0;font-size:16px;gap:6px}.fec-editors-picks__sub{font-size:10px;padding:2px 6px;letter-spacing:.04em}.fec-editors-picks__info{flex:0 0 auto;margin-left:auto}.fec-info-btn{width:32px;height:32px;padding:0;justify-content:center;border-radius:999px}.fec-info-btn__label{display:none}.fec-info-btn__icon{font-size:16px;opacity:1}}.fec-bridge{margin:8px 0 14px;padding:10px 16px;border-radius:var(--fec-r-sm);border:1px solid rgb(0 167 167 / .18);background:rgb(0 167 167 / .03)}.fec-bridge__inner{max-width:var(--fec-container);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.fec-bridge__label{font-size:13px;font-weight:800;color:rgb(0 0 0 / .75);margin-right:4px}.fec-bridge__a{font-size:13px;font-weight:700;color:var(--fec-link);text-decoration:none;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid rgb(0 167 167 / .25);white-space:nowrap;transition:background .12s ease,border-color .12s ease}.fec-bridge__a:hover{background:rgb(0 167 167 / .08);border-color:rgb(0 167 167 / .4)}@media (max-width:560px){.fec-bridge{padding:10px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.fec-bridge::-webkit-scrollbar{display:none}.fec-bridge__inner{flex-wrap:nowrap}.fec-bridge__label{flex:0 0 auto}.fec-bridge__a{flex:0 0 auto}}.fec-card__cashout{margin-top:4px;font-size:12px;font-weight:400;color:var(--fec-text-muted,#5a6573);letter-spacing:.01em;white-space:nowrap;text-align:center}.fec-card__cashout strong{font-weight:600;color:var(--fec-text-strong,#1a1a1a)}.fec-card__cashout--placeholder{visibility:hidden}@media (max-width:480px){.fec-card__cashout{font-size:11px;margin-top:3px}}.fec-card__note--soft{background:transparent;border:0;padding:6px 0 0 14px;min-height:0;font-size:11px;font-weight:400;font-style:italic;color:rgb(0 0 0 / .42);text-align:left;letter-spacing:.01em}@media (max-width:480px){.fec-card__note--soft{padding:8px 0 0 12px;font-size:10.5px}}.fec-home{}.fec-home-hero{padding:28px 0 18px}.fec-home-hero__inner{max-width:var(--fec-container);margin:0 auto;padding:0 16px}.fec-home-hero__title{margin:0;font-size:clamp(28px, 4vw, 44px);line-height:1.05;letter-spacing:-.02em;font-weight:900;color:rgb(0 0 0 / .9);max-width:22ch}.fec-home-hero__title em{font-style:normal;color:var(--fec-link)}.fec-home-hero__sub{margin:16px 0 0;font-size:17px;line-height:1.5;color:rgb(0 0 0 / .68);max-width:64ch}.fec-home-hero__stats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;max-width:760px}@media (max-width: 720px){.fec-home-hero__stats{grid-template-columns:repeat(2, 1fr)}}.fec-home-hero__stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid rgb(0 0 0 / .08);background:rgb(0 0 0 / .015)}.fec-home-hero__statnum{font-size:22px;font-weight:900;letter-spacing:-.02em;color:rgb(0 0 0 / .92);line-height:1}.fec-home-hero__statlbl{font-size:12px;font-weight:700;color:rgb(0 0 0 / .6);letter-spacing:.01em}.fec-home-hero__cta{margin:24px 0 0;display:flex;gap:10px;flex-wrap:wrap}.fec-home-hero__cta .fec-btn{height:48px;padding:0 20px;font-size:15px;font-weight:900;border-radius:999px}.fec-sec-hd{max-width:var(--fec-container);margin:36px auto 14px;padding:0 16px;display:flex;align-items:baseline;justify-content:space-between;gap:14px}.fec-sec-hd__title{margin:0;font-size:22px;font-weight:900;letter-spacing:-.01em;color:rgb(0 0 0 / .9)}.fec-sec-hd__sub{font-size:13px;font-weight:700;color:rgb(0 0 0 / .55)}.fec-sec-hd__link{font-size:13px;font-weight:800;color:var(--fec-link);text-decoration:none}.fec-sec-hd__link:hover{text-decoration:underline}.fec-sec-body{max-width:var(--fec-container);margin:0 auto;padding:0 16px}.fec-browse-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px}@media (max-width: 720px){.fec-browse-grid{grid-template-columns:repeat(2, 1fr)}}.fec-browse-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;border:1px solid rgb(0 0 0 / .08);background:#fff;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s,box-shadow .12s}.fec-browse-card:hover{border-color:rgb(0 0 0 / .18);transform:translateY(-1px);box-shadow:0 8px 24px rgb(0 0 0 / .06)}.fec-browse-card__icon{width:44px;height:44px;border-radius:12px;background:rgb(0 167 167 / .08);border:1px solid rgb(0 167 167 / .18);display:grid;place-items:center;color:var(--fec-link);margin-bottom:6px;flex-shrink:0}.fec-browse-card__icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.fec-browse-card__title{font-size:16px;font-weight:900;color:rgb(0 0 0 / .9)}.fec-browse-card__count{font-size:13px;font-weight:700;color:rgb(0 0 0 / .55)}.fec-browse-card__count strong{color:var(--fec-link);font-variant-numeric:tabular-nums}.fec-trust-strip{margin:36px 0 0;background:rgb(0 0 0 / .02);border-top:1px solid rgb(0 0 0 / .06);border-bottom:1px solid rgb(0 0 0 / .06);padding:28px 0}.fec-trust-strip__inner{max-width:var(--fec-container);margin:0 auto;padding:0 16px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}@media (max-width: 760px){.fec-trust-strip__inner{grid-template-columns:1fr}}.fec-trust-col__kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--fec-link);margin-bottom:8px}.fec-trust-col__kicker svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}.fec-trust-col__title{font-size:17px;font-weight:900;color:rgb(0 0 0 / .9);margin:0 0 8px}.fec-trust-col__text{font-size:14px;line-height:1.5;color:rgb(0 0 0 / .65);margin:0 0 12px}.fec-trust-col__link{font-size:13px;font-weight:800;color:var(--fec-link);text-decoration:none}.fec-trust-col__link:hover{text-decoration:underline}.fec-blog-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px}@media (max-width: 880px){.fec-blog-grid{grid-template-columns:1fr}}.fec-blog-card{display:flex;flex-direction:column;gap:12px;border-radius:16px;border:1px solid rgb(0 0 0 / .08);background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}.fec-blog-card:hover{border-color:rgb(0 0 0 / .18);transform:translateY(-1px);box-shadow:0 10px 28px rgb(0 0 0 / .06)}.fec-blog-card__img{aspect-ratio:16/9;background:linear-gradient(135deg, rgb(0 167 167 / .12), rgb(0 0 0 / .04));width:100%;object-fit:cover;border-bottom:1px solid rgb(0 0 0 / .06)}.fec-blog-card__body{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}.fec-blog-card__cat{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--fec-link)}.fec-blog-card__title{margin:0;font-size:16px;font-weight:900;line-height:1.3;color:rgb(0 0 0 / .9)}.fec-blog-card__excerpt{font-size:13.5px;line-height:1.5;color:rgb(0 0 0 / .65);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fec-blog-card__date{font-size:12px;color:rgb(0 0 0 / .5);margin-top:auto}.fec-casinos-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}@media (max-width: 880px){.fec-casinos-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 480px){.fec-casinos-grid{grid-template-columns:1fr}}.fec-casino-rev__score{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 4px}.fec-casino-rev__scorenum{font-size:38px;font-weight:900;line-height:1;letter-spacing:-.02em;color:rgb(0 0 0 / .9);font-variant-numeric:tabular-nums}.fec-casino-rev__scorelbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgb(0 0 0 / .5)}.fec-casino-rev__rank{text-align:center;font-size:13px;font-weight:800;color:var(--fec-link);padding:4px 0}.fec-card__bonus{display:flex;flex-direction:column;gap:4px}.fec-fxactivity__intro{max-width:760px;margin:0 0 24px 0;font-size:15px;line-height:1.55;color:var(--fec-text-muted,#4b5563)}.fec-fxactivity-card{display:flex;flex-direction:column;gap:12px}.fec-fxactivity-card__status{display:flex;justify-content:center;padding:4px 0}.fec-fxactivity-card__status .fec-card__check{font-size:13px;padding:6px 14px}.fec-fxactivity-card .fec-card__fact:last-child strong{color:var(--fec-link,#00a7a7)}@media (max-width:1100px){.fec-fxactivity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.fec-fxactivity-grid{grid-template-columns:1fr}}/* fec-nl */
.fec-nl{margin:32px 0;font-family:inherit}.fec-nl__inner{max-width:640px;margin:0 auto}.fec-nl__heading{font-size:22px;line-height:1.3;font-weight:700;margin:0 0 8px;color:var(--fec-text,#1c1f24)}.fec-nl__sub{font-size:14px;line-height:1.5;margin:0 0 20px;color:var(--fec-muted,#6b7280)}.fec-nl__form{margin:0}.fec-nl__row{display:flex;gap:8px;margin-bottom:12px}.fec-nl__email{flex:1;min-width:0;padding:11px 14px;font-size:15px;border:1px solid var(--fec-border,#d1d5db);border-radius:6px;background:#fff;color:var(--fec-text,#1c1f24);font-family:inherit}.fec-nl__email:focus{outline:2px solid var(--fec-accent,#1c1f24);outline-offset:-1px}.fec-nl__submit{padding:11px 18px;font-size:14px;font-weight:600;background:var(--fec-accent,#1c1f24);color:#fff;border:0;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:inherit}.fec-nl__submit:hover{opacity:.92}.fec-nl__submit:disabled{opacity:.6;cursor:wait}.fec-nl__consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--fec-muted,#6b7280);cursor:pointer}.fec-nl__consent input{margin-top:2px}.fec-nl__consent a{color:inherit;text-decoration:underline}.fec-nl__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.fec-nl__status{margin-top:12px;font-size:13px;line-height:1.5;min-height:1.2em}.fec-nl__status--error{color:#b91c1c}.fec-nl__status--success{color:#15803d}.fec-nl--full .fec-nl__inner{padding:32px;text-align:center;background:var(--fec-bg-soft,#f6f7f9);border:1px solid var(--fec-border,#e5e7eb);border-radius:8px}.fec-nl--full .fec-nl__row{max-width:460px;margin-left:auto;margin-right:auto}.fec-nl--full .fec-nl__consent{max-width:460px;margin:0 auto;justify-content:center}.fec-nl--full .fec-nl__status{text-align:center}.fec-nl--compact{margin:24px 0}.fec-nl--compact .fec-nl__heading{font-size:16px;margin-bottom:4px}.fec-nl--compact .fec-nl__sub{font-size:13px;margin-bottom:12px}.fec-nl--compact .fec-nl__email{padding:9px 12px;font-size:14px}.fec-nl--compact .fec-nl__submit{padding:9px 14px;font-size:13px}.fec-nl--inline{margin:24px 0}.fec-nl--inline .fec-nl__heading{font-size:18px}@media (max-width:520px){.fec-nl--full .fec-nl__inner{padding:24px 20px}.fec-nl__row{flex-direction:column}.fec-nl__submit{width:100%}}.fec-country-chip{display:flex;align-items:center;gap:10px;padding:12px 16px;margin: 16px 0;background:rgba(20,184,166,.06);border:1px solid rgba(20,184,166,.22);border-radius:10px;font-size:14px;line-height:1.4;flex-wrap:wrap}.fec-country-chip__flag{width:20px;height:20px;border-radius:50%;display:inline-block;flex-shrink:0;background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid rgba(0,0,0,.15)}.fec-country-chip__label{color:rgba(0,0,0,.72);flex:1 1 auto;min-width:0}.fec-country-chip__label strong{color:rgba(0,0,0,.92);font-weight:700}.fec-country-chip__link{color:#0d9488;text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0}.fec-country-chip__link:hover,.fec-country-chip__link:focus{text-decoration:underline;color:#0f766e}@media (max-width:560px){.fec-country-chip{padding:10px 12px;font-size:13px;gap:8px}.fec-country-chip__flag{width:18px;height:18px}}

html{overflow-x:hidden}
body.fecv2{background:#fff;color:#111}

.fec-brand__mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#00a7a7,#1c7a4a);display:inline-block}
.fec-brand__title{font-weight:800;font-size:19px;letter-spacing:.2px;color:#111;white-space:nowrap}

.fec-nav .fec-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px}
.fec-menu>li{position:relative}
.fec-menu>li>a{display:inline-block;padding:8px 2px;font-weight:600;font-size:14.5px;color:#111;text-decoration:none}
.fec-menu>li>a:hover{color:#00a7a7}
.fec-menu>li.parent>a::after{content:"\25BE";margin-left:6px;font-size:10px;opacity:.6}
.fec-menu ul{position:absolute;left:0;top:100%;min-width:210px;margin:0;padding:8px;list-style:none;
             background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.10);
             display:none;z-index:60}
.fec-menu li:hover>ul{display:block}
.fec-menu ul li a{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;color:#111;text-decoration:none}
.fec-menu ul li a:hover{background:rgba(0,167,167,.10);color:#00a7a7}

.fec-lang{display:flex;align-items:center;gap:5px;margin-left:10px;flex-wrap:wrap}
.fec-lang__item{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
                padding:4px 8px;border:1px solid rgba(0,0,0,.14);border-radius:999px;color:#111;text-decoration:none}
.fec-lang__item:hover{border-color:#00a7a7;color:#00a7a7}
.fec-lang__item.is-active{background:#00a7a7;border-color:#00a7a7;color:#fff}

@media(max-width:1000px){
    .fec-nav{display:none}
    .fec-nav.is-open{display:block}
    .fec-nav .fec-menu{flex-direction:column;align-items:stretch;gap:0}
    .fec-menu>li>a{padding:11px 4px;border-bottom:1px solid rgba(0,0,0,.06)}
    .fec-menu ul{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 10px}
    .fec-burger{display:inline-flex}
}

.cf-crumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;font-size:13px;color:rgba(0,0,0,.55)}
.cf-crumb li+li::before{content:"/";margin-right:8px;color:rgba(0,0,0,.28)}
.cf-crumb a{color:rgba(0,0,0,.55);text-decoration:none}
.cf-crumb a:hover{color:#00a7a7}
.cf-crumb-last{color:#111;font-weight:600}

.cf-h1{font-size:34px!important}
.cf-h1,.cf-single-title{line-height:1.2!important;color:#111!important}

.blog-card{text-decoration:none;color:inherit}
.cf-thumb-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
               font-size:26px;font-weight:900;letter-spacing:2px;color:#00a7a7;opacity:.85}
.blog-thumb{position:relative;background:linear-gradient(135deg,#eef7f7,#e8f3ee);
            border-radius:12px;overflow:hidden;min-height:150px}
.blog-meta{color:rgba(0,0,0,.55);font-size:13px;margin:10px 0 6px}
.cf-card-views{margin-left:4px}
.blog-title{font-size:16.5px;line-height:1.35;margin:0 0 8px}
.blog-card:hover .blog-title{color:#00a7a7}
.blog-excerpt{font-size:14px;line-height:1.55;color:rgba(0,0,0,.68);margin:0}

.type-cell{text-decoration:none;color:inherit}
.type-cell .glyph{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#00a7a7,#1c7a4a);display:inline-block}
.type-cell:hover .name{color:#00a7a7}

.cf-rich{font-size:17px;line-height:1.72;color:#222;max-width:860px}
.cf-rich h2{font-size:25px;margin:26px 0 12px;color:#111}
.cf-rich h3{font-size:20px;margin:22px 0 10px;color:#111}
.cf-rich p{margin:0 0 15px}
.cf-rich ul,.cf-rich ol{margin:0 0 15px;padding-left:22px}
.cf-rich a{color:#00a7a7}
.cf-rich img{max-width:100%;height:auto}

.cf-single-head{padding-bottom:0}
.cf-single-wrap{margin-top:22px;margin-bottom:48px}
.cf-kicker{display:inline-block;margin:0 0 8px;padding:3px 10px;background:rgba(0,167,167,.12);
           color:#0b6b62;font-size:12px;font-weight:700;border-radius:999px;text-decoration:none}
.cf-single-title{font-size:34px!important;margin:8px 0 12px!important}
.cf-single-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 22px;
                padding:0 0 16px;border-bottom:1px solid rgba(0,0,0,.08);font-size:13px;color:rgba(0,0,0,.6)}
.cf-single-author{color:#00a7a7;font-weight:700;text-decoration:none}

.cf-single-wrap .pp-promos{background:rgba(0,167,167,.05);border-color:rgba(0,167,167,.20);margin-bottom:22px}

.cf-comments{margin:34px 0 0;max-width:860px}
.cf-comments-title{font-size:22px;color:#111;margin:0 0 16px}
.cf-comments-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cf-comment{background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px 16px}
.cf-comment-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cf-comment-author{font-weight:800;color:#111}
.cf-comment-date{font-size:12px;color:rgba(0,0,0,.45)}
.cf-comment-text{margin:8px 0 0;font-size:15px;line-height:1.6;color:#333}

.section .pp-promos{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.10)}
.fec-footer__brand{text-decoration:none;color:inherit}
.fec-footer__title{font-weight:800}