/* ===========================================================
   Cernio — Landing page
   Shares the app's visual language: warm-dark, amber accent,
   mono numerals, hairline borders.
   =========================================================== */

:root {
  /* ---- Light (default) — cool, crisp neutrals ---- */
  --bg: oklch(0.992 0.0025 255);
  --bg-deep: oklch(0.967 0.004 255);
  --panel: oklch(1 0 0);
  --panel-2: oklch(0.974 0.004 255);
  --elevated: oklch(0.962 0.005 255);
  --border: oklch(0.905 0.006 255);
  --border-strong: oklch(0.78 0.008 258);
  --hairline: oklch(0.935 0.005 255);

  --text: oklch(0.205 0.016 264);
  --text-2: oklch(0.36 0.014 262);
  --text-muted: oklch(0.52 0.014 258);
  --text-subtle: oklch(0.64 0.012 256);

  --amber: oklch(0.8 0.13 70);
  --amber-bright: oklch(0.74 0.15 64);
  --amber-ink: oklch(0.55 0.15 58); /* deep amber for text/icons on light */
  --amber-soft: oklch(0.8 0.13 70 / 0.15);
  --amber-line: oklch(0.68 0.13 60 / 0.32);
  --accent2: oklch(0.62 0.17 280); /* cool violet — background mesh only */
  --rec: oklch(0.56 0.22 25);
  --ok: oklch(0.54 0.13 150);
  --ok-soft: oklch(0.54 0.13 150 / 0.14);
  --info: oklch(0.52 0.16 250);

  --header-bg: oklch(0.992 0.0025 255 / 0.72);
  --glow: 0.13;
  --card-shadow:
    0 1px 2px oklch(0.45 0.03 264 / 0.05), 0 12px 28px -18px oklch(0.4 0.04 264 / 0.22);

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 24px;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1180px;
  --gut: 28px;
}

:root[data-theme='dark'] {
  /* ---- Dark ---- */
  --bg: oklch(0.158 0.004 60);
  --bg-deep: oklch(0.122 0.004 60);
  --panel: oklch(0.205 0.005 60);
  --panel-2: oklch(0.235 0.005 60);
  --elevated: oklch(0.27 0.006 60);
  --border: oklch(0.3 0.006 60);
  --border-strong: oklch(0.42 0.007 60);
  --hairline: oklch(0.25 0.005 60);

  --text: oklch(0.965 0.003 80);
  --text-2: oklch(0.84 0.005 75);
  --text-muted: oklch(0.64 0.009 70);
  --text-subtle: oklch(0.5 0.007 65);

  --amber: oklch(0.8 0.13 72);
  --amber-bright: oklch(0.85 0.15 78);
  --amber-ink: oklch(0.85 0.15 78);
  --amber-soft: oklch(0.8 0.13 72 / 0.14);
  --amber-line: oklch(0.8 0.13 72 / 0.3);
  --accent2: oklch(0.55 0.16 280);
  --rec: oklch(0.66 0.22 24);
  --ok: oklch(0.74 0.14 150);
  --ok-soft: oklch(0.74 0.14 150 / 0.16);
  --info: oklch(0.72 0.13 240);

  --header-bg: oklch(0.158 0.004 60 / 0.8);
  --glow: 0.15;
  --card-shadow: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}

/* Layered ambient mesh — warm amber bloom + cool secondary, very soft */
body::before {
  content: '';
  position: fixed;
  inset: -200px 0 auto 0;
  height: 760px;
  background:
    radial-gradient(680px 460px at 78% -4%, oklch(0.8 0.13 72 / var(--glow)), transparent 60%),
    radial-gradient(
      620px 440px at 12% 6%,
      oklch(0.62 0.17 280 / calc(var(--glow) * 0.6)),
      transparent 62%
    );
  pointer-events: none;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01';
  letter-spacing: 0;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -0.01em;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: oklch(0.2 0.03 60);
  border-color: var(--amber);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.25) inset,
    0 6px 16px -8px oklch(0.7 0.14 65 / 0.6);
}
.btn-primary:hover {
  filter: brightness(1.04);
}
.btn-ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
.btn-ghost:hover {
  border-color: var(--border-strong);
}
.btn-sm {
  height: 38px;
  padding: 0 15px;
  font-size: 13.5px;
}
.btn-lg {
  height: 50px;
  padding: 0 26px;
  font-size: 15.5px;
}
.btn svg {
  width: 17px;
  height: 17px;
}

