/* ==========================================================================
   kolwrite.com — everything the shared kit does not already cover.
   Load order: /assets/kit/{tokens,fonts,base,components}.css then this file.

   Three jobs, in this order:
     1. the page layouts this site needs (home, prose pages, pricing, contact)
     2. the editorial (Research Desk) layout
     3. a compatibility layer for the hand-authored Hebrew guides, which carry
        the older `seo-*` / `glass-card` class vocabulary. They are real pages
        with real copy, so they are restyled rather than rewritten.
   ========================================================================== */

/* ==========================================================================
   1. Home
   ========================================================================== */
.kw-hero {
  padding-block: var(--kol-space-7) var(--kol-space-6);
}

@media (min-width: 768px) {
  .kw-hero {
    padding-block: var(--kol-space-8) var(--kol-space-7);
  }
}

.kw-hero-grid {
  display: grid;
  gap: var(--kol-space-6) var(--kol-gap);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .kw-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--kol-space-7);
  }
}

.kw-hero-copy {
  display: grid;
  gap: var(--kol-space-4);
  justify-items: start;
}

/* Sized so the headline sits on two lines and the sentence under it never
   runs past two, in all seven languages. */
.kw-hero-copy h1 {
  font-size: clamp(1.75rem, 1.05rem + 2.2vw, 2.5rem);
  max-width: 26ch;
}

.kw-hero-copy .kol-lead {
  max-width: 52ch;
}

.kw-brand-line {
  margin: 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

/* The site uses the app's real Flutter widgets inside isolated frames. The
   current app build therefore remains the visual source of truth; there are no
   release-specific screenshots or decorative UI stand-ins to go stale. */
.kw-demo-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-lg);
  background: #101112;
  box-shadow: var(--kol-shadow);
}

.kw-demo-bar {
  position: relative;
  z-index: 1;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3);
  padding: var(--kol-space-2) var(--kol-space-4);
  border-bottom: 1px solid var(--kol-line);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.kw-demo-bar strong { color: var(--kol-ink); }
.kw-demo-bar a:not(.kol-btn) { color: var(--kol-ink); }
.kw-demo-dots { display: flex; gap: 6px; }
.kw-demo-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kol-line-strong);
}
.kw-demo-dots i:first-child { background: var(--kol-accent); }

.kw-demo-actions {
  display: flex;
  align-items: center;
  gap: var(--kol-space-3);
  margin-inline-start: auto;
}

.kw-demo-actions .kol-btn {
  min-height: 34px;
  padding: 6px 12px;
  text-decoration: none;
}

/* The homepage's chapter guide is editorial copy beside (or, on phones,
   below) the actual app. It must not read as a second application toolbar. */
.kw-hero-grid-home {
  grid-template-areas: "copy" "screen" "presentation";
  align-items: start;
}
.kw-hero-grid-home > .kw-hero-copy { grid-area: copy; }
.kw-hero-grid-home > .kw-demo-screen { grid-area: screen; }
.kw-hero-grid-home > .kw-demo-presentation { grid-area: presentation; }

@media (min-width: 1024px) {
  .kw-hero-grid-home {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "copy screen" "presentation screen";
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--kol-space-6);
  }
  .kw-hero-grid-home > .kw-demo-screen { align-self: start; }
}

.kw-demo-presentation {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--kol-space-3);
  padding-block-start: var(--kol-space-4);
  border-top: 1px solid var(--kol-line-strong);
}
.kw-demo-presentation h2 {
  max-width: 23ch;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
}
.kw-demo-presentation-note {
  padding-block-start: var(--kol-space-3);
  border-top: 1px solid var(--kol-line);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.kw-demo-chapters {
  border-top: 1px solid var(--kol-line-strong);
  border-bottom: 1px solid var(--kol-line-strong);
}
.kw-demo-chapter {
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr);
  align-items: center;
  gap: var(--kol-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--kol-space-2) var(--kol-space-3);
  border: 0;
  border-inline-start: 3px solid transparent;
  border-bottom: 1px solid var(--kol-line);
  background: transparent;
  color: var(--kol-ink-muted);
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.kw-demo-chapter:last-child { border-bottom: 0; }
.kw-demo-chapter > span {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kw-demo-chapter strong { font-weight: 650; }
.kw-demo-chapter:hover { color: var(--kol-ink); }
.kw-demo-chapter[aria-pressed="true"] {
  border-inline-start-color: var(--kol-accent);
  color: var(--kol-ink);
}
.kw-demo-chapter[aria-pressed="true"] > span { color: var(--kol-ink); }
.kw-demo-chapter:focus-visible,
.kw-demo-callout:focus-visible {
  outline: 3px solid var(--kol-accent);
  outline-offset: 2px;
}
.kw-demo-presentation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3);
  padding-block-start: var(--kol-space-2);
}
.kw-demo-presentation-actions > a:not(.kol-btn) {
  color: var(--kol-ink);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.kw-demo-callout {
  display: inline-block;
  width: fit-content;
  color: var(--kol-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.kw-demo-callout:hover { color: var(--kol-accent); }

.kw-demo-shell iframe,
.kw-demo-shell .kw-demo-poster {
  width: 100%;
  height: clamp(560px, 72vh, 760px);
  display: block;
  border: 0;
  background: #101112;
}

.kw-demo-shell-hero iframe,
.kw-demo-shell-hero .kw-demo-poster {
  height: clamp(410px, 46vw, 540px);
}

.kw-hero-grid-home .kw-demo-screen iframe,
.kw-hero-grid-home .kw-demo-screen .kw-demo-poster {
  height: clamp(560px, 70svh, 780px);
}

.kw-demo-shell-large iframe,
.kw-demo-shell-large .kw-demo-poster {
  height: clamp(560px, 72vh, 760px);
}

.kw-demo-shell-featured {
  box-shadow: 0 18px 50px rgb(0 0 0 / 24%);
}

.kw-demo-shell-story iframe,
.kw-demo-shell-story .kw-demo-poster {
  height: clamp(520px, 68vh, 700px);
}

@media (max-width: 680px) {
  .kw-demo-bar {
    align-items: flex-start;
  }

  .kw-demo-actions {
    width: 100%;
    justify-content: space-between;
    margin-inline-start: 0;
  }

  .kw-demo-shell-hero iframe,
  .kw-demo-shell-story iframe,
  .kw-demo-shell-large iframe,
  .kw-demo-shell-hero .kw-demo-poster,
  .kw-demo-shell-story .kw-demo-poster,
  .kw-demo-shell-large .kw-demo-poster {
    height: min(720px, 74svh);
    min-height: 520px;
  }
  .kw-hero-grid-home .kw-demo-screen iframe,
  .kw-hero-grid-home .kw-demo-screen .kw-demo-poster {
    height: min(720px, 74svh);
    min-height: 520px;
  }
}

.kw-demo-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kol-gap);
  margin: var(--kol-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.kw-native-preview {
  max-width: 1000px;
  margin: var(--kol-space-6) auto;
}

.kw-native-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kol-radius-lg);
  box-shadow: 0 20px 46px rgba(14, 25, 31, 0.16);
}

/* One platform at a time; swipes without the script, tabs come with it. */
.kw-shots-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--kol-radius-lg);
  box-shadow: 0 20px 46px rgba(14, 25, 31, 0.16);
}
.kw-shots-track::-webkit-scrollbar { display: none; }
.kw-shots-track:focus-visible { outline: 2px solid var(--kol-focus); outline-offset: 3px; }
.kw-shot { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; background: #dfdfd6; }
.kw-native-preview .kw-shot img { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 10; object-fit: cover; }
.kw-shots-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kol-space-2);
  margin-block-start: var(--kol-space-4);
}
.kw-shots-tabs[hidden] { display: none; }
.kw-shot-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  min-height: 44px;
  padding-inline: var(--kol-space-3);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: transparent;
  color: var(--kol-ink-muted);
  font: inherit;
  font-size: var(--kol-text-sm);
  cursor: pointer;
}
.kw-shot-tab:hover { color: var(--kol-ink); border-color: var(--kol-line-strong); }
.kw-shot-tab[aria-pressed="true"] { color: var(--kol-ink); border-color: var(--kol-accent); background: var(--kol-accent-quiet); }
.kw-shot-tab-icon, .kw-shot-tab-icon svg { display: block; width: 18px; height: 18px; }

