/* ═══════════════════════════════════════════════════════════════════════
   KARGOO MARKETING SITE — CSS v5 (Lovable visual design on v1 HTML)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────────────── */
:root {
  /* Lovable warm palette (oklch) */
  --bg:        oklch(0.985 0.004 90);
  --card:      oklch(1     0     0);
  --surface:   oklch(0.965 0.006 90);
  --surface-2: oklch(0.93  0.008 90);
  --fg:        oklch(0.18  0.012 250);
  --muted:     oklch(0.48  0.012 250);
  --faint:     oklch(0.65  0.008 250);
  --border:    oklch(0.18  0.012 250 / 10%);
  --coral:     oklch(0.62  0.19  28);
  --teal:      oklch(0.55  0.10  200);
  --gold:      oklch(0.72  0.13  75);

  /* Backward-compatible aliases used in original HTML inline styles / JS */
  --text:           var(--fg);
  --text-muted:     var(--muted);
  --text-faint:     var(--faint);
  --surface-alt:    var(--surface-2);
  --canvas:         var(--surface);
  --bg-warm:        var(--bg);
  --border-strong:  oklch(0.18 0.012 250 / 18%);
  --aurora-coral:   var(--coral);
  --aurora-teal:    var(--teal);
  --aurora-peach:   oklch(0.78 0.12 50);
  --aurora-violet:  oklch(0.60 0.14 290);
  --accent:         oklch(0.55 0.10 200); /* teal — also controlled by JS tweaks */
  --accent-soft:    oklch(0.55 0.10 200 / 12%);
  --record:         #E5443B;
  --record-soft:    oklch(0.96 0.04 28);
  --ok:             #4A7C59;
  --warn:           #B5803A;

  /* Fonts */
  --font:        "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, ui-serif, serif;
  --font-mono:   "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --container: 80rem;
  --px: clamp(1.25rem, 4vw, 2rem);
}

/* ── 2. Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: oklch(0.62 0.19 28 / 0.18); }

/* ── 3. Typography ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
em, i { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.5em;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-style: normal;
  line-height: 1.5;
}

/* ── 4. Layout utilities ──────────────────────────────────────────────── */
.kg-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}
.kg-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kg-section { padding: 100px 0; }
.kg-section.tight { padding: 72px 0; }
.kg-mono { font-family: var(--font-mono); }

.kg-h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.kg-h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.kg-h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.025em;
}
.kg-lede {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: var(--muted);
  line-height: 1.7;
}

/* ── 5. Buttons ───────────────────────────────────────────────────────── */
.kg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  padding: 0.875rem 1.625rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  transition: opacity 0.15s, transform 0.1s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.kg-btn-primary {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 16px 48px -12px oklch(0.62 0.19 28 / 0.22);
}
.kg-btn-primary:hover { opacity: 0.87; color: var(--bg); }
.kg-btn-primary:active { transform: scale(0.98); }
.kg-btn-secondary {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
}
.kg-btn-secondary:hover { background: var(--surface-2); color: var(--fg); }
.kg-btn-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── 6. Navigation ────────────────────────────────────────────────────── */
.kg-nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.985 0.004 90 / 0.80);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.kg-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.kg-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--fg);
}
.kg-brand:hover { color: var(--fg); }
.kg-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  overflow: hidden;
  color: var(--fg);
  flex-shrink: 0;
}
.kg-mark svg { width: 28px; height: 28px; display: block; }
.kg-wordmark { letter-spacing: -0.025em; font-family: var(--font); }
.kg-o { color: var(--coral); }
.kg-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin-left: auto;
}
.kg-nav-links a { transition: color 0.15s; }
.kg-nav-links a:hover { color: var(--fg); }
.kg-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg) !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s;
}
.kg-nav-cta:hover { opacity: 0.85; }
@media (max-width: 767px) {
  .kg-nav-links a:not(.kg-nav-cta) { display: none; }
}

/* ── 7. Hero ──────────────────────────────────────────────────────────── */
.kg-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4.5rem 0 0;
}

/* Aurora blobs — soft colored glows in hero background */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.aurora .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
}
.aurora .b1 {
  width: 56vw; height: 56vw;
  top: -15%; left: 20%;
  background: oklch(0.62 0.19 28 / 0.13);
  animation: blobDrift1 18s ease-in-out infinite;
}
.aurora .b2 {
  width: 40vw; height: 40vw;
  top: 5%; right: 10%;
  background: oklch(0.55 0.10 200 / 0.12);
  animation: blobDrift2 22s ease-in-out infinite;
}
.aurora .b3 {
  width: 32vw; height: 32vw;
  bottom: 0; left: 5%;
  background: oklch(0.72 0.13 75 / 0.10);
  animation: blobDrift3 26s ease-in-out infinite;
}
.aurora .b4 {
  width: 28vw; height: 28vw;
  top: 30%; left: 40%;
  background: oklch(0.60 0.14 290 / 0.08);
}
@keyframes blobDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 20px); } }
@keyframes blobDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px, -25px); } }
@keyframes blobDrift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(15px, -15px); } }

/* Dot-grid texture over hero */
.kg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--fg) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}
.kg-hero > * { position: relative; z-index: 1; }

/* Mac badge */
.mac-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: oklch(0.965 0.006 90 / 0.7);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.mac-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.mac-badge .sparkle { color: var(--gold); }

/* H1 stack layout */
.kg-h1-stack {
  max-width: 62rem;
  margin: 0 auto 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.kg-h1-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3em; }
