/* ============================================================
   ks-marketing.css — the single stylesheet for the public marketing site
   (EPIC #6013 · #6070). Marketing is a design-copy of the app, so it
   consumes the SAME --ks-* tokens and the SAME button recipe.

   Tokens: imported from ks-tokens.css (single source, shared with the app).
   Shared core: the .ks-btn recipe below is copied VERBATIM from
   public/css/ks-app.css (the app's shared core, #6069/#6092). App and
   marketing buttons are literally the same bytes. Change the recipe in
   ks-app.css, then mirror it here — never fork it.

   Rollout (each slice preview-gated on Vercel, both themes):
     - THIS slice: introduce the file + shared core. No page is repointed
       yet, so nothing re-renders (mirrors A4's ks-app.css slice 1a).
     - next: port the marketing layout (hero/pricing/docs/nav/cards) onto
       --ks-*, repoint the 96 pages here via the copy:render pipeline, and
       retire design-system.css / ks-redesign.css / ks-docs-v2.css /
       capability-marketing.css / page-styles-templates-2.css / lead-form.css.
     - then: de-hardcode (26 <style> blocks + 1,220 inline style= -> classes;
       marketing-inline-baseline.json -> 0).
   ============================================================ */

@import url('/css/ks-tokens.css');

/* ---- button: base ---- */
.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--ks-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, filter 0.16s;
}
.ks-btn:disabled,
.ks-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ks-btn:focus-visible {
  outline: 2px solid rgb(from var(--ks-indigo) r g b / 0.9);
  outline-offset: 2px;
}
.ks-btn__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.ks-btn--sm {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--ks-radius-full);
}
.ks-btn--sm .ks-btn__icon { width: 14px; height: 14px; }

/* ---- primary — one flat indigo CTA in both themes; no gradient or glow ---- */
.ks-btn--primary,
a.ks-btn--primary:visited {
  color: var(--ks-fg-on-accent);
  background: var(--ks-button-primary);
  border-color: transparent;
  border-radius: var(--ks-radius-full);
  box-shadow: none;
}
.ks-btn--primary:hover {
  background: color-mix(in srgb, var(--ks-button-primary), black 10%);
  color: var(--ks-fg-on-accent);
}
.ks-btn--primary:active {
  background: color-mix(in srgb, var(--ks-button-primary), black 16%);
}
.ks-btn--primary svg {
  color: inherit;
  stroke: currentColor;
}

/* ---- secondary — quiet top-level action, not a CTA ---- */
.ks-btn--secondary,
a.ks-btn--secondary:visited {
  color: var(--ks-fg);
  background: var(--ks-bg-elevated);
  border-color: var(--ks-border);
}
.ks-btn--secondary:hover {
  background: color-mix(in srgb, var(--ks-fg) 6%, var(--ks-bg-elevated));
  border-color: color-mix(in srgb, var(--ks-indigo) 50%, var(--ks-border));
  color: var(--ks-fg);
}
.ks-btn--secondary:active {
  background: color-mix(in srgb, var(--ks-indigo) 12%, transparent);
  border-color: color-mix(in srgb, var(--ks-indigo) 55%, transparent);
}

/* ---- homepage shared heading accent (italic indigo clause) ---- */
.ks-launch-heading-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--ks-c02);
}

/* ---- homepage "the problem" question cards + before/after compare ---- */
.ks-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.ks-problem-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
}
[data-theme="light"] .ks-problem-card {
  background: transparent;
}
.ks-problem-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ks-problem-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--ks-c62);
  color: var(--ks-c62);
  display: grid;
  place-items: center;
}
.ks-problem-q {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ks-c07);
}
.ks-problem-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ks-c13);
  margin: 0;
}
.ks-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.ks-compare-card {
  padding: 32px 34px;
  border-radius: 16px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
}
[data-theme="light"] .ks-compare-card:not(.ks-compare-card--after) {
  background: transparent;
}
.ks-compare-card--after {
  background: var(--ks-c26);
  border-color: var(--ks-c27);
}
.ks-compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-compare-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ks-c16);
  color: var(--ks-c13);
  display: grid;
  place-items: center;
}
.ks-compare-icon--before {
  border-color: var(--ks-c72);
  color: var(--ks-c62);
}
.ks-compare-icon--after {
  border-color: var(--ks-c27);
  color: var(--ks-c02);
}
.ks-compare-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-c13);
}
.ks-compare-label--after {
  color: var(--ks-c02);
}
.ks-compare-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ks-compare-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ks-c13);
}
.ks-compare-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ks-c13);
}
.ks-compare-list--after li {
  color: var(--ks-c07);
  font-weight: 500;
}
.ks-compare-list--after li::before {
  content: '';
  width: 8px;
  height: 8px;
  top: 6px;
  border-radius: 0;
  background: none;
  border-left: 1.5px solid var(--ks-c02);
  border-bottom: 1.5px solid var(--ks-c02);
  transform: rotate(-45deg);
}
@media (max-width: 900px) {
  .ks-problem-grid {
    grid-template-columns: 1fr;
  }
  .ks-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- homepage hero: eyebrow badge, actions row, product-shot panel, stat
   cards (2026-07-16) ---- */
.ks-hero-badge-row {
  display: flex;
  justify-content: center;
}

.ks-hero-title {
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-align: center;
  max-width: 900px;
  margin: 22px auto 56px;
}

.ks-hero-title__accent {
  font-style: italic;
  font-weight: 400;
  color: var(--ks-c02);
}

.ks-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.ks-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ks-c27);
  background: var(--ks-c26);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-hero-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ks-c78);
  box-shadow: 0 0 0 4px rgba(103,232,249,0.16);
  flex: none;
}

[data-theme="light"] .ks-hero-badge__dot {
  box-shadow: 0 0 0 4px rgba(8,145,178,0.14);
}

.ks-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.ks-hero-shot {
  position: relative;
  align-self: center;
  border-radius: 20px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(79,70,229,0.35);
}

.ks-hero-shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.ks-hero-shot__img--light {
  display: none;
}

[data-theme="light"] .ks-hero-shot__img--dark {
  display: none;
}

[data-theme="light"] .ks-hero-shot__img--light {
  display: block;
}

.ks-hero-shot__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  background: var(--ks-c05);
  color: var(--ks-c10);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 30px -8px rgba(79,70,229,0.6);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-hero-shot__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.ks-hero-shot__play svg {
  margin-left: 3px;
}

.ks-hero-shot__caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ks-c59);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-c10);
  pointer-events: none;
}

.ks-hero-shot__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

.ks-hero-shot__frame video,
.ks-hero-shot__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ks-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 88px;
}

.ks-hero-stat {
  padding: 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
}

.ks-hero-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ks-c26);
  border: 1px solid var(--ks-c27);
  display: grid;
  place-items: center;
  color: var(--ks-c02);
  margin-bottom: 20px;
}

.ks-hero-stat__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ks-hero-stat__label {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ks-c13);
}

@media (max-width: 900px) {
  .ks-hero-title {
    font-size: 44px;
    margin-bottom: 40px;
  }
  .ks-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ks-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

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

/* ---- homepage capability cards: Platform + Success Outcomes grids (2026-07-16) ---- */
.ks-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.ks-feature-card {
  padding: 32px 30px;
  border-radius: 16px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
}

[data-theme="light"] .ks-feature-card {
  background: transparent;
}

.ks-feature-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ks-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ks-c26);
  border: 1px solid var(--ks-c27);
  color: var(--ks-c02);
  display: grid;
  place-items: center;
}

.ks-feature-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ks-c07);
}

.ks-feature-subhead {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ks-c02);
}

.ks-feature-desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-c13);
  text-wrap: pretty;
}

.ks-feature-label {
  margin-top: 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ks-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ks-c27);
  background: var(--ks-c26);
  font-size: 13px;
  font-weight: 500;
  color: var(--ks-c07);
}

.ks-feature-pill svg {
  flex-shrink: 0;
  color: var(--ks-c02);
}

.ks-feature-pill--plain {
  background: transparent;
  border-color: var(--ks-c16);
  color: var(--ks-c13);
}

@media (max-width: 900px) {
  .ks-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- homepage "how KoraSafe works" interactive stepper (2026-07-16) ---- */
.ks-how-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  margin-top: 56px;
  align-items: start;
}

.ks-how-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ks-how-step {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--ks-c16);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ks-c07);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.ks-how-step-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ks-c26);
  border: 1px solid var(--ks-c27);
  color: var(--ks-c02);
  display: grid;
  place-items: center;
}

.ks-how-step-label {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}