.kw-native-preview figcaption {
  margin-block-start: var(--kol-space-2);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-align: center;
}

.kw-demo-facts li {
  display: flex;
  align-items: center;
  gap: var(--kol-space-3);
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

@media (min-width: 760px) {
  .kw-demo-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Platforms: real public links, without a screenshot that can go stale. */
.kw-platforms {
  display: grid;
  gap: var(--kol-space-6);
  align-items: start;
  grid-template-columns: 1fr;
}

.kw-ai-apps-actions { margin-top: var(--kol-space-8); }

.kw-platform-grid > li[hidden] { display: none; }

.kw-platform-more {
  display: block;
  margin-top: var(--kol-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kol-ink-muted);
  font: inherit;
  font-size: var(--kol-text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.kw-platform-more[hidden] { display: none; }

.kw-platform-more:hover { color: var(--kol-ink); }

.kw-platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kol-space-3);
  margin: var(--kol-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.kw-platform-grid > li {
  min-width: 0;
}

.kw-platform-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--kol-space-2) var(--kol-space-3);
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
  color: var(--kol-ink);
  text-decoration: none;
  transition: border-color var(--kol-motion) var(--kol-ease),
    background var(--kol-motion) var(--kol-ease),
    transform var(--kol-motion) var(--kol-ease);
}

.kw-platform-card:is(a):hover,
.kw-platform-card:is(a):focus-visible {
  transform: translateY(-2px);
  border-color: var(--kol-line-strong);
  background: var(--kol-surface-raised);
}

.kw-platform-card:is(a):focus-visible {
  outline: 2px solid var(--kol-focus);
  outline-offset: 3px;
}

.kw-platform-card.is-recommended {
  border-color: color-mix(in srgb, var(--kol-accent) 68%, var(--kol-line));
  background: var(--kol-accent-quiet);
}

.kw-platform-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border: 1px solid var(--kol-line);
  border-radius: 14px;
  background: var(--kol-paper);
  color: var(--kol-ink);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.kw-platform-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.kw-platform-copy strong {
  overflow-wrap: anywhere;
}

.kw-platform-copy > span,
.kw-platform-copy > a {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.kw-platform-copy > a {
  width: fit-content;
  margin-top: 2px;
  color: var(--kol-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kw-platform-mark svg { width: 26px; height: 26px; }

.kw-platform-format {
  align-self: start;
  padding: 4px 7px;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--kol-tracking-wide);
}

.kw-platform-recommended {
  grid-column: 2 / -1;
  color: var(--kol-ink);
  font-size: var(--kol-text-xs);
  font-weight: 700;
}

.kw-platform-go { display: none; }

/* This device and the web, side by side in the middle, until "More options". */
.is-focused > h3 { text-align: center; }
.is-focused > .kw-platform-more { display: block; margin-inline: auto; }
.is-focused > .kw-platform-more[hidden] { display: none; }
.kw-platform-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kol-space-4);
}
.kw-platform-main > li { flex: 0 1 360px; }
.kw-platform-rest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.kw-platform-rest[hidden] { display: none; }
.kw-platform-rest > li { flex: 0 1 300px; }
.kw-platform-main .kw-platform-card {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  text-align: center;
  padding: var(--kol-space-6) var(--kol-space-5);
}
.kw-platform-main .kw-platform-mark {
  grid-row: auto;
  width: 76px;
  height: 76px;
  border-radius: 20px;
}
.kw-platform-main .kw-platform-mark svg { width: 42px; height: 42px; }
.kw-platform-main .kw-platform-copy strong { font-size: var(--kol-text-lg); }
.kw-platform-main .kw-platform-format { display: none; }
.kw-platform-main .kw-platform-recommended { grid-column: auto; }
.kw-platform-main .kw-platform-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 170px;
  margin-block-start: var(--kol-space-2);
  padding-inline: var(--kol-space-5);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  font-weight: 700;
}
.kw-platform-main .is-recommended .kw-platform-go {
  border-color: transparent;
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

.kw-platform-card-disabled {
  border-style: dashed;
  background: color-mix(in srgb, var(--kol-surface) 82%, transparent);
}

.kw-platform-card-disabled .kw-platform-mark,
.kw-platform-card-disabled .kw-platform-format {
  opacity: 0.62;
}

@media (min-width: 620px) {
  .kw-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .kw-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .kw-platform-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: var(--kol-space-3);
  }

  .kw-platform-mark {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-platform-card { transition: none; }
  .kw-platform-card:is(a):hover { transform: none; }
}

.kw-note {
  margin-top: var(--kol-space-4);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  max-width: var(--kol-measure);
}

/* Pricing. The plan components (cards, free strip, period switch) are the
   kit's (sites/shared/components.css §6); this is only the page around them:
   the two-way gateway, the individual view's header, and the teams band. */

/* Both halves set `display`, which would otherwise beat the `hidden`
   attribute app.js toggles — the gateway stayed on screen under the plans. */
.kw-pricing-gateway[hidden],
.kw-plans-view[hidden] {
  display: none;
}

.kw-pricing-gateway {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kol-gap);
}

@media (min-width: 760px) {
  .kw-pricing-gateway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kw-pricing-choice {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: start;
  gap: var(--kol-space-4);
  padding: var(--kol-space-6) var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--kol-motion-fast) var(--kol-ease);
}

.kw-pricing-choice:hover { border-color: var(--kol-line-strong); }
.kw-pricing-choice:focus-visible { border-radius: var(--kol-radius-lg); }
.kw-pricing-choice .kol-btn { pointer-events: none; }
.kw-pricing-choice:is(:hover, :focus-visible) .kol-btn:not(.kol-btn-primary) { --btn-bg: var(--kol-sunk); }
.kw-pricing-choice:is(:hover, :focus-visible) .kol-btn-primary { --btn-bg: var(--kol-accent-hover); --btn-line: var(--kol-accent-hover); }

.kw-choice-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--kol-radius);
  background: var(--kol-sunk);
  color: var(--kol-ink);
}

.kw-choice-copy { display: grid; gap: var(--kol-space-2); align-content: start; }
.kw-choice-copy strong { font-size: var(--kol-text-xl); line-height: var(--kol-leading-snug); }
.kw-choice-copy small { color: var(--kol-ink-muted); font-size: var(--kol-text-base); line-height: 1.55; }

/* The individual view. */
.kw-pricing-back {
  margin-bottom: var(--kol-space-4);
  margin-inline-start: calc(-1 * var(--kol-space-3));
  color: var(--kol-ink-muted);
}

