/*
  memorytether — marketing site.

  A faithful build of design/design_handoff_marketing_site. The handoff is high fidelity: every
  colour, size, radius and duration below is the value it specifies, lifted out of the prototype's
  inline styles into tokens and classes so a future edit changes one declaration rather than
  forty repetitions of it.

  This is the *public* stylesheet and it is deliberately separate from the signed-in app's
  chrome in src/web/views/_layout.eta. The two surfaces have different jobs, different palettes
  and different accessibility budgets; sharing a stylesheet between them would force one of them
  to compromise. The signed-in app remains at /app.
*/

:root {
  /* The page commits to one look. It is not theme-aware, so it declares that rather than
     letting the browser dark-invert form controls and scrollbars underneath it. */
  color-scheme: light;

  --mt-canvas: #f7f6f1;
  --mt-surface: #ffffff;
  --mt-band: #efede4;
  --mt-ink: #16211b;
  --mt-body: #5c655c;
  --mt-muted: #9aa198;
  --mt-border: #e5e2d8;
  --mt-border-inner: #eceae0;
  --mt-border-dashed: #cfccc0;

  --mt-green: #2a5c43;
  --mt-green-hover: #356f52;
  --mt-green-tint: #eef4ee;
  --mt-green-chip-border: #bcd3c2;

  --mt-dark-chip: #243029;
  --mt-dark-text: #eef1ea;

  --mt-amber-fg: #a3771c;
  --mt-amber-line: #d9b45e;
  --mt-amber-bg: #fdf6e5;

  --mt-cream: #f4f1e6;
  --mt-cream-accent: #e8ddc2;
  --mt-cream-muted: #c4d4c6;

  --mt-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mt-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mt-shell: 1200px;
  --mt-gutter: 56px;
  --mt-radius-card: 20px;
  --mt-radius-row: 12px;
  --mt-radius-pill: 999px;
}

/* `clip` rather than `hidden`: it contains the CTA's overhanging halftone circles without
   creating a scroll container, which `overflow-x: hidden` would — and a scroll container on an
   ancestor silently breaks the sticky nav. */
html {
  overflow-x: clip;
  /* Nav links are in-page anchors; the sticky bar would otherwise cover the heading landed on. */
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.mt {
  margin: 0;
  background: var(--mt-canvas);
  color: var(--mt-ink);
  font-family: var(--mt-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.mt a {
  color: inherit;
  text-decoration: none;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}
.mt a:hover {
  color: var(--mt-green);
}
.mt p {
  text-wrap: pretty;
}

/* Focus is never removed — the whole page is links, and a keyboard visitor has to be able to
   see where they are on a background this low-contrast. */
.mt :focus-visible {
  outline: 3px solid var(--mt-green);
  outline-offset: 3px;
  border-radius: 6px;
}

.mt-shell {
  max-width: var(--mt-shell);
  margin: 0 auto;
  padding-left: var(--mt-gutter);
  padding-right: var(--mt-gutter);
  box-sizing: border-box;
}

.mt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mt-green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
}
.mt-skip:focus {
  left: 0;
  color: #fff;
}

/* ── shared atoms ────────────────────────────────────────────────────────── */

.mt-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mt-muted);
}

.mt-h1,
.mt-h2,
.mt-h3 {
  font-family: var(--mt-serif);
  font-weight: 500;
  margin: 0;
}
.mt-h1 {
  font-size: 62px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.mt-h2 {
  font-size: 46px;
  line-height: 1.08;
}
.mt-h3 {
  font-size: 25px;
  line-height: 1.2;
}
.mt-h1 em,
.mt-h2 em,
.mt-h3 em {
  color: var(--mt-green);
  font-style: italic;
}

.mt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--mt-radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 24px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mt .mt-btn-green {
  background: var(--mt-green);
  color: #fff;
}
.mt .mt-btn-green:hover {
  background: var(--mt-green-hover);
  color: #fff;
}
.mt .mt-btn-ghost {
  background: var(--mt-surface);
  border-color: var(--mt-border);
  color: var(--mt-ink);
}
.mt .mt-btn-ghost:hover {
  color: var(--mt-green);
  border-color: var(--mt-green-chip-border);
}
.mt .mt-btn-ink {
  background: var(--mt-ink);
  color: var(--mt-canvas);
  padding: 13px 28px;
}
.mt .mt-btn-ink:hover {
  background: #2a3a2f;
  color: var(--mt-canvas);
}
.mt .mt-btn-cream {
  background: var(--mt-cream);
  color: var(--mt-green);
  padding: 14px 32px;
  font-size: 15.5px;
}
.mt .mt-btn-cream:hover {
  background: #fff;
  color: var(--mt-green);
}
.mt-btn-wide {
  padding: 13px 28px;
}
/* The arrow in "Start free →" sits in its own circle, per the handoff. */
.mt-btn-arrow {
  background: #fff;
  color: var(--mt-green);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
}

.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--mt-body);
}
.mt-chip-sm {
  padding: 5px 12px;
  font-size: 11.5px;
}
.mt-chip-md {
  padding: 5px 13px;
  font-size: 12px;
}
.mt-chip-dashed {
  border-style: dashed;
  border-color: var(--mt-border-dashed);
  color: var(--mt-muted);
}

.mt-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/*
  Brand marks are 8px coloured dots, not logos. The handoff is explicit that they are
  placeholders and that real logos need a licence review first, so the dots stay until that
  happens — a wrong-but-pretty logo wall is a trademark problem, not a design win.
*/
.mt-dot-claude {
  background: #d97757;
}
.mt-dot-chatgpt {
  background: #16211b;
}
.mt-dot-gemini {
  background: #3563e9;
}
.mt-dot-cursor {
  background: #79a08b;
}
.mt-dot-notion {
  background: #16211b;
}
.mt-dot-slack {
  background: #611f69;
}
.mt-dot-gmail {
  background: #e2654e;
}
.mt-dot-calendar {
  background: #3563e9;
}
.mt-dot-drive {
  background: #f2c14e;
}
.mt-dot-github {
  background: #16211b;
}
.mt-dot-obsidian {
  background: #79a08b;
}
.mt-dot-meeting {
  background: #d97757;
}

/* ── scroll reveal ───────────────────────────────────────────────────────── */

/*
  Only elements the script has claimed start hidden. Without the `.mt-js` class — no JavaScript,
  a blocked script, a crawler — every reveal target renders in its final state. The page must
  never depend on JS to be readable.
*/
.mt-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.mt-js [data-reveal='2'] {
  transition-delay: 0.1s;
}
.mt-js [data-reveal='3'] {
  transition-delay: 0.2s;
}
.mt-js [data-reveal='4'] {
  transition-delay: 0.25s;
}
.mt-js [data-reveal='5'] {
  transition-delay: 0.3s;
}
.mt-js [data-reveal].mt-shown {
  opacity: 1;
  transform: none;
}

/* ── nav ─────────────────────────────────────────────────────────────────── */

.mt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mt-border);
}
.mt-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.mt .mt-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mt-serif);
  font-weight: 600;
  font-size: 19px;
}
.mt .mt-wordmark:hover {
  color: var(--mt-ink);
}
.mt-nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-nav-sections,
.mt-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-nav-links a {
  font-size: 13.5px;
  color: var(--mt-body);
  padding: 8px 10px;
}
.mt .mt-nav-pill {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  padding: 8px 16px;
  border-radius: var(--mt-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--mt-ink);
}
.mt .mt-nav-pill:hover {
  color: var(--mt-green);
}
.mt .mt-nav-cta {
  background: var(--mt-green);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--mt-radius-pill);
  font-size: 13px;
  font-weight: 600;
}
.mt .mt-nav-cta:hover {
  background: var(--mt-green-hover);
  color: #fff;
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.mt-hero {
  padding-top: 72px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.mt-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--mt-body);
  margin-bottom: 24px;
}
.mt-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mt-green);
}
.mt-hero h1 {
  margin-bottom: 18px;
}
.mt-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mt-body);
  margin: 0 0 28px;
  max-width: 40ch;
}
.mt-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.mt-proof {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.mt-hero-eyebrow {
  margin-bottom: 12px;
}
.mt-clients {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mt-clients li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mt-clients .mt-more {
  color: var(--mt-muted);
  font-weight: 400;
}

/* ── bento ───────────────────────────────────────────────────────────────── */

.mt-bento {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 150px 110px 110px;
  gap: 14px;
}
.mt-tile {
  border-radius: var(--mt-radius-card);
  position: relative;
  overflow: hidden;
}
/* The halftone is a pure CSS dot grid; `--mt-tile-dot` and `--mt-tile-size` are set per tile. */
.mt-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--mt-tile-dot) 1.6px, transparent 1.6px);
  background-size: var(--mt-tile-size) var(--mt-tile-size);
  opacity: var(--mt-tile-opacity, 0.4);
}
/*
  The tile illustration. `contain` rather than `cover`: each drawing is a card floating on the
  tile's halftone, and cropping one at a narrow viewport would cut the card rather than the
  background. Each SVG leaves the corner the label pill occupies empty by construction.
*/
.mt-tile-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* The bottom inset is the label pill's lane, reserved here rather than inside each drawing:
     `contain` rescales the artwork with the tile, so a gap left in the SVG would not stay put. */
  padding: 12px 12px 46px;
  box-sizing: border-box;
}
.mt-tile-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--mt-radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mt-ink);
}
.mt-tile-clients {
  grid-row: 1 / 3;
  background: #79a08b;
  --mt-tile-dot: #2a5c43;
  --mt-tile-size: 8px;
  --mt-tile-opacity: 0.5;
}
.mt-tile-tone {
  background: #f2c14e;
  --mt-tile-dot: #a97b12;
  --mt-tile-size: 9px;
}
.mt-tile-projects {
  background: #e2654e;
  --mt-tile-dot: #8e2c1b;
  --mt-tile-size: 8px;
}
.mt-tile-known {
  grid-column: 1 / 3;
  background: var(--mt-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 14px;
  box-sizing: border-box;
}
.mt-tile-known span:first-child {
  color: var(--mt-muted);
  font-size: 12.5px;
}
.mt-known-chip {
  background: var(--mt-dark-chip);
  color: var(--mt-dark-text);
  border-radius: var(--mt-radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
}

/* ── sources band ────────────────────────────────────────────────────────── */

.mt-sources {
  padding-bottom: 64px;
  text-align: center;
}
.mt-sources .mt-eyebrow {
  display: block;
  margin-bottom: 16px;
}
.mt-sources .mt-chip-row {
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.mt-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mt-muted);
}

/* ── use-case ticker ─────────────────────────────────────────────────────── */

.mt-ticker {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: var(--mt-band);
  overflow: hidden;
}
.mt-ticker-track {
  display: flex;
  width: max-content;
  animation: mt-marquee 28s linear infinite;
}
.mt-ticker-run {
  display: flex;
  gap: 12px;
  padding: 15px 6px;
  white-space: nowrap;
  margin: 0;
  list-style: none;
}
.mt-ticker-run li {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  padding: 8px 16px;
  border-radius: var(--mt-radius-pill);
  font-size: 13px;
  color: var(--mt-body);
}
@keyframes mt-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ── sections ────────────────────────────────────────────────────────────── */

.mt-section {
  padding-top: 88px;
  padding-bottom: 84px;
}
.mt-section-white {
  background: var(--mt-surface);
}
.mt-section-band {
  background: var(--mt-band);
}
.mt-rule-top {
  border-top: 1px solid var(--mt-border);
}
.mt-centered {
  text-align: center;
}
.mt-section > .mt-centered > .mt-h2 {
  margin: 0 auto 50px;
  max-width: 17em;
}

.mt-card {
  border: 1px solid var(--mt-border);
  background: var(--mt-canvas);
  border-radius: var(--mt-radius-card);
  padding: 34px 36px;
}
.mt-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0;
}
.mt-card .mt-h3 {
  font-size: 27px;
  margin-bottom: 10px;
}
.mt-card-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.mt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mt-quote {
  font-family: var(--mt-serif);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 22px;
}
.mt-after {
  margin-top: 48px;
}

/* ── demo ────────────────────────────────────────────────────────────────── */

