/* ============================================================
   Клякса — landing styles
   Palette: "чернила на тёплой бумаге" (ink on warm paper)
   ============================================================ */

:root {
  --paper: #FAF3E6;
  --paper-2: #fbfaf7;
  --card: #F0E5CF;
  --ink: #26221B;
  --ink-deep: #211D17;
  --muted: #6B6152;
  --accent: #E4572E;   /* Сурик */
  --pine: #2E6E4E;     /* Хвоя  */
  --amber: #F2B93B;    /* Янтарь */
  --line: #e2d4b6;
  --line-2: #e5d8bb;

  /* Font stacks. The self-hosted faces (css/fonts.css) cover latin,
     latin-ext and cyrillic only; zh-CN overrides these below. */
  --font-body: 'Golos Text', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Simplified Chinese: our fonts have no Han glyphs and loading a CJK web
   font (several MB) is not worth it, so name the system CJK faces
   explicitly — macOS/iOS (PingFang SC, Hiragino Sans GB), Windows
   (Microsoft YaHei), Linux/Android (Noto Sans CJK SC / Source Han Sans SC,
   WenQuanYi). Latin text keeps our own faces (they come first). The
   handwritten Caveat accents fall back to a Kai (brush) face where one
   exists, else to the same sans. */
:root:lang(zh) {
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei";
  --font-body: 'Golos Text', var(--font-cjk), system-ui, sans-serif;
  --font-hand: 'Caveat', "Kaiti SC", "STKaiti", "KaiTi", var(--font-cjk), cursive;
  --font-mono: 'JetBrains Mono', var(--font-cjk), monospace;
}
/* Han characters have no italic form; synthetic oblique only smears them. */
:lang(zh) .caption-note,
:lang(zh) .modal-note { font-style: normal; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

a {
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(46, 110, 78, .35);
}
a:hover {
  color: var(--accent);
  border-bottom-color: rgba(228, 87, 46, .5);
}

::selection { background: #F2B93B66; }

img { max-width: 100%; }

/* ---------- keyframes ---------- */
@keyframes klx-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes klx-clip  { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes klx-front { 0%{left:-4%;opacity:0} 7%{opacity:1} 93%{opacity:1} 100%{left:100%;opacity:0} }
@keyframes klx-float  { 0%,100%{transform:translate(0,0) rotate(-8deg)} 50%{transform:translate(3px,-5px) rotate(-4deg)} }
@keyframes klx-float2 { 0%,100%{transform:translate(0,0) rotate(-8deg)} 50%{transform:translate(-4px,4px) rotate(-11deg)} }

/* ---------- layout shell ---------- */
.page {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  min-height: 100vh;
}
.paper-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(38,34,27,0.09) 1.3px, transparent 1.3px);
  background-size: 30px 30px;
}
.blot-hero {
  position: absolute;
  top: -90px;
  right: -70px;
  opacity: .05;
  z-index: 0;
  pointer-events: none;
  color: var(--ink);
}
.container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 40px);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 6px;
  flex-wrap: wrap;
}
/* Brand mark — mirrors the app header (blot + [KLYAKSA] in Share Tech Mono,
   accent brackets), scaled up for the landing. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  color: #1a1816;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 30px;
  letter-spacing: .04em;
  line-height: 1;
}
.logo:hover { color: #1a1816; }
.logo-blot { width: 40px; height: 40px; display: block; }
.logo-bracket { color: #ff7a00; }
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 600;
  font-size: 15px;
}
.nav-cta {
  border: none;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 14px 220px 16px 220px / 220px 15px 220px 16px;
}
.nav-cta:hover { color: var(--paper); }
.nav a { white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 8.5px 16px;
  border-radius: 14px 220px 16px 220px / 220px 15px 220px 16px;
}
.nav-login:hover { color: var(--accent); border-color: var(--accent); }

/* Language switcher: EN · RU · 中文 — plain links to the same page in
   another language (server-rendered, works without JS). */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.lang-switch a {
  color: var(--muted);
  border: none;
  padding: 4px 6px;
  border-radius: 8px;
}
.lang-switch a + a::before {
  content: "·";
  color: var(--line);
  margin-inline-end: 8px;
  margin-inline-start: -2px;
}
.lang-switch a:hover { color: var(--accent); }
.lang-switch a[aria-current="true"] { color: var(--ink); }
@media (max-width: 640px) {
  .logo { font-size: 24px; gap: 10px; }
  .logo-blot { width: 32px; height: 32px; }
  .nav { gap: 8px 12px; font-size: 14px; flex-wrap: wrap; }
  .nav-actions { gap: 8px; }
  .nav-login { padding: 6.5px 12px; }
  .nav-cta { padding: 8px 12px; }
}