.kg-grad { background: linear-gradient(135deg, var(--coral), oklch(0.70 0.16 40)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kg-grad-2 { background: linear-gradient(135deg, var(--teal), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kg-h1-pop { display: inline-block; }
.kg-h1-amp {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0.75rem auto;
  width: min(32rem, 80%);
}
.kg-amp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.kg-amp-line { flex: 1; height: 1px; background: var(--border); }

.kg-hero .kg-lede {
  margin: 0 auto 1.75rem;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}

.kg-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

/* Hero art / fan layout */
.kg-hero-art { position: relative; }
.hero-fan {
  position: relative;
  padding-top: 2rem;
}

/* Floating chips */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: oklch(1 0 0 / 0.88);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px -8px oklch(0.18 0.012 250 / 0.15);
  backdrop-filter: blur(12px);
  font-size: 12.5px;
  z-index: 10;
  white-space: nowrap;
  animation: chipFloat 6s ease-in-out infinite;
}
.hero-chip.menubar {
  top: 10%; left: -2%;
  animation-delay: 0s;
}
.hero-chip.notif {
  top: 38%; right: -4%;
  animation-delay: -2s;
}
.hero-chip.dict-bubble {
  bottom: 22%; left: -3%;
  gap: 8px;
  padding: 10px 18px;
  animation-delay: -4s;
}
.hero-chip.dict-bubble .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: kgPulse 1.4s ease-in-out infinite;
}
.hero-chip .icon-circ {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-chip .icon-circ.red { background: var(--record-soft); color: var(--record); }
.hero-chip .icon-circ.teal { background: var(--accent-soft); color: var(--accent); }
.hero-chip .who { font-weight: 600; color: var(--fg); font-size: 12.5px; }
.hero-chip .said { color: var(--muted); font-size: 11.5px; }
.hero-chip .ts { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-left: auto; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Hero device */
.hero-device { max-width: 1080px; margin: 0 auto; }

/* ── 8. Mac window ────────────────────────────────────────────────────── */
.mac-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 28px 72px -20px oklch(0.18 0.012 250 / 0.18),
              0 6px 18px -6px oklch(0.18 0.012 250 / 0.08);
  overflow: hidden;
}
.mac-titlebar {
  height: 30px;
  display: flex; align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.mac-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.mac-dot.r { background: #ec6a5e; }
.mac-dot.y { background: #f5be4f; }
.mac-dot.g { background: #62c554; }
.mac-titlebar-title {
  margin: 0 auto;
  font-size: 12px; color: var(--muted);
  font-weight: 500;
  padding-right: 60px;
}
.hd-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 460px;
}
.hd-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.hd-search {
  height: 28px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; padding: 0 10px;
  font-size: 12px; color: var(--faint);
}
.hd-record {
  margin-top: 6px;
  height: 36px;
  background: var(--fg); color: var(--bg);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 13px; font-weight: 500;
}
.hd-record .red {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--record);
  box-shadow: 0 0 0 3px oklch(0.62 0.19 28 / 0.2);
  animation: kgPulse 1.4s ease-in-out infinite;
}
.hd-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.hd-row {
  padding: 10px 8px;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.hd-row:last-child { border-bottom: 0; }
.hd-row.sel { background: var(--accent-soft); }
.hd-row .t { font-size: 12.5px; font-weight: 500; color: var(--fg); }
.hd-row .m { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

.hd-relaunch {
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg);
}
.hd-relaunch-eyebrow { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.hd-relaunch-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.hd-relaunch-record {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0;
}
.hd-rec-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid oklch(0.62 0.19 28 / 0.2);
  animation: kgRing 2s ease-out infinite;
}
.hd-rec-button {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--record);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px oklch(0.62 0.19 28 / 0.4);
}
.hd-rec-inner {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
}
@keyframes kgRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hd-relaunch-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.hd-kbd {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11px; font-family: var(--font-mono);
  color: var(--fg);
}
.hd-relaunch-sub { font-size: 12px; color: var(--faint); }
.hd-relaunch-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 4px;
}
.hd-rc {
  padding: 12px 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.hd-rc-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 4px;
}
.hd-rc-ico svg { width: 15px; height: 15px; }
.hd-rc-t { font-size: 11.5px; font-weight: 600; color: var(--fg); }
.hd-rc-d { font-size: 10.5px; color: var(--muted); }
.hd-relaunch-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--faint);
  font-family: var(--font-mono);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hd-relaunch-foot svg { flex-shrink: 0; }

/* ── 9. Marquee ───────────────────────────────────────────────────────── */
.kg-marquee {
  background: var(--fg);
  color: oklch(1 0 0 / 0.95);
  border-top: 1px solid oklch(1 0 0 / 0.06);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
  padding: 20px 0;
  overflow: hidden;
}
.kg-marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: kgMarquee 38s linear infinite;
  width: max-content;
}
.kg-marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em;
}
.kg-marquee-item .dot { color: var(--coral); }
.kg-marquee-item .rec {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--record);
  box-shadow: 0 0 0 3px rgba(229, 68, 59, 0.25);
}
@keyframes kgMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 10. Personas ─────────────────────────────────────────────────────── */
.kg-personas { padding: 72px 0; }
.personas-head {
  text-align: center;
  margin-bottom: 3rem;
}
.personas-head .kg-eyebrow { margin-bottom: 1rem; }
.personas-head .kg-h2 { margin: 0; }
.personas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.persona-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px oklch(0.18 0.012 250 / 0.12);
}
.persona-card.featured {
  background: var(--fg);
  color: var(--bg);
  border-color: transparent;
}
.persona-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.persona-icon.p-pm     { background: var(--accent-soft); color: var(--accent); }
.persona-icon.p-creator { background: oklch(0.62 0.19 28 / 0.1); color: var(--coral); }
.persona-icon.p-thinker { background: oklch(0.72 0.13 75 / 0.12); color: var(--gold); }
.persona-card.featured .persona-icon { background: oklch(1 0 0 / 0.12); color: var(--bg); }
.persona-icon svg { width: 22px; height: 22px; }
.persona-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.persona-card.featured .persona-tag { color: oklch(1 0 0 / 0.6); }
.persona-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

@media (max-width: 767px) {
  .personas-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .personas-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-card:last-child { grid-column: span 2; }
}

