/*
  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-live {
  border: 1.5px solid var(--mt-green);
  color: var(--mt-ink);
  font-weight: 500;
}
.mt-badge-today {
  background: var(--mt-green);
  color: #fff;
  border-radius: var(--mt-radius-pill);
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.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-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-beta {
  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-beta 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);
}
.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-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;
}

/* ── 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);
}

/* ── the /start page ─────────────────────────────────────────────────────── */

.mt-start {
  padding-top: 72px;
  padding-bottom: 96px;
  max-width: 820px;
}
.mt-start .mt-h1 {
  font-size: 46px;
  margin-bottom: 18px;
}
.mt-start-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  padding: 30px 34px;
  margin-bottom: 20px;
}
.mt-start-card .mt-h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.mt-start-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mt-body);
  margin: 0 0 12px;
}
.mt-start-card p:last-child {
  margin-bottom: 0;
}
.mt-start-card ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mt-body);
}
.mt-start-card code {
  background: var(--mt-canvas);
  border: 1px solid var(--mt-border-inner);
  border-radius: 6px;
  padding: 0.12em 0.4em;
  font-size: 13.5px;
  color: var(--mt-ink);
  word-break: break-word;
}
.mt-start-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.mt-caption-left {
  text-align: left;
}
.mt-footer-compact {
  padding-top: 26px;
  padding-bottom: 26px;
}

/* ── 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;
  }
}

@media (max-width: 900px) {
  .mt-hero,
  .mt-demo,
  .mt-rules,
  .mt-grid-2,
  .mt-grid-3 {
    grid-template-columns: 1fr;
  }
  .mt-rules {
    gap: 40px;
  }
  .mt-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 130px 130px auto;
  }
  .mt-tile-clients {
    grid-row: auto;
  }
  .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;
  }
}

@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-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;
  }
}

/* ── 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;
  }
}