/* Kleva Khaya website — the website layer of the brand, v3 (23 Sep 2026, the shrink).
   Three content pages, one scroll and one gold action each. What carries the brand:
   - the brand cover at hero scale: ink house (the mark, with the app's idle eye), gold block with cut arcs, tint block
   - Anton, uppercase and short: headlines, section titles, prices
   - KkAction (the one gold action) and KkQuietAction; the app's header chips; t-pill ownership pills
   - kk-route cards for the camera options, kk-tool tiles for requirements, kk-note for limits, kk-choice FAQ rows
   - the band (night) as the footer
   v3.1 (23 Sep 2026, the owner's canvas comment pass): the cover grown into a pattern field, a pattern strip,
   illustrated step cards, the how-it-works band with the pictured alert, FAQ side panels, pricing panels with art
   and the pro-rata example. Art lives in scripts/art.mjs.
   Cut in v3: kicker bars, numbered sections, sticky heading columns, state circles, phone bezels, receipts,
   billing rings, the discount ladder and the closing band. The build fails if their classes come back.
   Brand values: brand/system/tokens.json, checked by brand-drift-check.mjs via docs/design-system/brand-map.json. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Variable.latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand core (fixed) */
  --night: #17130f;
  --cream: #f3eee4;
  --gold: #e9a531;
  --on-gold: #17130f;
  --gold-asleep: #c9b27a;
  --ankara: #d9502d; /* only in pictures of the app's alert (v3.1) */
  /* Brand roles, light theme */
  --surface: #f3eee4;
  --surface-raised: #ffffff;
  --surface-tint: #eae2d2;
  --band: #17130f;
  --line: #e4dccb;
  --line-strong: #cfc3ad;
  --ink: #17130f;
  --ink-secondary: #5c554d;
  --ink-muted: #6c645a;
  --focus: #af7513;
  --success: #486f38;
  --success-surface: #eef4e8;
  --success-border: #c2d6b4;
  --warning: #8a5c0f;
  --warning-surface: #fff4dc;
  --warning-border: #e6cd97;
  --danger: #a83d22;
  --danger-surface: #fff0f0;
  --danger-border: #e8b3a4;
  --info: #4a5a72;
  --info-surface: #eef1f6;
  --info-border: #c3ccdb;
  /* On the band */
  --band-ink: #f3eee4;
  --band-ink-secondary: #d8cec0;
  --band-line: #40372f;
  --band-raised: #241f1a;

  --display: Anton, Impact, sans-serif;
  --sans: Archivo, ui-sans-serif, system-ui, sans-serif;
  /* Website scale, borrowed from the app (KkSize) */
  --target-min: 44px;
  --tap: 60px;
  --action: 68px;
  --r-card: 18px;
  --r-field: 16px;
  --r-bar: 20px;
  --content-max: 1180px;
  --measure: 40rem;
  --gutter: 18px;
  --sec: 64px;
}
@media (min-width: 720px) { :root { --gutter: 32px; --sec: 88px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; --sec: 104px; } }

*, *::before, *::after { box-sizing: border-box; word-spacing: .06em; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 17px; font-weight: 450; font-variation-settings: 'wght' 450;
  line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* B6: every element opens Archivo's word space; headings and buttons open it further. Anton and the wordmark do not. */
h1, h2, h3, h4 { margin: 0; color: var(--ink); word-spacing: .1em; }
button { word-spacing: .1em; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Icons: Material Symbols Outlined, the app's icon family (Icons.*_outlined). Loaded as a named subset. */
.ic {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; word-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block; flex: 0 0 auto; font-size: 24px; width: 1em; overflow: hidden;
}

/* Type ----------------------------------------------------------------- */
.d-hero, .d-1, .d-2, .d-3, .d-4 {
  font-family: var(--display); font-weight: 400; font-variation-settings: normal;
  text-transform: uppercase; letter-spacing: .5px; word-spacing: normal; text-wrap: balance;
}
.d-hero { font-size: clamp(60px, 9.4vw, 136px); line-height: .9; }
.d-1 { font-size: clamp(48px, 6.4vw, 88px); line-height: .92; }
.d-2 { font-size: clamp(34px, 3.8vw, 48px); line-height: .96; }
.d-3 { font-size: 28px; line-height: 1; }
.d-4 { font-size: 22px; line-height: 1; }
.lead {
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; font-weight: 500; font-variation-settings: 'wght' 500;
  color: var(--ink-secondary); max-width: var(--measure);
}
.body { color: var(--ink-secondary); max-width: var(--measure); }
.row-title {
  font-size: 18px; line-height: 1.25; font-weight: 700; font-variation-settings: 'wght' 700; word-spacing: .1em; color: var(--ink);
}
.meta { font-size: 15px; line-height: 1.45; color: var(--ink-muted); font-weight: 500; font-variation-settings: 'wght' 500; }
strong, b { font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink); }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(233, 165, 49, .35); border-radius: 6px; }

/* Layout --------------------------------------------------------------- */
.wrap { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--night); color: var(--cream); padding: 12px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A section: one Anton heading and its content, one column. Space, not rules, separates sections. */
.sec { margin-top: var(--sec); display: flex; flex-direction: column; gap: 20px; }
.sec > h2 { margin-bottom: 4px; }
.after { margin-top: -4px; }
#contact { margin-top: 36px; }
main { display: block; padding-bottom: var(--sec); }
/* Short pages (404, Support on a tall screen): the band footer stands on the window's bottom edge, not mid-air. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* Buttons: KkAction and KkQuietAction ----------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--action); padding: 10px 30px; border: 0; border-radius: var(--r-card);
  background: var(--gold); color: var(--on-gold); text-decoration: none; cursor: pointer;
  font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: .6px; word-spacing: normal; text-transform: uppercase;
}
.btn-action .ic { font-size: 30px; }
.btn-action:hover { background: #f0b24a; }
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 10px 22px; border: 2px solid rgba(23, 19, 15, .5); border-radius: var(--r-bar);
  background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
  font-size: 17px; line-height: 1.2; font-weight: 700; font-variation-settings: 'wght' 700;
}
.btn-quiet .ic { font-size: 22px; }
.btn-quiet:hover { background: rgba(23, 19, 15, .06); border-color: var(--ink); }
.go { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); font-weight: 700; font-variation-settings: 'wght' 700; word-spacing: .1em; }
.go .ic { font-size: 20px; transition: transform .15s ease; }
.go:hover .ic { transform: translateX(3px); }

/* Pills (t-pill): rental or yours, always beside a price ------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-bar);
  font-size: 12.5px; line-height: 1; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: .6px; text-transform: uppercase;
  background: rgba(23, 19, 15, .08); color: var(--ink); white-space: nowrap;
}
.pill .ic { font-size: 16px; }
.pill.owned { background: var(--ink); color: var(--cream); }

/* Header --------------------------------------------------------------- */
.site-header { position: relative; z-index: 20; background: var(--surface); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 84px; }
.lockup { display: inline-flex; align-items: flex-end; text-decoration: none; min-height: var(--target-min); padding: 4px 0; }
.lockup .mark { width: 44px; height: 44px; flex: none; }
.wordmark {
  font-family: var(--sans); font-weight: 800; font-variation-settings: 'wght' 800; line-height: 1;
  letter-spacing: .01em; word-spacing: normal; color: var(--ink); white-space: nowrap;
  font-size: 21.12px; margin-left: 9.68px; padding-bottom: 3.08px;
}
.wordmark .kh { color: var(--gold); }
.site-footer .wordmark { color: var(--cream); }
.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.nav a {
  display: inline-flex; align-items: center; height: var(--target-min); padding: 0 14px; border-radius: var(--r-bar);
  background: rgba(23, 19, 15, .06); color: rgba(23, 19, 15, .78); text-decoration: none;
  font-size: 12.5px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: .8px; text-transform: uppercase;
}
.nav a:hover { background: rgba(23, 19, 15, .12); color: var(--ink); }
.nav a[aria-current='page'] { background: var(--ink); color: var(--cream); }
.nav .utility a { background: transparent; box-shadow: inset 0 0 0 2px rgba(23, 19, 15, .35); }
.nav .utility a[aria-current='page'] { background: var(--ink); color: var(--cream); box-shadow: none; }
.menu-button {
  display: none; margin-left: auto; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-bar);
  background: var(--ink); color: var(--cream); cursor: pointer;
  font-size: 12.5px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: .8px; text-transform: uppercase;
}
@media (max-width: 719px) {
  .header-row { flex-wrap: wrap; }
  .js .menu-button { display: inline-flex; }
  .js .nav { display: none; position: absolute; left: auto; right: var(--gutter); top: calc(100% + 6px); width: 248px; background: var(--band); padding: 6px 20px; border-radius: 22px; box-shadow: 0 18px 40px rgba(23, 19, 15, .3); }
  .js .nav.open { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav li + li { border-top: 1px solid var(--band-line); }
  .js .nav a {
    display: flex; height: auto; min-height: 60px; width: 100%; padding: 0; border-radius: 0; background: transparent; color: var(--band-ink);
    font-family: var(--display); font-size: 28px; font-weight: 400; letter-spacing: .5px; font-variation-settings: normal; word-spacing: normal;
  }
  .js .nav a[aria-current='page'] { color: var(--gold); background: transparent; }
  .js .nav .utility a { box-shadow: none; }
}

/* Review layer (review build only) ---------------------------------- */
.review-banner { background: var(--warning-surface); border-bottom: 1px solid var(--warning-border); font-size: 15px; line-height: 1.45; }
.review-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; }
.review-toggle { min-height: var(--target-min); padding: 0 14px; border-radius: 12px; cursor: pointer; background: var(--surface-raised); border: 2px solid var(--warning); font-weight: 700; font-variation-settings: 'wght' 700; font-size: 15px; }
.review {
  display: block; margin-top: 12px; padding: 8px 12px; max-width: var(--measure);
  background: var(--warning-surface); border: 1px dashed var(--warning); border-radius: 10px;
  color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.45; text-align: left; text-transform: none;
  letter-spacing: 0; font-weight: 450; font-variation-settings: 'wght' 450;
}
.review b { color: var(--warning); }
.hide-review .review, .hide-review .review-only { display: none !important; }

