/* Generated copy of sites/shared/components.css — edit the source, then run scripts/sync_kit.js */
/* ==========================================================================
   Shared components — the chrome, and everything a marketing page is made of.
   Requires tokens.css + base.css. Behaviour lives in chrome.js.

   House rules encoded here: flat surfaces, one hairline, one shadow level,
   amber only on the primary action and live state, no gradient, no glow.
   ========================================================================== */

/* ==========================================================================
   1. Buttons
   ========================================================================== */
.kol-btn {
  --btn-bg: transparent;
  --btn-ink: var(--kol-ink);
  --btn-line: var(--kol-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 44px;
  max-width: 100%;
  padding: 0 var(--kol-space-5);
  border: 1px solid var(--btn-line);
  border-radius: var(--kol-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--kol-text-base);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background-color var(--kol-motion-fast) var(--kol-ease),
    border-color var(--kol-motion-fast) var(--kol-ease),
    color var(--kol-motion-fast) var(--kol-ease);
}

/* The only amber on the page. */
.kol-btn-primary {
  --btn-bg: var(--kol-accent);
  --btn-ink: var(--kol-accent-ink);
  --btn-line: var(--kol-accent);
}

.kol-btn-primary:hover {
  --btn-bg: var(--kol-accent-hover);
  --btn-line: var(--kol-accent-hover);
}

.kol-btn-quiet:hover {
  --btn-bg: var(--kol-sunk);
}

.kol-btn-plain {
  --btn-line: transparent;
  padding-inline: var(--kol-space-3);
  font-weight: 500;
}

.kol-btn-plain:hover {
  --btn-bg: var(--kol-sunk);
}

.kol-btn-sm {
  min-height: 36px;
  padding-inline: var(--kol-space-4);
  font-size: var(--kol-text-sm);
}

.kol-btn-icon {
  min-height: var(--kol-btn-icon-size);
  width: var(--kol-btn-icon-size);
  padding: 0;
  border-color: transparent;
  border-radius: var(--kol-radius-pill);
}

/* Compact, for a dense toolbar or a table row action. Override
   --kol-btn-icon-size on an ancestor for any other size; never re-declare
   width and min-height on the class. */
.kol-btn-icon.kol-btn-sm {
  --kol-btn-icon-size: 32px;
  padding: 0;
}

.kol-btn-icon.kol-btn-sm svg {
  width: 16px;
  height: 16px;
}

.kol-btn-icon:hover {
  --btn-bg: var(--kol-sunk);
}

.kol-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.kol-btn[aria-disabled="true"],
.kol-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   2. Header — identical on every page of every property
   ========================================================================== */
/* Core pages keep the shared header and its sheet inside a small
   `[data-kol-chrome]` mount. A sticky child is bounded by that mount's own
   height, so the header used to scroll away even though its computed position
   said `sticky`. Make the mount the sticky object; generated pages that render
   the header directly continue to use `.kol-header` below. */
[data-kol-chrome] {
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-kol-chrome] .kol-header {
  position: relative;
  top: auto;
  z-index: auto;
}

.kol-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--kol-surface);
  border-bottom: 1px solid var(--kol-line);
}

.kol-header.is-scrolled {
  box-shadow: var(--kol-shadow);
}

.kol-header-bar {
  display: flex;
  align-items: center;
  gap: var(--kol-space-4);
  min-height: var(--kol-header-h);
}

.kol-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  margin-inline-end: auto;
  padding-inline-end: var(--kol-space-3);
  color: var(--kol-ink);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
  text-decoration: none;
}

.kol-brand img {
  height: 26px;
  width: auto;
}

/* Three deliberate tiers, declared once, in width order:
     < 768px   brand + sheet button
     768–1023  brand + a compact nav (Product, Developers, Pricing) + tools
               + the primary action, with the sheet still holding everything
     >= 1024   the full six-item nav, and no sheet button
   The base state of every control lives here so a later section cannot
   reintroduce it: the sheet button used to be re-shown after this block and
   sat next to the full desktop nav. */
.kol-nav {
  display: none;
  align-items: center;
  gap: var(--kol-space-1);
}

