:root {
  --graphite: #0b0f19;
  --graphite-2: #151b2b;
  --graphite-3: #20283b;
  --ivory: #f7f3ea;
  --paper: #fffcf5;
  --cobalt: #2f6bff;
  --cobalt-mist: #d9e5ff;
  --amber: #f6c85f;
  --violet: #7c3aed;
  --green: #16a34a;
  --coral: #ef4444;
  --slate: #667085;
  --line-dark: rgba(247, 243, 234, 0.16);
  --line-light: rgba(11, 15, 25, 0.12);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --radius: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ivory);
  background: var(--graphite);
  letter-spacing: 0;
}

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

a { color: inherit; text-decoration: none; }

.ce-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(47, 107, 255, 0.10), transparent 340px),
    linear-gradient(90deg, rgba(246, 200, 95, 0.05), transparent 42%),
    var(--graphite);
}

.ce-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.ce-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--graphite);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-dark);
}

.ce-nav-inner {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ce-brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 100px;
  padding-inline: 2px 8px;
  font-weight: 950;
  font-size: 22px;
  color: var(--ivory);
  white-space: nowrap;
}
.ce-brand::before {
  content: "";
  display: none;
}
.ce-brand img {
  width: 44px;
  height: 44px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
.ce-brand img.ce-brand-lockup {
  width: auto;
  height: 92px;
  max-width: min(360px, 66vw);
}
.ce-brand span {
  color: var(--ivory);
  line-height: 1;
}
.ce-brand .ce-brand-engine {
  color: var(--cobalt);
}
.ce-brand > span {
  white-space: nowrap;
}

.ce-nav-links { display: flex; align-items: center; gap: 24px; color: rgba(247, 243, 234, 0.78); font-size: 14px; font-weight: 700; }
.ce-nav-links a:hover { color: var(--ivory); }

.ce-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 19px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--cobalt);
  color: white;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 28px rgba(47, 107, 255, 0.24);
  white-space: nowrap;
}

.ce-btn:hover { transform: translateY(-1px); }
.ce-btn.secondary { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); color: var(--ivory); box-shadow: none; }
.ce-btn.dark { background: var(--graphite); color: var(--ivory); box-shadow: none; }
.ce-btn.amber { background: var(--amber); color: var(--graphite); box-shadow: 0 10px 28px rgba(246, 200, 95, 0.18); }
.ce-btn.full { width: 100%; }

.ce-hero { padding: 86px 0 58px; }

.ce-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  gap: 44px;
  align-items: center;
}

.ce-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--cobalt-mist);
  border: 1px solid rgba(217, 229, 255, 0.18);
  background: rgba(217, 229, 255, 0.06);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 700;
}

.ce-h1 {
  margin: 22px 0 16px;
  font-size: clamp(46px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: 0;
}

.ce-h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

.ce-h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.18; }
.ce-lead { margin: 0; color: rgba(247, 243, 234, 0.78); font-size: 19px; line-height: 1.68; }
.ce-copy { color: rgba(247, 243, 234, 0.72); line-height: 1.72; }
.ce-muted { color: var(--slate); line-height: 1.65; }
.ce-trust { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; color: rgba(247, 243, 234, 0.72); font-size: 13px; }
.ce-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--amber); margin-top: 7px; }

.ce-panel {
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, rgba(21, 27, 43, 0.96), rgba(11, 15, 25, 0.96));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ce-panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: rgba(247, 243, 234, 0.72);
  font-size: 13px;
}

.ce-panel-body { padding: 18px; }
.ce-console-grid { display: grid; gap: 14px; }
.ce-console-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ce-kv {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(247, 243, 234, 0.09);
  color: rgba(247, 243, 234, 0.75);
  font-size: 14px;
}
.ce-kv:last-child { border-bottom: 0; }
.ce-kv strong { color: var(--ivory); }

.ce-cost-drawer {
  margin-top: 14px;
  border: 1px solid rgba(246, 200, 95, 0.34);
  background: rgba(246, 200, 95, 0.08);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--ivory);
}