/* The mark and its eye --------------------------------------------------- */
.eye { transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(.65, 0, .35, 1); }
.eye.blink { animation: kk-blink .28s ease-in-out; }
@keyframes kk-blink { 0% { transform: var(--gaze) scaleY(1); } 27% { transform: var(--gaze) scaleY(.08); } 55%, 100% { transform: var(--gaze) scaleY(1); } }

/* Hero: the brand cover. The art's bottoms stand on the hero's ground line. -- */
.hero { overflow: hidden; border-bottom: 1px solid var(--line-strong); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
.hero .lead { margin-top: 22px; }
.hero .actions { margin-top: 30px; }
.hero-art { margin-right: calc(-1 * var(--gutter)); }
.hero-art svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px; align-items: end; padding-top: 56px; }
  .hero-copy { padding-bottom: 56px; }
}

/* Why we exist: one plain statement ------------------------------------- */
.why { gap: 14px; }
.statement { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.35; font-weight: 600; font-variation-settings: 'wght' 600; max-width: 34ch; }

/* Page intro ----------------------------------------------------------- */
.intro { padding-top: 40px; }
.intro .lead { margin-top: 20px; }
.intro .meta { margin-top: 10px; }

/* Cards (kk-route) ------------------------------------------------------ */
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.grid-3, .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.disc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(233, 165, 49, .22); color: var(--ink); flex: none; }
.disc .ic { font-size: 26px; }
.route { display: flex; flex-direction: column; gap: 14px; }
.route > p { color: var(--ink-secondary); font-size: 16px; }
.route-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Price: Anton amount with its unit beside it, never alone. */
.prices { margin-top: 40px; }
.price { display: flex; align-items: flex-end; gap: 10px; }
.price .amount { font-family: var(--display); font-size: 76px; line-height: .85; letter-spacing: .5px; word-spacing: normal; color: var(--ink); }
.price .unit { font-size: 13px; line-height: 1.25; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-secondary); padding-bottom: 4px; }
.terms { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.terms > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
.terms dt { font-size: 15px; font-weight: 700; font-variation-settings: 'wght' 700; }
.terms dd { font-size: 15.5px; color: var(--ink-secondary); margin-top: 2px; }

/* Rows: a label on the left, an amount on the right, hairlines between. ---- */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); max-width: 48rem; }
.rows > li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.rows > li > div { min-width: 0; }
.row-price { display: flex; align-items: baseline; gap: 8px; flex: none; }
.row-price .amount { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: .5px; word-spacing: normal; }
.row-price .unit { font-size: 14px; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--ink-secondary); }
.rows.contact > li { justify-content: flex-start; flex-wrap: wrap; }
.rows.contact > li > :first-child { width: 12rem; }
.with-ic { display: flex; align-items: center; gap: 12px; }

/* How it works: three steps, then the limits right beside them. --------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--cream); flex: none; font-size: 18px; font-weight: 800; font-variation-settings: 'wght' 800; }
.steps p { color: var(--ink-secondary); margin-top: 4px; font-size: 16px; }
.limits { margin-top: 8px; }

/* Notes (kk-note) -------------------------------------------------------- */
.note { display: flex; gap: 14px; padding: 18px; border-radius: var(--r-field); background: rgba(23, 19, 15, .07); }
.note .ic { font-size: 24px; }
.note p { color: var(--ink-secondary); font-size: 16px; }
.note .row-title + p { margin-top: 4px; }
.note > p { color: var(--ink); }

/* Requirements (kk-tool tiles) ----------------------------------------- */
.needs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .needs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.needs li { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--line); }
.needs .ic { font-size: 32px; }
.needs p { font-size: 15.5px; line-height: 1.45; color: var(--ink-secondary); margin-top: 4px; }

/* FAQ: kk-choice rows; open = selected, gold 2px (v3.1 rows, every page) ----- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 48rem; }
.faq details { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); }
.faq details[open] { border: 2px solid var(--gold); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 16px 20px 16px 24px; }
.faq details[open] summary { padding: 15px 19px 15px 23px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .q { flex-grow: 1; font: inherit; font-size: 19px; line-height: 1.3; font-weight: 700; font-variation-settings: 'wght' 700; }
.faq summary .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-tint); color: var(--ink); font-size: 24px; transition: transform .15s ease; }
.faq details[open] summary .ic { background: var(--gold); color: var(--on-gold); transform: rotate(180deg); }
.faq .answer { padding: 0 23px 22px; }
.faq .answer p { color: var(--ink-secondary); max-width: var(--measure); }
.faq .answer p + p { margin-top: 10px; }
@media (max-width: 559px) { .faq summary { padding: 14px 14px 14px 18px; } .faq details[open] summary { padding: 13px 13px 13px 17px; } .faq .q { font-size: 17px; } .faq .answer { padding: 0 17px 18px; } }

/* The page's last word: one heading and its action, on the tint ------- */
.next { align-items: flex-start; gap: 16px; padding: 36px; border-radius: var(--r-card); background: var(--surface-tint); }
.next h2 { margin: 0; }
.next > .btn-quiet, .next .actions { margin-top: 8px; }
@media (max-width: 559px) { .next { padding: 24px 20px; } }

