/* ==========================================================================
   Vita Verra · site styles
   Dark merged direction (see DECISIONS.md). One file, no build step.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* brand palette (SITE-SPEC §3) */
  --cream: #F5F0E6;
  --cream-deep: #EDE6D6;
  --white: #FFFDF8;
  --charcoal: #2B2B28;
  --charcoal-soft: #4A4A44;
  --rust: #B4552D;
  --rust-soft: #C97C57;
  --rust-ink: #A44C27;
  --line-tone: #D8CFBB;

  /* roles on the dark site */
  --bg: var(--charcoal);
  --bg-alt: #262624;
  --bg-deep: #21211F;
  --card: #34342F;
  --card-hover: #3A3A35;
  --fg: var(--cream);
  --fg-soft: rgba(245, 240, 230, .74);
  --fg-faint: rgba(245, 240, 230, .58);
  --accent: var(--rust-soft);       /* lines, pulses, large italic */
  --accent-text: #DA9370;           /* small accent text: AA on charcoal and on cards, hover included */
  --btn: var(--rust);
  --btn-text: var(--white);
  --line: rgba(245, 240, 230, .16);
  --line-strong: rgba(245, 240, 230, .36);
  --glow: rgba(201, 124, 87, .45);

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.2rem, 6vw, 5.75rem);
  --fs-h2: clamp(2rem, 4.6vw, 4.25rem);
  --fs-h3: clamp(1.3rem, 1.7vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);

  /* layout */
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1320px;
  --nav-h: 84px;
  --nav-h-condensed: 64px;
  /* spacing: one scale, used everywhere */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-y: clamp(72px, 9vw, 120px);        /* every section, top and bottom: 72px phone, 120px desktop */
  --head-gap: clamp(40px, 5vw, 64px);          /* section heading to its content */
  --stack-eyebrow: var(--space-md);            /* eyebrow to heading */
  --stack-heading: var(--space-lg);            /* heading to body */
  --stack-body: var(--space-xl);               /* body to buttons */
  --radius: 6px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--rust); color: var(--white); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cream); color: var(--charcoal);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- layout ---------- */

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }

/* Cream sections: reading-heavy sections on a light ground. Swapping the tokens
   restyles every component inside (text, lines, cards, accents, pulses) for light.
   Home's "How it starts" comes from a shared partial, so it is themed by page here. */
.section--cream, .home .how {
  --bg: var(--cream);
  --bg-alt: var(--cream-deep);
  --fg: var(--charcoal);
  --fg-soft: #4A4A44;
  --fg-faint: #62605B;
  --line: rgba(43, 43, 40, .14);
  --line-strong: rgba(43, 43, 40, .32);
  --card: var(--white);
  --card-hover: #FBF8F1;
  --accent: var(--rust);
  --accent-text: var(--rust-ink);             /* small labels: #B4552D is 4.3:1 on cream, this deeper rust passes AA */
  --glow: rgba(180, 85, 45, .28);
  background: var(--bg);
  color: var(--fg);
}
.section--cream ::selection, .home .how ::selection { background: var(--rust); color: var(--white); }
.section--cream .faq-item.is-open .faq-icon::before, .section--cream .faq-item.is-open .faq-icon::after { background: var(--white); }
.section-head { max-width: 760px; margin-bottom: var(--head-gap); }
.section-head .eyebrow { margin-bottom: var(--stack-eyebrow); }
.section-head .h2 + .lead { margin-top: var(--stack-heading); }

/* ---------- type ---------- */

.display, .h2, .cta-title {
  font-family: var(--font-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144;
  letter-spacing: -.025em;
}
.display { font-size: var(--fs-display); line-height: 1.02; }
.h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.02em; }
.display em, .h2 em, .cta-title em { font-style: italic; color: var(--accent); }
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.lead { max-width: 40ch; color: var(--fg-soft); font-size: var(--fs-lead); }
.muted { color: var(--fg-soft); }

.eyebrow, .label, .idx {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
}
.eyebrow { margin: 0; color: var(--accent-text); font-size: .75rem; letter-spacing: .2em; }
.label { color: var(--fg); font-size: .8rem; letter-spacing: .16em; }
.idx { color: var(--accent-text); font-size: .72rem; letter-spacing: .12em; }

/* ---------- buttons & links ---------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.05em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-text);
  font: 600 .95rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .35s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--charcoal); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn--sm { padding: .8em 1.25em; font-size: .85rem; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: .95rem; font-weight: 600;
  text-decoration: none;
  transition: border-color .25s, color .25s;
}
.link-arrow:hover { color: var(--accent-text); border-color: var(--accent); }
.link-arrow .arr { transition: transform .3s var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(4px); }
.link-arrow:hover .arr--down { transform: translateY(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- cards ---------- */

.card {
  position: relative;
  display: block;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform .45s var(--ease-out), border-color .3s, background-color .3s;
}
a.card:hover, a.card:focus-visible, .card--lift:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--card-hover);
}
.card .status {
  position: absolute; top: 16px; right: 16px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .3s, box-shadow .3s;
}
a.card:hover .status, a.card:focus-visible .status { background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.card-label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

/* ---------- header / nav ---------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .35s, border-color .35s, backdrop-filter .35s;
}
.site-header.is-condensed {
  background: rgba(43, 43, 40, .95);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h);
  transition: height .35s var(--ease-out);
}
.is-condensed .nav { height: var(--nav-h-condensed); }

.wordmark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: font-size .35s var(--ease-out);
}
.wordmark em { font-style: italic; color: var(--accent); }
.is-condensed .wordmark { font-size: 1.4rem; }

.nav-links ul { display: flex; gap: clamp(18px, 2.2vw, 32px); list-style: none; }
.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--fg-soft);
  font-size: .9rem;
  text-decoration: none;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: none; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before {
  position: absolute; left: 13px; width: 16px; height: 1.5px;
  background: var(--fg);
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.nav-toggle .bars { top: 18px; }
.nav-toggle .bars::before { content: ""; left: 0; top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(-90deg); }

.menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
  overflow-y: auto;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease-out); }
.menu ul { list-style: none; }
.menu li { border-bottom: 1px solid var(--line); }
.menu li a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 380;
  letter-spacing: -.02em;
  text-decoration: none;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), color .2s;
}
.menu.is-open li a { transform: none; opacity: 1; }
.menu.is-open li:nth-child(2) a { transition-delay: .04s; }
.menu.is-open li:nth-child(3) a { transition-delay: .08s; }
.menu.is-open li:nth-child(4) a { transition-delay: .12s; }
.menu.is-open li:nth-child(5) a { transition-delay: .16s; }
.menu li a[aria-current="page"] { color: var(--accent); font-style: italic; }
.menu-foot { margin: 32px 0 0; color: var(--fg-soft); }
.menu-foot a { color: var(--fg); }

@media (max-width: 959px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-block; }
}
@media (min-width: 960px) {
  .menu { display: none; }
}
html.menu-open { overflow: hidden; }

/* ---------- page hero (inner pages + styleguide) ---------- */

.page-hero { padding-top: calc(var(--nav-h) + var(--section-y)); padding-bottom: var(--section-y); }
.page-hero .eyebrow { margin-bottom: var(--stack-eyebrow); }
.page-hero .display { margin-bottom: var(--stack-heading); max-width: 16ch; }
.page-hero .lead { margin-bottom: var(--stack-body); }

/* ---------- How it starts ---------- */

.how-flow { position: relative; --how-gap: clamp(28px, 4vw, 56px); }
.how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--how-gap);
  list-style: none;
}
.how-step { position: relative; padding-top: 52px; }
.how-dot {
  position: absolute; top: 0; left: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color .4s, box-shadow .4s;
}
.how-dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .4s;
}
.how-step .idx { display: block; margin-bottom: 10px; }
.how-step .h3 { margin-bottom: 12px; }
.how-step p { max-width: 32ch; margin: 0; color: var(--fg-soft); transition: color .4s; }
.how-step.is-lit .how-dot { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(201, 124, 87, .12), 0 0 22px var(--glow); }
.how-step.is-lit .how-dot::after { background: var(--accent); }

