:root{
  --bg:#f7f7f5;
  --ink:#111111;
  --muted:#666666;
  --line:#e7e7e3;
  --blue:#2563eb;
  --violet:#7c3aed;
  --green:#10b981;
  --card:#ffffff;
  --soft:#fbfbfa;
  --shadow:0 24px 70px rgba(17,17,17,.08);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(24px);
  background:rgba(247,247,245,.84);
  border-bottom:1px solid rgba(231,231,227,.82);
}
.nav-inner{
  max-width:1240px;
  margin:0 auto;
  padding:18px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.03em;
}
.nav-links{
  display:flex;
  gap:16px;
  font-size:13px;
  color:#666;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.hero{
  padding:112px 0 92px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.orb{
  position:absolute;
  left:50%;
  bottom:-270px;
  transform:translateX(-50%);
  width:860px;
  height:860px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.18),rgba(37,99,235,.10) 35%,rgba(16,185,129,.06) 58%,transparent 70%);
  pointer-events:none;
}
.kicker{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  font-size:13px;
  margin-bottom:28px;
}
h1{
  font-size:clamp(64px,10vw,138px);
  line-height:.88;
  letter-spacing:-.085em;
  margin:0 0 28px;
  font-weight:600;
}
.grad{
  background:linear-gradient(100deg,#111 0%,#2563eb 38%,#7c3aed 66%,#10b981 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  font-size:clamp(20px,2.4vw,30px);
  color:#4c4c4c;
  max-width:780px;
  margin:0 auto;
  letter-spacing:-.03em;
}
.hero-card,.mockup{
  margin:72px auto 0;
  max-width:980px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  border-radius:36px;
  box-shadow:var(--shadow);
  padding:18px;
  position:relative;
  z-index:2;
  text-align:left;
}
.mockbar{
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:#777;
}
.dot{width:10px;height:10px;border-radius:50%;background:#d4d4d0}
.mockbody{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  padding:18px;
}
.input,.output,.screen-panel{
  border-radius:24px;
  background:#fbfbfa;
  border:1px solid var(--line);
  padding:24px;
}
.line{
  height:12px;
  border-radius:99px;
  background:#e8e8e3;
  margin-bottom:14px;
}
.magic{
  display:inline-flex;
  margin-top:18px;
  padding:10px 14px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.output h3{
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
  margin:0 0 12px;
}
.tile{
  height:58px;
  border-radius:16px;
  background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(124,58,237,.10));
  border:1px solid #e4e4ef;
  margin-top:14px;
}
section{
  padding:84px 0;
  border-top:1px solid var(--line);
}
.section-head{
  max-width:880px;
  margin-bottom:38px;
}
h2{
  font-size:clamp(36px,5vw,64px);
  line-height:1;
  letter-spacing:-.06em;
  margin:0 0 18px;
  font-weight:600;
}
.sub{
  font-size:20px;
  color:var(--muted);
  margin:0;
}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 12px 36px rgba(17,17,17,.035);
}
.card h3{
  font-size:22px;
  letter-spacing:-.035em;
  margin:0 0 10px;
}
.card p,.card li{
  color:var(--muted);
  font-size:16px;
}
.card ul{
  margin:12px 0 0;
  padding-left:18px;
}
.quote{
  background:#111;
  color:#fff;
  border-radius:36px;
  padding:48px;
  font-size:clamp(30px,4vw,54px);
  line-height:1.03;
  letter-spacing:-.065em;
  font-weight:600;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
}
.table th,.table td{
  padding:18px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.table th{
  background:#fafafa;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#555;
}
.table td{
  color:#555;
  font-size:15px;
}
.table tr:last-child td{border-bottom:0}
.flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:34px;
}
.flow-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  min-height:160px;
}
.flow-card:after{
  content:"→";
  position:absolute;
  right:-17px;
  top:48%;
  color:#aaa;
  font-size:22px;
}
.flow-card:last-child:after{display:none}
.flow-card strong{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#888;
  margin-bottom:10px;
}
.flow-card h3{
  margin:0 0 8px;
  font-size:20px;
}
.flow-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}
.spec-table{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
}
.spec-label,.spec-value{
  padding:20px;
  border-bottom:1px solid var(--line);
}
.spec-label{
  background:#fafafa;
  font-weight:600;
}
.spec-value{
  color:#555;
}
.spec-label:last-of-type,.spec-value:last-of-type{border-bottom:0}
.url-demo{
  background:#111;
  color:#fff;
  border-radius:32px;
  padding:34px;
  margin-top:32px;
}
.url-demo h3{
  font-size:30px;
  letter-spacing:-.045em;
  margin:0 0 18px;
}
.url-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:14px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.14);
  padding:16px 0;
}
.url-row:last-child{padding-bottom:0}
.url-label{
  color:#aaa;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
}
.url-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  color:#fff;
  font-size:18px;
}
.price{
  font-size:42px;
  line-height:1;
  letter-spacing:-.06em;
  font-weight:600;
  margin:12px 0;
}
.badge{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:12px;
  font-weight:600;
  margin-bottom:12px;
}
.mock-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:36px;
}
.screen{
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:18px;
  box-shadow:var(--shadow);
}
.screen-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:#777;
}
.screen-body{padding:20px 0 0}
.mini-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfbfa;
  padding:16px;
  margin-top:12px;
}
.gradient-block{
  height:120px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.18),rgba(16,185,129,.10));
  border:1px solid #e8e3ff;
}
.launch-card{
  background:linear-gradient(180deg,#ffffff,#fbfaff);
  border:1px solid #e8e3ff;
  border-radius:34px;
  padding:36px;
  box-shadow:var(--shadow);
}
.footer{
  padding:70px 0;
  text-align:center;
  color:#777;
  border-top:1px solid var(--line);
}
@media(max-width:950px){
  .nav-links{display:none}
  .mockbody,.grid-2,.grid-3,.grid-4,.flow,.spec-table,.url-row,.mock-grid{grid-template-columns:1fr}
  .flow-card:after{content:"↓";right:50%;top:auto;bottom:-24px;transform:translateX(50%)}
  .flow-card{margin-bottom:10px}
  h1{font-size:66px}
}
@media print{
  .nav{display:none}
  section{break-inside:avoid}
}


.interactive-shell{
  margin-top:38px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:38px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.interactive-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.78);
}
.interactive-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tab-btn{
  border:1px solid var(--line);
  background:#fbfbfa;
  color:#555;
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
}
.tab-btn.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.interactive-stage{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:560px;
}
.stage-sidebar{
  border-right:1px solid var(--line);
  background:#fbfbfa;
  padding:22px;
}
.stage-main{
  padding:24px;
  background:linear-gradient(180deg,#fff,#fbfaff);
}
.stage-panel{display:none}
.stage-panel.active{display:block}
.stage-title{
  font-size:42px;
  line-height:1;
  letter-spacing:-.06em;
  margin:0 0 12px;
}
.stage-copy{
  color:#666;
  font-size:17px;
  max-width:680px;
}
.mock-input{
  min-height:280px;
  border:1px dashed #d7d7d2;
  border-radius:24px;
  background:#fff;
  padding:24px;
  margin-top:24px;
}
.mock-action{
  display:inline-flex;
  margin-top:18px;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:13px 18px;
  font-size:14px;
  font-weight:600;
}
.published-page{
  max-width:720px;
  margin:24px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:28px;
  box-shadow:0 18px 50px rgba(17,17,17,.08);
}
.page-hero{
  height:170px;
  border-radius:24px;
  background:radial-gradient(circle at 30% 20%,rgba(124,58,237,.24),transparent 35%),
             linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.16),rgba(16,185,129,.10));
  border:1px solid #e8e3ff;
  margin-bottom:22px;
}
.page-url{
  display:inline-flex;
  padding:9px 12px;
  border-radius:999px;
  background:#f1f5ff;
  color:#3730a3;
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
}
.dashboard-list{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.dashboard-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
}
.status-pill{
  display:inline-flex;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:600;
  background:#ecfdf5;
  color:#047857;
}
.sidebar-metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  margin-bottom:12px;
}
.sidebar-metric strong{
  display:block;
  font-size:24px;
  letter-spacing:-.04em;
}
.sidebar-metric span{
  color:#777;
  font-size:13px;
}
@media(max-width:950px){
  .interactive-stage{grid-template-columns:1fr}
  .stage-sidebar{border-right:0;border-bottom:1px solid var(--line)}
  .interactive-top{align-items:flex-start;flex-direction:column}
}


