/* =========================================================
   StartSellingStock — FINALIZED STYLESHEET (v8)
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#0b0b12;
  --card:#141424;
  --muted:#9aa3b2;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --text:#e6e8ee;
  --ok:#10b981;
  --warn:#f59e0b;

  --space-1:6px; --space-2:10px; --space-3:14px;
  --space-4:20px; --space-5:28px; --space-6:36px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
:target{scroll-margin-top:80px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  background: linear-gradient(180deg,#0b0b12 0%,#0c0c14 60%,#0b0b12 100%);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
@media(min-width:900px){.section{padding:72px 0}}

h1{font-size:clamp(32px,4vw,52px);line-height:1.06;margin:0;text-align:center}
h2{font-size:clamp(22px,3vw,32px);margin:0 0 12px;text-align:center}
h3{text-align:center}
.sub,.subdesc{color:var(--muted);max-width:720px;margin:14px auto 26px;text-align:center}
.sr-only{position:absolute;left:-9999px}

/* ---------- Section “band” panels ---------- */
.section.banded{
  position:relative;
  background:rgba(23,23,40,.72);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.28);
  border-radius:16px;
  padding:56px 20px;
  margin:24px 0;
}
.section.no-panel{background:transparent;border:0;box-shadow:none;margin:0}

/* ---------- Header & Hero ---------- */
header{
  padding:24px 20px;max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between
}
.logo{font-weight:800;letter-spacing:.3px}
.pill{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);padding:6px 10px;border-radius:999px;color:#c4b5fd;font-size:12px}
.hero{padding:96px 0 36px;text-align:center}

/* ---------- Buttons ---------- */
.btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-3)}
.btn{
  display:inline-flex;                
  align-items:center;                 
  justify-content:center;             
  padding:14px 20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:#1b1b2e;
  color:var(--text);
  font-weight:650;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
  will-change:transform;
}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;animation:glow 3.6s ease-in-out infinite}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.14)}
.btn.small{padding:10px 14px;border-radius:10px;font-size:13px}
.btn:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.btn.primary:hover{filter:brightness(1.06)} /* tiny pop for gradient buttons */


/* ---------- Cards & Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:var(--space-5);text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.4);transition:border-color .18s ease,transform .18s ease
}
.card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-2px)}
.meta{font-size:13px;color:var(--muted)}

/* ---------- Value props icons ---------- */
.value-grid{align-items:stretch}
.vcard{display:flex;flex-direction:column;align-items:center;text-align:center}
.vicon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;color:var(--accent);background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.25)}

/* ---------- Trust chips ---------- */
.trust-mini,.trust-bar ul{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}
.trust-mini li,.trust-bar li{font-size:12px;color:var(--muted);background:#1b1b2e;border:1px solid rgba(255,255,255,.06);padding:6px 12px;border-radius:999px}
.hero-trust{margin-top:18px}

/* =========================================================
   EDITOR’S SHORTLIST (dynamic, full-width banner)
   ========================================================= */
.shortlist-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;margin-top:28px;
}
.pick{
  position:relative;background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:28px 20px 20px;text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pick:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.pick-banner{
  position:absolute;top:0;left:0;right:0;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;font-weight:700;font-size:15px;border-radius:18px 18px 0 0;
}
.pick.featured{background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(34,211,238,.10)),var(--card);border-color:rgba(139,92,246,.4);transform:scale(1.02);z-index:1}
.pick.featured .pick-banner{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.pick h3{margin-top:58px;margin-bottom:10px;font-size:20px;font-weight:800}
.pick ul{list-style:none;margin:0 0 20px;padding:0;color:var(--muted);text-align:left;display:inline-block}
.pick li{margin:6px 0}
.pick-cta{display:flex;justify-content:center}

/* =========================================================
   COMPARE PLATFORMS (dynamic, 5-column grid)
   ========================================================= */
.compare-grid{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.compare-row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto; /* name | bestfor | fees | highlights | CTA */
  align-items:center;gap:10px;
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:16px 20px;box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.compare-col{font-size:14px;color:var(--text)}
.compare-col.name strong{display:block;font-size:16px;color:#fff}
.compare-col.name span{display:block;color:var(--muted);font-size:13px}
.compare-col.highlights{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#1b1b2e;border:1px solid rgba(255,255,255,.08);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:12px}
.compare-col.cta{text-align:right}

@media(max-width:760px){
  .compare-row{grid-template-columns:1fr; text-align:center}
  .compare-col.cta{text-align:center}
}
/* ----- Compare Platforms: header labels (grid to match rows) ----- */
.compare-head{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 120px; /* EXACT match to .compare-row */
  align-items:left;
  gap:10px;                    /* match row gap */
  padding:0 20px 8px;          /* rows have 16px 20px; this sits above them */
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:8px;
}

/* Rows: same grid template as header */
.compare-row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 120px;  /* <- fixed CTA width */
  align-items:left;
  gap:10px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}

/* Keep the CTA pinned to the right edge of its track */
.compare-col.cta{ justify-self:end; text-align:right; }


/* Hide header when rows stack on mobile */
@media (max-width:760px){
  .compare-head{ display:none; }
}
@media(max-width:760px){
  .compare-head{align-items:center}
  .compare-row{align-items:center}
}

/* =========================================================
   QUICK-GUIDES
   ========================================================= */
.qg-section{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;margin:28px 0}
.qg-section.reverse{direction:rtl}
.qg-section>*{direction:ltr}
.qg-section .qg-text{text-align:left}
.figure{position:relative;overflow:hidden;margin:0 0 var(--space-4)}
.figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08);filter:saturate(1.02) contrast(1.02)}
.figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,20,.35),rgba(10,10,20,.35));pointer-events:none;border-radius:inherit}
.figure figcaption{font-size:12px;color:var(--muted);margin-top:8px}
@media(min-width:900px){
  .qg-section{grid-template-columns:1fr 1fr;gap:48px}
  .qg-section.reverse{grid-template-columns:1fr 1fr}
  .qg-section .figure img{max-height:420px;object-fit:cover}
}

