/* ==========================================================================
   Detailerz — marketing site
   Look: "wet obsidian" — near-black with a glossy, just-rinsed sheen,
   neon cyan accents, glass panels, light sweeps and water beads.
   No build step, no dependencies. Everything below is hand-rolled.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surfaces, darkest to lightest */
  --void: #04060a;
  --obsidian: #070b11;
  --deep: #0a0f17;
  --panel: #0e141d;
  --panel-2: #131b26;

  /* hairlines + fills */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --fill-1: rgba(255, 255, 255, 0.03);
  --fill-2: rgba(255, 255, 255, 0.06);

  /* type */
  --text: #eef5f8;
  --muted: #94a3b1;
  --dim: #5d6b78;

  /* brand */
  --cyan: #22e3d0;
  --cyan-hot: #6bfff0;
  --cyan-deep: #0e9e94;
  --violet: #7c5cff;
  --amber: #ffb547;
  --rose: #ff5d8f;

  --glow: 0 0 0 1px rgba(34, 227, 208, 0.25), 0 0 48px -8px rgba(34, 227, 208, 0.45);
  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* the nav is fixed — stop anchor targets landing underneath it */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--void);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* Icons come from the <symbol> sprite. Presentation attributes on the sprite's
   wrapper <g> do NOT reach instanced content, so the stroke style has to be
   inherited through the <use> element itself. Paths that want a solid fill
   (star, play) set fill/stroke directly and override this. */
use {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: rgba(34, 227, 208, 0.3); color: #fff; }

/* the whole page sits on a wet-obsidian gradient with a faint grid over it */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(34, 227, 208, 0.13), transparent 60%),
    radial-gradient(800px 700px at 92% 8%, rgba(124, 92, 255, 0.12), transparent 62%),
    linear-gradient(180deg, #070b11 0%, #04060a 45%, #05080d 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1200px 900px at 50% 0%, #000 20%, transparent 85%);
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 88px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.eyebrow--lg { font-size: 15px; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.h-display {
  font-size: clamp(44px, 7.2vw, 92px);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.025em; }

.lede {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
  line-height: 1.65;
  max-width: 58ch;
}

/* gloss text — the "wet" highlight sliding across a word */
.gloss {
  background: linear-gradient(
    100deg,
    var(--cyan-deep) 0%,
    var(--cyan) 24%,
    var(--cyan-hot) 42%,
    #ffffff 52%,
    var(--cyan-hot) 62%,
    var(--cyan) 80%,
    var(--cyan-deep) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gloss-slide 7s var(--ease) infinite;
}
@keyframes gloss-slide {
  0%, 12% { background-position: 130% 0; }
  62%, 100% { background-position: -30% 0; }
}

.grad-violet {
  background: linear-gradient(100deg, #b7a6ff, #7c5cff 60%, #4f2fe0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), border-color 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan) 55%, #12b6a8);
  color: #012724;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 10px 34px -10px rgba(34, 227, 208, 0.75);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 44px -12px rgba(34, 227, 208, 0.9);
}
/* light sweeps across the button on hover, like a wipe-down */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--fill-1);
  border: 1px solid var(--line-2);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover {
  background: var(--fill-2);
  border-color: rgba(34, 227, 208, 0.4);
  transform: translateY(-2px);
}
.btn--lg { height: 54px; padding: 0 30px; font-size: 15.5px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(6, 9, 14, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover { color: var(--text); background: var(--fill-1); }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; }

/* ---------- nav mega-menus (Features / Pricing) ---------- */
.nav__item { position: static; display: inline-flex; }
.nav__item__row { display: flex; align-items: center; }
.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--dim);
  transition: color 0.2s, background 0.2s;
}
.nav__link--drop:hover { color: var(--text); background: var(--fill-1); }
.nav__chev { color: var(--dim); transition: transform 0.2s var(--ease); }
.nav__item.is-open .nav__link { color: var(--text); background: var(--fill-1); }
.nav__item.is-open .nav__link--drop { color: var(--cyan); background: var(--fill-1); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); color: var(--cyan); }

.nav__dropdown {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  background: rgba(10, 14, 21, 0.98);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(20px);
  padding: 22px;
  z-index: 90;
}
.nav__dropdown--wide {
  width: min(760px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 110px));
  overflow-y: auto;
}
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* features panel: icon + title + description tiles */
.navmenu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.navmenu__item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  transition: background 0.15s;
}
.navmenu__item:hover { background: var(--fill-1); }
.navmenu__ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  color: var(--cyan);
}
/* Full-color emoji instead of the single-tone line icon -- no background
   badge needed behind it, the glyph is already colorful and reads better
   sitting straight on the card. */