.kol-menu-btn {
  display: inline-flex;
}

.kol-nav a,
.kol-nav .kol-btn-plain {
  padding: var(--kol-space-2) var(--kol-space-3);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.kol-nav a:hover {
  background: var(--kol-sunk);
  color: var(--kol-ink);
}

.kol-nav a[aria-current="page"] {
  color: var(--kol-ink);
  box-shadow: inset 0 -2px 0 var(--kol-accent);
}

.kol-header-tools {
  display: none;
  align-items: center;
  gap: var(--kol-space-1);
}

.kol-header-cta {
  display: none;
}

@media (min-width: 768px) {
  .kol-nav,
  .kol-header-tools {
    display: flex;
  }

  .kol-header-cta {
    display: inline-flex;
  }

  /* Tablet: the two popovers and Pricing. The rest is one tap away. */
  .kol-nav .kol-nav-wide {
    display: none;
  }
}

/* A tablet header is the same header with less room: the gaps and the nav
   padding tighten so the primary action keeps its own line of text. */
@media (max-width: 1023px) {
  .kol-header-bar {
    gap: var(--kol-space-2);
  }

  .kol-nav a,
  .kol-nav .kol-btn-plain {
    padding-inline: var(--kol-space-2);
  }
}

@media (min-width: 1024px) {
  .kol-nav .kol-nav-wide {
    display: inline-block;
  }

  .kol-menu-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2b. The signed-in header
   --------------------------------------------------------------------------
   The marketing header folds items away on a tablet because it has six of
   them and a call to action. A console or portal has its own, shorter
   navigation and an account control, and nothing should fold: add
   `kol-header-app` to the same `.kol-header` and use the same markup. Do not
   re-declare `display` on the header's parts.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .kol-header-app .kol-nav .kol-nav-wide {
    display: inline-block;
  }
}

.kol-header-app .kol-nav a[aria-current="page"] {
  color: var(--kol-ink);
  font-weight: 600;
}

/* The account control is a popover like the others: put it in
   `.kol-header-tools` with `data-kol-pop-toggle`. */
.kol-account {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  min-height: var(--kol-btn-icon-size);
  padding: 0 var(--kol-space-2) 0 0;
  border: 1px solid transparent;
  border-radius: var(--kol-radius-pill);
  background: none;
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  cursor: pointer;
}

.kol-account:hover {
  background: var(--kol-sunk);
}

.kol-avatar {
  flex: none;
  width: var(--kol-btn-icon-size);
  height: var(--kol-btn-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
}

.kol-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kol-account-name {
  display: none;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .kol-account-name {
    display: inline;
  }
}

/* Popover extras a signed-in menu needs. */
.kol-pop-panel hr,
.kol-pop-sep {
  height: 0;
  margin: var(--kol-space-2) 0;
  border: 0;
  border-top: 1px solid var(--kol-line);
}

.kol-pop-label {
  padding: var(--kol-space-2) var(--kol-space-3);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.kol-pop-panel .kol-pop-danger {
  color: #b3261e;
}

:root[data-theme="dark"] .kol-pop-panel .kol-pop-danger {
  color: #ffb4ab;
}

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

/* Cross-property link (KolWrite ↔ KolHive OS) reads as a sibling, not an ad. */
.kol-crosslink {
  display: none;
  align-items: center;
  gap: var(--kol-space-2);
  padding: var(--kol-space-2) var(--kol-space-3);
  border-inline-start: 1px solid var(--kol-line);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  text-decoration: none;
  white-space: nowrap;
}

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

@media (min-width: 1200px) {
  .kol-crosslink {
    display: inline-flex;
  }
}

/* ==========================================================================
   3. Popovers — language and theme, on a pointer
   ========================================================================== */
.kol-pop {
  position: relative;
}

.kol-pop-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--kol-space-2));
  z-index: 70;
  display: none;
  min-width: 200px;
  padding: var(--kol-space-2);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
}

.kol-pop-panel[data-open] {
  display: block;
}

