/* =====================================================================
   Guide Page — component layer on top of country-page.css
   Used by the trend-driven guides: /binary-bot-login/, /binary-signal-bot/,
   /binomo-bot/, /quotex-bot/. Loaded AFTER country-page.css, so it only adds
   components and never restyles anything the existing hubs rely on.
   ===================================================================== */

:root {
  --g-surface: rgba(255, 255, 255, 0.04);
  --g-surface-hi: rgba(255, 255, 255, 0.07);
  --g-border: rgba(255, 255, 255, 0.08);
  --g-border-hi: rgba(139, 92, 246, 0.32);
  --g-green: #22c55e;
  --g-green-soft: rgba(34, 197, 94, 0.12);
  --g-amber: #f59e0b;
  --g-amber-soft: rgba(245, 158, 11, 0.12);
  --g-red: #ef4444;
  --g-red-soft: rgba(239, 68, 68, 0.12);
  --g-blue: #4facfe;
  --g-blue-soft: rgba(79, 172, 254, 0.12);
}

/* ---------- Hero additions ---------- */
.g-hero { padding-top: 2.25rem; padding-bottom: 2.25rem; position: relative; }
.g-hero::before {
  content: '';
  position: absolute; inset: -40px 0 0 0;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(420px 200px at 85% 30%, rgba(239, 68, 68, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.g-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--violet-400);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.28);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.g-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.g-meta {
  margin-top: 1.1rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem;
  font-size: 0.75rem; color: var(--text-soft);
}
.g-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.g-meta svg { width: 14px; height: 14px; stroke: var(--violet-400); fill: none; stroke-width: 2; }

/* ---------- On-this-page nav ---------- */
.g-toc {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin: 0.25rem auto 0; max-width: 900px;
}
.g-toc a {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-muted);
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  transition: all var(--duration-300) var(--ease-out);
}
.g-toc a:hover { opacity: 1; color: #fff; border-color: var(--g-border-hi); background: var(--g-surface-hi); }

/* Anchored sections clear the sticky header */
section.block[id] { scroll-margin-top: 72px; }

/* ---------- Key takeaways ---------- */
.g-summary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.10) 0%, rgba(79, 172, 254, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
.g-summary h2 { font-size: 1rem !important; margin-bottom: 0.75rem !important; letter-spacing: 0.3px; }
.g-summary ul { list-style: none; display: grid; gap: 0.6rem; }
.g-summary li { position: relative; padding-left: 1.75rem; color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; line-height: 1.55; }
.g-summary li::before {
  content: '';
  position: absolute; left: 0; top: 0.3rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--g-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/62% no-repeat;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

/* ---------- Prose inside blocks ---------- */
.g-prose { max-width: 820px; }
.g-prose p { color: rgba(255, 255, 255, 0.76); font-size: 0.9375rem; line-height: 1.75; margin-bottom: 0.9rem; }
.g-prose p:last-child { margin-bottom: 0; }
.g-prose strong { color: #fff; font-weight: 600; }
.g-prose a, .g-link { color: var(--violet-400); border-bottom: 1px solid rgba(167, 139, 250, 0.35); }
.g-prose a:hover, .g-link:hover { opacity: 1; border-bottom-color: var(--violet-400); }
.g-prose h3 { font-size: 1.0625rem; font-weight: 600; color: #fff; margin: 1.4rem 0 0.5rem; }
.g-prose ul { margin: 0.25rem 0 1rem 1.15rem; }
.g-prose li { color: rgba(255, 255, 255, 0.76); font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0.35rem; }
.g-prose li::marker { color: var(--violet-400); }

/* ---------- Two-column split ---------- */
.g-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.75rem; align-items: center; }
@media (max-width: 900px) { .g-split { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Callouts ---------- */
.g-callout {
  display: flex; gap: 0.9rem; align-items: flex-start;
  border-radius: 0.875rem;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0;
  border: 1px solid var(--g-border);
  background: var(--g-surface);
}
.g-callout .g-ic {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.g-callout .g-ic svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g-callout h3 { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; }
.g-callout p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); line-height: 1.6; }
.g-callout.warn { border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.03)); }
.g-callout.warn .g-ic { background: var(--g-amber-soft); } .g-callout.warn svg { stroke: var(--g-amber); }
.g-callout.danger { border-color: rgba(239, 68, 68, 0.35); background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.03)); }
.g-callout.danger .g-ic { background: var(--g-red-soft); } .g-callout.danger svg { stroke: var(--g-red); }
.g-callout.info { border-color: rgba(79, 172, 254, 0.35); background: linear-gradient(135deg, rgba(79, 172, 254, 0.10), rgba(79, 172, 254, 0.03)); }
.g-callout.info .g-ic { background: var(--g-blue-soft); } .g-callout.info svg { stroke: var(--g-blue); }
.g-callout.ok { border-color: rgba(34, 197, 94, 0.35); background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.03)); }
.g-callout.ok .g-ic { background: var(--g-green-soft); } .g-callout.ok svg { stroke: var(--g-green); }

