/* Landing page. Tokens and primitives come from theme.css. */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--brand);
  color: #08090f;
  z-index: 100;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Announcement bar ---------- */

.banner {
  background: linear-gradient(90deg, rgba(107, 123, 255, 0.14), rgba(240, 180, 41, 0.1));
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  color: var(--text-2);
  flex-wrap: wrap;
  text-align: center;
}
.banner strong {
  color: var(--text);
  font-weight: 600;
}
.banner__link {
  color: var(--brand-bright);
  font-weight: 560;
}
.banner__link:hover {
  text-decoration: underline;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(7, 8, 12, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(7, 8, 12, 0.88);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-size: 16.5px;
}
/* No tile behind it any more: the mark is artwork with its own colours and a
   transparent background, so a brand-purple chip would fight it. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
}
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--text-2);
}
.nav__links a {
  transition: color 0.15s var(--ease);
}
.nav__links a:hover {
  color: var(--text);
}
.nav__actions {
  display: flex;
  gap: 10px;
}
.nav__burger {
  display: none;
  margin-left: auto;
  width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raised);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 15px;
  height: 1.6px;
  background: var(--text);
  border-radius: 2px;
}

/* ---------- Sections ---------- */

.section {
  padding: 108px 0;
  position: relative;
}
.wrap--narrow {
  max-width: 760px;
}
.section__head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section__head h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-top: 14px;
}
.section__sub {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 17.5px;
  line-height: 1.65;
}
code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(107, 123, 255, 0.12);
  border: 1px solid rgba(107, 123, 255, 0.2);
  color: #b9c1ff;
}
.link {
  color: var(--brand-bright);
  font-weight: 560;
}
.link:hover {
  text-decoration: underline;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 84px 0 72px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 720px;
  background:
    radial-gradient(closest-side, rgba(107, 123, 255, 0.3), transparent 72%) 22% 30% / 60% 90%
      no-repeat,
    radial-gradient(closest-side, rgba(240, 180, 41, 0.12), transparent 70%) 80% 10% / 45% 70%
      no-repeat;
  filter: blur(18px);
  pointer-events: none;
}
.hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero__pill {
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(34px, 4.2vw, 50px);
  letter-spacing: -0.035em;
  font-weight: 660;
  text-wrap: balance;
}
/* nowrap so the struck phrase never breaks across lines - a line-through that
   restarts on the next row reads as two mistakes rather than one joke. */
.hero h1 .strike {
  color: var(--text-3);
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 92, 108, 0.55);
}
.grad {
  display: block;
  background: linear-gradient(100deg, #ffffff 8%, var(--brand-bright) 52%, var(--accent) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 56ch;
}
.hero__sub strong {
  color: var(--text);
  font-weight: 600;
}
.hero__ctas {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero__proof {
  display: flex;
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero__proof li::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 999px;
  background: rgba(63, 217, 138, 0.16);
  box-shadow: inset 0 0 0 1px rgba(63, 217, 138, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FD98A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}

.hero__art {
  position: relative;
  min-height: 380px;
}
.shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.shot img {
  width: 100%;
  height: auto;
}
.shot--front {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg), var(--glow);
  transform: rotate(-1.1deg);
  animation: float 9s ease-in-out infinite;
}
.shot--back {
  position: absolute;
  right: -4%;
  top: -14%;
  width: 82%;
  z-index: 1;
  opacity: 0.62;
  transform: rotate(2.6deg);
  box-shadow: var(--shadow-lg);
}
/* Sits below the card rather than on top of it - the card is dense enough that
   an overlay chip lands on a number no matter where you put it. */
.shot__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.shot__tag code {
  font-size: 12px;
  padding: 1px 6px;
}
@keyframes float {
  0%,
  100% {
    transform: rotate(-1.1deg) translateY(0);
  }
  50% {
    transform: rotate(-1.1deg) translateY(-10px);
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 80px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.22s var(--ease);
}
/* Lightens rather than lifts: these four sit in a one-pixel grid, and moving a
   single cell would tear the seams between them. */
.stat:hover {
  background: var(--raised);
}
.stat strong {
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -0.03em;
  color: var(--text);
}
.stat span {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.45;
}

/* ---------- Cost tally ---------- */

.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tally__item {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 92, 108, 0.05), transparent 55%);
}
.tally__n {
  display: block;
  font-size: 26px;
  font-weight: 640;
  letter-spacing: -0.03em;
  color: var(--loss);
  margin-bottom: 14px;
}
.tally__item p {
  font-size: 14.8px;
  line-height: 1.65;
  color: var(--text-2);
}
.tally__item b {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Fork ---------- */

.fork__note {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 76ch;
}

/* ---------- Disqualifier ---------- */

/* Deliberately quiet: this section earns trust by not looking like a pitch.
   Styling it like a feature card would undercut the whole point of it. */
.notfor {
  margin-top: 56px;
  padding: 30px 32px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.015);
  max-width: 820px;
}
.notfor h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
.notfor > p {
  font-size: 14.8px;
  line-height: 1.65;
}
.notfor ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.notfor li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.notfor li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text-3);
}