.mt-demo-head .mt-h2 {
  margin: 0 auto 12px;
  max-width: 15em;
}
.mt-demo-head p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mt-body);
  margin: 0 auto 44px;
  max-width: 48ch;
}
.mt-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.mt-answer {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  overflow: hidden;
}
.mt-answer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--mt-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.mt-answer-body {
  padding: 24px 24px 28px;
  min-height: 185px;
}
.mt-answer-body p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.mt-cold {
  background: var(--mt-band);
}
.mt-cold .mt-answer-head {
  color: var(--mt-muted);
}
.mt-cold .mt-answer-head .mt-dot {
  background: #d5d1c4;
}
.mt-cold .mt-answer-body p {
  color: #6b7268;
}
.mt-cold-foot {
  margin-top: 18px;
  border-top: 1px dashed #d5d1c4;
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--mt-muted);
  font-style: italic;
}
.mt-tethered {
  border-color: var(--mt-green);
  background: var(--mt-surface);
  box-shadow: 0 16px 44px rgba(42, 92, 67, 0.1);
}
.mt-tethered .mt-answer-head {
  background: var(--mt-green-tint);
  color: var(--mt-green);
}
.mt-tethered .mt-answer-body p {
  color: var(--mt-ink);
}
.mt-cites {
  margin-top: 18px;
  border-top: 1px solid var(--mt-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mt-body);
}
.mt-cites b {
  color: var(--mt-green);
  font-weight: 600;
}
/* The typewriter's two fade-in payloads. Hidden only while the script is driving them. */
.mt-js .mt-typed .mt-cold-foot,
.mt-js .mt-typed .mt-cites {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.mt-js .mt-typed .mt-cites {
  transform: translateY(8px);
}
.mt-js .mt-typed .mt-done .mt-cold-foot,
.mt-js .mt-typed .mt-done .mt-cites {
  opacity: 1;
  transform: none;
}
.mt-caret {
  display: none;
  width: 8px;
  height: 17px;
  vertical-align: -3px;
  background: var(--mt-muted);
  animation: mt-caret 1s infinite;
}
.mt-tethered .mt-caret {
  background: var(--mt-green);
}
.mt-typing .mt-caret {
  display: inline-block;
}
@keyframes mt-caret {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.mt-demo-foot {
  margin-top: 46px;
}
.mt-demo-foot .mt-h3 {
  font-size: 29px;
  margin-bottom: 8px;
  color: var(--mt-ink);
}
.mt-demo-foot p {
  font-size: 14px;
  color: var(--mt-body);
  margin: 0 0 24px;
}

/* ── how it works ────────────────────────────────────────────────────────── */

.mt-step {
  padding: 32px 32px 34px;
}
.mt-step-n {
  width: 34px;
  height: 34px;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.mt-step .mt-h3 {
  margin-bottom: 8px;
}
.mt-step p {
  font-size: 14px;
  line-height: 1.6;
}
.mt-promises {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}
.mt-promises li {
  border: 1px solid var(--mt-border);
  background: var(--mt-surface);
  padding: 7px 15px;
  border-radius: var(--mt-radius-pill);
  font-size: 12.5px;
  color: #3c463c;
}
.mt-promises li.mt-promise-cited {
  border: 1px dashed var(--mt-green);
  background: transparent;
  color: var(--mt-green);
}
.mt-caption {
  text-align: center;
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--mt-muted);
  font-style: italic;
}

/* ── your rules ──────────────────────────────────────────────────────────── */

.mt-rules {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: center;
}
.mt-rules h2 {
  margin-bottom: 16px;
}
.mt-rules-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0 0 28px;
  max-width: 44ch;
}
.mt-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mt-checklist li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.mt-tick {
  width: 26px;
  height: 26px;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-green-tint);
  color: var(--mt-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
  transform: translateY(4px);
}
.mt-checklist b {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 2px;
}
.mt-checklist span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mt-body);
}

.mt-panel {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(22, 33, 27, 0.06);
}
.mt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mt-border-inner);
  font-size: 13px;
  font-weight: 600;
}
.mt-panel-badge {
  font-size: 11.5px;
  color: var(--mt-green);
  background: var(--mt-green-tint);
  border-radius: var(--mt-radius-pill);
  padding: 4px 11px;
  font-weight: 600;
}
.mt-memories {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  list-style: none;
}
.mt-memory {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mt-canvas);
  border: 1px solid var(--mt-border-inner);
  border-radius: var(--mt-radius-row);
  padding: 12px 14px;
}
.mt-memory-text {
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.mt-tag {
  font-size: 11px;
  border-radius: var(--mt-radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
  border: 1px solid var(--mt-border);
  background: var(--mt-surface);
  color: var(--mt-muted);
}
.mt-tag-shared {
  color: var(--mt-green);
  border-color: var(--mt-green-chip-border);
  background: var(--mt-green-tint);
  font-weight: 600;
}
.mt-tag-private {
  color: var(--mt-amber-fg);
  border: 1px dashed var(--mt-amber-line);
  background: var(--mt-amber-bg);
  font-weight: 600;
}
.mt-memory-deleted {
  opacity: 0.55;
}
.mt-memory-deleted .mt-memory-text {
  text-decoration: line-through;
}

/* ── pricing ─────────────────────────────────────────────────────────────── */

/*
  Two cards, and the second one is the offer. The free tier has to be a real column rather than a
  footnote — "free forever" is the reason most visitors will sign up — but the founding card
  carries every emphasis the design has to spend: the heavier border, the shadow, the badge
  breaking the top edge, and the only progress bar on the page.
*/
.mt-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  /* The founding badge breaks the featured card's top edge by 13px; without this clearance it
     collides with the section headline at in-between viewport widths (seen at 1024–1140px). */
  margin: 26px auto 0;
}
.mt-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  padding: 36px 36px 34px;
}
.mt-plan-featured {
  border: 1.5px solid var(--mt-green);
  box-shadow: 0 16px 44px rgba(42, 92, 67, 0.1);
  position: relative;
}
.mt-plan-badge {
  position: absolute;
  top: -13px;
  left: 36px;
  background: var(--mt-green);
  color: #fff;
  border-radius: var(--mt-radius-pill);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mt-plan-name {
  font-size: 27px;
  margin-bottom: 6px;
  text-wrap: balance;
}
.mt-plan-price {
  font-family: var(--mt-serif);
  font-size: 44px;
  line-height: 1;
  margin: 10px 0 18px;
}
.mt-plan-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0 0 24px;
}
/* The founding card has no price figure, so its "Then £10/month." sits straight under the
   headline and takes the price's breathing room instead. */
.mt-plan-name + .mt-plan-body {
  margin: 6px 0 18px;
}
/* `auto` rather than a fixed gap: the two cards hold different amounts of copy, and the buttons
   still have to land on the same line. */
.mt-plan-cta {
  margin-top: auto;
  font-size: 14px;
  padding: 12px 26px;
}

.mt-founding {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 12.5px;
  color: var(--mt-body);
}
.mt-founding[hidden] {
  display: none;
}
.mt-founding-track {
  width: 120px;
  height: 6px;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-green-tint);
  overflow: hidden;
  flex: none;
}
.mt-founding-fill {
  display: block;
  /* Set from the live count by marketing.js; 0 until then, and the row is hidden anyway. */
  width: 0;
  height: 100%;
  background: var(--mt-green);
  border-radius: var(--mt-radius-pill);
}

.mt-plan-foot {
  text-align: center;
  margin: 28px 0 0;
  font-size: 13.5px;
  color: var(--mt-body);
}

/* ── faq ─────────────────────────────────────────────────────────────────── */

.mt-faq {
  max-width: 820px;
}
.mt-faq .mt-h2 {
  margin: 0 0 44px;
}
.mt-faq-list {
  display: flex;
  flex-direction: column;
}
.mt-faq details {
  border-top: 1px solid var(--mt-border);
  padding: 4px 0;
}
.mt-faq details:last-child {
  border-bottom: 1px solid var(--mt-border);
}
.mt-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  font-size: 16.5px;
  font-weight: 600;
}
.mt-faq summary::-webkit-details-marker {
  display: none;
}
.mt-faq summary::after {
  content: '+';
  color: var(--mt-green);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.mt-faq details[open] summary::after {
  content: '–';
}
.mt-faq p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0 0 20px;
  padding: 0 4px;
  max-width: 60ch;
}

/* ── closing CTA + footer ────────────────────────────────────────────────── */

.mt-cta {
  background: var(--mt-green);
  color: var(--mt-cream);
  position: relative;
  overflow: hidden;
}
.mt-cta-halftone {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mt-cta-halftone-a {
  width: 340px;
  height: 340px;
  right: -60px;
  top: -80px;
  background-image: radial-gradient(rgba(244, 241, 230, 0.5) 1.7px, transparent 1.7px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 50%, transparent 72%);
  mask-image: radial-gradient(circle at 55% 45%, #000 50%, transparent 72%);
}
.mt-cta-halftone-b {
  width: 240px;
  height: 240px;
  left: -70px;
  bottom: -90px;
  background-image: radial-gradient(rgba(244, 241, 230, 0.35) 1.7px, transparent 1.7px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(circle at 45% 55%, #000 50%, transparent 72%);
  mask-image: radial-gradient(circle at 45% 55%, #000 50%, transparent 72%);
}
.mt-cta-inner {
  position: relative;
  padding-top: 92px;
  padding-bottom: 88px;
  text-align: center;
}
.mt-cta .mt-h2 {
  font-size: 52px;
  line-height: 1.06;
  margin: 0 auto 16px;
  max-width: 14em;
  color: var(--mt-cream);
}
.mt-cta .mt-h2 em {
  color: var(--mt-cream-accent);
}
.mt-cta-mark {
  margin-bottom: 22px;
}
.mt-cta p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mt-cream-muted);
  max-width: 40ch;
  margin: 0 auto 30px;
}
.mt-footer {
  position: relative;
  border-top: 1px solid rgba(244, 241, 230, 0.18);
}
.mt-footer-inner {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.mt-footer-inner small {
  font-size: 12.5px;
  color: var(--mt-cream-muted);
}
.mt-footer-inner nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.mt-footer-inner nav a {
  font-size: 12.5px;
  color: var(--mt-cream-muted);
}
.mt-footer-inner nav a:hover {
  color: #fff;
}
.mt .mt-footer-inner nav a.mt-footer-cta {
  color: var(--mt-cream);
  font-weight: 600;
}
.mt-cta :focus-visible {
  outline-color: var(--mt-cream);
}

/* ── secondary pages (privacy, terms) ────────────────────────────────────── */

.mt-page {
  padding-top: 72px;
  padding-bottom: 96px;
  max-width: 820px;
}
.mt-page .mt-h1 {
  font-size: 46px;
  margin-bottom: 18px;
}
.mt-page-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  padding: 30px 34px;
  margin-bottom: 20px;
}
.mt-page-card .mt-h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.mt-page-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0 0 12px;
}
.mt-page-card p:last-child {
  margin-bottom: 0;
}
/*
  Links in running text. The site-wide rule strips colour and underline because every link on the
  landing page is a button, a pill or a nav item that carries its own affordance; these are inline
  in a paragraph, where losing both leaves nothing to distinguish a link from a word (WCAG 1.4.1 —
  colour alone would not be enough either, hence the underline).
*/
.mt-page-card p a,
.mt-page-list a {
  color: var(--mt-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mt-page-card p a:hover,
.mt-page-list a:hover {
  color: var(--mt-green-hover);
}

.mt-page-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mt-body);
}
.mt-page-list li + li {
  margin-top: 10px;
}
.mt-page-list b {
  color: var(--mt-ink);
}
.mt-page-card p + .mt-page-list,
.mt-page-list + p {
  margin-top: 12px;
}
.mt-privacy-lead {
  padding: 16px 18px;
  border: 1px solid var(--mt-green);
  border-radius: 12px;
  background: var(--mt-green-tint);
}
.mt-privacy-lead strong {
  display: block;
  margin-bottom: 3px;
  color: var(--mt-green);
}
.mt-privacy-map {
  margin: 18px 0 24px;
  overflow: hidden;
  border: 1px solid var(--mt-border);
  border-radius: 12px;
  background: var(--mt-surface);
}
.mt-privacy-map > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.4fr);
  gap: 18px;
  padding: 13px 16px;
}
.mt-privacy-map > div + div {
  border-top: 1px solid var(--mt-border);
}
.mt-privacy-map dt {
  color: var(--mt-ink);
  font-size: 13px;
  font-weight: 700;
}
.mt-privacy-map dd {
  margin: 0;
  color: var(--mt-body);
  font-size: 13px;
  line-height: 1.55;
}
.mt-privacy-subhead {
  margin: 24px 0 8px;
  color: var(--mt-ink);
  font-size: 16px;
  font-weight: 700;
}
/* The landing lede is measured for a two-column hero; running text wants the full column. */
.mt-lede-wide {
  max-width: 62ch;
}

/* ── homepage experiment candidates ─────────────────────────────────────── */

