/* Layout: dark navy foundation, full-width bands with a centred 1180px wrap; cyan used only as accent.
   Single deliberate dark theme per the Alpha Execution brand (deep navy + electric cyan). */
:root {
  --navy: #0A1626;
  --navy-deep: #060E1A;
  --charcoal: #1A1F2B;
  --charcoal-2: #222938;
  --cyan: #00E5FF;
  --blue: #0083FF;
  --white: #FFFFFF;
  --paper: #F2F7FB;
  --text: #E6EDF5;
  --muted: #98A6BA;
  --line: rgba(152, 190, 230, 0.14);
  --warn: #FFB547;
  --ok: #3DDC97;
  --font-ui: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--navy); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--navy-deep); }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
h1, h2, h3, h4 { color: var(--white); line-height: 1.2; text-wrap: balance; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
li + li { margin-top: .35em; }

.wrap {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(56px, 8vw, 96px); }
.band + .band { border-top: 1px solid var(--line); }
.band.alt { background: var(--navy-deep); }
.stack { display: grid; gap: 18px; }
.stack-lg { display: grid; gap: 36px; }
.prose { max-width: 68ch; display: grid; gap: 14px; }
.prose ul, .prose ol { display: grid; gap: 6px; }
.prose li + li { margin-top: 0; }
.lead { font-size: 1.15rem; color: var(--text); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.eyebrow {
  font-family: var(--font-data); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
}
.section-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 36px; }

/* Preview ribbon */
.ribbon { background: var(--charcoal); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.ribbon .wrap { padding-block: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(6, 14, 26, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.brand-name { font-weight: 800; letter-spacing: .08em; font-size: .95rem; line-height: 1.1; }
.brand-name small { display: block; font-weight: 500; letter-spacing: .18em; font-size: .6rem; color: var(--cyan); }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav a {
  color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 500;
  padding: 8px 10px; border-radius: 6px; white-space: nowrap;
}
.nav a:hover { color: var(--white); background: rgba(255,255,255,.05); }
.nav a[aria-current="page"] { color: var(--cyan); }
.header-actions { display: flex; gap: 10px; align-items: center; }
.menu-btn {
  display: none; background: none; border: 1px solid var(--line); color: var(--white);
  border-radius: 8px; width: 42px; height: 42px; cursor: pointer; font: inherit;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 18px; height: 2px; background: currentColor; margin: 0 auto; position: relative; content: "";
}
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
@media (max-width: 1080px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--navy-deep); border-bottom: 1px solid var(--line);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px));
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; font-size: 1rem; }
  .menu-btn { display: block; }
  .header-actions { margin-left: auto; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; font-weight: 700; font-size: .92rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary { background: var(--cyan); color: var(--navy-deep); }
.btn-primary:hover { background: var(--white); color: var(--navy-deep); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(0,229,255,.45); color: var(--cyan); background: transparent; }
.btn-ghost:hover { background: rgba(0,229,255,.08); color: var(--white); }
.btn-sm { padding: 8px 14px; font-size: .82rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; }

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% 0%, rgba(0,131,255,.18), transparent 60%), var(--navy-deep); }
.hero .wrap:not(.trust-wrap) { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: clamp(56px, 9vw, 110px); }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy h1 em { font-style: normal; color: var(--cyan); }
.chart-panel {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,31,43,.85), rgba(10,22,38,.85)); padding: 16px; min-width: 0;
}
.chart-panel canvas { width: 100%; height: 300px; display: block; }
.chart-meta { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: .72rem; color: var(--muted); margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .hero .wrap:not(.trust-wrap) { grid-template-columns: 1fr; } .chart-panel canvas { height: 220px; } }

