/* BoostBot theme styles. Design tokens and components from approved demos. */
/* ==========================================================================
   Color tokens. Light is the default (:root). The dark set applies to the
   whole page under html[data-theme="dark"] (user toggle / saved choice) and
   to any element carrying .bb-dark, so a section can stay dark inside the
   light theme. The CTA band, featured plan and site footer do that on purpose.
   Every color in the component CSS below comes from these tokens.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg0: #f6f7fa;
  --bg1: #eef1f6;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --panel-2: #f1f4f8;
  --sunk: #eef1f6;

  /* Borders and translucent fills (ink-tinted on light) */
  --line: rgba(16, 24, 40, .10);
  --line-2: rgba(16, 24, 40, .18);
  --fill-1: rgba(16, 24, 40, .035);
  --fill-2: rgba(16, 24, 40, .06);
  --fill-3: rgba(16, 24, 40, .11);

  /* Text */
  --fg: #111827;
  --muted: #5b6573;
  --lede: #2b3442;
  --body: #2f3846;
  --body-2: #414b59;

  /* Accent (logo blue #0d5577). Dark enough for AA text on white. */
  --gold: #12668f;
  --gold-2: #1f7ca8;
  --gold-deep: #0d5577;
  --gold-ink: #ffffff;
  --gold-border: #0f5f85;
  --gold-glow: rgba(18, 102, 143, .16);
  --gold-glow-strong: rgba(18, 102, 143, .24);

  /* Status */
  --ok: #17702f;
  --ok-ink: #ffffff;
  --warn: #9a5b00;
  --err: #c62828;
  --err-soft: #d94a4a;
  --kind-codes: #0e7490;
  --kind-strategy: #8a6d1d;
  --code-fg: #0d5577;

  /* Shadows, veils, text shadows */
  --shadow-ink: rgba(16, 24, 40, .10);
  --shadow-ink-strong: rgba(16, 24, 40, .16);
  --veil-rgb: 246, 247, 250;
  --text-shadow: none;
  --text-shadow-soft: none;
  --hero-bg:
    radial-gradient(720px 480px at 88% 18%, var(--gold-glow), transparent 58%),
    radial-gradient(640px 420px at 12% 8%, var(--gold-glow), transparent 62%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 92%);

  --r: 16px;
  --display: "Archivo Black", "Archivo Black Fallback", sans-serif;
  --sans: "Archivo", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-theme="dark"],
