/* ========== Base Reset ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* ========== Layout Containers ========== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========== Header / Navbar ========== */
.site-header {
  background: #111;
  border-bottom: 1px solid #222;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
}
.logo-mark {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #00ff88, #00cc44);
  border-radius: 6px;
  margin-left: 0.5rem;
}

/* Ensure header logo image stays small */
.logo img {
  height: 24px;
  width: auto;
  display: block;
  margin-right: 0.5rem;
}

.main-nav .nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  font-weight: 500;
  transition: color .2s;
}
.nav-link:hover,
.nav-link.is-active {
  color: #00ff88;
}

.auth-actions {
  display: flex;
  gap: 1rem;
}
.btn {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.btn-ghost {
  border: 1px solid #555;
  background: transparent;
  color: #fff;
}
.btn-ghost:hover { border-color: #00ff88; color: #00ff88; }
.btn-primary {
  background: #00ff88;
  color: #000;
}
.btn-primary:hover { background: #00cc44; }
.nav-toggle {display: none;}

/* ========== Hero Section ========== */
.hero {
  display: grid;
  align-items: center;
  padding: 4rem 0 3rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.hero-form {
  display: flex;
  margin-bottom: 1rem;
}
.hero-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 999px 0 0 999px;
  border: none;
  outline: none;
  font-size: 1rem;
}
.hero-form .btn-accent {
  border-radius: 0 999px 999px 0;
  background: #00ff88;
  color: #000;
  font-weight: 600;
}
.hero-form .btn-accent:hover { background: #00cc44; }

.social-auth {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #111;
  border: 1px solid #333;
  font-weight: 600;
}
.social:hover { border-color: #00ff88; }

.reserve-note {
  font-size: 0.875rem;
  color: #000000;
}

.hero-visual img {
  display: block;
  max-width: 100%;
}

/* ========== Promo Cards ========== */
.promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.card {
  background: #111;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border .2s;
}
.card:hover { border-color: #00ff88; }
.card-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.card-cta {
  align-self: flex-start;
  font-weight: 600;
  color: #00ff88;
}

/* ========== Footer ========== */
.site-footer {
  border-top: 1px solid #222;
  background: #111;
  padding: 2rem 0;
  margin-top: 3rem;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.site-footer a { color: #aaa; }
.site-footer a:hover { color: #00ff88; }
.legal {
  font-size: 0.875rem;
  color: #666;
  text-align: center;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-form { flex-direction: column; }
  .hero-form input { border-radius: 999px; margin-bottom: 0.5rem; }
  .hero-form .btn-accent { border-radius: 999px; }
  .header-inner { flex-wrap: wrap; }
  .main-nav {
    transform: translateX(100%);
    position: fixed;
    height: 100vh;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px 0 0 20px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(0, 0, 0, 0.5),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1),
            inset 0 0 28px 14px rgba(0, 0, 0, 1.4);
    overflow: hidden;
    transition: .3s linear;
  }
  body.fixed {overflow:hidden}
  .main-nav.active {
    transform: translateX(0);
  }
  .main-nav::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.8),
            transparent,
            rgba(0, 0, 0, 0.3)
    );
  }
  .main-nav .nav-list {
    flex-direction:column;
    margin-top: 120px;
    padding:0 50px;
  }
  .nav-link {
    font-size:20px;
  }
  .nav-toggle { display: block; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
  }

  .nav-toggle span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
  }

  /* ACTIVE STATE: when aria-expanded is true */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  .site-header {padding: 0 10px;}
  .site-header .logo { margin: 0 auto 15px;}
}
/* Link this file in index.html head: <link rel="stylesheet" href="/assets/css/markets.css"> */

:root {
  --bg:#000; --panel:#0e0e0e; --panel-2:#111; --stroke:#222; --muted:#a5a5a5; --green:#00ff88; --green-2:#00cc44; --white:#fff;
}

/* Section wrapper */
.markets { padding: 4rem 0; }
.section-title { font-size: 2rem; font-weight: 800; text-align: center; margin-bottom: 2rem; }

/* Grid two boards */
.markets-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }

/* Board card */
.board { background: var(--panel); border: 1px solid var(--stroke); border-radius: 20px; padding: 1rem; }
.board-head { display:flex; align-items:center; justify-content:space-between; padding: .5rem 1rem 1rem; }
.board-head.split h3 { font-size:1.125rem; }
.board-next { width: 36px; height: 36px; border-radius: 999px; border:1px solid #2a2a2a; background: #121212; }
.board-next:hover { border-color: var(--green); }

/* Tabs */
.tabs { display:flex; gap: 1.25rem; }
.tab { background: transparent; border: 0; color: #cfcfcf; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.tab.is-active { color: var(--white); }

/* Table */
.table { width: 100%; }
.table-row { display: grid; grid-template-columns: 1.2fr .9fr .7fr 1.1fr .6fr; align-items: center; gap: 0.75rem; padding: .9rem 1rem; border-top: 1px solid #141414; }
.table-row:first-child { border-top: 0; }
.table-head { color: var(--muted); font-size: .9rem; padding-top: .5rem; padding-bottom:.5rem; }
.cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-pair { display:flex; align-items:center; gap:.6rem; }
.token { width: 28px; height: 28px; border-radius: 50%; background:#1a1a1a; }
.col-price { font-variant-numeric: tabular-nums; }
.col-change { font-weight:600; }
.col-change.up { color: var(--green); }
.btn.btn-pill { padding:.4rem .9rem; border:1px solid #2a2a2a; border-radius:999px; font-weight:600; }
.btn.btn-pill:hover { border-color: var(--green); color: var(--green); }

/* Sparkline */
.spark { width: 120px; height: 26px; fill: none; stroke: var(--green); stroke-width: 2; }

/* Right board has 3 columns */
.board:nth-child(2) .table-row { grid-template-columns: 1.4fr 1fr .8fr; }

/* Responsive */
@media (max-width: 1024px) { .markets-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .table-row { grid-template-columns: 1.2fr .9fr .7fr 1fr .6fr; padding:.75rem .75rem; }
  .spark { width: 100px; }
  .section-title { font-size: 1.6rem; }
}
/* Link this file in head: <link rel="stylesheet" href="/assets/css/faq.css"> */

.faq { padding: 4rem 0; background:#000; }
.section-title { font-size: 2rem; font-weight: 800; text-align: center; margin-bottom: 2rem; }

.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #222; }
.faq-question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 1.25rem 0;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
.faq-question:hover { color:#00ff88; }

.faq-answer { padding: 0 0 1rem 0; color:#aaa; font-size:1rem; line-height:1.6; }

.icon { width: 16px; height: 16px; display:inline-block; position:relative; }
.icon::before, .icon::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: transform .2s;
}
.icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }

.faq-question[aria-expanded="true"] .icon::after { transform: scaleY(0); }

@media (max-width: 640px){
  .section-title{ font-size:1.6rem; }
  .faq-question{ font-size:1rem; }
}
/* Link in head: <link rel="stylesheet" href="/assets/css/platform.css"> */

.what-is{ padding:4rem 0; background:#000; position:relative; }
.what-is::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 420px at 50% -140px, rgba(0,255,136,.12), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px);
}

.what-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items:center; }

/* Left */
.eyebrow{ color:#8bf7bd; display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#00ff88; display:inline-block; }
.title{ font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.lead{ color:#b8b8b8; margin-bottom:1.25rem; max-width:760px; }

.benefits{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.25rem; }
.benefit{ display:flex; align-items:flex-start; gap:.75rem; }
.h3{ font-size:1.05rem; font-weight:800; }
.muted{ color:#cfcfcf; }

.icon{ width:44px; height:44px; border-radius:12px; background:#121212; border:1px solid #2a2a2a; position:relative; }
.icon::after{ content:""; position:absolute; inset:10px; border-radius:6px; background:#00ff88; opacity:.9; }
.icon.speed{ background:linear-gradient(#2bdcff,#1ea5ff); }
.icon.shield{ background:linear-gradient(#2dd45b,#18a84a); }
.icon.earn{ background:linear-gradient(#6b5bff,#3e2bff); }

.cta-row{ display:flex; gap:1rem; margin-bottom:1.25rem; }

.stats{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.stat{ background:#0e0e0e; border:1px solid #1f1f1f; border-radius:12px; padding:.75rem 1rem; }
.stat dt{ color:#b8b8b8; font-size:.8rem; }
.stat dd{ font-weight:800; font-size:1.125rem; }

/* Right */
.what-visual{ border-radius:20px; overflow:hidden; background:#0e0e0e; border:1px solid #1f1f1f; }
.what-visual img{ display:block; width:100%; height:auto; }

/* Responsive */
@media (max-width: 1100px){ .what-grid{ grid-template-columns: 1fr; } .title{ font-size:1.75rem; }}
@media (max-width: 640px){ .cta-row{ flex-direction:column; } }
/* Link in head: <link rel="stylesheet" href="/assets/css/ai.css"> */

.ai{ padding:4rem 0; background:#000; position:relative; }
.ai::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(1100px 420px at 50% -140px, rgba(0,255,136,.12), rgba(0,0,0,0) 60%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px);
}

.ai-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem; align-items:stretch; }
.eyebrow{ color:#8bf7bd; display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#00ff88; display:inline-block; }
.title{ font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.lead{ color:#b8b8b8; margin-bottom:1.25rem; max-width:760px; }

.ai-features{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.feature{ display:flex; align-items:flex-start; gap:.75rem; background:#0e0e0e; border:1px solid #1f1f1f; border-radius:16px; padding: .9rem; }
.h3{ font-size:1.05rem; font-weight:800; }
.muted{ color:#cfcfcf; }

.icon{ width:44px; height:44px; border-radius:12px; background:#121212; border:1px solid #2a2a2a; position:relative; }
.icon::after{ content:""; position:absolute; inset:10px; border-radius:6px; background:#00ff88; opacity:.9; }
.icon.radar{ background:linear-gradient(#2bdcff,#1ea5ff); }
.icon.shield{ background:linear-gradient(#2dd45b,#18a84a); }
.icon.chat{ background:linear-gradient(#6b5bff,#3e2bff); }
.icon.beaker{ background:linear-gradient(#ff8f46,#ff5c00); }

/* Code panel */
.ai-panel{ background:#0e0e0e; border:1px solid #1f1f1f; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.panel-head{ display:flex; align-items:center; gap:.4rem; padding:.5rem .75rem; background:#0b0b0b; border-bottom:1px solid #1a1a1a; }
.panel-title{ margin-left:auto; color:#9a9a9a; font-size:.85rem; }
.panel-head .dot{ width:10px; height:10px; border-radius:50%; background:#2a2a2a; }
.panel-head .dot.red{ background:#ff5f56; }
.panel-head .dot.yellow{ background:#ffbd2e; }
.panel-head .dot.green{ background:#27c93f; }

.code{ margin:0; padding:1rem; line-height:1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#e6e6e6; }
.code .c{ color:#7f7f7f; }
.code .kw{ color:#7ee787; font-weight:700; }
.code .num{ color:#7db7ff; }
.code .str{ color:#ffb86b; }

/* Responsive */
@media (max-width: 1100px){ .ai-grid{ grid-template-columns: 1fr; } .title{ font-size:1.75rem; } }
@media (max-width: 640px){ .ai-features{ grid-template-columns: 1fr; } }
/* Link in head: <link rel="stylesheet" href="/assets/css/success.css"> */

.success{ padding:4rem 0 4.5rem; background:#000; position:relative; }
.success::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(1100px 460px at 50% -160px, rgba(0,255,136,.10), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
}
.success-head{ text-align:center; margin-bottom:1.5rem; }
.eyebrow{ color:#8bf7bd; display:inline-flex; align-items:center; gap:.5rem; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#00ff88; display:inline-block; }
.title{ font-size:2rem; font-weight:800; margin:.5rem 0; }
.lead{ color:#b8b8b8; }

/* Shared story block */
.story{ padding: 1.25rem 0; }
.story-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items:stretch; min-height:400px; }
.story-grid.reverse{ grid-template-columns: 1fr 1.05fr; }

.story-media{ border-radius:20px; overflow:hidden; background:#0e0e0e; border:1px solid #1f1f1f; display:flex; align-items:center; justify-content:center; }
.story-media img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Normalize success story image block sizes via aspect ratio */
.story-media{ aspect-ratio: 13 / 9; }
/* Hard enforce equal heights so Mei matches Alex/Ravi */
.story-a .story-media,
.story-b .story-media,
.story-c .story-media{ height:360px !important; }
.story-a .story-media img,
.story-b .story-media img,
.story-c .story-media img{ width:100% !important; height:100% !important; object-fit:cover !important; }
@media (max-width: 980px){
  .story-a .story-media,
  .story-b .story-media,
  .story-c .story-media{ height:300px !important; }
}
@media (max-width: 640px){
  .story-a .story-media,
  .story-b .story-media,
  .story-c .story-media{ height:220px !important; }
}

.story-body{ background:#0e0e0e; border:1px solid #1f1f1f; border-radius:20px; padding:1.25rem; position:relative; display:flex; flex-direction:column; justify-content:space-between; }
.story-title{ font-size:1.375rem; font-weight:800; margin-bottom:.25rem; }
.tag{ color:#8bf7bd; font-weight:700; margin-bottom:.75rem; }

.highlights{ display:flex; flex-wrap:wrap; gap: .75rem; margin-top:.75rem; }
.hl{ background:#101010; border:1px solid #1f1f1f; border-radius:12px; padding:.5rem .75rem; }
.hl dt{ color:#b8b8b8; font-size:.8rem; }
.hl dd{ font-weight:800; }

/* Unified card style for all stories */
.story-b .card{ display:flex; flex-direction:row; gap:2rem; background:#0e0e0e; border:1px solid #1f1f1f; border-radius:22px; padding:1.25rem; min-height:400px; }
.story-b .card-media{ flex:0 0 40%; border-radius:16px; overflow:hidden; border:1px solid #1c1c1c; display:flex; align-items:center; justify-content:center; }
.story-b .card-media img{ width:100%; height:100%; object-fit:cover; }
/* Ensure Mei (story-b) media width matches others on desktop */
#success .story-b .card{ align-items:center; }
@media (min-width: 1200px){
  #success .story-b .card-media{ flex:0 0 520px !important; max-width:520px !important; height:360px !important; }
}
.story-b .card-copy{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.story-b .card-copy .quote{ font-size:1.125rem; line-height:1.6; color:#e5ffe5; border-left:3px solid #00ff88; padding-left:.75rem; margin:.5rem 0; }

/* Badges (Story C) */
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }
.badges li{ background:#101010; border:1px solid #2a2a2a; border-radius:999px; padding:.35rem .75rem; font-weight:700; }

/* Visual separators */
.story-a .story-body::after,
.story-c .story-body::after{ content:""; position:absolute; right:-10px; top:20%; width:10px; height:60%; border-radius:8px; background:linear-gradient(#00ff88,#008844); filter: blur(6px); opacity:.6; }
.story-c .story-body::after{ left:-10px; right:auto; }

/* Responsive */
@media (max-width: 1200px){ .story-b .card{ flex-direction:column; } }
@media (max-width: 980px){
  .story-grid, .story-grid.reverse{ grid-template-columns: 1fr; min-height:auto; }
  .story-b .card{ flex-direction:column; min-height:auto; }
}
@media (max-width: 640px){ .title{ font-size:1.6rem; } }
/* ===== CSS (legal.css) ===== */
.legal{ padding:4rem 0; background:#000; position:relative; isolation:isolate; text-align:center; }
.legal::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:
  radial-gradient(1100px 460px at 50% -160px, rgba(0,255,136,.10), rgba(0,0,0,0) 60%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px);
}

.legal-center{ max-width:820px; margin:0 auto; position:relative; z-index:1; }
.legal-head{ margin-bottom:2rem; }
.section-title{ font-size:2rem; font-weight:800; line-height:1.2; letter-spacing:-0.01em; margin-bottom:.75rem; color:#fff; }
.section-sub{ color:#b8b8b8; margin-bottom:1.5rem; }

.eyebrow{ color:#8bf7bd; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:.5rem; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#00ff88; display:inline-block; box-shadow:0 0 0 4px rgba(0,255,136,.1); }

.legal-points{ margin:1rem 0; background:linear-gradient(180deg, rgba(14,14,14,.95), rgba(12,12,12,.9)); border:1px solid #1f1f1f; border-radius:16px; padding:1.25rem; text-align:left; }
.legal-points h3{ font-size:1.05rem; font-weight:800; margin:0 0 .35rem; color:#fff; }
.legal-points p{ color:#cfcfcf; }

.cta-row{ display:flex; justify-content:center; gap:1rem; margin-top:2rem; }

@media(max-width:640px){ .section-title{ font-size:1.6rem; } .cta-row{ flex-direction:column; } }
/* Link in head: <link rel="stylesheet" href="/assets/css/proscons.css"> */

.proscons{ padding:4rem 0; background:#000; position:relative; }
.proscons::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(1000px 400px at 50% -120px, rgba(0,255,136,.1), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
}

.proscons-head{ text-align:center; margin-bottom:2rem; position:relative; z-index:1; }
.section-title{ font-size:2rem; font-weight:800; line-height:1.2; color:#fff; margin-bottom:.5rem; }
.section-sub{ color:#b8b8b8; max-width:720px; margin:0 auto; }

/* Grid */
.proscons-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; position:relative; z-index:1; }

/* Cards */
.card{ border-radius:20px; padding:1.5rem; background:#0e0e0e; border:1px solid #1f1f1f; display:flex; flex-direction:column; }
.card h3{ font-size:1.25rem; font-weight:800; margin-bottom:1rem; color:#fff; }

/* Lists */
.list{ display:flex; flex-direction:column; gap:.75rem; }
.list li{ display:flex; align-items:center; gap:.6rem; color:#cfcfcf; }

/* Icons */
.icon{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; color:#fff; }
.icon.plus{ background:linear-gradient(135deg,#00ff88,#00cc66); }
.icon.minus{ background:linear-gradient(135deg,#ff5f56,#ff3b2e); }

/* Hover effect */
.list li:hover{ color:#fff; }

/* Responsive */
@media(max-width:900px){ .proscons-grid{ grid-template-columns:1fr; } }
/* Link in head: <link rel="stylesheet" href="/assets/css/signup.css"> */

.signup{ padding:4rem 0; background:#000; position:relative; text-align:center; }
.signup::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(1000px 380px at 50% -120px, rgba(0,255,136,.12), rgba(0,0,0,0) 60%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px);
}

.signup-head{ position:relative; z-index:1; margin-bottom:1.5rem; }
.section-title{ font-size:2rem; font-weight:800; color:#fff; margin-bottom:.5rem; }
.section-sub{ color:#b8b8b8; max-width:720px; margin:0 auto; }
.eyebrow{ color:#8bf7bd; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:.5rem; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#00ff88; display:inline-block; box-shadow:0 0 0 4px rgba(0,255,136,.1); }

/* Form wrapper centered */
.signup-wrap{ position:relative; z-index:1; display:flex; justify-content:center; }
.signup-form{ width:100%; max-width:680px; background:linear-gradient(180deg, rgba(14,14,14,.95), rgba(12,12,12,.92)); border:1px solid #1f1f1f; border-radius:22px; padding:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.35); }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; text-align:left; }
.field label{ color:#bdbdbd; font-size:.9rem; }
.field input{ background:#121212; border:1px solid #2a2a2a; border-radius:12px; color:#fff; padding:.95rem 1rem; }
.field input:focus{ outline:none; border-color:#00ff88; box-shadow:0 0 0 3px rgba(0,255,136,.12); }

.btn.full{ width:100%; padding:1rem; font-weight:800; border-radius:14px; font-size:1rem; }
.small-note{ color:#8f8f8f; margin-top:.75rem; font-size:.85rem; }
.small-note a{ color:#00ff88; }

/* Responsive */
@media(max-width:700px){ .grid{ grid-template-columns:1fr; } .section-title{ font-size:1.75rem; } }

/* ========== Shared Form Template Styles ========== */
.form-col{ position:relative; z-index:1; display:flex; justify-content:center; }
.form-container{ width:100%; max-width:680px; }
.w-form-wrapper{ width:100%; }

.members-form{ position:relative; width:100%; background:linear-gradient(180deg, rgba(14,14,14,.95), rgba(12,12,12,.92)); border:1px solid #1f1f1f; border-radius:22px; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:left; }
.members-form .form-group{ position:relative; margin-bottom:.9rem; }
.members-form .form-control.w-input{ width:100%; background:#121212; border:1px solid #2a2a2a; border-radius:12px; color:#fff; padding:.95rem 1rem; font: inherit; }
.members-form .form-control.w-input:focus{ outline:none; border-color:#00ff88; box-shadow:0 0 0 3px rgba(0,255,136,.12); }
.members-form .form-control.w-input.error{ border-color:#c8102e; box-shadow:0 0 0 3px rgba(200,16,46,.12); }
.members-form .form-control.w-input.valid{ border-color:#10b534; box-shadow:0 0 0 3px rgba(16,181,52,.12); }

.members-form .warning-icon{ position:absolute; right:.75rem; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:radial-gradient(circle, #ff5f56 0 60%, transparent 61%); display:none; }
.members-form .form-control.w-input.error + .warning-icon{ display:block; }

.phone-row{ margin-bottom:1rem; }
.phone-cell{ width:100%; }
.members-form input[name="phone"]{ padding-left:90px; }
.members-form .iti{ width:100%; }

.button.fullwidth.w-button{ width:100%; padding:1rem; border-radius:14px; font-weight:800; font-size:1rem; border:0; cursor:pointer; background:#00ff88; color:#000; transition: background .2s ease; }
.button.fullwidth.w-button:hover{ background:#00cc44; }

.form-footer{ margin-top:.75rem; color:#8f8f8f; font-size:.85rem; line-height:1.5; }
.form-footer a{ color:#00ff88; }

.members-form-policy-toggle{ margin-top:.5rem; color:#bdbdbd; font-size:.85rem; cursor:pointer; }
.members-form-policy-toggle:hover{ color:#fff; }
.members-form-policy-tooltip{ margin-top:.5rem; display:none; background:#0f0f0f; border:1px solid #1f1f1f; border-radius:12px; padding:.75rem; color:#cfcfcf; }

.preloader{ display:none; position:absolute; inset:0; background: rgba(0,0,0,.45) url('../../preloader.gif') center/48px 48px no-repeat; border-radius:22px; z-index:2; }

@media(max-width:700px){
  .members-form{ padding:1rem; }
}

/* Hide breadcrumbs completely */
.breadcrumbs{ display:none !important; }
/* ======= Story Article Styles ======= */
.story-article {
  background: #000;
  padding: 4rem 0;
  color: #cfcfcf;
}

.story-article .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.article-head {
  margin-bottom: 2rem;
  text-align: center;
}

.article-head .section-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
}

.article-head .section-sub {
  font-size: 1.1rem;
  color: #b8b8b8;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

.article-body h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 2rem 0 0.75rem;
}

.article-body p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

.article-body .list {
  margin: 1rem 0 1.5rem 1.25rem;
  color: #cfcfcf;
}

.article-body .list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.article-body .highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.article-body .highlights .hl {
  background: #0e0e0e;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.article-body .highlights dt {
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.article-body .highlights dd {
  font-size: 1.1rem;
  font-weight: 600;
  color: #00ff88;
}

.article-body .callout {
  background: #0e0e0e;
  border-left: 4px solid #00ff88;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #b8b8b8;
}

.article-body .cta-row {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.article-body .cta-row .btn {
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  transition: background 0.3s ease;
}

.article-body .cta-row .btn-primary {
  background: #00ff88;
  color: #000;
}

.article-body .cta-row .btn-primary:hover {
  background: #00cc66;
}

.article-body .cta-row .btn-ghost {
  border: 1px solid #00ff88;
  color: #00ff88;
  background: transparent;
}

.article-body .cta-row .btn-ghost:hover {
  background: #00ff8815;
}

/* Responsive */
@media (max-width: 768px) {
  .article-head .section-title {
    font-size: 1.6rem;
  }
  .article-body h3 {
    font-size: 1.2rem;
  }
  .article-body .cta-row {
    flex-direction: column;
  }
}
.decision-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: decision-counter;
}

.decision-item {
  background: #0e0e0e;
  border: 1px solid #1f1f1f;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
  counter-increment: decision-counter;
  position: relative;
}

.decision-item::before {
  content: counter(decision-counter);
  position: absolute;
  top: -12px;
  left: -12px;
  background: #00ff88;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decision-item:hover {
  transform: translateY(-3px);
  border-color: #00ff88;
}

.decision-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.decision-item .icon {
  font-size: 1.25rem;
}

.decision-item p {
  margin: 0;
  color: #cfcfcf;
  line-height: 1.6;
  font-size: .95rem;
}
/* ===== Timeline polish for story articles (drop-in) ===== */

/* Headings rhythm */
.story-article .article-body h3{
  margin-top: 2.25rem;
  margin-bottom: .85rem;
  font-size: 1.35rem;
  font-weight: 800;
  color:#fff;
  letter-spacing:.2px;
}

/* Paragraph as elegant cards */
.story-article .article-body p{
  background:#0e0e0e;
  border:1px solid #1f1f1f;
  border-left:3px solid #00ff88;
  border-radius:14px;
  padding:1rem 1.25rem;
  margin:.9rem 0;
  line-height:1.75;
  color:#cfcfcf;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 0 0 0 rgba(0,0,0,0);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.story-article .article-body p:hover{
  border-color:#00ff88;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Make leading "Mes X:" look like a chip automatically */
.story-article .article-body p > strong:first-child{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .55rem;
  margin-right:.6rem;
  border:1px solid #00ff88;
  border-radius:999px;
  background:#00ff8820;
  color:#00ff88;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
}

/* Inline emphasis */
.story-article .article-body em{ color:#bdbdbd; }

/* Lists inside articles (generic) */
.story-article .article-body .list{
  list-style:none;
  margin:1rem 0 1.25rem 0;
  padding:0;
}
.story-article .article-body .list li{
  position:relative;
  padding-left:1.25rem;
  margin:.45rem 0;
  color:#cfcfcf;
}
.story-article .article-body .list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:.42rem;height:.42rem;
  border-radius:50%;
  background:#00ff88;
  box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

/* Highlights dl (numbers grid) — extra polish */
.story-article .article-body .highlights{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:1rem;
  margin:1.5rem 0 2rem;
}
.story-article .article-body .highlights .hl{
  background:#0e0e0e;
  border:1px solid #1f1f1f;
  border-radius:12px;
  padding:1rem 1.1rem .9rem;
}
.story-article .article-body .highlights dt{
  color:#9e9e9e;
  font-weight:700;
  margin-bottom:.25rem;
}
.story-article .article-body .highlights dd{
  color:#00ff88;
  font-size:1.1rem;
  font-weight:800;
}

/* Card-style ordered decisions (if used) */
.decision-list{
  list-style:none;
  padding:0; margin:1.5rem 0;
  display:grid; gap:1rem;
  counter-reset: d;
}
.decision-item{
  counter-increment: d;
  background:#0e0e0e;
  border:1px solid #1f1f1f;
  border-radius:14px;
  padding:1.15rem 1.25rem;
  transition: border-color .2s ease, transform .2s ease;
}
.decision-item::before{
  content: counter(d);
  position:absolute;
  transform: translate(-.75rem, -1.15rem);
  background:#00ff88; color:#000;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;
}
.decision-item:hover{ border-color:#00ff88; transform: translateY(-2px); }
.decision-item h4{ color:#fff; margin:0 0 .4rem; display:flex; gap:.5rem; align-items:center; }
.decision-item p{ margin:0; color:#cfcfcf; }

/* Risk cards (if used) */
.risk-list{ list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:1rem; }
.risk-item{
  background:#0e0e0e; border:1px solid #1f1f1f; border-radius:12px;
  padding:1.1rem 1.25rem; transition: border-color .2s ease, transform .2s ease;
}
.risk-item:hover{ border-color:#00ff88; transform: translateY(-2px); }
.risk-item h4{ color:#fff; margin:0 0 .5rem; display:flex; gap:.5rem; align-items:center; }
.risk-item p{ margin:0; color:#cfcfcf; }

/* Responsive tweaks */
@media (max-width: 780px){
  .story-article .article-body p{ padding: .9rem 1rem; }
  .story-article .article-body h3{ font-size:1.2rem; }
}
/* Removed incorrect override of intl-tel-input flag sprite to allow plugin CSS to control it */