/* ---------- Comparison table ---------- */
.g-table-wrap {
  border: 1px solid var(--g-border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--g-surface);
}
.g-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.g-table th, .g-table td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g-border); }
.g-table thead th {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-soft);
  background: rgba(0, 0, 0, 0.25);
}
.g-table thead th.hl { color: var(--violet-400); }
.g-table tbody tr:last-child td, .g-table tbody tr:last-child th { border-bottom: 0; }
.g-table tbody th { font-weight: 600; color: #fff; width: 30%; }
.g-table td { color: rgba(255, 255, 255, 0.72); line-height: 1.5; }
.g-table td.hl { background: rgba(139, 92, 246, 0.06); color: rgba(255, 255, 255, 0.9); }
.g-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px; margin-right: 0.4rem; white-space: nowrap;
}
.g-tag.yes { color: var(--g-green); background: var(--g-green-soft); }
.g-tag.no { color: #f87171; background: var(--g-red-soft); }
.g-tag.mid { color: var(--g-amber); background: var(--g-amber-soft); }

/* Phone: each row becomes a card, columns labelled via data-label */
@media (max-width: 640px) {
  .g-table thead { display: none; }
  .g-table, .g-table tbody, .g-table tr, .g-table th, .g-table td { display: block; width: 100%; }
  .g-table tr { border-bottom: 1px solid var(--g-border); padding: 0.4rem 0; }
  .g-table tbody tr:last-child { border-bottom: 0; }
  .g-table tbody th { width: 100%; border-bottom: 0; padding: 0.7rem 1rem 0.3rem; font-size: 0.9375rem; }
  .g-table td { border-bottom: 0; padding: 0.3rem 1rem; }
  .g-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-soft); margin-bottom: 0.1rem;
  }
  .g-table td.hl { background: rgba(139, 92, 246, 0.07); border-radius: 0.5rem; margin: 0.2rem 0.6rem; width: auto; padding: 0.45rem 0.6rem; }
}

/* ---------- Mock browser / app window ---------- */
.g-window {
  background: #0d1120;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.08);
  overflow: hidden;
}
.g-window-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.g-window-dots { display: flex; gap: 6px; }
.g-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: block; }
.g-window-dots i:nth-child(1) { background: #ff5f57; } .g-window-dots i:nth-child(2) { background: #febc2e; } .g-window-dots i:nth-child(3) { background: #28c840; }
.g-window-url {
  flex: 1; min-width: 0;
  font-size: 0.75rem; color: var(--text-soft);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px; padding: 0.3rem 0.6rem;
  display: flex; align-items: center; gap: 0.4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-window-url svg { width: 11px; height: 11px; stroke: var(--g-green); fill: none; stroke-width: 2.5; flex-shrink: 0; }
.g-window-body { padding: 1.4rem; }
.g-window-caption { font-size: 0.6875rem; color: var(--text-soft); text-align: center; padding: 0 1rem 0.9rem; }

/* Login mock */
.g-login-mock { max-width: 320px; margin: 0 auto; text-align: center; }
.g-login-mock .lm-logo { height: 26px; margin: 0 auto 0.9rem; }
.g-login-mock .lm-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
.g-login-mock .lm-sub { font-size: 0.75rem; color: var(--text-soft); margin-bottom: 1rem; }
.g-login-mock .lm-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #fff; color: #0e0e0e; font-weight: 700; font-size: 0.8125rem;
  border-radius: 0.6rem; padding: 0.7rem; margin-bottom: 0.75rem;
  box-shadow: 0 0 0 3px rgba(255, 68, 79, 0.35), 0 8px 20px rgba(255, 68, 79, 0.25);
  position: relative;
}
.g-login-mock .lm-btn b { color: #ff444f; font-style: italic; font-weight: 700; }
.g-login-mock .lm-or { font-size: 0.6875rem; color: var(--text-soft); margin: 0.5rem 0; display: flex; align-items: center; gap: 0.6rem; }
.g-login-mock .lm-or::before, .g-login-mock .lm-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.g-login-mock .lm-input {
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.6rem;
  padding: 0.65rem 0.8rem; text-align: left; font-size: 0.75rem; color: var(--text-soft);
  background: rgba(0, 0, 0, 0.3); margin-bottom: 0.5rem;
}
.g-login-mock .lm-submit { background: var(--gradient-secondary); color: #fff; font-weight: 600; font-size: 0.75rem; border-radius: 0.6rem; padding: 0.6rem; }
.g-pointer {
  position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--violet-500); color: #fff; padding: 0.2rem 0.45rem; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.45);
}

/* Signal panel mock */
.g-signal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.5rem; }
.g-signal-head .sh-mkt { font-size: 0.875rem; font-weight: 700; color: #fff; }
.g-signal-head .sh-mkt small { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--text-soft); }
.g-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 700; color: var(--g-green); text-transform: uppercase; letter-spacing: 0.4px; }
.g-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--g-green); animation: gPulse 1.6s infinite; }
@keyframes gPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.g-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 120px; margin-bottom: 0.4rem; }
.g-bars div { position: relative; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(167, 139, 250, 0.85), rgba(139, 92, 246, 0.35)); }
.g-bars div.lo { background: linear-gradient(180deg, rgba(248, 113, 113, 0.9), rgba(239, 68, 68, 0.35)); }
.g-bars div.hi { background: linear-gradient(180deg, rgba(74, 222, 128, 0.9), rgba(34, 197, 94, 0.35)); }
.g-bars div span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 0.5625rem; color: var(--text-soft); white-space: nowrap; }
.g-digits { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; text-align: center; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; }
.g-ticks { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 1rem; }
.g-ticks b {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.g-ticks b.e { color: #93c5fd; } .g-ticks b.o { color: #fca5a5; }
.g-ticks b.last { border-color: var(--violet-400); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35); }
.g-signal-out {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 0.75rem; padding: 0.7rem 0.9rem;
}
.g-signal-out .so-label { font-size: 0.6875rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.4px; }
.g-signal-out .so-val { font-size: 0.9375rem; font-weight: 700; color: #fff; }
.g-meter { width: 90px; flex-shrink: 0; }
.g-meter .m-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.g-meter .m-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--g-amber), var(--g-green)); }
.g-meter .m-lbl { font-size: 0.625rem; color: var(--text-soft); margin-top: 0.25rem; text-align: right; }