.bb-dark,
.band,
.plan.featured,
.site-footer {
  color-scheme: dark;

  --bg0: #08090c;
  --bg1: #0d0f15;
  --panel: rgba(21, 24, 32, .82);
  --panel-solid: #141721;
  --panel-2: #1a1e2a;
  --sunk: #0c0e14;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --fill-1: rgba(255, 255, 255, .03);
  --fill-2: rgba(255, 255, 255, .06);
  --fill-3: rgba(255, 255, 255, .14);

  --fg: #f5f3ec;
  --muted: #a8a396;
  --lede: #d4cfc2;
  --body: #d6d1c4;
  --body-2: #c3beb0;

  --gold: #2a88b5;
  --gold-2: #3d9cc7;
  --gold-deep: #0d5577;
  --gold-ink: #f4f8fb;
  --gold-border: #4aa3c9;
  --gold-glow: rgba(42, 136, 181, .2);
  --gold-glow-strong: rgba(42, 136, 181, .3);

  --ok: #7dd47a;
  --ok-ink: #0b1a0b;
  --warn: #e0a44f;
  --err: #ff4d4d;
  --err-soft: #ff8a8a;
  --kind-codes: #9ad0ea;
  --kind-strategy: #d6c48a;
  --code-fg: #3d9cc7;

  --shadow-ink: rgba(0, 0, 0, .4);
  --shadow-ink-strong: rgba(0, 0, 0, .55);
  --veil-rgb: 8, 9, 12;
  --text-shadow: 0 2px 20px rgba(8, 9, 12, .85), 0 1px 4px rgba(8, 9, 12, .7);
  --text-shadow-soft: 0 1px 12px rgba(8, 9, 12, .6);
  --hero-bg:
    radial-gradient(720px 480px at 88% 18%, rgba(13, 85, 119, 0.14), transparent 58%),
    radial-gradient(640px 420px at 12% 8%, rgba(13, 85, 119, 0.18), transparent 62%),
    linear-gradient(180deg, var(--sunk) 0%, var(--bg0) 92%);
}
html, body { margin: 0; padding: 0; background: var(--bg0); }
body {
  background: var(--bg0); color: var(--fg); font-family: var(--sans);
  font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
img[src^="chrome-extension://"],
img[src^="moz-extension://"],
img[src^="safari-web-extension://"] {
  max-width: none;
  width: auto;
  height: auto;
  display: inline;
}
button, input, select, textarea { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.wrap { width: min(1160px, calc(100% - 44px)); margin: 0 auto; }

/* ---------- nav ---------- */
.nav-shell {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(var(--veil-rgb),.94), rgba(var(--veil-rgb),.82));
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
nav.top { display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 1.1875rem; letter-spacing: -.01em; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links > a, .nav-links > li > a {
  position: relative; min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 0.9062rem;
  transition: color .2s ease;
}
.nav-links > a::after, .nav-links > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links > a:hover, .nav-links > li > a:hover { color: var(--fg); background: var(--fill-2); }
.nav-links > a:hover::after, .nav-links > li > a:hover::after { transform: scaleX(1); }
.nav-spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn, .ghost {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 22px; border-radius: 11px; font-weight: 700; font-size: 0.9375rem;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn, a.btn, button.btn {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep));
  color: var(--gold-ink) !important; border: 1px solid var(--gold-border); text-shadow: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(13,85,119,.22);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 36px rgba(13,85,119,.3); }
.ghost, a.ghost {
  border: 1px solid var(--line-2); background: var(--fill-1); color: var(--fg) !important;
}
.ghost:hover { background: var(--fill-2); transform: translateY(-1px); }
.btn:focus-visible, .ghost:focus-visible, .nav-links a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ---------- hero ---------- */
.hero-shell { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: -50px 0; z-index: 0;
  background: url("https://boostbot.org/wp-content/uploads/2024/02/BoostBot-Mobile-Game-Bots-Background.webp") center 22% / cover no-repeat;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(640px 520px at 12% 66%, rgba(13,85,119,.08), transparent 62%),
    linear-gradient(180deg, rgba(var(--veil-rgb),.68) 0%, rgba(var(--veil-rgb),.62) 55%, var(--bg0) 97%),
    linear-gradient(90deg, rgba(var(--veil-rgb),.4) 0%, rgba(var(--veil-rgb),.7) 34%, rgba(var(--veil-rgb),.86) 58%, rgba(var(--veil-rgb),.75) 100%);
}
.hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(300px, .98fr);
  gap: 44px; align-items: center; padding: 64px 0 72px; min-height: 560px;
}
.eyebrow {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700; color: var(--gold); letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}
h1 {
  font-family: var(--display); font-weight: 400; color: var(--fg);
  font-size: clamp(2.625rem, 5.6vw, 4.25rem); line-height: 1.02;
  letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance;
  text-shadow: var(--text-shadow);
}
/* One-colour headlines sitewide (2026-09-22): the two-tone split read as a template. */
h1 em { font-style: normal; color: inherit; }
.lede { color: var(--body); font-size: 1.125rem; max-width: 42ch; margin: 0 0 30px; text-wrap: pretty; text-shadow: var(--text-shadow-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.trust { color: var(--muted); font-size: 0.8438rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Trust badge: icon + claim, no pill. Containers set colour/size; this only handles the pairing. */
.tbadge { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; white-space: nowrap; }
.tbadge .tchip-ic { flex-shrink: 0; color: var(--gold); }
a.tbadge > span { text-decoration: underline; text-decoration-color: rgba(252, 211, 77, .35); text-underline-offset: 3px; }
a.tbadge:hover > span { color: var(--gold); text-decoration-color: var(--gold); }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 16px; }
.cta .trust-badges, .bb-cta .trust-badges { justify-content: center; }
.tchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(var(--veil-rgb),.55); backdrop-filter: blur(8px);
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; color: var(--body); white-space: nowrap;
}
/* Each chip carries a glyph for its claim (boostbot_chip_icon), not a status dot. */
.tchip-ic { flex-shrink: 0; color: var(--gold); }

/* Animated loop ring (inline SVG from boostbot_loop_svg()). One orbit = one bot cycle. */
.bb-loop { display: inline-block; flex-shrink: 0; color: inherit; }
.bb-loop circle { fill: none; stroke: currentColor; stroke-width: 1.7; }
.bb-loop-track { opacity: .22; }
.bb-loop-arc {
  stroke-linecap: round; stroke-dasharray: 26 38;
  transform-origin: 50% 50%; transform-box: fill-box; transform: rotate(-90deg);
}
@media (prefers-reduced-motion: no-preference) {
  .bb-loop-arc { animation: bb-loop-spin 6s linear infinite; }
}
@keyframes bb-loop-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

/* hero mosaic */
.mosaic {
  position: relative; display: flex; gap: 16px; justify-content: center;
  height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.mo-col { display: flex; flex-direction: column; gap: 16px; animation: drift 44s linear infinite; }
.mo-col:nth-child(2) { animation-duration: 56s; animation-direction: reverse; }
.mo-col:nth-child(3) { animation-duration: 50s; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.mo-col img {
  width: 108px; height: 108px; border-radius: 24px; object-fit: cover;
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px var(--shadow-ink-strong), 0 1px 0 rgba(255,255,255,.18) inset;
}
.mo-col:nth-child(2) img { width: 122px; height: 122px; }

/* ---------- marquee ---------- */
.marquee-wrap {
  border-block: 1px solid var(--line); background: var(--bg1);
  overflow: hidden; padding: 14px 0; display: grid; gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee { display: flex; gap: 10px; width: max-content; min-height: 44px; animation: tape 80s linear infinite; }
.marquee.rev { animation-duration: 96s; animation-direction: reverse; }
.marquee-wrap:hover .marquee,
.marquee-wrap:focus-within .marquee { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 6px 14px 6px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--fill-1); font-size: 0.8125rem; color: var(--body); font-weight: 500;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.mq img { width: 28px; height: 28px; border-radius: 8px; }
.game img { width: 46px; height: 46px; }
.mq:hover { border-color: var(--gold); color: var(--fg); background: rgba(13,85,119,.07); transform: translateY(-2px); }

/* ---------- sections ---------- */
section { padding: 88px 0; content-visibility: auto; contain-intrinsic-size: auto 700px; }
main > section:first-of-type { content-visibility: visible; }
section.alt { background: var(--bg1); border-block: 1px solid var(--line); }
.kicker {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700; color: var(--gold); letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.band .kicker { justify-content: center; }
.band .kicker::after { content: ""; width: 22px; height: 1px; background: linear-gradient(270deg, var(--gold), transparent); flex-shrink: 0; }
h2 {
  font-family: var(--display); font-weight: 400; color: var(--fg); font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  letter-spacing: -.01em; line-height: 1.08; margin: 0 0 12px; text-wrap: balance;
}
.sub { color: var(--muted); margin: 0 0 40px; max-width: 56ch; font-size: 1.0312rem; }

/* ---------- plans ---------- */
.seg-wrap { display: flex; justify-content: flex-start; margin-bottom: 34px; }
.seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 13px; background: var(--panel-solid);
}
.seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 10px; background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px rgba(13,85,119,.3);
  transform: translateX(0);
  transition: transform .38s cubic-bezier(.34,1.4,.4,1);
  pointer-events: none;
}
.seg:has(button[data-plan="server"][aria-pressed="true"]) .seg-pill,
.seg:has(button[data-plan="server"][aria-selected="true"]) .seg-pill { transform: translateX(100%); }
.seg:has(button[data-plan="ffm"][aria-pressed="true"]) .seg-pill,
.seg:has(button[data-plan="ffm"][aria-selected="true"]) .seg-pill { transform: translateX(200%); }
.seg button {
  position: relative; z-index: 1; min-height: 42px; padding: 0 18px; border: 0; background: none;
  border-radius: 10px; font-weight: 600; font-size: 0.875rem; color: var(--muted); cursor: pointer;
  transition: color .25s ease; white-space: nowrap;
}
.seg button[aria-pressed="true"],
.seg button[aria-selected="true"] { color: var(--gold-ink) !important; }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; perspective: 1400px; }
/* One or two plans (service-only games): centre them at card width, no empty column. */
@media (min-width: 961px) {
  .plans:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fit, minmax(0, 360px)); justify-content: center; }
}
.plan {
  position: relative; background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px var(--shadow-ink);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), border-color .3s ease, box-shadow .3s ease, opacity .5s ease;
}
.plan.tilting { transition: border-color .3s ease, box-shadow .3s ease; }
.plan .glare {
  content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  z-index: 1;
  background: radial-gradient(420px 320px at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.09), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.plan:hover .glare { opacity: 1; }
.plan.featured {
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    linear-gradient(160deg, rgba(13,85,119,.85), rgba(13,85,119,.12) 55%, rgba(13,85,119,.4)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 70px var(--shadow-ink-strong), 0 0 60px rgba(13,85,119,.08);
}
.plan.spot {
  border-color: rgba(13,85,119,.8);
  box-shadow: 0 34px 80px var(--shadow-ink-strong), 0 0 0 4px rgba(13,85,119,.14), 0 0 70px rgba(13,85,119,.16);
  transform: translateY(-6px) scale(1.015);
}
.plan.dim { opacity: .55; }
.ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) translateZ(1px);
  z-index: 2;
  padding: 5px 16px; border-radius: 999px; font-family: var(--sans); font-size: 0.6562rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 6px 18px rgba(13,85,119,.35); overflow: hidden; white-space: nowrap;
}
.ribbon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform: translateX(-120%);
}
/* One pass when the plans reveal, then rest. A forever-looping sheen reads as decoration. */
.reveal.shown .ribbon::after { animation: sheen 1.6s ease-in-out .5s 1 both; }
@keyframes sheen { 0%, 30% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.plan .who { font-family: var(--sans); font-size: 0.6875rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.plan h3 { margin: 0; font-size: 1.5rem; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; color: var(--fg); }
.bb-plan-amt {
  font-family: var(--display); font-size: 2.5rem; letter-spacing: -.01em; margin-top: 2px; color: var(--fg);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.bb-plan-amt .amt { white-space: nowrap; color: var(--gold); }
.bb-plan-amt small { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.price { font-family: var(--display); font-size: 2.5rem; letter-spacing: -.01em; margin-top: 2px; color: var(--fg); display: flex; align-items: baseline; gap: 8px; }
.price .digits { white-space: nowrap; display: inline; flex: none; }
.price small { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 20px; color: var(--body-2); font-size: 0.9062rem; }
.plan li { padding: 9px 0 9px 26px; border-top: 1px solid var(--line); position: relative; }
@keyframes rise { to { opacity: 1; transform: none; } }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(13,85,119,.14);
  box-shadow: 0 0 0 1px rgba(13,85,119,.4) inset;
}
.plan li::after {
  content: ""; position: absolute; left: 6.5px; top: 17.5px; width: 5px; height: 3px;
  border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg);
}
.plan .btn, .plan .ghost { width: 100%; margin-top: auto; }
.assure {
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; margin-top: 30px;
  color: var(--muted); font-size: 0.8125rem; font-family: var(--sans);
}

/* ---------- games ---------- */
.catalog-h { display: flex; justify-content: space-between; gap: 16px; align-items: end; flex-wrap: wrap; }
label.search {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel-solid);
  min-width: min(320px, 100%); margin-bottom: 40px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
label.search:focus-within { border-color: rgba(13,85,119,.6); box-shadow: 0 0 0 3px rgba(13,85,119,.12); }
.count-pill {
  display: inline-flex; align-items: center; vertical-align: 6px; margin-left: 12px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid rgba(13,85,119,.4); background: rgba(13,85,119,.08);
  color: var(--gold); font-family: var(--sans); font-size: 0.8125rem; letter-spacing: .05em;
}
.games .empty {
  grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: 13px; font-family: var(--sans); font-size: 0.8125rem;
}
label.search span { font-family: var(--sans); color: var(--muted); font-size: 0.8125rem; }
label.search input { border: 0; background: transparent; width: 100%; }
label.search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.game {
  display: flex; align-items: center; gap: 13px;
  min-height: 64px; padding: 9px 14px 9px 9px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel-solid);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.game:hover {
  border-color: rgba(13,85,119,.55); background: var(--panel-2);
  transform: translateY(-2px); box-shadow: 0 14px 34px var(--shadow-ink);
}
.game img { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; border: 1px solid var(--line-2); }
.game strong { font-weight: 600; font-size: 0.9062rem; min-width: 0; line-height: 1.25; }
.game .go { margin-left: auto; font-family: var(--sans); font-size: 0.9375rem; color: var(--muted); flex-shrink: 0; transition: color .18s, transform .18s; }
.game:hover .go { color: var(--gold); transform: translateX(3px); }

/* ---------- about / device ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.cap {
  padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-solid);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.cap:hover { border-color: rgba(13,85,119,.45); transform: translateY(-3px); background: var(--panel-2); }
.cap b { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.75rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.cap b svg { width: 15px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cap p { margin: 0; color: var(--muted); font-size: 0.8438rem; line-height: 1.5; }
.device-shot { position: relative; }
.device-shot img { width: 100%; height: auto; object-fit: contain; border-radius: var(--r); }
.device-shot::before {
  content: ""; position: absolute; inset: -8% -6% auto; height: 116%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(13,85,119,.15), transparent 70%);
  pointer-events: none;
}
.device-shot::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, var(--shadow-ink-strong), transparent 75%);
  filter: blur(6px); pointer-events: none;
}

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.quote {
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; margin: 0; display: flex; flex-direction: column; gap: 16px; position: relative;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quote:hover { border-color: rgba(13,85,119,.4); transform: translateY(-4px); box-shadow: 0 22px 50px var(--shadow-ink-strong); }
.quote::before {
  content: "\201C"; font-family: var(--display); font-size: 4rem; line-height: 1;
  color: rgba(13,85,119,.35); position: absolute; top: 14px; right: 20px;
}
.quote p { margin: 0; color: var(--body); font-size: 0.9062rem; line-height: 1.65; }
.stars { display: flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; fill: var(--gold); filter: drop-shadow(0 0 6px rgba(13,85,119,.35)); }
.who-row { display: flex; gap: 12px; align-items: center; margin-top: auto; }
/* WP/Kadence global figure/figcaption styles outrank bare classes on the live page; pin these hard */
figure.quote { margin: 0; display: flex; flex-direction: column; }
.quote figcaption.who-row { margin: 0; margin-top: auto !important; }
.avatar {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(13,85,119,.25), rgba(13,85,119,.06));
  border: 1px solid rgba(13,85,119,.4);
  display: grid; place-items: center; font-family: var(--sans); font-size: 0.75rem; color: var(--gold);
}
.who-row b { display: block; font-size: 0.9062rem; }
.who-row small { color: var(--muted); font-size: 0.7812rem; }
.quotes-more { margin: 18px 0 0; text-align: center; font-family: var(--sans); font-size: 0.7812rem; }
.quotes-more a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA band ---------- */
.band {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(13,85,119,.28);
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(13,85,119,.16), transparent 60%),
    linear-gradient(160deg, #0b1a24, var(--panel-solid) 55%);
  padding: 56px 48px; text-align: center;
}
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(13,85,119,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,85,119,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 90% at 50% 10%, #000, transparent 78%);
          mask-image: radial-gradient(75% 90% at 50% 10%, #000, transparent 78%);
}
.band > * { position: relative; }
.band h2 { margin-bottom: 10px; }
.band .sub { margin: 0 auto 30px; }
.stats { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin: 34px 0 6px; }
.stat b { display: block; font-family: var(--display); font-size: 2.75rem; color: var(--gold); letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: 0.8438rem; }

/* ---------- mail ---------- */
.mail {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center;
  padding: 34px 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-solid);
}
.mail h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.mail form { display: flex; gap: 10px; flex-wrap: wrap; }
.mail input[type="email"] {
  flex: 1; min-width: 190px; height: 46px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--bg0);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mail input[type="email"]:focus { border-color: rgba(13,85,119,.6); box-shadow: 0 0 0 3px rgba(13,85,119,.12); outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 34px 0 60px; color: var(--muted); font-size: 0.8438rem; background: var(--bg1); }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot .brand { font-size: 0.9375rem; }
.foot .brand img { height: 22px; width: auto; }
.foot a:hover { color: var(--fg); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: 44px 0 28px; min-height: 0; }
  .mosaic { display: none; }
  .plans, .quotes { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 30px; }
  .mail { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .band { padding: 44px 24px; }
  .stats { gap: 32px; }
  .demo-bar span:first-child { font-size: 0.6875rem; }
  .seg-wrap { justify-content: stretch; }
  .seg { display: flex; width: 100%; max-width: 100%; gap: 0; padding: 3px; }
  .seg button { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 0.7812rem; min-height: 44px; }
  .plan { padding: 24px 18px; }
  .plan .btn, .plan .ghost { padding: 0 12px; font-size: 0.875rem; }
  .price { font-size: 2.125rem; flex-wrap: wrap; }
  .cta-row .btn, .cta-row .ghost { flex: 1 1 100%; }
  .caps { grid-template-columns: 1fr; }
  .mail form { flex-direction: column; }
  .mail input[type="email"] {
    width: 100%;
    min-width: 0;
    flex: none;
    height: 52px;
    font-size: 1rem;
  }
  .mail .btn { width: 100%; }
  .count-pill { font-size: 0.6875rem; padding: 3px 9px; margin-left: 9px; vertical-align: 4px; }
  .trust-row { gap: 6px; }
  .tchip { font-size: 0.75rem; padding: 7px 11px; }
  #back-top { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .ghost, .game { transition: none; }
  .ribbon::after { animation: none; }
  .mo-col { animation-duration: 120s; } /* owner wants the icon wall moving; slower, as on the original site */
  .marquee { animation: none; }
  .hero-bg { animation: none; }
  .device-shot { animation: none; }
  h1 em { animation: none; }
}
/* sub-page additions */
.price .amt { white-space: nowrap; flex: none; }
.page-hero { position: relative; padding: 64px 0 48px; }
.page-hero.tight { padding: 56px 0 32px; }
.h1-like {
  font-family: var(--display); font-weight: 400; color: var(--fg);
  font-size: clamp(2.625rem, 5.6vw, 4.25rem); line-height: 1.02;
  letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance;
  text-shadow: var(--text-shadow);
}
body.woocommerce-cart .bb-ck-bar h1,
body.woocommerce-account .bb-acct-bar h1 {
  font-family: var(--display); font-weight: 400; color: var(--fg);
  font-size: clamp(2.625rem, 5.6vw, 4.25rem); line-height: 1.02;
  letter-spacing: -.015em; text-wrap: balance;
  text-shadow: var(--text-shadow);
}
.crumb { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--gold); }
.crumb a:not(.btn):not(.wp-block-button__link):not([role="button"]),
.sub a:not(.btn):not(.wp-block-button__link):not([role="button"]),
.lede a:not(.btn):not(.wp-block-button__link):not([role="button"]) {
  text-decoration: underline; text-underline-offset: 3px;
}
.updated { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin: 0 0 14px; }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pain { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-solid); }
.pain b { display: block; font-size: 0.9688rem; margin-bottom: 8px; color: var(--fg); }
.pain p { margin: 0; color: var(--muted); font-size: 0.8438rem; line-height: 1.55; }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shots img { border-radius: 11px; border: 1px solid var(--line); width: 100%; height: auto; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: step; }
.step { position: relative; padding: 24px 20px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-solid); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 2.125rem; color: rgba(13,85,119,.35); display: block; margin-bottom: 8px;
}
.step b { display: block; font-size: 1rem; margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); font-size: 0.8438rem; line-height: 1.55; }
.faq { max-width: 780px; }
.faq details {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid);
  margin-bottom: 8px; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 0.9375rem;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--gold); font-size: 1.125rem; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }
.faq details[open] { border-color: rgba(13,85,119,.35); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.posts .post {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-solid); overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.posts .post:hover { border-color: rgba(13,85,119,.45); transform: translateY(-4px); box-shadow: 0 22px 50px var(--shadow-ink-strong); }
.posts .post img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.posts .post .pbody { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.posts .post h2, .posts .post h3 { margin: 0; font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; line-height: 1.35; color: var(--fg); }
.posts .post p { margin: 0; color: var(--muted); font-size: 0.8438rem; line-height: 1.55; }
.posts .post .more { margin-top: auto; color: var(--gold); font-family: var(--sans); font-size: 0.7812rem; }
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.product {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-solid);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.product:hover { border-color: rgba(13,85,119,.45); transform: translateY(-4px); box-shadow: 0 22px 50px var(--shadow-ink-strong); }
.product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--sunk); }
.product .pbody { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product b { font-size: 0.9375rem; }
.product span { color: var(--muted); font-family: var(--sans); font-size: 0.75rem; }
.picker { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.picker label { font-family: var(--sans); font-size: 0.75rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-solid); color: var(--fg); font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pick[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep)); color: var(--gold-ink) !important; border-color: var(--gold-border); }
.picker select {
  min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-solid); color: var(--fg); font: inherit; width: 100%;
}
.qty-note { color: var(--muted); font-size: 0.8438rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.fit { max-width: 820px; }
.fit li { margin-bottom: 10px; color: var(--muted); line-height: 1.6; }
.fit li strong { color: var(--fg); }
.fit a { color: var(--gold); }
@media (max-width: 960px) {
  .pains, .steps, .posts { grid-template-columns: 1fr; }
  .shots, .products { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------- theme chrome: nav toggle, dropdown, menus ---------- */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2);
  border-radius: 10px; background: var(--fill-1); color: var(--fg); cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nav-toggle[aria-expanded="true"] { border-color: rgba(13,85,119,.5); background: rgba(13,85,119,.1); color: var(--gold); }
.nav-cta { flex-shrink: 0; }
.sub-toggle { display: none; }
.nav-user { display: flex; align-items: center; gap: 6px; flex-shrink: 0; position: relative; }
.nav-cart, .nav-login, .nav-account-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--fill-1); color: var(--fg); text-decoration: none; cursor: pointer; font: inherit;
}
.nav-cart svg, .nav-login svg, .nav-account-toggle svg {
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-cart:hover, .nav-login:hover, .nav-account-toggle:hover,
.nav-account.is-open .nav-account-toggle {
  border-color: rgba(13,85,119,.5); background: rgba(13,85,119,.1); color: var(--gold);
}
.nav-cart-count {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-family: var(--sans);
  font-size: 0.625rem; font-weight: 700; line-height: 16px; text-align: center;
}
.nav-account { position: relative; }
.nav-account-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; margin: 0; padding: 8px;
  list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid);
  box-shadow: 0 18px 40px var(--shadow-ink-strong); z-index: 40;
}
.nav-account:hover .nav-account-menu,
.nav-account:focus-within .nav-account-menu,
.nav-account.is-open .nav-account-menu { display: grid; gap: 2px; }
.nav-account-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 0.875rem; font-weight: 600;
}
.nav-account-menu a:hover { color: var(--fg); background: var(--fill-2); }
.nav-account-label { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

.nav-links { list-style: none; margin: 0; padding: 0; align-items: center; }
nav.top { position: relative; }
.nav-links > li { position: relative; }
.nav-links > li > a,
.nav-links > .menu-item > a {
  position: relative; min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 0.9062rem;
  transition: color .2s ease;
}
.nav-links > li > a::after,
.nav-links > .menu-item > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links > li > a:hover,
.nav-links > li.current-menu-item > a,
.nav-links > li.current-menu-ancestor > a,
.nav-links > .menu-item > a:hover { color: var(--fg); background: var(--fill-2); }
.nav-links > li > a:hover::after,
.nav-links > li.current-menu-item > a::after,
.nav-links > .menu-item > a:hover::after { transform: scaleX(1); }
.nav-links .sub-menu {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 220px; margin: 0; padding: 8px;
  list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid);
  box-shadow: 0 22px 50px var(--shadow-ink-strong); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60;
}
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu,
.nav-links .menu-item-has-children.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-links .sub-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 0.875rem; font-weight: 500;
}
.nav-links .sub-menu a:hover { color: var(--fg); background: var(--fill-2); }
.nav-links .menu-item-has-children > a { gap: 6px; }
.nav-links .menu-item-has-children > a::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; order: 2;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  opacity: .7;
}
/* Mega panels hang off the whole header row (li is static), centred, so a
   wide panel never runs off the right edge on narrower desktops. */
