/* CARLOS homepage and self-host guide — plain CSS, system fonts only. */

:root {
  color-scheme: light dark;
  --navy: #101c23;
  --navy-2: #16262f;
  --navy-3: #1c303a;
  --mint: #82c9b5;
  --lime: #c8ef8b;
  --lavender: #b5a0d0;
  --cream: #eef5ed;
  --cream-dim: #aebcb6;
  --line: rgba(238, 245, 237, 0.16);
  --line-soft: rgba(238, 245, 237, 0.09);

  /* Below-hero theme variables (switch under light preference) */
  --page: var(--navy);
  --page-alt: #14232b;
  --ink: var(--cream);
  --muted: #a9b8b2;
  --rule: rgba(238, 245, 237, 0.16);
  --accent: var(--mint);
  --link: var(--mint);
  --card-tint: 0.07;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --wrap: 72rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --focus: #ffe58a;
}

@media (prefers-color-scheme: light) {
  main > section:not(.hero),
  footer {
    --page: #f4f7f1;
    --page-alt: #eaf0e8;
    --ink: #14232b;
    --muted: #45575a;
    --rule: rgba(16, 28, 35, 0.2);
    --accent: #1f6f5c;
    --link: #1a5f4f;
    --card-tint: 0.1;
    --focus: #0b4fb3;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.landing {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.landing :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
body.landing :where(ul, ol) { padding: 0; list-style: none; }
body.landing :where(h1, h2, h3, p, li, a, summary, span) { overflow-wrap: anywhere; }
body.landing svg { max-width: 100%; }
body.landing a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
body.landing a:hover { text-decoration-thickness: 2px; }

:where(a, summary, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Shared SVG convention: strokes follow currentColor, drawings unfilled.
   Text elements are left untouched. */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(60rem 36rem at 12% 8%, rgba(130, 201, 181, 0.07), transparent 70%),
    radial-gradient(48rem 32rem at 92% 30%, rgba(181, 160, 208, 0.07), transparent 70%),
    var(--navy);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero-nebula {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--mint);
  opacity: 0.42;
  pointer-events: none;
}

.hero-nebula :where(.edge, .orbit) { stroke: currentColor; fill: none; stroke-width: 1; opacity: 0.35; }
.hero-nebula .orbit { stroke-dasharray: 2 7; opacity: 0.22; }
.hero-nebula .halo { fill: none; stroke: var(--lavender); stroke-width: 1; opacity: 0.2; }
.hero-nebula .pulse { fill: none; stroke: var(--mint); opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: pulse 9s ease-in-out infinite; }
.hero-nebula .ambient-cloud { fill: var(--lavender); stroke: none; opacity: 0.06; }
.hero-nebula .node-light { fill: var(--mint); stroke: none; opacity: 0.12; }
.hero-nebula .node-body { fill: var(--navy-2); stroke: var(--mint); stroke-width: 1; opacity: 0.8; }
.hero-nebula .node-ping { fill: none; stroke: var(--lime); opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: ping 12s ease-out infinite; }
.hero-nebula .signal-dot {
  r: 2;
  fill: var(--lime);
  stroke: none;
  opacity: 0.5;
  animation: travel 24s linear infinite;
}

@keyframes travel {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translate(var(--travel-x, 40px), var(--travel-y, -30px)); opacity: 0; }
}
@keyframes pulse { 0%, 100% { opacity: 0.12; transform: scale(0.96); } 50% { opacity: 0.3; transform: scale(1.04); } }
@keyframes ping { 0% { opacity: 0.35; transform: scale(0.6); } 70%, 100% { opacity: 0; transform: scale(1.6); } }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: calc(var(--wrap) + 2rem);
  margin-inline: auto;
}

.hero-copy { display: grid; gap: 1.25rem; justify-items: start; padding-top: clamp(0rem, 2vw, 1.5rem); }

.hero-wordmark {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  overflow: visible;
  color: var(--cream);
}
/* Each letter is a small composited HTML layer; its SVG stays static. */
.hero-wordmark{display:flex;aspect-ratio:518 / 118}
.hero-wordmark .hero-letter{position:relative;display:block;flex:var(--letter-width) 1 0;min-width:0;animation:letter-float var(--float-duration,9s) ease-in-out var(--float-delay,0s) infinite;will-change:transform}
.hero-letter svg{display:block;width:100%;height:100%;overflow:visible}
.letter-halo{display:none}
.hero-letter>svg{animation:letter-current 42s steps(1,end) var(--surge-delay,0s) infinite;will-change:opacity}
/* One short surge per letter per cycle, spaced across the word. */
.hero-letter:nth-child(1){--surge-delay:-34s}
.hero-letter:nth-child(2){--surge-delay:-6s}
.hero-letter:nth-child(3){--surge-delay:-20s}
.hero-letter:nth-child(4){--surge-delay:-13s}
.hero-letter:nth-child(5){--surge-delay:-41s}
.hero-letter:nth-child(6){--surge-delay:-27s}
@keyframes letter-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}}
@keyframes letter-glow{0%,100%{opacity:.35}45%{opacity:.5}89%{opacity:.35}90%{opacity:1}90.8%{opacity:.08}91.6%{opacity:1}92.4%{opacity:.18}93.2%{opacity:.85}95%{opacity:.35}}
@keyframes letter-current{0%,89.9%,90.9%,92.1%,93.1%,100%{opacity:1}90%,90.8%{opacity:.3}91%,92%{opacity:.72}92.2%,93%{opacity:.4}}

.hero h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 17ch;
  text-wrap: balance;
}

.hero-description {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: #d3dfd9;
  max-width: 34rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 0.5rem; }
.actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.25rem;
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--mint);
}
.actions a:hover { border-bottom-width: 2px; color: #fff; }
.actions a.primary {
  background: var(--lime);
  color: #12201a;
  padding: 0.6rem 1.35rem;
  border: 0;
  border-radius: 999px;
}
.actions a.primary:hover { background: #d6f6a3; color: #0c1812; }

/* ---------- Demo tabs ---------- */

.demo { min-width: 0; }

.concepts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 0;
  border-top: 1px solid var(--line);
}

details.concept { display: contents; }

details.concept > summary {
  grid-row: 1;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  min-height: 3.5rem;
  padding: 0.85rem 0.9rem 0.85rem 0;
  margin-right: 0.9rem;
  color: var(--cream-dim);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  border-bottom: 2px solid var(--line-soft);
  transition: color 0.2s, border-color 0.2s;
}
details.concept > summary::-webkit-details-marker { display: none; }
details.concept > summary::marker { content: ""; }
details.concept:nth-child(1) > summary { grid-column: 1; }
details.concept:nth-child(2) > summary { grid-column: 2; }
details.concept:nth-child(3) > summary { grid-column: 3; }
details.concept:last-child > summary { margin-right: 0; }
details.concept > summary:hover { color: var(--cream); border-bottom-color: var(--line); }
details.concept[open] > summary { color: var(--cream); border-bottom-color: var(--lime); }
details.concept:nth-child(2)[open] > summary { border-bottom-color: var(--mint); }
details.concept:nth-child(3)[open] > summary { border-bottom-color: var(--lavender); }

details.concept > .concept-panel {
  grid-row: 2;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 420px;
  padding: clamp(1.25rem, 3vw, 2rem) 0 0;
}
details.concept:not([open]) > .concept-panel { display: none; }

@media (max-width: 640px) {
  details.concept > summary { font-size: 0.8125rem; padding-right: 0.5rem; margin-right: 0.5rem; min-height: 4.25rem; }
  details.concept > .concept-panel { min-height: 0; }
}

.concept-panel { color: var(--cream); display: grid; align-content: start; gap: 1.25rem; }

.diagram-caption {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cream-dim);
  max-width: 38rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

/* Mini apps / icons */
.mini-apps { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.app-icon { width: 40px; height: 30px; flex: none; color: var(--mint); }
.large-app { width: clamp(88px, 14vw, 128px); height: auto; color: var(--lime); }

/* Stack panel */
.app-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.app-region { display: grid; gap: 0.4rem; align-content: start; font-size: 0.8125rem; line-height: 1.35; color: var(--cream-dim); min-width: 0; }
.app-region .mini-apps { gap: 0.25rem; }
.app-region:nth-child(1) .app-icon { color: var(--lime); }
.app-region:nth-child(2) .app-icon { color: var(--mint); }
.app-region:nth-child(3) .app-icon { color: var(--lavender); }
@media (max-width: 480px) { .app-region .app-icon { width: 32px; height: 24px; } }

.stack-layers { display: grid; gap: 0; }
details.layer { --tone: var(--mint); border-top: 1px solid var(--line); border-left: 3px solid var(--tone); background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 9%, transparent), transparent 80%); }
details.layer:last-child { border-bottom: 1px solid var(--line); }
details.layer:nth-child(1) { --tone: var(--lavender); }
details.layer:nth-child(2) { --tone: var(--mint); }
details.layer:nth-child(3) { --tone: var(--lime); }