/* ---------- stage ---------- */
.stage {
  padding: clamp(10px, 2vh, 26px) 0 10px;
  text-align: center;
}
.headline {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: .98;
  letter-spacing: .005em;
  margin: 0 auto;
  max-width: 15ch;
  text-wrap: balance;
}
/* Han glyphs are a full em wide (15ch of Caveat fits ~7 of them) and the
   fallback face is much heavier than Caveat: smaller size, looser leading,
   width in em. keep-all lets the line break only at the comma and the
   spaces around "AI", never inside a word like 智能体. Body text keeps the
   normal CJK rule (a break between any two characters is correct there). */
:lang(zh) .headline {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.25;
  max-width: 10em;
}
:lang(zh) .headline,
:lang(zh) .cta-title { word-break: keep-all; }
.marker {
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent) 25%, transparent) 60%, color-mix(in srgb, var(--accent) 25%, transparent) 94%, transparent 94%);
  padding: 0 .08em;
  border-radius: 2px;
}
.subhead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
  margin: 14px auto 0;
  text-wrap: pretty;
}

/* prompt bar */
.prompt-row {
  max-width: 860px;
  margin: 26px auto 0;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.prompt-bar {
  flex: 1 1 460px;
  min-width: 280px;
  background: var(--ink-deep);
  border-radius: 16px 220px 18px 220px / 220px 16px 220px 18px;
  padding: 15px 20px;
  box-shadow: 0 10px 28px rgba(38,34,27,.16);
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-height: 3.1em;
}
.prompt-caret {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--amber);
  flex: none;
}
.prompt-typed {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--paper);
  line-height: 1.45;
}
.prompt-cursor {
  display: inline-block;
  width: .55ch;
  height: 1.05em;
  background: var(--amber);
  transform: translateY(.14em);
  margin-left: 1px;
  animation: klx-blink 1.05s steps(1) infinite;
  flex: none;
}
.prompt-note {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--accent);
  transform: rotate(-2deg);
  white-space: nowrap;
}

/* canvas */
.canvas-wrap {
  position: relative;
  max-width: 960px;
  margin: 22px auto 0;
}
.rec-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  padding: 5px 14px;
  border-radius: 10px 200px 12px 200px / 200px 11px 200px 12px;
  box-shadow: 0 4px 10px rgba(38,34,27,.18);
  white-space: nowrap;
}
.canvas {
  position: relative;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-radius: 20px 240px 22px 240px / 240px 20px 240px 22px;
  box-shadow: 0 18px 44px rgba(38,34,27,.16);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.canvas-clip {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
}
.canvas-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.canvas-clip.draw { animation: klx-clip 2.9s cubic-bezier(.5,.05,.4,1) forwards; }
.canvas-clip.instant { clip-path: inset(0 0 0 0); }

.frontier {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.frontier.draw { animation: klx-front 2.9s cubic-bezier(.5,.05,.4,1) forwards; }
.frontier-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(38,34,27,0) 0%, rgba(38,34,27,.14) 60%, rgba(38,34,27,.03) 100%);
}
.pen {
  position: absolute;
  top: 12%;
  left: -6px;
  transform: rotate(10deg);
  filter: drop-shadow(0 1px 1px rgba(38,34,27,.25));
}

.cursor {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.cursor.show { opacity: 1; }
.cursor-a { top: 16%; left: 12%; transition-delay: .5s; }
.cursor-b { bottom: 20%; right: 14%; transition-delay: .7s; }
.cursor-float  { animation: klx-float 4.2s ease-in-out infinite; display: inline-block; }
.cursor-float2 { animation: klx-float2 5s ease-in-out infinite; display: inline-block; }
.cursor svg { filter: drop-shadow(0 1px 2px rgba(38,34,27,.3)); }
.cursor-tag {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  transform: translate(-4px, 4px);
}
.tag-marina { background: var(--accent); }
.tag-agent  { background: var(--pine); }

.canvas-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 4px 0;
}
.caption-note { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; }
.caption-hand { font-family: var(--font-hand); font-size: 20px; color: var(--pine); }