.ks-how-step-chevron {
  flex-shrink: 0;
  color: var(--ks-c02);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.ks-how-step.is-active {
  background: var(--ks-c26);
  border-color: var(--ks-c27);
}

.ks-how-step.is-active .ks-how-step-chevron {
  opacity: 1;
}

.ks-how-detail-card {
  position: relative;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

[data-theme="light"] .ks-how-detail-card {
  background: var(--ks-c26);
  border-color: var(--ks-c27);
}

.ks-how-panel-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ks-c26);
  border: 1px solid var(--ks-c27);
  color: var(--ks-c02);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.ks-how-panel-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-how-panel-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.ks-how-panel-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ks-c13);
  margin-top: 14px;
  max-width: 480px;
}

.ks-how-panel {
  display: none;
}

.ks-how-panel.is-active {
  display: block;
}

.ks-how-panel-watermark {
  position: absolute;
  top: -36px;
  right: -24px;
  color: color-mix(in srgb, var(--ks-c02) 7%, transparent);
  pointer-events: none;
  user-select: none;
}

.ks-how-panel-media {
  margin-top: 24px;
}

.ks-how-panel-media-frame {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  border: 1px solid var(--ks-c27);
  background: color-mix(in srgb, var(--ks-c02) 5%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ks-c02) 40%, transparent);
  overflow: hidden;
}

.ks-how-panel-media-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ks-c13);
}

.ks-how-panel-media-caption svg {
  flex-shrink: 0;
  color: var(--ks-c02);
}

.ks-how-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}

.ks-how-progress {
  display: flex;
  gap: 6px;
}

.ks-how-dot {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--ks-c16);
}

.ks-how-dot.is-active {
  background: var(--ks-c02);
}

.ks-how-nav {
  display: flex;
  gap: 10px;
}

.ks-how-nav button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--ks-c16);
  background: var(--ks-c09);
  color: var(--ks-c07);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ks-how-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ks-how-nav .ks-how-next:not(:disabled) {
  background: var(--ks-c05);
  border-color: var(--ks-c05);
  color: var(--ks-c10);
}

@media (max-width: 900px) {
  .ks-how-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- ghost — icon-only / very quiet utility ---- */
.ks-btn--ghost,
a.ks-btn--ghost:visited {
  color: var(--ks-fg-secondary);
  background: transparent;
  border-color: transparent;
}
.ks-btn--ghost:hover {
  background: color-mix(in srgb, var(--ks-fg) 8%, transparent);
  color: var(--ks-fg);
}
.ks-btn--ghost:active {
  background: color-mix(in srgb, var(--ks-indigo) 14%, transparent);
}

/* ---- link — text-only row/navigation action; no button chrome ---- */
.ks-btn--link,
a.ks-btn--link:visited {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ks-indigo);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ks-btn--link:hover {
  color: color-mix(in oklch, var(--ks-indigo), white 18%);
  background: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-btn--link:active {
  color: color-mix(in oklch, var(--ks-indigo), black 12%);
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* ---- light-mode tuning: nudge the secondary brand border/contrast.
   --ks-bg-elevated / --ks-border already flip light/dark in ks-tokens.css,
   so only the indigo-tinted border needs a light-mode nudge. ---- */
:root[data-theme="light"] .ks-btn--secondary:hover {
  border-color: rgb(from var(--ks-indigo) r g b / 0.65);
  background: rgb(from var(--ks-indigo) r g b / 0.08);
}
:root[data-theme="light"] .ks-btn--secondary:active {
  background: rgb(from var(--ks-indigo) r g b / 0.14);
}

/* ============================================================
   MARKETING LAYOUT — ported onto the app --ks-* tokens (#6070 slice 2).
   Geometry (sizes/grid/spacing) is preserved verbatim from the source
   page; only color/token references are remapped from ks-redesign.css's
   royal-blue --ks-cNN palette to the app's indigo --ks-* tokens, so the
   marketing site becomes a design-copy of the app.

   Fonts preserved as the marketing set (Instrument Sans + IBM Plex Mono),
   NOT the app's Inter — pending Anwesa's call on unifying the font too.

   Color remap applied (source royal-blue -> app indigo):
     --ks-c02 #9db4f2 accent      -> var(--ks-indigo-light)
     --ks-c04 #0a0e1c page bg     -> var(--ks-bg)
     --ks-c05 #2547d0 selection   -> var(--ks-indigo)
     --ks-c06 #ffffff on-accent   -> var(--ks-fg-on-accent)
     --ks-c07 #f7f8fa body text   -> var(--ks-fg)
     --ks-c13 0.92 muted text     -> var(--ks-fg-secondary)
     --ks-c16 0.18 hairline       -> var(--ks-border)
     --ks-c17 0.86 breadcrumb     -> var(--ks-fg-muted)
     --ks-c30 0.90 list text      -> var(--ks-fg-secondary)
     --ks-c42 0.80 lead text      -> var(--ks-fg-muted)
   ============================================================ */

/* ---- marketing base ---- */
html, body { margin: 0; padding: 0; background: var(--ks-bg); }
* { box-sizing: border-box; }
::selection { background: var(--ks-indigo); color: var(--ks-fg-on-accent); }
body { font-family: "Instrument Sans", sans-serif; color: var(--ks-fg); -webkit-font-smoothing: antialiased; }

/* ---- tuned canvas (#6013 S4) ----
   Home + the product pages sit on the tuned --ks-c04 canvas and the --ks-c05
   selection rather than the semantic --ks-bg / --ks-indigo. Folds their
   identical page-local <style> blocks into one hook; values are unchanged.
   Hooks on <html>, not <body>: the background is set on BOTH elements, and
   html paints the canvas, so a body-only class would leave html on --ks-bg
   and show the wrong colour in the overscroll gutter.
   ks-smooth is separate because home deliberately has no smooth scroll. */
html.ks-tuned, html.ks-tuned body { background: var(--ks-c04); }
html.ks-tuned ::selection { background: var(--ks-c05); color: var(--ks-fg-on-accent); }
html.ks-smooth { scroll-behavior: smooth; }

/* ---- about page animation art (#6013 S4) ----
   The about page's inline-styled art references these by name; they were the
   only live rules left in its page-local <style> block. ks-pass / ks-block /
   ks-pop and an image-slot rule were defined alongside them but referenced
   nowhere in the repo, so they were dropped rather than carried up here. */
@keyframes ks-scan { 0%, 100% { top: 14px; opacity: 0.35; } 50% { top: 126px; opacity: 1; } }
@keyframes ks-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes ks-blink { from { opacity: 0.25; } to { opacity: 1; } }


/* ---- narrow policy/doc page (extension privacy pages) ----
   Folds the identical page-local <style> blocks on privacy/chrome-extension
   + privacy/vscode-extension into one shared scoped class (#6013 S4). Values
   are unchanged; already semantic --ks-* tokens, so zero visual change. */
.ks-doc-narrow { max-width: 820px; margin: 0 auto; padding: 72px 24px; line-height: 1.7; font-family: var(--ks-font-body); }
.ks-doc-narrow h1 { font-size: 30px; line-height: 1.15; margin-bottom: 10px; letter-spacing: 0; color: var(--ks-fg); }
.ks-doc-narrow h2 { font-size: 18px; margin: 30px 0 10px; color: var(--ks-fg); }
.ks-doc-narrow p, .ks-doc-narrow li { font-size: 14px; color: var(--ks-fg-muted); margin-bottom: 10px; }
.ks-doc-narrow ul { padding-left: 22px; margin-bottom: 14px; }
.ks-doc-narrow a { color: var(--ks-indigo); text-decoration: none; }
.ks-doc-narrow a:hover { text-decoration: underline; }
.ks-doc-narrow .updated { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ks-border); font-size: 12px; color: var(--ks-fg-dim); }
.ks-doc-narrow .back { display: inline-flex; margin-bottom: 28px; font-size: 13px; }

/* ---- legal document pages: cookies / privacy / terms (#6013 S4) ----
   Folds the three identical page-local <style> blocks into one class on <body>.
   Values are unchanged with ONE approved exception: the blocks pinned
   body{font-family:var(--ks-font-body)}, i.e. the app's Inter token, on pages
   that load Instrument Sans and never load Inter — so the body text silently
   fell back to the system font while the injected header/footer (which set
   their own family) already rendered Instrument Sans. Dropping the pin lets the
   shared marketing body rule apply, making each page internally consistent.
   Rules are scoped to .content / .ks-crumbs rather than bare elements: the old
   blocks styled a/h2/p globally, but measurement showed the chrome's own CSS
   already wins, so tight scoping leaves the header/footer byte-identical and
   avoids a specificity tie against them. */
.ks-legal-page { min-height: 100vh; }
.ks-legal-page .ks-crumbs-wrap * , .ks-legal-page .content * { margin: 0; padding: 0; }
.ks-legal-page .ks-crumbs-wrap { max-width: 800px; margin: 0 auto; padding: 28px 24px 0; }
.ks-legal-page .ks-crumbs { font-family: var(--ks-font-mono), monospace; font-size: 12px; color: var(--ks-fg-muted); }
.ks-legal-page .ks-crumbs a { color: var(--ks-indigo); text-decoration: none; }
.ks-legal-page .ks-crumbs a:hover { text-decoration: underline; }
.ks-legal-page .ks-crumbs span { margin: 0 6px; color: var(--ks-fg-dim); }
.ks-legal-page .ks-crumbs [aria-current="page"] { color: var(--ks-fg-muted); }
.ks-legal-page .content { max-width: 800px; margin: 0 auto; padding: 44px 24px 60px; }
.ks-legal-page .content h1 { font-size: 28px; margin-bottom: 8px; letter-spacing: 0; color: var(--ks-fg); }
.ks-legal-page .content h2 { font-size: 18px; margin: 28px 0 10px; color: var(--ks-fg); }
.ks-legal-page .content h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; color: var(--ks-fg-secondary); }
.ks-legal-page .content p, .ks-legal-page .content li { font-size: 14px; line-height: 1.8; color: var(--ks-fg-muted); margin-bottom: 10px; }
.ks-legal-page .content ul { padding-left: 20px; margin-bottom: 12px; }
.ks-legal-page .content li { margin-bottom: 6px; }
.ks-legal-page .content a { color: var(--ks-indigo); text-decoration: none; }
.ks-legal-page .content a:hover { text-decoration: underline; }
.ks-legal-page .content table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 13px; }
.ks-legal-page .content th, .ks-legal-page .content td { padding: 10px 12px; text-align: left; border: 1px solid var(--ks-border); }
.ks-legal-page .content th { background: var(--ks-indigo-bg); color: var(--ks-fg); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ks-legal-page .content td { color: var(--ks-fg-muted); }
.ks-legal-page .content .updated { font-size: 12px; color: var(--ks-fg-dim); margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--ks-border); }

