/* Kaizen R/W - unified marketing site styles.
   Builds on colors_and_type.css. Re-uses the suite/ design language
   (paper grain, sticky topbar, italic em, monogram), and adds the
   marketing patterns (split, shot-frame, FAQ, CTA strip). */

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--tx-ui-sm);
  z-index: 200;
}
.skip-link:focus { top: 8px; }

/* ---- Paper grain overlay (suite signature) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
  mix-blend-mode: soft-light;
  opacity: 0.15;
}

main, header, footer { position: relative; z-index: 1; }

/* =============================================================
   Layout shells
   ============================================================= */
.shell        { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-7); }
.shell-wide   { max-width: 1320px; margin: 0 auto; padding: 0 var(--s-7); }
.shell-narrow { max-width: 760px;  margin: 0 auto; padding: 0 var(--s-7); }

/* =============================================================
   Topbar
   ============================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-7);
  background: rgb(245 242 236 / 0.85);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: var(--border-hair);
}
[data-theme="dark"] .topbar { background: rgb(26 22 20 / 0.85); }

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
/* Suite wordmark - matches suite/ design system: typographic K + name + italic suffix */
.brand-mark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.brand-mark .acc {
  color: var(--accent, var(--ink));
}
body[data-product="kw"]  .brand { --accent: var(--kw-accent); }
body[data-product="kr"]  .brand { --accent: var(--kr-accent); }
body[data-product="krw"] .brand { --accent: var(--krw-accent); }
.brand-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
}
.brand-suite {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--red-pen);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
}
.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 180ms var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active {
  color: var(--ink);
}
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent, var(--red-pen));
}

/* Per-product nav underline color */
body[data-product="kw"]  .site-nav a.is-active { --accent: var(--kw-accent); }
body[data-product="kr"]  .site-nav a.is-active { --accent: var(--kr-accent); }
body[data-product="krw"] .site-nav a.is-active { --accent: var(--krw-accent); }

.nav-cta {
  font-family: var(--font-ui) !important;
  font-weight: 500;
  color: var(--ink) !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: var(--radius-pill);
  padding: 6px 14px !important;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--paper) !important;
  border-color: var(--ink);
}
.nav-cta::after { display: none !important; }

.theme-toggle {
  font-family: var(--font-ui);
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: var(--radius-pill);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: rgb(var(--ink-rgb) / 0.32);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--red-pen);
  outline-offset: 2px;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
}

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    padding: var(--s-5) var(--s-7);
    border-bottom: var(--border-hair);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav a {
    padding: 12px 0;
    border-bottom: var(--border-hair);
    font-size: 0.95rem;
  }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-cta { margin-top: var(--s-3); align-self: flex-start; }
}

/* =============================================================
   Buttons (shared)
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--tx-ui);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 180ms var(--ease);
  white-space: nowrap;
}
.btn-arrow {
  background: var(--red-pen);
  color: #fff8f0;
  border-color: var(--red-pen);
  box-shadow: var(--shadow-cta);
}
.btn-arrow::after {
  content: "→";
  margin-left: 4px;
  transition: transform 180ms var(--ease);
}
.btn-arrow:hover {
  background: var(--red-pen-soft);
  border-color: var(--red-pen-soft);
  color: #fff8f0;
}
.btn-arrow:hover::after { transform: translateX(3px); }

.btn-cta {
  background: var(--accent-gold);
  color: var(--cta-ink);
  border-radius: var(--radius-pill);
  border-color: var(--accent-gold);
  padding: 12px 26px;
  font-weight: 600;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgb(var(--ink-rgb) / 0.12); color: var(--cta-ink); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: rgb(var(--ink-rgb) / 0.2);
}
.btn-secondary:hover { background: rgb(var(--ink-rgb) / 0.04); color: var(--ink); }

.btn-link {
  font-family: var(--font-ui);
  font-size: var(--tx-ui);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 11px 4px;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn-link:hover { color: var(--ink); border-color: var(--ink-faint); }

/* =============================================================
   Hero
   ============================================================= */
.hero {
  padding: var(--s-10) 0 var(--s-9);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-6);
}
.hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
}
body[data-product="kw"]  .hero-eyebrow::before { background: var(--kw-accent); }
body[data-product="kr"]  .hero-eyebrow::before { background: var(--kr-accent); }
body[data-product="krw"] .hero-eyebrow::before { background: var(--krw-accent); }

