/* ============================================================
   MarketDX pitch — design tokens (brand: warm paper × mint/magenta)
   Fonts: Space Grotesk (sans) · Playfair Display (editorial serif)
   ============================================================ */
:root{
  /* surfaces */
  --paper:      #F7F6F2;
  --paper-2:    #F0EEE9;
  --ink:        #2A2521;
  --ink-70:     #57514A;
  --ink-50:     #76726C;
  --ink-30:     #ABA298;
  --line:       rgba(42,37,33,0.12);
  --line-soft:  rgba(42,37,33,0.06);
  /* accents */
  --mint:       #3CE08C;
  --magenta:    #C84BD6;
  /* dark world (later sections) */
  --dark:       #1A1712;
  /* type */
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --serif:'Playfair Display', Georgia, serif;
  /* rhythm */
  --r: 6px;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.3;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---------- shared: eyebrow (mono label) ---------- */
.eyebrow{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--magenta);
  margin:0 0 22px; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--magenta); opacity:.6;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:500;
  padding:13px 22px; border-radius:var(--r); border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn--sm{ padding:9px 16px; font-size:14px; }
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--magenta); }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--ghost svg{ transition:transform .2s ease; }
.btn--ghost:hover svg{ transform:translateX(3px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:14px 14px auto 14px; z-index:50;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:24px;
  padding:12px 20px;
  background:rgba(247,246,242,0.82); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:10px;
}
.wordmark{
  display:inline-flex; align-items:center; gap:10px;
  font-size:20px; font-weight:600; letter-spacing:-0.03em; color:var(--ink);
}
.wordmark__mark{ width:30px; height:30px; border-radius:7px; display:block; }
.wordmark__dx{ color:var(--magenta); }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:15px; color:var(--ink-70); transition:color .2s ease;
}
.nav__links a:hover{ color:var(--ink); }

/* ---------- hero (full-bleed, text overlay) ---------- */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--paper);
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  mix-blend-mode:multiply;
  filter:saturate(0.5) contrast(1.04) brightness(1.03);
  z-index:0;
}
/* paper scrim: readable on the left, art bleeds to the right */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(95deg, var(--paper) 22%, rgba(247,246,242,0.82) 42%, rgba(247,246,242,0.15) 66%, transparent 82%),
    linear-gradient(0deg, var(--paper) 2%, transparent 26%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:140px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:center; flex:1;
}
.hero__copy{ margin-top:auto; }
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(46px, 7vw, 104px); line-height:1.0; letter-spacing:-0.02em;
  margin:0 0 26px; color:var(--ink); max-width:16ch;
}
.hero__title em{ color:var(--magenta); }
.hero__sub{
  font-size:clamp(17px,1.5vw,21px); line-height:1.45; color:var(--ink-70);
  max-width:40ch; margin:0 0 18px;
}
.hero__sub strong{ color:var(--ink); font-weight:600; }
.hero__teaser{
  font-size:15px; line-height:1.5; color:var(--ink-50);
  max-width:44ch; margin:0 0 30px; padding-left:16px;
  border-left:2px solid var(--mint);
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:0; }

/* coverage strip — sits at the very bottom of the hero */
.coverage{ margin:36px 0 0; border-top:1px solid var(--line); padding-top:20px; display:grid; gap:11px; }
.coverage__row{ display:grid; grid-template-columns:76px 1fr; gap:16px; align-items:baseline; }
.coverage__row dt{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-30); margin:0;
}
.coverage__row dd{ margin:0; font-size:14px; color:var(--ink-70); letter-spacing:0; }
.coverage__row dd b{ color:var(--ink); font-weight:600; }

/* hero visual (video) */
.hero__visual{ display:flex; justify-content:center; align-items:center; }
.hero__video{
  width:100%; max-width:500px; height:auto; aspect-ratio:1/1;
  border-radius:12px; display:block;
  mix-blend-mode:multiply;               /* cream video melts into the paper */
  /* tonal ink-wash so the art stays neutral and brand mint/magenta stay the only colours */
  filter:grayscale(1) contrast(1.06) brightness(1.02);
}