/* Footer: the band ------------------------------------------------------- */
.site-footer { background: var(--band); color: var(--band-ink-secondary); padding: 44px 0 32px; }
.site-footer a { color: var(--band-ink); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.footer-line { margin-top: 14px; max-width: 26rem; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--target-min); text-decoration: none; font-weight: 600; font-variation-settings: 'wght' 600; }
.site-footer li a:hover { text-decoration: underline; }
.footer-base { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--band-line); font-size: 14px; }
.site-footer .review, .site-footer .review b { color: var(--ink); }
.site-footer .review b { color: var(--warning); }

/* Forms: the app's sign-in fields ---------------------------------------- */
.form-shell { max-width: 32rem; }
.form-card { margin-top: 28px; }
.step-label { font-size: 15px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink-secondary); }
.field { display: grid; gap: 8px; margin-top: 18px; }
.field label { font-size: 15px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink); }
.field .hint { font-size: 15px; color: var(--ink-muted); }
.field input {
  height: 62px; padding: 0 16px; border-radius: var(--r-field); border: 2px solid rgba(23, 19, 15, .45); background: var(--surface-raised);
  font-size: 19px; font-weight: 600; font-variation-settings: 'wght' 600; width: 100%;
}
.field input:focus-visible { border-color: var(--ink); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field .error { display: flex; gap: 8px; color: var(--danger); font-weight: 600; font-variation-settings: 'wght' 600; font-size: 15px; }
.form-card .btn-action { width: 100%; margin-top: 22px; }
.msg { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-field); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.msg .ic { font-size: 22px; }
.msg p { color: var(--ink); }
.msg.danger { background: var(--danger-surface); border: 1px solid var(--danger-border); }
.msg.danger .ic { color: var(--danger); }
.msg.success { background: var(--success-surface); border: 1px solid var(--success-border); }
.msg.success .ic { color: var(--success); }
.msg.info { background: var(--info-surface); border: 1px solid var(--info-border); }
.msg.info .ic { color: var(--info); }
.btn-action[aria-disabled='true'] { opacity: .6; cursor: progress; }
.btn-quiet[disabled] { opacity: .55; cursor: not-allowed; }
.text-button { background: none; border: 0; padding: 0 4px; min-height: var(--target-min); cursor: pointer; font-weight: 700; font-variation-settings: 'wght' 700; text-decoration: underline; text-underline-offset: .2em; }
.fine { margin-top: 20px; }
.demo-controls { margin-top: 28px; padding: 14px 16px; border: 1px dashed var(--warning); border-radius: var(--r-field); background: var(--warning-surface); }
.demo-controls fieldset { border: 0; margin: 0; padding: 0; }
.demo-controls legend { font-weight: 700; font-variation-settings: 'wght' 700; padding: 0; }
.demo-controls label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.demo-controls input[type='radio'] { width: 20px; height: 20px; flex: none; accent-color: var(--night); }
.demo-controls .meta { margin-top: 8px; }
.signup-faq { margin-top: 40px; }

/* Mailing list: the 7 Oct card layout was replaced on 8 Oct (see "Mailing list, redone" at the end of this file). */
.mailing-form .field:first-child { margin-top: 0; }
.mailing-form .msg { margin-top: 16px; }
/* Functional form resets; mailing-list presentation is reviewed by Claude looks. */
.mailing-fields { min-width: 0; border: 0; margin: 0; padding: 0; }
.mailing-form [hidden] { display: none !important; }
.mailing-form [data-mailing-verification]:not(:empty) { margin-top: 18px; }
.mailing-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 18px 0; }