.kw-pricing-back:hover { color: var(--kol-ink); }
[dir="rtl"] .kw-back-icon { transform: scaleX(-1); }

.kw-plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kol-space-5);
  margin-bottom: var(--kol-space-6);
}

.kw-plans-title { display: grid; gap: var(--kol-space-2); max-width: var(--kol-measure); }
.kw-plans-title h3 { font-size: var(--kol-text-2xl); }
/* Focus lands here so the view is announced; a heading is not a control. */
.kw-plans-title h3:focus,
.kw-plans-title h3:focus-visible { outline: none; }
.kw-plans-title p { color: var(--kol-ink-muted); }

.kw-pricing-switch {
  display: grid;
  gap: var(--kol-space-2);
  justify-items: start;
}

.kw-pricing-switch .toggle-explanation {
  margin: 0;
  padding-inline: var(--kol-space-2);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

@media (min-width: 900px) {
  .kw-pricing-switch { justify-items: end; text-align: end; }
}

/* The free plan is the way in: it comes first, as its own row. */
.kw-plans-view .kol-plan-strip { margin-bottom: var(--kol-gap); }

/* Until app.js has chosen a period, show the default (yearly) only. */
.kw-plans .monthly-price { display: none; }

.kw-org-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-4);
  margin-top: var(--kol-gap);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-sunk);
}

.kw-org-band p { margin: 0; color: var(--kol-ink-muted); }
.kw-org-band strong { color: var(--kol-ink); margin-inline-end: var(--kol-space-2); }

/* The floating accessibility button (44px, 24px from the bottom corner) is
   fixed; the page moves under it instead. Keyboard focus and anchor jumps
   stop short of it, and on phones the plans end with enough room that the
   last action is never beneath it when the section is scrolled to its end. */
html:has(#pricing) {
  scroll-padding-bottom: calc(44px + 2 * var(--kol-space-5));
}

@media (max-width: 767px) {
  #pricing .kw-plans-view {
    padding-bottom: calc(44px + var(--kol-space-5));
  }
}

/* ==========================================================================
   2. Prose pages: about, security, permissions, and the article body
   ========================================================================== */
.kw-page-head {
  padding-block: var(--kol-space-7) var(--kol-space-5);
  border-bottom: 1px solid var(--kol-line);
}

.kw-page-head h1 {
  max-width: 24ch;
}

.kw-page-head .kol-lead {
  margin-top: var(--kol-space-4);
}

.kw-prose {
  min-width: 0;
  max-width: var(--kol-measure);
}

.kw-prose > * + * {
  margin-top: var(--kol-space-4);
}

.kw-prose > h2 {
  margin-top: var(--kol-space-7);
}

/* Article bodies are sections of paragraphs, so the rhythm has to reach one
   level deeper than the direct children. */
.kw-prose section > * + * {
  margin-top: var(--kol-space-4);
}

.kw-prose > section {
  margin-top: var(--kol-space-7);
}

.kw-prose > section > h2 {
  margin-bottom: var(--kol-space-4);
}

.kw-prose > h3 {
  margin-top: var(--kol-space-5);
}

.kw-prose ul,
.kw-prose ol {
  display: grid;
  gap: var(--kol-space-2);
}

.kw-prose li {
  padding-inline-start: var(--kol-space-1);
}

.kw-prose a {
  color: var(--kol-ink);
}

.kw-split {
  display: grid;
  gap: var(--kol-space-6) var(--kol-space-7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .kw-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* The security page's request path. Each stable infrastructure stage is a
   semantic list item; the amber scan restores the original sense of protected
   data moving through the path without relying on an app screenshot. */
.kw-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  align-items: center;
  gap: var(--kol-space-3);
  margin: 0;
  padding: var(--kol-space-3) var(--kol-space-1) var(--kol-space-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.kw-chain li {
  position: relative;
  z-index: 1;
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: var(--kol-space-3);
  overflow: hidden;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  text-align: center;
  box-shadow: var(--kol-shadow);
}

.kw-chain li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--kol-space-3) / 2 - 4px);
  inset-block-start: 50%;
  width: 8px;
  height: 8px;
  border-block-start: 2px solid var(--kol-line-strong);
  border-inline-end: 2px solid var(--kol-line-strong);
  transform: rotate(45deg);
}

[dir="rtl"] .kw-chain li + li::before {
  transform: rotate(225deg);
}

.kw-chain li::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kol-accent) 24%, transparent), transparent);
  transform: translateX(-180%);
  animation: kw-secure-flow 5.4s ease-in-out infinite;
  pointer-events: none;
}

.kw-chain li:nth-child(2)::after { animation-delay: 0.55s; }
.kw-chain li:nth-child(3)::after { animation-delay: 1.1s; }
.kw-chain li:nth-child(4)::after { animation-delay: 1.65s; }
.kw-chain li:nth-child(5)::after { animation-delay: 2.2s; }
.kw-chain li:nth-child(6)::after { animation-delay: 2.75s; }

@keyframes kw-secure-flow {
  0%, 28% { transform: translateX(-180%); opacity: 0; }
  38% { opacity: 1; }
  58%, 100% { transform: translateX(330%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kw-chain li::after { animation: none; }
}

/* One table style, used by the security comparison. */
.kw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.kw-table {
  min-width: 34rem;
  font-size: var(--kol-text-sm);
}

.kw-table th,
.kw-table td {
  padding: var(--kol-space-3) var(--kol-space-4);
  border-bottom: 1px solid var(--kol-line);
  text-align: start;
  vertical-align: top;
  color: var(--kol-ink-muted);
}

.kw-table thead th {
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.kw-table tbody th {
  color: var(--kol-ink);
  font-weight: 600;
}

.kw-table tr:last-child th,
.kw-table tr:last-child td {
  border-bottom: 0;
}

/* Contact and the product-updates form live on /about. */
.kw-form {
  display: grid;
  gap: var(--kol-space-4);
  max-width: 44rem;
}

.kw-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2);
}

.kw-radios label {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  padding: var(--kol-space-2) var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  cursor: pointer;
}

.kw-radios input {
  accent-color: var(--kol-accent);
}

.kw-radios input:checked + span {
  color: var(--kol-ink);
  font-weight: 600;
}

.kw-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3);
}

#captchaBox {
  min-width: 132px;
  padding: var(--kol-space-2) var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-lg);
  letter-spacing: 0.22em;
  text-align: center;
  user-select: none;
}

.feedback-message {
  display: none;
  color: #b3261e;
  font-size: var(--kol-text-sm);
}

.feedback-message.visible,
.kol-field:has(.is-invalid) .feedback-message {
  display: block;
}

/* Colour is never the only signal: the message below the field says what. */
.kol-input.is-invalid,
.kol-textarea.is-invalid {
  border-color: #b3261e;
}

.kol-input.is-valid,
.kol-textarea.is-valid {
  border-color: var(--kol-ink-faint);
}

:root[data-theme="dark"] .kol-input.is-invalid,
:root[data-theme="dark"] .kol-textarea.is-invalid {
  border-color: #ffb4ab;
}

:root[data-theme="dark"] .feedback-message {
  color: #ffb4ab;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feedback-message {
    color: #ffb4ab;
  }
}

/* The site script injects these alerts after a form submission. */
.themed-alert {
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
}

.themed-alert-heading {
  margin: 0 0 var(--kol-space-2);
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
}

.themed-close {
  margin-top: var(--kol-space-3);
  padding: var(--kol-space-2) var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: none;
  color: var(--kol-ink);
  cursor: pointer;
}

