:root {
  --ink: #0d0d12;
  --ink-soft: #6b6b7b;
  --line: #ebebf1;
  --tint: #f7f7fb;
  --lilac: #f1eefe;
  --purple: #7c5cf5;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
p { margin: 0 0 1em; }
a { color: var(--ink); }

/* The nav is sticky, so anchor targets have to clear its height. #top sits on
   <main>, which starts exactly one nav-height down, so this lands on 0. */
#top, section[id] { scroll-margin-top: 64px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 26px; }
.wrap.narrow { max-width: 720px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); }
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 26px;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--ink);
  position: relative;
}
.logo-mark::after {
  content: "";
  position: absolute;
  left: 8px; top: 6px;
  border-left: 8px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.logo-word { font-weight: 800; font-size: 18px; letter-spacing: -.03em; }

.nav-mid { display: flex; gap: 26px; justify-content: center; }
.nav-mid a { font-size: 14.5px; color: #3f3f4d; text-decoration: none; }
.nav-mid a:hover { color: var(--ink); }

.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.nav-login { font-size: 14.5px; text-decoration: none; color: #3f3f4d; }
.nav-login:hover { color: var(--ink); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .06s ease, opacity .15s ease;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #24242f; color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #ececf4; color: var(--ink); }
.btn-pill { border-radius: 999px; padding: 9px 18px; font-size: 14.5px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn:active { transform: translateY(1px); }

/* Hero */
.hero {
  position: relative;
  padding: 46px 26px 38px;
  text-align: center;
  overflow: hidden;
}
.glow {
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 620px;
  background: radial-gradient(closest-side, rgba(124, 92, 245, .11), rgba(124, 92, 245, 0) 70%);
  pointer-events: none;
}
.hero > *:not(.glow) { position: relative; }

/* Headline */
.hero h1 {
  font-size: 60px;
  letter-spacing: -.045em;
  margin: 0 auto 18px;
  max-width: 14em;
}
/* Rotating platform name. It sits alone on the second line, so its width can
   change without moving any of the static text. Height is one line so the
   names roll behind a mask. */
.rot {
  display: inline-block;
  position: relative;
  height: 1.06em;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--purple);
  transition: width .42s cubic-bezier(.4, 0, .2, 1);
}
.rot-word {
  display: block;
  width: max-content;
  white-space: nowrap;
  line-height: 1.06em;
}
.rot-word.is-leaving {
  position: absolute;
  left: 0; top: 0;
  animation: rot-out .42s cubic-bezier(.4, 0, .2, 1) forwards;
}
.rot-word.is-entering { animation: rot-in .42s cubic-bezier(.4, 0, .2, 1); }

@keyframes rot-in {
  from { transform: translateY(-108%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes rot-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(108%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rot { transition: none; }
  .rot-word.is-entering, .rot-word.is-leaving { animation: none; }
  .rot-word.is-leaving { display: none; }
}

.sub { font-size: 18px; color: var(--ink-soft); margin: 0 auto 26px; max-width: 34em; }

/* Omni bar */
.omni { max-width: 620px; margin: 0 auto; }
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13, 13, 18, .07);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bar:focus-within {
  border-color: #c9bcfb;
  box-shadow: 0 10px 30px rgba(124, 92, 245, .14);
}
.bar-icon { display: flex; color: #9a9aab; flex: 0 0 auto; }
.bar input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.bar input::placeholder { color: #9a9aab; }
.bar.invalid { border-color: #e0483a; }
.bar-btn { border-radius: 9px; padding: 12px 20px; font-size: 15px; white-space: nowrap; }
.spark { font-size: 12px; opacity: .9; }

.error { margin: 12px 0 0; font-size: 14.5px; color: #d2372a; }
.tiny { margin: 14px 0 0; font-size: 13px; color: #9a9aab; }
.tiny.light { color: rgba(255, 255, 255, .55); }

/* Success */
.success {
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 26px;
  border: 1px solid #d9cffb;
  border-radius: 16px;
  background: #faf8ff;
}
.tick {
  display: block;
  width: 42px; height: 42px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--purple);
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 16px; top: 10px;
  width: 9px; height: 17px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.success h2 { font-size: 25px; }
.success p { margin: 0; color: var(--ink-soft); }
.success strong { color: var(--ink); word-break: break-all; }

/* Compatibility strip. Kept to one compact line so it costs little height. */
.marks { padding: 4px 0 44px; }
.marks .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
}
.marks p { margin: 0; font-size: 13px; color: #9a9aab; }
.marks ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin: 0; padding: 0;
  list-style: none;
  color: #b3b3c2;
}
.marks li { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.m1 { font-weight: 400; letter-spacing: .2em; font-size: 14px; }
.m2 { font-family: Georgia, serif; font-weight: 400; font-size: 17px; }
.m3 { font-weight: 800; font-style: italic; }
.m5 { font-weight: 600; letter-spacing: -.04em; font-size: 18px; }
.m7 { font-size: 13px; letter-spacing: .12em; font-weight: 600; }

/* Samples. No heading on purpose: on desktop the reels should be visible in
   the first screen, right under the form. */
.samples { padding: 0 0 26px; text-align: center; }

/* Wider than the viewport on purpose so the end cards bleed off the edges. */
.reel-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 0 12px;
}
.sample {
  position: relative;
  flex: 0 0 152px;
  height: 270px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #6b7280;
}
.sample::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 28%, rgba(0, 0, 0, .46) 68%, rgba(0, 0, 0, .58) 100%);
}
.s1 { background-image: linear-gradient(165deg, #c9d6e4 0%, #7b8ea3 48%, #3f4b5c 100%); }
.s2 { background-image: linear-gradient(165deg, #f1e2cf 0%, #c39b74 52%, #6b4a30 100%); }
.s3 { background-image: linear-gradient(165deg, #dde7dd 0%, #90a894 50%, #42544a 100%); }
.s4 { background-image: linear-gradient(165deg, #cfe3f0 0%, #7fa8c4 46%, #395168 100%); }
.s5 { background-image: linear-gradient(165deg, #f3ddd8 0%, #c98d7e 50%, #6d3f36 100%); }
.s6 { background-image: linear-gradient(165deg, #e2dcf0 0%, #9b8fc2 50%, #4b4270 100%); }
.s7 { background-image: linear-gradient(165deg, #f5ecd2 0%, #cbb072 50%, #6d5c2c 100%); }

.sample figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 30%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.cap-hi {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--purple);
  text-shadow: none;
}

.made-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.made-with .logo-mark { width: 19px; height: 19px; border-radius: 6px; }
.made-with .logo-mark::after { left: 6px; top: 5px; border-left: 6px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.made-with strong { color: var(--ink); }

/* Sections */
.section { padding: 84px 0; }
.section.tinted { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 12px;
}
.h2 { text-align: center; font-size: 42px; margin-bottom: 48px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { padding: 28px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.num {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--lilac);
  color: var(--purple);
  font-weight: 800; font-size: 15px;
}
.step h3 { font-size: 19px; }
.step p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.steps-note {
  margin: 26px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}

/* Pricing */
.cycle {
  display: inline-flex;
  gap: 4px;
  margin: -28px auto 38px;
  padding: 4px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--line);
}
.section .cycle { display: flex; width: max-content; }
.cycle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cycle-btn.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13, 13, 18, .12); }
.save {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.plan-featured { border: 2px solid var(--ink); }
.plan-tag {
  position: absolute;
  top: -12px; left: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.plan h3 { font-size: 20px; margin-bottom: 14px; }
.price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 6px; }
.amt { font-size: 44px; font-weight: 800; letter-spacing: -.04em; }
.per { font-size: 15px; color: var(--ink-soft); }
.price-note { margin: 0 0 22px; font-size: 14px; color: var(--ink-soft); }

.plan-list { margin: 0 0 26px; padding: 0; list-style: none; }
.plan-list li {
  position: relative;
  padding: 0 0 11px 26px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 6px; height: 11px;
  border: solid var(--purple);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
.btn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-outline:hover { background: var(--tint); color: var(--ink); }
.btn-wide { width: 100%; margin-top: auto; padding: 13px 20px; font-size: 15.5px; }

/* Agent wins */
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.win {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.win::before {
  content: "";
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lilac) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%237c5cf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary {
  cursor: pointer; font-weight: 700; list-style: none;
  position: relative; padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\002B";
  position: absolute; right: 2px; top: -4px;
  font-size: 22px; font-weight: 400; color: var(--purple);
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; }

/* Final */
.final {
  padding: 86px 0;
  text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #2a2140 0%, #0d0d12 62%);
  color: #fff;
}
.final h2 { font-size: 40px; }
.final p { color: rgba(255, 255, 255, .6); margin-bottom: 22px; }

/* Footer */
.footer { padding: 26px 0; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-size: 14px; color: var(--ink-soft);
}
.footer a { color: var(--ink-soft); }

/* Responsive */
@media (max-width: 940px) {
  .nav-mid { display: none; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .hero h1 { font-size: 48px; }
  .steps { grid-template-columns: 1fr; }
  .wins { grid-template-columns: 1fr 1fr; }
  .h2 { font-size: 33px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: 34px; letter-spacing: -.035em; }
  .hero h1 br { display: none; }
  .sub { font-size: 16.5px; }
  .bar { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .bar-icon { display: none; }
  .bar input { flex: 1 1 100%; padding: 6px 4px; }
  .bar-btn { width: 100%; }
  .plans, .wins { grid-template-columns: 1fr; }
  .win { padding: 16px 18px; font-size: 15.5px; }
  .cycle { margin-top: -18px; }
  .samples { padding-bottom: 18px; }
  .reel-row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .reel-row::-webkit-scrollbar { display: none; }
  .sample { flex-basis: 132px; height: 234px; scroll-snap-align: center; }
  .marks { padding: 4px 0 40px; }
  .marks .wrap, .marks ul { gap: 8px 18px; }
  .marks li { font-size: 15px; }
  .section { padding: 56px 0; }
  .h2, .final h2 { font-size: 27px; margin-bottom: 34px; }
  .final { padding: 62px 0; }
  .btn-lg { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}