/* ============================================================
   Koboshi — Marketing site layer
   Built on the LanguageTracker design tokens (teal / cream /
   Nunito, "Editorial Reference"). Chrome, layout and editorial
   moments for the secondary pages. Prefix: kb-
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--teal-100); color: var(--teal-900); }

/* script-specific stacks */
.kb-ja { font-family: var(--font-ja); }
.kb-hi { font-family: var(--font-hi); }
.kb-ar { font-family: var(--font-ar); }

/* ---------------- Layout ---------------- */
.kb-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.kb-prose { max-width: var(--container-prose); margin-inline: auto; }
.kb-section { padding-block: var(--space-20); }
.kb-section--tight { padding-block: var(--space-12); }
@media (max-width: 720px) {
  .kb-section { padding-block: var(--space-12); }
}

/* ---------------- Eyebrow ---------------- */
.kb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--space-4);
}
.kb-eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--brand); border-radius: 2px;
}

/* ---------------- Headings ---------------- */
.kb-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
  text-wrap: balance;
}
.kb-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: clamp(1.75rem, 3.5vw, var(--text-4xl));
  line-height: 1.26;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-8);
  text-wrap: balance;
}
.kb-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}
.kb-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: var(--space-6) 0 0;
}
.kb-body { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.kb-body strong { color: var(--text-primary); font-weight: var(--fw-bold); }

/* ---------------- Header ---------------- */
.kb-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.kb-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: 68px; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-6);
}
.kb-brand { display: inline-flex; align-items: center; gap: var(--space-2-5); text-decoration: none; color: var(--text-primary); }
.kb-brand img { width: 30px; height: 30px; }
.kb-brand b { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.kb-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.kb-nav a {
  text-decoration: none; color: var(--text-secondary);
  font-weight: var(--fw-semibold); font-size: var(--text-base);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.kb-nav a:hover { color: var(--text-primary); background: var(--bg-hover); }
.kb-nav a[aria-current="page"] { color: var(--brand); }
.kb-header .kb-cta { margin-left: var(--space-2); }
/* The CTA sits inside .kb-nav, whose `.kb-nav a` rule (specificity 0,1,1) was overriding the
   button's white `color` (0,1,0) → muted-grey text on the teal fill = unreadable, and the nav
   :hover even swapped out the teal fill. Re-assert brand fill + white text with header-scoped,
   higher-specificity rules (0,3,0 / 0,3,1). */
.kb-header .kb-cta.lt-btn--primary { color: var(--brand-contrast); background: var(--brand); }
.kb-header .kb-cta.lt-btn--primary:hover { color: var(--brand-contrast); background: var(--brand-strong); }
/* Login = white chip with ink text (returning users). Header-scoped to beat `.kb-nav a`. */
.kb-header .kb-login {
  text-decoration: none; color: var(--ink); background: var(--paper);
  border: 1px solid var(--border-strong); font-weight: var(--fw-bold); font-size: var(--text-base);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kb-header .kb-login:hover { color: var(--ink); background: var(--cream); border-color: var(--text-muted); }
@media (max-width: 860px) {
  .kb-nav .kb-hide-sm { display: none; }
}

/* ---------------- Buttons (marketing sizing on top of lt-btn) ---------------- */
.kb-cta { text-decoration: none; }
.lt-btn--xl { height: 54px; font-size: var(--text-lg); padding: 0 var(--space-8); border-radius: var(--radius-md); }
.kb-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------------- Hero ---------------- */
.kb-hero { padding-block: var(--space-20) var(--space-16); position: relative; overflow: hidden; }
.kb-hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center;
}
@media (max-width: 900px) {
  .kb-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
.kb-hero__art { display: grid; place-items: center; }

/* ---------------- Hero register stack ---------------- */
.kb-hero-stack { display: grid; gap: var(--space-3); width: 100%; max-width: 380px; }
.kb-reg-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.kb-reg-head strong { display: block; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); line-height: 1.15; white-space: nowrap; }
.kb-reg-eyebrow { display: block; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--brand); }

/* CJK / Arabic terms in word cards need looser leading so tall glyphs
   don't collide with the pronunciation line below. */
.lt-word__term.kb-ja, .lt-word__term.kb-ar { line-height: 1.5; white-space: nowrap; }
.lt-word__term { white-space: nowrap; }
.lt-word__top > div:first-child { min-width: 0; }

/* ---------------- Polyglot: hero fan ---------------- */
.kb-fan { display: grid; gap: var(--space-3); width: 100%; max-width: 400px; }
.kb-fan__idea {
  display: inline-flex; flex-direction: column; align-self: center;
  align-items: center; gap: 2px; padding: var(--space-3) var(--space-6);
  background: var(--brand); color: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-brand); margin-bottom: var(--space-2);
}
.kb-fan__idea-label { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: 0.8; }
.kb-fan__idea strong { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); line-height: 1; }
.kb-fan__card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kb-fan__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* sense toggle */
.kb-sense { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }
.kb-sense__label { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.kb-sense__toggle { display: flex; width: 100%; }
.kb-sense__toggle button { flex: 1; white-space: nowrap; }

/* example phrase inside a word card */
.kb-word__ex { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.kb-word__ex-term { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.4; }
.kb-word__ex-term.kb-ar { font-size: var(--text-lg); }
.kb-word__ex-gloss { font-size: var(--text-sm); color: var(--text-muted); }

/* gentle swap pop when the sense changes */
@media (prefers-reduced-motion: no-preference) {
  .kb-swap { animation: kb-swap-in 0.3s var(--ease-out); }
}
@keyframes kb-swap-in { from { opacity: 0.3; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Polyglot: strong-languages grid ---------------- */
.kb-strong-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
@media (max-width: 920px) { .kb-strong-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* progress bars rising together */
.kb-bars { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.kb-bar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.kb-bar__tag { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.kb-bar__track { height: 12px; border-radius: var(--radius-pill); background: var(--sand-200); overflow: hidden; }
.kb-bar__fill { height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 1.1s var(--ease-out); }
.kb-in .kb-bar__fill, .kb-bars .kb-bar__fill { width: var(--w); }
.kb-bars__note { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

/* ---------------- Polyglot: concept map placeholder ---------------- */
.kb-map {
  position: relative; aspect-ratio: 1 / 0.94; width: 100%; max-width: 420px; margin-inline: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--sand-200) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.kb-map__badge {
  position: absolute; top: var(--space-4); left: var(--space-4); z-index: 3;
  font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-elevated); padding: 3px var(--space-2); border-radius: var(--radius-sm);
}
.kb-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kb-map__node { position: absolute; z-index: 2; }
.kb-map__node--center {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  width: 96px; height: 96px; justify-content: center; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-brand);
}
.kb-map__node--center span { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: 0.82; }
.kb-map__node--center strong { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); letter-spacing: var(--tracking-tight); }
.kb-map__pill {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--text-base); font-weight: var(--fw-bold);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  background: var(--bg-card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.kb-map__pill .flag { font-size: 1.1em; }
.kb-map__pill--top   { left: 50%; top: 17%; transform: translate(-50%, -50%); }
.kb-map__pill--left  { left: 18%; top: 76%; transform: translate(-50%, -50%); }
.kb-map__pill--right { left: 82%; top: 76%; transform: translate(-50%, -50%); }

/* ---------------- Pull quote (bold reassurance line) ---------------- */
.kb-pull {
  position: relative;
  margin: var(--space-10) 0;
  padding: var(--space-8) var(--space-10);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brand);
  overflow: hidden;
}
.kb-pull p {
  margin: 0; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.kb-pull::after {
  content: ""; position: absolute; right: -40px; bottom: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 70%);
}
.kb-pull--inline {
  display: flex; align-items: center; gap: var(--space-6);
}
.kb-pull--inline img { width: 84px; height: 92px; flex: none; }
.kb-pull--wide { max-width: 880px; margin-inline: auto; }

/* compact emphasis variant (left rule) */
.kb-emph {
  border-left: 4px solid var(--brand);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: var(--space-8) 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); color: var(--text-primary);
  text-wrap: balance;
}

/* ---------------- Feature list / cards ---------------- */
.kb-grid { display: grid; gap: var(--space-6); }
.kb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kb-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .kb-grid--2, .kb-grid--3 { grid-template-columns: 1fr; } }

.kb-feature {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.kb-feature__ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand);
  margin-bottom: var(--space-4);
}
.kb-feature__ico svg { width: 21px; height: 21px; }
.kb-feature h3 { margin: 0 0 var(--space-1-5); font-size: var(--text-lg); font-weight: var(--fw-bold); font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.kb-feature p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }

/* ---------------- "This happens everywhere" list ---------------- */
.kb-places { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kb-places li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-secondary);
}
.kb-places .flag { font-size: 1.2em; line-height: 1.3; flex: none; }

/* rich/colorful variant — flag in a tinted disc, language accent rail */
.kb-places--rich { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 760px) { .kb-places--rich { grid-template-columns: 1fr; } }
.kb-places--rich li {
  position: relative; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kb-places--rich li:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kb-places--rich li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--_a, var(--brand));
}
.kb-places--rich .disc {
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.6rem; line-height: 1;
  background: var(--_t, var(--brand-tint));
}
.kb-places--rich .pl-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-secondary); }
.kb-places--rich .pl-body strong { display: block; color: var(--text-primary); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-base); letter-spacing: var(--tracking-tight); margin-bottom: 2px; }

