/* ==========================================================================
   ImportKit marketing site + docs
   One stylesheet, no build step, no dependencies.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --accent: #5b4bff;
  --accent-hover: #4a3ae6;
  --accent-soft: #eeecff;
  --accent-border: #d7d2ff;

  --ink: #12121a;
  --ink-2: #3d3d4d;
  --ink-3: #6b6b7b;
  --ink-4: #9a9aa8;

  --bg: #ffffff;
  --bg-2: #faf9fb;
  --bg-3: #f3f2f6;
  --line: #e7e6ec;
  --line-2: #d9d8e0;

  --ok: #0f7b52;
  --ok-soft: #e6f5ee;
  --warn: #8a5300;
  --warn-soft: #fdf3e2;
  --danger: #b42318;
  --danger-soft: #fdecea;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(18, 18, 26, 0.05);
  --shadow: 0 1px 3px rgba(18, 18, 26, 0.06), 0 8px 24px -12px rgba(18, 18, 26, 0.14);
  --shadow-lg: 0 2px 6px rgba(18, 18, 26, 0.05), 0 24px 60px -20px rgba(18, 18, 26, 0.22);

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

  --wrap: 1120px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8f83ff;
    --accent-hover: #a49aff;
    --accent-soft: #1e1b3d;
    --accent-border: #332e63;

    --ink: #f2f1f7;
    --ink-2: #c9c8d4;
    --ink-3: #9a99a8;
    --ink-4: #74738200;

    --ink-4: #747382;

    --bg: #0d0d12;
    --bg-2: #14141b;
    --bg-3: #1b1b24;
    --line: #26262f;
    --line-2: #34343f;

    --ok: #5fd3a3;
    --ok-soft: #10261e;
    --warn: #e8b463;
    --warn-soft: #2a2013;
    --danger: #f6867a;
    --danger-soft: #2c1614;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  }
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 650;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
}
h3 {
  font-size: 1.15rem;
}
h4 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Layout helpers ------------------------------------------------------ */

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

.narrow {
  max-width: 760px;
}

.section {
  padding: 72px 0;
}
.section + .section {
  padding-top: 0;
}
.section-tinted {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.section-tinted + .section {
  padding-top: 72px;
}

.center {
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-3);
  max-width: 62ch;
}
.center .lede {
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 100;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 680;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex: none;
}
.brand:hover {
  color: var(--ink);
}
.brand svg {
  width: 26px;
  height: 26px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* `:not(.btn)` matters here. Without it these rules also match the header CTA,
   and because `.nav a` outranks `.btn` on specificity it was overriding the
   button's colour, background, padding, radius and font weight. Excluding
   buttons lets the .btn styles apply untouched — no need to restate them. */
.nav a:not(.btn) {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 520;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.nav a:not(.btn):hover {
  color: var(--ink);
  background: var(--bg-3);
}
.nav a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  font-weight: 620;
}

.nav .btn {
  margin-left: 8px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 7px 10px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 800px) {
  .nav-toggle {
    display: block;
  }
  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav a:not(.btn) {
    padding: 10px 12px;
  }
  .nav .btn {
    margin: 8px 0 0;
    justify-content: center;
  }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
}

.btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-secondary:hover {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--ink-4);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--bg-3);
  color: var(--ink);
}