.position-map{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:34px;
}
.position-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  align-items:start;
}
.position-card strong{
  font-size:20px;
  letter-spacing:-.035em;
}
.position-card span{
  color:#666;
  font-size:15px;
}
.mumd-position{
  border-color:#d8ccff;
  background:linear-gradient(180deg,#fff,#fbfaff);
  box-shadow:var(--shadow);
}
.moat-stack{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:34px;
}
.moat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
}
.moat-card .num{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-weight:600;
  margin-bottom:14px;
}
.flywheel{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-top:34px;
}
.flywheel-step{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  min-height:130px;
}
.flywheel-step:after{
  content:"→";
  position:absolute;
  right:-15px;
  top:45%;
  color:#aaa;
  font-size:22px;
}
.flywheel-step:last-child:after{display:none}
.flywheel-step strong{
  display:block;
  font-size:18px;
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.flywheel-step span{
  color:#666;
  font-size:14px;
}
.architecture{
  margin-top:34px;
  background:#111;
  color:#fff;
  border-radius:36px;
  padding:34px;
}
.arch-row{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
  margin-top:22px;
}
.arch-node{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  border-radius:20px;
  padding:18px 12px;
  text-align:center;
  font-size:14px;
  font-weight:600;
}
.arch-copy{
  color:#cfcfcf;
  max-width:820px;
  font-size:17px;
}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:34px;
}
.kpi-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
}
.kpi-card strong{
  display:block;
  font-size:28px;
  letter-spacing:-.05em;
  margin-bottom:8px;
}
.kpi-card span{
  color:#666;
  font-size:15px;
}
.example-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:34px;
}
.example-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 12px 36px rgba(17,17,17,.035);
}
.example-visual{
  height:150px;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(124,58,237,.18),rgba(16,185,129,.10));
  border-bottom:1px solid var(--line);
}
.example-body{
  padding:22px;
}
.example-body h3{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-.035em;
}
.example-body p{
  color:#666;
  margin:0;
  font-size:15px;
}
.brand-tokens{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-top:34px;
}
.brand-token{
  min-height:110px;
  border-radius:24px;
  padding:18px;
  color:#111;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:flex-end;
  font-weight:600;
  letter-spacing:-.035em;
}
.brand-token.gradient-token{
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed,#10b981);
  border:0;
}
.execution-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:34px;
}
.execution-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
}
.execution-card h3{
  margin:0 0 12px;
  font-size:22px;
  letter-spacing:-.035em;
}
.execution-card ul{
  margin:0;
  padding-left:18px;
}
.execution-card li{
  color:#666;
  font-size:15px;
  margin-bottom:8px;
}
@media(max-width:950px){
  .position-map,.position-card,.moat-stack,.flywheel,.arch-row,.kpi-grid,.example-grid,.brand-tokens,.execution-grid{
    grid-template-columns:1fr;
  }
  .flywheel-step:after{content:"↓";right:50%;top:auto;bottom:-22px;transform:translateX(50%)}
}