.how-track {
  position: absolute; z-index: 0;
  background: var(--line);
  pointer-events: none;
}
.how-track[data-axis="x"] { height: 1px; }
.how-track[data-axis="y"] { width: 1px; }
.how-fill { position: absolute; inset: 0; background: var(--accent); }
.how-track[data-axis="x"] .how-fill { transform-origin: left center; transform: scaleX(0); }
.how-track[data-axis="y"] .how-fill { transform-origin: center top; transform: scaleY(0); }
.how-step { z-index: 1; }

@media (max-width: 899px) {
  .how-steps { grid-template-columns: 1fr; gap: 44px; }
  .how-step { padding: 0 0 0 52px; }
}

/* ---------- Closing CTA ---------- */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--bg-deep);
  text-align: center;
}
.cta-rail {
  position: absolute; left: 0; right: 0; top: clamp(44px, 6vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
.cta-rail::after {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px 4px var(--glow);
  animation: rail 7s linear infinite;
}
@keyframes rail {
  0% { left: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}
.cta-title { margin: 0 auto var(--stack-heading); max-width: 14ch; font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.03; }
.cta .lead { margin: 0 auto var(--stack-body); }
.cta .actions { justify-content: center; }
.cta-or { color: var(--fg-soft); }
.cta-or a { color: var(--fg); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.cta-or a:hover { color: var(--accent-text); text-decoration-color: var(--accent); }

/* ---------- footer ---------- */

.site-footer { padding: var(--section-y) 0 var(--space-xl); background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.site-footer .wordmark { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.footer-nav ul, .footer-contact ul { display: grid; gap: 12px; list-style: none; }
.footer-nav a, .footer-contact a { color: var(--fg-soft); text-decoration: none; transition: color .2s; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--fg); }
.footer-head { display: block; margin-bottom: 16px; color: var(--fg-faint); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--fg-faint);
  font-size: .82rem;
}
.footer-base p { margin: 0; }

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-base { flex-direction: column; }
}

/* ---------- Audience pages: hero ---------- */

.section-label { margin-bottom: var(--space-2xl); }
.aud-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.aud-hero .display { max-width: 14ch; }
.aud-hero-art { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, .14); }
.aud-hero-art svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 899px) {
  .aud-hero-grid { grid-template-columns: 1fr; }
  .aud-hero-art { max-width: 420px; }
}

/* ---------- Audience pages: sound familiar (chaos to system) ---------- */

.chaos { overflow: hidden; }
.chaos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); list-style: none; }
.chaos-card {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  will-change: transform;
}
.chaos-card::after {
  content: ""; position: absolute; top: 18px; right: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .5s, box-shadow .5s;
}
.chaos-card .idx { display: block; margin-bottom: 18px; }
.chaos-card p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.chaos-grid.is-ordered .chaos-card { border-color: var(--line-strong); }
.chaos-grid.is-ordered .chaos-card::after { background: var(--accent); box-shadow: 0 0 12px var(--glow); }
@media (max-width: 767px) { .chaos-grid { grid-template-columns: 1fr; } }

/* ---------- Audience pages: what we build ---------- */

.build-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); list-style: none; }
.build-grid > li { display: flex; }
.build-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 168px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 56px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: transform .45s var(--ease-out), border-color .3s, background-color .3s;
}
.build-tile:hover, .build-tile:focus-visible { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-hover); }
.build-title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.25; }
.build-sub { color: var(--fg-soft); font-size: .92rem; }
.build-plus {
  position: absolute; left: clamp(20px, 2.4vw, 28px); bottom: 20px;
  width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%;
  transition: border-color .3s, background-color .3s, transform .45s var(--ease-out);
}
.build-plus::before, .build-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--fg); }
.build-plus::after { transform: rotate(90deg); }
.build-tile:hover .build-plus, .build-tile:focus-visible .build-plus { border-color: var(--accent); background: var(--accent); transform: rotate(90deg); }
@media (max-width: 959px) { .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .build-grid { grid-template-columns: 1fr; } .build-tile { min-height: 0; } }

/* ---------- Artifact side panel ---------- */

.art-panel {
  position: fixed; inset: 0 0 0 auto;
  width: min(760px, 100vw); max-width: 100vw; height: 100%; max-height: 100%;
  margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.art-panel::backdrop { background: rgba(20, 20, 18, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.art-panel[open] { animation: panel-in .5s var(--ease-out); }
.art-panel[open]::backdrop { animation: fade-in .4s ease; }
.art-panel.is-closing { animation: panel-out .28s ease-in forwards; }
.art-panel.is-closing::backdrop { animation: fade-out .28s ease forwards; }
@keyframes panel-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes panel-out { to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.art-panel-inner { display: flex; flex-direction: column; height: 100%; }
.art-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.art-panel-head .idx { display: block; margin-bottom: 8px; }
.art-panel-sub { margin: 6px 0 0; color: var(--fg-soft); font-size: .92rem; }
.art-panel-sub:empty { display: none; }
.art-panel-close {
  flex: none; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.art-panel-close:hover { border-color: var(--accent); background: var(--card); }
.art-panel-body { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) 48px; }
.art-sample {
  display: inline-block; margin-bottom: 14px;
  padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--fg-soft); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
html.panel-open { overflow: hidden; }

/* ---------- Artifact mocks: cream paper, placeholder data ---------- */

.mk-sheet {
  --ink: #2B2B28; --ink-soft: #62605B; --ink-line: rgba(43, 43, 40, .14); --rust-ink: #A44C27;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  font-size: .86rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.mk-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ink-line); }
.mk-kicker, .mk-sub { color: var(--rust-ink); font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.mk-sub { display: block; margin-bottom: 8px; }
.mk-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
.mk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 599px) { .mk-two { grid-template-columns: 1fr; } }
.mk-block { margin-top: 16px; }
.mk-bullets { margin: 0; padding-left: 1.1em; }
.mk-bullets li { margin: 3px 0; }

.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th { padding: 0 8px 8px 0; color: var(--ink-soft); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.mk-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--ink-line); vertical-align: middle; }
.mk-table--center th:not(:first-child), .mk-table--center td:not(:first-child) { text-align: center; }
@media (max-width: 599px) { .mk-table { font-size: .78rem; } .mk-table th { font-size: .6rem; letter-spacing: .04em; } }

.mk-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; background: rgba(43, 43, 40, .08); }
.mk-pill--ok { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-soft); color: var(--ink); }
.mk-pill--warn { background: rgba(201, 124, 87, .2); color: #8E4120; }
.mk-pill--bad { background: var(--rust-ink); color: var(--white); }
.mk-pill--a { background: var(--rust); color: var(--white); }
.mk-agenda .mk-pill, .mk-deck-decisions .mk-pill { margin-left: 8px; }
.mk-pill--dark { background: transparent; box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .4); color: var(--cream); }
.mk-bar { display: block; position: relative; height: 6px; min-width: 70px; border-radius: 999px; background: rgba(43, 43, 40, .1); overflow: hidden; }
.mk-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--ink); transform-origin: left; }
.mk-bar-fill--ok { background: var(--ink); }
.mk-bar-fill--warn { background: var(--rust-soft); }
.mk-bar-fill--bad { background: var(--rust); }
.mk-who { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--cream); font-size: .62rem; font-weight: 600; letter-spacing: .04em; }