.btn-lg {
  font-size: 1rem;
  padding: 14px 24px;
}
.btn-sm {
  font-size: 0.86rem;
  padding: 7px 12px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* A flex row ignores text-align, and a max-width block ignores it too, so
   every centred container has to say so explicitly. The hero and CTA band set
   text-align themselves rather than using .center, hence all three selectors. */
.center .btn-row,
.hero .btn-row,
.cta-inner .btn-row {
  justify-content: center;
}

.hero .lede,
.cta-inner .lede {
  margin-inline: auto;
}

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

.hero {
  position: relative;
  padding: 88px 0 64px;
  overflow: hidden;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 50% auto;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  max-width: 20ch;
  margin-inline: auto;
}

.hero .lede {
  font-size: 1.22rem;
  margin-bottom: 28px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 560;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 14px 5px 8px;
  margin-bottom: 22px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.pill:hover {
  color: var(--ink);
  border-color: var(--ink-4);
}
.pill b {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 650;
}

.microcopy {
  font-size: 0.88rem;
  color: var(--ink-4);
  margin: 16px 0 0;
}

/* --- Cards & grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: 20px;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: 6px;
}
.card p:last-child {
  margin-bottom: 0;
}
.card p {
  color: var(--ink-3);
  font-size: 0.95rem;
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}
a.card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
a.card h3 {
  color: var(--ink);
}
a.card .more {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 14px;
  border: 1px solid var(--accent-border);
}
.icon svg {
  width: 19px;
  height: 19px;
}

/* --- At-a-glance spec band ---------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.specs > div {
  background: var(--bg);
  padding: 20px 22px;
}

.specs dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-4);
  font-weight: 680;
  margin-bottom: 5px;
}

.specs dd {
  margin: 0;
  color: var(--ink);
  font-weight: 640;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.specs small {
  display: block;
  font-weight: 450;
  color: var(--ink-3);
  font-size: 0.85rem;
  margin-top: 3px;
  letter-spacing: 0;
}

/* --- Testimonial slots -------------------------------------------------- */

.quote {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.quote blockquote {
  margin: 0 0 14px;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.55;
}

.quote figcaption {
  font-size: 0.88rem;
  color: var(--ink-3);
}

.quote-placeholder {
  border-style: dashed;
  border-width: 2px;
  border-color: var(--line-2);
  background: var(--bg-2);
  box-shadow: none;
}

.quote-placeholder blockquote {
  color: var(--ink-3);
  font-style: italic;
}

.stars {
  color: var(--accent);
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

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

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 0.9rem;
}
.steps > li > h3,
.steps > li > h4 {
  margin: 4px 0 4px;
}
.steps > li > *:last-child {
  margin-bottom: 0;
}
.steps ul,
.steps ol {
  margin-top: 0.4em;
}

/* --- Screenshot placeholders ------------------------------------------- */

.shot {
  margin: 28px 0;
}

.shot-frame {
  position: relative;
  border: 2px dashed var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  background-image: linear-gradient(
      45deg,
      color-mix(in srgb, var(--line) 55%, transparent) 25%,
      transparent 25%,
      transparent 75%,
      color-mix(in srgb, var(--line) 55%, transparent) 75%
    ),
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--line) 55%, transparent) 25%,
      transparent 25%,
      transparent 75%,
      color-mix(in srgb, var(--line) 55%, transparent) 75%
    );
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}

.shot-frame.tall {
  aspect-ratio: 4 / 3;
}

.shot-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 680;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 4px 10px;
}

.shot-label {
  font-weight: 650;
  color: var(--ink);
  font-size: 1.02rem;
  margin: 0;
  max-width: 44ch;
}
.shot-hint {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0;
  max-width: 56ch;
}
.shot-frame code {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 4px;
}

.shot figcaption {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-top: 10px;
  text-align: center;
}

/* --- Code --------------------------------------------------------------- */

pre {
  margin: 0 0 1.2em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
}

pre code {
  font-family: var(--mono);
  white-space: pre;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

:not(pre) > code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.36em;
  color: var(--ink);
  overflow-wrap: break-word;
}