/* ---- contact page (#6013 S4) ----
   Folds contact's page-local <style> block. Geometry + tuned --ks-c* colours
   are preserved verbatim. Two things to know before touching this:
   - .ds-breadcrumbs is SHARED (8 other templates + the rules further down this
     file). Contact deliberately restyles it — different colour tokens, and it
     carries the wrap geometry itself instead of using .ds-breadcrumbs-wrap. So
     contact's version is scoped under .contact-page and must stay that way, or
     it will repaint the breadcrumbs on every other page.
   - The body colour is var(--ks-c07), which is NOT the shared body's var(--ks-fg)
     (#f7f8fa vs #f3f4f6 dark). Carried on .ks-contact-page so it still wins. */
.ks-contact-page { color: var(--ks-c07); }
.contact-page { background: var(--ks-c04); min-height: 100vh; }
.contact-page .ds-breadcrumbs { max-width: 1240px; margin: 0 auto; padding: 96px 40px 0; font-size: 12px; color: var(--ks-c17); }
.contact-page .ds-breadcrumbs a { color: var(--ks-c02); text-decoration: none; }
.contact-hero { max-width: 1240px; margin: 0 auto; padding: 130px 40px 0; }
.contact-kicker { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0; text-transform: uppercase; color: var(--ks-c02); }
.contact-hero h1 { font-size: 88px; line-height: 0.98; letter-spacing: 0; font-weight: 700; margin: 30px 0 0; max-width: 1040px; text-wrap: balance; color: var(--ks-c07); }
.contact-hero h1 span { font-style: italic; font-weight: 400; color: var(--ks-c02); }
.contact-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--ks-c16); }
.contact-intro p { margin: 0; color: var(--ks-c13); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.contact-intro p:first-child { color: var(--ks-c42); font-size: 22px; line-height: 1.55; }
.contact-direct { color: var(--ks-c02); text-decoration: none; border-bottom: 1px solid var(--ks-c02); }
@media (max-width: 768px) {
  .contact-page .ds-breadcrumbs { padding: 72px 20px 0; }
  .contact-hero { padding: 86px 20px 0; }
  .contact-hero h1 { font-size: clamp(40px, 12vw, 60px); line-height: 1.05; }
  .contact-intro { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
}

/* ---- pricing page ---- */
.pricing-page { background: var(--ks-bg); min-height: 100vh; }
.pricing-hero { max-width: 1240px; margin: 0 auto; padding: 108px 40px 0; }
.pricing-kicker { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ks-indigo-light); }
.pricing-hero h1 { font-size: 78px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; margin: 24px 0 0; max-width: 900px; text-wrap: balance; }
.pricing-hero h1 span { color: var(--ks-indigo-light); font-style: italic; font-weight: 400; }
.pricing-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 58px; padding-top: 34px; border-top: 1px solid var(--ks-border); }
.pricing-lead p { margin: 0; color: var(--ks-fg-secondary); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.pricing-lead p:first-child { color: var(--ks-fg-muted); font-size: 21px; line-height: 1.55; }
.pricing-grid { max-width: 1240px; margin: 0 auto; padding: 74px 40px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pricing-tier { border-top: 1px solid var(--ks-border); border-right: 1px solid var(--ks-border); padding: 32px 28px 36px; min-height: 420px; display: flex; flex-direction: column; }
.pricing-tier:first-child { border-left: 1px solid var(--ks-border); }
.pricing-tier-name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--ks-fg); }
.pricing-tier-fit { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-indigo-light); margin-top: 12px; line-height: 1.55; }
.pricing-tier-copy { color: var(--ks-fg-secondary); font-size: 15px; line-height: 1.6; margin: 22px 0 0; text-wrap: pretty; }
.pricing-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; color: var(--ks-fg-secondary); font-size: 14.5px; line-height: 1.45; }
.pricing-list li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.pricing-list span { color: var(--ks-indigo-light); font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.45; }
.pricing-cta { max-width: 1240px; margin: 0 auto; padding: 76px 40px 108px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pricing-cta h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; margin: 0; max-width: 620px; }
.pricing-cta p { color: var(--ks-fg-secondary); font-size: 17px; line-height: 1.7; margin: 18px 0 0; max-width: 600px; }
.pricing-actions { display: flex; justify-content: flex-end; gap: 24px; align-items: center; }
@media (max-width: 980px) {
  .ks-breadcrumbs { padding: 64px 24px 0; }
  .pricing-hero { padding: 56px 24px 0; }
  .pricing-hero h1 { font-size: clamp(44px, 10vw, 70px); }
  .pricing-lead, .pricing-cta { grid-template-columns: 1fr; gap: 28px; }
  .pricing-grid { grid-template-columns: 1fr; padding: 56px 24px 0; }
  .pricing-tier { border-left: 1px solid var(--ks-border); }
  .pricing-cta { padding: 56px 24px 88px; }
  .pricing-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ============================================================
   MARKETING PALETTE — ks-redesign family re-skin (#6070 slice 3).
   The ks-redesign.css numbered palette (--ks-c01..c77), surgically
   re-skinned: only the royal-blue brand hue is shifted to the app's
   indigo (#2547d0->#4f46e5, #9db4f2->#a5b4fc, etc.). Every neutral,
   opacity tier, and status color (green/amber/red) is preserved
   byte-for-byte from the paired light/dark design exports, so contrast
   is unchanged and only the brand color moves. Pages that ride these
   tokens (their page-local <style>) re-skin to indigo on repoint.
   De-hardcoding those <style> blocks is Wave 4.
   ============================================================ */
:root,
[data-theme="dark"] {
  --ks-c01: #0a0e1c;
  --ks-c02: #a5b4fc;
  --ks-c03: #f7f8fa;
  --ks-c04: #0a0e1c;
  --ks-c05: #4f46e5;
  --ks-c07: #f7f8fa;
  --ks-c08: rgba(10,14,28,0.85);
  --ks-c09: rgba(247,248,250,0.1);
  --ks-c10: #ffffff;
  --ks-c11: rgba(247,248,250,0.92);
  --ks-c12: #4f46e5;
  --ks-c13: rgba(247,248,250,0.92);
  --ks-c14: #4338ca;
  --ks-c15: rgba(247,248,250,0.25);
  --ks-c16: rgba(247,248,250,0.18);
  --ks-c17: rgba(247,248,250,0.86);
  --ks-c18: #0f1530;
  --ks-c19: #a5b4fc;
  --ks-c20: rgba(247,248,250,0.9);
  --ks-c21: rgba(165,180,252,0.22);
  --ks-c22: rgba(247,248,250,0.84);
  --ks-c23: rgba(165,180,252,0.25);
  --ks-c24: rgba(129,140,248,0.04);
  --ks-c25: rgba(129,140,248,0);
  --ks-c26: rgba(129,140,248,0.07);
  --ks-c27: rgba(129,140,248,0.22);
  --ks-c28: rgba(247,248,250,0.09);
  --ks-c29: rgba(247,248,250,0.82);
  --ks-c30: rgba(247,248,250,0.9);
  --ks-c31: rgba(247,248,250,0.92);
  --ks-c32: #0a0e1c;
  --ks-c33: rgba(247,248,250,0.82);
  --ks-c34: rgba(165,180,252,0.18);
  --ks-c35: rgba(247,248,250,0.82);
  --ks-c36: rgba(247,248,250,0.88);
  --ks-c37: rgba(247,248,250,0.14);
  --ks-c38: #131b38;
  --ks-c39: rgba(247,248,250,0.08);
  --ks-c40: rgba(247,248,250,0.12);
  --ks-c41: rgba(247,248,250,0.84);
  --ks-c42: rgba(247,248,250,0.8);
  --ks-c43: #1b2658;
  --ks-c44: #0e1430;
  --ks-c45: #34d399;
  --ks-c46: rgba(165,180,252,0.2);
  --ks-c47: #818cf8;
  --ks-c48: #a9b2c8;
  --ks-c49: rgba(247,248,250,0.8);
  --ks-c50: rgba(165,180,252,0.85);
  --ks-c51: rgba(129,140,248,0.16);
  --ks-c52: #c4b5fd;
  --ks-c53: rgba(165,180,252,1);
  --ks-c54: rgba(99,102,241,0.9);
  --ks-c55: rgba(248,113,113,0.9);
  --ks-c56: rgba(248,113,113,0.7);
  --ks-c57: rgba(248,113,113,0.95);
  --ks-c58: rgba(165,180,252,0.45);
  --ks-c59: rgba(10,14,28,0.92);
  --ks-c60: rgba(165,180,252,0.4);
  --ks-c61: rgba(247,248,250,0.88);
  --ks-c62: #f87171;
  --ks-c63: rgba(165,180,252,0.8);
  --ks-c64: #fbbf24;
  --ks-c65: rgba(52,211,153,0.14);
  --ks-c66: rgba(251,191,36,0.14);
  --ks-c67: rgba(52,211,153,0.4);
  --ks-c68: rgba(251,191,36,0.4);
  --ks-c69: rgba(52,211,153,0.12);
  --ks-c70: rgba(52,211,153,0.5);
  --ks-c71: rgba(248,113,113,0.12);
  --ks-c72: rgba(248,113,113,0.5);
  --ks-c73: rgba(10,14,28,0.6);
  --ks-c74: rgba(247,248,250,0.92);
  --ks-c75: rgba(99,102,241,0.5);
  --ks-c76: rgba(165,180,252,0.14);
  --ks-c77: rgba(99,102,241,0.35);
  --ks-c78: #67e8f9;
}
[data-theme="light"] {
  --ks-c01: #4f46e5;
  --ks-c02: #4f46e5;
  --ks-c03: #f7f8fa;
  --ks-c04: #f7f8fa;
  --ks-c05: #4f46e5;
  --ks-c07: #0f1530;
  --ks-c08: rgba(247,248,250,0.88);
  --ks-c09: rgba(15,21,48,0.1);
  --ks-c10: #f7f8fa;
  --ks-c11: rgba(15,21,48,0.7);
  --ks-c12: #0f1530;
  --ks-c13: rgba(15,21,48,0.65);
  --ks-c14: #4338ca;
  --ks-c15: rgba(15,21,48,0.25);
  --ks-c16: rgba(15,21,48,0.18);
  --ks-c17: rgba(15,21,48,0.5);
  --ks-c18: #0f1530;
  --ks-c19: #a5b4fc;
  --ks-c20: rgba(247,248,250,0.9);
  --ks-c21: rgba(165,180,252,0.22);
  --ks-c22: rgba(247,248,250,0.84);
  --ks-c23: rgba(165,180,252,0.25);
  --ks-c24: rgba(79,70,229,0.04);
  --ks-c25: rgba(79,70,229,0);
  --ks-c26: rgba(79,70,229,0.07);
  --ks-c27: rgba(79,70,229,0.22);
  --ks-c28: rgba(15,21,48,0.09);
  --ks-c29: rgba(15,21,48,0.35);
  --ks-c30: rgba(15,21,48,0.6);
  --ks-c31: rgba(247,248,250,0.92);
  --ks-c32: #0f1530;
  --ks-c33: rgba(247,248,250,0.82);
  --ks-c34: rgba(165,180,252,0.18);
  --ks-c35: rgba(247,248,250,0.82);
  --ks-c36: rgba(15,21,48,0.55);
  --ks-c37: rgba(15,21,48,0.14);
  --ks-c38: #ffffff;
  --ks-c39: rgba(15,21,48,0.08);
  --ks-c40: rgba(15,21,48,0.12);
  --ks-c41: rgba(15,21,48,0.45);
  --ks-c42: rgba(15,21,48,0.8);
  --ks-c43: #1b2658;
  --ks-c44: #0e1430;
  --ks-c45: #34d399;
  --ks-c46: rgba(165,180,252,0.2);
  --ks-c47: #818cf8;
  --ks-c48: #a9b2c8;
  --ks-c49: rgba(247,248,250,0.8);
  --ks-c50: rgba(165,180,252,0.85);
  --ks-c51: rgba(79,70,229,0.16);
  --ks-c52: #c4b5fd;
  --ks-c53: rgba(165,180,252,1);
  --ks-c54: rgba(99,102,241,0.9);
  --ks-c55: rgba(248,113,113,0.9);
  --ks-c56: rgba(248,113,113,0.7);
  --ks-c57: rgba(248,113,113,0.95);
  --ks-c58: rgba(165,180,252,0.45);
  --ks-c59: rgba(10,14,28,0.92);
  --ks-c60: rgba(165,180,252,0.4);
  --ks-c61: rgba(247,248,250,0.88);
  --ks-c62: #f87171;
  --ks-c63: rgba(165,180,252,0.8);
  --ks-c64: #fbbf24;
  --ks-c65: rgba(52,211,153,0.14);
  --ks-c66: rgba(251,191,36,0.14);
  --ks-c67: rgba(52,211,153,0.4);
  --ks-c68: rgba(251,191,36,0.4);
  --ks-c69: rgba(52,211,153,0.12);
  --ks-c70: rgba(52,211,153,0.5);
  --ks-c71: rgba(248,113,113,0.12);
  --ks-c72: rgba(248,113,113,0.5);
  --ks-c73: rgba(10,14,28,0.6);
  --ks-c74: rgba(247,248,250,0.92);
  --ks-c75: rgba(99,102,241,0.5);
  --ks-c76: rgba(165,180,252,0.14);
  --ks-c77: rgba(99,102,241,0.35);
  --ks-c78: #0891b2;
}

/* ---- product / connectors page rules (ported verbatim from ks-redesign.css;
   they reference the re-skinned --ks-cNN tokens above) ---- */

/* Mobile — the design exports are desktop-only (fixed grids, 80-96px headings).
   Stack grids, fluid-scale headings, tighten section padding. Inline styles are
   overridden with !important; selectors only match the page content (the shared
   header/footer use classes, not inline grid/max-width, so they're untouched). */
@media (max-width: 768px) {
  [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  h1[style] { font-size: clamp(38px, 11.5vw, 58px) !important; line-height: 1.05 !important; }
  h2[style] { font-size: clamp(25px, 7vw, 34px) !important; line-height: 1.15 !important; }
  [style*="font-size: 60px"], [style*="font-size: 56px"], [style*="font-size: 52px"],
  [style*="font-size: 48px"], [style*="font-size: 44px"], [style*="font-size: 40px"] {
    font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.18 !important;
  }
  [style*="padding: 110px"], [style*="padding: 120px"], [style*="padding: 130px"] {
    padding-top: 56px !important; padding-bottom: 44px !important;
  }
}

/* Product connectors page. Built on shared marketing/app tokens rather than
   page-local design-export CSS. */
.ks-product-page {
  min-height: 100vh;
  background: var(--ks-c04);
  color: var(--ks-c07);
  font-family: var(--ds-font-body);
  -webkit-font-smoothing: antialiased;
}

.ks-product-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--ds-space-16) var(--ds-space-10) var(--ds-space-20);
}

.ks-connectors-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--ds-space-16);
  align-items: end;
  padding-bottom: var(--ds-space-12);
}