/* scroll hint */
.hero__scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); }
.hero__scroll span{
  font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--ink-30);
}
.hero__scroll span::after{
  content:""; display:block; width:1px; height:26px; margin:8px auto 0;
  background:linear-gradient(var(--ink-30), transparent);
}

/* ---------- generic section ---------- */
.sec{ padding:clamp(64px,9vw,120px) var(--pad); }
.sec--tint{ background:var(--paper-2); }
.sec--dark{ background:var(--dark); color:var(--paper); }
.sec__wrap{ max-width:var(--maxw); margin:0 auto; }
.eyebrow--num{ gap:12px; }
.eyebrow--num::before{ display:none; }
.eyebrow--num span{
  font-variant-numeric:tabular-nums; color:var(--ink-30);
  border:1px solid var(--line); border-radius:5px; padding:2px 7px; margin-right:2px;
}
.sec__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,4.6vw,58px); line-height:1.05; letter-spacing:-0.02em;
  margin:0 0 22px; color:var(--ink); max-width:18ch;
}
.sec__title em{ color:var(--magenta); }
.sec__lead{
  font-size:clamp(16px,1.4vw,19px); line-height:1.5; color:var(--ink-70);
  max-width:56ch; margin:0 0 16px;
}
.sec__do{
  font-size:clamp(16px,1.4vw,19px); line-height:1.5; color:var(--ink-70);
  max-width:56ch; margin:0 0 8px; padding:16px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
}
.sec__do strong{ color:var(--ink); }

/* 3-facet strip */
.facets{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0 22px; }
.facet{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 20px; }
.facet__k{
  display:inline-block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--magenta); margin-bottom:9px;
}
.facet p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-70); }

/* convergence viz */
.converge{ margin-top:clamp(20px,3vw,36px); }
.converge__svg{ width:100%; height:auto; display:block; }
.converge__edges path{ stroke:var(--ink-30); opacity:.55; }
.converge__src rect{ fill:var(--paper); stroke:var(--line); }
.converge__src text{ fill:var(--ink-70); }
.converge__src-alt rect{ fill:rgba(60,224,140,0.08); stroke:rgba(60,224,140,0.4); }

/* pillars (solution) */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0 clamp(30px,5vw,52px); }
.pillar{ padding:22px 22px 24px; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); }
.pillar--hl{ background:rgba(60,224,140,0.07); border-color:rgba(60,224,140,0.35); }
.pillar__n{ font-size:12px; font-weight:600; color:var(--ink-30); letter-spacing:0.08em; }
.pillar h3{ font-family:var(--serif); font-weight:500; font-size:24px; margin:6px 0 8px; color:var(--ink); }
.pillar p{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-70); }

