@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #2f3241;
  --bg2: #262835;
  --panel: #363949;
  --cyan: #74b1be;
  --amber: #e9a33b;
  --green: #8af18a;
  --red: #e91616;
  --text: #e8ecf1;
  --muted: #8b93a7;
}

body {
  background: radial-gradient(1200px 600px at 70% -10%, #3a3e52 0%, var(--bg) 55%);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}

h1, h2, h3, .brand, .metric { font-family: 'Orbitron', sans-serif; }

a { color: var(--cyan); text-decoration: none; }
a:hover { opacity: .85; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem; max-width: 1100px; margin: 0 auto;
}

.logo {
  margin-top: .7rem;
}

.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: var(--cyan); }
.nav-links a { margin-left: 1.4rem; color: var(--text); font-weight: 500; font-size: .9rem; }
.nav-links a.cta { color: var(--bg); background: var(--cyan); padding: .5rem 1rem; border-radius: .4rem; font-weight: 600; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.narrow { max-width: 460px; margin: 3rem auto; }

/* Auth cards (sign in / create account): center the headings, intro,
   and footer link; keep the form fields left-aligned for readability. */
.auth-panel { text-align: center; }
.auth-panel form { text-align: left; }

.hero { text-align: center; padding: 5rem 2rem 3rem; }
.hero h1 { font-size: 2.9rem; line-height: 1.15; margin-bottom: 1.2rem; }
.hero h1 .accent { color: var(--cyan); }
.hero p { font-size: 1.15rem; color: var(--muted); max-width: 640px; margin: 0 auto 2rem; }

.btn {
  display: inline-block; background: var(--cyan); color: var(--bg);
  padding: .8rem 1.6rem; border-radius: .5rem; font-weight: 600; font-size: 1rem;
  border: none; cursor: pointer;
}
.btn.secondary { background: transparent; color: var(--cyan); border: 1px solid var(--cyan); }
.btn.danger { background: var(--red); color: #fff; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
/* Anchor-style buttons can't take :disabled -- the coming-soon state
   uses this class on both <a> and <button>. */
.btn.disabled { opacity: .5; cursor: default; pointer-events: none; filter: none; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 3rem 0; }
.card { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: .7rem; padding: 1.5rem; }
.card h3 { color: var(--cyan); font-size: 1rem; margin-bottom: .6rem; letter-spacing: .03em; }
.card p { color: var(--muted); font-size: .92rem; }

.pill { display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); border:1px solid var(--green); border-radius:1rem; padding:.2rem .7rem; margin-bottom:1rem; }

/* Signed-installer band. Green-accented rather than panel-grey so it reads
   as a verification badge instead of another feature card. */
.signed-band {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid rgba(138, 241, 138, .28);
  border-left: 3px solid var(--green);
  border-radius: .7rem;
  padding: 1.5rem;
  /* Tucked up under the trust-card grid it belongs with, and given real
     air before the "why not a free bot script?" section below -- measured
     48px above / 0px below before this.
     The top value is NEGATIVE on purpose: .grid3 carries a 3rem bottom
     margin which collapses through both wrapper .containers, so the larger
     of the two always wins and a positive margin here has no effect. The
     negative offsets that collapsed 48px down to ~24px without touching
     .grid3, which other sections share. */
  margin-top: -1.5rem;
  margin-bottom: 2.75rem;
}
.signed-mark {
  flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(138, 241, 138, .12);
  color: var(--green);
  font-size: 1.1rem;
  line-height: 1;
}
.signed-copy { min-width: 0; }
.signed-copy h3 { color: var(--green); font-size: 1rem; margin-bottom: .6rem; letter-spacing: .03em; }
.signed-copy p { color: var(--muted); font-size: .92rem; }
.signed-copy p + p { margin-top: .7rem; }
.signed-verify code {
  background: rgba(0, 0, 0, .28);
  border-radius: .25rem;
  padding: .05rem .35rem;
  color: var(--text);
  font-size: .86em;
  /* Long identifiers must not force the page to scroll sideways on mobile. */
  overflow-wrap: anywhere;
}
.signed-note { font-size: .84rem !important; opacity: .85; }

@media (max-width: 640px) {
  .signed-band { flex-direction: column; gap: .8rem; padding: 1.2rem; }
}

.price-card { text-align: center; max-width: 380px; margin: 2rem auto; }
.price { font-size: 2.6rem; font-family: 'Orbitron'; color: var(--text); }
.price span { font-size: 1rem; color: var(--muted); }
.price-features { text-align: left; margin: 1.4rem 0; color: var(--muted); font-size: .92rem; }
.price-features li { list-style: none; padding: .3rem 0 .3rem 1.5rem; position: relative; }
.price-features li::before { content: '✓'; color: var(--green); position: absolute; left: 0; }

.panel { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: .7rem; padding: 2rem; }
label { display: block; font-size: .8rem; color: var(--muted); margin: .9rem 0 .3rem; }
input {
  width: 100%; padding: .7rem .8rem; border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.2); color: var(--text); font-size: .95rem;
}
input:focus { outline: none; border-color: var(--cyan); }
.form-msg { font-size: .85rem; margin-top: .8rem; min-height: 1.2rem; }
.form-msg.error { color: var(--red); }
.form-msg.ok { color: var(--green); }

.key-box {
  font-family: 'Orbitron'; font-size: 1.1rem; letter-spacing: .1em; color: var(--cyan);
  background: rgba(0,0,0,.3); border: 1px dashed var(--cyan); border-radius: .5rem;
  padding: 1rem; text-align: center; margin: 1rem 0; word-break: break-all;
}
.status-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.status-active { color: var(--green); }
.status-lapsed { color: var(--amber); }
.status-revoked { color: var(--red); }

.warn-banner { background: rgba(233,163,59,.12); border:1px solid var(--amber); color: var(--amber); border-radius:.5rem; padding:.8rem 1rem; font-size:.82rem; margin: 1.5rem auto; max-width: 900px; }

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 3rem 2rem; }
footer a { margin: 0 .6rem; }