.ks-connectors-eyebrow,
.ks-connectors-kicker {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-caption-size);
  letter-spacing: var(--ds-caption-tracking);
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-connectors-title {
  max-width: 820px;
  margin: var(--ds-space-4) 0 0;
}

.ks-connectors-lede {
  margin: 0;
  color: var(--ks-c13);
  max-width: 620px;
}

.ks-connectors-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-6);
}

.ks-connectors-strip {
  display: none;
}

.ks-connectors-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-10);
}

.ks-connectors-select-wrap,
.ks-connectors-name-search {
  display: grid;
  gap: var(--ds-space-2);
}

.ks-connectors-select-wrap {
  min-width: min(100%, 280px);
}

.ks-connectors-name-search {
  flex: 1 1 360px;
}

.ks-connectors-name-search[hidden] {
  display: none !important;
}

.ks-connectors-filter-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-caption-size);
  letter-spacing: var(--ds-caption-tracking);
  text-transform: uppercase;
  color: var(--ks-c17);
}

.ks-connectors-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}

.ks-connectors-select,
.ks-connectors-search {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--ks-c16) 75%, transparent);
  border-radius: var(--ds-radius-md);
  background: var(--ks-c24);
  color: var(--ks-c07);
  font: inherit;
  padding: 0 var(--ds-space-4);
}