/* use-cases — "ChatGPT can't" rebuttal cards */
.ucs{ display:flex; flex-direction:column; gap:18px; margin-top:34px; }
.uc{ border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:24px 26px 22px; }
.uc__q{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.1vw,26px); color:var(--ink); margin:0 0 20px; letter-spacing:-0.01em; }
.uc__q span{ display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-50); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; margin-right:12px; vertical-align:middle; }
.uc__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.uc__col{ padding:18px 20px; border-radius:10px; }
.uc__col--bare{ background:var(--paper-2); border:1px solid var(--line); }
.uc__col--mdx{ background:var(--dark); }
.uc__k{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:9px; }
.uc__col--bare .uc__k{ color:var(--ink-50); }
.uc__col--mdx .uc__k{ color:var(--mint); }
.uc__col p{ margin:0; font-size:14.5px; line-height:1.5; }
.uc__col--bare p{ color:var(--ink-70); }
.uc__col--bare p b{ color:var(--ink); font-weight:600; }
.uc__col--mdx p{ color:rgba(247,246,242,0.82); }
.uc__col--mdx p b{ color:#fff; font-weight:600; }
.uc__col--mdx p em{ font-style:italic; color:var(--mint); }
.uc__punch{ margin:18px 0 0; font-size:15px; line-height:1.5; color:var(--ink); font-weight:600; padding-left:16px; border-left:3px solid var(--magenta); }

/* market — convergence bubbles (A) + bullseye (C) + bottom-up SOM */
.mkA{ width:100%; max-width:820px; height:auto; display:block; margin:30px auto 8px; }
.mkA .bub{ fill:rgba(200,75,214,0.08); stroke:rgba(200,75,214,0.45); }
.mkA .bub--big{ fill:rgba(200,75,214,0.11); }
.mkA .flow{ stroke:var(--ink-30); stroke-width:1.4; fill:none; stroke-dasharray:3 4; opacity:.6; }
.mkA .mktN{ font-family:var(--sans); font-weight:600; font-size:14px; fill:var(--ink); }
.mkA .mktV{ font-family:var(--serif); font-weight:600; font-size:22px; fill:var(--ink); }
.mkA .mktG{ font-family:var(--sans); font-size:11.5px; fill:var(--ink-50); }
.mkA .core{ fill:var(--dark); }
.mkA .coreT{ font-family:var(--serif); font-weight:600; font-size:20px; fill:#fff; text-anchor:middle; }
.mkA .coreS{ font-family:var(--sans); font-size:11px; fill:var(--mint); text-anchor:middle; letter-spacing:.06em; }

.mkC{ display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; margin:34px 0 30px; }
.mkC > svg{ width:320px; height:320px; }
.mkC .ring1{ fill:rgba(200,75,214,0.06); stroke:rgba(200,75,214,0.3); }
.mkC .ring2{ fill:rgba(200,75,214,0.11); stroke:rgba(200,75,214,0.4); }
.mkC .ring3{ fill:var(--dark); }
.mkC .rL{ font-family:var(--sans); font-weight:600; font-size:13px; fill:var(--ink); text-anchor:middle; letter-spacing:.08em; }
.mkC .rV{ font-family:var(--serif); font-weight:600; font-size:18px; fill:var(--ink); text-anchor:middle; }
.mkC .rVw{ fill:#fff; } .mkC .rLw{ fill:var(--mint); }
.mkC__key{ display:flex; flex-direction:column; gap:16px; }
.mkC__row b{ font-size:14px; letter-spacing:.01em; }
.mkC__row.t b, .mkC__row.s b{ color:var(--magenta); }
.mkC__row.o b{ color:#0c6b3f; }
.mkC__row p{ margin:5px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-70); }
.mkC__row p em{ font-style:normal; color:var(--ink); font-weight:600; }

.som{ margin:8px 0 22px; padding:24px 26px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; }
.som__k{ margin:0 0 18px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--magenta); }
.som__calc{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
.som__step{ flex:1; min-width:130px; padding:16px 16px 15px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.som__step b{ display:block; font-family:var(--serif); font-weight:600; font-size:30px; line-height:1; color:var(--ink); }
.som__step b i{ font-style:normal; font-size:15px; color:var(--ink-50); }
.som__step span{ display:block; margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-70); }
.som__step span em{ display:block; font-style:normal; font-size:11px; color:var(--ink-50); margin-top:4px; }
.som__step--out{ background:var(--dark); border-color:var(--dark); }
.som__step--out b{ color:var(--mint); }
.som__step--out span{ color:rgba(247,246,242,0.82); }
.som__step--out span em{ color:rgba(247,246,242,0.5); }
.som__op{ align-self:center; font-family:var(--serif); font-size:24px; color:var(--ink-30); }
.som__foot{ margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-50); }
.mk-src{ font-size:12px; line-height:1.5; color:var(--ink-30); margin:0; }

/* why now — 4 forces + thesis */
.forces{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:36px 0 26px; }
.force{ display:flex; flex-direction:column; padding:24px 22px 24px; border:1px solid var(--line); border-radius:12px; background:var(--paper); position:relative; }
.force__n{ font-family:var(--serif); font-size:22px; color:var(--ink-30); line-height:1; }
.force__k{ display:block; margin:14px 0 8px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--magenta); }
.force__h{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.12; color:var(--ink); margin:0 0 12px; letter-spacing:-0.01em; }
.force__p{ font-size:14px; line-height:1.5; color:var(--ink-70); margin:0; }
.force__p em{ font-style:italic; color:var(--ink); }
.thesis{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--ink-70); margin:0;
  padding:22px 26px; background:var(--dark); color:rgba(247,246,242,0.78); border-radius:12px; max-width:none; }