details.layer > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0.9rem 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
details.layer > summary::-webkit-details-marker { display: none; }
details.layer > summary::marker { content: ""; }
details.layer > summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  color: var(--tone);
  font-size: 1.25rem;
  line-height: 1.2;
  padding-left: 0.5rem;
}
details.layer[open] > summary::after { content: "\2212"; }
.layer-number { flex: none; font-family: var(--mono); font-size: 0.8125rem; color: var(--tone); padding-top: 0.2rem; min-width: 1.5rem; }
.layer-title { font-weight: 650; color: var(--cream); line-height: 1.3; }
.layer-purpose { font-size: 0.9375rem; color: var(--cream-dim); line-height: 1.45; margin-top: 0.15rem; }
details.layer > summary > div { min-width: 0; }
.optional {
  flex: none;
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-radius: 999px;
}
details.layer > p { padding: 0 1rem 1rem 3.25rem; font-size: 0.9375rem; color: #cfdbd5; max-width: 36rem; }
@media (max-width: 480px) {
  details.layer > summary { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
  details.layer > summary > div { flex: 1 1 10rem; }
  details.layer > p { padding-left: 1rem; }
}
.stack-footnote { font-size: 0.875rem; color: var(--cream-dim); line-height: 1.5; }

/* Locations panel */
.placement-origin { display: grid; justify-items: center; gap: 0.5rem; text-align: center; color: var(--lime); }
.placement-path { display: block; width: 100%; max-width: 32rem; height: auto; margin-inline: auto; color: var(--mint); opacity: 0.8; }
.placement-path :where(path, line, polyline) { stroke-width: 1.25; stroke-dasharray: 3 5; }
.locations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.location { display: grid; gap: 0.5rem; align-content: start; padding-top: 0.85rem; border-top: 1px solid var(--line); min-width: 0; }
.location:nth-child(1) { --tone: var(--lime); }
.location:nth-child(2) { --tone: var(--mint); }
.location:nth-child(3) { --tone: var(--lavender); }
.location { border-top-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.location-icon { width: 28px; height: 28px; color: var(--tone); }
.location h3 { font-size: 1rem; line-height: 1.3; font-weight: 650; }
.location p { font-size: 0.875rem; line-height: 1.5; color: var(--cream-dim); }
.location .mini-apps .app-icon { width: 30px; height: 22px; color: var(--tone); }
@media (max-width: 560px) {
  .locations-grid { grid-template-columns: 1fr; }
}

/* Outcomes panel */
.outcome-map { display: grid; gap: 0; }
details.outcome { border-top: 1px solid var(--line); }
details.outcome:last-child { border-bottom: 1px solid var(--line); }
details.outcome > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--cream);
}
details.outcome > summary::-webkit-details-marker { display: none; }
details.outcome > summary::marker { content: ""; }
details.outcome > summary::after { content: "+"; margin-left: auto; color: var(--mint); font-size: 1.25rem; line-height: 1; padding-left: 0.5rem; }
details.outcome[open] > summary::after { content: "\2212"; }
.outcome-icon { width: 28px; height: 28px; flex: none; color: var(--mint); }
details.outcome:nth-child(3n+2) .outcome-icon { color: var(--lavender); }
details.outcome:nth-child(3n) .outcome-icon { color: var(--lime); }
.outcome-body { display: grid; gap: 0.9rem; padding: 0 0 1.1rem calc(28px + 0.8rem); }
.outcome-body p { font-size: 0.9375rem; color: #cfdbd5; max-width: 36rem; }
.mechanism { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--cream-dim); }
.mechanism svg { width: 28px; height: 28px; flex: none; color: var(--mint); }
.mechanism span { padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; line-height: 1.4; }
@media (max-width: 480px) { .outcome-body { padding-left: 0; } }

/* ---------- Below the hero ---------- */

.value-section, .proof-section, .start-section {
  background: var(--page);
  color: var(--ink);
}
.value-section, .proof-section { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.value-section { padding-bottom: clamp(3rem, 7vw, 5rem); }
.proof-section { padding-bottom: clamp(3rem, 7vw, 5rem); background: var(--page-alt); border-block: 1px solid var(--rule); margin-top: 0; }
.value-section.wrap, .proof-section.wrap { max-width: none; padding-inline: 0; }
.value-section > *, .proof-section > * { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.section-heading { display: grid; gap: 0.6rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 46rem; }
.section-heading .eyebrow { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.section-heading h2, .start-section h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; color: var(--ink); text-wrap: balance; }
.section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 1.0625rem; max-width: 40rem; }

.value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4.5rem); }