/*
  The three candidate pages share the established palette, typography and controls but not one
  interchangeable hero. Each class below belongs to a specific story: handoff continuity,
  connected work, or user-controlled access. Keeping those stories in one stylesheet preserves
  the marketing CSP (no inline styles) and makes the screenshot thumbnails deterministic.
*/

.mtv {
  /* Candidate pages use muted copy more structurally than the control. This accessible neutral
     clears WCAG AA against both the canvas and white cards while remaining visibly secondary. */
  --mt-muted: #687168;
}
.mtv-hero {
  padding-top: 82px;
  padding-bottom: 76px;
}
.mtv-hero-copy,
.mtv-work-heading,
.mtv-rules-heading {
  min-width: 0;
}
.mtv-hero-note {
  margin: -7px 0 0;
  color: var(--mt-muted);
  font-size: 12.5px;
}
.mtv-section-lede {
  max-width: 56ch;
  color: var(--mt-body);
  font-size: 16px;
  line-height: 1.65;
}
.mtv-split-heading {
  display: grid;
  grid-template-columns: 0.42fr minmax(0, 1.1fr) minmax(260px, 0.75fr);
  align-items: start;
  gap: 32px;
  margin-bottom: 50px;
}
.mtv-split-heading .mt-eyebrow {
  margin: 10px 0 0;
}
.mtv-split-heading > p:last-child {
  margin: 8px 0 0;
  color: var(--mt-body);
  font-size: 15px;
  line-height: 1.65;
}
.mtv-closing .mt-eyebrow {
  margin: 0 auto 15px;
  color: var(--mt-cream-muted);
}
.mtv-footer {
  border-top: 1px solid rgba(244, 241, 230, 0.16);
  background: var(--mt-ink);
  color: var(--mt-cream);
}
.mtv-footer :focus-visible {
  outline-color: var(--mt-cream);
}

/* ── variant: AI handoff ────────────────────────────────────────────────── */

.mtv-handoff-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: 72px;
}
.mtv-handoff-hero .mt-h1 {
  max-width: 10.5em;
}
.mtv-handoff-stage {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(121, 160, 139, 0.34), transparent 28%), var(--mt-ink);
  box-shadow: 0 28px 70px rgba(22, 33, 27, 0.12);
  color: var(--mt-dark-text);
}
.mtv-handoff-stage::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(244, 241, 230, 0.12) 1px, transparent 1px);
  background-size: 12px 12px;
  content: '';
  pointer-events: none;
}
.mtv-chat,
.mtv-handoff-continuation {
  position: relative;
  z-index: 1;
}
.mtv-chat {
  border: 1px solid rgba(244, 241, 230, 0.15);
  border-radius: 16px;
  padding: 17px 18px;
  background: rgba(255, 255, 255, 0.075);
}
.mtv-chat-first {
  margin-right: 48px;
}
.mtv-chat-next {
  margin-left: 48px;
  background: var(--mt-cream);
  color: var(--mt-ink);
}
.mtv-chat-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mtv-chat p {
  margin: 12px 0;
  font-family: var(--mt-serif);
  font-size: 19px;
  line-height: 1.3;
}
.mtv-chat-state,
.mtv-citation {
  display: inline-flex;
  border-radius: var(--mt-radius-pill);
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--mt-cream-muted);
  font-size: 10.5px;
}
.mtv-chat-next .mtv-citation,
.mtv-workbench .mtv-citation,
.mtv-memory-window .mtv-citation {
  border: 1px solid var(--mt-green-chip-border);
  background: var(--mt-green-tint);
  color: var(--mt-green);
}
.mtv-handoff-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 11px;
  width: calc(100% - 84px);
  margin: 11px auto;
  color: #79a08b;
}
.mtv-handoff-rail > span {
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.mtv-handoff-continuation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 17px;
  color: var(--mt-cream-muted);
  font-size: 11.5px;
}
.mtv-client-strip {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: var(--mt-surface);
}
.mtv-client-strip-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.mtv-client-strip-inner h2,
.mtv-client-strip-inner p {
  margin: 0;
}
.mtv-client-strip-inner ul {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mtv-client-strip-inner li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}
.mtv-client-strip-inner p {
  color: var(--mt-muted);
  font-size: 11.5px;
}
.mtv-handoff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
}
.mtv-handoff-steps article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 34px;
}
.mtv-handoff-steps article + article {
  border-left: 1px solid var(--mt-border);
}
.mtv-step-label {
  margin-bottom: 28px;
  color: var(--mt-green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mtv-handoff-steps .mt-h3 {
  margin-bottom: 10px;
}
.mtv-handoff-steps article > p {
  min-height: 6.4em;
  margin: 0 0 24px;
  color: var(--mt-body);
  font-size: 14px;
  line-height: 1.6;
}
.mtv-mini-message,
.mtv-mini-cite,
.mtv-mini-clients {
  min-height: 42px;
  margin-top: auto;
  border-radius: 10px;
  background: var(--mt-canvas);
  padding: 11px 12px;
  box-sizing: border-box;
  color: var(--mt-body);
  font-size: 11.5px;
}
.mtv-mini-cite {
  border-left: 3px solid var(--mt-green);
  background: var(--mt-green-tint);
  color: var(--mt-green);
}
.mtv-mini-clients {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mtv-handoff-how {
  background: var(--mt-band);
}
.mtv-how-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
  align-items: start;
  gap: 80px;
}
.mtv-how-layout .mt-eyebrow {
  margin: 0 0 18px;
}
.mtv-how-layout .mt-h2 {
  margin-bottom: 20px;
}
.mtv-how-layout .mt-btn {
  margin-top: 10px;
}
.mtv-numbered-list,
.mtv-rules-journey {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mtv-numbered-list li,
.mtv-rules-journey li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid var(--mt-border-dashed);
  padding: 20px 0;
}
.mtv-numbered-list li:last-child,
.mtv-rules-journey li:last-child {
  border-bottom: 1px solid var(--mt-border-dashed);
}
.mtv-numbered-list li > span,
.mtv-rules-journey li > span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mt-green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.mtv-numbered-list b,
.mtv-rules-journey b {
  font-size: 15px;
}
.mtv-numbered-list p,
.mtv-rules-journey p {
  margin: 4px 0 0;
  color: var(--mt-body);
  font-size: 13px;
  line-height: 1.55;
}
.mtv-dark-section {
  background: var(--mt-ink);
  color: var(--mt-dark-text);
}
.mtv-rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
  align-items: center;
  gap: 90px;
}
.mtv-dark-section .mt-eyebrow,
.mtv-dark-section p {
  color: var(--mt-cream-muted);
}
.mtv-dark-section .mt-h2 {
  margin: 18px 0;
  color: var(--mt-cream);
}
.mtv-dark-section .mt-h2 em {
  color: #9cc5aa;
}
.mtv-dark-section p {
  font-size: 15px;
  line-height: 1.65;
}
.mtv-permission-stack {
  overflow: hidden;
  border: 1px solid rgba(244, 241, 230, 0.16);
  border-radius: 18px;
  background: var(--mt-dark-chip);
}
.mtv-permission-stack > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 18px;
}
.mtv-permission-stack > div + div {
  border-top: 1px solid rgba(244, 241, 230, 0.12);
}
.mtv-permission-stack > div > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
}
.mtv-access-on,
.mtv-access-off {
  border-radius: var(--mt-radius-pill);
  padding: 5px 10px;
  font-size: 10.5px;
}
.mtv-access-on {
  background: rgba(121, 160, 139, 0.2);
  color: #acd0ba;
}
.mtv-access-off {
  border: 1px solid rgba(244, 241, 230, 0.15);
  color: var(--mt-cream-muted);
}
.mtv-permission-stack > p {
  margin: 0;
  border-top: 1px solid rgba(244, 241, 230, 0.12);
  padding: 13px 18px;
  font-size: 11px;
}

/* ── variant: connected work ────────────────────────────────────────────── */