.position-map{
  grid-template-columns:repeat(2,1fr);
}
.position-card.mumd-position{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:220px 1fr;
  align-items:center;
  background:linear-gradient(100deg,rgba(37,99,235,.10),rgba(124,58,237,.14),rgba(16,185,129,.08));
  border:1px solid rgba(124,58,237,.28);
  box-shadow:0 24px 70px rgba(124,58,237,.12);
}
.position-card.mumd-position strong{
  font-size:28px;
  letter-spacing:-.055em;
}
.position-card.mumd-position span{
  font-size:18px;
  color:#3f3f46;
  font-weight:400;
}
@media(max-width:950px){
  .position-card.mumd-position{
    grid-template-columns:1fr;
  }
}

/* ============================================================================
   GOVERNED TYPOGRAPHY LAYER  (mumd-v2)
   Source of truth: UNIT-FE-V5 Typography Governance
     · Values  ← globals.css @theme, transcribed in TYPOGRAPHY-GOVERNANCE-LOCK.md §2
     · Roles   ← TYPOGRAPHY-GOVERNANCE-LOCK.md §3 (role → token map)
     · Hero    ← HERO-TYPOGRAPHY-DECISION.md  (display-xl 44px; 52–58px art-direction band)
     · Tracking← TRACKING-MICROCAP-DECISION.md (microcap scale 0.06 / 0.16 / 0.32em)
   This layer overrides ONLY typography (family / size / leading / tracking /
   weight / case). All layout, colour, spacing, gradients and the interactive
   mockup are inherited unchanged from the original cascade above.
   ========================================================================== */