.btn-os-sub {
  font-size: 11.5px;
  opacity: 0.65;
  font-weight: 450;
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--panel-2);
  color: var(--text-2);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.chip.amber {
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-color: transparent;
}
.chip.ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
}
.chip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.chip-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber-ink);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--amber-line);
}

/* ---------- Header ---------- */
header.site {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    backdrop-filter 0.25s ease;
  border-bottom: 1px solid transparent;
}
header.site.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 15.5px;
  letter-spacing: -0.02em;
}
.brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--text);
  color: var(--bg-deep);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.03em;
}
.nav {
  display: flex;
  gap: 2px;
  margin-left: 10px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
}
.nav a {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 999px;
  transition:
    color 0.15s,
    background 0.15s;
}
.nav a:hover {
  color: var(--text);
  background: var(--bg-deep);
}
.header-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 138px 0 76px;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(oklch(0.5 0.02 264 / 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(640px 420px at 30% 32%, #000, transparent 75%);
  mask-image: radial-gradient(640px 420px at 30% 32%, #000, transparent 75%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: 62px;
  line-height: 1;
  font-weight: 660;
  letter-spacing: -0.042em;
  margin: 22px 0 0;
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--amber-ink);
}
.hero .lede {
  font-size: 17.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 20px 0 0;
  max-width: 480px;
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-subtle);
  flex-wrap: wrap;
}
.hero-meta .mono {
  color: var(--text-muted);
}
.hero-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-subtle);
}

/* ---------- Trust strip ---------- */
.trust {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}
.trust .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.trust-item svg {
  width: 17px;
  height: 17px;
  color: var(--amber-ink);
  flex-shrink: 0;
}
.trust-item b {
  color: var(--text-2);
  font-weight: 600;
}

/* ---------- Section scaffolding ---------- */
section {
  padding: 92px 0;
  position: relative;
}
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  font-size: 41px;
  line-height: 1.05;
  font-weight: 640;
  letter-spacing: -0.035em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.section-head p {
  font-size: 16.5px;
  color: var(--text-muted);
  margin: 16px 0 0;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- Feature rows ---------- */
/* Card depth (light only — dark cards stay flat) */
.fcard,
.price,
.dl-card,
.step,
.hyb-card,
.integ-card {
  box-shadow: var(--card-shadow);
}
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 30px 0;
}
.feat.flip .feat-visual {
  order: -1;
}
.feat-copy h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  line-height: 1.15;
  text-wrap: balance;
}
.feat-copy p {
  font-size: 15.5px;
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.55;
  max-width: 440px;
}
.feat-points {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.feat-point {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
}
.feat-point svg {
  width: 16px;
  height: 16px;
  color: var(--amber-ink);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Feature grid (smaller cards) ---------- */
.feat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.fcard {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
}
.fcard .fi {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.fcard .fi svg {
  width: 17px;
  height: 17px;
}
.fcard h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.fcard p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 7px;
  line-height: 1.5;
}

/* ---------- Generic mock frame ---------- */
/* Product mockups always render dark — the real app is dark, so dark
   screenshots on a light marketing page read as intentional product shots.
   Re-scope the surface/text tokens to dark inside any .mock. */
.mock {
  --bg: oklch(0.158 0.004 60);
  --bg-deep: oklch(0.122 0.004 60);
  --panel: oklch(0.205 0.005 60);
  --panel-2: oklch(0.235 0.005 60);
  --elevated: oklch(0.27 0.006 60);
  --border: oklch(0.3 0.006 60);
  --border-strong: oklch(0.42 0.007 60);
  --hairline: oklch(0.25 0.005 60);
  --text: oklch(0.965 0.003 80);
  --text-2: oklch(0.84 0.005 75);
  --text-muted: oklch(0.64 0.009 70);
  --text-subtle: oklch(0.5 0.007 65);
  --amber-ink: oklch(0.85 0.15 78);
  --ok-soft: oklch(0.74 0.14 150 / 0.16);
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.45),
    0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
}
.mock-bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.mock-bar .tl {
  display: flex;
  gap: 6px;
}
.mock-bar .tl span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.mock-bar .tl span:nth-child(1) {
  background: #ff5f57;
}
.mock-bar .tl span:nth-child(2) {
  background: #febc2e;
}
.mock-bar .tl span:nth-child(3) {
  background: #28c840;
}
.mock-bar .title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  margin: 0 auto;
  white-space: nowrap;
}
.mock-body {
  padding: 18px;
}
.ss-caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Smart Start hero mock */
.ss-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.ss-head .spark {
  width: 15px;
  height: 15px;
  color: var(--amber);
}
.ss-prompt {
  background: var(--panel);
  border: 1.5px solid var(--amber-line);
  border-radius: var(--r-md);
  padding: 13px 14px;
  font-size: 14px;
  min-height: 46px;
  line-height: 1.5;
  color: var(--text);
}
.ss-prompt .caret {
  display: inline-block;
  width: 2px;
  height: 17px;
  background: var(--amber);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.ss-out {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 11px;
  column-gap: 14px;
  font-size: 13px;
}
.ss-out .k {
  color: var(--text-muted);
}
.ss-out .v {
  color: var(--text);
}
/* Smart Start output rows — transform-only staged reveal, same JS gate */
.ss-out .reveal {
  transform: none;
}
html.js .ss-out .reveal {
  transform: translateY(5px);
  transition: transform 0.4s ease;
}
html.js .ss-out .reveal.in {
  transform: none;
}
.ss-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ss-foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ss-foot .stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}
.ss-rec-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  background: var(--rec);
  color: white;
  font-size: 12.5px;
  font-weight: 550;
}
.ss-rec-btn .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rec);
  position: relative;
}
@keyframes recpulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--rec);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}
.rec-dot.live {
  animation: recpulse 1.6s ease-in-out infinite;
}