/* ---------- Before / after ---------- */

.ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
}
.ba__col {
  padding: 30px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.ba__col--before {
  background: linear-gradient(180deg, rgba(255, 92, 108, 0.05), transparent 60%);
  border-color: rgba(255, 92, 108, 0.2);
}
.ba__col--after {
  background: linear-gradient(180deg, rgba(63, 217, 138, 0.06), transparent 60%);
  border-color: rgba(63, 217, 138, 0.22);
  box-shadow: var(--shadow);
}
.ba__label {
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ba__col--after .ba__label {
  color: var(--win);
}
.ba__col ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.ba__col li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
}
.ba__col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.ba__col--before li::before {
  content: '×';
  color: var(--loss);
  font-size: 19px;
  line-height: 1.2;
}
.ba__col--after li::before {
  content: '✓';
  color: var(--win);
  font-size: 15px;
  line-height: 1.55;
}
.ba__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--brand-bright);
}
.ba__arrow svg {
  width: 20px;
  height: 20px;
}

/* ---------- Bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bento__cell {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.bento__cell:hover {
  border-color: #313a52;
  transform: translateY(-2px);
}
.bento__cell--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding-right: 0;
}
.bento__body {
  flex: 1 1 46%;
  min-width: 0;
  padding: 4px 0;
}
.bento__body h3,
.bento__cell h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}
.bento__body p,
.bento__cell p {
  margin-top: 10px;
  font-size: 14.8px;
  line-height: 1.62;
}
.bento__art {
  flex: 1 1 54%;
  margin: 0;
  min-width: 0;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-right: 0;
  transform: translateX(6px);
}
.bento__art img {
  width: 100%;
  height: auto;
  /* Slower than the card's own lift, so the picture drifts rather than snaps. */
  transition: transform 0.55s var(--ease);
}
/* The figure already clips, so the picture grows into its frame instead of
   pushing the layout around. */
.bento__cell--wide:hover .bento__art img {
  transform: scale(1.032);
}
.bento__art--panel {
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--surface);
}
.ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.ic svg {
  width: 20px;
  height: 20px;
}
.ic--brand {
  color: var(--brand-bright);
  background: rgba(107, 123, 255, 0.12);
  border-color: rgba(107, 123, 255, 0.28);
}
.ic--win {
  color: var(--win);
  background: rgba(63, 217, 138, 0.1);
  border-color: rgba(63, 217, 138, 0.26);
}
.ic--accent {
  color: var(--accent);
  background: rgba(240, 180, 41, 0.1);
  border-color: rgba(240, 180, 41, 0.26);
}
.ic--flat {
  color: var(--flat);
  background: rgba(138, 147, 166, 0.1);
}
.tag {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 580;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-3);
  border: 1px solid var(--line);
}
.tag--pro {
  color: var(--brand-bright);
  border-color: rgba(107, 123, 255, 0.35);
  background: rgba(107, 123, 255, 0.09);
}
.tag--ent {
  color: var(--accent);
  border-color: rgba(240, 180, 41, 0.32);
  background: rgba(240, 180, 41, 0.08);
}

.mini {
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.mini__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
}
.mini__k {
  color: var(--text-3);
}
.mini__v {
  font-family: var(--mono);
  font-weight: 600;
}
.mini__spark {
  height: 54px;
  margin-top: 4px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(63, 217, 138, 0.22), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 48 L20 44 L40 50 L60 36 L80 40 L100 26 L120 30 L140 18 L160 22 L180 10 L200 6' fill='none' stroke='%233FD98A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  padding: 30px 28px;
  position: relative;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.step:hover {
  border-color: #313a52;
  transform: translateY(-2px);
}
.step__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 660;
  color: var(--brand-bright);
  background: rgba(107, 123, 255, 0.12);
  border: 1px solid rgba(107, 123, 255, 0.3);
  margin-bottom: 18px;
}
.step h3 {
  font-size: 19px;
}
.step p {
  margin-top: 10px;
  font-size: 14.8px;
  line-height: 1.62;
}
.step__code {
  display: block;
  margin-top: 18px;
  padding: 10px 12px;
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--line);
  color: var(--text-2);
  border-radius: 9px;
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------- ROI ---------- */

