/* SuperCharting front page (round 31). Loaded after /pub/site.css and uses its tokens (--sx-*), buttons, hero, section,
   FAQ and footer. Layout follows a big marketing home page: display hero over a glowing horizon with the product
   window rising from it, then alternating text / screenshot bands, market cards, community tiles, a pricing band,
   an FAQ and the shared footer. Page-only tokens below switch with the visitor's light / dark setting. */
:root {
  --h-frame: #2a2a2a; --h-frame-glow: 0 40px 140px -20px rgba(41,98,255,.45), 0 0 0 1px rgba(255,255,255,.06);
  --h-panel: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  --h-panel-line: rgba(255,255,255,.09); --h-pill: rgba(255,255,255,.05); --h-pill-line: rgba(255,255,255,.12);
  --h-kicker: #8fa9ff; --h-tick: #5b8cff; --h-chip: rgba(255,255,255,.06);
  --h-horizon-core: rgba(170,190,255,.95); --h-horizon-mid: rgba(41,98,255,.55); --h-horizon-far: rgba(120,60,255,.22);
}
@media (prefers-color-scheme: light) {
  :root {
    --h-frame: #d1d4dc; --h-frame-glow: 0 40px 120px -30px rgba(41,98,255,.35), 0 0 0 1px rgba(0,0,0,.06);
    --h-panel: linear-gradient(180deg, #ffffff, #f6f7fb); --h-panel-line: #e0e3eb; --h-pill: #f2f3f7; --h-pill-line: #e0e3eb;
    --h-kicker: #2962ff; --h-tick: #2962ff; --h-chip: #eef0f5;
    --h-horizon-core: rgba(41,98,255,.55); --h-horizon-mid: rgba(41,98,255,.22); --h-horizon-far: rgba(120,60,255,.10);
  }
}
body { overflow-x: hidden; }
main { overflow: hidden; }
.h-center { display: flex; justify-content: center; margin-top: 32px; }

/* hero */
.h-hero { padding: 104px 0 0; overflow: hidden; }
.h-hero h1 { max-width: 1180px; }
.h-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; }
.h-cta .sx-btn { padding: 0 32px; font-weight: 600; }
.h-note { font-size: 13px; color: var(--sx-dim); }
.h-stage { position: relative; max-width: 1360px; margin: 72px auto 0; padding: 0 40px; }
.h-horizon { position: absolute; left: 50%; top: 120px; width: 2200px; height: 1400px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 92%, var(--h-horizon-far) 96%, transparent 100%);
  box-shadow: 0 -2px 0 0 var(--h-horizon-core), 0 -30px 90px 10px var(--h-horizon-mid), 0 -120px 220px 40px var(--h-horizon-far); }
.h-horizon::after { content: ''; position: absolute; left: 50%; top: -160px; width: 900px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--h-horizon-mid), transparent); filter: blur(10px); }
.h-heroshot { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

/* framed screenshots */
.h-window { margin: 0; border-radius: 16px; overflow: hidden; background: #0f0f0f; border: 1px solid var(--h-frame); box-shadow: var(--h-frame-glow); }
.h-window img { display: block; width: 100%; height: auto; }
.h-wide { max-width: 1200px; margin: 48px auto 0; }

/* pill link, like an 'explore all features' capsule */
.h-pill { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 14px 24px 14px 22px;
  border-radius: 100px; background: var(--h-pill); border: 1px solid var(--h-pill-line); color: var(--sx-text); transition: background .15s; }
.h-pill:hover { background: var(--sx-ghost-hover); }
.h-pill b { font-size: 16px; font-weight: 600; }
.h-pill span { grid-row: 2; font-size: 14px; color: var(--sx-dim); }
.h-pill i { grid-column: 2; grid-row: 1 / 3; font: 300 30px/1 var(--sx-ui); font-style: normal; }

/* charts: four feature cards */
.h-charts h2 br { display: none; }
.h-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.h-feat, .h-tile, .h-mkt { display: block; border-radius: 16px; padding: 28px; background: var(--h-panel); border: 1px solid var(--h-panel-line); transition: border-color .15s, transform .15s; }
.h-feat:hover, .h-tile:hover, .h-mkt:hover { border-color: var(--sx-line2); transform: translateY(-2px); }
.h-feat h3, .h-tile h3, .h-mkt h3 { font: 600 20px/28px var(--sx-display); letter-spacing: -.01em; margin-bottom: 10px; }
.h-feat p, .h-tile p, .h-mkt p { margin: 0; font-size: 15px; line-height: 1.6; }

/* text + screenshot bands */
.h-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.h-split + .h-split { margin-top: 120px; }
.h-flip { grid-template-columns: 7fr 5fr; }
.h-flip .h-copy { order: 2; }
.h-copy h2 { text-align: left; }
.h-copy > p { font-size: 17px; margin: 20px 0 0; }
.h-kicker { margin: 0 0 14px; color: var(--h-kicker); font-size: 15px; font-weight: 600; }
.h-ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.h-ticks li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; color: var(--sx-text); }
.h-ticks li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--h-tick); border-bottom: 2px solid var(--h-tick); transform: rotate(-45deg); }
.h-link { display: inline-block; margin-top: 24px; color: var(--sx-accent); font-weight: 600; font-size: 16px; }
.h-link:hover { text-decoration: underline; }