.kol-pop-panel a,
.kol-pop-panel button {
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
  width: 100%;
  padding: var(--kol-space-2) var(--kol-space-3);
  border: 0;
  border-radius: var(--kol-radius-sm);
  background: none;
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.kol-pop-panel a:hover,
.kol-pop-panel button:hover {
  background: var(--kol-sunk);
}

/* Live state: the current language, the current theme. */
.kol-pop-panel [aria-current="true"],
.kol-pop-panel [aria-checked="true"] {
  background: var(--kol-accent-quiet);
  font-weight: 600;
}

.kol-pop-panel [aria-checked="true"]::after,
.kol-pop-panel [aria-current="true"]::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--kol-accent);
}

/* ==========================================================================
   4. The sheet menu (phone, and the nav overflow on tablets)
   ========================================================================== */
.kol-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.kol-sheet[data-open] {
  display: block;
}

.kol-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 24, 26, 0.45);
}

.kol-sheet-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  padding: var(--kol-space-4) var(--kol-gutter)
    calc(var(--kol-space-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--kol-surface);
  border-inline-start: 1px solid var(--kol-line);
  animation: kol-sheet-in var(--kol-motion) var(--kol-ease);
}

@keyframes kol-sheet-in {
  from {
    transform: translateX(12px);
    opacity: 0.4;
  }
}

[dir="rtl"] .kol-sheet-panel {
  animation-name: kol-sheet-in-rtl;
}

@keyframes kol-sheet-in-rtl {
  from {
    transform: translateX(-12px);
    opacity: 0.4;
  }
}

.kol-sheet-head {
  position: sticky;
  top: calc(-1 * var(--kol-space-4));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-4);
  min-height: var(--kol-header-h);
  margin: calc(-1 * var(--kol-space-4)) calc(-1 * var(--kol-gutter))
    var(--kol-space-4);
  padding: var(--kol-space-4) var(--kol-gutter);
  border-bottom: 1px solid var(--kol-line);
  background: var(--kol-surface);
}

.kol-sheet-nav {
  display: flex;
  flex-direction: column;
}

.kol-sheet-nav a {
  padding: var(--kol-space-4) 0;
  border-bottom: 1px solid var(--kol-line);
  color: var(--kol-ink);
  font-size: var(--kol-text-lg);
  font-weight: 500;
  text-decoration: none;
}

.kol-sheet-group {
  margin-top: var(--kol-space-6);
}

.kol-sheet-group > .kol-eyebrow {
  margin-bottom: var(--kol-space-3);
}

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

.kol-choice button,
.kol-choice a {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: none;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.kol-choice [aria-checked="true"],
.kol-choice [aria-current="true"] {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-weight: 600;
}

.kol-sheet-foot {
  margin-top: var(--kol-space-6);
  display: grid;
  gap: var(--kol-space-3);
}

.kol-sheet-foot .kol-btn {
  width: 100%;
}

/* ==========================================================================
   5. Cards, media frames, steps
   ========================================================================== */
.kol-card {
  display: flex;
  flex-direction: column;
  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);
  color: inherit;
  text-decoration: none;
}

a.kol-card:hover {
  border-color: var(--kol-line-strong);
}

.kol-card h3 {
  font-size: var(--kol-text-base);
}

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

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

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

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

  .kol-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Every product screenshot is framed the same way, everywhere. */
.kol-frame {
  margin: 0;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-sunk);
  overflow: hidden;
  box-shadow: var(--kol-shadow);
}

.kol-frame img {
  width: 100%;
  display: block;
}

.kol-frame figcaption,
.kol-caption {
  padding: var(--kol-space-3) var(--kol-space-4);
  border-top: 1px solid var(--kol-line);
  background: var(--kol-surface);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.kol-steps {
  display: grid;
  gap: var(--kol-gap);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: kol-step;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .kol-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kol-steps > li {
  counter-increment: kol-step;
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-2);
  padding-top: var(--kol-space-4);
  border-top: 2px solid var(--kol-line);
  color: inherit;
}

.kol-steps > li::before {
  content: counter(kol-step);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A short list of facts. Rows, not badges. */
.kol-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kol-line);
}

