/* ============================================================
   KHEN — Apple × Zelt hybrid design language
   Source: work/KhenSwiftUI/DESIGN.md
   Tokens: ./tokens.css  (Zelt light + scoped dark + Khen blue)
   ============================================================ */
@import "./tokens.css";

/* ========== Reset ========== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: #ffffff;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  color: var(--body);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 500;                  /* Zelt body weight */
  line-height: 1.47;
  letter-spacing: -0.2px;
  font-feature-settings: "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: opacity 320ms var(--ease), background-color 280ms var(--ease), color 280ms var(--ease);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #000000;
}

/* ========== Signed-in download body (header unchanged) ========== */

body.download-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #000000;
}

html[data-theme="dark"] body.download-app {
  background: #000000;
  color: #ffffff;
}

body.download-app .download-stage {
  flex: 1 0 auto;
  min-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 120px 24px 72px;
  box-sizing: border-box;
  background: transparent;
}

body.download-app .site-footer {
  flex-shrink: 0;
  width: 100%;
}

body.download-app .download-stage-title {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: inherit;
}

body.download-app .download-stage-copy,
body.download-app .download-stage-status {
  margin: 0;
  max-width: 34ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: rgba(0, 0, 0, 0.62);
  text-wrap: pretty;
}

html[data-theme="dark"] body.download-app .download-stage-copy,
html[data-theme="dark"] body.download-app .download-stage-status {
  color: rgba(255, 255, 255, 0.72);
}

body.download-app .download-stage-status {
  color: rgba(0, 0, 0, 0.78);
}

html[data-theme="dark"] body.download-app .download-stage-status {
  color: rgba(255, 255, 255, 0.86);
}

body.download-app .download-stage-cta,
body.download-app #download-button.split-cta {
  display: inline-flex;
  width: auto;
  margin: 12px 0 0;
  min-height: 0;
  padding: 0;
  font-size: 17px;
}

body.download-app .download-stage-cta .split-cta-label,
body.download-app #download-button.split-cta .split-cta-label {
  padding: 16px 28px;
  font-size: 17px;
}

body.download-app .download-stage-cta .split-cta-arrow,
body.download-app #download-button.split-cta .split-cta-arrow {
  min-width: 48px;
  padding: 0 18px;
  font-size: 20px;
}

body.is-page-exit { opacity: 0; }

img, svg { display: block; max-width: 100%; }
img { border-radius: inherit; }

a { color: var(--ink); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--blue); color: var(--on-blue); }

:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* ========== Type — Inter, light 300 display / 500 body / 600 UI ========== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  font-weight: 300;                  /* Zelt display weight */
  text-wrap: balance;
}
h1 {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  font-weight: 300;
}

h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: 500;                  /* headings step up to 500 */
}

h3 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 500;
}
h4 {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

p { margin: 0; }

.lead {
  font-family: var(--font-text);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
}

.lead-airy {
  font-family: var(--font-text);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
}

.caption {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
}

.fine-print {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--neutral);
}

/* ========== Universal transitions ========== */

a, button, .signin-submit, .checkout-cta, .checkout-back, .pricing-page-back,
.primary-button, .secondary-button, input, textarea, select,
#nav-get-started, .split-cta {
  transition:
    color 200ms var(--ease),
    background-color 200ms var(--ease),
    border-color 200ms var(--ease),
    opacity 200ms var(--ease),
    box-shadow 200ms var(--ease),
    transform 120ms var(--press);
}

/* Micro press */
button:active,
a.button:active,
.signin-submit:active,
.contact-submit:active,
.checkout-cta:active,
.primary-button:active,
#download-button:active,
.secondary-button:active,
.signin-secondary:active,
#nav-get-started:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   FLOATING NAV — Zelt's floating white pill, Apple's calm
   ============================================================ */

.site-header {
  position: sticky;
  top: var(--nav-gap-top);
  z-index: 40;
  height: var(--nav-h);
  width: min(var(--content-max), calc(100% - 32px));
  margin: var(--nav-gap-top) auto 0;
  padding: 0 16px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #ffffff;
  border: 1px solid #f4f4f4;
  border-radius: var(--r-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: #121718;
  overflow: visible;
}

.site-header .brand,
.site-header .brand-label,
.site-header nav a {
  color: #121718;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: #121718;
  cursor: pointer;
  opacity: 0.8;
  flex-shrink: 0;
  transition: opacity 200ms var(--ease), background-color 200ms var(--ease), transform 120ms var(--press);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}
.theme-toggle:active { transform: scale(0.95); }

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  display: none;
}
html:not([data-theme="dark"]) .theme-toggle-icon--moon { display: block; }
html[data-theme="dark"] .theme-toggle-icon--sun { display: block; }

