/*
 * Kalim — the landing page.
 *
 * Same identity as the product, which is the point: someone who signs up should
 * recognise the thing they land in. Teal is the one saturated colour and it is
 * spent only on actions; the ground is warm paper rather than grey; and the
 * hero is a conversation in two scripts, because that is the most
 * characteristic thing this product does and no amount of copy makes the case
 * as well as showing it.
 */

:root {
  --ink: #0b2027;
  --paper: #f4f6f5;
  --surface: #ffffff;
  --surface-2: #e8edeb;
  --rule: #d2dcd9;
  --text: #0b2027;
  --text-dim: #4c6169;
  --text-faint: #78909a;
  --accent: #0e7c86;
  --accent-deep: #0a5b63;
  --accent-soft: #dff0f0;
  --sand: #b0700f;
  --mark-cut: #ffffff;
  --f: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #07161a;
    --surface: #0e2128;
    --surface-2: #163038;
    --rule: #1f3d45;
    --text: #e3edeb;
    --text-dim: #9bb2b6;
    --text-faint: #7a959c;
    --accent: #4fc3c8;
    --accent-deep: #2a9aa1;
    --accent-soft: #0d3239;
    --sand: #d9a445;
    --mark-cut: #07161a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

code, pre { font-family: var(--f-mono); }

/*
 * Hidden by clipping, not by left: -9999px.
 *
 * The offset trick is physical, and on the Arabic page it points the wrong way:
 * in RTL that -9999px is a real position inside the scrollable area, so the
 * document became 11,679px wide and the actual content started off-screen.
 * Clipping takes the element out of the picture in either direction.
 */
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 10;
}
.skip:focus {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  width: auto; height: auto; clip-path: none;
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-decoration: none;
}
.mark { width: 26px; height: 26px; color: var(--accent); flex: 0 0 auto; }
.mark.sm { width: 20px; height: 20px; }
.nav nav { display: flex; gap: 22px; margin-inline-start: auto; }
.nav nav a {
  text-decoration: none; font-size: 14.5px; color: var(--text-dim);
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
.nav nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 550; border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn.lg { padding: 13px 26px; font-size: 15.5px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn.ghost { border-color: var(--rule); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --------------------------------------------------------------- hero */
.hero > * { min-width: 0; }
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(44px, 8vw, 92px) clamp(16px, 4vw, 40px) clamp(30px, 5vw, 60px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.eyebrow {
  font-size: 13px; color: var(--accent); font-weight: 550;
  margin-bottom: 14px; font-family: var(--f);
}
.lead {
  margin-top: 20px; font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-dim); max-width: 56ch;
}
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.note { margin-top: 14px; font-size: 13.5px; color: var(--text-faint); }

/* The conversation. Deliberately the real bubble shapes from the product. */
.thread {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: 0 24px 60px -30px rgba(11, 32, 39, .45);
  overflow: hidden;
}
.thread-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
  font-size: 13px; color: var(--text-dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2f7d4f; }
.thread-body { padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg {
  max-width: 84%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.55; text-align: start;
}
/* Logical, not physical: the flat corner is the tail, and in Arabic the tail is
   on the other side. Getting this wrong is exactly the kind of detail the page
   claims the product does not get wrong. */
.msg.in { background: var(--surface-2); border-end-start-radius: 5px; align-self: flex-start; }
.msg.out {
  background: var(--accent); color: #fff; border-end-end-radius: 5px; align-self: flex-end;
}
.msg .who {
  display: block; font-size: 11.5px; font-weight: 600; opacity: .8; margin-bottom: 3px;
}
.msg .cited {
  display: block; margin-top: 7px; font-size: 11.5px; opacity: .75;
  border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 6px;
}
.typing { display: inline-flex; gap: 5px; align-self: flex-start; padding: 12px 14px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint);
  animation: bob 1.2s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%,60%,100% { transform: translateY(0); opacity: .4 } 30% { transform: translateY(-4px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none } }

/* -------------------------------------------------------------- strip */
.strip {
  max-width: var(--wrap); margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border-block: 1px solid var(--rule);
}
.strip div { display: flex; flex-direction: column; gap: 2px; }
.strip strong {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.strip span { font-size: 13px; color: var(--text-faint); }

/* -------------------------------------------------------------- bands */
.band {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(50px, 8vw, 96px) clamp(16px, 4vw, 40px);
}
.band-hd { max-width: 62ch; margin-bottom: 34px; }
.band-hd p { margin-top: 14px; color: var(--text-dim); }
.band.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
/* A grid item defaults to min-content width, so the code block below refused to
   shrink and widened the whole page — which is why the dark section stopped
   short of the right edge instead of bleeding to it. */
.band.split > * { min-width: 0; }
.band.split p { margin-top: 16px; color: var(--text-dim); }
/* Inline code inside prose only. Unscoped, this rule also hit the <code> inside
   the snippet block below and painted a light chip behind light-on-dark text,
   which made half the snippet invisible. */
.band.split p code { font-size: 13.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }

/* ---------------------------------------------------------- what it does
   Six claims, each shown before it is described. The panel above every card is
   the product's own UI shapes — same bubbles, same launcher — drawn in markup
   so it is sharp at any size, follows the theme, and costs no image request.
   Motion is a single pass on arrival, never a loop. */
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px;
}
.feat {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  background: var(--surface);
}
.feat h3 { margin: 0 20px 8px; }
.feat p { color: var(--text-dim); font-size: 14.5px; margin: 0 20px 20px; }

.demo-panel {
  height: 168px; margin-bottom: 18px; padding: 16px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  overflow: hidden; position: relative;
}
.demo-chat { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.demo-bubble {
  max-width: 88%; padding: 7px 11px; border-radius: 13px; font-size: 12.5px; line-height: 1.45;
  background: var(--surface-2); border-end-start-radius: 4px;
}
.demo-bubble.out {
  background: var(--accent); color: #fff; align-self: flex-end;
  border-end-start-radius: 13px; border-end-end-radius: 4px;
}
.demo-bubble.sm { font-size: 12px; }
.demo-bubble.rtl { text-align: right; }
/*
 * The entrance is added to content that is already there, never used to reveal
 * it. A panel parked at opacity 0 waiting for an observer is a blank card to
 * anyone whose scroll never triggers it, whose JS failed, or who is looking at
 * a screenshot of the page.
 */
.played .demo-bubble { animation: rise .45s ease both; }
.played .demo-bubble:nth-of-type(2) { animation-delay: .3s; }
.played .demo-bubble:nth-of-type(3) { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; translate: 0 6px } to { opacity: 1; translate: 0 0 } }

/* 1 — identity: the card arrives beside the first message */
.demo-card {
  display: flex; align-items: center; gap: 10px; align-self: flex-end;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 9px 12px; max-width: 92%;
}
.played .demo-card { animation: slide-in .5s ease .5s both; }
@keyframes slide-in { from { opacity: 0; translate: 14px 0 } to { opacity: 1; translate: 0 0 } }
.demo-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.demo-lines { display: flex; flex-direction: column; min-width: 0; }
.demo-lines b { font-size: 12.5px; }
.demo-lines i { font-style: normal; font-size: 11px; color: var(--text-faint); }

/* 2 — the typing preview, which is the one worth watching */
.demo-label { font-size: 11px; color: var(--text-faint); }
.demo-draft {
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule));
  border-radius: 12px; padding: 11px 13px; min-height: 62px;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.caret {
  display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  background: var(--accent); margin-inline-start: 1px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* 3 — two visits, one thread */
.demo-split { flex-direction: row; align-items: center; gap: 10px; }
.demo-visit { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.demo-day {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint);
}
.played .demo-later { animation: slide-in .5s ease .7s both; }
.demo-link {
  width: 26px; height: 1px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px);
}

/* 4 — a screenshot in the thread */
.demo-shot {
  width: 130px; height: 56px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2b6fb0, #b0407a);
}
.demo-shot i { font-style: normal; color: #fff; font-size: 11px; font-weight: 600; }
.played .demo-shot { animation: pop .45s ease .3s both; }
@keyframes pop { from { opacity: 0; scale: .92 } to { opacity: 1; scale: 1 } }

/* 6 — quiet until wanted */
.demo-page { justify-content: flex-start; gap: 9px; }
.demo-skeleton { height: 8px; border-radius: 4px; background: var(--surface-2); width: 100%; }
.demo-skeleton.short { width: 62%; }
.demo-launcher {
  position: absolute; inset-inline-end: 16px; bottom: 16px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center;
}
.demo-launcher svg { width: 20px; height: 20px; }
.demo-badge {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 17px; height: 17px; border-radius: 9px; background: var(--sand); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.played .demo-badge { animation: pop-badge .35s cubic-bezier(.34,1.56,.64,1) .5s both; }
@keyframes pop-badge { from { opacity: 0; scale: .4 } to { opacity: 1; scale: 1 } }

.code {
  margin: 0; padding: 20px 22px; border-radius: 14px;
  background: var(--ink); color: #cfe3e2; font-size: 13px; line-height: 1.75;
  border: 1px solid var(--rule);
  /* Wrap rather than scroll: a snippet you have to drag sideways to read is a
     snippet people copy half of. */
  white-space: pre-wrap; word-break: break-word;
}
.code code { background: none; padding: 0; font-size: inherit; color: inherit; }
.code .c { color: #6f8f93; }
.code .k { color: #7fd6d9; }
.code .s { color: #e4b169; }

/* ----------------------------------------------------------- dark band */
.band.dark {
  max-width: none; background: var(--ink); color: #e3edeb;
  margin-block: clamp(30px, 5vw, 60px);
}
.band.dark > * { max-width: var(--wrap); margin-inline: auto; }
.band.dark .band-hd p { color: #9bb2b6; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.cards article {
  padding: 22px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
}
.cards p { margin-top: 10px; color: #9bb2b6; font-size: 14.5px; }

.compare { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: 14.5px; }
.compare caption {
  text-align: start; font-size: 12.5px; color: #7a959c; padding-bottom: 10px;
  letter-spacing: .02em;
}
.compare th, .compare td { text-align: start; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-weight: 400; }
.compare th { font-weight: 500; }
.compare .num { font-variant-numeric: tabular-nums; font-weight: 600; width: 8rem; }
.compare .accent { color: #7fd6d9; }
.compare td:last-child { color: #8ba4a9; font-size: 13.5px; }

/* ------------------------------------------------------------- arabic */
.rtl-demo { display: flex; flex-direction: column; gap: 18px; }
.rtl-row { display: flex; flex-direction: column; gap: 7px; }
.rtl-label { font-size: 12px; color: var(--text-faint); }
.rtl-demo .msg { max-width: 100%; }

/* ------------------------------------------------------------ pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plan {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface);
}
.plan.featured { border-color: var(--accent); box-shadow: 0 20px 50px -34px var(--accent); }
.tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px;
}
.price { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; }
.price span { font-size: 0.85rem; font-weight: 400; color: var(--text-faint); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.plan li { position: relative; padding-inline-start: 22px; font-size: 14.5px; color: var(--text-dim); }
/* A tick is the same shape in both directions — only where it sits changes.
   Drawing it with border-inline-start mirrored the glyph itself in Arabic and
   turned every tick into a chevron. */
.plan li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); rotate: -45deg;
}
/* What the plan is for, in one line, before the list of what is in it. */
.plan-for { font-size: 14px; color: var(--text-faint); margin: -6px 0 0; }
/* A row the plan does not include still appears — the honest comparison is the
   one that says what you are giving up, and a tick would be a lie. */
.plan li.off { color: var(--text-faint); }
.plan li.off::before {
  width: 9px; height: 0; top: 11px; rotate: none;
  border-left: 0; border-bottom: 2px solid var(--rule);
}
.plan .btn { justify-content: center; }
.plans-note {
  margin: 22px auto 0; max-width: 62ch; text-align: center;
  font-size: 13.5px; color: var(--text-faint);
}


/* ----------------------------------------------------------------- faq
 *
 * Nine questions, shown one at a time.
 *
 * An accordion would have been the default, and it is the wrong shape here:
 * the answers are long, the list is the thing people scan, and a stack of
 * collapsed rows tells a visitor nothing about what is inside them. So the
 * questions are a numbered index down one side and the answer is a slide on
 * the other — a form that carries the numbering honestly, because these really
 * are nine of nine.
 *
 * Built on radio inputs. No script, no framework, and every answer is in the
 * HTML whether or not it is the one on screen, which is what a crawler and an
 * answer engine both need.
 */
.faq {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.faq-state {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.faq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.faq-list li + li { border-top: 1px solid var(--rule); }
.faq-list label {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  gap: 14px; padding: 13px 6px 13px 0; cursor: pointer;
  transition: color .16s ease, padding-inline-start .16s ease;
}
.faq-n {
  font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-faint); transition: color .16s ease;
}
.faq-q { font-size: 15px; font-weight: 500; color: var(--text-dim); line-height: 1.35; }
.faq-list label:hover .faq-q { color: var(--text); }
.faq-list label:hover .faq-n { color: var(--accent); }

 /* A fixed floor so switching between a short answer and a long one does not
    make the page jump under the pointer. */
.faq-slides { position: relative; min-height: clamp(290px, 30vw, 340px); }
.faq-slide {
  display: none; position: relative; height: 100%;
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 30px 70px -46px rgba(11, 32, 39, .5);
  overflow: hidden;
}
/* The number again, enormous and almost invisible: the only ornament on the
   page, and it earns its place by saying where you are in the stack. */
.faq-slide::after {
  content: attr(data-n);
  /* Top corner, wholly inside the card, with the heading given room beside it —
     a numeral that collides with the text it is numbering is just noise. */
  position: absolute; inset-block-start: 10px; inset-inline-end: 22px;
  font-family: var(--f-mono); font-size: clamp(4rem, 7.5vw, 6rem); font-weight: 600;
  line-height: 1; color: var(--text); opacity: .06; pointer-events: none;
}
.faq-meta {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: 14px;
}
.faq-meta b { color: var(--accent); font-weight: 600; }
.faq-slide h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 14px; max-width: 22ch; padding-inline-end: 4.5rem;
}
.faq-slide > p:last-child {
  font-size: clamp(.98rem, 1.15vw, 1.06rem); line-height: 1.7; color: var(--text-dim);
  max-width: 58ch;
}
.faq-slide code {
  font-size: .88em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px;
}
.faq-slide strong { color: var(--text); font-weight: 600; }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .faq-slide { animation: none !important; } }

@media (max-width: 860px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .faq-slide::after { font-size: 5rem; inset-block-start: -10px; }
}

/* Generated: one selected-state pair per question. */
#q1:checked ~ .faq-list label[for="q1"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q1:checked ~ .faq-list label[for="q1"] .faq-q { color: var(--text); font-weight: 550; }
#q1:checked ~ .faq-list label[for="q1"] .faq-n { color: var(--accent); }
#q1:checked ~ .faq-slides #s1 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q2:checked ~ .faq-list label[for="q2"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q2:checked ~ .faq-list label[for="q2"] .faq-q { color: var(--text); font-weight: 550; }
#q2:checked ~ .faq-list label[for="q2"] .faq-n { color: var(--accent); }
#q2:checked ~ .faq-slides #s2 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q3:checked ~ .faq-list label[for="q3"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q3:checked ~ .faq-list label[for="q3"] .faq-q { color: var(--text); font-weight: 550; }
#q3:checked ~ .faq-list label[for="q3"] .faq-n { color: var(--accent); }
#q3:checked ~ .faq-slides #s3 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q4:checked ~ .faq-list label[for="q4"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q4:checked ~ .faq-list label[for="q4"] .faq-q { color: var(--text); font-weight: 550; }
#q4:checked ~ .faq-list label[for="q4"] .faq-n { color: var(--accent); }
#q4:checked ~ .faq-slides #s4 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q5:checked ~ .faq-list label[for="q5"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q5:checked ~ .faq-list label[for="q5"] .faq-q { color: var(--text); font-weight: 550; }
#q5:checked ~ .faq-list label[for="q5"] .faq-n { color: var(--accent); }
#q5:checked ~ .faq-slides #s5 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q6:checked ~ .faq-list label[for="q6"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q6:checked ~ .faq-list label[for="q6"] .faq-q { color: var(--text); font-weight: 550; }
#q6:checked ~ .faq-list label[for="q6"] .faq-n { color: var(--accent); }
#q6:checked ~ .faq-slides #s6 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q7:checked ~ .faq-list label[for="q7"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q7:checked ~ .faq-list label[for="q7"] .faq-q { color: var(--text); font-weight: 550; }
#q7:checked ~ .faq-list label[for="q7"] .faq-n { color: var(--accent); }
#q7:checked ~ .faq-slides #s7 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q8:checked ~ .faq-list label[for="q8"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q8:checked ~ .faq-list label[for="q8"] .faq-q { color: var(--text); font-weight: 550; }
#q8:checked ~ .faq-list label[for="q8"] .faq-n { color: var(--accent); }
#q8:checked ~ .faq-slides #s8 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q9:checked ~ .faq-list label[for="q9"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q9:checked ~ .faq-list label[for="q9"] .faq-q { color: var(--text); font-weight: 550; }
#q9:checked ~ .faq-list label[for="q9"] .faq-n { color: var(--accent); }
#q9:checked ~ .faq-slides #s9 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q10:checked ~ .faq-list label[for="q10"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q10:checked ~ .faq-list label[for="q10"] .faq-q { color: var(--text); font-weight: 550; }
#q10:checked ~ .faq-list label[for="q10"] .faq-n { color: var(--accent); }
#q10:checked ~ .faq-slides #s10 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q11:checked ~ .faq-list label[for="q11"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q11:checked ~ .faq-list label[for="q11"] .faq-q { color: var(--text); font-weight: 550; }
#q11:checked ~ .faq-list label[for="q11"] .faq-n { color: var(--accent); }
#q11:checked ~ .faq-slides #s11 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }
#q12:checked ~ .faq-list label[for="q12"] { padding-inline-start: 12px; box-shadow: inset 2px 0 0 var(--accent); }
#q12:checked ~ .faq-list label[for="q12"] .faq-q { color: var(--text); font-weight: 550; }
#q12:checked ~ .faq-list label[for="q12"] .faq-n { color: var(--accent); }
#q12:checked ~ .faq-slides #s12 { display: block; animation: faq-in .32s cubic-bezier(.22,.7,.3,1) both; }

/* The control is clipped, so the focus ring has to be drawn on the label it
   belongs to — otherwise keyboard users move through the list blind. */
#q1:focus-visible ~ .faq-list label[for="q1"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q2:focus-visible ~ .faq-list label[for="q2"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q3:focus-visible ~ .faq-list label[for="q3"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q4:focus-visible ~ .faq-list label[for="q4"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q5:focus-visible ~ .faq-list label[for="q5"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q6:focus-visible ~ .faq-list label[for="q6"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q7:focus-visible ~ .faq-list label[for="q7"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q8:focus-visible ~ .faq-list label[for="q8"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q9:focus-visible ~ .faq-list label[for="q9"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q10:focus-visible ~ .faq-list label[for="q10"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q11:focus-visible ~ .faq-list label[for="q11"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
#q12:focus-visible ~ .faq-list label[for="q12"] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------- closer */
.closer {
  text-align: center; max-width: 60ch; margin: 0 auto;
  padding: clamp(50px, 8vw, 100px) clamp(16px, 4vw, 40px);
  display: grid; gap: 16px; justify-items: center;
}
.closer p { color: var(--text-dim); }

.foot {
  border-top: 1px solid var(--rule);
  padding: 26px clamp(16px, 4vw, 40px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-faint);
}
.foot > div { display: inline-flex; align-items: center; gap: 9px; font-weight: 550; color: var(--text); }
.foot p { margin-inline-start: auto; }
/*
 * The footer nav arrived with the guides: before them the footer was a wordmark
 * and nothing else, so its links inherited the browser's underline. Pushed to
 * the far end so the brand and the links read as two things, not one sentence.
 */
.foot nav { display: flex; gap: 18px; margin-inline-start: auto; flex-wrap: wrap; }
.foot nav a { color: var(--text-dim); text-decoration: none; }
.foot nav a:hover { color: var(--text); text-decoration: underline; }

/* --------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero, .band.split { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .nav nav { display: none; }
  .foot p, .foot nav { margin-inline-start: 0; }
}


/* Someone who asked for less motion gets the panels exactly as they end up. */
@media (prefers-reduced-motion: reduce) {
  .played .demo-bubble,
  .played .demo-card,
  .played .demo-later,
  .played .demo-shot,
  .played .demo-badge { animation: none; }
  .caret { animation: none; }
}

/* ------------------------------------------------------------ channels
 *
 * Six named things, so the grid is a list rather than a feature wall: no
 * icons, no logos we would have to license, just the name and the one fact
 * that decides whether it is the channel you needed.
 */
.channels {
  /* Three across, not auto-fit: six items into four columns leaves two empty
     cells showing the grid's own background, which reads as a loading error. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
}
@media (max-width: 860px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .channels { grid-template-columns: minmax(0, 1fr); } }
.channel { background: var(--surface); padding: 20px 22px; display: grid; gap: 6px; align-content: start; }
.channel h3 { font-size: 1rem; }
.channel p { font-size: 14px; color: var(--text-dim); }

/* ---------------------------------------------------------------- guides
 *
 * A reading column, not a landing page.
 *
 * The rest of this site is built to be scanned; a guide is built to be read, so
 * the measure narrows to about 68 characters, the line height opens up, and
 * nothing competes with the text — no cards, no accent blocks, no illustration
 * that would sit between two paragraphs saying nothing.
 */
.article { max-width: 720px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 40px) 60px; }
.article-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint); margin-bottom: 16px;
}
.article-meta a { color: var(--accent); text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 18px; }
.article .standfirst { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-dim); line-height: 1.6; }
.article h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 44px 0 14px; letter-spacing: -0.02em;
}
.article h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.article p { margin-top: 14px; line-height: 1.75; }
.article ul, .article ol { margin: 14px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.article li { line-height: 1.7; }
.article li::marker { color: var(--text-faint); }
.article strong { font-weight: 600; }
.article a { color: var(--accent); }
.article code {
  font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px;
}
.article hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }

/* A worked example: what to write, and what to write instead. */
.swap { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; margin-top: 18px; }
.swap > div { background: var(--surface); padding: 16px 18px; }
.swap .label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px;
}
.swap .before .label { color: var(--sand); }
.swap .after .label { color: var(--accent); }
.swap p { margin: 0; font-size: 15px; line-height: 1.65; }
@media (min-width: 720px) { .swap { grid-template-columns: 1fr 1fr; } }

/* The takeaway box, used once per guide and never twice. */
.takeaway {
  margin-top: 40px; padding: 20px 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--rule);
}
.takeaway h2 { margin: 0 0 10px; font-size: 1.05rem; }
.takeaway ul { margin-top: 0; }

/* The index, and the "read next" strip at the foot of each guide. */
.guide-list { display: grid; gap: 14px; }
.guide-card {
  display: block; text-decoration: none; color: inherit;
  padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 16px;
  transition: border-color .14s ease, transform .14s ease;
}
.guide-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.guide-card h2 { font-size: 1.15rem; margin: 0; }
.guide-card p { margin-top: 8px; color: var(--text-dim); font-size: 15px; }
.guide-card .read { display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--accent); font-weight: 550; }
@media (prefers-reduced-motion: reduce) { .guide-card:hover { transform: none; } }
.read-next { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--rule); }
.read-next h2 { font-size: 1.05rem; margin: 0 0 14px; }