.nav-links > li.mega-bots, .nav-links > li.mega-farms,
.nav-links > li:has(> .nav-mega) { position: static; }
.nav-links .sub-menu.nav-mega {
  left: 0; right: 0; margin-inline: auto;
  top: 100%;
  width: min(1000px, 100%); min-width: 0;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
  overscroll-behavior: contain;
  transform: none;
  transition: opacity .15s ease, visibility .15s;
}
/* Bridge the gap between the menu item and the panel so hover survives the trip. */
.nav-links .sub-menu.nav-mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
.nav-mega-top {
  position: sticky; top: -14px; z-index: 1; margin: -14px -16px 0; padding: 14px 16px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  background: var(--panel-solid); border-bottom: 1px solid var(--line);
}
.nav-mega-find { flex: 1 1 280px; }
.nav-mega-q {
  width: 100%; min-height: 40px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--bg0); color: var(--fg); font: inherit;
}
.nav-mega-q:focus { border-color: rgba(13,85,119,.6); box-shadow: 0 0 0 3px rgba(13,85,119,.12); outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-mega-h {
  margin: 0; font-family: var(--sans); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.nav-mega-s { margin: 2px 0 8px; font-size: 0.7812rem; color: var(--muted); }
.nav-mega-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links .nav-mega-grid a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 8px; color: var(--fg); font-size: 0.8438rem; font-weight: 600; line-height: 1.2;
}
.nav-links .nav-mega-grid a:hover { color: var(--fg); background: var(--fill-2); }
.nav-links .nav-mega-grid img,
.nav-links .nav-mega-grid .nav-mega-ico {
  width: 28px; height: 28px; max-width: 28px; border-radius: 7px; object-fit: cover;
  background: var(--panel-2);
}
.nav-links .nav-mega-grid .nav-mega-ico.is-ph {
  display: grid; place-items: center; border: 1px solid var(--line);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .02em; color: var(--muted);
}
.nav-mega-name { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-mega-foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 0.8438rem;
}
.nav-mega-foot a { color: var(--gold); font-weight: 600; }
.nav-mega-foot a:hover { color: var(--gold-2); }
.nav-mega-none { display: none; margin: 0; color: var(--muted); font-size: 0.8438rem; }
.nav-mega.is-miss .nav-mega-none { display: block; }
.nav-mega-sec.is-empty { display: none; }

/* ---------- site footer (4 columns) ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 28px; color: var(--muted); font-size: 0.8438rem; background: var(--bg1); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px;
}
.footer-col .brand { margin-bottom: 12px; font-size: 0.9375rem; }
.footer-col .brand img { height: 22px; width: auto; }
.footer-blurb { margin: 0 0 16px; max-width: 36ch; line-height: 1.6; }
.footer-col h2 {
  margin: 0 0 14px; font-family: var(--sans); font-size: 0.7188rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a:hover { color: var(--fg); }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--fill-1); color: var(--muted);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-social a:hover { border-color: rgba(13,85,119,.45); color: var(--gold); background: rgba(13,85,119,.08); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
  padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.7812rem;
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a:hover { color: var(--fg); }
footer .foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
footer .foot .brand img { height: 22px; width: auto; }
footer .foot a:hover { color: var(--fg); }

/* ---------- back to top ---------- */
#back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(13,85,119,.5); background: var(--panel); backdrop-filter: blur(8px);
  color: var(--gold); cursor: pointer; display: grid; place-items: center; opacity: 0;
  transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
#back-top.show { opacity: 1; transform: none; pointer-events: auto; }
#back-top:hover { background: rgba(13,85,119,.15); }

/* ---------- reading content (single / page) ---------- */
.reading { width: min(720px, calc(100% - 44px)); margin: 0 auto; }
.entry-content, .page-content, .comment-content {
  font-size: 1.0625rem; line-height: 1.7; color: var(--body);
}
.entry-content > *:first-child, .page-content > *:first-child { margin-top: 0; }
.entry-content a:not(.btn):not(.wp-block-button__link):not([role="button"]),
.page-content a:not(.btn):not(.wp-block-button__link):not([role="button"]),
.comment-content a:not(.btn):not(.wp-block-button__link):not([role="button"]) {
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.entry-content a:hover, .page-content a:hover { filter: brightness(1.08); }
.entry-content h2, .page-content h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.625rem, 3vw, 2.125rem);
  letter-spacing: -.01em; line-height: 1.15; margin: 2.2em 0 .7em; color: var(--fg);
}
.entry-content h3, .page-content h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1.375rem; margin: 1.8em 0 .55em; color: var(--fg);
}
.entry-content h4, .page-content h4 { font-size: 1.125rem; margin: 1.5em 0 .45em; color: var(--fg); }
.entry-content p, .page-content p { margin: 0 0 1.15em; }
.entry-content ul, .entry-content ol, .page-content ul, .page-content ol { margin: 0 0 1.25em; padding-left: 1.25em; }
.entry-content li, .page-content li { margin-bottom: .45em; }
.entry-content blockquote, .page-content blockquote {
  margin: 1.6em 0; padding: 16px 20px; border-left: 3px solid var(--gold);
  background: var(--panel-solid); border-radius: 0 12px 12px 0; color: var(--fg);
}
.entry-content code, .page-content code, .comment-content code {
  font-family: var(--mono); font-size: .88em; padding: .15em .4em; border-radius: 6px;
  background: var(--fill-2); border: 1px solid var(--line); color: var(--code-fg);
}
.entry-content pre, .page-content pre {
  margin: 1.4em 0; padding: 16px 18px; overflow-x: auto; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.8438rem; line-height: 1.55;
}
.entry-content pre code { padding: 0; border: 0; background: none; color: var(--body); }
.entry-content table, .page-content table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9375rem;
}
.entry-content th, .entry-content td, .page-content th, .page-content td {
  padding: 12px 14px; border: 1px solid var(--line); text-align: left;
}
.entry-content th, .page-content th { background: var(--panel-2); color: var(--fg); font-weight: 600; }
.entry-content img, .page-content img { border-radius: 12px; margin: 1.4em 0; }
.entry-meta { font-family: var(--sans); font-size: 0.7812rem; color: var(--muted); margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.entry-meta a { color: var(--gold); }
.author-box {
  display: flex; gap: 16px; align-items: flex-start; margin: 40px 0 0; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-solid);
}
.author-box img { width: 64px; height: 64px; border-radius: 999px; border: 1px solid rgba(13,85,119,.35); flex-shrink: 0; }
.author-box h3 { margin: 0 0 6px; font-size: 1rem; color: var(--fg); }
.author-box p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.related-posts { margin-top: 56px; }
.related-posts h2 { margin-bottom: 20px; }

/* ---------- comments ---------- */
.comments-area { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }
.comments-title { font-family: var(--display); font-weight: 400; font-size: 1.75rem; margin: 0 0 24px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comment-list .children { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 12px; border-left: 1px solid var(--line); }
.comment-body {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-solid);
}
.comment-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; font-size: 0.8438rem; }
.comment-author { font-weight: 700; color: var(--fg); }
.comment-metadata, .comment-metadata a { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.comment-reply-link { color: var(--gold); font-family: var(--sans); font-size: 0.7812rem; }
.comment-form label { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 0.75rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.comment-form p { margin: 0 0 14px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--bg0); color: var(--fg);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  border-color: rgba(13,85,119,.6); box-shadow: 0 0 0 3px rgba(13,85,119,.12); outline: 2px solid var(--gold); outline-offset: 2px;
}
.comment-form .form-submit { margin-top: 8px; }
.comment-form .submit {
  min-height: 46px; padding: 0 22px; border-radius: 11px; font-weight: 700; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep));
  color: var(--gold-ink) !important; border: 1px solid var(--gold-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(13,85,119,.22);
}