.clerk-nav-signed-out,
.clerk-nav-signed-in {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clerk-nav-signed-out[hidden],
.clerk-nav-signed-in[hidden] {
  display: none !important;
}
.clerk-user-button {
  display: inline-flex;
  align-items: center;
  min-width: 32px;
  min-height: 32px;
}

/* Clerk UserButton popover — always white (not page-theme dark) */
.cl-userButtonPopoverCard,
.cl-userButtonPopoverMain,
.cl-userButtonPopoverFooter,
.cl-userButtonPopoverRootBox {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #121718 !important;
}

.cl-userPreview,
.cl-userPreview__userButton,
.cl-userPreviewMainIdentifier,
.cl-userPreviewSecondaryIdentifier,
.cl-userButtonPopoverActionButton,
.cl-userButtonPopoverActionButtonText,
.cl-userButtonPopoverActionButton__manageAccount,
.cl-userButtonPopoverActionButton__signOut {
  color: #121718 !important;
}

.cl-userButtonPopoverActionButtonIcon,
.cl-userButtonPopoverActionButton svg {
  color: #121718 !important;
}

.cl-userButtonPopoverFooter,
.cl-footerItem,
.cl-userButtonPopoverFooter * {
  background: #ffffff !important;
  color: #808080 !important;
}

/* Clerk UserProfile / Manage account modal — follows site theme */
.cl-modalContent,
.cl-userProfile-root,
.cl-userProfile-root .cl-cardBox,
.cl-userProfile-root .cl-scrollBox,
.cl-userProfile-root .cl-pageScrollBox,
.cl-userProfile-root .cl-navbar,
.cl-userProfile-root .cl-navbarMobileMenuButton,
.cl-profileSection,
.cl-profileSectionContent,
.cl-profileSectionHeader,
.cl-profileSectionPrimaryButton,
.cl-page,
.cl-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #121718 !important;
}

.cl-userProfile-root,
.cl-userProfile-root .cl-pageScrollBox,
.cl-userProfile-root .cl-headerTitle,
.cl-userProfile-root .cl-profileSectionTitleText,
.cl-userProfile-root .cl-profileSectionTitle,
.cl-userProfile-root .cl-profileSectionContent,
.cl-userProfile-root .cl-navbarButton,
.cl-userProfile-root .cl-breadcrumbsItem,
.cl-userProfile-root .cl-breadcrumbsItemDivider,
.cl-userProfile-root .cl-menuButton,
.cl-userProfile-root .cl-formFieldLabel,
.cl-userProfile-root p,
.cl-userProfile-root span,
.cl-userProfile-root button:not(.cl-formButtonPrimary) {
  color: #121718 !important;
}

.cl-userProfile-root .cl-profileSectionPrimaryButton,
.cl-userProfile-root a,
.cl-userProfile-root .cl-navbarButton[data-active='true'] {
  color: #1E6FEB !important;
}

.cl-userProfile-root .cl-badge,
.cl-userProfile-root .cl-profileSectionItem {
  background: #f5f5f5 !important;
  color: #121718 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.cl-modalBackdrop {
  background: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme='dark'] .cl-modalContent,