.page-hero { background: var(--navy-deep); border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(48px, 7vw, 84px); display: grid; gap: 16px; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.trust div { padding: 20px 20px 20px 0; display: grid; gap: 4px; }
.trust div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.trust strong { color: var(--white); font-size: .98rem; }
.trust span { color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; } .trust div:nth-child(3) { border-left: 0; padding-left: 0; } .trust div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Grids & cards */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card {
  background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.card p { color: var(--muted); font-size: .95rem; }
.card .link-arrow { margin-top: auto; padding-top: 6px; }
.card-tag { font-family: var(--font-data); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.pillar { border-top: 2px solid var(--cyan); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.pillar h3 { font-size: 1.3rem; }
.pillar p { color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* TBC chip – marks every fact awaiting Alpha Execution approval */
.tbc {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data);
  font-size: .72rem; letter-spacing: .04em; color: var(--warn);
  border: 1px dashed rgba(255,181,71,.6); border-radius: 999px; padding: 2px 10px; vertical-align: middle; max-width: 100%;
}
.tbc::before { content: "TBC"; font-weight: 700; }

/* Callouts */
.note { border: 1px solid rgba(0,229,255,.3); background: rgba(0,229,255,.06); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 8px; }
.note strong { color: var(--white); }
.note.risk { border-color: rgba(255,181,71,.45); background: rgba(255,181,71,.07); }
.note.risk .note-label { color: var(--warn); }
.note-label { font-family: var(--font-data); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--charcoal); color: var(--white); font-weight: 600; font-size: .8rem; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td { color: var(--text); }

/* Steps (genuine sequences only) */
.steps { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-data); color: var(--cyan); font-size: .9rem; padding-top: 2px; }
.steps strong { color: var(--white); display: block; }
.steps span { color: var(--muted); font-size: .94rem; }
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.flow span { background: var(--charcoal); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; }
.flow i { color: var(--cyan); font-style: normal; }

/* Signal card */
.signal { font-family: var(--font-data); background: var(--navy-deep); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.signal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.signal-head b { color: var(--white); font-size: 1.05rem; }
.stamp { color: var(--warn); border: 1px solid rgba(255,181,71,.6); border-radius: 4px; padding: 2px 8px; font-size: .68rem; letter-spacing: .12em; }
.signal dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.signal dl div { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.signal dl div:nth-child(odd) { border-right: 1px solid var(--line); }
.signal dt { color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.signal dd { margin: 4px 0 0; color: var(--white); font-size: .92rem; }
.signal .ctx { padding: 14px 18px; color: var(--muted); font-size: .8rem; font-family: var(--font-ui); }
.dir-buy { color: var(--ok) !important; }

/* People */
.person { display: flex; gap: 16px; align-items: flex-start; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; color: var(--cyan); background: var(--navy-deep); border: 1px solid rgba(0,229,255,.35); font-size: .95rem;
}
.person h3 { font-size: 1.02rem; }
.person .role { color: var(--cyan); font-size: .85rem; font-weight: 600; }

/* Forms */
.form { background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .85rem; font-weight: 600; color: var(--white); }
.field label .opt { font-weight: 400; color: var(--muted); }
input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--white); background: var(--navy-deep);
  border: 1px solid rgba(152,190,230,.25); border-radius: 8px; padding: 11px 12px; width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.18); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--text); }
.field-error { color: #FF7A8A; font-size: .8rem; }
.form-status { border-radius: 8px; padding: 14px 16px; font-size: .92rem; background: rgba(61,220,151,.1); border: 1px solid rgba(61,220,151,.4); color: var(--white); }
.form-note { font-size: .8rem; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--white); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-family: var(--font-data); font-size: 1.1rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 20px 18px; color: var(--muted); }
.faq-group + .faq-group { margin-top: 32px; }
.faq-group h3 { margin-bottom: 12px; font-size: .8rem; font-family: var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }

/* Glossary */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.glossary div { padding: 16px 0; border-top: 1px solid var(--line); }
.glossary dt { color: var(--white); font-weight: 700; }
.glossary dd { margin: 4px 0 0; color: var(--muted); font-size: .94rem; }
@media (max-width: 720px) { .glossary { grid-template-columns: 1fr; } }

/* Service chooser */
.chooser { display: flex; flex-wrap: wrap; gap: 10px; }
.chooser a { flex: 1 1 160px; text-align: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--charcoal); color: var(--white); text-decoration: none; font-weight: 600; }
.chooser a:hover { border-color: var(--cyan); color: var(--cyan); }

/* Legal pages */
.legal h2 { font-size: 1.3rem; margin-top: 12px; }

/* Footer */
.site-footer { background: var(--navy-deep); border-top: 1px solid var(--line); font-size: .88rem; }
.site-footer .wrap { padding-block: 56px 32px; display: grid; gap: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-grid > * { min-width: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-grid h4 { font-size: .72rem; font-family: var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; font-weight: 500; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-grid li + li { margin-top: 0; }
.footer-grid a { color: var(--text); text-decoration: none; }
.footer-grid a:hover { color: var(--cyan); }
.footer-risk { border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: .8rem; display: grid; gap: 10px; }
.motto { font-weight: 700; color: var(--white); letter-spacing: .02em; }
.pillars-line { font-family: var(--font-data); font-size: .72rem; letter-spacing: .2em; color: var(--muted); }

/* Preview routing (single-file build only) */
[data-page][hidden] { display: none !important; }

.btn { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1081px) { .nav a { padding: 8px 7px; font-size: .82rem; } }
@media (max-width: 480px) {
  .site-header .wrap { gap: 10px; }
  .brand svg { width: 28px; height: 28px; }
  .brand-name { font-size: .78rem; }
  .brand-name small { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 8px 12px; }
}
.steps li > div { min-width: 0; }

/* Five-up grid and stat frame (homepage) */
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .g5 { grid-template-columns: 1fr; } }
.stat-frame { border: 1px dashed rgba(152,190,230,.3); border-radius: 12px; padding: 8px 20px 16px; display: grid; }
.stat-frame-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: .92rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.pending { color: var(--warn); background: rgba(255,181,71,.1); border-color: rgba(255,181,71,.3); }
.pill.ok { color: var(--ok); background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.3); }
.pill.bad { color: #FF7A8A; background: rgba(255,122,138,.1); border-color: rgba(255,122,138,.35); }
.pill.info { color: var(--cyan); background: rgba(0,229,255,.08); border-color: rgba(0,229,255,.3); }
.pill.neutral { color: var(--muted); background: rgba(152,166,186,.1); border-color: rgba(152,166,186,.25); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--text); }
.tabs button[aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.08); }
.tabs button:focus-visible { outline: 2px solid var(--cyan); }
.secret { font-family: var(--font-data); background: var(--navy-deep); border: 1px dashed rgba(0,229,255,.4); border-radius: 8px; padding: 10px 12px; word-break: break-all; color: var(--white); letter-spacing: .08em; }
.form-status.err { background: rgba(255,122,138,.1); border-color: rgba(255,122,138,.45); }

/* ===================================================================
   Brand guidelines 2026: Electric Cyan #00E5FF, Neon Blue #00B3FF, Deep Navy #0A1626,
   Charcoal #1A1F2B, White. Glowing panels over a live blue background (assets/site.js).
   =================================================================== */
:root {
  --blue: #00B3FF;
  --glow: rgba(0, 229, 255, .35);
  --glass: rgba(16, 24, 38, .72);
  --glass-strong: rgba(10, 18, 31, .86);
  --edge: rgba(0, 229, 255, .22);
  --grad: linear-gradient(90deg, #00B3FF, #00E5FF);
}
html { background: #050B16; }
body { background: transparent; }
#live-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
.no-live-bg body, body.app { background:
  radial-gradient(900px 600px at 85% -10%, rgba(0,179,255,.22), transparent 60%),
  radial-gradient(700px 500px at -10% 110%, rgba(0,229,255,.12), transparent 60%), #050B16; background-attachment: fixed; }

/* Surfaces become glass so the background shows through */
.site-header { background: rgba(4, 10, 20, .72); border-bottom-color: var(--edge); }
.ribbon { background: rgba(10, 18, 31, .8); }
.hero { background: radial-gradient(900px 480px at 80% 10%, rgba(0,179,255,.16), transparent 65%); }
.page-hero { background: linear-gradient(180deg, rgba(4,10,20,.55), rgba(4,10,20,.15)); border-bottom-color: var(--edge); }
.band.alt { background: rgba(4, 10, 20, .45); }
.band + .band { border-top-color: rgba(0,229,255,.1); }
.site-footer { background: rgba(3, 8, 16, .88); border-top-color: var(--edge); }
.card, .form, .faq details, .note, .stat-frame, .chooser a, .signal, .table-wrap {
  background: var(--glass); border-color: var(--edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0,229,255,.04) inset, 0 10px 30px rgba(0,0,0,.25);
}
.card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.card:hover { border-color: rgba(0,229,255,.5); box-shadow: 0 0 24px rgba(0,229,255,.16), 0 10px 30px rgba(0,0,0,.3); transform: translateY(-2px); }
th { background: rgba(0, 179, 255, .12); color: var(--white); }
.signal { background: var(--glass-strong); }
.note.risk { background: rgba(40, 26, 6, .55); }
input, select, textarea { background: rgba(4, 10, 20, .75); }

/* Glowing type, as in the brand sheet */
h1 { text-shadow: 0 0 28px rgba(0, 229, 255, .22); }
.hero-copy h1 em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(0,229,255,.35)); }
.eyebrow { text-shadow: 0 0 12px rgba(0, 229, 255, .45); }
.pillar { border-top: 2px solid transparent; border-image: var(--grad) 1; }
.pillar h3, .card h3 { letter-spacing: .01em; }

/* Buttons */
.btn-primary { background: var(--grad); color: #04111F; box-shadow: 0 0 18px rgba(0, 229, 255, .35); }
.btn-primary:hover { background: linear-gradient(90deg, #33C4FF, #66F0FF); box-shadow: 0 0 28px rgba(0, 229, 255, .55); color: #04111F; }
.btn-ghost { border-color: rgba(0, 229, 255, .55); box-shadow: 0 0 12px rgba(0,229,255,.12) inset; }

/* Brand logo */
.brand img { height: 38px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(0,229,255,.45)); }
.brand-name { font-weight: 800; letter-spacing: .1em; }
.hero-logo { display: grid; justify-items: center; gap: 14px; padding: 28px 12px; text-align: center; min-width: 0; }
.hero-logo img { width: min(360px, 80%); height: auto; filter: drop-shadow(0 0 22px rgba(0,229,255,.55)) drop-shadow(0 0 60px rgba(0,179,255,.3)); animation: logo-glow 5s ease-in-out infinite; }
.hero-logo .wordmark { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: .02em; color: var(--white); text-shadow: 0 0 22px rgba(255,255,255,.25); }
.hero-logo .wordmark small { display: block; font-size: .42em; letter-spacing: .32em; font-weight: 600; margin-top: .45em; }
.hero-logo .tagline { font-family: var(--font-data); font-size: .8rem; letter-spacing: .4em; color: var(--cyan); text-shadow: 0 0 12px rgba(0,229,255,.6); }
@keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 18px rgba(0,229,255,.45)) drop-shadow(0 0 48px rgba(0,179,255,.25)); } 50% { filter: drop-shadow(0 0 28px rgba(0,229,255,.7)) drop-shadow(0 0 80px rgba(0,179,255,.4)); } }
@media (prefers-reduced-motion: reduce) { .hero-logo img { animation: none; } .card:hover { transform: none; } }
@media (max-width: 480px) {
  .site-header .brand img { height: 28px; }
  .site-header .brand { gap: 7px; }
  .site-header .brand-name { font-size: .72rem; letter-spacing: .06em; }
  .header-actions .btn-primary { padding: 8px 10px; font-size: .78rem; }
}
@media (max-width: 360px) { .site-header .brand-name { display: none; } }
.site-footer a, td a, .stack a { overflow-wrap: anywhere; }

/* Performance page: monthly report graphics */
.reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .reports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reports { grid-template-columns: 1fr; } }
.report { margin: 0; display: grid; gap: 14px; min-width: 0; background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; padding: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.report-img { all: unset; cursor: zoom-in; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 24px rgba(0,229,255,.14); }
.report-img:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.report-img img { display: block; width: 100%; height: auto; aspect-ratio: 941 / 1672; }
.report figcaption { display: grid; gap: 10px; padding: 0 4px 4px; min-width: 0; }
.report h3 { font-size: 1.02rem; }
.report-meta { margin: 0; display: grid; gap: 6px; font-size: .84rem; }
.report-meta div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
.report-meta dt { color: var(--muted); }
.report-meta dd { margin: 0; color: var(--text); }
.report-notes { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
.report-notes li + li { margin-top: 0; }
.report details summary { cursor: pointer; color: var(--cyan); font-weight: 600; font-size: .86rem; }
.report details .table-wrap { margin-top: 10px; }
.report table { min-width: 0; font-size: .82rem; }
.zoom { position: fixed; inset: 0; z-index: 200; background: rgba(2,6,12,.92); display: grid; place-items: center; cursor: zoom-out;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 0 60px rgba(0,229,255,.25); }
.zoom button { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
.stack > *, .stack-lg > * { min-width: 0; }
.report-meta div { grid-template-columns: 76px minmax(0, 1fr); }
.report-meta .pill { white-space: normal; }

/* Anything marked hidden stays hidden, even when a class sets display (this caused every form on
   the log-in page to show at once). */
[hidden] { display: none !important; }

/* Account pages: log in, two-step, create account, forgot and reset password */
.auth .wrap { padding-block: clamp(36px, 7vw, 80px); }
.auth-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; justify-content: center; }
.auth-grid.single { grid-template-columns: minmax(0, 460px); }
@media (max-width: 860px) { .auth-grid { grid-template-columns: minmax(0, 520px); } .auth-aside { display: none; } }
.auth-card { background: var(--glass-strong, rgba(10,18,31,.86)); border: 1px solid var(--edge, rgba(0,229,255,.22)); border-radius: 16px;
  padding: clamp(24px, 4vw, 38px); display: grid; gap: 18px; min-width: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 40px rgba(0,229,255,.08), 0 20px 50px rgba(0,0,0,.35); }
.auth-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); font-weight: 800; letter-spacing: .1em; font-size: .85rem; }
.auth-brand img { height: 30px; width: auto; filter: drop-shadow(0 0 8px rgba(0,229,255,.45)); }
.auth-card h1 { font-size: clamp(1.6rem, 3.4vw, 2rem); margin-top: 6px; }
.auth-card > p.muted { margin-top: -8px; }
.auth-form { display: grid; gap: 16px; }
.btn-block { width: 100%; padding-block: 14px; font-size: .98rem; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-switch { font-size: .9rem; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 16px; }
.auth-aside { display: grid; gap: 16px; padding-top: 12px; }
.auth .otp { font-family: var(--font-data); font-size: 1.5rem; letter-spacing: .4em; text-align: center; }
.form-status.ok { background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.4); }