/* ---------- section headings ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-hand);
  font-size: clamp(26px, 3vw, 38px);
  margin: 0;
  transform: rotate(-.6deg);
}
.section-sub { color: var(--muted); font-size: 14px; }
.section-sub b { color: var(--ink); }

/* ---------- rail ---------- */
.rail-section { margin: 30px 0 6px; }
.rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 8px 2px 18px;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { height: 9px; }
.rail::-webkit-scrollbar-thumb { background: #d8c9a8; border-radius: 9px; }
.rail::-webkit-scrollbar-track { background: transparent; }

.cluster {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cluster-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
  text-transform: uppercase;
  background: var(--amber);
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 8px 180px 9px 180px / 180px 8px 180px 9px;
}
.cluster-items { display: flex; gap: 16px; }

/* A card is a link to the full-size image (works without JS); app.js turns
   a plain click into the spotlight modal. It used to be a <button>, and the
   rules below keep it rendering exactly as one: color undoes the link
   colour, and the centred flex column reproduces a button's vertical
   centring of its content when the row stretches a card taller than it. */
.case-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  width: 218px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  color: var(--ink);
  background: var(--card);
  text-align: left;
  scroll-snap-align: start;
  border: 2px solid var(--line);
  border-radius: 14px 200px 16px 200px / 200px 15px 200px 16px;
  box-shadow: 0 4px 12px rgba(38,34,27,.08);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
/* Slight tilt, repeating every three cards in a cluster: -1.4° / 0 / 1.4°. */
.cluster-items > .case-card:nth-child(3n+1) { transform: rotate(-1.4deg); }
.cluster-items > .case-card:nth-child(3n+2) { transform: rotate(0deg); }
.cluster-items > .case-card:nth-child(3n) { transform: rotate(1.4deg); }
/* border-color: the generic a:hover would recolour the bottom border. */
.case-card:hover { color: var(--ink); border-color: var(--line); box-shadow: 0 10px 22px rgba(38,34,27,.16); }
.case-card.active {
  border: 3px solid var(--accent);
  box-shadow: 0 10px 24px rgba(228,87,46,.22);
}
.case-thumb {
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--line-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}
.case-prompt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
  min-height: 4.2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-prompt .car { color: var(--accent); }

/* ---------- CTA ---------- */
.cta {
  margin: 26px 0 30px;
  background: var(--ink-deep);
  color: var(--paper);
  border-radius: 26px 240px 28px 240px / 240px 26px 240px 28px;
  padding: clamp(28px, 4.5vw, 52px);
  position: relative;
  overflow: hidden;
}
.blot-cta { position: absolute; bottom: -90px; right: -50px; opacity: .08; color: var(--amber); }
.cta-inner { position: relative; z-index: 1; }
.cta-hand {
  font-family: var(--font-hand);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--amber);
  margin: 0 0 4px;
  transform: rotate(-1deg);
}
.cta-title {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.08;
  max-width: 20ch;
}
/* Badge "Klyaksa is free*" (klx-648.4) and the button form one column
   (klx-648.11): both stretch to the wider of the two, share one corner
   shape (radii small enough never to be scaled down, so the slant is the
   same at either height) and one text inset, so their left and right
   edges read as a single vertical with the title and the links. */