.mk-checks { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ink-line); list-style: none; }
.mk-check { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.mk-box { flex: none; width: 15px; height: 15px; border: 1.5px solid var(--ink-soft); border-radius: 3px; position: relative; }
.mk-check.is-done .mk-box { background: var(--rust); border-color: var(--rust); }
.mk-check.is-done .mk-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mk-check.is-done { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(43, 43, 40, .3); }

.mk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--ink-soft); font-size: .74rem; }
.mk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* cadence */
.mk-cadence { display: grid; gap: 10px; }
.mk-lane { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.mk-lane-name { font-weight: 600; font-size: .78rem; }
.mk-lane-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.mk-lane-label { grid-column: 2; color: var(--ink-soft); font-size: .74rem; }
.mk-lane--axis .mk-lane-track span { color: var(--ink-soft); font-size: .56rem; text-align: center; }
.mk-lane--axis > span:last-child { display: none; }
.mk-slot { height: 22px; border-radius: 3px; background: rgba(43, 43, 40, .06); }
.mk-slot--w { background: rgba(43, 43, 40, .28); }
.mk-slot--m { background: var(--rust-soft); }
.mk-slot--q { background: var(--rust); }
.mk-legend .mk-slot--w { background: rgba(43, 43, 40, .28); }
.mk-legend .mk-slot--m { background: var(--rust-soft); }
.mk-legend .mk-slot--q { background: var(--rust); }

/* board deck */
.mk-slide {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  aspect-ratio: 16 / 10; padding: 18px;
  border-radius: 3px; background: var(--charcoal); color: var(--cream);
}
.mk-slide-brand { position: absolute; top: 16px; left: 18px; font-family: var(--font-display); font-style: italic; font-size: .85rem; opacity: .8; }
.mk-slide-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.mk-slide-sub { color: var(--accent-text); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.mk-slide-rule { position: absolute; left: 18px; right: 18px; top: 44px; height: 1px; background: rgba(245, 240, 230, .2); }
.mk-agenda { margin: 0; list-style: none; }
.mk-agenda li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ink-line); }
.mk-num { color: var(--rust-ink); font-size: .7rem; font-weight: 600; }

/* investor update */
.mk-mail-meta { display: grid; gap: 4px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--ink-line); color: var(--ink-soft); }
.mk-mail-meta b { display: inline-block; min-width: 56px; color: var(--ink); font-weight: 600; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--ink-line); border-radius: 3px; }
.mk-kpi-label { color: var(--ink-soft); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mk-kpi-value { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.mk-kpi-delta { color: var(--ink-soft); font-size: .72rem; font-weight: 600; }

/* data room */
.mk-folders { margin: 0; list-style: none; }
.mk-folder { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(70px, 1fr) 38px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ink-line); }
.mk-folder-icon { width: 16px; height: 12px; border-radius: 2px; background: var(--rust-soft); position: relative; }
.mk-folder-icon::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: var(--rust-soft); }
.mk-pct { color: var(--ink-soft); font-size: .74rem; text-align: right; }

/* integration phases */
.mk-phases { display: grid; grid-template-columns: 76px repeat(4, minmax(0, 1fr)); gap: 4px 6px; align-items: center; margin-bottom: 6px; }
.mk-phases > span:not(.mk-lane-name):not(.mk-phase-cell) { color: var(--ink-soft); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mk-phase-cell { height: 20px; border-radius: 3px; background: rgba(43, 43, 40, .07); }
.mk-phase-cell.is-done { background: var(--ink); }
.mk-phase-cell.is-now { background: repeating-linear-gradient(-45deg, var(--rust-soft) 0 5px, rgba(201, 124, 87, .55) 5px 10px); }

/* decision rights */
.mk-raci { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font-size: .7rem; font-weight: 700; background: rgba(43, 43, 40, .07); }
.mk-raci--a { background: var(--rust); color: var(--white); }
.mk-raci--r { background: var(--ink); color: var(--cream); }
.mk-raci--c { border: 1px solid var(--ink-soft); background: transparent; }

/* launch plan */
.mk-gantt-wrap { position: relative; }
.mk-gantt { display: grid; grid-template-columns: 82px repeat(4, minmax(0, 1fr)); gap: 0; align-items: center; min-height: 34px; border-top: 1px solid var(--ink-line); }
.mk-gantt:first-child { border-top: 0; }
.mk-gantt-head { color: var(--ink-soft); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mk-gantt-bar { grid-row: 1; margin: 0 3px; padding: 4px 8px; border-radius: 3px; background: var(--ink); color: var(--cream); font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-gantt .mk-lane-name { grid-row: 1; grid-column: 1; }
.mk-gantt-mark {
  position: absolute; top: 34px; bottom: 0;
  left: calc(82px + (100% - 82px) * var(--at) / 4);
  border-left: 1.5px dashed var(--rust);
  padding-left: 5px; color: var(--rust-ink); font-size: .62rem; font-weight: 700; letter-spacing: .08em;
}

/* agentic workflow */
.mk-flow { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1.1fr); align-items: stretch; }
.mk-flow-col { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mk-flow-node { padding: 8px 10px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--white); font-size: .78rem; font-weight: 500; }
.mk-flow-col--agents .mk-flow-node { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.mk-flow-col--agents .mk-flow-node::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--rust-soft); vertical-align: middle; }
.mk-flow-wires { width: 100%; height: 100%; overflow: visible; }
.mk-flow-wires path { fill: none; stroke: rgba(43, 43, 40, .3); stroke-width: 1; }
.mk-flow-pulse { fill: var(--rust); }
.mk-doc { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--white); }
.mk-doc-title { font-family: var(--font-display); font-size: 1rem; margin-bottom: 4px; }
.mk-doc-line { height: 5px; border-radius: 3px; background: rgba(43, 43, 40, .14); }
.mk-doc-line--short { width: 60%; }
@media (max-width: 599px) {
  .mk-flow { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); font-size: .7rem; }
  .mk-flow-node { padding: 6px; font-size: .68rem; }
  .mk-flow-col--agents .mk-flow-node::before { display: none; }
}