.navmenu__ico--emoji { background: none; font-size: 22px; line-height: 1; }
.navmenu__t { display: block; font-size: 13.5px; font-weight: 560; color: var(--text); }
.navmenu__d { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.navmenu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.navmenu__all { font-size: 13px; color: var(--cyan); }
.navmenu__all:hover { color: var(--cyan-hot); }

/* pricing panel: condensed plan columns */
.navmenu__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.navmenu__plan {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 14px;
  position: relative;
}
.navmenu__plan.is-hot { border-color: rgba(34, 227, 208, 0.4); background: rgba(34, 227, 208, 0.05); }
.navmenu__flag {
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: #04211f;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  padding: 3px 8px;
  border-radius: 999px;
}
.navmenu__flag--soon {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.navmenu__pname { font-size: 13.5px; font-weight: 600; color: var(--text); }
.navmenu__pprice { font-size: 20px; font-weight: 620; letter-spacing: -0.02em; color: var(--cyan); margin-top: 2px; }
.navmenu__plist { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.navmenu__plist li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.navmenu__plist svg { flex: none; margin-top: 2px; color: var(--cyan); }

/* features panel: every feature gets a tile; the ones nobody else has
   get a cyan-tinted tile and a small "Unique" pill so they stand out
   without leaving the rest of the grid. */
.navmenu__item--unique {
  border: 1px solid rgba(34, 227, 208, 0.3);
  background: rgba(34, 227, 208, 0.07);
}
.navmenu__item--unique .navmenu__ico { background: rgba(34, 227, 208, 0.18); color: var(--cyan-hot); }
.navmenu__item--unique .navmenu__ico--emoji { background: none; }
.navmenu__unique {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #04211f;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  padding: 2px 6px;
  border-radius: 999px;
  margin-bottom: 4px;
}

/* logo lockup */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #14313a, #081218);
  border: 1px solid rgba(34, 227, 208, 0.3);
  box-shadow: 0 0 22px -6px rgba(34, 227, 208, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.09) inset;
  position: relative;
  overflow: hidden;
  flex: none;
}
.logo__mark::after {
  /* the wet highlight that drifts across the tile */
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 58%);
  animation: gloss-slide 6s var(--ease) infinite;
}
.logo__word {
  font-size: 17.5px;
  font-weight: 640;
  letter-spacing: -0.035em;
}
.logo__word b { font-weight: 640; color: var(--cyan); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 168px 0 90px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fill-1);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--muted);
  backdrop-filter: blur(10px);
  margin-bottom: 26px;
}
.badge__new {
  color: var(--cyan-hot);
  font-weight: 650;
}
.badge__star {
  flex: none;
  color: #ffd166;
  vertical-align: -3px;
  margin-left: 1px;
  animation: star-glisten 2.4s ease-in-out infinite;
}
@keyframes star-glisten {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 209, 102, 0.55)); }
  50% { opacity: 0.8; filter: drop-shadow(0 0 9px rgba(255, 224, 140, 0.95)); }
}
.badge__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: normal;
}
.badge__pill svg { flex: none; color: var(--amber); }
.hero__tagline { margin-top: 18px; font-size: 24px; font-weight: 620; color: var(--cyan); letter-spacing: -0.01em; }
.hero__highlights { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero__highlights .spot__kicker { margin-bottom: 0; }
.hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero__meta {
  margin-top: 26px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--dim);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }

/* the animated car / app stage on the right */
.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.stage__halo {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(34, 227, 208, 0.2), transparent 62%);
  filter: blur(28px);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}
/* concentric orbit rings — the "orbital polisher" nod */
.stage__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.stage__ring--1 { inset: 4%; animation: spin 34s linear infinite; }
.stage__ring--2 { inset: 15%; border-color: rgba(34, 227, 208, 0.18); animation: spin 24s linear infinite reverse; }
.stage__ring--3 { inset: 27%; border-style: dashed; border-color: rgba(255, 255, 255, 0.09); animation: spin 46s linear infinite; }
.stage__ring::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px 2px rgba(34, 227, 208, 0.85);
}
@keyframes spin { to { transform: rotate(360deg); } }

.stage__car {
  position: relative;
  width: 78%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
}

/* floating glass cards over the stage */
.float {
  position: absolute;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 20, 29, 0.78);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float--a { top: 8%; left: -4%; animation-delay: -0.6s; }
.float--b { top: 42%; right: -6%; animation-delay: -2.4s; }
.float--c { bottom: 10%; left: 2%; animation-delay: -4s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
.float__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(34, 227, 208, 0.13);
  color: var(--cyan);
}
.float__icon--v { background: rgba(124, 92, 255, 0.15); color: #a892ff; }
.float__icon--a { background: rgba(255, 181, 71, 0.14); color: var(--amber); }
.float__icon--p { background: rgba(255, 93, 143, 0.14); color: var(--rose); }
.float__k { color: var(--dim); font-size: 11px; letter-spacing: 0.02em; }
.float__v { font-weight: 620; font-size: 13.5px; letter-spacing: -0.02em; }

/* water beads scattered over the hero */
.beads { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bead {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05) 42%),
    radial-gradient(circle at 68% 78%, rgba(34, 227, 208, 0.5), transparent 55%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 10px rgba(34, 227, 208, 0.28);
  opacity: 0;
  animation: bead-drift linear infinite;
}
@keyframes bead-drift {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  14% { opacity: 0.75; }
  78% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(120px) scale(1.05); }
}

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--dim);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__item svg { color: rgba(34, 227, 208, 0.55); flex: none; }