html[data-theme='dark'] .cl-userProfile-root,
html[data-theme='dark'] .cl-userProfile-root .cl-cardBox,
html[data-theme='dark'] .cl-userProfile-root .cl-scrollBox,
html[data-theme='dark'] .cl-userProfile-root .cl-pageScrollBox,
html[data-theme='dark'] .cl-userProfile-root .cl-navbar,
html[data-theme='dark'] .cl-profileSection,
html[data-theme='dark'] .cl-profileSectionContent,
html[data-theme='dark'] .cl-profileSectionHeader,
html[data-theme='dark'] .cl-page,
html[data-theme='dark'] .cl-header {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .cl-userProfile-root,
html[data-theme='dark'] .cl-userProfile-root .cl-pageScrollBox,
html[data-theme='dark'] .cl-userProfile-root .cl-headerTitle,
html[data-theme='dark'] .cl-userProfile-root .cl-profileSectionTitleText,
html[data-theme='dark'] .cl-userProfile-root .cl-profileSectionTitle,
html[data-theme='dark'] .cl-userProfile-root .cl-profileSectionContent,
html[data-theme='dark'] .cl-userProfile-root .cl-navbarButton,
html[data-theme='dark'] .cl-userProfile-root .cl-breadcrumbsItem,
html[data-theme='dark'] .cl-userProfile-root .cl-menuButton,
html[data-theme='dark'] .cl-userProfile-root .cl-formFieldLabel,
html[data-theme='dark'] .cl-userProfile-root p,
html[data-theme='dark'] .cl-userProfile-root span,
html[data-theme='dark'] .cl-userProfile-root button:not(.cl-formButtonPrimary) {
  color: #ffffff !important;
}

html[data-theme='dark'] .cl-userProfile-root .cl-profileSectionPrimaryButton,
html[data-theme='dark'] .cl-userProfile-root a,
html[data-theme='dark'] .cl-userProfile-root .cl-navbarButton[data-active='true'] {
  color: #1E6FEB !important;
}

html[data-theme='dark'] .cl-userProfile-root .cl-badge,
html[data-theme='dark'] .cl-userProfile-root .cl-profileSectionItem {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme='dark'] .cl-modalBackdrop {
  background: rgba(0, 0, 0, 0.72) !important;
}

.brand {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #121718;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 0 4px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.brand-label {
  display: inline-block;
  color: #121718;
  position: relative;
  z-index: 1;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
}

.brand:hover .brand-label,
.brand:focus-visible .brand-label {
  opacity: 1;
  color: var(--blue);
}

.brand.brand--race .brand-label {
  animation: brand-race 380ms var(--press);
}

@keyframes brand-race {
  0%   { transform: translateX(0);  }
  40%  { transform: translateX(2px); }
  100% { transform: translateX(0);  }
}

.brand-photons {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}

.brand-photon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 3px);
  height: var(--size, 3px);
  margin-left: calc(var(--size, 3px) / -2);
  margin-top: calc(var(--size, 3px) / -2);
  border-radius: 50%;
  background: #5ac8fa;
  box-shadow:
    0 0 4px 1px rgba(30, 111, 235, 0.95),
    0 0 10px 2px rgba(90, 200, 250, 0.55),
    0 0 18px 4px rgba(30, 111, 235, 0.25);
  opacity: 0;
  animation: brand-photon-burst 980ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0ms) forwards;
  will-change: transform, opacity;
}

@keyframes brand-photon-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  10% {
    opacity: 1;
    transform: translate(calc(var(--px) * 0.12), calc(var(--py) * 0.12)) scale(1.15);
  }
  55% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-photon { animation: none; display: none; }
}

.brand-string-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 45;
  overflow: visible;
}

.brand-string {
  fill: none;
  stroke: #5ac8fa;
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(90, 200, 250, 0.75));
  opacity: 0.95;
  transition: opacity 280ms var(--ease);
}

.brand-string.is-leaving {
  opacity: 0;
}

#hero-eyebrow.is-strung {
  background-image: linear-gradient(
    100deg,
    #7ec8f0 0%,
    #7ec8f0 42%,
    #e8f7ff 50%,
    #7ec8f0 58%,
    #7ec8f0 100%
  );
  filter: drop-shadow(0 0 8px rgba(90, 200, 250, 0.28));
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header nav a {
  color: #121718;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  opacity: 0.88;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  opacity: 1;
  color: #121718;
  outline: none;
}
/* ============================================================
   SIGNATURE SPLIT CTA — amber label + right-rounded arrow segment
   ============================================================ */

/* Applied to #nav-get-started as well as any .split-cta element.
   Structure: <a class="split-cta"><span class="split-cta-label">…</span><span class="split-cta-arrow">→</span></a>
   If .split-cta-label / .split-cta-arrow are absent (legacy markup), we fall through to a compact primary button. */

.split-cta,
#nav-get-started {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--on-primary);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  margin-left: 6px;
  overflow: hidden;
}

.split-cta-label {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: var(--on-blue);
  padding: 10px 16px;
  border-radius: var(--r-xs) 0 0 var(--r-xs);        /* near-square left corners */
  border-right: 1px solid rgba(18, 23, 24, 0.14);
  font-weight: 600;
}

