@import url("/shared/motion.css?v=20261102c4");

/* C1 marketing refresh — scoped to body.iv-home and body.iv-marketing only. */
body.iv-home,
body.iv-marketing {
  --iv-emerald: #00c46a;
  --iv-deep: #047a48;
  --iv-mint: #e9fbf2;
  --iv-charcoal: #111418;
  --iv-graphite: #1c2128;
  --iv-slate: #5f6b7a;
  --iv-line: #e4e8ee;
  --navy: #111418;
  --blue: #047a48;
  --bg: #f7f9fa;
  --ink: #111418;
  --muted: #5f6b7a;
  --line: #e4e8ee;
  --ghost-line: rgba(17, 20, 24, .22);
  --chip: #e9fbf2;
  --surface2: #eef2f6;
  --btn: #00c46a;
  --on-btn: #111418;
  --on-grad: #111418;
  --link: #047a48;
  --focus: #047a48;
  --dark: #111418;
  --on-dark-muted: #b5bdc7;
  --dark-btn: #00c46a;
  --on-dark-btn: #111418;
  --grad: linear-gradient(100deg, #00c46a, #00a85b);
  --map-stroke: #00c46a;
  --map-fill: rgba(0, 196, 106, .24);
  --map-point: #111418;
  --note-bg: #e9fbf2;
  --note-line: #b8efd4;
  --fd: "Inter Display", "Inter Tight", system-ui, sans-serif;
  --fb: Inter, "Inter Tight", system-ui, sans-serif;
  overflow-x: clip;
}

body.iv-home h1, body.iv-home h2, body.iv-home h3, body.iv-home h4,
body.iv-marketing h1, body.iv-marketing h2, body.iv-marketing h3, body.iv-marketing h4 {
  font-family: var(--fd);
  font-weight: 650;
  letter-spacing: -0.03em;
}

body.iv-marketing a.nav-login,
body.iv-home a.nav-login {
  color: var(--ink);
  border-color: var(--line);
}
body.iv-marketing a.nav-login:hover,
body.iv-home a.nav-login:hover {
  border-color: var(--btn);
  color: var(--link);
}

body.iv-marketing .tier.popular {
  background: var(--dark);
  color: var(--on-dark);
  box-shadow: 0 0 0 2px var(--btn), var(--card-shadow);
}
body.iv-marketing .tier.popular .outcome,
body.iv-marketing .tier.popular .install,
body.iv-marketing .tier.popular .pitch,
body.iv-marketing .tier.popular .lists h4,
body.iv-marketing .tier.popular .amt span { color: var(--on-dark-muted); }
body.iv-marketing .tier.popular .amt { color: var(--btn); }
body.iv-marketing .tier.popular ul { color: #dde2e8; }
body.iv-marketing .popular-flag {
  background: var(--btn);
  color: var(--on-btn);
}

.tag {
  display: inline-flex;
  align-items: center;
  font: 700 10px/1 var(--fb);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--iv-mint);
  color: var(--iv-deep);
}

.tag.dark {
  background: var(--iv-graphite);
  color: #9fe8c4;
}

.status {
  display: inline-flex;
  align-items: center;
  font: 700 11px/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.status-live { background: var(--iv-mint); color: var(--iv-deep); }
.status-beta { background: #fff4e5; color: #8a5c00; }
.status-planned { background: var(--surface2); color: var(--iv-slate); }

.section-dark {
  background: var(--iv-charcoal);
  color: #fff;
}
.section-dark .lead,
.section-dark .fine { color: #b5bdc7; }
.section-dark h2 { color: #fff; }

.section-dark,
.hero-marketing {
  --focus: #00c46a;
  --link: #00c46a;
}
.section-dark a:not(.btn):not(.ghost):not(.demo-link),
.hero-marketing a:not(.btn):not(.ghost):not(.demo-link) {
  color: var(--iv-emerald);
}

.hero-marketing {
  background: linear-gradient(180deg, var(--iv-charcoal) 0%, var(--iv-graphite) 100%);
  color: #fff;
  padding: 48px 0 64px;
}
.hero-marketing h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  max-width: 16ch;
}
.hero-marketing h1 em {
  font-style: normal;
  color: var(--iv-emerald);
}
.hero-marketing .lead {
  color: #b5bdc7;
  max-width: 36rem;
  font-size: 18px;
}
.hero-marketing .actions { margin-top: 22px; }
.hero-marketing .btn.ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.hero-marketing .btn.ghost:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--iv-emerald);
}
.hero-marketing a.demo-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: #8c96a3;
  text-decoration: underline;
}

body.iv-home .final.section-dark .actions a.btn[href="/pricing/"] {
  background: var(--iv-emerald);
  color: var(--iv-charcoal);
}
body.iv-home .final.section-dark .highlight-em {
  font-style: normal;
  color: var(--iv-emerald);
}

.compare-plans {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.compare-plans th,
.compare-plans td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-plans thead th {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  background: var(--iv-mint);
}
.compare-plans tbody th { font-weight: 600; width: 34%; }

.iv-compare {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.iv-compare > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.iv-compare > div:last-child { border-bottom: 0; }
.iv-compare b { color: #fff; }
.iv-compare .iv-row-highlight b { color: var(--iv-emerald); }

.sample-grid-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}
.sample-grid-label a {
  font: 600 13px var(--fb);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.sample-grid-label a:hover,
.sample-grid-label a[aria-current="true"] {
  border-color: var(--iv-emerald);
  background: var(--iv-mint);
  color: var(--iv-deep);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.feature-table th,
.feature-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.feature-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface2);
}
.feature-table tbody th { font-weight: 600; width: 28%; }

.plan-finder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.plan-finder button {
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 16px;
  font: 600 14px var(--fb);
  cursor: pointer;
}
.plan-finder button.on {
  border-color: var(--iv-emerald);
  background: var(--iv-mint);
  color: var(--iv-deep);
}

.ai-demo-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .ai-demo-grid { grid-template-columns: repeat(3, 1fr); }
}
.ai-demo-card {
  background: var(--iv-graphite);
  border: 1px solid #2a313b;
  border-radius: 16px;
  padding: 16px;
  color: #fff;
}
.ai-demo-card h3 {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c96a3;
  margin: 0 0 8px;
}
.ai-demo-card p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
  color: #dde2e8;
}

@media (max-width: 719px) {
  body.iv-marketing .prices,
  body.iv-home .prices { grid-template-columns: 1fr; }
  body.iv-marketing .work-grid,
  body.iv-home .work-grid { grid-template-columns: 1fr; }
  body.iv-home .hero-grid { grid-template-columns: 1fr; }
  body.iv-home .laptop { max-width: 100%; }
  body.iv-home section { padding: 56px 0; }
  .feature-table thead { display: none; }
  .feature-table tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
  }
  .feature-table th,
  .feature-table td {
    display: block;
    width: auto;
    border: 0;
    padding: 10px 14px;
  }
  .feature-table tbody th {
    padding-bottom: 4px;
    background: var(--surface2);
  }
  .feature-table td:first-of-type { padding-top: 4px; }
  .feature-table td::before {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .feature-table td:nth-child(2)::before { content: "Status"; }
  .feature-table td:nth-child(3)::before { content: "Notes"; }
}

@media (max-width: 430px) {
  body.iv-home .wrap,
  body.iv-marketing .wrap { width: min(var(--max), calc(100% - 24px)); }
  body.iv-marketing .tier .amt,
  body.iv-home .tier .amt { font-size: 48px; }
}

/* B1 logo lockup — overrides site.css content: url() for old brand on marketing pages only */
body.iv-home .logo img,
body.iv-marketing .logo img,
body.iv-home footer img[alt="Independent Ventures"],
body.iv-marketing footer img[alt="Independent Ventures"] {
  content: url("/assets/logo-b1.svg?v=20261102b1");
}

.ask-pointer {
  margin: 0 0 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.link-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--iv-deep); }

/* F5 — form control borders (3:1 non-text contrast on light marketing surfaces) */
body.iv-home input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.iv-home select,
body.iv-home textarea,
body.iv-marketing input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.iv-marketing select,
body.iv-marketing textarea {
  border-color: #8c96a3;
}

/* F7 — chat widget colors on marketing pages only (behavior unchanged) */
body.iv-home .ivc-av,
body.iv-marketing .ivc-av {
  background: #111418;
}
body.iv-home .ivc-launch,
body.iv-marketing .ivc-launch {
  color: #111418;
}
body.iv-home .ivc-launch .ivc-av,
body.iv-marketing .ivc-launch .ivc-av {
  background: #111418;
}