/* Header buttons on phones: Log in always visible; on small phones "View Classes" moves into the menu. */
.nav .nav-cta { display: none; }
@media (max-width: 1080px) { .nav .nav-cta { display: block; color: var(--cyan); font-weight: 700; } }
@media (max-width: 520px) {
  .header-actions .btn-primary { display: none; }
  .header-actions .signin { padding: 8px 14px; font-size: .82rem; }
}

/* =====================================================================
   Motion: page transitions, button highlights, menus and accordions.
   One easing and three durations keep everything feeling consistent.
   All of it switches off for "reduce motion" (rule near the top of this file).
   ===================================================================== */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --t-fast: .16s; --t-med: .28s; --t-slow: .5s; }

/* Page-to-page transitions (browsers with cross-document View Transitions: Chrome, Edge, Safari 18.2+).
   The header and the live background stay put; only the page content cross-fades and lifts. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
#live-bg { view-transition-name: live-bg; }
::view-transition-group(site-header), ::view-transition-group(live-bg) { animation: none; }
::view-transition-old(live-bg), ::view-transition-new(live-bg) { animation: none; }
::view-transition-old(root) { animation: vt-out .22s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Buttons: lift on hover, glow, a light sweep across primary buttons, press feedback, clear focus ring */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-med) var(--ease-out), color var(--t-fast), border-color var(--t-med), box-shadow var(--t-med) var(--ease-out), opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .06s; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--navy-deep), 0 0 0 4px var(--cyan), 0 0 18px rgba(0,229,255,.35); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .7s var(--ease-out);
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(130%); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(0,229,255,.4), 0 6px 26px rgba(0,229,255,.5); }
.btn-ghost:hover { border-color: var(--cyan); background: rgba(0,229,255,.1); box-shadow: 0 0 18px rgba(0,229,255,.22), 0 0 12px rgba(0,229,255,.16) inset; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]::after { display: none; }

/* Header links: an underline that grows from the centre */
.nav a { position: relative; transition: color var(--t-fast), background-color var(--t-med); }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--cyan);
  transform: scaleX(0); transition: transform var(--t-med) var(--ease-out); box-shadow: 0 0 8px rgba(0,229,255,.6); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1080px) {
  .nav a::after { display: none; }
  .nav.open { animation: drop-in var(--t-med) var(--ease-out) both; }
  .nav.open a { animation: fade-up var(--t-med) var(--ease-out) both; }
  .nav.open a:nth-child(2) { animation-delay: 30ms; } .nav.open a:nth-child(3) { animation-delay: 60ms; } .nav.open a:nth-child(4) { animation-delay: 90ms; }
  .nav.open a:nth-child(5) { animation-delay: 120ms; } .nav.open a:nth-child(n+6) { animation-delay: 150ms; }
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast), top var(--t-med) var(--ease-out); }