:root{
  /* Families — canonical pairing (Lock §2.4). Named with system fallbacks so the
     file stays 100% standalone: no @import, no <link>, no external dependency. */
  --font-display:'Poppins','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;

  /* Size scale (Lock §2.1) */
  --fs-display-xl:44px; --fs-display-lg:36px; --fs-display-md:32px; --fs-display-sm:28px;
  --fs-title-lg:22px;   --fs-title-md:18px;
  --fs-body-lg:17px;    --fs-body-md:16px;  --fs-body-sm:15px;
  --fs-meta-lg:14px;    --fs-meta-md:13px;  --fs-meta-sm:12px; --fs-meta-xs:11px;

  /* Leading (Lock §2.2) */
  --lh-display:1.02; --lh-tight:1.08; --lh-snug:1.2; --lh-normal:1.45; --lh-loose:1.6;

  /* Tracking (Lock §2.3) */
  --tr-display:-0.032em; --tr-title:-0.028em; --tr-body:-0.01em; --tr-label:0.01em;
  --tr-microcap-tight:0.06em; --tr-microcap:0.16em; --tr-microcap-wide:0.32em;

  /* Weights — approved per role (Lock §2.4). 800/850/860 are banned. */
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Art-direction hero (Lock §5.1 carve-out). Floored at the governed hero token
     (display-xl 44px); ceiling 56px sits in the acknowledged 52–58px cinematic
     band — and matches the 56px hero in the governance visual spec. */
  --fs-hero:clamp(44px,6vw,56px);
}

/* ---- Global body: Inter (Lock §2.4 default face) ---- */
body{font-family:var(--font-sans);letter-spacing:var(--tr-body);line-height:var(--lh-loose)}

/* ---- Navigation typography ---- */
.brand{font-family:var(--font-display);font-size:var(--fs-title-md);font-weight:var(--fw-semibold);letter-spacing:var(--tr-display)} /* wordmark */
.nav-links{font-size:var(--fs-meta-xs)}
.nav-links a{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-medium)} /* tab role */

/* ---- Hero ---- */
.kicker{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--violet)} /* pageLabel */
h1{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)} /* heroTitle */
.lead{font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:var(--lh-loose);letter-spacing:var(--tr-body)} /* heroSubtitle (marketing) */
.mockbar{font-size:var(--fs-meta-sm)} /* metadata */
.output h3{font-family:var(--font-display);font-size:var(--fs-title-lg);line-height:var(--lh-snug);letter-spacing:var(--tr-title);font-weight:var(--fw-semibold)}
.magic{font-size:var(--fs-meta-md);font-weight:var(--fw-semibold)} /* button */

/* ---- Section heads ---- */
h2{font-family:var(--font-display);font-size:clamp(var(--fs-display-sm),4vw,var(--fs-display-md));line-height:var(--lh-tight);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)} /* pageTitle, responsive between display-sm/md */
.sub{font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:var(--lh-loose);letter-spacing:var(--tr-body)} /* heroSubtitle/lead */