/* ── 11. Skip the playback ────────────────────────────────────────────── */
.kg-skip { padding: 72px 0; }
.skip-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.skip-bg {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; border-radius: inherit;
}
.skip-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.skip-blob.b1 {
  width: 40%; height: 40%;
  top: -15%; left: -10%;
  background: oklch(0.62 0.19 28 / 0.08);
}
.skip-blob.b2 {
  width: 30%; height: 30%;
  bottom: -10%; right: -5%;
  background: oklch(0.55 0.10 200 / 0.08);
}
.skip-left .kg-eyebrow { margin-bottom: 1rem; }
.skip-left .kg-h2 { margin: 0; }
.skip-compare { display: flex; flex-direction: column; gap: 1.25rem; }
.skip-row { display: flex; flex-direction: column; gap: 0.5rem; }
.skip-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
.skip-pill {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  font-family: var(--font-mono);
}
.skip-pill.before { background: oklch(0.62 0.19 28 / 0.1); color: var(--coral); }
.skip-pill.after  { background: oklch(0.55 0.10 200 / 0.1); color: var(--accent); }
.skip-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.skip-bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.skip-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 1s ease;
}
.skip-bar-fill.before { background: linear-gradient(90deg, var(--coral), oklch(0.70 0.16 40)); }
.skip-bar-fill.after  { background: linear-gradient(90deg, var(--accent), var(--teal)); }
.skip-search {
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: 0.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.skip-search svg { flex-shrink: 0; color: var(--muted); width: 14px; height: 14px; }
.skip-q { color: var(--fg); font-weight: 500; }
.skip-hits { color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; margin-left: auto; }

@media (max-width: 767px) {
  .skip-card { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
}

/* ── 12. Feature sections ─────────────────────────────────────────────── */
.kg-section#features { padding-top: 0; padding-bottom: 4rem; }
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 4rem 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
}
.feature:first-child { border-top: none; }
.feature.reverse .feat-text { order: 2; }
.feature.reverse .feat-art  { order: 1; }
.feat-num {
  font-family: var(--font-accent);
  font-size: 4.5rem;
  font-weight: 400;
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.75rem;
  color: currentColor;
}
.feat-text .kg-eyebrow { margin-bottom: 0.875rem; }
.feat-text .kg-h2 { margin-bottom: 1rem; }
#f-focus .feat-text .kg-h2 { font-family: var(--font-accent); font-weight: 400; }
#f-focus .feature { grid-template-columns: 3fr 2fr; gap: 2rem; }
#f-focus .feat-text { max-width: none; }
#f-focus .feat-text .kg-h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.05; }
.feat-body {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.feat-text { max-width: 480px; }
.feat-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.feat-list li {
  display: flex; gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--fg);
  line-height: 1.55;
}
.feat-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image:
    linear-gradient(45deg, transparent 38%, var(--accent) 38% 50%, transparent 50%),
    linear-gradient(-45deg, transparent 50%, var(--accent) 50% 62%, transparent 62%);
  background-size: 10px 10px, 10px 10px;
  background-position: 5px 6px, 6px 5px;
  background-repeat: no-repeat;
}
.feat-art { position: relative; }

/* Feature tints */
.tint-dict { background: linear-gradient(160deg, transparent, oklch(0.55 0.10 200 / 0.05)); }
.tint-rec  { background: linear-gradient(160deg, transparent, oklch(0.72 0.13 75 / 0.06)); }
.tint-spk  { background: linear-gradient(160deg, transparent, oklch(0.60 0.14 290 / 0.05)); }
.tint-priv { background: linear-gradient(160deg, transparent, oklch(0.50 0.10 165 / 0.05)); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  .feature.reverse .feat-text { order: 0; }
  .feature.reverse .feat-art  { order: 0; }
  .feat-text { max-width: 100%; }
}