/* bold feature card — bigger icon, accent ground, for punchy "what it does" rows */
.kb-feature--bold { padding: var(--space-8); }
.kb-feature--bold .kb-feature__ico { width: 52px; height: 52px; border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.kb-feature--bold .kb-feature__ico svg { width: 26px; height: 26px; }
.kb-feature--bold h3 { font-size: var(--text-xl); margin-bottom: var(--space-2-5); }
.kb-feature--bold p { font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* CEFR-style level chip inside word cards */
.kb-level { display: inline-flex; align-items: center; margin-left: var(--space-2); font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand); vertical-align: middle; }

/* twemoji flag images — keep inline emoji sizing crisp and consistent */
img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; display: inline-block; }
.kb-places--rich .disc img.emoji { height: 1.6rem; width: 1.6rem; margin: 0; }
.kb-places strong { color: var(--text-primary); font-weight: var(--fw-bold); }

/* ---------------- Register / word card row ---------------- */
.kb-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 760px) { .kb-cards-row { grid-template-columns: 1fr; } }
.kb-reg-label {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2);
}

/* ---------------- FAQ ---------------- */
.kb-faq { display: grid; gap: var(--space-3); }
.kb-faq details {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kb-faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.kb-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight); color: var(--text-primary);
}
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary .chev {
  flex: none; width: 22px; height: 22px; color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.kb-faq details[open] summary .chev { transform: rotate(180deg); color: var(--brand); }
.kb-faq details p { margin: var(--space-3) 0 0; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ---------------- Connector block ---------------- */
.kb-connect {
  display: grid; gap: var(--space-4);
}
.kb-connect__card {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  text-decoration: none; color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.kb-connect__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.kb-connect__card .txt { flex: 1; }
.kb-connect__card .txt b { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-bottom: 2px; }
.kb-connect__card .txt span { font-size: var(--text-base); color: var(--text-secondary); }
.kb-connect__card .arr { flex: none; color: var(--brand); transition: transform var(--dur-base) var(--ease-out); }
.kb-connect__card:hover .arr { transform: translateX(4px); }

/* ---------------- Final CTA band ---------------- */
.kb-cta-band {
  background: var(--brand); color: #fff; border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10); text-align: center; position: relative; overflow: hidden;
}
.kb-cta-band h2 { color: #fff; margin-bottom: var(--space-3); }
.kb-cta-band p { color: rgba(255,255,255,0.86); font-size: var(--text-lg); max-width: 540px; margin: 0 auto var(--space-8); }
.kb-cta-band .lt-btn--primary { background: #fff; color: var(--brand); }
.kb-cta-band .lt-btn--primary:hover { background: var(--cream); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.kb-cta-band .lt-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.kb-cta-band .kb-btn-row { justify-content: center; }
.kb-cta-band .kb-fine { color: rgba(255,255,255,0.7); font-size: var(--text-sm); margin-top: var(--space-5); }

/* ---------------- Footer (revised: collapsible Why + grouped links) ---------------- */
.kb-footer { background: var(--night-bg); color: #C9C8C2; margin-top: var(--space-24); }
.kb-footer__top {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--space-14);
  padding-block: var(--space-16); border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) { .kb-footer__top { grid-template-columns: 1fr; gap: var(--space-10); } }
.kb-footer__brand .kb-brand { color: #fff; }
.kb-footer__brand .kb-brand img { width: 30px; height: 30px; }
.kb-footer__brand .kb-brand b { color: #fff; }
.kb-footer__tag { margin: var(--space-4) 0 var(--space-6); font-size: var(--text-base); color: #9C9B95; max-width: 36ch; }

.kb-why { width: 100%; max-width: 380px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); background: rgba(255,255,255,0.025); }
.kb-why summary { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; list-style: none; padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-weight: var(--fw-bold); color: #fff; font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.kb-why summary::-webkit-details-marker { display: none; }
.kb-why summary img { width: 28px; height: 31px; flex: none; }
.kb-why summary .why-label { flex: 1; }
.kb-why summary .chev { width: 20px; height: 20px; color: var(--night-muted); transition: transform var(--dur-base) var(--ease-out); flex: none; }
.kb-why[open] summary .chev { transform: rotate(180deg); color: var(--teal-300); }
.kb-why p { margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: #9C9B95; }
.kb-why p .jp { color: #C9C8C2; font-weight: var(--fw-semibold); }

.kb-foot-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); align-self: start; }
@media (max-width: 520px) { .kb-foot-links { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.kb-foot-col h4 { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--night-muted); margin: 0 0 var(--space-4); font-weight: var(--fw-bold); }
.kb-foot-col a { display: block; text-decoration: none; color: #C9C8C2; font-size: var(--text-base); font-weight: var(--fw-semibold); padding: var(--space-1-5) 0; transition: color var(--dur-fast) var(--ease-out); }
.kb-foot-col a:hover { color: #fff; }
.kb-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-6); font-size: var(--text-sm); color: var(--night-muted); flex-wrap: wrap;
}
.kb-foot-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.kb-foot-legal a { color: var(--night-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.kb-foot-legal a:hover { color: #fff; }

/* ---------------- Mascot wobble (motion spec) ---------------- */
.kb-mascot { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .kb-mascot--wobble { animation: kb-wobble 4.2s var(--ease-in-out) infinite; }
}
@keyframes kb-wobble {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-7deg); }
  22%  { transform: rotate(6deg); }
  34%  { transform: rotate(-4deg); }
  46%  { transform: rotate(3deg); }
  58%  { transform: rotate(-2deg); }
  70%  { transform: rotate(1.4deg); }
  82%  { transform: rotate(-0.8deg); }
  100% { transform: rotate(0deg); }
}

/* gentle reveal on scroll — opacity transition only (no animation fill-forwards,
   so elements aren't kept on a composited layer that renders text/SVG blurry). */
.kb-reveal { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.kb-reveal.kb-in { opacity: 1; }
.kb-reveal.kb-shown { opacity: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .kb-reveal { opacity: 1; transition: none; } }

/* misc */
.kb-note {
  font-size: var(--text-sm); color: var(--text-muted); font-style: italic;
  border-left: 2px dashed var(--border-strong); padding-left: var(--space-4); margin: var(--space-6) 0;
}
.kb-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ============================================================
   Short-page + blog components
   ============================================================ */

/* ---------------- Comparison table ---------------- */
.kb-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.kb-table { width: 100%; border-collapse: collapse; background: var(--bg-card); min-width: 560px; }
.kb-table th, .kb-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font-size: var(--text-base); vertical-align: top; }
.kb-table thead th { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.kb-table thead th:first-child { color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.kb-table tbody th { font-weight: var(--fw-semibold); color: var(--text-secondary); width: 32%; }
.kb-table td { color: var(--text-secondary); }
.kb-table thead .kb-col-kob { background: var(--brand); color: #fff; border-bottom-color: var(--brand-strong); }
.kb-table tbody .kb-col-kob { background: var(--brand-tint); color: var(--text-primary); font-weight: var(--fw-semibold); }
.kb-table tr:last-child th, .kb-table tr:last-child td { border-bottom: 0; }
.kb-col-kob { border-left: 1px solid var(--border); }
.kb-table thead th:nth-child(2) { color: var(--text-secondary); }

/* ---------------- Numbered steps ---------------- */
.kb-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kb-steps li { counter-increment: s; display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kb-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: var(--fw-bold); font-size: var(--text-sm); display: grid; place-items: center; margin-top: 1px; }
.kb-steps .s-body { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
.kb-steps .s-body b { color: var(--text-primary); font-weight: var(--fw-bold); }
.kb-steps .s-body em { font-style: normal; color: var(--text-primary); background: var(--sand-100); padding: 1px 6px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); }

/* ---------------- Copy box (prompt) ---------------- */
.kb-copybox { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--night-bg); box-shadow: var(--shadow-md); }
.kb-copybox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-4); background: #151514; border-bottom: 1px solid rgba(255,255,255,0.08); }
.kb-copybox__bar .lbl { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--night-muted); }
.kb-copybtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: var(--brand); color: #fff; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.kb-copybtn:hover { background: var(--gold-light); }
.kb-copybtn svg { width: 16px; height: 16px; }
.kb-copybtn.is-done { background: var(--success); }
.kb-copybox pre { margin: 0; padding: var(--space-5); overflow-x: auto; color: #E8E8E2; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

/* ---------------- Before / after ---------------- */
.kb-ba { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); position: relative; align-items: stretch; }
@media (max-width: 720px) { .kb-ba { grid-template-columns: 1fr; gap: var(--space-8); } }
.kb-ba__vs {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--night-bg); color: #fff; font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); box-shadow: 0 0 0 4px var(--bg-page);
}
@media (max-width: 720px) { .kb-ba__vs { top: 50%; } }
.kb-ba__card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); position: relative; min-width: 0; }
.kb-ba__card--before { background: var(--sand-50); border-style: dashed; }
.kb-ba__card--after { border: 1.5px solid var(--brand); background: linear-gradient(180deg, var(--brand-tint), var(--bg-card) 60%); box-shadow: var(--shadow-brand); overflow: hidden; }
.kb-ba__card--after::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in oklch, var(--brand) 22%, transparent), transparent 70%); }
.kb-ba__badge { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; background: var(--brand); padding: 3px var(--space-2); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.kb-ba__card--after .kb-ba__tag { padding-right: 96px; }
.kb-ba__card--after .lt-word__top { flex-wrap: wrap; gap: var(--space-2); }
.kb-ba__card--after .lt-word__term { font-size: var(--text-xl); }
.kb-ba__tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-3); }
.kb-ba__card--before .kb-ba__tag { color: var(--text-muted); }
.kb-ba__card--after .kb-ba__tag { color: var(--brand); }
.kb-ba__card p { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }

/* ---------------- Loop diagram ---------------- */
.kb-loop { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
.kb-loop__step { flex: 1 1 120px; padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); text-align: center; box-shadow: var(--shadow-sm); }
.kb-loop__ico { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto var(--space-3); border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand); }
.kb-loop__ico svg { width: 20px; height: 20px; }
.kb-loop__step b { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-base); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kb-loop__arrow { display: grid; place-items: center; color: var(--border-strong); flex: 0 0 auto; align-self: center; }
.kb-loop__arrow svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .kb-loop__arrow { transform: rotate(90deg); } .kb-loop__step { flex-basis: 100%; } }

/* ---------------- Recall timer ---------------- */
.kb-recall { display: flex; align-items: flex-end; gap: var(--space-5); padding: var(--space-6) var(--space-4) var(--space-4); }
.kb-recall__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.kb-recall__bar { width: 60px; background: linear-gradient(var(--brand), var(--teal-500)); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.kb-recall__time { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kb-recall__label { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* ---------------- Blog ---------------- */
.kb-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .kb-blog-grid { grid-template-columns: 1fr; } }
.kb-post-card { display: flex; flex-direction: row; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-primary); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.kb-post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--_c, var(--border-strong)); }
.kb-post-card__banner { flex: none; width: 116px; align-self: stretch; display: grid; place-items: center; background: var(--_t, var(--brand-tint)); border-right: 1px solid var(--border); position: relative; overflow: hidden; }
.kb-post-card__banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 0%, rgba(255,255,255,0.5), transparent 60%); }
.kb-post-card__banner img { height: 70px; width: auto; position: relative; z-index: 1; transition: transform var(--dur-base) var(--ease-out); }
.kb-post-card:hover .kb-post-card__banner img { transform: scale(1.06) rotate(-3deg); }
.kb-post-card__inner { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; min-width: 0; }
.kb-post-card h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.kb-post-card__hook { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.kb-post-card__read { margin-top: auto; padding-top: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--_c, var(--text-muted)); }
.kb-cat { display: inline-flex; align-items: center; gap: var(--space-1-5); align-self: flex-start; font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px var(--space-2-5); border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); }
.kb-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kb-cat--memory  { background: var(--lang-ja-tint); color: var(--lang-ja); }
.kb-cat--polyglot{ background: var(--lang-pt-tint); color: var(--lang-pt); }
.kb-cat--heritage{ background: var(--lang-ur-tint); color: var(--lang-ur); }
.kb-cat--ai      { background: var(--lang-ko-tint); color: var(--lang-ko); }
.kb-cat--how     { background: var(--brand-tint);   color: var(--brand); }
.kb-cat--tutorial{ background: var(--brand-tint);    color: var(--brand); }
.kb-cat--howto   { background: var(--lang-pt-tint);  color: var(--lang-pt); }
.kb-cat--tips    { background: #FBF0DD;              color: #B7791F; }

.kb-cat-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kb-cat-filter button { appearance: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-pill); transition: all var(--dur-fast) var(--ease-out); }
.kb-cat-filter button:hover { border-color: var(--text-muted); color: var(--text-primary); }
.kb-cat-filter button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------------- Blog post body ---------------- */
.kb-post-body { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.kb-post-body > p { margin: 0 0 var(--space-6); }
.kb-post-body > p:first-of-type { font-size: var(--text-xl); color: var(--text-primary); line-height: var(--leading-relaxed); }
.kb-post-body h2 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin: var(--space-10) 0 var(--space-4); line-height: var(--leading-snug); }
.kb-post-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin: var(--space-8) 0 var(--space-3); }
.kb-post-body ul { margin: 0 0 var(--space-6); padding-left: var(--space-5); }
.kb-post-body li { margin-bottom: var(--space-2); }
.kb-post-body strong { color: var(--text-primary); font-weight: var(--fw-bold); }
.kb-post-body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.kb-post-body blockquote { margin: var(--space-8) 0; border-left: 3px solid var(--brand); padding: var(--space-1) 0 var(--space-1) var(--space-5); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-primary); line-height: var(--leading-snug); }
.kb-post-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.kb-post-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--sand-50); font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin-top: var(--space-8); }