.kol-facts > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kol-space-2) var(--kol-space-4);
  padding: var(--kol-space-4) 0;
  border-bottom: 1px solid var(--kol-line);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-base);
}

.kol-facts > li > strong {
  flex: 1 1 14ch;
  color: var(--kol-ink);
}

.kol-facts > li > span {
  flex: 2 1 22ch;
}

.kol-facts > li > .kol-facts-action {
  flex: none;
}

/* ==========================================================================
   6. Pricing
   --------------------------------------------------------------------------
   One system for every price list on every property:

     .kol-plans        a grid of equal plan cards, one row from 1200px
     .kol-plan         a card; its rows line up with its neighbours' (subgrid)
     .kol-plan-featured  the one recommended plan — at most one per grid,
                       and the only card whose action is .kol-btn-primary
     .kol-plan-strip   the entry plan (free, or "start here") as one wide row
     .kol-switch       the billing-period segmented control, with an optional
                       .kol-switch-save chip that states the saving once

   A card reads top to bottom: name, price, action, key specs
   (.kol-plan-specs: the figures people compare), then what is included
   (.kol-plan-features). Something a plan does not include stays on the card
   as a plain sentence in a .kol-plan-limit row, muted with a dash — never in
   a warning colour, which reads as an error rather than a fact.
   ========================================================================== */
.kol-plans {
  --kol-plan-cols: 4;
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

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

@media (min-width: 768px) {
  .kol-plans-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Four across only where a card still fits a two-decimal price and its
   period on one line in every locale; 2 x 2 below that. */
@media (min-width: 1200px) {
  .kol-plans {
    grid-template-columns: repeat(var(--kol-plan-cols), minmax(0, 1fr));
  }

  .kol-plans-3 {
    --kol-plan-cols: 3;
  }
}

.kol-plan {
  /* The number of direct children; each becomes one aligned row. */
  --kol-plan-rows: 5;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-4);
  min-width: 0;
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

/* Rows shared across the grid: every name, price, button and spec block
   starts at the same height in every card of a row, whatever the copy. */
@supports (grid-template-rows: subgrid) {
  .kol-plans > .kol-plan {
    display: grid;
    grid-row: span var(--kol-plan-rows);
    grid-template-rows: subgrid;
    row-gap: var(--kol-space-4);
    align-content: start;
  }
}

.kol-plan-featured {
  border-color: var(--kol-accent);
  box-shadow: inset 0 0 0 1px var(--kol-accent), var(--kol-shadow);
}

.kol-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-2);
  min-height: 28px;
}

.kol-plan :is(h3, h4),
.kol-plan-strip :is(h3, h4) {
  margin: 0;
  font-size: var(--kol-text-lg);
  font-weight: 600;
  line-height: var(--kol-leading-snug);
  letter-spacing: 0;
}

.kol-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--kol-space-2);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* Block, not flex: the site script toggles `display` on these to switch
   currency and billing period, and a flex container would fight it. */
.kol-price {
  margin: 0;
  color: var(--kol-ink);
  font-size: var(--kol-text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--kol-tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* An amount never breaks between its digits and its currency symbol. */
.kol-amount {
  white-space: nowrap;
  unicode-bidi: isolate;
}

.kol-period {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.kol-plan-note {
  margin: var(--kol-space-1) 0 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  line-height: var(--kol-leading-snug);
}

.kol-plan > .kol-btn,
.kol-plan-strip > .kol-btn {
  width: 100%;
}

.kol-plan ul,
.kol-plan-strip ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  align-content: start;
  gap: var(--kol-space-2);
  font-size: var(--kol-text-sm);
  line-height: var(--kol-leading-snug);
}

/* Key specs: the figures a reader compares across plans. */
.kol-plan .kol-plan-specs {
  gap: var(--kol-space-1);
  padding-top: var(--kol-space-4);
  border-top: 1px solid var(--kol-line);
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
  font-weight: 600;
}

/* Included features: a check. */
.kol-plan ul:not(.kol-plan-specs) li,
.kol-plan-strip ul li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--kol-ink-muted);
}