.mtv-work-hero {
  display: block;
  padding-top: 74px;
}
.mtv-work-heading {
  max-width: 900px;
  margin: 0 auto 54px;
  text-align: center;
}
.mtv-work-heading .mt-eyebrow {
  margin: 0 0 22px;
}
.mtv-work-heading .mt-lede {
  max-width: 58ch;
  margin-right: auto;
  margin-left: auto;
}
.mtv-work-heading .mt-hero-actions {
  justify-content: center;
}
.mtv-pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.66fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 28px;
  position: relative;
}
.mtv-pipeline::before,
.mtv-pipeline::after {
  position: absolute;
  top: 50%;
  z-index: -1;
  height: 1px;
  background: var(--mt-green-chip-border);
  content: '';
}
.mtv-pipeline::before {
  left: 25%;
  right: 50%;
}
.mtv-pipeline::after {
  left: 50%;
  right: 25%;
}
.mtv-pipeline-column,
.mtv-pipeline-core {
  border: 1px solid var(--mt-border);
  border-radius: 20px;
  padding: 22px;
  background: var(--mt-surface);
}
.mtv-pipeline-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mtv-pipeline-column > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 9px;
  border: 1px solid var(--mt-border-inner);
  border-radius: 12px;
  padding: 14px;
  background: var(--mt-canvas);
}
.mtv-pipeline-column > div small {
  grid-column: 2;
  color: var(--mt-muted);
  font-size: 10px;
}
.mtv-pipeline-clients {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mtv-pipeline-clients > div {
  grid-template-columns: auto 1fr;
}
.mtv-pipeline-label {
  grid-column: 1 / -1;
  color: var(--mt-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mtv-read-only {
  grid-column: 1 / -1;
  justify-self: start;
  border-radius: var(--mt-radius-pill);
  padding: 5px 9px;
  background: var(--mt-green-tint);
  color: var(--mt-green);
  font-size: 10px;
  font-weight: 600;
}
.mtv-pipeline-core {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border-color: var(--mt-ink);
  background: var(--mt-ink);
  color: var(--mt-cream);
  text-align: center;
}
.mtv-pipeline-core small {
  color: var(--mt-cream-muted);
  font-size: 10px;
}
.mtv-work-proof {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: var(--mt-band);
}
.mtv-work-proof-inner {
  padding-top: 28px;
  padding-bottom: 28px;
}
.mtv-work-proof h2 {
  margin: 0 0 18px;
  text-align: center;
}
.mtv-work-proof ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.mtv-work-proof li {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  font-size: 12px;
}
.mtv-work-proof li + li {
  border-left: 1px solid var(--mt-border-dashed);
}
.mtv-work-proof li span {
  color: var(--mt-body);
}
.mtv-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--mt-border);
  border-radius: 22px;
  background: var(--mt-surface);
  box-shadow: 0 22px 55px rgba(22, 33, 27, 0.07);
}
.mtv-workbench-query {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 42px;
  background: var(--mt-green);
  color: var(--mt-cream);
}
.mtv-workbench-query > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mtv-workbench-query p {
  margin: 18px 0 0;
  font-family: var(--mt-serif);
  font-size: 26px;
  line-height: 1.25;
}
.mtv-workbench-result {
  padding: 28px;
}
.mtv-workbench-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
  color: var(--mt-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.mtv-live-dot::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--mt-green);
  content: '';
}
.mtv-workbench-result article {
  border: 1px solid var(--mt-border-inner);
  border-radius: 12px;
  padding: 15px 16px;
  background: var(--mt-canvas);
}
.mtv-workbench-result article + article {
  margin-top: 10px;
}
.mtv-workbench-result article p {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.mtv-gap-note {
  margin: 13px 0 0;
  color: var(--mt-muted);
  font-size: 10.5px;
}
.mtv-work-how {
  background: var(--mt-band);
}
.mtv-work-how .mt-centered {
  margin-bottom: 44px;
}
.mtv-work-how .mt-eyebrow {
  margin-bottom: 17px;
}
.mtv-work-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mtv-work-steps article {
  position: relative;
  border: 1px solid var(--mt-border);
  border-radius: 18px;
  padding: 30px;
  background: var(--mt-surface);
}
.mtv-work-steps article > span {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--mt-muted);
  font-family: var(--mt-serif);
  font-size: 22px;
  font-style: italic;
}
.mtv-tool-pair,
.mtv-memory-glyph {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.mtv-tool-pair i {
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 7px var(--mt-canvas);
}
.mtv-memory-glyph {
  width: 42px;
  justify-content: center;
  border-radius: 12px;
  background: var(--mt-green-tint);
  color: var(--mt-green);
  font-family: var(--mt-serif);
  font-size: 18px;
}
.mtv-work-steps .mt-h3 {
  margin-bottom: 10px;
}
.mtv-work-steps article p {
  margin: 0;
  color: var(--mt-body);
  font-size: 13.5px;
  line-height: 1.6;
}
.mtv-work-guardrails {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1fr);
  gap: 80px;
}
.mtv-work-guardrails .mt-eyebrow {
  margin: 0 0 18px;
}
.mtv-work-guardrails .mt-h2 {
  margin-bottom: 20px;
}
.mtv-guardrail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mtv-guardrail-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--mt-border-inner);
  border-radius: 14px;
  padding: 18px;
  background: var(--mt-canvas);
}
.mtv-guardrail-list li > span {
  color: var(--mt-green);
  font-weight: 700;
}
.mtv-guardrail-list b {
  font-size: 13px;
}
.mtv-guardrail-list p {
  margin: 4px 0 0;
  color: var(--mt-body);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ── variant: your rules ────────────────────────────────────────────────── */

.mtv-rules-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1fr);
  align-items: center;
  gap: 64px;
}
.mtv-rules-hero .mt-h1 {
  max-width: 10.8em;
}
.mtv-trust-points {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mt-body);
  font-size: 11.5px;
}
.mtv-trust-points li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mtv-trust-points li span {
  color: var(--mt-green);
  font-weight: 700;
}
.mtv-control-panel {
  overflow: hidden;
  border: 1px solid var(--mt-border);
  border-radius: 24px;
  background: var(--mt-surface);
  box-shadow: 0 25px 70px rgba(22, 33, 27, 0.09);
}
.mtv-control-head,
.mtv-control-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: var(--mt-band);
  color: var(--mt-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.mtv-control-head span:first-child {
  color: var(--mt-ink);
}
.mtv-control-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.65fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.mtv-control-row + .mtv-control-row {
  border-top: 1px solid var(--mt-border-inner);
}
.mtv-control-app {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 8px;
}
.mtv-control-app small {
  grid-column: 2;
  color: var(--mt-muted);
  font-size: 10px;
}
.mtv-control-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mtv-control-permissions em,
.mtv-control-status {
  border-radius: var(--mt-radius-pill);
  padding: 5px 8px;
  background: var(--mt-green-tint);
  color: var(--mt-green);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
}
.mtv-control-permissions em.is-off {
  border: 1px solid var(--mt-border-inner);
  background: transparent;
  color: var(--mt-muted);
}
.mtv-control-status {
  justify-self: end;
  border: 1px solid var(--mt-green-chip-border);
  background: transparent;
}
.mtv-control-foot {
  align-items: flex-start;
  text-transform: none;
}
.mtv-control-foot span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--mt-green);
}
.mtv-control-foot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mt-green);
}
.mtv-trust-strip {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: var(--mt-ink);
  color: var(--mt-cream);
}
.mtv-trust-strip .mt-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.mtv-trust-strip h2,
.mtv-trust-strip p {
  margin: 0;
}
.mtv-trust-strip h2 {
  color: var(--mt-cream-muted);
}
.mtv-trust-strip p {
  border-left: 1px solid rgba(244, 241, 230, 0.16);
  padding-left: 24px;
  color: var(--mt-cream-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.mtv-trust-strip b {
  color: var(--mt-cream);
}
.mtv-rules-value-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.mtv-rules-value-head .mt-eyebrow {
  margin-bottom: 17px;
}
.mtv-rules-value-head > p:last-child {
  max-width: 58ch;
  margin: 18px auto 0;
  color: var(--mt-body);
  line-height: 1.65;
}
.mtv-rule-cards {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: repeat(2, minmax(0, auto));
  gap: 14px;
}
.mtv-rule-card {
  position: relative;
  border: 1px solid var(--mt-border);
  border-radius: 20px;
  padding: 30px;
  background: var(--mt-canvas);
}
.mtv-rule-card-featured {
  grid-row: 1 / 3;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 48px;
  background: var(--mt-green-tint);
}
.mtv-rule-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--mt-muted);
  font-family: var(--mt-serif);
  font-size: 22px;
  font-style: italic;
}
.mtv-rule-card .mt-eyebrow {
  margin: 0 0 20px;
  color: var(--mt-green);
}
.mtv-rule-card .mt-h3 {
  max-width: 17em;
  margin-bottom: 12px;
}
.mtv-rule-card > p:not(.mt-eyebrow) {
  max-width: 48ch;
  margin: 0 0 22px;
  color: var(--mt-body);
  font-size: 13px;
  line-height: 1.6;
}
.mtv-key-row {
  display: flex;
  align-items: center;
  max-width: 310px;
  margin-top: 18px;
}
.mtv-key-row span {
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid var(--mt-green);
  border-radius: 50%;
  background: var(--mt-surface);
}
.mtv-key-row span:last-child {
  border-color: var(--mt-ink);
  background: var(--mt-ink);
}
.mtv-key-row i {
  height: 2px;
  flex: 1;
  background: var(--mt-green-chip-border);
}
.mtv-evidence-slip {
  border-left: 3px solid var(--mt-green);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  background: var(--mt-surface);
}
.mtv-evidence-slip b,
.mtv-evidence-slip span {
  display: block;
}
.mtv-evidence-slip b {
  font-size: 11.5px;
}
.mtv-evidence-slip span {
  margin-top: 3px;
  color: var(--mt-green);
  font-size: 9.5px;
}
.mtv-export-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mtv-export-row span {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 5px 9px;
  background: var(--mt-surface);
  color: var(--mt-body);
  font-size: 9.5px;
}
.mtv-rules-how {
  background: var(--mt-band);
}
.mtv-rules-journey li > span {
  border: 1px solid var(--mt-green);
  background: transparent;
  color: var(--mt-green);
}
.mtv-memory-inspector {
  background: var(--mt-green-tint);
}
.mtv-inspector-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: 72px;
}
.mtv-inspector-layout .mt-eyebrow {
  margin: 0 0 18px;
  color: var(--mt-green);
}
.mtv-inspector-layout .mt-h2 {
  margin-bottom: 18px;
}
.mtv-inspector-layout > div:first-child > p:not(.mt-eyebrow) {
  margin: 0 0 24px;
  color: var(--mt-body);
  line-height: 1.65;
}
.mtv-memory-window {
  overflow: hidden;
  border: 1px solid var(--mt-border);
  border-radius: 20px;
  background: var(--mt-surface);
  box-shadow: 0 22px 55px rgba(22, 33, 27, 0.08);
}
.mtv-memory-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 17px;
  background: var(--mt-ink);
  color: var(--mt-cream);
  font-size: 11px;
  font-weight: 600;
}
.mtv-memory-window-head span:last-child {
  color: var(--mt-cream-muted);
  font-weight: 400;
}
.mtv-memory-filter-row {
  display: flex;
  gap: 6px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--mt-border-inner);
}
.mtv-memory-filter-row span {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 4px 8px;
  color: var(--mt-muted);
  font-size: 9px;
}
.mtv-memory-window article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.mtv-memory-window article + article {
  border-top: 1px solid var(--mt-border-inner);
}
.mtv-memory-window article b,
.mtv-memory-window article div > span {
  display: block;
}
.mtv-memory-window article b {
  font-size: 11.5px;
}
.mtv-memory-window article div > span {
  margin-top: 4px;
  color: var(--mt-muted);
  font-size: 9.5px;
}
.mtv-memory-window > p {
  margin: 0;
  border-top: 1px solid var(--mt-border-inner);
  padding: 11px 16px;
  color: var(--mt-muted);
  font-size: 9.5px;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root {
    --mt-gutter: 32px;
  }
  .mt-h1 {
    font-size: 52px;
  }
  .mt-h2 {
    font-size: 38px;
  }
  .mt-cta .mt-h2 {
    font-size: 42px;
  }
  .mtv-handoff-hero,
  .mtv-rules-hero {
    gap: 42px;
  }
  .mtv-handoff-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.85fr);
  }
  .mtv-rules-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  }
  .mtv-how-layout,
  .mtv-rules-layout,
  .mtv-work-guardrails,
  .mtv-inspector-layout {
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .mt-hero,
  .mt-demo,
  .mt-rules,
  .mt-grid-2,
  .mt-grid-3 {
    grid-template-columns: 1fr;
  }
  .mt-plans {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .mt-rules {
    gap: 40px;
  }
  .mt-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px auto;
  }
  /* The clients tile keeps its two-row span here: its illustration is the detailed one, and
     squeezed into a single 140px row it scales down past reading size. */
  .mt-tile-known {
    padding: 18px 14px;
  }
  .mt-section {
    padding-top: 64px;
    padding-bottom: 60px;
  }
  .mt-nav-links a:not(.mt-nav-pill):not(.mt-nav-cta) {
    display: none;
  }
  .mtv-handoff-hero,
  .mtv-rules-hero,
  .mtv-how-layout,
  .mtv-rules-layout,
  .mtv-work-guardrails,
  .mtv-inspector-layout,
  .mtv-split-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .mtv-handoff-hero,
  .mtv-rules-hero {
    gap: 50px;
  }
  .mtv-handoff-stage,
  .mtv-control-panel {
    width: min(100%, 620px);
    margin: 0 auto;
    box-sizing: border-box;
  }
  .mtv-client-strip-inner {
    grid-template-columns: auto 1fr;
  }
  .mtv-client-strip-inner p {
    grid-column: 1 / -1;
  }
  .mtv-split-heading {
    gap: 14px;
  }
  .mtv-split-heading .mt-eyebrow {
    margin-top: 0;
  }
  .mtv-handoff-steps,
  .mtv-work-steps,
  .mtv-work-proof ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .mtv-handoff-steps article + article {
    border-top: 1px solid var(--mt-border);
    border-left: 0;
  }
  .mtv-handoff-steps article > p {
    min-height: 0;
  }
  .mtv-work-proof li {
    justify-content: flex-start;
    padding: 10px 0;
  }
  .mtv-work-proof li + li {
    border-top: 1px solid var(--mt-border-dashed);
    border-left: 0;
  }
  .mtv-pipeline {
    grid-template-columns: minmax(0, 1fr);
    max-width: 650px;
    margin: 0 auto;
  }
  .mtv-pipeline::before,
  .mtv-pipeline::after {
    display: none;
  }
  .mtv-pipeline-core {
    min-height: 125px;
  }
  .mtv-trust-strip .mt-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mtv-trust-strip h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  :root {
    --mt-gutter: 20px;
  }
  .mt-h1 {
    font-size: 40px;
  }
  .mt-h2,
  .mt-cta .mt-h2 {
    font-size: 32px;
  }
  .mt-card {
    padding: 26px 22px;
  }
  .mt-plan {
    padding: 30px 24px 28px;
  }
  .mt-plan-badge {
    left: 24px;
  }
  .mt-card .mt-h3 {
    font-size: 23px;
  }
  .mt-memory {
    flex-wrap: wrap;
  }
  .mt-memory-text {
    flex: 1 0 100%;
  }
  .mt-footer-inner {
    justify-content: flex-start;
  }
  .mt-privacy-map > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .mtv-hero {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .mtv-client-strip-inner,
  .mtv-workbench,
  .mtv-rule-cards,
  .mtv-trust-strip .mt-shell,
  .mtv-guardrail-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mtv-client-strip-inner {
    gap: 12px;
  }
  .mtv-client-strip-inner ul {
    gap: 14px;
  }
  .mtv-handoff-stage {
    padding: 18px;
    border-radius: 20px;
  }
  .mtv-chat-first,
  .mtv-chat-next {
    margin-right: 0;
    margin-left: 0;
  }
  .mtv-handoff-rail {
    width: calc(100% - 20px);
  }
  .mtv-handoff-steps article {
    padding: 28px 22px;
  }
  .mtv-how-layout {
    gap: 34px;
  }
  .mtv-pipeline-column {
    grid-template-columns: minmax(0, 1fr);
  }
  .mtv-pipeline-clients {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mtv-pipeline-column > div {
    padding: 12px;
  }
  .mtv-pipeline-label,
  .mtv-read-only {
    grid-column: 1 / -1;
  }
  .mtv-workbench-query {
    padding: 30px 24px;
  }
  .mtv-workbench-query p {
    font-size: 22px;
  }
  .mtv-workbench-result {
    padding: 20px;
  }
  .mtv-work-steps article,
  .mtv-rule-card,
  .mtv-rule-card-featured {
    padding: 26px 22px;
  }
  .mtv-rule-card-featured {
    grid-row: auto;
  }
  .mtv-control-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mtv-control-permissions {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mtv-control-status {
    grid-column: 2;
    grid-row: 1;
  }
  .mtv-control-foot,
  .mtv-trust-strip .mt-shell {
    align-items: flex-start;
    flex-direction: column;
  }
  .mtv-trust-strip p {
    border-top: 1px solid rgba(244, 241, 230, 0.16);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }
  .mtv-memory-filter-row {
    flex-wrap: wrap;
  }
  .mtv-memory-window article {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .mt-nav-inner {
    gap: 8px;
  }
  .mt .mt-wordmark {
    gap: 7px;
    font-size: 17px;
  }
  .mt-wordmark svg {
    width: 22px;
  }
  .mt-nav-links {
    gap: 4px;
  }
  .mt-nav-actions {
    gap: 4px;
  }
  .mt .mt-nav-pill {
    border-color: transparent;
    background: transparent;
    padding: 8px 4px;
  }
  .mt .mt-nav-cta {
    padding: 8px 12px;
  }
  .mtv-pipeline-clients {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */

/*
  The handoff's rule: "render final states, no marquee". Reveals land instantly rather than being
  suppressed (a visitor who asked for less motion still needs to read the page), the marquee stops
  where it is, and marketing.js skips the typewriter entirely and prints both answers in full.
*/
@media (prefers-reduced-motion: reduce) {
  .mt *,
  .mt *::before,
  .mt *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mt-ticker-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }
  .mt-ticker-run {
    flex-wrap: wrap;
    white-space: normal;
  }
  .mt-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── variant: paper terminal ────────────────────────────────────────────── */

/*
  Paper Terminal: warm-paper chrome, dark terminal panes, JetBrains Mono throughout.
  The shared nav, pricing, FAQ and footer are reskinned purely through the token
  overrides below (square corners come from zeroed radius tokens); amber is reserved
  for Founding-100 elements. Everything is scoped under body.mtv-terminal.
*/

body.mtv-terminal {
  --mt-canvas: #f7f7f2;
  --mt-surface: #fdfdfb;
  --mt-band: #f1f1eb;
  --mt-ink: #1a1f1c;
  --mt-body: #4a544d;
  --mt-muted: #5c665f;
  --mt-border: #d9dbd3;
  --mt-border-inner: #e3e5dd;
  --mt-border-dashed: #c6c9bf;

  --mt-green: #0e7a46;
  --mt-green-hover: #0b6339;
  --mt-green-tint: #e7f2ea;
  --mt-green-chip-border: #9cc7ac;

  --mt-dark-chip: #0d110f;
  --mt-dark-text: #d9e2dc;

  --mt-amber-fg: #8a5406;
  --mt-amber-line: #d8a84b;
  --mt-amber-bg: #fbf3e1;

  /* The closing CTA and footer are dark, so "cream" roles map to paper-on-dark. */
  --mt-cream: #f7f7f2;
  --mt-cream-accent: #4ade80;
  --mt-cream-muted: #a8b3ab;

  --mt-serif: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mt-sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mt-radius-card: 0px;
  --mt-radius-row: 0px;
  --mt-radius-pill: 0px;

  /* Variant-only tokens. */
  --mtv-terminal-pane-bg: #0d110f;
  --mtv-terminal-pane-border: #242a26;
  --mtv-terminal-pane-dim: #8b958d;
  --mtv-terminal-pane-green: #4ade80;
  --mtv-terminal-pane-amber: #fbbf24;
  --mtv-terminal-founding: #a16207;
  --mtv-terminal-founding-deep: #8a5406;
}

/* ── chrome (layout nav + footer) ── */
.mtv-terminal .mt-nav {
  background: rgba(247, 247, 242, 0.97);
  border-bottom: 2px solid var(--mt-ink);
  box-shadow: 0 3px 0 rgba(26, 31, 28, 0.08);
}
.mtv-terminal .mt-nav-inner {
  padding-top: 17px;
  padding-bottom: 17px;
}
.mtv-terminal .mt-wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mtv-terminal .mt-wordmark svg [stroke='#2a5c43'] {
  stroke: var(--mt-green);
}
.mtv-terminal .mt-wordmark svg [fill='#2a5c43'] {
  fill: var(--mt-green);
}
.mtv-terminal .mt-nav-links a::before {
  content: '[';
  content: '[' / '';
}
.mtv-terminal .mt-nav-links a::after {
  content: ']';
  content: ']' / '';
}
.mtv-terminal .mt-nav-links a {
  color: var(--mt-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-top: 10px;
  padding-bottom: 10px;
}
.mtv-terminal .mt-nav-sections a {
  border-bottom: 2px solid transparent;
}
.mtv-terminal .mt-nav-sections a:first-child {
  padding-left: 0;
}
.mtv-terminal .mt-nav-sections a:hover {
  border-bottom-color: var(--mt-green);
  color: var(--mt-green);
}
.mtv-terminal .mt-nav-pill,
.mtv-terminal .mt-nav-session {
  background: var(--mt-surface);
  border: 1px solid var(--mt-ink);
  font-weight: 700;
}
.mtv-terminal .mt-nav-cta {
  font-weight: 700;
}

/* On a wide canvas, the product wordmark belongs to the outer page chrome while the navigation
   belongs to the same 1088px content column as the hero below. The middle grid track is exactly
   the shell's usable width, so its first link and final action share the hero's two edges. */
@media (min-width: 1500px) {
  .mtv-terminal .mt-nav-inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, calc(var(--mt-shell) - var(--mt-gutter) - var(--mt-gutter)))
      minmax(0, 1fr);
  }
  .mtv-terminal .mt-wordmark {
    grid-column: 1;
    justify-self: start;
    margin-left: 24px;
  }
  .mtv-terminal .mt-nav-links {
    grid-column: 2;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  .mt-nav-session {
    display: none;
  }
  .mtv-terminal .mt-nav-links a {
    font-size: 13px;
  }
}

/* ── type ── */
.mtv-terminal .mt-h1 {
  font-size: clamp(32px, 4.6vw, 44px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mtv-terminal .mt-h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mtv-terminal .mt-h2::before {
  content: '## ';
  content: '## ' / '';
  color: var(--mt-green);
}
.mtv-terminal .mt-h3 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}
.mtv-terminal .mt-lede {
  font-size: 15px;
  line-height: 1.7;
  max-width: 46ch;
}
.mtv-terminal .mt-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
}
.mtv-terminal .mt-section > .mt-shell > .mt-h2 {
  margin: 0 0 22px;
}

/* ── buttons: square, bold, bracketed ── */
.mtv-terminal .mt-btn {
  font-weight: 700;
  gap: 7px;
}
.mtv-terminal .mt-btn::before {
  content: '[';
  content: '[' / '';
}
.mtv-terminal .mt-btn::after {
  content: ']';
  content: ']' / '';
}
.mtv-terminal .mt-btn-ghost {
  background: transparent;
  border-color: var(--mt-ink);
  color: var(--mt-ink);
}
.mtv-terminal .mt-btn-ghost:hover {
  background: transparent;
  border-color: var(--mt-green);
  color: var(--mt-green);
}

/* ── dark terminal panes ── */
.mtv-terminal-pane {
  box-sizing: border-box;
  background: var(--mtv-terminal-pane-bg);
  border: 1px solid var(--mtv-terminal-pane-border);
  color: var(--mt-dark-text);
  font-size: 13.5px;
  line-height: 1.65;
}
.mtv-terminal-dots {
  display: flex;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mtv-terminal-pane-border);
}
.mtv-terminal-dots span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}
.mtv-terminal-dots span:nth-child(1) {
  background: #ff5f57;
}
.mtv-terminal-dots span:nth-child(2) {
  background: #febc2e;
}
.mtv-terminal-dots span:nth-child(3) {
  background: #28c840;
}
.mtv-terminal-pane-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mtv-terminal-pane-body p {
  margin: 0;
  overflow-wrap: break-word;
}
.mtv-terminal-prompt {
  color: var(--mtv-terminal-pane-green);
}
.mtv-terminal-dim {
  color: var(--mtv-terminal-pane-dim);
}
.mtv-terminal-amber {
  color: var(--mtv-terminal-pane-amber);
}
.mtv-terminal-indent {
  padding-left: 16px;
}
.mtv-terminal-cursor {
  color: var(--mtv-terminal-pane-green);
}
.mtv-terminal-pane .mtv-terminal-live {
  color: var(--mtv-terminal-pane-green);
}
.mtv-terminal-config {
  gap: 6px;
}
.mtv-terminal-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mtv-terminal-pane-border);
  font-size: 13px;
}
.mtv-terminal-tabs span {
  padding: 12px 20px;
  border-right: 1px solid var(--mtv-terminal-pane-border);
  color: var(--mtv-terminal-pane-dim);
}
.mtv-terminal-tabs span:last-child {
  border-right: 0;
}
.mtv-terminal-tabs .is-active {
  color: var(--mtv-terminal-pane-green);
  background: #141815;
}

/* ── hero ── */
.mtv-terminal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 64px;
  align-items: center;
}
.mtv-terminal-eyebrow {
  margin: 0 0 10px;
}
.mtv-terminal-hero .mt-h1 {
  margin: 0 0 18px;
}
.mtv-terminal-founding-line {
  margin: -8px 0 0;
  font-size: 13px;
}
.mtv-terminal-founding-line a {
  color: var(--mt-amber-fg);
}
.mtv-terminal-founding-line a:hover {
  color: var(--mtv-terminal-founding);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── pipeline strip ── */
.mtv-terminal-pipeline {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: var(--mt-surface);
}
.mtv-terminal-pipeline-inner {
  padding-top: 34px;
  padding-bottom: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mtv-terminal-pipeline-flow {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 14.5px;
  text-align: center;
}
.mtv-terminal-pipe-arrow {
  color: var(--mt-muted);
}
.mtv-terminal-pipeline-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 56px;
  font-size: 12.5px;
  color: var(--mt-muted);
}

/* ── sources table ── */
.mtv-terminal-scroll {
  margin-top: 2px;
  overflow-x: auto;
}
.mtv-terminal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.mtv-terminal-table thead th {
  padding: 0 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mt-muted);
  border-bottom: 1px solid var(--mt-ink);
}
.mtv-terminal-table tbody th,
.mtv-terminal-table tbody td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mt-border);
  font-weight: 500;
  vertical-align: top;
}
.mtv-terminal-table .is-dim {
  color: var(--mt-muted);
}
.mtv-terminal-table .is-end {
  text-align: right;
}
.mtv-terminal-live {
  color: var(--mt-green);
}
.mtv-terminal-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--mt-muted);
}