/* ---------- section heading block ---------- */
.head { max-width: 720px; margin-bottom: 56px; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }
.head p { margin-top: 20px; }
.head--center p { margin-inline: auto; }

/* ---------- cards ---------- */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  padding: 28px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
/* a cyan wash that follows the pointer across the card */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(34, 227, 208, 0.13),
    transparent 62%
  );
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: rgba(34, 227, 208, 0.28); }
.card:hover::before { opacity: 1; }

.ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(34, 227, 208, 0.11);
  border: 1px solid rgba(34, 227, 208, 0.22);
  color: var(--cyan);
  margin-bottom: 18px;
}
.ico--v { background: rgba(124, 92, 255, 0.13); border-color: rgba(124, 92, 255, 0.26); color: #a892ff; }
.ico--a { background: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.24); color: var(--amber); }
.ico--r { background: rgba(255, 93, 143, 0.12); border-color: rgba(255, 93, 143, 0.24); color: var(--rose); }
/* Full-color emoji instead of the single-tone line icon -- overrides all
   three accent variants above (same element carries both classes), since a
   colorful glyph doesn't need a tinted badge behind it. */
.ico--emoji { background: none; border-color: transparent; font-size: 28px; line-height: 1; }

.card h3 { margin-bottom: 10px; font-size: 18px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- the stack / problem-solution ---------- */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 48px;
}
.versus__col {
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line);
}
.versus__col--bad {
  background: rgba(255, 93, 143, 0.035);
  border-color: rgba(255, 93, 143, 0.16);
}
.versus__col--good {
  background: linear-gradient(170deg, rgba(34, 227, 208, 0.09), rgba(34, 227, 208, 0.02));
  border-color: rgba(34, 227, 208, 0.28);
  box-shadow: 0 40px 90px -50px rgba(34, 227, 208, 0.7);
}
.versus__label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.versus__col--bad .versus__label { color: var(--rose); }
.versus__col--good .versus__label { color: var(--cyan); }
.versus__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 14.5px;
  color: var(--muted);
}
.versus__list li:last-child { border-bottom: 0; }
.versus__list b { color: var(--text); font-weight: 550; }
.versus__list svg { flex: none; margin-top: 3px; }
.versus__col--bad svg { color: rgba(255, 93, 143, 0.75); }
.versus__col--good svg { color: var(--cyan); }
.versus__arrow {
  display: grid;
  place-items: center;
  color: var(--dim);
}
/* two-up text/screen layout (booking section) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.versus__arrow div {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: var(--panel);
}

/* fake app chrome */
.screen {
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--panel), var(--deep));
  overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(34, 227, 208, 0.07);
}
.screen__bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
}
.screen__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.screen__title {
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--dim);
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.screen__body { padding: 20px; min-height: 400px; }

/* generic mock UI atoms */
.mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  margin-bottom: 9px;
}
.mock-row:last-child { margin-bottom: 0; }
.mock-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  width: 58px;
  flex: none;
}
.mock-bar { height: 8px; border-radius: 999px; background: var(--fill-2); }
.mock-tag {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: auto;
  flex: none;
}
.tag--done { background: rgba(34, 227, 208, 0.14); color: var(--cyan); }
.tag--now { background: rgba(255, 181, 71, 0.14); color: var(--amber); }
.tag--next { background: rgba(255, 255, 255, 0.07); color: var(--dim); }
.mock-name { font-size: 13.5px; font-weight: 550; letter-spacing: -0.015em; }
.mock-sub { font-size: 11.5px; color: var(--dim); }
.mock-money { font-family: var(--mono); font-size: 13px; color: var(--cyan); }

.mock-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mock-panel {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--fill-1);
  padding: 16px;
}
.mock-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
  font-weight: 600;
}
.mock-stat { font-size: 26px; font-weight: 640; letter-spacing: -0.035em; }
.mock-delta { font-size: 12px; color: var(--cyan); }

/* calendar week mock */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(84px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cal-day {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-1);
  padding: 10px 8px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day--today { border-color: rgba(34, 227, 208, 0.4); background: rgba(34, 227, 208, 0.06); }
.cal-day__hd { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 2px; }
.cal-day__hd span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-day__hd b { font-size: 15px; font-weight: 640; letter-spacing: -0.02em; }
.cal-chip { font-size: 10px; padding: 5px 6px; border-radius: 7px; background: rgba(34, 227, 208, 0.09); color: var(--muted); line-height: 1.35; }

/* map mock */
.map {
  position: relative;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(600px 400px at 30% 20%, rgba(34, 227, 208, 0.07), transparent 60%),
    #080c12;
}
.map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.map__road {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
}
.map__pin {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #012724;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  box-shadow: 0 0 0 4px rgba(34, 227, 208, 0.16), 0 6px 14px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
}
.map__pin--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dim);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}
.map__route { position: absolute; inset: 0; }
.map__route path {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: dash 1.4s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -28; } }
.map__chip {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(10, 15, 23, 0.86);
  border: 1px solid rgba(34, 227, 208, 0.3);
  backdrop-filter: blur(10px);
  font-size: 12px;
}
.map__chip b { color: var(--cyan); }