/* ---------- Tool picker cards ---------- */
/* 300px track caps desktop at 3 columns, so 3- and 6-card grids never orphan */
.g-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0.875rem; }
.g-tool {
  display: flex; flex-direction: column;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 1rem;
  padding: 1.15rem 1.2rem 1.05rem;
  color: var(--text);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
}
.g-tool:hover { opacity: 1; transform: translateY(-3px); border-color: var(--g-border-hi); background: var(--g-surface-hi); box-shadow: var(--shadow-xl); }
.g-tool .t-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.g-tool .t-ic {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.25);
}
.g-tool .t-ic svg { width: 19px; height: 19px; stroke: var(--violet-400); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-tool .t-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--g-blue); background: var(--g-blue-soft); padding: 0.18rem 0.5rem; border-radius: 999px; }
.g-tool h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.3rem; }
.g-tool p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.64); line-height: 1.55; flex: 1; }
.g-tool .t-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.75rem 0 0.7rem; }
.g-tool .t-chips span { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.12rem 0.45rem; border-radius: 6px; }
.g-tool .t-go { font-size: 0.8125rem; font-weight: 600; color: var(--violet-400); display: inline-flex; align-items: center; gap: 0.3rem; }
.g-tool:hover .t-go { gap: 0.55rem; }

/* ---------- Checklist grid (red flags / checks) ---------- */
.g-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0.75rem; }
.g-checks.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g-check {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: 0.875rem; padding: 0.95rem 1rem;
}
.g-check .c-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.g-check .c-ic svg { width: 14px; height: 14px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-check.bad .c-ic { background: var(--g-red-soft); } .g-check.bad svg { stroke: #f87171; }
.g-check.good .c-ic { background: var(--g-green-soft); } .g-check.good svg { stroke: var(--g-green); }
.g-check h3 { font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: 0.15rem; }
.g-check p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.64); line-height: 1.5; }

/* ---------- Numbered timeline (login steps) ---------- */
.g-timeline { list-style: none; position: relative; display: grid; gap: 0.75rem; }
.g-timeline::before { content: ''; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--violet-500), rgba(139, 92, 246, 0.05)); }
.g-timeline li { position: relative; padding-left: 3.25rem; counter-increment: gstep; }
.g-timeline { counter-reset: gstep; }
.g-timeline li::before {
  content: counter(gstep);
  position: absolute; left: 0; top: 0.15rem;
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 0.9375rem;
  background: linear-gradient(135deg, var(--violet-400), var(--violet-500));
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}
.g-timeline .tl-card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 0.875rem; padding: 0.85rem 1rem; }
.g-timeline h3 { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; }
.g-timeline p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.68); line-height: 1.6; }
.g-timeline code, .g-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em; color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 0.05rem 0.35rem; border-radius: 5px;
}