.thesis b{ display:block; color:var(--paper); font-weight:600; margin-bottom:6px; font-size:1.02em; }

/* business model — 3 lanes */
.lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:36px 0 24px; align-items:stretch; }
.lane{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; padding:26px 24px 24px; background:var(--paper-2); }
.lane--lead{ background:var(--paper); border-color:var(--mint); box-shadow:0 0 0 1px var(--mint) inset; }
.lane__tag{ align-self:flex-start; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-70); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.lane--lead .lane__tag{ color:#0c6b3f; background:rgba(60,224,140,.14); border-color:transparent; }
.lane__name{ font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.05; color:var(--ink); margin:16px 0 4px; letter-spacing:-0.01em; }
.lane__line{ font-size:16px; font-weight:600; color:var(--magenta); margin:0 0 12px; }
.lane--lead .lane__line{ color:#0c6b3f; }
.lane__who{ font-size:14.5px; line-height:1.5; color:var(--ink-70); margin:0 0 22px; flex:1; }
.lane__who code{ font-family:ui-monospace,monospace; font-size:12.5px; background:var(--paper); padding:1px 5px; border-radius:4px; }
.lane__price{ border-top:1px solid var(--line); padding-top:16px; }
.lane__price-k{ display:block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-30); margin-bottom:5px; }
.lane__price b{ display:block; font-size:17px; color:var(--ink); font-weight:600; }
.lane__price-sub{ display:block; font-size:13px; color:var(--ink-70); margin-top:3px; }
.lanes__foot{ font-size:15px; line-height:1.6; color:var(--ink-70); margin:0; padding:18px 22px; background:var(--paper-2); border-radius:var(--r); }
.lanes__foot b{ color:var(--ink); }

/* traction — metrics */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0 26px; }
.metric{ border:1px solid var(--line); border-radius:10px; padding:24px 24px 26px; background:var(--paper); }
.metric b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(40px,4.4vw,56px); line-height:1; color:var(--ink); letter-spacing:-0.02em; }
.metric b i{ font-style:normal; color:var(--magenta); }
.metric span{ display:block; margin-top:12px; font-size:15px; line-height:1.4; color:var(--ink-70); }
.metric span em{ display:block; font-style:normal; font-size:12px; color:var(--ink-30); margin-top:5px; }
.coverage-line{ font-size:15px; line-height:1.6; color:var(--ink-70); margin:0 0 30px; padding:16px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }
.coverage-line b{ color:var(--ink); font-weight:600; }
.surfaces{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; }
.surfaces__k{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-30); }
.surfaces a{ font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 14px; transition:border-color .2s, color .2s; }
.surfaces a:hover{ border-color:var(--ink); }
.surfaces code{ font-family:ui-monospace,monospace; font-size:13px; }