/* ---------- search / 404 ---------- */
.search-form, .error-search {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 24px 0 36px;
}
.search-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-form .search-field,
.error-search input[type="search"] {
  flex: 1; min-width: 200px; height: 46px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--panel-solid); color: var(--fg);
}
.search-form .search-submit,
.error-search .btn { min-height: 46px; }
.no-results, .error-404 .lede { color: var(--muted); max-width: 52ch; }

/* ---------- pagination ---------- */
.pagination, .nav-links.pagination, .woocommerce-pagination {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 36px 0 0;
}
.pagination a, .pagination span, .woocommerce-pagination a, .woocommerce-pagination span {
  min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid);
  color: var(--muted); font-family: var(--sans); font-size: 0.8125rem;
}
.pagination a:hover, .woocommerce-pagination a:hover { border-color: rgba(13,85,119,.45); color: var(--fg); }
.pagination .current, .woocommerce-pagination .current {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep));
  color: var(--gold-ink) !important; border-color: var(--gold-border); font-weight: 700;
}

/* ---------- WooCommerce archive / cards ---------- */
/* Hide third-party switcher chrome. .bb-fx is the storefront control. */
.woocommerce-currency-switcher-form,
.wcml-dropdown, .wcml-dropdown-click,
.wmc-list, .wmc-select, select.wmc-select,
.currency-switcher, [class*="currency-switcher"] {
  display: none !important;
}
.bb-fx {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
}
.bb-fx-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.bb-fx-lab {
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-fx-sel {
  display: inline-block;
  min-height: 36px;
  max-width: 11.5rem;
  padding: 6px 28px 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--bg0);
  color: var(--fg);
  appearance: auto;
}
.bb-pro-inner > .bb-fx,
.bb-buy-inner > .bb-fx,
.bb-shop-hero .bb-fx { margin: 0 0 12px; }
@media (max-width: 640px) {
  .bb-fx { margin-bottom: 12px; }
  .bb-fx-sel { max-width: 100%; }
}
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel-solid); overflow: hidden;
  display: flex; flex-direction: column; min-height: 100%;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: rgba(13,85,119,.45); transform: translateY(-4px); box-shadow: 0 22px 50px var(--shadow-ink-strong);
}
.woocommerce ul.products li.product a { color: inherit; }
.woocommerce ul.products li.product a img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: center;
  background: var(--sunk); margin: 0; padding: 18px 16px 8px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem; font-weight: 700; padding: 8px 18px 4px; color: var(--fg); margin: 0;
  font-family: var(--display); letter-spacing: -.01em; line-height: 1.2;
}
.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce ul.products li.product .price {
  font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); padding: 0 18px 12px; display: block;
  word-break: normal; overflow-wrap: normal;
}
.woocommerce ul.products li.product .price .amount { color: var(--gold); font-family: var(--display); font-size: 1.375rem; white-space: nowrap; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce input.button.alt {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 22px; border-radius: 11px; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep)) !important;
  color: var(--gold-ink) !important; border: 1px solid var(--gold-border) !important; text-shadow: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(13,85,119,.22);
}
.woocommerce ul.products li.product .button { margin: auto 16px 16px; width: calc(100% - 32px); }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover {
  filter: brightness(1.06); color: var(--gold-ink) !important;
}
.woocommerce a.added_to_cart { color: var(--gold); font-family: var(--sans); font-size: 0.7812rem; margin: 8px 16px 16px; }
.woocommerce span.onsale {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep));
  color: var(--gold-ink) !important; border-radius: 999px; font-family: var(--sans); font-size: 0.6875rem;
  font-weight: 700; letter-spacing: .06em; min-height: 28px; line-height: 28px; padding: 0 12px;
}

/* ---------- WooCommerce single product ---------- */
.woocommerce div.product {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; margin-bottom: 48px;
}
.woocommerce div.product:not(:has(.woocommerce-product-gallery img)) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.woocommerce-product-gallery:not(:has(img)) { display: none !important; }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; opacity: 1 !important; }
.woocommerce div.product .summary {
  width: 100% !important; float: none !important; margin: 0 !important;
  position: sticky; top: 88px;
  padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-solid);
  box-shadow: 0 24px 60px var(--shadow-ink);
}
.woocommerce div.product .product_title {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -.01em; line-height: 1.08; margin: 0 0 12px; color: var(--fg);
}
.woocommerce div.product p.price {
  font-family: var(--display); font-size: 2.25rem; color: var(--fg); margin: 0 0 16px;
}
.woocommerce div.product p.price .amount { color: var(--gold); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); margin-bottom: 18px; }
.woocommerce div.product form.cart { margin-bottom: 18px; }
.woocommerce div.product form.cart div.quantity { margin-right: 10px; }
.woocommerce .quantity .qty {
  width: 72px; min-height: 46px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg0); color: var(--fg);
}
.woocommerce div.product .stock { font-family: var(--sans); font-size: 0.7812rem; }
.woocommerce div.product .stock.in-stock { color: var(--ok); }
.woocommerce div.product .product_meta { font-family: var(--sans); font-size: 0.7812rem; color: var(--muted); }
.woocommerce div.product .product_meta a { color: var(--gold); }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 12px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
  border: 0; background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--panel-solid) !important;
  margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 10px 16px; font-weight: 600; color: var(--muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep)) !important;
  border-color: var(--gold-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gold-ink) !important; }
.woocommerce div.product .woocommerce-tabs .panel {
  margin: 12px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-solid); color: var(--body);
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.375rem; margin-top: 0; }

/* ---------- WooCommerce cart / checkout / account ---------- */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce {
  color: var(--fg);
}
.woocommerce table.shop_table {
  border: 1px solid var(--line) !important; border-radius: var(--r); background: var(--panel-solid);
  border-collapse: separate; overflow: hidden;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  border-color: var(--line) !important; padding: 14px 16px; color: var(--body);
}
.woocommerce table.shop_table th { background: var(--panel-2); color: var(--fg); font-weight: 600; }
.woocommerce-cart-form__contents .product-name a, .woocommerce-cart table a { color: var(--fg); }
.woocommerce-cart-form__contents .product-name a:hover { color: var(--gold); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-solid); padding: 22px;
}
.woocommerce-account .woocommerce-MyAccount-navigation { padding: 12px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 12px 14px; border-radius: 10px; color: var(--muted); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: rgba(13,85,119,.1); color: var(--gold);
}
.woocommerce form .form-row label { color: var(--muted); font-size: 0.8438rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page .select2-container .select2-selection--single {
  min-height: 46px; padding: 10px 12px; border-radius: 10px !important;
  border: 1px solid var(--line-2) !important; background: var(--bg0) !important; color: var(--fg) !important;
  box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: rgba(13,85,119,.6) !important; box-shadow: 0 0 0 3px rgba(13,85,119,.12) !important; outline: 2px solid var(--gold); outline-offset: 2px;
}
.select2-dropdown {
  background: var(--panel-solid) !important; border: 1px solid var(--line-2) !important; color: var(--fg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered[title],
.select2-container--default .select2-selection--single .select2-selection__placeholder,
body.woocommerce-checkout .select2-selection__rendered {
  color: var(--fg) !important;
}
.select2-results__option { color: var(--fg) !important; }
.select2-results__option--highlighted { background: rgba(13,85,119,.15) !important; color: var(--fg) !important; }
body.woocommerce-checkout .woocommerce-invalid label,
body.woocommerce-checkout .form-row.woocommerce-invalid label {
  color: var(--err-soft) !important;
}
.woocommerce-checkout #payment {
  background: var(--panel-solid) !important; border: 1px solid var(--line); border-radius: var(--r);
}
.woocommerce-checkout #payment div.payment_box { background: var(--bg0) !important; color: var(--muted) !important; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg0) !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--line) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0 !important; border-radius: 12px; background: var(--panel-solid) !important;
  color: var(--fg) !important; border: 1px solid var(--line) !important;
}
.woocommerce-message { border-color: rgba(125,212,122,.45) !important; }
.woocommerce-error, .woocommerce-NoticeGroup-checkout .woocommerce-error {
  border-color: var(--err) !important;
  background: rgba(255,77,77,.12) !important;
  color: var(--err-soft) !important;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before { content: none !important; }
.woocommerce-message a, .woocommerce-info a { color: var(--gold) !important; }
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  border: 1px solid var(--line) !important; border-radius: var(--r); background: var(--panel-solid); padding: 22px;
}

.bb-ck-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.bb-ck-steps li {
  flex: 1; text-align: center; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid);
}
.bb-ck-steps li.is-on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); font-weight: 700; }
.bb-ck-trust {
  margin: 12px 0 0; color: var(--muted); font-size: 0.8125rem; text-align: center; gap: 6px 16px;
}
.woocommerce .woocommerce-ordering select {
  min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-solid); color: var(--fg);
}
.woocommerce .woocommerce-result-count { color: var(--muted); font-family: var(--sans); font-size: 0.8125rem; }