.ce-section { padding: 76px 0; }
.ce-section.light { background: var(--paper); color: var(--graphite); }
.ce-section.light .ce-copy, .ce-section.light .ce-muted { color: #475467; }
.ce-section.light .ce-card { background: white; border-color: var(--line-light); color: var(--graphite); }
.ce-section.light .ce-eyebrow { color: #174ec7; border-color: rgba(47, 107, 255, 0.18); background: rgba(47, 107, 255, 0.06); }
.ce-section.light .ce-card .ce-btn.secondary {
  background: transparent;
  border-color: rgba(11, 15, 25, 0.12);
  color: var(--graphite);
  box-shadow: none;
}
.ce-section.light .ce-card .ce-btn.secondary:hover {
  background: rgba(47, 107, 255, 0.06);
  border-color: rgba(47, 107, 255, 0.36);
}

.ce-section-head { display: grid; gap: 10px; max-width: 820px; margin-bottom: 28px; }

.ce-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ce-grid.two { grid-template-columns: repeat(2, 1fr); }
.ce-grid.four { grid-template-columns: repeat(4, 1fr); }

.ce-card {
  border: 1px solid var(--line-dark);
  background: rgba(21, 27, 43, 0.74);
  border-radius: var(--radius);
  padding: 20px;
}
.ce-card.recommended { border-color: rgba(246, 200, 95, 0.62); box-shadow: 0 18px 60px rgba(246, 200, 95, 0.08); }
.ce-card .label { color: var(--amber); font-size: 12px; font-weight: 800; text-transform: uppercase; }

.ce-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.ce-step { position: relative; padding: 18px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(21, 27, 43, 0.72); }
.ce-step .num { color: var(--amber); font-weight: 900; margin-bottom: 10px; }

.ce-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.ce-pricing .ce-card {
  display: grid;
  grid-template-rows: 22px 58px minmax(104px, 1fr) 48px;
  gap: 12px;
  min-height: 100%;
}
.ce-pricing .ce-card .label { align-self: start; }
.ce-pricing .ce-card .ce-price {
  align-self: end;
  margin: 0;
  line-height: 1;
}
.ce-pricing .ce-card .ce-copy,
.ce-pricing .ce-card .ce-muted { margin: 0; }
.ce-pricing .ce-card .ce-btn {
  align-self: end;
  background: var(--amber);
  border-color: transparent;
  color: var(--graphite);
  box-shadow: 0 10px 28px rgba(246, 200, 95, 0.18);
}
.ce-pricing .ce-card:nth-child(even) .ce-btn {
  background: var(--cobalt);
  color: white;
  box-shadow: 0 10px 28px rgba(47, 107, 255, 0.24);
}
.ce-pricing .ce-card .ce-btn:hover {
  background: #f2bd42;
  border-color: transparent;
  color: var(--graphite);
}
.ce-pricing .ce-card:nth-child(even) .ce-btn:hover {
  background: #245cf0;
  border-color: transparent;
  color: white;
}
.ce-price { font-size: 36px; font-weight: 900; margin: 14px 0 4px; }
.ce-price small { font-size: 14px; color: rgba(247, 243, 234, 0.62); }
.ce-price.ce-price-from { white-space: nowrap; letter-spacing: 0; }
.ce-price.ce-price-from .ce-from { font-size: 14px; font-weight: 800; margin-right: 6px; color: rgba(247, 243, 234, 0.72); vertical-align: 0.18em; }
.ce-section.light .ce-price small,
.ce-section.light .ce-price.ce-price-from .ce-from { color: #667085; }

.ce-list { display: grid; gap: 10px; padding: 0; list-style: none; margin: 16px 0 0; }
.ce-list li { display: flex; gap: 10px; color: rgba(247, 243, 234, 0.76); line-height: 1.5; }
.ce-list li:before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--green); flex: 0 0 auto; margin-top: 8px; }
.ce-section.light .ce-list li { color: #475467; }

.ce-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-dark); }
.ce-table th, .ce-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line-dark); font-size: 14px; }
.ce-table th { color: var(--amber); font-size: 12px; text-transform: uppercase; }
.ce-table tr:last-child td { border-bottom: 0; }
.ce-section.light .ce-table { border-color: var(--line-light); }
.ce-section.light .ce-table th, .ce-section.light .ce-table td { border-color: var(--line-light); }

.ce-form { display: grid; gap: 12px; }
.ce-input, .ce-select, .ce-textarea {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(102, 112, 133, 0.38);
  padding: 10px 12px;
  color: var(--graphite);
  background: white;
  font: inherit;
}
.ce-textarea { min-height: 120px; resize: vertical; }

.ce-survey-steps { display: grid; gap: 16px; counter-reset: survey; }
.ce-question { counter-increment: survey; }
.ce-question h3:before { content: counter(survey) ". "; color: var(--cobalt); }
.ce-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ce-chip {
  border: 1px solid rgba(47, 107, 255, 0.18);
  background: rgba(47, 107, 255, 0.07);
  color: var(--graphite);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 700;
}

.ce-channel-family { margin-top: 16px; }
.ce-channel-family h4 { margin: 0 0 10px; font-size: 15px; }