.kol-plan ul:not(.kol-plan-specs) li::before,
.kol-plan-strip ul li::before {
  content: "";
  color: var(--kol-ink);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--kol-plan-icon) center / 16px 16px no-repeat;
  mask: var(--kol-plan-icon) center / 16px 16px no-repeat;
  --kol-plan-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* What a plan does not include: the same sentence, muted, with a dash. */
.kol-plan ul li.kol-plan-limit,
.kol-plan-strip ul li.kol-plan-limit {
  color: var(--kol-ink-faint);
}

.kol-plan ul li.kol-plan-limit::before,
.kol-plan-strip ul li.kol-plan-limit::before {
  color: var(--kol-ink-faint);
  --kol-plan-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The entry plan as one wide row: name and price, what it includes, action. */
.kol-plan-strip {
  display: grid;
  gap: var(--kol-space-4);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

.kol-plan-strip-head {
  display: grid;
  gap: var(--kol-space-1);
  align-content: start;
}

@media (min-width: 768px) {
  .kol-plan-strip {
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--kol-space-6);
  }

  .kol-plan-strip ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--kol-space-5);
    row-gap: var(--kol-space-2);
  }

  .kol-plan-strip > .kol-btn {
    width: auto;
  }
}

/* Monthly / annual, and any other two-way switch. */
.kol-switch {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-sunk);
}

.kol-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 40px;
  padding: 0 var(--kol-space-4);
  border: 1px solid transparent;
  border-radius: var(--kol-radius-pill);
  background: none;
  color: var(--kol-ink-muted);
  font: inherit;
  font-size: var(--kol-text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--kol-motion-fast) var(--kol-ease),
    color var(--kol-motion-fast) var(--kol-ease);
}

.kol-switch button:hover {
  color: var(--kol-ink);
}

.kol-switch button:focus-visible {
  border-radius: var(--kol-radius-pill);
}

.kol-switch button.active,
.kol-switch button[aria-pressed="true"],
.kol-switch button[aria-checked="true"] {
  border-color: var(--kol-line);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-weight: 600;
}

/* "Save 17%": the saving, stated once, on the option that earns it. */
.kol-switch-save {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--kol-space-2);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6b. Choosing: segmented controls, radio tiles, steppers
   --------------------------------------------------------------------------
   A configurator ("which plan", "how many seats", "what are you here for") is
   a radio group, not a set of buttons with JavaScript behind them. These
   patterns keep the native input so the keyboard, the form and the screen
   reader all work, and paint the selected state with the one accent.
   -------------------------------------------------------------------------- */

/* Segmented control. Works with <button> (JS-driven) or a radio per option. */
.kol-switch label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 40px;
  white-space: nowrap;
  padding: 0 var(--kol-space-4);
  border: 1px solid transparent;
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 500;
  cursor: pointer;
}

.kol-switch label:has(input:checked) {
  border-color: var(--kol-line);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-weight: 600;
}

.kol-switch label:has(input:focus-visible) {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
}

.kol-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Radio tiles: a bigger choice, with a line of explanation under each. */
.kol-tiles {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

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

  .kol-tiles-3,
  .kol-tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .kol-tiles-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kol-tile {
  position: relative;
  display: grid;
  gap: var(--kol-space-2);
  align-content: start;
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  cursor: pointer;
  transition: border-color var(--kol-motion-fast) var(--kol-ease);
}

.kol-tile:hover {
  border-color: var(--kol-line-strong);
}

.kol-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kol-tile:has(input:checked) {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
}

.kol-tile:has(input:focus-visible) {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
}

.kol-tile-title {
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
  color: var(--kol-ink);
  font-weight: 600;
}

.kol-tile-title::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--kol-line-strong);
  border-radius: 50%;
}

.kol-tile:has(input:checked) .kol-tile-title::before {
  border-color: var(--kol-accent);
  background: var(--kol-accent);
  box-shadow: inset 0 0 0 3px var(--kol-surface);
}

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

.kol-tile-price {
  color: var(--kol-ink);
  font-size: var(--kol-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* − value + */
.kol-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  padding: 3px;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-surface);
}