.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0 0 var(--s-6);
  max-width: 18ch;
}
.hero h1 em { font-style: italic; color: var(--red-pen); font-weight: 400; }
.hero-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.18rem, 1.8vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 var(--s-7);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

/* Hero with monogram (homepage) */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-monogram-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-7);
  min-height: 360px;
}
.hero-monogram-figure::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(circle at 60% 50%, var(--accent-gold-soft) 0%, transparent 65%);
  pointer-events: none;
}
.hero-monogram {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
}
.hero-monogram img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 12px 40px rgb(var(--ink-rgb) / 0.08));
}
[data-theme="dark"] .hero-monogram img {
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 12px 40px rgb(0 0 0 / 0.4));
}
.hero-monogram-caption {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
}
.hero-monogram-caption span { display: inline-flex; align-items: center; gap: 6px; }
.hero-monogram-caption span::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.hero-monogram-caption .ck { color: var(--kw-accent); }
.hero-monogram-caption .cr { color: var(--kr-accent); }
.hero-monogram-caption .cw { color: var(--red-pen); }

/* Hero meta - small definition list shown beneath the lede */
.hero-meta {
  display: flex;
  gap: var(--s-7);
  margin-top: var(--s-7);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  flex-wrap: wrap;
}
.hero-meta div { min-width: 0; }
.hero-meta dt {
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-size: var(--tx-meta);
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.hero-meta dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

/* =============================================================
   Sections (philosophy, generic, etc.)
   ============================================================= */
.section { padding: var(--s-10) 0; border-top: var(--border-hair); }
.section-tight { padding: var(--s-9) 0; border-top: var(--border-hair); }
.section:first-of-type, .section-tight:first-of-type { border-top: 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-9);
  max-width: 880px;
}
.section-head .eyebrow { display: block; margin-bottom: 6px; }
.section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin: 0 0 var(--s-4);
  max-width: 22ch;
}
.section-head h2 em { font-style: italic; color: var(--red-pen); font-weight: 400; }
.section-head .lede {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* =============================================================
   Philosophy block
   ============================================================= */
.philosophy {
  padding: var(--s-10) 0;
  background: rgb(var(--hi-rgb) / 0.4);
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}
[data-theme="dark"] .philosophy { background: var(--paper-warm); }
.philosophy-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.36;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  max-width: 28ch;
}
.philosophy-text em { color: var(--red-pen); font-style: italic; }
.philosophy-sig {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
  margin: 0;
}

/* =============================================================
   Suite product grid (homepage)
   ============================================================= */
.suite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-7);
}
@media (min-width: 880px) { .suite-grid { grid-template-columns: repeat(3, 1fr); } }

.suite-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: rgb(var(--hi-rgb) / 0.55);
  border: var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
[data-theme="dark"] .suite-card { background: var(--paper-warm); }
.suite-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--ink-rgb) / 0.18);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}
.suite-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.suite-card .pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--accent-gold));
}
.suite-card.is-kw  { --accent: var(--kw-accent); }
.suite-card.is-kr  { --accent: var(--kr-accent); }
.suite-card.is-krw { --accent: var(--krw-accent); }

.suite-card h3 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.suite-card h3 .full {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.suite-card .accent-rule {
  height: 2px;
  background: var(--accent);
  width: 32px;
  border-radius: 999px;
}
.suite-card p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.suite-card .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.16rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
  max-width: 22ch;
}
.suite-card .tagline em { color: var(--accent); font-style: italic; }
.suite-card .suite-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: var(--border-hair);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
}
.suite-card .suite-card-foot .arrow {
  color: var(--accent);
  font-family: var(--font-ui);
  transition: transform 200ms var(--ease);
}
.suite-card:hover .suite-card-foot .arrow { transform: translateX(4px); }

/* =============================================================
   The journey arc - 3-step Before / During / After
   ============================================================= */