/* ---------------- ChatGPT import: bad-UI vs good-UI contrast ---------------- */
.kb-vs2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-5); align-items: stretch; max-width: 900px; margin-inline: auto; }
@media (max-width: 900px) { .kb-vs2 { grid-template-columns: 1fr; gap: var(--space-6); max-width: 480px; } }
.kb-vs2__col { display: flex; flex-direction: column; min-width: 0; }
.kb-vs2__label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-bold); }
.kb-vs2__label .badge { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.kb-vs2__label--bad .badge { background: #F6E0DD; color: #B0413A; }
.kb-vs2__label--good .badge { background: var(--brand-tint); color: var(--brand); }
.kb-vs2__label .what { color: var(--text-secondary); font-weight: var(--fw-semibold); }

/* messy ChatGPT answer — dense wall of text, the real meaning buried */
.kb-mess { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.kb-mess__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-secondary); background: var(--sand-50); }
.kb-mess__bar .dot { width: 18px; height: 18px; border-radius: 50%; background: #10A37F; display: grid; place-items: center; flex: none; }
.kb-mess__bar .dot svg { width: 11px; height: 11px; color: #fff; }
.kb-mess__q { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-primary); }
.kb-mess__q b { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; display: block; margin-bottom: 2px; }
.kb-mess__ans { position: relative; height: 326px; overflow: hidden; }
.kb-mess__ans-scroll { padding: var(--space-4); font-size: var(--text-sm); line-height: 1.62; color: var(--text-secondary); }
.kb-mess__ans-scroll p { margin: 0 0 var(--space-3); }
.kb-mess__ans-scroll h5 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.kb-mess__ans-scroll ol, .kb-mess__ans-scroll ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.kb-mess__ans-scroll li { margin-bottom: var(--space-1); }
.kb-mess__ans-scroll .buried { background: #FCEFB4; border-radius: 3px; padding: 0 3px; color: var(--text-primary); font-weight: var(--fw-semibold); box-shadow: 0 0 0 1px #ECD98A; }
.kb-mess__ans::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to bottom, transparent, var(--bg-card)); pointer-events: none; }
.kb-mess__flag { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: #FBF4F3; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: #B0413A; }
.kb-mess__flag svg { width: 15px; height: 15px; flex: none; }

/* clean Koboshi answer — simple scannable cards */
.kb-clean { flex: 1; border: 1.5px solid var(--brand); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--brand-tint), var(--bg-card) 22%); box-shadow: var(--shadow-brand); overflow: hidden; display: flex; flex-direction: column; }
.kb-clean__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklch, var(--brand) 20%, var(--border)); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--brand); }
.kb-clean__bar img { width: 20px; height: 22px; }
.kb-clean__list { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.kb-clean__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-xs, var(--shadow-sm)); }
.kb-clean__term { display: flex; align-items: baseline; gap: var(--space-2); }
.kb-clean__term b { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kb-clean__term b.kb-ja { font-family: var(--font-ja); font-weight: var(--fw-bold); }
.kb-clean__term .pr { font-size: var(--text-xs); color: var(--text-muted); }
.kb-clean__term .lv { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1-5); }
.kb-clean__term .lv .cefr { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--brand); background: var(--brand-tint); padding: 1px 7px; border-radius: var(--radius-pill); }
.kb-clean__term .lv .lg { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.kb-clean__mean { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.kb-clean__ex { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 2px; }
.kb-clean__ex .src { font-size: var(--text-xs); color: var(--text-primary); font-weight: var(--fw-semibold); line-height: 1.5; }
.kb-clean__ex .src.kb-ja { font-family: var(--font-ja); }
.kb-clean__ex .g { font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.4; }
.kb-clean__syn { margin: var(--space-2-5) 0 0; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }
.kb-clean__syn b { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-right: var(--space-1-5); }
.kb-clean__syn .kb-ja { font-family: var(--font-ja); }
.kb-clean__foot { margin-top: auto; padding: var(--space-2) var(--space-4) var(--space-4); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--brand); display: flex; align-items: center; gap: var(--space-2); }
.kb-clean__foot svg { width: 14px; height: 14px; }

/* ---------------- ChatGPT import: chat-fades / Koboshi-keeps demo ---------------- */
.kb-cg { width: 100%; max-width: 384px; display: grid; gap: var(--space-3); }
.kb-cg-chat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.kb-cg-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-secondary); }
.kb-cg-head .dot { width: 18px; height: 18px; border-radius: 50%; background: #10A37F; display: grid; place-items: center; }
.kb-cg-head .dot svg { width: 12px; height: 12px; color: #fff; }
.kb-cg-msgs { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-2); }
.kb-cg-msgs li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); background: var(--sand-50); border: 1px solid var(--border); }
.kb-cg-msgs li b { color: var(--text-primary); font-weight: var(--fw-bold); }
.kb-cg-msgs li.faded { opacity: 0.4; }
.kb-cg-msgs li.faded--more { opacity: 0.2; }
.kb-cg-foot { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }
.kb-cg-arrow { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand); }
.kb-cg-arrow svg { width: 18px; height: 18px; }
.kb-cg-saved { border: 1px solid color-mix(in oklch, var(--brand) 32%, var(--border)); border-radius: var(--radius-lg); background: var(--brand-tint); padding: var(--space-5); }
.kb-cg-saved__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.kb-cg-saved__head img { width: 40px; height: 44px; flex: none; }
.kb-cg-saved__head strong { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kb-cg-saved__chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.kb-cg-saved__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------------- vs Duolingo: sources -> one memory funnel ---------------- */
.kb-funnel { width: 100%; max-width: 384px; }
.kb-funnel__sources { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2-5); }
.kb-funnel__src { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.kb-funnel__src .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.kb-funnel__src .ico svg { width: 17px; height: 17px; }
.kb-funnel__pipe { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) 0; }
.kb-funnel__pipe svg { width: 26px; height: 26px; color: var(--brand); }
.kb-funnel__pipe span { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.kb-funnel__hub { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.kb-funnel__hub img { width: 52px; height: 57px; flex: none; }
.kb-funnel__hub b { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); display: block; line-height: 1.1; }
.kb-funnel__hub span { font-size: var(--text-sm); opacity: 0.86; }

/* ---------------- Blog: featured post ---------------- */
.kb-featured {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center;
  padding: var(--space-8); margin-bottom: var(--space-6);
  border-radius: var(--radius-xl); background: var(--brand); color: #fff;
  box-shadow: var(--shadow-brand); text-decoration: none; position: relative; overflow: hidden;
}
@media (max-width: 760px) { .kb-featured { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6); } }
.kb-featured::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.14), transparent 70%); }
.kb-featured__body { position: relative; z-index: 1; }
.kb-featured__kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-3); }
.kb-featured h2 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.6rem, 3vw, var(--text-3xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: #fff; margin: 0 0 var(--space-3); text-wrap: balance; }
.kb-featured p { margin: 0 0 var(--space-5); color: rgba(255,255,255,0.88); font-size: var(--text-base); line-height: var(--leading-normal); }
.kb-featured__read { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); font-size: var(--text-base); }
.kb-featured__read svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.kb-featured:hover .kb-featured__read svg { transform: translateX(4px); }
.kb-featured__art { position: relative; z-index: 1; display: grid; place-items: center; }
.kb-featured__art img { width: 150px; height: auto; }
@media (max-width: 760px) { .kb-featured__art { display: none; } }