/* ---- mobile companion section ---- */
.companion { background: var(--bg2); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 4rem 0 3rem; margin-top: 2rem; }
.companion-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.companion h2 { font-size: 2.1rem; margin: .4rem 0 1rem; }
.companion-copy > p { color: var(--muted); line-height: 1.55; }
.companion-features { list-style: none; padding: 0; margin: 1.2rem 0; }
.companion-features li { padding: .45rem 0 .45rem 1.6rem; position: relative; color: var(--muted); line-height: 1.5; }
.companion-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.companion-features strong { color: var(--text); }
.companion-note { font-size: .85rem; color: var(--muted); border-left: 2px solid var(--cyan); padding-left: .8rem; }

/* Pure-CSS phone mockup -- no image assets. */
.phone-mock { width: 250px; margin: 0 auto; background: var(--bg); border: 2px solid rgba(255,255,255,.14); border-radius: 2rem; padding: 1rem .9rem 1.4rem; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.phone-notch { width: 84px; height: 9px; background: rgba(255,255,255,.14); border-radius: 999px; margin: 0 auto .8rem; }
.phone-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.phone-brand { color: var(--cyan); font-weight: 700; letter-spacing: .1em; font-size: .85rem; }
.phone-pill { font-size: .55rem; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: .12rem .5rem; }
.phone-card { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; padding: .6rem .7rem; margin-bottom: .6rem; }
.phone-label { color: var(--cyan); font-size: .55rem; letter-spacing: .1em; margin-bottom: .25rem; }
.phone-big { font-size: 1.25rem; font-weight: 700; }
.phone-sub { font-size: .68rem; color: var(--muted); }
.phone-sub.gain { color: var(--green); }
.phone-btn-row { display: flex; gap: .4rem; margin-top: .45rem; }
.phone-btn { flex: 1; text-align: center; font-size: .62rem; border-radius: .35rem; padding: .3rem 0; border: 1px solid rgba(255,255,255,.12); color: var(--muted); }
.phone-btn.confirm { background: #2c5b33; color: #d7ffd9; }
.phone-btn.reject { background: #5b2c2c; color: #ffd7d7; }
.phone-btn.danger { background: #7c2d2d; color: #ffdcdc; display: block; text-align: center; padding: .4rem 0; }
.phone-btn-mini { flex: 0 0 auto; padding: .15rem .5rem; font-size: .55rem; color: var(--cyan); border-color: rgba(255,255,255,.18); }
.phone-line { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.phone-line + .phone-line { margin-top: .3rem; }

/* Store badges (placeholder artwork -- see the HTML comment). */
.store-badges { text-align: center; margin-top: 3rem; }
.store-badges-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.store-badges-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: .6rem; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: .6rem; padding: .55rem 1.1rem; text-decoration: none; min-width: 11rem; }
.store-badge:hover { border-color: var(--cyan); }
.store-badge-text { display: flex; flex-direction: column; text-align: left; font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
.store-badge-text small { font-size: .6rem; font-weight: 400; letter-spacing: .04em; }
.store-badges-note { color: var(--muted); font-size: .8rem; margin-top: .9rem; }

@media (max-width: 720px) {
  .grid3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  /* The desktop 5rem top padding leaves a cavernous gap under the nav
     once the nav itself stacks to two rows on a phone. */
  .hero { padding-top: 2.25rem; }
  /* .btn is inline-block with no margin: fine side by side on desktop,
     but when the pair wraps to stacked on a phone they sit flush against
     each other. Applies to the hero pair and the closing CTA pair only --
     a blanket .btn margin would push the full-width form submit buttons
     past their container. */
  .hero .btn, .cta-band .btn { margin: .4rem .3rem; }
  .nav { flex-direction: column; gap: .8rem; }
  /* Stacked nav links: replace the desktop margin-left spacing (which
     shoves a LONE link off-center) with flex gap -- centered whether
     the page has one link or three, with real space between them. */
  .nav-links { display: flex; justify-content: center; align-items: center; gap: 1.1rem; }
  .nav-links a { margin-left: 0; }
  .companion-inner { grid-template-columns: 1fr; }
  .phone-mock { margin-top: 1rem; }
  /* Give the auth card side breathing room so it's a centered card,
     not edge-to-edge, on narrow screens. */
  .narrow { margin: 1.5rem 1rem; }
}

/* ---- landing: live demo embed ---- */
.demo-strip { padding: 1.5rem 1rem 0; }
.demo-embed {
  max-width: 1060px; margin: 0 auto;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(116, 177, 190, 0.22);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
/* Two changes when this became a real video rather than the old
   self-running animation:
   - pointer-events is no longer none. It was correct for a decorative
     loop, but it silently swallows the click on a play button, so the
     video would have looked broken to every visitor who tried it.
   - aspect-ratio instead of a fixed 700px height. The recording is
     1920x1080, and a fixed height at an arbitrary ratio letterboxes it
     inside its own frame at some widths. */
.demo-embed iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}

/* ---- landing: FAQ ---- */
.faq-section { padding: 2.5rem 1rem 1rem; }
.faq-title { text-align: center; margin-bottom: 1.4rem; }
.faq {
  max-width: 760px; margin: 0 auto .6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: .6rem; background: rgba(255, 255, 255, 0.02);
}
.faq summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 600;
  list-style: none; position: relative; padding-right: 2.4rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); color: var(--cyan); font-size: 1.2rem;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { padding: 0 1.1rem 1rem; color: var(--muted, #9aa0b0); line-height: 1.6; margin: 0; }
/* Stacked paragraphs inside one answer need the gap the single-p padding
   can't give (that padding is the answer's bottom inset, not a rhythm). */
.faq p + p { padding-top: .7rem; margin-top: -.4rem; }
/* Matches .signed-verify code, so the publisher name a reader is told to
   look for renders identically in the FAQ and in the signed band above. */
.faq code {
  background: rgba(0, 0, 0, .28);
  border-radius: .25rem;
  padding: .05rem .35rem;
  color: var(--text);
  font-size: .86em;
  overflow-wrap: anywhere;
}

/* ---- Billing interval toggle (pricing page) ---- */
.billing-toggle {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  margin: 0 0 1rem;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2rem;
}
.billing-option {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 2rem;
  padding: .45rem 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.billing-option:hover { color: var(--text); }
.billing-option.is-active {
  background: var(--cyan);
  color: #1a2228;
}
.save-badge {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: 1rem;
  background: rgba(0,0,0,.18);
}
.billing-option.is-active .save-badge { background: rgba(0,0,0,.22); }
.billing-option:not(.is-active) .save-badge { background: var(--green); color: #1a2228; }
.price-sub { color: var(--muted); font-size: .85rem; margin: .25rem 0 1rem; }

/* Free-tier note on the pricing page. Deliberately NOT a price card:
   paper mode has no plan to choose and no signup, so presenting it like
   a purchasable tier sent people looking for a checkout that does not
   exist. */
.free-note {
  max-width: 640px;
  margin: 2rem auto 0;
  padding: .9rem 1.1rem;
  text-align: center;
  font-size: .92rem;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid rgba(138,241,138,.35);
  border-radius: .7rem;
}
.free-note a { color: var(--cyan); }

/* Requirement footnote: paper mode still needs a broker connected for
   market data. Stated wherever "free" is claimed, so the first-run
   experience never contradicts the pitch. */
.req-note {
  max-width: 640px;
  margin: .9rem auto 0;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
}

/* In the hero this note sits BELOW the buttons, and it needs the same
   breathing room the buttons get from the price line above them.
   Specificity, not source order, is why this rule has to exist: the
   generic `.hero p` (0,1,1) outranks `.req-note` (0,1,0), so it was
   overriding margin-top to 0 and welding the note to the buttons. */
.hero .req-note {
  margin-top: 2rem;   /* matches the 2rem bottom margin on `.hero p` */
}