/* ==========================================================================
   Velosearch design system
   Warm paper, indigo ink, lila support, lime for improvement, orange for
   people and action. Lora display, Manrope body, IBM Plex Mono for data.
   Hand-rolled, dependency-free CSS. Tokens mirror the design-system artifact.
   ========================================================================== */

:root {
  color-scheme: light;

  /* core palette */
  --white: #faf6ed;
  --purple: #2a2670;
  --lila: #d4cfe5;
  --green: #c6cb3a;
  --orange: #d98841;

  /* derived surfaces */
  --cream: #fffefb;
  --cream-2: #f1ebdd;
  --cream-3: #e6decb;
  --paper: var(--white);
  --indigo: var(--purple);
  --indigo-2: #3b3699;
  --indigo-deep: #1d1a50;
  --lila-2: #ebe7f3;
  --lila-ink: #4a4380;
  --lav-strong: #a99bf7;
  --green-soft: #eef0c4;
  --green-ink: #6f7414;
  --orange-soft: #f7e3cc;
  --orange-ink: #8a4a12;

  /* text and lines */
  --text: #171616;
  --ink-soft: #3f3a37;
  --ink-faint: #6e6863;
  --line: rgba(42, 38, 112, 0.14);
  --line-2: rgba(42, 38, 112, 0.32);

  /* status */
  --ok: #4d5410;
  --ok-soft: var(--green-soft);
  --warn: var(--orange-ink);
  --warn-soft: var(--orange-soft);
  --danger: #9b2c1f;
  --danger-soft: #f6ddd8;

  /* type */
  --f-display: 'Lora', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* shape and motion */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-lg: 28px;
  --pill: 999px;
  --shadow-sm: 0 1px 0 rgba(42, 38, 112, 0.04);
  --shadow: 0 30px 60px -30px rgba(42, 38, 112, 0.35);
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --maxw: 1080px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font: 500 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
:where(.page, .auth-card, .flash-stack, .callout) a {
  color: var(--indigo);
  font-weight: 700;
}
:where(.page, .auth-card, .flash-stack, .callout) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2.5px solid var(--indigo);
  outline-offset: 3px;
}
.on-dark :focus-visible {
  outline-color: var(--green);
}
::selection {
  background: var(--green-soft);
}
h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 600;
  margin: 0;
  color: var(--indigo);
  text-wrap: balance;
  letter-spacing: -0.015em;
}
:where(.page, .auth-card, .callout) :is(h1, h2, h3) {
  margin: 0 0 0.4em;
  line-height: 1.12;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
:where(.page, .auth-card, .callout, .flash-stack) p { margin: 0 0 0.8em; }
small { color: var(--ink-faint); }
code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: var(--cream-2);
  padding: 0.12em 0.4em;
  border-radius: 6px;
  color: var(--indigo);
  word-break: break-all;
}
pre {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  background: var(--indigo-deep);
  color: #e6e2f6;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow: auto;
  line-height: 1.6;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Brand logo ---------------------------------------------------------- */
.brand-logo {
  display: block;
  height: 25px;
  width: auto;
}

/* ==========================================================================
   App
   ========================================================================== */
.page, .auth-shell, .topbar { font-size: 15px; }
/* ---- App top bar -------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px clamp(16px, 4vw, 40px);
  background: rgba(255, 254, 251, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-size: 1.05rem;
}
.topbar__brand:hover {
  text-decoration: none;
}
.topbar__spacer {
  flex: 1;
}
.topbar__nav {
  display: flex;
  gap: 4px;
}
.topbar__nav a {
  color: var(--ink-soft);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--pill);
  font-size: 0.9rem;
}
.topbar__nav a:hover {
  color: var(--indigo);
  box-shadow: inset 0 0 0 1.5px var(--indigo);
  text-decoration: none;
}
.topbar__nav a.is-active {
  color: var(--cream);
  background: var(--indigo);
  box-shadow: none;
}
.topbar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.topbar__meta strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.topbar form {
  margin: 0;
}

/* ---- Layout shells ------------------------------------------------------ */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px);
}
.page__head {
  margin-bottom: 22px;
}
.page__head p {
  color: var(--ink-soft);
  margin: 0;
}

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow);
  padding: 34px;
}
.auth-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 22px;
}
.auth-card h1 {
  font-size: 1.55rem;
}
.auth-card .sub {
  color: var(--ink-soft);
  margin-top: -0.3em;
}
.auth-foot {
  margin: 18px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.auth-foot a {
  font-weight: 600;
}
.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.9rem;
}

