@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

  /* Italic-serif readability baseline. Every italic Cormorant Garamond instance gets
     tighter kerning + slightly higher weight so the cursive forms don't disappear at
     small sizes. */
  .m em, .m i,
  .m .doc-preview .pull .quote,
  .m .doc-preview .ttl,
  .m .scenario-preview .question,
  .m .debate-preview .say,
  .m .docs-tagline,
  .m .docs-output .dt,
  .m .ank-note,
  .m .moat-num,
  .m .tr-val,
  .m .as-num,
  .m .fs-num,
  .m .sc-num,
  .m .vuln-card-email {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* When italic Cormorant is used at smaller sizes (under ~1.25rem), nudge it up half
     a weight and add a hair of tracking so each glyph is distinguishable. */
  .m .doc-preview .pull .quote,
  .m .debate-preview .say,
  .m .scenario-preview .question {
    font-weight: 500;
    letter-spacing: .003em;
  }

  /* ============================================================
     META
     ============================================================ */
  .site-intro { max-width: 920px; margin: 0 auto 1.6rem; }
  .site-intro h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 2rem; letter-spacing: -.015em; margin-bottom: .5rem; }
  .site-intro .subtitle { font-size: .95rem; line-height: 1.55; }
  .site-jump {
    display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem;
    font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em;
  }
  .site-jump a {
    text-decoration: none; padding: .45rem .85rem; border-radius: 99px;
    background: var(--bg-tertiary); color: var(--text-secondary);
    transition: all .2s ease;
  }
  .site-jump a:hover { background: var(--accent); color: white; }

  /* ============================================================
     MOCKUP FRAME (shared)
     ============================================================ */
  .frame {
    max-width: 1240px; margin: 0 auto 3rem;
    border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; background: #faf7f1;
    box-shadow: 0 20px 60px rgba(0,0,0,.16);
  }
  .frame-chrome {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem; background: #e9e6df;
    border-bottom: 1px solid rgba(20,22,28,.08);
  }
  .frame-chrome .dot { width: .65rem; height: .65rem; border-radius: 50%; background: #ccc9c2; }
  .frame-chrome .dot:nth-child(1) { background: #ff5f57; }
  .frame-chrome .dot:nth-child(2) { background: #febc2e; }
  .frame-chrome .dot:nth-child(3) { background: #28c840; }
  .frame-chrome .url {
    margin-left: 1.2rem; padding: .3rem 1rem; background: #faf7f1;
    border-radius: 99px; font-family: 'JetBrains Mono', monospace;
    font-size: .72rem; color: rgba(20,22,28,.62); font-weight: 500;
  }

  /* ============================================================
     SITE STYLES — everything under .m
     ============================================================ */
  .m {
    background: #faf7f1; color: #14161c;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
  }
  .m * { box-sizing: border-box; margin: 0; padding: 0; }
  .m .container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }

  /* ----- NAV ----- */
  .m .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(20,22,28,.06);
    background: rgba(250,247,241,.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 10;
    min-height: 92px;
  }
  .m .logo { display: block; color: inherit; text-decoration: none; }
  .m .logo:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 6px;
    border-radius: 8px;
  }
  .m .logo img { display: block; height: 64px; width: auto; transition: transform .3s ease; }
  .m .logo:hover img { transform: scale(1.04); }
  .m .nav-links { display: flex; gap: 2rem; font-size: .9rem; font-weight: 500; color: rgba(20,22,28,.72); }
  .m .nav-links a { color: inherit; text-decoration: none; transition: color .15s ease; }
  .m .nav-links a:hover { color: #2563EB; }
  .m .nav-links a.active { color: #14161c; font-weight: 600; }
  .m .nav-actions { display: flex; gap: .55rem; align-items: center; }
  .m .nav-signin { font-size: .9rem; font-weight: 500; color: rgba(20,22,28,.8); padding: .5rem .9rem; }
  .m .nav-cta {
    font-size: .88rem; font-weight: 600; color: #faf7f1;
    background: #14161c; padding: .6rem 1.15rem; border-radius: 8px;
    transition: all .15s ease;
  }
  .m .nav-cta:hover { background: #2563EB; }

  /* ----- HERO (shared structure) ----- */
  .m .hero { padding: 6.5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; }
  .m .hero-eyebrow {
    display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #2563EB; margin-bottom: 1.6rem;
    padding: .35rem .85rem; background: rgba(37,99,235,.08);
    border-radius: 99px; border: 1px solid rgba(37,99,235,.18);
  }
  .m .hero h1 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 5.4rem; line-height: 1.02; letter-spacing: -.042em;
    color: #14161c; margin: 0 auto 1.8rem; max-width: 17ch;
  }
  .m .hero h1 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: #2563EB; letter-spacing: -.005em; }
  .m .hero h1 strong { font-weight: 600; }
  .m .hero .lede {
    font-size: 1.25rem; line-height: 1.55; font-weight: 400;
    color: rgba(20,22,28,.7); max-width: 60ch; margin: 0 auto 2.6rem;
  }
  .m .cta-row { display: flex; gap: .8rem; justify-content: center; align-items: center; }
  .m .cta-p {
    font-size: .98rem; font-weight: 600; color: #faf7f1;
    background: #14161c; padding: .95rem 1.85rem; border-radius: 9px;
    transition: all .15s ease;
  }
  .m .cta-p:hover { background: #2563EB; transform: translateY(-1px); }
  .m .cta-p.blue { background: #2563EB; }
  .m .cta-p.blue:hover { background: #1d4ed8; }
  .m .cta-s {
    font-size: .98rem; font-weight: 500; color: #14161c;
    padding: .95rem 1.5rem; border-radius: 9px;
    border: 1px solid rgba(20,22,28,.2); background: transparent;
    transition: all .15s ease;
  }
  .m .cta-s:hover { border-color: #14161c; }

  /* ----- HERO VISUAL — FANNED DOCS ----- */
  .docs-fan {
    position: relative; height: 320px; max-width: 720px;
    margin: 4rem auto 0; display: flex; align-items: center; justify-content: center;
  }
  .docs-fan .doc {
    position: absolute; width: 200px; height: 260px;
    background: #fff;
    border: 1px solid rgba(20,22,28,.12);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(20,22,28,.08), 0 2px 4px rgba(20,22,28,.05);
    padding: 1.1rem 1rem;
    display: flex; flex-direction: column; gap: .4rem;
    transition: all .3s ease;
  }
  .docs-fan .doc:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(20,22,28,.14); z-index: 20; }
  .docs-fan .doc.d1 { transform: rotate(-9deg) translate(-180px, 0); }
  .docs-fan .doc.d2 { transform: rotate(-4deg) translate(-92px, -14px); }
  .docs-fan .doc.d3 { transform: rotate(0deg); z-index: 5; }
  .docs-fan .doc.d4 { transform: rotate(4deg) translate(92px, -14px); }
  .docs-fan .doc.d5 { transform: rotate(9deg) translate(180px, 0); }
  .docs-fan .doc .badge {
    font-family: 'JetBrains Mono', monospace; font-size: .58rem;
    color: #2563EB; letter-spacing: .12em; font-weight: 600;
  }
  .docs-fan .doc .ttl {
    font-family: 'Inter', sans-serif; font-style: normal;
    font-weight: 600; font-size: 1rem; line-height: 1.2;
    letter-spacing: -.008em; color: #14161c; margin-top: .2rem;
  }
  .docs-fan .doc .body-lines {
    margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem;
  }
  .docs-fan .doc .line {
    height: .35rem; background: rgba(20,22,28,.09); border-radius: 1px;
  }
  .docs-fan .doc .line.short { width: 60%; }
  .docs-fan .doc .line.med { width: 85%; }
  .docs-fan .doc .footer-meta {
    margin-top: auto; font-family: 'JetBrains Mono', monospace;
    font-size: .52rem; color: rgba(20,22,28,.4); letter-spacing: .08em;
  }

  /* ----- SECTIONS ----- */
  .m .section { padding: 6rem 2rem; }
  .m .section.tight { padding: 4rem 2rem; }
  .m .section.dark { background: #14161c; color: #faf7f1; }
  .m .section-num {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    color: #2563EB; letter-spacing: .18em; margin-bottom: .9rem;
  }
  .m .section.dark .section-num { color: #6FA1FF; }
  /* The platform's globals.css applies `.section-title { display: flex; border-bottom: 1px solid var(--border); padding-bottom: 12px; gap: 16px; align-items: center; justify-content: space-between }` to the in-app section headers. Marketing reuses the same class name, so we have to explicitly reset every one of those properties or the marketing h2 inherits the app-shell look (flex layout, weird gaps, border-bottom). */
  .m .section-title {
    display: block;
    align-items: initial; justify-content: initial; gap: 0;
    padding-bottom: 0; border-bottom: none;
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3.4rem; line-height: 1.08; letter-spacing: -.028em;
    color: #14161c; margin-bottom: 1.1rem; max-width: 22ch;
  }
  .m .section.dark .section-title { color: #faf7f1; }
  .m .section-title strong { font-weight: 600; }
  .m .section-title em {
    display: inline; /* defensive — beat any inherited block/flex */
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic; font-weight: 400; color: #2563EB;
    letter-spacing: -.005em;
  }
  .m .section.dark .section-title em { color: #6FA1FF; }
  .m .section-sub {
    font-size: 1.1rem; line-height: 1.55; color: rgba(20,22,28,.7);
    max-width: 64ch; margin-bottom: 3.5rem;
  }
  .m .section.dark .section-sub { color: rgba(250,247,241,.78); }

  /* ----- FLOW TIMELINE ----- */
  .flow {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem; position: relative;
  }
  .flow::before {
    content: ''; position: absolute; left: 4%; right: 4%; top: 1.6rem; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.5) 10%, rgba(37,99,235,.5) 90%, transparent);
  }
  .flow-step { position: relative; padding-top: .5rem; }
  .flow-step .dot {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: #faf7f1; border: 2px solid #2563EB;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600;
    color: #2563EB; position: relative; z-index: 1;
    margin-bottom: 1.2rem;
  }
  .flow-step h3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: .5rem; }
  .flow-step p { font-size: .92rem; line-height: 1.55; color: rgba(20,22,28,.65); }
  .flow-step .time { display: block; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #2563EB; letter-spacing: .12em; margin-bottom: .35rem; }

  /* ----- BIG STATEMENT ----- */
  .big-statement {
    padding: 7rem 2rem; text-align: center; background: #f4f1ea;
    border-top: 1px solid rgba(20,22,28,.06); border-bottom: 1px solid rgba(20,22,28,.06);
  }
  .big-statement h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400; font-size: 4.4rem; line-height: 1.08;
    letter-spacing: -.018em; color: #14161c; max-width: 22ch;
    margin: 0 auto 1.6rem;
  }
  .big-statement h2 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: #2563EB; font-weight: 500; letter-spacing: -.005em; }
  .big-statement p {
    font-size: 1.18rem; color: rgba(20,22,28,.68); max-width: 56ch;
    margin: 0 auto;
  }

  /* ----- FILES-FEATURE BIG MOMENT ----- */
  .files-moment {
    background: #14161c; color: #faf7f1;
    padding: 7rem 2rem; position: relative; overflow: hidden;
  }
  .files-moment::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 900px 500px at 75% 30%, rgba(37,99,235,.16), transparent 70%);
    pointer-events: none;
  }
  .files-moment .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4.5rem; align-items: center; }
  .files-moment .copy-side .section-num { color: #6FA1FF; }
  .files-moment .copy-side h2 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3.6rem; line-height: 1.06; letter-spacing: -.03em;
    color: #faf7f1; margin-bottom: 1.5rem;
  }
  .files-moment .copy-side h2 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: #6FA1FF; font-weight: 400; letter-spacing: -.005em; }
  .files-moment .copy-side h2 strong { font-weight: 600; }
  .files-moment .copy-side .lede {
    font-size: 1.1rem; line-height: 1.6; color: rgba(250,247,241,.75);
    margin-bottom: 2rem; max-width: 50ch;
  }
  .files-moment .copy-side .formats {
    display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 2rem;
  }
  .files-moment .copy-side .format {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px; color: rgba(250,247,241,.85);
    letter-spacing: .06em; font-weight: 500;
  }
  .files-moment .copy-side .format.hi {
    background: rgba(37,99,235,.15); border-color: rgba(37,99,235,.4); color: #6FA1FF;
  }
  .files-moment .copy-side .examples {
    font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400;
    font-size: 1rem; line-height: 1.65; color: rgba(250,247,241,.85);
    border-left: 2px solid rgba(111,161,255,.4); padding-left: 1.1rem;
    letter-spacing: -.005em;
  }
  .files-moment .copy-side .examples p em { font-style: normal; font-family: inherit; color: inherit; font-weight: inherit; }
  .files-moment .copy-side .examples p::before { content: '"'; color: rgba(111,161,255,.55); margin-right: .12rem; }
  .files-moment .copy-side .examples p::after { content: '"'; color: rgba(111,161,255,.55); margin-left: .12rem; }
  .files-moment .copy-side .examples p { margin-bottom: .45rem; }

  .file-chat { background: #1a1d26; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
  .file-chat .head { padding: .85rem 1.4rem; background: #20242e; border-bottom: 1px solid rgba(255,255,255,.06); font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em; color: rgba(250,247,241,.55); display: flex; justify-content: space-between; }
  .file-chat .head .live { color: #6FA1FF; }
  .file-chat .body { padding: 1.4rem 1.6rem 1.6rem; }
  .file-chat .msg { margin-bottom: 1.2rem; }
  .file-chat .msg:last-child { margin-bottom: 0; }
  .file-chat .who { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: rgba(250,247,241,.5); letter-spacing: .12em; margin-bottom: .45rem; }
  .file-chat .who.you { color: #6FA1FF; }
  .file-chat .what {
    font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
    line-height: 1.55; color: rgba(250,247,241,.92);
  }
  .file-chat .file-card {
    margin-top: .8rem; background: rgba(37,99,235,.1);
    border: 1px solid rgba(37,99,235,.3); border-radius: 8px;
    padding: .85rem 1.05rem; display: flex; gap: .85rem; align-items: center;
  }
  .file-chat .file-card .ic {
    width: 2.2rem; height: 2.6rem; background: rgba(37,99,235,.2);
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    color: #6FA1FF; font-family: 'JetBrains Mono', monospace; font-size: .58rem; font-weight: 700;
  }
  .file-chat .file-card .info { flex: 1; }
  .file-chat .file-card .fname { font-size: .92rem; font-weight: 600; color: #faf7f1; }
  .file-chat .file-card .meta { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: rgba(250,247,241,.55); letter-spacing: .05em; margin-top: .2rem; }
  .file-chat .file-card .action { color: #6FA1FF; font-size: .82rem; font-weight: 600; }
  .file-chat .email-row {
    margin-top: .55rem; display: flex; align-items: center; gap: .5rem;
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    color: rgba(250,247,241,.55); letter-spacing: .04em;
  }
  .file-chat .email-row .check { color: #28c840; }

  /* ----- ARTIFACTS GRID ----- */
  .artifacts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
  }
  .artifact {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 12px; overflow: hidden; transition: all .2s ease;
  }
  .artifact:hover { border-color: rgba(20,22,28,.22); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,22,28,.06); }
  .artifact-preview {
    height: 170px;
    background: linear-gradient(178deg, #f7f4ed 0%, #ede9e0 100%);
    border-bottom: 1px solid rgba(20,22,28,.06);
    padding: 1.15rem 1.2rem 1.25rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
  }
  .artifact-preview .lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: rgba(20,22,28,.55); letter-spacing: .15em;
    position: relative; z-index: 1;
  }
  .artifact-preview .ttl {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.45rem; color: rgba(20,22,28,.84);
    line-height: 1.16; position: relative; z-index: 1; max-width: 78%;
  }
  .artifact-preview .sketch {
    position: absolute; top: 1rem; right: 1.1rem; opacity: .42; z-index: 0;
  }
  .artifact-body { padding: 1.1rem 1.2rem 1.3rem; }
  .artifact-body h4 { font-weight: 600; font-size: 1.05rem; margin-bottom: .4rem; letter-spacing: -.005em; }
  .artifact-body p { font-size: .9rem; line-height: 1.55; color: rgba(20,22,28,.65); }

  /* ----- INTERVIEWS ----- */
  .personas {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
    margin-bottom: 2.8rem;
  }
  .persona {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 12px; padding: 1.4rem 1.25rem 1.5rem;
    transition: all .2s ease;
  }
  .persona:hover { border-color: rgba(20,22,28,.22); transform: translateY(-2px); }
  .persona .order { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: rgba(20,22,28,.5); letter-spacing: .14em; margin-bottom: 1rem; }
  .persona .order strong { color: #2563EB; font-weight: 600; }
  .persona .scope { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.55); letter-spacing: .15em; margin-bottom: .65rem; }
  .persona .ttl { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: 1.4rem; line-height: 1.15; margin-bottom: .9rem; color: #14161c; max-width: 16ch; }
  .persona .what { font-size: .95rem; line-height: 1.6; color: rgba(20,22,28,.78); margin-bottom: 1rem; }
  .persona .meta { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.45); letter-spacing: .12em; padding-top: .85rem; border-top: 1px solid rgba(20,22,28,.07); }

  .name-note {
    margin-top: 1.6rem; padding: 1rem 1.4rem;
    background: rgba(37,99,235,.06); border-left: 3px solid #2563EB; border-radius: 4px;
    font-size: .9rem; line-height: 1.55; color: rgba(20,22,28,.72);
  }
  .name-note strong { color: #2563EB; }

  /* ----- ALWAYS RUNNING ----- */
  .always {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
  }
  .running-card {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 12px; padding: 1.7rem 1.8rem;
    display: flex; gap: 1.3rem; align-items: flex-start;
    transition: all .2s ease;
  }
  .running-card:hover { border-color: rgba(20,22,28,.22); }
  .running-card .ind {
    width: 1.9rem; height: 1.9rem; flex-shrink: 0;
    border: 1px solid rgba(37,99,235,.5); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,.05);
  }
  .running-card .ind::before {
    content: ''; width: .45rem; height: .45rem; border-radius: 50%;
    background: #2563EB; box-shadow: 0 0 8px rgba(37,99,235,.55);
    animation: pulse-dot 1.8s infinite;
  }
  @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
  .running-card .body { flex: 1; }
  .running-card h4 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.005em; margin-bottom: .4rem; }
  .running-card p { font-size: .92rem; line-height: 1.55; color: rgba(20,22,28,.68); }

  /* ----- AUDIENCE ----- */
  .audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
  .aud {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 12px; padding: 2rem 1.8rem;
    transition: all .2s ease;
  }
  .aud:hover { border-color: #2563EB; box-shadow: 0 8px 24px rgba(37,99,235,.08); }
  .aud-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #2563EB; letter-spacing: .15em; margin-bottom: 1rem; font-weight: 600; }
  .aud h3 {
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 1.85rem; line-height: 1.16; letter-spacing: -.012em;
    margin-bottom: .9rem; max-width: 14ch; color: #14161c;
  }
  .aud p { font-size: .98rem; line-height: 1.55; color: rgba(20,22,28,.7); margin-bottom: 1rem; }
  .aud .who { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; font-size: .92rem; letter-spacing: -.005em; color: rgba(20,22,28,.72); }

  /* ----- FINAL CTA ----- */
  .final-cta {
    padding: 7.5rem 2rem; text-align: center;
    background: #faf7f1; border-top: 1px solid rgba(20,22,28,.08);
  }
  .final-cta h2 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 4.6rem; line-height: 1.05; letter-spacing: -.035em;
    color: #14161c; max-width: 18ch; margin: 0 auto 1.5rem;
  }
  .final-cta h2 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: #2563EB; letter-spacing: -.005em; }
  .final-cta p { font-size: 1.18rem; color: rgba(20,22,28,.68); max-width: 50ch; margin: 0 auto 2.6rem; }

  /* ----- FOOTER ----- */
  .footer {
    background: #14161c; color: rgba(250,247,241,.7);
    padding: 4.5rem 2rem 2rem;
  }
  .footer-grid {
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.4rem;
    max-width: 1140px; margin: 0 auto 3rem;
  }
  .footer-brand-logo {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    margin-bottom: 1.3rem;
  }
  .footer-brand-logo:focus-visible {
    outline: 2px solid #6FA1FF;
    outline-offset: 6px;
    border-radius: 8px;
  }
  .footer-brand img { display: block; height: 62px; width: auto; }
  .footer-brand .tagline {
    font-size: .88rem; line-height: 1.55;
    color: rgba(250,247,241,.58); max-width: 28ch;
  }
  .footer-col h5 {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    color: rgba(250,247,241,.5); letter-spacing: .15em;
    margin-bottom: .9rem; font-weight: 500;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: .55rem; font-size: .88rem; color: rgba(250,247,241,.74); }
  .footer-col li a { color: inherit; text-decoration: none; }
  .footer-col li a:hover { color: #6FA1FF; }
  .footer-bottom {
    border-top: 1px solid rgba(250,247,241,.14);
    padding-top: 1.4rem; max-width: 1140px; margin: 0 auto;
    display: flex; justify-content: space-between; font-size: .78rem;
    color: rgba(250,247,241,.45); font-family: 'JetBrains Mono', monospace;
    letter-spacing: .04em;
  }

  /* ============================================================
     PRODUCT page-specific
     ============================================================ */
  .deep {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 4rem; align-items: center; padding-bottom: 6rem;
  }
  .deep.reverse { grid-template-columns: 1.15fr 1fr; }
  .deep.reverse .deep-copy { order: 2; }
  .deep.reverse .deep-visual { order: 1; }
  .deep-copy h3 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 2.6rem; line-height: 1.12; letter-spacing: -.025em;
    color: #14161c; margin-bottom: 1.2rem;
  }
  .deep-copy h3 em { font-style: italic; color: #2563EB; font-weight: 400; }
  .deep-copy h3 strong { font-weight: 600; }
  .deep-copy .num {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    letter-spacing: .14em; color: #2563EB; margin-bottom: .8rem; font-weight: 600;
  }
  .deep-copy p { font-size: 1.05rem; line-height: 1.6; color: rgba(20,22,28,.72); margin-bottom: 1rem; max-width: 52ch; }
  .deep-copy .bullets { margin: 1.2rem 0 0 1.2rem; font-size: .96rem; line-height: 1.65; color: rgba(20,22,28,.72); }
  .deep-copy .bullets li { margin-bottom: .35rem; }
  .deep-visual {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 14px; padding: 1.6rem; min-height: 360px;
    box-shadow: 0 8px 32px rgba(20,22,28,.05);
  }
  .deep-divider { border-top: 1px solid rgba(20,22,28,.08); margin: 3rem 0; }

  /* sample doc preview for product page */
  .doc-preview .head { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.5); letter-spacing: .14em; margin-bottom: .8rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(20,22,28,.06); }
  .doc-preview .ttl { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.55rem; color: #14161c; line-height: 1.15; margin-bottom: .85rem; }
  .doc-preview .pull { background: rgba(37,99,235,.06); border-left: 3px solid #2563EB; padding: .85rem 1rem; margin-bottom: 1rem; }
  .doc-preview .pull .label { font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .14em; color: #2563EB; margin-bottom: .35rem; font-weight: 600; }
  .doc-preview .pull .quote { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; font-size: .95rem; line-height: 1.55; color: #14161c; letter-spacing: -.005em; }
  .doc-preview .body-lines { display: flex; flex-direction: column; gap: .3rem; }
  .doc-preview .line { height: .42rem; background: rgba(20,22,28,.08); border-radius: 2px; }
  .doc-preview .line.short { width: 55%; }
  .doc-preview .line.med { width: 80%; }

  /* scenario preview */
  .scenario-preview .head { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.5); letter-spacing: .14em; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(20,22,28,.06); display: flex; justify-content: space-between; }
  .scenario-preview .question { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: #14161c; margin-bottom: 1.4rem; line-height: 1.2; }
  .scenario-preview .bands { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
  .scenario-preview .band { background: rgba(20,22,28,.03); border-radius: 6px; padding: .8rem .9rem; }
  .scenario-preview .band .lbl { font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: rgba(20,22,28,.55); letter-spacing: .12em; margin-bottom: .35rem; }
  .scenario-preview .band .val { font-weight: 600; font-size: .98rem; color: #14161c; }
  .scenario-preview .band.good .val { color: #16a34a; }
  .scenario-preview .band.warn .val { color: #b45309; }
  .scenario-preview .verdict { font-size: .92rem; line-height: 1.55; color: rgba(20,22,28,.78); padding-top: .8rem; border-top: 1px solid rgba(20,22,28,.06); }

  /* debate preview */
  .debate-preview .head { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.5); letter-spacing: .14em; margin-bottom: 1rem; }
  .debate-preview .turn { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid rgba(20,22,28,.06); }
  .debate-preview .turn:first-of-type { border-top: none; }
  .debate-preview .voice { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: rgba(20,22,28,.5); letter-spacing: .1em; padding-top: .15rem; }
  .debate-preview .voice.a { color: #2563EB; }
  .debate-preview .voice.b { color: #b45309; }
  .debate-preview .voice.c { color: #16a34a; }
  .debate-preview .say { font-family: 'Inter', sans-serif; font-size: .95rem; line-height: 1.5; color: rgba(20,22,28,.85); font-style: normal; font-weight: 400; }
  .debate-preview .say::before { content: '"'; color: rgba(20,22,28,.35); margin-right: .1rem; }
  .debate-preview .say::after { content: '"'; color: rgba(20,22,28,.35); margin-left: .1rem; }
  .debate-preview .verdict-card { background: rgba(20,22,28,.04); border-radius: 6px; padding: .9rem 1rem; margin-top: 1rem; }
  .debate-preview .verdict-card .v-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: #16a34a; letter-spacing: .14em; margin-bottom: .3rem; font-weight: 600; }
  .debate-preview .verdict-card .v-text { font-weight: 500; font-size: .95rem; color: #14161c; }

  /* morning briefing preview */
  .pulse-preview .head { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba(20,22,28,.5); letter-spacing: .14em; margin-bottom: .8rem; display: flex; justify-content: space-between; }
  .pulse-preview .ttl { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: #14161c; margin-bottom: .25rem; }
  .pulse-preview .date { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: rgba(20,22,28,.5); letter-spacing: .1em; margin-bottom: 1.1rem; }
  .pulse-preview .pulse-sec { padding: .8rem 0; border-top: 1px solid rgba(20,22,28,.06); }
  .pulse-preview .pulse-sec:first-of-type { border-top: none; padding-top: 0; }
  .pulse-preview .pulse-sec h5 { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: #2563EB; letter-spacing: .14em; margin-bottom: .45rem; font-weight: 600; }
  .pulse-preview .pulse-sec p { font-size: .88rem; line-height: 1.55; color: rgba(20,22,28,.78); }

  /* ============================================================
     FEATURES page
     ============================================================ */
  .feat-group { margin-bottom: 4rem; }
  .feat-group:last-child { margin-bottom: 0; }
  .feat-group .heading { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(20,22,28,.1); }
  .feat-group .heading .num { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #2563EB; letter-spacing: .15em; font-weight: 600; }
  .feat-group .heading h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: 2rem; color: #14161c; letter-spacing: -.012em; }
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
  .feat {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 10px; padding: 1.3rem 1.4rem;
    transition: all .2s ease;
  }
  .feat:hover { border-color: rgba(37,99,235,.4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.06); }
  .feat h4 { font-weight: 600; font-size: 1.06rem; letter-spacing: -.008em; margin-bottom: .5rem; color: #14161c; line-height: 1.3; }
  .feat p { font-size: .92rem; line-height: 1.6; color: rgba(20,22,28,.78); }
  /* Inline emphasis inside feat-card bodies: bold + brand-blue, not italic-serif. */
  .feat p em, .feat h4 em { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; color: #2563EB; letter-spacing: -.005em; }
  /* Strong inside feat-card bodies: bolded but black (for quoted sentences, etc.) */
  .feat p strong { font-weight: 600; color: #14161c; }

  /* ============================================================
     PRICING page
     ============================================================ */
  .anchor-statement {
    text-align: center; margin: 0 auto 3.5rem; max-width: 50ch;
  }
  .anchor-statement p {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.45rem; line-height: 1.45; color: rgba(20,22,28,.78);
  }
  .anchor-statement p strong { font-style: normal; font-weight: 600; color: #2563EB; }

  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
  .tier {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 14px; padding: 2.2rem 1.8rem 2.4rem;
    display: flex; flex-direction: column;
    transition: all .2s ease;
    overflow: hidden;
  }
  .tier:hover { border-color: rgba(20,22,28,.22); transform: translateY(-3px); }
  /* Featured tier: dark background only — no pseudo-element pill (legacy markup
     injected a "MOST POPULAR" floater that ghosted on top of the new .ribbon).
     Also no scale transform so all three tier cards share the exact same layout
     box and align cleanly at equal heights in the grid. */
  .tier.featured { background: #14161c; color: #faf7f1; border-color: #14161c; position: relative; }
  .tier.featured:hover { transform: translateY(-3px); }
  .tier .name {
    font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 600;
    letter-spacing: .14em; color: rgba(20,22,28,.55);
    margin-bottom: 1rem;
  }
  .tier.featured .name { color: rgba(250,247,241,.65); }
  .tier .price {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3.6rem; line-height: 1; letter-spacing: -.03em;
    color: #14161c; margin-bottom: .25rem;
  }
  .tier.featured .price { color: #faf7f1; }
  .tier .price .dollar { font-size: 1.8rem; vertical-align: super; font-weight: 400; margin-right: .1rem; }
  .tier .period { font-size: .92rem; color: rgba(20,22,28,.55); margin-bottom: 1.5rem; }
  .tier.featured .period { color: rgba(250,247,241,.55); }
  /* Tier "who is this for" subtitle — Inter at body size for readability.
     Italic Cormorant at this size was unreadable. */
  .tier .who {
    font-family: 'Inter', sans-serif; font-style: normal;
    font-weight: 400; font-size: 1.02rem; line-height: 1.5;
    letter-spacing: -.005em; color: rgba(20,22,28,.78);
    padding-bottom: 1.5rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(20,22,28,.1);
  }
  .tier.featured .who { color: rgba(250,247,241,.85); border-color: rgba(250,247,241,.18); }
  .tier ul { list-style: none; flex: 1; margin-bottom: 1.8rem; }
  .tier li {
    font-size: .92rem; line-height: 1.45; margin-bottom: .65rem;
    padding-left: 1.55rem; position: relative; color: rgba(20,22,28,.78);
  }
  .tier.featured li { color: rgba(250,247,241,.82); }
  .tier li::before {
    content: '+'; position: absolute; left: 0; top: 0;
    color: #2563EB; font-weight: 600; font-size: 1rem;
  }
  .tier.featured li::before { color: #6FA1FF; }
  .tier li.section-break {
    padding-left: 0; margin-top: 1rem; padding-top: .8rem;
    border-top: 1px solid rgba(20,22,28,.08);
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    letter-spacing: .14em; color: rgba(20,22,28,.55); font-weight: 600;
  }
  .tier li.section-break::before { content: ''; }
  .tier.featured li.section-break { border-color: rgba(250,247,241,.14); color: rgba(250,247,241,.55); }
  .tier .tier-cta {
    text-align: center; padding: .9rem 1rem; border-radius: 8px;
    font-weight: 600; font-size: .95rem;
    background: #14161c; color: #faf7f1;
    transition: all .15s ease;
  }
  .tier .tier-cta:hover { background: #2563EB; }
  .tier.featured .tier-cta { background: #2563EB; color: #faf7f1; }
  .tier.featured .tier-cta:hover { background: #1d4ed8; }
  .tier.ghost .tier-cta { background: transparent; color: #14161c; border: 1px solid rgba(20,22,28,.2); }
  .tier.ghost .tier-cta:hover { background: #14161c; color: #faf7f1; border-color: #14161c; }

  .pricing-faq { max-width: 740px; margin: 5rem auto 0; }
  .pricing-faq h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.8rem; margin-bottom: 1.8rem; text-align: center; }
  .faq { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(20,22,28,.08); }
  .faq:last-child { border-bottom: none; }
  .faq h4 { font-weight: 600; font-size: 1.05rem; margin-bottom: .55rem; color: #14161c; }
  .faq p { font-size: .95rem; line-height: 1.6; color: rgba(20,22,28,.7); }

  /* ----- HOW MIJORO THINKS (dark stats section) ----- */
  .m .thinks {
    background: #14161c; color: #faf7f1;
    padding: 7rem 2rem; position: relative; overflow: hidden;
  }
  .m .thinks::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 800px 460px at 22% 22%, rgba(37,99,235,.13), transparent 65%),
      radial-gradient(ellipse 800px 460px at 78% 78%, rgba(37,99,235,.10), transparent 65%);
    pointer-events: none;
  }
  /* Subtle drifting neural-mesh texture on dark sections (per pre-launch review).
     Two SVG-encoded dot+line constellations, layered, slowly drifting and breathing
     so it reads as living silicon rather than a flat gradient. */
  .m .thinks::after,
  .m .mc-section::after,
  .m .about-moat::after,
  .m .compare-section::after,
  .m .demo-preview-section::after,
  .m .sec-compliance::after,
  .m .about-bet::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: .55;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'><g fill='none' stroke='%236FA1FF' stroke-width='0.5' stroke-opacity='0.18'><line x1='60' y1='80' x2='220' y2='160'/><line x1='220' y1='160' x2='340' y2='90'/><line x1='340' y1='90' x2='500' y2='200'/><line x1='220' y1='160' x2='180' y2='320'/><line x1='180' y1='320' x2='360' y2='380'/><line x1='360' y1='380' x2='540' y2='320'/><line x1='180' y1='320' x2='120' y2='480'/><line x1='120' y1='480' x2='280' y2='520'/><line x1='280' y1='520' x2='460' y2='480'/><line x1='460' y1='480' x2='540' y2='320'/></g><g fill='%236FA1FF' fill-opacity='0.32'><circle cx='60' cy='80' r='1.8'/><circle cx='220' cy='160' r='2.4'/><circle cx='340' cy='90' r='1.8'/><circle cx='500' cy='200' r='2.2'/><circle cx='180' cy='320' r='2.6'/><circle cx='360' cy='380' r='2.4'/><circle cx='540' cy='320' r='1.8'/><circle cx='120' cy='480' r='2.2'/><circle cx='280' cy='520' r='2.4'/><circle cx='460' cy='480' r='1.8'/></g></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'><g fill='none' stroke='%23FFD37A' stroke-width='0.45' stroke-opacity='0.10'><line x1='40' y1='120' x2='180' y2='60'/><line x1='180' y1='60' x2='320' y2='140'/><line x1='320' y1='140' x2='440' y2='80'/><line x1='180' y1='60' x2='240' y2='240'/><line x1='240' y1='240' x2='380' y2='320'/><line x1='40' y1='120' x2='100' y2='320'/><line x1='100' y1='320' x2='240' y2='240'/><line x1='100' y1='320' x2='200' y2='440'/><line x1='200' y1='440' x2='380' y2='320'/></g><g fill='%23FFD37A' fill-opacity='0.18'><circle cx='40' cy='120' r='1.6'/><circle cx='180' cy='60' r='2'/><circle cx='320' cy='140' r='1.8'/><circle cx='440' cy='80' r='1.6'/><circle cx='240' cy='240' r='2.4'/><circle cx='380' cy='320' r='1.8'/><circle cx='100' cy='320' r='2'/><circle cx='200' cy='440' r='1.6'/></g></svg>");
    background-size: 620px 620px, 480px 480px;
    background-repeat: repeat, repeat;
    background-position: 0 0, 50% 50%;
    animation: m-neural-drift 90s linear infinite;
    mix-blend-mode: screen;
  }
  @keyframes m-neural-drift {
    0%   { background-position: 0 0, 50% 50%; }
    100% { background-position: 620px 620px, -480px -480px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .m .thinks::after,
    .m .mc-section::after,
    .m .about-moat::after,
    .m .compare-section::after,
    .m .demo-preview-section::after,
    .m .sec-compliance::after,
    .m .about-bet::after { animation: none; }
  }
  .m .thinks .container { position: relative; z-index: 1; }
  .m .thinks-num {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    color: #6FA1FF; letter-spacing: .18em; margin-bottom: .9rem;
  }
  .m .thinks-title {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3.7rem; line-height: 1.06; letter-spacing: -.03em;
    color: #faf7f1; margin-bottom: 1.3rem; max-width: 22ch;
  }
  .m .thinks-title em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: #6FA1FF; letter-spacing: -.005em; }
  .m .thinks-title strong { font-weight: 600; }
  .m .thinks-sub {
    font-size: 1.13rem; line-height: 1.55; color: rgba(250,247,241,.78);
    max-width: 60ch; margin-bottom: 4.2rem;
  }
  .m .thinks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.6rem 3.5rem; }
  .m .think-card { padding-top: 1.3rem; border-top: 1px solid rgba(250,247,241,.2); }
  .m .big-num {
    font-family: 'Inter', sans-serif; font-weight: 200;
    font-size: 4.4rem; line-height: 1; letter-spacing: -.035em;
    color: #faf7f1; margin-bottom: .65rem;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .m .big-num em { font-family: 'Inter', sans-serif; font-style: normal; color: #6FA1FF; font-weight: 500; letter-spacing: -.02em; }
  .m .num-label {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    letter-spacing: .14em; color: rgba(111,161,255,.88);
    margin-bottom: 1.1rem; font-weight: 600;
  }
  .m .think-card p { font-size: 1rem; line-height: 1.6; color: rgba(250,247,241,.78); max-width: 52ch; }

  /* ============================================================
     DOCS — three-pane layout
     ============================================================ */
  .m .cmd-k {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    color: rgba(20,22,28,.55); padding: .42rem .7rem .42rem .85rem;
    border: 1px solid rgba(20,22,28,.14); border-radius: 7px;
    background: rgba(255,255,255,.6); margin-right: .5rem;
  }
  .m .cmd-k .kbd {
    background: rgba(20,22,28,.08); padding: .12rem .4rem; border-radius: 3px;
    font-size: .65rem; font-weight: 600; color: rgba(20,22,28,.7);
  }
  .m .docs-shell {
    display: grid; grid-template-columns: 268px 1fr 248px;
    max-width: 1400px; margin: 0 auto;
    border-top: 1px solid rgba(20,22,28,.06);
  }
  .m .docs-sidebar { border-right: 1px solid rgba(20,22,28,.06); padding: 2.6rem 1.4rem 4rem 2rem; }
  .m .docs-sidebar .grp { margin-bottom: 1.7rem; }
  .m .docs-sidebar .grp-t {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    letter-spacing: .14em; color: rgba(20,22,28,.5);
    margin-bottom: .65rem; font-weight: 600;
  }
  .m .docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
  .m .docs-sidebar li { margin-bottom: .1rem; }
  .m .docs-sidebar a {
    display: block; padding: .38rem .8rem;
    font-size: .89rem; color: rgba(20,22,28,.72); text-decoration: none;
    transition: all .12s ease; border-left: 2px solid transparent;
    margin-left: -2px; border-radius: 0 6px 6px 0;
  }
  .m .docs-sidebar a:hover { color: #14161c; background: rgba(20,22,28,.04); }
  .m .docs-sidebar a.active {
    color: #2563EB; font-weight: 600;
    border-left-color: #2563EB; background: rgba(37,99,235,.05);
  }
  .m .docs-main { padding: 3.2rem 3.4rem 5rem; max-width: 760px; }
  .m .docs-crumb {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    letter-spacing: .14em; color: rgba(20,22,28,.55);
    margin-bottom: 1.1rem;
  }
  .m .docs-crumb .accent { color: #2563EB; }
  .m .docs-h1 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3rem; line-height: 1.06; letter-spacing: -.028em;
    color: #14161c; margin-bottom: 1rem; max-width: 22ch;
  }
  /* Docs hero emphasis: brand-blue accent so the differentiated word matches the
     hero treatment on every other marketing page. Font/size/style come from the
     site-wide `.m h1 em` rule; only the color is missing here. */
  .m .docs-h1 em { color: #2563EB; }
  .m .docs-tagline {
    font-size: 1.18rem; line-height: 1.55; color: rgba(20,22,28,.7);
    max-width: 56ch; margin-bottom: 2.4rem;
  }
  .m .docs-h2 {
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em;
    margin: 3rem 0 1rem; color: #14161c;
  }
  .m .docs-main > p { font-size: 1rem; line-height: 1.68; color: rgba(20,22,28,.78); margin-bottom: 1.1rem; max-width: 65ch; }
  .m .docs-main > p strong { color: #14161c; font-weight: 600; }
  /* Body-text emphasis: bold + brand-blue, not italic-serif. Italic serif at body size is
     hard to read inside running paragraphs; we reserve italic display for headings only. */
  .m .docs-main > p em { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; color: #2563EB; letter-spacing: -.005em; }
  .m .docs-main > ul { margin: 0 0 1.1rem 1.4rem; font-size: 1rem; line-height: 1.65; color: rgba(20,22,28,.78); }
  .m .docs-main > ul li { margin-bottom: .35rem; max-width: 62ch; }
  .m .docs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0 3rem; }
  .m .docs-card {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 10px; padding: 1.4rem 1.5rem 1.5rem;
    transition: all .15s ease; cursor: pointer;
    display: flex; flex-direction: column;
  }
  .m .docs-card:hover { border-color: #2563EB; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,.06); }
  .m .docs-card .lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    letter-spacing: .14em; color: #2563EB; margin-bottom: .55rem; font-weight: 600;
  }
  .m .docs-card h3 { font-weight: 600; font-size: 1.12rem; margin-bottom: .4rem; color: #14161c; letter-spacing: -.005em; }
  .m .docs-card p { font-size: .9rem; line-height: 1.55; color: rgba(20,22,28,.65); margin: 0 0 .85rem; }
  .m .docs-card .ct { margin-top: auto; font-size: .78rem; color: #2563EB; font-weight: 500; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; }
  .m .docs-toc { padding: 3.2rem 1.5rem 4rem 1.5rem; border-left: 1px solid rgba(20,22,28,.05); }
  .m .docs-toc-lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    letter-spacing: .14em; color: rgba(20,22,28,.55);
    margin-bottom: .9rem; font-weight: 600;
  }
  .m .docs-toc ul { list-style: none; padding: 0; margin: 0; }
  .m .docs-toc li { margin-bottom: .35rem; }
  .m .docs-toc a {
    font-size: .86rem; color: rgba(20,22,28,.62); text-decoration: none;
    padding: .2rem 0 .2rem .85rem; display: block;
    border-left: 2px solid transparent; margin-left: -2px;
    transition: all .12s ease; line-height: 1.4;
  }
  .m .docs-toc a:hover { color: #14161c; }
  .m .docs-toc a.active { color: #2563EB; border-left-color: #2563EB; font-weight: 500; }
  .m .docs-step { margin: 1.8rem 0; display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; }
  .m .docs-step .stnum {
    font-family: 'Inter', sans-serif; font-weight: 200;
    font-size: 2.4rem; line-height: 1; color: rgba(37,99,235,.55);
    letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums;
  }
  .m .docs-step h3 { font-weight: 600; font-size: 1.08rem; margin-bottom: .4rem; color: #14161c; }
  .m .docs-step p { font-size: .95rem; line-height: 1.6; color: rgba(20,22,28,.72); margin-bottom: .5rem; max-width: 58ch; }
  .m .docs-callout {
    background: rgba(37,99,235,.05); border-left: 3px solid #2563EB;
    border-radius: 0 8px 8px 0; padding: 1rem 1.3rem;
    margin: 1.5rem 0; max-width: 65ch;
  }
  .m .docs-callout .lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    letter-spacing: .14em; color: #2563EB; margin-bottom: .35rem; font-weight: 600;
  }
  .m .docs-callout p { font-size: .94rem; color: rgba(20,22,28,.78); margin: 0; line-height: 1.55; max-width: none; }
  .m .docs-output {
    background: #fff; border: 1px solid rgba(20,22,28,.12);
    border-radius: 10px; padding: 1.4rem 1.6rem; margin: 1.4rem 0;
    max-width: 65ch; box-shadow: 0 2px 10px rgba(20,22,28,.04);
  }
  .m .docs-output .hr {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    color: rgba(20,22,28,.55); letter-spacing: .12em;
    margin-bottom: .7rem; padding-bottom: .55rem;
    border-bottom: 1px solid rgba(20,22,28,.06);
    display: flex; justify-content: space-between;
  }
  .m .docs-output .dt { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.38rem; color: #14161c; margin-bottom: .55rem; line-height: 1.2; }
  .m .docs-output .pq {
    padding: .85rem 1.05rem; background: rgba(37,99,235,.05);
    border-left: 3px solid #2563EB; margin: .7rem 0;
    font-family: 'Inter', sans-serif; font-style: normal;
    font-weight: 500;
    font-size: .96rem; line-height: 1.6; color: #14161c;
    letter-spacing: -.005em;
  }
  .m .docs-output .bt { font-size: .92rem; line-height: 1.6; color: rgba(20,22,28,.75); }
  .m .docs-next { margin: 4rem 0 0; padding: 2.2rem 0 0; border-top: 1px solid rgba(20,22,28,.1); }
  .m .docs-next-lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    letter-spacing: .14em; color: rgba(20,22,28,.55);
    margin-bottom: 1.1rem; font-weight: 600;
  }
  .m .docs-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  .m .docs-next-link {
    display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline;
    padding: 1rem 1.2rem; border: 1px solid rgba(20,22,28,.1);
    border-radius: 8px; text-decoration: none; transition: all .15s ease;
    cursor: pointer; background: #fff;
  }
  .m .docs-next-link:hover { border-color: #2563EB; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.06); }
  .m .docs-next-link .arrow { color: #2563EB; font-size: 1rem; font-weight: 600; }
  .m .docs-next-link h4 { font-weight: 600; font-size: .92rem; color: #14161c; margin: 0 0 .2rem; letter-spacing: -.005em; }
  .m .docs-next-link p { font-size: .8rem; color: rgba(20,22,28,.6); margin: 0; line-height: 1.4; max-width: none; }
  .m .popular { display: flex; flex-direction: column; gap: 0; margin: 1rem 0 2.4rem; }
  .m .popular-item {
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
    padding: .85rem 0; border-bottom: 1px solid rgba(20,22,28,.07);
    text-decoration: none; color: inherit; cursor: pointer;
  }
  .m .popular-item:last-child { border-bottom: none; }
  .m .popular-item:hover .pop-title { color: #2563EB; }
  .m .pop-title { font-weight: 500; font-size: 1rem; color: #14161c; }
  .m .pop-desc { font-size: .87rem; color: rgba(20,22,28,.6); margin-top: .2rem; }
  .m .pop-tag {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    letter-spacing: .12em; color: rgba(20,22,28,.5); font-weight: 500;
  }
  .m .pop-tag.new { color: #2563EB; }
  .m .docs-help-card {
    margin: 2.4rem 0 0; padding: 1.5rem 1.7rem;
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 10px;
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  }
  .m .docs-help-card h4 { font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
  .m .docs-help-card p { font-size: .9rem; color: rgba(20,22,28,.65); margin: 0; max-width: 48ch; line-height: 1.5; }
  .m .docs-help-card .help-cta {
    font-size: .85rem; font-weight: 600; color: #2563EB;
    padding: .55rem .95rem; border: 1px solid rgba(37,99,235,.3);
    border-radius: 7px; text-decoration: none;
  }
  .m .docs-help-card .help-cta:hover { background: #2563EB; color: white; }

  @media (max-width: 1180px) {
    .m .docs-shell { grid-template-columns: 240px 1fr; }
    .m .docs-toc { display: none; }
  }

  /* ============================================================
     DEMO PAGE
     ============================================================ */
  .m .demo-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    max-width: 1180px; margin: 0 auto;
    padding: 5rem 2rem 6rem; gap: 4.5rem;
    align-items: start;
  }
  .m .demo-pitch .eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    letter-spacing: .14em; color: #2563EB; margin-bottom: 1.2rem; font-weight: 600;
  }
  .m .demo-pitch h1 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 3rem; line-height: 1.06; letter-spacing: -.03em;
    color: #14161c; margin-bottom: 1.3rem; max-width: 18ch;
  }
  .m .demo-pitch h1 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: #2563EB; letter-spacing: -.005em; }
  .m .demo-pitch h1 strong { font-weight: 600; }
  .m .demo-pitch .lede {
    font-size: 1.1rem; line-height: 1.6; color: rgba(20,22,28,.72);
    margin-bottom: 2rem; max-width: 46ch;
  }
  .m .demo-list { list-style: none; padding: 0; margin: 0 0 2rem; }
  .m .demo-list li {
    display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem;
    font-size: .96rem; line-height: 1.55; color: rgba(20,22,28,.78);
    margin-bottom: .7rem; align-items: baseline;
  }
  .m .demo-list li::before { content: "→"; color: #2563EB; font-weight: 700; font-size: .95rem; }
  .m .demo-alt {
    font-size: .9rem; color: rgba(20,22,28,.55);
    padding-top: 1.4rem; border-top: 1px solid rgba(20,22,28,.1);
    line-height: 1.6;
  }
  .m .demo-alt a { color: #2563EB; text-decoration: none; font-weight: 500; }
  .m .demo-alt a:hover { text-decoration: underline; }
  .m .demo-form-card {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 14px; padding: 2.4rem 2.2rem;
    box-shadow: 0 8px 32px rgba(20,22,28,.06);
  }
  .m .demo-form-card .head {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    letter-spacing: .14em; color: #2563EB; font-weight: 600;
    margin-bottom: 1.6rem; display: flex; justify-content: space-between;
  }
  .m .demo-form-card .head .sla { color: rgba(20,22,28,.55); font-weight: 500; }
  .m .form-row { margin-bottom: 1.3rem; }
  .m .form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .m .form-label {
    display: block; font-family: 'Inter', sans-serif; font-size: .82rem;
    font-weight: 600; color: #14161c; margin-bottom: .42rem;
    letter-spacing: -.005em;
  }
  .m .form-label .req { color: #2563EB; font-weight: 700; margin-left: .15rem; }
  .m .form-label .opt {
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    font-weight: 500; color: rgba(20,22,28,.45);
    margin-left: .4rem; letter-spacing: .1em;
  }
  .m .form-input, .m .form-select, .m .form-textarea {
    width: 100%; box-sizing: border-box;
    background: #faf7f1; border: 1px solid rgba(20,22,28,.14);
    border-radius: 7px; padding: .72rem .85rem;
    font-family: 'Inter', sans-serif; font-size: .95rem;
    color: #14161c; transition: all .15s ease;
  }
  .m .form-input:focus, .m .form-select:focus, .m .form-textarea:focus {
    outline: none; border-color: #2563EB;
    background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  }
  .m .form-input::placeholder, .m .form-textarea::placeholder { color: rgba(20,22,28,.4); }
  .m .form-textarea { min-height: 110px; resize: vertical; font-family: 'Inter', sans-serif; line-height: 1.5; }
  .m .form-submit {
    width: 100%; padding: 1rem 1.4rem; margin-top: .4rem;
    background: #14161c; color: #faf7f1;
    border: none; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all .15s ease;
    letter-spacing: -.005em;
  }
  .m .form-submit:hover { background: #2563EB; transform: translateY(-1px); }
  .m .form-meta {
    margin-top: 1.2rem; text-align: center;
    font-size: .8rem; color: rgba(20,22,28,.55); line-height: 1.5;
  }
  .m .form-meta a { color: rgba(20,22,28,.7); text-decoration: underline; }

  /* ============================================================
     ABOUT PAGE
     ============================================================ */
  .m .about-hero { padding: 6rem 2rem 3.5rem; text-align: center; }
  .m .about-hero .eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: .76rem;
    letter-spacing: .14em; color: #2563EB; margin-bottom: 1.4rem; font-weight: 600;
  }
  .m .about-hero h1 {
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: 4.4rem; line-height: 1.04; letter-spacing: -.04em;
    color: #14161c; max-width: 22ch; margin: 0 auto 1.4rem;
  }
  .m .about-hero h1 em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; color: #2563EB; letter-spacing: -.005em; }
  .m .about-hero .lede {
    font-size: 1.25rem; line-height: 1.55; color: rgba(20,22,28,.7);
    max-width: 60ch; margin: 0 auto;
  }
  .m .about-section { padding: 4rem 2rem; max-width: 760px; margin: 0 auto; }
  .m .about-section h2 {
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-style: italic; font-size: 2.4rem; letter-spacing: -.02em;
    margin-bottom: 1.4rem; color: #14161c;
  }
  .m .about-section p {
    font-size: 1.08rem; line-height: 1.7; color: rgba(20,22,28,.78);
    margin-bottom: 1.2rem; max-width: 62ch;
  }
  .m .about-section p strong { color: #14161c; font-weight: 600; }
  /* About-section body emphasis: bold + brand-blue (same rule as docs body em) for
     readability at running-paragraph size. Italic Cormorant is reserved for display
     text only. */
  .m .about-section p em { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; color: #2563EB; letter-spacing: -.005em; }
  .m .principles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
    margin: 2.4rem 0;
  }
  .m .principle {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 10px; padding: 1.5rem 1.6rem 1.6rem;
    transition: all .15s ease;
  }
  .m .principle:hover { border-color: rgba(37,99,235,.4); transform: translateY(-2px); }
  .m .principle .num {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    letter-spacing: .14em; color: #2563EB; font-weight: 600;
    margin-bottom: .65rem;
  }
  .m .principle h4 {
    font-weight: 600; font-size: 1.08rem;
    margin-bottom: .5rem; letter-spacing: -.005em;
  }
  .m .principle p {
    font-size: .93rem; line-height: 1.55; color: rgba(20,22,28,.68);
    margin: 0; max-width: none;
  }
  .m .patent-banner {
    background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(37,99,235,.02));
    border: 1px solid rgba(37,99,235,.22);
    border-radius: 12px; padding: 2rem 2.4rem;
    margin: 2.2rem 0; display: grid;
    grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
  }
  .m .patent-banner .ic {
    width: 3.4rem; height: 3.4rem;
    border: 2px solid #2563EB; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #2563EB; font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; font-weight: 700; letter-spacing: .08em;
    flex-shrink: 0; background: rgba(255,255,255,.5);
    text-align: center; line-height: 1.2;
  }
  .m .patent-banner h4 {
    font-weight: 600; font-size: 1.15rem; margin-bottom: .35rem;
    color: #14161c;
  }
  .m .patent-banner p {
    font-size: .94rem; color: rgba(20,22,28,.72); margin: 0;
    line-height: 1.55; max-width: none;
  }

  /* ============================================================
     SECURITY PAGE
     ============================================================ */
  .m .sec-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
    max-width: 1080px; margin: 2rem auto 0; padding: 0 2rem;
  }
  .m .sec-card {
    background: #fff; border: 1px solid rgba(20,22,28,.1);
    border-radius: 10px; padding: 1.7rem 1.8rem;
    transition: all .15s ease;
  }
  .m .sec-card:hover { border-color: rgba(37,99,235,.4); transform: translateY(-2px); }
  .m .sec-card .lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .64rem;
    letter-spacing: .14em; color: #2563EB; font-weight: 600;
    margin-bottom: .65rem;
  }
  .m .sec-card h3 {
    font-weight: 600; font-size: 1.15rem; margin-bottom: .55rem;
    color: #14161c; letter-spacing: -.005em;
  }
  .m .sec-card p {
    font-size: .94rem; line-height: 1.6; color: rgba(20,22,28,.7);
    margin: 0; max-width: none;
  }
  .m .sec-promise {
    max-width: 760px; margin: 4rem auto 0; padding: 2.4rem 2.6rem;
    background: #14161c; color: #faf7f1; border-radius: 12px;
    text-align: center;
  }
  .m .sec-promise h3 {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 500; font-size: 2rem; letter-spacing: -.015em;
    margin-bottom: 1rem; color: #faf7f1;
  }
  .m .sec-promise p {
    font-size: 1.04rem; line-height: 1.6; color: rgba(250,247,241,.8);
    max-width: 52ch; margin: 0 auto;
  }
  .m .sec-promise a { color: #6FA1FF; }

  @media (max-width: 900px) {
    .m .demo-layout { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.5rem 4rem; }
    .m .demo-pitch h1, .m .about-hero h1 { font-size: 2.6rem; }
    .m .form-row.split { grid-template-columns: 1fr; }
    .m .principles, .m .sec-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 980px) {
    .m .thinks-grid { grid-template-columns: 1fr; }
    .m .thinks-title { font-size: 2.6rem; }
    .m .big-num { font-size: 3.6rem; }
    .m .hero h1 { font-size: 3.4rem; }
    .m .section-title, .files-moment .copy-side h2, .big-statement h2, .final-cta h2 { font-size: 2.6rem; }
    .flow, .artifacts, .personas, .always, .audience, .feat-grid, .tiers { grid-template-columns: 1fr 1fr; }
    .docs-fan .doc { width: 160px; height: 210px; }
    .docs-fan .doc.d1 { transform: rotate(-9deg) translate(-130px, 0); }
    .docs-fan .doc.d2 { transform: rotate(-4deg) translate(-65px, -10px); }
    .docs-fan .doc.d4 { transform: rotate(4deg) translate(65px, -10px); }
    .docs-fan .doc.d5 { transform: rotate(9deg) translate(130px, 0); }
    .files-moment .container, .deep, .deep.reverse { grid-template-columns: 1fr; gap: 2.4rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ============================================================
     SCROLL-TRIGGERED REVEALS — site-wide motion
     Every meaningful block fades up the moment it enters the viewport.
     Stagger within sibling grids creates the "cascade" feel.
     ============================================================ */
  .m .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .m .reveal.is-visible { opacity: 1; transform: none; }

  /* Stagger across siblings in card grids */
  .m .artifacts .reveal:nth-child(1),
  .m .personas .reveal:nth-child(1),
  .m .principles .reveal:nth-child(1),
  .m .sec-grid .reveal:nth-child(1),
  .m .docs-cards .reveal:nth-child(1),
  .m .audience .reveal:nth-child(1),
  .m .always .reveal:nth-child(1),
  .m .feat-grid .reveal:nth-child(1),
  .m .thinks-grid .reveal:nth-child(1),
  .m .next-grid .reveal:nth-child(1),
  .m .docs-next-grid .reveal:nth-child(1) { transition-delay: 0s; }

  .m .artifacts .reveal:nth-child(2),
  .m .personas .reveal:nth-child(2),
  .m .principles .reveal:nth-child(2),
  .m .sec-grid .reveal:nth-child(2),
  .m .docs-cards .reveal:nth-child(2),
  .m .audience .reveal:nth-child(2),
  .m .always .reveal:nth-child(2),
  .m .feat-grid .reveal:nth-child(2),
  .m .thinks-grid .reveal:nth-child(2),
  .m .next-grid .reveal:nth-child(2),
  .m .docs-next-grid .reveal:nth-child(2) { transition-delay: 0.08s; }

  .m .artifacts .reveal:nth-child(3),
  .m .personas .reveal:nth-child(3),
  .m .principles .reveal:nth-child(3),
  .m .sec-grid .reveal:nth-child(3),
  .m .docs-cards .reveal:nth-child(3),
  .m .audience .reveal:nth-child(3),
  .m .always .reveal:nth-child(3),
  .m .feat-grid .reveal:nth-child(3),
  .m .thinks-grid .reveal:nth-child(3),
  .m .next-grid .reveal:nth-child(3),
  .m .docs-next-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

  .m .artifacts .reveal:nth-child(4),
  .m .personas .reveal:nth-child(4),
  .m .principles .reveal:nth-child(4),
  .m .sec-grid .reveal:nth-child(4),
  .m .docs-cards .reveal:nth-child(4),
  .m .audience .reveal:nth-child(4),
  .m .always .reveal:nth-child(4),
  .m .feat-grid .reveal:nth-child(4),
  .m .thinks-grid .reveal:nth-child(4),
  .m .next-grid .reveal:nth-child(4),
  .m .docs-next-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

  .m .artifacts .reveal:nth-child(5),
  .m .feat-grid .reveal:nth-child(5),
  .m .thinks-grid .reveal:nth-child(5) { transition-delay: 0.32s; }

  .m .artifacts .reveal:nth-child(6),
  .m .feat-grid .reveal:nth-child(6),
  .m .thinks-grid .reveal:nth-child(6) { transition-delay: 0.40s; }

  .m .feat-grid .reveal:nth-child(n+7) { transition-delay: 0.32s; }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .m .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* Reveal stagger for home flow steps + product page deep-dives */
  .m .flow .reveal:nth-child(1) { transition-delay: 0s; }
  .m .flow .reveal:nth-child(2) { transition-delay: 0.1s; }
  .m .flow .reveal:nth-child(3) { transition-delay: 0.2s; }
  .m .flow .reveal:nth-child(4) { transition-delay: 0.3s; }

  /* ============================================================
     EMPHASIS TYPOGRAPHY — site-wide invariant
     Every heading emphasis (<em> inside h1/h2/h3) uses Cormorant
     italic, which at the same point size renders visually SMALLER
     and lighter than the heavy sans headings. Force every heading
     emphasis to read as a deliberate, slightly-larger bold italic
     so it is never subordinate to the words beside it. `!important`
     is intentional: it must beat the per-page inline <style> rules
     (e.g. `.about-section h2 em`) that load after this sheet at
     equal specificity. One rule, every page, guaranteed. Colour is
     left to each page so blue/gold accents are preserved.
     ============================================================ */
  .m h1 em, .m h2 em, .m h3 em {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
    font-style: italic !important;
  }

  /* ============================================================
     DARK ABOUT SECTIONS — restore legible text.
     The shared `.m .about-section h2 / p / p strong` rules above set
     dark #14161c text, which is INVISIBLE on the dark `.about-moat`
     and `.about-bet` backgrounds (the page's own inline light-text
     rules lose to the higher-specificity `.m .about-section …`
     selectors). Re-assert light text here at equal specificity, later
     in source order so it wins. Gold <em> accents come from the
     page's inline rules.
     ============================================================ */
  .m .about-moat h2, .m .about-bet h2 { color: #faf7f1; }
  .m .about-moat p, .m .about-bet p { color: rgba(250, 247, 241, 0.82); }
  .m .about-moat p strong, .m .about-bet p strong { color: #FFD37A; }