/* blog post card: themed banner + mascot (per-article color set inline via --_c/--_t) */

/* ---------------- vs Anki: messy Anki note editor mock ---------------- */
.kb-anki { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; font-size: var(--text-xs); box-shadow: var(--shadow-sm); }
.kb-anki__rows { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-2-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.kb-anki__pill { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 2px var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--cream); white-space: nowrap; min-width: 0; max-width: 100%; }
.kb-anki__pill b { color: var(--text-primary); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kb-anki__pill svg { width: 11px; height: 11px; opacity: 0.6; }
.kb-anki__toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: var(--space-2) var(--space-2-5); border-bottom: 1px solid var(--border); background: var(--sand-50); }
.kb-anki__toolbar span { width: 20px; height: 20px; border-radius: 4px; background: var(--paper); border: 1px solid var(--border); display: grid; place-items: center; font-weight: var(--fw-bold); color: var(--text-muted); font-size: 10px; }
.kb-anki__toolbar span.it { font-style: italic; } .kb-anki__toolbar span.ul { text-decoration: underline; }
.kb-anki__field { padding: var(--space-2-5) var(--space-3); border-bottom: 1px dashed var(--border); }
.kb-anki__label { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); }
.kb-anki__val { color: var(--text-primary); line-height: var(--leading-normal); word-break: break-word; }
.kb-anki__val .raw { color: var(--lang-es); font-family: ui-monospace, Menlo, monospace; font-size: 10px; opacity: 0.8; }
.kb-anki__tags { padding: var(--space-2-5) var(--space-3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kb-anki__tags .tg { padding: 1px var(--space-1-5); border-radius: var(--radius-sm); background: var(--sand-100); color: var(--text-muted); font-size: 10px; }

/* ---------------- Heritage: word-card example, synonyms, recall ---------------- */
.kb-word__ex {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}
.kb-word__ex-term { font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.45; }
.kb-word__ex-term.kb-ar { font-size: var(--text-lg); line-height: 1.7; }
.kb-word__ex-gloss { font-size: var(--text-sm); color: var(--text-muted); }
.kb-word__syn { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.kb-word__syn b { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-right: var(--space-2); }
.kb-word__syn .kb-ja { font-family: var(--font-ja); }
/* enriched Koboshi word card: audio + cross-language row */
.kb-word__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.kb-word__audio { display: inline-flex; align-items: center; gap: var(--space-1-5); border: 1px solid var(--border-strong); background: var(--bg-card); border-radius: var(--radius-pill); padding: 3px var(--space-2-5); font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--brand); }
.kb-word__audio svg { width: 13px; height: 13px; }
.kb-word__also { font-size: var(--text-xs); color: var(--text-secondary); }
.kb-word__also b { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-right: var(--space-1-5); }
.kb-word__recall {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--text-muted);
}
.kb-word__recall .lvl { display: inline-flex; align-items: center; gap: var(--space-1-5); margin-left: auto; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-2xs); }
.kb-word__recall .lvl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lvl--retained { background: var(--success-tint, #E6F2EC); color: var(--success, #1F8A5B); }
.lvl--weak { background: #FBF0DD; color: #B7791F; }
.lvl--new { background: var(--brand-tint); color: var(--brand); }

/* ---------------- Heritage: multi-flag places cards ---------------- */
.kb-places--rich .disc img.emoji { height: 1.7rem; width: 1.7rem; }
.pl-flags { display: flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-2); }
.pl-flags img.emoji { height: 1.05rem; width: 1.05rem; margin: 0; }
.pl-flags .plus { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--text-muted); margin-right: 1px; }

/* in-development ribbon for feature cards */
.kb-feature { position: relative; }
.kb-soon {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--gold-dark, #92670C);
  background: #FBF0DD; padding: 3px var(--space-2); border-radius: var(--radius-pill);
}

/* ---------------- Heritage: hero head + cycling avatar ---------------- */
.kb-hero__head { max-width: 820px; }
.kb-hero__eyebrow-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kb-hero__eyebrow-row .kb-eyebrow { margin: 0; }
.kb-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--cream); border: 1px solid var(--border-strong);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); overflow: hidden;
}
.kb-avatar img { width: 34px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .kb-avatar.is-swap img { animation: kb-avatar-swap 0.5s var(--ease-out); }
}
@keyframes kb-avatar-swap { 0% { opacity: 0; transform: rotate(-28deg) scale(0.78); } 100% { opacity: 1; transform: none; } }