.split-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  background: var(--blue);
  color: var(--on-blue);
  padding: 0 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;        /* Zelt's exact right-rounded arrow */
  font-size: 16px;
  line-height: 1;
}
.split-cta:hover,
#nav-get-started:hover,
.split-cta:focus-visible,
#nav-get-started:focus-visible {
  outline: none;
}
.split-cta:hover .split-cta-label,
#nav-get-started:hover .split-cta-label,
.split-cta:hover .split-cta-arrow,
#nav-get-started:hover .split-cta-arrow {
  background: var(--blue-focus);
}

/* Legacy fallback — if the nav CTA is just a text link */
#nav-get-started:not(:has(.split-cta-label)) {
  background: var(--blue);
  color: var(--on-blue);
  padding: 10px 20px;
  border-radius: var(--r-xs);
  font-weight: 600;
}
#nav-get-started:not(:has(.split-cta-label)):hover {
  background: var(--blue-focus);
  color: var(--on-blue);
}

/* ========== Main & Section rhythm ========== */

main {
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}

main#top {
  background: transparent;
}

/* Every .section is a full-bleed band with 80px vertical padding */
.section {
  padding: var(--sp-section) clamp(20px, 4vw, 40px);
  background: transparent;
  color: var(--ink);
  border-top: none;
}

.section > * {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Page bands follow body theme (white ↔ black). Hero circle stays black. */
.hero {
  background: #000000;
  color: var(--body-on-dark);
  width: min(94vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-top: clamp(28px, 5vw, 56px);
  margin-inline: auto;
  margin-bottom: clamp(32px, 5vw, 64px);
  padding: clamp(48px, 8vw, 96px) clamp(36px, 7vw, 80px);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.section.intro,
#how {
  background: transparent;
  color: var(--ink);
}

/* When How it works leads a page (e.g. Use cases), clear the floating nav */
main > #how:first-child {
  margin-top: calc(var(--nav-gap-top) * -1);
  padding-top: calc(var(--nav-h) + var(--nav-gap-top) + 40px);
}

#who {
  scroll-margin-top: calc(var(--nav-h) + var(--nav-gap-top) + 24px);
}
#capabilities {
  scroll-margin-top: calc(var(--nav-h) + var(--nav-gap-top) + 24px);
}

/* Who it's for — full-bleed, follows body theme */
#who.usecases-page-main {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
}
#who.usecases-page-main > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#who .section-kicker {
  color: var(--ink-muted-48);
}
#who h1,
#who h2 {
  color: var(--ink);
}
#who > p,
#who .legal-lede {
  color: var(--ink-muted-80) !important;
}
#who > p a {
  color: var(--ink);
  text-decoration-color: var(--blue);
}
#who .legal-callout {
  background: transparent;
  border-color: var(--hairline-strong);
}
#who .legal-callout p,
#who .legal-callout strong {
  color: var(--ink);
}
#who .hotkey {
  background: var(--canvas-soft);
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.section.intro h1,
.section.intro h2,
.section.intro h3,
#how h1, #how h2, #how h3 { color: var(--ink); }
#how p,
.section.intro p { color: var(--ink-muted-80); }

#usecases { background: transparent; }
#faq {
  background: transparent;
  color: var(--ink);
}
#faq .section-heading h2,
#faq #faq-title {
  color: var(--ink);
}
#faq .section-kicker {
  color: var(--ink-muted-48);
}

/* ========== Section heading (kicker + h2) ========== */

.section-heading {
  display: grid;
  gap: 12px;
  margin-bottom: var(--sp-xxl);
  max-width: 980px;
}

.section-heading .section-kicker,
.section-kicker,
.eyebrow,
.pricing-eyebrow,
.hero-why,
.legal-meta,
.contact-label,
.auth-switch-label,
.plan-name {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--neutral);
  text-transform: none;
  margin: 0;
}

.section-heading h2 {
  max-width: 22ch;
}

/* Hero circle stays dark — keep its eyebrow light */
.hero .eyebrow { color: rgba(255, 255, 255, 0.62); }

#how .section-kicker,
.section.intro .section-kicker {
  color: var(--ink-muted-48);
}

/* Soft white shimmer + faint glow — matches hero eyebrow tone */
#hero-eyebrow {
  display: inline-block;
  color: rgba(255, 255, 255, 0.62);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.5) 58%,
    rgba(255, 255, 255, 0.5) 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
  animation: hero-eyebrow-shimmer 2.6s linear infinite;
  will-change: background-position;
}

@keyframes hero-eyebrow-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-eyebrow {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62);
    color: rgba(255, 255, 255, 0.62);
    filter: none;
    will-change: auto;
  }
}