/* receipt mock */
.receipt {
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, 0.028) 0 22px, transparent 22px 44px
  );
  padding: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  line-height: 2;
  position: relative;
  overflow: hidden;
}
.receipt__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(180deg, transparent, rgba(34, 227, 208, 0.28), transparent);
  animation: scan 2.6s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: -64px; }
  50% { top: 100%; }
}
.extract { display: flex; flex-direction: column; gap: 8px; }
.extract__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(34, 227, 208, 0.06);
  border: 1px solid rgba(34, 227, 208, 0.16);
  font-size: 12.5px;
}
.extract__row span { color: var(--dim); }
.extract__row b { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- before/after slider ---------- */
.ba {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  aspect-ratio: 16 / 10;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  background: #05080d;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 18px rgba(34, 227, 208, 0.85);
  pointer-events: none;
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 12, 18, 0.9);
  border: 1px solid var(--cyan);
  display: grid;
  place-items: center;
  color: var(--cyan);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 26px rgba(34, 227, 208, 0.5);
}
.ba__tag {
  position: absolute;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.ba__tag--l { left: 14px; background: rgba(0, 0, 0, 0.6); color: #9aa7b3; border: 1px solid var(--line-2); }
.ba__tag--r { right: 14px; background: rgba(34, 227, 208, 0.18); color: var(--cyan-hot); border: 1px solid rgba(34, 227, 208, 0.4); }

/* ==========================================================================
   ROI BAND — time saved → money kept → business grown
   ========================================================================== */
.roi {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.roi__card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  padding: 30px 26px;
  text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.roi__card:hover { transform: translateY(-4px); border-color: rgba(34, 227, 208, 0.3); }
.roi__card--hot {
  border-color: rgba(34, 227, 208, 0.35);
  background: linear-gradient(170deg, rgba(34, 227, 208, 0.11), rgba(34, 227, 208, 0.015));
  box-shadow: 0 40px 90px -55px rgba(34, 227, 208, 0.85);
}
.roi__n {
  display: block;
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #8fe9e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.roi__card--hot .roi__n {
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}
.roi__card strong {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.roi__card p {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.roi__arrow {
  display: grid;
  place-items: center;
  color: var(--dim);
  flex: none;
}
.roi__arrow svg { opacity: 0.5; }
.roi__foot {
  margin-top: 30px;
  text-align: center;
  font-size: 15.5px;
  color: var(--muted);
  letter-spacing: -0.015em;
}
.roi__foot b { color: var(--cyan-hot); font-weight: 600; }

@media (max-width: 900px) {
  .roi { grid-template-columns: 1fr; gap: 12px; }
  .roi__arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ==========================================================================
   TIME = MONEY CALCULATOR
   ========================================================================== */
.calc {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.calc__inputs { display: flex; flex-direction: column; gap: 30px; }
.calc__field { display: flex; flex-direction: column; gap: 10px; }
.calc__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--muted);
}
.calc__label b { font-size: 17px; color: var(--text); font-weight: 650; letter-spacing: -0.02em; }
.calc__label--lg { font-size: 15.5px; }
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  outline: none;
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  border: 3px solid var(--void);
  box-shadow: 0 0 0 1px rgba(34, 227, 208, 0.5), 0 6px 18px -6px rgba(34, 227, 208, 0.9);
  cursor: pointer;
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  border: 3px solid var(--void);
  box-shadow: 0 0 0 1px rgba(34, 227, 208, 0.5), 0 6px 18px -6px rgba(34, 227, 208, 0.9);
  cursor: pointer;
}
.calc__range--v { background: linear-gradient(90deg, #4f2fe0, var(--violet)); }
.calc__range--v::-webkit-slider-thumb {
  background: linear-gradient(180deg, #b7a6ff, var(--violet));
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.5), 0 6px 18px -6px rgba(124, 92, 255, 0.9);
}
.calc__range--v::-moz-range-thumb {
  background: linear-gradient(180deg, #b7a6ff, var(--violet));
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.5), 0 6px 18px -6px rgba(124, 92, 255, 0.9);
}
.calc__ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); }
.calc__output { display: flex; gap: 16px; }
.calc__stat {
  flex: 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--fill-1);
  padding: 22px 18px;
  text-align: center;
}
.calc__stat--hot {
  border-color: rgba(34, 227, 208, 0.35);
  background: linear-gradient(170deg, rgba(34, 227, 208, 0.12), rgba(34, 227, 208, 0.02));
}
.calc__n {
  display: block;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--text);
}
.calc__stat--hot .calc__n { color: var(--cyan-hot); }
.calc__l { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.calc__callout {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan-hot);
  letter-spacing: -0.01em;
}

.guarantee {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--fill-1);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.guarantee__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(34, 227, 208, 0.12);
  color: var(--cyan);
}
.guarantee b { color: var(--text); }

@media (max-width: 780px) {
  .calc { grid-template-columns: 1fr; padding: 26px; }
  .calc__output { flex-direction: column; }
}

/* ==========================================================================
   WELCOME POPUP — "try it out" modal shown once per visitor
   ========================================================================== */
.promo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo.is-open { display: flex; }
.promo__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(6px);
}
.promo__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7), var(--glow);
  padding: 32px 30px 28px;
  animation: promo-in 0.4s var(--ease);
}
@keyframes promo-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.promo__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--dim);
  background: var(--fill-1);
  border: 1px solid var(--line);
}
.promo__close:hover { color: var(--text); background: var(--fill-2); }
.promo__title {
  margin-bottom: 18px;
  padding-right: 24px;
  color: var(--text);
  font-size: clamp(23px, 5.4vw, 29px);
  font-weight: 720;
  letter-spacing: -0.03em;
}
.promo__list { display: flex; flex-direction: column; gap: 12px; }
.promo__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.promo__list svg { flex: none; color: var(--cyan); }
.promo__more { margin-top: 4px; }
.promo__more .promo__list { padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.promo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}
.promo__toggle:hover { color: var(--cyan-hot); }
.promo__chev { transition: transform 0.2s var(--ease); }
.promo__toggle[aria-expanded="true"] .promo__chev { transform: rotate(180deg); }
.promo__gold {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: #ffd60a;
  line-height: 1.4;
  text-align: center;
}
.promo .btn { margin-top: 12px; }