/* charts inside mocks */
.mk-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 599px) { .mk-kpis, .mk-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-kpi--spark { gap: 4px; }
.mk-spark { width: 100%; height: 32px; margin-top: 8px; overflow: visible; }
.mk-spark path { fill: none; stroke: var(--rust); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk-spark circle { fill: var(--rust); stroke: var(--cream); stroke-width: 2; }
.mk-delta { color: var(--ink-soft); font-size: .72rem; font-weight: 600; }
.mk-delta:not(.is-good) { color: var(--rust-ink); }
.mk-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mk-grid { stroke: var(--ink-line); stroke-width: 1; }
.mk-base { stroke: rgba(43, 43, 40, .35); stroke-width: 1; }
.mk-axis { fill: var(--ink-soft); font: 500 10px var(--font-body); }
.mk-direct { fill: var(--ink); font: 600 11px var(--font-body); }
.mk-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-line.is-actual { stroke: var(--rust); }
.mk-line.is-plan { stroke: var(--ink-soft); stroke-dasharray: 5 5; }
.mk-end.is-actual { fill: var(--rust); stroke: var(--cream); stroke-width: 2; }
.mk-end.is-plan { fill: var(--ink-soft); stroke: var(--cream); stroke-width: 2; }
.mk-barv { fill: rgba(43, 43, 40, .78); }
.mk-barv.is-hl { fill: var(--rust); }

/* board deck carousel */
.mk-deck { outline: none; }
.mk-deck-viewport { overflow: hidden; border-radius: 3px; }
.mk-deck-track { display: flex; transition: transform .55s var(--ease-out); touch-action: pan-y; }
.mk-deck-slide {
  flex: 0 0 100%;
  display: flex; flex-direction: column;
  min-height: 300px; aspect-ratio: 16 / 10;
  padding: 18px 20px 14px;
  background: var(--charcoal); color: var(--cream);
  user-select: none;
}
.mk-deck-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(245, 240, 230, .18); }
.mk-deck-top .mk-slide-brand { position: static; }
.mk-deck-title { color: var(--accent-text); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.mk-deck-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 14px 0; }
.mk-deck-foot { display: flex; justify-content: space-between; color: rgba(245, 240, 230, .55); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mk-deck-cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.mk-deck-cover .mk-slide-title { display: block; margin-bottom: 8px; font-size: 1.9rem; }
.mk-deck-cover .mk-agenda li { padding: 5px 0; border-top-color: rgba(245, 240, 230, .14); font-size: .78rem; }
.mk-deck .mk-num { color: var(--accent-text); }
.mk-deck-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-deck-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(245, 240, 230, .16); border-radius: 3px; }
.mk-deck-kpi .mk-kpi-label { color: rgba(245, 240, 230, .6); }
.mk-deck-kpi .mk-kpi-value { font-size: 1.35rem; }
.mk-deck .mk-delta { color: rgba(245, 240, 230, .72); }
.mk-deck .mk-delta:not(.is-good) { color: var(--accent-text); }
.mk-deck .mk-delta span { color: var(--accent-text); }
.mk-deck-legend { display: flex; gap: 16px; margin-bottom: 6px; color: rgba(245, 240, 230, .72); font-size: .68rem; }
.mk-deck-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mk-deck-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--rust-soft); }
.mk-deck-legend i.is-plan { border-top: 2px dashed rgba(245, 240, 230, .55); }
.mk-deck .mk-grid { stroke: rgba(245, 240, 230, .12); }
.mk-deck .mk-axis { fill: rgba(245, 240, 230, .55); }
.mk-deck .mk-direct { fill: var(--cream); }
.mk-deck .mk-line.is-actual { stroke: var(--rust-soft); }
.mk-deck .mk-line.is-plan { stroke: rgba(245, 240, 230, .55); }
.mk-deck .mk-end.is-actual { fill: var(--rust-soft); stroke: var(--charcoal); }
.mk-deck .mk-end.is-plan { fill: rgba(245, 240, 230, .7); stroke: var(--charcoal); }
.mk-deck-decisions { margin: 0; list-style: none; }
.mk-deck-decisions li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(245, 240, 230, .14); font-size: .9rem; }
.mk-deck-decisions li > span:nth-child(2) { flex: 1; }
.mk-deck-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mk-deck-btn { width: 34px; height: 34px; border: 1px solid var(--ink-soft); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.mk-deck-btn:hover { background: var(--ink); color: var(--cream); }
.mk-deck-btn:focus-visible, .mk-deck-dot:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.mk-deck-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.mk-deck-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(43, 43, 40, .25); cursor: pointer; transition: background-color .2s, transform .2s; }
.mk-deck-dot[aria-current="true"] { background: var(--rust); transform: scale(1.25); }
.mk-deck-count { color: var(--ink-soft); font-size: .72rem; font-weight: 600; min-width: 34px; text-align: center; }
@media (max-width: 599px) {
  .mk-deck-slide { aspect-ratio: auto; min-height: 280px; padding: 14px; }
  .mk-deck-cover { grid-template-columns: 1fr; gap: 10px; }
  .mk-deck-cover .mk-slide-title { font-size: 1.4rem; }
}

/* Phase 5 mock shapes */
.mk-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.mk-key--actual { background: var(--rust); }
.mk-key--plan { height: 0; width: 16px; border-top: 2px dashed var(--ink-soft); border-radius: 0; }
.mk-key--soft { background: rgba(43, 43, 40, .2); }
.mk-legend--top { margin: 0 0 6px; }
.mk-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.mk-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.mk-kpis--stack { grid-template-columns: 1fr; align-content: start; }
.mk-checks--flat { margin-top: 8px; padding-top: 0; border-top: 0; }

.mk-kanban { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.mk-kcol { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 4px; background: rgba(43, 43, 40, .06); min-width: 0; }
.mk-kcol-head { display: flex; justify-content: space-between; margin-bottom: 2px; color: var(--ink-soft); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mk-kcol-head b { color: var(--ink); }
.mk-kcard { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 3px; background: var(--white); box-shadow: 0 1px 0 var(--ink-line); font-size: .76rem; font-weight: 500; overflow-wrap: anywhere; }
.mk-kcard i { color: var(--ink-soft); font-size: .66rem; font-style: normal; font-weight: 400; }
.mk-kcol:last-child .mk-kcard { border-left: 2px solid var(--rust); }
@media (max-width: 599px) { .mk-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mk-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 16px; color: var(--ink-soft); font-size: .76rem; }
.mk-meta b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.mk-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.mk-steps::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1.5px; background: var(--ink-line); }
.mk-step { position: relative; display: flex; gap: 14px; padding: 7px 0; }
.mk-step-dot { position: relative; flex: none; width: 13px; height: 13px; margin-top: 2px; border: 1.5px solid var(--ink-soft); border-radius: 50%; background: var(--cream); }
.mk-step.is-hl .mk-step-dot { border-color: var(--rust); background: var(--rust); }
.mk-step-body { display: flex; flex-direction: column; gap: 1px; }
.mk-step-body span { color: var(--ink-soft); font-size: .76rem; }
.mk-callout { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--rust); background: rgba(201, 124, 87, .1); font-size: .8rem; }
.mk-callout b { margin-right: 6px; color: var(--rust-ink); }
.mk-auto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 599px) { .mk-auto { grid-template-columns: 1fr; } }