/* ========== Hero — black circular stage on white page ========== */

.hero > * {
  max-width: none;
  width: 100%;
  margin-inline: auto;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  align-content: center;
  justify-items: center;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
}

.hero-copy > * {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.eyebrow { color: rgba(255, 255, 255, 0.62); }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 8.4vw, 112px);   /* Zelt display-mega scale */
  line-height: 1.0;
  letter-spacing: -2px;
  font-weight: 300;                        /* Zelt: weight, not family */
  color: var(--body-on-dark);
  text-wrap: balance;
  min-height: 1.1em;
}

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

.hero-title-label {
  display: inline;
}

.hero-title-label.is-typing::after,
.typewriter-label.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.05em;
  background: currentColor;
  animation: hero-caret 1s steps(1) infinite;
}

@keyframes hero-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-label.is-typing::after,
  .typewriter-label.is-typing::after { animation: none; opacity: 1; }
}

.hero h1 em,
.hero-title-label em {
  font-style: normal;
  font-weight: 300;
  color: var(--body-on-dark);
}

.hero-why { display: none; }

.hero-line {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--body-muted-on-dark);
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Optional CTA pair (the standalone split-CTA on the hero is served by .split-cta) */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 0;
}

.hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 22px;
  border-radius: var(--r-xs);              /* near-square */
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
}

.hero-cta a.cta-primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 2px solid var(--primary);
}
.hero-cta a.cta-primary:hover { background: var(--primary-focus); border-color: var(--primary-focus); }

.hero-cta a.cta-secondary {
  background: transparent;
  color: var(--body-on-dark);
  border: 2px solid var(--body-on-dark);
}
.hero-cta a.cta-secondary:hover { background: rgba(255, 255, 255, 0.06); }

/* Capability tags (Zelt caption pills) */
.hero-chips {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.hero-chips li {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--on-blue);
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: var(--blue);
  border: 1px solid var(--blue);
}

/* Hotkey chip */
.hotkey {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--hairline-strong);
}

html[data-theme="dark"] .hotkey {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.hero .hotkey {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* ========== Feature grid — copy left, media right ========== */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  max-width: var(--content-max);
  width: 100%;
}

/* Override .section > * centering — full width for media column */
.section > .feature-grid,
#how > .feature-grid {
  margin-inline: 0 auto;
}

.feature-step {
  padding: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.feature-step + .feature-step {
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline-strong);
}

.feature-step:hover { background: transparent; }

.feature-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.feature-media {
  aspect-ratio: 16 / 10;
  width: min(100%, 280px);
  max-width: 280px;
  min-height: 0;
  justify-self: end;
  border-radius: var(--r-sm);
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.feature-media video,
.feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-badge {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--blue);                 /* sky blue numeral badges on dark */
  padding: 0;
  border: 0;
  background: transparent;
  width: max-content;
}

.feature-grid h3,
.feature-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.feature-grid p,
.feature-copy p {
  color: var(--ink-muted-80);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 36ch;
  margin: 0;
}

.feature-grid a { color: var(--primary); }

/* ========== Use cases — white band / feature-card grammar ========== */

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

#usecases .usecase,
.usecases-grid > .usecase {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);           /* Zelt feature-card 12px */
  background: #000000;
  color: #ffffff;
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: none;
}

#usecases .usecase:hover,
.usecases-grid > .usecase:hover { border-color: var(--blue); }

.usecase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-xs);
  background: var(--blue);
  color: var(--on-blue);
  border: 0;
}

.usecase-icon svg { width: 22px; height: 22px; }
#usecases .usecase h3,
.usecases-grid > .usecase h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: #ffffff;
}

#usecases .usecase p,
.usecases-grid > .usecase p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
}

.usecase-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.usecase-points li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.usecase-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--blue);
}

.usecases-page-main {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 40px) 96px;
  color: var(--ink);
}
.usecases-page-main .section-kicker { margin-bottom: 16px; }
.usecases-page-main > .section-kicker:not(:first-of-type) {
  margin-top: 64px;
}
.usecases-page-main .section-kicker + h1,
.usecases-page-main .section-kicker + h2 {
  margin-top: 0;
}
.usecases-page-main h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 24px;
  min-height: 1.15em;
}
.who-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.who-title-static,
.who-title-label {
  display: inline;
}
.usecases-page-main h2 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 64px 0 16px;
}
.usecases-page-main > p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 20px;
}
.usecases-page-main > p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}
.usecases-page-main .legal-lede { margin-bottom: 40px !important; }
.usecases-page-main .usecases-grid { margin: 8px 0 0; }
.usecases-grid--compact {
  margin-top: 28px !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}