@media (max-width: 520px) {
  .promo__panel { padding: 26px 22px 22px; }
}

/* ==========================================================================
   FEATURE SPOTLIGHTS — the four headline features get a full band each
   ========================================================================== */
.spot {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: center;
  padding: 96px 0;
  position: relative;
}
.spot + .spot { border-top: 1px solid var(--line); }
.spot--flip .spot__copy { order: 2; }
.spot--flip .spot__vis { order: 1; }

.spot__num {
  position: absolute;
  top: 54px;
  right: 0;
  font-size: 190px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.028);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.spot--flip .spot__num { right: auto; left: 0; }
.spot__copy, .spot__vis { position: relative; z-index: 1; }

.spot__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 13px 0 8px;
  border-radius: 999px;
  background: rgba(34, 227, 208, 0.1);
  border: 1px solid rgba(34, 227, 208, 0.26);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.spot__kicker--v { background: rgba(124, 92, 255, 0.11); border-color: rgba(124, 92, 255, 0.28); color: #a892ff; }
.spot__kicker--a { background: rgba(255, 181, 71, 0.1); border-color: rgba(255, 181, 71, 0.26); color: var(--amber); }
.spot__kicker--r { background: rgba(255, 93, 143, 0.1); border-color: rgba(255, 93, 143, 0.26); color: var(--rose); }
.spot__kicker svg { flex: none; }

.spot h2 { font-size: clamp(30px, 3.9vw, 46px); margin-bottom: 20px; }
.spot__copy > p { color: var(--muted); font-size: 16.5px; line-height: 1.65; max-width: 52ch; }
.spot__list { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; }
.spot__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.spot__list svg { flex: none; margin-top: 3px; color: var(--cyan); }
.spot__list b { color: var(--text); font-weight: 550; }

.spot__proof {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(34, 227, 208, 0.1), rgba(34, 227, 208, 0.02));
  border: 1px solid rgba(34, 227, 208, 0.24);
}
.spot__proof b {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--cyan-hot);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.spot__proof span { font-size: 13px; color: var(--muted); line-height: 1.4; max-width: 24ch; }