/* ── access rules ── */
.mtv-terminal-rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px;
  align-items: start;
}
.mtv-terminal-rules-copy .mt-h2 {
  margin: 0 0 16px;
}
.mtv-terminal-rules-copy p {
  margin: 0;
  max-width: 44ch;
  color: var(--mt-body);
  font-size: 15px;
  line-height: 1.7;
}

/* ── SECURITY.md ── */
.mtv-terminal-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mt-ink);
}
.mtv-terminal-check {
  color: var(--mt-green);
  font-weight: 700;
  margin-right: 8px;
}
.mtv-terminal-security-cta {
  margin: 28px 0 0;
}

/* ── pricing partial reskin: square boxes, amber Founding-100 ── */
.mtv-terminal .mt-plan {
  background: var(--mt-surface);
  border: 1px solid var(--mt-ink);
}
.mtv-terminal .mt-plan-featured {
  border: 1px solid var(--mtv-terminal-founding);
  box-shadow: 6px 6px 0 rgba(161, 98, 7, 0.14);
}
.mtv-terminal .mt-plan-badge {
  background: var(--mtv-terminal-founding);
}
.mtv-terminal .mt-plan-name {
  font-size: 19px;
  line-height: 1.5;
}
.mtv-terminal .mt-plan-featured .mt-plan-name em {
  color: var(--mtv-terminal-founding-deep);
}
.mtv-terminal .mt-plan-price {
  font-size: 34px;
  font-weight: 700;
}
.mtv-terminal .mt-founding {
  color: var(--mtv-terminal-founding-deep);
}
.mtv-terminal .mt-founding-track {
  background: #f3e5c8;
}
.mtv-terminal .mt-founding-fill {
  background: var(--mtv-terminal-founding);
}
.mtv-terminal .mt-plan:not(.mt-plan-featured) .mt-plan-cta {
  background: transparent;
  border-color: var(--mt-ink);
  color: var(--mt-ink);
}
.mtv-terminal .mt-plan:not(.mt-plan-featured) .mt-plan-cta:hover {
  background: transparent;
  border-color: var(--mt-green);
  color: var(--mt-green);
}
.mtv-terminal .mt-plan-featured .mt-plan-cta {
  background: var(--mtv-terminal-founding);
  border-color: var(--mtv-terminal-founding);
  color: #f7f7f2;
}
.mtv-terminal .mt-plan-featured .mt-plan-cta:hover {
  background: var(--mtv-terminal-founding-deep);
  border-color: var(--mtv-terminal-founding-deep);
  color: #f7f7f2;
}

/* ── faq partial reskin ── */
.mtv-terminal .mt-faq summary {
  font-size: 15px;
  font-weight: 700;
}
.mtv-terminal .mt-faq summary::after {
  content: '[+]';
  content: '[+]' / '';
  font-size: 14px;
  font-weight: 500;
}
.mtv-terminal .mt-faq details[open] summary::after {
  content: '[–]';
  content: '[–]' / '';
}

/* ── closing CTA: "$ ready when you are" on a full-width dark pane ── */
.mtv-terminal .mt-cta {
  background: var(--mtv-terminal-pane-bg);
  border-top: 1px solid var(--mtv-terminal-pane-border);
}
.mtv-terminal .mt-cta .mt-h2 {
  font-size: clamp(22px, 3.4vw, 32px);
}
.mtv-terminal .mt-cta .mt-h2::before {
  content: '$ ';
  content: '$ ' / '';
  color: var(--mtv-terminal-pane-green);
}
.mtv-terminal .mt-cta .mtv-terminal-cta-founding {
  margin: 26px auto 0;
  font-size: 13px;
  color: var(--mtv-terminal-pane-amber);
}
.mtv-terminal .mt-cta .mtv-terminal-cta-founding a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mtv-terminal .mt-cta .mtv-terminal-cta-founding a:hover {
  color: #fcd34d;
}

/* ── responsive ── */
@media (max-width: 900px) {
  .mtv-terminal-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .mtv-terminal-rules-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .mtv-terminal-pane {
    width: min(100%, 600px);
  }
  .mtv-terminal-pipeline-steps {
    gap: 8px 32px;
  }
}

@media (max-width: 620px) {
  .mtv-terminal .mt-btn {
    white-space: normal;
    text-align: center;
  }
  .mtv-terminal-hero {
    gap: 36px;
  }
  .mtv-terminal-pane {
    font-size: 12.5px;
  }
  .mtv-terminal-pane-body {
    padding: 16px;
  }
  .mtv-terminal-tabs span {
    padding: 10px 12px;
    font-size: 12px;
  }
  .mtv-terminal-pipeline-flow {
    font-size: 13px;
  }
  .mtv-terminal-pipeline-steps {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .mtv-terminal-table {
    min-width: 540px;
    font-size: 13px;
  }
  .mtv-terminal-rules-copy p {
    max-width: none;
  }
}

/* The blinking prompt is the page's only animation and runs only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .mtv-terminal-cursor {
    animation: mtv-terminal-blink 1.2s step-end infinite;
  }
  @keyframes mtv-terminal-blink {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0.15;
    }
  }
}

/* ── variant: string (warm marginalia) ──────────────────────────────────── */

/*
  Warm Marginalia. Cream paper, warm ink, marigold pills (always ink text on marigold),
  string red-orange for the hand-drawn strings and squiggles, trust teal for the quiet
  reassurances. Fraunces carries the display type over the existing Geist/system body.
  Everything below is scoped under body.mtv-string; the shared nav, pricing and FAQ
  partials pick up the palette through the token overrides rather than forked markup.
*/

body.mtv-string {
  --mt-canvas: #faf6ef;
  --mt-surface: #ffffff;
  --mt-band: #f8e7d6;
  --mt-ink: #2b2a26;
  --mt-body: #57544b;
  --mt-muted: #676253;
  --mt-border: #ded7c8;
  --mt-border-inner: #e8e2d3;
  --mt-border-dashed: #cbc3af;

  --mt-green: #2e7d64;
  --mt-green-hover: #256a54;
  --mt-green-tint: #e9eddd;
  --mt-green-chip-border: #bfd3c0;

  --mt-dark-chip: #24261f;
  --mt-dark-text: #e8e6dc;

  --mt-cream: #ede9de;
  --mt-cream-accent: #f2a93b;
  --mt-cream-muted: #b3ae9f;

  --mt-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Variant-only accents. */
  --mtv-string-red: #d96c47;
  --mtv-string-marigold: #f2a93b;
  --mtv-string-marigold-hover: #e09724;
  --mtv-string-peach: #f8e7d6;
  --mtv-string-sage: #e9eddd;
  --mtv-string-mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* Fraunces sits heavier than Newsreader at the same weight; 600 matches the mockup. */
body.mtv-string .mt-h1,
body.mtv-string .mt-h2,
body.mtv-string .mt-h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.mtv-string .mt-h1 {
  font-size: clamp(38px, 5.6vw + 18px, 56px);
}

/* Warm sticky nav over the cream canvas (base hardcodes the control's canvas tint). */
body.mtv-string .mt-nav {
  background: rgba(250, 246, 239, 0.92);
}
body.mtv-string .mt-nav-cta {
  background: var(--mtv-string-marigold);
  color: var(--mt-ink);
}
body.mtv-string .mt-nav-cta:hover {
  background: var(--mtv-string-marigold-hover);
  color: var(--mt-ink);
}

/* Marigold pill CTAs — always ink text, never white. */
body.mtv-string .mt-btn-green {
  background: var(--mtv-string-marigold);
  color: var(--mt-ink);
}
body.mtv-string .mt-btn-green:hover {
  background: var(--mtv-string-marigold-hover);
  color: var(--mt-ink);
}

/* The badge dot picks up the string colour rather than teal. */
body.mtv-string .mt-badge span {
  background: var(--mtv-string-red);
}

/* ── hero: squiggle + knot ── */

body.mtv-string .mtv-string-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.86fr);
  align-items: center;
  gap: 64px;
}
body.mtv-string .mtv-string-hero .mt-h1 {
  max-width: 11em;
}
/* "forgetting" stays ink; the red squiggle is the accent. */
body.mtv-string .mtv-string-forgot {
  color: var(--mt-ink);
  font-style: italic;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
body.mtv-string .mtv-string-squiggle {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 12px;
  pointer-events: none;
}
body.mtv-string .mtv-string-textlink {
  color: var(--mt-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15.5px;
}
body.mtv-string .mtv-string-textlink:hover {
  color: var(--mt-green-hover);
}
body.mtv-string .mtv-string-knot {
  min-width: 0;
}
body.mtv-string .mtv-string-knot-art {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}
body.mtv-string .mtv-string-wink {
  font-family: var(--mt-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mt-muted);
  text-align: center;
  margin: 8px 0 0;
}

/* ── rounded peach / sage bands ── */

body.mtv-string .mtv-string-band {
  width: min(1232px, calc(100% - 32px));
  margin: 44px auto 0;
  border-radius: 28px;
  padding: 64px var(--mt-gutter);
  box-sizing: border-box;
}
body.mtv-string .mtv-string-band-peach {
  background: var(--mtv-string-peach);
}
body.mtv-string .mtv-string-band-sage {
  background: var(--mtv-string-sage);
  margin-top: 88px;
}
body.mtv-string .mtv-string-band-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
body.mtv-string .mtv-string-band-inner > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mt-body);
  max-width: 58ch;
}
body.mtv-string .mtv-string-h2 {
  font-size: 38px;
}

/* ── how it works: three cards ── */

body.mtv-string .mtv-string-how-heading {
  margin-bottom: 44px;
}
body.mtv-string .mtv-string-how-heading .mt-eyebrow {
  margin: 0 0 12px;
}
body.mtv-string .mtv-string-how-heading .mt-h2 {
  margin: 0 auto;
  max-width: 17em;
}
body.mtv-string .mtv-string-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
body.mtv-string .mtv-string-step {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 12px;
  padding: 30px;
  min-width: 0;
}
body.mtv-string .mtv-string-step-title {
  font-size: 20px;
  margin: 0 0 10px;
}
body.mtv-string .mtv-string-step p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0;
}
body.mtv-string .mtv-string-sources {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.mtv-string .mtv-string-sources li {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--mt-body);
  background: var(--mt-canvas);
}
body.mtv-string .mtv-string-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
body.mtv-string .mtv-string-index-card {
  background: var(--mt-canvas);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--mtv-string-mono);
  font-size: 13px;
  color: var(--mt-ink);
  transform: rotate(-0.6deg);
  box-shadow: 0 1px 0 rgba(43, 42, 38, 0.05);
}
body.mtv-string .mtv-string-index-card-alt {
  transform: rotate(0.7deg);
}
body.mtv-string .mtv-string-code {
  background: var(--mt-dark-chip);
  color: var(--mt-dark-text);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0 0;
  font-family: var(--mtv-string-mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
}
body.mtv-string .mtv-string-code code {
  font-family: inherit;
}
body.mtv-string .mtv-string-code-key {
  color: var(--mtv-string-marigold);
}
body.mtv-string .mtv-string-code-str {
  color: #7fb59b;
}
body.mtv-string .mtv-string-how-cta {
  margin-top: 40px;
}

/* ── luggage-tag access rules on the sage band ── */

body.mtv-string .mtv-string-rules-inner {
  max-width: 980px;
  gap: 24px;
}
body.mtv-string .mtv-string-tags {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 860px;
}
body.mtv-string .mtv-string-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.mtv-string .mtv-string-thread {
  display: block;
  width: 4px;
  height: 46px;
  flex: none;
}
body.mtv-string .mtv-string-tag-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 250px;
  box-sizing: border-box;
  text-align: left;
}
body.mtv-string .mtv-string-tilt-a {
  transform: rotate(-1.5deg);
}
body.mtv-string .mtv-string-tilt-b {
  transform: rotate(1deg);
}
body.mtv-string .mtv-string-tilt-c {
  transform: rotate(-0.8deg);
}
body.mtv-string .mtv-string-tag-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--mt-ink);
}
body.mtv-string .mtv-string-eyelet {
  flex: none;
  color: var(--mt-muted);
}
body.mtv-string .mtv-string-tag-rule {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mt-body);
}

/* ── deliberately quiet privacy ── */

body.mtv-string .mtv-string-privacy {
  padding-bottom: 24px;
}
body.mtv-string .mtv-string-privacy-inner {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.mtv-string .mtv-string-privacy-title {
  font-size: 30px;
}
body.mtv-string .mtv-string-privacy-inner p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--mt-body);
}

/* ── shared pricing partial: peach band, marigold founding ticket ── */

body.mtv-string #pricing {
  background: var(--mtv-string-peach);
  border-top: 0;
  width: min(1232px, calc(100% - 32px));
  margin: 88px auto 0;
  border-radius: 28px;
  padding-top: 64px;
  padding-bottom: 64px;
  box-sizing: border-box;
}
body.mtv-string .mt-plan {
  border-radius: 12px;
}
body.mtv-string .mt-plan-featured {
  background: var(--mtv-string-marigold);
  border-color: transparent;
  border-left: 6px dotted var(--mt-canvas);
  box-shadow: 0 16px 44px rgba(217, 108, 71, 0.18);
  transform: rotate(-1deg);
}
body.mtv-string .mt-plan-badge {
  background: var(--mt-ink);
  color: var(--mt-cream);
}
body.mtv-string .mt-plan-featured .mt-plan-name {
  color: var(--mt-ink);
}
body.mtv-string .mt-plan-featured .mt-plan-name em {
  color: var(--mt-ink);
}
body.mtv-string .mt-plan-featured .mt-plan-body,
body.mtv-string .mt-plan-featured .mt-founding {
  color: #423c2b;
}
body.mtv-string .mt-plan-featured .mt-founding-track {
  background: rgba(250, 246, 239, 0.75);
}
body.mtv-string .mt-plan-featured .mt-founding-fill {
  background: var(--mtv-string-red);
}
body.mtv-string .mt-plan-featured .mt-plan-cta {
  background: var(--mt-ink);
  color: #faf6ef;
}
body.mtv-string .mt-plan-featured .mt-plan-cta:hover {
  background: #3a382f;
  color: #faf6ef;
}

/* ── shared FAQ partial: quiet on the paper, not a white slab ── */

body.mtv-string #faq {
  background: var(--mt-canvas);
  border-top: 0;
}

/* ── ink closing band ── */

body.mtv-string .mt-cta {
  background: var(--mt-ink);
}
body.mtv-string .mt-cta-mark {
  display: block;
  margin: 0 auto 22px;
}

/* ── responsive ── */

@media (max-width: 900px) {
  body.mtv-string .mtv-string-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  body.mtv-string .mtv-string-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  body.mtv-string .mtv-string-tags {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    max-width: 340px;
  }
  body.mtv-string .mtv-string-h2 {
    font-size: 32px;
  }
}