/* ---------- core blocks ---------- */
.wp-block-group { margin: 0; }
.wp-block-columns { gap: 24px; }
.wp-block-heading { color: var(--fg); }
.wp-block-list { color: var(--body); }
.wp-block-quote {
  margin: 1.6em 0; padding: 16px 20px; border-left: 3px solid var(--gold);
  background: var(--panel-solid); border-radius: 0 12px 12px 0; color: var(--fg);
}
.wp-block-quote cite { color: var(--muted); font-family: var(--sans); font-size: 0.7812rem; font-style: normal; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--line); padding: 12px 14px; }
.wp-block-table th { background: var(--panel-2); color: var(--fg); }
.wp-block-image img { border-radius: 12px; }
.wp-block-code, .wp-block-preformatted {
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; color: var(--body);
}
.wp-block-buttons { gap: 12px; }
.wp-block-button__link {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px; border-radius: 11px; font-weight: 700; font-size: 0.9375rem;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep)) !important;
  color: var(--gold-ink) !important; border: 1px solid var(--gold-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(13,85,119,.22);
}
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--fill-1) !important; color: var(--fg) !important; border: 1px solid var(--line-2);
  box-shadow: none;
}
.wp-block-separator { border-color: var(--line); }
.wp-block-pullquote { border-color: rgba(13,85,119,.35); color: var(--fg); }
.alignwide { width: min(1160px, calc(100% - 44px)); margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }

/* ---------- Kadence compatibility ---------- */
[class*="wp-block-kadence-"] {
  font-family: inherit; color: inherit; max-width: 100%;
}
.wp-block-kadence-rowlayout, .wp-block-kadence-column, .kb-row-layout-wrap {
  box-sizing: border-box;
}
.wp-block-kadence-advancedheading h1,
.wp-block-kadence-advancedheading h2,
.wp-block-kadence-advancedheading h3,
.wp-block-kadence-advancedheading h4 {
  font-family: var(--display); font-weight: 400; color: var(--fg); letter-spacing: -.01em;
}
.wp-block-kadence-advancedbtn .kt-button,
.wp-block-kadence-singlebtn .kb-button {
  border-radius: 11px;
}
.kb-table-container table { border-color: var(--line); }
.wp-block-kadence-iconlist ul { padding-left: 0; }

/* ---------- screen reader / a11y ---------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0; overflow: visible;
  padding: 10px 14px; position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--panel-solid); color: var(--fg);
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.admin-bar .nav-shell { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .nav-shell { top: 46px; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  nav.top {
    position: relative;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 0;
    overflow-x: clip;
  }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand img { height: auto; max-height: 26px; max-width: 100%; }
  .nav-spacer { flex: 1 1 auto; min-width: 8px; }
  .nav-cta.btn,
  a.btn.nav-cta {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.7812rem;
    border-radius: 9px;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--gold-ink) !important;
  }
  .nav-account-label { display: none; }
  .nav-cart, .nav-login, .nav-account-toggle { min-width: 36px; height: 36px; padding: 0; }
  .nav-toggle { width: 40px; height: 40px; flex-shrink: 0; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    background: rgba(var(--veil-rgb),.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
  }
  .nav-links.is-open { display: flex; max-height: calc(100dvh - 64px); overflow: auto; }
  .nav-links > li > a, .nav-links > .menu-item > a { width: 100%; }
  .nav-links > .menu-item-has-children {
    display: flex; flex-wrap: wrap; align-items: center;
  }
  .nav-links > .menu-item-has-children > a { flex: 1 1 auto; width: auto; min-width: 0; }
  .nav-links > .menu-item-has-children > .sub-menu { flex: 1 1 100%; }
  .nav-links .menu-item-has-children > a::before { content: none; }
  .sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; margin-left: 2px;
    border: 0; border-radius: 9px; background: transparent; color: var(--muted);
    cursor: pointer; padding: 0;
  }
  .sub-toggle[aria-expanded="true"] { color: var(--fg); }
  .nav-links .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    display: none !important; margin: 4px 0 8px; background: var(--fill-1);
  }
  .nav-links .sub-menu.nav-mega {
    display: none !important;
    width: auto; min-width: 0; max-height: none; margin-inline: 0; padding: 8px 4px; border: 0; box-shadow: none;
  }
  .nav-links .sub-menu.nav-mega::before { content: none; }
  .nav-mega-top { position: static; margin: 0; padding: 0 0 10px; background: none; }
  .nav-links .menu-item-has-children.is-open > .sub-menu,
  .nav-links .menu-item-has-children.is-open > .sub-menu.nav-mega { display: grid !important; }
  .nav-mega-grid { grid-template-columns: 1fr; }
  .nav-links .mega-farms > .nav-mega { left: 0; right: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product .summary { position: static; }
  #back-top { right: 14px; bottom: 14px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .nav-cta.btn,
  a.btn.nav-cta { display: none; }
}

.bb-dl-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 80; width: min(420px, calc(100% - 32px));
  padding: 12px 16px; border-radius: 12px; text-align: center;
  background: var(--panel-solid); border: 1px solid var(--line); color: var(--fg);
  font-size: 0.875rem; box-shadow: 0 18px 40px var(--shadow-ink-strong);
}
.plans.plans-4, .plans[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .plans.plans-4, .plans[data-cols="4"] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links .sub-menu,
  .post, .product, .quote, .cap, .game, .plan,
  #back-top, .footer-social a {
    transition-duration: .01ms;
  }
  .woocommerce ul.products li.product { transition-duration: .01ms; }
}

/* Blog / post blocks: Kadence leftovers, gift-code chrome, Google preferred source. */
.entry-content .wp-block-kadence-rowlayout,
.entry-content .kb-row-layout-wrap,
.entry-content .kt-row-layout-inner,
.entry-content .kt-row-column-wrap {
  background-image: none !important;
  background-color: transparent !important;
  max-width: 100%;
}
.entry-content .kt-row-column-wrap,
.entry-content .wp-block-kadence-rowlayout > .kt-row-column-wrap {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.entry-content .wp-block-kadence-column,
.entry-content .kt-inside-inner-col {
  background: transparent !important;
  color: inherit;
  max-width: 100%;
}
.entry-content .wp-block-kadence-column > .kt-inside-inner-col {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.entry-content .wp-block-kadence-advancedheading,
.entry-content .wp-block-kadence-advancedheading h1,
.entry-content .wp-block-kadence-advancedheading h2,
.entry-content .wp-block-kadence-advancedheading h3,
.entry-content .wp-block-kadence-advancedheading h4,
.entry-content .wp-block-kadence-advancedheading h5,
.entry-content [class*="has-theme-palette-"][class*="-color"] {
  color: var(--fg) !important;
  font-family: inherit;
}
.entry-content .wp-block-kadence-advancedheading h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  letter-spacing: -.01em;
}
.entry-content .kb-svg-icon-wrap,
.entry-content .kt-svg-icon-wrap,
.entry-content .wp-block-kadence-icon,
.entry-content .wp-block-kadence-single-icon svg,
.entry-content .wp-block-kadence-icon svg {
  color: var(--gold) !important;
  fill: currentColor;
}
.entry-content .wp-block-kadence-iconlist ul,
.entry-content .kt-svg-icon-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.25em;
}
.entry-content .wp-block-kadence-iconlist li,
.entry-content .kt-svg-icon-list-item-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 .55em;
  color: var(--body);
}

.entry-content .kb-button,
.entry-content .kt-button,
.entry-content .wp-block-kadence-singlebtn .kb-button,
.entry-content .wp-block-kadence-advancedbtn a.kb-button,
.entry-content .wp-block-kadence-advancedbtn a.kt-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep)) !important;
  color: var(--gold-ink) !important;
  border: 1px solid var(--gold-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(13,85,119,.22) !important;
}
.entry-content .kb-button:hover,
.entry-content .kt-button:hover {
  filter: brightness(1.06);
}

.entry-content form.kb-form {
  display: grid;
  gap: 14px;
  margin: 8px 0 0;
}
.entry-content form.kb-form .kadence-blocks-form-field {
  display: grid;
  gap: 6px;
}
.entry-content form.kb-form label {
  font-size: 0.8125rem;
  color: var(--muted);
}
.entry-content form.kb-form input.kb-field,
.entry-content form.kb-form input[type="text"],
.entry-content form.kb-form input[type="email"],
.entry-content form.kb-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line) !important;
  background: var(--fill-1) !important;
  color: var(--fg) !important;
  box-shadow: none !important;
}
.entry-content form.kb-form .kadence-blocks-field.verify {
  display: none !important;
}
.entry-content form.kb-form .kb-forms-submit,
.entry-content form.kb-form button[type="submit"] {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--gold-border);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 42%, var(--gold-deep));
  color: var(--gold-ink) !important;
}