.codeblock {
  position: relative;
  margin: 0 0 1.2em;
}
.codeblock pre {
  margin: 0;
  padding-top: 38px;
}
.codeblock-bar {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-3);
}
.codeblock-name {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.copy-btn {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  cursor: pointer;
}
.copy-btn:hover {
  color: var(--ink);
  border-color: var(--ink-4);
}
.copy-btn.is-copied {
  color: var(--ok);
  border-color: var(--ok);
}

/* --- Tables ------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1.4em;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.table-scroll table {
  margin: 0;
}

th,
td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--ink);
  font-weight: 620;
  background: var(--bg-2);
  white-space: nowrap;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td code {
  white-space: nowrap;
}

/* Two-column tables whose cells hold long strings — error messages, value
   formats. Without a fixed layout the nowrap code in column one takes as much
   width as it wants and squashes the prose in column two, so force an even
   split and let long values wrap instead. */
.table-split table {
  table-layout: fixed;
}

.table-split th,
.table-split td {
  width: 50%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.table-split code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Three even columns, same reasoning. */
.table-split-3 table {
  table-layout: fixed;
}

.table-split-3 th,
.table-split-3 td {
  width: 33.333%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.table-split-3 code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Badges ------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge-req {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.badge-ok {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  color: var(--ok);
}
.badge-warn {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--warn);
}
.badge-danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}
.badge-soon {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Callouts ----------------------------------------------------------- */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 1.4em;
  font-size: 0.95rem;
}
.note > *:last-child {
  margin-bottom: 0;
}
.note-title {
  display: block;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 3px;
  font-size: 0.95rem;
}
.note-tip {
  border-left-color: var(--ok);
}
.note-warn {
  border-left-color: var(--warn);
}
.note-danger {
  border-left-color: var(--danger);
}

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

.price-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  align-items: start;
}

.price-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.price-card.is-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.price-tag {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.price-name {
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--ink);
  margin: 0;
}

.price-amount {
  font-size: 2.3rem;
  font-weight: 680;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-unit {
  font-size: 0.9rem;
  color: var(--ink-3);
  font-weight: 500;
}

.price-rows {
  font-weight: 620;
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0;
}
.price-per {
  font-size: 0.85rem;
  color: var(--ink-4);
  margin: 0;
}

.price-card .btn {
  justify-content: center;
  margin-top: auto;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
  display: grid;
  gap: 9px;
}
.checklist li {
  position: relative;
  padding-left: 27px;
  font-size: 0.95rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 0.66em;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--ok);
  border-bottom: 1.6px solid var(--ok);
  transform: rotate(-45deg);
}

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

.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 18px;
}
.faq details[open] {
  background: var(--bg-2);
}
.faq summary {
  cursor: pointer;
  font-weight: 620;
  color: var(--ink);
  padding: 15px 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1.2;
  flex: none;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details > *:not(summary) {
  font-size: 0.95rem;
  color: var(--ink-2);
}
.faq details > *:last-child {
  padding-bottom: 16px;
  margin-bottom: 0;
}

/* --- CTA band ----------------------------------------------------------- */

.cta {
  margin: 0 0 72px;
}
.cta-inner {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 52px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.cta-inner h2 {
  margin-bottom: 10px;
}
.cta-inner .lede {
  margin: 0 auto 24px;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 56px 0 32px;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 40px;
}

.footer-about p {
  color: var(--ink-3);
  font-size: 0.9rem;
  max-width: 34ch;
  margin: 12px 0 0;
}

.site-footer h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 680;
  margin-bottom: 12px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  color: var(--ink-4);
  font-size: 0.86rem;
}
.footer-bottom p {
  margin: 0;
}
/* --- Generic horizontal carousel ---------------------------------------- */
/*
 * A scroll-snapping row. Set --item to control card width.
 * Used where a stack of long prose blocks would otherwise bury the reader.
 */

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
  margin: 0;
  list-style: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel > * {
  flex: 0 0 var(--item, 320px);
  scroll-snap-align: start;
  min-width: 0;
}

/*
 * Full-bleed variant: the row spans the whole viewport so cards run edge to
 * edge, while the first card still lines up with the page gutter. Place this
 * OUTSIDE a .wrap and it needs no negative margins.
 */
.carousel-bleed {
  padding-left: max(24px, calc((100vw - var(--wrap)) / 2));
  padding-right: max(24px, calc((100vw - var(--wrap)) / 2));
  scroll-padding-left: max(24px, calc((100vw - var(--wrap)) / 2));
}

/* Tells the reader the row scrolls, without needing a visible scrollbar */
.carousel-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.84rem;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.carousel-hint span:last-child {
  white-space: nowrap;
}

/* --- Problem / solution card -------------------------------------------- */

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
}