.cta-free,
.cta-button {
  grid-column: 1;
  justify-self: stretch;
  padding-inline: 22px;
  text-align: start;
  border-radius: 6px 14px 8px 12px / 12px 6px 14px 8px;
}
.cta-free {
  margin: 0 0 2px;
  padding-block: 5px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--amber);
}
.cta-button {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  padding-block: 16px;
  background: var(--pine);
  color: var(--paper);
  border: none;
  white-space: nowrap;
  min-inline-size: 12em;
}
.cta-button:hover { color: var(--paper); background: #276042; }
/* Under the title, three tiers by weight (klx-648.11):
   1. the action — badge over the button, the caption beside the button,
      centred on it (under it on phones);
   2. secondary links — one row right below the action;
   3. fine print — consent + the "free*" footnote, set apart by a rule,
      smaller and narrower.
   Text colors on --ink-deep (#211D17), WCAG ratio checked by hand:
   #d9d0bf 10.96:1, #b3aa98 7.28:1 (6.21:1 over the amber blot). */
.cta-action {
  display: grid;
  grid-template-columns: max-content minmax(0, 34ch);
  justify-content: start;
  align-items: center;
  gap: 10px 24px;
}
.cta-note {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #d9d0bf;
  text-wrap: pretty;
}
.cta-links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 15px;
}
.cta-links a { color: var(--amber); border-bottom-color: rgba(242,185,59,.4); }
.cta-links a:hover { color: var(--paper); border-bottom-color: rgba(250,243,230,.5); }
.cta-fine {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(250, 243, 230, .16);
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  color: #b3aa98;
}
.cta-fine p { margin: 0; text-wrap: pretty; }
.cta-fine p + p { margin-top: 8px; }
.cta-consent a { color: #d9d0bf; border-bottom-color: rgba(217,208,191,.4); }
.cta-consent a:hover { color: var(--amber); border-bottom-color: rgba(242,185,59,.5); }
/* Hanging amber asterisk: echoes the badge and keeps wrapped lines flush. */
.cta-footnote { padding-inline-start: 1em; text-indent: -1em; }
.cta-footnote sup {
  display: inline-block;
  width: 1em;
  text-indent: 0;
  vertical-align: baseline;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
}
:lang(zh) .cta-consent a { white-space: nowrap; } /* never split 隐私政策 */
@media (max-width: 640px) {
  /* Caption under the button at full width; contain keeps it from
     widening the button column. */
  .cta-action { grid-template-columns: max-content 1fr; gap: 10px 0; }
  .cta-note { grid-column: 1 / -1; contain: inline-size; margin-top: 4px; }
  .cta-fine { margin-top: 26px; }
}

/* ---------- how it works ---------- */
.how { margin: 8px 0 26px; }
.how .section-head { margin-bottom: 18px; }
.how-steps {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.how-step {
  flex: 1 1 240px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
}
.how-num { font-family: var(--font-hand); font-size: 48px; line-height: .9; }
.num-a { color: var(--accent); }
.num-b { color: var(--pine); }
.num-c { color: var(--amber); }
.how-step h3 { margin: 4px 0 6px; font-size: 18px; font-weight: 700; }
.how-step p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
/* Link to the "Connect an agent" page under step 1 */
.how-link { align-self: flex-start; margin: -4px 0 12px; font-size: 14px; font-weight: 600; }
.how-btn {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  background: var(--pine);
  color: var(--paper);
  border: none;
  border-bottom: none;
  padding: 11px 18px;
  border-radius: 12px 200px 14px 200px / 200px 13px 200px 14px;
}
.how-btn:hover { color: var(--paper); }
.how-prompt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--ink-deep);
  color: var(--paper);
  padding: 9px 12px;
  border-radius: 10px;
  margin-top: auto;
}
.how-prompt span { color: var(--amber); }
.how-avatars { display: flex; align-items: center; margin-top: auto; }
.dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); }
.dot-a { background: var(--accent); }
.dot-b { background: var(--pine); margin-left: -8px; }
.dot-c { background: var(--amber); margin-left: -8px; }
.how-avatars-label { margin-left: 10px; font-family: var(--font-hand); font-size: 18px; color: var(--muted); }

/* compat row */
.compat {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px dashed #d8c9a8;
}
.compat-lead {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--muted);
  margin-right: 6px;
  transform: rotate(-1deg);
}
.agent-chip {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  padding: 2px 3px 7px;
  color: var(--ink);
}
/* Tilt and stroke colour cycle every three chips: accent / pine / amber. */
.agent-chip:nth-child(3n+1) { transform: rotate(-1.6deg); }
.agent-chip:nth-child(3n) { transform: rotate(1.6deg); }
.agent-chip:nth-child(3n+1) .agent-stroke { color: var(--accent); }
.agent-chip:nth-child(3n+2) .agent-stroke { color: var(--pine); }
.agent-chip:nth-child(3n) .agent-stroke { color: var(--amber); }
.agent-stroke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  display: block;
}
.compat-tail {
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--accent);
  transform: rotate(-1.5deg);
  margin-left: 2px;
}

/* ---------- feature chips (hero → features) ---------- */
.feature-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px auto 0;
}
.feature-chips a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 5px 13px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1.5px solid var(--line);
  border-radius: 12px 200px 14px 200px / 200px 13px 200px 14px;
}
.feature-chips a:hover { color: var(--accent); border-color: rgba(228, 87, 46, .5); }