.entry-content .wp-block-kadence-tableofcontents,
.entry-content .kb-table-of-content-wrap,
.entry-content .kb-table-of-contents {
  margin: 1.6em 0 2em;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-solid);
}
.entry-content .kb-table-of-contents-title,
.entry-content .wp-block-kadence-tableofcontents h2,
.entry-content .wp-block-kadence-tableofcontents .kb-table-of-contents-title {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.entry-content .wp-block-kadence-tableofcontents ul,
.entry-content .kb-table-of-content-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entry-content .wp-block-kadence-tableofcontents li {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.entry-content .wp-block-kadence-tableofcontents li:last-child { border-bottom: 0; }
.entry-content .wp-block-kadence-tableofcontents a {
  text-decoration: none;
  color: var(--fg);
}
.entry-content .wp-block-kadence-tableofcontents a:hover { color: var(--gold); }

.entry-content .kb-table-container,
.entry-content .wp-block-kadence-table {
  overflow-x: auto;
  margin: 1.5em 0;
}
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content figure.wp-block-table { margin: 1.5em 0; }
.entry-content .wp-block-kadence-image img,
.entry-content .wp-block-kadence-image figure {
  border-radius: 12px;
}

.entry-content .ks-bridge,
.entry-content .wp-block-group.ks-bridge {
  background: var(--panel-solid) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 12px !important;
  padding: 4px 20px !important;
  margin: 24px 0 !important;
  color: var(--fg);
}
.entry-content .ks-bridge p { color: var(--body); }
.entry-content .ks-verified {
  background: rgba(42, 136, 181, .1) !important;
  border-left: 4px solid var(--gold) !important;
  padding: 10px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--fg);
}
.entry-content .ks-copy {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line) !important;
  background: var(--fill-2) !important;
  color: var(--fg) !important;
  font-size: 0.75rem;
  font-family: var(--mono);
  cursor: pointer;
  vertical-align: middle;
}
.entry-content .ks-copy:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.entry-content .ks-copy.ks-copied {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--gold-ink) !important;
}

.bb-preferred-source {
  max-width: 720px !important;
  margin: 18px auto !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 12px !important;
  background: var(--panel-solid) !important;
  padding: 14px 18px !important;
  color: var(--fg) !important;
}
.bb-preferred-source p {
  color: var(--body) !important;
}

.entry-content .wp-block-embed,
.entry-content .wp-block-embed__wrapper {
  margin: 1.6em 0;
  border-radius: 12px;
  overflow: hidden;
}
.entry-content iframe {
  max-width: 100%;
}

.entry-content .wp-block-kadence-column p,
.entry-content .wp-block-kadence-column li,
.entry-content .wp-block-kadence-column h2,
.entry-content .wp-block-kadence-column h3,
.entry-content .wp-block-kadence-column h4,
.entry-content .kt-inside-inner-col p,
.entry-content .kt-inside-inner-col h3 {
  color: var(--body) !important;
}
.entry-content .wp-block-kadence-column h2,
.entry-content .wp-block-kadence-column h3,
.entry-content .kt-inside-inner-col h2,
.entry-content .kt-inside-inner-col h3 {
  color: var(--fg) !important;
}
.entry-content div[style*="#f0fdfa"],
.entry-content div[style*="#EDF2F7"],
.entry-content div[style*="#edf2f7"] {
  background: var(--panel-solid) !important;
  border-color: var(--line) !important;
  color: var(--fg) !important;
}
.entry-content div[style*="#f0fdfa"] p,
.entry-content p[style*="#0f2e2a"] {
  color: var(--body) !important;
}
/* TL;DR callout ships its own <style> with !important dark colors (automation/add_tldr.py); retoken it. */
.entry-content .bb-tldr {
  background: var(--panel-solid) !important; border: 1px solid var(--line) !important;
  border-left: 4px solid var(--gold) !important; color: var(--fg) !important;
}
.entry-content .bb-tldr p { color: var(--body) !important; }
.entry-content .bb-tldr b { color: var(--gold) !important; }

@media (max-width: 640px) {
  .entry-content .kt-row-column-wrap,
  .entry-content .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    grid-template-columns: 1fr;
  }
  .entry-content table { font-size: 0.8438rem; }
}

/* ---------- appearance: toggle, light-only refinements ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 40px; height: 40px; padding: 0 9px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--fill-1);
  color: var(--fg); cursor: pointer; font: inherit;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: rgba(13,85,119,.5); background: rgba(13,85,119,.1); color: var(--gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle svg {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Light shows the moon (go dark); dark shows the sun (go light). */
.theme-toggle .theme-toggle-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }
.theme-toggle-nav .theme-toggle-track { display: none; }

/* Mobile menu row: label + switch */
.nav-links .nav-theme-item { display: none; }
.theme-toggle-row {
  width: 100%; height: 48px; justify-content: flex-start; padding: 0 12px; border-radius: 9px;
}
.theme-toggle-row .theme-toggle-label { flex: 1; text-align: left; font-weight: 600; font-size: 0.9062rem; color: var(--fg); }
.theme-toggle-track {
  position: relative; width: 40px; height: 22px; flex-shrink: 0; border-radius: 999px;
  background: var(--fill-3); border: 1px solid var(--line-2); transition: background .2s ease, border-color .2s ease;
}
.theme-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel-solid); box-shadow: 0 1px 3px var(--shadow-ink-strong); transition: transform .2s ease;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-track { background: var(--gold); border-color: var(--gold-border); }
.theme-toggle[aria-pressed="true"] .theme-toggle-knob { transform: translateX(18px); }
@media (max-width: 960px) {
  .nav-links .nav-theme-item { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
  /* Solid panel: a backdrop-filter nested inside the blurred .nav-shell makes Chromium paint the
     menu see-through over the hero (same on production). */
  .nav-links { background: var(--bg0); backdrop-filter: none; box-shadow: 0 24px 40px var(--shadow-ink); }
}
@media (max-width: 640px) {
  .theme-toggle-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle-track, .theme-toggle-knob { transition: none; }
}

/* Light theme only. Dark keeps the approved demo look untouched. */
html:not([data-theme="dark"]) .nav-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: 0 1px 0 var(--line);
}
/* Home hero photo is a dark scene: lift it with a near-opaque light veil and a brand tint. */
html:not([data-theme="dark"]) .hero-shell:not(.bb-dark) .hero-bg { filter: saturate(.85); }
html:not([data-theme="dark"]) .hero-shell:not(.bb-dark) .hero-bg::after {
  background:
    radial-gradient(720px 520px at 12% 60%, rgba(20,109,152,.14), transparent 62%),
    radial-gradient(560px 420px at 88% 10%, rgba(20,109,152,.10), transparent 60%),
    linear-gradient(180deg, rgba(246,247,250,.90) 0%, rgba(246,247,250,.86) 55%, var(--bg0) 97%),
    linear-gradient(90deg, rgba(246,247,250,.55) 0%, rgba(246,247,250,.78) 34%, rgba(246,247,250,.9) 58%, rgba(246,247,250,.86) 100%);
}
html:not([data-theme="dark"]) .mo-col img { border-color: rgba(16,24,40,.12); }
html:not([data-theme="dark"]) .plan,
html:not([data-theme="dark"]) .quote,
html:not([data-theme="dark"]) .posts .post,
html:not([data-theme="dark"]) .product,
html:not([data-theme="dark"]) .woocommerce ul.products li.product { box-shadow: 0 10px 30px rgba(16,24,40,.06); }
html:not([data-theme="dark"]) .plan.featured { box-shadow: 0 30px 70px rgba(16,24,40,.28), 0 0 60px rgba(13,85,119,.12); }
html:not([data-theme="dark"]) .tchip { background: rgba(255,255,255,.7); }
html:not([data-theme="dark"]) .marquee-wrap { background: var(--panel-solid); }
html:not([data-theme="dark"]) .mq { background: var(--bg0); }

/* ---------- home hero: finder + launcher (2026-09-22) ----------
   The launcher borrows the BoostBot app's own dark window chrome; it is the one loud
   element in an otherwise quiet hero, and it is working navigation, not decoration. */
