/* Kelt Systems - dark cinematic marketing */
:root {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --accent: #0891b2;
  --accent-text: #0891b2; /* accent used as text colour */
  --accent-dim: rgba(8, 145, 178, 0.18);
  --accent-glow: rgba(8, 145, 178, 0.40);
  --border: rgba(255, 255, 255, 0.08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 4rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 72rem;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #f4f4f5;
  --text: #0a0a0a;
  --muted: #404040;
  --accent: #0891b2;
  --accent-text: #0e7490; /* darker teal so small accent text stays readable on white */
  --accent-dim: rgba(8, 145, 178, 0.12);
  --accent-glow: rgba(8, 145, 178, 0.28);
  --border: rgba(0, 0, 0, 0.12);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

/* Header / Nav --- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(0, 0, 0, 0.88);
}

.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Header and footer logo: the mark plus live text styled exactly like the home hero wordmark
   (same font stack, weight 800, letter spacing -0.035em, Kelt in the text colour, Systems teal),
   so it renders in the same system font as the hero on every device. */
.logo,
.footer-logo {
  --logo-h: 2.5rem; /* mark image height (the drawn mark is 90% of it) */
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.255); /* same mark-to-name spacing as the hero */
  text-decoration: none;
  line-height: 1;
  color: var(--text);
}

.footer-logo {
  --logo-h: 2rem;
}

/* Slightly smaller where the header is tight: narrow desktops just above the mobile menu breakpoint, and small phones */
@media (min-width: 769px) and (max-width: 860px), (max-width: 389px) {
  .logo {
    --logo-h: 2.125rem;
  }
}

@media (max-width: 340px) {
  .logo {
    --logo-h: 1.75rem;
  }
}

.logo:hover,
.footer-logo:hover {
  text-decoration: none;
  opacity: 0.9;
}

.logo-mark {
  display: block;
  height: var(--logo-h);
  width: auto;
  flex-shrink: 0;
}

.logo-name {
  font-size: calc(var(--logo-h) * var(--logo-name-ratio, 0.864)); /* 0.864 = hero name size / hero mark height */
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}

.logo-accent {
  color: var(--accent);
}

.logo-lockup--for-light {
  display: none;
}

.logo-lockup--for-dark {
  display: block;
}

html[data-theme="light"] .logo-lockup--for-dark {
  display: none;
}

html[data-theme="light"] .logo-lockup--for-light {
  display: block;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

html[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-menu a {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--text);
}

.nav-cta {
  color: #fff !important;
  background: var(--accent);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
}

.nav-cta:hover {
  filter: brightness(1.08);
  text-decoration: none !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto;
    background: #000; /* solid: a translucent menu let page text show through */
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
    gap: 0;
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s;
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu li {
    border-bottom: 1px solid var(--border);
  }

  .nav-menu li:last-child {
    border-bottom: 0;
  }

  .nav-menu a {
    display: block;
    padding: 0.9rem 0.25rem;
  }

  .nav-cta {
    margin-top: 0.75rem;
    text-align: center;
  }
}

/* Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit; /* <button> doesn't inherit the page font by default */
  line-height: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}

.btn:active {
  transform: scale(0.98);
}

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

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.text-link {
  color: var(--accent-text);
  font-weight: 500;
  font-size: 1rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* match the centred text above */
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Home story / scroll-snap --- */
/* snap root set later on body.home */

.chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) 1.5rem 3rem;
  overflow: hidden;
}

.chapter-inner {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  width: 100%;
  text-align: center;
}

.chapter--hero .chapter-inner,
.chapter--final .chapter-inner {
  max-width: 52rem;
}

/* Hero: big logo mark + full company name above the headline */
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
}

.hero-brand-mark {
  height: clamp(4rem, 7.5vw, 5.5rem); /* 88px on desktop, 64px on phones; the mark itself is 90% of that */
  width: auto;
  flex-shrink: 0;
}

.hero-brand-name {
  font-size: clamp(2.75rem, 6.5vw, 4.75rem); /* 76px on desktop */
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

.hero-brand-accent {
  color: var(--accent);
}

.hero-brand-text {
  display: block;
}

/* Hero heading under the logo: same style as the section headings, a step below the name */
.chapter--hero .display {
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-wrap: balance;
}

.chapter--team .chapter-inner {
  max-width: 52rem;
}

.chapter--team .support {
  max-width: 36rem;
}

@media (max-width: 520px) {
  .hero-brand {
    flex-direction: column;
    gap: 0.9rem;
  }

}

.chapter--hero .support,
.chapter--final .support {
  max-width: 36rem;
}

/* Examples chapter: taller than one viewport, card grid */
.chapter--examples {
  min-height: auto;
  height: auto;
  max-height: none;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 4rem;
  overflow: visible;
}

.chapter--examples .chapter-inner {
  max-width: 56rem;
  text-align: center;
}

.chapter--examples .support {
  max-width: 36rem;
}

.chapter--examples .card-grid {
  margin-top: 2rem;
  text-align: left;
}

.chapter--examples .card {
  padding: 1.15rem 1.1rem;
}

.chapter--examples .display {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
}

.card .card-instead {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.9;
}

.examples-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1rem;
  font-weight: 600;
}

.display {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

.support {
  margin: 1.1rem auto 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 28rem;
  line-height: 1.45;
}

.chapter .text-link {
  display: inline-block;
  margin-top: 1.25rem;
}

.chapter-label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent-text);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

/* Home intro: logo reveal on every load of index.html.
   html.intro is set by an inline script in the head (skipped for reduced motion, removed after 5 s as a failsafe).
   The hidden start state is pure CSS, so nothing shows before main.js runs, whatever the font:
   the name sits in an overflow window (.hero-brand-name) with its text pushed fully outside it by a
   percentage of its own size. No clip-path (Safari does not apply it reliably here).
   main.js only measures the slide distance and animates transforms and opacity into the normal hero.
   The padding plus equal negative margin keeps the layout identical and leaves room for descenders. */
html.intro .chapter--hero .chapter-inner.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.intro .hero-brand-mark {
  opacity: 0;
}

html.intro .hero-brand-name {
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0.3em 0.15em 0.3em 0;
  margin: -0.3em -0.15em -0.3em 0;
}

html.intro .hero-brand-text {
  transform: translateX(-106%);
}

@media (max-width: 520px) {
  html.intro .hero-brand-name {
    padding: 0 0.15em 0.3em;
    margin: 0 -0.15em -0.3em;
  }

  html.intro .hero-brand-text {
    transform: translateY(-140%);
  }
}

html.intro .chapter--hero .display,
html.intro .chapter--hero .support,
html.intro .chapter--hero .cta-row {
  opacity: 0;
}

/* Reveal on scroll. Hidden only while html.reveal-ready is set (by intro-init.js, removed by its
   failsafe if main.js never takes over), so content can never stay invisible. */
.reveal {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

html.reveal-ready .chapter.is-inview .reveal {
  opacity: 1;
  transform: translateY(0);
}

.chapter.is-inview .reveal .display {
  transition-delay: 0.05s;
}

/* Chapter backgrounds - abstract systems UI */
.chapter-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow {
  position: absolute;
  width: min(70vw, 36rem);
  height: min(70vw, 36rem);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.glow-a {
  background: var(--accent-glow);
  top: 10%;
  right: -10%;
}

.glow-b {
  background: rgba(8, 145, 178, 0.30);
  bottom: 5%;
  left: -15%;
}

.glow-c {
  background: rgba(8, 145, 178, 0.24);
  top: 40%;
  left: 30%;
}

.grid-fade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
  opacity: 0.7;
}

.noise-panel {
  position: absolute;
  inset: 20% 15%;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(8, 145, 178, 0.06), transparent 60%);
}

.geo {
  position: absolute;
  border: 1px solid rgba(8, 145, 178, 0.35);
  border-radius: 0.75rem;
  background: var(--accent-dim);
}

.geo-1 {
  width: 8rem;
  height: 8rem;
  top: 18%;
  right: 12%;
  transform: rotate(12deg);
}

.geo-2 {
  width: 6rem;
  height: 12rem;
  bottom: 18%;
  left: 10%;
  transform: rotate(-8deg);
}

.panel-stack {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  opacity: 0.55;
}

.panel-stack--right {
  right: auto;
  left: 8%;
}

.ui-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 11rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.85);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.ui-panel--accent {
  border-color: rgba(8, 145, 178, 0.55);
  color: var(--accent);
  box-shadow: 0 0 24px rgba(8, 145, 178, 0.18);
}

.ui-panel .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #333;
}

.ui-panel .dot.on {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.flow-line {
  position: absolute;
  left: 50%;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(transparent, var(--accent), transparent);
  opacity: 0.25;
}

@media (max-width: 900px) {
  .panel-stack,
  .panel-stack--right,
  .geo,
  .flow-line {
    display: none;
  }
}

/* Chapter dots */
.chapter-dots {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.chapter-dots button {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.chapter-dots button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.25);
}

.chapter-dots button:hover {
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .chapter-dots {
    display: none;
  }
}

/* Home: snap on the document scroller (html) - body-as-scroller breaks on macOS Safari/Chrome */
html:has(body.home) {
  scroll-behavior: auto; /* JS owns one-section steps */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

/* Set by main.js for a moment while the logo jumps to the top, so snap cannot pull it back */
html.snap-off,
html.snap-off body {
  scroll-snap-type: none !important;
}

body.home {
  overflow-x: hidden;
  /* do NOT set height + overflow-y here - that steals snap from the real scroller */
}

body.home .story {
  height: auto;
  overflow: visible;
}

body.home .chapter {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

body.home .chapter--examples {
  min-height: auto;
  height: auto;
  max-height: none;
}

/* Added by main.js: lets tall sections be scrolled to their end (needed for Safari) */
body.home .snap-end {
  height: 1px;
  margin-top: -1px; /* takes no space */
  pointer-events: none;
  scroll-snap-align: end;
}

.site-footer--home {
  min-height: auto;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  padding-top: 3rem;
}

/* Example AI employee (scheduling agent) --- */
.chapter--feature {
  align-items: center;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 1.75rem;
}

body.home .chapter--feature {
  height: auto;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
}

.chapter--feature .chapter-inner {
  max-width: 60rem;
}

.chapter--feature .display {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
}

.chapter--feature .support {
  max-width: 34rem;
}

.feature-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "main chat"
    "cta  chat";
  grid-template-rows: auto 1fr;
  gap: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  text-align: left;
  align-items: start;
}

.feature-main {
  grid-area: main;
}

.feature-main h3 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.feature-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  counter-reset: fstep;
}

.feature-steps li {
  counter-increment: fstep;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.8rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.8rem 1rem;
  background: var(--bg-elevated);
}

.feature-steps li::before {
  content: counter(fstep);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-steps p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.feature-steps strong {
  color: var(--text);
  font-weight: 600;
}

.feature-cta {
  grid-area: cta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.feature-cta p {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

/* More AI employees (card grid) --- */
.card-grid.agent-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-card {
  display: flex;
  flex-direction: column;
}

.agent-steps {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.agent-steps li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.agent-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

.card-grid .card.agent-card--cta {
  border-style: dashed;
  border-color: rgba(8, 145, 178, 0.45);
  background: var(--accent-dim);
}

.agent-card--cta .btn {
  margin-top: auto;
  align-self: flex-start;
}

.card-grid .agent-card--cta p {
  margin-bottom: 1rem;
}

.section-intro {
  margin: -0.5rem 0 1.25rem;
  color: var(--muted);
  max-width: 40rem;
}

/* Home: compact version in one screen */
.chapter--agents {
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 1.75rem;
}

body.home .chapter--agents {
  height: auto;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
}

.chapter--agents .chapter-inner {
  max-width: 60rem;
}

.chapter--agents .display {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.chapter--agents .support {
  max-width: 34rem;
}

.card-grid.agent-grid--compact {
  margin-top: 1.75rem;
  text-align: left;
}

.agent-grid--compact .card {
  padding: 1.1rem 1.15rem;
}

.agent-grid--compact .card h3 {
  font-size: 1.05rem;
}

.agent-grid--compact .card p {
  font-size: 0.9rem;
}

.agent-grid--compact .agent-card--cta .btn {
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
}

.agent-more-link {
  display: inline-block;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .card-grid.agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .card-grid.agent-grid {
    grid-template-columns: 1fr;
  }

  .agent-card--cta .btn {
    align-self: stretch;
  }
}

/* Services page: framed version */
.page-section[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem); /* keep in-page links clear of the fixed header */
}

.card .card-link {
  margin-top: 0.75rem;
}

.card-link .text-link {
  font-size: 0.9rem;
}

@media (max-width: 800px) {
  .feature-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "chat"
      "cta";
    grid-template-rows: auto;
  }

  .chapter--feature .feature-cta {
    justify-content: center;
    text-align: center;
  }
}

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

/* Contact form honeypot: off-screen for people, still in the DOM for bots */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form Turnstile check: space is reserved only once the widget is being rendered (not on file://) */
.turnstile-field {
  display: none;
}

.turnstile-field.is-on {
  display: block;
  min-height: 65px;
}

/* Inner pages --- */
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--header-h) + 3rem) 1.25rem 4rem;
}

.page-hero {
  max-width: 40rem;
  margin-bottom: 3.5rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.lede {
  color: var(--muted);
  font-size: 1.15rem;
  margin: 0;
  max-width: 36rem;
}

.page-section {
  margin-bottom: 3.5rem;
}

.section-title {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1.25rem;
}

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1.35rem 1.25rem;
  background: linear-gradient(160deg, rgba(8, 145, 178, 0.08), transparent 55%);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.card:hover {
  border-color: rgba(8, 145, 178, 0.45);
  box-shadow: 0 0 32px rgba(8, 145, 178, 0.10);
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.stat-block {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1.5rem;
  background: var(--bg-elevated);
}

.stat-block h3 {
  margin: 0 0 0.5rem;
  color: var(--accent-text);
  font-size: 1.1rem;
}

.stat-block p {
  margin: 0;
  color: var(--muted);
}

.note {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.page-cta {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, var(--accent-dim), transparent 70%),
    var(--bg-elevated);
}

.page-cta h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}

.page-cta .lede {
  margin: 0 auto 1.5rem;
  max-width: 28rem;
  text-align: center;
}

/* Steps */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--border);
  margin-left: 0.75rem;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 0 0 2.5rem 1.5rem;
  position: relative;
}

.step:last-child {
  padding-bottom: 0;
}

.step-num {
  position: absolute;
  left: -0.75rem;
  top: 0;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.step h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.step p {
  margin: 0;
  color: var(--muted);
  max-width: 36rem;
}

.step > div {
  grid-column: 1 / -1;
  padding-left: 0.5rem;
}

/* About */
.card-grid--pairs {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  max-width: 52rem;
}

.card-grid--pairs + .note {
  max-width: 52rem;
}

.text-balance {
  text-wrap: balance;
}

.prose p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 38rem;
}

.about-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, var(--accent-dim), transparent 50%);
  max-width: 36rem;
}

.about-mark {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.04em;
}

.about-card h2 {
  margin: 0 0 0.15rem;
  font-size: 1.35rem;
}

.role {
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.75rem !important;
}

.about-card p {
  margin: 0 0 0.5rem;
  color: var(--muted);
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-form .btn {
  align-self: flex-start; /* pill button, not a full-width bar */
}

@media (max-width: 480px) {
  .contact-form .btn {
    align-self: stretch;
  }
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s;
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-note {
  min-height: 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.form-note.is-success {
  color: var(--accent-text);
}

.form-note.is-error {
  color: #f87171;
}

[data-theme="light"] .form-note.is-error {
  color: #b91c1c;
}

.form-note a {
  color: var(--accent-text);
  text-decoration: underline;
}

.contact-form .btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.form-success {
  border: 1px solid var(--accent);
  border-radius: 0.85rem;
  padding: 1.5rem 1.25rem;
  background: var(--accent-dim);
  outline: none;
}

.form-success p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

/* Contact page: direct email line under the intro */
.contact-email {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.contact-email a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-aside .muted {
  color: var(--muted);
}

.aside-panel {
  margin-top: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1.25rem;
  background: var(--bg-elevated);
}

.aside-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.aside-panel ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.aside-panel li {
  margin-bottom: 0.4rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.25rem;
  background: #000;
}

.footer-inner {
  max-width: calc(var(--max) - 2.5rem); /* line up with header/page content (which have 1.25rem side padding) */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  margin: 0;
  font-weight: 600;
}

.footer-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-meta a {
  color: var(--muted);
}

.footer-meta a:hover {
  color: var(--accent);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-nav a {
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-nav a:hover {
  color: var(--text);
}

/* Light theme chrome overrides (hardcoded dark values) */
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .skip-link,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .about-mark {
  color: #fff;
}

html[data-theme="light"] .nav-cta {
  color: #fff !important;
}

@media (max-width: 768px) {
  html[data-theme="light"] .nav-menu {
    background: #fff;
  }
}

html[data-theme="light"] .grid-fade {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}

html[data-theme="light"] .glow {
  opacity: 0.22;
}

html[data-theme="light"] .glow-b {
  background: rgba(8, 145, 178, 0.16);
}

html[data-theme="light"] .glow-c {
  background: rgba(8, 145, 178, 0.12);
}

html[data-theme="light"] .noise-panel {
  background: linear-gradient(145deg, rgba(8, 145, 178, 0.025), transparent 60%);
}

html[data-theme="light"] .geo {
  border-color: rgba(8, 145, 178, 0.3);
}

html[data-theme="light"] .ui-panel {
  background: rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .ui-panel--accent {
  border-color: rgba(8, 145, 178, 0.4);
  box-shadow: 0 0 24px rgba(8, 145, 178, 0.1);
}

html[data-theme="light"] .chapter-dots button {
  border-color: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .card {
  background: linear-gradient(160deg, rgba(8, 145, 178, 0.06), transparent 55%);
}

html[data-theme="light"] .card:hover {
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow: 0 0 32px rgba(8, 145, 178, 0.08);
}

html[data-theme="light"] .field input:hover,
html[data-theme="light"] .field textarea:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .site-footer {
  background: var(--bg);
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Phones / coarse pointers: no scroll snap at all, so the homepage scrolls like the other pages.
   Chapters take natural height (hero still fills the first screen). Desktop keeps mandatory snap. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html:has(body.home),
  html:has(body.home) body {
    scroll-snap-type: none;
  }

  body.home .chapter,
  body.home .chapter--feature,
  body.home .chapter--agents,
  body.home .chapter--examples,
  body.home .snap-end,
  .site-footer--home {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  body.home .chapter,
  body.home .chapter--feature,
  body.home .chapter--agents {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  body.home .chapter--hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* Agents hub (agents.html) --- */
.agents-hero {
  max-width: 44rem;
}

.agent-card .card-link {
  margin-top: auto;
  padding-top: 0.75rem;
}

.agent-detail {
  scroll-margin-top: calc(var(--header-h) + 1rem); /* keep #receptionist clear of the fixed header */
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}

.agent-detail-head {
  margin-bottom: 3.5rem;
}

.agent-detail-title {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.agent-detail-head .cta-row {
  justify-content: flex-start;
}

/* AI Receptionist page --- */
.page-hero .cta-row {
  justify-content: flex-start;
}

.cta-row--center {
  justify-content: center;
}

.rx-hero {
  max-width: 44rem;
}

.rx-fineprint {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.rx-fineprint a {
  color: var(--accent-text);
}

.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-call svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.rx-intro {
  margin: 0 0 1.25rem;
  max-width: 40rem;
  color: var(--muted);
}

/* 16:9 slot reserved up front so nothing shifts when the poster or video loads */
.video-frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  overflow: hidden;
  background: var(--bg-elevated);
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-frame .video-missing {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.95rem;
}

.video-frame .video-missing a {
  color: #67e8f9;
}

/* mp4 missing or unplayable: show the poster image with the note, no dead player controls */
.video-frame.is-missing {
  background: #000 var(--video-poster, url("assets/video/kelt-ai-receptionist-poster.jpg")) center / cover no-repeat;
}

.video-frame.is-missing video {
  visibility: hidden;
}

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

  html:has(body.home) {
    scroll-snap-type: y proximity;
  }

  body.home .chapter {
    scroll-snap-stop: normal;
  }

  .reveal,
  html.reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow,
  .chapter-bg {
    transition: none !important;
  }

  .btn,
  .nav-menu,
  .card {
    transition: none;
  }
}

/* Examples grid: 8 cards, 4 x 2 on wide screens */
@media (min-width: 1000px) {
  .chapter--examples .chapter-inner { max-width: 68rem; }
  .chapter--examples .card-grid.example-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 999px) {
  .chapter--examples .card-grid.example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* About card: real logo mark instead of KS tile */
.about-mark { width: auto; height: 3.5rem; background: none; border-radius: 0; }
.about-mark img { height: 3.5rem; width: auto; }

/* AI receptionist call lines + end-card tap-to-call */
.hero-call, .agent-call { margin-top: 0.75rem; font-size: 0.95rem; }
.contact-call { margin-bottom: 0.25rem; }
.video-wrap { position: relative; }
.video-endcall { margin: 0.75rem auto 0; display: flex; width: fit-content; max-width: 100%; }
/* Always below the video; space is reserved while hidden so nothing shifts */
.video-endcall[hidden] { display: flex; visibility: hidden; }
.video-endcall .nowrap { white-space: nowrap; }
.video-endcall { flex-wrap: wrap; justify-content: center; white-space: nowrap; column-gap: 0.35em; text-align: center; }

/* Home: AI Receptionist slide (replaces the scheduling example) */
.rx-slide .feature-main { grid-area: main; }
.rx-slide .rx-slide-video { grid-area: chat; min-width: 0; }
.rx-slide .feature-cta { flex-direction: column; align-items: flex-start; }
.rx-slide .feature-cta .agent-call { margin: 0; }
.rx-slide .video-endcall { font-size: 0.9rem; }
@media (min-width: 801px) {
  /* keep the slide within one screen for desktop snap */
  .rx-slide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .rx-slide .video-wrap { max-width: calc((100svh - 26rem) * 16 / 9); min-width: 20rem; margin-left: auto; }
}
@media (max-width: 800px) {
  .rx-slide .feature-cta { align-items: center; }
}


/* AI Employees: receptionist section (title, subtitle, demo near the top) */
.rx-title-caps { margin-bottom: 0.25rem; }
.rx-subtitle { margin: 0.5rem 0 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--muted); }
.rx-demo { margin-top: 1.5rem; }
.rx-demo .rx-intro { margin-bottom: 1rem; }
.rx-demo .rx-fineprint { margin-top: 1rem; }
.rx-demo .cta-row { margin-top: 1rem; }

/* Home desktop: the examples slide was natural-height and top-aligned (align-items: flex-start), so it sat high
   while every other slide is a full screen centered. Give it a full screen and center it like the rest;
   if the grid is ever taller than the screen it still grows (min-height, not height). */
@media (min-width: 901px) and (hover: hover), (min-width: 901px) and (pointer: fine) {
  body.home .chapter--examples {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    align-items: center;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 3rem;
  }
}

/* Home hero: call pill sits with the other hero buttons (same intro reveal via .cta-row) */
.hero-call-btn { white-space: nowrap; column-gap: 0.4em; }
@media (max-width: 520px) {
  .chapter--hero .cta-row .btn { flex: 1 1 100%; max-width: 22rem; margin-inline: auto; justify-content: center; }
}
@media (max-width: 400px) { .hero-call-btn { font-size: 0.9rem; padding-inline: 0.9rem; } }