.usecase--clamp:not(.is-expanded) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  box-sizing: border-box;
}

.usecase--clamp .usecase-copy {
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.usecase--clamp.is-expanded {
  height: auto !important;
  overflow: visible;
  grid-template-rows: auto auto auto;
}
.usecase--clamp.is-expanded .usecase-copy {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  min-height: 0;
}

.usecase-more {
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--ease), opacity 200ms var(--ease);
}
.usecase-more:hover,
.usecase-more:focus-visible {
  text-decoration-color: var(--blue);
  outline: none;
}
.usecase-more:active { transform: scale(0.97); }

.usecases-page-main .hotkey {
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

/* ========== Pricing page ========== */

.pricing-page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 40px) 96px;
  color: var(--ink);
}
.pricing-page-main .section-kicker { margin-bottom: 16px; }
.pricing-page-main h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 24px;
}
.pricing-page-main .legal-lede { margin-bottom: 40px !important; }

.pricing-plan {
  padding: 36px 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  gap: 12px;
}
.pricing-plan-name {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink-muted-48);
  margin: 0;
}
.pricing-plan-price {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 72px);
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 300;
  color: var(--ink);
  margin: 0;
}
.pricing-plan-price span {
  font-size: 18px;
  letter-spacing: -0.3px;
  font-weight: 500;
  color: var(--ink-muted-48);
}
.pricing-plan-trial {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blue);
}
.pricing-plan-copy {
  margin: 8px 0 4px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-muted-80);
}
.pricing-plan-features {
  list-style: none;
  padding: 8px 0 12px;
  margin: 0;
  display: grid;
  gap: 10px;
}
.pricing-plan-features li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.pricing-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--blue);
}
a.pricing-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  text-decoration: none;
  box-sizing: border-box;
}
.pricing-plan-note {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted-48);
}
.pricing-plan-note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}

/* ========== FAQ — white band / hairlines / dense answers ========== */

.faq-list { border-top: 1px solid var(--hairline-strong); }

.faq-item {
  border-bottom: 1px solid var(--hairline-strong);
  padding: 0;
  background: transparent;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 260ms var(--ease);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.faq-answer {
  padding: 0 0 20px;
  color: var(--ink-muted-80);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 62ch;
}
.faq-answer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}
.faq-answer a:hover { text-decoration-color: var(--blue-focus); }

/* ========== Reveal on scroll ========== */

[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

[data-reveal].is-visible,
details[data-reveal][open] { opacity: 1; transform: none; }

.feature-grid article[data-reveal].is-visible { transition-delay: 0ms; }
.feature-grid article:nth-child(2)[data-reveal].is-visible { transition-delay: 90ms; }
.feature-grid article:nth-child(3)[data-reveal].is-visible { transition-delay: 180ms; }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { animation: reveal-fallback 800ms var(--ease) 1.4s forwards; }
  [data-reveal].is-visible { animation: none; }
}
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* ============================================================
   FOOTER — follows light/dark body theme
   ============================================================ */

.site-footer {
  background: transparent;
  color: var(--ink);
  padding: 80px clamp(20px, 4vw, 40px) 48px;
  border-top: 1px solid var(--hairline-strong);
  margin-top: 0;
}

.site-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 48px 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline-strong);
}
.footer-column h4 {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: none;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li a {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-muted-48);
  text-decoration: none;
}
.footer-column li a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }

.site-footer-legal {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.site-footer p,
.site-footer-legal p {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-muted-48);
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-nav a {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-muted-48);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }

/* ============================================================
   LONG-FORM PAGES (about / contact / privacy / terms)
   ============================================================ */

.legal-page { background: var(--canvas); }

.legal-page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 40px) 96px;
  color: var(--ink);
}

.legal-page-main .section-kicker { margin-bottom: 16px; }
.legal-page-main h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 32px;
}
.legal-page-main h2 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 56px 0 16px;
}

.legal-page-main p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 20px;
}

.legal-page-main p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
}
.legal-page-main p a:hover { text-decoration-color: var(--primary-focus); }

.legal-lede {
  font-family: var(--font-text);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 32px !important;
}