.bb-home-hero { border-bottom: 1px solid var(--line); background: var(--bg1); overflow: visible; z-index: 3; } /* game finder list hangs below */
.bb-home-hero .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 56px; padding: 56px 0 64px; min-height: 0; align-items: start; }
.bb-home-copy h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.02; max-width: 13ch; margin-bottom: 20px; }
.bb-home-copy .lede { max-width: 50ch; margin-bottom: 26px; }
.bb-home-find { display: block; max-width: 460px; margin: 0 0 22px; }
.bb-home-find-lab { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.bb-home-find input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm, 10px);
  border: 1px solid var(--line-2); background: var(--panel-solid); color: var(--fg); font-size: 1.0625rem;
}
.bb-home-find input:focus-visible { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
.bb-home-trust { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.bb-home-trust a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.bb-launch {
  --lx-bg: #16191f; --lx-row: #1d2129; --lx-line: #2a2f38; --lx-ink: #e8ecf1; --lx-dim: #9aa3ae;
  background: var(--lx-bg); color: var(--lx-ink); border-radius: 12px; overflow: hidden;
  border: 1px solid #0b0d11; box-shadow: 0 30px 60px -28px rgba(10, 18, 30, .55), 0 2px 0 rgba(255,255,255,.04) inset;
}
.bb-launch-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #101318; border-bottom: 1px solid var(--lx-line); }
.bb-launch-title { font-family: var(--display); font-size: 0.875rem; letter-spacing: .01em; color: var(--lx-ink); }
.bb-launch-dots { display: flex; gap: 14px; }
.bb-launch-dots i { width: 10px; height: 1.5px; background: var(--lx-dim); display: block; }
.bb-launch-dots i:nth-child(2) { height: 9px; width: 9px; background: none; border: 1.5px solid var(--lx-dim); margin-top: -4px; }
.bb-launch-dots i:nth-child(3) { position: relative; background: none; }
.bb-launch-dots i:nth-child(3)::before, .bb-launch-dots i:nth-child(3)::after {
  content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 1.5px; background: var(--lx-dim);
}
.bb-launch-dots i:nth-child(3)::before { transform: rotate(45deg); }
.bb-launch-dots i:nth-child(3)::after { transform: rotate(-45deg); }
.bb-launch-head {
  display: flex; justify-content: space-between; padding: 10px 16px 6px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-dim);
}
.bb-launch-list { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 452px; overflow: auto; }
.bb-launch-list a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 8px; color: var(--lx-ink); text-decoration: none;
}
.bb-launch-list li + li a { border-top: 1px solid var(--lx-line); border-radius: 0; }
.bb-launch-list a:hover, .bb-launch-list a:focus-visible { background: var(--lx-row); border-radius: 8px; }
.bb-launch-list .bb-pro-game-ico { position: relative; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: var(--lx-row); display: block; }
.bb-launch-list .bb-pro-game-ico img { width: 36px; height: 36px; object-fit: cover; display: block; position: relative; z-index: 1; }
.bb-launch-list .bb-pro-game-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--lx-dim); }
.bb-launch-name { font-weight: 600; font-size: 0.9375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-launch-tags { display: grid; grid-template-columns: repeat(3, 52px); justify-items: center; }
.bb-launch-mark { width: 8px; height: 8px; border-radius: 50%; background: #2f3540; }
.bb-launch-mark.is-on { background: #5fb4dc; box-shadow: 0 0 0 3px rgba(95, 180, 220, .16); }
.bb-launch-head .bb-launch-tags span { font-size: 0.6875rem; }
.bb-launch-none { margin: 0; padding: 14px 16px; color: var(--lx-dim); font-size: 0.875rem; }
.bb-launch-foot {
  display: block; padding: 12px 16px; border-top: 1px solid var(--lx-line); background: #101318;
  color: var(--lx-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.bb-launch-foot:hover { color: #fff; background: #13171d; }
@media (max-width: 960px) {
  .bb-home-hero .hero { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 40px; }
  .bb-launch-list { max-height: 360px; }
}
@media (max-width: 420px) {
  .bb-launch-tags { grid-template-columns: repeat(3, 42px); }
}

/* ---------- plan rail (bot hero + post cards): a small price card ---------- */
.bb-rail {
  margin: 28px 0 0; max-width: 460px; padding: 6px 18px 14px; border-radius: 14px;
  background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 12px 32px -18px var(--shadow-ink-strong);
}
.bb-rail-h { margin: 10px 0 2px; font-size: 0.8125rem; font-weight: 700; color: var(--fg); }
.bb-rail ul { list-style: none; margin: 0; padding: 0; }
.bb-rail li + li { border-top: 1px solid var(--line); }
.bb-rail li a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 11px 0; color: var(--fg); text-decoration: none;
}
.bb-rail li a:hover .bb-rail-name, .bb-rail li a:focus-visible .bb-rail-name { color: var(--gold); }
.bb-rail-ico {
  grid-row: span 2; align-self: start; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--gold); background: rgba(18, 102, 143, .10);
}
.bb-rail-name { font-weight: 700; font-size: 0.9375rem; }
.bb-rail-amt { font-size: 0.9375rem; font-weight: 700; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bb-rail-note { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--muted); }
.bb-rail-foot { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.bb-rail-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.nav-help { font-size: 0.875rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.nav-help:hover { color: var(--fg); }

.band .cta-row { justify-content: center; }

/* Game grid on phones: two compact columns instead of one 41-row list. */
@media (max-width: 560px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .game { gap: 9px; min-height: 56px; padding: 7px 8px 7px 7px; }
  .game img { width: 38px; height: 38px; border-radius: 10px; }
  .game strong { font-size: 0.8125rem; }
  .game .go { display: none; }
}

/* Bot hero: the rail sits under the hero as one full-width card, lanes side by side,
   so long game names never squeeze it into the headline column. */
.bb-bot-hero .hero { padding-bottom: 36px; }
.bb-bot-hero .bb-rail {
  position: relative; z-index: 1; max-width: none; margin: 0 0 56px; padding: 16px 22px 18px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h foot" "list list"; align-items: baseline;
}
.bb-bot-hero .bb-rail-h { grid-area: h; margin: 0 0 10px; }
.bb-bot-hero .bb-rail-foot { grid-area: foot; margin: 0; padding: 0; border: 0; }
.bb-bot-hero .bb-rail ul { grid-area: list; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.bb-bot-hero .bb-rail li + li { border-top: 0; border-left: 1px solid var(--line); }
.bb-bot-hero .bb-rail li a { grid-template-columns: 38px minmax(0, 1fr); padding: 16px 20px 4px; row-gap: 3px; }
.bb-bot-hero .bb-rail li:first-child a { padding-left: 0; }
.bb-bot-hero .bb-rail-ico { width: 38px; height: 38px; grid-row: span 3; }
.bb-bot-hero .bb-rail-amt { font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; }
.bb-bot-hero .bb-rail-note { grid-column: 2; }
@media (max-width: 760px) {
  .bb-bot-hero .bb-rail { grid-template-columns: 1fr; grid-template-areas: "h" "list" "foot"; margin-bottom: 40px; }
  .bb-bot-hero .bb-rail li + li { border-left: 0; border-top: 1px solid var(--line); }
  .bb-bot-hero .bb-rail li a { padding: 14px 0; }
  .bb-bot-hero .bb-rail-foot { padding-top: 10px; }
}

/* Sticky buy bars on phones: lift back-to-top above them so it never covers the bar's links. */
@media (max-width: 960px) {
  body:has(.bb-sticky:not([hidden])) #back-top,
  body:has(.bb-shop-sticky:not([hidden])) #back-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  body:has(.bb-pro-sticky) #back-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Bot intro without screenshots: the same app window as the home launcher, listing real updates or tasks. */
.bb-app {
  --lx-bg: #16191f; --lx-row: #1d2129; --lx-line: #2a2f38; --lx-ink: #e8ecf1; --lx-dim: #9aa3ae;
  width: 100%; max-width: 520px; margin-left: auto; background: var(--lx-bg); color: var(--lx-ink);
  border-radius: 12px; overflow: hidden; border: 1px solid #0b0d11;
  box-shadow: 0 30px 60px -28px rgba(10, 18, 30, .55), 0 2px 0 rgba(255,255,255,.04) inset;
}
.bb-app-game { font-family: var(--sans); font-weight: 600; color: var(--lx-dim); margin-left: 6px; }
.bb-app-h { margin: 0; padding: 12px 18px 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-dim); }
.bb-app-list { list-style: none; margin: 0; padding: 0 10px 10px; }
.bb-app-list li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 11px 8px; font-size: 0.9062rem; line-height: 1.4;
}
.bb-app-list li + li { border-top: 1px solid var(--lx-line); }
.bb-app-tick { width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; background: #2a88b5; position: relative; }
.bb-app-tick::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bb-app-d { font-size: 0.75rem; color: var(--lx-dim); white-space: nowrap; padding-top: 2px; }
.bb-app-video { max-width: 520px; margin: 12px 0 0 auto; }
.bb-app-video summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--gold); text-align: right; }
.bb-app-video[open] summary { margin-bottom: 10px; }
@media (max-width: 900px) {
  .bb-app, .bb-app-video { margin-left: 0; max-width: none; }
  .bb-app-video summary { text-align: left; }
}

/* Home hero game finder: icon listbox under the field. */
.bb-home-find { position: relative; }
.bb-find-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px;
  list-style: none; max-height: 380px; overflow-y: auto; border-radius: 14px;
  background: var(--panel-solid); border: 1px solid var(--line-2);
  box-shadow: 0 24px 50px -20px var(--shadow-ink-strong);
}
.bb-find-list li[role="option"] {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 10px; cursor: pointer; color: var(--fg);
}
.bb-find-list li[aria-selected="true"], .bb-find-list li[role="option"]:hover { background: var(--sunk); }
.bb-find-list img, .bb-find-ph { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; display: block; }
.bb-find-ph { display: grid; place-items: center; background: var(--sunk); color: var(--muted); font-weight: 700; }
.bb-find-name { font-weight: 600; font-size: 0.9688rem; }
.bb-find-go { color: var(--muted); }
.bb-find-list li[aria-selected="true"] .bb-find-go { color: var(--gold); }
.bb-find-none { padding: 12px 10px; color: var(--muted); font-size: 0.9062rem; }
.bb-find-none a { color: var(--gold); font-weight: 600; }