.ks-connectors-select {
  width: 100%;
}

.ks-connectors-search {
  flex: 1 1 220px;
  min-width: min(100%, 220px);
}

.ks-connectors-select:focus-visible,
.ks-connectors-search:focus-visible {
  outline: 2px solid var(--ks-c02);
  outline-offset: 3px;
  border-color: var(--ks-c02);
}

.ks-connectors-empty {
  color: var(--ks-c13);
  margin: var(--ds-space-8) 0 0;
  padding: 0;
}

.ks-connectors-empty:empty {
  display: none;
}

.ks-connectors-section[hidden],
.ks-connector-card[hidden],
.ks-connectors-empty[hidden] {
  display: none !important;
}

.ks-connectors-section {
  padding-top: var(--ds-space-16);
}

.ks-connectors-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--ds-space-10);
  align-items: end;
  margin-bottom: var(--ds-space-6);
}

.ks-connectors-section-head h2 {
  margin: var(--ds-space-2) 0 0;
}

.ks-connectors-section-head p {
  margin: 0;
  color: var(--ks-c30);
}

.ks-connectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ds-space-4);
}

.ks-connector-card {
  min-height: 100%;
  display: grid;
  gap: var(--ds-space-4);
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--ks-c16) 65%, transparent);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  background: var(--ks-c24);
}

.ks-connector-logo-wrap {
  min-height: var(--ds-space-16);
  display: flex;
  align-items: center;
}

.ks-connector-logo {
  display: block;
  max-width: 150px;
  max-height: var(--ds-space-10);
  width: auto;
  height: auto;
  object-fit: contain;
}

.ks-connector-logo-light {
  display: none;
}

[data-theme="light"] .ks-connector-logo-light {
  display: block;
}

[data-theme="light"] .ks-connector-logo-dark {
  display: none;
}

.ks-connector-card h3 {
  margin: 0;
}

.ks-connector-card p {
  margin: 0;
  color: var(--ks-c36);
}

.ks-connectors-note {
  margin-top: var(--ds-space-10);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--ds-space-10);
  border-top: 1px solid var(--ks-c16);
  padding-top: var(--ds-space-8);
}

.ks-connectors-note p {
  margin: 0;
  color: var(--ks-c30);
}