@media (max-width: 620px) {
  body.mtv-string .mtv-string-band,
  body.mtv-string #pricing {
    width: calc(100% - 20px);
    border-radius: 20px;
  }
  body.mtv-string .mtv-string-band {
    padding: 44px 22px;
  }
  body.mtv-string .mtv-string-h2 {
    font-size: 28px;
  }
  body.mtv-string .mtv-string-privacy-title {
    font-size: 26px;
  }
  body.mtv-string .mtv-string-step {
    padding: 24px 20px;
  }
  body.mtv-string .mtv-string-tag-card {
    max-width: 280px;
  }
}

/* ── variant: spec sheet ─────────────────────────────────────────────────── */

/*
  Spec-Sheet Swiss. Pure white canvas, near-black ink, gray hairlines, and one cobalt accent
  reserved for the founding counter/CTA and the RULES node in the system diagram. Archivo
  carries the display type, IBM Plex Mono the uppercase labels. The shared nav, pricing, FAQ
  and footer chrome are reskinned entirely through the token overrides below — the "brand
  green" slot becomes ink so every shared control goes monochrome, and its hover slot becomes
  the cobalt accent. Corners are squared by zeroing the radius tokens (pill → 2px).
*/

body.mtv-spec {
  --mt-canvas: #ffffff;
  --mt-surface: #ffffff;
  --mt-band: #fafafa;
  --mt-ink: #0a0a0a;
  --mt-body: #374151;
  --mt-muted: #6b7280;
  --mt-border: #e5e7eb;
  --mt-border-inner: #e5e7eb;
  --mt-border-dashed: #d1d5db;

  /* Brand-colour slot goes ink; its hover slot is the single cobalt accent, so mt-btn-green,
     the nav CTA and the founding CTA all hover cobalt without per-control rules. */
  --mt-green: #0a0a0a;
  --mt-green-hover: #1d3fdd;
  --mt-green-tint: #eef0f3;
  --mt-green-chip-border: #1d3fdd;

  --mt-dark-chip: #0a0a0a;
  --mt-dark-text: #ffffff;

  /* Cream tokens paint the ink closing CTA: white headline/button, gray support copy. */
  --mt-cream: #ffffff;
  --mt-cream-accent: #9ca3af;
  --mt-cream-muted: #9ca3af;

  --mt-serif: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mt-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mtv-spec-mono:
    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --mtv-spec-cobalt: #1d3fdd;

  --mt-radius-card: 0px;
  --mt-radius-row: 0px;
  --mt-radius-pill: 2px;
}

/* ── type ── */

body.mtv-spec .mt-h1,
body.mtv-spec .mt-h2,
body.mtv-spec .mt-h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.mtv-spec .mt-h1 {
  font-size: clamp(44px, 8.5vw, 122px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
body.mtv-spec .mt-h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
}
/* Archivo ships no italics here; the accent phrase reads as the Swiss two-tone headline. */
body.mtv-spec .mt-h1 em,
body.mtv-spec .mt-h2 em,
body.mtv-spec .mt-h3 em {
  font-style: normal;
  color: var(--mt-muted);
}
body.mtv-spec .mt-eyebrow {
  font-family: var(--mtv-spec-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mt-muted);
}
body.mtv-spec .mt-btn {
  font-weight: 500;
}

/* ── chrome: nav, wordmark, footer-as-colophon ── */

body.mtv-spec .mt-nav {
  background: rgba(255, 255, 255, 0.92);
}
body.mtv-spec .mt-wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.mtv-spec .mt-wordmark svg [stroke] {
  stroke: var(--mt-ink);
}
body.mtv-spec .mt-wordmark svg [fill]:not([fill='none']) {
  fill: var(--mt-ink);
}
body.mtv-spec .mt-nav-links a:not(.mt-nav-pill):not(.mt-nav-cta) {
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mt-muted);
}
/* Index numbers on the four anchor links, matching the section numbering below. */
body.mtv-spec .mt-nav-sections a:nth-child(1)::before {
  content: '01\00a0 ';
}
body.mtv-spec .mt-nav-sections a:nth-child(2)::before {
  content: '02\00a0 ';
}
body.mtv-spec .mt-nav-sections a:nth-child(3)::before {
  content: '04\00a0 ';
}
body.mtv-spec .mt-nav-sections a:nth-child(4)::before {
  content: '06\00a0 ';
}

body.mtv-spec .mtv-footer {
  background: var(--mt-band);
  color: var(--mt-ink);
  border-top: 1px solid var(--mt-border);
}
body.mtv-spec .mt-footer-inner {
  padding-top: 34px;
  padding-bottom: 42px;
  align-items: flex-start;
}
body.mtv-spec .mt-footer-inner small {
  color: var(--mt-muted);
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 2;
}
body.mtv-spec .mt-footer-inner small::before {
  content: '09 \2014\00a0 Colophon';
  display: block;
  text-transform: uppercase;
}
body.mtv-spec .mt-footer-inner nav a {
  color: var(--mt-muted);
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
body.mtv-spec .mt-footer-inner nav a:hover {
  color: var(--mt-ink);
}
body.mtv-spec .mt-footer-inner nav a.mt-footer-cta {
  color: var(--mt-ink);
  font-weight: 500;
}
body.mtv-spec .mtv-footer :focus-visible {
  outline-color: var(--mt-ink);
}

/* ── hero ── */

.mtv-spec-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 56px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
}
.mtv-spec-hero .mt-h1 {
  margin: 0 0 34px;
}
.mtv-spec-lede {
  font-size: 19px;
  line-height: 1.5;
  max-width: 58ch;
  margin: 0 0 30px;
}
.mtv-spec-hero-actions {
  margin-bottom: 24px;
}
body.mtv-spec .mt-btn-ghost {
  border-color: var(--mt-ink);
}
body.mtv-spec .mt-btn-ghost:hover {
  color: var(--mtv-spec-cobalt);
  border-color: var(--mtv-spec-cobalt);
}
.mtv-spec-hero-note {
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.mtv-spec-meta {
  margin: 0;
  border-left: 1px solid var(--mt-border);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  font-family: var(--mtv-spec-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mtv-spec-meta dt {
  color: var(--mt-muted);
  margin: 0 0 3px;
}
.mtv-spec-meta dd {
  margin: 0;
  color: var(--mt-ink);
  font-variant-numeric: tabular-nums;
}

/* ── numbered sections ── */

.mtv-spec-section {
  padding: 52px 0 72px;
}
.mtv-spec-index {
  margin: 0 0 30px;
}

/* 01 — problem */
.mtv-spec-problem {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.mtv-spec-problem .mt-h2 {
  max-width: 16em;
}
.mtv-spec-problem-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mtv-spec-problem-copy p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mt-body);
}

/* 02 — system */
.mtv-spec-panel {
  background: var(--mt-band);
  border: 1px solid var(--mt-border);
  padding: 40px 28px;
}
.mtv-spec-diagram-scroll {
  overflow-x: auto;
}
.mtv-spec-diagram {
  display: block;
  width: 100%;
  min-width: 960px;
  height: auto;
  margin: 0 auto;
}
.mtv-spec-diagram text {
  font-family: var(--mtv-spec-mono);
  letter-spacing: 0.06em;
}
.mtv-spec-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--mt-border);
  margin-top: 24px;
}
.mtv-spec-steps > div {
  padding: 26px 28px;
}
.mtv-spec-steps > div + div {
  border-left: 1px solid var(--mt-border);
}
.mtv-spec-step-label {
  margin: 0 0 10px;
}
.mtv-spec-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-body);
}

/* 04 — access rules */
.mtv-spec-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 48px;
  align-items: start;
}
.mtv-spec-rules-heading .mt-h2 {
  margin: 0 0 18px;
}
.mtv-spec-rules-heading p {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mt-body);
  max-width: 36ch;
}
.mtv-spec-table-scroll {
  overflow-x: auto;
}
.mtv-spec-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}
.mtv-spec-table th,
.mtv-spec-table td {
  border: 1px solid var(--mt-border);
  padding: 13px 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
}
.mtv-spec-table thead th {
  background: var(--mt-band);
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mt-muted);
}
.mtv-spec-table tbody th {
  font-weight: 500;
  white-space: nowrap;
}
.mtv-spec-table tbody th .mt-dot {
  margin-right: 9px;
}
.mtv-spec-allow {
  color: var(--mtv-spec-cobalt);
  font-weight: 500;
}
.mtv-spec-deny {
  color: var(--mt-muted);
}
body.mtv-terminal .mtv-terminal-table caption {
  caption-side: top;
  text-align: left;
  font-size: 12.5px;
  color: var(--mt-muted);
  padding: 0 0 10px;
}
.mtv-spec-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 12px;
  font-size: 13px;
  color: var(--mt-muted);
}
.mtv-spec-sr {
  position: absolute;
  /* Pinned to the containing block's origin: left at its static position inside the rules
     table's nowrap rows, the 1px box lands past the viewport and (with the root's
     overflow-x: clip) still widens document.scrollWidth — the 320px layout gate fails. */
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 05 — commitments */
.mtv-spec-commitments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mtv-spec-commitments li {
  display: flex;
  gap: 24px;
  align-items: baseline;
  border-top: 1px solid var(--mt-border);
  padding: 26px 0;
}
.mtv-spec-commitments li:last-child {
  border-bottom: 1px solid var(--mt-border);
}
.mtv-spec-commitments li > span {
  flex: none;
  width: 72px;
  font-family: var(--mtv-spec-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mt-muted);
  font-variant-numeric: tabular-nums;
}
.mtv-spec-commitments p {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--mt-ink);
  text-wrap: balance;
}

/* ── shared partials, reskinned (06 pricing · 07 faq) ── */

body.mtv-spec #pricing,
body.mtv-spec #faq {
  padding-top: 52px;
  padding-bottom: 72px;
}
body.mtv-spec #pricing .mt-centered,
body.mtv-spec #faq .mt-centered {
  text-align: left;
}
body.mtv-spec #pricing .mt-eyebrow::before {
  content: '06 \2014\00a0 ';
}
body.mtv-spec #faq .mt-eyebrow::before {
  content: '07 \2014\00a0 ';
}
body.mtv-spec #pricing .mt-h2 {
  margin: 6px 0 10px;
}
body.mtv-spec .mt-plans {
  margin: 34px 0 0;
}
body.mtv-spec .mt-plan-featured {
  border: 1px solid var(--mt-ink);
  box-shadow: none;
}
body.mtv-spec .mt-plan-badge {
  background: var(--mtv-spec-cobalt);
  font-family: var(--mtv-spec-mono);
  font-weight: 500;
}
body.mtv-spec .mt-plan-price {
  font-weight: 700;
}
body.mtv-spec .mt-plan-featured .mt-plan-name em {
  color: var(--mtv-spec-cobalt);
}
body.mtv-spec .mt-founding {
  font-family: var(--mtv-spec-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mtv-spec-cobalt);
  font-variant-numeric: tabular-nums;
}
body.mtv-spec .mt-founding-track {
  background: #e3e8fb;
}
body.mtv-spec .mt-founding-fill {
  background: var(--mtv-spec-cobalt);
}
body.mtv-spec .mt-plan-foot {
  text-align: left;
  color: var(--mt-muted);
}

body.mtv-spec .mt-faq {
  max-width: none;
}
body.mtv-spec .mt-faq .mt-h2 {
  margin: 6px 0 36px;
}
body.mtv-spec .mt-faq summary {
  font-weight: 500;
}
body.mtv-spec .mt-faq p {
  max-width: 70ch;
}

/* ── 08 closing CTA (ink poster) ── */

body.mtv-spec .mt-cta .mt-h2 {
  font-size: clamp(34px, 5vw, 64px);
  color: #ffffff;
}
body.mtv-spec .mtv-closing .mt-eyebrow {
  color: var(--mt-cream-muted);
}
body.mtv-spec .mt-btn-cream:hover {
  color: var(--mtv-spec-cobalt);
}

/* ── responsive ── */

@media (max-width: 900px) {
  .mtv-spec-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 60px;
    padding-bottom: 52px;
  }
  .mtv-spec-meta {
    border-left: 0;
    border-top: 1px solid var(--mt-border);
    padding-left: 0;
    padding-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
  .mtv-spec-problem,
  .mtv-spec-rules {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .mtv-spec-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .mtv-spec-steps > div + div {
    border-left: 0;
    border-top: 1px solid var(--mt-border);
  }
  .mtv-spec-section {
    padding: 44px 0 56px;
  }
  body.mtv-spec #pricing,
  body.mtv-spec #faq {
    padding-top: 44px;
    padding-bottom: 56px;
  }
}