.journey {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-5);
  background: rgb(var(--hi-rgb) / 0.4);
  border: var(--border-hair);
  border-radius: var(--radius-md);
}
[data-theme="dark"] .journey { background: var(--paper-warm); }
@media (min-width: 760px) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .journey::after {
    content: "";
    position: absolute;
    left: 16%; right: 16%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--ink-rgb) / 0.18), transparent);
    z-index: 0;
  }
}
.journey-step {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--paper);
  padding: var(--s-4) var(--s-4);
}
[data-theme="dark"] .journey-step { background: var(--paper-warm); }
.journey-step .stage {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.journey-step .verb {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.2;
}
.journey-step .verb b { font-style: normal; font-weight: 400; }
.journey-step .verb em { color: var(--acc); font-style: italic; }
.journey-step.s1 { --acc: var(--kw-accent); }
.journey-step.s2 { --acc: var(--kr-accent); }
.journey-step.s3 { --acc: var(--krw-accent); }
.journey-step .who {
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  margin-top: 8px;
  line-height: 1.45;
}

/* =============================================================
   Spine typography classes (AC-7 + D-DESIGN-9 in run 2026-05-11-1812)
   - .suite-spine: page-lead teach block on the suite homepage chooser
   - .hero-philosophy: between eyebrow and H1 on per-app landings
   - .hero-spine-tail: sub-hero italic line under .hero-lede on suite homepage
   ============================================================= */
.suite-spine {
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 2.2vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: var(--s-7) auto var(--s-8);
  text-align: center;
  letter-spacing: 0.005em;
}
.suite-spine em {
  font-style: italic;
  color: var(--red-pen);
}

.hero-philosophy {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0 0 var(--s-5);
  max-width: 44ch;
  letter-spacing: 0.002em;
}

.hero-spine-tail {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0 0 var(--s-6);
  max-width: 48ch;
  letter-spacing: 0.002em;
}

/* =============================================================
   Quote section
   ============================================================= */
.quote-section {
  padding: var(--s-10) 0;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}
.quote-section blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  border: 0;
  max-width: none;
}
.quote-section blockquote em { color: var(--red-pen-soft); font-style: italic; }
.quote-section blockquote::before {
  content: "“";
  display: inline;
  color: var(--ink-faint);
  font-size: 1.4em;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -0.25em;
}
.quote-cite {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
}

/* =============================================================
   Longform copy
   ============================================================= */
.longform p {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  max-width: 60ch;
}
.longform p em { color: var(--red-pen-soft); font-style: italic; }
.longform h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.longform h3 em { color: var(--red-pen); font-style: italic; }

/* =============================================================
   Trio cards (3-up principle / hand-off)
   ============================================================= */
.trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }

.trio-card {
  padding: var(--s-6);
  background: rgb(var(--hi-rgb) / 0.45);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
[data-theme="dark"] .trio-card { background: var(--paper-warm); }
.trio-card .eyebrow { color: var(--ink-faint); }
.trio-card h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}
.trio-card h4 em { color: var(--red-pen); font-style: italic; }
.trio-card p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.trio-card p em { color: var(--red-pen-soft); font-style: italic; }

/* =============================================================
   Split (text + figure)
   ============================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split.flip > .split-text { order: 2; }
}
.split-text h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: var(--s-3) 0 var(--s-4); }
.split-text h2 em { color: var(--red-pen); font-style: italic; font-weight: 400; }
.split-text p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  max-width: 52ch;
}
.split-text p em { color: var(--red-pen-soft); font-style: italic; }
.split-text p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
}
.split-text p a:hover { color: var(--red-pen); text-decoration-color: var(--red-pen-soft); }

/* Shot frame - the small annotated mock */
.shot-frame {
  position: relative;
  background: var(--paper);
  border: var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
[data-theme="dark"] .shot-frame { background: var(--paper); }
.shot-frame::before {
  content: "";
  display: block;
  height: 28px;
  background: rgb(var(--ink-rgb) / 0.04);
  border-bottom: var(--border-hair);
  background-image:
    radial-gradient(circle at 14px 14px, rgb(var(--ink-rgb) / 0.18) 4px, transparent 5px),
    radial-gradient(circle at 32px 14px, rgb(var(--ink-rgb) / 0.12) 4px, transparent 5px),
    radial-gradient(circle at 50px 14px, rgb(var(--ink-rgb) / 0.08) 4px, transparent 5px);
  background-repeat: no-repeat;
}
.shot-body { background: var(--paper); }
figure { margin: 0; }
.shot-caption {
  margin-top: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  text-align: center;
}

/* =============================================================
   Voice / Do-Don't (lifted from suite)
   ============================================================= */
.voice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 720px) { .voice-grid { grid-template-columns: 1fr 1fr; } }
.voice-col {
  background: rgb(var(--hi-rgb) / 0.4);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--s-6);
}
[data-theme="dark"] .voice-col { background: var(--paper-warm); }
.voice-col .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
}
.voice-col.do .head { color: var(--mark-continuity); }
.voice-col.dont .head { color: var(--red-pen); }
.voice-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.voice-col li {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.voice-col li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
}
.voice-col.do li::before  { content: "-"; color: var(--mark-continuity); }
.voice-col.dont li::before { content: "×"; color: var(--red-pen); }