/* Text links and form fields ease their highlight */
a { transition: color var(--t-fast); }
input, select, textarea { transition: border-color var(--t-med), box-shadow var(--t-med) var(--ease-out), background-color var(--t-med); }

/* Accordions (FAQ and "details") open smoothly where the browser supports animating to auto height */
.faq summary::after { transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details { transition: border-color var(--t-med), box-shadow var(--t-med); }
.faq details:hover { border-color: rgba(0,229,255,.4); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-med) var(--ease-out), content-visibility var(--t-med) allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

/* Shared keyframes */
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* =====================================================================
   Landing page animation (home hero) and scroll reveals on every page.
   Hero entrance is pure CSS so it plays even before scripts load.
   ===================================================================== */
/* Hero entrance: copy rises in line by line, logo glides in, trust strip follows */
.hero-copy > * { animation: hero-up .8s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4) { animation-delay: .45s; }
.hero-logo { animation: hero-logo-in 1.1s .2s var(--ease-out) both; }
.hero-logo .wordmark { animation: wordmark-in 1.2s .55s var(--ease-out) both; }
.hero-logo .tagline { animation: hero-fade 1s 1s ease both; }
.trust > div { animation: hero-up .7s var(--ease-out) both; }
.trust > div:nth-child(1) { animation-delay: .6s; } .trust > div:nth-child(2) { animation-delay: .7s; }
.trust > div:nth-child(3) { animation-delay: .8s; } .trust > div:nth-child(4) { animation-delay: .9s; }
@keyframes hero-up { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-logo-in { from { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(10px); } }
@keyframes wordmark-in { from { opacity: 0; letter-spacing: .35em; } }

/* "Grow With Purpose." shimmers gently */
.hero-copy h1 em {
  background: linear-gradient(100deg, var(--cyan) 0%, #7FF6FF 18%, #00B3FF 36%, var(--cyan) 54%, var(--cyan) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s 1.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(0,229,255,.35));
}
@keyframes shimmer { 0% { background-position: 100% 0; } 50%, 100% { background-position: -150% 0; } }

/* Logo floats and follows the pointer slightly (JS sets --px/--py) */
.hero-logo { perspective: 900px; }
.hero-logo img { transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0) rotateY(calc(var(--px, 0) * 8deg)) rotateX(calc(var(--py, 0) * -6deg));
  transition: transform .6s var(--ease-out); animation: logo-glow 5s ease-in-out infinite, logo-float 7s ease-in-out infinite; will-change: transform; }
@keyframes logo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* The main call to action breathes */
.hero-copy .btn-primary { animation: cta-pulse 3.2s 2s ease-in-out infinite; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(0,229,255,.35); } 50% { box-shadow: 0 0 0 6px rgba(0,229,255,.08), 0 0 34px rgba(0,229,255,.6); } }

/* Header firms up once you scroll */
.site-header { transition: background-color var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.site-header.scrolled { background: rgba(4, 10, 20, .9); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(0,229,255,.18); }

/* Scroll reveals (JS adds .rv to things below the fold, then .in when they come into view) */
.rv { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: var(--rv-delay, 0s); }
.rv.in { opacity: 1; transform: none; filter: none; }
.rv-left { transform: translateX(-28px); } .rv-right { transform: translateX(28px); }

/* Cards: a spotlight follows the cursor and the card tilts toward it (JS sets --mx/--my/--rx/--ry) */
.card, .pillar { position: relative; isolation: isolate; }
.card::before, .pillar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0,229,255,.16), transparent 65%); transition: opacity var(--t-med); }
.card:hover::before, .pillar:hover::before { opacity: 1; }
.card.tilt, .card.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); transition: transform .15s ease-out, border-color .2s, box-shadow .2s; }
.card-tag { transition: color var(--t-med), text-shadow var(--t-med); }
.card:hover .card-tag { text-shadow: 0 0 12px rgba(0,229,255,.8); }
.link-arrow { transition: color var(--t-fast), letter-spacing var(--t-med) var(--ease-out); }
.card:hover .link-arrow, .link-arrow:hover { letter-spacing: .02em; }

/* How it works: steps light up one after another, with a line drawing down */
.steps { position: relative; }
.steps.rv-steps li { opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.steps.rv-steps.in li { opacity: 1; transform: none; }
.steps.rv-steps.in li:nth-child(2) { transition-delay: .12s; } .steps.rv-steps.in li:nth-child(3) { transition-delay: .24s; }
.steps.rv-steps.in li:nth-child(4) { transition-delay: .36s; } .steps.rv-steps.in li:nth-child(5) { transition-delay: .48s; }
.steps.rv-steps.in li::before { animation: step-glow 1s var(--ease-out) both; }
.steps.rv-steps.in li:nth-child(2)::before { animation-delay: .12s; } .steps.rv-steps.in li:nth-child(3)::before { animation-delay: .24s; }
.steps.rv-steps.in li:nth-child(4)::before { animation-delay: .36s; } .steps.rv-steps.in li:nth-child(5)::before { animation-delay: .48s; }
@keyframes step-glow { 0% { text-shadow: none; } 40% { text-shadow: 0 0 14px rgba(0,229,255,.95); color: #fff; } 100% { text-shadow: 0 0 6px rgba(0,229,255,.4); } }

/* Performance panel: a scan line sweeps the rows */
.stat-frame { position: relative; overflow: hidden; }
.stat-frame::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.07), transparent); animation: scan 6s 1s linear infinite; }
@keyframes scan { to { transform: translateY(350%); } }

