/* ==========================================================================
   usekenro.com in the Karyo style (Director, 12 Oct 2026)

   The same design language as usekaryo.com ("a drawing board at night"):
   near-black ink, cool greys, thin lines instead of shadows, sharp 4px
   corners, mono labels with a square marker, heavy tight headlines and a
   faint grid fading from the top right. The one accent stays Kenro purple
   (#7c3aed), not Karyo blue, so Kenro remains its own brand.

   Loaded on every page after the page's own inline styles. Selectors start
   with `.ks-page.ks-page` so they outrank those inline rules without
   !important; delete the <link> to return to the Onyx look.
   ========================================================================== */

.ks-page.ks-page {
  --ks-bg: #08090a;
  --ks-surface: #0f1113;
  --ks-elevated: #0f1113;
  --ks-soft: rgba(245, 246, 247, 0.03);
  --ks-line: rgba(245, 246, 247, 0.12);
  --ks-line-strong: rgba(245, 246, 247, 0.24);
  --ks-text: #f5f6f7;
  --ks-muted: #a1a8b1;
  --ks-faint: #7c838c;
  --ks-brand: #7c3aed;
  --ks-brand-light: #c4a8ff;
  --ks-brand-cta: #6d28d9;
  --ks-brand-soft: rgba(124, 58, 237, 0.12);
  --ks-gold: #7c3aed;
  --kd-radius: 4px;
  --kd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Backdrop: a purple glow top right, a 72px grid that fades out away from
     it, then the ink. Fixed so it stays put while the page scrolls. */
  background:
    radial-gradient(
        circle at 92% -6%,
        rgba(124, 58, 237, 0.2) 0,
        rgba(124, 58, 237, 0) 34vmax
      )
      fixed,
    radial-gradient(
        ellipse 80% 60% at 70% 0%,
        rgba(8, 9, 10, 0) 0%,
        #08090a 75%
      )
      fixed,
    linear-gradient(to right, rgba(245, 246, 247, 0.045) 1px, transparent 1px)
      fixed -1px -1px / 72px 72px,
    linear-gradient(to bottom, rgba(245, 246, 247, 0.045) 1px, transparent 1px)
      fixed -1px -1px / 72px 72px,
    #08090a;
}

.ks-page.ks-page ::selection {
  background: var(--ks-brand);
  color: #fff;
}