.pcard-num {
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 0 0 10px;
}

.pcard h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.pcard-context {
  font-size: 0.9rem;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0 0 16px;
}

.pcard-fix {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.pcard-fix b {
  color: var(--ok);
  display: block;
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.pcard-link {
  margin: 12px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
}

/* --- Fit section pill lists --------------------------------------------- */

.fit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fit-card h3 {
  margin-bottom: 14px;
}

.fit-pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fit-pills li {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 13px;
  font-size: 0.92rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  line-height: 1.4;
}

/* Push the badge to the right when it exists */
.fit-pills li .badge-soon {
  margin-left: auto;
  flex: none;
}

.fit-pills li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.fit-pills--roadmap li::before {
  background: var(--accent);
}

/* Step label and number — shared between wizard and docs steps */
.wizard-step-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.wizard-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 680;
}

.wizard-dot {
  height: 3px;
  border-radius: 999px;
  background: var(--line-2);
  transition: width 0.25s ease, background 0.25s ease;
  width: 20px;
}
.wizard-dot.is-active {
  background: var(--accent);
  width: 40px;
}

/* --- Horizontal scroll section (How it works) --------------------------- */
/*
 * Vertical scrolling drives horizontal movement.
 *
 *   .hs-outer   tall spacer; height set in px by wizard.js
 *   .hs-pin     sticky top:0, height:100vh — stays put for that budget
 *   .hs-viewport  overflow hidden, defines the panel width
 *   .hs-track   flex row, translated on X by wizard.js
 *   .hs-panel   flex 0 0 100% -> exactly one viewport wide
 *
 * Because a panel is exactly the viewport width, the transform is simply
 * -(progress x (panels-1) x panelWidth). No centring or gap maths, which is
 * what made earlier versions land on the wrong panel.
 */

.hs-outer {
  position: relative;
}

.hs-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Content starts near the top rather than dead-centre, so the pinned block
     sits higher in the viewport and gets section-like spacing above it. */
  justify-content: flex-start;
  gap: 20px;
  padding: clamp(52px, 8vh, 88px) 0 22px;
}

.hs-head {
  flex: none;
  text-align: center;
  padding: 0 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.hs-head h2 { margin-bottom: 8px; }
.hs-head .lede { margin: 0 auto; }

.hs-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.hs-track {
  display: flex;
  height: 100%;
  will-change: transform;
  /* No CSS transition: the transform is driven per-frame by wizard.js.
     A transition here fights the scroll and produces the lag/bounce. */
}

.hs-panel {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* Each panel's content is a card, so a slide reads as a discrete step
   rather than loose text floating on the page background. */
.hs-panel-inner {
  width: 100%;
  max-width: 1120px;
  /* Fill the vertical space the pin leaves, but never more than is available —
     min() means no overflow on short viewports, so the section height and the
     panel width are both untouched. */
  min-height: min(100%, 500px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 44px 52px;
  box-shadow: var(--shadow);
}

.hs-panel h3 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  margin-bottom: 10px;
}

.hs-panel p {
  color: var(--ink-3);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.hs-dots {
  flex: none;
  display: flex;
  gap: 6px;
  justify-content: center;
}

@media (max-width: 1000px) {
  .hs-panel-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 620px;
    padding: 28px 26px;
  }
  .hs-panel-inner .shot { display: none; }
}

/* Plain stacked list: no pinning, no transform, no script */
@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .hs-outer { height: auto !important; }
  .hs-pin {
    position: static;
    height: auto;
    overflow: visible;
    padding: 56px 0;
    gap: 28px;
  }
  .hs-viewport { overflow: visible; }
  .hs-track {
    flex-direction: column;
    transform: none !important;
    gap: 16px;
  }
  .hs-panel {
    flex: none;
    height: auto;
    padding: 0 24px;
  }
  /* Card styling already comes from the base rule; just resize it here. */
  .hs-panel-inner {
    grid-template-columns: 1fr;
    max-width: 680px;
    padding: 26px 24px;
  }
  .hs-panel-inner .shot { display: none; }
  .hs-dots { display: none; }
}

/* --- Docs layout -------------------------------------------------------- */


.docs {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 208px;
  gap: 40px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  padding-right: 8px;
  font-size: 0.92rem;
  scrollbar-width: thin;
}

.docs-sidebar h2 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-4);
  font-weight: 680;
  margin: 22px 0 8px;
}
.docs-sidebar h2:first-child {
  margin-top: 0;
}