.marketing-signup-message p {
  display: none;
  font-size: var(--kol-text-sm);
}

.marketing-signup-message p.visible {
  display: block;
}

/* The runtime suggests a language once in a small floating card. */
.locale-suggestion {
  position: fixed;
  inset-inline: var(--kol-gutter);
  inset-block-end: calc(var(--kol-space-7) + 44px + env(safe-area-inset-bottom, 0px));
  z-index: 94;
  width: min(420px, calc(100vw - 2 * var(--kol-gutter)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3);
  margin-inline: auto;
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.locale-suggestion p {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  color: var(--kol-ink);
  line-height: var(--kol-leading-snug);
  overflow-wrap: anywhere;
}

.locale-suggestion-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--kol-space-2);
}

.locale-suggestion .kol-btn,
.locale-suggestion button,
.locale-suggestion a {
  font-size: var(--kol-text-sm);
}

.locale-suggestion-actions .kol-btn {
  flex: 0 1 auto;
  min-width: 104px;
}

.locale-suggestion-dismiss {
  --btn-bg: transparent;
  --btn-ink: var(--kol-ink);
  --btn-line: var(--kol-line-strong);
}

/* Keep the floating language choice away from the live product frame on
   wide layouts. Logical start follows the reading direction, while mobile
   keeps the centered, edge-safe treatment below. */
@media (min-width: 768px) {
  html[dir="ltr"] .locale-suggestion {
    left: var(--kol-gutter);
    right: auto;
    margin-inline: 0;
  }

  html[dir="rtl"] .locale-suggestion {
    right: var(--kol-gutter);
    left: auto;
    margin-inline: 0;
  }
}