/* Privacy outline ------------------------------------------------------- */
.outline { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); max-width: 48rem; margin-top: 32px; }
.sec .outline { margin-top: 0; }
.outline section { padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.outline p { margin-top: 4px; color: var(--ink-secondary); }

/* Not found ---------------------------------------------------------------- */
.lost { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: 48px 0 0; }
.lost-art svg { width: min(280px, 60%); height: auto; }
.lost .lead { margin-top: 20px; }
.lost .actions { margin-top: 28px; }
@media (min-width: 960px) { .lost { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* ---- v3.1: the owner's canvas pass (23 Sep 2026) ------------------------------------------------ */
.hero { border-bottom: 0; }
.strip { display: block; width: 100%; height: 64px; background: var(--surface); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 959px) { .hero-art { max-width: 560px; } }

/* Why we exist: statement, then the community picture */
.why-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.why-copy { display: flex; flex-direction: column; gap: 18px; }
.why-copy .statement { max-width: 30ch; }
.why-copy .statement b { display: block; font-family: var(--display); font-weight: 400; font-variation-settings: normal; text-transform: uppercase; letter-spacing: .5px; word-spacing: normal; font-size: clamp(40px, 4.4vw, 56px); line-height: .95; margin-bottom: 14px; }
.why-art svg { width: 100%; height: auto; }
@media (min-width: 960px) { .why-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }

/* How it works: the band, the night yard and the pictured alert */
.how-band { background: var(--band); color: var(--band-ink); border-radius: 28px; padding: 40px 20px; gap: 0; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.how-intro { display: flex; flex-direction: column; gap: 20px; }
.how-band h2, .how-band h3 { color: var(--band-ink); }
.how-band .lead { color: var(--band-ink-secondary); }
.yard { position: relative; margin-top: 8px; padding-bottom: 36px; }
.yard > svg { display: block; width: 80%; height: auto; outline: 1px solid var(--band-line); outline-offset: -1px; border-radius: 14px; }
.alert-card { position: absolute; right: 0; bottom: 0; width: 196px; padding: 14px; border-radius: 18px; background: var(--ankara); color: #ffffff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.alert-count { display: flex; align-items: center; gap: 10px; }
.alert-num { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; font-family: var(--display); font-size: 20px; line-height: 1; }
.alert-num svg { position: absolute; inset: 0; width: 46px; height: 46px; }
.alert-num b { position: relative; font-weight: 400; font-variation-settings: normal; color: #ffffff; }
.alert-lbl { font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }
.alert-btn { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; font-family: var(--display); font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.alert-btn.main { background: #ffffff; color: var(--danger); height: 54px; font-size: 20px; }
.alert-btn.ghost { border: 2px solid rgba(255, 255, 255, .55); color: #ffffff; }
.alert-fine { font-size: 11.5px; line-height: 1.3; text-align: center; color: rgba(255, 255, 255, .9); }
.how-steps { display: flex; flex-direction: column; border-top: 1px solid var(--band-line); }
.how-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--band-line); }
.how-steps .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-family: var(--display); font-size: 22px; line-height: 1; }
.how-steps .row-title { font-size: 20px; }
.how-steps p { color: var(--band-ink-secondary); margin-top: 6px; font-size: 16px; }
.how-steps p b { color: var(--gold); }
.how-band .review { margin-top: 28px; }
@media (min-width: 720px) {
  .how-band { padding: 56px 40px; }
  .how-steps li { grid-template-columns: 52px minmax(0, 1fr); gap: 20px; }
  .how-steps .n { width: 52px; height: 52px; font-size: 24px; }
}
@media (min-width: 1100px) {
  .how-band { padding: 64px 56px; }
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
}
@media (max-width: 559px) { .yard > svg { width: 100%; } .yard { padding-bottom: 150px; } .alert-card { width: 180px; } }

/* Getting started: three cards with art */
.step-cards { gap: 20px; }
.step-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.step-art { height: 150px; background: var(--surface-tint); }
.step-art svg { width: 100%; height: 100%; }
.step-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.step-body p { color: var(--ink-secondary); font-size: 16px; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.needs .disc .ic { font-size: 26px; }

/* FAQ with a band side panel */
.faq-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
.faq-side { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px 110px; border-radius: var(--r-card); background: var(--band); color: var(--band-ink-secondary); }
.faq-side h2 { color: var(--band-ink); margin: 0; }
.faq-side p { color: var(--band-ink-secondary); font-size: 16px; }
.btn-gold-quiet { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); padding: 0 16px; border-radius: var(--r-bar); border: 2px solid rgba(243, 238, 228, .45); color: var(--band-ink); text-decoration: none; font-size: 15px; font-weight: 700; font-variation-settings: 'wght' 700; margin-top: 4px; }
.btn-gold-quiet:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold-quiet .ic { font-size: 20px; }
.faq-shapes { position: absolute; right: 0; bottom: 0; width: 150px; height: 90px; }
.faq-split .faq { max-width: none; }
@media (min-width: 960px) { .faq-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; } .faq-side { padding: 32px; } }

/* Closing panel with shapes */
.next-art { position: relative; overflow: hidden; display: block; min-height: 300px; padding: 32px 24px 200px; }
.next-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 34rem; }
.next-copy .btn-quiet, .next-copy .actions { margin-top: 8px; }
.next-shapes { position: absolute; right: 0; bottom: 0; width: 100%; height: 190px; }
@media (min-width: 720px) {
  .next-art { padding: 56px; }
  .next-shapes { top: 0; bottom: auto; width: 45%; height: 100%; }
}

/* Pricing: sections as cards with art */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; gap: 0; }
.panel-body { padding: 28px 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel-body > h2 { margin-bottom: 4px; }
.panel-body .rows { max-width: none; }
.panel-art { background: var(--surface-tint); display: flex; order: -1; max-height: 260px; }
.panel-art svg { width: 100%; height: 100%; display: block; }
.panel .note { background: var(--surface-tint); }
@media (min-width: 960px) {
  .panel { grid-template-columns: minmax(0, 1fr) 360px; }
  .panel-body { padding: 40px; }
  .panel-art { order: 0; max-height: none; }
  .panel.flip { grid-template-columns: 360px minmax(0, 1fr); }
  .panel.flip .panel-art { order: -1; }
}
.rows .row-price .amount { white-space: nowrap; }
@media (max-width: 559px) { .rows > li { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Pricing: your first month, pro-rata */
.prorata { display: flex; flex-direction: column; gap: 16px; padding: 28px 20px; max-width: none; }
.prorata > .body { max-width: 48rem; }
.prorata > h2 { margin-bottom: 4px; }
.pr-rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0 8px; width: 100%; }
.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.months li { display: flex; flex-direction: column; gap: 8px; padding-right: 16px; min-width: 0; }
.months .bar { display: block; height: 18px; border-radius: 9px; }
.months .bar.gold { background: var(--gold); }
.months .bar.part { background: repeating-linear-gradient(135deg, #17130f 0 6px, #eae2d2 6px 12px); }
.months .bar.ink { background: var(--ink); }
.months .when { font-size: 13px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-secondary); margin-top: 4px; }
.months .price .amount { font-size: 56px; }
@media (min-width: 720px) { .prorata { padding: 40px; } }

/* ---- v3.2: the owner's mobile round on the canvas (23 Sep 2026) ---------------------------------- */
/* Long copy on wide screens, the owner's short copy on phones. */
.for-narrow { display: none; }
@media (max-width: 559px) { .for-wide { display: none; } .for-narrow { display: inline; } }

/* Hero on phones: one tight banner, both actions on one line. */
.hero-art-compact { display: none; }
@media (max-width: 559px) {
  .hero-grid { gap: 20px; }
  .hero-art { display: none; }
  .hero-art-compact { display: block; }
  .hero-art-compact svg { width: 100%; height: auto; }
  .hero .actions { flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
  .hero .btn-action { flex: 1 1 auto; min-height: 60px; padding: 10px 16px; font-size: 22px; gap: 8px; white-space: nowrap; }
  .hero .btn-action .ic { font-size: 24px; }
  .hero .btn-quiet { flex: 0 0 auto; min-height: 60px; padding: 10px 14px; font-size: 15px; white-space: nowrap; }
}

/* How it works on phones: tighter, the Impempe screen under the yard. */
@media (max-width: 559px) {
  .how-band { padding: 28px 18px; border-radius: 22px; }
  .how-grid { gap: 20px; }
  .how-intro { gap: 12px; }
  .how-band .lead { font-size: 17px; }
  .yard { padding-bottom: 0; display: flex; flex-direction: column; }
  .yard > svg { width: 100%; }
  .alert-card { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 200px; margin: -56px 10px 0 0; padding: 12px; gap: 7px; }
  .alert-card .alert-btn.main { height: 48px; font-size: 19px; }
  .alert-card .alert-btn { height: 40px; font-size: 16px; }
  .how-steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  .how-steps .n { width: 36px; height: 36px; font-size: 18px; }
  .how-steps .row-title { font-size: 17px; }
  .how-steps p { font-size: 15px; margin-top: 3px; }
  .how-band .review { margin-top: 18px; }
  /* Before you start: the title beside its icon */
  .needs li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; padding: 16px 18px; }
  .needs li > div { display: contents; }
  .needs li .row-title { grid-column: 2; grid-row: 1; }
  .needs li p, .needs li .review { grid-column: 1 / -1; margin-top: 0; }
}

/* Price cards: the details are a disclosure, open on wide screens; a compact table on phones. */
.more summary { display: none; }
.more > p { color: var(--ink-secondary); font-size: 16px; margin-bottom: 14px; }
@media (max-width: 719px) {
  .prices { gap: 0; margin-top: 24px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .prices > li.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; }
  .prices > li + li { border-top: 1px solid var(--line); }
  .prices .route-top { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
  .prices .route-top .d-3 { font-size: 22px; }
  .prices .price { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 4px; }
  .prices .price .amount { font-size: 44px; }
  .prices .price .unit { padding: 0; font-size: 10.5px; text-align: right; }
  .prices .more, .prices .review { grid-column: 1 / -1; }
  .more summary { display: flex; align-items: center; gap: 6px; min-height: var(--target-min); cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink-secondary); }
  .more summary::-webkit-details-marker { display: none; }
  .more summary .ic { font-size: 20px; transition: transform .15s ease; }
  .more[open] summary .ic { transform: rotate(180deg); }
  .more[open] > p { margin-top: 4px; }
  /* Pro-rata: one compact row per step */
  .prorata { gap: 14px; }
  .months { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 4px 0; border-bottom: 1px solid var(--line); }
  .months li { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
  .months .bar { grid-column: 1; grid-row: 1 / span 3; width: 6px; height: auto; align-self: stretch; border-radius: 3px; }
  .months .when { grid-column: 2; grid-row: 1; margin: 0; font-size: 11.5px; }
  .months .row-title { grid-column: 2; grid-row: 2; font-size: 17px; }
  .months .price { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .months .price .amount { font-size: 34px; line-height: .9; }
  .months .price .unit { padding: 0; font-size: 10.5px; text-align: right; white-space: nowrap; }
  .months .price .unit br { display: none; }
  .months .meta { grid-column: 2 / span 2; grid-row: 3; font-size: 14px; margin-top: 4px; }
}

/* Privacy and terms: the full working draft */
.ph { background: rgba(233, 165, 49, .28); border-radius: 4px; padding: 0 4px; color: var(--ink); font-weight: 600; font-variation-settings: 'wght' 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.glance { margin-top: 40px; padding: 28px 22px; border-radius: var(--r-card); background: var(--band); color: var(--band-ink); }
.glance h2 { color: var(--band-ink); }
.glance ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.glance li { display: flex; flex-direction: column; gap: 12px; }
.glance .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-size: 24px; }
.glance p { color: var(--band-ink-secondary); font-size: 16px; line-height: 1.45; }
.glance p b { color: var(--band-ink); display: block; margin-bottom: 4px; }
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; align-items: start; }
.toc { padding: 20px; border-radius: var(--r-card); background: var(--surface-raised); border: 1px solid var(--line); }
.toc-h { font-size: 12px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.toc-h + ol { margin: 8px 0 20px; }
.toc ol:last-child { margin-bottom: 0; }
.toc li a { display: flex; gap: 10px; min-height: var(--target-min); align-items: center; font-size: 15px; line-height: 1.25; text-decoration: none; color: var(--ink-secondary); }
.toc li a:hover { color: var(--ink); }
.toc li a span { flex: none; width: 22px; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink-muted); font-size: 13px; }
.legal-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.part { margin: 8px 0; }
.part#terms { margin-top: 40px; }
.lsec { padding: 22px 18px; border-radius: var(--r-card); background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.lh { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 400; font-variation-settings: normal; font-size: 24px; line-height: 1; letter-spacing: .5px; text-transform: uppercase; word-spacing: normal; }
.ln { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-tint); font-family: var(--display); font-size: 18px; flex: none; }
.lsec p, .ticks li { color: var(--ink-secondary); font-size: 16px; line-height: 1.55; }
.lsec p b, .ticks li b { color: var(--ink); }
.ticks { display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.ltable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ltable th { text-align: left; padding: 10px 12px; background: var(--surface-tint); font-size: 12px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-secondary); }
.ltable th:first-child { border-radius: 10px 0 0 10px; } .ltable th:last-child { border-radius: 0 10px 10px 0; }
.ltable td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-secondary); }
.ltable td:first-child { font-weight: 700; font-variation-settings: 'wght' 700; color: var(--ink); width: 28%; }
.ltable tr:last-child td { border-bottom: 0; }
.not-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: var(--r-field); background: var(--danger-surface); border: 1px solid var(--danger-border); }
.not-card p { color: var(--ink); }
.company { margin-top: 24px; padding: 24px 20px; border-radius: var(--r-card); background: var(--surface-tint); display: flex; flex-direction: column; gap: 16px; }
.company dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; }
.company dt { font-size: 12px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.company dd { margin-top: 2px; font-size: 15.5px; color: var(--ink); }
@media (max-width: 719px) {
  .ltable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ltable, .ltable tbody, .ltable tr, .ltable td { display: block; width: 100%; }
  .ltable tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ltable tr:last-child { border-bottom: 0; }
  .ltable td { padding: 2px 0; border: 0; }
  .ltable td:first-child { width: auto; }
}
@media (min-width: 720px) {
  .glance { padding: 36px 40px; }
  .glance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .lsec { padding: 28px 32px; }
  .lh { font-size: 26px; }
  .company { padding: 28px 32px; }
  .company dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .glance ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .legal { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; margin-top: 64px; }
  .toc { position: sticky; top: 24px; padding: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .toc li a { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* v3.3 (6 Oct 2026, ported from the canvas pass of 5 Oct): desktop hero art and pattern bar sit on the content column */
@media (min-width: 960px) {
  .hero-art { margin-right: 0; }
  .hero-art svg { overflow: hidden; }
  .strip { width: calc(100% - 2 * var(--gutter)); max-width: var(--content-max); height: auto; aspect-ratio: 1180 / 64; margin: 56px auto 0; border: 0; border-radius: var(--r-card); overflow: hidden; }
  .hero-copy { align-self: center; padding-bottom: 0; }
  .hero .btn-quiet { min-height: var(--action); padding: 10px 30px; border-radius: var(--r-card); font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: .6px; word-spacing: normal; text-transform: uppercase; font-weight: 400; font-variation-settings: normal; border: 2px solid var(--ink); }
  .why-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
}

/* ---- Kleva Kasi (8 Oct 2026, Claude looks, brand decision B10) --------------------------------------------------
   One app, two sides. Khaya is the house with its eye on the page's own ground; Kasi is the brand's house repeated
   with its windows lit, on the ground turned over (night here). The two cards are one drawing, inverted: same sun,
   same arcs, same type. Kasi never takes ankara or the contact orange: a report is not an emergency. */
.side-sign { display: flex; align-items: flex-end; gap: 9px; min-height: 36px; }
.side-sign .mark { width: 36px; height: 36px; flex: none; }
.side-sign .kasi-mark { width: 52px; height: auto; flex: none; margin-bottom: 1px; }
.side-sign .wordmark { font-size: 17px; margin-left: 0; padding-bottom: 2px; }
.sides > .lead { margin-top: -6px; }
.side-cards { gap: 20px; }
.side-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.side-art { aspect-ratio: 380 / 150; max-height: 190px; background: var(--surface-tint); }
.side-art svg { width: 100%; height: 100%; }
.side-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.side-body > p:not(.side-sign) { color: var(--ink-secondary); font-size: 16px; max-width: 34rem; }
.side-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.side-card.kasi { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.side-card.kasi .side-art { background: var(--band); }
.side-card.kasi h3, .side-card.kasi .go { color: var(--band-ink); }
.side-card.kasi .side-body > p:not(.side-sign) { color: var(--band-ink-secondary); }
.side-card.kasi .wordmark { color: var(--cream); }
.side-card.kasi .pill { background: rgba(243, 238, 228, .14); color: var(--band-ink); }

.kasi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.kasi-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kasi-copy .side-sign { margin-bottom: 4px; }
.kasi-need { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-secondary); font-weight: 600; font-variation-settings: 'wght' 600; }
.kasi-picture { position: relative; padding-bottom: 36px; }
.kasi-picture > svg { display: block; width: 84%; height: auto; }
.kasi-report {
  position: absolute; right: 0; bottom: 0; width: 272px; overflow: hidden; border-radius: 18px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(23, 19, 15, .35); color: var(--ink);
}
.kr-top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
.kr-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-tint); }
.kr-tile .ic { font-size: 22px; }
.kr-title { font-size: 15.5px; line-height: 1.25; font-weight: 700; font-variation-settings: 'wght' 700; word-spacing: .1em; }
.kr-place { margin-top: 2px; font-size: 13px; color: var(--ink-muted); }
.kr-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--warning-surface); border: 1px solid var(--warning-border); color: var(--warning); font-size: 12px; font-weight: 700; font-variation-settings: 'wght' 700; }
.kr-chip .ic { font-size: 15px; }
.kr-ask { padding: 12px 14px 14px; background: var(--surface-tint); border-top: 1px solid var(--line); }
.kr-ask > p { font-size: 11px; line-height: 1.2; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-secondary); }
.kr-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kr-buttons > span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; border: 2px solid rgba(23, 19, 15, .5); background: var(--surface-raised); font-size: 14px; font-weight: 700; font-variation-settings: 'wght' 700; white-space: nowrap; }
.kr-buttons .ic { font-size: 18px; }
.kasi-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kasi-points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--line); }
.kasi-points p { font-size: 15.5px; line-height: 1.45; color: var(--ink-secondary); margin-top: 4px; }
.kasi-limits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) {
  .kasi-points, .kasi-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 960px) {
  .kasi-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .kasi-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kasi-points li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 559px) {
  .side-body { padding: 20px; }
  .kasi-picture { padding-bottom: 0; display: flex; flex-direction: column; }
  .kasi-picture > svg { width: 100%; }
  .kasi-report { position: relative; right: auto; bottom: auto; align-self: flex-end; width: min(272px, calc(100% - 20px)); margin: -72px 10px 0 0; }
  .kasi-points li { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; align-items: center; column-gap: 12px; }
  .kasi-points li .disc { width: 44px; height: 44px; }
  .kasi-points li > div { display: contents; }
  .kasi-points li .row-title { grid-column: 2; }
  .kasi-points li p { grid-column: 1 / -1; margin-top: 0; }
}