@media (max-width: 900px) {
  .ks-product-main {
    padding: var(--ds-space-12) var(--ds-space-5) var(--ds-space-16);
  }

  .ks-connectors-hero,
  .ks-connectors-section-head,
  .ks-connectors-note {
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
  }

  .ks-connectors-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ks-connectors-strip {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   #6204 — restore heading inheritance on marketing dark bands (light mode)

   Marketing pages load the app design-system.css BEFORE this file. Its
   light-mode rule "[data-theme=light] h1..h4:not(#ks-header)... color:
   var(--ds-text) !important" (--ds-text is #111827, dark), plus a
   non-important h1..h6 base rule, force-color headings dark in light mode.
   That overrides the permanently-dark bands' light heading color
   (background var(--ks-c18) with color var(--ks-c03)), so band headings
   render dark-on-dark and vanish. The band body text already inherits
   correctly; headings are the only elements the app pins. Restore
   inheritance so headings follow their section like the body text does:
   light on dark bands, dark on light sections. This matches the app rule's
   specificity plus !important and, loading after design-system.css, wins on
   source order. Header/footer are excluded to mirror the app rule. No
   marketing heading uses gradient text, and in light mode a light section's
   inherited color (#0f1530, --ks-c07) equals the design intent, so this is
   visually inert off the dark bands.
   ============================================================ */
[data-theme="light"] h1:not(#ks-header h1):not(#ks-footer h1),
[data-theme="light"] h2:not(#ks-header h2):not(#ks-footer h2),
[data-theme="light"] h3:not(#ks-header h3):not(#ks-footer h3),
[data-theme="light"] h4:not(#ks-header h4):not(#ks-footer h4),
[data-theme="light"] h5:not(#ks-header h5):not(#ks-footer h5),
[data-theme="light"] h6:not(#ks-header h6):not(#ks-footer h6) {
  color: inherit !important;
}

/* ============================================================
   #6070 — typography utilities ported from design-system.css onto --ks
   (used by product/connectors). Same sizes/weights as the --ds versions;
   colors mapped to the theme-flipping --ks text tiers so they read in both
   modes without design-system.css.
   ============================================================ */
.ds-title { font-family: var(--ks-font-display); font-size: 3.25rem; font-weight: 600; line-height: 1.1; letter-spacing: 0; color: var(--ks-fg); }
.ds-body { font-family: var(--ks-font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--ks-fg); }
.ds-small { font-family: var(--ks-font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--ks-fg-muted); }
.ds-caption { font-family: var(--ks-font-body); font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--ks-fg-dim); }

/* ============================================================
   #6070 — design-system.css --ds compat for the last marketing pages
   (blog, blog-post, blog-author, book-a-demo, demo-confirmation, 404).
   Color tokens alias to the --ks indigo system (theme-flipping — the old
   royal-blue --ds palette is re-skinned to indigo here); geometry + type
   tokens copy the --ds values. Plus the .ds-* component/typography classes
   marketing consumes, ported onto those tokens. Lets those pages drop
   design-system.css onto the site's one indigo --ks core.
   ============================================================ */
:root {
  --ds-text: var(--ks-fg);
  --ds-text-body: var(--ks-fg);
  --ds-text-muted: var(--ks-fg-muted);
  --ds-text-dim: var(--ks-fg-dim);
  --ds-text-secondary: var(--ks-fg-secondary);
  --ds-text-on-accent: var(--ks-fg-on-accent);
  --ds-bg: var(--ks-bg);
  --ds-bg-card: var(--ks-bg-card);
  --ds-bg-elevated: var(--ks-bg-elevated);
  --ds-bg-elevated-light: var(--ks-bg-elevated);
  --ds-bg-hover: var(--ks-bg-hover);
  --ds-border: var(--ks-border);
  --ds-indigo: var(--ks-indigo);
  --ds-indigo-light: var(--ks-indigo-light);
  --ds-indigo-muted: var(--ks-indigo-muted);
  --ds-accent: var(--ks-indigo-light);
  --ds-accent-light: var(--ks-indigo);
  --ds-purple-light: var(--ks-indigo-light);
  --ds-purple-lighter: color-mix(in oklch, var(--ks-indigo-light), white 22%);
  --ds-purple-pale: color-mix(in oklch, var(--ks-indigo-light), white 45%);
  --ds-lavender: color-mix(in oklch, var(--ks-indigo-light), white 12%);
  --ds-green: var(--ks-green);
  --ds-red: var(--ks-red);
  --ds-accent-gradient: linear-gradient(135deg, var(--ks-indigo-light) 0%, var(--ks-indigo) 60%);
  --ds-cta-gradient: linear-gradient(135deg, var(--ks-indigo-light) 0%, var(--ks-indigo) 55%);
  --ds-glass-bg: var(--ks-bg-card);
  --ds-glass-blur: 14px;
  --ds-glass-saturate: 140%;
  --ds-glass-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --ds-glass-shadow: 0 24px 60px rgb(2 6 23 / 0.4);
  --ds-font-display: var(--ks-font-display);
  --ds-font-body: var(--ks-font-body);
  --ds-font-mono: var(--ks-font-mono);
  --ds-font-semibold: 600;
  --ds-title-size: 3.25rem; --ds-title-weight: 600; --ds-title-leading: 1.1; --ds-title-tracking: 0;
  --ds-body-size: 1rem; --ds-body-weight: 400; --ds-body-leading: 1.6;
  --ds-small-size: 0.875rem; --ds-small-weight: 400; --ds-small-leading: 1.5;
  --ds-caption-size: 0.75rem; --ds-caption-weight: 500; --ds-caption-leading: 1.4; --ds-caption-tracking: 0;
  --ds-display-sm-size: 1.75rem; --ds-h2-leading: 1.25; --ds-h3-size: 1.125rem;
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 16px; --ds-radius-full: 9999px;
  --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem;
  --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem;
  --ds-container-width: 75rem;
}

.ks-platform-main-link,
.ks-platform-row-link {
  transition: color .16s ease;
}

.ks-platform-main-link:hover,
.ks-platform-main-link:focus-visible,
.ks-platform-row-link:hover,
.ks-platform-row-link:focus-visible {
  color: var(--ks-indigo-light) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ks-indigo-light) !important;
  text-underline-offset: 4px;
}

.ks-platform-row-link:hover,
.ks-platform-row-link:focus-visible {
  background: color-mix(in srgb, var(--ks-indigo-light) 7%, transparent);
}

.ks-platform-main-link:focus-visible,
.ks-platform-row-link:focus-visible {
  outline: 2px solid var(--ks-c02);
  outline-offset: 4px;
}

.ks-platform-row-link::after {
  content: ">";
  flex: 0 0 auto;
  font-family: var(--ks-font-mono, "IBM Plex Mono", monospace);
  font-size: 13px;
  color: var(--ks-c29);
  transition: color .16s ease, transform .16s ease;
}

.ks-platform-row-link:hover::after,
.ks-platform-row-link:focus-visible::after {
  color: var(--ks-indigo-light);
  transform: translateX(2px);
}

.ks-how-step-card:hover {
  border-color: var(--acc);
  box-shadow: 0 16px 34px rgb(15 21 48 / 0.13);
  transform: translateY(-4px);
}

.ks-dc-shell {
  display: none;
}

.ks-js .ks-dc-shell {
  display: block;
}

.ks-js .ks-static-fallback {
  display: none;
}

.ks-static-fallback {
  min-height: 100vh;
  background: var(--ks-c04);
  color: var(--ks-c07);
  font-family: var(--ks-font-body, "Instrument Sans", ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.ks-static-fallback__section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 84px 40px;
}

.ks-static-fallback__kicker {
  font-family: var(--ks-font-mono, "IBM Plex Mono", monospace);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-static-fallback h1,
.ks-static-fallback h2,
.ks-static-fallback h3,
.ks-static-fallback p {
  margin-top: 0;
}

.ks-static-fallback h1 {
  max-width: 920px;
  margin-bottom: 24px;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: 0;
}

.ks-static-fallback h2 {
  margin-bottom: 18px;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 0;
}

.ks-static-fallback h3 {
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0;
}

.ks-static-fallback__lede {
  max-width: 720px;
  color: var(--ks-c13);
  font-size: 20px;
  line-height: 1.55;
}

.ks-static-fallback__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.ks-static-fallback__card {
  border: 1px solid var(--ks-c16);
  border-radius: 16px;
  padding: 22px;
  background: var(--ks-c38);
}

.ks-static-fallback__card p,
.ks-static-fallback__card li {
  color: var(--ks-c13);
  font-size: 14px;
  line-height: 1.5;
}

.ks-static-fallback__card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.ks-static-fallback__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.ks-static-fallback__pill {
  border: 1px solid var(--ks-c16);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ks-c13);
  font-family: var(--ks-font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
}

@media (max-width: 720px) {
  .ks-static-fallback__section {
    padding: 64px 24px;
  }

  .ks-static-fallback h1 {
    font-size: 42px;
  }
}
.ds-hero { max-width: var(--ds-container-width, 75rem); margin: 0 auto; padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-16); }
.ds-page-header { max-width: 64rem; margin: 0 auto; text-align: center; }
.ds-page-title { margin: 0 0 1.25rem 0; color: var(--ds-text); font-family: var(--ds-font-display); font-size: var(--ds-title-size); font-weight: var(--ds-title-weight); line-height: var(--ds-title-leading); letter-spacing: var(--ds-title-tracking); text-wrap: balance; text-align: center; }
.ds-lead { max-width: 40rem; margin: 0 auto; font-size: var(--ds-body-size, 1rem); line-height: var(--ds-body-leading, 1.6); color: var(--ds-text-muted); }
.ds-hero-gradient-text, .ds-accent, .ds-teal { background: var(--ds-accent-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ds-segmented-tabs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-1); padding: var(--ds-space-1); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg-elevated); }
.ds-segmented-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); min-height: 32px; padding: 0 var(--ds-space-3); border: 0; border-radius: 4px; color: var(--ds-text-secondary); background: transparent; font-family: var(--ds-font-body); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: color .15s, background .15s; }
.ds-segmented-tab[aria-selected="true"], .ds-segmented-tab.is-active { color: var(--ds-text); background: var(--ds-bg-hover); }
.ds-segmented-tab:hover { color: var(--ds-text); }
.ds-svg-mono { font-family: var(--ds-font-mono); }
.ds-breadcrumbs-wrap { max-width: 1240px; margin: 0 auto; padding: 96px 40px 0; }

/* ============================================================
   #6013 S1 — utility (404/status) page + marketing button, folded from
   the retired page-styles-templates-2.css + capability-marketing.css
   (both were loaded only by /404). .util-page* on --ks; .mk-btn* on the
   --ds compat aliases above (indigo/glass).
   ============================================================ */
.util-page { max-width: 760px; margin: 0 auto; padding: 120px 64px 96px; text-align: center; }
.util-page .code { font-family: var(--ks-font-mono); font-size: 96px; font-weight: 500; letter-spacing: 0; background: var(--ks-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 22px; }
.util-page h1 { font-size: 36px; font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.util-page .lede { font-size: 17px; color: var(--ks-fg-muted); line-height: 1.55; margin-bottom: 32px; max-width: 52ch; margin-inline: auto; }
.util-page .actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 56px; }
.util-page .suggestions { border-top: 1px solid var(--ks-border); padding-top: 32px; text-align: left; }
.util-page .suggestions .label { font-family: var(--ks-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ks-fg-dim); margin-bottom: 14px; }
.util-page .suggestions ul { display: grid; grid-template-columns: 1fr; gap: 6px; list-style: none; margin: 0; padding: 0; }
.util-page .suggestions a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 7px; font-size: 14px; color: var(--ks-fg-secondary); text-decoration: none; }
.util-page .suggestions a:hover { background: var(--ks-bg-hover); color: var(--ks-fg); }
.util-page .suggestions a .arr { color: var(--ks-indigo-light); }
[data-theme="light"] .util-page .suggestions a .arr { color: var(--ks-indigo); }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid rgb(from var(--ds-lavender) r g b / 0.5); background: var(--ds-glass-bg); color: var(--ds-text); text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset); -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)); backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)); transition: transform 0.18s var(--ds-ease), box-shadow 0.18s var(--ds-ease), background 0.18s, border-color 0.18s, color 0.18s, filter 0.18s; }
.mk-btn:hover { transform: translateY(-1px); border-color: rgb(from var(--ds-lavender) r g b / 0.9); background: rgb(from var(--ds-indigo) r g b / 0.14); }
.mk-btn:active { transform: translateY(0); background: rgb(from var(--ds-indigo) r g b / 0.24); box-shadow: inset 0 2px 6px rgb(from var(--ds-indigo) r g b / 0.3); }
.mk-btn:focus-visible { outline: 2px solid rgb(from var(--ds-purple-pale) r g b / 0.9); outline-offset: 3px; }
.mk-btn.primary { border-color: rgb(from var(--ds-lavender) r g b / 0.45); background: var(--ds-cta-gradient); color: var(--ds-text-on-accent); box-shadow: 0 4px 16px rgb(from var(--ds-indigo) r g b / 0.3), var(--ds-glass-inset); }
.mk-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(from var(--ds-indigo) r g b / 0.45), var(--ds-glass-inset); background: var(--ds-cta-gradient); }
.mk-btn.primary:active { transform: translateY(0); filter: brightness(0.92); box-shadow: inset 0 2px 6px rgb(from var(--ds-indigo) r g b / 0.55); }
[data-theme="light"] .mk-btn { border-color: rgb(from var(--ds-indigo) r g b / 0.4); }
[data-theme="light"] .mk-btn:hover { border-color: rgb(from var(--ds-indigo) r g b / 0.65); background: rgb(from var(--ds-indigo) r g b / 0.08); }
[data-theme="light"] .mk-btn:active { background: rgb(from var(--ds-indigo) r g b / 0.14); }
[data-theme="light"] .mk-btn.primary { border-color: rgb(from var(--ds-lavender) r g b / 0.45); }

/* ============================================================
   #6013 S2 — contact/lead form, folded verbatim from the retired
   lead-form.css (loaded only by about + contact). Uses the --ks-cNN
   marketing palette (collapsed onto semantic --ks-* in S3).
   ============================================================ */
.ks-lead-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 130px 40px;
}

.ks-lead-shell {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: start;
  border-top: 1px solid var(--ks-c16);
  padding-top: 56px;
}

.ks-lead-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ks-c02);
}

.ks-lead-title {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 700;
  margin: 26px 0 0;
  text-wrap: balance;
  color: var(--ks-c07);
}

.ks-lead-copy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ks-c13);
  margin: 24px 0 0;
  text-wrap: pretty;
}

.ks-lead-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ks-lead-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ks-c42);
  font-size: 15.5px;
  line-height: 1.55;
}