.docs-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.docs-sidebar a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.docs-sidebar a:hover {
  background: var(--bg-3);
  color: var(--ink);
}
.docs-sidebar a[aria-current="page"] {
  color: var(--accent);
  font-weight: 620;
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.docs-main {
  min-width: 0;
}

.docs-main h1 {
  font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.5rem);
  margin-bottom: 12px;
}
.docs-main h2 {
  margin-top: 2.4em;
  padding-top: 0.2em;
  border-top: 1px solid var(--line);
  padding-top: 1.2em;
}
.docs-main h2:first-of-type {
  margin-top: 2em;
}
.docs-main h3 {
  margin-top: 1.9em;
}
.docs-main h4 {
  margin-top: 1.5em;
}
.docs-main > .lede {
  font-size: 1.1rem;
  margin-bottom: 2em;
}

.docs-main ul,
.docs-main ol {
  padding-left: 1.3em;
  margin: 0 0 1.2em;
}
.docs-main li {
  margin-bottom: 0.4em;
}
.docs-main li > ul,
.docs-main li > ol {
  margin: 0.4em 0 0.6em;
}

.docs-main dl {
  margin: 0 0 1.4em;
}
.docs-main dt {
  font-weight: 620;
  color: var(--ink);
  margin-top: 1em;
}
.docs-main dd {
  margin: 0.2em 0 0;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-4);
  margin: 0 0 10px;
}
.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
}

.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  font-size: 0.86rem;
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
}
.docs-toc h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-4);
  font-weight: 680;
  margin: 0 0 10px;
}
.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  border-left: 1px solid var(--line);
}
.docs-toc a {
  display: block;
  color: var(--ink-3);
  text-decoration: none;
  padding-left: 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.docs-toc a:hover {
  color: var(--ink);
}
.docs-toc a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

.anchor {
  color: var(--ink-4);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  margin-left: 0.35em;
  transition: opacity 0.15s ease;
}
h2:hover > .anchor,
h3:hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}

.docs-nav-toggle {
  display: none;
}

.next-prev {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.next-prev a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
}
.next-prev a:hover {
  border-color: var(--accent-border);
  background: var(--bg-2);
}
.next-prev span {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 650;
  margin-bottom: 3px;
}
.next-prev strong {
  font-weight: 620;
  color: var(--accent);
}
.next-prev .is-next {
  text-align: right;
}

@media (max-width: 1140px) {
  .docs {
    grid-template-columns: 232px minmax(0, 1fr);
  }
  .docs-toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 20px;
  }
  .docs-nav-toggle {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 620;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 14px;
    cursor: pointer;
    margin-bottom: 20px;
  }
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 26px;
    background: var(--bg-2);
  }
  .docs-sidebar.is-open {
    display: block;
  }
}

/* --- Legal pages -------------------------------------------------------- */

.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.legal h2 {
  margin-top: 2.4em;
  font-size: 1.3rem;
}
.legal h3 {
  margin-top: 1.8em;
  font-size: 1.05rem;
}
.legal ul,
.legal ol {
  padding-left: 1.3em;
  margin-bottom: 1.2em;
}
.legal li {
  margin-bottom: 0.4em;
}
.legal .meta {
  font-size: 0.9rem;
  color: var(--ink-4);
  margin-bottom: 2em;
}

.placeholder {
  background: var(--warn-soft);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.4em;
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--warn);
  white-space: nowrap;
}

/* --- Utilities ---------------------------------------------------------- */

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

.nowrap {
  white-space: nowrap;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-2 {
  margin-top: 2rem;
}