/* ── Headlines: heavy and tight ─────────────────────────────────────────── */
.ks-page.ks-page :is(h1, h2, h3) {
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ks-page.ks-page .ks-hero-h {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.ks-page.ks-page h2 {
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* ── Labels: mono caps with a purple square in front ────────────────────── */
.ks-page.ks-page :is(.ks-eyebrow, .kd-kicker) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ks-muted);
  font-family: var(--kd-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ks-page.ks-page :is(.ks-eyebrow, .kd-kicker)::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--ks-brand);
}

/* ── Buttons: sharp, flat, outlined unless they are the main action ─────── */
.ks-page.ks-page .ks-btn {
  border-radius: var(--kd-radius);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  box-shadow: none;
}
.ks-page.ks-page .ks-btn-primary {
  background: var(--ks-brand);
  border-color: var(--ks-brand);
  color: #fff;
}
.ks-page.ks-page .ks-btn-primary:hover {
  background: var(--ks-brand-cta);
  border-color: var(--ks-brand-cta);
}
.ks-page.ks-page .ks-btn-secondary {
  background: transparent;
  border-color: var(--ks-line-strong);
  box-shadow: none;
}
.ks-page.ks-page .ks-btn-secondary:hover {
  border-color: var(--ks-text);
}

/* ── Panels and cards: thin lines and 4px corners, no glow ──────────────── */
.ks-page.ks-page
  :is(
    .kd-card,
    .kd-panel,
    .kd-plan,
    .kd-all,
    .kd-surface,
    .kd-browser,
    .kd-snip,
    .kd-photo,
    .ks-faq,
    .ks-price-card,
    .ks-onboarding-card,
    .ku-form,
    .ku-guides a,
    .kd-handoff-card
  ) {
  border-radius: var(--kd-radius);
  box-shadow: none;
}
.ks-page.ks-page :is(.kd-browser, .kd-snip, .kd-photo) img {
  border-radius: 0;
}
.ks-page.ks-page :is(input, textarea, select) {
  border-radius: var(--kd-radius);
}

/* ── Chips: mono, sharp ─────────────────────────────────────────────────── */
.ks-page.ks-page .kd-tag {
  border-radius: 2px;
  border-color: rgba(196, 168, 255, 0.45);
  color: var(--ks-brand-light);
  font-family: var(--kd-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ks-page.ks-page .ks-hero-tags span {
  font-family: var(--kd-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Footer on the second ink step ──────────────────────────────────────── */
.ks-page.ks-page .ks-footer {
  background: #0b0c0e;
}

/* ── Brand: "Kenro | DEALERSHIP", like "karyo. | STUDIO" ────────────────── */
.ks-page.ks-page .ks-logo {
  border-radius: var(--kd-radius);
  box-shadow: none;
}
.ks-page.ks-page .ks-brand > span:last-child::after {
  content: "Dealership";
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--ks-line-strong);
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

/* The phone menu button matches the other sharp controls */
.ks-page.ks-page .ks-menu {
  border-radius: var(--kd-radius);
}

/* ── The hero's top line: a sharp mono chip ─────────────────────────────── */
.ks-page.ks-page .ks-hero-pill {
  border-radius: 2px;
  font-family: var(--kd-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Phones: the nav keeps the logo and the button; the label waits for room */
@media (max-width: 560px) {
  .ks-page.ks-page .ks-brand > span:last-child::after {
    content: none;
  }
}

/* ==========================================================================
   Homepage hero in the Karyo layout: one clear line and two buttons on the
   left, a real screenshot of the console on the right. Kept calm on
   purpose: no film, no moving parts.
   ========================================================================== */
.ks-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ks-page.ks-page .ky-hero {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  padding-block: clamp(112px, 12vw, 160px) clamp(56px, 8vw, 112px);
}
.ks-page.ks-page .ky-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ks-page.ks-page .ky-display {
  margin: 20px 0 0;
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-align: left;
}
.ks-page.ks-page .ky-dot {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.04em;
  background: var(--ks-brand);
  vertical-align: baseline;
}
.ks-page.ks-page .ky-lede {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ks-muted);
}
.ks-page.ks-page .ky-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ks-page.ks-page .ky-btn-lg {
  min-height: 52px;
  padding: 13px 22px;
  font-size: 16px;
}
.ks-page.ks-page .ky-arrow {
  transition: transform 0.25s var(--ease);
}
.ks-page.ks-page .ks-btn:hover .ky-arrow {
  transform: translateX(3px);
}
.ks-page.ks-page .ky-wa::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3Z'/></svg>") center / contain no-repeat;
}
.ks-page.ks-page .ky-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ks-line);
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ks-page.ks-page .ky-hero-meta b {
  color: var(--ks-muted);
  font-weight: 500;
}

/* The real screenshot, in a plain window frame */
.ks-page.ks-page .ky-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--kd-radius);
  background: var(--ks-surface);
}
.ks-page.ks-page .ky-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ks-line);
}
.ks-page.ks-page .ky-shot-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-line-strong);
}
.ks-page.ks-page .ky-shot-bar span {
  margin-left: 10px;
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ks-page.ks-page .ky-shot img {
  width: 100%;
  height: auto;
}
/* Hero reel: the screens stack and cross-fade with a slow drift. Without
   site.js only the first screen shows, so nothing depends on the script. */
.ks-page.ks-page .ky-reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ks-page.ks-page .ky-reel img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 900ms ease,
    transform 5200ms ease-out;
}
.ks-page.ks-page .ky-reel img.is-active {
  opacity: 1;
  transform: scale(1);
}
.ks-page.ks-page .ky-reel-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ks-brand-light, #a78bfa);
  transform: scaleX(0);
  transform-origin: left;
}
.ks-page.ks-page .ky-reel-progress.is-running {
  transform: scaleX(1);
  transition: transform var(--reel-step, 4200ms) linear;
}
.ks-page.ks-page .ky-shot-bar span {
  transition: opacity 300ms ease;
}
.ks-page.ks-page .ky-shot-bar span.is-swapping {
  opacity: 0;
}
/* "Live" feel: a pulsing badge, a cursor that browses each screen and a
   notification that slides in. All of it is decoration over the screenshots. */