/* =============================================================
   FAQ (details/summary)
   ============================================================= */
.faq-list {
  display: flex; flex-direction: column;
  border-top: var(--border-hair);
}
.faq-item {
  border-bottom: var(--border-hair);
  padding: var(--s-5) 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  padding-right: 8px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-size: 1.4rem;
  color: var(--ink-faint);
  transition: transform 200ms var(--ease);
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; color: var(--red-pen); }
.faq-item p {
  margin: var(--s-4) 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}
.faq-item p em { color: var(--red-pen-soft); font-style: italic; }
.faq-item p a { color: var(--ink); text-decoration-color: var(--ink-faint); }
.faq-item p a:hover { color: var(--red-pen); }

/* =============================================================
   CTA strip
   ============================================================= */
.cta-strip {
  padding: var(--s-10) 0;
  background: rgb(var(--hi-rgb) / 0.5);
  border-top: var(--border-hair);
  text-align: center;
}
[data-theme="dark"] .cta-strip { background: var(--paper-warm); }
.cta-strip h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 300;
  margin: 0 0 var(--s-6);
}
.cta-strip h2 em { color: var(--red-pen); font-style: italic; font-weight: 400; }

.cta-form {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.suite-cta-row {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.cta-form input {
  font-family: var(--font-ui);
  font-size: var(--tx-ui);
  padding: 11px 16px;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  width: 320px;
  max-width: 100%;
  transition: border-color 180ms var(--ease);
}
.cta-form input:focus {
  outline: none;
  border-color: var(--red-pen);
}
.cta-form button {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--tx-ui);
  font-weight: 500;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.cta-form button:hover { background: var(--red-pen); border-color: var(--red-pen); }
.cta-fineprint {
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  /* Auto-center: the global `p { max-width: 65ch }` rule caps width for
     readability but doesn't center the box. Without margin-inline auto
     the p sits left-aligned in the shell and the centered text appears
     well left of the page, not center. */
  margin: 0 auto;
}
.cta-status {
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  margin: var(--s-3) auto 0;
  min-height: 1.2em;
  text-align: center;
  transition: color 180ms var(--ease);
}
.cta-status.is-error { color: var(--red-pen); }
.cta-status.is-success { color: var(--ink-body); }
.cta-form input[aria-invalid="true"] { border-color: var(--red-pen); }
.cta-form button:disabled { opacity: 0.6; cursor: progress; }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  margin-top: 0;
  padding: var(--s-9) 0 var(--s-8);
  border-top: var(--border-hair);
  background: var(--paper);
  position: relative; z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  padding-bottom: var(--s-7);
  border-bottom: var(--border-hair);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid h5 {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: var(--ink-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-tag {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 32ch;
  line-height: 1.5;
  margin: var(--s-3) 0 0;
}
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer-base span:last-child { text-transform: none; letter-spacing: 0; }

/* =============================================================
   Mark categories (homepage section)
   ============================================================= */
.marks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.mark-card {
  padding: var(--s-5);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: rgb(var(--hi-rgb) / 0.5);
}
[data-theme="dark"] .mark-card { background: var(--paper-warm); }
.mark-card .label {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--cat);
  font-weight: 500;
  margin-bottom: 10px;
}
.mark-card .sample {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink);
}
.mark-card .sample .mk {
  color: var(--cat);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mark-card .gloss {
  margin-top: var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
  padding-top: var(--s-3);
  border-top: var(--border-hair);
}
.mark-card.repetition  { --cat: var(--mark-repetition); }
.mark-card.pacing      { --cat: var(--mark-pacing); }
.mark-card.style       { --cat: var(--mark-style); }
.mark-card.voice       { --cat: var(--mark-voice); }
.mark-card.continuity  { --cat: var(--mark-continuity); }
.mark-card.interiority { --cat: var(--mark-interiority); }

/* =============================================================
   Reveal-on-scroll
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* =============================================================
   Section anchor offset for sticky bar
   ============================================================= */
section[id] { scroll-margin-top: 80px; }

/* =============================================================
   Product hero accent - banner above the hero on product pages
   ============================================================= */
.product-rail {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-faint);
  padding: var(--s-5) 0 0;
}
.product-rail::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.product-rail .stage { color: var(--accent); font-weight: 500; }
body[data-product="kw"]  .product-rail { --accent: var(--kw-accent); }
body[data-product="kr"]  .product-rail { --accent: var(--kr-accent); }
body[data-product="krw"] .product-rail { --accent: var(--krw-accent); }

/* Status pills - sit at the end of the product-rail */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
}
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-early { color: var(--mark-pacing); }
.status-dev   { color: var(--mark-style); }
.status-prod  { color: var(--mark-continuity); }

/* =============================================================
   Reader page - wide shot
   ============================================================= */
.shot-frame.shot-wide { max-width: none; }

/* =============================================================
   Reader page - "It learns" pass-comparison cards
   ============================================================= */
.learn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
}
@media (max-width: 900px) {
  .learn-row { grid-template-columns: 1fr; }
}
.learn-card {
  background: var(--paper-warm);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.learn-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--krw-accent);
  opacity: 0.18;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.learn-card:nth-child(1)::before { opacity: 0.92; }