.kol-stepper button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--kol-sunk);
  color: var(--kol-ink);
  cursor: pointer;
}

.kol-stepper output,
.kol-stepper span {
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ==========================================================================
   6c. Panels — a settings or accessibility sheet
   --------------------------------------------------------------------------
   The pattern for a property that owns its own accessibility panel (kolhive)
   or a settings surface (the console). Section 12 below styles the older
   floating widget that kolwrite.com's own script injects; both read the same.
   ========================================================================== */
.kol-panel {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 2 * var(--kol-gutter)));
  max-height: min(80vh, 640px);
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
}

.kol-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-4);
  padding-bottom: var(--kol-space-3);
  border-bottom: 1px solid var(--kol-line);
}

.kol-panel-head h2,
.kol-panel-head h3 {
  font-size: var(--kol-text-base);
}

.kol-panel-body {
  overflow-y: auto;
  padding-top: var(--kol-space-2);
}

.kol-panel-foot {
  display: flex;
  gap: var(--kol-space-2);
  padding-top: var(--kol-space-3);
  margin-top: var(--kol-space-2);
  border-top: 1px solid var(--kol-line);
}

/* One row per setting: what it does on the left, the control on the right. */
.kol-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kol-rows > li,
.kol-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-4);
  padding: var(--kol-space-3) 0;
  border-bottom: 1px solid var(--kol-line);
  font-size: var(--kol-text-sm);
}

.kol-rows > li:last-child {
  border-bottom: 0;
}

.kol-rows label,
.kol-row-item > span:first-child {
  color: var(--kol-ink);
}

/* A switch, not a checkbox: <button role="switch" aria-checked="false"> */
.kol-toggle {
  flex: none;
  width: 40px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-sunk);
  cursor: pointer;
}

.kol-toggle::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kol-ink-faint);
  transition: transform var(--kol-motion) var(--kol-ease), background-color var(--kol-motion) var(--kol-ease);
}

.kol-toggle[aria-checked="true"] {
  border-color: var(--kol-accent);
  background: var(--kol-accent);
}

.kol-toggle[aria-checked="true"]::after {
  background: var(--kol-accent-ink);
  transform: translateX(16px);
}

[dir="rtl"] .kol-toggle[aria-checked="true"]::after {
  transform: translateX(-16px);
}

/* ==========================================================================
   7. FAQ accordion (native <details>)
   ========================================================================== */
.kol-faq {
  border-top: 1px solid var(--kol-line);
}

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

.kol-faq > details > summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--kol-space-4);
  padding: var(--kol-space-4) 0;
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
}

.kol-faq > details > summary::-webkit-details-marker {
  display: none;
}

.kol-faq > details > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid var(--kol-ink-faint);
  border-block-end: 1.5px solid var(--kol-ink-faint);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform var(--kol-motion) var(--kol-ease);
}

.kol-faq > details[open] > summary::after {
  transform: rotate(225deg);
}

.kol-faq-body {
  padding-bottom: var(--kol-space-5);
  max-width: var(--kol-measure);
  color: var(--kol-ink-muted);
}

.kol-faq-body > * + * {
  margin-top: var(--kol-space-3);
}

/* ==========================================================================
   7b. Data tables
   --------------------------------------------------------------------------
   For a console or portal table: a header row, zebra rows, numbers on the
   inline end with tabular figures, and a choice of two behaviours on a phone.
   Both start from the same markup:

     <div class="kol-table-wrap">
       <table class="kol-table">
         <thead><tr><th scope="col">Key</th><th scope="col" class="kol-num">Calls</th></tr></thead>
         <tbody><tr><th scope="row">…</th><td class="kol-num" data-label="Calls">1,284</td></tr></tbody>
       </table>
     </div>

   Default: the wrapper scrolls sideways below its minimum width. Add
   `kol-table-cards` to the table and a `data-label` to every cell, and each
   row becomes a card under 768px instead. `text-align: end` and logical
   padding mean Hebrew and Arabic need nothing extra.
   ========================================================================== */
.kol-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

table.kol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kol-text-sm);
}