/* markets */
.h-mkts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.h-mkt { padding: 32px; }
.h-flag { display: inline-block; margin-bottom: 18px; padding: 4px 12px; border-radius: 40px; background: rgba(41,98,255,.14); color: var(--h-kicker); font-size: 13px; font-weight: 600; }
.h-syms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.h-syms span { padding: 6px 12px; border-radius: 8px; background: var(--h-chip); color: var(--sx-text); font-size: 13px; font-weight: 500; }

/* phone */
.h-phonewrap { display: flex; justify-content: center; position: relative; }
.h-phonewrap::before { content: ''; position: absolute; inset: 10% 10%; background: radial-gradient(closest-side, rgba(41,98,255,.35), transparent); filter: blur(30px); }
.h-device { position: relative; margin: 0; width: 300px; padding: 10px; border-radius: 44px; background: #0b0b0b; border: 1px solid var(--h-frame); box-shadow: var(--h-frame-glow); }
.h-device img { display: block; width: 100%; height: auto; border-radius: 34px; }

/* community and learn */
.h-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.h-tile { padding: 32px; }
.h-tile span { display: inline-block; margin-top: 22px; color: var(--sx-accent); font-weight: 600; font-size: 15px; }
.h-guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.h-guides a { padding: 9px 18px; border-radius: 40px; border: 1px solid var(--h-pill-line); color: var(--sx-text); font-size: 14px; font-weight: 500; }
.h-guides a:hover { background: var(--sx-ghost-hover); }

/* pricing band */
.h-offer { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 64px; border-radius: 24px;
  background: radial-gradient(700px 360px at 85% 120%, rgba(120,60,255,.30), transparent 70%), radial-gradient(800px 400px at 10% -30%, rgba(41,98,255,.35), transparent 70%), var(--sx-card);
  border: 1px solid var(--h-panel-line); }
.h-offer h2 { text-align: left; }
.h-offer p:not(.h-kicker) { max-width: 620px; margin: 18px 0 0; font-size: 17px; }
.h-offer-act { display: flex; flex-direction: column; gap: 12px; flex: none; min-width: 230px; }

/* faq and closing call */
.h-faqs .sx-faq a { color: var(--sx-accent); }
.h-faqs .sx-faq p { margin: 0; }
.h-final { text-align: center; margin-top: 112px; }
.h-final h2 { margin-bottom: 32px; }
.h-final .sx-btn { padding: 0 32px; font-weight: 600; }

@media (max-width: 1100px) {
  .h-feats { grid-template-columns: repeat(2, 1fr); }
  .h-split { gap: 40px; }
}
@media (max-width: 860px) {
  .h-hero { padding-top: 64px; }
  .h-stage { margin-top: 48px; padding: 0 16px; }
  .h-horizon { top: 60px; width: 1300px; height: 900px; }
  .h-horizon::after { width: 500px; height: 220px; top: -110px; }
  .sx-section { padding: 64px 0; }
  .h-split, .h-flip, .h-mkts, .h-tiles { grid-template-columns: 1fr; }
  .h-split { gap: 32px; }
  .h-split + .h-split { margin-top: 80px; }
  .h-flip .h-copy { order: 0; }
  .h-copy h2 br, .h-offer h2 br { display: none; }
  .h-feats, .h-mkts, .h-tiles { margin-top: 36px; }
  .h-offer { flex-direction: column; align-items: stretch; padding: 36px 24px; }
  .h-offer-act { min-width: 0; }
  .h-window { border-radius: 12px; }
  .h-final { margin-top: 72px; }
}
@media (max-width: 560px) {
  .h-feats { grid-template-columns: 1fr; }
  .h-feat, .h-tile, .h-mkt { padding: 24px; }
  .h-device { width: 260px; }
  .h-pill { padding: 12px 20px 12px 18px; }
  .sx-faq summary { font-size: 17px; padding: 20px 0; }
}