/* ---- Cards ---- */
.card h3{font-family:var(--font-sans);font-size:var(--fs-body-sm);line-height:var(--lh-snug);letter-spacing:var(--tr-body);font-weight:var(--fw-semibold)} /* cardTitle */
.card p,.card li{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Tables ---- */
.table th{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* tableHeader */
.table td{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* tableCell */

/* ---- Flow / network-effect cards ---- */
.flow-card strong{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* label */
.flow-card h3{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */
.flow-card p{font-size:var(--fs-meta-md);line-height:var(--lh-normal)}

/* ---- Spec table ---- */
.spec-label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */
.spec-value{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- URL / identity demo ---- */
.url-demo h3{font-family:var(--font-display);font-size:var(--fs-title-lg);letter-spacing:var(--tr-title);font-weight:var(--fw-semibold)}
.url-label{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* tableHeader */
.url-value{font-family:var(--font-mono);font-size:var(--fs-body-sm)} /* metadata (mono) */

/* ---- Pricing ---- */
.price{font-family:var(--font-display);font-size:var(--fs-display-md);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)}
.badge{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* badge */

/* ---- Product screens ---- */
.screen-header{font-size:var(--fs-meta-sm)}
.screen-header strong{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */
.screen-header span{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* badge */
.mini-card strong{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */
.mini-card p{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Interactive mockup ---- */
.tab-btn{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-medium)} /* tab */
.stage-title{font-family:var(--font-display);font-size:var(--fs-display-sm);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)} /* pageTitle */
.stage-copy{font-size:var(--fs-body-lg);line-height:var(--lh-loose)} /* heroSubtitle */
.mock-action{font-size:var(--fs-meta-md);font-weight:var(--fw-semibold)} /* button */
.page-url{font-family:var(--font-mono);font-size:var(--fs-meta-sm);letter-spacing:var(--tr-body);font-weight:var(--fw-semibold);text-transform:none}
.status-pill{font-family:var(--font-mono);font-size:var(--fs-meta-xs);letter-spacing:var(--tr-microcap);text-transform:uppercase;font-weight:var(--fw-bold)} /* badge */
.sidebar-metric strong{font-family:var(--font-display);font-size:var(--fs-display-sm);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)}
.sidebar-metric span{font-size:var(--fs-meta-sm);line-height:var(--lh-normal)} /* metadata */
.dashboard-item strong{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */

/* ---- Competitive positioning (MUMD top row preserved) ---- */
.position-card strong{font-family:var(--font-sans);font-size:var(--fs-title-md);letter-spacing:var(--tr-title);font-weight:var(--fw-semibold)} /* sectionTitle */
.position-card span{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */
.position-card.mumd-position strong{font-family:var(--font-display);font-size:var(--fs-display-sm);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)}
.position-card.mumd-position span{font-size:var(--fs-body-lg);line-height:var(--lh-loose);font-weight:var(--fw-normal)}

/* ---- Moat ---- */
.moat-card .num{font-family:var(--font-display);font-size:var(--fs-title-md);font-weight:var(--fw-semibold);letter-spacing:var(--tr-display)}
.moat-card h3{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* cardTitle */
.moat-card p{font-size:var(--fs-meta-md);line-height:var(--lh-normal);color:var(--muted)} /* body */

/* ---- Network effects / flywheel ---- */
.flywheel-step strong{font-family:var(--font-sans);font-size:var(--fs-body-sm);letter-spacing:var(--tr-body);font-weight:var(--fw-semibold)} /* cardTitle */
.flywheel-step span{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Architecture ---- */
.architecture h3{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--tr-display)}
.arch-node{font-family:var(--font-sans);font-size:var(--fs-meta-md);font-weight:var(--fw-semibold);letter-spacing:var(--tr-body)} /* button-weight label */
.arch-copy{font-size:var(--fs-body-lg);line-height:var(--lh-loose)} /* heroSubtitle */

/* ---- KPIs ---- */
.kpi-card strong{font-family:var(--font-display);font-size:var(--fs-display-sm);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)}
.kpi-card span{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Product examples ---- */
.example-body h3{font-family:var(--font-sans);font-size:var(--fs-body-sm);letter-spacing:var(--tr-body);font-weight:var(--fw-semibold)} /* cardTitle */
.example-body p{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Brand system ---- */
.brand-token{font-family:var(--font-display);font-size:var(--fs-title-lg);font-weight:var(--fw-semibold);letter-spacing:var(--tr-display)}

/* ---- Execution strategy ---- */
.execution-card h3{font-family:var(--font-sans);font-size:var(--fs-body-sm);letter-spacing:var(--tr-body);font-weight:var(--fw-semibold)} /* cardTitle */
.execution-card li{font-size:var(--fs-meta-md);line-height:var(--lh-normal)} /* body */

/* ---- Footer ---- */
.footer{font-size:var(--fs-meta-md)}
.footer p{font-size:var(--fs-body-lg);line-height:var(--lh-loose)}

/* ============================================================================
   MULTI-PAGE SITE CHROME  (added for the split site — typography still governed)
   ========================================================================== */
/* ---- Three-zone header: LEFT logo · CENTER nav · RIGHT CTA ----
   Grid (1fr · auto · 1fr) guarantees the nav is optically centred regardless of
   logo/CTA widths — the Notion / Linear / Framer pattern. */
.nav-inner{
  max-width:1240px;
  margin:0 auto;
  padding:15px 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.nav-left{justify-self:start}
.nav-center{justify-self:center}
.nav-right{justify-self:end;display:flex;align-items:center}
.brand{display:inline-flex}

/* Center nav: governed `tab` role (Lock §3) — text-meta-xs (11px), uppercase,
   tracking-microcap (0.16em), font-medium, Inter. Muted → ink on hover. */
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-family:var(--font-sans);          /* tab role: Inter, NOT mono */
  font-size:var(--fs-meta-xs);           /* 11px */
  font-weight:var(--fw-medium);          /* 500 */
  letter-spacing:var(--tr-microcap);     /* 0.16em */
  text-transform:uppercase;
  color:#5b5666;
  transition:color .14s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:var(--fw-bold)}

/* Footer section index (carries the demoted secondary items). */
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 4px}
.footer-nav a{font-family:var(--font-sans);font-size:var(--fs-meta-md);font-weight:var(--fw-medium);
  letter-spacing:var(--tr-body);color:#7c7689;transition:color .14s ease}
.footer-nav a:hover{color:var(--ink)}
.footer-mark{font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--fs-display-sm);letter-spacing:var(--tr-display);color:#111;margin-top:22px}

/* Create ✨ — primary CTA pill. Brand gradient, premium lift on hover. The label is
   an action ("Create"), not a software noun. Links to the app (creation surface). */
.cta-create{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--green));
  color:#fff;
  font-family:var(--font-sans);          /* Inter — body face (Lock §2.4) */
  font-size:var(--fs-meta-md);            /* 13px — governed `button` role (Lock §3) */
  font-weight:var(--fw-semibold);         /* 600 — `button` role */
  letter-spacing:var(--tr-body);          /* button adds no tracking; body default */
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(124,58,237,.28);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cta-create:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(124,58,237,.40);
  filter:saturate(1.08) brightness(1.02);
}
.cta-create:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(124,58,237,.32);
}
.cta-create:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
}
.cta-create .cta-spark{
  font-size:14px;                         /* icon sits a hair above the 13px label */
  line-height:1;
  /* subtle shimmer so the sparkle reads as "magic", not an emoji afterthought */
  filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
}

.pager{
  max-width:1240px;
  margin:0 auto;
  padding:48px 28px 8px;
  display:flex;
  gap:14px;
}
.pager a{
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 36px rgba(17,17,17,.035);
  max-width:48%;
  transition:.16s;
}
.pager a:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pager a.next{margin-left:auto;text-align:right;align-items:flex-end}
.pager .pager-dir{
  font-family:var(--font-mono);
  font-size:var(--fs-meta-xs);
  letter-spacing:var(--tr-microcap);
  text-transform:uppercase;
  font-weight:var(--fw-bold);
  color:var(--muted);
}
.pager .pager-title{
  font-family:var(--font-sans);
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-body);
}

/* Mobile: keep all three zones usable. Row 1 = logo + CTA; the centered nav drops to
   a full-width row beneath, links left-aligned and wrapping. No JS, no hamburger. */
@media(max-width:860px){
  .nav-inner{grid-template-columns:1fr auto;row-gap:14px;padding:14px 20px}
  .nav-left{justify-self:start}
  .nav-right{justify-self:end}
  .nav-center{grid-column:1 / -1;justify-self:stretch;order:3}
  .nav-links{justify-content:flex-start;flex-wrap:wrap;gap:14px 20px}
  .cta-create{padding:9px 16px} /* size already governed to meta-md; just tighten padding */
  .pager a{max-width:100%}
}