.kol-table th,
.kol-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);
}

.kol-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  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;
  white-space: nowrap;
}

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

.kol-table tbody tr:nth-child(even) {
  background: var(--kol-zebra);
}

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

/* Numbers: inline end, tabular, so columns line up in both directions. */
.kol-table .kol-num,
.kol-table [data-kol-num] {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kol-table td .kol-btn {
  margin-block: calc(-1 * var(--kol-space-1));
}

/* Row state: the live row, and one danger tint. Never a second accent. */
.kol-table tbody tr[aria-current="true"] {
  background: var(--kol-accent-quiet);
}

.kol-table-empty {
  padding: var(--kol-space-6) var(--kol-space-4);
  color: var(--kol-ink-faint);
  text-align: center;
}

@media (max-width: 767px) {
  .kol-table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kol-table-cards,
  .kol-table-cards tbody,
  .kol-table-cards tr,
  .kol-table-cards th,
  .kol-table-cards td {
    display: block;
  }

  .kol-table-cards tr {
    padding: var(--kol-space-4);
    border-bottom: 1px solid var(--kol-line);
  }

  .kol-table-cards tbody tr:last-child {
    border-bottom: 0;
  }

  .kol-table-cards th,
  .kol-table-cards td {
    padding: var(--kol-space-1) 0;
    border-bottom: 0;
  }

  .kol-table-cards td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kol-space-4);
  }

  .kol-table-cards td[data-label]::before {
    content: attr(data-label);
    color: var(--kol-ink-faint);
    font-size: var(--kol-text-xs);
    font-weight: 600;
    letter-spacing: var(--kol-tracking-wide);
    text-transform: uppercase;
  }

  .kol-table-cards tbody th {
    font-size: var(--kol-text-base);
  }
}

/* ==========================================================================
   8. Forms
   ========================================================================== */
.kol-field {
  display: grid;
  gap: var(--kol-space-2);
}

.kol-label {
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
}

.kol-input,
.kol-textarea,
.kol-select {
  width: 100%;
  min-height: 44px;
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
}

.kol-textarea {
  min-height: 132px;
  resize: vertical;
}

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

.kol-input:focus-visible,
.kol-textarea:focus-visible,
.kol-select:focus-visible {
  border-color: var(--kol-ink);
}

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

.kol-error {
  color: #b3261e;
  font-size: var(--kol-text-sm);
}

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

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

.kol-form-row {
  display: grid;
  gap: var(--kol-gap);
}

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

/* ==========================================================================
   9. Notice bar
   ========================================================================== */
.kol-notice {
  border-bottom: 1px solid var(--kol-line);
  background: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.kol-notice-inner {
  display: flex;
  align-items: center;
  gap: var(--kol-space-4);
  min-height: 44px;
  padding-block: var(--kol-space-2);
}

.kol-notice p {
  margin: 0;
  font-size: inherit;
}

.kol-notice .kol-btn {
  flex: none;
  margin-inline-start: auto;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ==========================================================================
   10. Call-to-action band
   ========================================================================== */
.kol-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-5);
  padding: var(--kol-space-6);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

.kol-cta > div {
  flex: 1 1 24ch;
  display: grid;
  gap: var(--kol-space-2);
}

/* ==========================================================================
   11. Footer — identical on every page
   ========================================================================== */
.kol-footer {
  border-top: 1px solid var(--kol-line);
  background: var(--kol-surface);
  padding-block: var(--kol-space-7) var(--kol-space-5);
}

.kol-footer-grid {
  display: grid;
  gap: var(--kol-space-6) var(--kol-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .kol-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Lead plus four columns: Product, Developers, Use cases, Company. */
@media (min-width: 1024px) {
  .kol-footer-grid {
    grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  }
}

.kol-footer-lead {
  display: grid;
  gap: var(--kol-space-3);
  grid-column: 1 / -1;
  align-content: start;
}

@media (min-width: 1024px) {
  .kol-footer-lead {
    grid-column: auto;
  }
}

.kol-footer-lead p {
  font-size: var(--kol-text-sm);
  max-width: 34ch;
}

.kol-footer-col {
  display: grid;
  gap: var(--kol-space-2);
  align-content: start;
}

.kol-footer-col a {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-decoration: none;
}

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

.kol-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3) var(--kol-space-5);
  margin-top: var(--kol-space-7);
  padding-top: var(--kol-space-4);
  border-top: 1px solid var(--kol-line);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.kol-footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.kol-footer-bottom a:hover {
  color: var(--kol-ink);
}

.kol-footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-1) var(--kol-space-3);
  margin-inline-start: auto;
}