.value-card {
  --tone: var(--accent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-content: start;
  padding-top: 1.35rem;
  border-top: 2px solid var(--tone);
}
.value-card:nth-child(1) { --tone: #82c9b5; }
.value-card:nth-child(2) { --tone: #b5a0d0; }
.value-card:nth-child(3) { --tone: #c8ef8b; }
.value-card:nth-child(4) { --tone: #86badf; }
.value-card:nth-child(5) { --tone: #e3a07c; }
.value-card:nth-child(6) { --tone: #dc9cc4; }
@media (prefers-color-scheme: light) {
  .value-card:nth-child(1) { --tone: #1f7a66; }
  .value-card:nth-child(2) { --tone: #7b5a91; }
  .value-card:nth-child(3) { --tone: #5f7a1d; }
  .value-card:nth-child(4) { --tone: #326c91; }
  .value-card:nth-child(5) { --tone: #a4572f; }
  .value-card:nth-child(6) { --tone: #9a4f7b; }
}
.value-icon { grid-row: 1 / span 2; width: 36px; height: 36px; color: var(--tone); margin-top: 0.1rem; }
.value-card h3 { grid-column: 2; font-size: 1.25rem; line-height: 1.25; font-weight: 650; color: var(--ink); }
.value-card > p { grid-column: 2; margin-top: 0.5rem; color: var(--muted); max-width: 32rem; }
.value-card > details { grid-column: 1 / -1; margin-top: 1rem; border-top: 1px solid var(--rule); }
.value-card > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.value-card > details > summary::-webkit-details-marker { display: none; }
.value-card > details > summary::marker { content: ""; }
.value-card > details > summary::after { content: "+"; color: var(--tone); font-size: 1.25rem; line-height: 1; }
.value-card > details[open] > summary::after { content: "\2212"; }
.feature-list { display: grid; gap: 0.5rem; padding: 0.25rem 0 0.5rem; }
.feature-list li { position: relative; padding-left: 1.25rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 1px; background: var(--tone); }

.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.proof { display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.proof:nth-child(3n+1) { border-top: 2px solid var(--accent); }
.proof:nth-child(3n+2) { border-top: 2px solid #b5a0d0; }
.proof:nth-child(3n) { border-top: 2px solid #c8ef8b; }
@media (prefers-color-scheme: light) {
  .proof:nth-child(3n+2) { border-top-color: #7b5a91; }
  .proof:nth-child(3n) { border-top-color: #5f7a1d; }
}
.proof-name { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.proof h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 650; color: var(--ink); }
.proof p { color: var(--muted); font-size: 1rem; }
.proof a { justify-self: start; font-weight: 600; min-height: 2.5rem; display: inline-flex; align-items: center; }
.proof a::after { content: "\2192"; margin-left: 0.4rem; transition: transform 0.2s; }
.proof a:hover::after { transform: translateX(3px); }

.start-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.start-section > .wrap { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tool {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-content: start;
  padding: 1.5rem 1.5rem 1.6rem 0;
  color: var(--ink);
  text-decoration: none;
}
.tool + .tool { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.tool-number { grid-column: 1 / -1; font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); }
.tool h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 650; color: var(--ink); }
.tool p { grid-column: 1; color: var(--muted); font-size: 1rem; }
.tool svg { grid-column: 2; grid-row: 2; width: 28px; height: 28px; color: var(--accent); transition: transform 0.2s; }
.tool:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tool:hover svg { transform: translateX(3px); }
.tool:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

footer.wrap {
  max-width: none;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  background: var(--page);
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
footer.wrap > * { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 0.75rem; }
.footer-links a { color: var(--ink); font-size: 0.9375rem; display: inline-flex; align-items: center; min-height: 2.25rem; }
footer.wrap p { font-size: 0.875rem; line-height: 1.5; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero h1 { max-width: 22ch; }
  .hero-wordmark { width: min(100%, 18rem); }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool, .tool + .tool { padding: 1.25rem 0; border-left: 0; }
  .tool + .tool { border-top: 1px solid var(--rule); }
}

@media (max-width: 860px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 720px) {
  .value-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; }
}

@media (max-width: 420px) {
  .value-card { grid-template-columns: minmax(0, 1fr); }
  .value-icon { grid-row: auto; margin-bottom: 0.6rem; }
  .value-card h3, .value-card > p { grid-column: 1; }
  .app-strip { gap: 0.5rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-nebula .signal-dot { opacity: 0.35; }
}
/* Keep native details controls while avoiding anonymous details-content grid boxes. */
.concepts{display:block;position:relative;padding-top:4.4rem;min-height:470px}
details.concept{display:block;margin:0;padding:0;border:0}
details.concept>summary{position:absolute;top:0;left:0;width:33.3333%;margin:0;padding:1rem .65rem;text-align:center;min-height:3.5rem}
details.concept:nth-child(2)>summary{left:33.3333%}
details.concept:nth-child(3)>summary{left:66.6666%}
details.concept>.concept-panel{width:100%;min-width:0;min-height:420px}
details.concept:not([open])>.concept-panel{display:none}
.hero-nebula .node-ping{animation:ping 24s ease-out infinite;animation-delay:var(--ping-delay,0s);opacity:0}
@keyframes ping{0%,20%,100%{opacity:0;transform:scale(.95)}4%{opacity:.15}19%{opacity:0;transform:scale(1.65)}}
.hosted-link{margin-top:1.5rem;font-size:.95rem}
@media(prefers-reduced-motion:reduce){.hero-nebula .node-ping{animation:none;opacity:0}}

/* Preserve the original drawn CARLOS letterforms and keep the scene behind the content. */
.hero-nebula{opacity:.18;mask-image:linear-gradient(90deg,transparent 5%,#000 55%)}
.hero-nebula .ambient-cloud{opacity:1}
.hero-nebula .node-light{fill:url(#node-light);stroke:none;opacity:.5}
.hero-wordmark path,.wordmark path{stroke-width:18;stroke-linecap:butt;stroke-linejoin:miter}
.layer-title,.layer-purpose{display:block}
.demo{padding:1.25rem;background:#101c23c9;border:1px solid #ffffff20;border-radius:18px}
.placement-path{width:100%;max-width:none;height:70px}
.placement-path path{vector-effect:non-scaling-stroke}
.locations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.location h3{font-size:.85rem}
.hero-nebula .signal-dot{animation-delay:var(--signal-delay,0s)}
@keyframes travel{0%,25%,100%{opacity:0}1%,24%{opacity:.32}0%{transform:translate(0,0)}25%,100%{transform:translate(var(--travel-x),var(--travel-y))}}
@media(max-width:480px){.demo{padding:.8rem}.concepts{padding-top:4rem}.app-region .app-icon{width:25px;height:20px}.location .mini-apps .app-icon{width:26px}.location h3{font-size:.8rem}.optional{font-size:.65rem}.layer-number{display:none}details.layer>summary{flex-wrap:nowrap;padding:.9rem .6rem;gap:.4rem}details.layer>summary>div{flex:1}.layer-title{font-size:.95rem}.layer-purpose{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.hero-nebula .signal-dot{animation:none;opacity:0}}

/* A fully collapsed native disclosure group should collapse its space too. */
.concepts:not(:has(>.concept[open])){min-height:0}
details.layer>p{padding-left:1rem}
@media(min-width:761px){.value-card{grid-template-rows:auto 1fr auto;align-content:stretch}.value-card>details{align-self:end}}
/* Outcomes variations share copy so the comparison is about presentation. */
.hero h1{font-size:clamp(1.85rem,1.15rem + 1.65vw,2.7rem);max-width:23ch;line-height:1.22;text-wrap:pretty;font-weight:500}
.hero-copy{align-content:center;gap:1.8rem}
.hero-grid{align-items:center;gap:clamp(2rem,5vw,5rem)}
.demo{background:#101c23b3;border-color:#ffffff12;padding:1.4rem}
.benefit-scene{display:block;width:100%;height:auto;max-height:135px;stroke-width:1.5;color:var(--mint)}
.focus-map .outcome>summary{padding:1.25rem 0;line-height:1.35;font-size:1.12rem}
.focus-map .outcome-body{padding:0 0 1.5rem 0;gap:1.5rem}
.focus-map .outcome-body p{font-size:1.05rem;line-height:1.6;max-width:36ch}
.focus-map .outcome:nth-child(2) .benefit-scene{color:var(--lavender)}
.focus-map .outcome:nth-child(3) .benefit-scene{color:var(--lime)}
.benefit-cards{display:grid;gap:.8rem}
.benefit-tile{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:1.25rem;padding:1.3rem 1rem;background:#82c9b509;border:1px solid #82c9b52c;border-radius:14px}
.benefit-tile.cost{background:#b5a0d009;border-color:#b5a0d02c}
.benefit-tile.control{background:#c8ef8b09;border-color:#c8ef8b2c}
.benefit-tile.cost .benefit-scene{color:var(--lavender)}
.benefit-tile.control .benefit-scene{color:var(--lime)}
.benefit-tile h2{font-size:1.1rem;line-height:1.35;margin-bottom:.5rem}
.benefit-tile p{font-size:.92rem;color:var(--cream-dim);line-height:1.55}
.connected-map{display:grid;grid-template-columns:85px 1fr;gap:2.4rem;align-items:center;min-height:360px}
.connected-origin{position:relative;display:grid;justify-items:center;gap:.5rem;text-align:center;font-size:.85rem;color:var(--mint)}
.connected-origin .app-icon{width:65px;height:50px;filter:drop-shadow(0 0 18px #82c9b530)}
.connected-origin:after{content:'';position:absolute;top:50%;left:100%;width:1.4rem;border-top:1px solid #82c9b560}
.connected-branches{border-left:1px solid #82c9b560;padding-left:1rem;display:grid;gap:1.7rem}
.connected-benefit{position:relative;border:1px solid #82c9b540;border-radius:12px;padding:.9rem;background:#16262fcc}
.connected-benefit:before{content:'';position:absolute;left:-1rem;top:1.8rem;width:1rem;border-top:1px solid #82c9b560}
.connected-benefit summary{display:flex;align-items:center;gap:.7rem;font-size:1.05rem;line-height:1.4;cursor:pointer;list-style:none}
.connected-benefit summary::-webkit-details-marker{display:none}
.connected-benefit summary:after{content:'+';margin-left:auto;color:var(--mint)}
.connected-benefit[open] summary:after{content:'−'}
.connected-benefit p{margin-top:.8rem;color:var(--cream-dim);font-size:.95rem;line-height:1.55}
.connected-benefit.cost{border-color:#b5a0d050}.connected-benefit.cost .outcome-icon{color:var(--lavender)}
.connected-benefit.control{border-color:#c8ef8b50}.connected-benefit.control .outcome-icon{color:var(--lime)}
@media(max-width:1000px){.hero h1{max-width:32ch}.hero-copy{max-width:44rem}.demo{max-width:44rem;width:100%}.hero{padding-bottom:2.5rem}}
@media(max-width:480px){.hero-copy{gap:1.4rem}.hero h1{font-size:1.8rem}.demo{padding:.8rem}.benefit-tile{grid-template-columns:1fr;gap:.8rem;padding:1.1rem}.benefit-tile .benefit-scene{max-width:190px;height:72px}.connected-map{grid-template-columns:1fr;gap:1.5rem}.connected-origin:after{left:50%;top:100%;height:1.5rem;width:0;border-left:1px solid #82c9b560}.connected-origin{padding-bottom:.6rem}.connected-branches{margin-left:.5rem}.focus-map .outcome>summary{font-size:1rem}details.concept>.concept-panel{min-height:0}}
.proof a::after{content:none}
@media(max-width:480px){details.concept>summary{font-size:.75rem;padding-inline:.2rem;white-space:nowrap}details.concept>summary span{overflow-wrap:normal}.connected-origin:after{display:none}}
/* Cards direction: one page, concise outcomes and open explanations. */
.hero{padding-block:5rem;min-height:660px}
.hero-grid{grid-template-columns:1.08fr 1fr;gap:4rem}
.hero-copy{gap:0;align-content:center}
.hero h1{margin:0 0 2rem;width:100%;max-width:none}
.hero-wordmark{width:100%;max-width:480px}
.hero-subtitle{font-size:clamp(22px,2.4vw,34px);line-height:1.35;letter-spacing:-.03em;max-width:590px;color:var(--cream);font-weight:400}
.hero .actions{margin-top:2.4rem}
.benefit-cards{gap:1rem}
.benefit-tile{grid-template-columns:100px minmax(0,1fr);padding:1.35rem 1.1rem;gap:1rem;min-height:130px;background:#15272de6}
.benefit-tile h2{font-size:1.3rem;margin-bottom:.35rem;letter-spacing:-.02em}
.benefit-tile p{font-size:1rem;max-width:none;line-height:1.45}
.card-art{width:100%;height:auto;color:var(--mint)}
.cost .card-art{color:var(--lavender)}.control .card-art{color:var(--lime)}
.chapter{padding:4.8rem var(--gutter);max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;border-top:1px solid var(--rule);color:var(--ink);background:var(--page)}
.chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}
.chapter h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.18;letter-spacing:-.035em;font-weight:650;max-width:23ch}
.chapter-heading p{margin-top:1rem;max-width:45ch;font-size:1.1rem;color:var(--muted);line-height:1.6}
.section-picture{width:190px;height:95px;flex:none;color:var(--accent)}
.small-art{width:38px;height:32px;color:var(--accent);margin-bottom:1rem}
.benefits-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.benefits-four h3{font-size:1.15rem;line-height:1.3;margin-bottom:.6rem}
.benefits-four p{color:var(--muted);font-size:1rem;max-width:23ch}
.how-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.how-graphic{color:var(--accent);padding:2rem 0}
.process-unit{border:1.5px solid currentColor;border-radius:12px;max-width:300px;margin:auto;overflow:hidden;background:color-mix(in srgb,var(--accent) 5%,var(--page))}
.window-dots{border-bottom:1px solid currentColor;letter-spacing:5px;line-height:1;padding:.45rem .8rem;text-align:left;font-size:.85rem}
.components{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1.3rem}
.components span{padding:.45rem .3rem;border:1px solid var(--rule);border-radius:5px;text-align:center;font-size:.8rem;color:var(--ink)}
.branch-lines{height:45px;width:66%;border-top:1px solid currentColor;border-inline:1px solid currentColor;position:relative;margin:32px auto 0;border-radius:8px 8px 0 0;opacity:.5}
.branch-lines:before{content:'';position:absolute;bottom:0;left:50%;height:77px;border-left:1px solid currentColor}
.instance-regions{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center}
.instance-regions>div{display:grid;justify-items:center;gap:.5rem}
.instance-regions svg{width:70px;height:52px}
.instance-regions span{font-size:.75rem;color:var(--muted)}
.how-steps{display:grid;gap:1.8rem;counter-reset:steps}
.how-steps li{display:flex;gap:1.3rem;align-items:baseline}
.step-number{color:var(--accent);font:12px var(--mono);flex:none}
.how-steps h3{font-size:1.2rem;line-height:1.35;margin-bottom:.4rem}
.how-steps p{font-size:1rem;color:var(--muted);max-width:32ch}
.why-graphic{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:20px;overflow:hidden}
.discard-side,.keep-side{padding:2rem;min-width:0;position:relative;display:grid;align-content:start;gap:2rem}
.discard-side{color:#bfb29e;background:#bda18209}.keep-side{color:var(--mint);border-left:1px solid var(--rule);background:#82c9b509}
.eyebrow{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.discard-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:relative;z-index:1}
.discard-list span{font-size:.9rem;border:1px solid #bfb29e50;padding:.55rem .3rem;text-align:center;border-radius:5px;background:var(--page)}
.bin-art{width:160px;height:80px;margin:-1rem auto 0;opacity:.65}
.cloud-stage{position:relative;display:grid;align-items:center;min-height:230px;padding:0 .8rem}
.clouds{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.single-window{position:relative;border:1.5px solid currentColor;border-radius:10px;background:var(--page);margin:auto;width:90%;z-index:1}
.single-window p{font-size:1.15rem;line-height:1.4;text-align:center;padding:1.7rem 1rem;color:var(--ink)}
.chapter.proof-section{padding-block:4.8rem;background:var(--page)}
.chapter.proof-section>*{padding-inline:0;max-width:none}
.proof-grid{gap:2.5rem}
.proof p{font-size:.95rem;line-height:1.65}
.proof h3{font-size:1.5rem}
.chapter.start-section{padding-block:4.8rem}
.overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.overview-item{padding:1rem 2rem 2rem;--tone:var(--accent)}
.overview-item:first-child{padding-left:0}.overview-item:last-child{padding-right:0}
.overview-item+.overview-item{border-left:1px solid var(--rule)}
.overview-item.rastrillo{--tone:#b5a0d0}.overview-item.platform{--tone:#86badf}
.overview-number{display:block;font:13px var(--mono);letter-spacing:2px;color:var(--tone);margin-bottom:1.8rem}
.overview h3{font-size:2rem;letter-spacing:-.03em;margin-bottom:1.6rem;line-height:1.2;color:var(--tone)}
.overview h3 a{color:inherit;text-decoration:none}.overview h3 a:hover{text-decoration:underline}
.overview p{font-size:1.13rem;line-height:1.65;max-width:30ch}
.overview-actions{margin-top:1.6rem;font-size:.95rem}.overview-actions a{color:var(--tone)}
@media(prefers-color-scheme:light){.keep-side{color:#287967}.discard-side{color:#74644f}.overview-item.rastrillo{--tone:#805b8f}.overview-item.platform{--tone:#326c91}}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-copy{max-width:650px}.hero{min-height:0;padding-block:3rem}.hero-wordmark{max-width:440px}.hero-subtitle{max-width:590px}.benefit-cards{max-width:none}.benefit-tile{grid-template-columns:100px 1fr}.benefit-tile p{max-width:none}.benefits-four{grid-template-columns:1fr 1fr}.how-layout{gap:2rem}}
@media(max-width:700px){.chapter{padding-block:3rem}.chapter-heading{gap:1rem}.section-picture{width:110px;height:65px}.chapter h2{font-size:1.8rem}.how-layout{grid-template-columns:1fr;gap:1.5rem}.how-graphic{max-width:420px;width:100%;margin:auto}.why-graphic{grid-template-columns:1fr}.keep-side{border-left:0;border-top:1px solid var(--rule)}.discard-side,.keep-side{padding:1.5rem;gap:1.2rem}.cloud-stage{min-height:200px}.overview{grid-template-columns:1fr}.overview-item,.overview-item:first-child,.overview-item:last-child{padding:2rem 0}.overview-item+.overview-item{border-left:0;border-top:1px solid var(--rule)}.overview-number{margin-bottom:1rem}.overview h3{margin-bottom:1rem}.overview p{max-width:45ch}.chapter.proof-section,.chapter.start-section{padding-block:3rem}}
@media(max-width:420px){.hero-wordmark{max-width:340px}.hero h1{margin-bottom:1.7rem}.hero-subtitle{font-size:23px}.benefit-tile{padding:1.2rem .8rem;grid-template-columns:70px 1fr;gap:.8rem}.benefit-tile h2{font-size:1.15rem}.benefit-tile p{font-size:.9rem}.benefits-four{gap:2rem 1.3rem}.benefits-four h3{font-size:1rem}.benefits-four p{font-size:.9rem}.chapter-heading .section-picture{width:80px}.chapter-heading{align-items:flex-start}}
.how-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;margin-top:2.5rem!important;padding-top:1.6rem!important;border-top:1px solid var(--rule);color:var(--muted);font-size:.92rem}
.how-capabilities li{padding-left:1rem;position:relative}.how-capabilities li:before{content:'';position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--accent)}
@media(max-width:700px){.how-capabilities{grid-template-columns:1fr 1fr;gap:1rem}}
.hero-nebula{opacity:.14;mask-image:linear-gradient(90deg,transparent 12%,#000 68%)}
.cloud-stage{min-height:230px;align-items:start;padding-top:.6rem}
.cloud-stage .clouds{inset:auto 0 0 auto;width:90%;height:75px}
.cloud-stage .single-window{margin:0 auto}
/* Nebula behind the cards: diffuse light, quiet orbits and tiny stars. */
.hero-nebula{inset:-8% -7% auto auto;width:74%;height:116%;opacity:1;mask-image:linear-gradient(90deg,transparent,#000 28%);overflow:visible}
.nebula-cloud{transform-origin:395px 315px;animation:nebula-drift 36s ease-in-out infinite alternate}
.cloud-violet{animation-duration:43s;animation-delay:-19s}
.nebula-orbits{transform-origin:395px 315px;animation:nebula-orbit 180s linear infinite}
.nebula-links{opacity:.08;animation:nebula-lines 29s ease-in-out infinite}
.nebula-stars circle{opacity:.35;animation:nebula-star 24s ease-in-out var(--star-delay,0s) infinite}
@keyframes nebula-drift{from{transform:translate(-12px,8px) scale(.98);opacity:.7}to{transform:translate(16px,-12px) scale(1.07);opacity:1}}
@keyframes nebula-orbit{to{transform:rotate(360deg)}}
@keyframes nebula-lines{0%,100%{opacity:.05}50%{opacity:.19}}
@keyframes nebula-star{0%,100%{opacity:.2}50%{opacity:.55}}
.hero .benefit-tile{background:#15272dbd;border-color:#9dcec72c;box-shadow:0 12px 35px #07131915;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero .benefit-tile.cost{background:#272538b5;border-color:#b5a0d030}
.hero .benefit-tile.control{background:#213329b5;border-color:#c8ef8b30}
/* Full-width colour fields, with the same reading width throughout. */
.chapter{max-width:none;margin:0;padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2));border-top:1px solid var(--rule);background:var(--page);--rule:color-mix(in srgb,var(--accent) 20%,transparent)}
.chapter.benefits{--page:#142b28;--accent:#8bd4bc;--muted:#b5cfc4;--ink:#edf6f0}
.chapter.how{--page:#242338;--accent:#c2ace4;--muted:#c4bfd3;--ink:#f2eff8}
.chapter.why{--page:#30251f;--accent:#e7ae87;--muted:#d2c1b5;--ink:#fbf0e8}
.chapter.proof-section{--page:#192c3b;--accent:#8dc5e6;--muted:#b8cad6;--ink:#edf4fb}
.chapter.start-section{--page:#192f30;--accent:#94d1c9;--muted:#bbd1cc;--ink:#eef7f4}
.chapter h2,.chapter .section-picture{color:var(--accent)}
.chapter .keep-side{color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.chapter .proof{border-top-color:var(--accent)}
.chapter .proof a{color:var(--accent)}
@media(prefers-color-scheme:light){
 .chapter.benefits{--page:#e7f1e9;--accent:#286e56;--muted:#475e50;--ink:#192d22}
 .chapter.how{--page:#eeebf7;--accent:#70508e;--muted:#5d526e;--ink:#292133}
 .chapter.why{--page:#f6ebe0;--accent:#945628;--muted:#6c5746;--ink:#342719}
 .chapter.proof-section{--page:#e6eff7;--accent:#32698f;--muted:#4d6475;--ink:#1f3040}
 .chapter.start-section{--page:#e3f0ee;--accent:#276d66;--muted:#48625e;--ink:#1b3431}
}
@media(max-width:1000px){.hero-nebula{inset:auto -20% -10% auto;width:125%;height:85%;mask-image:linear-gradient(180deg,transparent,#000 32%)}}
@media(prefers-reduced-motion:reduce){.nebula-cloud,.nebula-orbits,.nebula-links,.nebula-stars circle{animation:none!important}.nebula-links{opacity:.1}.nebula-stars circle{opacity:.35}}
.overview-actions{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem 1rem}
.hosting-guide{max-width:800px;margin:0 auto;padding:4rem var(--gutter);color:var(--cream)}
.hosting-guide h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-.035em;margin:1rem 0 2rem}
.hosting-guide h2{font-size:1.55rem;color:var(--mint);margin:2.5rem 0 1rem}
.hosting-guide p,.hosting-guide li{color:var(--cream-dim);line-height:1.75;margin-bottom:1.1rem}
.hosting-guide ol,.hosting-guide ul{padding-left:1.5rem!important;list-style:revert!important}
.hosting-guide table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.hosting-guide th,.hosting-guide td{padding:.75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hosting-guide code{font-size:.9em;color:var(--mint)}
/* Organic light and fine grain replace the hero's network diagram. */
.hero-nebula.nebula-textured{inset:-12% -9% auto auto;width:83%;height:130%;opacity:.95;mask-image:linear-gradient(90deg,transparent 2%,#000 34%);overflow:visible}
.mist-layer{transform-origin:500px 350px;animation:mist-drift 42s ease-in-out infinite alternate}
.mist-second{animation-duration:53s;animation-delay:-24s}
.mist-ribbons{animation-duration:61s;animation-delay:-16s}
@keyframes mist-drift{from{transform:translate(-13px,9px) rotate(-3deg) scale(.98);opacity:.72}to{transform:translate(16px,-12px) rotate(3deg) scale(1.05);opacity:1}}
.hero:after,.chapter:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('home-textures/grain.svg');background-size:160px 160px;opacity:.045;mix-blend-mode:soft-light;z-index:0}
.hero-grid{position:relative;z-index:1}
.chapter{position:relative;isolation:isolate;overflow:hidden}
.chapter>*{position:relative;z-index:1}
.chapter:after{content:'';position:absolute;right:-3%;top:-8%;width:min(49%,650px);height:116%;pointer-events:none;z-index:0;background:var(--accent);opacity:.105;mask:var(--section-texture) center/contain no-repeat}
.chapter.benefits{--section-texture:url('home-textures/contours.svg');background-image:radial-gradient(ellipse at 95% 40%,#73c6a80b,transparent 60%)}
.chapter.how{--section-texture:url('home-textures/strata.svg');background-image:radial-gradient(ellipse at 90% 10%,#b99cdb0e,transparent 65%)}
.chapter.why{--section-texture:url('home-textures/rays.svg');background-image:radial-gradient(ellipse at 90% 50%,#e6a5780b,transparent 60%)}
.chapter.proof-section{--section-texture:url('home-textures/waves.svg');background-image:radial-gradient(ellipse at 95% 15%,#83b9da0d,transparent 65%)}
.chapter.start-section{--section-texture:url('home-textures/folds.svg');background-image:radial-gradient(ellipse at 95% 80%,#83c7bd0b,transparent 60%)}
@media(prefers-color-scheme:light){.chapter:before{opacity:.07;mix-blend-mode:multiply}.chapter:after{opacity:.085}}
@media(max-width:1000px){.hero-nebula.nebula-textured{inset:auto -25% -10% auto;width:150%;height:82%;mask-image:linear-gradient(180deg,transparent,#000 25%)}}
@media(max-width:700px){.chapter:after{width:75%;right:-25%;opacity:.065}.hero:after{opacity:.035}}
@media(prefers-reduced-motion:reduce){.mist-layer{animation:none!important;transform:none}}
/* Soft gradients rasterise once; only the HTML layers move and fade. */
.hero-nebula.nebula-bloom{inset:-15% -8% auto auto;width:84%;height:136%;opacity:.88;mask-image:none;overflow:visible}
.bloom-cloud{position:absolute;inset:0;animation:nebula-bloom 32s ease-in-out infinite alternate;will-change:transform,opacity;background-repeat:no-repeat}
.bloom-cool{background:radial-gradient(ellipse 32% 35% at 38% 43%,#38c4d6ad,#38c4d661 35%,#38c4d61f 70%,transparent),radial-gradient(ellipse 33% 37% at 69% 36%,#9c76e8ad,#9c76e861 35%,#9c76e81f 70%,transparent)}
.bloom-warm{background:radial-gradient(ellipse 26% 31% at 72% 60%,#d780bd80,#d780bd45 35%,#d780bd14 70%,transparent),radial-gradient(ellipse 19% 20% at 58% 76%,#edbd8359,#edbd8329 40%,transparent);animation-duration:41s;animation-delay:-12s}
.bloom-green{background:radial-gradient(ellipse 30% 33% at 42% 65%,#61dbb28c,#61dbb24d 35%,#61dbb218 70%,transparent);animation-duration:37s;animation-delay:-8s}
@keyframes nebula-bloom{from{transform:translate3d(-18px,15px,0);opacity:.55}to{transform:translate3d(25px,-18px,0);opacity:.9}}
.hero:after{mix-blend-mode:normal}
/* Reading content stays fully visible at every scroll position. */
@media(max-width:1000px){.hero-nebula.nebula-bloom{inset:auto -25% -13% auto;width:150%;height:88%;mask-image:linear-gradient(180deg,transparent,#000 25%)}}
@media(prefers-reduced-motion:reduce){.bloom-cloud{animation:none!important;transform:none;will-change:auto;opacity:.8}}
@media print{.bloom-cloud{animation:none}.chapter *{animation:none!important;transform:none!important;opacity:1!important}}
/* Clip decorative patterns without creating an unscrollable animation timeline. */
.chapter{overflow:clip}
/* The promise bridges the hero and the more detailed benefits. */
.platform-promise{padding:4.2rem var(--gutter) 4.5rem;background:#12232a;border-top:1px solid #8bd4bc22;text-align:center;color:var(--cream);position:relative;isolation:isolate}
.platform-promise:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 110%,#70c8b210,transparent 65%);pointer-events:none}
.platform-promise h2{font-size:clamp(1.7rem,2.7vw,2.5rem);line-height:1.3;letter-spacing:-.035em;font-weight:600;margin:0 auto 2rem;max-width:36ch}
.platform-promise h2 span{display:block}.platform-promise h2 span:last-child{color:var(--mint)}
.promise-stack{display:flex;justify-content:center;flex-wrap:wrap;gap:.65rem;max-width:57rem;margin-inline:auto!important}
.promise-stack li{font-size:.95rem;padding:.6rem 1rem;border:1px solid #82c9b545;border-radius:7px;background:#82c9b50b;box-shadow:0 3px 0 #07161b50;color:#cbe8df;line-height:1.4}
.promise-stack li:nth-child(3n+2){border-color:#b5a0d045;background:#b5a0d00b;color:#ded0ed}
.promise-stack li:nth-child(3n){border-color:#86badf45;background:#86badf0b;color:#c7e0ef}

@media(prefers-color-scheme:light){main>.platform-promise{background:#edf3ef;color:#1b3431}.platform-promise h2 span:last-child{color:#276d66}.promise-stack li{color:#285e50;border-color:#28796740;background:#28796708;box-shadow:0 3px 0 #2879670d}.promise-stack li:nth-child(3n+2){color:#70508e;border-color:#70508e40;background:#70508e08}.promise-stack li:nth-child(3n){color:#32698f;border-color:#32698f40;background:#32698f08}}
@media(max-width:600px){.platform-promise{padding-block:3rem}.promise-stack{gap:.5rem;max-width:26rem}.promise-stack li{font-size:.85rem;padding:.55rem .8rem}.platform-promise h2{font-size:1.7rem;max-width:23ch}}
/* Balance the desktop attribute stack over two rows. */
.promise-stack{max-width:42rem}
@media(max-width:600px){.promise-stack{max-width:26rem}}

@media(prefers-reduced-motion:reduce){.hero-wordmark .hero-letter,.letter-halo,.hero-letter>svg{animation:none!important;transform:none;will-change:auto}.letter-halo{opacity:.35}}

/* Expanded user-authored outcomes: static illustrations and roomy benefit lists. */
.outcome-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem}
.outcome-card{grid-column:span 2;padding:1.6rem;border:1px solid var(--rule);border-radius:18px;background:color-mix(in srgb,var(--ink) 3%,var(--page));min-width:0}
.outcome-card:nth-last-child(-n+2){grid-column:span 3}
.outcome-icon{display:block;width:32px;height:32px;color:var(--accent);margin-bottom:1.3rem}
.outcome-card h3{font-size:1.35rem;line-height:1.25;letter-spacing:-.025em;margin:0 0 .85rem;color:var(--ink)}
.outcome-card p{font-size:1rem;line-height:1.6;color:var(--muted);margin:0 0 1.25rem;max-width:42ch}
.outcome-card ul{list-style:none;padding:1.1rem 0 0!important;margin:0!important;border-top:1px solid var(--rule);display:grid;gap:.8rem}
.outcome-card li{position:relative;padding-left:1.15rem;color:var(--ink);font-size:.95rem;line-height:1.5}
.outcome-card li:before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.outcome-card a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(min-width:1051px){.outcome-card:nth-child(3n+2){--accent:#c2ace4}.outcome-card:nth-child(3n){--accent:#8dc5e6}}
@media(prefers-color-scheme:light) and (min-width:1051px){.outcome-card:nth-child(3n+2){--accent:#70508e}.outcome-card:nth-child(3n){--accent:#32698f}}
@media(max-width:1050px){.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.outcome-card,.outcome-card:nth-last-child(-n+2){grid-column:auto}.outcome-card:last-child{grid-column:1/-1}}
@media(max-width:620px){.outcome-grid{grid-template-columns:1fr}.outcome-card{padding:1.4rem}.outcome-card:last-child{grid-column:auto}}

.platform-promise{padding-block:2.5rem 2rem}
.platform-promise h2{animation:none;opacity:1;transform:none;font-size:clamp(1.45rem,2.1vw,2rem);margin-bottom:1.5rem;line-height:1.35}
.attribute-map{max-width:70rem;margin-inline:auto}
.attribute-map ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;list-style:none;margin:0!important;padding:0!important}
.attribute-map li{--attribute:#8bd4bc;min-width:0;display:flex}
.attribute-map li:nth-child(3n+2){--attribute:#c2ace4}
.attribute-map li:nth-child(3n){--attribute:#8dc5e6}
body.landing .attribute-map a{display:flex;align-items:center;gap:.75rem;width:100%;min-height:4rem;height:100%;text-align:left;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--attribute) 24%,transparent);border-radius:8px;color:var(--attribute);background:color-mix(in srgb,var(--attribute) 4%,transparent);font-size:.9rem;line-height:1.4;text-decoration:none}
.attribute-icon{width:20px;height:20px;flex:none}
body.landing .attribute-map a:hover{background:color-mix(in srgb,var(--attribute) 13%,transparent);border-color:var(--attribute)}
.attribute-map a:focus-visible{outline:2px solid var(--attribute);outline-offset:3px}
.outcome-card{scroll-margin-top:2rem}
.outcome-card:target,.outcome-card:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
/* Keep the map and cards paired at every viewport size. */
.outcome-card:nth-child(3n+2){--accent:#c2ace4}
.outcome-card:nth-child(3n){--accent:#8dc5e6}
@media(prefers-color-scheme:light){.attribute-map li{--attribute:#286e56}.attribute-map li:nth-child(3n+2),.outcome-card:nth-child(3n+2){--attribute:#70508e;--accent:#70508e}.attribute-map li:nth-child(3n),.outcome-card:nth-child(3n){--attribute:#32698f;--accent:#32698f}}
@media(max-width:700px){.platform-promise{padding-block:2rem 1.5rem}.attribute-map ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}body.landing .attribute-map a{height:100%;padding:.65rem;font-size:.85rem;align-items:center}.attribute-icon{width:18px;height:18px;margin-top:.12rem}}

/* One shared palette and order for the map and the detailed benefit groups. */
.group-build{--group-accent:#8bd4bc;--group-surface:#142b28}
.group-run{--group-accent:#c2ace4;--group-surface:#242338}
.group-control{--group-accent:#8dc5e6;--group-surface:#192c3b}
.attribute-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;text-align:left}
.attribute-group{min-width:0}
.attribute-group h3{font-size:1rem;line-height:1.4;font-weight:600;color:var(--group-accent);margin:0 0 .8rem;padding:0 .15rem}
.attribute-map .attribute-group ul{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;grid-auto-rows:1fr}
.attribute-map .attribute-group li{--attribute:var(--group-accent)}
body.landing .attribute-map a{min-height:4rem}
.benefit-group{margin-top:3.5rem;padding:2rem 0 0;border-radius:0;background:none;border:0;border-top:1px solid color-mix(in srgb,var(--group-accent) 30%,transparent)}
.benefit-group:first-of-type{margin-top:0}
.benefit-group .benefit-group-title{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.3;margin:0 0 2rem;color:var(--group-accent);letter-spacing:-.025em}
.benefit-group .outcome-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.benefit-group .outcome-card{grid-column:auto;--accent:var(--group-accent);--page:var(--group-surface);--rule:color-mix(in srgb,var(--group-accent) 22%,transparent);padding:0 1.4rem;border:0;border-radius:0;background:none;box-shadow:none}
.benefit-group .outcome-card h4{font-size:1.2rem;line-height:1.3;letter-spacing:-.025em;margin:0 0 .85rem;color:var(--ink)}
.benefit-group .outcome-card:first-child{padding-left:0}
.benefit-group .outcome-card:last-child{padding-right:0}
.benefit-group .outcome-card+.outcome-card{border-left:1px solid var(--rule)}
.benefit-group .outcome-card ul{border-top:0;padding-top:0!important}
.benefit-group .outcome-card p{font-size:1rem}
.benefit-group .outcome-card li{font-size:.95rem}
@media(prefers-color-scheme:light){.group-build{--group-accent:#286e56;--group-surface:#e7f1e9}.group-run{--group-accent:#70508e;--group-surface:#eeebf7}.group-control{--group-accent:#32698f;--group-surface:#e6eff7}}
@media(max-width:1150px){.benefit-group .outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}.benefit-group .outcome-card:nth-child(odd){padding-left:0;border-left:0}.benefit-group .outcome-card:nth-child(even){padding-right:0}}
@media(max-width:800px){.attribute-map{grid-template-columns:1fr;gap:1.5rem}.attribute-map .attribute-group ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.benefit-group{padding-top:1.5rem;margin-top:2.5rem}.benefit-group .outcome-grid{grid-template-columns:1fr;gap:1.75rem}.benefit-group .outcome-card{padding:0}.benefit-group .outcome-card+.outcome-card{border-left:0;border-top:1px solid var(--rule);padding-top:1.75rem}.benefit-group .benefit-group-title{margin-bottom:1.5rem}}

/* ---------- Production footer and AI disclaimer ---------- */

.home-footer {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  background: var(--page);
  color: var(--muted);
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.6;
}
.home-footer > * { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 0.75rem; }
.home-footer nav a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink); font-size: 0.9375rem; }
.home-footer p { margin-bottom: 0.75rem; }
.home-footer p:last-child { margin-bottom: 0; }

.ai-disclaimer, .ai-disclaimer-fallback {
  --ink: #182721; --ink-2: #46574d; --surface: #fff; --rule: #ccd5ce; --prose: 40rem; --shadow-2: 0 12px 40px #0003;
}
@media (prefers-color-scheme: dark) {
  .ai-disclaimer, .ai-disclaimer-fallback { --ink: #e4eee8; --ink-2: #bdcfc4; --surface: #15272d; --rule: #34473f; --shadow-2: 0 12px 40px #0009; }
}
.ai-disclaimer .btn.primary { background: #c8ef8b; color: #14251b; padding: 13px 22px; border: 0; border-radius: 5px; }
.ai-disclaimer .btn.primary:focus-visible { outline: 3px solid #286e62; outline-offset: 4px; }

@media (prefers-color-scheme: light) {
  body.hosting-page { --page: #f4f7f1; --ink: #14232b; --muted: #45575a; --link: #1a5f4f; background: var(--page); }
  .hosting-page .hosting-guide { --cream: var(--ink); --cream-dim: var(--muted); --mint: var(--link); }
}

.ai-disclaimer-fallback { background: var(--surface); color: var(--ink); }

/* Architecture-first homepage. Letter cells share a baseline; L has a narrower
   advance so its blank right side does not widen the gap before O. */
.hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - 79px);
  padding-block: clamp(3rem, 6vh, 6rem);
}
.hero-grid { width: 100%; max-width: var(--wrap); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.hero-copy { padding-top: 0; }
.hero-wordmark { aspect-ratio: 499 / 118; column-gap: 1.6032%; }
.hero-tools { display: grid; gap: 1rem; }
.hero-tool {
  display: block;
  padding: 1.6rem 1.8rem;
  border: 1px solid #82c9b540;
  border-radius: 12px;
  background: #15272dd9;
  color: var(--cream);
  text-decoration: none;
}
.hero-tool.framework { border-color: #b5a0d040; background: #272538cf; }
.hero-tool.platform { border-color: #86badf40; background: #192c3bcf; }
.hero-tool :is(h2, h3) { margin: 0 0 0.5rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.02em; }
.hero-tool :is(h2, h3) span { color: var(--mint); margin-left: 0.3em; }
.hero-tool.framework :is(h2, h3) span { color: var(--lavender); }
.hero-tool.platform :is(h2, h3) span { color: #86badf; }
.hero-tool :is(h2, h3) a { color: inherit; text-decoration: none; }
.hero-tool p { color: var(--cream-dim); font-size: 1rem; line-height: 1.5; max-width: none; }
a.hero-tool:hover h2, .hero-tool :is(h2, h3) a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hero-tool-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.8rem; }
.hero-tool-actions a { color: #b9dcef; font-size: 0.9375rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.architecture-intro { padding-block: clamp(3rem, 6vw, 5rem); text-align: left; scroll-margin-top: 1rem; }
.architecture-copy { max-width: 48rem; margin-inline: auto; }
.architecture-intro h2 { max-width: none; margin: 0 0 2rem; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.25; }
.architecture-intro h2 em { color: var(--accent); }
.architecture-intro p { margin: 0 0 1.5rem; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.75; }
.architecture-intro .architecture-link { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin: 0 0 2rem; font-weight: 600; }
.architecture-intro p:last-child { margin-bottom: 0; }
.architecture-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0 0 3.5rem!important; }
.architecture-principles h3 { font-size: 1.2rem; margin: 0 0 0.75rem; line-height: 1.3; }
.architecture-principles p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.stack-example { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.stack-example h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; margin: 0 0 1.5rem; }
.stack-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); gap: clamp(0.75rem, 2.5vw, 2rem); align-items: center; }
.stack-arrow { display: flex; justify-content: center; color: var(--accent); }
.stack-arrow svg { width: 1.75rem; height: 1.75rem; flex: none; }
.stack-explanation { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; margin: 0 0 1rem; }
.principle-icon { display: block; width: 24px; height: 24px; flex: none; color: var(--accent); margin-top: 0.15rem; }
.architecture-principles li { display: flex; gap: 0.85rem; align-items: flex-start; min-width: 0; }
.architecture-principles li > div { min-width: 0; }
.stack-list li { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.stack-list li span { min-width: 0; overflow-wrap: anywhere; }
.stack-icon { width: 24px; height: 24px; flex: none; color: var(--muted); }
.stack-after .stack-icon { color: var(--accent); }
.benefit-group .outcome-card > .outcome-icon { width: 24px; height: 24px; margin-bottom: 0.9rem; }
.stack-comparison h4 { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; font-weight: 600; margin: 0 0 1rem; }
.stack-after h4 { color: var(--accent); }
.stack-list { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.stack-list li { padding: 0.7rem 1rem; background: color-mix(in srgb, var(--ink) 4%, var(--page)); border-left: 2px solid var(--rule); font-size: 0.95rem; line-height: 1.5; }
.stack-after .stack-list li { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--page)); }
.proof-section .chapter-heading h2 a { color: inherit; text-decoration: none; }
.proof-section .chapter-heading h2 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.case-studies-page .case-studies-content { min-height: calc(100svh - 79px); --section-texture: url('home-textures/waves.svg'); }
.case-studies-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.15; margin: 0 0 3rem; }
.case-study { max-width: 48rem; padding: 2.5rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 2rem; }
.case-study h2 { color: var(--accent); margin-bottom: 0.75rem; }
.case-study h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.case-study p { color: var(--muted); font-size: 1.125rem; line-height: 1.75; margin-bottom: 1rem; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-tools { max-width: 650px; width: 100%; }
}
@media (max-width: 850px) { .hero { min-height: calc(100svh - 67px); } }
@media (max-width: 700px) {
  .architecture-principles { grid-template-columns: 1fr; gap: 1.5rem; }
  .stack-list li { padding: 0.65rem 0.75rem; font-size: 0.875rem; gap: 0.6rem; }
}
@media (max-width: 500px) {
  .hero { min-height: calc(100svh - 99px); }
  .hero-tool { padding: 1.3rem; }
}
@media (max-width: 600px) {
  .stack-comparison { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .stack-arrow svg { transform: rotate(90deg); }
}

/* Architecture diagram */
.architecture-copy { max-width: 64rem; }
.architecture-intro h2 { max-width: 48rem; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.architecture-diagram { --arch-mint: var(--accent); --arch-lavender: #b5a0d0; --arch-blue: #86badf; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.arch-box { --tone: var(--arch-mint); position: relative; display: block; box-sizing: border-box; padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.75rem); padding-right: clamp(3rem, 6vw, 4.5rem); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); border-radius: 0.5rem; background: color-mix(in srgb, var(--tone) 8%, var(--page)); color: var(--ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; }
.arch-overview { grid-column: 1 / -1; }
.arch-rastrillo { --tone: var(--arch-lavender); }
.arch-platform { --tone: var(--arch-blue); }
.arch-text { display: block; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; letter-spacing: -0.01em; }
.arch-overview .arch-text { max-width: 52rem; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }
.arch-lead { display: block; margin-bottom: 0.5rem; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; font-weight: 650; letter-spacing: -0.03em; }
.arch-go { position: absolute; top: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--tone); font-size: 1.25rem; line-height: 1; transition: transform 0.2s; }
.arch-box:hover { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, var(--page)); transform: translateY(-2px); }
.arch-box:hover .arch-go { transform: translate(2px, -2px); }
.arch-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-color: var(--tone); }
@media (prefers-color-scheme: light) {
  .architecture-diagram { --arch-mint: #1f6f5c; --arch-lavender: #70508e; --arch-blue: #32698f; }
  .arch-box { background: color-mix(in srgb, var(--tone) 6%, #fff); }
  .arch-box:hover { background: color-mix(in srgb, var(--tone) 12%, #fff); }
}
@media (max-width: 700px) {
  .architecture-diagram { grid-template-columns: minmax(0, 1fr); }
  .arch-overview { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-box, .arch-go { transition: none; }
  .arch-box:hover, .arch-box:hover .arch-go { transform: none; }
}

.architecture-intro .architecture-inspiration {max-width:54rem; margin:2rem auto 0; font-size:1.05rem; line-height:1.7; color:var(--muted);}

/* Paired resource links at the foot of each hero card. */
.hero-tool { padding:0; overflow:hidden; --tool-accent:var(--mint); }
.hero-tool.framework { --tool-accent:var(--lavender); }
.hero-tool.platform { --tool-accent:#b9dcef; }
.hero-tool-content { padding:1.4rem 1.8rem; }
.hero-tool-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid color-mix(in srgb,var(--tool-accent) 24%,transparent); }
.hero-tool-tabs a { display:flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.65rem .8rem; color:var(--tool-accent); background:color-mix(in srgb,var(--tool-accent) 5%,transparent); font-size:.88rem; line-height:1.3; font-weight:600; text-align:center; text-decoration:none; }
.hero-tool-tabs a+a { border-left:1px solid color-mix(in srgb,var(--tool-accent) 24%,transparent); }
.hero-tool-tabs a:hover { background:color-mix(in srgb,var(--tool-accent) 14%,transparent); text-decoration:underline; text-underline-offset:.2em; }
.hero-tool-tabs a:focus-visible { outline:2px solid var(--tool-accent); outline-offset:-4px; }
@media(max-width:500px){.hero-tool-content{padding:1.25rem;}}
.proof-section .chapter-heading .proof-intro { max-width:58rem; margin-top:1.25rem; }
.hero-tool-tabs a { gap:.45rem; }
.hero-tool-tabs .tab-external { width:14px; height:14px; flex:none; }
/* Keep case-study links on the same baseline across the row. */
.proof-grid { align-items:stretch; }
.proof-grid > .proof { display:flex; flex-direction:column; align-items:flex-start; }
.proof-grid > .proof > a { margin-top:auto; padding-top:1.25rem; }
.architecture-comparisons .stack-explanation + .stack-explanation { margin-top:1.5rem; }

/* Shared tool cards in the hero and the closing call to action. */
.tool-heading { display:flex; align-items:center; gap:.9rem; margin-bottom:.85rem; }
.tool-heading :is(h2, h3) { min-width:0; margin:0; }
.tool-icon { display:block; flex:none; width:3rem; height:3rem; }
.tool-icon-rastrillo { padding:.4rem; border-radius:.6rem; background:#f2f0e6; }
.tool-icon-platform { border-radius:50%; }
.ready-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.ready-tools .hero-tool { display:flex; flex-direction:column; min-width:0; color:var(--ink); --tool-accent:var(--accent); border-color:color-mix(in srgb,var(--tool-accent) 30%,transparent); background:color-mix(in srgb,var(--tool-accent) 6%,var(--page)); }
.ready-tools .framework { --tool-accent:#b5a0d0; }
.ready-tools .platform { --tool-accent:#86badf; }
.ready-tools .hero-tool-content { flex:1; padding:1.5rem; }
.ready-tools .hero-tool p { color:var(--muted); }
.ready-tools .hero-tool-tabs { margin-top:auto; }
.ready-tools .hero-tool-tabs a { min-height:3.6rem; padding-inline:.5rem; font-size:.84rem; }
.hero-tools .hero-tool-tabs a, .ready-tools .hero-tool-tabs a { color:var(--tool-accent); }
.ready-tools .hero-tool h3 { font-size:1.25rem; }
@media(prefers-color-scheme:light) {
  .ready-tools .framework { --tool-accent:#70508e; }
  .ready-tools .platform { --tool-accent:#32698f; }
  .ready-tools .tool-icon-skill { filter:brightness(.6); }
}
@media(max-width:850px) { .ready-tools { grid-template-columns:1fr; } }

/* Tito outcomes dashboard */

.chapter.numbers-section{--page:#142b29;--ink:#edf6f0;--muted:#b7ccc3;--accent:#bfe989;--line:#38534a;background:var(--page);color:var(--ink);padding-block:5rem;}
.numbers-section:after{display:none}.numbers-heading p{color:var(--muted);margin:1rem 0 0;font-size:1.15rem}.numbers-section h2{max-width:none}.numbers-section .numbers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin:3.5rem 0 0;padding:0;list-style:none}.number-stat{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.number-stat strong{font-size:clamp(3.8rem,6vw,6rem);font-weight:650;letter-spacing:-.06em;color:var(--accent);line-height:1.05;font-variant-numeric:tabular-nums}.number-stat span{font-size:1.12rem;line-height:1.45;max-width:20ch}.numbers-section .numbers-outcomes{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;padding:0;list-style:none;margin:2.8rem 0;color:var(--ink)}.numbers-outcomes li{display:flex;gap:.6rem;align-items:center}.numbers-outcomes li:before{content:'';width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);flex-shrink:0}.numbers-response{border-top:1px solid var(--line);padding-top:2rem}.numbers-response h3{font-size:1.4rem;margin:0}.numbers-response p{color:var(--muted);margin:.6rem 0 1.8rem}.numbers-response dl{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:0}.timing-row{position:relative;padding-bottom:1.2rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}.timing-row:after{position:absolute;content:'';height:5px;bottom:0;left:0;background:#758c80;width:100%;border-radius:2px}.timing-new:after{width:23.56%;background:var(--accent)}.timing-row dt{color:var(--muted)}.timing-row dd{font-size:2.8rem;letter-spacing:-.04em;line-height:1.2;margin:0;color:var(--ink);font-variant-numeric:tabular-nums}.timing-row dd span{font-size:1.1rem;letter-spacing:0}.numbers-method{margin-top:1.7rem;color:var(--muted);font-size:.9rem}.numbers-method summary{cursor:pointer;width:fit-content}.numbers-method p{max-width:80ch;line-height:1.6}.numbers-method a{color:inherit}.numbers-section a:focus-visible,.numbers-method summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(prefers-color-scheme:light){.chapter.numbers-section{--page:#eaf1df;--ink:#20352a;--muted:#4b6254;--accent:#3b651e;--line:#b7cbb1}}
@media(max-width:700px){.chapter.numbers-section{padding-block:3rem}.numbers-section .numbers-grid{grid-template-columns:1fr;gap:2rem;margin-top:2rem}.number-stat strong{font-size:3.8rem}.number-stat span{font-size:1rem}.numbers-response dl{grid-template-columns:1fr;gap:1.5rem}.numbers-section .numbers-outcomes{display:grid;gap:1rem}}

.numbers-section .numbers-aside{margin-top:1.4rem;font-size:.9rem;color:var(--muted)}

.number-stat .number-explanation{display:block;font-size:.95rem;line-height:1.5;color:var(--muted);font-weight:400;max-width:26ch;margin-top:-.4rem}

.numbers-section .numbers-capabilities{margin-block:2.8rem 2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.numbers-capabilities h3{display:flex;flex-wrap:wrap;align-items:center;gap:.35em;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.4;font-weight:600;letter-spacing:-.025em;margin:0;color:var(--ink)}
.numbers-capabilities .capability-direction{display:inline-flex;align-items:center;gap:.25em}
.capability-direction svg{width:1em;height:1em;color:var(--accent);flex:none}
.numbers-section .capabilities-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2rem;row-gap:1.4rem;list-style:none;margin:1.8rem 0 0;padding:0}
.capabilities-list li{display:flex;align-items:center;gap:.75rem;min-width:0;color:var(--ink);font-size:1.05rem;line-height:1.4}
.capabilities-list .capability-plus{display:grid;place-items:center;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.capability-plus svg{width:1rem;height:1rem}
@media(max-width:700px){.numbers-section .capabilities-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}.capabilities-list li{font-size:.95rem;gap:.5rem}.numbers-capabilities h3{font-size:1.3rem}.numbers-section .numbers-capabilities{margin-block:2.2rem}}
@media(max-width:360px){.numbers-section .capabilities-list{grid-template-columns:1fr}}

.case-study .case-study-prompt { margin: 1.5rem 0; border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.25rem; }
.case-study .case-study-prompt p { margin-bottom: 0; color: var(--ink); }

@media(max-width:700px){.numbers-section .number-stat{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.35rem 1rem;align-items:start}.numbers-section .number-stat strong{grid-row:span 2;font-size:3.3rem;align-self:center}.numbers-section .number-stat .number-explanation{margin-top:0;max-width:none}}

/* Compact outcomes, comparisons and measurement disclosure. */
.compact-differences .stack-comparison{grid-template-columns:minmax(0,1.15fr) 1.5rem minmax(0,1fr);gap:1.4rem}
.compact-differences .stack-before .stack-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
.compact-differences .stack-list li{padding:.65rem .7rem;font-size:.86rem;gap:.5rem;line-height:1.45}
.compact-differences .stack-icon{width:20px;height:20px}
.compact-differences .stack-explanation{font-size:1rem;max-width:80ch}
.compact-differences h2{max-width:none}
.compact-differences .stack-explanation+.stack-explanation{margin-top:1rem}
.comparison-section{border-top:1px solid var(--rule);padding-top:2rem;margin-top:2rem}
.comparison-section>h3,.measurement-section>h3{font-size:1.55rem;margin:0 0 1.75rem}
.comparison-section .stack-example{margin:0;padding:0;border:0}
.comparison-section .stack-example+.stack-example{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--rule)}
.comparison-section .stack-example h3{font-size:1.15rem;margin:0 0 1.25rem}
.comparison-section .stack-explanation{margin-top:1.75rem;font-size:1rem;max-width:75ch}
.measurement-section{border-top:1px solid var(--rule);padding-top:2rem;margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;column-gap:3rem;align-items:start}
.measurement-section>h3{grid-column:1/-1}
.measurement-section .numbers-response{grid-column:1;grid-row:2/span 3;border:0;margin:0;padding:0}
.measurement-section>p{grid-column:2;color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 .8rem}
.comparison-section .stack-example>h4{font-size:1.15rem;line-height:1.3;margin:0 0 1.25rem}
.comparison-section .stack-comparison h5{font-size:.94rem;line-height:1.4;margin:0 0 1rem;color:var(--muted)}
.comparison-section .stack-after h5{color:var(--accent)}
.measurement-section .numbers-response h4{font-size:1.15rem;line-height:1.35;margin:0 0 1rem}
.measurement-section>p{grid-column:auto}
.listed-benefits{padding-block:clamp(2.5rem,5vw,4.5rem)!important}
.riff-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin:2rem 0 1.75rem}
.riff-column{display:grid;grid-template-rows:auto minmax(12rem,auto) 1fr;min-width:0;border-top:2px solid var(--accent);padding-top:1.25rem}
.riff-column h3{font-size:1.4rem;line-height:1.3;margin:0 0 1.5rem}
.riff-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0}
.riff-stat>strong{font-size:clamp(2.7rem,4.5vw,4.25rem);line-height:1.1;letter-spacing:-.05em;color:var(--accent);white-space:nowrap}
.riff-stat>span{font-size:1rem;font-weight:700;line-height:1.5}
.riff-stat>small{font-size:.9rem;line-height:1.5;color:var(--muted)}
.riff-security>svg{height:clamp(2.97rem,4.95vw,4.675rem);width:clamp(2.97rem,4.95vw,4.675rem);color:var(--accent);margin:0}
.riff-detail{border-top:1px solid var(--rule);padding-top:1rem}
.riff-support{font-size:.95rem;color:var(--ink);line-height:1.6;margin:0 0 1rem!important}
.riff-support strong{font-size:1.1rem;font-weight:700;color:var(--accent);margin-right:.25em}
.riff-support small{display:block;color:var(--muted);font-size:.85rem}
.riff-capabilities{padding:0!important;list-style:none;display:grid;gap:.65rem;margin:0!important;font-size:.9rem;line-height:1.5}
.riff-capabilities li{display:flex;align-items:center;gap:.5rem}
.riff-capabilities .capability-plus{height:1.1rem;width:1.1rem;flex-shrink:0}
@media(max-width:1050px){.riff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.riff-column{grid-template-rows:auto minmax(11rem,auto) 1fr}}
@media(max-width:620px){.riff-grid{grid-template-columns:1fr;gap:2rem}.riff-column{grid-template-rows:auto auto auto}.riff-stat{margin-bottom:1.25rem}.riff-column h3{margin-bottom:1rem}}
.measurement-disclosure{border-top:1px solid var(--rule);margin-top:2rem}
.measurement-disclosure>summary{padding:1.25rem 0;cursor:pointer;color:var(--muted);font-size:.95rem;line-height:1.6;list-style:disclosure-closed outside;margin-left:1.2rem}
.measurement-disclosure[open]>summary{list-style-type:disclosure-open}
.measurement-disclosure>summary span{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.measurement-disclosure>.measurement-section{border:0;margin:0;padding:1rem 0 0}
.site-home :is(a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.site-home #how,.site-home #benefits{scroll-margin-top:5rem}
@media(max-width:950px){.compact-differences .stack-comparison{grid-template-columns:minmax(0,1fr);gap:1rem}.compact-differences .stack-arrow svg{transform:rotate(90deg)}.compact-differences .stack-after{max-width:none}.measurement-section{column-gap:1.5rem}}
@media(max-width:650px){.compact-differences .stack-list li{font-size:.82rem;padding:.6rem .5rem}.compact-differences .stack-icon{width:17px;height:17px}.compact-differences .stack-before .stack-list{gap:.4rem}.measurement-section{display:block}}

.compact-differences{padding-block:clamp(2.5rem,5vw,4.5rem)!important}
.compact-differences:after{opacity:.045}
.compact-differences .chapter-heading{margin-bottom:1.75rem;display:block}
.compact-differences .chapter-heading p{max-width:70ch;color:var(--muted);font-size:1.05rem;line-height:1.6;margin:1rem 0 0}