/* =========================================================
   FLOATING CARD CTA (compact opt-in)
   ========================================================= */
.cta-float{padding:0}
.cta-card{
  position:relative;margin:0 auto;max-width:980px;
  background:linear-gradient(180deg,rgba(27,27,46,.88),rgba(20,20,36,.92));
  border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:0 0 16px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden;text-align:center
}
.cta-card::before{
  content:"";position:absolute;inset:-1px;border-radius:24px;
  background:radial-gradient(600px 260px at 20% 0,rgba(139,92,246,.25),transparent),radial-gradient(600px 260px at 80% 100%,rgba(34,211,238,.18),transparent);
  z-index:0;pointer-events:none
}
.cta-card-head{position:relative;z-index:1;padding:24px 24px 6px}
.cta-emoji{font-size:28px;margin-bottom:8px}
.cta-proof{position:relative;z-index:1;margin-top:8px}
.stars{display:flex;gap:4px;justify-content:center;margin-bottom:8px;color:#fbbf24}
.star{width:18px;height:18px;display:block;fill:currentColor;opacity:.95}
.star.half .half-outline{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.6}
.metrics{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:13px}
.metrics span{background:#1b1b2e;border:1px solid rgba(255,255,255,.06);padding:6px 10px;border-radius:999px}

/* Opt-in compact */
.optin{display:flex;gap:10px;justify-content:center}
.optin input{background:#1b1b2e;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:10px 14px;border-radius:12px;min-width:260px}
.optin input::placeholder{color:var(--muted)}
@media(max-width:560px){.optin{flex-direction:column;align-items:center;width:100%}.optin input,.optin .btn{width:86%}}

/* =========================================================
   Sticky mobile CTA
   ========================================================= */
.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:14px;z-index:50;display:none;
  text-align:center;padding:14px 20px;border-radius:14px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
@media(max-width:820px){.sticky-cta{display:block}}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{margin-top:20px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(10,10,18,.6),rgba(10,10,18,.9))}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 2fr;gap:28px;padding:36px 20px}
.footer-col h4{margin:0 0 10px;font-size:14px;letter-spacing:.3px;text-transform:uppercase;color:#cfd2ff}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:8px 0}
.footer-col a{color:var(--text);opacity:.85}
.footer-col a:hover{opacity:1;text-decoration:underline}
.footer-brand .logo{font-weight:800;margin-bottom:8px}
.footer-social{display:flex;gap:10px;margin-top:10px}
.footer-social a{width:34px;height:34px;display:grid;place-items:center;background:#1b1b2e;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#cdd0ff;opacity:.9;transition:.18s}
.footer-social a:hover{opacity:1;transform:translateY(-1px)}
.footer-news .optin--footer{display:flex;gap:10px;margin-top:10px}
.footer-news input{background:#1b1b2e;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:12px 14px;border-radius:12px;min-width:220px}
.footer-news input::placeholder{color:var(--muted)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;background:rgba(0,0,0,.2)}
.footer-bottom-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0 20px}
.to-top{color:#c4b5fd;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#1b1b2e}
.to-top:hover{border-color:rgba(255,255,255,.16)}
@media(max-width:1060px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}.footer-news{grid-column:1 / -1}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}.footer-bottom-inner{justify-content:center;text-align:center}.footer-news .optin--footer{flex-direction:column;align-items:stretch}}

#newsletter{
   margin: 5px;
   padding: 5px;
}

/* ===============================
   EDITOR'S SHORTLIST (JSON)
   =============================== */

.shortlist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:28px;
}