/* ---- Create account (8 Oct 2026, Claude looks, KK-T044) ---------------------------------------------------------
   The form is a card like the mailing-list form, with the code picture beside it on wide screens. Every stage keeps
   one gold action; waits dim it; the code field reads as six digits; resend is the quiet action under it. */
.signup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.signup-art { display: none; }
.signup-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.signup-card .field:first-of-type { margin-top: 20px; }
.signup-card > .actions.after-msg { margin-top: 18px; }
.form-title { margin-top: 10px; }
.form-lead { margin-top: 8px; }
.step-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.step-bars span { height: 6px; border-radius: 3px; background: var(--surface-tint); }
.step-bars span.on { background: var(--gold); }
.step-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.field .optional { font-weight: 500; font-variation-settings: 'wght' 500; color: var(--ink-muted); }
.field .error .ic { font-size: 20px; }
.field input[autocomplete='one-time-code'] { font-size: 28px; letter-spacing: .32em; font-weight: 700; font-variation-settings: 'wght' 700; }
.signup-card .btn-quiet.resend { width: 100%; margin-top: 12px; }
.signup-card .msg + form .field:first-of-type { margin-top: 16px; }
.signup-card .text-button { padding: 0 2px; min-height: 0; }
.signup-card .body .text-button { display: inline-flex; align-items: center; min-height: var(--target-min); }
.form-shell > .msg.info { margin-top: 22px; }
@media (max-width: 559px) { .signup-card { padding: 20px 18px; } }
@media (min-width: 960px) {
  .signup-grid { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: 64px; }
  .signup-art { display: block; position: relative; margin-top: 8px; padding: 24px; border-radius: 28px; background: var(--surface-tint); }
  .signup-art svg { width: 100%; height: auto; max-width: 440px; margin: 0 auto; }
}