.legal-meta { margin-bottom: 24px; }

.legal-portrait { margin: 32px 0 40px; }
.edit-slot {
  margin: 0;
  aspect-ratio: 1;
  width: min(320px, 60%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: grid;
  place-content: center;
  gap: 8px;
  color: var(--neutral);
  background: var(--canvas-soft);
}

.edit-slot-icon { color: var(--neutral); display: inline-flex; justify-content: center; }
.edit-slot-icon svg { width: 40px; height: 40px; }

.edit-slot-label { font-size: 14px; letter-spacing: 0; text-align: center; }
.edit-slot-hint { font-size: 12px; letter-spacing: 0; text-align: center; color: var(--neutral); }

/* Callout — hairline utility card */
.legal-callout {
  margin: 40px 0;
  padding: 28px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  border-radius: var(--r-md);
}
.legal-callout p {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}
.legal-callout strong { font-weight: 600; color: var(--ink); }

.about-signature {
  margin-top: 48px !important;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--ink);
}

.contact-email {
  color: var(--ink) !important;
  font-family: var(--font-text);
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
}
.contact-email:hover { text-decoration-color: var(--primary-focus); }

/* ============================================================
   ACCOUNT / SIGNIN / RESET / CONTACT FORM
   ============================================================ */

.account-page { background: var(--canvas); min-height: 100vh; }

.account-page-main {
  max-width: 380px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 160px) 24px 80px;
}

.account-page-main--clerk {
  max-width: 380px;
  display: grid;
  justify-items: stretch;
  gap: 12px;
}

.clerk-sign-in {
  width: 100%;
}

/* Force Khen layout over Clerk defaults (embedded component only) */
.clerk-sign-in .cl-rootBox,
.clerk-sign-in .cl-cardBox,
.clerk-sign-in .cl-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.clerk-sign-in .cl-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.clerk-sign-in .cl-headerTitle {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
  color: var(--ink) !important;
}

.clerk-sign-in .cl-headerSubtitle {
  font-weight: 500 !important;
  font-size: 14px !important;
  text-align: left !important;
  color: var(--ink-muted-48) !important;
}

.clerk-sign-in .cl-formFieldLabel {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: var(--neutral) !important;
}

.clerk-sign-in .cl-formFieldInput,
.clerk-sign-in .cl-input {
  border-radius: 2px !important;
  min-height: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: 1px solid var(--hairline-strong) !important;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.clerk-sign-in .cl-formButtonPrimary,
.clerk-sign-in button.cl-formButtonPrimary {
  background: var(--blue) !important;
  background-color: var(--blue) !important;
  border: 2px solid var(--blue) !important;
  border-radius: 2px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.clerk-sign-in .cl-formButtonPrimary:hover,
.clerk-sign-in button.cl-formButtonPrimary:hover {
  background: var(--blue-focus) !important;
  background-color: var(--blue-focus) !important;
  border-color: var(--blue-focus) !important;
}

.clerk-sign-in .cl-socialButtons,
.clerk-sign-in .cl-socialButtonsRoot .cl-socialButtons {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.clerk-sign-in .cl-socialButtonsBlockButton {
  border-radius: 2px !important;
  min-height: 44px !important;
  width: 100% !important;
  border: 1px solid var(--hairline-strong) !important;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  justify-content: center !important;
}

.clerk-sign-in .cl-footer,
.clerk-sign-in .cl-internal-b3fm6y {
  background: transparent !important;
}

.clerk-sign-in .cl-footerActionLink,
.clerk-sign-in a.cl-footerActionLink {
  color: var(--blue) !important;
  font-weight: 600 !important;
}

.clerk-sign-in .cl-dividerLine {
  background: var(--hairline-strong) !important;
}

.clerk-sign-in .cl-dividerText {
  color: var(--neutral) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Soften / hide Clerk marketing chrome */
.clerk-sign-in a[href*="clerk.com"],
.clerk-sign-in .cl-footer .cl-internal-11uw91f,
.clerk-sign-in [data-localization-key="footerPageLink__help"],
.clerk-sign-in [data-localization-key="footerPageLink__privacy"],
.clerk-sign-in [data-localization-key="footerPageLink__terms"] {
  display: none !important;
}

.clerk-sign-in .cl-header {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.auth-form,
.contact-form {
  display: grid;
  gap: 12px;
}

.auth-step,
.auth-step-credentials {
  display: grid;
  gap: 10px;
}

.auth-form input,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-xs);              /* Zelt near-square input */
  border: 1px solid var(--hairline-strong);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  height: 48px;
}

.contact-form textarea {
  border-radius: var(--r-xs);
  height: auto;
  min-height: 140px;
  padding: 14px 18px;
  resize: vertical;
  line-height: 1.5;
}

.auth-form input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--neutral);
}
.auth-form input:hover,
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(0, 0, 0, 0.16);
}