/* ===========================================================
   Animated studio (hero) — record → analyze → results
   =========================================================== */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.theme-toggle:hover {
  background: var(--panel);
  border-color: var(--border-strong);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
}
.theme-toggle .moon {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .sun {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .moon {
  display: block;
}

.st-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.st-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition:
    background 0.25s,
    width 0.25s;
}
.st-dots i.on {
  width: 16px;
  border-radius: 3px;
  background: var(--amber);
}

.studio-body {
  position: relative;
  min-height: 432px;
}
.studio .phase {
  display: none;
  padding: 18px;
  flex-direction: column;
}
.studio .phase.active {
  display: flex;
  animation: phaseIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes phaseIn {
  from {
    transform: translateY(10px);
  }
  to {
    transform: none;
  }
}

.studio-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  min-height: 18px;
  transition: opacity 0.25s;
}
.studio-cap b {
  color: var(--text-2);
  font-weight: 600;
}

/* ---- Recording phase ---- */
.sd-recbar {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sd-reclabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--rec);
}
.sd-timer {
  font-size: 16px;
  font-weight: 500;
}
.sd-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  color: var(--text-muted);
}
.sd-wave i {
  width: 2px;
  height: 100%;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  animation: sdwave 1s ease-in-out infinite;
}
.sd-wave i:nth-child(2) {
  animation-delay: 0.15s;
}
.sd-wave i:nth-child(3) {
  animation-delay: 0.3s;
}
.sd-wave i:nth-child(4) {
  animation-delay: 0.1s;
}
.sd-wave i:nth-child(5) {
  animation-delay: 0.25s;
}
.sd-wave i:nth-child(6) {
  animation-delay: 0.05s;
}
.sd-wave i:nth-child(7) {
  animation-delay: 0.2s;
}
@keyframes sdwave {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

.sd-screen {
  position: relative;
  margin-top: 12px;
  height: 138px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, oklch(0.3 0.01 60), oklch(0.18 0.005 60));
}
.sd-win {
  position: absolute;
  inset: 16px;
  background: oklch(0.97 0.003 80);
  border-radius: 7px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.sd-winbar {
  height: 20px;
  background: oklch(0.92 0.003 80);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.sd-winbar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbb;
}
.sd-winbar i:nth-child(1) {
  background: #ff5f57;
}
.sd-winbar i:nth-child(2) {
  background: #febc2e;
}
.sd-winbar i:nth-child(3) {
  background: #28c840;
}
.sd-winbar .mono {
  font-size: 8.5px;
  color: #888;
  margin-left: 8px;
}
.sd-winbody {
  padding: 12px 16px;
}
.sd-h {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}
.sd-field {
  height: 14px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-bottom: 6px;
  background: #fff;
}
.sd-btn {
  height: 16px;
  width: 70px;
  border-radius: 4px;
  background: #0a0a0a;
}
.sd-region {
  position: absolute;
  inset: 10px;
  border: 1px dashed oklch(0.82 0.16 75 / 0.7);
  border-radius: 6px;
  pointer-events: none;
}
.sd-pip {
  position: absolute;
  bottom: 9px;
  right: 9px;
  width: 56px;
  height: 42px;
  border-radius: 7px;
  border: 2px solid var(--bg);
  background: linear-gradient(135deg, oklch(0.4 0.04 30), oklch(0.25 0.02 30));
  display: grid;
  place-items: center;
  color: oklch(0.72 0.05 30);
}
.sd-pip svg {
  width: 18px;
  height: 18px;
}

.sd-live {
  margin-top: 12px;
  flex: 1;
}
.sd-upd {
  color: var(--text-subtle);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.sd-feed {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sd-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.4;
  animation: itemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes itemIn {
  from {
    transform: translateY(8px);
  }
  to {
    transform: none;
  }
}
.sd-item .tag {
  flex-shrink: 0;
  margin-top: 1px;
}
.sd-item.kp {
  color: var(--text-2);
}
.sd-item.kp::before {
  content: '—';
  color: var(--amber-ink);
}
.sd-item .who {
  color: var(--text);
  font-weight: 600;
}
.sd-item.dec {
  background: var(--ok-soft);
  border: 1px solid color-mix(in oklch, var(--ok) 30%, transparent);
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--text);
}

/* ---- Analyze phase ---- */
.sd-progress {
  margin-top: 16px;
  height: 6px;
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
}
.sd-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 0.4s ease;
}
.sd-passes {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.sd-pass {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.3s;
}
.sd-pass .pi {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
}
.sd-pass.run .pi {
  border-color: var(--amber);
  border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
.sd-pass.done {
  color: var(--text);
}
.sd-pass.done .pi {
  border-color: var(--ok);
  background: var(--ok);
  animation: none;
}
.sd-pass.done .pi::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2.5px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.sd-note {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-subtle);
}

/* ---- Results phase ---- */
.sd-rhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sd-rtitle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sd-chapters {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
}
.sd-ch {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}
.sd-ch .mono {
  font-size: 11px;
  color: var(--text-subtle);
}
.sd-ch.on {
  background: var(--amber-soft);
  color: var(--text);
}
.sd-ch.on .mono {
  color: var(--amber-ink);
}
.sd-ai {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 5px 0;
}
.sd-ai .sd-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.sd-ai .sd-box.checked {
  background: var(--ok);
  border-color: var(--ok);
}
.sd-ai .sd-box.checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.sd-ai .who,
.sd-ai b {
  color: var(--text);
  font-weight: 600;
}
.sd-decision {
  margin-top: 10px;
  background: var(--ok-soft);
  border: 1px solid color-mix(in oklch, var(--ok) 30%, transparent);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.sd-indexed {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--amber-ink);
}
.sd-indexed .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Mini record/library/memory mocks */
.m-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-mut {
  color: var(--text-muted);
}
.m-line {
  height: 1px;
  background: var(--hairline);
}

.bubble-user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  border-bottom-right-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
}
.bubble-ai {
  display: flex;
  gap: 10px;
}
.bubble-ai .av {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--amber);
  color: var(--bg-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bubble-ai .av svg {
  width: 12px;
  height: 12px;
}
.cite {
  font-size: 11px;
  color: var(--amber-ink);
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* ===========================================================
   Integrations
   =========================================================== */
.auto-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 940px;
  margin: 0 auto 36px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.ar-when {
  font-size: 13.5px;
  color: var(--text-2);
}
.ar-when b,
.ar-do b {
  color: var(--text);
  font-weight: 600;
}
.ar-arrow {
  width: 22px;
  height: 15px;
  color: var(--amber-ink);
  flex-shrink: 0;
}
.ar-do {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
}
.svc-ico,
.svc {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
  border-radius: 5px;
}
.svc-ico {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.svc {
  width: 26px;
  height: 26px;
  font-size: 13px;
  border-radius: 7px;
}
.svc-ico svg,
.svc svg {
  width: 62%;
  height: 62%;
}
.slack {
  background: #4a154b;
}
.linear {
  background: #5e6ad2;
}
.notion {
  background: #111;
}
.svc-ico.ss,
.ss-mark {
  background: var(--amber);
  color: oklch(0.2 0.03 60);
  font-size: 8px;
}

.integ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.integ-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--hairline);
}
.ic-head h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ic-head .meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.ic-body {
  padding: 14px 15px;
}

/* Slack */
.slack-msg {
  display: flex;
  gap: 9px;
}
.slack-av {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--amber);
  color: oklch(0.2 0.03 60);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.slack-main {
  min-width: 0;
}
.slack-name {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.slack-bot {
  font-size: 8.5px;
  font-weight: 600;
  background: var(--panel-2);
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.slack-time {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.slack-title {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}
.slack-title .mono {
  color: var(--text-subtle);
  font-weight: 400;
  font-size: 11px;
}
.slack-text {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}
.slack-facts {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.slack-btns {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}
.slack-btn {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  background: var(--bg);
}

/* Linear */
.lin-issue {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.lin-issue:first-child {
  border-top: none;
  padding-top: 2px;
}
.lin-status {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.6px solid #8b93b8;
  flex-shrink: 0;
  margin-top: 3px;
}
.lin-main {
  min-width: 0;
  flex: 1;
}
.lin-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lin-id {
  font-size: 10.5px;
  color: var(--text-subtle);
}
.lin-title {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.lin-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.lin-pill {
  font-size: 10.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
}
.lin-label {
  font-size: 10.5px;
  color: #5e6ad2;
  background: color-mix(in oklch, #5e6ad2 14%, transparent);
  border-radius: 5px;
  padding: 1px 7px;
}
.lin-asg {
  margin-left: auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
}
.lin-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--text-subtle);
}

/* Notion */
.nt-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.nt-block {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 4px 0;
  white-space: nowrap;
}
.nt-tg {
  color: var(--text-subtle);
  font-size: 10px;
  width: 10px;
}
.nt-c {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-subtle);
}
.nt-line {
  height: 7px;
  border-radius: 3px;
  background: var(--panel-2);
  margin: 5px 0 5px 18px;
}
.nt-line.short {
  width: 60%;
}
.nt-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--text-muted);
}

.integ-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.integ-more .lbl {
  font-size: 12.5px;
  color: var(--text-subtle);
  margin-right: 4px;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.step .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.step .num::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  display: grid;
  place-items: center;
}
.step h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.step p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 9px;
  line-height: 1.5;
}
.step .si {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--text-subtle);
}
.step .si svg {
  width: 20px;
  height: 20px;
}

/* ---------- Privacy / hybrid ---------- */
.privacy {
  background: linear-gradient(180deg, transparent, oklch(0.8 0.13 72 / 0.04));
}
.hybrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.hyb-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px;
}
.hyb-card.local {
  border-color: var(--amber-line);
  background: linear-gradient(160deg, var(--amber-soft), var(--panel) 60%);
}
.hyb-card .htop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hyb-card .htop .hi {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.hyb-card.local .hi {
  background: var(--amber);
  color: var(--bg-deep);
}
.hyb-card.cloud .hi {
  background: var(--panel-2);
  color: var(--info);
}
.hyb-card h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hyb-card .price {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.hyb-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}
.hyb-list li {
  list-style: none;
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-2);
}
.hyb-list svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
}
.hyb-card.local svg {
  color: var(--amber-ink);
}
.hyb-card.cloud svg {
  color: var(--info);
}