/* team — org chart (3 tiers) + directory, on dark */
.org{ display:flex; flex-direction:column; align-items:center; margin:38px 0 14px; }
.org-node{ text-align:center; border:1px solid rgba(247,246,242,0.2); border-radius:10px; padding:14px 26px; background:rgba(247,246,242,0.04); }
.org-node b{ display:block; font-size:20px; font-weight:600; color:var(--paper); letter-spacing:-0.01em; }
.org-node__role{ display:block; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(247,246,242,0.45); margin-bottom:8px; }
.org-node--ceo{ border-color:var(--mint); background:rgba(60,224,140,0.08); }
.org-hats{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px; }
.org-hats span{ font-size:11px; color:rgba(247,246,242,0.7); border:1px solid rgba(247,246,242,0.16); border-radius:5px; padding:3px 9px; }
.org-wire{ width:1px; height:30px; background:linear-gradient(rgba(247,246,242,0.4),rgba(247,246,242,0.15)); }
.org-depts{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; width:100%; margin-top:4px;
  padding-top:22px; border-top:1px solid rgba(247,246,242,0.12); align-items:start; }
.org-dept{ border:1px solid rgba(247,246,242,0.16); border-radius:9px; padding:12px 12px 14px; background:rgba(247,246,242,0.03); }
.org-dept__h{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding-bottom:9px; margin-bottom:4px; border-bottom:1px solid rgba(247,246,242,0.1); }
.org-dept__h b{ font-size:12.5px; font-weight:600; color:var(--paper); line-height:1.15; }
.org-dept__h span{ font-size:11px; font-weight:600; color:var(--mint); white-space:nowrap; }
.org-dept ul{ list-style:none; margin:0; padding:0; }
.org-dept li{ font-size:11px; color:rgba(247,246,242,0.6); padding:4px 0; line-height:1.2; }
.org-dept li.star{ color:var(--mint); font-weight:500; }
.org-dept li.star::after{ content:" ★"; font-size:8px; color:var(--mint); opacity:.8; }
.org-dept--wip{ border-style:dashed; border-color:rgba(200,75,214,0.4); }
.org-dept--wip .org-dept__h span{ color:var(--magenta); }
.org__cap{ text-align:center; font-size:14px; color:rgba(247,246,242,0.6); margin:16px 0 clamp(38px,5vw,56px); }
.org__cap b{ color:var(--paper); font-weight:600; }
.team-sub{ font-family:var(--serif); font-weight:500; font-size:26px; color:var(--paper); margin:0 0 20px; }
.directory{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dir-card{ border:1px solid rgba(247,246,242,0.14); border-radius:10px; padding:20px 22px; background:rgba(247,246,242,0.03); }
.dir-card__dept{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:rgba(247,246,242,0.4); }
.dir-card b{ display:block; font-size:17px; font-weight:600; color:var(--mint); margin:7px 0 9px; }
.dir-card p{ margin:0; font-size:13.5px; line-height:1.5; color:rgba(247,246,242,0.75); }
.dir-card p em{ font-style:normal; color:var(--paper); }

/* moat — army of humans vs one AI */
.army{ display:grid; grid-template-columns:1fr auto auto; gap:clamp(18px,3.5vw,44px); align-items:center; margin:32px 0 clamp(30px,4vw,44px); }
.army__side{ text-align:center; }
.army__grid{ display:grid; grid-template-columns:repeat(32,1fr); gap:2px 3px; }
.person{ width:100%; height:auto; fill:var(--ink-50); display:block; }
.army__vs{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,28px); color:var(--ink-30); }
.army__side--ai{ min-width:120px; }
.ai-server{ width:clamp(78px,7vw,100px); height:auto; }
.army__cap{ margin:14px 0 0; font-size:13.5px; color:var(--ink-50); }
.army__cap b{ color:var(--ink); font-weight:600; }