.ce-footer { border-top: 1px solid var(--line-dark); padding: 44px 0; color: rgba(247, 243, 234, 0.72); }
.ce-footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ce-footer-directory {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(150px, 1fr));
  align-items: start;
}
.ce-footer-brandline { display: grid; gap: 8px; max-width: 280px; }
.ce-footer-brandline strong { color: var(--ivory); font-size: 18px; }
.ce-footer-brandline p { margin: 0; line-height: 1.55; }
.ce-footer-col { display: grid; gap: 9px; align-content: start; }
.ce-footer-col h4 {
  margin: 0 0 4px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ce-footer-col a { color: rgba(247, 243, 234, 0.74); font-size: 14px; line-height: 1.35; }
.ce-footer-col a:hover { color: var(--ivory); }

.ce-answer-block {
  border-left: 3px solid var(--amber);
  padding: 14px 16px;
  background: rgba(246, 200, 95, 0.08);
  color: rgba(247, 243, 234, 0.84);
  line-height: 1.65;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ce-section.light .ce-answer-block { color: #344054; }

.ce-proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ce-proof-chip {
  border: 1px solid rgba(247, 243, 234, 0.16);
  background: rgba(247, 243, 234, 0.06);
  color: rgba(247, 243, 234, 0.76);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}
.ce-section.light .ce-proof-chip {
  border-color: rgba(11, 15, 25, 0.12);
  background: rgba(47, 107, 255, 0.06);
  color: #475467;
}

.ce-affiliate-preview {
  min-height: 520px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(21, 27, 43, 0.96), rgba(11, 15, 25, 0.96));
  box-shadow: var(--shadow);
  padding: 14px;
  overflow: hidden;
}
.ce-preview-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding: 5px 8px 14px;
  margin-bottom: 14px;
  color: rgba(247, 243, 234, 0.68);
  font-size: 12px;
  font-weight: 800;
}
.ce-preview-dots { display: flex; gap: 6px; }
.ce-preview-dots span {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(247, 243, 234, 0.18);
}
.ce-affiliate-board {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 132px;
  min-height: 438px;
  gap: 12px;
}
.ce-affiliate-rail,
.ce-affiliate-inspector,
.ce-affiliate-main {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(247, 243, 234, 0.04);
  padding: 12px;
}
.ce-affiliate-main { display: grid; gap: 12px; align-content: start; }
.ce-preview-bar {
  height: 28px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.13);
  margin: 8px 0;
}
.ce-affiliate-card-mini {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(21, 27, 43, 0.84);
  padding: 14px;
}
.ce-affiliate-chart {
  height: 116px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.24), rgba(246, 200, 95, 0.20));
}
.ce-metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ce-metric-mini {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(247, 243, 234, 0.05);
}
.ce-metric-mini span {
  display: block;
  color: rgba(247, 243, 234, 0.58);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.ce-metric-mini strong { display: block; margin-top: 4px; color: var(--ivory); font-size: 20px; }
.ce-action-list { display: grid; gap: 10px; margin-top: 14px; }
.ce-action {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(247, 243, 234, 0.12);
  background: rgba(247, 243, 234, 0.05);
  border-radius: var(--radius);
  padding: 12px;
}
.ce-section.light .ce-action {
  border-color: rgba(11, 15, 25, 0.10);
  background: rgba(255, 255, 255, 0.58);
}
.ce-action strong { display: block; color: inherit; }
.ce-action span { display: block; color: rgba(247, 243, 234, 0.62); font-size: 13px; margin-top: 3px; }
.ce-section.light .ce-action span { color: #667085; }
.ce-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(22, 163, 74, 0.14);
  color: #58d68d;
  font-size: 12px;
  font-weight: 900;
}
.ce-section.light .ce-status { color: #087443; }
.ce-status.warn {
  background: rgba(246, 200, 95, 0.18);
  color: var(--amber);
}
.ce-section.light .ce-status.warn { color: #9b6b00; }
.ce-tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.ce-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; color: rgba(247, 243, 234, 0.74); }
.ce-section.light .ce-form label { color: #475467; }
.ce-form-status { display: none; border-radius: 6px; padding: 11px 12px; font-size: 13px; font-weight: 850; }
.ce-form-status.is-success { display: block; color: var(--graphite); background: var(--amber); }
.ce-form-status.is-error { display: block; color: var(--ivory); background: rgba(239, 68, 68, 0.30); border: 1px solid rgba(239, 68, 68, 0.48); }
.ce-auth-wrap {
  min-height: calc(100vh - 99px);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 26px;
  align-items: center;
  padding: 64px 0;
}
.ce-auth-card {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(21, 27, 43, 0.78);
  box-shadow: var(--shadow);
  padding: 26px;
}

.ce-noindex-note {
  border: 1px solid rgba(47, 107, 255, 0.28);
  background: rgba(47, 107, 255, 0.08);
  padding: 18px;
  border-radius: var(--radius);
}

@media (max-width: 980px) {
  .ce-hero-grid, .ce-grid, .ce-grid.two, .ce-grid.four, .ce-pricing { grid-template-columns: 1fr; }
  .ce-auth-wrap { grid-template-columns: 1fr; }
  .ce-affiliate-board { grid-template-columns: 96px minmax(0, 1fr); }
  .ce-affiliate-inspector { display: none; }
  .ce-flow { grid-template-columns: repeat(2, 1fr); }
  .ce-footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-nav-links { display: none; }
}

@media (max-width: 620px) {
  .ce-shell { width: min(100% - 24px, 1180px); }
  .ce-hero { padding-top: 54px; }
  .ce-h1 { font-size: 44px; }
  .ce-console-split, .ce-flow { grid-template-columns: 1fr; }
  .ce-nav-inner { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .ce-brand { min-height: auto; padding-inline: 0; }
  .ce-actions { width: 100%; }
  .ce-actions .ce-btn { flex: 1; }
  .ce-affiliate-board, .ce-metric-row { grid-template-columns: 1fr; }
  .ce-affiliate-rail { display: none; }
  .ce-footer-directory { grid-template-columns: 1fr; }
}