/* ---- Cards / sections ---------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.card > :last-child {
  margin-bottom: 0;
}
.card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.card__head h2 {
  margin: 0;
}
.card__head .muted {
  margin: 0;
}

.grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Stat cards ---------------------------------------------------------- */
.stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 18px;
}
@media (min-width: 760px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.stat__label {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.stat__value {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat__sub {
  color: var(--ink-faint);
  font-size: 0.82rem;
  margin-top: 2px;
}
.stat__value--muted {
  color: var(--ink-soft);
  font-size: 1.3rem;
}

/* ---- Section eyebrows ---------------------------------------------------- */
.section-title {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 4px 0 12px;
}

/* ---- Ranked list --------------------------------------------------------- */
.ranklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rankrow {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  align-items: center;
  gap: 4px 12px;
}
.rankrow__n {
  color: var(--ink-faint);
  font-size: 0.85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rankrow__q {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rankrow__count {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.rankrow__bar {
  grid-column: 2 / 4;
  height: 6px;
  border-radius: 999px;
  background: var(--cream-2);
  overflow: hidden;
}
.rankrow__bar > span {
  display: block;
  height: 100%;
  background: var(--indigo);
  border-radius: 999px;
}

/* ---- Period selector ------------------------------------------------------ */
.period-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.period-bar__label {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.segmented {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.segmented a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 5px 13px;
  border-radius: 999px;
}
.segmented a:hover {
  color: var(--text);
  text-decoration: none;
}
.segmented a.is-active {
  color: var(--cream);
  background: var(--indigo);
}

/* ---- Store selector ------------------------------------------------------- */
.store-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.store-bar__label {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.store-bar__form select {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---- Data tables ---------------------------------------------------------- */
/* Wide tables scroll sideways on a phone instead of widening the page. */
.table-scroll {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th {
  text-align: left;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--line-2);
}
.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tr:last-child td {
  border-bottom: 0;
}
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table tbody tr:hover {
  background: var(--cream);
}

.muted {
  color: var(--ink-soft);
}
.stack > * + * {
  margin-top: 12px;
}

/* ---- Forms ----------------------------------------------------------------- */
form {
  margin: 0;
}
.field {
  display: block;
  margin-bottom: 14px;
}
.field > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='number'],
input[type='search'],
textarea,
select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  appearance: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--lila);
}

/* Buttons — covers form.submit (input[type=submit]) and button_to (button) */
:where(.page) button,
:where(.auth-card) button,
:where(.topbar) button,
:where(.callout) button,
input[type='submit'],
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  border: 0;
  border-radius: var(--pill);
  padding: 0.7rem 1.15rem;
  background: var(--indigo);
  color: var(--cream);
  transition:
    transform 0.2s var(--ease),
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
}
:where(.page) button:hover,
:where(.auth-card) button:hover,
:where(.topbar) button:hover,
:where(.callout) button:hover,
input[type='submit']:hover,
.btn:hover {
  background: var(--indigo-deep);
  text-decoration: none;
}
:where(.page) button:active,
:where(.auth-card) button:active,
:where(.topbar) button:active,
input[type='submit']:active,
.btn:active {
  transform: translateY(1px);
}
input[type='submit'] {
  width: 100%;
  padding-block: 0.9rem;
}

.btn--block {
  width: 100%;
}
.btn--secondary,
button.btn--secondary {
  background: transparent;
  color: var(--indigo);
  box-shadow: inset 0 0 0 1.5px var(--indigo);
}
.btn--secondary:hover,
button.btn--secondary:hover {
  background: var(--indigo);
  color: var(--cream);
}
.btn--danger,
button.btn--danger {
  background: var(--danger);
  color: var(--cream);
}
.btn--danger:hover {
  background: #7d2217;
}
.btn--ghost,
button.btn--ghost {
  background: transparent;
  color: var(--indigo);
  box-shadow: none;
  border-color: transparent;
  padding-inline: 4px;
}

/* ---- Badges ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--lila-2);
  color: var(--lila-ink);
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--active {
  background: var(--ok-soft);
  color: var(--ok);
}
.badge--pending {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---- Flash --------------------------------------------------------------------- */
.flash-stack {
  max-width: var(--maxw);
  margin: 16px auto -4px;
  padding: 0 clamp(20px, 4vw, 40px);
}
.auth-shell .flash-stack {
  max-width: 408px;
  margin: 0 auto 14px;
  padding: 0;
}
.flash {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  margin-bottom: 10px;
}
.flash--notice {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
}
.flash--alert {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

/* ---- Definition rows --------------------------------------------------------- */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
}
.kv dt {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.kv dd {
  margin: 0;
  color: var(--ink-soft);
}

/* ---- Callout (one-time secrets) ----------------------------------------------- */
.callout {
  background: var(--lila-2);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--indigo);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.callout h2 {
  color: var(--indigo);
}
.callout .kv dd code {
  width: 100%;
  display: inline-block;
}

/* ---- Integration list ----------------------------------------------------------- */
.conn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--cream);
}
.conn + .conn {
  margin-top: 10px;
}
.conn__id {
  font-weight: 650;
}
.conn__meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.conn__spacer {
  flex: 1;
}

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
}

ul.clean {
  margin: 0;
  padding-left: 1.1em;
}
ul.clean li {
  margin-bottom: 4px;
}

.errors {
  background: var(--danger-soft);
  border: 1px solid transparent;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.errors p {
  font-weight: 600;
  margin: 0 0 6px;
}
.errors ul {
  margin: 0;
  padding-left: 1.1em;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.toolbar .field {
  margin-bottom: 0;
}
.field--grow {
  flex: 1;
  min-width: 220px;
}
.field--narrow {
  width: 140px;
}
.field > label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text);
}

/* ==========================================================================
   Landing / marketing pages
   ========================================================================== */
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--indigo); color:var(--cream); padding:10px 16px; border-radius:var(--pill); text-decoration:none; font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(80px, 11vw, 148px)}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font:800 12px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.h2{font-size:clamp(2.1rem, 4.4vw, 3.5rem); line-height:1.08}
.h2 em{font-style:italic; font-weight:500}
.lede{font-size:clamp(1.05rem, 1.4vw, 1.2rem); line-height:1.6; color:var(--ink-soft); max-width:56ch}
.sec-head{display:grid; gap:1.1rem; max-width:760px; margin-bottom:clamp(40px, 6vw, 64px)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.4rem; border-radius:var(--pill); font:700 15px/1 var(--f-body); border:0; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .2s var(--ease), color .2s, box-shadow .2s, transform .2s var(--ease)}
.btn svg{width:18px; height:18px; transition:transform .25s var(--ease)}
.btn:active,.seg button:active,.hiw-tab:active,.mbtn:active{transform:scale(.97)}
.btn-primary{background:var(--indigo); color:var(--cream)}
.btn-primary:hover{background:var(--indigo-2)}
.btn-ghost{background:transparent; color:var(--indigo); box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--indigo); background:var(--paper)}
.btn-green{background:var(--green); color:var(--indigo)}
.btn-green:hover{background:#d3d84b}
.btn-cream-ghost{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(250,246,237,.35)}
.btn-cream-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
.btn-sm{padding:.7rem 1.05rem; font-size:14px}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--line-2); padding-bottom:2px; transition:border-color .2s}
.link-arrow:hover{border-color:currentColor}
.link-arrow svg{width:16px; height:16px}
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}


/* ---------- nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:rgba(255,254,251,.88); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex; align-items:center; gap:2rem; height:76px}
.logo{display:inline-flex; align-items:center; text-decoration:none; flex:none}
.logo img{height:25px; width:auto}
.nav-links{display:flex; gap:.25rem; margin:0 auto 0 1rem; padding:0; list-style:none}
.nav-links a{display:block; padding:.55rem .85rem; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:15px; color:var(--ink-soft); transition:color .2s, background .2s}
.nav-links a:hover{color:var(--indigo); background:var(--cream-2)}
.nav-cta{display:flex; gap:.5rem; align-items:center}
.menu-btn{display:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--cream-2); cursor:pointer; align-items:center; justify-content:center}
.menu-btn .ico{width:22px; height:22px}
.mnav{display:none}
@media (max-width: 900px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-in{justify-content:space-between}
  .menu-btn{display:inline-flex}
  .mnav{display:block; position:fixed; inset:76px 0 auto 0; background:var(--cream); padding:8px var(--gutter) 28px; box-shadow:0 18px 30px -20px rgba(42,38,112,.35); transform-origin:top; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transition:opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s}
  .mnav[data-open]{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  .mnav ul{list-style:none; margin:0; padding:0}
  .mnav li a{display:flex; justify-content:space-between; align-items:center; padding:16px 4px; font:600 1.6rem/1.2 var(--f-display); text-decoration:none; border-bottom:1px solid var(--line)}
  .mnav .btn{width:100%; margin-top:20px}
}
@media (max-width: 420px){ .nav-cta .btn-primary{padding:.7rem .95rem} .logo img{height:21px} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.hero-copy{display:grid; gap:1.6rem; align-content:start}
.hero h1{font-size:clamp(2.6rem, 5.3vw, 4.5rem); line-height:1.03; letter-spacing:-.025em}
.hl{position:relative; isolation:isolate; font-style:italic; font-weight:500; padding-inline:.04em}
.hl::after{content:""; position:absolute; z-index:-1; left:0; right:0; top:calc(88% - .2816em); height:.32em; background:var(--green); transform-origin:left; animation:hl 1.1s .75s var(--ease) both}
@keyframes hl{from{transform:scaleX(0)}}
.hero .lede{max-width:46ch}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem}
.compat{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:14px; color:var(--ink-soft)}
.compat > span:first-child{margin-right:.25rem; font-weight:600}
.pchip{display:inline-flex; align-items:center; gap:.4rem; padding:.38rem .7rem; border-radius:var(--pill); background:var(--paper); font-weight:700; font-size:13.5px; color:var(--indigo); box-shadow:inset 0 0 0 1px var(--line)}
.pchip .ico{width:15px; height:15px; stroke-width:2.4}
.pchip.soon{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-2); color:var(--ink-soft); border:0}
.pchip.soon b{font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--orange-soft); color:var(--orange-ink); padding:.18rem .45rem; border-radius:var(--pill)}
@media (max-width: 980px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }

.tag{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:var(--cream-2); padding:.25rem .5rem; border-radius:var(--pill); white-space:nowrap}
.notes{display:flex; flex-wrap:wrap; gap:6px; min-height:30px; padding:10px 18px 0}
.note{display:inline-flex; align-items:center; gap:.35rem; font-size:12.5px; font-weight:600; padding:.3rem .6rem; border-radius:var(--pill); background:var(--green-soft); color:var(--indigo); animation:pop .3s var(--ease) both}
.note.syn{background:var(--lila-2)}
.note.price{background:var(--orange-soft); color:var(--orange-ink)}
.note s{color:var(--ink-soft); text-decoration-thickness:1.5px}
.note .ico{width:13px; height:13px; stroke-width:2.4}
@keyframes pop{from{opacity:.0; transform:translateY(3px)}}
mark{background:var(--green-soft); color:inherit; border-radius:4px; padding:0 .1em; box-shadow:0 0 0 1px var(--green-soft)}
/* ---------- how it works ---------- */
.hiw-tabs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; padding:8px; background:var(--cream-2); border-radius:var(--pill); margin-bottom:14px}
.hiw-tab{display:flex; align-items:center; justify-content:center; gap:.65rem; border:0; background:transparent; padding:1.05rem 1rem; border-radius:var(--pill); cursor:pointer; font-weight:700; font-size:16px; color:var(--ink-soft); transition:background .25s, color .25s, box-shadow .25s, transform .16s var(--ease); position:relative}
.hiw-tab .n{font:600 13px/1 var(--f-mono); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--line-2)}
.hiw-tab:hover{color:var(--indigo)}
.hiw-tab[aria-selected="true"]{background:var(--paper); color:var(--indigo); box-shadow:0 8px 20px -12px rgba(42,38,112,.35)}
.hiw-tab[aria-selected="true"] .n{background:var(--green); box-shadow:none}
.hiw-panel{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; background:var(--paper); border-radius:var(--radius-lg); padding:16px}
.hiw-panel[hidden]{display:none}
.hiw-stage{position:relative; min-height:460px; border-radius:22px; overflow:hidden; background:
  radial-gradient(60% 70% at 10% 105%, rgba(217,136,65,.55), transparent 70%),
  radial-gradient(55% 60% at 100% 0%, rgba(212,207,229,.35), transparent 70%),
  var(--indigo)}