.mk-chat { display: flex; flex-direction: column; gap: 10px; }
.mk-msg { max-width: 85%; padding: 12px 14px; border-radius: 10px 10px 10px 2px; background: var(--white); box-shadow: 0 1px 0 var(--ink-line); }
.mk-msg--ai { align-self: flex-end; border-radius: 10px 10px 2px 10px; background: var(--charcoal); color: var(--cream); }
.mk-msg-from { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mk-msg--ai .mk-msg-from { color: var(--accent-text); }
.mk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.mk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mk-day { display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 6px; border-radius: 3px; background: rgba(43, 43, 40, .05); min-width: 0; }
.mk-day-name { color: var(--ink-soft); font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mk-post { padding: 4px 5px; border-radius: 3px; background: rgba(43, 43, 40, .16); font-size: .64rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-post.is-hl { background: var(--rust); color: var(--white); }
@media (max-width: 599px) { .mk-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mk-agenda-meta { margin-left: auto; color: var(--ink-soft); font-size: .72rem; white-space: nowrap; }
.mk-product, .mk-shop-card { display: flex; flex-direction: column; gap: 4px; }
.mk-block + .mk-table { margin-top: 18px; }
.mk-product-art { display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 3px; background: linear-gradient(135deg, var(--charcoal) 0 60%, var(--charcoal-soft)); }
.mk-product-art.is-hl { background: linear-gradient(135deg, var(--rust) 0 55%, var(--rust-soft)); }
.mk-product-name { font-family: var(--font-display); font-size: 1.05rem; }
.mk-product-meta { color: var(--ink-soft); font-size: .72rem; }
.mk-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-price-bar { display: block; width: 40%; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(43, 43, 40, .18); }
.mk-checkout { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; padding: 14px; border: 1px solid var(--ink-line); border-radius: 4px; background: var(--white); }
.mk-field { display: block; height: 26px; border: 1px solid var(--ink-line); border-radius: 3px; }
.mk-field--half { width: 50%; }
.mk-upsell .mk-check { margin: 4px 0; font-size: .8rem; }
.mk-paybtn { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--rust); color: var(--white); font-size: .76rem; font-weight: 600; }
@media (max-width: 599px) { .mk-shop { grid-template-columns: 1fr 1fr; } }

.mk-funnel { margin: 0; list-style: none; }
.mk-funnel-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 6px 0; }
.mk-funnel-name { font-size: .78rem; font-weight: 500; }
.mk-funnel-track { display: block; height: 14px; }
.mk-funnel-bar { display: block; height: 100%; width: var(--w); border-radius: 0 4px 4px 0; background: rgba(43, 43, 40, .78); }
.mk-funnel-bar.is-hl { background: var(--rust); }
.mk-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-seq-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--white); font-size: .74rem; }
.mk-seq-step b { color: var(--rust-ink); font-size: .66rem; }
.mk-seq-step i { color: var(--ink-soft); font-style: normal; font-size: .68rem; }
.mk-seq-arrow { color: var(--ink-soft); }

.mk-repurpose { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); gap: 14px; align-items: center; }
.mk-source { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.mk-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mk-out { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--white); font-size: .74rem; }
.mk-out b { font-family: var(--font-display); font-size: 1.05rem; color: var(--rust-ink); }
@media (max-width: 599px) { .mk-repurpose { grid-template-columns: 1fr; } .mk-source .mk-product-art { max-width: 160px; } .mk-repurpose > .mk-seq-arrow { display: none; } }

.mk-phases--wide { grid-template-columns: 128px repeat(4, minmax(0, 1fr)); }
.mk-cal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-bottom: 4px; }
.mk-cal-m { padding: 8px 0; border-radius: 3px; background: rgba(43, 43, 40, .06); color: var(--ink-soft); font-size: .58rem; font-weight: 600; text-align: center; }
.mk-cal-m.is-report { background: var(--rust); color: var(--white); }
.mk-cal-m.is-renew { background: rgba(43, 43, 40, .2); color: var(--ink); }
@media (max-width: 599px) { .mk-cal { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mk-phases--wide { grid-template-columns: 96px repeat(4, minmax(0, 1fr)); } }

/* Creators mocks: phone frames, platform frames, pillars, rate card */
.mk-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mk-phone { padding: 6px; border-radius: 18px; background: var(--charcoal); }
.mk-phone-screen { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 9px 8px 11px; border-radius: 13px; background: var(--white); }
.mk-phone-top { display: flex; align-items: center; gap: 5px; font-size: .62rem; }
.mk-phone-top b { font-weight: 600; }
.mk-phone-top i { margin-left: auto; color: var(--ink-soft); font-size: .56rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.mk-avatar { flex: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--rust), var(--rust-soft)); }
.mk-phone-media, .mk-frame { position: relative; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(160deg, var(--charcoal) 0 55%, var(--charcoal-soft)); }
.mk-phone-media { aspect-ratio: 9 / 14; }
.mk-phone-media--wide { aspect-ratio: 16 / 9; }
.mk-phone-media.is-hl, .mk-frame.is-hl { background: linear-gradient(160deg, var(--rust) 0 55%, var(--rust-soft)); }
.mk-phone-label { position: absolute; left: 7px; bottom: 6px; color: var(--cream); font-size: .54rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mk-play { position: relative; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255, 253, 248, .88); font-size: 12px; }
.mk-play::after { content: ""; position: absolute; left: .85em; top: .62em; border-left: .72em solid var(--charcoal); border-block: .48em solid transparent; }
.mk-phone-stats { display: flex; justify-content: space-between; gap: 4px; color: var(--ink-soft); font-size: .58rem; font-weight: 600; }
.mk-phone-cap { margin: 0; font-size: .68rem; line-height: 1.35; }
.mk-two--gap { margin-top: 18px; }
.mk-phone-more { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: auto auto; gap: 4px 6px; align-items: start; }
.mk-phone-more i:first-child { grid-row: span 2; aspect-ratio: 16 / 9; border-radius: 3px; background: rgba(43, 43, 40, .18); }
.mk-phone-more i:last-child { height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(43, 43, 40, .14); box-shadow: 0 8px 0 rgba(43, 43, 40, .1); }
.mk-post--two { display: flex; flex-direction: column; gap: 1px; white-space: normal; font-weight: 400; line-height: 1.2; }
.mk-post--two b { font-weight: 600; }
.mk-kpis + .mk-table { margin-top: 20px; }
@media (max-width: 599px) {
  .mk-phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .mk-phone { scroll-snap-align: start; }
}
.mk-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.mk-pillar { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--ink-line); border-radius: 3px; background: var(--white); font-size: .76rem; }
.mk-pillar b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; }
.mk-pillar i { margin-top: 4px; color: var(--ink-soft); font-size: .66rem; font-style: normal; }
@media (max-width: 599px) { .mk-pillars { grid-template-columns: 1fr; } }
.mk-frame--wide { aspect-ratio: 16 / 9; }
.mk-frame--tall { aspect-ratio: 9 / 16; }
.mk-frame--square { aspect-ratio: 1; }
.mk-frame--doc { display: flex; flex-direction: column; gap: 5px; aspect-ratio: 3 / 4; padding: 10px 7px; border: 1px solid var(--ink-line); background: var(--white); }
.mk-frame--doc i { display: block; height: 3px; border-radius: 2px; background: rgba(43, 43, 40, .2); }
.mk-frame--doc i:first-child { width: 70%; background: var(--rust); }
.mk-frame .mk-play { font-size: 8px; }
.mk-frame--wide .mk-play { font-size: 13px; }
.mk-frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
.mk-frame-out { display: flex; flex-direction: column; gap: 6px; font-size: .62rem; font-weight: 600; text-align: center; }
.mk-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 599px) { .mk-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .mk-frames .mk-frame { width: 56%; margin-inline: auto; } .mk-source .mk-frame { max-width: 220px; } }
.mk-block--flush { margin-top: 0; }
.mk-block--flush .mk-msg { max-width: none; margin-top: 8px; }
.mk-block--flush .mk-actions { justify-content: flex-start; margin-top: 8px; }
.mk-rates { margin: 6px 0 0; padding: 0; list-style: none; }
.mk-rates li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ink-line); font-size: .8rem; }
.mk-rates .mk-price-bar { width: 72px; margin: 0; }
.mk-hl { color: var(--rust-ink); }
.mk-folder--plain { grid-template-columns: minmax(0, 1.8fr) minmax(60px, 1fr) 30px; }
.mk-shop--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mk-actions--start { justify-content: flex-start; margin-top: 16px; }
.mk-cadence--plain .mk-lane { grid-template-columns: 104px minmax(0, 1fr); }

/* ---------- Audience pages: platform strip (Creators) ---------- */

.platforms { overflow: hidden; padding: 20px 0; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.platforms-track { display: flex; width: max-content; animation: platforms 60s linear infinite; }
.platforms:hover .platforms-track { animation-play-state: paused; }
.platforms-list { display: flex; margin: 0; padding: 0; list-style: none; }
.platforms-list li { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); color: var(--fg-faint); font-size: .8rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.platforms-list li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes platforms { to { transform: translateX(-50%); } }

/* ---------- Audience pages: what changes (before / after) ---------- */

.ba-head, .ba-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); column-gap: clamp(16px, 3vw, 40px); }
.ba-head { padding-bottom: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ba-head span:first-child { color: var(--fg-faint); }
.ba-head span:last-child { grid-column: 3; color: var(--accent-text); }
.ba-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ba-row { align-items: center; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.ba-before, .ba-after { margin: 0; }
.ba-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ba-before .ba-text {
  color: var(--fg-faint);
  font-size: var(--fs-lead);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 100% 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color .8s ease, background-size .8s var(--ease-out);
}
.ba-arrow { color: var(--accent); font-size: 1.3rem; text-align: center; transition: opacity .6s ease, transform .6s var(--ease-out); }
.ba-after { padding-left: clamp(14px, 1.6vw, 22px); border-left: 2px solid var(--accent); transition: border-color .6s ease; }
.ba-after .ba-text { color: var(--fg); font-family: var(--font-display); font-size: clamp(1.35rem, 2.3vw, 2rem); font-variation-settings: "opsz" 144; line-height: 1.2; transition: color .8s ease .15s; }
/* Rows wait in their "before" state until they scroll into view (set by audience.js). */
.changes.is-live .ba-row:not(.is-changed) .ba-before .ba-text { color: var(--fg-soft); background-size: 0 1px; }
.changes.is-live .ba-row:not(.is-changed) .ba-arrow { opacity: .25; transform: translateX(-8px); }
.changes.is-live .ba-row:not(.is-changed) .ba-after { border-color: var(--line); }
.changes.is-live .ba-row:not(.is-changed) .ba-after .ba-text { color: var(--fg-faint); }
@media (max-width: 767px) {
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; row-gap: 14px; }
  .ba-arrow { display: none; }
  .ba-tag { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: 6px; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
  .ba-before .ba-tag { color: var(--fg-faint); }
  .ba-after .ba-tag { color: var(--accent-text); }
}
.ba-closing { margin: var(--space-2xl) 0 0; color: var(--accent); font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 144; line-height: 1.15; }
.ba-quote { max-width: 44rem; margin: var(--space-2xl) 0 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ba-quote blockquote { margin: 0; }
.ba-quote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-style: italic; line-height: 1.35; }
.ba-quote figcaption { margin-top: 16px; color: var(--accent-text); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- AI operations: live agent diagram ---------- */

.agent-figure { margin: 0 0 var(--space-xl); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, .14); }
.agent-live { display: block; width: 100%; height: auto; overflow: visible; }
.agent-live--tall { display: none; max-width: 340px; margin-inline: auto; }
@media (max-width: 767px) { .agent-live--wide { display: none; } .agent-live--tall { display: block; } }
.ag-col { fill: var(--accent-text); font: 600 11px var(--font-body); letter-spacing: .22em; }
.ag-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ag-node rect { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.2; transition: fill .5s ease, stroke .5s ease; }
.ag-node text { fill: var(--fg); font: 500 15px var(--font-body); }
.ag-node--agent rect { stroke: var(--accent); }
.ag-led { fill: var(--accent); opacity: .45; transition: opacity .5s ease; }
.ag-node.is-lit rect { fill: rgba(201, 124, 87, .2); stroke: var(--accent); transition-duration: .12s; }
.ag-node.is-lit .ag-led { opacity: 1; transition-duration: .12s; }
.ag-doc > rect:first-child { fill: var(--cream); transition: filter .5s ease; }
.ag-doc.is-lit > rect:first-child { filter: drop-shadow(0 0 10px var(--glow)); transition-duration: .12s; }
.ag-doc-title { fill: var(--charcoal); font: 600 11px var(--font-body); letter-spacing: .08em; }
.ag-doc-line { fill: rgba(43, 43, 40, .24); }
.ag-doc-line--hl { fill: var(--rust); }
.ag-pulse { fill: var(--accent); filter: drop-shadow(0 0 4px var(--glow)); }

/* ---------- Audience pages: track record ---------- */

.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--line); }
.proof-item { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 36px) 0 0; }
.proof-item + .proof-item { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.proof-value {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--fg);
}
.proof-value[data-scale] { font-style: italic; color: var(--accent); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; }
.proof-label { max-width: 28ch; color: var(--fg-soft); }
@media (max-width: 767px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { padding: 28px 0; }
  .proof-item + .proof-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Audience pages: for investors ---------- */

.inv-visual { width: 100%; max-width: 460px; margin-inline: auto; }
.inv-art { width: 100%; height: auto; overflow: visible; }
.inv-art .art-dot { transition: fill .6s ease; }
.inv-art .art-dot.is-lit { fill: var(--accent); transition-duration: .15s; }
.inv-hub-ring { fill: none; stroke: var(--accent); stroke-opacity: .4; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.js-anim .inv-hub-ring { animation: hub-breathe 3.2s ease-in-out infinite; }
@keyframes hub-breathe { 50% { transform: scale(1.25); stroke-opacity: .12; } }
.inv-pulse, .art-pulse { fill: var(--accent); }

/* ---------- Audience pages: ways, FAQ ---------- */

.way-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.way-grid--3 .way p, .way-grid--4 .way p { margin-bottom: 0; }
@media (max-width: 899px) { .way-grid--3 { grid-template-columns: 1fr; } }

.faq-grid { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; transition: color .2s; }
.faq-item summary:hover .faq-q { color: var(--accent-text); }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform .4s var(--ease-out), border-color .3s, background-color .3s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--fg); transition: transform .4s var(--ease-out); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon { border-color: var(--accent); background: var(--accent); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; }
.faq-a p { max-width: 62ch; margin: 0; padding: 0 0 26px; color: var(--fg-soft); }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .section-label { margin-bottom: 0; } }

/* ---------- 404 ---------- */

.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.nf .display { margin: 22px 0 24px; }
.nf .lead { margin-bottom: 36px; }
.nf-art svg { width: 100%; max-width: 380px; margin-inline: auto; overflow: visible; }
.nf-art path { fill: none; stroke: var(--fg-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .nf-grid { grid-template-columns: 1fr; }
  .nf-art { order: -1; }
  .nf-art svg { max-width: 220px; margin-inline: 0; }
}

/* ---------- Home: hero + the live system ---------- */

.hero {
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + var(--space-2xl)) 0 var(--section-y);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.hero .display { margin: var(--stack-eyebrow) 0 var(--stack-heading); }
.hero .lead { max-width: 36ch; margin-bottom: var(--stack-body); }

.system { width: 100%; max-width: 420px; margin-inline: auto; }
.system svg { width: 100%; height: auto; overflow: visible; }
.sys-thread {
  fill: none;
  stroke: var(--fg-soft); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 1.2s ease;
}
.sys-thread.taut { stroke: var(--line-strong); }
.sys-feedback { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 4 5; }
.sys-fb-label { fill: var(--fg-soft); font-family: var(--font-display); font-style: italic; font-size: 15px; }
.pkt-core, .pkt-glow { fill: var(--accent); }
.pkt-glow { opacity: .22; }

.node { cursor: pointer; outline: none; }
.node-card { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; transition: stroke .25s; }
.node-glow { fill: var(--accent); opacity: 0; }
.node-idx { fill: var(--accent-text); font: 600 11px var(--font-body); letter-spacing: .12em; }
.node-name { fill: var(--fg); font: 600 13px var(--font-body); letter-spacing: .16em; }
.node-status { fill: var(--line-strong); transition: fill .25s; }
.node.ping .node-glow { animation: node-glow 1.1s ease-out; }
.node.ping .node-card { animation: node-card 1.1s ease-out; }
.node.ping .node-status { animation: node-status 1.1s ease-out; }
.node.is-active .node-card, .node:focus-visible .node-card { stroke: var(--accent); stroke-width: 1.5; }
.node.is-active .node-status { fill: var(--accent); }
@keyframes node-glow { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes node-card { 0% { stroke: var(--accent); } 100% { stroke: var(--line-strong); } }
@keyframes node-status { 0% { fill: var(--accent); } 100% { fill: var(--line-strong); } }

.sys-caption { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); min-height: 4.4em; font-size: .9rem; }
.sys-cap-title, .sys-cap-text { display: block; }
.sys-cap-title { color: var(--accent-text); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.sys-cap-text { color: var(--fg-soft); }
.sys-cap-text:not(:empty)::after { content: "▍"; color: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

@media (max-width: 899px) {
  .hero-grid { grid-template-columns: 1fr; }
  .system { max-width: 320px; }
}
@media (max-width: 599px) {
  .hero .display { font-size: min(10vw, 3rem); }
}

/* ---------- Home: shared line art ---------- */

.art-line { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.art-line--soft { stroke: var(--line); }
.art-dot { fill: var(--fg-soft); }
.art-dot--key { fill: var(--accent); }
.art-hub { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.25; }
.art-hub-owner { fill: var(--accent); opacity: 0; }
.art-person * { fill: none; stroke: var(--fg-soft); stroke-width: 1.5; stroke-linecap: round; }
.art-count { fill: var(--fg); font-family: var(--font-display); font-size: 34px; font-variation-settings: "opsz" 144; letter-spacing: -.01em; }
.art-bar { fill: var(--accent); opacity: .55; }
.art-knot { fill: var(--accent); opacity: 0; }
.art-end { fill: var(--accent); }
.art-grid circle { fill: var(--line-strong); }

/* ---------- Home: pick your path ---------- */

.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.path-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.path-art { padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 32px); background: rgba(0, 0, 0, .14); border-bottom: 1px solid var(--line); }
.path-art svg { width: 100%; height: auto; overflow: visible; }
.path-art .art-dot--key { transition: filter .3s; }
a.path-card:hover .art-dot--key { filter: drop-shadow(0 0 6px var(--glow)); }
.path-body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 32px); }
.path-body .h3 { margin-bottom: 12px; font-size: clamp(1.4rem, 2vw, 1.85rem); }
.path-body p { margin: 0 0 24px; }
.path-go { margin-top: auto; color: var(--fg-faint); font-size: 1.3rem; line-height: 1; transition: transform .35s var(--ease-out), color .25s; }
a.path-card:hover .path-go, a.path-card:focus-visible .path-go { transform: translateX(6px); color: var(--accent-text); }

@media (max-width: 959px) {
  .path-grid { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .path-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .path-art { display: flex; align-items: center; border-bottom: 0; border-right: 1px solid var(--line); }
}

/* ---------- Home: four ways in ---------- */

.way-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.way { display: flex; flex-direction: column; }
.way-icon {
  width: 44px; height: 44px; margin-bottom: 32px;
  fill: none; stroke: var(--fg-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s;
}
.way:hover .way-icon { stroke: var(--fg); }
.way-icon .way-accent { stroke: var(--accent); }
.way-icon .way-accent--fill { fill: var(--accent); stroke: none; }
.way .idx { margin-bottom: 10px; }
.way .h3 { margin-bottom: 12px; }
.way p { margin: 0 0 28px; color: var(--fg-soft); }
.way .way-for { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; }
.way-for .label { margin-right: .35em; color: var(--fg-faint); font-size: .7rem; }
.way-go { display: inline-block; color: var(--fg-faint); transition: transform .35s var(--ease-out), color .25s; }
a.way:hover .way-go, a.way:focus-visible .way-go { transform: translateX(5px); color: var(--accent-text); }

@media (max-width: 1099px) { .way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .way-grid { grid-template-columns: 1fr; } }

/* ---------- Home: wherever you're starting ---------- */

.split { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.split-side {
  flex: 1 1 0; min-width: 0;
  padding: clamp(28px, 4vw, 56px);
  transition: flex-grow .7s var(--ease-out), opacity .4s, background-color .4s;
}
.split-side + .split-side { border-left: 1px solid var(--line); }
.split-art { width: 100%; max-width: 420px; height: auto; margin-bottom: var(--space-xl); overflow: visible; }
.split-title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -.02em;
}
.split-title em { font-style: italic; color: var(--accent); }
.split-side p { max-width: 34ch; margin: 0; color: var(--fg-soft); }

@media (hover: hover) and (min-width: 900px) {
  .split:hover .split-side:not(:hover) { opacity: .5; }
  .split .split-side:hover { flex-grow: 1.35; background: var(--card); }
}
@media (max-width: 899px) {
  .split { flex-direction: column; }
  .split-side + .split-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Home: nonprofits strip, custom proposals ---------- */

.path-strip {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(16px, 2vw, 28px);
  padding: 18px clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-soft);
  text-decoration: none;
  transition: border-color .3s, color .3s, background-color .3s;
}
.path-strip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rust-soft); transition: box-shadow .3s; }
.path-strip-text { flex: 0 1 auto; min-width: 0; }
.path-strip .arr { color: var(--fg-soft); transition: transform .35s var(--ease-out), color .25s; }
.path-strip:hover, .path-strip:focus-visible { border-color: var(--rust-soft); background: var(--card); color: var(--fg); }
.path-strip:hover .path-strip-dot, .path-strip:focus-visible .path-strip-dot { box-shadow: 0 0 12px var(--glow); }
.path-strip:hover .arr, .path-strip:focus-visible .arr { transform: translateX(5px); color: var(--rust-soft); }

.ways-more { margin: var(--space-xl) 0 0; color: var(--fg-soft); }
.ways-more a { color: var(--fg); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--line-strong); transition: color .2s, text-decoration-color .2s; }
.ways-more a:hover { color: var(--accent-text); text-decoration-color: var(--accent); }

/* ---------- Home: AI band ---------- */

.band-deep { background: var(--bg-deep); border-block: 1px solid var(--line); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.band-copy .eyebrow { margin-bottom: 18px; }
.band-copy .h2 { margin-bottom: 24px; }
.band-copy .lead { margin-bottom: 32px; }

.ai-flow { position: relative; }
.ai-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ai-loop path { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 5; }
.ai-loop .ai-pkt { fill: var(--accent); }
.ai-loop .ai-pkt-glow { fill: var(--accent); opacity: .22; }
.ai-chips {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 64px);
  list-style: none;
}
.ai-chip:nth-child(3) { grid-area: 2 / 2; }
.ai-chip:nth-child(4) { grid-area: 2 / 1; }
.ai-chip {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-weight: 500;
  line-height: 1.3;
  transition: border-color .5s;
}
.ai-chip-dot {
  position: absolute; top: 14px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .5s, box-shadow .5s;
}
.ai-chip.is-lit { border-color: var(--accent); transition-duration: .15s; }
.ai-chip.is-lit .ai-chip-dot { background: var(--accent); box-shadow: 0 0 12px var(--glow); transition-duration: .15s; }

@media (max-width: 899px) {
  .band-grid { grid-template-columns: 1fr; }
}

/* ---------- Home: about strip ---------- */