/* ---- Mailing list, redone (8 Oct 2026, Claude looks; the owner: the 7 Oct look "looks like shit") -------------------
   One panel, not a heading beside a stray card: the tint ground carries the picture (news arriving home) and the form,
   whose fields stand on the panel. The email field wears its icon; consent is the brand's checkbox (ink box, cream
   tick); the action is the filled ink button — never gold, the page's one gold action stays in the hero. Privacy
   shows what is kept as three labelled rows and the same panel for withdrawal. */
.mail-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 20px 28px; border-radius: 28px; background: var(--surface-tint); overflow: hidden; }
.mail-art svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.mail-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mail-copy > h2 { margin: 0; }
.mail-copy > .lead { margin: 0 0 4px; max-width: 32rem; }
.mail-panel .mailing-form { background: transparent; border: 0; padding: 0; }
.mail-panel .field { margin-top: 0; }
.mail-panel .field input { border-color: rgba(23, 19, 15, .55); }
.input-icon { position: relative; }
.input-icon > .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 24px; pointer-events: none; }
.input-icon input { padding-left: 52px; }
.mailing-consent { gap: 14px; margin: 18px 0; font-size: 16px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.mailing-consent input {
  -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 2px solid var(--ink);
  border-radius: 7px; background: var(--surface-raised); cursor: pointer;
}
.mailing-consent input:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F3EEE4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.mailing-consent input[aria-invalid='true'] { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 2px; }
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 10px 22px;
  border: 0; border-radius: var(--r-card); background: var(--ink); color: var(--cream); cursor: pointer;
  font-size: 17px; line-height: 1.2; font-weight: 700; font-variation-settings: 'wght' 700; word-spacing: .1em;
}
.btn-ink .ic { font-size: 22px; transition: transform .15s ease; }
.btn-ink:hover { background: #2e2720; }
.btn-ink:hover .ic { transform: translateX(3px); }
.btn-ink[disabled] { opacity: .5; cursor: not-allowed; }
.mail-panel .mailing-form .actions { margin-top: 0; }
.mail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; font-size: 15px; }
.mail-foot a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; font-variation-settings: 'wght' 600; }
.mail-preview { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(23, 19, 15, .07); color: var(--ink-secondary); font-size: 13.5px; line-height: 1.3; }
.mail-preview .ic { font-size: 17px; }
.mail-panel .msg { margin-top: 16px; }
@media (min-width: 900px) {
  .mail-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px 56px 48px 40px; }
  .mail-art { align-self: end; margin-bottom: -48px; }
}
@media (max-width: 899px) {
  .mail-art { margin: 0 -20px; }
  .mail-art svg { max-height: 250px; }
}
/* Privacy: what is kept, as three labelled rows; then withdrawal on the same panel. */
.mail-facts { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface-raised); border: 1px solid var(--line); max-width: 52rem; }
.mail-facts > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px 20px; }
.mail-facts > div + div { border-top: 1px solid var(--line); }
.mail-facts .ic { grid-row: 1 / span 2; font-size: 24px; color: var(--ink-secondary); margin-top: 1px; }
.mail-facts dt { font-weight: 700; font-variation-settings: 'wght' 700; }
.mail-facts dd { color: var(--ink-secondary); font-size: 16px; }
.mail-panel.remove { max-width: 52rem; padding: 28px 24px; }
.mail-panel.remove .mail-copy > h3 { margin: 0 0 4px; }
@media (min-width: 900px) { .mail-panel.remove { grid-template-columns: minmax(0, 1fr); padding: 36px 40px; } }
@media (max-width: 559px) {
  .mail-facts > div { padding: 16px; }
  .mail-facts .ic { grid-row: auto; }
  .mail-facts dd { grid-column: 1 / -1; }
  .mail-panel.remove { padding: 24px 18px; }
}