.hiw-card{position:absolute; top:56px; left:56px; right:-1px; bottom:-1px; background:var(--paper); border-radius:20px 0 0 0; padding:28px 30px; overflow:hidden}
.hiw-copy{display:grid; gap:1.1rem; padding:clamp(8px,2vw,24px) clamp(8px,3vw,40px) clamp(8px,2vw,24px) 0}
.step-chip{justify-self:start; font:800 12.5px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; background:var(--green); padding:.6rem .9rem; border-radius:var(--pill)}
.hiw-copy h3{font-size:clamp(1.8rem, 3vw, 2.6rem); line-height:1.1}
.hiw-copy p{color:var(--ink-soft); font-size:1.08rem; max-width:44ch}
.ticks{list-style:none; padding:0; margin:.3rem 0 0; display:grid; gap:.55rem}
.ticks li{display:flex; gap:.6rem; align-items:flex-start; font-weight:600; font-size:15px}
.ticks .ico{width:18px; height:18px; margin-top:3px; color:var(--indigo); stroke-width:2.4}
.card-h{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:18px}
.card-h b{font:600 1.2rem/1.2 var(--f-display)}
.mini-label{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.platforms{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:22px}
.platform{display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--line); font-weight:700; font-size:14px}
.platform.on{box-shadow:inset 0 0 0 2px var(--indigo); background:var(--cream)}
.platform .pm{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font:800 14px/1 var(--f-body)}
.platform .ok{margin-left:auto; width:20px; height:20px; border-radius:50%; background:var(--indigo); color:var(--cream); display:grid; place-items:center}
.platform .ok .ico{width:12px; height:12px; stroke-width:3}
.sync-row{display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:8px; font-variant-numeric:tabular-nums}
.bar{height:10px; border-radius:var(--pill); background:var(--cream-2); overflow:hidden}
.bar i{display:block; height:100%; width:100%; background:var(--indigo); border-radius:inherit; transform-origin:left; transform:scaleX(var(--p,1)); transition:transform .1s linear}
.fields{display:flex; flex-wrap:wrap; gap:6px; margin-top:20px}
.fields span{font-size:12.5px; font-weight:700; padding:.35rem .65rem; border-radius:var(--pill); background:var(--cream-2); display:inline-flex; gap:.3rem; align-items:center}
.fields span .ico{width:12px; height:12px; stroke-width:3}
.sf-search{display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:12px; box-shadow:inset 0 0 0 2px var(--indigo); font-weight:700; font-size:15px}
.sf-search .ico{width:18px; height:18px; color:var(--ink-soft)}
.sf-search .caret{width:2px; height:20px; background:var(--indigo); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.sf-drop{margin-top:10px; display:grid; gap:4px}
.sf-row{display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; font-size:14px; font-weight:700}
.sf-row:first-child{background:var(--cream-2)}
.sf-row .thumb{width:42px; height:42px; border-radius:10px; overflow:hidden; flex:none}
.sf-row small{display:block; font-weight:600; color:var(--ink-soft); font-size:12px}
.sf-row .pr{margin-left:auto; font-variant-numeric:tabular-nums}
.an-grid{display:grid; gap:18px}
.an-bars{display:grid; gap:9px}
.an-bar{display:grid; grid-template-columns:120px minmax(0,1fr) 40px; align-items:center; gap:10px; font-size:13.5px; font-weight:700}
.an-bar .track{height:10px; border-radius:var(--pill); background:var(--cream-2); overflow:hidden}
.an-bar .track i{display:block; height:100%; background:var(--indigo); border-radius:inherit}
.an-bar .v{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.zr{display:grid; gap:6px}
.zr-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:12px; background:var(--orange-soft); font-size:13.5px; font-weight:700}
.zr-row em{font-style:normal; font-size:12px; color:var(--orange-ink); display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap}
.zr-row em .ico{width:13px;height:13px}
@media (max-width: 900px){
  .hiw-panel{grid-template-columns:minmax(0,1fr)}
  .hiw-copy{padding:8px 8px 16px}
  .hiw-stage{min-height:450px}
  .hiw-card{top:32px; left:24px; padding:22px 20px}
}
@media (max-width: 560px){
  .hiw-tabs{border-radius:22px}
  .hiw-tab{flex-direction:column; gap:.35rem; padding:.8rem .4rem; font-size:14px; border-radius:16px}
  .an-bar{grid-template-columns:96px minmax(0,1fr) 34px}
  .platforms{grid-template-columns:minmax(0,1fr)}
}

/* ---------- features ---------- */
.bento{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px}
.f-card{background:var(--paper); border-radius:24px; padding:30px; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; min-width:0; transition:box-shadow .3s var(--ease)}
.f-card:hover,.f-card:focus-within{box-shadow:0 0 0 1.5px var(--line-2)}
.f-card h3{font-size:1.55rem; line-height:1.15}
.f-card > p{color:var(--ink-soft); font-size:15.5px; max-width:44ch}
.f-vis{margin-top:20px; flex:1; display:flex; flex-direction:column; gap:12px; min-height:0}
.c7{grid-column:span 7} .c5{grid-column:span 5} .c4{grid-column:span 4} .c12{grid-column:span 12}
@media (max-width: 1020px){ .c7,.c5{grid-column:span 12} .c4{grid-column:span 6} .last4{grid-column:span 12} }
@media (max-width: 680px){ .c4{grid-column:span 12} .f-card{padding:24px 20px} }
.seg{position:relative; max-width:100%; display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:24px; background:var(--cream-2); align-self:flex-start}
.seg button{border:0; background:transparent; padding:.5rem .85rem; border-radius:var(--pill); font-weight:700; font-size:13px; cursor:pointer; color:var(--ink-soft); transition:background .2s, color .2s, transform .16s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--paper); color:var(--indigo); box-shadow:0 2px 8px -4px rgba(42,38,112,.4)}
.seg button:hover{color:var(--indigo)}
/* typo card */
.typo-q{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; background:var(--cream); font-weight:700; font-size:16px; box-shadow:inset 0 0 0 1.5px var(--line)}
.typo-q .ico{width:18px; height:18px; color:var(--ink-soft)}
.typo-q .bad{text-decoration:underline wavy var(--orange); text-underline-offset:4px; text-decoration-thickness:1.5px}
.typo-res{display:grid; gap:4px; align-content:start; min-height:182px}
#typoNotes{min-height:64px; align-content:flex-start}
.typo-res .sf-row{animation:pop .3s var(--ease) both}
.typo-res .sf-row:nth-child(2){animation-delay:.05s} .typo-res .sf-row:nth-child(3){animation-delay:.1s}
/* autocomplete card */
.ac-box{border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--line); overflow:hidden}
.ac-in{display:flex; align-items:center; gap:10px; padding:14px 16px; font-weight:700; font-size:16px; border-bottom:1px solid var(--line); min-height:52px}
.ac-in .ico{width:18px; height:18px; color:var(--ink-soft)}
.ac-in .caret{width:2px; height:20px; background:var(--indigo); margin-left:-8px; animation:blink 1s steps(2) infinite}
.ac-list{list-style:none; margin:0; padding:6px; display:grid; gap:2px; min-height:186px; align-content:start}
.ac-list li{display:flex; align-items:center; gap:.6rem; padding:8px 10px; border-radius:10px; font-size:14.5px; color:var(--ink-soft)}
.ac-list li:first-child{background:var(--cream-2)}
.ac-list li strong{color:var(--indigo)}
.ac-list li .ico{width:14px; height:14px}
.ac-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); font-weight:600}
.replay{border:0; background:none; font-weight:800; font-size:13px; display:inline-flex; gap:.35rem; align-items:center; cursor:pointer; color:var(--indigo); padding:4px 2px}
.replay .ico{width:15px; height:15px}
/* analytics card */
.sample{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.an-list{display:grid; gap:9px; min-height:208px; align-content:start}
.an-list .an-bar{grid-template-columns:minmax(0,1fr) 34px; grid-template-rows:auto auto; row-gap:5px}
.an-list .an-bar .track{grid-column:1 / -1}
.an-list .an-bar .track i{transform-origin:left; animation:grow .6s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.an-list .zr-row{animation:pop .3s var(--ease) both}
/* relevance card */
.toggles{display:grid; gap:8px}
.tg{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; cursor:pointer}
.tg small{display:block; font-weight:600; color:var(--ink-soft); font-size:12.5px}
.switch{appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:var(--pill); background:var(--cream-3); position:relative; cursor:pointer; flex:none; transition:background .2s; margin:0}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--paper); box-shadow:0 1px 3px rgba(42,38,112,.3); transition:transform .25s var(--ease)}
.switch:checked{background:var(--indigo)}
.switch:checked::after{transform:translateX(18px)}
.rel-q{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--ink-soft)}
.rel-res{display:grid; gap:2px; min-height:300px; align-content:start}
.rel-count{font:600 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:2px 6px 8px}
.rel-res .sf-row{animation:pop .3s var(--ease) both}
.rel-res .sf-row:nth-of-type(2){animation-delay:.04s} .rel-res .sf-row:nth-of-type(3){animation-delay:.08s} .rel-res .sf-row:nth-of-type(4){animation-delay:.12s}
.rel-res .sf-row{padding:6px; font-size:13.5px}
.rel-res .sf-row:first-child{background:transparent}
.rel-res .thumb{width:36px!important; height:36px!important}
.rel-empty{padding:14px; border-radius:12px; background:var(--orange-soft); color:var(--orange-ink); font-weight:700; font-size:13.5px}
/* merch card */
.mlist{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.mrow{display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; background:var(--cream); font-size:13.5px; font-weight:700; position:relative}
.mrow .rank{font:500 12px/1 var(--f-mono); color:var(--ink-soft); width:16px; text-align:center}
.mrow .thumb{width:36px; height:36px; border-radius:10px; overflow:hidden; flex:none}
.mrow .nm{flex:1; min-width:0; line-height:1.25}
.mrow .mbadges{display:flex; gap:4px; margin-top:3px}
.mbadge{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.18rem .45rem; border-radius:var(--pill)}
.mbadge.pin{background:var(--indigo); color:var(--cream)}
.mbadge.boost{background:var(--green); color:var(--indigo)}
.mbtns{display:flex; gap:4px}
.mbtn{width:32px; height:32px; border-radius:10px; border:0; background:var(--paper); cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); transition:background .2s, color .2s, transform .16s var(--ease)}
.mbtn .ico{width:16px; height:16px}
.mbtn:hover{color:var(--indigo); background:var(--lila-2)}
.mbtn[aria-pressed="true"]{background:var(--indigo); color:var(--cream)}
.mbtn.b[aria-pressed="true"]{background:var(--green); color:var(--indigo)}
/* store card */
.store-card{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(24px,4vw,56px); align-items:center}
.store-card .f-vis{margin-top:0}
.store-ui{background:var(--cream); border-radius:20px; padding:18px; display:grid; gap:14px}
.store-tabs{display:flex; flex-wrap:wrap; gap:6px}
.store-tabs button{border:0; display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .9rem; border-radius:12px; background:var(--paper); font-weight:700; font-size:13.5px; cursor:pointer; color:var(--ink-soft); box-shadow:inset 0 0 0 1.5px var(--line)}
.store-tabs button i{width:8px; height:8px; border-radius:50%; display:block}
.store-tabs button[aria-selected="true"]{color:var(--indigo); box-shadow:inset 0 0 0 2px var(--indigo)}
.settings{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:0}
.settings div{background:var(--paper); border-radius:14px; padding:12px 14px; min-width:0}
.settings dt{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px}
.settings dd{margin:0; font-weight:700; font-size:14px; animation:pop .3s var(--ease) both}
@media (max-width: 860px){ .store-card{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 480px){ .settings{grid-template-columns:minmax(0,1fr)} }

/* ---------- integrations ---------- */
.int-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.int{background:var(--paper); border-radius:24px; padding:30px; display:flex; flex-direction:column; gap:1rem; min-width:0}
.int.soon{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-2)}
.int-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.int-mark{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font:800 22px/1 var(--f-body); color:#fff}
.status{display:inline-flex; align-items:center; gap:.4rem; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.42rem .7rem; border-radius:var(--pill)}
.status.ok{background:var(--green-soft)}
.status.ok::before{content:""; width:7px; height:7px; border-radius:50%; background:#6f7414}
.status.planned{background:var(--orange-soft); color:var(--orange-ink)}
.int h3{font-size:1.65rem}
.int p{color:var(--ink-soft); font-size:15.5px}
.int ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:14.5px; font-weight:600}
.int li{display:flex; gap:.5rem; align-items:flex-start}
.int li .ico{width:16px; height:16px; margin-top:4px; stroke-width:2.4}
.int .grow{flex:1}
@media (max-width: 960px){ .int-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- developers ---------- */
.dev{background:var(--indigo); color:var(--cream); border-radius:36px; padding:clamp(36px, 6vw, 80px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:clamp(32px, 5vw, 64px); align-items:center; position:relative; overflow:hidden}
.dev .eyebrow{color:var(--lila)}
.dev .eyebrow::before{box-shadow:0 0 0 3px rgba(198,203,58,.25)}
.dev .h2{color:var(--cream)}
.dev .lede{color:#cfcbe6}
.dev-points{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:18px}
.dev-points li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px}
.dev-points .di{width:40px; height:40px; border-radius:12px; background:rgba(250,246,237,.08); display:grid; place-items:center; color:var(--green)}
.dev-points b{display:block; font-size:16px; margin-bottom:2px}
.dev-points span{color:#cfcbe6; font-size:14.5px}
.code{background:var(--indigo-deep); border-radius:20px; overflow:hidden; min-width:0; box-shadow:0 0 0 1px rgba(250,246,237,.08)}
.code-top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 10px 10px 14px; border-bottom:1px solid rgba(250,246,237,.08)}
.code-tabs{display:flex; gap:4px; flex-wrap:wrap}
.code-tabs button{border:0; background:transparent; color:#b9b5da; font-weight:700; font-size:13px; padding:.5rem .8rem; border-radius:10px; cursor:pointer}
.code-tabs button[aria-selected="true"]{background:rgba(250,246,237,.1); color:var(--cream)}
.copy{border:0; background:rgba(250,246,237,.08); color:var(--cream); font-weight:700; font-size:12.5px; padding:.5rem .75rem; border-radius:10px; cursor:pointer; display:inline-flex; gap:.4rem; align-items:center}
.copy .ico{width:14px; height:14px}
.code pre{margin:0; padding:20px 22px 24px; overflow:auto; font:400 13.5px/1.7 var(--f-mono); color:#e6e2f6; tab-size:2}
.code pre[hidden]{display:none}
.tk-c{color:#9d99c9} .tk-k{color:var(--lila)} .tk-s{color:var(--green)} .tk-n{color:#f0a868} .tk-f{color:#ffffff}
.code-foot{padding:12px 22px; border-top:1px solid rgba(250,246,237,.08); font-size:12.5px; color:#b9b5da; display:flex; gap:.5rem; align-items:center}
.code-foot .ico{width:15px; height:15px}
@media (max-width: 960px){ .dev{grid-template-columns:minmax(0,1fr); border-radius:28px} }
@media (max-width: 560px){ .dev{padding:32px 20px; margin-inline:calc(var(--gutter) * -.5)} .code pre{font-size:12.5px; padding:16px} }

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.plan{background:var(--paper); border-radius:24px; padding:32px 30px; display:flex; flex-direction:column; gap:1.1rem; min-width:0}
.plan.alt{background:var(--lila-2)}
.plan h3{font-size:2rem}
.plan .aud{font-weight:700; font-size:14.5px}
.price{display:grid; gap:.2rem; padding-block:1.1rem; border-block:1px solid var(--line)}
.price-v{font:600 1.65rem/1.15 var(--f-display)}
.price-n{font-size:13px; color:var(--ink-soft)}
.plan .vp{color:var(--ink-soft); font-size:15px}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:14.5px; font-weight:600}
.plan li{display:flex; gap:.55rem; align-items:flex-start}
.plan li .ico{width:17px; height:17px; margin-top:3px; stroke-width:2.4; flex:none}
.plan .grow{flex:1}
.plan .btn{width:100%}
.fit{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.price-foot{margin-top:24px; font-size:14px; color:var(--ink-soft); display:flex; gap:.5rem; align-items:flex-start; max-width:70ch}
.price-foot .ico{width:17px; height:17px; margin-top:3px}
@media (max-width: 960px){ .plans{grid-template-columns:minmax(0,1fr)} }

/* ---------- final cta ---------- */
.final{background:var(--lila); border-radius:36px; padding:clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px); display:grid; gap:1.6rem; justify-items:start; position:relative; overflow:hidden}
.final h2{font-size:clamp(2.4rem, 5.6vw, 4.6rem); line-height:1.03; max-width:14ch; letter-spacing:-.025em}
.final h2 em{font-style:italic; font-weight:500}
.final p{font-size:1.15rem; max-width:48ch; color:#3d3a6e}
.fake-search{display:flex; align-items:center; gap:12px; width:min(560px, 100%); height:64px; padding:0 10px 0 20px; border-radius:18px; background:var(--paper); border:0; cursor:text; text-align:left; font-weight:600; font-size:17px; color:var(--ink-soft); box-shadow:0 20px 40px -24px rgba(42,38,112,.5)}
.fake-search .ico{width:20px; height:20px}
.fake-search .fs-q{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.fake-search .fs-go{width:44px; height:44px; border-radius:12px; background:var(--indigo); color:var(--cream); display:grid; place-items:center}
.final .ring{position:absolute; right:-120px; bottom:-160px; width:520px; height:520px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(42,38,112,.14), 0 0 0 60px rgba(250,246,237,.12), 0 0 0 61.5px rgba(42,38,112,.1); pointer-events:none}
@media (max-width: 700px){ .final .ring{display:none} .final{border-radius:28px} }

/* ---------- footer ---------- */
.foot{background:var(--indigo-deep); color:var(--cream); margin-top:clamp(80px, 10vw, 140px); padding-block:64px 40px}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap:32px}
.foot-brand img{height:24px; width:auto; filter:brightness(0) invert(.96) sepia(.12)}
.foot-brand p{margin-top:16px; color:#bdb9dc; font-size:14.5px; max-width:32ch}
.foot h4{margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lila)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.foot a,.foot .fbtn{color:#e8e5f6; text-decoration:none; font-size:14.5px; font-weight:600; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.foot a:hover,.foot .fbtn:hover{color:var(--green)}
.foot .soon-t{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); background:var(--orange); padding:.12rem .4rem; border-radius:var(--pill); margin-left:.35rem; vertical-align:2px}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid rgba(250,246,237,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:#bdb9dc; font-size:13.5px}
@media (max-width: 900px){ .foot-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .foot-brand{grid-column:1 / -1} }

.blogo.lg.woo{width:44px; height:24px}
.int-mark:has(svg.woo){width:auto; padding:0 14px}
.int-mark svg.woo{width:72px; height:18px}
.pchip.soon .blogo{opacity:.7}
.plug-t{display:inline-flex; align-items:center; gap:.6rem}
.hiw-tab .n{width:auto; height:auto; padding:.35rem .5rem; border-radius:8px}
.keys{display:grid; gap:12px; margin-bottom:20px}
.key{display:grid; gap:.4rem; padding:12px 14px; border-radius:12px; background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--line)}
.key code{font:500 14px/1.3 var(--f-mono); color:var(--indigo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.connected{display:flex; align-items:center; gap:.6rem; font-size:14px; font-weight:700}
.okc{width:24px; height:24px; border-radius:50%; background:var(--green); display:grid; place-items:center; flex:none}
.okc .ico{width:13px; height:13px; stroke-width:3}
.live{display:inline-flex; align-items:center; gap:.4rem; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.live i{position:relative; width:8px; height:8px; border-radius:50%; background:#6f7414}
.live i::after{content:""; position:absolute; inset:0; border-radius:50%; background:#6f7414; animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{from{opacity:.5; transform:scale(1)} to{opacity:0; transform:scale(2.6)}}
.feed{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px}
.feed li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--cream); font-size:13.5px; font-weight:700; animation:pop .4s var(--ease) both}
.feed li:nth-child(2){animation-delay:.08s} .feed li:nth-child(3){animation-delay:.16s} .feed li:nth-child(4){animation-delay:.24s}
.feed .fn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed time{font-size:12px; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums}
.ev{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .5rem; border-radius:var(--pill); flex:none}
.ev.c{background:var(--green)} .ev.u{background:var(--lila)} .ev.x{background:var(--orange-soft); color:var(--orange-ink)}
.step-chip{font-family:var(--f-mono); letter-spacing:.04em; font-size:14px}
.int-mark{background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); padding:13px}
.int-mark svg{width:100%; height:100%}
.int.soon .int-mark svg{opacity:.75}
.dev{max-width:1040px; margin-inline:auto; padding:clamp(28px, 4vw, 52px); border-radius:28px; gap:clamp(24px, 4vw, 48px); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.dev-h{font-size:clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.08; color:var(--cream); margin-top:.9rem}
.dev-sub{color:#cfcbe6; margin-top:.8rem; font-size:15.5px; max-width:42ch}
.dev .dev-points{margin-top:22px; gap:12px}
.dev .dev-points li{grid-template-columns:34px minmax(0,1fr); gap:12px}
.dev .dev-points .di{width:34px; height:34px; border-radius:10px}
.dev .dev-points .di .ico{width:17px; height:17px}
.dev .dev-points b{font-size:15px}
.dev .dev-points span{font-size:13.5px}
.dev .code pre{font-size:12.5px; line-height:1.65; padding:16px 18px 18px; max-height:340px}
.dev .code-foot{padding:10px 18px}
.price-v small{font:600 15px/1 var(--f-body); color:var(--ink-soft); margin-left:.35rem}
.price-v{font-size:2.6rem}
.faq-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:clamp(32px, 6vw, 96px)}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:22px 4px; font:600 clamp(1.1rem, 1.6vw, 1.3rem)/1.3 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:22px; height:22px; flex:none; transition:transform .3s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq summary:hover span{text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:3px; text-underline-offset:5px}
.faq details p{padding:0 48px 24px 4px; color:var(--ink-soft); font-size:16px; max-width:62ch}
.final{justify-items:start; padding:clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px)}
@media (max-width: 900px){ .faq-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 960px){ .dev{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 760px){
  .hiw-tabs{grid-template-columns:minmax(0,1fr); border-radius:22px}
  .hiw-tab{flex-direction:row; justify-content:flex-start; border-radius:16px; padding:.85rem 1rem; font-size:15px}
}

/* v3: semantic color roles — indigo core, lavender supporting, lime improvement/opportunity, orange human/action */
.eyebrow,.mini-label,.glabel,.tag,.status,.mbadge,.ev,.fit,.sample,.step-chip,.kbd,.live,.price-n,.hiw-tab .n,.mrow .rank,.feed time,.an-bar .v,.prod-meta,.foot h4,.foot .soon-t,.pchip.soon b,.zr-row em,.code-tabs button,.copy,.code-foot,.key code{font-family:var(--f-mono)}
.eyebrow,.mini-label,.glabel,.tag,.status,.mbadge,.ev,.fit,.sample,.foot h4,.live,.pchip.soon b,.foot .soon-t{letter-spacing:.06em; font-weight:600}
.eyebrow{font-size:12.5px; color:var(--lila-ink)}
.eyebrow::before{background:var(--lila); box-shadow:0 0 0 3px var(--lila-2)}
.prod-meta{font-size:12px}
.prod-price,.price-v,.sf-row .pr,.qv .qv-price{color:var(--indigo)}
.prod-price,.sf-row .pr,.qv .qv-price,.an-bar .v{font-family:var(--f-mono); font-weight:600}
.tag{background:var(--lila-2); color:var(--lila-ink)}
.qv .qv-tags span{background:var(--lila-2); color:var(--lila-ink)}
.pchip.soon b,.status.planned,.foot .soon-t{background:var(--lila-2); color:var(--lila-ink)}
.foot .soon-t{background:var(--lila); color:var(--indigo)}
.note.syn{color:var(--lila-ink)}
.empty .tip{background:var(--green-soft); color:var(--text)}
.empty .tip .ico{color:#6f7414}
.zr-row{background:var(--green-soft); color:var(--text)}
.zr-row em{background:var(--orange-soft); color:var(--orange-ink); padding:.2rem .5rem; border-radius:var(--pill); font-weight:600}
.rel-empty{background:var(--green-soft); color:var(--text)}
.ev.c,.ev.u,.ev.x{background:var(--lila-2); color:var(--lila-ink)}
.step-chip{background:var(--indigo); color:var(--cream)}
.hiw-tab[aria-selected="true"] .n{background:var(--indigo); color:var(--cream)}
.mbadge.pin{background:var(--orange); color:var(--indigo)}
.mbadge.boost{background:var(--orange-soft); color:var(--orange-ink)}
.mbtn[aria-pressed="true"]{background:var(--orange); color:var(--indigo)}
.mbtn.b[aria-pressed="true"]{background:var(--orange-soft); color:var(--orange-ink)}
.dev-points .di{color:var(--lila)}
.dev .eyebrow::before{background:var(--lila); box-shadow:0 0 0 3px rgba(212,207,229,.25)}
.faq summary:hover span{text-decoration-color:var(--lila)}
.ticks .ico,.int li .ico,.plan li .ico{color:var(--indigo)}
.code pre{font-weight:400}
.final p{color:var(--text)}
.lede{color:var(--ink-soft)}

/* v4: contrast + personality */
.eyebrow,.dev .eyebrow{display:inline-flex; justify-self:start; align-self:flex-start; background:var(--orange); color:var(--indigo); padding:.5rem .8rem .5rem .7rem; border-radius:var(--pill); font-size:12.5px; font-weight:600; letter-spacing:.08em}
.eyebrow::before,.dev .eyebrow::before{width:7px; height:7px; background:var(--indigo); box-shadow:none}
.h2{font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.02; letter-spacing:-.03em}
.h2 em,.final h2 em{background:linear-gradient(var(--green), var(--green)) no-repeat 0 88% / 100% .28em; padding-inline:.04em}
.dev .h2 em{background:none}
.lede{color:var(--ink-soft)}
.f-card,.int,.plan,.hiw-panel{box-shadow:inset 0 0 0 1.5px var(--line)}
.f-card:hover,.f-card:focus-within{box-shadow:inset 0 0 0 1.5px var(--indigo)}
.int.soon{box-shadow:inset 0 0 0 1.5px var(--line-2); border:0}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--indigo)}
.btn-ghost:hover{background:var(--indigo); color:var(--cream)}
.btn-primary:hover{background:var(--indigo-deep)}
.btn{font-weight:800}
/* pricing: indigo hero plan */
.plan.alt{background:var(--indigo); color:var(--cream); box-shadow:none}
.plan.alt h3,.plan.alt .price-v{color:var(--cream)}
.plan.alt .aud{color:var(--lila)}
.plan.alt .vp,.plan.alt .price-n,.plan.alt .price-v small{color:#d7d3ee}
.plan.alt .fit{color:var(--lila)}
.plan.alt .price{border-color:rgba(250,246,237,.18)}
.plan.alt li .ico{color:var(--green)}
.plan .price-v{font-size:3rem; letter-spacing:-.02em}
.plan-tag{justify-self:start; align-self:flex-start; font:600 11.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; background:var(--green); color:var(--indigo); padding:.45rem .7rem; border-radius:var(--pill)}
/* final CTA: orange */
.final{background:var(--orange)}
.final h2{color:var(--indigo)}
.final p{color:var(--text)}
.final h2 em{background:linear-gradient(var(--cream), var(--cream)) no-repeat 0 88% / 100% .22em}
/* footer wordmark */
.foot-mark{margin-top:56px; opacity:.09; filter:brightness(0) invert(1); width:100%; height:auto; user-select:none; pointer-events:none}
.foot-bottom{margin-top:28px}
/* faq accent */
.faq summary:hover span{text-decoration-color:var(--orange)}
.faq details[open] summary .ico{color:var(--orange-ink)}
.faq details[open] summary{color:var(--indigo)}

/* v5: orange labels on light orange, centered contact */
.eyebrow,.dev .eyebrow{background:var(--orange-soft); color:#9c4a0c}
.eyebrow::before,.dev .eyebrow::before{background:var(--orange)}
.final{justify-items:center; text-align:center}
.final h2{max-width:16ch; margin-inline:auto}
.final p{margin-inline:auto}

/* v6: style refs + motion */
.f-card h3,.hiw-copy h3,.int h3,.plan h3,.card-h b,.empty h4,.qv h4{font-family:var(--f-body); font-weight:800; letter-spacing:-.03em}
.f-card h3{font-size:1.7rem; line-height:1.1}
.hiw-copy h3{font-size:clamp(2rem, 3.2vw, 2.8rem); line-height:1.02}
.int h3{font-size:1.8rem} .plan h3{font-size:2rem}
.card-h b{font-size:1.1rem; letter-spacing:-.02em}
.faq summary{font-family:var(--f-body); font-weight:700; letter-spacing:-.015em}
/* colour-block cards */
.tone{box-shadow:none}
.tone-lav{background:var(--lav-strong)} .tone-lime{background:var(--green)} .tone-orange{background:var(--orange)}
.tone > p{color:var(--text)}
.tone .f-vis{background:var(--cream); border-radius:20px; padding:16px}
.tone:hover,.tone:focus-within{box-shadow:inset 0 0 0 2px var(--indigo)}
.f-card,.int,.plan{transition:transform .35s var(--ease), box-shadow .3s}
@media (hover:hover) and (pointer:fine){ .int:hover,.plan:hover{transform:translateY(-4px)} .btn:hover svg.arr{transform:translateX(3px)} }
/* hero word rise */
.hero h1 .w{display:inline-block; animation:rise .8s var(--ease) both}
.hero h1 .w:nth-child(2){animation-delay:.06s}.hero h1 .w:nth-child(3){animation-delay:.12s}.hero h1 .w:nth-child(4){animation-delay:.18s}.hero h1 .w:nth-child(5){animation-delay:.24s}.hero h1 .w:nth-child(6){animation-delay:.3s}.hero h1 .w:nth-child(7){animation-delay:.36s}.hero h1 .w:nth-child(8){animation-delay:.42s}
@keyframes rise{from{opacity:0; transform:translateY(.4em) rotate(2deg)}}
.note s{background:linear-gradient(currentColor,currentColor) no-repeat 0 55% / 100% 1.5px; text-decoration:none; animation:strike .45s .15s var(--ease) both}
@keyframes strike{from{background-size:0 1.5px}}
/* how it works autoplay progress */
.hiw-tab{overflow:hidden}
.hiw-tab::after{content:""; position:absolute; left:22px; right:22px; bottom:7px; height:3px; border-radius:3px; background:var(--orange); transform-origin:left; transform:scaleX(0); opacity:0; transition:opacity .2s}
.hiw-tab.run::after{opacity:1; animation:hiw-progress 6.5s linear forwards}
[data-paused="true"] .hiw-tab.run::after{animation-play-state:paused}
@keyframes hiw-progress{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.hiw-panel.play .key code{animation:type .9s steps(18) both}
.hiw-panel.play .key:nth-child(2) code{animation-delay:.7s}
.hiw-panel.play .connected{animation:pop .4s 1.7s var(--ease) both}
.hiw-panel.play .okc{animation:tick .5s 1.8s var(--ease) both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}}
@keyframes tick{0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.15); opacity:1}}
.feed li{animation:none}
.hiw-panel.play .feed li{animation:slidein .5s var(--ease) both}
.hiw-panel.play .feed li:nth-child(2){animation-delay:.35s}.hiw-panel.play .feed li:nth-child(3){animation-delay:.7s}.hiw-panel.play .feed li:nth-child(4){animation-delay:1.05s}
.hiw-panel.play .feed + .connected{animation-delay:1.6s}
@keyframes slidein{from{opacity:0; transform:translateX(-18px)}}
.hiw-panel.play .sf-q{display:inline-block; animation:type 1.2s steps(23) both}
.hiw-panel.play .sf-row{animation:pop .4s var(--ease) both}
.hiw-panel.play .sf-row:nth-child(1){animation-delay:1.25s}.hiw-panel.play .sf-row:nth-child(2){animation-delay:1.35s}.hiw-panel.play .sf-row:nth-child(3){animation-delay:1.45s}
.hiw-panel.enter{animation:hiw-in .32s var(--ease) both}
@keyframes hiw-in{from{opacity:0; transform:translateY(10px)}}
.hiw-panel:not([hidden]) .hiw-copy > *{animation:pop .45s var(--ease) both}
.hiw-panel:not([hidden]) .hiw-copy > :nth-child(2){animation-delay:.06s}.hiw-panel:not([hidden]) .hiw-copy > :nth-child(3){animation-delay:.12s}
/* scroll reveal (transform only, so content stays readable at rest) */
.rv{transform:translateY(32px); transition:transform .6s var(--ease)}
.rv.in{transform:none}
/* loops */
.final,.dev{isolation:isolate}
.final > :not(.loop),.dev > :not(.loop){position:relative; z-index:1}
.loop{position:absolute; z-index:0; fill:none; pointer-events:none}
.loop path{stroke:var(--lav-strong); stroke-width:16; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.8s var(--ease)}
.loop.l1{left:-60px; bottom:-40px; width:min(420px, 50%)}
.loop.l2{right:-80px; top:-60px; width:min(380px, 44%); transform:rotate(180deg)}
.loop.l3{right:-90px; top:-70px; width:300px; opacity:.55}
.loop.l3 path{stroke-width:12}
.rvx.pre .loop path{stroke-dashoffset:1}
@media (max-width: 700px){ .loop.l1,.loop.l2{width:60%} .loop.l2{top:-30px} }
/* pill links (nav + footer) */
.nav-links a:hover{background:transparent; box-shadow:inset 0 0 0 1.5px var(--indigo)}
.foot ul{gap:.5rem; justify-items:start}
.foot ul a{display:inline-flex; align-items:center; padding:.3rem .75rem; border-radius:var(--pill); box-shadow:inset 0 0 0 1.5px rgba(250,246,237,.28); transition:background .2s, color .2s, box-shadow .2s}
.foot ul a:hover{background:var(--green); color:var(--indigo); box-shadow:none}
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0; overflow:clip; transition:block-size .3s var(--ease), content-visibility .3s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* v6 fixes */
.loop.l1{left:-90px; bottom:-120px; width:min(360px, 30%)}
.loop.l2{right:-110px; top:-120px; width:min(340px, 28%)}
@media (max-width: 700px){ .loop.l1{width:46%; left:-70px; bottom:-90px} .loop.l2{display:none} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.2s!important; animation-iteration-count:1!important; animation-delay:0s!important}
  @keyframes pop{from{opacity:0}} @keyframes rise{from{opacity:0}} @keyframes slidein{from{opacity:0}} @keyframes tick{from{opacity:0}}
  @keyframes hiw-in{from{opacity:0}}
  .faq details::details-content{transition:none}
  @keyframes hl{from{opacity:0}} @keyframes grow{from{opacity:0}} @keyframes strike{from{opacity:0}} @keyframes type{from{opacity:0}}
  .rv{transform:none}
  .int:hover,.plan:hover{transform:none}
  .live i::after,.caret{animation:none}
}

/* ==========================================================================
   Landing additions (static feature visuals, subpages)
   ========================================================================== */
.landing { font-size: 16px; }

/* hero: single column until the search widget returns */
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 820px; }

/* static segmented controls inside feature visuals */
.seg .seg-i {
  padding: 0.5rem 0.85rem;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}
.seg .seg-i.on {
  background: var(--paper);
  color: var(--indigo);
  box-shadow: 0 2px 8px -4px rgba(42, 38, 112, 0.4);
}
.f-vis[aria-hidden='true'] { pointer-events: none; }
.switch:disabled { cursor: default; opacity: 1; }

/* platform logos are images */
.int-mark img { width: 100%; height: 100%; object-fit: contain; }
.int-mark:has(img.woo) { width: auto; padding: 0 14px; }
.int-mark img.woo { width: 72px; height: 18px; }
.int.soon .int-mark img { opacity: 0.75; }
.pchip .blogo { display: inline-block; }
.pchip.soon .blogo { opacity: 0.7; }
.foot-brand .brand-logo { height: 24px; width: auto; filter: brightness(0) invert(0.96) sepia(0.12); }

/* legacy tag name used by earlier markup */
.int-mark { overflow: hidden; }

/* ---- Subpages (platform, AI search, recommendations) ---------------------- */
.page-hero,
.splitrow,
.prose,
.steps {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 72px); display: grid; gap: 1.5rem; justify-items: start; }
.page-hero__title { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch; margin: 0; }
.page-hero__title em { font-style: italic; font-weight: 500; background: linear-gradient(var(--green), var(--green)) no-repeat 0 88% / 100% 0.28em; padding-inline: 0.04em; }
.page-hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eyebrow .soon {
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lila-2);
  color: var(--lila-ink);
  padding: 0.25rem 0.5rem;
  border-radius: var(--pill);
  margin-left: 0.4rem;
}
.section-head { display: grid; gap: 1.1rem; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; }

.splitrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(32px, 5vw, 64px);
}
.splitrow--reverse .splitrow__copy { order: 2; }
.splitrow__copy { display: grid; gap: 1rem; justify-items: start; }
.splitrow__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; margin: 0; }
.splitrow__copy p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; max-width: 52ch; }
.splitrow__demo { background: var(--lila); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) {
  .splitrow { grid-template-columns: minmax(0, 1fr); }
  .splitrow--reverse .splitrow__copy { order: 0; }
}

.chat { display: grid; gap: 12px; }
.chat__bubble { background: var(--paper); border-radius: 18px 18px 18px 4px; padding: 0.85rem 1.1rem; font-weight: 600; max-width: 85%; justify-self: start; box-shadow: var(--shadow-sm); }
.chat__bubble--user { background: var(--indigo); color: var(--cream); border-radius: 18px 18px 4px 18px; justify-self: end; }
.chat__parsed { display: flex; flex-wrap: wrap; gap: 6px; justify-self: end; }
.fchip { font: 600 12.5px/1 var(--f-mono); padding: 0.4rem 0.7rem; border-radius: var(--pill); background: var(--paper); color: var(--indigo); box-shadow: inset 0 0 0 1px var(--line); }
.fchip--ok { background: var(--green-soft); box-shadow: none; }

.reco { display: grid; gap: 14px; }
.reco__label { margin: 0; font: 600 12px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.reco__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ptile { background: var(--paper); border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 6px; justify-items: start; font-weight: 700; font-size: 13.5px; }
.ptile__img { width: 44px; height: 44px; border-radius: 12px; background: var(--cream-2); display: grid; place-items: center; font-size: 22px; }
.ptile__price { font: 600 13px/1 var(--f-mono); color: var(--indigo); }

.prose { padding-block: clamp(32px, 5vw, 64px); }
.prose__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.prose__cols p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
@media (max-width: 760px) { .prose__cols { grid-template-columns: minmax(0, 1fr); } }

.steps { padding-block: clamp(24px, 4vw, 48px); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps__list li { background: var(--paper); border-radius: 24px; padding: 30px; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; gap: 0.7rem; align-content: start; }
.steps__list h3 { font: 800 1.5rem/1.1 var(--f-body); letter-spacing: -0.03em; margin: 0; }
.steps__list p { color: var(--ink-soft); margin: 0; }
.steps__n { justify-self: start; font: 600 14px/1 var(--f-mono); background: var(--indigo); color: var(--cream); padding: 0.55rem 0.8rem; border-radius: var(--pill); }
@media (max-width: 960px) { .steps__list { grid-template-columns: minmax(0, 1fr); } }

.cta-band {
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  margin: clamp(40px, 6vw, 80px) auto 0;
  background: var(--orange);
  border-radius: 36px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -0.025em; max-width: 16ch; margin: 0; }
.cta-band h2 em { font-style: italic; font-weight: 500; background: linear-gradient(var(--cream), var(--cream)) no-repeat 0 88% / 100% 0.22em; padding-inline: 0.04em; }
.cta-band p { font-size: 1.15rem; max-width: 48ch; color: var(--text); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
@media (max-width: 700px) { .cta-band { border-radius: 28px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* platform badges and trial note */
.trial{display:flex; align-items:center; gap:.45rem; font-size:14px; font-weight:700; margin-top:-.6rem}
.trial .ico{width:16px; height:16px; stroke-width:2.6; background:var(--green); border-radius:50%; padding:2px}
.blogo{width:16px; height:16px; flex:none}
.blogo.lg{width:28px; height:28px}
.blogo.woo{width:30px; height:16px}

.more{font-size:13px; color:var(--ink-soft); padding:6px 10px 10px}

/* segmented controls: one swipeable row on narrow screens instead of a wrapped pill */
@media (max-width: 680px) {
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button, .seg .seg-i { flex: none; white-space: nowrap; }
}