.ks-page.ks-page .ky-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ks-muted);
  font-family: var(--kd-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ks-page.ks-page .ky-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: ky-live-pulse 1.8s ease-out infinite;
}
@keyframes ky-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}
.ks-page.ks-page .ky-reel-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 16px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  transition:
    left 900ms cubic-bezier(0.45, 0, 0.2, 1),
    top 900ms cubic-bezier(0.45, 0, 0.2, 1),
    opacity 300ms ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.ks-page.ks-page .ky-reel-cursor.is-on {
  opacity: 1;
}
.ks-page.ks-page .ky-reel-cursor svg {
  display: block;
  transition: transform 140ms ease;
}
.ks-page.ks-page .ky-reel-cursor.is-clicking svg {
  transform: scale(0.82);
}
.ks-page.ks-page .ky-reel-cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ks-brand-light, #c4a8ff);
  opacity: 0;
  transform: scale(0.3);
}
.ks-page.ks-page .ky-reel-cursor.is-clicking::after {
  animation: ky-click 520ms ease-out;
}
@keyframes ky-click {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.6); }
}
.ks-page.ks-page .ky-reel-toast {
  position: absolute;
  right: 3%;
  bottom: 5%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 70%;
  padding: 9px 13px;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--kd-radius, 4px);
  background: rgba(17, 17, 22, 0.94);
  color: var(--ks-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}
.ks-page.ks-page .ky-reel-toast::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-brand-light, #c4a8ff);
}
.ks-page.ks-page .ky-reel-toast.is-on {
  opacity: 1;
  transform: none;
}
@media (max-width: 600px) {
  .ks-page.ks-page .ky-reel-toast {
    padding: 6px 9px;
    font-size: 10.5px;
  }
  .ks-page.ks-page .ky-reel-cursor {
    transform: scale(0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-page.ks-page .ky-live::before {
    animation: none;
  }
  .ks-page.ks-page .ky-reel-cursor,
  .ks-page.ks-page .ky-reel-toast {
    display: none;
  }
  .ks-page.ks-page .ky-reel img {
    transition: none;
    transform: none;
  }
  .ks-page.ks-page .ky-reel-progress {
    display: none;
  }
}
.ks-page.ks-page .ky-shot figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--ks-line);
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .ks-page.ks-page .ky-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* The copy rises in once; nothing moves after that or under Reduce Motion */
@media (prefers-reduced-motion: no-preference) {
  .ks-page.ks-page .ky-hero-copy > * {
    animation: ky-rise 0.8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 0.08s);
  }
  @keyframes ky-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }
}

/* /custom hero: a Custom build's own app, in a plain phone frame */
.ks-page.ks-page .ky-phone-shot {
  justify-self: center;
  width: min(100%, 300px);
  margin: 0;
}
.ks-page.ks-page .ky-phone-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ks-line-strong);
  border-radius: 28px;
}
.ks-page.ks-page .ky-phone-shot figcaption {
  margin-top: 12px;
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* Short-form blocks (13 Oct 2026): a headline, at most one line, then
   something to look at. Tiles carry a 2-4 word title and one short line. */
.ks-page.ks-page .ky-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ks-line);
}
.ks-page.ks-page .ky-tiles.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ks-page.ks-page .ky-tiles li {
  padding: 22px 22px 24px 0;
  border-bottom: 1px solid var(--ks-line);
}
.ks-page.ks-page .ky-tiles h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ks-page.ks-page .ky-tiles h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--ks-brand);
  vertical-align: 0.15em;
}
.ks-page.ks-page .ky-tiles p {
  margin: 8px 0 0;
  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.5;
}
.ks-page.ks-page .ky-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 28px 0 0;
  color: var(--ks-faint);
  font-family: var(--kd-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ks-page.ks-page .ky-links {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ks-line);
}
.ks-page.ks-page .ky-links a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--ks-line);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.ks-page.ks-page .ky-links a:hover {
  color: var(--ks-brand-light);
}
@media (max-width: 860px) {
  .ks-page.ks-page .ky-tiles,
  .ks-page.ks-page .ky-tiles.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ks-page.ks-page .ky-tiles,
  .ks-page.ks-page .ky-tiles.is-four {
    grid-template-columns: 1fr;
  }
}

/* /custom screen list: titles only now, so the cards hug their one line */
.ks-page.ks-page .kd-shots {
  align-content: start;
}
.ks-page.ks-page .kd-shot-cap {
  height: auto;
  border-radius: var(--kd-radius);
}