.ks-lead-list span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ks-c21);
  color: var(--ks-c02);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.ks-lead-card {
  background:
    linear-gradient(180deg, var(--ks-c38), color-mix(in oklch, var(--ks-c38), var(--ks-c04) 18%));
  border: 1px solid var(--ks-c37);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 24px 70px color-mix(in oklch, var(--ks-c04), transparent 52%);
}

.ks-lead-form {
  display: grid;
  gap: 18px;
}

.ks-lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ks-lead-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.ks-lead-field-wide {
  grid-column: 1 / -1;
}

.ks-lead-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ks-c42);
}

.ks-lead-input,
.ks-lead-select,
.ks-lead-textarea {
  width: 100%;
  border: 1px solid var(--ks-c37);
  border-radius: 12px;
  background: var(--ks-c24);
  color: var(--ks-c07);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ks-lead-input,
.ks-lead-select {
  block-size: 50px;
  min-block-size: 50px;
  max-block-size: 50px;
}

.ks-lead-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ks-c02) 50%),
    linear-gradient(135deg, var(--ks-c02) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.ks-lead-textarea {
  min-height: 138px;
  resize: vertical;
}

.ks-lead-input::placeholder,
.ks-lead-textarea::placeholder {
  color: var(--ks-c17);
}

.ks-lead-input:focus,
.ks-lead-select:focus,
.ks-lead-textarea:focus {
  border-color: var(--ks-c02);
  background: var(--ks-c26);
  box-shadow: 0 0 0 4px var(--ks-c21);
}

.ks-lead-input[aria-invalid="true"],
.ks-lead-input[data-personal-email-blocked] {
  border-color: var(--ks-c62);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ks-c62), transparent 78%);
}

.ks-lead-email-error {
  min-height: 18px;
  color: var(--ks-c62);
  font-size: 12.5px;
  line-height: 1.45;
}

.ks-lead-email-error[hidden] {
  display: none;
}

.ks-lead-input:disabled,
.ks-lead-select:disabled,
.ks-lead-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.ks-lead-privacy {
  margin: 2px 0 0;
  color: var(--ks-c17);
  font-size: 12.5px;
  line-height: 1.6;
}

.ks-lead-privacy a {
  color: var(--ks-c02);
  text-decoration: none;
}

.ks-lead-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.ks-lead-status {
  min-height: 22px;
  margin: 0;
  color: var(--ks-c17);
  font-size: 13px;
  line-height: 1.5;
}

.ks-lead-status[data-tone="success"] {
  color: var(--ks-c45);
}

.ks-lead-status[data-tone="error"] {
  color: var(--ks-c62);
}

[data-theme="light"] .ks-lead-card {
  box-shadow: 0 24px 70px color-mix(in oklch, var(--ks-c07), transparent 88%);
}

[data-theme="light"] .ks-lead-input,
[data-theme="light"] .ks-lead-select,
[data-theme="light"] .ks-lead-textarea {
  background: color-mix(in oklch, var(--ks-c10), var(--ks-c05) 3%);
}

@media (max-width: 900px) {
  .ks-lead-shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .ks-lead-section {
    padding: 72px 20px;
  }

  .ks-lead-shell {
    padding-top: 40px;
  }

  .ks-lead-title {
    font-size: clamp(34px, 11vw, 48px);
  }

  .ks-lead-grid {
    grid-template-columns: 1fr;
  }

  .ks-lead-card {
    padding: 22px;
    border-radius: 16px;
  }
}

/* ============================================================
   product pages (/product/*) — ported from the standalone design
   ("KoraSafe Audit - standalone.html"). Layout, rhythm, and every
   visual element match the design; nothing is hardcoded. All colour,
   type, radius, and shadow reads a --ks-* token, so both themes come
   from the single token source.

   Per-product accent: the design gives each product its own hue
   (discover cyan, detect red, govern indigo, audit green). Scope it
   once via [data-pp-product] and every child reads --pp-accent.
   --pp-accent-rgb carries the triplet for the rgba() tints/borders.
   ============================================================ */

.pp {
  --pp-font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --pp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The shared site header (#ks-site-header .ks-hd-inner) is 76px and sticky
     at every width. Anchored sections clear it, or a jump to #connectors /
     #black-box lands with its heading hidden behind the header. */
  --pp-header-h: 76px;
  --pp-anchor-offset: calc(var(--pp-header-h) + 24px);
  --pp-shell: 1220px;
  --pp-gutter: 46px;
  --pp-glow-opacity: 0.4;
  --pp-accent: var(--ks-indigo-light);
  --pp-accent-rgb: 99, 102, 241;
  --pp-brand-rgb: 124, 58, 237;
  --pp-hair-rgb: 15, 20, 40;

  --pp-shot-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.05);

  /* Window-chrome dots are macOS furniture, not risk state — they get
     their own tokens rather than borrowing the red/amber/green status
     tokens, which are reserved for risk tiers and legends. */
  --pp-chrome-red: #ff5f57;
  --pp-chrome-amber: #febc2e;
  --pp-chrome-green: #28c840;

  /* The closing CTA card is deliberately dark in BOTH themes (as drawn
     in the design), so its foreground colours are pinned on-dark rather
     than reading --ks-fg, which would go dark-on-dark in light mode. */
  --pp-cta-grad: linear-gradient(135deg, #1e1b4b, #0b1330 60%);
  --pp-cta-fg: var(--ks-fg-on-accent);
  --pp-cta-fg-muted: #cbd5e1;
  --pp-cta-eyebrow: #67e8f9;
  --pp-cta-accent: #a5b4fc;
  --pp-cta-border: rgba(129, 140, 248, 0.32);
  font-family: var(--pp-font-body);
  background: var(--ks-bg);
  color: var(--ks-fg-secondary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

[data-theme="dark"] .pp {
  --pp-glow-opacity: 1;
  --pp-brand-rgb: 139, 92, 246;
  --pp-hair-rgb: 243, 244, 246;
  --pp-shot-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ---- per-product accent scopes ---- */
.pp[data-pp-product="discover"] {
  --pp-accent: var(--ks-cyan);
  --pp-accent-rgb: 8, 145, 178;
}

[data-theme="dark"] .pp[data-pp-product="discover"] {
  --pp-accent-rgb: 103, 232, 249;
}

.pp[data-pp-product="detect"] {
  --pp-accent: var(--ks-red);
  --pp-accent-rgb: 220, 38, 38;
}

[data-theme="dark"] .pp[data-pp-product="detect"] {
  --pp-accent-rgb: 239, 68, 68;
}

.pp[data-pp-product="govern"] {
  --pp-accent: var(--ks-indigo-light);
  --pp-accent-rgb: 99, 102, 241;
}

[data-theme="dark"] .pp[data-pp-product="govern"] {
  --pp-accent-rgb: 129, 140, 248;
}

.pp[data-pp-product="audit"] {
  --pp-accent: var(--ks-green);
  --pp-accent-rgb: 5, 150, 105;
}

[data-theme="dark"] .pp[data-pp-product="audit"] {
  --pp-accent-rgb: 16, 185, 129;
}

.pp-shell {
  max-width: var(--pp-shell);
  margin: 0 auto;
}

/* ---- hero ---- */
.pp-hero {
  position: relative;
  padding: 74px var(--pp-gutter) 56px;
  overflow: hidden;
}

.pp-hero__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pp-glow {
  position: absolute;
  border-radius: var(--ks-radius-full);
  opacity: var(--pp-glow-opacity);
}

.pp-glow--brand {
  top: -170px;
  right: -120px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(var(--pp-brand-rgb), 0.3), transparent 62%);
}

.pp-glow--accent {
  top: 120px;
  left: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(var(--pp-accent-rgb), 0.16), transparent 65%);
}

.pp-hero__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  color: rgba(var(--pp-accent-rgb), 0.1);
}

[data-theme="light"] .pp-hero__mesh {
  color: rgba(var(--pp-hair-rgb), 0.04);
}

.pp-hero__inner {
  position: relative;
}

.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pp-accent);
  background: rgba(var(--pp-accent-rgb), 0.09);
  border: 1px solid rgba(var(--pp-accent-rgb), 0.3);
  border-radius: var(--ks-radius-pill);
  padding: 7px 15px;
  margin-bottom: 26px;
}

.pp-eyebrow__icon {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
}

.pp-hero__title {
  font-weight: var(--ks-weight-bold);
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ks-fg);
  max-width: 15ch;
  margin: 0;
}

.pp-hero__title-accent {
  color: var(--pp-accent);
  font-style: italic;
  font-weight: 400;
}

.pp-hero__desc {
  margin-top: 24px;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-hero__desc p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ks-fg-muted);
  margin: 0;
}

.pp-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.pp-btn-icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

/* ---- capability rows ---- */
.pp-caps {
  scroll-margin-top: var(--pp-anchor-offset);
  padding: 40px var(--pp-gutter) 80px;
  background: linear-gradient(180deg, var(--ks-bg), var(--ks-bg-soft));
}