.roi__card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  overflow: hidden;
}
.roi__copy {
  padding: 44px 40px;
}
.roi__copy h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin-top: 12px;
}
.roi__copy > p {
  margin-top: 14px;
  margin-bottom: 30px;
  font-size: 15.5px;
}
.slider {
  display: block;
  margin-bottom: 22px;
}
.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 9px;
}
.slider__label b {
  color: var(--text);
  font-size: 15px;
}
.slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--raised-2);
  outline: none;
  cursor: pointer;
}
.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  border: 2px solid var(--surface);
  box-shadow: 0 2px 10px -2px rgba(107, 123, 255, 0.9);
}
.slider input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand);
  border: 2px solid var(--surface);
}

.roi__out {
  padding: 44px 40px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(63, 217, 138, 0.1), transparent 60%),
    rgba(0, 0, 0, 0.28);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.roi__cap {
  display: block;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.roi__big strong {
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.roi__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.roi__split strong {
  font-size: 21px;
}
.roi__bar {
  height: 7px;
  border-radius: 999px;
  background: var(--raised-2);
  overflow: hidden;
}
.roi__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--win));
  transition: width 0.35s var(--ease);
}
.roi__note {
  font-size: 13px;
  color: var(--text-2);
  margin: -8px 0 0;
}
.roi__break {
  margin: -10px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(63, 217, 138, 0.06);
  border: 1px solid rgba(63, 217, 138, 0.2);
}
.roi__break ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.roi__break li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-2);
}
.roi__break b {
  font-family: var(--mono);
  color: var(--text);
  font-weight: 600;
}
.roi__break b.up {
  color: var(--win);
}
.roi__out .btn {
  margin-top: auto;
}

/* ---------- Pricing ---------- */