.learn-card:nth-child(2)::before { opacity: 0.55; }
.learn-card:nth-child(3)::before { opacity: 0.22; }
.learn-stage {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--krw-accent);
  font-weight: 500;
}
.learn-bar {
  height: 6px;
  background: rgb(var(--ink-rgb) / 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.learn-bar > span {
  display: block;
  height: 100%;
  background: var(--krw-accent);
  border-radius: 999px;
}
.learn-figure {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.learn-card p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* =============================================================
   Reader page - Teach card
   ============================================================= */
.teach-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
  background: var(--paper);
  border: var(--border-hair);
  border-left: 3px solid var(--krw-accent);
  border-radius: var(--radius-md);
  padding: var(--s-7);
}
@media (max-width: 900px) {
  .teach-card { grid-template-columns: 1fr; gap: var(--s-5); }
}
.teach-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
}
.teach-card p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.teach-example {
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border: var(--border-hair);
}
.teach-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.teach-mark .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.teach-mark .label { font-weight: 500; }
.teach-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  padding-left: 12px;
  border-left: 2px solid rgb(var(--ink-rgb) / 0.18);
  line-height: 1.55;
}
.teach-reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
}
.teach-reply .prompt {
  color: var(--krw-accent);
  font-weight: 500;
}
.teach-reply .reply {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: normal;
}
.teach-reply .reply em {
  font-style: italic;
}
.teach-foot {
  margin-top: 4px;
  padding-top: var(--s-3);
  border-top: var(--border-hair);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =============================================================
   Keyboard cap
   ============================================================= */
.kbd {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border: 1px solid rgb(var(--ink-rgb) / 0.22);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.4;
  vertical-align: 1px;
}

/* Suite-card product-mark glyph (Kw / Kr / Kr/w).
   Ported from suite/components.jsx ProductMark + suite/styles.css.
   K is accented in the per-product color; trailing letters in default ink. */
.suite-card .suite-card-mark {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.04em;
  display: inline-block;
  margin-bottom: var(--s-3);
}
.suite-card .suite-card-mark .acc { color: var(--accent); }

/* ============================================================
   Suite strip + sibling-tool nav (canonical product-mark style)
   Lifted from kaizenrw-site/reader/styles.css (see lines 1702 and on)
   so the suite-level marketing pages (index, weaver, rewriter)
   render the strip the same way the reader marketing page does.
   ============================================================ */
.kw-suite-strip {
  margin: 0;
  padding: 8px 24px;
  background: #ede6d9;
  border-bottom: 1px solid rgba(44, 42, 38, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e6355;
  position: relative;
  z-index: 100;
}
.kw-suite-strip a, .kw-suite-strip .kw-tool {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.kw-suite-strip a:hover, .kw-suite-strip a:focus-visible,
.kw-suite-strip .kw-tool:not(.is-current):hover { color: #2c2a26; }
.kw-suite-home { display: inline-flex; align-items: center; gap: 10px; }
.kw-suite-glyph {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px; font-weight: 500; letter-spacing: -0.04em;
  color: #4e473f; line-height: 1; text-transform: none;
}
.kw-suite-text strong { font-weight: 600; color: #4e473f; }
.kw-suite-arrow {
  margin-left: 2px; opacity: 0.5;
  transition: transform 160ms ease, opacity 160ms ease;
}
.kw-suite-home:hover .kw-suite-arrow { transform: translateX(-2px); opacity: 1; }
.kw-suite-sibs { display: inline-flex; align-items: center; gap: 16px; font-size: 10.5px; letter-spacing: 0.12em; }
.kw-tool { display: inline-flex; align-items: baseline; gap: 6px; }
.kw-tool-glyph {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; font-weight: 500; letter-spacing: -0.04em;
  line-height: 1; color: #4e473f; text-transform: none;
}
.kw-tool-glyph .kw-acc { color: var(--kw-tool-accent, #4e473f); }
.kw-is-kw  { --kw-tool-accent: #566a8e; }
.kw-is-kr  { --kw-tool-accent: #7a5290; }
.kw-is-krw { --kw-tool-accent: #b04040; }
.kw-tool.is-current { cursor: default; }
.kw-tool.is-current .kw-tool-name { color: #2c2a26; font-weight: 500; }
.kw-tool.is-current .kw-tool-glyph { color: #2c2a26; }
@media (max-width: 720px) {
  .kw-suite-strip { padding: 7px 16px; font-size: 10px; }
  .kw-tool-name { display: none; }
  .kw-suite-text { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.theme-light) .kw-suite-strip {
    background: #221d1a; border-bottom-color: rgba(245, 242, 236, 0.08); color: #b0a595;
  }
  :root:not([data-theme="light"]):not(.theme-light) .kw-suite-strip a:hover,
  :root:not([data-theme="light"]):not(.theme-light) .kw-suite-strip strong,
  :root:not([data-theme="light"]):not(.theme-light) .kw-tool.is-current .kw-tool-name,
  :root:not([data-theme="light"]):not(.theme-light) .kw-tool.is-current .kw-tool-glyph,
  :root:not([data-theme="light"]):not(.theme-light) .kw-suite-glyph,
  :root:not([data-theme="light"]):not(.theme-light) .kw-tool-glyph { color: #f5f2ec; }
  :root:not([data-theme="light"]):not(.theme-light) .kw-is-kw  { --kw-tool-accent: #b0caf0; }
  :root:not([data-theme="light"]):not(.theme-light) .kw-is-kr  { --kw-tool-accent: #d2ace8; }
  :root:not([data-theme="light"]):not(.theme-light) .kw-is-krw { --kw-tool-accent: #d06050; }
}
[data-theme="dark"] .kw-suite-strip, .theme-dark .kw-suite-strip {
  background: #221d1a; border-bottom-color: rgba(245, 242, 236, 0.08); color: #b0a595;
}
[data-theme="dark"] .kw-suite-strip a:hover, .theme-dark .kw-suite-strip a:hover,
[data-theme="dark"] .kw-suite-strip strong, .theme-dark .kw-suite-strip strong,
[data-theme="dark"] .kw-tool.is-current .kw-tool-name, .theme-dark .kw-tool.is-current .kw-tool-name,
[data-theme="dark"] .kw-tool.is-current .kw-tool-glyph, .theme-dark .kw-tool.is-current .kw-tool-glyph,
[data-theme="dark"] .kw-suite-glyph, .theme-dark .kw-suite-glyph,
[data-theme="dark"] .kw-tool-glyph, .theme-dark .kw-tool-glyph { color: #f5f2ec; }
[data-theme="dark"] .kw-is-kw, .theme-dark .kw-is-kw   { --kw-tool-accent: #b0caf0; }
[data-theme="dark"] .kw-is-kr, .theme-dark .kw-is-kr   { --kw-tool-accent: #d2ace8; }
[data-theme="dark"] .kw-is-krw, .theme-dark .kw-is-krw { --kw-tool-accent: #d06050; }

/* ============================================================
   Who-it's-for / Cost list
   Used by the "Who Weaver is for" and "Cost" sections on
   weaver.html and rewriter.html. Mirrors the .who-list shape
   in kaizenrw-site/reader/styles.css with the suite-level
   variable names (--font-ui instead of --sans).
   ============================================================ */
.who-list { list-style: none; display: grid; gap: 2px; padding: 0; margin: 0; }
.who-list li {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 16px 22px;
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  gap: 14px;
}
.who-list li:first-child { border-radius: 14px 14px 0 0; }
.who-list li:last-child  { border-radius: 0 0 14px 14px; }
.who-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  flex-shrink: 0;
}