@media (prefers-reduced-motion: reduce) {
  .rv, .steps.rv-steps li { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-copy h1 em { background: none; color: var(--cyan); -webkit-text-fill-color: currentColor; }
  .card.tilt, .card.tilt:hover { transform: none; }
}
main#main { overflow-x: clip; } /* sections sliding in from the side never widen the page */

/* =====================================================================
   Market-themed motion for every website page
   ===================================================================== */
:root { --bull: #00E5FF; --bear: #FF6B81; }

/* Page headers enter like the home hero */
.page-hero { position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .wrap > * { animation: hero-up .8s var(--ease-out) both; }
.page-hero .wrap > :nth-child(1) { animation-delay: .05s; } .page-hero .wrap > :nth-child(2) { animation-delay: .15s; }
.page-hero .wrap > :nth-child(3) { animation-delay: .3s; } .page-hero .wrap > :nth-child(n+4) { animation-delay: .45s; }
.page-hero h1 { text-shadow: 0 0 28px rgba(0,229,255,.18); }

/* A live candlestick chart forms on the right of each page header (drawn by site.js) */
.hero-candles { position: absolute; inset: 0 0 0 auto; width: min(58%, 760px); height: 100%; pointer-events: none; z-index: 0; opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 88%, transparent 100%);
  animation: candles-in 1.4s .5s ease forwards; }
@keyframes candles-in { to { opacity: 1; } }
@media (max-width: 760px) { .hero-candles { width: 100%; animation-name: candles-dim; } }
@keyframes candles-dim { to { opacity: .35; } }

/* Scroll reveals now move like a candle: a strong push up, a small pullback (the wick), then settle */
.rv { transition: none; }
.rv.in { animation: candle-rise 1s var(--rv-delay, 0s) cubic-bezier(.2,.75,.25,1) both; }
.rv-left.in { animation-name: candle-rise-left; } .rv-right.in { animation-name: candle-rise-right; }
@keyframes candle-rise {
  0% { opacity: 0; transform: translateY(46px) scaleY(.82); filter: blur(5px); transform-origin: 50% 100%; }
  55% { opacity: 1; transform: translateY(-9px) scaleY(1.02); filter: blur(0); }
  75% { transform: translateY(4px) scaleY(.995); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes candle-rise-left { 0% { opacity: 0; transform: translate(-34px, 30px); filter: blur(5px); } 55% { opacity: 1; transform: translate(4px, -8px); filter: blur(0); } 75% { transform: translate(-1px, 3px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes candle-rise-right { 0% { opacity: 0; transform: translate(34px, 30px); filter: blur(5px); } 55% { opacity: 1; transform: translate(-4px, -8px); filter: blur(0); } 75% { transform: translate(1px, 3px); } 100% { opacity: 1; transform: none; filter: none; } }

/* Section labels get three tiny candles that keep trading */
main .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
main .eyebrow::before { content: ""; width: 14px; height: 13px; flex: none;
  background: linear-gradient(var(--bull), var(--bull)) 0 100% / 3px 60% no-repeat, linear-gradient(var(--bear), var(--bear)) 50% 100% / 3px 35% no-repeat, linear-gradient(var(--bull), var(--bull)) 100% 100% / 3px 85% no-repeat;
  filter: drop-shadow(0 0 4px rgba(0,229,255,.7)); animation: mini-candles 2.6s ease-in-out infinite; }
@keyframes mini-candles {
  0%, 100% { background-size: 3px 60%, 3px 35%, 3px 85%; }
  33% { background-size: 3px 85%, 3px 55%, 3px 45%; }
  66% { background-size: 3px 40%, 3px 80%, 3px 100%; }
}

/* Cards: a small bull run grows in the corner on hover */
.card::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 26px; height: 22px; pointer-events: none; opacity: 0;
  background: linear-gradient(var(--bear), var(--bear)) 0 100% / 4px 30% no-repeat, linear-gradient(var(--bull), var(--bull)) 50% 100% / 4px 55% no-repeat, linear-gradient(var(--bull), var(--bull)) 100% 100% / 4px 90% no-repeat;
  transform: scaleY(0); transform-origin: bottom; transition: opacity var(--t-med), transform .45s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); }
.card:hover::after { opacity: .9; transform: scaleY(1); }
.card.person::after, form .card::after { display: none; }

/* Pills that report status pulse once, like a tick */
.rv.in .pill { animation: tick .9s .5s ease both; }
@keyframes tick { 0% { box-shadow: 0 0 0 0 rgba(0,229,255,.45); } 100% { box-shadow: 0 0 0 10px rgba(0,229,255,0); } }

@media (prefers-reduced-motion: reduce) { .hero-candles { opacity: .7 !important; } .rv.in { animation: none !important; } }

/* =====================================================================
   Signals log (public Signals page, client portal, admin) — src/signals-log.js
   ===================================================================== */
.sl-busy { opacity: .6; transition: opacity .2s; }
.sl-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.sl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; background: rgba(4,10,20,.5); }
.sl-seg button, .sl-nav button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 7px; font-size: .84rem; font-weight: 600; color: var(--text); transition: background-color var(--t-med), color var(--t-fast); }
.sl-seg button:hover, .sl-nav button:hover { color: var(--white); background: rgba(0,229,255,.08); }
.sl-seg button[aria-pressed="true"] { background: rgba(0,229,255,.16); color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.15); }
.sl-seg button:focus-visible, .sl-nav button:focus-visible, .sl-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sl-nav { display: inline-flex; align-items: center; gap: 4px; }
.sl-nav b { color: var(--white); padding: 0 6px; font-size: .95rem; }
.sl-nav button { font-size: 1.1rem; padding: 4px 10px; border: 1px solid var(--line); }
.sl-nav .sl-today { font-size: .78rem; color: var(--cyan); }
.sl-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sl-filters select { width: auto; min-width: 0; padding: 7px 10px; font-size: .84rem; }
.sl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sl-tile { border: 1px solid var(--edge, var(--line)); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: var(--glass, rgba(16,24,38,.72)); }
.sl-tile .k { font-size: .74rem; color: var(--muted); }
.sl-tile .v { font-size: 1.3rem; font-weight: 800; color: var(--white); font-family: var(--font-data); }
.sl-tile .s { font-size: .7rem; color: var(--muted); line-height: 1.35; }
.sl-h { font-size: 1rem; margin: 18px 0 10px; color: var(--white); display: flex; gap: 8px; align-items: center; }
.sl-count { font-family: var(--font-data); font-size: .75rem; color: var(--muted); }
.sl-table table { min-width: 760px; font-size: .86rem; }
.sl-table td { vertical-align: top; }
.sl-up { color: #3DDC97 !important; } .sl-down { color: #FF7A8A !important; }
.sl-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.sl-corr { font-style: italic; }
.sl-pair { color: var(--white); font-family: var(--font-data); }
.sl-dir { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.sl-dir.buy { color: #3DDC97; background: rgba(61,220,151,.12); } .sl-dir.sell { color: #FF7A8A; background: rgba(255,122,138,.12); }
.sl-tp { display: inline-block; font-family: var(--font-data); font-size: .74rem; padding: 1px 6px; margin: 0 2px 3px 0; border-radius: 6px; border: 1px solid var(--line); color: var(--text); }
.sl-tp.hit { border-color: #3DDC97; color: #3DDC97; box-shadow: 0 0 10px rgba(61,220,151,.3); }
.sl-void td { opacity: .5; text-decoration-color: rgba(255,255,255,.3); }
.sl-link { all: unset; cursor: pointer; color: var(--cyan); font-weight: 600; border-bottom: 1px dashed rgba(0,229,255,.4); }
.sl-link:hover { color: var(--white); }
.sl-note { font-size: .78rem; color: var(--muted); margin-top: 12px; }
@media (max-width: 700px) { .sl-filters { margin-left: 0; width: 100%; } .sl-filters select { flex: 1 1 30%; } .sl-nav b { font-size: .86rem; } }

/* Client testimonials */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.testimonial { position: relative; margin: 0; padding: 22px 22px 18px; border-radius: var(--radius, 12px); border: 1px solid var(--edge, var(--line)); background: var(--glass, rgba(16,24,38,.72)); display: grid; gap: 12px; }
.testimonial::before { content: "\201C"; position: absolute; top: -6px; left: 14px; font-size: 3.4rem; line-height: 1; color: var(--cyan); opacity: .5; font-family: Georgia, serif; }
.testimonial blockquote { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.6; }
.testimonial figcaption { color: var(--white); font-weight: 700; font-size: .9rem; }
.testimonial figcaption span { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }

/* =====================================================================
   Gold Trading Bootcamp countdown — src/countdown.js
   ===================================================================== */
.cd-band { padding-block: 28px 8px; }
.countdown { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0,229,255,.35);
  background: radial-gradient(600px 220px at 85% 0%, rgba(0,179,255,.22), transparent 70%), linear-gradient(135deg, rgba(10,22,40,.92), rgba(5,12,24,.88));
  box-shadow: 0 0 0 1px rgba(0,229,255,.06) inset, 0 0 40px rgba(0,229,255,.12), 0 18px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.countdown::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(0,229,255,.08) 50%, transparent 70%); background-size: 250% 100%; animation: cd-sheen 6s linear infinite; }
@keyframes cd-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.cd-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px 28px; align-items: center; padding: 22px 26px; }
.cd-eyebrow { font-family: var(--font-data); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,.5); }
.cd-title { margin: 4px 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--white); }
.cd-when { margin: 0; color: var(--text); font-size: .92rem; }
.cd-when span { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.cd-clock { display: flex; align-items: flex-start; gap: 6px; }
.cd-unit { display: grid; justify-items: center; gap: 6px; min-width: 64px; }
.cd-num { font-family: var(--font-data); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1; color: var(--white); padding: 12px 10px; min-width: 64px; text-align: center;
  border-radius: 12px; background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.28); box-shadow: 0 0 18px rgba(0,229,255,.15) inset; text-shadow: 0 0 16px rgba(0,229,255,.55); font-variant-numeric: tabular-nums; }
.cd-num.tick { animation: cd-tick .45s cubic-bezier(.2,.8,.2,1); }
@keyframes cd-tick { 0% { transform: translateY(-6px) scale(1.04); color: var(--cyan); } 100% { transform: none; } }
.cd-lab { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cd-sep { font-family: var(--font-data); font-size: 1.8rem; color: rgba(0,229,255,.6); padding-top: 10px; animation: cd-blink 1s steps(2) infinite; }
@keyframes cd-blink { 50% { opacity: .25; } }
.cd-live { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: #3DDC97; }
.cd-dot { width: 12px; height: 12px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: cd-pulse 1.6s infinite; }
@keyframes cd-pulse { to { box-shadow: 0 0 0 14px rgba(61,220,151,0); } }
.countdown-app { margin-bottom: 4px; }
.countdown-app .cd-num { font-size: clamp(1.4rem, 2.6vw, 2rem); padding: 10px 8px; min-width: 54px; }
.countdown-app .cd-unit { min-width: 54px; }
@media (max-width: 960px) { .cd-in { grid-template-columns: 1fr; justify-items: start; } }
@media (max-width: 480px) {
  .cd-in { padding: 18px 16px; } .cd-clock { gap: 3px; width: 100%; justify-content: space-between; }
  .cd-unit, .cd-num { min-width: 0; } .cd-unit { flex: 1; } .cd-num { width: 100%; padding: 10px 4px; font-size: 1.6rem; } .cd-sep { font-size: 1.3rem; padding-top: 8px; }
  .cd-cta, .cd-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cd-sep { animation: none; } }

/* Client screenshots (withdrawals and account results) among the testimonials */
.testimonial.shot { padding: 12px 12px 14px; gap: 10px; }
.testimonial.shot::before { display: none; }
.shot-img { all: unset; cursor: zoom-in; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 4 / 5; }
.shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s var(--ease-out); }
.shot-img:hover img, .shot-img:focus-visible img { transform: scale(1.04); }
.shot-img:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.shot-badge { justify-self: start; font-family: var(--font-data); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.shot-badge.wd { color: #3DDC97; background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.35); }
.shot-badge.pf { color: var(--cyan); background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.35); }
.testimonial.shot figcaption { font-weight: 600; font-size: .9rem; }
.shot-note { margin: 0; font-size: .72rem; color: var(--muted); line-height: 1.45; }
.testimonials-home { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.testimonials { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.testimonials > .testimonial { max-width: 340px; }
@media (max-width: 560px) { .testimonials > .testimonial { max-width: none; } }

/* ===================== Theme switch (sun / moon) — src/theme.js ===================== */
.theme-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge, var(--line)); color: var(--cyan); transition: background var(--t-fast, .15s), border-color var(--t-fast, .15s), transform .2s; }
.theme-btn:hover { background: rgba(0,229,255,.08); border-color: var(--cyan); }
.theme-btn:active { transform: scale(.94); }
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-moon { fill: currentColor; stroke: none; }
/* dark theme shows the sun (switch to light); light theme shows the moon (switch to dark) */
.theme-btn .i-moon, html[data-theme="light"] .theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-moon { display: block; }
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .3s, color .3s, border-color .3s, fill .3s !important; }
@media (max-width: 420px) { .theme-btn { width: 34px; height: 34px; } }

/* ===================== Light theme =====================
   Same layout and brand accents, on a light paper background. Dark stays the default. */
html[data-theme="light"] {
  color-scheme: light;
  --navy: #F4F8FC; --navy-deep: #E8EFF7; --charcoal: #FFFFFF; --charcoal-2: #F1F5FA;
  --cyan: #0070B0; --blue: #0060C0; --white: #0B1B30; --text: #1E2B3D; --muted: #56677D;
  --line: rgba(12, 40, 80, .13); --warn: #9A5B00; --ok: #11865A;
  --glow: rgba(0, 112, 176, .16); --glass: rgba(255, 255, 255, .84); --glass-strong: rgba(255, 255, 255, .94); --edge: rgba(0, 112, 176, .2);
  --bull: #0070B0; --bear: #D0364F;
  background: #F4F8FC;
}
/* the page itself stays transparent so the live background (a canvas behind it) shows; this is the fallback without it */
html.no-live-bg[data-theme="light"] body, html[data-theme="light"] body.no-live { background: radial-gradient(900px 600px at 85% -10%, rgba(0,150,230,.12), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(0,190,230,.08), transparent 60%), #F4F8FC; background-attachment: fixed; }
html[data-theme="light"] body::before { background: #E8EFF7; }
html[data-theme="light"] .site-header { background: rgba(255,255,255,.82); }
html[data-theme="light"] .site-header.scrolled { background: rgba(255,255,255,.95); box-shadow: 0 8px 24px rgba(12,40,80,.1), 0 1px 0 rgba(0,112,176,.15); }
html[data-theme="light"] .nav a:hover { background: rgba(12,40,80,.05); }
html[data-theme="light"] .ribbon { background: rgba(255,255,255,.85); }
html[data-theme="light"] .hero { background: radial-gradient(900px 480px at 80% 10%, rgba(0,150,230,.12), transparent 65%); }
html[data-theme="light"] .page-hero { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.2)); }
html[data-theme="light"] .band.alt { background: rgba(232,239,247,.6); }
html[data-theme="light"] .band + .band { border-top-color: rgba(0,112,176,.1); }
html[data-theme="light"] .site-footer { background: rgba(236,242,249,.95); }
html[data-theme="light"] .card { box-shadow: 0 0 0 1px rgba(0,112,176,.03) inset, 0 8px 24px rgba(12,40,80,.07); }
html[data-theme="light"] .card:hover { border-color: rgba(0,112,176,.45); box-shadow: 0 0 22px rgba(0,112,176,.12), 0 10px 28px rgba(12,40,80,.1); }
html[data-theme="light"] .hero-chart, html[data-theme="light"] .chart-card { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(240,245,250,.9)); }
html[data-theme="light"] th { background: rgba(0,112,176,.08); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #FFFFFF; border-color: rgba(12,40,80,.2); color: var(--text); }
html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { box-shadow: 0 0 0 3px rgba(0,112,176,.16); }
html[data-theme="light"] h1, html[data-theme="light"] .page-hero h1 { text-shadow: none; }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .hero-logo .tagline, html[data-theme="light"] .cd-eyebrow, html[data-theme="light"] .card:hover .card-tag { text-shadow: none; }
html[data-theme="light"] .hero-logo .wordmark { text-shadow: none; }
html[data-theme="light"] .hero-copy h1 em { background: linear-gradient(90deg, #0060C0, #0091C8); -webkit-background-clip: text; background-clip: text; filter: none; }
html[data-theme="light"] .btn-ghost { border-color: rgba(0,112,176,.5); box-shadow: none; }
html[data-theme="light"] .btn-ghost:hover { background: rgba(0,112,176,.08); box-shadow: 0 0 14px rgba(0,112,176,.14); }
html[data-theme="light"] .btn-primary { box-shadow: 0 4px 14px rgba(0,150,220,.3); }
html[data-theme="light"] .note { border-color: rgba(0,112,176,.3); background: rgba(0,112,176,.05); }
html[data-theme="light"] .note.risk { background: rgba(255,181,71,.12); border-color: rgba(190,120,0,.4); }
html[data-theme="light"] .auth-card { box-shadow: 0 0 30px rgba(0,112,176,.08), 0 18px 40px rgba(12,40,80,.12); }
html[data-theme="light"] .sl-seg { background: rgba(255,255,255,.8); }
html[data-theme="light"] .sl-seg button[aria-pressed="true"] { background: rgba(0,112,176,.12); box-shadow: none; }
html[data-theme="light"] .countdown { border-color: rgba(0,112,176,.3); background: radial-gradient(600px 220px at 85% 0%, rgba(0,150,230,.14), transparent 70%), linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,243,250,.92)); box-shadow: 0 12px 30px rgba(12,40,80,.1); }
html[data-theme="light"] .cd-num, html[data-theme="light"] .cd-unit { text-shadow: none; }
html[data-theme="light"] [class*="cd-"] { text-shadow: none; }
html[data-theme="light"] .cd-sep { color: rgba(0,112,176,.6); }
html[data-theme="light"] .field-error, html[data-theme="light"] .pill.bad, html[data-theme="light"] .sl-down, html[data-theme="light"] .sl-dir.sell, html[data-theme="light"] .c-bad { color: #C02E48 !important; }
html[data-theme="light"] .c-warn { color: #9A6400 !important; }
html[data-theme="light"] .sl-up, html[data-theme="light"] .sl-dir.buy, html[data-theme="light"] .cd-live, html[data-theme="light"] .shot-badge.wd, html[data-theme="light"] .c-good { color: #11865A !important; }
html[data-theme="light"] .sl-tp.hit { border-color: #11865A; color: #11865A; box-shadow: none; }
html[data-theme="light"] .sl-void td { text-decoration-color: rgba(12,40,80,.3); }
html[data-theme="light"] .stamp { border-color: rgba(154,91,0,.5); }
html[data-theme="light"] .report-img, html[data-theme="light"] .testimonial { box-shadow: 0 8px 22px rgba(12,40,80,.08); }
html[data-theme="light"] .form-status { color: var(--text); }
.c-bad { color: #FF7A8A; } .c-good { color: #3DDC97; } .c-warn { color: #F5B841; }

/* Partner photos (About page) and profile pictures */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.person .avatar { width: 84px; height: 84px; font-size: 1.15rem; }

/* "Add to home screen" banner (src/pwa.js), phones only */
.a2hs { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 150;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px; border-radius: 16px;
  background: var(--glass-strong, rgba(10,18,31,.95)); border: 1px solid var(--edge, rgba(0,229,255,.3)); box-shadow: 0 18px 40px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: a2hs-in .35s ease-out; max-width: 520px; margin: 0 auto; }
.a2hs img { border-radius: 10px; }
.a2hs-text { display: grid; gap: 2px; font-size: .86rem; color: var(--text); } .a2hs-text b { color: var(--white); }
.a2hs-text svg { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
html[data-theme="light"] .a2hs { box-shadow: 0 14px 34px rgba(12,40,80,.18); }
@keyframes a2hs-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Monthly signal performance report (src/signal-reports.js) */
.sr-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.sr-report > *, .sr-grid > * { min-width: 0; }
.sr-report .sl-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sr-report .sl-tile .v { font-size: 1.15rem; }
.sr-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 4px 0; }
.sr-block h4 { margin: 0 0 8px; font-size: 1rem; color: var(--white); }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.sr-commentary { border-left: 3px solid var(--cyan); padding: 4px 0 4px 14px; }
.sr-commentary h4, .sr-commentary h5, .sr-commentary h6 { margin: 10px 0 4px; color: var(--white); }
.sr-commentary ul, .sr-commentary ol { padding-left: 1.2em; }

/* Ways to get signals (src/signal-access.js): partner brokers' IB links, or monthly */
.sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 6px 0 14px; }
.sa-card { border: 1px solid var(--edge, var(--line)); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--glass, rgba(16,24,38,.72)); min-width: 0; }
.sa-card h3 { margin: 0; font-size: 1.35rem; }
.sa-card h3 small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.sa-card .eyebrow { margin: 0; }
.sa-paid { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.sa-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.sa-facts li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.sa-facts span { color: var(--muted); }
.sa-facts b { text-align: right; }
.sa-guide { font-size: .86rem; color: var(--muted); }
.sa-guide ol, .sa-guide ul { padding-left: 1.2em; margin: 0; display: grid; gap: 4px; }
.sa-guide p { margin: 0; }
.sa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.sa-status p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Signal analysis charts (src/signal-charts.js). Categorical slots and status colours validated for colour-blind
   readers on both themes (dataviz validator); every chart also has labels and a table. */
:root { --ch-1: #3987e5; --ch-2: #d95926; --ch-3: #199e70; --ch-4: #c98500; --ch-5: #d55181; --ch-6: #9085e9;
  --ch-good: #1fbf6a; --ch-bad: #e5484d; --ch-neutral: #7d8796; --ch-open: #4a5566; --ch-gridc: rgba(255,255,255,.08); --ch-ink: var(--muted); }
html[data-theme="light"] { --ch-1: #2a78d6; --ch-2: #eb6834; --ch-3: #1baf7a; --ch-4: #eda100; --ch-5: #e87ba4; --ch-6: #6250d6;
  --ch-good: #0ca30c; --ch-bad: #d03b3b; --ch-neutral: #9aa3ae; --ch-open: #cfd6de; --ch-gridc: rgba(10,22,38,.09); }
.ch-card { border: 1px solid var(--edge, var(--line)); border-radius: 14px; padding: 16px; background: var(--glass, rgba(16,24,38,.72)); min-width: 0; margin-bottom: 16px; }
.ch-card h4 { margin: 0 0 4px; font-size: .95rem; color: var(--white); }
.ch-sub { margin: 0 0 10px; font-size: .78rem; color: var(--muted); }
.ch-grid2, .ch-grid3 { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ch-grid3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.ch-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ch-donut svg { width: 150px; height: 150px; flex: none; overflow: visible; }
.ch-donut circle { cursor: pointer; transition: stroke-width var(--t-fast, .16s); }
.ch-donut circle:hover, .ch-donut circle:focus-visible { stroke-width: 19; outline: none; }
.ch-dv { font: 800 17px var(--font-data, monospace); fill: var(--white); }
.ch-dk { font-size: 9px; fill: var(--ch-ink); }
.ch-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; flex: 1; min-width: 150px; }
.ch-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; }
.ch-legend i, .cmp-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ch-legend b { color: var(--white); font-family: var(--font-data, monospace); }
.ch-legend small { color: var(--muted); min-width: 2.5em; text-align: right; }
.ch-legend.ch-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .78rem; }
.ch-legend.ch-inline li { display: inline-flex; gap: 6px; }
.ch-hbars, .ch-stack { display: grid; gap: 10px; }
.ch-hrow { display: grid; grid-template-columns: minmax(70px, 28%) 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.ch-hl { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-hv { color: var(--white); font-family: var(--font-data, monospace); font-size: .82rem; white-space: nowrap; }
.ch-track { position: relative; height: 16px; }
.ch-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .6; }
.ch-bar { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; cursor: pointer; }
.ch-bar.neg { border-radius: 4px 0 0 4px; }
.ch-bar:hover, .ch-bar:focus-visible, .ch-seg span:hover, .ch-colbar:hover { filter: brightness(1.15); outline: none; }
.ch-seg { display: flex; height: 22px; gap: 2px; border-radius: 4px; overflow: hidden; }
.ch-seg span { display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); cursor: pointer; min-width: 3px; }
.ch-line { position: relative; }
.ch-line svg { width: 100%; height: 230px; display: block; cursor: crosshair; }
.ch-grid { stroke: var(--ch-gridc); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-axis0 { stroke: var(--muted); stroke-width: 1; opacity: .6; vector-effect: non-scaling-stroke; }
.ch-tick { font-size: 10px; fill: var(--ch-ink); }
.ch-path { fill: none; stroke: var(--ch-1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ch-area { fill: var(--ch-1); opacity: .1; }
.ch-end, .ch-dot { fill: var(--ch-1); stroke: var(--navy); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ch-crossline { stroke: var(--muted); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ch-endlabel { position: absolute; right: 12px; top: 0; font: 700 .85rem var(--font-data, monospace); color: var(--white); }
.ch-cols { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; align-items: end; height: 190px; }
.ch-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; min-width: 0; }
.ch-col b { font: 700 .8rem var(--font-data, monospace); color: var(--white); min-height: 1em; }
.ch-colbar { align-self: end; border-radius: 4px 4px 0 0; cursor: pointer; width: 100%; }
.ch-col small { font-size: .66rem; color: var(--muted); line-height: 1.2; }
.ch-table { margin-top: 10px; font-size: .84rem; }
.ch-table summary { cursor: pointer; color: var(--muted); font-size: .78rem; }
.ch-tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 260px; padding: 8px 10px; border-radius: 8px; font-size: .8rem; line-height: 1.4;
  background: var(--charcoal); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ch-tip b { color: var(--white); }
.cmp-dims { margin-bottom: 12px; flex-wrap: wrap; }
.cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cmp-pick select { width: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.cmp-vs { font-weight: 800; color: var(--muted); }
.cmp-table th:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.cmp-table .cmp-key { margin-right: 6px; vertical-align: -1px; }
.cmp-bar { display: block; height: 4px; margin-top: 4px; background: var(--ch-gridc); border-radius: 2px; }
.cmp-bar i { display: block; height: 100%; border-radius: 2px; }
.cmp-win, .cmp-win-key { color: var(--white); font-weight: 800; background: rgba(31,191,106,.12); }
.cmp-win-key { padding: 0 4px; border-radius: 4px; }
@media (max-width: 560px) { .ch-cols { gap: 3px; } .ch-col small { font-size: .58rem; } .ch-hrow { grid-template-columns: minmax(60px, 32%) 1fr auto; } }
.cmp-table table { min-width: 0; width: 100%; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
.cmp-table th:first-child { width: 34%; }
@media (max-width: 560px) { .cmp-table th, .cmp-table td { font-size: .78rem; padding: 7px 5px; } }

/* Floating "Get signals" button (Trading Signals page and the portal's Signals centre) */
.float-cta { position: fixed; z-index: 60; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 800; font-size: .95rem; text-decoration: none;
  color: #04121F; background: linear-gradient(135deg, var(--cyan), #00B3FF); box-shadow: 0 10px 30px rgba(0,180,255,.35), 0 0 0 1px rgba(255,255,255,.15) inset;
  transition: transform var(--t-fast, .16s), opacity var(--t-med, .28s); }
.float-cta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #04121F; opacity: .75; }
.float-cta:hover { transform: translateY(-2px); }
.float-cta:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.float-cta[hidden] { display: none; }
html[data-theme="light"] .float-cta { color: #fff; background: linear-gradient(135deg, #0070B0, #0090D0); }
html[data-theme="light"] .float-cta::before { background: #fff; }
@media (max-width: 640px) { .float-cta { left: 50%; right: auto; transform: translateX(-50%); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); } .float-cta:hover { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* Sign-up: password rules, confirm, and the human check */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.pw-rules li::before { content: "○"; display: inline-block; width: 1.2em; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓"; font-weight: 800; }
.form-note.ok { color: var(--ok); }
.form-note.bad { color: #FF7A8A; }
html[data-theme="light"] .form-note.bad { color: #C02E48; }
.pw-show { margin-top: 8px; font-size: .82rem; }
.hcheck { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass, rgba(16,24,38,.6)); max-width: 360px; }
.hcheck-box { all: unset; box-sizing: border-box; width: 28px; height: 28px; border-radius: 7px; border: 2px solid var(--muted); display: grid; place-items: center; cursor: pointer; background: var(--charcoal); }
.hcheck-box:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.hcheck-tick { width: 14px; height: 14px; }
.hcheck[data-state="working"] .hcheck-box { border-color: var(--cyan); border-right-color: transparent; border-radius: 50%; animation: hc-spin .8s linear infinite; }
.hcheck[data-state="done"] .hcheck-box { border-color: var(--ok); background: var(--ok); }
.hcheck[data-state="done"] .hcheck-tick { width: 12px; height: 7px; border-left: 3px solid #04121F; border-bottom: 3px solid #04121F; transform: rotate(-45deg) translate(1px, -1px); }
.hcheck[data-state="error"] .hcheck-box { border-color: #FF7A8A; }
.hcheck-text { font-size: .9rem; font-weight: 600; color: var(--white); }
.hcheck[data-state="done"] .hcheck-text { color: var(--ok); }
.hcheck-brand { font-size: .64rem; line-height: 1.25; color: var(--muted); text-align: right; letter-spacing: .02em; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hcheck[data-state="working"] .hcheck-box { animation: none; border-right-color: var(--cyan); } }
@media (max-width: 420px) { .pw-rules { grid-template-columns: 1fr; } }