.toggle {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  margin-bottom: 36px;
}
.toggle__btn {
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 560;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.toggle__btn.is-active {
  background: var(--raised-2);
  color: var(--text);
  box-shadow: var(--shadow);
}
.toggle__save {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--win);
  background: rgba(63, 217, 138, 0.12);
  border: 1px solid rgba(63, 217, 138, 0.3);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.tier {
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Matches the lift already on .bento__cell. The pricing cards are the one place
   on the page where a visitor is comparing options side by side, and the card
   answering the pointer is what tells them it is the thing to click. */
.tier:hover {
  border-color: #313a52;
  transform: translateY(-2px);
}
.tier--featured:hover {
  border-color: rgba(107, 123, 255, 0.62);
}
.tier--featured {
  border-color: rgba(107, 123, 255, 0.45);
  background: linear-gradient(180deg, rgba(107, 123, 255, 0.09), var(--surface) 42%);
  box-shadow: var(--shadow-lg), 0 0 60px -22px rgba(107, 123, 255, 0.75);
  transform: scale(1.025);
  z-index: 1;
}
.tier__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #080a12;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(107, 123, 255, 0.9);
}
.tier__name {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0.02em;
}
.tier__tagline {
  font-size: 13.5px;
  color: var(--text-3);
  margin-top: 4px;
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 22px 0 4px;
}
.tier__amount {
  font-size: 48px;
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier__per {
  font-size: 14px;
  color: var(--text-3);
}
.tier__billing {
  font-size: 12.5px;
  color: var(--text-3);
  min-height: 18px;
}
.tier__billing b {
  color: var(--win);
}
.tier__blurb {
  margin-top: 18px;
  font-size: 14.2px;
  color: var(--text-2);
  line-height: 1.6;
}
.tier .btn {
  margin-top: 22px;
  width: 100%;
}
.tier__features {
  margin: 26px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 11px;
}
.tier__features li {
  position: relative;
  padding-left: 25px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.tier__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(107, 123, 255, 0.14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 9px no-repeat;
}
.tier__features li.is-head {
  padding-left: 0;
  font-weight: 600;
  color: var(--text);
  font-size: 13.5px;
}
.tier__features li.is-head::before {
  display: none;
}
.tier__seat {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-3);
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.pricing__foot {
  margin-top: 28px;
  font-size: 14.5px;
  text-align: center;
}

/* ---------- Comparison table ---------- */

.compare {
  margin-top: 76px;
}
.compare__title {
  font-size: 20px;
  margin-bottom: 20px;
}
.compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.compare__table th,
.compare__table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.compare__table thead th {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.022);
  position: sticky;
  top: 0;
}
.compare__table td:not(:first-child),
.compare__table th:not(:first-child) {
  text-align: center;
  width: 130px;
}
.compare__table tbody tr:last-child td {
  border-bottom: 0;
}
.compare__table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.compare__table .grp td {
  font-weight: 620;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-bright);
  background: rgba(107, 123, 255, 0.06);
}
.compare__table td:first-child {
  color: var(--text-2);
}
.yes {
  color: var(--win);
  font-weight: 700;
}
.no {
  color: var(--text-3);
}
.val {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}

/* ---------- Quotes ---------- */

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.quote {
  padding: 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.quote:hover {
  border-color: #313a52;
  transform: translateY(-2px);
}
.quote blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.quote blockquote::before {
  content: '“';
  display: block;
  font-size: 40px;
  line-height: 0.6;
  color: var(--brand);
  margin-bottom: 12px;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: 13.5px;
  line-height: 1.4;
}
.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--raised-2), var(--raised));
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 640;
  color: var(--text-2);
}
.quotes__note {
  margin-top: 22px;
  font-size: 12.5px;
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq__list {
  display: grid;
  gap: 10px;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.faq__item[open] {
  border-color: rgba(107, 123, 255, 0.35);
  background: linear-gradient(180deg, rgba(107, 123, 255, 0.05), var(--surface) 60%);
}
.faq__item summary {
  padding: 18px 22px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 560;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8B0C2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
}
.faq__item p {
  padding: 0 22px 20px;
  color: var(--text-2);
  font-size: 14.8px;
  line-height: 1.68;
  max-width: 70ch;
}

/* ---------- Final CTA ---------- */

.cta {
  padding: 40px 0 110px;
}
.cta__card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 32px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(107, 123, 255, 0.3);
  background: linear-gradient(180deg, rgba(107, 123, 255, 0.12), rgba(10, 12, 17, 0.9) 62%);
}
.cta__glow {
  position: absolute;
  inset: auto 0 -60% 0;
  height: 340px;
  background: radial-gradient(closest-side, rgba(107, 123, 255, 0.45), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}
.cta__card h2 {
  position: relative;
  font-size: clamp(28px, 4vw, 42px);
  max-width: 18ch;
  margin-inline: auto;
}
.cta__card > p {
  position: relative;
  margin: 18px auto 0;
  max-width: 54ch;
  font-size: 16.5px;
}
.cta__row {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cta__fine {
  position: relative;
  display: block;
  margin-top: 20px;
  font-size: 12.5px;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 40px;
  background: var(--surface);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 48px;
  padding-bottom: 40px;
}
.footer__blurb {
  margin-top: 14px;
  font-size: 14px;
  max-width: 34ch;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.footer__cols h4 {
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  font-weight: 600;
}
.footer__cols a {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  padding: 5px 0;
}
.footer__cols a:hover {
  color: var(--text);
}
.disclaimer {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.25);
}
.disclaimer b {
  color: var(--text-2);
}
.footer__legal {
  margin-top: 22px;
  font-size: 12.5px;
  text-align: center;
}

/* ---------- Interactive card glow ----------

   A soft light that tracks the pointer across a card. landing.js writes --mx and
   --my as percentages; the defaults here mean a card that has never been hovered
   still lights from its centre rather than its top-left corner.

   The layer is a ::before pinned to the card's own box with border-radius
   inherited, so it needs no overflow clipping - which matters because .tier
   carries a badge hanging 11px above its top edge that clipping would behead. */

.spot {
  position: relative;
}
.spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(107, 123, 255, 0.16),
    rgba(107, 123, 255, 0.05) 40%,
    transparent 68%
  );
}
.spot:hover::before {
  opacity: 1;
}
/* Content back above the light. The badge is excluded because it is positioned
   absolutely and `position: relative` here would drop it back into flow. */
.spot > *:not(.tier__badge) {
  position: relative;
  z-index: 1;
}

/* The lift these cards already had, now with the glow that goes with it. */
.bento__cell:hover,
.step:hover,
.quote:hover {
  box-shadow: 0 18px 44px -26px rgba(107, 123, 255, 0.75);
}
.tier:hover {
  box-shadow: 0 22px 54px -28px rgba(107, 123, 255, 0.8);
}
.tier--featured:hover {
  box-shadow:
    var(--shadow-lg),
    0 0 70px -20px rgba(107, 123, 255, 0.9);
}

/* Nav links get a rule that grows from the left rather than a colour change,
   which is the cheapest way to make a header feel responsive. */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--brand-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}