/* ---------------- Heritage: showcase (cards | phone) ---------------- */
.kb-showcase {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--bg-card); box-shadow: var(--shadow-md); overflow: hidden;
}
@media (max-width: 900px) { .kb-showcase { grid-template-columns: 1fr; } }
.kb-showcase__panel { padding: var(--space-8); }
.kb-showcase__panel--cards { display: flex; flex-direction: column; justify-content: center; }
.kb-showcase__panel--phone {
  border-left: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 80% 0%, var(--brand-tint), transparent 60%),
    var(--sand-50);
  display: grid; place-items: center;
}
@media (max-width: 900px) { .kb-showcase__panel--phone { border-left: 0; border-top: 1px solid var(--border); } }
.kb-showcase__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.kb-showcase__head strong { display: block; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-lg); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.kb-showcase__head .kb-reg-eyebrow { display: block; }
.kb-showcase__cards { display: flex; flex-direction: column; gap: var(--space-3); }

/* compact register card — uses horizontal width, ~3 rows */
.kb-rw {
  border: 1px solid var(--border); border-left: 3px solid var(--lang-ur);
  border-radius: var(--radius-md); background: var(--bg-card); padding: var(--space-3) var(--space-4);
}
.kb-rw__top { display: flex; align-items: baseline; gap: var(--space-2-5); }
.kb-rw__term { font-size: var(--text-lg); line-height: 1.6; }
.kb-rw__pron { font-size: var(--text-sm); color: var(--text-muted); }
.kb-rw__chips { margin-left: auto; display: flex; align-items: center; gap: var(--space-1-5); flex: none; }
.kb-rw__chips .lt-tag { font-size: var(--text-2xs); }
.kb-rw__mid { margin-top: var(--space-1); font-size: var(--text-base); color: var(--text-secondary); }
.kb-rw__mid b { color: var(--text-primary); font-weight: var(--fw-bold); }
.kb-rw__mid .ex { color: var(--text-muted); }
.kb-rw__bot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.kb-rw__bot .syn b { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-right: var(--space-1-5); }

