:root {
  --ink: #152232;
  --body: #3f4f61;
  --muted: #6a7887;
  --teal: #0e9a91;
  --teal-dark: #087e77;
  --green: #23a66e;
  --line: #d8e7e0;
  --line-soft: #e5eee9;
  --pale: #f6fbf8;
  --pale-green: #eef9f4;
  --page: #fbfcfc;
  --shadow: 0 8px 24px rgba(19, 60, 47, 0.05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 9%, rgba(33, 165, 130, 0.025), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, #fbfcfc 42%, #f9fcfa 100%);
  color: var(--ink);
  font-family: Inter, "Inter Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 9px 13px;
  border-radius: 7px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  height: 72px;
  border-bottom: 1px solid #edf2ef;
  background: rgba(255, 255, 255, 0.96);
}

.header-inner {
  width: min(1440px, calc(100% - 72px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #16716a, #0f5753);
  color: white;
  box-shadow: 0 4px 12px rgba(15, 95, 88, 0.2);
}

.brand-mark svg { width: 25px; height: 25px; }

.header-cta {
  justify-self: end;
  min-width: 159px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  background: linear-gradient(180deg, #0fa198, #0a8b83);
  box-shadow: 0 6px 18px rgba(12, 148, 138, 0.16);
}

.hero {
  padding: 18px 20px 17px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-family: "Inter Display", Inter, sans-serif;
  font-size: clamp(42px, 3.76vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.052em;
  font-weight: 760;
}

.hero h1 span { color: var(--teal); }

.hero p {
  margin: 14px auto 0;
  color: #415063;
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: -0.015em;
}

.surface {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.workspace {
  width: min(1325px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 432px minmax(610px, 666px) 208px;
  gap: 14px;
  align-items: start;
}

.chat-panel,
.codex-panel {
  height: 512px;
  border-radius: 16px;
}

.panel-heading {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 735;
  letter-spacing: -0.02em;
}

.heading-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.heading-icon svg { width: 16px; height: 16px; }

.outline-icon {
  border: 1.8px solid #324254;
  color: #263646;
}

.solid-icon {
  background: #0d9e98;
  color: white;
}

.chat-panel { padding: 0 16px 15px; }
.chat-panel .panel-heading { padding-left: 36px; }

.chat-window {
  height: 431px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #dce8e2;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.chat-messages {
  flex: 1;
  padding: 21px 18px 6px;
  overflow: hidden;
}

.chat-line {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 10px;
}

.chat-line.user { justify-content: flex-end; }

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d9e4df;
  background: white;
  color: #243340;
}

.chat-avatar.ai {
  border: none;
  background: linear-gradient(145deg, #2ab57e, #1d9c6a);
  color: white;
}

.chat-avatar svg { width: 18px; height: 18px; }

.chat-bubble {
  max-width: 273px;
  padding: 11px 13px;
  border: 1px solid #e1e9e5;
  border-radius: 12px;
  background: #fff;
  color: #344352;
  font-size: 12.3px;
  line-height: 1.42;
}

.chat-line.user .chat-bubble { background: #f8fbfa; }

.bubble-actions {
  display: flex;
  gap: 10px;
  margin: 5px 0 7px 43px;
  color: #6d7c8c;
}

.bubble-actions svg { width: 15px; height: 15px; }

.chat-summary {
  height: 52px;
  margin: 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  color: #4d5e6f;
  font-size: 12.7px;
}

.codex-panel { padding: 0 13px 12px; }

.codex-heading { padding: 0 14px; }

.micro-pill {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid #a7d8ca;
  border-radius: 999px;
  color: #087e76;
  background: #effbf7;
  font-size: 11.5px;
  font-weight: 720;
  white-space: nowrap;
}

.process-card {
  position: relative;
  height: 144px;
  padding: 14px 12px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #dce9e3;
  border-radius: 12px;
  background: #fcfefd;
}

.process-line {
  position: absolute;
  top: 30px;
  left: 13%;
  right: 13%;
  height: 1px;
  background: linear-gradient(90deg, #a2d7cc, #b9ddd5);
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #273647;
}

.process-icon {
  width: 37px;
  height: 37px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #119f99, #0d8d87);
  color: white;
  box-shadow: 0 0 0 4px #fcfefd;
}

.deliver-step .process-icon { background: linear-gradient(145deg, #32aa75, #249663); }
.process-icon svg { width: 18px; height: 18px; }

.process-step strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.process-step p {
  margin: 0;
  color: #465567;
  font-size: 11.2px;
  line-height: 1.35;
}

.output-toolbar {
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 10px;
}

.output-label {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #162533;
  white-space: nowrap;
}

.output-label strong {
  margin-left: 11px;
  font-size: 13px;
  font-weight: 750;
}

.output-label > span:last-child {
  margin-left: 4px;
  color: #5f6e7c;
  font-size: 10.6px;
}

.flow-arrow {
  width: 37px;
  height: 37px;
  margin-left: -51px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #25b080, #139a72);
  color: white;
  box-shadow: 0 5px 14px rgba(18, 157, 117, 0.17);
}

.flow-arrow svg { width: 19px; height: 19px; }

.case-switcher {
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 2px;
  border: 1px solid #d1e6dd;
  border-radius: 999px;
  background: #f9fcfb;
}

.case-tab {
  height: 24px;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #667584;
  font-size: 9.8px;
  font-weight: 700;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.case-tab:hover { color: var(--teal-dark); }

.case-tab.is-active {
  color: #087c74;
  background: #e6f7f2;
  box-shadow: inset 0 0 0 1px #acdacf;
}

.output-table {
  height: 263px;
  overflow: hidden;
  border: 1px solid #d7e7df;
  border-radius: 11px;
  background: white;
}

.output-rows { height: 220px; }

.output-row {
  height: 55px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 38px 1.1fr 1.18fr 0.62fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #e2ebe7;
  animation: rowIn 0.18s ease both;
}

.output-row:last-child { border-bottom: none; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.row-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #d1e8dd;
  background: #edf8f4;
  color: #149a73;
}

.row-icon svg { width: 18px; height: 18px; }

.row-title {
  margin-bottom: 2px;
  color: #152534;
  font-size: 12px;
  line-height: 1.14;
  font-weight: 750;
}

.row-subtitle {
  color: #637181;
  font-size: 9.9px;
  line-height: 1.18;
}

.row-impact { text-align: right; }

.row-impact strong {
  display: block;
  color: #0b9887;
  font-size: 12.4px;
  line-height: 1.1;
}

.row-impact span {
  display: block;
  margin-top: 2px;
  color: #697887;
  font-size: 9.7px;
  line-height: 1.15;
}

.output-footer {
  height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #dbe9e2;
  background: linear-gradient(90deg, #effaf5, #eaf8f2);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #21323f;
  font-size: 11.5px;
  font-weight: 620;
}

.status-check {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1da06c;
  border: 1px solid #abd9c5;
  background: #e5f7ee;
}

.status-check svg { width: 14px; height: 14px; }

.results-button {
  min-width: 149px;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: linear-gradient(180deg, #20ad82, #119b73);
  font-size: 11.5px;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(20, 157, 116, 0.16);
}

.integrations-panel {
  min-height: 397px;
  margin-top: 47px;
  padding: 23px 20px 20px;
  border-radius: 15px;
}

.integrations-panel h2 {
  margin: 0 0 23px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.integration-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.integration {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #263342;
}

.shopify-logo { gap: 6px; font-size: 21px; letter-spacing: -0.05em; }
.shopify-logo strong { font-weight: 800; }

.shopify-bag {
  width: 23px;
  height: 26px;
  display: grid;
  place-items: center;
  clip-path: polygon(17% 17%, 84% 6%, 100% 100%, 0 91%);
  color: white;
  background: #7abf37;
  font-size: 13px;
  font-weight: 800;
  transform: rotate(-5deg);
}

.klaviyo-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: -0.045em;
  color: #171717;
}

.analytics-logo,
.ads-logo {
  gap: 8px;
  color: #58636f;
  font-size: 14px;
}

.analytics-logo b,
.ads-logo b { font-weight: 500; }

.analytics-bars {
  width: 25px;
  height: 27px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.analytics-bars i {
  width: 6px;
  border-radius: 3px;
  background: #f39a24;
}
.analytics-bars i:nth-child(1) { height: 7px; }
.analytics-bars i:nth-child(2) { height: 17px; }
.analytics-bars i:nth-child(3) { height: 27px; }

.meta-logo { gap: 5px; color: #1d2430; font-size: 21px; }
.meta-loop { color: #1769ff; font-size: 29px; line-height: 1; transform: scaleX(1.12); }
.meta-logo strong { font-weight: 600; }

.ads-mark {
  position: relative;
  width: 28px;
  height: 29px;
}
.ads-mark i { position: absolute; display: block; border-radius: 5px; }
.ads-mark i:nth-child(1) { width: 8px; height: 28px; left: 6px; top: 0; background: #4185f4; transform: rotate(29deg); }
.ads-mark i:nth-child(2) { width: 8px; height: 28px; right: 5px; top: 0; background: #34a853; transform: rotate(-29deg); }
.ads-mark i:nth-child(3) { width: 8px; height: 8px; left: 0; bottom: 0; border-radius: 50%; background: #fbbc04; }

.many-more {
  margin-top: -2px;
  color: #079b83;
  font-size: 12.5px;
  font-weight: 720;
}

.difference-section {
  width: min(1360px, calc(100% - 44px));
  height: 182px;
  margin: 25px auto 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 14px;
  align-items: stretch;
}

.metrics-group {
  position: relative;
  height: 182px;
  padding: 37px 12px 12px;
  border-radius: 13px;
}

.difference-title {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 17px;
  background: #fbfcfc;
  color: #1e3545;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.metric-row {
  height: 132px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.metric-card {
  height: 116px;
  padding: 17px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 5px 16px rgba(19, 60, 47, 0.035);
}

.metric-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #128f7a;
  background: linear-gradient(145deg, #e5f5ef, #f2faf7);
}

.metric-icon svg { width: 30px; height: 30px; }

.metric-card strong {
  color: #0f9484;
  font-size: 22px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.metric-card p {
  margin: 7px 0 0;
  color: #314355;
  font-size: 11.7px;
  white-space: nowrap;
}

.metric-card small {
  display: block;
  margin-top: 4px;
  color: #657484;
  font-size: 10.2px;
  white-space: nowrap;
}

.closing-card {
  height: 182px;
  padding: 21px 20px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #f7fbf9, #eff9f5);
}

.closing-copy {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.closing-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #2eb57c, #16935f);
  box-shadow: 0 0 0 7px #e7f6ef;
}

.closing-icon svg { width: 20px; height: 20px; }

.closing-card h2 {
  margin: 0;
  color: #156644;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.closing-card p {
  margin: 11px 0 14px;
  color: #4e5f6f;
  font-size: 10.6px;
  line-height: 1.55;
}

.closing-card button {
  width: 220px;
  height: 36px;
  margin-left: 50px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: linear-gradient(180deg, #0fa398, #098c83);
  font-size: 12px;
  font-weight: 750;
}

.lead-dialog {
  width: min(610px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 1px solid #cfe3da;
  border-radius: 18px;
  color: var(--ink);
  background: white;
  box-shadow: 0 26px 80px rgba(16, 46, 39, 0.24);
}

.lead-dialog::backdrop {
  background: rgba(15, 35, 39, 0.52);
  backdrop-filter: blur(4px);
}

.lead-dialog-shell { padding: 28px; }

.lead-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.lead-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-dialog h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.lead-dialog-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid #d9e7e1;
  border-radius: 50%;
  color: #526271;
  background: #f8fbfa;
  font-size: 24px;
  line-height: 1;
}

.lead-dialog-copy {
  margin: 14px 0 22px;
  color: #516171;
  font-size: 14px;
  line-height: 1.55;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.lead-field {
  display: grid;
  gap: 7px;
  color: #2d3e4d;
  font-size: 13px;
  font-weight: 720;
}

.lead-field-wide { grid-column: 1 / -1; }

.lead-field input {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  border: 1px solid #cdded7;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fcfefd;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lead-field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14, 154, 145, 0.13);
}

.lead-field-hint {
  color: #6a7887;
  font-size: 11.5px;
  font-weight: 520;
  line-height: 1.35;
}

.field-error,
.form-errors {
  color: #a43131;
  font-size: 12px;
  line-height: 1.4;
}

.form-errors {
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #efc3c3;
  border-radius: 8px;
  background: #fff4f4;
}

.lead-submit {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: linear-gradient(180deg, #0fa198, #0a8b83);
  font-size: 14px;
  font-weight: 780;
  box-shadow: 0 7px 18px rgba(12, 148, 138, 0.18);
}

.lead-submit span { margin-left: 5px; }

.lead-form-note {
  margin: 11px 0 0;
  color: #687786;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1290px) {
  .workspace { grid-template-columns: 390px minmax(560px, 1fr); }
  .integrations-panel { display: none; }
  .difference-section { height: auto; grid-template-columns: 1fr; }
  .metrics-group { height: 182px; }
  .closing-card { height: auto; min-height: 160px; }
  .closing-card button { margin-left: 55px; }
}

@media (max-width: 980px) {
  .header-inner { width: min(94%, 900px); grid-template-columns: 1fr auto; }
  .hero { padding-top: 34px; }
  .workspace { width: min(94%, 760px); grid-template-columns: 1fr; }
  .chat-panel, .codex-panel { height: auto; min-height: 512px; }
  .chat-window { height: 431px; }
  .difference-section { width: min(94%, 760px); }
  .difference-section { height: auto; grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(2, 1fr); height: auto; }
  .metrics-group { height: auto; min-height: 310px; }
}

@media (max-width: 650px) {
  .site-header { height: 64px; }
  .header-inner { width: calc(100% - 28px); }
  .brand { font-size: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .header-cta { min-width: 0; padding: 10px 13px; font-size: 12px; }
  .hero h1 { font-size: 42px; }
  .hero p { font-size: 16px; }
  .desktop-break { display: none; }
  .workspace, .difference-section { width: calc(100% - 24px); }
  .chat-panel, .codex-panel { padding-left: 8px; padding-right: 8px; }
  .chat-panel .panel-heading { padding-left: 12px; }
  .micro-pill { display: none; }
  .process-card { height: auto; grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .process-line { display: none; }
  .output-toolbar { height: auto; min-height: 78px; align-items: flex-start; flex-direction: column; padding: 10px 0 8px 42px; }
  .flow-arrow { position: absolute; margin-left: -46px; }
  .case-switcher { width: 100%; justify-content: space-between; }
  .case-tab { flex: 1; padding: 0 4px; }
  .output-table { height: auto; }
  .output-rows { height: auto; }
  .output-row { height: auto; min-height: 82px; grid-template-columns: 34px 1fr; padding: 12px; }
  .output-row > div:nth-child(3), .output-row > .row-impact { grid-column: 2; text-align: left; }
  .output-footer { height: auto; min-height: 54px; align-items: flex-start; flex-direction: column; padding: 10px; }
  .results-button { width: 100%; }
  .metric-row { grid-template-columns: 1fr; }
  .metrics-group { min-height: 580px; }
  .closing-card button { width: 100%; margin-left: 0; }
  .lead-dialog-shell { padding: 22px 18px; }
  .lead-form-grid { grid-template-columns: 1fr; }
  .lead-field-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}