/* A row under the pointer brightens, which also tells you the tape is pausable. */
.ticker__item {
  transition: color 0.2s var(--ease);
}
.ticker__item:hover {
  color: var(--text-2);
}
.ticker__item:hover b {
  border-color: var(--brand);
  color: var(--text);
}

/* Primary buttons already glow; this makes the glow move rather than just grow. */
.btn--primary {
  transition:
    transform 0.16s var(--ease),
    box-shadow 0.28s var(--ease),
    filter 0.28s var(--ease);
}
.btn--primary:hover {
  filter: saturate(1.08) brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .spot::before,
  .nav__links a::after {
    transition: none;
  }
}

/* ---------- Export sample ---------- */

.export__card {
  padding: 0;
  overflow: hidden;
}
.export__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.export__file {
  font-size: 13px;
  color: var(--text-2);
}
/* The table is wider than a phone and that is fine: it scrolls in its own box
   rather than making the page scroll sideways. */
.export__scroll {
  overflow-x: auto;
}
.export__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.4px;
  white-space: nowrap;
}
.export__table th,
.export__table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.export__table th {
  color: var(--text-3);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.015);
}
.export__table td {
  color: var(--text-2);
}
/* Qualified, because `.export__table td` alone outranks a bare .up/.down and
   would grey out the one thing this table exists to show. */
.export__table td.up {
  color: var(--win);
}
.export__table td.down {
  color: var(--loss);
}
.export__table tbody tr:last-child td {
  border-bottom: 0;
}
.export__note {
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ---------- Ticker ----------

   The track holds the list twice and slides exactly half its own width, so the
   moment it finishes it is showing the copy it started with and the jump back
   to zero is invisible. Duration is set against the content: fast enough to
   feel alive, slow enough to read a line before it leaves. */

.ticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0 11px 18px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.004));
  overflow: hidden;
}
/* Outside the masked viewport on purpose. If this scrolled with the tape it
   would spend most of its time off screen, which defeats the point of it. */
.ticker__badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  cursor: help;
}
.ticker__vp {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* Items arrive and leave rather than being cut against the viewport edge. The
     left ramp is the longer of the two: it has to finish before the row reaches
     the badge, or a half-faded price sits alongside it looking like a bug. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
}
/* The class is added by landing.js once it has duplicated the list. Sliding
   -50% of a track holding only one copy would run half the items off screen and
   snap back, so if the script never arrives the row simply sits still. */
.ticker__track.is-looping {
  animation: ticker 64s linear infinite;
}
/* A line the visitor is reading should not slide out from under them, and
   focus-within covers reaching it by keyboard rather than pointer. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}
.ticker__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 46px;
  font-size: 13.4px;
  color: var(--text-3);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  position: absolute;
  right: -25px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
}
.ticker__item b {
  color: var(--text-2);
  font-weight: 600;
  font-size: 12.4px;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
}
/* Tabular figures so a price does not jiggle sideways as its digits change. */
.ticker__px {
  color: var(--text);
  font-size: 13px;
  border-radius: 4px;
  padding: 1px 3px;
}
.ticker__chg {
  font-size: 12.4px;
  min-width: 52px;
}
.ticker__chg.is-up {
  color: var(--win);
}
.ticker__chg.is-down {
  color: var(--loss);
}
/* The flash is the print landing. It fades out on its own rather than being
   cleared on a timer, so a fast run of ticks overlaps instead of queueing. */
