/* ── Hero (editorial) ────────────────────────────────────── */
  .hero {
    padding: 80px 32px 64px;
    background:
      radial-gradient(ellipse at 80% -10%, var(--accent-bg) 0%, transparent 55%),
      #fff;
    border-bottom: 1px solid var(--border-1);
  }
  .hero-grid {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 64px; align-items: center;
  }
  .hero h1 {
    font: 700 64px/1.05 var(--font-sans);
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .hero h1 em {
    font-style: normal; color: var(--accent);
  }
  .hero .lede {
    font: 400 18px/1.55 var(--font-sans);
    color: var(--fg-2); margin-top: 24px; max-width: 460px;
  }
  .hero .actions {
    margin-top: 32px;
    display: flex; gap: 12px; align-items: center;
  }
  .hero .meta {
    margin-top: 28px;
    display: flex; gap: 24px;
    font: 500 11px var(--font-mono);
    color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .hero .meta .dot { color: var(--accent); }

  /* Product screenshot ── faux app frame */
  .scr-frame {
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow:
      0 1px 0 rgba(15,23,42,0.04),
      0 24px 60px rgba(15,23,42,0.16),
      0 4px 16px rgba(15,23,42,0.06);
    overflow: hidden;
  }
  .scr-titlebar {
    height: 28px; background: var(--bg-2);
    border-bottom: 1px solid var(--border-1);
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px;
  }
  .scr-titlebar .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #e2e8f0;
  }
  .scr-titlebar .url {
    margin-left: 12px;
    font: 500 11px var(--font-mono);
    color: var(--fg-3);
  }
  .scr-body { display: flex; flex-direction: column; height: 380px; }
  .scr-topbar {
    height: 40px; background: #fff;
    border-bottom: 1px solid var(--border-1);
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px;
    font: 500 11px var(--font-sans); color: var(--fg-2);
  }
  .scr-topbar .search {
    flex: 1; max-width: 280px;
    height: 24px;
    border: 1px solid var(--border-2); border-radius: 6px;
    padding: 0 8px;
    display: flex; align-items: center; gap: 6px;
    font: 500 11px var(--font-mono); color: var(--fg-1);
  }
  .scr-topbar .search .ph { color: var(--fg-3); }
  .scr-filterbar {
    height: 32px;
    border-bottom: 1px solid var(--border-1);
    display: flex; align-items: center; gap: 4px;
    padding: 0 12px; background: #fff;
  }
  .scr-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 0 8px;
    border: 1px solid var(--border-2); border-radius: 999px;
    background: #fff;
    font: 500 10px var(--font-sans); color: var(--fg-2);
  }
  .scr-chip.on {
    background: var(--accent-bg); color: var(--accent);
    border-color: var(--accent-border);
  }
  .scr-chip.boundary {
    background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; font-weight: 600;
  }
  .scr-main {
    flex: 1; display: grid; grid-template-columns: 1fr 220px;
    background: var(--bg-2);
  }
  .scr-map {
    position: relative;
    background:
      radial-gradient(circle at 30% 40%, #e0f2fe 0%, transparent 35%),
      radial-gradient(circle at 70% 60%, #fef3c7 0%, transparent 30%),
      linear-gradient(135deg, #f1f5f9, #e2e8f0);
    overflow: hidden;
  }
  .scr-map::before {
    content:''; position: absolute; inset: 0;
    background-image:
      linear-gradient(90deg, transparent 49%, #cbd5e1 49%, #cbd5e1 50%, transparent 50%),
      linear-gradient(0deg, transparent 33%, #cbd5e1 33%, #cbd5e1 33.5%, transparent 33.5%),
      linear-gradient(0deg, transparent 66%, #cbd5e1 66%, #cbd5e1 66.5%, transparent 66.5%);
    opacity: 0.55;
  }
  .scr-pin {
    position: absolute;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font: 600 9px var(--font-mono);
    box-shadow: 0 1px 4px rgba(15,23,42,0.3);
  }
  .scr-pin.sel {
    width: 30px; height: 30px;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.18), 0 2px 8px rgba(15,23,42,0.3);
    z-index: 2;
  }
  .scr-drawer {
    background: #fff;
    border-left: 1px solid var(--border-1);
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
  }
  .scr-drawer .addr {
    font: 600 12px var(--font-sans); color: var(--fg-1);
    line-height: 1.3;
  }
  .scr-drawer .count {
    font: 700 22px var(--font-mono); color: var(--accent);
    letter-spacing: -0.02em; line-height: 1;
  }
  .scr-drawer .clbl {
    font: 500 10px var(--font-sans); color: var(--fg-2);
  }
  .scr-tenant {
    border-top: 1px solid var(--border-1);
    padding-top: 6px; margin-top: 2px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .scr-tenant .name {
    font: 600 11px var(--font-sans); color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .scr-tenant .meta {
    font: 500 10px var(--font-mono); color: var(--fg-3);
    letter-spacing: 0.02em;
  }

  /* ── Logos / proof bar ───────────────────────────────────── */
  .proof {
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
    padding: 28px 32px;
    background: var(--bg-2);
  }
  .proof-grid {
    max-width: 1180px; margin: 0 auto;
    display: flex; gap: 48px; align-items: center;
    flex-wrap: wrap;
  }
  .proof .lbl {
    font: 600 11px var(--font-sans);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-3);
  }
  .proof .sources {
    flex: 1; display: flex; flex-wrap: wrap; gap: 6px;
  }
  .src-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px;
    border-radius: 999px;
    font: 500 11px var(--font-mono); letter-spacing: 0.02em;
    color: #fff;
  }
  .src-pill .ct {
    font-weight: 700; opacity: 0.85;
  }

  /* ── Capability rows (the "what does it do") ────────────── */
  .caps {
    padding: 96px 32px;
    background: #fff;
  }
  .caps-head {
    max-width: 1180px; margin: 0 auto 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: end;
  }
  .caps-grid {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--border-1);
    border: 1px solid var(--border-1); border-radius: var(--r-md);
    overflow: hidden;
  }
  .cap {
    background: #fff;
    padding: 28px 28px 32px;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 260px;
  }
  .cap .num {
    font: 700 13px var(--font-mono);
    color: var(--accent); letter-spacing: 0.06em;
  }
  .cap h3 {
    font: 600 22px/1.25 var(--font-sans);
    letter-spacing: -0.015em; color: var(--fg-1);
  }
  .cap p {
    font: 400 14px/1.55 var(--font-sans);
    color: var(--fg-2);
  }
  .cap .ex {
    margin-top: auto;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-1); border-radius: var(--r-sm);
    font: 500 11px var(--font-mono); color: var(--fg-2);
    line-height: 1.5;
  }
  .cap .ex .k { color: var(--fg-3); }
  .cap .ex .v { color: var(--fg-1); }

  /* ── Comparison table (positioning) ──────────────────────── */
  .compare {
    padding: 96px 32px;
    background: var(--bg-2);
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
  }
  .compare .ttl {
    max-width: 1180px; margin: 0 auto 40px;
    display: flex; justify-content: space-between; align-items: end;
    gap: 64px;
  }
  .compare table {
    max-width: 1180px; margin: 0 auto;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-1); border-radius: var(--r-md);
    border-collapse: separate; border-spacing: 0;
    overflow: hidden;
  }
  .compare th, .compare td {
    text-align: left;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-1);
    font-size: 13px; vertical-align: middle;
  }
  .compare thead th {
    font: 600 11px var(--font-sans);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-3);
    background: var(--bg-2);
  }
  .compare thead th.us {
    color: var(--accent); border-bottom: 2px solid var(--accent);
  }
  .compare tbody tr:last-child td { border-bottom: 0; }
  .compare .row-h {
    font: 500 13px var(--font-sans); color: var(--fg-1);
    width: 32%;
  }
  .compare .col-us { color: var(--accent); font-weight: 600; }
  .compare .check { color: var(--green); font-weight: 700; font-size: 16px; }
  .compare .x { color: var(--fg-3); font-weight: 700; font-size: 16px; }
  .compare .partial { color: var(--amber); font-weight: 600; font-size: 12px; }

  /* ── Closing CTA ─────────────────────────────────────────── */
  .closing {
    padding: 96px 32px;
    background: var(--fg-1);
    color: var(--deck-text);
    position: relative; overflow: hidden;
  }
  .closing::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--deck-accent);
  }
  .closing-grid {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
    align-items: center;
  }
  .closing h2 {
    font: 700 44px/1.1 var(--font-sans);
    letter-spacing: -0.025em;
    color: var(--deck-text);
    text-wrap: balance;
  }
  .closing h2 em {
    font-style: normal; color: var(--deck-accent);
  }
  .closing p {
    font: 400 16px/1.55 var(--font-sans);
    color: var(--deck-text-dim);
    margin-top: 20px; max-width: 460px;
  }
  .closing .actions {
    margin-top: 32px; display: flex; gap: 12px;
  }
  .closing .btn {
    background: var(--deck-accent); border-color: var(--deck-accent); color: var(--deck-bg);
  }
  .closing .btn:hover { background: #d97706; border-color: #d97706; }
  .closing .btn.outline {
    background: transparent; border-color: var(--deck-border); color: var(--deck-text);
  }
  .closing .btn.outline:hover { background: var(--deck-panel); }
  .closing .takeaways {
    display: flex; flex-direction: column; gap: 12px;
  }
  .closing .tk {
    background: var(--deck-panel-2);
    border-left: 4px solid var(--deck-accent);
    padding: 14px 18px; border-radius: 4px;
  }
  .closing .tk .num {
    font: 700 11px var(--font-mono); color: var(--deck-accent);
    letter-spacing: 0.08em;
  }
  .closing .tk .body {
    font: 500 14px/1.4 var(--font-sans); color: var(--deck-text);
    margin-top: 4px;
  }

  /* ── Extension showcase ──────────────────────────────── */
  .ext-sec {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 96px 32px;
    border-bottom: 1px solid var(--deck-border);
    color: var(--deck-text);
    position: relative; overflow: hidden;
  }
  .ext-sec::after {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(245,158,11,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,158,11,0.035) 1px, transparent 1px);
    background-size: 56px 56px; pointer-events: none;
  }
  .ext-grid {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px;
    align-items: center;
  }
  .ext-copy .eyebrow { color: var(--deck-accent); }
  .ext-copy h2 {
    font: 700 44px/1.1 var(--font-sans);
    letter-spacing: -0.025em; color: var(--deck-text);
    margin-top: 16px; text-wrap: balance;
  }
  .ext-copy .sub {
    font: 400 17px/1.55 var(--font-sans);
    color: var(--deck-text-dim); margin-top: 16px; max-width: 460px;
  }
  .ext-steps {
    margin-top: 32px; display: flex; flex-direction: column; gap: 4px;
  }
  .ext-step {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--deck-border);
  }
  .ext-step:last-child { border-bottom: 1px solid var(--deck-border); }
  .ext-step .n {
    font: 700 12px var(--font-mono); color: var(--deck-accent);
    letter-spacing: 0.04em; padding-top: 3px; min-width: 24px;
  }
  .ext-step .t {
    font: 600 15px var(--font-sans); color: var(--deck-text);
  }
  .ext-step .d {
    font: 400 13px/1.5 var(--font-sans); color: var(--deck-text-dim);
    margin-top: 3px;
  }
  .ext-cta {
    margin-top: 32px; display: flex; gap: 12px; align-items: center;
  }
  .ext-install {
    display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 20px;
    background: #fff; color: #0f172a;
    border-radius: 8px; text-decoration: none;
    font: 600 14px var(--font-sans);
  }
  .ext-install:hover { background: #f1f5f9; }
  .ext-install .chrome {
    width: 20px; height: 20px; border-radius: 50%;
    background:
      conic-gradient(from -30deg, #ea4335 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75%);
    position: relative;
  }
  .ext-install .chrome::after {
    content: ''; position: absolute; inset: 6px;
    background: #fff; border-radius: 50%;
    box-shadow: inset 0 0 0 2px #1a73e8;
  }
  .ext-rating {
    font: 500 12px var(--font-mono); color: var(--deck-text-dim);
    letter-spacing: 0.02em;
  }
  .ext-rating .star { color: var(--deck-accent); }

  /* Faux browser window holding the popup */
  .ext-stage { position: relative; }
  .browser {
    background: #1b2230;
    border: 1px solid var(--deck-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  }
  .browser-bar {
    height: 40px; background: #11161f;
    border-bottom: 1px solid #000;
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
  }
  .browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
  .browser-url {
    flex: 1; margin: 0 8px 0 12px; height: 24px;
    background: #1b2230; border-radius: 6px;
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    font: 500 11px var(--font-mono); color: var(--deck-text-dim);
  }
  .browser-ext-btn {
    width: 26px; height: 26px; border-radius: 6px;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--font-sans); color: #fff;
    position: relative; flex-shrink: 0;
  }
  .browser-ext-btn::after {
    content: ''; position: absolute; top: -2px; right: -2px;
    width: 8px; height: 8px; background: #ef4444;
    border: 2px solid #11161f; border-radius: 50%;
  }
  .browser-body {
    position: relative;
    height: 596px;
    background: #f6f5f1;
    overflow: hidden;
  }
  .listing { padding: 0; opacity: 0.5; filter: saturate(0.7); }
  .listing-nav {
    height: 44px; background: #14181f;
    display: flex; align-items: center; gap: 16px; padding: 0 20px;
  }
  .listing-nav .b { font: 700 14px var(--font-sans); color: #fff; }
  .listing-nav .b em { color: #ef6c2c; font-style: normal; }
  .listing-hero {
    height: 150px;
    background:
      linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,0.3)),
      linear-gradient(135deg, #94a3b8, #64748b);
    position: relative;
  }
  .listing-hero::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 28px, transparent 28px 56px);
    clip-path: polygon(0 100%,0 40%,14% 40%,14% 20%,32% 20%,32% 30%,52% 30%,52% 8%,66% 8%,66% 24%,82% 24%,82% 14%,100% 14%,100% 100%);
  }
  .listing-body { padding: 20px 24px; }
  .listing-body .h { font: 700 22px var(--font-sans); color: #0f172a; }
  .listing-body .s { font: 500 13px var(--font-sans); color: #475569; margin-top: 4px; }
  .listing-body .rows { margin-top: 16px; display: grid; gap: 8px; }
  .listing-body .r { height: 10px; background: rgba(15,23,42,0.08); border-radius: 4px; }
  .listing-body .r:nth-child(2) { width: 80%; }
  .listing-body .r:nth-child(3) { width: 60%; }

  .pp {
    position: absolute; top: 14px; right: 18px;
    width: 320px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 24px 50px rgba(0,0,0,0.4);
    overflow: hidden;
    font-family: var(--font-sans);
    color: #0f172a;
  }
  .pp::before {
    content: ''; position: absolute; top: -6px; right: 22px;
    width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
  }
  .pp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,0.08);
    position: relative; z-index: 1;
  }
  .pp-logo { font: 600 12px var(--font-sans); letter-spacing: -0.02em; }
  .pp-logo .dot { color: var(--accent); }
  .pp-status {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font: 500 9px var(--font-mono); color: #15803d;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .pp-status .pulse {
    width: 5px; height: 5px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  }
  .pp-hero {
    display: grid; grid-template-columns: 92px 1fr; gap: 10px;
    padding: 10px 12px 12px; background: #f8fafc;
    border-bottom: 1px solid rgba(15,23,42,0.08);
  }
  .pp-hero-img {
    height: 80px; border-radius: 7px; position: relative; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,0.55)),
      linear-gradient(135deg, #cbd5e1, #64748b);
  }
  .pp-hero-img::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 4px, transparent 4px 9px);
    clip-path: polygon(0 100%,0 38%,12% 38%,12% 22%,28% 22%,28% 30%,44% 30%,44% 6%,56% 6%,56% 22%,72% 22%,72% 12%,86% 12%,86% 34%,100% 34%,100% 100%);
  }
  .pp-hero-img .tag {
    position: absolute; left: 5px; bottom: 5px;
    background: var(--accent); color: #fff;
    font: 600 8px var(--font-mono); letter-spacing: 0.06em;
    padding: 2px 5px; border-radius: 3px;
  }
  .pp-hero .lbl {
    font: 500 8px var(--font-mono); color: #94a3b8;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .pp-hero .a { font: 700 15px var(--font-sans); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.1; }
  .pp-hero .a2 { font: 500 10px var(--font-sans); color: #475569; margin-top: 2px; }
  .pp-hero .ids { display: flex; gap: 10px; margin-top: 6px; }
  .pp-hero .ids .k { font: 500 7px var(--font-mono); color: #94a3b8; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
  .pp-hero .ids .v { font: 600 9px var(--font-mono); color: #0f172a; }
  .pp-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 12px; gap: 8px; border-bottom: 1px solid rgba(15,23,42,0.06);
  }
  .pp-kpis .kpi { border-right: 1px dashed rgba(15,23,42,0.1); padding-right: 6px; }
  .pp-kpis .kpi:last-child { border-right: 0; }
  .pp-kpis .v { font: 700 16px var(--font-mono); letter-spacing: -0.02em; line-height: 1; }
  .pp-kpis .v .u { font-size: 10px; color: #64748b; }
  .pp-kpis .l { font: 500 8px var(--font-sans); color: #94a3b8; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
  .pp-sec { padding: 11px 12px; border-bottom: 1px solid rgba(15,23,42,0.06); }
  .pp-sec-h { display: flex; align-items: center; margin-bottom: 9px; }
  .pp-sec-h .t { font: 600 9px var(--font-sans); color: #475569; letter-spacing: 0.08em; text-transform: uppercase; }
  .pp-sec-h .s { margin-left: auto; font: 500 9px var(--font-mono); color: #94a3b8; }
  .pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
  .pp-facts .k { font: 500 8px var(--font-mono); color: #94a3b8; letter-spacing: 0.04em; text-transform: uppercase; }
  .pp-facts .v { font: 500 12px var(--font-sans); margin-top: 2px; }
  .pp-facts .v.mono { font-family: var(--font-mono); font-size: 11px; }
  .pp-val { display: flex; flex-direction: column; gap: 6px; }
  .pp-val .row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
    padding: 7px 9px; background: #f8fafc; border: 1px solid rgba(15,23,42,0.06); border-radius: 6px;
  }
  .pp-val .k { font: 500 9px var(--font-mono); color: #64748b; letter-spacing: 0.04em; text-transform: uppercase; }
  .pp-val .v { font: 600 12px var(--font-mono); }
  .pp-val .v.big { font-size: 14px; }
  .pp-val .d { font: 600 9px var(--font-mono); }
  .pp-val .d.up { color: #15803d; }
  .pp-val .d.mute { color: #94a3b8; }
  .pp-linked { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
  .pp-link {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 9px; border: 1px solid rgba(15,23,42,0.08); border-radius: 8px;
  }
  .pp-link .av {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 10px var(--font-mono); color: #fff;
  }
  .pp-link .av.o { background: #1e3a8a; }
  .pp-link .av.t { background: #166534; }
  .pp-link .k { font: 500 8px var(--font-mono); color: #94a3b8; letter-spacing: 0.06em; text-transform: uppercase; }
  .pp-link .v { font: 600 11px var(--font-sans); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-link .arr { margin-left: auto; color: #94a3b8; font-size: 13px; }
  .pp-foot {
    padding: 9px 12px; background: #f8fafc; border-top: 1px solid rgba(15,23,42,0.08);
    display: flex; align-items: center; gap: 6px;
  }
  .pp-btn {
    height: 30px; padding: 0 11px; border-radius: 6px; border: 1px solid transparent;
    font: 600 11px var(--font-sans); display: inline-flex; align-items: center; gap: 5px;
  }
  .pp-btn.primary { background: var(--accent); color: #fff; }
  .pp-btn.ghost { background: transparent; color: #475569; border-color: rgba(15,23,42,0.1); margin-left: auto; }

  /* Extension — robust layout */
  .ext-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
  .ext-head2 { max-width: 760px; }
  .ext-head2 .eyebrow { color: var(--deck-accent); }
  .ext-head2 h2 {
    font: 700 44px/1.1 var(--font-sans);
    letter-spacing: -0.025em; color: var(--deck-text);
    margin-top: 16px; text-wrap: balance;
  }
  .ext-head2 .sub {
    font: 400 17px/1.55 var(--font-sans);
    color: var(--deck-text-dim); margin-top: 16px; max-width: 560px;
  }
  .ext-steps-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 36px;
  }
  .estep { border-top: 2px solid var(--deck-accent); padding-top: 14px; }
  .estep .n { font: 700 12px var(--font-mono); color: var(--deck-accent); letter-spacing: 0.04em; }
  .estep .t { font: 600 15px var(--font-sans); color: var(--deck-text); margin-top: 8px; }
  .estep .d { font: 400 13px/1.5 var(--font-sans); color: var(--deck-text-dim); margin-top: 4px; }

  .ext-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 48px auto 0; max-width: 760px; }
  .ex-card .ex-cap {
    font: 600 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--deck-text-dim); margin-bottom: 10px;
  }
  .ex-card .ex-cap b { color: var(--deck-accent); font-weight: 700; }
  .ex-frame {
    border: 1px solid var(--deck-border); border-radius: 10px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4); background: #11161f;
  }
  .ex-body { padding: 0; }
  .ex-frame .pp { position: static; width: 100%; border-radius: 0; box-shadow: none; }
  .ex-frame .pp::before { display: none; }

  .ext-save {
    margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--deck-border);
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  .ext-save .eyebrow { color: var(--deck-accent); }
  .ext-save h3 {
    font: 700 30px/1.15 var(--font-sans); letter-spacing: -0.02em;
    color: var(--deck-text); margin-top: 14px; text-wrap: balance;
  }
  .ext-save p { font: 400 15px/1.6 var(--font-sans); color: var(--deck-text-dim); margin-top: 14px; max-width: 440px; }
  .ext-save .feats { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
  .ext-save .feat { display: flex; gap: 10px; font: 400 14px/1.4 var(--font-sans); color: var(--deck-text); }
  .ext-save .feat .ck { color: var(--deck-accent); font-weight: 700; flex-shrink: 0; }
  .watchlist {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    font-family: var(--font-sans); color: #0f172a;
  }
  .watchlist .wh {
    padding: 13px 16px; border-bottom: 1px solid rgba(15,23,42,0.08);
    display: flex; align-items: center; gap: 10px;
  }
  .watchlist .wh .ic {
    width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font: 700 11px var(--font-sans);
  }
  .watchlist .wh .ttl { font: 600 13px var(--font-sans); }
  .watchlist .wh .ttl span { color: #94a3b8; font: 500 10px var(--font-mono); letter-spacing: 0.04em; }
  .wl-tabs { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid rgba(15,23,42,0.06); }
  .wl-tab { font: 600 11px var(--font-sans); padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; }
  .wl-tab.on { background: #eff6ff; color: #2563eb; }
  .wl-row { padding: 11px 16px; border-bottom: 1px solid rgba(15,23,42,0.06); display: flex; align-items: center; gap: 11px; }
  .wl-row:last-of-type { border-bottom: 0; }
  .wl-ic { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
  .wl-ic.b { background: #eff6ff; } .wl-ic.c { background: #ecfdf5; }
  .wl-bd { flex: 1; min-width: 0; }
  .wl-nm { font: 600 13px var(--font-sans); color: #0f172a; }
  .wl-mt { font: 500 10px var(--font-mono); color: #94a3b8; letter-spacing: 0.02em; margin-top: 2px; }
  .wl-tag { font: 600 9px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
  .wl-tag.b { background: #eff6ff; color: #1d4ed8; } .wl-tag.c { background: #ecfdf5; color: #166534; }
  .wl-star { color: #f59e0b; font-size: 14px; }
  .wl-foot { padding: 10px 16px; background: #f8fafc; display: flex; gap: 8px; align-items: center; }
  .wl-btn { font: 600 11px var(--font-sans); height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
  .wl-btn.primary { background: var(--accent); color: #fff; }
  .wl-btn.ghost { background: #fff; color: #475569; border-color: rgba(15,23,42,0.12); }

  /* ── One-building data table (dark) ───────────────────── */
  .cmp-sec {
    background: linear-gradient(135deg, #0f172a 0%, #152033 100%);
    padding: 96px 32px;
    color: var(--deck-text);
    border-bottom: 1px solid var(--deck-border);
  }
  .cmp-sec .head { max-width: 1180px; margin: 0 auto 48px; }
  .cmp-sec .eyebrow { color: var(--deck-accent); }
  .cmp-sec h2 {
    font: 700 44px/1.1 var(--font-sans);
    letter-spacing: -0.025em; margin-top: 16px;
    text-wrap: balance; max-width: 760px;
  }
  .cmp-table {
    max-width: 1180px; margin: 0 auto;
    width: 100%;
    border-collapse: separate; border-spacing: 0;
  }
  .cmp-table th, .cmp-table td {
    text-align: left; padding: 18px 22px;
    border-bottom: 1px solid var(--deck-border);
    font-size: 14px; vertical-align: middle;
  }
  .cmp-table thead th {
    font: 600 11px var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--deck-text-dim);
    border-bottom: 1px solid var(--deck-accent);
  }
  .cmp-table thead th.us { color: var(--deck-accent); }
  .cmp-table tbody tr:nth-child(odd) { background: rgba(245, 158, 11, 0.04); }
  .cmp-table .col-us { color: var(--deck-accent); font-weight: 600; }
  .cmp-table td.ex {
    font-family: var(--font-mono); color: var(--deck-accent);
    font-size: 13px; white-space: nowrap;
  }
  .cmp-table .field-nm { font: 600 14px var(--font-sans); color: var(--deck-text); }
  .cmp-table .field-src {
    font: 500 10px var(--font-mono); color: var(--deck-text-dim);
    letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px;
  }
  .cmp-table td .use { font: 400 13px/1.45 var(--font-sans); color: var(--deck-text-dim); }
  .cmp-table tr.group { background: transparent !important; }
  .cmp-table tr.group td {
    padding: 26px 22px 8px;
    border-bottom: 1px solid var(--deck-accent);
    font: 700 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--deck-accent);
  }
  .cmp-table tr.group td .gn {
    color: var(--deck-text-dim); font-weight: 500; margin-left: 8px;
  }

  @media (max-width: 960px) {
    .hero-grid, .caps-head, .closing-grid { grid-template-columns: 1fr; gap: 32px; }
    .caps-grid { grid-template-columns: 1fr; }
    .ext-grid { grid-template-columns: 1fr; gap: 40px; }
    .ext-steps-row, .ext-examples, .ext-save { grid-template-columns: 1fr; gap: 28px; }
    .hero h1 { font-size: 44px; }
    .mk-foot-grid { grid-template-columns: 1fr 1fr; }
  }

/* ── Marketing chrome (subset of mvp.css the homepage uses) + scoped reset ── */
.mk-home, .mk-home *, .mk-home *::before, .mk-home *::after { box-sizing: border-box; }
.mk-home h1, .mk-home h2, .mk-home h3, .mk-home h5, .mk-home p, .mk-home figure { margin: 0; }
.mk-home ul { margin: 0; padding: 0; list-style: none; }
.mk-home {
  font-family: var(--font-sans); font-size: var(--fs-md);
  color: var(--fg-1); background: #fff;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.mk-home a { color: var(--accent); text-decoration: none; }
.mk-home a:hover { color: var(--accent-hover); }
.mk-home button { font-family: var(--font-sans); cursor: pointer; }

/* Marketing nav */
.mk-nav {
  position: sticky; top: 0; z-index: 50; height: 56px;
  display: flex; align-items: center; padding: 0 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-1);
}
.mk-nav .logo { font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--fg-1); }
.mk-nav .logo .dot { color: var(--accent); }
.mk-nav .links { display: flex; gap: 24px; margin-left: 36px; font: 500 13px var(--font-sans); }
.mk-nav .links a { color: var(--fg-2); padding: 4px 0; border-bottom: 1px solid transparent; cursor: pointer; }
.mk-nav .links a:hover { color: var(--fg-1); }
.mk-nav .links a.active { color: var(--fg-1); border-bottom-color: var(--accent); }
.mk-nav .spacer { flex: 1; }
.mk-nav .nav-cta { display: flex; gap: 8px; align-items: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: #fff; color: var(--fg-1); font: 500 13px var(--font-sans);
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--fg-1); }
.btn.lg { height: 40px; padding: 0 18px; font-size: var(--fs-md); }

/* Eyebrow + headings + lede */
.eyebrow { font: 600 11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eyebrow.gold { color: var(--deck-accent); }
.mk-h2 { font: 700 36px/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; }
.mk-lede { font: 400 18px/1.55 var(--font-sans); color: var(--fg-2); text-wrap: pretty; }

/* Footer */
.mk-foot { border-top: 1px solid var(--border-1); padding: 48px 32px 32px; background: #fff; }
.mk-foot-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.mk-foot h5 { font: 600 11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.mk-foot ul { display: flex; flex-direction: column; gap: 8px; }
.mk-foot a { color: var(--fg-2); font-size: 13px; cursor: pointer; }
.mk-foot a:hover { color: var(--fg-1); }
.mk-foot-meta {
  max-width: 1180px; margin: 32px auto 0; padding-top: 20px;
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center;
  font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: 0.04em;
}

/* Logo lockup + wordmark */
.brand-lock { display: inline-flex; align-items: center; gap: 9px; }
.wm { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--fg-1); }
.wm .dot { color: var(--accent); }
.mono-meta { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: 0.04em; }
.sp { flex: 1; }