/* ---------- features ---------- */
.features { margin: 8px 0 30px; padding-top: 22px; border-top: 2px dashed #d8c9a8; }
.features .section-head { margin-bottom: 18px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "live   present  projects"
    "share  share    teams"
    "share  share    versions";
  gap: 18px;
}
.feature-live     { grid-area: live; }
.feature-present  { grid-area: present; }
.feature-projects { grid-area: projects; }
.feature-teams    { grid-area: teams; }
.feature-share    { grid-area: share; }
.feature-versions { grid-area: versions; }
.feature {
  background: color-mix(in srgb, var(--card) 55%, var(--paper));
  border: 1.5px solid var(--line-2);
  border-radius: 18px 26px 16px 24px / 24px 16px 26px 18px;
  padding: 20px 22px;
  scroll-margin-top: 20px;
}
.feature-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-accent { color: var(--accent); }
.icon-pine   { color: var(--pine); }
.icon-amber  { color: #c98f12; }
.feature h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 700; }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.feature-share { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }
.feature-share p { color: #c9c0af; }
.feature-share .icon-pine { color: #7fc99f; }
.feature-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  columns: 2 220px;
  column-gap: 26px;
  font-size: 14.5px;
  line-height: 1.4;
}
.feature-list li {
  break-inside: avoid;
  padding: 0 0 10px 22px;
  position: relative;
}
.feature-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--amber);
  font-weight: 700;
}
.features-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 26px;
}
.features-cta-hand {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--muted);
  transform: rotate(-1deg);
}
.features-cta .how-btn { margin-top: 0; }

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "live      present"
      "projects  teams"
      "share     share"
      "versions  versions";
  }
}
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr; grid-template-areas: none; }
  .features-grid .feature { grid-area: auto; }
}

/* ---------- footer ---------- */
.footer {
  padding: 18px 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 2px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-mark { height: 24px; width: 24px; }
.footer-brand span { font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }

/* ---------- modal spotlight ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(38,34,27,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 240px 22px 240px / 240px 20px 240px 22px;
  box-shadow: 0 24px 60px rgba(38,34,27,.35);
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  padding: clamp(16px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.modal-prompt {
  background: var(--ink-deep);
  border-radius: 14px 200px 15px 200px / 200px 14px 200px 15px;
  padding: 12px 44px 12px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper);
}
.modal-prompt > span:first-child { color: var(--amber); }
.modal-canvas {
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.modal-clip { position: relative; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); }
.modal-clip.draw { animation: klx-clip 2.2s cubic-bezier(.5,.05,.4,1) forwards; }
.modal-clip.instant { clip-path: inset(0 0 0 0); }
.modal-clip img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 64vh;
  object-fit: contain;
  padding: 14px;
}
.modal-note { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
/* paging: arrows sit on the sides of the canvas, the counter in the footer */
.modal-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.modal-stage > .modal-canvas { flex: 1; }
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(38,34,27,.18);
}
.modal-nav[hidden] { display: none; }
.modal-nav:hover { background: var(--amber); }
.modal-nav:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.modal-prev { inset-inline-start: -14px; }
.modal-next { inset-inline-end: -14px; }
.modal-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.modal-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .modal-nav { width: 38px; height: 38px; font-size: 17px; }
  .modal-prev { inset-inline-start: -8px; }
  .modal-next { inset-inline-end: -8px; }
}

/* ---------- update banner (SPA versioning) ---------- */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 14px 200px 16px 200px / 200px 15px 200px 16px;
  box-shadow: 0 12px 32px rgba(38,34,27,.3);
  font-size: 14px;
  max-width: calc(100vw - 32px);
  flex-wrap: wrap;
}
.update-banner[hidden] { display: none; }
.update-banner button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 10px 180px 12px 180px / 180px 11px 180px 12px;
  background: var(--pine);
  color: var(--paper);
}
.update-banner .update-later {
  background: transparent;
  color: #c9c0af;
  padding: 8px 6px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .prompt-cursor,
  .cursor-float,
  .cursor-float2 { animation: none; }
  .canvas-clip { clip-path: inset(0 0 0 0); }
  .modal-clip,
  .modal-clip.draw { animation: none; clip-path: inset(0 0 0 0); }
}