/* moat — them vs us */
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; margin:34px 0 clamp(28px,4vw,44px); }
.vs__col{ padding:26px 28px; border:1px solid var(--line); border-radius:10px; }
.vs__col--them{ background:var(--paper-2); border-top-right-radius:0; border-bottom-right-radius:0; }
.vs__col--us{ background:rgba(60,224,140,0.06); border-color:rgba(60,224,140,0.4); border-top-left-radius:0; border-bottom-left-radius:0; }
.vs__x{ display:flex; align-items:center; justify-content:center; padding:0 18px; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink-30); }
.vs__k{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; color:var(--ink-50); }
.vs__col--us .vs__k{ color:var(--magenta); }
.vs__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.vs__col li{ font-size:15px; line-height:1.4; color:var(--ink-70); padding-left:20px; position:relative; }
.vs__col--them li::before{ content:"—"; position:absolute; left:0; color:var(--ink-30); }
.vs__col--us li::before{ content:"✓"; position:absolute; left:0; color:var(--mint); font-weight:700; }
.vs__col--us li{ color:var(--ink); }

.moat2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.moat2__card{ padding:24px 26px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); }
.moat2__card--hl{ background:rgba(200,75,214,0.05); border-color:rgba(200,75,214,0.35); }
.moat2__k{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-30); }
.moat2__card--hl .moat2__k{ color:var(--magenta); }
.moat2__card h3{ font-family:var(--serif); font-weight:500; font-size:26px; margin:6px 0 10px; color:var(--ink); }
.moat2__card h3 em{ color:var(--magenta); font-style:italic; }
.moat2__card p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-70); }

/* dark section (trust) */
.sec--dark{ background:var(--dark); color:var(--paper); }
.eyebrow--dark{ color:var(--mint); }
.eyebrow--dark::before{ background:var(--mint); }
.sec__title.on-dark{ color:var(--paper); }
.sec__title.on-dark em{ color:var(--mint); }
.sec__lead.on-dark{ color:rgba(247,246,242,0.72); }
.sec__lead.on-dark strong{ color:var(--paper); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:38px 0 20px; }
.stat b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(38px,4.6vw,60px); line-height:1; color:var(--mint); letter-spacing:-0.02em; }
.stat span{ display:block; margin-top:12px; font-size:14px; line-height:1.4; color:rgba(247,246,242,0.82); }
.stat span em{ display:block; font-style:normal; font-size:11.5px; color:rgba(247,246,242,0.45); margin-top:4px; }
.trust-note{ font-size:14px; line-height:1.5; color:rgba(247,246,242,0.6); max-width:70ch; margin:0 0 34px; padding-top:20px; border-top:1px solid rgba(247,246,242,0.12); }
.trust-note em{ font-style:normal; color:var(--magenta); }
.layers{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:22px; }
.layers span{ font-size:13px; font-weight:500; padding:8px 14px; border:1px solid rgba(247,246,242,0.18); border-radius:6px; color:var(--paper); background:rgba(247,246,242,0.04); }
.layers i{ color:rgba(247,246,242,0.35); font-style:normal; }
.trust-honest{ font-size:15px; line-height:1.55; color:rgba(247,246,242,0.72); max-width:72ch; margin:0; }