/* ---------- Stat tiles ---------- */
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.g-stat { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 0.875rem; padding: 0.9rem 1rem; }
.g-stat b { display: block; font-size: 1.375rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.g-stat span { font-size: 0.75rem; color: var(--text-soft); line-height: 1.4; display: block; margin-top: 0.15rem; }
@media (max-width: 768px) { .g-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Related guides ---------- */
.g-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.g-related a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: 0.875rem; padding: 0.85rem 1rem;
  color: #fff; font-size: 0.875rem; font-weight: 600;
  transition: all var(--duration-300) var(--ease-out);
}
.g-related a small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--text-soft); margin-top: 0.1rem; }
.g-related a::after { content: '\2192'; color: var(--violet-400); font-size: 1.1rem; transition: transform var(--duration-300) var(--ease-out); }
.g-related a:hover { opacity: 1; border-color: var(--g-border-hi); background: var(--g-surface-hi); }
.g-related a:hover::after { transform: translateX(3px); }

/* ---------- Verdict ---------- */
.g-verdict {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(239, 68, 68, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 1rem; padding: 1.25rem 1.4rem;
}
.g-verdict .v-mark {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet-400), var(--violet-500));
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.4);
}
.g-verdict .v-mark svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g-verdict h3 { font-size: 1.0625rem; color: #fff; font-weight: 700; margin-bottom: 0.25rem; }
.g-verdict p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }
@media (max-width: 560px) { .g-verdict { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Sticky mobile CTA ---------- */
/* Android WebViews that already sit between the system bars (our Android app, most in-app
   browsers) can still report the bars' insets, so the gesture-bar gap was added twice.
   A normal browser tab is never under the status bar, so a top inset there means the insets
   are not real: ignore the bottom one too. iOS and installed modes keep the real value. */
:root { --g-safe-b: env(safe-area-inset-bottom, 0px); }
@media (display-mode: browser) {
  @supports not (-webkit-touch-callout: none) {
    :root { --g-safe-b: max(0px, env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) * 100); }
  }
}
.g-sticky-cta { display: none; }
@media (max-width: 768px) {
  .g-sticky-cta {
    display: flex; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 0.6rem 0.875rem calc(0.6rem + var(--g-safe-b));
    background: rgba(10, 12, 24, 0.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .g-sticky-cta .btn { flex: 1; min-height: 44px; font-size: 0.75rem; padding: 0.65rem 0.5rem; }
  body.has-sticky-cta footer.site-footer { padding-bottom: 5.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .g-live::before { animation: none; }
  .g-tool, .g-related a, .g-toc a { transition: none; }
}

/* =====================================================================
   Hub additions (/free-deriv-bots/, /deriv-bots/, /digit-analysis-tool/)
   ===================================================================== */

/* Filter chips above a .g-tools grid. Cards stay in the HTML when hidden,
   so every bot link remains crawlable. */
.g-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.g-filter button {
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  color: var(--text-muted);
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  padding: 0.45rem 0.9rem; border-radius: 999px;
  cursor: pointer; min-height: 36px;
  transition: all var(--duration-300) var(--ease-out);
}
.g-filter button:hover { color: #fff; border-color: var(--g-border-hi); }
.g-filter button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-400), var(--violet-500));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}
.g-filter .count { opacity: 0.7; font-weight: 500; margin-left: 0.2rem; }
.g-tool[hidden] { display: none; }

/* Section heading with a short kicker line above it */
.g-kicker {
  display: block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--violet-400);
  margin-bottom: 0.35rem;
}

/* Goal picker rows: "If you want X -> use Y" */
.g-goal td .g-link { font-weight: 600; }
.g-goal tbody th { width: 38%; }

/* Tight two-up cards for honest pros/cons */
.g-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.g-duo .g-callout { margin: 0; height: 100%; }
@media (max-width: 760px) { .g-duo { grid-template-columns: 1fr; } }

/* Inline mid-page CTA row */
.g-inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 1rem; padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.g-inline-cta p { color: rgba(255, 255, 255, 0.85); font-size: 0.9375rem; font-weight: 500; margin: 0; }
.g-inline-cta p small { display: block; color: var(--text-soft); font-weight: 400; font-size: 0.8125rem; }
@media (max-width: 560px) { .g-inline-cta .btn { width: 100%; } }

/* Country cards with flag */
.g-tool .t-flag { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.g-tools.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Comfortable touch targets on phones */
@media (max-width: 768px) {
  .g-toc a { display: inline-flex; align-items: center; min-height: 38px; }
  .g-toc { gap: 0.4rem; }
}
@media (max-width: 640px) {
  .g-goal tbody th { width: 100%; }
}

/* 6-card feature grids read as 3 + 3 on desktop instead of 4 + 2 */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }