/* Self-hosted variable fonts. Version-stamped filenames: bump the stamp to ship an update.
   Inter (Rasmus Andersson) is licensed under the SIL Open Font License 1.1, which permits
   self-hosting. JetBrains Mono is also SIL OFL 1.1. */
/* Inter 4 variable, the full official file from rsms.me/inter: it carries the cv01 and ss03
   alternates Linear uses (see --ks-features). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-variable-v2.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* dealership.usekenro.com — the shared TUD "Linear look" (6 Oct 2026).
   The design system is tudinnovations.com docs/DESIGN-SYSTEM.md; the
   reference build is usekaryo.com (assets/karyo.css). This site differs from
   it only in the accent: Kenro Dealership violet.

   Every colour lives in a token below; components reference tokens only.
   Reveal states are opt-in: they apply only under html.js-reveal, which
   assets/reveal-gate.js sets and assets/site.js confirms. If the scripts
   never run, nothing on the page is hidden. */

/* ═══ Tokens ═══════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* Canvas and surfaces */
  --ks-bg: #08090a;
  --ks-surface: #0f1012;
  --ks-elevated: #15161a;
  --ks-overlay: rgba(8, 9, 10, 0.72); /* blurred bars */
  --ks-overlay-strong: rgba(8, 9, 10, 0.94);
  --ks-soft: rgba(255, 255, 255, 0.03); /* hover wash */
  --ks-soft-strong: rgba(255, 255, 255, 0.06);
  --ks-highlight: rgba(255, 255, 255, 0.05); /* inset top edge */
  --ks-grid-line: rgba(255, 255, 255, 0.035);

  /* Hairlines */
  --ks-line: rgba(255, 255, 255, 0.08);
  --ks-line-strong: rgba(255, 255, 255, 0.14);
  --ks-line-hover: rgba(255, 255, 255, 0.22);

  /* Text. Ratios are against --ks-bg / --ks-elevated. */
  --ks-text: #f5f6f7; /* 18.4 / 16.7 */
  --ks-muted: #8b9099; /* secondary: 6.2 / 5.6 */
  --ks-faint: #82878f; /* small print: 5.5 / 5.0 */
  --ks-quiet: #5e636b; /* decorative only (dots, skeletons), never body text */
  --ks-on-brand: #ffffff;

  /* The one accent: Kenro Dealership violet */
  --ks-brand-rgb: 124, 58, 237;
  --ks-brand: #7c3aed; /* fill: white text 5.7:1 */
  --ks-brand-cta: var(--ks-brand);
  --ks-brand-deep: #6d28d9; /* hover/press fill: white text 7.1:1 */
  --ks-brand-light: #c084fc; /* accent as text: 7.5:1 on canvas */
  --ks-brand-soft: rgba(var(--ks-brand-rgb), 0.12);
  --ks-brand-line: rgba(var(--ks-brand-rgb), 0.45);
  --ks-glow: rgba(var(--ks-brand-rgb), 0.45);
  --ks-gold: var(--ks-muted); /* legacy name: eyebrow colour */

  /* Status, for the sample screen only */
  --ks-danger: #c75d5d;
  --ks-ok-text: #5fbf8a;
  --ks-ok-soft: rgba(95, 191, 138, 0.12);
  --ks-warn-text: #e0b062;
  --ks-warn-soft: rgba(224, 176, 98, 0.12);

  /* Depth */
  --ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ks-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --ks-shadow-lg: 0 40px 100px -24px rgba(0, 0, 0, 0.75);

  /* Type */
  --ks-font:
    "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    sans-serif;
  --ks-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --ks-features: "cv01", "ss03";
  --ks-weight-head: 540;
  --ks-weight-strong: 560;

  /* Shape and layout */
  --ks-radius-sm: 8px;
  --ks-radius: 12px;
  --ks-radius-lg: 16px;
  --ks-max: 1200px;
  --ks-gutter: clamp(16px, 4vw, 40px);
  --ks-bar-h: 56px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 900ms;
}

/* ═══ Base ═════════════════════════════════════════════════════════════ */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--ks-bg);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html {
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
}
.ks-page {
  position: relative;
  min-height: 100vh;
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family: var(--ks-font);
  font-feature-settings: var(--ks-features);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
}
.ks-page * {
  box-sizing: border-box;
}
.ks-page a {
  color: inherit;
}
.ks-page :focus-visible {
  outline: 2px solid var(--ks-brand-light);
  outline-offset: 3px;
}
.ks-page :focus:not(:focus-visible) {
  outline: none;
}
.ks-page img {
  max-width: 100%;
  display: block;
}
.ks-page ::selection {
  background: rgba(var(--ks-brand-rgb), 0.4);
  color: var(--ks-text);
}
.ks-mono {
  font-family: var(--ks-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ═══ Type and layout ══════════════════════════════════════════════════ */
.ks-shell {
  width: min(100% - 2 * var(--ks-gutter), var(--ks-max));
  margin: 0 auto;
}
.ks-section {
  padding: 64px 0;
}
.ks-section-head {
  max-width: 760px;
  margin: 0 0 36px;
}
.ks-eyebrow,
.ks-page p.ks-eyebrow {
  margin: 0 0 14px;
  color: var(--ks-gold);
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ks-page h1,
.ks-page h2,
.ks-page h3,
.ks-page p {
  margin-top: 0;
}
.ks-page h1,
.ks-page h2,
.ks-page h3 {
  font-weight: var(--ks-weight-head);
  color: var(--ks-text);
}
.ks-page h1 {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  max-width: 20ch;
}
.ks-page h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.ks-page h1,
.ks-page h2 {
  text-wrap: balance;
}
.ks-page h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.ks-lede {
  color: var(--ks-muted);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 640px;
}
.ks-small {
  color: var(--ks-faint);
  font-size: 13px;
  line-height: 1.5;
}
.ks-small a {
  color: var(--ks-muted);
  text-underline-offset: 3px;
  text-decoration-color: var(--ks-line-hover);
  transition: color 160ms ease;
}
.ks-small a:hover {
  color: var(--ks-text);
}

/* Hairline between bands, and anchors that land under the fixed bar. */
.ks-page main > .ks-section + .ks-section {
  border-top: 1px solid var(--ks-line);
}
.ks-page main > .ks-section {
  scroll-margin-top: 72px;
}
@media (min-width: 720px) {
  .ks-section {
    padding: 96px 0;
  }
}

/* Inner pages (guides, blog): the first band is the page hero. */
.ks-page main > .ks-section.ks-shell:first-child {
  padding-top: 132px;
  padding-bottom: 72px;
}
@media (min-width: 720px) {
  .ks-page main > .ks-section.ks-shell:first-child {
    padding-top: 168px;
    padding-bottom: 88px;
  }
}

/* ═══ Header bar ═══════════════════════════════════════════════════════
   Slim and transparent over the hero; a blurred, hairlined bar once the page
   scrolls. Logo left, links centre, one accent button right. */
.ks-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  min-height: var(--ks-bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px max(var(--ks-gutter), (100% - var(--ks-max)) / 2);
  border-bottom: 1px solid transparent;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    backdrop-filter 180ms ease;
}
.ks-nav.is-scrolled {
  background: var(--ks-overlay);
  border-bottom-color: var(--ks-line);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.ks-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--ks-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ks-logo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ks-line-strong);
  border-radius: 7px;
  background: #000000;
  overflow: hidden;
}
.ks-logo .ks-mark,
.ks-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.ks-nav-links {
  display: none;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}
.ks-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--ks-radius-sm);
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition:
    color 160ms ease,
    background 160ms ease;
}
.ks-nav-links a:hover {
  color: var(--ks-text);
  background: var(--ks-soft);
}
.ks-nav .ks-nav-cta {
  display: inline-flex;
  margin-left: auto;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}
.ks-menu {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-sm);
  background: var(--ks-soft);
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
}
.ks-menu span {
  width: 16px;
  height: 1.5px;
  background: var(--ks-text);
  display: block;
  transition:
    transform 260ms var(--ease),
    opacity 180ms ease;
}
.ks-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.ks-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ks-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
.ks-menu-panel {
  position: fixed;
  inset: 64px var(--ks-gutter) auto;
  z-index: 39;
  display: none;
  padding: 10px;
  background: var(--ks-overlay-strong);
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ks-menu-panel.is-open {
  display: grid;
  gap: 2px;
}
.ks-menu-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--ks-radius-sm);
  text-decoration: none;
  color: var(--ks-text);
  font-size: 15px;
}
.ks-menu-panel a:not(.ks-btn):hover {
  background: var(--ks-soft-strong);
}
.ks-menu-panel .ks-btn {
  margin-top: 8px;
  justify-content: center;
}
@media (min-width: 920px) {
  .ks-nav-links {
    display: flex;
  }
  .ks-nav .ks-nav-cta {
    margin-left: 0;
  }
  .ks-menu,
  .ks-menu-panel,
  .ks-menu-panel.is-open {
    display: none;
  }
}

/* ═══ Buttons ══════════════════════════════════════════════════════════ */
.ks-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--ks-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 510;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Magnetic offset lives in custom properties, so :active composes with it. */
  transform: translate(var(--mx-btn, 0px), var(--my-btn, 0px));
  transition:
    transform 500ms var(--ease),
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 240ms ease;
}
.ks-btn:active {
  transform: scale(0.98) translate(var(--mx-btn, 0px), var(--my-btn, 0px));
}
.ks-btn-primary {
  background: var(--ks-brand-cta);
  color: var(--ks-on-brand);
  box-shadow:
    inset 0 1px 0 var(--ks-soft-strong),
    var(--ks-shadow-sm);
}
.ks-btn-primary:hover {
  background: var(--ks-brand-deep);
  box-shadow:
    inset 0 1px 0 var(--ks-soft-strong),
    0 8px 24px rgba(var(--ks-brand-rgb), 0.28);
}
.ks-btn-secondary {
  background: transparent;
  color: var(--ks-text);
  border-color: var(--ks-line-strong);
}
.ks-btn-secondary:hover {
  background: var(--ks-soft);
  border-color: var(--ks-line-hover);
}
.ks-btn-lg {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
}
.ks-btn-row,
.kd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ks-page .ks-btn-row {
  margin-top: 28px;
}
.kd-cta-row {
  margin-top: 28px;
}

/* ═══ Backdrop ═════════════════════════════════════════════════════════
   A faint hairline grid that fades out from the top of the page, and one
   soft violet light above the fold. Static: nothing here moves. */
.ku-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(110vh, 980px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ku-backdrop-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ks-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ks-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 0%,
    #000 20%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 0%,
    #000 20%,
    transparent 75%
  );
}
.ku-backdrop-aura {
  position: absolute;
  top: -340px;
  left: 50%;
  width: min(1100px, 140vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--ks-brand-rgb), 0.14) 0%,
    rgba(var(--ks-brand-rgb), 0.05) 40%,
    transparent 70%
  );
  filter: blur(40px);
}
/* Content sits above the backdrop; the fixed chrome keeps its own position. */
.ks-page > main,
.ks-page > footer {
  position: relative;
  z-index: 1;
}

/* Skip link: off-screen until focused. */
.ks-page .ks-skip {
  position: absolute;
  top: 10px;
  left: var(--ks-gutter);
  z-index: 50;
  padding: 10px 14px;
  background: var(--ks-brand-cta);
  color: var(--ks-on-brand);
  border-radius: var(--ks-radius-sm);
  font-weight: 560;
  text-decoration: none;
  transform: translateY(-300%);
}
.ks-page .ks-skip:focus-visible,
.ks-page .ks-skip:focus {
  transform: none;
}

/* ═══ Homepage hero ════════════════════════════════════════════════════
   Left-aligned copy, then the sample console directly beneath it. */
.ku-hero {
  position: relative;
  padding: 120px 0 72px;
}
.ku-hero-copy {
  max-width: 800px;
}
.ks-page .ku-hero h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 540;
  letter-spacing: -0.032em;
  line-height: 1.05;
  max-width: 18ch;
}
.ku-hero .ku-lede {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ks-muted);
}
.ku-hero-cta {
  margin-top: 32px;
}
@media (min-width: 720px) {
  .ku-hero {
    padding: 168px 0 96px;
  }
}
/* What the system covers, as small pills under the buttons. */
.kd-tags {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kd-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ks-line);
  border-radius: 999px;
  background: var(--ks-soft);
  color: var(--ks-muted);
  font-size: 13px;
  font-weight: 500;
}
.kd-tags li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ks-brand-light);
}

/* ═══ Sample screen (homepage) ════════════════════════════════════════
   A floating console window built in HTML, a violet light behind it.
   Sample data only, and labelled as such. */
.ku-showcase {
  position: relative;
  margin: 64px 0 0;
  perspective: 1600px;
}
.ku-showcase::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -14%;
  width: 118%;
  height: 92%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    var(--ks-glow) 0%,
    rgba(var(--ks-brand-rgb), 0.24) 50%,
    transparent 80%
  );
  filter: blur(48px);
  pointer-events: none;
}
.ku-showcase > * {
  position: relative;
  z-index: 1;
}
.ku-window {
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
  box-shadow:
    var(--ks-shadow-lg),
    inset 0 1px 0 var(--ks-highlight);
  overflow: hidden;
  font-size: 13px;
}
.ku-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ks-line);
  background: var(--ks-elevated);
}
.ku-dots {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}
.ku-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ks-line-strong);
  display: block;
}
.ku-url {
  flex: 1 1 auto;
  max-width: 340px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--ks-soft);
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ku-app {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 380px;
}
.ku-side {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--ks-line);
  list-style: none;
  margin: 0;
}
.ku-side li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--ks-muted);
  font-size: 13px;
}
.ku-side li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid var(--ks-quiet);
  flex: 0 0 auto;
}
.ku-side li.is-on {
  background: var(--ks-soft-strong);
  color: var(--ks-text);
}
.ku-side li.is-on::before {
  border-color: var(--ks-brand-light);
}
.ku-side .ku-side-h {
  margin: 0 0 8px;
  padding: 0 10px;
  color: var(--ks-text);
  font-weight: 600;
  font-size: 13px;
}
.ku-side .ku-side-h::before {
  display: none;
}
.ku-side .ku-side-h img {
  width: 16px;
  height: 16px;
}
.ku-main {
  min-width: 0;
  padding: 20px 22px 22px;
}
.ku-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 16px;
}
.ku-main-head b {
  color: var(--ks-text);
  font-size: 16px;
  font-weight: 590;
  letter-spacing: -0.01em;
}
.ku-main-head span {
  color: var(--ks-faint);
  font-size: 12px;
}
.ku-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ku-kpis div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: var(--ks-bg);
}
.ku-kpis span {
  color: var(--ks-faint);
  font-size: 11.5px;
}
.ku-kpis b {
  color: var(--ks-text);
  font-size: 18px;
  font-weight: 590;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* The stock filters, as in the app: one chip per stage. */
.kd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.kd-chips li {
  padding: 3px 10px;
  border: 1px solid var(--ks-line);
  border-radius: 999px;
  color: var(--ks-muted);
  font-size: 11.5px;
  font-weight: 510;
}
.kd-chips li.is-on {
  border-color: rgba(var(--ks-brand-rgb), 0.4);
  background: var(--ks-brand-soft);
  color: var(--ks-brand-light);
}
.ku-rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ku-rows th,
.ku-rows td {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid var(--ks-line);
  white-space: nowrap;
}
.ku-rows thead th {
  padding-top: 0;
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ku-rows tbody th {
  color: var(--ks-text);
  font-weight: 510;
}
.ku-rows td {
  color: var(--ks-muted);
  font-variant-numeric: tabular-nums;
}
.ku-rows tbody tr:last-child th,
.ku-rows tbody tr:last-child td {
  border-bottom: 0;
}
.ku-rows .num {
  text-align: right;
}
/* Stage pills: neutral when bought in, amber in refurbishment, violet when
   listed or booked, green once delivered. Sample screen only. */
.ku-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ks-line);
  background: var(--ks-soft);
  color: var(--ks-muted);
  font-size: 11.5px;
  font-weight: 510;
}
.ku-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ks-quiet);
}
.ku-status.is-refurb {
  color: var(--ks-warn-text);
  background: var(--ks-warn-soft);
}
.ku-status.is-refurb::before {
  background: var(--ks-warn-text);
}
.ku-status.is-listed,
.ku-status.is-booked {
  border-color: rgba(var(--ks-brand-rgb), 0.3);
  background: var(--ks-brand-soft);
  color: var(--ks-brand-light);
}
.ku-status.is-listed::before {
  background: transparent;
  border: 1.5px solid var(--ks-brand-light);
  width: 4px;
  height: 4px;
}
.ku-status.is-booked::before {
  background: var(--ks-brand-light);
}
.ku-status.is-done {
  color: var(--ks-ok-text);
  background: var(--ks-ok-soft);
}
.ku-status.is-done::before {
  background: var(--ks-ok-text);
}
.ku-sample-note {
  margin: 14px 0 0;
  color: var(--ks-faint);
  font-size: 12.5px;
  text-align: center;
}
/* Phones: the sidebar folds away and secondary columns drop out, so the
   stage column always stays in view. */
@media (max-width: 860px) {
  .ku-app {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .ku-side {
    display: none;
  }
  .ku-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .ku-main {
    padding: 16px 14px 16px;
  }
  .ku-rows .is-wide {
    display: none;
  }
  .ku-rows th,
  .ku-rows td {
    padding: 9px 6px;
  }
  .ku-url {
    font-size: 10.5px;
  }
}

/* ═══ Homepage bands ═══════════════════════════════════════════════════ */
/* Proof strip: three facts in a hairline grid. */
.kd-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
}
.kd-proof div {
  background: var(--ks-surface);
  padding: 22px 24px;
}
.kd-proof b {
  display: block;
  font-size: 22px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
.kd-proof span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ks-muted);
}
.kd-intro .kd-lede {
  margin: 0 0 28px;
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ks-text);
  font-weight: 450;
  letter-spacing: -0.01em;
}
.kd-intro .kd-cta-row {
  margin: 0 0 40px;
}
@media (max-width: 720px) {
  .kd-proof {
    grid-template-columns: 1fr;
  }
}

/* Visually hidden label (screen readers only). */
.kd-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kd-kicker,
.ks-page p.kd-kicker {
  margin: 0;
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-brand-light);
}

/* A row that swipes sideways on phones and tablets: scroll-snap only, no
   script. It bleeds to the screen edges so the next card is half in view.
   From 900px it becomes a plain grid. */
.kd-swipe {
  margin: 0 calc(-1 * var(--ks-gutter));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--ks-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ks-line-strong) transparent;
}
.kd-swipe:focus-visible {
  outline: 2px solid var(--ks-brand-light);
  outline-offset: -2px;
}
.kd-swipe > ul {
  list-style: none;
  margin: 0;
  padding: 2px var(--ks-gutter) 16px;
  display: flex;
  gap: 14px;
  width: max-content;
}
.kd-swipe > ul > li {
  scroll-snap-align: start;
}

/* The app, in phone frames. The frame is CSS only. */
.kd-shot {
  flex: 0 0 min(66vw, 248px);
}
.kd-phone {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 30px;
  background: var(--ks-elevated);
  box-shadow:
    inset 0 1px 0 var(--ks-highlight),
    var(--ks-shadow-md);
}
.kd-phone img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--ks-surface);
}
.kd-shot-cap {
  position: relative;
  padding: 14px 4px 0;
}
.ks-page .kd-shot-cap h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.kd-shot-cap p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}
/* Only the desktop picker uses this button (see the scripting block). */
.kd-shot-pick {
  display: none;
}
.ks-page p.kd-shots-note {
  margin: 16px 0 0;
}

/* The console, in browser frames. Each frame links to the full-size
   screenshot. position: relative keeps the screen-reader label inside the
   frame, or it escapes the swipe row and the page scrolls sideways. */
.kd-browser {
  position: relative;
  display: block;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius);
  background: var(--ks-elevated);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--ks-shadow-md);
  transition:
    border-color 300ms ease,
    transform 600ms var(--ease),
    box-shadow 600ms var(--ease);
}
.kd-browser:hover {
  border-color: var(--ks-line-hover);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(var(--ks-brand-rgb), 0.18),
    0 24px 60px -24px rgba(var(--ks-brand-rgb), 0.35);
}
.kd-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ks-line);
  background: var(--ks-elevated);
}
.kd-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-line-strong);
}
.kd-browser-bar b {
  flex: 0 1 220px;
  height: 12px;
  margin-left: 10px;
  border-radius: 6px;
  background: var(--ks-soft-strong);
}
.kd-browser img,
.kd-snip img {
  width: 100%;
  height: auto;
  background: var(--ks-surface);
  transition: transform 1400ms var(--ease);
}
.kd-browser:hover img {
  transform: scale(1.045);
}
.kd-console-lead {
  position: relative;
  margin: 0 0 32px;
}
.kd-console-lead::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 4%;
  width: 96%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(var(--ks-brand-rgb), 0.22),
    transparent 75%
  );
  filter: blur(48px);
  pointer-events: none;
}
.kd-console-lead > * {
  position: relative;
  z-index: 1;
}
.kd-console-lead figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ks-faint);
}
.kd-console-more > li {
  flex: 0 0 min(78vw, 300px);
}
/* Close-ups of the console: cropped at reading size, no browser frame. */
.kd-snips > li {
  flex: 0 0 min(86vw, 440px);
}
.kd-snip {
  margin: 0;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
  overflow: hidden;
  transition: border-color 300ms ease;
}
.kd-snips li:hover .kd-snip {
  border-color: var(--ks-line-hover);
}
.kd-snips li:hover .kd-snip img {
  transform: scale(1.045);
}
.ks-page .kd-snips h3,
.ks-page .kd-console-more h3 {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
}
.kd-snips p,
.kd-console-more p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.ks-page h3.kd-uses-title {
  margin: 56px 0 16px;
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Card wall: hairline-divided cells, a violet rule drawing in along the top
   of the one under the pointer. Used by the console's uses list, the module
   cards, the three surfaces and the trust facts. */
.kd-uses,
.kd-grid,
.kd-real {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
}
.kd-uses li,
.kd-card,
.kd-surface,
.kd-real > div {
  position: relative;
  background: var(--ks-surface);
  padding: 24px 24px 26px;
  overflow: hidden;
  transition: background 200ms ease;
}
.kd-uses b,
.kd-real b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.kd-uses span,
.kd-real span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ks-muted);
}
.kd-card::before,
.kd-surface::before,
.kd-real > div::before,
.kd-uses li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--ks-brand-rgb), 0.08),
    transparent 68%
  );
  transition: opacity 220ms ease;
}
.kd-card::after,
.kd-surface::after,
.kd-real > div::after,
.kd-uses li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--ks-brand),
    rgba(var(--ks-brand-rgb), 0)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.kd-card:hover,
.kd-surface:hover,
.kd-real > div:hover,
.kd-uses li:hover {
  background: var(--ks-elevated);
}
.kd-card:hover::before,
.kd-surface:hover::before,
.kd-real > div:hover::before,
.kd-uses li:hover::before {
  opacity: 1;
}
.kd-card:hover::after,
.kd-surface:hover::after,
.kd-real > div:hover::after,
.kd-uses li:hover::after {
  transform: scaleX(1);
}
.kd-card > *,
.kd-surface > *,
.kd-real > div > *,
.kd-uses li > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 720px) {
  .kd-uses,
  .kd-real,
  .kd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 980px) {
  .kd-uses,
  .kd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ks-page .kd-card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.015em;
}
.kd-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.kd-card li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.kd-card li svg {
  flex: 0 0 auto;
  margin-top: 4px;
}
.ks-page .kd-surface p.kd-who {
  margin: 0 0 18px;
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-brand-light);
}
.ks-page .kd-surface h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.025em;
}
.kd-surface p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ks-muted);
}

/* The life of a car: a rail of five phases, one photographed panel each.
   Behaviour: initDayWalkthrough() in site.js. */
.kd-wrap {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .kd-wrap {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}
.kd-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 3px;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: var(--ks-surface);
  scrollbar-width: none;
}
.kd-rail::-webkit-scrollbar {
  display: none;
}
@media (min-width: 900px) {
  .kd-rail {
    flex-direction: column;
    overflow: visible;
  }
}
.kd-step {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ks-muted);
  font: inherit;
  cursor: pointer;
  transition:
    color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}
.kd-step:hover {
  color: var(--ks-text);
}
.kd-step.is-active {
  background: var(--ks-elevated);
  color: var(--ks-text);
  box-shadow:
    inset 0 1px 0 var(--ks-highlight),
    0 0 0 1px var(--ks-line);
}
.kd-step-range {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  color: var(--ks-brand-light);
}
.kd-step-label {
  font-size: 14px;
  font-weight: 510;
  letter-spacing: -0.01em;
}
.kd-step-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ks-brand);
}
#day.is-auto .kd-step.is-active .kd-step-bar {
  animation: kd-bar 4600ms linear forwards;
}
@keyframes kd-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.kd-panel {
  display: none;
}
.kd-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  animation: kd-panel-in 520ms var(--ease) both;
}
@media (min-width: 900px) {
  .kd-panel.is-active {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 36px;
  }
  .kd-photo {
    aspect-ratio: 4 / 3;
  }
}
.kd-photo {
  margin: 0;
  border-radius: var(--ks-radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ks-surface);
  border: 1px solid var(--ks-line-strong);
  box-shadow: var(--ks-shadow-md);
}
.kd-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ks-page .kd-panel-range {
  margin: 0 0 10px;
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-faint);
}
.ks-page .kd-panel h3 {
  margin: 0 0 20px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.kd-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ks-line);
}
.kd-panel ol li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--ks-line);
}
.kd-panel ol i {
  font-style: normal;
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  color: var(--ks-brand-light);
}
.kd-panel ol b {
  display: block;
  font-size: 14.5px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.kd-panel ol span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}

/* Tick list shared by the full list and the ways to start. */
.kd-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 28px;
}
.kd-ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.kd-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* What you get: one ruled row per part of the business. */
.kd-spec {
  border-top: 1px solid var(--ks-line);
}
.kd-spec-row {
  display: grid;
  gap: 14px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ks-line);
}
.ks-page .kd-spec-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
}

/* Ways to start: three options and no figure on any of them. */
.kd-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.kd-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
  box-shadow: inset 0 1px 0 var(--ks-highlight);
  transition:
    border-color 300ms ease,
    transform 600ms var(--ease);
}
.kd-plan:hover {
  border-color: var(--ks-line-hover);
  transform: translateY(-3px);
}
.kd-plan:nth-child(2) {
  border-color: rgba(var(--ks-brand-rgb), 0.35);
  background:
    radial-gradient(
      420px circle at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.1),
      transparent 70%
    ),
    var(--ks-surface);
}
.ks-page .kd-plan h3 {
  margin: 0;
  font-size: 22px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.02em;
}
.kd-plan-for {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ks-muted);
}
.ks-page p.kd-plan-quote {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ks-line);
  font-size: 15px;
  font-weight: var(--ks-weight-strong);
  color: var(--ks-text);
}
.kd-plan-quote small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ks-faint);
}
.kd-plan .ks-btn {
  justify-content: center;
}
.kd-all {
  margin-top: 16px;
  padding: 22px 26px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-soft);
}
.kd-all .kd-ticks {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Security and access: a lifted band, so it reads as a statement. */
.ks-page main > .kd-band {
  background: var(--ks-surface);
}
.kd-band .kd-real {
  background: var(--ks-line);
}
.kd-band .kd-real > div {
  background: var(--ks-bg);
}
.kd-band .kd-real > div:hover {
  background: var(--ks-elevated);
}
/* An odd count never leaves an empty cell: the last card takes the row. */
@media (min-width: 720px) {
  .kd-real > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* Five facts on wide screens: three across, then two across. */
@media (min-width: 980px) {
  .kd-band .kd-real {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .kd-band .kd-real > div {
    grid-column: span 2;
  }
  .kd-band .kd-real > div:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (min-width: 720px) {
  .kd-spec .kd-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .kd-swipe {
    margin: 0;
    overflow: visible;
  }
  .kd-swipe > ul {
    width: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 22px;
  }
  .kd-swipe > ul.kd-snips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kd-swipe-hint {
    display: none;
  }
  .kd-spec-row {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
  }
  .kd-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Desktop picker: the twelve captions become a list and one phone shows the
   chosen screen. Decided in CSS so nothing moves when site.js arrives; the
   script only switches is-active. Without scripts the grid above stays. */
@media (min-width: 900px) and (scripting: enabled) {
  .kd-shots-scroller > .kd-shots {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    grid-auto-rows: 1fr;
    min-height: 692px;
    padding-right: 380px;
  }
  .kd-shot .kd-phone {
    display: none;
    position: absolute;
    top: 0;
    right: 24px;
    width: 312px;
  }
  .kd-shot.is-active .kd-phone {
    display: block;
    animation: kd-panel-in 520ms var(--ease) both;
  }
  .kd-shots-scroller {
    position: relative;
  }
  .kd-shots-scroller > .kd-shots::before {
    content: "";
    position: absolute;
    top: 6%;
    right: 0;
    width: 360px;
    height: 80%;
    background: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(var(--ks-brand-rgb), 0.3),
      transparent 75%
    );
    filter: blur(40px);
    pointer-events: none;
  }
  .kd-shot-cap {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    background: var(--ks-surface);
    transition:
      border-color 240ms ease,
      background 240ms ease;
  }
  .kd-shot-cap:hover {
    border-color: var(--ks-line-hover);
  }
  .kd-shot.is-active .kd-shot-cap {
    border-color: rgba(var(--ks-brand-rgb), 0.5);
    background: var(--ks-elevated);
    box-shadow: inset 0 1px 0 var(--ks-highlight);
  }
  .kd-shot-pick {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
}

/* ═══ FAQ accordion ════════════════════════════════════════════════════
   Native <details>, so it works with scripts off; ::details-content
   animates the height where supported. */
.ks-faq-list {
  max-width: 860px;
  border-top: 1px solid var(--ks-line);
  interpolate-size: allow-keywords;
}
.ks-faq {
  border-bottom: 1px solid var(--ks-line);
}
.ks-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  color: var(--ks-text);
  font-size: 17px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 220ms ease;
}
.ks-faq summary::-webkit-details-marker {
  display: none;
}
.ks-faq summary:hover {
  color: var(--ks-brand-light);
}
.ks-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--ks-muted);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 420ms var(--ease);
}
.ks-faq[open] summary::after {
  transform: rotate(45deg);
}
.ks-faq::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 460ms var(--ease),
    content-visibility 460ms allow-discrete;
}
.ks-faq[open]::details-content {
  block-size: auto;
}
.ks-faq p {
  margin: 0;
  padding: 0 44px 22px 4px;
  color: var(--ks-muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 68ch;
}
@media (max-width: 860px) {
  .ks-faq summary {
    font-size: 16px;
  }
  .ks-faq p {
    padding-right: 8px;
  }
}

/* ═══ Guides: a hairline list, one row per guide ════════════════════════ */
.ku-guides {
  margin: 0;
  border-top: 1px solid var(--ks-line);
}
.ku-guides a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 6px 28px;
  align-items: baseline;
  padding: 18px 6px;
  border-bottom: 1px solid var(--ks-line);
  text-decoration: none;
  transition: background 200ms ease;
}
.ku-guides a:hover,
.ku-guides a:focus-visible {
  background: var(--ks-soft);
}
.ku-guides b {
  color: var(--ks-text);
  font-size: 16px;
  font-weight: 510;
}
.ku-guides span {
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.ku-guides i {
  font-style: normal;
  color: var(--ks-brand-light);
  transition: transform 360ms var(--ease);
}
.ku-guides a:hover i,
.ku-guides a:focus-visible i {
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .ku-guides a {
    grid-template-columns: 1fr auto;
  }
  .ku-guides span {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ═══ Closing band: copy left, actions right, warmed with the accent ═══ */
.ks-page main > #cta {
  background:
    radial-gradient(
      90% 70% at 15% 0%,
      rgba(var(--ks-brand-rgb), 0.06),
      transparent 60%
    ),
    var(--ks-bg);
}
.kd-cta {
  display: grid;
  gap: 24px;
  padding: 32px 26px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-lg);
  background:
    radial-gradient(
      680px circle at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.12),
      transparent 70%
    ),
    var(--ks-surface);
}
.kd-cta .ks-section-head {
  margin: 0;
}
.kd-cta .kd-cta-row {
  margin: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .kd-cta {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 48px;
    align-items: center;
    padding: 44px 48px;
  }
  .kd-cta .kd-cta-row {
    flex-direction: column;
  }
  .kd-cta .kd-cta-row .ks-btn {
    width: 100%;
  }
}
/* Guide pages: the closing band is a section that is also the shell, so the
   section itself becomes the warmed panel. */
.ks-page main > #cta.ks-shell {
  margin: 48px auto 96px;
  padding: 36px 28px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-lg);
  background:
    radial-gradient(
      680px circle at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.12),
      transparent 70%
    ),
    var(--ks-surface);
}
.ks-page main > #cta.ks-shell .ks-section-head {
  margin-bottom: 0;
}
@media (min-width: 720px) {
  .ks-page main > #cta.ks-shell {
    padding: 44px 48px;
  }
}
.kd-cta-more {
  margin-top: 28px;
  max-width: 80ch;
}

/* ═══ Guide and blog pages ═════════════════════════════════════════════ */
/* Tick list (carried over from the Workshop family's ks-edition-limits). */
.ks-edition-limits {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 760px;
  border-top: 1px solid var(--ks-line);
}
.ks-edition-limits li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--ks-line);
  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.55;
}
.ks-check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--ks-brand-soft);
  color: var(--ks-brand-light);
  font-size: 11px;
  font-weight: 700;
  transform: translateY(3px);
}
/* Two- and three-up contrasts and stage lists, as a hairline wall. */
.kds-distinction,
.kdm-distinction,
.kdi-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
}
@media (min-width: 720px) {
  .kds-distinction,
  .kdm-distinction {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kdi-stages {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.kds-distinction > div,
.kdm-distinction > div,
.kdi-stages li {
  padding: 24px;
  background: var(--ks-surface);
  transition: background 200ms ease;
}
.kds-distinction > div:hover,
.kdm-distinction > div:hover,
.kdi-stages li:hover {
  background: var(--ks-elevated);
}
.kds-distinction > div:last-child,
.kdm-distinction > div:last-child {
  background:
    radial-gradient(
      420px circle at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.1),
      transparent 70%
    ),
    var(--ks-surface);
}
.kdi-stages li {
  display: grid;
  gap: 6px;
  align-content: start;
}
.kds-distinction b,
.kdm-distinction b,
.kdi-stages b {
  display: block;
  margin-bottom: 6px;
  font-size: 15.5px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.kds-distinction span,
.kdm-distinction span,
.kdi-stages li > span:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ks-muted);
}
.kdi-stage-n {
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  color: var(--ks-brand-light);
}
.kds-links,
.kdp-links {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.kds-links a,
.kdp-links a {
  color: var(--ks-muted);
  font-size: 13.5px;
  text-underline-offset: 3px;
}
.kds-links a:hover,
.kdp-links a:hover {
  color: var(--ks-text);
}
/* Fifteen-step article. */
.kdp-article {
  max-width: 720px;
  border-top: 1px solid var(--ks-line);
}
.kdp-step {
  padding: 24px 0;
  border-bottom: 1px solid var(--ks-line);
}
.ks-page .kdp-step h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
  font-size: 21px;
  letter-spacing: -0.015em;
}
.kdp-step h2 i {
  font-style: normal;
  font-family: var(--ks-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ks-brand-light);
  flex: 0 0 auto;
}
.kdp-step p {
  margin: 0;
  color: var(--ks-muted);
  font-size: 16px;
  line-height: 1.72;
}
/* Blog: articles, index cards and related links. */
.kb-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 160ms ease;
}
.kb-back:hover {
  color: var(--ks-text);
}
.ks-page .kb-meta {
  margin: 18px 0 0;
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 12px;
}
.ks-page .kb-dek {
  margin: 10px 0 0;
  max-width: 640px;
  color: var(--ks-muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
}
.kb-article {
  max-width: 700px;
}
.ks-page .kb-article h2 {
  margin: 48px 0 14px;
  font-size: clamp(22px, 2.2vw, 26px);
  letter-spacing: -0.02em;
}
.ks-page .kb-article > h2:first-child {
  margin-top: 0;
}
.kb-article p {
  margin: 0 0 16px;
  color: var(--ks-muted);
  font-size: 16.5px;
  line-height: 1.72;
}
.kb-article a {
  color: var(--ks-text);
  text-underline-offset: 3px;
  text-decoration-color: var(--ks-brand-line);
}
.kb-compare {
  display: grid;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
}
.kb-compare li {
  padding: 16px 18px;
  background: var(--ks-surface);
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.kb-compare li + li {
  border-top: 1px solid var(--ks-line);
}
.kb-compare b {
  display: block;
  margin-bottom: 4px;
  color: var(--ks-text);
  font-size: 14.5px;
  font-weight: var(--ks-weight-strong);
  letter-spacing: -0.005em;
}
.kb-related {
  margin: 56px 0 0;
  max-width: 700px;
  padding: 24px 26px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
}
.kb-related ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.kb-related a {
  font-weight: 510;
  color: var(--ks-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ks-brand-line);
  transition: border-color 160ms ease;
}
.kb-related a:hover {
  border-color: var(--ks-brand-light);
}
.kb-related span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.kb-index-list {
  display: grid;
  max-width: 820px;
  border-top: 1px solid var(--ks-line);
}
.kb-index-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--ks-line);
  text-decoration: none;
  transition: background 200ms ease;
}
.kb-index-card:hover,
.kb-index-card:focus-visible {
  background: var(--ks-soft);
}
.ks-page .kb-index-card h2 {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 22px);
  letter-spacing: -0.02em;
  transition: color 200ms ease;
}
.kb-index-card:hover h2 {
  color: var(--ks-brand-light);
}
.kb-index-card p {
  margin: 0;
  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
}
.kb-index-card time {
  display: block;
  margin-top: 6px;
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* ═══ Footer ═══════════════════════════════════════════════════════════ */
.ks-footer {
  border-top: 1px solid var(--ks-line);
  padding: 56px var(--ks-gutter) 28px;
  background: var(--ks-bg);
}
.ks-footer-main {
  width: min(100%, var(--ks-max));
  margin: 0 auto;
  display: grid;
  gap: 32px;
}
.ks-footer-brand {
  margin-bottom: 14px;
}
.ks-footer p {
  color: var(--ks-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
  max-width: 360px;
}
.ks-footer p.ks-footer-entity {
  color: var(--ks-faint);
  font-size: 13px;
}
.ks-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ks-page .ks-footer-links h2 {
  margin: 0 0 6px;
  color: var(--ks-faint);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ks-footer-links a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 14px;
  overflow-wrap: anywhere;
  transition: color 160ms ease;
}
.ks-footer-links a:hover,
.ks-footer-links a:focus-visible {
  color: var(--ks-text);
}
.ks-footer-umbrella {
  width: min(100%, var(--ks-max));
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--ks-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ks-faint);
  font-size: 13px;
}
.ks-footer-umbrella a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ks-muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.ks-footer-umbrella a:hover {
  color: var(--ks-text);
}
.ks-footer-bottom {
  width: min(100%, var(--ks-max));
  margin: 12px auto 0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ks-faint);
  font-size: 12.5px;
}
@media (min-width: 720px) {
  .ks-footer-main {
    grid-template-columns: 1fr 1.4fr;
  }
  .ks-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ks-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Sticky WhatsApp strip on phones: a dark bar with a hairline, below 768px
   only. The footer gains bottom padding there so nothing hides under it. */
.ks-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ks-overlay-strong);
  border-top: 1px solid var(--ks-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ks-sticky-cta .ks-btn {
  min-height: 44px;
  font-size: 14px;
  padding: 0 12px;
}
@media (min-width: 768px) {
  .ks-sticky-cta {
    display: none;
  }
}
@media (max-width: 767px) {
  .ks-footer {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══ Motion ═══════════════════════════════════════════════════════════
   One easing curve everywhere. Reveals rise out of a soft blur; children of
   a [data-stagger] group arrive in sequence; the hero headline arrives a word
   at a time. Gated by html.js-reveal, and a plain cut under reduced motion. */
.js-reveal .ks-section,
.js-reveal .ks-reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(32px);
  transition:
    opacity 1100ms var(--ease),
    transform 1100ms var(--ease),
    filter 1100ms var(--ease);
}
.js-reveal .ks-section.is-visible,
.js-reveal .ks-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}
.js-reveal [data-stagger] > * {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(20px);
  transition:
    opacity 900ms var(--ease) calc(var(--i, 0) * 85ms),
    transform 900ms var(--ease) calc(var(--i, 0) * 85ms),
    filter 900ms var(--ease) calc(var(--i, 0) * 85ms);
}
.js-reveal [data-stagger].is-visible > *,
.js-reveal .ks-section.is-visible [data-stagger] > *,
.js-reveal [data-hero].is-ready [data-stagger] > * {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Section headings arrive a word at a time, like the hero. */
.kd-hword {
  display: inline-block;
  white-space: pre;
}
.js-reveal .ks-section .kd-hword {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
}
.js-reveal .ks-section.is-visible .kd-hword {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1000ms var(--ease) calc(120ms + var(--w, 0) * 45ms),
    transform 1000ms var(--ease) calc(120ms + var(--w, 0) * 45ms),
    filter 1000ms var(--ease) calc(120ms + var(--w, 0) * 45ms);
}

/* Hero: eyebrow, then the headline word by word out of an 8px blur, then the
   line, the buttons, and the window tilting up while its glow blooms. */
.ku-word {
  display: inline-block;
  white-space: pre;
}
.js-reveal [data-hero] .ks-eyebrow,
.js-reveal [data-hero] .ku-word {
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(8px);
}
.js-reveal [data-hero] .ku-lede,
.js-reveal [data-hero] .ku-hero-cta {
  opacity: 0;
  transform: translateY(0.55em);
}
.js-reveal [data-hero] h1 {
  opacity: 0;
}
.js-reveal [data-hero].is-ready h1 {
  opacity: 1;
}
.js-reveal [data-hero].is-ready .ks-eyebrow {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 900ms var(--ease) 80ms,
    transform 900ms var(--ease) 80ms,
    filter 900ms var(--ease) 80ms;
}
.js-reveal [data-hero].is-ready .ku-word {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms),
    transform 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms),
    filter 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms);
}
.js-reveal [data-hero].is-ready .ku-lede {
  opacity: 1;
  transform: none;
  transition:
    opacity 1000ms var(--ease) 820ms,
    transform 1000ms var(--ease) 820ms;
}
.js-reveal [data-hero].is-ready .ku-hero-cta {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms var(--ease) 900ms,
    transform 900ms var(--ease) 900ms;
}
.js-reveal [data-hero] [data-stagger] > * {
  transition-delay: calc(950ms + var(--i, 0) * 50ms);
}
.js-reveal [data-hero] .ku-window {
  transform: rotateX(14deg) translateY(36px) scale(0.97);
  transform-origin: 50% 0%;
  opacity: 0;
}
.js-reveal [data-hero].is-ready .ku-window {
  transform: none;
  opacity: 1;
  transition:
    transform 1600ms var(--ease) 700ms,
    opacity 1200ms var(--ease) 700ms;
}
.js-reveal [data-hero] .ku-showcase::before {
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
}
.js-reveal [data-hero].is-ready .ku-showcase::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition:
    opacity 1800ms var(--ease) 900ms,
    transform 2200ms var(--ease) 900ms;
}
.js-reveal [data-hero] .ku-sample-note {
  opacity: 0;
}
.js-reveal [data-hero].is-ready .ku-sample-note {
  opacity: 1;
  transition: opacity 900ms var(--ease) 1400ms;
}
/* A return visit gets a short entrance instead of the full sequence. */
.js-reveal [data-hero].is-ready.is-quick .ks-eyebrow,
.js-reveal [data-hero].is-ready.is-quick .ku-word,
.js-reveal [data-hero].is-ready.is-quick .ku-lede,
.js-reveal [data-hero].is-ready.is-quick .ku-hero-cta,
.js-reveal [data-hero].is-ready.is-quick .ku-window,
.js-reveal [data-hero].is-ready.is-quick .ku-showcase::before,
.js-reveal [data-hero].is-ready.is-quick .ku-sample-note {
  transition-duration: 500ms;
  transition-delay: 0ms;
}
.js-reveal [data-hero].is-quick [data-stagger] > * {
  transition-duration: 500ms;
  transition-delay: calc(120ms + var(--i, 0) * 40ms);
}

/* Tab panels (the walkthrough, the screen picker) crossfade and settle. */
@keyframes kd-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
}

/* Page-to-page: a cross-document view transition (Chrome, Edge, Safari 18+).
   Browsers without it simply navigate as before. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: kd-page-out 220ms var(--ease) both;
}
::view-transition-new(root) {
  animation: kd-page-in 520ms var(--ease) both;
}
@keyframes kd-page-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(4px);
  }
}
@keyframes kd-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
}
/* The top bar stays put while the page changes beneath it. */
[data-public-nav] {
  view-transition-name: kd-nav;
}
::view-transition-group(kd-nav) {
  animation: none;
}

/* Buttons: a soft sheen crosses the primary button; arrows nudge forward. */
.ks-btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ks-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 900ms var(--ease);
  pointer-events: none;
}
.ks-btn-primary:hover::after {
  transform: translateX(120%);
}
.ks-btn i {
  font-style: normal;
  display: inline-block;
  transition: transform 420ms var(--ease);
}
.ks-btn:hover i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  .js-reveal .ks-section,
  .js-reveal .ks-reveal,
  .js-reveal [data-stagger] > *,
  .ku-word,
  .kd-hword,
  .js-reveal .ks-section .kd-hword,
  .js-reveal [data-hero] h1,
  .js-reveal [data-hero] .ks-eyebrow,
  .js-reveal [data-hero] .ku-lede,
  .js-reveal [data-hero] .ku-hero-cta,
  .js-reveal [data-hero] .ku-window,
  .js-reveal [data-hero] .ku-showcase::before,
  .js-reveal [data-hero] .ku-sample-note {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js-reveal .ks-section,
  .js-reveal .ks-reveal,
  .js-reveal [data-stagger] > *,
  .ku-word,
  .kd-hword,
  .js-reveal [data-hero] .ks-eyebrow,
  .js-reveal [data-hero] .ku-lede,
  .js-reveal [data-hero] .ku-hero-cta,
  .js-reveal [data-hero] .ku-window {
    transform: none !important;
  }
  .js-reveal [data-hero] .ku-showcase::before {
    transform: translateX(-50%) !important;
  }
  .kd-panel.is-active,
  .kd-shot.is-active .kd-phone,
  #day.is-auto .kd-step.is-active .kd-step-bar {
    animation: none !important;
  }
  .ks-btn,
  .ks-btn i,
  .ks-btn-primary::after,
  .ks-menu span,
  .kd-card,
  .kd-card::before,
  .kd-card::after,
  .kd-surface::before,
  .kd-surface::after,
  .kd-real > div::before,
  .kd-real > div::after,
  .kd-uses li::before,
  .kd-uses li::after,
  .kd-browser,
  .kd-browser img,
  .kd-snip img,
  .kd-plan,
  .kd-step,
  .kd-shot-cap,
  .ku-guides i,
  .ks-faq::details-content,
  .ks-faq summary::after {
    transition: none !important;
  }
  .ks-btn,
  .ks-btn:hover i,
  .kd-browser:hover,
  .kd-browser:hover img,
  .kd-snips li:hover .kd-snip img,
  .kd-plan:hover,
  .ku-guides a:hover i {
    transform: none !important;
  }
}

/* The heavy "kenro" wordmark beside the K (Inter 820, traced; replaces the plain text name). */
.ks-wordmark {
  display: block;
  height: 17px;
  width: auto;
}

/* Real product screens: the composite carries its own browser and phone frames, so the window loses its chrome. */
.ku-window.ku-real {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ku-real img {
  display: block;
  width: 100%;
  height: auto;
}

/* Small screens get the two-phone shot of the same real screens, kept to a phone-like width. */
.ku-real picture {
  display: block;
}
@media (max-width: 640px) {
  .ku-real img {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* The phone strip's button matches usekenro.com: a quiet dark key with a small accent dot, not a loud slab. */
.ks-sticky-cta .ks-btn-primary {
  background: var(--ks-elevated);
  border-color: var(--ks-line-strong);
  color: var(--ks-text);
  box-shadow: inset 0 1px 0 var(--ks-highlight);
}
.ks-sticky-cta .ks-btn-primary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-brand-light);
  box-shadow: 0 0 0 3px var(--ks-brand-soft);
}
.ks-sticky-cta .ks-btn-primary::after {
  content: none;
}

/* The hand-off to Karyo for car businesses not yet on Kenro: one calm card before the closing section. */
.ks-section.kd-handoff {
  padding-top: 28px;
  padding-bottom: 8px;
}
.kd-handoff-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 28px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
}
.kd-handoff-card .ks-eyebrow {
  margin: 0;
}
.kd-handoff-line {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--ks-muted);
}