/* ---------- Pricing ---------- */
.prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.price {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price.featured {
  border-color: var(--amber-line);
  background: linear-gradient(170deg, var(--amber-soft), var(--panel) 55%);
}
.price .tag-pop {
  position: absolute;
  top: -11px;
  left: 24px;
  height: 22px;
  padding: 0 10px;
  background: var(--amber);
  color: var(--bg-deep);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.price h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.price .cost {
  margin: 14px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
}
.price .cost .n {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.price .cost .u {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.price .blurb {
  font-size: 13.5px;
  color: var(--text-muted);
  min-height: 38px;
  line-height: 1.45;
}
.price ul {
  list-style: none;
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-2);
}
.price li svg {
  width: 15px;
  height: 15px;
  color: var(--amber-ink);
  flex-shrink: 0;
  margin-top: 3px;
}
.price .btn {
  margin-top: auto;
  width: 100%;
}
.price-note {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-muted);
}
.price-note .mono {
  color: var(--amber-ink);
}

/* Two-way billing plans + rate reference */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.rate-strip {
  max-width: 800px;
  margin: 16px auto 0;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.rate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
}
.rate-head h4 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rate-head .mono {
  font-size: 11px;
  color: var(--text-subtle);
}
.rate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.rate-col {
  padding: 15px 18px;
}
.rate-col + .rate-col {
  border-left: 1px solid var(--hairline);
}
.rate-col .rname {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rate-col .rn {
  font-size: 14px;
  font-weight: 600;
}
.rate-col .rp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
}
.rate-col .rd {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.plan-foot {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.plan-foot .mono {
  color: var(--amber-ink);
}

/* ---------- Download ---------- */
.download {
  text-align: center;
}
.dl-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}
.dl-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.dl-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.dl-card.match {
  border-color: var(--amber-line);
  background: linear-gradient(160deg, var(--amber-soft), var(--panel) 60%);
}
.dl-card .dh {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.dl-card .dh svg {
  width: 24px;
  height: 24px;
  color: var(--text-2);
}
.dl-card.match .dh svg {
  color: var(--amber-ink);
}
.dl-card h4 {
  font-size: 16px;
  font-weight: 600;
}
.dl-card .files {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-subtle);
}
.dl-card .btn {
  margin-top: 14px;
}
.dl-foot {
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-subtle);
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.dl-foot .mono {
  color: var(--text-muted);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.qa {
  border-top: 1px solid var(--hairline);
}
.qa:last-child {
  border-bottom: 1px solid var(--hairline);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.015em;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary .pm {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.qa[open] summary .pm {
  transform: rotate(45deg);
  color: var(--amber-ink);
}
.qa .ans {
  padding: 0 0 20px;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 660px;
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
}
.cta-band .inner {
  background: linear-gradient(165deg, oklch(0.8 0.13 72 / 0.12), var(--panel) 70%);
  border: 1px solid var(--amber-line);
  border-radius: var(--r-xl);
  padding: 56px 40px;
}
.cta-band h2 {
  font-size: 34px;
  font-weight: 620;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cta-band p {
  color: var(--text-muted);
  margin: 14px auto 0;
  font-size: 16px;
  max-width: 440px;
}
.cta-band .hero-cta {
  justify-content: center;
  margin-top: 28px;
}

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--hairline);
  padding: 54px 0 40px;
}
footer.site .top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
footer.site .fcol h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
footer.site .fcol a {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 5px 0;
  transition: color 0.15s;
}
footer.site .fcol a:hover {
  color: var(--text);
}
footer.site .fdesc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 280px;
  line-height: 1.55;
}
footer.site .bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-subtle);
}
footer.site .bottom .mono {
  color: var(--text-muted);
}

/* ---------- Scroll reveal ---------- */
/* Transform-only entrance: content is always fully opaque, so it can never be
   hidden by a stalled animation. Hidden pre-state is gated behind `.js` on
   <html>; emergency reveal removes that gate via a plain style recalc. */
.reveal-up {
  transform: none;
}
html.js .reveal-up {
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal-up.in {
  transform: none;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1000px) {
  .hero h1 {
    font-size: 46px;
  }
  .feat,
  .hero-grid {
    gap: 40px;
  }
}

@media (max-width: 860px) {
  :root {
    --gut: 20px;
  }
  .nav {
    display: none;
  }
  .hero {
    padding: 108px 0 56px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero .lede {
    font-size: 16px;
  }
  .feat {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 22px 0;
  }
  .feat.flip .feat-visual {
    order: 0;
  }
  .feat-cards,
  .steps,
  .hybrid,
  .prices,
  .dl-cards,
  .integ-grid {
    grid-template-columns: 1fr;
  }
  .section-head h2 {
    font-size: 30px;
  }
  section {
    padding: 64px 0;
  }
  .trust .wrap {
    justify-content: flex-start;
    gap: 14px 24px;
  }
  footer.site .top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .cta-band .inner {
    padding: 40px 24px;
  }
  .cta-band h2 {
    font-size: 27px;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 33px;
  }
  .header-cta .btn-ghost {
    display: none;
  }
  .hero-cta {
    gap: 10px;
  }
  .hero-cta .btn {
    flex: 1;
  }
  footer.site .top {
    grid-template-columns: 1fr;
  }
  .price .cost .n {
    font-size: 30px;
  }
  .section-head h2 {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal-up,
  .ss-out .reveal,
  html.js .reveal-up,
  html.js .ss-out .reveal {
    transform: none !important;
  }
}

/* Focus states (a11y) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}