@media (max-width: 480px) {
  .locale-suggestion {
    align-items: stretch;
  }

  .locale-suggestion-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .locale-suggestion-actions .kol-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   3. Research Desk
   ========================================================================== */
.kw-article {
  display: grid;
  gap: var(--kol-space-6) var(--kol-space-7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .kw-article {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

.kw-toc {
  position: sticky;
  top: calc(var(--kol-header-h) + var(--kol-space-5));
  display: grid;
  gap: var(--kol-space-3);
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  font-size: var(--kol-text-sm);
}

.kw-toc ol {
  display: grid;
  gap: var(--kol-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kw-toc;
}

.kw-toc li {
  counter-increment: kw-toc;
}

.kw-toc a {
  color: var(--kol-ink-muted);
  text-decoration: none;
}

.kw-toc a:hover {
  color: var(--kol-ink);
  text-decoration: underline;
}

.kw-toc p {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.kw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2) var(--kol-space-4);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.kw-meta strong {
  color: var(--kol-ink-muted);
  font-weight: 600;
}

.kw-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.kw-crumbs a {
  color: var(--kol-ink-muted);
  text-decoration: none;
}

.kw-crumbs a:hover {
  text-decoration: underline;
}

.kw-takeaways {
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-inline-start: 2px solid var(--kol-accent);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.kw-takeaways h2 {
  font-size: var(--kol-text-base);
}

.kw-takeaways ul {
  display: grid;
  gap: var(--kol-space-2);
  margin-top: var(--kol-space-3);
  padding-inline-start: 1.1em;
  font-size: var(--kol-text-sm);
}

.kw-citations {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 4px;
  vertical-align: super;
}

.kw-citations a {
  min-width: 16px;
  padding-inline: 3px;
  border-radius: 4px;
  background: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: 0.68em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
}

.kw-sources ol {
  display: grid;
  gap: var(--kol-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kw-source;
  font-size: var(--kol-text-sm);
}

.kw-sources li {
  counter-increment: kw-source;
  display: flex;
  gap: var(--kol-space-3);
}

.kw-sources li > span {
  flex: none;
  width: 1.4em;
  color: var(--kol-ink-faint);
  font-variant-numeric: tabular-nums;
}

.kw-cards {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .kw-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kw-card-art {
  border-bottom: 1px solid var(--kol-line);
}

.kw-card-art img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.kw-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  overflow: hidden;
}

.kw-card-copy {
  display: grid;
  gap: var(--kol-space-2);
  padding: var(--kol-space-5);
}

.kw-card-copy h2,
.kw-card-copy h3 {
  font-size: var(--kol-text-lg);
}

.kw-card-copy h2 a,
.kw-card-copy h3 a {
  color: inherit;
  text-decoration: none;
}

.kw-card-copy h2 a:hover,
.kw-card-copy h3 a:hover {
  text-decoration: underline;
}

.kw-card-copy p {
  font-size: var(--kol-text-sm);
}

.kw-label {
  margin: 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   4. Compatibility layer for the hand-authored Hebrew guides
   --------------------------------------------------------------------------
   These seven pages predate the landing generator and still carry its first
   class vocabulary. The build replaces their header and footer with the shared
   chrome; these rules bring the body to the same design.
   ========================================================================== */

/* Decoration that no longer exists anywhere on the site. */
.hero-bg,
.blob,
.section-divider,
.kw-constellation,
#kw-loading,
.editorial-aurora {
  display: none !important;
}

/* Half of a headline used to be painted with a gradient. It is a word. */
.hero-gradient,
.watch-gradient-text,
.hero-grad {
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.container {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
}

.section {
  padding-block: var(--kol-section-y);
}

.section + .section {
  border-top: 1px solid var(--kol-line);
}

.section-header {
  display: grid;
  gap: var(--kol-space-3);
  max-width: var(--kol-measure);
  margin-bottom: var(--kol-space-6);
}

.text-center {
  text-align: start;
}

/* One card surface for every legacy card class. */
.glass-card,
.seo-copy-card,
.seo-faq-card,
.seo-feature-card,
.seo-proof-item,
.seo-evidence-card {
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  backdrop-filter: none;
  box-shadow: none;
}

.seo-copy-card h3,
.seo-faq-card h3,
.seo-feature-card h3 {
  margin-bottom: var(--kol-space-2);
  font-size: var(--kol-text-base);
}

.seo-copy-card p,
.seo-faq-card p,
.seo-feature-card p {
  font-size: var(--kol-text-sm);
}

/* Legacy buttons map onto the kit's.
   `:not(.kol-btn)` matters: the pricing cards carry both classes, because
   assets/js/app.js finds their action with `a.btn`, and a flat `.btn` rule in
   this later file would paint the amber primary transparent again. */
.btn:not(.kol-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 44px;
  padding: 0 var(--kol-space-5);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: transparent;
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--kol-motion-fast) var(--kol-ease);
}

.btn-primary:not(.kol-btn-primary) {
  border-color: var(--kol-accent);
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

.btn-primary:hover:not(.kol-btn-primary) {
  border-color: var(--kol-accent-hover);
  background: var(--kol-accent-hover);
}

.btn-outline:hover:not(.kol-btn) {
  background: var(--kol-sunk);
}

.seo-landing .hero,
.seo-hero {
  padding-block: var(--kol-space-7) var(--kol-space-6);
}

.seo-hero .hero-content,
.seo-landing .hero-content {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
  display: grid;
  gap: var(--kol-space-4);
  justify-items: start;
}

.seo-eyebrow i,
.watch-eyebrow i,
.seo-copy-card i,
.seo-faq-card i {
  display: none;
}

.seo-eyebrow,
.brand-main-title {
  margin: 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.hero-title {
  font-size: var(--kol-text-3xl);
  max-width: 26ch;
}

.hero-subtitle,
.seo-section-lead {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-lg);
  line-height: var(--kol-leading-snug);
  max-width: var(--kol-measure);
}

.hero-actions,
.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-3);
}

.seo-main {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
  padding-block: var(--kol-space-6) var(--kol-space-8);
  display: grid;
  gap: var(--kol-section-y);
}

.seo-main > section,
.seo-main > nav {
  display: grid;
  gap: var(--kol-space-5);
}

.seo-main h2 {
  max-width: var(--kol-measure);
}

.seo-proof-row {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .seo-proof-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.seo-proof-item {
  min-width: 0;
  display: grid;
  gap: var(--kol-space-1);
}

.seo-proof-item strong {
  color: var(--kol-ink);
  font-size: var(--kol-text-lg);
}

.seo-proof-item span {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.features-grid,
.services-grid,
.seo-copy-grid,
.seo-faq-grid {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .features-grid,
  .services-grid,
  .seo-copy-grid,
  .seo-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .features-grid,
  .services-grid,
  .seo-copy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-icon,
.feature-icon {
  display: none;
}

.seo-workflow .seo-flow-list,
.seo-flow-list {
  display: grid;
  gap: var(--kol-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .seo-flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .seo-flow-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.seo-flow-step {
  display: grid;
  gap: var(--kol-space-2);
  padding-top: var(--kol-space-4);
  border-top: 2px solid var(--kol-line);
}

.seo-flow-number {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.seo-flow-step h3 {
  font-size: var(--kol-text-base);
}

.seo-flow-step p {
  font-size: var(--kol-text-sm);
}

.seo-related-links {
  display: grid;
  gap: var(--kol-space-3);
}

.seo-related-links a,
.footer-links a {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.seo-evidence-kicker {
  margin: 0 0 var(--kol-space-2);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.seo-evidence ul {
  display: grid;
  gap: var(--kol-space-2);
  margin-top: var(--kol-space-3);
  font-size: var(--kol-text-sm);
}

.seo-cta-panel {
  display: grid;
  gap: var(--kol-space-3);
  justify-items: start;
  padding: var(--kol-space-6);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

.seo-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2) var(--kol-space-4);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

/* The old sticky mobile action bar duplicated the header's CTA. */
.seo-mobile-cta {
  display: none !important;
}

/* Legacy scroll animation: never hide content, the kit owns the reveal. */
.animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
}

/* Legacy footers are replaced at build time; this is the safety net. */
.site-footer {
  border-top: 1px solid var(--kol-line);
  background: var(--kol-surface);
  padding-block: var(--kol-space-6);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-4);
  align-items: center;
  justify-content: space-between;
}

.link-pill {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

/* ==========================================================================
   5. The watch pages
   --------------------------------------------------------------------------
   /watch-transcription/ is generated from one template per locale
   (tools/render-watch.mjs). It keeps its own class names because
   tools/validate-localization.mjs counts them across the seven translations;
   the design is the kit's.
   ========================================================================== */
.watch-container {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
}

.watch-hero {
  padding-block: var(--kol-space-7) var(--kol-space-6);
}

.watch-hero-grid {
  display: grid;
  gap: var(--kol-space-6) var(--kol-space-7);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .watch-hero-grid {
    grid-template-columns: 1fr;
  }

  .watch-hero-copy {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--kol-space-7);
  }

  .watch-hero-copy > :not(.watch-hero-device) {
    grid-column: 1;
  }

  .watch-hero-device {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
  }
}

.watch-hero-copy {
  display: grid;
  gap: var(--kol-space-4);
  justify-items: start;
}

.watch-hero-device {
  width: min(100%, 300px);
  margin: 0;
  justify-self: center;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(17, 28, 34, 0.16);
}

.watch-hero-device img {
  display: block;
  width: 100%;
  height: auto;
}

.watch-hero-copy h1 {
  font-size: var(--kol-text-hero);
  max-width: 22ch;
}

.watch-eyebrow,
.watch-section-kicker {
  margin: 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.watch-lede {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-lg);
  line-height: var(--kol-leading-snug);
  max-width: 46ch;
}

.watch-release {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.watch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-3);
}

.watch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 44px;
  padding: 0 var(--kol-space-5);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink);
  font-weight: 600;
  text-decoration: none;
}

.watch-button-primary {
  border-color: var(--kol-accent);
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

.watch-figure img {
  width: 100%;
}

.watch-section {
  padding-block: var(--kol-section-y);
  border-top: 1px solid var(--kol-line);
}

.watch-section-header {
  display: grid;
  gap: var(--kol-space-3);
  max-width: var(--kol-measure);
  margin-bottom: var(--kol-space-6);
}

.watch-section-header-center {
  text-align: start;
}

.watch-platform-band {
  padding-block: var(--kol-space-6);
  border-top: 1px solid var(--kol-line);
}

.watch-platform-band-inner {
  display: grid;
  gap: var(--kol-gap);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .watch-platform-band-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

.watch-platform-intro {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  max-width: 34ch;
}

.watch-platform-card {
  display: flex;
  align-items: center;
  gap: var(--kol-space-3);
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  font-size: var(--kol-text-sm);
}

.watch-platform-card > div {
  display: grid;
}

.watch-platform-card strong {
  color: var(--kol-ink);
}

.watch-platform-card span {
  color: var(--kol-ink-faint);
}

.watch-platform-symbol {
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-xs);
  color: var(--kol-ink-faint);
}

.watch-platform-badge {
  padding: 2px var(--kol-space-2);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  white-space: nowrap;
}

/* The one live state on the page. */
.watch-platform-badge.is-live {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-weight: 600;
}

.watch-workflow,
.watch-features {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .watch-workflow,
  .watch-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .watch-workflow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .watch-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.watch-step {
  display: grid;
  gap: var(--kol-space-2);
  padding-top: var(--kol-space-4);
  border-top: 2px solid var(--kol-line);
}

.watch-feature {
  display: grid;
  gap: var(--kol-space-2);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.watch-step h3,
.watch-feature h3 {
  font-size: var(--kol-text-base);
}

.watch-step p,
.watch-feature p {
  font-size: var(--kol-text-sm);
}

.watch-feature-icon {
  color: var(--kol-ink-faint);
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-xs);
  letter-spacing: var(--kol-tracking-wide);
}

.watch-cloud-panel {
  display: grid;
  gap: var(--kol-space-6) var(--kol-space-7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .watch-cloud-panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.watch-cloud-copy {
  display: grid;
  gap: var(--kol-space-3);
}

.watch-plain-list {
  display: grid;
  gap: var(--kol-space-2);
  margin: 0;
  padding-inline-start: 1.1em;
  font-size: var(--kol-text-sm);
}

/* Was an orbit of floating chips. Now a list of the devices, plainly. */
.watch-ecosystem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2);
  align-items: center;
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.watch-cloud-core {
  width: 100%;
  margin-bottom: var(--kol-space-2);
  color: var(--kol-ink);
  font-weight: 600;
}

.watch-device-chip {
  padding: var(--kol-space-1) var(--kol-space-3);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.watch-faq-list {
  border-top: 1px solid var(--kol-line);
}

details.watch-faq {
  border-bottom: 1px solid var(--kol-line);
}

details.watch-faq > summary {
  padding: var(--kol-space-4) 0;
  color: var(--kol-ink);
  font-weight: 600;
  cursor: pointer;
}

details.watch-faq > p {
  padding-bottom: var(--kol-space-5);
  max-width: var(--kol-measure);
  font-size: var(--kol-text-sm);
}

.watch-cta-panel {
  display: grid;
  gap: var(--kol-space-3);
  justify-items: start;
  padding: var(--kol-space-6);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

/* ==========================================================================
   6. The legal shell
   --------------------------------------------------------------------------
   tos_pp.html and tos_pp.held.html carry 77 KB of contract text whose markup
   is never round-tripped through a parser, so the design is done entirely from
   the outside: these rules style the `legal-*` vocabulary the contract already
   uses. Everything is a token, so the page follows the theme like the rest of
   the site, and the reading measure is a little wider than prose because the
   text is full of defined terms in bold.
   ========================================================================== */
.legal-container {
  min-width: 0;
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding: var(--kol-space-7) var(--kol-gutter) var(--kol-space-8);
}

.legal-language-notice {
  max-width: var(--kol-measure);
  margin: 0 0 var(--kol-space-6);
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-inline-start: 2px solid var(--kol-accent);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.legal-tabs {
  display: flex;
  gap: var(--kol-space-2);
  margin-bottom: var(--kol-space-6);
  border-bottom: 1px solid var(--kol-line);
}

.legal-tab {
  padding: var(--kol-space-3) var(--kol-space-4);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-base);
  font-weight: 600;
  text-decoration: none;
  transition: none;
  cursor: pointer;
}

.legal-tab:hover {
  color: var(--kol-ink);
}

.legal-tab.active {
  border-bottom-color: var(--kol-accent);
  color: var(--kol-ink);
}

.legal-content {
  min-width: 0;
  max-width: 74ch;
  color: var(--kol-ink-muted);
}

.legal-content h1 {
  margin-bottom: var(--kol-space-2);
  font-size: var(--kol-text-2xl);
}

.legal-content h4 {
  margin-top: var(--kol-space-7);
  font-size: var(--kol-text-lg);
}

.legal-content h5 {
  margin-top: var(--kol-space-5);
  font-size: var(--kol-text-base);
}

.legal-content h4 strong,
.legal-content h5 strong {
  font-weight: 600;
}

.legal-content p {
  margin-top: var(--kol-space-4);
}

.legal-content ul,
.legal-content ol {
  display: grid;
  gap: var(--kol-space-2);
  margin-top: var(--kol-space-4);
  padding-inline-start: 1.3em;
}

.legal-content blockquote {
  margin: var(--kol-space-4) 0;
  padding: var(--kol-space-3) var(--kol-space-4);
  border-inline-start: 2px solid var(--kol-line-strong);
  background: var(--kol-sunk);
  border-radius: var(--kol-radius-sm);
}

.legal-content blockquote p:first-child {
  margin-top: 0;
}

.legal-content a {
  color: var(--kol-ink);
  overflow-wrap: anywhere;
}

/* The demo starts as a poster and loads on a click (assets/js/demo-loader.js),
   so the page never carries the 23 MB app. It keeps the frame's size, which
   means nothing shifts when the demo starts. */
.kw-demo-poster {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: var(--kol-space-6);
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 255 255 / 9%), transparent 62%),
    #101112;
  color: #f4f2ee;
  text-align: center;
}

.kw-demo-poster-inner {
  display: grid;
  justify-items: center;
  gap: var(--kol-space-4);
  max-width: 36ch;
}

.kw-demo-poster .kol-eyebrow,
.kw-demo-poster-note {
  margin: 0;
  color: #c9c6bf;
}

.kw-demo-poster-note { font-size: var(--kol-text-xs); }

.kw-demo-poster a { color: #f4f2ee; }

.kol-footer-classic {
  margin: var(--kol-space-3) 0 0;
  font-size: var(--kol-text-sm);
}

/* Small lines under a plan's price: what is billed per year, and the VAT. */
.kol-price-note {
  margin: 0;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

/* "Contact us" under the closing call to action; also the target of the
   old /#contact links (the form itself lives on /about). */
.kw-contact-line {
  margin: var(--kol-space-4) 0 0;
  text-align: center;
}

/* The header's primary action never wraps; Classic KolWrite sits in the nav
   and gives way to the phone sheet where the bar is tight. */
.kol-header-cta { white-space: nowrap; }

/* Classic KolWrite is a nav item only where the bar has room for it (1280 px
   and up, in every language); below that it is the last item of the Product
   menu, and in the phone sheet and the footer at every width. Checked in all
   seven languages: the bar never scrolls sideways. */
.kol-nav .kol-nav-classic { display: none; }
@media (min-width: 1280px) {
  .kol-nav .kol-nav-classic { display: inline-block; }
  .kol-pop-classic { display: none; }
}

/* On a phone the poster is a card, not a stage; the demo takes the full
   height only once the visitor starts it. */
@media (max-width: 680px) {
  .kw-demo-shell .kw-demo-poster,
  .kw-demo-shell-hero .kw-demo-poster,
  .kw-demo-shell-story .kw-demo-poster,
  .kw-demo-shell-large .kw-demo-poster,
  .kw-hero-grid-home .kw-demo-screen .kw-demo-poster {
    height: auto;
    min-height: 260px;
  }
}

/* Tablet header (768-899 px): the Classic KolWrite item in the Product menu
   and longer Russian and Spanish labels need a little less spacing, or the
   Menu button leaves the screen (second audit pass, R1). */
@media (min-width: 768px) and (max-width: 899px) {
  .kol-nav a,
  .kol-nav .kol-btn-plain { padding-inline: var(--kol-space-1); }
  .kol-header-tools { gap: 0; }
  .kol-header-cta { padding-inline: var(--kol-space-3); }
}

/* On desktop the poster is a still of the demo itself (captured from the demo
   build by tools/capture-demo-posters.mjs), dimmed behind the start button.
   Phones keep the plain card above and download no image. */
@media (min-width: 681px) {
  .kw-demo-shell .kw-demo-poster {
    background:
      radial-gradient(ellipse at center, rgb(16 17 18 / 80%) 0, rgb(16 17 18 / 45%) 75%),
      var(--demo-poster, none) top center / cover no-repeat,
      #101112;
  }
  .kw-demo-poster-inner {
    padding: var(--kol-space-5) var(--kol-space-6);
    border-radius: var(--kol-radius-lg);
    background: rgb(16 17 18 / 72%);
  }
}

/* Line icons on the cards and steps of the AI-apps page (icons, not paragraphs). */
.kw-card-ico > .kol-ico,
.kw-step-ico > .kol-ico {
  display: block;
  inline-size: 24px;
  block-size: 24px;
  color: var(--kol-ink);
}
.kw-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--kol-accent-quiet);
}

/* Code and subtitle samples on guide pages: the kit's mono face on a sunk surface. */
.kw-code {
  margin: var(--kol-space-5) 0 0;
  padding: var(--kol-space-4) var(--kol-space-5);
  overflow-x: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  line-height: 1.6;
  white-space: pre;
  text-align: start;
}

.kw-code-label {
  margin: var(--kol-space-6) 0 0;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

#developers .kol-row {
  margin-top: var(--kol-space-5);
}

/* The Creators link in the header bar: the Product menu and the footer carry it
   at every width; the bar itself has room for it from 1280px up (Russian,
   Portuguese and Spanish labels overflow the bar at 1024px). */
.kol-nav .cr-nav-link {
  display: none;
}

@media (min-width: 1280px) {
  .kol-nav .cr-nav-link {
    display: inline-block;
  }
}

/* Home page visuals: an icon or a real screen for every section. */
.kw-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--kol-accent-quiet);
  color: var(--kol-accent);
}
.kw-icon svg { width: 24px; height: 24px; }
.kol-card > .kw-icon { margin-block-end: var(--kol-space-2); }
.kol-steps > li > .kw-icon { margin-block: var(--kol-space-1) var(--kol-space-2); }

.kw-api-strip {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-block-start: var(--kol-space-3);
  direction: ltr;
  content-visibility: auto;
  aspect-ratio: 520 / 56;
}
.kw-api-tile, .kw-api-lit { fill: var(--kol-accent-quiet); }
.kw-api-glyph { fill: none; stroke: var(--kol-accent); stroke-width: 1.600; stroke-linecap: round; stroke-linejoin: round; }
.kw-api-line { fill: none; stroke: var(--kol-line-strong); stroke-width: 1.500; stroke-dasharray: 2 5; stroke-linecap: round; }
.kw-api-box { fill: var(--kol-surface); stroke: var(--kol-line); }
.kw-api-lit { opacity: 0; }
.kw-api-dot { fill: var(--kol-accent); opacity: 0; }
.kw-api-label, .kw-api-call { font-weight: 600; fill: var(--kol-ink-muted); }
.kw-api-label { font-size: 12px; }
.kw-api-call { font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; fill: var(--kol-ink); }
@media (prefers-reduced-motion: no-preference) {
  .kw-api-dot, .kw-api-lit { transform-box: fill-box; }
  .kw-api-dot-in { animation: kw-api-in 9s ease-in-out infinite; }
  .kw-api-dot-out { animation: kw-api-out 9s ease-in-out infinite; }
  .kw-api-lit-call { animation: kw-api-call 9s ease-in-out infinite; }
  .kw-api-lit-1 { animation: kw-api-chip 9s ease-in-out infinite; }
  .kw-api-lit-2 { animation: kw-api-chip 9s ease-in-out .5s infinite; }
  .kw-api-lit-3 { animation: kw-api-chip 9s ease-in-out 1s infinite; }
}
@keyframes kw-api-in {
  0% { opacity: 0; transform: none; }
  3% { opacity: 1; }
  15% { opacity: 1; }
  18%, 100% { opacity: 0; transform: translateX(60px); }
}
@keyframes kw-api-call {
  0%, 15% { opacity: 0; }
  22%, 32% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes kw-api-out {
  0%, 30% { opacity: 0; transform: none; }
  33%, 45% { opacity: 1; }
  48%, 100% { opacity: 0; transform: translateX(60px); }
}
@keyframes kw-api-chip {
  0%, 46% { opacity: 0; }
  52%, 76% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

.kw-feature {
  display: grid;
  gap: var(--kol-space-6);
  align-items: center;
  min-width: 0;
}
.kw-feature-copy {
  display: grid;
  gap: var(--kol-space-3);
  min-width: 0;
}
.kw-feature-copy > p:not(.kol-eyebrow) {
  max-width: var(--kol-measure);
  color: var(--kol-ink-muted);
}
.kw-feature-shot {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
}
@media (min-width: 900px) {
  .kw-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kol-space-7); }
  .kw-feature-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kw-feature-reverse .kw-feature-copy { order: 2; }
}

.kw-caption-feature { margin-block-end: var(--kol-space-5); }
.kw-caption-feature .kol-section-head { margin: 0; }
/* Off-screen scenes stop animating; the ratio keeps their space reserved meanwhile. */
.kw-scene {
  aspect-ratio: 720 / 440;
  background: #15171a;
  content-visibility: auto;
}
.kw-scene-video { aspect-ratio: 720 / 405; }
.ks {
  display: block;
  width: 100%;
  height: auto;
}
[dir="rtl"] .ks-flip { transform: scaleX(-1); }
.ks text { font-family: inherit; }
.ks svg, .ks rect, .ks path, .ks circle, .ks g, .ks text { transform-box: fill-box; }
.ks-bg { fill: #15171a; }
.ks-panel { fill: #24272b; }
.ks-card { fill: #1e2125; stroke: #31353a; }
.ks-row { fill: #33373c; }
.ks-rail-on { fill: rgba(255, 255, 255, .16); }
.ks-bubble { fill: #33373c; }
.ks-dialog { fill: #2a2e33; stroke: #454a50; }
.ks-tile { fill: #2d2a3d; }
.ks-chip { fill: #2d3136; }
.ks-mark { fill: rgba(245, 176, 65, .32); }
.ks-cite { fill: rgba(167, 139, 250, .2); }
.ks-accent { fill: #a78bfa; }
.ks-on-accent { fill: #1c1830; }
.ks-span { fill: rgba(167, 139, 250, .2); }
.ks-send { fill: #454a50; }
.ks-warn { fill: rgba(248, 113, 113, .16); }
.ks-guard { fill: rgba(167, 139, 250, .14); }
.ks-ring { fill: none; stroke: #a78bfa; stroke-width: 1.500; }
.ks-title { fill: #eef0f2; }
.ks-ink { fill: #c9ccd0; }
.ks-text { fill: #8b9096; }
.ks-faint { fill: #5b6066; }
.ks-box { fill: none; stroke: #6b7076; stroke-width: 1.500; }
.ks-box-on { fill: #a78bfa; }
.ks-tick { fill: none; stroke: #1c1830; stroke-width: 2.200; stroke-linecap: round; stroke-linejoin: round; }
.ks-tick-accent { stroke: #a78bfa; }
.ks-caret { fill: #a78bfa; }
.ks-line, .ks-folder { fill: none; stroke-width: 1.600; stroke-linecap: round; stroke-linejoin: round; stroke: #aeb2b7; }
.ks-line-on { stroke: #f1f2f4; }
.ks-line-dim { stroke: #8b9096; }
.ks-line-warn { stroke: #f87171; }
.ks-folder { fill: #f5b041; stroke: #f5b041; }
.ks-wave { fill: none; stroke: #b98ae6; stroke-width: 2.500; stroke-linecap: round; }
.ks-link { fill: none; stroke: #a78bfa; stroke-width: 1.500; stroke-dasharray: 5 6; opacity: .75; }
.ks-play { fill: #a78bfa; }
.ks-play-mark { fill: #1c1830; }
.ks-play-mark-accent { fill: #c4b1fd; }
.ks-head, .ks-dot { fill: #f1f2f4; }
.ks-num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; fill: #c9ccd0; }
[dir="rtl"] .ks-flip :is(.ks-num, .ks-tick, .ks-play-mark) { transform: scaleX(-1); transform-origin: center; }
.ks-num-chip { font-size: 12px; fill: #e4e6e8; }
.ks-num-dim { font-size: 12px; fill: #8b9096; }
.ks-num-cite { fill: #d9cefe; }
.ks-num-tool { font-size: 16px; fill: #aeb2b7; }
.ks-srt { fill: rgba(21, 23, 26, .78); }
.ks-block { fill: #33373c; stroke: #454a50; }
.ks-sun { fill: #f6c98a; opacity: .85; }
.ks-hill-3 { fill: #4d4560; }
.ks-hill-2 { fill: #342f47; }
.ks-hill-1 { fill: #221f31; }
.ks-caption {
  font-size: 30px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(10, 10, 14, .85);
  stroke-width: 6px;
  stroke-linejoin: round;
  fill: #fff;
}
.ks-w3 { fill: #5ff08f; }
.ks-st1, .ks-st2, .ks-st4 { opacity: 0; }
.ks-tick-light { stroke: #fff; }
.ks-tick-badge { fill: #f1f2f4; }
.ks-tick-on-badge { stroke: #1c1830; }
.ks-step { fill: #24272b; }
.ks-step-on { fill: #a78bfa; }
.ks-rec { fill: #ef4444; }
.ks-mouth { fill: none; stroke: rgba(70, 30, 25, .7); stroke-width: 2.500; stroke-linecap: round; }
.ks-call-tile { fill: #2a3a42; }
.ks-call-name { fill: rgba(0, 0, 0, .55); }
.ks-call-live { fill: none; stroke: #5ff08f; stroke-width: 2.500; opacity: 0; }
.ks-rec-ring { fill: rgba(239, 68, 68, .18); }
.ks-file { fill: #24272b; stroke: #3c4046; }
.ks-track-bg { fill: #3c4046; }
.ks-track-fill { fill: #a78bfa; }
.ks-sp1 { fill: #5b6ee1; }
.ks-sp2 { fill: #2f9e6e; }
.ks-sp3 { fill: #d9534f; }
.ks-on-tone { fill: rgba(255, 255, 255, .9); }
.ks-line-accent { stroke: #c4b1fd; }
.ks-num-big { font-size: 20px; fill: #eef0f2; }
.ks-num-format { font-size: 15px; font-weight: 700; fill: #e4e6e8; }
.ks-caption-b { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ks-stage { animation: ks-stage 20s ease-in-out infinite both; }
  .ks-talk1 { animation: ks-talk1 20s linear infinite; }
  .ks-talk2 { animation: ks-talk2 20s linear infinite; }
  .ks-talk3 { animation: ks-talk3 20s linear infinite; }
  .ks-st2 { animation-delay: 5s; }
  .ks-st3 { animation-delay: 10s; }
  .ks-st4 { animation-delay: 15s; }
  .ks-sub { animation: ks-sub 20s ease-out infinite both; }
  .ks-grow { transform-origin: left center; animation: ks-grow 20s ease-out infinite both; }
  .ks-type-flow { transform-origin: left center; animation: ks-type-flow 20s ease-out infinite both; }
  .ks-t06 { animation-delay: .6s; }
  .ks-t20 { animation-delay: 2s; }
  .ks-t24 { animation-delay: 2.400s; }
  .ks-t52 { animation-delay: 5.200s; }
  .ks-t56 { animation-delay: 5.600s; }
  .ks-t60 { animation-delay: 6s; }
  .ks-t68 { animation-delay: 6.800s; }
  .ks-t76 { animation-delay: 7.600s; }
  .ks-t84 { animation-delay: 8.400s; }
  .ks-t102 { animation-delay: 10.200s; }
  .ks-t112 { animation-delay: 11.200s; }
  .ks-t118 { animation-delay: 11.800s; }
  .ks-t124 { animation-delay: 12.400s; }
  .ks-t156 { animation-delay: 15.600s; }
  .ks-t160 { animation-delay: 16s; }
  .ks-t164 { animation-delay: 16.400s; }
  .ks-t168 { animation-delay: 16.800s; }
  .ks-t172 { animation-delay: 17.200s; }
  .ks-t176 { animation-delay: 17.600s; }
  .ks-rise { animation: ks-rise 12s ease-out infinite both; }
  .ks-type { transform-origin: left center; animation: ks-type 12s ease-out infinite both; }
  .ks-blink { animation: ks-blink 1.2s steps(2, jump-none) infinite; }
  .ks-pulse { transform-origin: center; animation: ks-pulse 4s ease-in-out infinite; }
  .ks-flow { animation: ks-flow 2.400s linear infinite; }
  .ks-check { animation: ks-check 12s ease-out infinite both; }
  .ks-draw { stroke-dasharray: 1; animation: ks-draw 12s ease-out infinite both; }
  .ks-seek { animation: ks-seek 12s cubic-bezier(.45, 0, .2, 1) infinite both; }
  .ks-track { animation: ks-track 12s linear infinite; }
  .ks-courier { animation: ks-courier 3.200s ease-in-out infinite; }
  .ks-word { animation: ks-word 12s ease-in-out infinite both; }
  .ks-w3 { fill: #fff; }
  .ks-d1 { animation-delay: .4s; }
  .ks-d2 { animation-delay: 1.100s; }
  .ks-d3 { animation-delay: 1.800s; }
  .ks-d4 { animation-delay: 2.500s; }
  .ks-d5 { animation-delay: 3.200s; }
  .ks-w1 { animation-delay: .3s; }
  .ks-w2 { animation-delay: 1.100s; }
  .ks-w3 { animation-delay: 1.900s; }
  .ks-w4 { animation-delay: 2.700s; }
  .ks-w5 { animation-delay: 3.500s; }
  .ks-w6 { animation-delay: 4.300s; }
  .ks-w7 { animation-delay: 6.300s; }
  .ks-w8 { animation-delay: 7.100s; }
  .ks-w9 { animation-delay: 7.900s; }
  .ks-w10 { animation-delay: 8.700s; }
  .ks-w11 { animation-delay: 9.500s; }
  .ks-w12 { animation-delay: 10.300s; }
  .ks-caption-a { animation: ks-caption-a 12s linear infinite; }
  .ks-caption-b { animation: ks-caption-b 12s linear infinite; }
}
@keyframes ks-talk1 {
  0%, 8% { opacity: 1; }
  9%, 100% { opacity: 0; }
}
@keyframes ks-talk2 {
  0%, 8% { opacity: 0; }
  9%, 15.500% { opacity: 1; }
  16%, 100% { opacity: 0; }
}
@keyframes ks-talk3 {
  0%, 16% { opacity: 0; }
  16.500%, 23% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
@keyframes ks-stage {
  0% { opacity: 0; }
  2%, 23% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes ks-sub {
  0% { opacity: 0; transform: translateY(6px); }
  3%, 20% { opacity: 1; transform: none; }
  24%, 100% { opacity: 0; transform: none; }
}
@keyframes ks-grow {
  0% { transform: scaleX(0); }
  10%, 20% { transform: scaleX(1); }
  24%, 100% { transform: scaleX(0); }
}
@keyframes ks-type-flow {
  0% { transform: scaleX(0); }
  5%, 20% { transform: scaleX(1); }
  24%, 100% { transform: scaleX(0); }
}
@keyframes ks-rise {
  0% { opacity: 0; transform: translateY(8px); }
  6%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes ks-type {
  0% { transform: scaleX(0); }
  8%, 88% { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}
@keyframes ks-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ks-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ks-flow { to { stroke-dashoffset: -22; } }
@keyframes ks-check {
  0%, 3% { opacity: 0; }
  8%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes ks-draw {
  0%, 5% { stroke-dashoffset: 1; }
  10%, 88% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 1; }
}
@keyframes ks-seek {
  0%, 4% { transform: translateX(-258px); }
  14%, 100% { transform: none; }
}
@keyframes ks-track { to { transform: translateX(664px); } }
@keyframes ks-courier {
  0% { opacity: 0; transform: none; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(132px); }
}
@keyframes ks-caption-a {
  0%, 47% { opacity: 1; }
  49%, 98% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ks-caption-b {
  0%, 47% { opacity: 0; }
  49%, 98% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ks-word {
  0% { fill: #fff; }
  2%, 7% { fill: #5ff08f; }
  10%, 100% { fill: #fff; }
}