.pick{
  position:relative;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:26px 18px 20px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.pick:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.12); box-shadow:0 12px 30px rgba(0,0,0,.4); }

/* Full-width banner across the top */
.pick-banner{
  position:absolute; inset:0 0 auto 0; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff; font-weight:700; font-size:14px; letter-spacing:.2px;
  border-radius:18px 18px 0 0;
}

/* Featured (middle) card emphasis */
.pick.featured{
  background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(34,211,238,.10)),var(--card);
  border-color:rgba(139,92,246,.42);
  transform:translateY(-2px);
  z-index:1;
}
.pick.featured .pick-banner{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
}

/* Title sits below the banner */
.pick h3{
  margin:58px 0 10px; /* 42px banner + spacing */
  font-size:20px; font-weight:800; color:#fff;
}

/* Bullets */
.pick ul{
  list-style:none; padding:0; margin:0 0 16px;
  color:var(--muted); text-align:left; display:inline-block;
}
.pick li{ margin:6px 0; }

/* CTA */
.pick-cta{ display:flex; justify-content:center; }
.pick .btn{ padding:12px 22px; border-radius:12px; }

/* Mobile tweaks */
@media (max-width:560px){
  .pick{ padding:22px 16px 18px; }
  .pick h3{ margin-top:54px; }
}

/* ===============================
   COMPARE PLATFORMS (JSON)
   =============================== */

/* Header row (desktop/tablet) */
.compare-head{
  display:grid;
  align-items: left;
  grid-template-columns:1.3fr 1fr 1fr 1.6fr auto; /* name / bestfor / fees / highlights / cta */
  gap:12px; align-items:center;
  color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  padding:8px 2px 6px;
}

/* Body rows (match the same grid) */
.compare-grid{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }

.compare-row{
  display:grid;
  align-items: left;
  grid-template-columns:1.3fr 1fr 1fr 1.6fr auto;
  gap:12px; align-items:center;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}

.compare-col{ font-size:14px; color:var(--text); }
.compare-col.name strong{ display:block; font-size:16px; color:#fff; }
.compare-col.name span{ color:var(--muted); font-size:13px; }

.compare-col.highlights{ display:flex; flex-wrap:wrap; gap:8px; }
.compare-col .chip{
  background:#1b1b2e; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted);
}

.compare-col.cta{ text-align:right; }
.btn.small{ padding:10px 14px; font-size:14px; border-radius:10px; }

/* Button hover parity (match other primary buttons) */
.compare-grid .btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none; color:#fff;
  transition:transform .18s ease, opacity .18s ease;
}
.compare-grid .btn.primary:hover{ transform:translateY(-2px); opacity:.92; }

/* Header alignment (keep all left except CTA) */
.compare-head .name,
.compare-head .bestfor,
.compare-head .fees,
.compare-head .highlights{ text-align:left; }
.compare-head .cta{ text-align:right; }

/* Mobile: collapse to one column, center CTA, hide header */
@media (max-width:760px){
  .compare-head{ display:none; align-items:center; }

  .compare-row{
    grid-template-columns:1fr;
    gap:6px; padding:14px 14px;
     align-items:center;
  }

  .compare-col.cta{ text-align:center; margin-top:6px; align-item:center;}
}

/* Very narrow devices: shave padding a touch */
@media (max-width:380px){
  .compare-row{ padding:12px 12px; }
}

/* ===============================
   FAQ SECTION
   =============================== */

.faq {
  max-width: 780px;
  margin: 10px 250px;
  text-align: left;
}

.faq h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #fff;
}

.faq-item {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.faq-question {
  width: 100%;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: left;
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent2);
}

.faq-answer {
  display: none;
  padding: 0 18px 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Optional subtle animation for expand */
.faq-answer {
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .faq {
    margin: 40px 16px;
  }
  .faq-question {
    font-size: 14px;
    padding: 12px 14px;
  }
  .faq-answer {
    font-size: 13px;
  }
}
/* =========================================
   Compare Platforms — mobile centering fix
   ========================================= */
@media (max-width: 760px) {
  /* Stack each row as a card */
  .compare-grid .compare-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
  }

  /* Let each cell take full width in the stack */
  .compare-grid .compare-row .compare-col{
    flex: 0 0 auto;
    width: 100%;
  }

  /* Center the highlight chips */
  .compare-grid .compare-row .highlights{
    justify-content: center;
    display: flex;           /* ensure it's flex on mobile too */
    gap: 8px;
    margin-top: 8px;
  }

  /* Center the CTA */
  .compare-grid .compare-row .cta{
    text-align: center;
    margin-top: 12px;
  }
  .compare-grid .compare-row .cta .btn{
    margin: 0 auto;
  }
}