/* ---------- phone frame + sms thread ---------- */
.phone {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  border-radius: 38px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #10161f, #070b10);
  padding: 12px;
  box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(34, 227, 208, 0.08), 0 0 70px -30px rgba(34, 227, 208, 0.5);
}
.phone__screen {
  border-radius: 28px;
  background: #06090e;
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.phone__top {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.02);
}
.phone__top .avatar { width: 32px; height: 32px; font-size: 11.5px; }
.thread {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.sms {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  position: relative;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.sms.is-in { opacity: 1; transform: none; }
.sms--out {
  align-self: flex-end;
  background: linear-gradient(160deg, #1fd3c2, #0e9e94);
  color: #012724;
  border-bottom-right-radius: 5px;
  font-weight: 500;
}
.sms--in {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.sms__when {
  display: block;
  font-size: 10.5px;
  margin-top: 6px;
  opacity: 0.72;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}
.sms--out .sms__when { color: #023c37; }
.sms--in .sms__when { color: var(--dim); }
.sms__auto {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #04211f;
  color: var(--cyan);
  border: 1px solid rgba(34, 227, 208, 0.4);
  white-space: nowrap;
}

/* automation timeline beside the phone */
.tl { display: flex; flex-direction: column; gap: 2px; }
.tl__row { display: flex; gap: 15px; align-items: flex-start; }
.tl__spine { display: flex; flex-direction: column; align-items: center; flex: none; align-self: stretch; }
.tl__dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 227, 208, 0.14);
  margin-top: 5px; flex: none;
}
.tl__dot--v { background: #a892ff; box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.16); }
.tl__dot--a { background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.15); }
.tl__line { width: 1px; flex: 1; background: linear-gradient(180deg, var(--line-2), transparent); margin: 5px 0 0; }
.tl__body { padding-bottom: 22px; }
.tl__when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.tl__what { font-size: 14px; font-weight: 550; letter-spacing: -0.02em; margin-top: 3px; }
.tl__why { font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }

/* ---------- photo filmstrip (before/after auto-pairing) ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 14px; }
.strip__cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background: #0b1119;
}
.strip__cell span {
  position: absolute;
  left: 5px; bottom: 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.66);
  color: #9aa7b3;
  backdrop-filter: blur(4px);
}
.strip__cell.is-after { border-color: rgba(34, 227, 208, 0.4); }
.strip__cell.is-after span { background: rgba(34, 227, 208, 0.22); color: var(--cyan-hot); }
.strip__link {
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.strip__link svg { color: var(--cyan); flex: none; }

/* ==========================================================================
   PLAN × FEATURE MATRIX
   ========================================================================== */
.matrix {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.012);
}
.matrix__scroll { overflow-x: auto; }
/* separate, not collapse: a collapsed-border table lets a sliver of the row
   just below a sticky <th> bleed through above it as you scroll -- a real
   rendering quirk, not a spacing bug -- which is exactly what cut off the
   top-left "THE BIG FOUR" label under the sticky plan headers. Every border
   here is already declared on one side of one cell (never doubled up
   between adjacent cells), so switching to separate doesn't double any of
   them up now that they're no longer being merged. */
.matrix table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 700px; }

.matrix thead th {
  /* Was position:sticky -- a table already narrow-screen-disabled below
     900px (see the old max-width:900px override this replaces) because it
     kept slicing through the first couple of rows underneath it on scroll.
     Turned out to do the same thing above 900px too, just less reliably
     reproducible. Not worth the instability for a comparison table people
     scroll through once. */
  padding: 22px 18px;
  text-align: center;
  background: #0a0f16;
  border-bottom: 1px solid var(--line-2);
  vertical-align: bottom;
}
.matrix thead th:first-child { text-align: left; width: 34%; vertical-align: bottom; }
.matrix__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  color: #04211f;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
}
.matrix__flag--soon {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.matrix__plan { font-size: 15.5px; font-weight: 620; letter-spacing: -0.025em; display: block; }
.matrix__star { display: inline-flex; vertical-align: -1px; color: var(--amber); }
.matrix__price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 8px; }
.matrix__cur { font-size: 14px; font-weight: 500; color: var(--muted); }
.matrix__amt {
  font-size: 32px;
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.matrix__per { font-size: 12px; color: var(--dim); margin-left: 1px; }
.matrix__billing { display: block; margin-top: 4px; font-size: 11px; color: var(--dim); min-height: 15px; }
.matrix thead th.is-hot { background: linear-gradient(180deg, rgba(34, 227, 208, 0.14), rgba(34, 227, 208, 0.04)); }
.matrix thead th.is-hot .matrix__plan { color: var(--cyan-hot); }
.matrix thead th.is-hot .matrix__amt { color: var(--cyan); }

.matrix .grp td {
  padding: 20px 18px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--line);
}
.matrix tbody td {
  padding: 13px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
}
.matrix tbody td:first-child { text-align: left; color: var(--muted); }
.matrix tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.matrix tbody td.hot { background: rgba(34, 227, 208, 0.045); }
.matrix tbody tr:hover td.hot { background: rgba(34, 227, 208, 0.08); }
.matrix tbody tr:last-child td { border-bottom: 0; }

.matrix .feat { display: inline-flex; align-items: center; gap: 9px; }
.matrix .feat b { color: var(--text); font-weight: 550; }
.matrix .feat__star { display: inline-flex; color: var(--amber); }
.matrix .star {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(34, 227, 208, 0.14);
  border: 1px solid rgba(34, 227, 208, 0.3);
  color: var(--cyan);
  white-space: nowrap;
}

/* the checkmark itself */
.tick {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(34, 227, 208, 0.14);
  border: 1px solid rgba(34, 227, 208, 0.35);
  color: var(--cyan);
}
.tick--hot {
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  border-color: transparent;
  color: #012724;
  box-shadow: 0 4px 14px -4px rgba(34, 227, 208, 0.8);
}
.nope { color: rgba(255, 255, 255, 0.16); font-size: 17px; line-height: 1; }
.lim { font-size: 12.5px; color: var(--muted); font-family: var(--mono); letter-spacing: -0.02em; }