.pp-caps__inner {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.pp-cap {
  scroll-margin-top: var(--pp-anchor-offset);
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-direction: row;
}

.pp-cap--flip {
  flex-direction: row-reverse;
}

.pp-cap__text {
  flex: 1;
  min-width: 0;
}

.pp-cap__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.pp-cap__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(var(--pp-accent-rgb), 0.1);
  border: 1px solid rgba(var(--pp-accent-rgb), 0.26);
  color: var(--pp-accent);
}

.pp-cap__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.pp-cap__name {
  font-size: 32px;
  font-weight: var(--ks-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ks-fg);
  margin: 0;
}

.pp-cap__lead {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ks-fg-secondary);
  margin: 0 0 14px;
}

.pp-cap__why {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ks-fg-dim);
  margin: 0;
}

.pp-cap__quote {
  margin: 20px 0 0;
  border-left: 3px solid var(--pp-accent);
  padding: 4px 0 4px 18px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ks-fg-secondary);
}

/* ---- feature list ---- */
.pp-feats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.pp-feat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: 15px 17px;
}

.pp-feat__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(var(--pp-accent-rgb), 0.12);
  color: var(--pp-accent);
  margin-top: 1px;
}

.pp-feat__check svg {
  width: 14px;
  height: 14px;
  display: block;
}

.pp-feat__body {
  min-width: 0;
}

.pp-feat__t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ks-fg);
  line-height: 1.3;
}

.pp-feat__d {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ks-fg-dim);
  margin-top: 4px;
}

/* ---- screenshot panel ---- */
.pp-shot {
  flex: 1;
  min-width: 0;
  position: sticky;
  top: 150px;
}

.pp-shot__stage {
  position: relative;
}

.pp-shot__aura {
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(var(--pp-brand-rgb), 0.5), rgba(var(--pp-accent-rgb), 0.34));
  filter: blur(4px);
  opacity: 0.5;
}

.pp-shot__frame {
  position: relative;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.28);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-elevated);
  box-shadow: var(--pp-shot-shadow);
  overflow: hidden;
}

.pp-shot__chrome {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ks-border);
}

.pp-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--ks-radius-full);
  flex: none;
}

.pp-dot--red {
  background: var(--pp-chrome-red);
}

.pp-dot--amber {
  background: var(--pp-chrome-amber);
}

.pp-dot--green {
  background: var(--pp-chrome-green);
}

.pp-shot__url {
  margin-left: 12px;
  font-family: var(--pp-font-mono);
  font-size: 11px;
  color: var(--ks-fg-dim);
  background: rgba(var(--pp-accent-rgb), 0.06);
  border: 1px solid var(--ks-border);
  border-radius: 7px;
  padding: 4px 11px;
}

.pp-shot__view {
  position: relative;
  width: 100%;
  height: 380px;
  background: rgba(var(--pp-accent-rgb), 0.04);
}

.pp-shot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pp-shot__img--light {
  display: none;
}

[data-theme="light"] .pp-shot__img--dark {
  display: none;
}

[data-theme="light"] .pp-shot__img--light {
  display: block;
}

.pp-badge {
  position: absolute;
  bottom: -20px;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--ks-bg-card);
  border: 1px solid rgba(var(--pp-accent-rgb), 0.34);
  border-radius: 14px;
  padding: 13px 17px;
  box-shadow: var(--ks-shadow-soft);
}

.pp-badge__n {
  font-family: var(--pp-font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--pp-accent);
}

.pp-badge__l {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ks-fg-dim);
  max-width: 12ch;
}

.pp-shot__caption {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ks-fg-dim);
}

.pp-shot__caption-icon {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
  color: var(--pp-accent);
}

/* ============================================================
   Shared closing CTA — every marketing page's last section uses the one
   card look from the design: centered, dark in BOTH themes, brand glow.

   Structures differ by page (some wrap a card in a section, pricing and
   blog-post ARE the card), so the recipe is keyed to whichever element
   is the card. Copy and markup are untouched; this is look-and-feel only.

   The card is dark in light mode, so rather than re-skinning the buttons
   per page it re-points the tokens the button recipes read (--ks-* for
   .ks-btn, the --ks-cNN aliases the older page-local buttons use). One
   recipe, on-dark inputs.
   ============================================================ */
.pp-cta,
.mk-cta {
  padding: 20px 46px 84px;
  background: transparent;
}

.pp-cta__card,
.mk-cta-card,
.why-cta-card,
.pricing-cta,
.post-cta-card {
  --pp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pp-brand-rgb: 139, 92, 246;
  --pp-cta-grad: linear-gradient(135deg, #1e1b4b, #0b1330 60%);
  --pp-cta-fg: var(--ks-fg-on-accent);
  --pp-cta-fg-muted: #cbd5e1;
  --pp-cta-eyebrow: #67e8f9;
  --pp-cta-accent: #a5b4fc;
  --pp-cta-border: rgba(129, 140, 248, 0.32);

  position: relative;
  display: block;
  max-width: 1220px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--pp-cta-border);
  background: var(--pp-cta-grad);
  padding: 60px 54px;
  text-align: center;

  /* on-dark inputs for the shared .ks-btn recipe … */
  --ks-fg: var(--pp-cta-fg);
  --ks-bg-elevated: rgba(255, 255, 255, 0.06);
  --ks-border: rgba(255, 255, 255, 0.18);
  /* … and for the page-local button systems still on --ks-cNN aliases */
  --ks-c07: var(--pp-cta-fg);
  --ks-c16: rgba(255, 255, 255, 0.18);
  --ks-c17: var(--pp-cta-fg-muted);

  /* The card is dark in light mode too. #6204 pins h1..h6 to
     `color: inherit !important` in light mode so headings follow their
     section rather than the app's dark default -- which only works if the
     section states a colour. Without this the headings inherit the page's
     dark text and disappear against the card. */
  color: var(--pp-cta-fg);
}

/* Brand glow. A pseudo-element so no page needs a new element. */
.pp-cta__card::before,
.mk-cta-card::before,
.why-cta-card::before,
.pricing-cta::before,
.post-cta-card::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 360px;
  background: radial-gradient(circle, rgba(var(--pp-brand-rgb), 0.4), transparent 62%);
  pointer-events: none;
}

/* Content sits above the glow. */
.pp-cta__body,
.mk-cta-body,
.why-cta-body,
.pricing-cta > *,
.post-cta-card > * {
  position: relative;
  max-width: none;
}

/* Headings: one size + the italic accent clause. */
.pp-cta__title,
.mk-cta-body h2,
.why-cta-body h2,
.pricing-cta h2,
.post-cta-title {
  font-family: var(--pp-font-body, 'Instrument Sans', sans-serif);
  font-weight: var(--ks-weight-bold);
  font-size: 38px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0 auto;
  color: var(--pp-cta-fg);
}

.pp-cta__title-accent,
.mk-cta-body h2 span,
.why-cta-body h2 span,
.pricing-cta h2 span,
.post-cta-title span {
  color: var(--pp-cta-accent);
  font-style: italic;
  font-weight: 400;
}

/* Supporting copy. */
.pp-cta__sub,
.mk-cta-body p,
.why-cta-body p,
.pricing-cta p,
.post-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pp-cta-fg-muted);
  margin: 18px auto 0;
  max-width: 64ch;
}

/* Eyebrow / tagline: mono caps above or below the headline. */
.pp-cta__eyebrow,
.mk-cta-eyebrow {
  font-family: var(--pp-font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pp-cta-eyebrow);
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .pp-cta,
  .mk-cta {
    padding: 56px 20px 72px;
  }

  .pp-cta__card,
  .mk-cta-card,
  .why-cta-card,
  .pricing-cta,
  .post-cta-card {
    padding: 40px 24px;
  }

  .pp-cta__title,
  .mk-cta-body h2,
  .why-cta-body h2,
  .pricing-cta h2,
  .post-cta-title {
    font-size: 28px;
  }
}

/* Action rows. */
.pp-cta__actions,
.mk-cta-actions,
.why-cta-body .why-actions,
.pricing-actions,
.post-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .pp-cap,
  .pp-cap--flip {
    flex-direction: column;
    gap: 32px;
  }

  .pp-shot {
    position: static;
    width: 100%;
  }

  .pp-hero__title {
    font-size: 48px;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .pp {
    --pp-gutter: 20px;
  }

  .pp-hero {
    padding-top: 48px;
  }

  .pp-hero__title {
    font-size: 38px;
  }

  .pp-caps__inner {
    gap: 64px;
  }

  .pp-cap__name {
    font-size: 26px;
  }

  .pp-cta__card {
    padding: 40px 24px;
  }

  .pp-cta__title {
    font-size: 28px;
  }

  .pp-badge {
    right: 8px;
  }
}