/*
 * KaKeKiKoKu — home only, loaded after styles.css.
 * September 2026: an editorial layout using the existing palette and assets.
 * Shared scripts own all canvas, reveal, hover, carousel and lightbox effects.
 */

/* Measure, typography and small interface details */
.page-home {
  --home-measure: 1248px;
  --home-gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --home-space: clamp(4rem, 7vw, 7rem);
}
.page-home .container {
  max-width: var(--home-measure);
  padding-inline: var(--home-gutter);
}
.page-home section { padding-block: var(--home-space); }
.page-home h1, .page-home h2, .page-home h3 { text-wrap: balance; }
.page-home .section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.page-home .title-center { text-align: left; }
.page-home .section-intro, .page-home .lead-center {
  max-width: 680px;
  text-align: left;
  margin: 0 0 2.75rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  opacity: 0.85;
}
.page-home .section-text { font-size: 1rem; line-height: 1.8; }
.page-home .section-text.muted { opacity: 0.75; font-style: normal; }
.page-home .section-badge {
  margin: 0 0 1.75rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}
.page-home .block-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;
  margin-bottom: 1.15rem;
}
.page-home .emphasis { font-weight: 600; }
.page-home .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.page-home a:focus-visible, .page-home button:focus-visible,
.page-home summary:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 5px;
}
.page-home :is(#missing-layer, #problems, #solutions) { scroll-margin-top: 76px; }

/* A quiet masthead and a complete, legible transition notice */
.page-home .site-nav { padding-block: 0.75rem; }
.page-home .nav-links { gap: 0.5rem 1.6rem; }
.page-home .nav-links a, .page-home .nav-more-toggle {
  font-size: 0.875rem;
  color: #b0b0b0;
}
.page-home .nav-links a:hover, .page-home .nav-more-toggle:hover { color: #fff; }
.page-home .nav-links a.active { color: #4da6ff; }
.page-home .transition-notice { padding: 0; text-align: left; }
.transition-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 265px;
  gap: 2rem;
  align-items: center;
  padding-block: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.transition-tail { padding-left: 1.75rem; border-left: 1px solid rgba(24,37,54,0.2); }
.transition-tail a { display: inline-block; white-space: nowrap; }

/* Hero: message first, brand as a companion */
.page-home header.hero { padding-block: clamp(3.75rem, 6vw, 6rem); }
.page-home .hero-heading {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 29%);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  margin: 0;
}
.page-home .hero-heading-text { min-width: 0; text-align: left; }
.page-home .hero-heading h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.055em;
  margin: 0 0 1.75rem;
  text-align: left;
}
.hero-badge-col { display: flex; justify-content: flex-end; min-width: 0; }
.page-home .hero-logo { width: 100%; max-width: 300px; }
.hero-release-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 2rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(77,166,255,0.45);
  color: #8fc7ff;
  font-size: 0.8125rem;
  line-height: 1.6;
  transition: color 0.2s, border-color 0.2s;
}
.hero-release-badge:hover { color: #fff; border-color: #6ec6ff; }
.hero-audience {
  max-width: 580px;
  font-size: 0.9375rem;
  line-height: 1.65;
  font-style: normal;
  color: rgba(240,240,240,0.72);
  margin: 0 0 1rem;
}
.page-home .hero-heading .hero-description {
  max-width: 620px;
  font-size: 1.125rem;
  line-height: 1.75;
  text-align: left;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.page-home .cta-btn--ghost {
  background: transparent;
  color: #cfe6ff;
  border: 1px solid rgba(77,166,255,0.45);
}
.page-home .cta-btn--ghost:hover { color: #fff; background: rgba(77,166,255,0.12); }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.8125rem;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-trust svg { width: 14px; height: 14px; color: #4da6ff; flex-shrink: 0; }

/* The missing layer: aligned comparison axes, no independent floating cards */
.page-home #missing-layer .section-title { max-width: 830px; }
.layer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  margin-top: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.layer-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 5;
  min-width: 0;
  padding: 1.4rem 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: border-color 0.25s, transform 0.25s;
}
.layer-card:first-child { padding-left: 0; }
.layer-card:last-child { border-right: 0; }
.layer-card:hover { border-top-color: #4da6ff; transform: translateY(-2px); }
.layer-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.45; margin: 0 0 0.45rem; color: #e8e8e8; }
.layer-kicker { font-size: 0.8125rem; color: #a0a0a0; margin-bottom: 1.35rem; }
.layer-axis {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 3 / span 3;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #b0b0b0;
}
.layer-axis li { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.1rem; }
.layer-axis strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #909090;
}
.layer-card--wuniq {
  border-top: 2px solid #4da6ff;
  background: linear-gradient(180deg, rgba(77,166,255,0.09), rgba(77,166,255,0.03));
}
.layer-card--wuniq h3, .layer-card--wuniq .layer-axis strong { color: #8fc7ff; }
.layer-card--wuniq .layer-axis { color: #e0e0e0; }
.layer-closing {
  max-width: 780px;
  margin: 2rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #b0b0b0;
}
.layer-closing em { color: #4da6ff; font-style: normal; font-weight: 500; }
.layer-closing a { text-decoration: underline; text-underline-offset: 0.25em; }

/* The thesis: a margin statement and an easy reading column */
.page-home .paradigm { text-align: left; }
.page-home .paradigm > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.page-home .paradigm-icon { margin-bottom: 1.5rem; }
.page-home .paradigm h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.page-home .paradigm p { font-size: 1rem; margin: 0 0 1.35rem; max-width: none; opacity: 0.82; }

/* Separate conversations feed one continuous, cumulative project memory. */
.session-memory {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  border: 1px solid #2b3d50;
  border-radius: 12px;
  background: #101a25;
  color: #e7eef5;
  scroll-margin-top: 6rem;
}
.session-memory figcaption { display: grid; grid-template-columns: 1fr auto; gap: .75rem 2rem; margin-bottom: 2.5rem; }
.diagram-kicker { display: block; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.session-memory figcaption .diagram-kicker { grid-column: 1 / -1; color: #8cbef1; }
.session-memory figcaption > strong { font-size: clamp(1.6rem, 2.8vw, 2.35rem); line-height: 1.17; letter-spacing: -.035em; font-weight: 500; }
.session-caption-note { align-self: end; color: #a7b8c9; font-size: .9375rem; line-height: 1.65; }
.session-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.session-flow > li { min-width: 0; display: grid; grid-template-rows: 1fr auto auto; align-content: start; }
.session-work { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid #34485c; border-radius: 8px; background: #152230; }
.session-number { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; color: #a3b6c9; font: .75rem/1.5 Consolas, monospace; }
.session-number > span { color: #98caff; }
.page-home .session-work h3 { margin: 1.5rem 0 .65rem; font-size: 1.2rem; font-weight: 500; line-height: 1.35; letter-spacing: -.015em; color: #f0f5fa; }
.page-home .session-work p { margin: 0 0 1.5rem; font-size: .9375rem; line-height: 1.65; color: #b4c3d2; opacity: 1; }
.session-input { display: block; margin-top: auto; padding-top: .85rem; border-top: 1px solid #34485c; color: #bcd8f3; font-size: .8125rem; line-height: 1.6; }
.session-write { display: flex; align-items: center; gap: .6rem; padding: 1rem .15rem 1.1rem; color: #a4b8cc; font-size: .75rem; line-height: 1.5; }
.session-write > span { color: #76baff; font-size: 1.4rem; line-height: 1; }
.session-checkpoint { position: relative; align-self: start; min-height: 10.5rem; padding-top: 1.5rem; }
.session-checkpoint::before { content: ''; position: absolute; top: 0; left: 0; right: -1.5rem; height: 2px; background: #568ec6; }
.session-checkpoint::after { content: ''; position: absolute; width: 10px; height: 10px; top: -4px; left: 0; border-radius: 50%; background: #9eceff; box-shadow: 0 0 0 5px #101a25; }
.session-flow > li:last-child .session-checkpoint::before { right: 0; }
.memory-label { display: block; color: #a7b8c9; font-size: .75rem; line-height: 1.5; margin-bottom: 1rem; }
.memory-blocks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.memory-blocks > li { border: 1px solid #34485c; border-radius: 4px; padding: .35rem .55rem; color: #acbfd1; font: .75rem/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.memory-blocks > .memory-block-new { background: #1e3c59; border-color: #5d94c9; color: #dbedff; }
.session-memory-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; border-top: 1px solid #2b3d50; margin-top: 1.5rem; padding-top: 1.15rem; color: #a7b8c9; font-size: .75rem; line-height: 1.6; }
.memory-legend { display: inline-flex; gap: .5rem; align-items: center; }
.memory-legend i { width: .65rem; height: .65rem; border: 1px solid #7cb4e9; border-radius: 2px; background: #1e3c59; flex-shrink: 0; }
@media (max-width: 900px) {
  .session-memory figcaption { grid-template-columns: minmax(0, 1fr); }
  .session-caption-note br { display: none; }
  .session-flow { gap: 1rem; }
  .session-work { padding: 1rem; }
  .session-checkpoint::before { right: -1rem; }
}
@media (max-width: 680px) {
  .session-flow { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 1.25rem; }
  .session-flow > li { position: relative; display: block; padding-bottom: 1.75rem; }
  .session-flow > li::before { content: ''; position: absolute; left: -1.25rem; width: 2px; top: 0; bottom: 0; background: #568ec6; }
  .session-flow > li:last-child { padding-bottom: 0; }
  .session-work { padding: 1.1rem; }
  .page-home .session-work h3 { margin-top: 1rem; }
  .page-home .session-work p { margin-bottom: 1rem; }
  .session-write { padding: .85rem 0; }
  .session-checkpoint { min-height: 0; padding-top: 0; }
  .session-checkpoint::before { left: -1.25rem; right: auto; width: 1rem; top: .5rem; }
  .session-flow > li:last-child .session-checkpoint::before { right: auto; }
  .session-checkpoint::after { left: calc(-1.25rem - 4px); top: .25rem; }
  .memory-label { margin-bottom: .65rem; }
  .session-memory-footer { margin-top: 1.75rem; }
}

/* The loop: one sequence, followed by an index of engines */
.page-home .loop-section {
  background: #111;
  border-block: 1px solid rgba(255,255,255,0.07);
}
.page-home .loop-section .section-title { max-width: 940px; }
.page-home .loop-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 3.5rem 0 2rem;
  counter-reset: loop-step;
}
.page-home .loop-card {
  counter-increment: loop-step;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 0;
  border-top: 1px solid rgba(77,166,255,0.4);
  border-radius: 0;
  background: transparent;
}
.page-home .loop-card:first-child { padding-left: 0; }
.page-home .loop-card h3 { font-size: 1.1875rem; line-height: 1.4; font-weight: 500; margin-bottom: 1rem; }
.page-home .loop-card p { font-size: 0.9375rem; opacity: 0.75; }
.loop-step { display: block; position: relative; margin-bottom: 1.6rem; color: #8fc7ff; font: 0.875rem Consolas, monospace; }
.loop-step::before { content: counter(loop-step, decimal-leading-zero); }
.loop-step::after { content: "\2192"; position: absolute; right: 0; color: #4da6ff; }
.loop-card:last-child .loop-step::after { content: "\21BA"; }
.page-home .loop-note { max-width: 760px; margin: 0; padding-left: 1.25rem; border-left: 1px solid rgba(77,166,255,0.4); }
.engines { margin-top: 4rem; display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); column-gap: 3rem; align-items: start; }
.engines h3 { font-size: 1.4rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.engines-sub { grid-column: 1; font-size: 0.9375rem; color: #a0a0a0; line-height: 1.75; margin-top: 1rem; }
.engines-grid { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.engine-item { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.15); transition: border-color 0.25s; }
.engine-item:hover { border-color: #4da6ff; }
.engine-item strong { display: block; font-size: 0.9375rem; font-weight: 500; color: #8fc7ff; margin-bottom: 0.35rem; }
.engine-item span { display: block; color: #a0a0a0; font-size: 0.875rem; line-height: 1.65; }
.page-home .cta-note { color: #b0b0b0; }
.page-home .cta-privacy { font-size: 0.875rem; }

/* Problems: retain the title/details relationship used by the meteor canvas */
.page-home #problems .content-block {
  max-width: none;
  margin-bottom: 4rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.page-home #problems .content-block:last-child { margin-bottom: 0; }
.page-home #problems .content-block > .block-icon { grid-column: 1; grid-row: 1; }
.page-home #problems .content-block > .section-title {
  grid-column: 1;
  grid-row: 2 / span 3;
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
}
.page-home #problems .content-block > p { grid-column: 2; }
.page-home #problems .content-block > p:first-of-type { grid-row: 1 / span 2; }
.page-home #problems .content-block > details { grid-column: 2; }
.page-home details.expandable summary { font-size: 1rem; }
.page-home details.expandable .detail-content { font-size: 0.9375rem; }
.page-home .statement { padding: 2rem var(--home-gutter) 4rem; }
.page-home .statement h2 { font-weight: 500; letter-spacing: -0.035em; }
.page-home .statement-numbers { opacity: 0.8; font-weight: 400; }

/* Real product imagery has a consistent frame, with its original aspect ratio */
.page-home .screenshot-frame { border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.page-home .solutions-z { gap: 0; }
.page-home .z-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 3.75rem;
  border-top: 1px solid rgba(44,44,44,0.14);
}
.page-home .z-item:first-child { border-top: 0; padding-top: 0; }
.page-home .z-item:last-child { padding-bottom: 0; }
.page-home .z-item.z-reversed { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.page-home .z-reversed > .z-text { grid-column: 2; grid-row: 1; }
.page-home .z-reversed > .z-image { grid-column: 1; grid-row: 1; }
.page-home .z-item--stacked { align-items: start; }
.page-home .z-text, .page-home .z-image { min-width: 0; }
.page-home .z-text h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.035em; margin-bottom: 1.25rem; }
.page-home .z-text p { font-size: 1rem; line-height: 1.8; }
.page-home .z-desc { margin-top: 1rem; opacity: 0.8; }
.page-home .z-image .screenshot-frame { margin-top: 0; }
.page-home .inline-heading { align-items: flex-start; gap: 0.65rem; }
.page-home .inline-heading h3 { margin: 0; }
.page-home .knowledge-types { flex-wrap: wrap; gap: 0.75rem; }
.page-home .knowledge-type {
  min-width: 0;
  flex: 1 1 140px;
  align-items: flex-start;
  padding: 0.85rem 0;
  border: 0;
  border-top: 1px solid rgba(42,122,226,0.2);
  background: transparent;
  border-radius: 0;
}
.page-home .knowledge-type strong { font-size: 0.875rem; font-weight: 600; }
.page-home .knowledge-type span { font-size: 0.8125rem; }

/* Bounded blocks: a full-width title above two balanced columns */
.page-home .bounded-blocks-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: 3rem; }
.bounded-blocks-heading { grid-column: 1 / -1; }
.bounded-blocks-heading h2 {
  max-width: 980px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #f4ead8;
}
.page-home .bounded-blocks-copy p { font-size: 1rem; line-height: 1.8; }
.bounded-blocks-way { color: #f4ead8 !important; font-weight: 500; }
.page-home .bounded-blocks-visual { border-radius: 5px; }
.page-home .bounded-blocks-visual img { aspect-ratio: auto; height: auto; object-fit: contain; }
.hero-shot { width: 100%; background: #0d0d12; padding: 1.5rem var(--home-gutter) 3rem; }
.hero-shot img { display: block; width: 100%; height: auto; max-width: 1400px; margin-inline: auto; border: 1px solid rgba(255,255,255,0.15); }
.hero-shot-label { max-width: 1400px; margin: 0 auto 1.25rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #b0b0b0; }
.divider-image { width: 100%; height: clamp(220px, 35vh, 340px); background: #000; overflow: hidden; position: relative; }
.divider-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* For everyone: open spreads rather than nested cards */
.page-home .theme-rose > .solutions-grid { gap: 3rem; }
.page-home .card-rose {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 0 0;
  border: 0;
  border-top: 1px solid #e0c8d4;
  background: transparent;
  border-radius: 0;
}
.page-home .card-rose h3 { font-size: 1.625rem; font-weight: 500; letter-spacing: -0.035em; line-height: 1.25; }
.page-home .card-rose p { font-size: 1rem; margin-bottom: 1.5rem; }
.page-home .card-rose .screenshot-frame { margin-top: auto; }

/* Learning Lab */
.page-home .learninglab { background: #1a1408; color: #f0e6d0; position: relative; overflow: hidden; }
.badge-lab { color: #dab464; }
.ll-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.learninglab h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -0.04em; color: #f5edd8; margin: 0 0 1.5rem; line-height: 1.15; }
.learninglab p { color: rgba(240,230,208,0.8); font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; }
.ll-points { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ll-points li { display: flex; gap: 0.7rem; font-size: 0.9375rem; color: rgba(240,230,208,0.8); line-height: 1.7; padding-block: 0.65rem; border-top: 1px solid rgba(218,180,100,0.15); }
.ll-points li::before { content: "\2192"; color: #dab464; }
.ll-quote { border-left: 2px solid rgba(218,180,100,0.65); padding-left: 1rem; color: #ead9b0 !important; }
.page-home .ll-cta { background: #dab464; color: #1a1408; margin-top: 0.5rem; }
.page-home .ll-cta:hover { background: #e8c67e; color: #1a1408; box-shadow: 0 8px 24px rgba(218,180,100,0.25); }

/* Field notes: authors in the margin, full unedited notes in a reading column */
.page-home .field-notes { background: #f0f7f1; position: relative; overflow: hidden; }
.field-notes-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.field-notes-title {
  max-width: var(--home-measure);
  margin: 0 auto 3rem;
  padding-inline: var(--home-gutter);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: #2c3e50;
  position: relative;
  z-index: 1;
}
.page-home .field-note { padding-block: 3rem; text-align: left; border-top: 1px solid rgba(44,62,80,0.13); position: relative; z-index: 1; }
.page-home .field-note--first { padding-top: 0; border-top: 0; }
.field-note > .container { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 3rem; align-items: start; }
.field-note .quote-mark { grid-column: 1; grid-row: 1; font-size: 4rem; margin: 0; color: #2c3e50; opacity: 0.2; }
.field-note .testimonial-author { grid-column: 1; grid-row: 1; margin-top: 4rem; align-items: flex-start; }
.field-note blockquote { grid-column: 2; grid-row: 1; max-width: none; margin: 0; color: #3a4a5c; font-size: 1.1875rem; line-height: 1.85; font-style: normal; }
.field-note .author-avatar { background: #2a5a9a; color: #e8edf4; width: 28px; height: 28px; flex-shrink: 0; border-radius: 3px; font-size: 0.6875rem; }
.field-note cite { color: #2c3e50; font-size: 0.9375rem; }
.field-note .author-role { color: #5a6a7a; font-size: 0.8125rem; line-height: 1.6; margin-top: 0.5rem; }
.field-note .typing-cursor { background-color: #3a4a5c; }
.page-home .ai-testimonial-disclaimer--light {
  max-width: var(--home-measure);
  margin-inline: auto;
  padding: 1rem var(--home-gutter) 0;
  color: #5a6a7a;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* Ecosystem and the equal-sized editor examples */
.page-home .ecosystem-grid { gap: 2.5rem; }
.page-home .ecosystem-grid > .feature-card {
  padding: 2rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  background: transparent;
}
.page-home .ecosystem-grid h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; }
.page-home .ecosystem-grid p { font-size: 1rem; }
.page-home .ecosystem-grid .section-text.muted { font-size: 0.9375rem !important; }
.page-home .ecosystem-principle { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1fr); column-gap: 4rem; }
.page-home .ecosystem-principle .block-icon { margin: 0 0 1rem !important; }
.page-home .ecosystem-principle h3 { grid-column: 1; text-align: left !important; }
.page-home .ecosystem-principle p { grid-column: 2; grid-row: 1 / span 2; text-align: left !important; }
.editor-integration { margin-top: 5rem; position: relative; z-index: 1; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.18); }
.page-home .editor-integration h3 { font-size: clamp(1.8rem, 3vw, 2.5rem) !important; }
.editor-shots { margin-top: 2.5rem; }
.editor-shots > div { min-width: 0; }
.editor-shots .screenshot-frame { aspect-ratio: 16 / 9; background: #141414; }
.editor-shots .screenshot-frame img { height: auto; object-fit: contain; }
.page-home .editor-shots p { text-align: left !important; font-size: 0.875rem !important; }

/* Confessions and a letter from the creator */
.page-home .confessions h3 { text-align: left; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; font-style: normal; line-height: 1.2; letter-spacing: -0.04em; }
.page-home .confessions-intro { text-align: left; color: #b0b0b0; margin: 1rem 0 3rem; font-size: 1rem; }
.page-home .confession-card { max-width: none; padding: 2rem 0; margin: 0; border: 0; border-top: 1px solid rgba(255,255,255,0.16); background: transparent; border-radius: 0; display: grid; grid-template-columns: 120px minmax(0,1fr); column-gap: 3rem; }
.page-home .confession-number { grid-column: 1; grid-row: 1 / span 3; font: italic 3rem Georgia, serif; color: #a0a0a0; }
.page-home .confession-card p { grid-column: 2; max-width: 760px; font-size: 1rem; color: #c0c0c0; }
.page-home .creator-note { background: #faf5ea; position: relative; }
.page-home .creator-note .container { max-width: 1120px; }
.creator-badge-row { margin-bottom: 2rem; }
.badge-creator { color: #8a5a30; }
.creator-quote { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.4; letter-spacing: -0.025em; color: #2a1f14; border-left: 2px solid #c89860; padding-left: 1.5rem; margin: 0 0 3rem; font-style: italic; }
.creator-note p { max-width: 720px; margin: 0 0 1.35rem auto; font-size: 1.0625rem; line-height: 1.85; color: #2a1f14; }
.creator-note .creator-sign { margin-bottom: 0; margin-top: 2rem; text-align: right; font-style: italic; color: #8a5a30; font-size: 0.9375rem; }
.track-record { background: #101018; border-top: 1px solid rgba(255,255,255,0.1); padding: 2.5rem 0; }
.track-record-kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #a0a0a0; margin-bottom: 1.25rem; }
.track-items { display: flex; flex-wrap: wrap; gap: 0.8rem 1.75rem; list-style: none; }
.track-items li { display: inline-flex; align-items: center; gap: 0.6rem; color: #c0c0c0; font-size: 0.875rem; }
.track-items li::before { content: ""; width: 4px; height: 4px; background: #4da6ff; border-radius: 50%; flex-shrink: 0; }
.track-items a { color: #8fc7ff; }
.track-items a:hover { color: #fff; }
.page-home .site-footer { padding-block: 1.5rem; }
.page-home .footer-links a, .page-home .footer-copy { color: #a0a0a0; }
.page-home .footer-trademark { color: #a0a0a0; font-size: 0.75rem; }

/* Tablet: keep comparison axes shared within each pair of entries */
@media (max-width: 1050px) {
  .page-home .hero-heading { grid-template-columns: minmax(0,1fr) 24%; gap: 2rem; }
  .page-home .hero-heading h1 { font-size: clamp(2.6rem, 5.3vw, 3.75rem); }
  .transition-inner { grid-template-columns: minmax(0,1fr) 220px; gap: 1.5rem; }
  .layer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 0; }
  .layer-card { grid-row: span 5; }
  .layer-card:nth-child(odd) { padding-left: 0; }
  .layer-card:nth-child(even) { border-right: 0; }
  .page-home .loop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 1.5rem; }
  .page-home .loop-card:nth-child(odd) { padding-left: 0; }
  .page-home .z-item, .page-home .z-item.z-reversed { gap: 2.5rem; }
  .field-note > .container { grid-template-columns: 180px minmax(0,1fr); gap: 2rem; }
}

/* Mobile: a genuine reading layout, not a squeezed desktop grid */
@media (max-width: 768px) {
  .page-home { --home-space: 3.5rem; }
  .page-home .nav-links { gap: 0; }
  .page-home .nav-more-toggle { display: none; }
  .page-home .nav-more-menu { backdrop-filter: none; }
  .page-home .nav-links a { padding-block: 0.65rem; }
  .page-home .transition-inner { display: block; padding-block: 1rem; font-size: 0.8125rem; }
  .transition-main, .transition-tail { display: block; }
  .transition-tail { border: 0; padding: 0; margin-top: 0.6rem; }
  .page-home header.hero { padding-block: 3rem; }
  .page-home .hero-heading { grid-template-columns: minmax(0,1fr); gap: 2.5rem; }
  .page-home .hero-heading h1 { font-size: clamp(2.5rem, 8.4vw, 3.75rem); }
  .page-home .hero-heading h1 br { display: none; }
  .hero-badge-col { justify-content: flex-start; }
  .page-home .hero-logo { width: 160px; }
  .hero-release-badge { margin-bottom: 1.5rem; }
  .page-home .hero-heading .hero-description { font-size: 1rem; }
  .hero-cta-row, .hero-trust { justify-content: flex-start; }
  .page-home .section-title br { display: none; }
  .page-home .paradigm > .container, .engines, .page-home .bounded-blocks-grid,
  .ll-grid, .page-home .ecosystem-principle { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .engines-sub { margin: 0; }
  .engines-grid { grid-column: 1; grid-row: auto; }
  .page-home #problems .content-block { display: block; }
  .page-home #problems .section-title { max-width: 580px; }
  .page-home .z-item, .page-home .z-item.z-reversed { grid-template-columns: minmax(0,1fr); padding-block: 2.5rem; }
  .page-home .z-reversed > .z-text, .page-home .z-reversed > .z-image { grid-column: 1; grid-row: auto; }
  .page-home .knowledge-types { flex-direction: row; }
  .page-home .bounded-blocks-visual { max-width: none; }
  .page-home .theme-rose > .solutions-grid { grid-template-columns: minmax(0,1fr); }
  .ll-grid { align-items: start; }
  .field-note > .container { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .field-note .quote-mark { grid-column: 1; grid-row: 1; font-size: 3rem; }
  .field-note .testimonial-author { grid-column: 1; grid-row: 1; margin: 0 0 0 3rem; }
  .field-note blockquote { grid-column: 1; grid-row: 2; font-size: 1.0625rem; line-height: 1.8; }
  .field-note .author-role { margin-top: 0.15rem; }
  .page-home .ecosystem-grid { grid-template-columns: minmax(0,1fr); }
  .page-home .ecosystem-principle { display: block; }
  .editor-shots { grid-template-columns: minmax(0,1fr); }
  .page-home .confession-card { grid-template-columns: 40px minmax(0,1fr); gap: 1.25rem; }
  .page-home .confession-number { font-size: 2rem; }
  .creator-quote { padding-left: 1rem; }
  .hero-shot { padding: 1.5rem var(--home-gutter) 2rem; }
  .page-home .site-footer .container { align-items: flex-start; text-align: left; }
  .page-home .footer-links { justify-content: flex-start; gap: 1rem; }
}
@media (max-width: 540px) {
  .layer-grid { display: block; border-bottom: 0; }
  .layer-card { display: block; padding: 1.5rem 0 0; margin-top: 1.5rem; border-right: 0; }
  .layer-card--wuniq { padding: 1.5rem 1rem 0 !important; }
  .layer-axis { display: block; }
  .layer-kicker { margin-bottom: 0.5rem; }
  .page-home .loop-grid { grid-template-columns: minmax(0,1fr); row-gap: 0.5rem; }
  .page-home .loop-card { padding: 1.25rem 0; }
  .loop-step { margin-bottom: 0.75rem; }
  .engines-grid { grid-template-columns: minmax(0,1fr); }
  .page-home .hero-trust { gap: 0.5rem 1rem; }
  .page-home .cta-btn { padding-inline: 1.15rem; }
  .hero-cta-row .cta-btn { width: 100%; }
}

/* K + readable product name: a single brand signature next to the message. */
.hero-brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; width: 100%; max-width: 300px; }
.page-home .hero-brand-lockup .hero-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 32px rgba(0,0,0,.18)); }
.hero-brand-name { text-align: center; font-size: clamp(1.2rem,2.2vw,1.8rem); line-height: 1.25; }
.hero-brand-name .logo { font-size: inherit; }
.hero-brand-name .logo::before { content: none; }
.hero-brand-product { display: block; margin-top: .3rem; color: #aeb8c3; font-size: .68em; font-weight: 400; letter-spacing: .15em; }
@media (max-width: 767px) { .hero-brand-lockup { max-width: 180px; gap: .9rem; } }

/* Six screenshot scenes: full-width, with their original aspect ratio. */
.page-home .capture-wide { max-width: 1600px; margin-inline: auto; padding-inline: var(--home-gutter); min-width: 0; }
.page-home .capture-image { width: 100%; margin: 0; }
.page-home .product-overview { padding-top: 0; padding-bottom: 3.5rem; background: #0a0a0a; }
.capture-eyebrow { color: #9bacbd; font-size: .875rem; margin: 0 0 1rem; }
.page-home .integrations-showcase { background: #101417; border-bottom: 1px solid #29323a; }
.page-home .integrations-showcase .editor-integration { margin-top: 0; padding-top: 0; border: 0; }
.page-home .integrations-showcase .editor-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
.page-home .integrations-showcase .lead-center { max-width: 820px; }
.page-home .editor-shots > div > p { color: #aebbc7; }

/* Editorial imagery and semantic diagrams replace repeated app details. */
.page-home .problem-art-wrap { max-width: 1120px; }
.problem-metaphor { max-width: 820px; margin: 0 0 1.75rem; color: #c1c6cc; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.8; }
.problem-metaphor strong { display: block; margin-top: .65rem; color: #f0e6d7; font-weight: 500; }
.problem-art { margin: 0 0 4rem; overflow: hidden; border: 1px solid #3c3b38; border-radius: 5px; background: #262522; }
.problem-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1.5; object-fit: cover; object-position: center 60%; }
.problem-art figcaption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1.25rem 1.5rem; gap: 1rem; color: #d8d0c2; font-size: .9375rem; border-top: 1px solid #54504a; }
.problem-art figcaption span + span { padding-left: 1.5rem; border-left: 1px solid #54504a; }
.page-home .solutions-showcase { max-width: 1600px; }
.knowledge-map-spread { padding-bottom: 4rem; }
.concept-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem); margin-bottom: 3rem; }
/* A full map narrows to a connected route and the relevant knowledge blocks. */
.knowledge-diagram { background: #f5f8fb; border: 1px solid #c9d5e1; border-radius: 12px; padding: clamp(1.25rem, 3vw, 2.75rem); margin: 0; scroll-margin-top: 6rem; }
.knowledge-diagram figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: 2.5rem; line-height: 1.6; }
.knowledge-diagram figcaption span:first-child { font-size: clamp(1.4rem, 2vw, 1.875rem); letter-spacing: -.025em; font-weight: 500; color: #192f45; }
.knowledge-diagram figcaption span:last-child { font-size: .875rem; color: #526477; }
.context-stages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); }
.context-overview, .context-route { min-width: 0; }
.context-stage-heading { display: flex; align-items: baseline; gap: .7rem; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #263f57; }
.context-stage-heading > span { font: .75rem/1.5 Consolas, monospace; color: #2864a0; }
.context-stage-intro { margin: .65rem 0 0; color: #526477; font-size: .9375rem; line-height: 1.6; }
.context-map { margin: 2rem 0; }
.context-map-root { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: .35rem .65rem; padding: 1.1rem .6rem; border: 1px solid #9bb5cf; border-radius: 8px; background: #e8f1fa; }
.context-map-root svg { grid-row: 1 / 3; color: #2864a0; }
.context-map-root strong { font-size: 1rem; font-weight: 600; color: #263f57; }
.context-map-root > span { font-size: .75rem; line-height: 1.5; color: #526477; }
.context-branches { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 2.75rem 0 0; }
.context-branches::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 2.75rem; background: #337bbd; }
.context-branches > li { position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0; text-align: center; }
.context-branches > li::before { content: ''; position: absolute; left: 50%; right: calc(-50% - .65rem); height: 1.4rem; top: -1.4rem; border-top: 1px solid #b5c4d2; border-left: 1px solid #b5c4d2; }
.context-branches > li:last-child::before { right: 50%; }
.context-branch-name { position: relative; padding: .65rem .2rem; background: #edf1f5; border: 1px solid #c7d2dd; border-radius: 5px; font-size: .875rem; font-weight: 500; color: #526477; }
.context-branch-selected .context-branch-name { background: #dcecfb; border-color: #6599c9; color: #205c94; }
.context-map-resource { position: relative; display: block; padding: .55rem .2rem; border: 1px solid #d4dfe8; border-radius: 4px; color: #5c6e80; font: .6875rem/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.context-resource-selected { background: #23669f; border-color: #23669f; color: #fff; }
.context-resource-selected::before { content: ''; position: absolute; width: 2px; height: .65rem; background: #337bbd; left: 50%; bottom: 100%; }
.context-task { display: grid; gap: .5rem; padding: 1.1rem 1.25rem; border-left: 3px solid #337bbd; background: #e7eff7; border-radius: 0 6px 6px 0; }
.context-task .diagram-kicker { font-size: .6875rem; color: #526477; }
.context-task > strong { color: #263f57; font-size: 1.1rem; font-weight: 500; line-height: 1.4; }
.context-task > span:last-child { color: #2864a0; font-size: .8125rem; line-height: 1.5; }
.context-task > span:last-child > span { margin-left: .5rem; }
.knowledge-path { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1.2rem; }
.knowledge-path li { position: relative; padding: 0 0 1.25rem 1.2rem; border-left: 1px solid #7aa7cf; min-width: 0; }
.knowledge-path li::before { content: ''; position: absolute; left: -5px; top: .2rem; width: 9px; height: 9px; border-radius: 3px; background: #337bbd; box-shadow: 0 0 0 4px #f5f8fb; }
.knowledge-path li:last-child { padding-bottom: 0; border-color: transparent; }
.diagram-type { display: inline-block; font-size: .6875rem; color: #2864a0; margin: 0 .65rem .35rem 0; min-width: 3.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.knowledge-path strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: #263f57; }
.knowledge-path p { font-size: .875rem; line-height: 1.6; color: #526477; margin: .15rem 0 .4rem; }
.path-label { display: block; font-size: .75rem; line-height: 1.5; color: #2864a0; }
.path-label:not(.path-label--end)::before { content: '\2193'; display: inline-block; margin-right: .45rem; }
.context-selection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 2rem; padding: 1.5rem; margin-top: 2rem; background: #e2edf7; border: 1px solid #b7cede; border-radius: 8px; }
.context-selection p { color: #526477; font-size: .875rem; line-height: 1.6; margin: .5rem 0 0; }
.context-selected-blocks { display: flex; flex-wrap: wrap; gap: .5rem; }
.context-selected-blocks > span { padding: .45rem .65rem; border: 1px solid #94b5d0; border-radius: 4px; background: #f5f9fd; color: #205c94; font: .8125rem/1.5 Consolas, monospace; }
.knowledge-diagram .diagram-footnote { margin: 1.25rem 0 0; font-size: .8125rem; line-height: 1.6; color: #526477; }
@media (max-width: 800px) {
  .context-stages { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .context-map { max-width: 520px; }
  .context-route { padding-top: 2rem; border-top: 1px solid #c9d5e1; }
  .context-task > span:last-child > span { display: inline-block; transform: rotate(90deg); }
  .knowledge-path { padding-left: .35rem; }
  .context-selection { padding: 1.1rem; }
}
@media (max-width: 380px) {
  .context-branches { gap: .35rem; }
  .context-branches > li::before { right: calc(-50% - .35rem); }
  .context-branches > li:last-child::before { right: 50%; }
  .context-map-resource { font-size: .625rem; }
  .context-branch-name { font-size: .75rem; }
}
.feature-spread { border-top: 1px solid #cecbc5; padding-block: 4rem; }
.feature-spread > .z-text { max-width: 850px; margin-bottom: 2.5rem; }
.page-home .feature-spread > .z-text h3 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.page-home .feature-spread > .z-text .block-icon { margin-bottom: 1rem; }
.page-home .sync-spread { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.page-home .sync-spread > [data-capture] { grid-column: 1 / -1; }
.page-home .capture-image > .screenshot-frame { margin-top: 0; }
.capture-caption { max-width: 76ch; margin: 1.25rem auto 0; color: #526068; font-size: clamp(.9375rem, 1.2vw, 1.0625rem); line-height: 1.75; text-align: center; }
.capture-caption strong { color: #303c43; font-weight: 600; }
.sync-diagram { border: 1px solid #c5c0b6; background: #f0ece4; border-radius: 5px; padding: clamp(1.5rem, 3vw, 3rem); margin: 0; }
.sync-diagram figcaption { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 500; color: #303c43; max-width: 16ch; margin-bottom: 2rem; }
.sync-path { list-style: none; padding: 0; margin: 0; }
.sync-path li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.2rem; position: relative; padding-bottom: 2.25rem; }
.sync-path li:not(:last-child)::before { content: ''; position: absolute; left: .9rem; top: 2rem; bottom: .3rem; width: 1px; background: #a99c87; }
.sync-step-number { font: .875rem/2rem Consolas, monospace; color: #725439; border-top: 1px solid #a99c87; }
.sync-path strong { display: block; font-size: 1.0625rem; line-height: 1.5; font-weight: 600; color: #303c43; }
.sync-path p { margin: .35rem 0 0; font-size: .9375rem; line-height: 1.6; color: #526068; }
.sync-path li:last-child { padding-bottom: 0; }
.sync-closing { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid #c5c0b6; color: #6a4c32; font-size: .9375rem; line-height: 1.7; }
.page-home .export-spread { padding-bottom: 0; }
.page-home .bounded-foundation { grid-column: 1 / -1; border-top: 1px solid #5f5341; padding-top: 2.5rem; }
.bounded-foundation h3 { color: #f4ead8; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin-bottom: 1.25rem; }
.bounded-foundation > p { max-width: 850px; font-size: 1rem; line-height: 1.8; color: #d5c9b7; }
.bounded-foundation .knowledge-types { max-width: 1050px; margin-top: 2rem; }
.page-home .bounded-foundation .knowledge-type { border-top-color: #655942; gap: 1rem; }
.bounded-foundation .knowledge-type strong { color: #f0dbc0; }
.bounded-foundation .knowledge-type span { color: #c3b9a9; font-size: .875rem; }
.bounded-foundation .knowledge-type svg { color: #c99f6b; }
.everyone-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4rem; align-items: start; position: relative; z-index: 1; }
.everyone-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; min-width: 0; }
.page-home .everyone-points .card-rose { padding-top: 1.5rem; }
.page-home .everyone-points .card-rose h3 { font-size: 1.45rem; }
.page-home .everyone-points .card-rose p { font-size: 1rem; line-height: 1.8; margin-bottom: 0; }
.everyone-art { margin: 0; position: sticky; top: 6rem; }
.everyone-art img { display: block; width: 100%; height: auto; border-radius: 5px; }
.everyone-art figcaption { border-top: 1px solid #d8bfc9; margin-top: 1.5rem; padding-top: 1.25rem; font-size: 1.375rem; font-weight: 500; line-height: 1.4; color: #783852; letter-spacing: -.025em; }
.learning-cover { margin: 0 auto; max-width: 440px; border: 1px solid #5a4b29; border-radius: 5px; overflow: hidden; background: #101923; }
.learning-cover img { display: block; width: 100%; height: auto; }
.learning-cover figcaption { font-size: .9375rem; line-height: 1.6; color: #e0d5bc; padding: 1.25rem 1.5rem; border-top: 1px solid #47505a; }
@media (max-width: 1050px) {
  .everyone-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .everyone-art { position: static; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 2rem; align-items: end; }
  .everyone-art figcaption { margin: 0; }
}
@media (max-width: 768px) {
  .concept-copy-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .page-home .sync-spread { grid-template-columns: minmax(0, 1fr); }
  .feature-spread, .knowledge-map-spread { padding-block: 2.5rem; }
  .knowledge-map-spread { padding-top: 0; }
  .knowledge-diagram figcaption { margin-bottom: 1.5rem; }
  .problem-art { margin-bottom: 2.5rem; }
  .problem-art img { aspect-ratio: 3 / 2; object-fit: contain; }
  .problem-art figcaption { gap: .6rem; padding: 1rem; font-size: .875rem; }
  .problem-art figcaption span + span { padding-left: .6rem; }
  .page-home .bounded-foundation .knowledge-types { flex-direction: column; }
  .page-home .bounded-foundation .knowledge-type { flex-basis: auto; }
}
@media (max-width: 540px) {
  .everyone-points, .everyone-art { display: grid; grid-template-columns: minmax(0, 1fr); }
  .everyone-art { gap: 1.25rem; }
  .everyone-art figcaption br { display: none; }
  .problem-art figcaption { grid-template-columns: minmax(0, 1fr); }
  .problem-art figcaption span + span { padding-left: 0; padding-top: .5rem; border-left: 0; border-top: 1px solid #54504a; }
}

/* Compact editorial diagrams: a shared drawing language, local section colors. */
.feature-micro, .confession-micro, .creator-process {
  --micro-ink: #854461;
  --micro-line: #a77188;
  --micro-muted: #c6aeba;
  --micro-surface: #fffafd;
  --micro-selected: #f0dce6;
  --micro-accent: #864360;
  --micro-on-accent: #fff9fc;
  color: var(--micro-ink);
}
.micro-line, .micro-muted-line, .micro-surface, .micro-selected, .micro-accent, .micro-mark {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.micro-line { stroke: var(--micro-line); }
.micro-muted-line { stroke: var(--micro-muted); }
.micro-surface { fill: var(--micro-surface); stroke: var(--micro-muted); }
.micro-selected { fill: var(--micro-selected); stroke: var(--micro-line); }
.micro-accent { fill: var(--micro-accent); stroke: var(--micro-accent); }
.micro-dot { fill: var(--micro-accent); }
.micro-mark { stroke: var(--micro-on-accent); }
.feature-micro { display: flex; align-items: center; height: 128px; margin-bottom: 1.5rem; min-width: 0; }
.feature-micro svg { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; }
.feature-micro text { fill: var(--micro-ink); font: 16px Inter, sans-serif; text-anchor: middle; }
.feature-micro .micro-small-text { font-size: 14px; }
.feature-micro .micro-text-muted { fill: #8c7380; }
.feature-micro .micro-text-on-accent { fill: var(--micro-on-accent); }
#project-possibilities, #shared-client-memory, #confessions, #from-the-creator { scroll-margin-top: 6rem; }

/* Client names have equal weight; the common connection is MCP, not identical modes. */
.client-memory-diagram { position: relative; margin: 3rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #304458; border-radius: 10px; background: #101a25; }
.client-memory-clients { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.client-memory-clients > li { position: relative; display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .85rem; border: 1px solid #42586d; border-radius: 6px; color: #dbe7f2; font-size: .875rem; line-height: 1.5; background: #172635; }
.client-mini-symbol { color: #93bfe8; font: .875rem/1.5 Consolas, monospace; flex-shrink: 0; }
.client-memory-clients > li::after { content: ''; position: absolute; top: 100%; left: 50%; height: 24px; width: 1px; background: #6c95bb; }
.client-memory-clients::after { content: ''; position: absolute; top: calc(100% + 24px); left: calc((100% - 3.75rem) / 8); right: calc((100% - 3.75rem) / 8); height: 1px; background: #6c95bb; }
.client-memory-bridge { position: relative; display: flex; justify-content: center; align-items: center; height: 88px; }
.client-memory-bridge::before { content: ''; position: absolute; top: 24px; bottom: 0; left: 50%; width: 1px; background: #6c95bb; }
.client-memory-bridge > span { position: relative; z-index: 1; padding: .3rem .9rem; border: 1px solid #6c95bb; border-radius: 4px; background: #101a25; font: .8125rem/1.5 Consolas, monospace; letter-spacing: .06em; color: #b9d9f6; }
.client-memory-base { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 1.5rem; border: 1px solid #5685ad; border-radius: 7px; background: #1b344a; }
.client-memory-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.client-memory-identity svg { color: #a8ceeF; flex-shrink: 0; }
.client-memory-identity strong { display: block; font-size: 1.125rem; font-weight: 500; color: #e5f2ff; }
.client-memory-identity span { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.6; color: #b4cadd; }
.client-memory-blocks { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.client-memory-blocks > li { padding: .35rem .6rem; border: 1px solid #678bad; border-radius: 4px; color: #c7e0f5; font: .75rem/1.5 Consolas, monospace; }
.client-memory-diagram figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 1.2rem; color: #aabed1; font-size: .8125rem; line-height: 1.6; }
.client-memory-diagram figcaption span > span { padding-inline: .4rem; color: #91bee8; }
@media (max-width: 700px) {
  .client-memory-clients { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding-left: 1.5rem; }
  .client-memory-clients > li::after { top: 50%; left: calc(-1.5rem - 1px); width: 1.5rem; height: 1px; }
  .client-memory-clients::after { top: 26px; bottom: 0; left: 0; right: auto; height: auto; width: 1px; }
  .client-memory-bridge { height: 72px; }
  .client-memory-bridge::before { top: 0; bottom: auto; left: 0; width: 50%; height: 50%; border-left: 1px solid #6c95bb; border-bottom: 1px solid #6c95bb; background: none; }
  .client-memory-bridge::after { content: ''; position: absolute; left: 50%; bottom: 0; height: 50%; border-left: 1px solid #6c95bb; }
  .client-memory-base { flex-direction: column; align-items: flex-start; padding: 1.1rem; gap: 1.1rem; }
  .client-memory-identity { gap: .75rem; }
  .client-memory-identity svg { width: 28px; height: 28px; }
}

/* Small marginal illustrations support the confessions without implying measurements. */
.page-home .confession-card { grid-template-columns: 220px minmax(0, 1fr); }
.confession-aside { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.page-home .confession-aside .confession-number { margin-bottom: .5rem; }
.confession-micro { --micro-ink: #b7cee2; --micro-line: #749fc4; --micro-muted: #626d77; --micro-surface: #1e2730; --micro-selected: #223648; --micro-accent: #9dc6e9; margin: 0; max-width: 220px; }
.confession-micro svg { display: block; width: 100%; height: auto; }
.confession-micro figcaption { margin-top: .4rem; color: #aebdca; font-size: .8125rem; line-height: 1.7; }
@media (max-width: 768px) {
  .page-home .confession-card { display: block; }
  .confession-aside { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.75rem; }
  .page-home .confession-aside .confession-number { flex: 0 0 35px; margin: 0; }
  .confession-micro { flex: 1; min-width: 0; }
}

/* The creator's path shows iteration and abandoned branches, not a growth chart. */
.creator-opening { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: center; gap: 3rem; margin-bottom: 2.75rem; }
.creator-opening .creator-quote { margin: 0; font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
.creator-process { --micro-ink: #5b646a; --micro-line: #4d7378; --micro-muted: #c1b9ac; --micro-surface: #faf5ea; --micro-accent: #436d73; margin: 0; min-width: 0; }
.creator-process svg { display: block; width: 100%; height: auto; }
.creator-process-steps { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: -.4rem 0 0; color: #48666b; font-size: .8125rem; line-height: 1.5; font-weight: 500; }
.creator-process figcaption { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d9d2c5; color: #626965; font-size: .875rem; line-height: 1.6; }
@media (max-width: 800px) {
  .creator-opening { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .creator-process { width: 100%; max-width: 420px; }
}