.matrix__foot {
  display: flex;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.018);
}
.matrix__foot a { flex: 1; }

@media (max-width: 760px) {
  /* Below the phone breakpoint the comparison is still the same table, just
     narrower -- every feature named once, with all three plans ticked off in
     a row next to it (no more separate stacked per-plan cards). table-layout:
     fixed plus dropping the 700px min-width is what lets it fit without a
     sideways scroll on a phone. */
  .matrix table { min-width: 0; table-layout: fixed; }
  .matrix thead th { padding: 10px 4px 9px; border-bottom: 2px solid var(--line-2); }
  .matrix thead th:first-child { width: 44%; }
  .matrix thead th:not(:first-child) { border-left: 1px solid var(--line); }
  .matrix thead th:not(.is-hot) { background: rgba(255, 255, 255, 0.045); }
  .matrix__flag {
    position: static;
    transform: none;
    display: block;
    max-width: 100%;
    width: fit-content;
    margin: 0 auto 6px;
    height: auto;
    min-height: 16px;
    padding: 2px 6px;
    font-size: 8px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
  .matrix__plan { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
  .matrix__price, .matrix__billing { display: none; }
  .matrix .grp td { padding: 14px 8px 6px; font-size: 9.5px; }
  .matrix tbody td { padding: 10px 3px; font-size: 12.5px; border-right: 1px solid var(--line); }
  .matrix tbody td:last-child { border-right: 0; }
  .matrix tbody td:first-child { padding-left: 10px; padding-right: 6px; }
  .matrix .feat { gap: 6px; }
  .matrix .feat b { font-size: 12.5px; }
  .matrix .star { display: none; }
  .matrix .feat__star svg { width: 11px; height: 11px; }
  .tick { width: 20px; height: 20px; }
  .lim { font-size: 10px; }
}

/* ---------- bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }

.mini-list { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.mini-list li {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
  color: var(--muted);
}
.mini-list svg { color: var(--cyan); flex: none; }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  padding: 34px 26px;
  text-align: center;
}
.stat__n {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 640;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #8fe9e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__l { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote__stars { display: flex; gap: 2px; color: var(--amber); }
.quote p { font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  color: #012724;
  background: linear-gradient(160deg, var(--cyan-hot), var(--cyan-deep));
  flex: none;
}
.avatar--v { background: linear-gradient(160deg, #b7a6ff, #5a34e0); color: #fff; }
.avatar--a { background: linear-gradient(160deg, #ffd08a, #d97b06); color: #2b1600; }
.quote__who div strong { display: block; font-size: 13.5px; font-weight: 600; }
.quote__who div span { font-size: 12px; color: var(--dim); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }
.plan--featured {
  border-color: rgba(34, 227, 208, 0.4);
  background: linear-gradient(180deg, rgba(34, 227, 208, 0.1), rgba(34, 227, 208, 0.015) 42%, rgba(255, 255, 255, 0.01));
  box-shadow: 0 50px 110px -55px rgba(34, 227, 208, 0.85);
}
.plan--featured:hover { border-color: rgba(34, 227, 208, 0.6); }
.plan__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  height: 26px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #012724;
  background: linear-gradient(180deg, var(--cyan-hot), var(--cyan));
  box-shadow: 0 8px 24px -8px rgba(34, 227, 208, 0.9);
  white-space: nowrap;
}
.plan__name { font-size: 19px; font-weight: 620; letter-spacing: -0.03em; }
.plan__for { font-size: 13px; color: var(--dim); margin-top: 5px; min-height: 38px; }
.plan__price { display: flex; align-items: baseline; gap: 3px; margin-top: 18px; }
.plan__cur { font-size: 22px; font-weight: 500; color: var(--muted); }
.plan__amt {
  font-size: 52px;
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: 14px; color: var(--dim); margin-left: 3px; }
.plan__hr { height: 1px; background: var(--line); margin: 22px 0; }
.plan__incl {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  margin-bottom: 14px;
}
.plan__feats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.plan__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.plan__feats svg { flex: none; margin-top: 4px; color: var(--cyan); }
.plan__feats b { color: var(--text); font-weight: 550; }
.plan .btn { margin-top: auto; }

/* The one-line case for the price, sitting between the heading and the factual
   lede. Sized above .lede but well under .h2 so it reads as a claim rather than
   a second headline — and left at --text weight so the .lede's --muted grey
   still reads as the supporting detail. Vertical rhythm comes from `.head p`. */
.plan-pitch {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text);
}

.plan-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

/* ---------- comparison ---------- */
.compare {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  background: rgba(255, 255, 255, 0.025);
}
.compare thead th.is-us { color: var(--cyan); }
.compare tbody td:first-child { color: var(--muted); }
.compare td.is-us {
  background: rgba(34, 227, 208, 0.05);
  color: var(--text);
  font-weight: 550;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .x { color: rgba(255, 93, 143, 0.7); }
.compare .v { color: var(--cyan); }
.cell { display: inline-flex; align-items: center; gap: 9px; }

/* ---------- faq ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  font-size: 16.5px;
  font-weight: 550;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.faq__q:hover { color: var(--cyan); }
.faq__q svg { margin-left: auto; flex: none; color: var(--dim); transition: transform 0.35s var(--ease), color 0.2s; }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); color: var(--cyan); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  padding: 0 4px 24px;
  max-width: 68ch;
}

/* ---------- final cta ---------- */
.cta {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  padding: 84px 40px;
  text-align: center;
  border: 1px solid rgba(34, 227, 208, 0.26);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(34, 227, 208, 0.2), transparent 68%),
    radial-gradient(600px 400px at 82% 110%, rgba(124, 92, 255, 0.18), transparent 62%),
    linear-gradient(180deg, #0b131b, #060a0f);
  box-shadow: 0 60px 140px -70px rgba(34, 227, 208, 0.8);
}
.cta__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.07) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: sweep 6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.cta .btn { position: relative; z-index: 1; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 40px; margin-top: 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(2, 1fr);
  gap: 40px;
}
.footer__blurb { color: var(--dim); font-size: 13.5px; margin-top: 16px; max-width: 34ch; line-height: 1.6; }
.footer h4 {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  margin-bottom: 16px;
}
.footer li { margin-bottom: 10px; }
.footer li a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
.footer li a:hover { color: var(--cyan); }
.footer__bar {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 60px; }
  .stage { max-width: 520px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  /* spotlights stack, and the visual always follows the copy */
  .spot { grid-template-columns: 1fr; gap: 44px; padding: 72px 0; }
  .spot--flip .spot__copy { order: 1; }
  .spot--flip .spot__vis { order: 2; }
  .spot__num { font-size: 120px; top: 30px; right: 0; left: auto; opacity: 0.7; }
  .spot--flip .spot__num { right: 0; left: auto; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split { gap: 36px; }
  .matrix__foot { flex-direction: column; }
  .quotes { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* Two per row instead of one giant single column -- .bento is a 6-col
     grid, so span 3 is exactly half. */
  .bento > * { grid-column: span 3; }
}

/* Before/After stays two columns even on a phone -- it's a comparison, and
   stacking it reads as two separate lists instead of a side-by-side case.
   Everything below just shrinks to fit down to a ~360px-wide phone. */
@media (max-width: 640px) {
  .versus { gap: 8px; margin-top: 32px; }
  .versus__col { padding: 14px 10px; border-radius: 14px; }
  .versus__label { font-size: 9.5px; letter-spacing: 0.09em; margin-bottom: 10px; }
  .versus__list li { padding: 7px 0; gap: 6px; font-size: 11.5px; line-height: 1.4; }
  .versus__list svg { width: 12px; height: 12px; }
  .versus__arrow div { width: 22px; height: 22px; }
  .versus__arrow svg { width: 11px; height: 11px; }
}

/* Feature boxes get another notch smaller once the grid is truly phone-width. */
@media (max-width: 560px) {
  .bento { gap: 10px; }
  .bento .card { padding: 14px; }
  .bento .ico { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 12px; }
  .bento .card h3 { font-size: 14.5px; margin-bottom: 6px; }
  .bento .card p { font-size: 12px; line-height: 1.5; }
  .bento .badge__pill { font-size: 10px; padding: 3px 8px; margin-bottom: 10px !important; }
}

@media (max-width: 780px) {
  .section { padding: 84px 0; }
  .hero { padding: 130px 0 60px; }
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--line-2);
    background: var(--fill-1);
    margin-left: auto;
  }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 72px;
    left: 16px;
    right: 16px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(8, 12, 18, 0.96);
    border: 1px solid var(--line-2);
    backdrop-filter: blur(20px);
    margin: 0;
  }
  .nav.is-open .nav__link { padding: 13px 14px; font-size: 15px; }

  /* No preview accordion in the mobile drawer — Features/Pricing are one tap
     from the real page already, so a second, easy-to-mistap control here
     only got in the way. The chevron trigger is hidden outright (its JS
     listener is still attached but unreachable once it's display:none) and
     the link stretches to fill the row, so the whole horizontal strip is
     the tap target straight to features.html / pricing.html. */
  .nav__item { flex-direction: column; align-items: stretch; width: 100%; }
  .nav__item__row { width: 100%; }
  .nav__item__row .nav__link { flex: 1; }
  .nav__link--drop { display: none; }
  .nav__dropdown {
    position: static;
    display: none;
    width: 100%;
    max-width: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 4px 6px 14px;
  }
  .nav__item.is-open .nav__dropdown { display: block; }
  .navmenu__grid, .navmenu__plans { grid-template-columns: 1fr; }

  .float--a, .float--b, .float--c { transform: scale(0.85); }
  .float--b { right: -2%; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 620px; }
  .cta { padding: 60px 22px; border-radius: 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .screen__body { padding: 14px; min-height: 340px; }
  .mock-grid-2 { grid-template-columns: 1fr; }
}

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