@media (max-width: 620px) {
  .mtv-spec-hero .mt-h1 {
    margin-bottom: 26px;
  }
  .mtv-spec-panel {
    padding: 24px 16px;
  }
  .mtv-spec-index {
    margin-bottom: 22px;
  }
  .mtv-spec-steps > div {
    padding: 20px 18px;
  }
  .mtv-spec-table th,
  .mtv-spec-table td {
    padding: 11px 12px;
    font-size: 14px;
  }
  .mtv-spec-commitments li {
    gap: 14px;
    padding: 20px 0;
  }
  .mtv-spec-commitments li > span {
    width: 44px;
    font-size: 11px;
  }
}
/* Applications-to-AI candidate extends the consistent-memory visual system. */
.mta-hero.mtc-hero .mt-h1 {
  font-size: clamp(42px, 4.25vw, 58px);
}
.mta-hero.mtc-hero {
  padding-top: 32px;
  padding-bottom: 40px;
}
.mta-hero .mtc-example {
  padding: 20px;
}
.mta-hero .mtc-branches {
  height: 32px;
}
.mta-hero .mtc-trunk {
  bottom: 16px;
}
.mta-hero .mtc-branch {
  top: 16px;
}
.mta-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mtc-gap);
}
.mta-inputs > div {
  padding: 12px 16px;
  background: #fffefa;
  border: 1px solid #cbd4c6;
  border-radius: 8px;
}
.mta-inputs strong {
  display: block;
  font-size: 13px;
}
.mta-inputs span {
  display: block;
  margin-top: 5px;
  color: #536057;
  font-size: 11px;
  line-height: 1.5;
}
.mta-inbound {
  transform: rotate(180deg);
}
.mta-hero .mtc-project {
  margin-top: 18px;
}
.mta-hero .mtc-provenance {
  margin-top: 14px;
}
.mta-applications .mtv-section-lede {
  max-width: 62ch;
}
.mta-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 36px;
}
.mta-app-grid article {
  border-top: 1px solid var(--mt-border);
  padding-top: 22px;
}
.mta-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mta-app-heading .mt-h3 {
  margin: 0;
  font-size: 27px;
}
.mta-status {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 8px;
  background: #e8eee1;
  color: #285740;
  border-radius: 4px;
}
.mta-status-planned {
  background: #efede4;
  color: #625a40;
}
.mta-app-grid p {
  color: var(--mt-body);
  font-size: 15px;
  line-height: 1.7;
}
.mta-app-grid blockquote {
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 2px solid #87a082;
  color: #36553d;
  font: 21px/1.4 var(--mt-serif);
}
.mta-availability {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mt-body);
}
@media (max-width: 600px) {
  .mta-app-grid {
    grid-template-columns: 1fr;
  }
  .mta-inputs > div {
    padding: 10px;
  }
}
/* Consistent memory: scoped palette, readable example and shared connector geometry. */
:is(.mtv-consistent-memory, .mtv-connected-memory) {
  --mt-canvas: #faf9f5;
  --mt-body: #536057;
  --mt-band: #f0f2eb;
  --mt-green: #285740;
  --mt-border: #dce1d7;
}
.mtc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-top: 48px;
  padding-bottom: 56px;
}
.mtc-intro {
  min-width: 0;
}
.mtc-hero .mt-h1 {
  font-size: clamp(46px, 4.7vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.mtc-hero .mt-eyebrow {
  letter-spacing: 0.09em;
  font-size: 11px;
}
.mtc-hero .mt-lede {
  max-width: 41ch;
  font-size: 17px;
  line-height: 1.7;
  margin-top: 24px;
}
.mtc-hero .mt-hero-actions {
  gap: 24px;
  margin: 28px 0 14px;
}
.mtc-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
}
.mtc-demo-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.mtc-free-note {
  margin: 0;
  color: var(--mt-body);
  font-size: 12px;
  line-height: 1.6;
}
.mtc-ai-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.mtc-ai-list > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}
.mtc-ai-list .mtc-ai-list-label {
  color: var(--mt-body);
  font-weight: 400;
}
.mtc-example {
  --mtc-gap: 16px;
  margin: 0;
  padding: 24px;
  border: 1px solid #dce1d7;
  border-radius: 18px;
  background: #f0f2eb;
  scroll-margin-top: 90px;
}
.mtc-example-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.mtc-example-label {
  color: var(--mt-body);
  font-size: 11px;
  font-weight: 400;
}
.mtc-memory-sheet {
  padding: 22px;
  border: 1px solid #234d38;
  border-radius: 10px;
  background: #234d38;
  color: #fffdf5;
}
.mtc-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}
.mtc-version {
  padding: 4px 8px;
  border-radius: 4px;
  color: #f2f6ed;
  background: #3c644b;
  font-size: 11px;
}
.mtc-project {
  margin: 26px 0 10px;
  color: #ceddce;
  font-size: 12px;
}
.mtc-decision {
  margin: 0;
  font: 32px/1.12 var(--mt-serif);
  letter-spacing: -0.02em;
}
.mtc-provenance {
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid #5b7964;
  font-size: 11px;
  line-height: 1.5;
  color: #ceddce;
  min-height: 1.5em;
}
/* Endpoints share the two-column cards' gap: centre = 25% - gap/4.
   Each branch meets the trunk at 50%, with no flex shrink or percentage margins. */
.mtc-branches {
  position: relative;
  height: 40px;
}
.mtc-trunk {
  position: absolute;
  top: 0;
  bottom: 20px;
  left: 50%;
  border-left: 1px solid #64816b;
}
.mtc-branch {
  position: absolute;
  top: 20px;
  bottom: 0;
  border-top: 1px solid #64816b;
}
.mtc-branch-left {
  left: calc(25% - var(--mtc-gap) / 4);
  right: 50%;
  border-left: 1px solid #64816b;
  border-top-left-radius: 6px;
}
.mtc-branch-right {
  left: 50%;
  right: calc(25% - var(--mtc-gap) / 4);
  border-right: 1px solid #64816b;
  border-top-right-radius: 6px;
}
.mtc-retrievals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mtc-gap);
}
.mtc-ai-answer {
  padding: 16px;
  border: 1px solid #cbd4c6;
  border-radius: 9px;
  background: #fffefa;
}
.mtc-answer-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}
.mtc-answer-task {
  margin: 16px 0 6px;
  color: var(--mt-body);
  font-size: 11px;
  line-height: 1.5;
}
.mtc-ai-answer p:last-child {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.mtc-example-result {
  margin: 18px 0 14px;
  min-height: 1.5em;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--mt-green);
}
.mtc-change-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #a6b6a2;
  border-radius: 7px;
  background: transparent;
  color: #285740;
  font: 500 13px var(--mt-sans);
  cursor: pointer;
}
.mtc-change-button[hidden] {
  display: none;
}
.mtc-change-button:hover {
  background: #e5eadf;
}
.mtc-toggle-track {
  position: relative;
  flex: 0 0 28px;
  height: 16px;
  border-radius: 12px;
  background: #73806f;
}
.mtc-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #fff;
}
.mtc-change-button[aria-pressed='true'] .mtc-toggle-track {
  background: #285740;
}
.mtc-change-button[aria-pressed='true'] .mtc-toggle-track::after {
  left: 15px;
}
.mtc-example figcaption {
  margin-top: 14px;
  color: var(--mt-body);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.mtc-value {
  padding: 56px 0;
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  background: #f0f2eb;
}
.mtc-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mtc-value .mt-h2 {
  font-size: 40px;
}
.mtc-value-copy {
  color: var(--mt-body);
  font-size: 15px;
  line-height: 1.75;
}
.mtc-value-copy p {
  margin: 0 0 14px;
}
.mtc-value-copy .mtc-value-line {
  margin: 20px 0 0;
  color: var(--mt-green);
  font-weight: 500;
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-section {
  padding-top: 72px;
  padding-bottom: 72px;
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-h2 {
  letter-spacing: -0.025em;
}
.mtc-how.mt-rule-top {
  border-top: 0;
}
.mtc-how .mtv-numbered-list p {
  font-size: 14px;
  line-height: 1.75;
}
.mtc-source-note {
  margin: 36px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--mt-border);
  color: var(--mt-body);
  font-size: 13px;
  line-height: 1.75;
}
.mtc-source-note strong {
  color: var(--mt-ink);
}
.mtc-use-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.mtc-use-cases article {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--mt-border);
  padding-top: 22px;
}
.mtc-use-number {
  color: var(--mt-green);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.mtc-use-cases .mt-h3 {
  margin: 20px 0 12px;
  font-size: 24px;
}
.mtc-use-cases p {
  margin: 0 0 24px;
  color: var(--mt-body);
  font-size: 14px;
  line-height: 1.75;
}
.mtc-use-cases blockquote {
  margin: auto 0 0;
  border-left: 2px solid #87a082;
  padding-left: 16px;
  color: #36553d;
  font: 21px/1.4 var(--mt-serif);
}
.mtc-rules {
  background: #234d38;
  color: #fffdf5;
}
.mtc-rules .mt-eyebrow,
.mtc-rules .mt-h2 em {
  color: #d0dfbc;
}
.mtc-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 38px;
}
.mtc-controls article {
  padding-top: 20px;
  border-top: 1px solid #6c876e;
}
.mtc-controls .mt-h3 {
  margin: 0 0 12px;
  font-size: 23px;
}
.mtc-controls p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #d4dfd2;
}
.mtc-faq-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 64px;
}
.mtc-faq-list details {
  border-top: 1px solid var(--mt-border);
  padding: 0;
}
.mtc-faq-list details:last-child {
  border-bottom: 1px solid var(--mt-border);
}
.mtc-faq-list summary {
  padding: 20px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}
.mtc-faq-list p {
  color: var(--mt-body);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 22px;
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta {
  background: var(--mt-canvas);
  color: var(--mt-ink);
  border-top: 1px solid var(--mt-border);
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta .mt-eyebrow,
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta p {
  color: var(--mt-body);
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta .mt-h2 em {
  color: var(--mt-green);
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta .mt-h2 {
  color: var(--mt-ink);
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta .mt-btn-cream {
  background: var(--mt-green);
  color: #fff;
}
:is(.mtv-consistent-memory, .mtv-connected-memory) .mt-cta .mt-btn-cream:hover {
  background: var(--mt-green-hover);
}
@media (max-width: 1000px) {
  .mtc-hero,
  .mtc-value-grid {
    gap: 32px;
  }
  .mtc-hero .mt-h1 {
    font-size: 48px;
  }
  .mtc-example {
    padding: 20px;
  }
  .mtc-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .mtc-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 48px;
  }
  .mtc-hero .mt-h1 {
    font-size: clamp(43px, 7.5vw, 60px);
    max-width: 12ch;
  }
  .mtc-hero .mt-lede {
    max-width: 46ch;
  }
  .mtc-example {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
  }
  .mtc-value-grid,
  .mtc-faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mtc-value {
    padding: 44px 0;
  }
  :is(.mtv-consistent-memory, .mtv-connected-memory) .mt-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}
@media (max-width: 600px) {
  .mtc-hero .mt-lede {
    font-size: 16px;
  }
  .mtc-ai-list {
    gap: 12px;
    margin-top: 24px;
  }
  .mtc-ai-list .mtc-ai-list-label {
    flex-basis: 100%;
  }
  .mtc-example {
    padding: 18px;
    --mtc-gap: 12px;
  }
  .mtc-example-top {
    align-items: flex-start;
    font-size: 12px;
  }
  .mtc-memory-sheet {
    padding: 18px;
  }
  .mtc-decision {
    font-size: 30px;
  }
  .mtc-ai-answer {
    padding: 12px;
  }
  .mtc-answer-task {
    min-height: 3em;
  }
  .mtc-example-result {
    min-height: 3em;
  }
  .mtc-use-cases {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 28px;
  }
  .mtc-use-cases p {
    margin-bottom: 18px;
  }
  .mtc-value .mt-h2 {
    font-size: 36px;
  }
  .mtc-controls {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 380px) {
  .mtc-example {
    padding: 14px;
  }
  .mtc-memory-sheet {
    padding: 14px;
  }
  .mtc-sheet-heading {
    align-items: flex-start;
    font-size: 11px;
  }
  .mtc-decision {
    font-size: 28px;
  }
  .mtc-provenance {
    min-height: 3em;
  }
  .mtc-ai-answer {
    padding: 10px;
  }
  .mtc-answer-task {
    font-size: 11px;
  }
  .mtc-hero .mt-hero-actions {
    gap: 16px;
  }
}