.kol-footer-langs a[aria-current="true"] {
  color: var(--kol-ink);
  font-weight: 600;
}

/* ==========================================================================
   12. Accessibility widget
   --------------------------------------------------------------------------
   The widget itself is injected by the site's own script (kolwrite.com:
   assets/js/app.js, AccessibilitySystem). This is only its appearance, so the
   three properties present the same control.
   ========================================================================== */
/* Bottom of the reading direction's end edge: right in English, left in
   Hebrew and Arabic, which is where each audience looks for it, and never on
   top of the hero's own call to action. */
#a11y-toggle {
  position: fixed;
  bottom: var(--kol-space-5);
  inset-inline-end: var(--kol-space-5);
  z-index: 95;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kol-line-strong);
  border-radius: 50%;
  background: var(--kol-surface);
  color: var(--kol-ink);
  box-shadow: var(--kol-shadow);
  cursor: pointer;
}

#a11y-toggle svg,
#a11y-toggle i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}

#a11y-toggle.active {
  background: var(--kol-accent);
  border-color: var(--kol-accent);
  color: var(--kol-accent-ink);
}

.a11y-toggle-close {
  position: absolute;
  top: -4px;
  inset-inline-start: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kol-line-strong);
  border-radius: 50%;
  background: var(--kol-surface);
  color: var(--kol-ink-faint);
}

#a11y-menu {
  position: fixed;
  bottom: calc(var(--kol-space-5) + 52px);
  inset-inline-end: var(--kol-space-5);
  z-index: 95;
  width: min(320px, calc(100vw - 2 * var(--kol-gutter)));
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--kol-motion) var(--kol-ease),
    transform var(--kol-motion) var(--kol-ease),
    visibility var(--kol-motion);
}

#a11y-menu.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-4);
  margin-bottom: var(--kol-space-4);
}

.a11y-header h3 {
  font-size: var(--kol-text-base);
}

.a11y-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--kol-radius-sm);
  background: none;
  color: var(--kol-ink-faint);
  cursor: pointer;
}

.a11y-close:hover {
  background: var(--kol-sunk);
}

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

.a11y-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
  padding: var(--kol-space-3);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-align: start;
  cursor: pointer;
}

.a11y-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.a11y-option:hover {
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
}

.a11y-option svg,
.a11y-option i {
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* The visitor's own accessibility switches. */
html.a11y-grayscale {
  filter: grayscale(100%);
}

html.a11y-high-contrast {
  filter: contrast(140%);
}

html.a11y-light-bg,
html.a11y-light-bg body {
  background: #ffffff;
  --kol-paper: #ffffff;
  --kol-surface: #ffffff;
  --kol-sunk: #f2f2f2;
  --kol-ink: #000000;
  --kol-ink-muted: #2b2b2b;
  --kol-ink-faint: #444444;
  --kol-line: #c9c9c9;
  --kol-line-strong: #8f8f8f;
}

html.a11y-links-underline a {
  text-decoration: underline !important;
}

html.a11y-readable-font * {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.03em;
}

html.font-xsmall {
  font-size: 85%;
}

html.font-small {
  font-size: 92%;
}

html.font-large {
  font-size: 110%;
}

html.font-huge {
  font-size: 120%;
}

/* ==========================================================================
   13. Utilities — deliberately few
   ========================================================================== */
.kol-hide {
  display: none !important;
}

.kol-nowrap {
  white-space: nowrap;
}

.kol-mono {
  font-family: var(--kol-font-mono);
  font-variant-numeric: tabular-nums;
}