/* ============================
   AXOLT DESIGN SYSTEM TOKENS
   ============================ */
.axolt-mo-demo {
  --red:        #E3000B;
  --red-dark:   #b80009;
  --red-muted:  rgba(227,0,11,0.08);
  --dark:       #0f1623;
  --dark-2:     #161e2e;
  --dark-3:     #1e2940;
  --text:       #1a1d26;
  --sub:        #5a6070;
  --muted:      #5f6675;
  --bg:         #f5f6f8;
  --white:      #ffffff;
  --border:     #e2e5eb;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 2px 12px rgba(26,29,38,0.07);
  --shadow-md:  0 6px 28px rgba(26,29,38,0.11);
  --shadow-lg:  0 16px 56px rgba(26,29,38,0.16);
  --transition: 0.2s ease;
  --maxw:       1200px;
}

.axolt-mo-demo *, .axolt-mo-demo *::before, .axolt-mo-demo *::after { box-sizing: border-box; margin: 0; padding: 0; }
html .axolt-mo-demo { scroll-behavior: smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } * { animation:none!important; transition:none!important } }
.axolt-mo-demo {
  font-family: 'Open Sans', sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.axolt-mo-demo h1, .axolt-mo-demo h2, .axolt-mo-demo h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.axolt-mo-demo .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }
.axolt-mo-demo .eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
  display: block;
}
.axolt-mo-demo a { color: inherit; }

/* ============================
   TOP BAR / NAV
   ============================ */
.axolt-mo-demo .topbar {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.axolt-mo-demo .topbar .wrap {
  display: flex; align-items: center; justify-content: space-between; height: 62px;
}
.axolt-mo-demo .logo {
  font-size: 20px; font-weight: 700; color: #fff;
  text-decoration: none; letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 9px;
}
.axolt-mo-demo .logo .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px rgba(227,0,11,0.2);
}
.axolt-mo-demo .trustline { font-size: 12px; color: rgba(255,255,255,0.70); letter-spacing: 0.04em; }
.axolt-mo-demo .trustline strong { color: rgba(255,255,255,0.7); }
.axolt-mo-demo .nav-cta {
  background: var(--red); color: #fff; padding: 8px 20px;
  border-radius: 6px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background var(--transition);
}
.axolt-mo-demo .nav-cta:hover { background: var(--red-dark); }
@media(max-width:620px) { .trustline { display:none } }

/* ============================
   HERO
   ============================ */
.axolt-mo-demo .hero {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.axolt-mo-demo .hero .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 56px; padding-top: 62px; padding-bottom: 64px; align-items: start;
}
.axolt-mo-demo .hero h1 { font-size: clamp(34px,4.6vw,52px); color: #fff; margin: 18px 0 0; }
.axolt-mo-demo .hero h1 .accent { color: var(--red); }
.axolt-mo-demo .lede { font-size: clamp(15px,1.4vw,17px); color: rgba(255,255,255,0.82); margin-top: 20px; max-width: 34ch; line-height: 1.75; font-weight: 300; }

.axolt-mo-demo .proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.axolt-mo-demo .chip {
  font-size: 12px; letter-spacing: 0.02em;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px; padding: 7px 14px; color: rgba(255,255,255,0.88);
}
.axolt-mo-demo .chip b { color: var(--red); }

/* flow rail */
.axolt-mo-demo .rail {
  margin-top: 38px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); background: rgba(255,255,255,0.04);
  padding: 18px 18px 16px;
}
.axolt-mo-demo .rail .rl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.axolt-mo-demo .rail .rl-top .lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); }
.axolt-mo-demo .rail .recid { font-size: 11px; color: var(--red); font-weight: 600; }
.axolt-mo-demo .flow { display: flex; align-items: stretch; gap: 0; position: relative; }
.axolt-mo-demo .node { flex: 1; text-align: center; position: relative; padding: 0 4px; }
.axolt-mo-demo .node .ic {
  width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 9px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.axolt-mo-demo .node .ic svg { width: 20px; height: 20px; }
.axolt-mo-demo .node .nm { font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); text-transform: uppercase; }
.axolt-mo-demo .node:not(:last-child):after {
  content: ""; position: absolute; top: 19px; height: 2px;
  background: repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 10px);
  left: calc(50% + 24px); right: -2px; width: calc(100% - 30px);
}
.axolt-mo-demo .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #1AA886;
  display: inline-block; margin-left: 6px; vertical-align: middle;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============================
   FORM CARD
   ============================ */