.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.portrait { margin: 0; max-width: 460px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--cream); }
.portrait img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.about-text {
  margin: 0 0 36px;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -.01em;
}
@media (max-width: 899px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 300px; }
}

/* ---------- motion: reveals, splits, page fade ---------- */

.js-anim [data-reveal] { opacity: 0; }
.js-anim [data-split] { opacity: 0; }  /* opacity, not visibility, so screen readers still find headlines before they animate in */
/* Failsafe: a page's main headline always appears, even if the reveal script never runs. */
.js-anim h1[data-split] { animation: split-failsafe 0s linear 2.5s forwards; }
@keyframes split-failsafe { to { opacity: 1; } }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
.wi { display: inline-block; will-change: transform; }

.js-anim main { animation: page-in .35s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
html.is-leaving main, html.is-leaving .site-footer { opacity: 0; transition: opacity .28s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cta-rail::after { display: none; }
  .platforms-track { animation: none; }
}

/* ---------- Growth Audit ---------- */

.audit-hero .display { max-width: 15ch; }

/* The scan: six areas around a circle; a sweep lights each in turn (audit.js). */
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.scan-visual .h2 { margin-bottom: var(--space-xl); }
.scan-art { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.scan-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.scan-ring--inner { stroke: var(--line); stroke-dasharray: 3 5; }
.scan-spoke { stroke: var(--line); stroke-width: 1; }
.scan-wedge { fill: var(--accent); opacity: .12; }
.scan-beam { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.scan-dot { fill: var(--accent); transition: fill .4s ease; }
.scan-halo { fill: var(--accent); opacity: .2; transition: opacity .4s ease; }
.scan-idx { fill: var(--accent-text); font: 600 11px var(--font-body); letter-spacing: .12em; transition: fill .4s ease; }
.scan-core { fill: var(--accent); }
.scan-core-ring { fill: none; stroke: var(--accent); stroke-opacity: .4; }
.scan-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.scan-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: clamp(14px, 1.6vw, 20px) 0; border-bottom: 1px solid var(--line); transition: opacity .5s ease; }
.scan-item .idx { padding-top: .45em; }
.scan-item .h3 { margin: 0 0 6px; }
.scan-item p { max-width: 46ch; margin: 0; color: var(--fg-soft); }
/* Waiting state, only while the scan is animating. */
.scan.is-live .scan-item:not(.is-lit) { opacity: .3; }
.scan.is-live .scan-node:not(.is-lit) .scan-dot { fill: var(--fg-faint); }
.scan.is-live .scan-node:not(.is-lit) .scan-halo { opacity: 0; }
.scan.is-live .scan-node:not(.is-lit) .scan-idx { fill: var(--fg-faint); }
@media (max-width: 899px) {
  .scan-grid { grid-template-columns: 1fr; }
  .scan-art { max-width: 300px; margin-inline: auto; }
}

.deliver-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.deliver-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--line); }
.deliver-num { display: flex; align-items: center; gap: 14px; padding-top: .55em; }
.deliver-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(201, 124, 87, .14); }
.deliver-item p { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-variation-settings: "opsz" 144; line-height: 1.25; }
@media (max-width: 767px) { .deliver-list { grid-template-columns: 1fr; } }

@media (min-width: 900px) { .how-flow--4 .how-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.after-inner { text-align: center; }
.after .lead { max-width: 52ch; margin: 24px auto 0; }

/* ---------- About ---------- */

/* Hero: headline and photo side by side, photo about 40% of the width, centered on the headline. */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-hero .display { max-width: none; margin-bottom: 0; }
.portrait--hero { width: 100%; max-width: none; border-radius: 16px; }
@media (max-width: 899px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .portrait--hero { max-width: 360px; }
}

/* Bio: a light section with one centered reading column. */

.bio-col { max-width: 40rem; margin-inline: auto; text-align: center; }
.bio-hi { margin: 0 0 24px; color: var(--rust); font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-style: italic; font-variation-settings: "opsz" 144; }
.bio-quote { margin: 0 0 clamp(28px, 3vw, 40px); font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 360; font-variation-settings: "opsz" 144; line-height: 1.35; letter-spacing: -.005em; }
.bio-col > p:not(.bio-hi):not(.bio-quote) { margin: 0 auto 1em; color: #4A4A44; font-size: var(--fs-lead); }
.bio-col .link-arrow { margin-top: 20px; color: var(--charcoal); border-color: rgba(43, 43, 40, .4); }
.bio-col .link-arrow:hover { color: var(--rust); border-color: var(--rust); }

.proof-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-grid--4 .proof-value { font-size: clamp(2.4rem, 3.4vw, 3.4rem); white-space: nowrap; }
@media (max-width: 1099px) and (min-width: 768px) {
  .proof-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid--4 .proof-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof-grid--4 .proof-item:nth-child(n + 3) { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .proof-grid--4 { grid-template-columns: 1fr; }
  .proof-grid--4 .proof-value { white-space: normal; }
}

.platforms--range { padding: var(--space-xl) 0; background: var(--bg-deep); }
.platforms--range .platforms-track { animation-duration: 80s; }
.platforms--range .platforms-list li { color: var(--fg-soft); font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 3rem); font-style: italic; font-weight: 300; letter-spacing: -.01em; text-transform: none; }
.platforms--range .platforms-list li::after { width: 7px; height: 7px; }

/* How I work: the loop diagram beside three principles. */
.work-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.loop-wrap { padding: var(--space-lg) 0; }
.loop-art { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
.loop-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.loop-edge--fb { stroke: var(--accent); stroke-opacity: .55; stroke-dasharray: 4 6; }
.loop-fb-label { fill: var(--accent-text); font: italic 14px var(--font-display); }
.loop-node circle { fill: var(--bg-alt); stroke: var(--accent); stroke-width: 1.5; transition: fill .5s ease; }
.loop-node.is-lit circle { fill: var(--accent); transition-duration: .12s; }
.loop-node text { fill: var(--fg); font: 600 11px var(--font-body); letter-spacing: .18em; }
.loop-node .loop-idx { fill: var(--accent-text); }
.loop-pulse { fill: var(--accent); filter: drop-shadow(0 0 5px var(--glow)); }
.principle-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); }
.principle .idx { padding-top: .5em; }
.principle h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 1.25; }
.principle p { max-width: 42ch; margin: 0; color: var(--fg-soft); }
@media (max-width: 899px) { .work-grid { grid-template-columns: 1fr; } .loop-art { max-width: 320px; } }

/* The team: cards built from js/team.js. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.team-card { display: flex; flex-direction: column; }
.team-photo { position: relative; margin: 0 0 22px; aspect-ratio: 4 / 5; overflow: hidden; }
.team-photo::before { content: ""; position: absolute; inset: 18% 4% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 124, 87, .3), rgba(201, 124, 87, 0)); }
.team-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-photo img[style*="--mask"] {
  -webkit-mask-image: var(--mask), linear-gradient(to top, transparent, #000 18%);
  mask-image: var(--mask), linear-gradient(to top, transparent, #000 18%);
  -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
  -webkit-mask-position: top center; mask-position: top center;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.team-card h3 { margin: 0 0 4px; }
.team-title { margin: 0 0 12px; color: var(--accent-text); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.team-bio { margin: 0 0 16px; color: var(--fg-soft); }
.team-card .link-arrow { align-self: flex-start; margin-top: auto; }
/* One person: a single wide card, centered, photo beside the words. */
.team-grid.is-single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.is-single .team-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.is-single .team-photo { margin: 0; }
.is-single .team-card h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 599px) { .is-single .team-card { grid-template-columns: 1fr; } .is-single .team-photo { max-width: 300px; } }