/* phone mockup */
.kb-phone { width: 264px; border-radius: 36px; background: #0A0A0A; padding: 9px; box-shadow: var(--shadow-xl); }
.kb-phone__screen { position: relative; border-radius: 28px; background: var(--cream); overflow: hidden; height: 516px; display: flex; flex-direction: column; }
.kb-phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #0A0A0A; border-radius: 0 0 14px 14px; z-index: 3; }
.kb-phone__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-3); }
.kb-phone__bar .pico { width: 24px; height: 24px; border-radius: 7px; }
.kb-phone__bar b { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.kb-phone__search { margin: 0 var(--space-4) var(--space-3); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.kb-phone__search svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.kb-phone__search .cursor { margin-left: auto; width: 2px; height: 15px; background: var(--brand); border-radius: 2px; }
.kb-phone__body { flex: 1; overflow: hidden; padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2-5); }
.kb-pcard { border: 1px solid var(--border); border-left: 3px solid var(--lang-ur); border-radius: var(--radius-md); background: var(--paper); padding: var(--space-3); box-shadow: var(--shadow-sm); }
.kb-pcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.kb-pcard__term { font-size: var(--text-base); line-height: 1.6; }
.kb-pcard__tag { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--lang-ur); background: var(--lang-ur-tint); padding: 2px var(--space-1-5); border-radius: var(--radius-sm); flex: none; }
.kb-pcard__pron { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 1px; }
.kb-pcard__gloss { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1-5); }
.kb-phone__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.kb-phone__foot img { width: 30px; height: auto; }
.kb-phone__foot span { font-size: var(--text-2xs); color: var(--text-muted); font-weight: var(--fw-semibold); }