/* ── 13. Feature 01 — Dictation stats + app grid ─────────────────────── */
.feat-stats {
  display: flex; gap: 2rem;
  margin-bottom: 0;
}
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat .n {
  font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.stat .l { font-size: 0.75rem; color: var(--muted); font-family: var(--font-mono); }

.app-grid {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.5rem;
}
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 64px;
}
.app-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: #fff;
}
.app-mark.word    { background: #2b579a; }
.app-mark.gmail   { background: #ea4335; }
.app-mark.outlook { background: #0078d4; }
.app-mark.confluence { background: #1868db; }
.app-mark.whatsapp { background: #25d366; }
.app-mark.sms     { background: #34c759; }
.app-mark.zoom    { background: #2d8cff; }
.app-mark.teams   { background: #464eb8; }
.app-mark.slack   { background: #4a154b; }
.app-mark.meet    { background: #00832d; }
.app-mark.facetime { background: #34c759; }
.app-mark.more    { background: var(--surface-2); color: var(--muted); font-size: 18px; }
.app-label { font-size: 10.5px; color: var(--muted); font-weight: 500; }

/* Dictation art card */
.feat-dict {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.25rem 1.5rem 3.25rem 1.5rem;
  position: relative;
}
/* f-type h2 mixed font: bold sans + italic serif coral */
/* Feature h2s — hero black + hero red style (Instrument Serif throughout) */
#f-type .kg-h2, #f-jot .kg-h2, #f-private .kg-h2, .skip-h2, .faq-h2 {
  font-family: var(--font-accent);
  font-weight: 400;
}
#f-type .kg-h2 em, #f-jot .kg-h2 em, #f-private .kg-h2 em, .skip-h2 em, .faq-h2 em {
  color: var(--coral);
  font-style: italic;
}
.feat-dict-shortcut {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 13px; color: var(--muted);
}
.feat-dict-shortcut kbd { font-size: 0.8rem; }
.feat-dict-textfield {
  flex: 1;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
}
.feat-dict-to {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 0.5rem;
}
.typed {
  display: inline-block; overflow: hidden;
  white-space: nowrap; vertical-align: bottom;
  color: var(--coral);
  animation: kgType 6s steps(60, end) infinite;
  max-width: 0;
}
.caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--fg);
  vertical-align: middle;
  margin-left: 1px;
  animation: kgBlink 1s steps(1) infinite;
}
.feat-dict-bubble {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px -6px oklch(0.55 0.10 200 / 0.45);
}
.feat-dict-bubble svg { width: 22px; height: 22px; }
.dict-pill {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--fg);
}
.dict-pill.muted { color: var(--muted); }

/* ── 14. Feature 02 — Callout + flow strip ────────────────────────────── */
.callout {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: oklch(0.55 0.10 200 / 0.07);
  border: 1px solid oklch(0.55 0.10 200 / 0.18);
  border-radius: var(--r-lg);
  margin-bottom: 1.5rem;
}
.callout-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.callout-ico svg { width: 16px; height: 16px; }
.callout-t { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 0.25rem; }
.callout-d { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Flow strip (Recording → Transcribing → Summary) */
.flow-strip {
  display: flex; align-items: stretch; gap: 0.625rem;
}
.flow-mini {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  overflow: hidden;
}
.flow-arrow {
  display: flex; align-items: center;
  font-size: 18px; color: var(--muted);
  flex-shrink: 0;
  padding-top: 1rem;
}
.fm-head {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.fm-head.teal { color: var(--accent); }
.fm-head.ok   { color: var(--ok); }
.rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--record);
  animation: kgPulse 1.4s ease-in-out infinite;
  display: inline-block; flex-shrink: 0;
}
.fm-time {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 600;
  color: var(--fg); letter-spacing: -0.02em;
}
.fm-eq {
  display: flex; align-items: center; gap: 2px;
  height: 28px;
}
.fm-eq > span {
  width: 3px; background: var(--accent); border-radius: 999px;
  animation: kgEq 0.9s ease-in-out infinite;
}
.fm-eq > span:nth-child(1) { animation-delay: 0.0s; }
.fm-eq > span:nth-child(2) { animation-delay: 0.1s; }
.fm-eq > span:nth-child(3) { animation-delay: 0.2s; }
.fm-eq > span:nth-child(4) { animation-delay: 0.3s; }
.fm-eq > span:nth-child(5) { animation-delay: 0.4s; }
.fm-eq > span:nth-child(6) { animation-delay: 0.3s; }
.fm-eq > span:nth-child(7) { animation-delay: 0.2s; }
.fm-eq > span:nth-child(8) { animation-delay: 0.1s; }
.fm-eq > span:nth-child(9) { animation-delay: 0.0s; }
.fm-bar {
  height: 6px; border-radius: 999px;
  background: var(--surface-2);
  position: relative; overflow: hidden;
}
.fm-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  border-radius: inherit;
  animation: kgShimmer 1.8s ease-in-out infinite;
}
.fm-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, oklch(1 0 0 / 0.4) 50%, transparent 100%);
  animation: kgShimmer 1.8s ease-in-out infinite;
}
.fm-tldr { font-size: 12px; font-weight: 600; color: var(--fg); }
.fm-bullet {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: var(--muted);
}
.fm-bullet span {
  flex-shrink: 0; margin-top: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}

/* ── 15. Feature 03 — Jot art ─────────────────────────────────────────── */
.feat-jot {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.jot-head { display: flex; flex-direction: column; gap: 3px; }
.jot-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.jot-meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.jot-rail {
  position: relative;
  height: 20px;
  display: flex; align-items: center;
}
.jot-bar {
  width: 100%; height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
}
.jot-marker {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--border);
  top: 50%; translate: -50% -50%;
}
.jot-marker.active {
  background: var(--coral);
  border-color: var(--coral);
  box-shadow: 0 0 0 3px oklch(0.62 0.19 28 / 0.2);
}
.jot-list { display: flex; flex-direction: column; gap: 0.5rem; }
.jot-row {
  display: flex; align-items: flex-start; gap: 0.875rem;
  font-size: 13px;
}
.jot-row.active { color: var(--fg); }
.jot-row .ts {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--muted); flex-shrink: 0; margin-top: 1px;
}
.jot-row .note { color: var(--fg); }
.jot-row .note.typing { color: var(--accent); }
.jot-shortcut {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 12.5px; color: var(--muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.jot-shortcut kbd { font-size: 0.85rem; }
.jot-shortcut span { font-size: 11.5px; }

/* ── 16. Feature 04 — Privacy art ────────────────────────────────────── */
.feat-priv {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.feat-priv-lock {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: oklch(0.50 0.10 165 / 0.1);
  color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.feat-priv-lock svg { width: 24px; height: 24px; }
.feat-priv h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.375rem; }
.feat-priv p  { font-size: 14px; color: var(--muted); line-height: 1.55; }
.feat-priv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.feat-priv-cell {
  padding: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.feat-priv-cell strong {
  display: block;
  font-weight: 600; font-size: 11px;
  color: var(--ok);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.feat-priv-cell.no strong { color: var(--coral); }

/* ── 17. Pricing ──────────────────────────────────────────────────────── */
.kg-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 3rem auto 0;
}
.kg-plan {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl, 12px);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.kg-plan.pro {
  background: linear-gradient(135deg, oklch(0.62 0.19 28 / 0.08) 0%, var(--card) 100%);
  color: var(--fg);
  border-color: oklch(0.62 0.19 28 / 0.40);
  position: relative;
  box-shadow: 0 20px 60px -20px oklch(0.62 0.19 28 / 0.10);
}
.kg-plan-badge {
  position: absolute;
  top: -12px; left: 50%; translate: -50% 0;
  background: var(--coral);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kg-plan-name {
  font-size: 1.125rem; font-weight: 700;
  letter-spacing: -0.02em;
}
.kg-plan-price {
  display: flex; align-items: baseline; gap: 0.375rem;
}
.kg-plan-price .num {
  font-size: 3rem; font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.kg-plan-price .per {
  font-size: 0.875rem;
  color: var(--muted);
}
.kg-plan.pro .kg-plan-price .per { color: oklch(1 0 0 / 0.55); }

.kg-plan-toggle {
  display: flex; gap: 0.375rem;
  background: oklch(1 0 0 / 0.1);
  border-radius: var(--r-pill);
  padding: 0.25rem;
  width: fit-content;
}
.kg-toggle-btn {
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 500;
  color: oklch(1 0 0 / 0.6);
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center; gap: 0.375rem;
}
.kg-toggle-btn.active { background: oklch(1 0 0 / 0.15); color: var(--bg); }
.kg-badge-save {
  display: inline-flex;
  padding: 0.1em 0.5em;
  background: var(--gold);
  color: oklch(0.18 0.012 250);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
}
.kg-plan-prices { min-height: 4rem; }
.kg-plan-tagline {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.kg-plan.pro .kg-plan-tagline { color: oklch(1 0 0 / 0.5); }
.kg-plan ul {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding: 0; list-style: none;
}
.kg-plan ul li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--fg);
  line-height: 1.5;
}
.kg-plan.pro ul li { color: oklch(1 0 0 / 0.85); }
.kg-plan ul li::before {
  content: "✓";
  flex-shrink: 0;
  font-weight: 700;
  color: var(--ok);
  margin-top: 1px;
}
.kg-plan.pro ul li::before { color: var(--gold); }
.kg-plan-cta {
  width: 100%; justify-content: center;
  margin-top: 0.5rem;
}
.kg-plan.pro .kg-plan-cta {
  background: var(--bg); color: var(--fg);
}
.kg-plan.pro .kg-plan-cta:hover { opacity: 0.9; }
.kg-plan-note {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}
.kg-plan.pro .kg-plan-note { color: oklch(1 0 0 / 0.4); }

@media (max-width: 640px) {
  .kg-pricing { grid-template-columns: 1fr; }
}

/* Coupon + email step */
.kg-coupon-toggle {
  font-size: 0.8125rem; color: var(--muted);
  text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0;
}
.kg-plan.pro .kg-coupon-toggle { color: oklch(1 0 0 / 0.45); }
.kg-coupon-form {
  display: flex; gap: 0.5rem;
  margin-top: 0.375rem;
}
.kg-coupon-input {
  flex: 1; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.875rem; background: var(--surface);
  font-family: var(--font);
  color: var(--fg);
}
.kg-plan.pro .kg-coupon-input { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.2); color: var(--bg); }
.kg-coupon-error { font-size: 0.8125rem; color: var(--record); margin-top: 0.25rem; }
.kg-coupon-badge {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: oklch(0.55 0.10 200 / 0.12);
  border: 1px solid oklch(0.55 0.10 200 / 0.2);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
}
.kg-plan.pro .kg-coupon-badge { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.2); }
.kg-coupon-badge-text { font-weight: 500; color: var(--accent); }
.kg-plan.pro .kg-coupon-badge-text { color: var(--bg); }
.kg-coupon-remove {
  background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--muted); padding: 0;
}
.kg-email-step { display: flex; flex-direction: column; gap: 0.625rem; }
.kg-email-step-label { font-size: 0.875rem; color: var(--muted); }
.kg-plan.pro .kg-email-step-label { color: oklch(1 0 0 / 0.5); }
.kg-email-row { display: flex; gap: 0.5rem; }
.kg-email-input {
  flex: 1; padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.875rem; background: var(--surface);
  font-family: var(--font);
  color: var(--fg);
}
.kg-plan.pro .kg-email-input { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.2); color: var(--bg); }
.kg-email-error { font-size: 0.8125rem; color: var(--record); }
.kg-email-hint { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.kg-plan.pro .kg-email-hint { color: oklch(1 0 0 / 0.4); }

/* ── 18. FAQ ──────────────────────────────────────────────────────────── */
.kg-faq {
  max-width: 52rem;
  margin: 0 auto;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.kg-faq details {
  border-top: 1px solid var(--border);
}
.kg-faq details:first-child { border-top: none; }
.kg-faq summary {
  padding: 1.25rem 1.5rem;
  font-size: 1rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  gap: 1rem;
  color: var(--fg);
  transition: background 0.15s;
}
.kg-faq summary::-webkit-details-marker { display: none; }
.kg-faq summary::after {
  content: "+";
  font-size: 1.25rem; font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.kg-faq details[open] summary::after { content: "−"; }
.kg-faq summary:hover { background: var(--surface); }
.kg-faq .faq-body,
.kg-faq p {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.65;
}
.kg-faq p a { color: var(--accent); text-decoration: underline; }
.kg-faq p .kg-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--fg);
}

/* ── 19. Footer ───────────────────────────────────────────────────────── */
.kg-footer {
  background: var(--fg);
  color: var(--bg);
  padding: 4rem 0 2rem;
  margin-top: 2rem;
}
.kg-footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.kg-footer .kg-brand { color: var(--bg); margin-bottom: 0.75rem; }
.kg-footer .kg-mark { color: var(--bg); }
.kg-footer .kg-wordmark { color: var(--bg); }
.kg-footer .kg-o { color: oklch(0.62 0.19 28); }
.kg-footer-blurb {
  font-size: 0.875rem;
  color: oklch(1 0 0 / 0.5);
  line-height: 1.6;
  max-width: 22rem;
}
.kg-footer-col h5 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
  color: var(--bg);
}
.kg-footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.kg-footer-col ul li a {
  font-size: 0.875rem;
  color: oklch(1 0 0 / 0.5);
  transition: color 0.15s;
}
.kg-footer-col ul li a:hover { color: var(--bg); }
.kg-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.08);
  font-size: 0.8125rem;
  color: oklch(1 0 0 / 0.35);
}

@media (max-width: 1023px) {
  .kg-footer-cols { grid-template-columns: 1fr 1fr; }
  .kg-footer-cols > :first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .kg-footer-cols { grid-template-columns: 1fr; }
  .kg-footer-cols > :first-child { grid-column: span 1; }
}

/* ── 20. Tweaks panel ─────────────────────────────────────────────────── */
.tw-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 320px;
  background: oklch(1 0 0 / 0.98);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px -16px oklch(0.18 0.012 250 / 0.28), 0 4px 16px -8px oklch(0.18 0.012 250 / 0.18);
  font-family: var(--font);
  color: var(--fg);
  z-index: 9999;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
.tw-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.tw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tw-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.tw-close {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.tw-close:hover { background: var(--surface-2); color: var(--fg); }
.tw-body {
  padding: 14px 16px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.tw-section { display: flex; flex-direction: column; gap: 8px; }
.tw-section-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.tw-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12.5px; color: var(--fg);
}
.tw-row.col { flex-direction: column; align-items: stretch; gap: 6px; }
.tw-row.toggle { justify-content: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.tw-row select,
.tw-row input[type="number"],
.tw-row input[type="text"] {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px;
  font-family: inherit; font-size: 12.5px; color: var(--fg); min-width: 0;
}
.tw-row input[type="number"] { width: 80px; text-align: right; }
.tw-row.col input[type="text"] { width: 100%; }
.tw-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.tw-swatches { display: flex; gap: 8px; }
.tw-swatches button {
  width: 28px; height: 28px; border: 2px solid transparent;
  border-radius: 8px; cursor: pointer; padding: 0;
  transition: transform 120ms ease, border-color 120ms ease;
}
.tw-swatches button:hover { transform: scale(1.05); }
.tw-swatches button.on { border-color: var(--fg); box-shadow: inset 0 0 0 2px #fff; }

/* ── 21. Animations ───────────────────────────────────────────────────── */
@keyframes kgPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
@keyframes kgBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes kgType {
  0%   { max-width: 0; }
  35%  { max-width: 340px; }
  70%  { max-width: 340px; }
  100% { max-width: 0; }
}
@keyframes kgEq {
  0%, 100% { height: 25%; }
  50% { height: 95%; }
}
@keyframes kgShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 22. Misc utility ─────────────────────────────────────────────────── */
.kg-plan-prices { position: relative; }
[data-tweak="pro-yearly"] { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; }
[data-tweak="pro-yearly-per"] { font-size: 0.875rem; color: oklch(1 0 0 / 0.55); }
[data-tweak="trial-label"] { font-size: 0.875rem; color: var(--muted); }

/* kg-section center header */
.kg-section > div[style*="text-align: center"],
.kg-section > div[style*="text-align:center"] {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.kg-section > div[style*="text-align: center"] .kg-eyebrow { margin-bottom: 1rem; }
.kg-section > div[style*="text-align: center"] .kg-h2 { margin-bottom: 0; }

/* ── 23. Hero — Lovable redesign ─────────────────────────────────────────── */

/* H1 em → coral + serif italic */
.kg-h1 em { color: var(--coral); }

/* Subtitle line below H1 */
.kg-h1-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted);
  margin: 0.5rem auto 1.5rem;
  letter-spacing: -0.01em;
  font-style: normal;
  font-weight: 400;
}
.kg-h1-sub em { color: var(--fg); }

/* Soft coral radial glow behind hero */
.hero-glow {
  position: absolute;
  top: -5%;
  left: 50%;
  translate: -50% 0;
  width: 90vw; height: 65vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    oklch(0.62 0.19 28 / 0.10) 0%,
    oklch(0.72 0.13 75 / 0.06) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Center text area in hero */
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Flow hero visual (mic → paths → notes) */
.kg-flow-hero {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--px) 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: 280px;
  z-index: 1;
}

/* ── Mic circle ── */
.flow-mic-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  width: 110px;
  z-index: 2;
}

.flow-mic-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid oklch(0.62 0.19 28 / 0.18);
  top: 36px; left: 50%;
  translate: -50% -50%;
  animation: flowRingPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.flow-mic-ring.r1 { width: 100px; height: 100px; animation-delay: 0s; }
.flow-mic-ring.r2 { width: 136px; height: 136px; animation-delay: 0.85s; border-color: oklch(0.62 0.19 28 / 0.09); }

@keyframes flowRingPulse {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.flow-mic-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px -6px oklch(0.18 0.012 250 / 0.32),
              0 0 0 4px oklch(0.62 0.19 28 / 0.10);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.flow-mic-circle svg { width: 28px; height: 28px; }

.flow-mic-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  box-shadow: 0 2px 8px oklch(0.18 0.012 250 / 0.06);
  position: relative; z-index: 1;
}
.flow-mic-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--record);
  animation: kgPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Floating word bubbles — serif italic positioned (reference style) ── */
.flow-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.flow-word {
  position: absolute;
  font-family: var(--font-accent);
  font-style: italic;
  color: oklch(0.18 0.012 250 / 0.85);
  white-space: nowrap;
  opacity: 0;
  animation: floatWord 5.5s ease-out both;
}
.flow-word.fw1  { top: 18%; left: 20%; font-size: 1.5rem;   animation-delay: 0s;    --end-transform: translate(60%, -20%); }
.flow-word.fw2  { top: 55%; left: 27%; font-size: 1.15rem;  animation-delay: 0.6s;  --end-transform: translate(113%, 37%); }
.flow-word.fw3  { top: 32%; left: 34%; font-size: 1.15rem;  animation-delay: 1.2s;  --end-transform: translate(166%, -54%); }
.flow-word.fw4  { top: 69%; left: 41%; font-size: 1.5rem;   animation-delay: 1.8s;  --end-transform: translate(99%, 21%); }
.flow-word.fw5  { top: 46%; left: 48%; font-size: 1.15rem;  animation-delay: 2.4s;  --end-transform: translate(152%, -38%); }
.flow-word.fw6  { top: 23%; left: 25%; font-size: 1.15rem;  animation-delay: 3.0s;  --end-transform: translate(85%, 55%); }
.flow-word.fw7  { top: 60%; left: 32%; font-size: 1.5rem;   animation-delay: 3.6s;  --end-transform: translate(138%, -22%); }
.flow-word.fw8  { top: 37%; left: 39%; font-size: 1.15rem;  animation-delay: 4.2s;  --end-transform: translate(71%, 39%); }
.flow-word.fw9  { top: 74%; left: 46%; font-size: 1.15rem;  animation-delay: 4.8s;  --end-transform: translate(124%, -56%); }
.flow-word.fw10 { top: 51%; left: 23%; font-size: 1.5rem;   animation-delay: 0.4s;  --end-transform: translate(177%, 23%); }

@keyframes floatWord {
  0%   { opacity: 0; transform: translate(0) scale(0.85); }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { opacity: 0; transform: var(--end-transform, translate(30px, -15px)) scale(1); }
}

/* ── SVG paths ── */
.flow-paths-svg {
  flex: 1;
  min-width: 0;
  height: 220px;
  overflow: visible;
  z-index: 1;
}
.flow-path {
  stroke-dasharray: 8 14;
  animation: flowDash 14s linear infinite;
}
@keyframes flowDash {
  to { stroke-dashoffset: -1200; }
}

/* ── Notes window ── */
.flow-notes-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  width: 230px;
}
.flow-notes-shadow {
  position: absolute;
  inset: 14px -8px -14px 8px;
  background: oklch(0.18 0.012 250 / 0.07);
  border-radius: var(--r-lg);
  filter: blur(18px);
  z-index: -1;
}
.flow-notes-window {
  background: var(--card);
  border: 1px solid oklch(0.18 0.012 250 / 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px -10px oklch(0.18 0.012 250 / 0.14);
}
.flow-notes-titlebar {
  height: 26px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.flow-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.flow-dot.r { background: #ec6a5e; }
.flow-dot.y { background: #f5be4f; }
.flow-dot.g { background: #62c554; }
.flow-notes-title {
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
  font-family: var(--font-mono);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  flex: 1;
}
.flow-notes-body {
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.flow-notes-to {
  font-size: 11px; color: var(--faint); font-family: var(--font-mono);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.flow-notes-body > p {
  font-size: 13px; color: var(--fg); line-height: 1.6; margin: 0;
}

@media (max-width: 767px) {
  .kg-flow-hero { display: none; }
  .kg-hero { padding-bottom: 3rem; }
}

/* ── 24. Eyebrow row ──────────────────────────────────────────────────────── */
.kg-eyebrow-row {
  display: flex; align-items: center; gap: 0.625rem;
  margin-bottom: 1rem;
}
.eyebrow-dash {
  display: block;
  width: 22px; height: 2px;
  border-radius: 999px;
  background: var(--coral);
  flex-shrink: 0;
}

/* ── 25. People section ───────────────────────────────────────────────────── */
.kg-people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 4.5rem;
}
.kg-people-text .kg-lede { text-align: left; margin-left: 0; margin-right: 0; }
.kg-avatars {
  display: flex; align-items: center; gap: 1rem;
}
.kg-avatar-stack {
  display: flex; align-items: center;
}
.kg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  flex-shrink: 0;
  margin-left: -10px;
}
.kg-avatar:first-child { margin-left: 0; }
.kg-avatar-text {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
}
.kg-avatar-text strong { color: var(--fg); font-weight: 600; }

.kg-people-art {
  position: relative;
  padding: 1.5rem 0;
}
.kg-people-img {
  width: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.kg-people-float {
  animation: trioFloat 5s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes trioFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.kg-people-badge {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  box-shadow: 0 4px 18px -6px oklch(0.18 0.012 250 / 0.14);
  white-space: nowrap;
  z-index: 2;
}
.kg-people-badge.recording {
  top: 0; left: -20px;
  color: var(--record);
}
.kg-people-badge.summary {
  bottom: 0; right: -20px;
  color: var(--ok);
}
.kg-people-badge svg { flex-shrink: 0; color: var(--ok); }
.kg-rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--record);
  box-shadow: 0 0 0 3px oklch(0.62 0.19 28 / 0.2);
  animation: kgPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .kg-people-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .kg-people-badge.recording { top: 0; left: 0; }
  .kg-people-badge.summary   { bottom: 0; right: 0; }
}

/* ── 26. Testimonials ─────────────────────────────────────────────────────── */
.kg-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: visible; /* allow avatar to overflow */
  display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px -10px oklch(0.18 0.012 250 / 0.10);
}
/* Clip just the colored header, not the whole card */
.testimonial-card .tc-clip {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.tc-head {
  position: relative;
  height: 56px; /* h-14 */
  flex-shrink: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.testimonial-card.amber .tc-head { background: oklch(0.88 0.08 80); border: 1px solid oklch(0.82 0.06 80); }
.testimonial-card.blue  .tc-head { background: oklch(0.87 0.06 225); border: 1px solid oklch(0.80 0.06 225); }
.testimonial-card.green .tc-head { background: oklch(0.88 0.06 155); border: 1px solid oklch(0.80 0.05 155); }

.tc-avatar {
  position: absolute;
  bottom: -20px; left: 1.5rem;
  width: 40px; height: 40px;
  border-radius: 8px; /* rounded-lg square */
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--fg);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 6px oklch(0 0 0 / 0.08);
  flex-shrink: 0;
}

.tc-body {
  padding: 2.25rem 1.75rem 1.75rem; /* extra top for overlapping avatar */
  display: flex; flex-direction: column; gap: 0.75rem;
  flex: 1;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.tc-body > p {
  font-size: 0.9375rem;
  color: oklch(0.18 0.012 250 / 0.90);
  line-height: 1.65;
  flex: 1;
}
.tc-name { font-size: 0.875rem; font-weight: 600; color: var(--fg); }
.tc-role { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 640px) {
  .kg-testimonials { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 899px) {
  .kg-testimonials { grid-template-columns: repeat(2, 1fr); }
}

/* ── 27. Feature 01 — Section header, personas, dict card ───────────────── */
.feat-header {
  max-width: 48rem;
  margin-bottom: 4rem;
}
.feat-header .kg-h2 { margin-bottom: 1rem; }
.feat-lead {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 0.5rem;
}

/* Personas sub-section inside feature */
.kg-section .kg-personas { padding: 0 0 3rem; }
.kg-personas-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--muted);
  text-align: left;
  margin-bottom: 3rem;
  line-height: 1.4;
  margin-top: 1.5rem;
}
.kg-persona-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}

/* Persona card tint variants — match reference's translucent oklch backgrounds */
.persona-card.tint-gold {
  background: oklch(0.78 0.13 85 / 0.12);
  border-color: oklch(0.72 0.13 75 / 0.30);
}
.persona-card.tint-coral {
  background: oklch(0.68 0.19 28 / 0.12);
  border-color: oklch(0.62 0.19 28 / 0.30);
}
.persona-card.tint-teal {
  background: oklch(0.72 0.10 200 / 0.12);
  border-color: oklch(0.55 0.10 200 / 0.30);
}

/* All persona icons: surface bg, foreground color (matches Lovable) */
.persona-card .persona-icon {
  background: var(--surface);
  color: var(--fg);
}

/* Middle persona card lifted up */
.persona-card-raised { transform: translateY(-12px); }

/* Dictation card wrapper */
.feat-dict-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.feat-dict-card .feat-stats { margin-bottom: 0; }

@media (max-width: 767px) {
  .kg-persona-cards { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .kg-persona-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 28. Feature 02 — Lovable redesign ──────────────────────────────────── */

/* Stats: left-border serif style */
.rec-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}
.rec-stat {
  border-left: 2px solid var(--border);
  padding-left: 1rem;
}
.rs-n {
  font-family: var(--font-accent);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
}
.rs-l {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* App pills */
.rec-app-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--fg);
  white-space: nowrap;
}
.rap-ic {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.rap-ic.zoom     { background: #2D8CFF; }
.rap-ic.teams    { background: #5059C9; }
.rap-ic.slack    { background: #4A154B; }
.rap-ic.meet     { background: #00897B; }
.rap-ic.facetime { background: #34C759; }
.rap-ic.inperson { background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1; }

/* Floating badges in meeting art column */
.meetings-badge {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 13px;
  box-shadow: 0 8px 24px -6px oklch(0.18 0.012 250 / 0.15);
  z-index: 4;
  animation: chipFloat 6s ease-in-out infinite;
  white-space: nowrap;
}
.meetings-badge.recording { top: -14px; left: -14px; animation-delay: 0s; }
.meetings-badge.transcript { top: -8px; right: -8px; animation-delay: -3s; }
.mb-icon-wrap {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mb-icon-wrap.coral { background: oklch(0.62 0.19 28 / 0.15); color: var(--coral); }
.mb-icon-wrap.teal  { background: oklch(0.55 0.10 200 / 0.15); color: var(--teal); }
.mb-who { font-weight: 600; font-size: 13px; color: var(--fg); }
.mb-meta { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

/* Character card — floating bottom-right of mac window */
.char-card {
  position: absolute;
  bottom: -20px; right: -20px;
  z-index: 3;
  width: 150px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 20px 56px -12px oklch(0.18 0.012 250 / 0.22);
  overflow: hidden;
  animation: trioFloat 5.5s ease-in-out infinite;
  animation-delay: -1s;
  transform: rotate(6deg);
  transform-origin: bottom right;
}
.char-img {
  width: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.char-label {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid var(--border);
  font-size: 10.5px; font-family: var(--font-mono);
  color: var(--muted);
  background: oklch(0.965 0.006 90 / 0.8);
}
.char-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--record);
  animation: kgPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── 29. feat-num color variants ──────────────────────────────────────────── */
#f-jot    .feat-num { color: var(--gold); }
#f-private .feat-num { color: var(--teal); }

/* Jot / private tint backgrounds */
#f-jot.feature    { background: none; }
#f-private.feature { background: none; }

/* People section — remove old avatar stack layout baggage */
.kg-people-art {
  position: relative;
}

/* Hero section: more generous vertical space */
.kg-hero {
  padding-bottom: 0;
}

/* Skip section: match reference's gradient card look */
.skip-card {
  background: linear-gradient(135deg, var(--surface-2, oklch(0.93 0.008 90)), var(--surface, oklch(0.965 0.006 90)));
}

/* Testimonial card: border on amber/blue/green */
.testimonial-card.amber { border-color: oklch(0.82 0.06 80 / 0.70); }
.testimonial-card.blue  { border-color: oklch(0.80 0.06 225 / 0.70); }
.testimonial-card.green { border-color: oklch(0.80 0.05 155 / 0.70); }

/* Feature sections between jot/private: add visual divider */
#features > .feature + .feature {
  border-top: 1px solid var(--border);
}

/* Make the feature padding match reference style */
#features .feature {
  padding: 4rem 0;
}
#features .feature:first-child {
  border-top: none;
  padding-top: 2rem;
}

/* Reference-style eyebrow: inline color dash */
.kg-eyebrow-row .eyebrow-dash {
  display: block;
  width: 24px; height: 2px;
  border-radius: 999px;
  opacity: 0.5;
}

/* Skip section search: backdrop blur like reference */
.skip-search {
  background: oklch(0.985 0.004 90 / 0.60);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Persona icon: match reference size */
.persona-card .persona-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
}

/* Persona tag/title typography to match reference */
.persona-tag {
  margin-top: 1.25rem;
}
.persona-title {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Meetings section: remove legacy feature wrapper styling */
#f-focus .feature.tint-rec {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* ── 30. Pro plan reset for coral-gradient background ───────────────────── */
/* Pro plan now uses light coral gradient bg (not dark), so reset white overrides */
.kg-plan.pro .kg-plan-price .per { color: var(--muted); }
.kg-plan.pro .kg-plan-tagline { color: var(--muted); }
.kg-plan.pro ul li { color: var(--fg); }
.kg-plan.pro ul li::before { color: var(--coral); }
.kg-plan.pro .kg-plan-note { color: var(--muted); }
.kg-plan.pro .kg-plan-name { color: var(--coral); }
.kg-plan.pro .kg-coupon-toggle { color: var(--muted); }
.kg-plan.pro .kg-email-step-label { color: var(--muted); }
.kg-plan.pro .kg-email-hint { color: var(--muted); }
.kg-plan.pro .kg-coupon-input { background: var(--surface); border-color: var(--border); color: var(--fg); }
.kg-plan.pro .kg-coupon-badge { background: var(--surface); border-color: var(--border); }
.kg-plan.pro .kg-coupon-badge-text { color: var(--fg); }
.kg-plan.pro .kg-email-input { background: var(--surface); border-color: var(--border); color: var(--fg); }
.kg-plan.pro .kg-plan-cta {
  background: var(--fg);
  color: var(--bg);
  border: none;
}
.kg-plan.pro .kg-plan-cta:hover { opacity: 0.88; }
/* Pro price: make it coral colored */
.kg-plan.pro .kg-plan-prices .num { color: var(--fg); }
/* Toggle buttons reset for light bg */
.kg-plan.pro .kg-plan-toggle { background: oklch(0.62 0.19 28 / 0.08); border-color: oklch(0.62 0.19 28 / 0.20); }
.kg-plan.pro .kg-toggle-btn { color: var(--muted); }
.kg-plan.pro .kg-toggle-btn.active { background: var(--fg); color: var(--bg); }

/* ── 31. Section spacing — more generous per reference ───────────────────── */
.kg-section { padding-top: 5rem; padding-bottom: 5rem; }
.kg-section.tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.kg-skip { margin-top: 0; }

/* ── 32. Skip section bars — match reference's cleaner style ─────────────── */
.skip-bar { height: 12px; border-radius: 9999px; overflow: hidden; background: var(--surface); }
.skip-bar-fill { height: 100%; }
.skip-row-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.skip-pill { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.skip-pill.after { color: var(--coral); }
.skip-time { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }

/* ── 33. Top hero banner ─────────────────────────────────────────────────── */
.kg-top-hero {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 4rem;
  overflow: hidden;
}
.kg-top-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.kg-top-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kg-top-h1 {
  font-family: var(--font-accent);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 1.25rem 0 1rem;
}
.kg-top-h1 em {
  color: var(--coral);
  font-style: italic;
}
.kg-top-sub {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 34rem;
}
.kg-top-hero-art {
  position: relative;
}
.kg-top-hero-art .kg-people-img {
  width: 100%;
  border-radius: var(--r-2xl);
}
/* Keep the old hero (flow animation) visually subdued since it's now secondary */
.kg-hero {
  background: transparent;
}
.kg-hero .kg-container.hero-content {
  display: none; /* h1/sub only needed for SEO/tests — visually replaced by top hero */
}
/* Keep h1 for test/SEO but visually hidden */
.kg-hero .hero-content {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (max-width: 899px) {
  .kg-top-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .kg-top-hero-art {
    order: -1; /* image above text on mobile */
  }
}

/* Testimonials section now standalone */
.kg-testimonials-section {
  padding-top: 0;
}