.tick-up {
  animation: tickUp 0.75s ease-out;
}
.tick-down {
  animation: tickDown 0.75s ease-out;
}
@keyframes tickUp {
  0% {
    background: rgba(63, 217, 138, 0.28);
    color: var(--win);
  }
  100% {
    background: transparent;
    color: var(--text);
  }
}
@keyframes tickDown {
  0% {
    background: rgba(255, 92, 108, 0.28);
    color: var(--loss);
  }
  100% {
    background: transparent;
    color: var(--text);
  }
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Reveal on scroll ----------

   Only opacity and transform are animated, so every reveal stays on the
   compositor and never triggers layout. --d is the stagger delay, set per
   element by landing.js; it defaults to 0 so an element that JS never gets to
   still behaves. The class is added by JS, so with scripting off nothing is
   ever hidden in the first place. */

.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.994);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
  /* Deliberately no will-change: there are ~30 of these on the page, and hinting
     them all up front would hold that many compositor layers from load. The
     browser promotes an opacity/transform transition on its own while it runs,
     which is the only moment it matters. */
}
/* The art alongside a heading travels a touch further and takes a touch longer,
   which reads as depth rather than as a second, louder animation. Declared
   BEFORE the .is-in rule: both weigh the same, so if it came after it would
   beat `transform: none` and strand the cell 26px low for good.

   The qualifiers are wrapped in :where() so the whole reveal system stays at
   single-class weight. Written plainly as .reveal.is-in it ties with every
   .card:hover rule and, sitting further down the file, wins - which silently
   killed the hover lift on any card that had been revealed, i.e. all of them by
   the time a visitor could reach one. */
.reveal:where(.reveal--art) {
  transform: translateY(26px) scale(0.985);
  transition-duration: 0.85s;
}

.reveal:where(.is-in) {
  opacity: 1;
  transform: none;
}

/* ---------- Hero entrance ----------

   Wrapped in no-preference so the default state of the markup is fully visible.
   The hero holds the primary CTA, and it must never depend on an animation
   running to be seen. */

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *,
  .hero__art {
    animation: heroIn 0.85s var(--ease) both;
  }
  .hero__pill {
    animation-delay: 0.05s;
  }
  .hero__copy h1 {
    animation-delay: 0.14s;
  }
  .hero__sub {
    animation-delay: 0.24s;
  }
  .hero__ctas {
    animation-delay: 0.34s;
  }
  .hero__proof {
    animation-delay: 0.42s;
  }
  .hero__art {
    animation-delay: 0.2s;
    animation-duration: 1s;
  }
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Motion preference ----------

   theme.css already collapses every animation and transition on the page to
   0.001ms under reduce, which covers the float on the hero card, the hero
   entrance and the reveals. What it cannot do is remove a transform, so the
   hover lifts would still jump two pixels instantly. That is the gap here. */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal:where(.reveal--art) {
    transform: none;
  }
  .bento__cell:hover,
  .tier:hover,
  .step:hover,
  .quote:hover {
    transform: none;
  }
  .bento__cell--wide:hover .bento__art img {
    transform: none;
  }
  /* A permanently travelling strip is the clearest case of what reduce is for.
     The global rule collapses its duration, which would leave it parked
     mid-slide, so stop it outright and let the row scroll by hand instead. */
  .ticker__track {
    animation: none;
  }
  .ticker {
    overflow-x: auto;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__art {
    max-width: 640px;
    min-height: 0;
  }
  .shot--back {
    display: none;
  }
  .bento,
  .quotes__grid,
  .steps,
  .tiers,
  .tally {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento__cell--wide {
    grid-column: span 2;
  }
  .tier--featured {
    transform: none;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .section {
    padding: 76px 0;
  }
  .nav__links,
  .nav__actions {
    display: none;
  }
  .nav__burger {
    display: grid;
  }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
    background: rgba(7, 8, 12, 0.97);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ba {
    grid-template-columns: 1fr;
  }
  .ba__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .bento,
  .quotes__grid,
  .steps,
  .tiers,
  .tally {
    grid-template-columns: 1fr;
  }
  .notfor {
    padding: 24px 22px;
  }
  .bento__cell--wide {
    grid-column: span 1;
    flex-direction: column;
    padding-right: 28px;
    align-items: stretch;
  }
  .bento__art {
    border-radius: 14px;
    border-right: 1px solid var(--line);
    transform: none;
  }
  .roi__card {
    grid-template-columns: 1fr;
  }
  .roi__out {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .roi__copy,
  .roi__out {
    padding: 32px 26px;
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 520px) {
  .stats {
    grid-template-columns: 1fr;
  }
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  .hero__ctas .btn {
    width: 100%;
  }
}