/* competition — comparison table (dark) */
.cmp{ margin:34px 0 26px; overflow-x:auto; }
.cmp__t{ width:100%; border-collapse:collapse; font-size:14.5px; table-layout:fixed; }
.cmp__t thead th:not(:first-child){ width:22%; }
.cmp__t th, .cmp__t td{ text-align:center; padding:13px 14px; border-bottom:1px solid rgba(247,246,242,0.10); }
.cmp__t thead th{ vertical-align:top; border-bottom:1px solid rgba(247,246,242,0.22); }
.cmp__t th:first-child, .cmp__t td:first-child{ text-align:left; }
.cmp__cap{ width:34%; }
.cmp__t tbody td:first-child{ color:rgba(247,246,242,0.82); font-size:14.5px; }
.cmp__h{ display:block; font-family:var(--serif); font-weight:500; font-size:19px; color:var(--paper); line-height:1.1; }
.cmp__sub{ display:block; margin-top:6px; font-size:11px; line-height:1.35; color:rgba(247,246,242,0.42); font-weight:400; }
.cmp__t .y{ color:var(--mint); font-weight:600; }
.cmp__t .p{ color:rgba(247,246,242,0.45); }
.cmp__t .n{ color:rgba(247,246,242,0.28); }
.cmp__mdx{ background:rgba(60,224,140,0.07); }
.cmp__t thead .cmp__mdx{ border-bottom-color:var(--mint); }
.cmp__t thead .cmp__mdx .cmp__h{ color:var(--mint); }
.cmp__key td:first-child{ color:var(--paper)!important; font-weight:600; }
.cmp__honest td:first-child{ font-style:italic; color:rgba(247,246,242,0.55)!important; }
.cmp__foot{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.cmp__honest-box, .cmp__closest{ padding:22px 24px; border-radius:12px; border:1px solid rgba(247,246,242,0.14); background:rgba(247,246,242,0.03); }
.cmp__closest{ border-color:rgba(60,224,140,0.35); background:rgba(60,224,140,0.05); }
.cmp__foot h4{ margin:0 0 9px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--magenta); }
.cmp__closest h4{ color:var(--mint); }
.cmp__foot p{ margin:0; font-size:14.5px; line-height:1.55; color:rgba(247,246,242,0.72); }
.cmp__foot p b{ color:var(--paper); }
.cmp__foot p em{ font-style:italic; color:var(--paper); }

/* engine (orchestration iframe) */
.engine{ margin-top:clamp(28px,4vw,48px); }
.engine__frame{
  position:relative;
  height:min(74vh, 700px); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--paper-2); box-shadow:rgba(42,37,33,0.08) 0 6px 20px;
}
.engine__frame iframe{ width:100%; height:100%; border:0; display:block; }
.engine__expand{
  position:absolute; top:12px; right:12px; z-index:5;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink);
  background:rgba(247,246,242,0.92); border:1px solid var(--line); border-radius:7px;
  padding:8px 13px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .2s, border-color .2s;
}
.engine__expand:hover{ background:#fff; border-color:var(--ink); }
.engine__expand .ic-close{ display:none; }
.engine__frame.is-full{
  position:fixed; inset:0; z-index:9999; height:100vh; width:100vw;
  border:0; border-radius:0; box-shadow:none;
}
.engine__frame.is-full .ic-expand{ display:none; }
.engine__frame.is-full .ic-close{ display:inline; }
body.no-scroll{ overflow:hidden; }
.engine__cap{ text-align:center; margin:18px auto 0; max-width:70ch; font-size:15px; line-height:1.5; color:var(--ink-70); }
.engine__cap strong{ color:var(--ink); font-weight:600; }

/* showcase */
.showcase__stage{
  aspect-ratio:16/9; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:rgba(42,37,33,0.08) 0 6px 20px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.showcase__stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.showcase__cap{
  text-align:center; font-size:15px; color:var(--ink-70); margin:16px auto 22px; max-width:60ch;
}
.showcase__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.thumb{
  cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px; display:flex; flex-direction:column; gap:8px; align-items:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.thumb img{ width:100%; height:64px; object-fit:cover; object-position:top left; border-radius:4px; opacity:.85; }
.thumb span{ font-size:12px; font-weight:500; color:var(--ink-50); }
.thumb:hover{ border-color:var(--ink-30); }
.thumb.is-active{ border-color:var(--mint); box-shadow:rgba(60,224,140,0.25) 0 0 0 1px inset; }
.thumb.is-active span{ color:var(--ink); }
.thumb.is-active img{ opacity:1; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .hero__bg{ object-position:60% center; }
  .hero__scrim{
    background:
      linear-gradient(0deg, var(--paper) 30%, rgba(247,246,242,0.75) 55%, rgba(247,246,242,0.35) 100%);
  }
  .hero__title{ font-size:clamp(40px,11vw,66px); max-width:none; }
  .hero__inner{ padding-top:120px; }
}
@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none; }
  html{ scroll-behavior:auto; }
}