/* What we do: the Impempe story, animated (loops; still frame for reduced motion) */
@keyframes ka-walker { 0.0% { transform: translate(-430.0px, 0px) scale(1); } 1.596% { transform: translate(-430.0px, 0px) scale(1); } 3.351% { transform: translate(-387.0px, -7px) scale(1); } 5.106% { transform: translate(-344.0px, 0px) scale(1); } 6.862% { transform: translate(-301.0px, -7px) scale(1); } 8.617% { transform: translate(-258.0px, 0px) scale(1); } 10.372% { transform: translate(-215.0px, -7px) scale(1); } 12.128% { transform: translate(-172.0px, 0px) scale(1); } 13.883% { transform: translate(-129.0px, -7px) scale(1); } 15.638% { transform: translate(-86.0px, 0px) scale(1); } 17.394% { transform: translate(-43.0px, -7px) scale(1); } 19.149% { transform: translate(-0.0px, 0px) scale(1); } 100.0% { transform: translate(-0.0px, 0px) scale(1); } }
.ka .ka-walker { transform-box: view-box; transform-origin: 0 0;  animation: ka-walker 18.8s ease-in-out infinite both; }
@keyframes ka-armsdown { 0.0% { opacity: 1; } 19.681% { opacity: 1; } 20.213% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-armsdown { transform-box: view-box; transform-origin: 0 0;  animation: ka-armsdown 18.8s ease-in-out infinite both; }
@keyframes ka-armsup { 0.0% { opacity: 0; } 19.681% { opacity: 0; } 20.213% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-armsup { transform-box: view-box; transform-origin: 0 0;  animation: ka-armsup 18.8s ease-in-out infinite both; }
@keyframes ka-spot { 0.0% { opacity: 0; } 20.213% { opacity: 0; } 20.745% { opacity: 1; } 21.543% { opacity: 0.15; } 22.34% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-spot { transform-box: view-box; transform-origin: 0 0;  animation: ka-spot 18.8s ease-in-out infinite both; }
@keyframes ka-cam { 0.0% { transform: translate(0px, 0px) scale(1);opacity: 1; } 27.66% { transform: translate(0px, 0px) scale(1);opacity: 1; } 34.043% { transform: translate(234.2px, 60.81px) scale(0.26813);opacity: 1; } 34.574% { transform: translate(234.2px, 60.81px) scale(0.26813);opacity: 0; } 100.0% { transform: translate(234.2px, 60.81px) scale(0.26813);opacity: 0; } }
.ka .ka-cam { transform-box: view-box; transform-origin: 0 0;  animation: ka-cam 18.8s ease-in-out infinite both; }
@keyframes ka-camclip { 0.0% { -webkit-clip-path: inset(0px 0px 0px 0px round 28px); clip-path: inset(0px 0px 0px 0px round 28px); } 27.66% { -webkit-clip-path: inset(0px 0px 0px 0px round 28px); clip-path: inset(0px 0px 0px 0px round 28px); } 34.043% { -webkit-clip-path: inset(45px 0px 45px 0px round 0px); clip-path: inset(45px 0px 45px 0px round 0px); } 100.0% { -webkit-clip-path: inset(45px 0px 45px 0px round 0px); clip-path: inset(45px 0px 45px 0px round 0px); } }
.ka .ka-camclip { transform-box: view-box; transform-origin: 0 0;  animation: ka-camclip 18.8s ease-in-out infinite both; }
@keyframes ka-hud { 0.0% { opacity: 1; } 27.66% { opacity: 1; } 30.319% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-hud { transform-box: view-box; transform-origin: 0 0;  animation: ka-hud 18.8s ease-in-out infinite both; }
@keyframes ka-phonewrap { 0.0% { opacity: 1;transform: translate(0px, 0px) scale(1); } 48.404% { opacity: 1;transform: translate(0px, 0px) scale(1); } 53.723% { opacity: 0;transform: translate(294.4px, 209.76px) scale(0.08); } 100.0% { opacity: 0;transform: translate(294.4px, 209.76px) scale(0.08); } }
.ka .ka-phonewrap { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-phonewrap 18.8s ease-in-out infinite both; }
@keyframes ka-phonebody { 0.0% { opacity: 0; } 27.66% { opacity: 0; } 31.915% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-phonebody { transform-box: view-box; transform-origin: 0 0;  animation: ka-phonebody 18.8s ease-in-out infinite both; }
@keyframes ka-thumb { 0.0% { transform: translate(170px, 260px) scale(1);opacity: 1; } 35.106% { transform: translate(170px, 260px) scale(1);opacity: 1; } 38.83% { transform: translate(0px, 0px) scale(1);opacity: 1; } 40.426% { transform: translate(0px, 0px) scale(1);opacity: 1; } 43.617% { transform: translate(170px, 260px) scale(1);opacity: 1; } 43.883% { transform: translate(170px, 260px) scale(1);opacity: 0; } 100.0% { transform: translate(170px, 260px) scale(1);opacity: 0; } }
.ka .ka-thumb { transform-box: view-box; transform-origin: 0 0;  animation: ka-thumb 18.8s ease-in-out infinite both; }
@keyframes ka-rip1 { 0.0% { opacity: 0;transform: scale(.2); } 39.096% { opacity: 0;transform: scale(.2); } 39.362% { opacity: 0.9;transform: scale(.3); } 41.223% { opacity: 0;transform: scale(1.4); } 100.0% { opacity: 0;transform: scale(1.4); } }
.ka .ka-rip1 { transform-box: fill-box; transform-origin: center;  animation: ka-rip1 18.8s ease-in-out infinite both; }
@keyframes ka-press { 0.0% { transform: scale(1); } 39.096% { transform: scale(1); } 39.628% { transform: scale(.96); } 40.691% { transform: scale(1); } 100.0% { transform: scale(1); } }
.ka .ka-press { transform-box: fill-box; transform-origin: center;  animation: ka-press 18.8s ease-in-out infinite both; }
@keyframes ka-sent { 0.0% { opacity: 0; } 39.894% { opacity: 0; } 40.957% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-sent { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-sent 18.8s ease-in-out infinite both; }
@keyframes ka-map { 0.0% { opacity: 0;transform: translate(-512.0px, -364.8px) scale(2.6); } 48.404% { opacity: 0;transform: translate(-512.0px, -364.8px) scale(2.6); } 52.66% { opacity: 1; } 54.787% { opacity: 1;transform: translate(0px, 0px) scale(1); } 100.0% { opacity: 1;transform: translate(0px, 0px) scale(1); } }
.ka .ka-map { transform-box: view-box; transform-origin: 0 0;  animation: ka-map 18.8s ease-in-out infinite both; }
@keyframes ka-ring0 { 0.0% { opacity: 0;transform: scale(.08); } 54.787% { opacity: 0;transform: scale(.08); } 55.053% { opacity: 0.85;transform: scale(.1); } 63.83% { opacity: 0;transform: scale(1); } 100.0% { opacity: 0;transform: scale(1); } }
.ka .ka-ring0 { transform-box: fill-box; transform-origin: center; opacity: .3; animation: ka-ring0 18.8s ease-in-out infinite both; }
@keyframes ka-ring1 { 0.0% { opacity: 0;transform: scale(.08); } 57.979% { opacity: 0;transform: scale(.08); } 58.245% { opacity: 0.85;transform: scale(.1); } 67.021% { opacity: 0;transform: scale(1); } 100.0% { opacity: 0;transform: scale(1); } }
.ka .ka-ring1 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-ring1 18.8s ease-in-out infinite both; }
@keyframes ka-ring2 { 0.0% { opacity: 0;transform: scale(.08); } 61.17% { opacity: 0;transform: scale(.08); } 61.436% { opacity: 0.85;transform: scale(.1); } 70.213% { opacity: 0;transform: scale(1); } 100.0% { opacity: 0;transform: scale(1); } }
.ka .ka-ring2 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-ring2 18.8s ease-in-out infinite both; }
@keyframes ka-ring3 { 0.0% { opacity: 0;transform: scale(.08); } 64.362% { opacity: 0;transform: scale(.08); } 64.628% { opacity: 0.85;transform: scale(.1); } 73.404% { opacity: 0;transform: scale(1); } 100.0% { opacity: 0;transform: scale(1); } }
.ka .ka-ring3 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-ring3 18.8s ease-in-out infinite both; }
@keyframes ka-ring4 { 0.0% { opacity: 0;transform: scale(.08); } 67.553% { opacity: 0;transform: scale(.08); } 67.819% { opacity: 0.85;transform: scale(.1); } 76.596% { opacity: 0;transform: scale(1); } 100.0% { opacity: 0;transform: scale(1); } }
.ka .ka-ring4 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-ring4 18.8s ease-in-out infinite both; }
@keyframes ka-line0 { 0.0% { stroke-dashoffset: 194.1; } 56.915% { stroke-dashoffset: 194.1; } 61.17% { stroke-dashoffset: 0; } 100.0% { stroke-dashoffset: 0; } }
.ka .ka-line0 { transform-box: view-box; transform-origin: 0 0;  animation: ka-line0 18.8s ease-in-out infinite both; }
@keyframes ka-lit0 { 0.0% { opacity: 0; } 60.904% { opacity: 0; } 61.702% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-lit0 { transform-box: view-box; transform-origin: 0 0;  animation: ka-lit0 18.8s ease-in-out infinite both; }
@keyframes ka-glow0 { 0.0% { opacity: 0;transform: scale(1); } 61.436% { opacity: 0;transform: scale(1); } 61.702% { opacity: 0.9;transform: scale(1); } 67.021% { opacity: 0;transform: scale(1.8); } 100.0% { opacity: 0;transform: scale(1.8); } }
.ka .ka-glow0 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-glow0 18.8s ease-in-out infinite both; }
@keyframes ka-line1 { 0.0% { stroke-dashoffset: 187.8; } 58.245% { stroke-dashoffset: 187.8; } 62.5% { stroke-dashoffset: 0; } 100.0% { stroke-dashoffset: 0; } }
.ka .ka-line1 { transform-box: view-box; transform-origin: 0 0;  animation: ka-line1 18.8s ease-in-out infinite both; }
@keyframes ka-lit1 { 0.0% { opacity: 0; } 62.234% { opacity: 0; } 63.032% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-lit1 { transform-box: view-box; transform-origin: 0 0;  animation: ka-lit1 18.8s ease-in-out infinite both; }
@keyframes ka-glow1 { 0.0% { opacity: 0;transform: scale(1); } 62.766% { opacity: 0;transform: scale(1); } 63.032% { opacity: 0.9;transform: scale(1); } 68.351% { opacity: 0;transform: scale(1.8); } 100.0% { opacity: 0;transform: scale(1.8); } }
.ka .ka-glow1 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-glow1 18.8s ease-in-out infinite both; }
@keyframes ka-line2 { 0.0% { stroke-dashoffset: 125.9; } 59.574% { stroke-dashoffset: 125.9; } 63.83% { stroke-dashoffset: 0; } 100.0% { stroke-dashoffset: 0; } }
.ka .ka-line2 { transform-box: view-box; transform-origin: 0 0;  animation: ka-line2 18.8s ease-in-out infinite both; }
@keyframes ka-lit2 { 0.0% { opacity: 0; } 63.564% { opacity: 0; } 64.362% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-lit2 { transform-box: view-box; transform-origin: 0 0;  animation: ka-lit2 18.8s ease-in-out infinite both; }
@keyframes ka-glow2 { 0.0% { opacity: 0;transform: scale(1); } 64.096% { opacity: 0;transform: scale(1); } 64.362% { opacity: 0.9;transform: scale(1); } 69.681% { opacity: 0;transform: scale(1.8); } 100.0% { opacity: 0;transform: scale(1.8); } }
.ka .ka-glow2 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-glow2 18.8s ease-in-out infinite both; }
@keyframes ka-line3 { 0.0% { stroke-dashoffset: 123.6; } 60.904% { stroke-dashoffset: 123.6; } 65.16% { stroke-dashoffset: 0; } 100.0% { stroke-dashoffset: 0; } }
.ka .ka-line3 { transform-box: view-box; transform-origin: 0 0;  animation: ka-line3 18.8s ease-in-out infinite both; }
@keyframes ka-lit3 { 0.0% { opacity: 0; } 64.894% { opacity: 0; } 65.691% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-lit3 { transform-box: view-box; transform-origin: 0 0;  animation: ka-lit3 18.8s ease-in-out infinite both; }
@keyframes ka-glow3 { 0.0% { opacity: 0;transform: scale(1); } 65.426% { opacity: 0;transform: scale(1); } 65.691% { opacity: 0.9;transform: scale(1); } 71.011% { opacity: 0;transform: scale(1.8); } 100.0% { opacity: 0;transform: scale(1.8); } }
.ka .ka-glow3 { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ka-glow3 18.8s ease-in-out infinite both; }
@keyframes ka-dim { 0.0% { opacity: 0; } 70.745% { opacity: 0; } 73.936% { opacity: 0.62; } 100.0% { opacity: 0.62; } }
.ka .ka-dim { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-dim 18.8s ease-in-out infinite both; }
@keyframes ka-nphone { 0.0% { opacity: 1;transform: translate(0px, 520px) scale(1); } 70.745% { opacity: 1;transform: translate(0px, 520px) scale(1); } 75.0% { opacity: 1;transform: translate(0px, 0px) scale(1); } 100.0% { opacity: 1;transform: translate(0px, 0px) scale(1); } }
.ka .ka-nphone { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-nphone 18.8s ease-in-out infinite both; }
@keyframes ka-nthumb { 0.0% { transform: translate(160px, 260px) scale(1); } 80.319% { transform: translate(160px, 260px) scale(1); } 83.511% { transform: translate(0px, 0px) scale(1); } 85.106% { transform: translate(0px, 0px) scale(1); } 88.298% { transform: translate(160px, 260px) scale(1); } 100.0% { transform: translate(160px, 260px) scale(1); } }
.ka .ka-nthumb { transform-box: view-box; transform-origin: 0 0;  animation: ka-nthumb 18.8s ease-in-out infinite both; }
@keyframes ka-rip2 { 0.0% { opacity: 0;transform: scale(.2); } 83.777% { opacity: 0;transform: scale(.2); } 84.043% { opacity: 0.9;transform: scale(.3); } 87.766% { opacity: 0;transform: scale(1.7); } 100.0% { opacity: 0;transform: scale(1.7); } }
.ka .ka-rip2 { transform-box: fill-box; transform-origin: center;  animation: ka-rip2 18.8s ease-in-out infinite both; }
@keyframes ka-btna { 0.0% { opacity: 1; } 84.309% { opacity: 1; } 84.84% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-btna { transform-box: view-box; transform-origin: 0 0;  animation: ka-btna 18.8s ease-in-out infinite both; }
@keyframes ka-btnb { 0.0% { opacity: 0; } 84.309% { opacity: 0; } 84.84% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-btnb { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-btnb 18.8s ease-in-out infinite both; }
@keyframes ka-c1 { 0.0% { opacity: 1; } 26.064% { opacity: 1; } 28.191% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-c1 { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-c1 18.8s ease-in-out infinite both; }
@keyframes ka-c2 { 0.0% { opacity: 0; } 28.191% { opacity: 0; } 30.319% { opacity: 1; } 47.872% { opacity: 1; } 50.0% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-c2 { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-c2 18.8s ease-in-out infinite both; }
@keyframes ka-c3 { 0.0% { opacity: 0; } 51.596% { opacity: 0; } 53.723% { opacity: 1; } 70.213% { opacity: 1; } 72.34% { opacity: 0; } 100.0% { opacity: 0; } }
.ka .ka-c3 { transform-box: view-box; transform-origin: 0 0;  animation: ka-c3 18.8s ease-in-out infinite both; }
@keyframes ka-c4 { 0.0% { opacity: 0; } 72.872% { opacity: 0; } 75.0% { opacity: 1; } 100.0% { opacity: 1; } }
.ka .ka-c4 { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-c4 18.8s ease-in-out infinite both; }
@keyframes ka-curtain { 0.0% { opacity: 1; } 2.66% { opacity: 0; } 96.277% { opacity: 0; } 100.0% { opacity: 1; } }
.ka .ka-curtain { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: ka-curtain 18.8s ease-in-out infinite both; }
.ka text { text-rendering: geometricPrecision; }
.ka .ka-app text { word-spacing: normal; }
@media (prefers-reduced-motion: reduce) { .ka, .ka * { animation: none !important; } }