.auth-form input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 205, 109, 0.35);
}

.contact-field { display: grid; gap: 6px; }

.contact-label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--neutral);
  text-transform: none;
}

/* ==== Buttons — near-square; brand CTAs use sky blue ==== */

.signin-submit,
.contact-submit,
.checkout-cta,
.primary-button,
#download-button {
  display: block;
  width: 100%;
  padding: 12px 22px;
  border-radius: var(--r-xs);
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--blue);
  cursor: pointer;
  margin-top: 8px;
  min-height: 44px;
}
.signin-submit:hover,
.contact-submit:hover,
.checkout-cta:hover,
.primary-button:hover,
#download-button:hover {
  background: var(--blue-focus);
  border-color: var(--blue-focus);
  color: var(--on-blue);
}

/* Auth / form submit — brand sky blue (kept explicit for clarity) */
.signin-submit,
.contact-submit {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
}
.signin-submit:hover,
.contact-submit:hover {
  background: var(--blue-focus);
  border-color: var(--blue-focus);
  color: var(--on-blue);
}
.signin-submit:disabled,
.contact-submit:disabled {
  background: rgba(30, 111, 235, 0.45);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: not-allowed;
  transform: none;
}

/* Secondary — outlined ghost, near-square */
.signin-secondary,
.secondary-button,
#retry-button,
#signin-button,
#billing-button {
  display: block;
  width: 100%;
  padding: 12px 22px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--ink);
  margin-top: 8px;
  min-height: 44px;
}
.signin-secondary:hover,
.secondary-button:hover,
#retry-button:hover,
#signin-button:hover,
#billing-button:hover {
  background: var(--ink);
  color: var(--body-on-dark);
  border-color: var(--ink);
}
/* Forgot password — quiet text link, underlined amber */
.signin-forgot {
  display: block;
  width: 100%;
  text-align: right;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
}
.signin-forgot:hover { text-decoration-color: var(--primary-focus); }
/* Divider "New here?" */
.auth-switch {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 22px 0 2px;
}
.auth-switch-line { height: 1px; background: var(--hairline); }
.auth-switch-label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--neutral);
  text-transform: none;
}

/* Form status messages */
.form-message {
  margin: 6px 0 0;
  min-height: 1.2em;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-muted-80);
  text-align: center;
}
.form-message a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
}
.form-message.is-error { color: #b3261e; }
.form-message.is-success { color: #0b7a3a; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1068px) {
  .feature-grid { gap: 40px; }
}

@media (max-width: 833px) {
  .site-header { padding: 0 14px 0 18px; height: 52px; }
  .site-header nav a { padding: 8px 10px; font-size: 13px; }
  .split-cta-label, #nav-get-started .split-cta-label { padding: 8px 12px; font-size: 13px; }
  .split-cta-arrow, #nav-get-started .split-cta-arrow { min-width: 30px; padding: 0 10px; }
  .brand { font-size: 18px; }
  .feature-grid { gap: 36px; }
  .feature-step {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .feature-media {
    width: min(100%, 220px);
    max-width: 220px;
    justify-self: start;
  }
  .section { padding: 64px 20px; }
}

@media (max-width: 640px) {
  h1 { font-size: 44px; letter-spacing: -1.2px; }
  .hero h1 { font-size: 56px; letter-spacing: -1.4px; }
  .hero-line { font-size: 17px; }
  .site-footer { padding: 56px 20px 32px; }
  .faq-item summary { font-size: 16px; padding: 16px 0; }
  .site-header nav a[href="./usecases.html"] { display: none; }
}

@media (max-width: 419px) {
  h1 { font-size: 36px; }
  .hero h1 { font-size: 40px; letter-spacing: -1px; }
  .hero {
    width: min(96vw, 900px);
    margin-top: 20px;
    padding: clamp(36px, 9vw, 64px) clamp(24px, 7vw, 48px);
  }
  .section { padding: 48px 20px; }
}

/* Utility */
.hidden { display: none !important; }