.axolt-mo-demo .formcard {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-top: 4px solid var(--red);
  color: #1a1d26; border-radius: var(--radius-lg);
  padding: 30px 28px 26px; position: sticky; top: 18px;
  box-shadow: var(--shadow-lg);
}
.axolt-mo-demo .formcard h2 { font-size: 21px; color: #1a1d26; letter-spacing: -0.02em; margin-bottom: 7px; }
.axolt-mo-demo .formcard .sub { font-size: 13.5px; color: #4b5563; margin-bottom: 20px; line-height: 1.55; }
.axolt-mo-demo .field { margin-bottom: 13px; }
.axolt-mo-demo .field label {
  display: block; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #374151; margin-bottom: 6px; font-weight: 600;
}
.axolt-mo-demo .field input, .axolt-mo-demo .field select {
  width: 100%; padding: 11px 13px; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #ffffff;
  color: #1a1d26; font-family: 'Open Sans', sans-serif; font-size: 14px;
  transition: border-color .15s, box-shadow .15s; display: block !important;
}
.axolt-mo-demo .field input::placeholder { color: #6b7280; }
.axolt-mo-demo .field input:focus, .axolt-mo-demo .field select:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,0,11,0.2);
}
.axolt-mo-demo .field select option { background: #ffffff; color: #1a1d26; }
.axolt-mo-demo .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.axolt-mo-demo .cta {
  width: 100%; margin-top: 6px; background: var(--red); color: #fff;
  border: none; border-radius: 8px; padding: 14px;
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; transition: background var(--transition), transform .08s;
  letter-spacing: 0.2px;
}
.axolt-mo-demo .cta:hover { background: var(--red-dark); }
.axolt-mo-demo .cta:active { transform: translateY(1px); }
.axolt-mo-demo .reassure { margin-top: 12px; font-size: 12px; color: #4b5563; text-align: center; line-height: 1.5; }
.axolt-mo-demo .reassure b { color: #1f2937; }

/* field error states */
.axolt-mo-demo .field input.err, .axolt-mo-demo .field select.err { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(227,0,11,0.15) !important; }
.axolt-mo-demo .field-error { font-size: 11px; color: var(--red); margin-top: 4px; display: none; font-weight: 600; }
.axolt-mo-demo .field-error.vis { display: block; }

/* ok state */
.axolt-mo-demo .ok { display:none; text-align:center; padding:14px 6px; }
.axolt-mo-demo .ok.show { display:block; }
.axolt-mo-demo .ok .tick {
  width:46px;height:46px;border-radius:50%;background:var(--red);
  margin:4px auto 12px;display:flex;align-items:center;justify-content:center;
}
.axolt-mo-demo .ok h3 { color:#1a1d26;font-size:21px; }
.axolt-mo-demo .ok p { color:#4b5563;font-size:14px;margin-top:7px; }

/* ============================
   SECTION BASE
   ============================ */
.axolt-mo-demo section.band { padding: 72px 0; }
.axolt-mo-demo .kicker { text-align:center; margin-bottom:8px; }
.axolt-mo-demo .h2lead {
  text-align:center; font-size: clamp(26px,3vw,36px);
  max-width: 20ch; margin: 0 auto; color: var(--text);
}
.axolt-mo-demo .sub-lead {
  text-align:center; color: #4b5563; max-width: 54ch;
  margin: 14px auto 0; font-size: 16px; line-height: 1.75; font-weight: 300;
}

/* ============================
   PAIN SECTION
   ============================ */
.axolt-mo-demo .pain { background: var(--dark); color: #dfe6e9; }
.axolt-mo-demo .pain .h2lead { color: #fff; }
.axolt-mo-demo .pain .sub-lead { color: rgba(255,255,255,0.72); }
.axolt-mo-demo .paingrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.axolt-mo-demo .paincard {
  border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--red);
  border-radius: var(--radius); padding:24px; background: rgba(255,255,255,0.03);
}
.axolt-mo-demo .paincard .n { font-size:11px; color:var(--red); letter-spacing:0.1em; font-weight:700; text-transform:uppercase; }
.axolt-mo-demo .paincard h3 { color:#fff; font-size:17px; margin:12px 0 9px; font-weight:700; }
.axolt-mo-demo .paincard p { font-size:13.5px; color:rgba(255,255,255,0.75); line-height:1.65; }

/* ============================
   OUTCOMES SECTION
   ============================ */
.axolt-mo-demo .outgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
.axolt-mo-demo .outcard {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; background:#fff; display:flex; gap:18px; align-items:flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}
.axolt-mo-demo .outcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.axolt-mo-demo .outcard .badge {
  flex:0 0 auto; width:44px; height:44px; border-radius:10px;
  background:var(--red-muted); border:1px solid rgba(227,0,11,0.15);
  display:flex; align-items:center; justify-content:center;
}
.axolt-mo-demo .outcard .badge svg { width:22px; height:22px; color:var(--red); }
.axolt-mo-demo .outcard h3 { font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--text); }
.axolt-mo-demo .outcard p { font-size:13.5px; color:var(--sub); margin-top:8px; line-height:1.65; }

/* ============================
   CAPABILITY STRIP
   ============================ */
.axolt-mo-demo .runs { background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.axolt-mo-demo .runs .wrap { padding-top:48px; padding-bottom:48px; }
.axolt-mo-demo .runs .lead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.axolt-mo-demo .runs h2 { font-size:22px; color:var(--text); }
.axolt-mo-demo .runs .note { color:var(--sub); font-size:14px; }
.axolt-mo-demo .modgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.axolt-mo-demo .mod {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 15px; font-size:13.5px; font-weight:600; display:flex;
  align-items:center; gap:9px; color:var(--text);
}
.axolt-mo-demo .mod .tick { width:15px; height:15px; flex:0 0 auto; color:#1AA886; }

/* ============================
   VS COMPARISON
   ============================ */
.axolt-mo-demo .vs-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; margin-top:40px; background:#fff;
}
.axolt-mo-demo .vscol { padding:30px 30px 34px; }
.axolt-mo-demo .vscol.bad { background:var(--bg); }
.axolt-mo-demo .vscol.good { border-left:1px solid var(--border); }
.axolt-mo-demo .vscol h3 { font-size:17px; font-weight:700; margin-bottom:4px; color:var(--text); }
.axolt-mo-demo .vscol .tag {
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:16px; display:inline-block; font-weight:700;
}
.axolt-mo-demo .vscol.bad .tag { color:var(--muted); }
.axolt-mo-demo .vscol.good .tag { color:var(--red); }
.axolt-mo-demo .vsitem { display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--border); font-size:13.5px; color:var(--sub); }
.axolt-mo-demo .vsitem:first-of-type { border-top:none; }
.axolt-mo-demo .vsitem .mk { flex:0 0 auto; width:17px; height:17px; margin-top:1px; }
.axolt-mo-demo .vscol.bad .mk { color:#b94040; }
.axolt-mo-demo .vscol.good .mk { color:#1AA886; }
@media(max-width:760px) { .vs-wrap{grid-template-columns:1fr} .vscol.good{border-left:none;border-top:1px solid var(--border)} }

/* ============================
   FINAL CTA
   ============================ */
.axolt-mo-demo .final { background:var(--dark); color:#fff; text-align:center; }
.axolt-mo-demo .final .wrap { padding-top:72px; padding-bottom:72px; position:relative; }
.axolt-mo-demo .final .wrap::before {
  content:''; position:absolute; top:0; left:24px; right:24px;
  height:3px; background:var(--red); border-radius:0 0 3px 3px;
}
.axolt-mo-demo .final h2 { font-size:clamp(28px,3.4vw,38px); max-width:20ch; margin:0 auto; color:#fff; }
.axolt-mo-demo .final p { color:rgba(255,255,255,0.75); font-size:16px; margin:16px auto 32px; max-width:50ch; font-weight:300; }
.axolt-mo-demo .btn-final {
  display:inline-block; background:var(--red); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:14px 32px; border-radius:8px;
  transition:background var(--transition), transform .08s;
}
.axolt-mo-demo .btn-final:hover { background:var(--red-dark); }
.axolt-mo-demo .btn-final:active { transform:translateY(1px); }

/* ============================
   FOOTER
   ============================ */
.axolt-mo-demo footer {
  background:var(--dark); border-top:1px solid rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.68); padding:24px 0; font-size:13px;
}
.axolt-mo-demo footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.axolt-mo-demo footer .logo { font-size:17px; color:#fff; }
.axolt-mo-demo footer .logo .dot { width:8px; height:8px; box-shadow:none; }

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:900px) {
.axolt-mo-demo .wrap { padding:0 20px; }
.axolt-mo-demo .hero .wrap { grid-template-columns:1fr; gap:36px; padding-top:42px; padding-bottom:46px; }
.axolt-mo-demo .formcard { position:static; }
.axolt-mo-demo .paingrid { grid-template-columns:1fr; }
.axolt-mo-demo .outgrid { grid-template-columns:1fr; }
.axolt-mo-demo .modgrid { grid-template-columns:repeat(2,1fr); }
.axolt-mo-demo section.band { padding:48px 0; }
}
@media(max-width:480px) {
.axolt-mo-demo .modgrid { grid-template-columns:1fr; }
.axolt-mo-demo .flow { flex-wrap:wrap; gap:14px; }
.axolt-mo-demo .node { flex:0 0 28%; }
.axolt-mo-demo .node:not(:last-child):after { display:none; }
.axolt-mo-demo .field-row { grid-template-columns:1fr; }
}
.axolt-mo-demo :focus-visible { outline:3px solid var(--red); outline-offset:2px; border-radius:4px; }