/* EVULNABLE apex lander — evulnable.com/
 *
 * Built from evulnable_unified_landing_team_brief_rev4.html (light,
 * primary) and its rev8-dark companion, both approved through four
 * review rounds (Marc, 2026-09-06/07 handoff). Loaded only by GET / -
 * webui/routes/lander.py - kept out of app.css/preview.css because
 * nothing else on the site shares this markup.
 *
 * Two changes from the supplied mockups, both load-bearing, same reasons
 * as preview.css's own header comment:
 *
 * 1. No inline style="" attribute anywhere in lander.html. The site's CSP
 *    ships style-src 'self' with nothing after it - no 'unsafe-inline',
 *    no style-src-attr fallback (Firefox does not implement the latter
 *    and would silently fall back to style-src, dropping every inline
 *    style on the page). The handful the mockup's DD report sample used
 *    are named classes here instead: .chooser-eyebrow, .dd-report,
 *    .dd-report-title, .dd-report-company, .dd-report-summary,
 *    .dd-report-summary-title, .dd-report-summary-text.
 * 2. No inline <style> block and no data: URIs for the four logo
 *    instances. img-src is 'self' in the CSP (no data:), so the mockup's
 *    embedded base64 PNG could never have rendered here anyway - all four
 *    now reference the same /assets/evulnable-logo-transparent.png the
 *    rest of the site already serves.
 *
 * Dark mode: the mockup shipped as two complete static HTML files (light
 * primary, dark a full second copy with the same markup and an appended
 * override block). Merged into one stylesheet here instead, gated by the
 * same data-theme attribute and evulnable_pv_theme cookie /redesign/*
 * already uses (webui/routes/redesign.py's _pv_theme,
 * static/js/pv-theme-toggle.js) - one toggle mechanism for the whole
 * site rather than a third one invented for this page, and one markup to
 * maintain instead of two files drifting apart on every future edit (see
 * claude/redesign-full-buildout-scope.md Decision #1, which flagged
 * exactly this maintenance cost as the reason to prefer CSS custom
 * properties over parallel static pages). Every dark-mode rule below is
 * scoped under .lander-page[data-theme="dark"] - the class+attribute
 * pair lander.html's <body> carries - following the same
 * .pv-page[data-theme="dark"] convention preview.css already uses.
 */

    :root {
      --bg:#f5f9fd;
      --bg-2:#eef5fb;
      --panel:#ffffff;
      --ink:#091d45;
      --muted:#5e7593;
      --line:#d7e6f3;
      --blue:#1b70f1;
      --blue-2:#0d8df0;
      --green:#18b368;
      --green-2:#13a95f;
      --green-soft:#effbf5;
      --blue-soft:#f0f7ff;
      --shadow:0 18px 50px rgba(17,44,86,.08);
      --shadow-sm:0 12px 28px rgba(17,44,86,.07);
      --radius:24px;
      --radius-sm:18px;
      --max:1320px;
    }
    * { box-sizing:border-box; }
    body {
      margin:0;
      color:var(--ink);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 0% 10%, rgba(27,112,241,.07), transparent 28%),
        radial-gradient(circle at 100% 18%, rgba(24,179,104,.06), transparent 24%),
        linear-gradient(180deg, #f8fbfe 0%, var(--bg) 100%);
      line-height:1.55;
    }
    img { max-width:100%; display:block; }
    a { color:inherit; text-decoration:none; }
    .container { width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
    .muted { color:var(--muted); }
    .eyebrow {
      text-transform:uppercase;
      letter-spacing:.18em;
      color:#547193;
      font-size:.78rem;
      font-weight:800;
      margin:0 0 16px;
    }
    h1,h2,h3,p { margin-top:0; }
    h1 { font-size:clamp(3rem, 6vw, 5.5rem); line-height:.95; letter-spacing:-.06em; margin-bottom:18px; }
    h2 { font-size:clamp(2rem, 4vw, 3.2rem); line-height:1; letter-spacing:-.05em; margin-bottom:12px; }
    h3 { font-size:1.05rem; line-height:1.25; margin-bottom:8px; }
    p { margin-bottom:0; }
    .blue { color:var(--blue); }
    .green { color:var(--green); }

    header {
      position:sticky; top:0; z-index:30;
      background:rgba(248,251,254,.88);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(215,230,243,.9);
    }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:84px; }
    .brand img { width:210px; height:auto; }
    .links { display:flex; align-items:center; gap:30px; color:#35506f; font-weight:700; font-size:.96rem; }
    .actions { display:flex; align-items:center; gap:12px; }
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      min-height:52px; padding:0 22px; border-radius:14px; font-weight:800; border:1px solid transparent;
      transition:.2s ease; white-space:nowrap;
    }
    .btn.primary { background:linear-gradient(135deg, var(--blue), var(--blue-2)); color:#fff; box-shadow:0 14px 34px rgba(27,112,241,.20); }
    .btn.secondary { background:#fff; color:var(--blue); border-color:#a8caf8; }
    .btn.green { background:linear-gradient(135deg, var(--green), var(--green-2)); color:#fff; box-shadow:0 14px 34px rgba(24,179,104,.18); }
    .btn:hover { transform:translateY(-1px); }

    .hero { padding:36px 0 18px; }
    .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; }
    .hero-copy p.lead { font-size:1.18rem; max-width:800px; color:#536d8c; margin-bottom:22px; }
    .slogan { font-size:clamp(1.8rem, 3vw, 3rem); line-height:1.1; letter-spacing:-.04em; font-weight:900; margin-bottom:18px; }
    .trust-row { display:flex; flex-wrap:wrap; gap:28px; margin-top:18px; }
    .trust-item { display:flex; align-items:center; gap:10px; color:#365271; font-weight:700; }
    .check { width:26px; height:26px; border-radius:50%; background:#eaf8f1; color:var(--green); display:grid; place-items:center; font-size:.95rem; font-weight:900; }

    .hero-art { position:relative; min-height:460px; }
    .shape { position:absolute; inset:24px 20px auto auto; width:86%; height:84%; border-radius:36px; background:linear-gradient(135deg, rgba(27,112,241,.08), rgba(24,179,104,.08)); }
    .scribble { position:absolute; right:8px; top:12px; color:#738fb0; font-style:italic; font-size:1.05rem; line-height:1.45; transform:rotate(-5deg); white-space:pre-line; }

    .stack { position:relative; height:100%; min-height:420px; }
    .mini-window { position:absolute; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; }
    .mini-window.vm-top { left:6%; top:10%; width:64%; transform:rotate(-2deg); }
    .mini-window.dd-top { right:2%; top:16%; width:48%; transform:rotate(3deg); }
    .mini-window.dd-top .window-body { min-height:235px; }

    .window-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid #eaf0f6; }
    .window-brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--ink); font-size:.92rem; }
    .window-brand img { width:28px; height:28px; }
    .window-sub { font-size:.76rem; color:#5f7a99; font-weight:700; }
    .window-body { padding:14px 16px 16px; min-height:260px; display:grid; grid-template-columns:110px 1fr; gap:14px; }
    .menu-list { display:grid; align-content:start; gap:8px; }
    .menu-pill { padding:8px 10px; border-radius:10px; color:#547193; font-weight:800; font-size:.78rem; }
    .menu-pill.active { background:#edf5ff; color:var(--blue); }
    .table-card { border:1px solid #e9f0f7; border-radius:16px; overflow:hidden; }
    .table-head { padding:12px 14px; display:flex; justify-content:space-between; gap:12px; align-items:center; font-weight:900; }
    .table-head span:last-child { color:var(--blue); font-size:.8rem; }
    .table { width:100%; border-collapse:collapse; font-size:.78rem; }
    .table th, .table td { padding:8px 14px; border-top:1px solid #eef3f8; text-align:left; }
    .table th { font-size:.7rem; color:#6e87a0; text-transform:uppercase; letter-spacing:.07em; }
    .risk-dot { display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:5px 8px; background:#f25555; color:#fff; border-radius:999px; font-size:.73rem; font-weight:800; }
    .quote-box { margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid #eef3f8; background:#f9fbfe; color:#607a97; font-size:.75rem; }
    .strip { display:flex; gap:10px; margin:12px 0 10px; flex-wrap:wrap; }
    .metric { border:1px solid #e7eef6; border-radius:12px; padding:10px 12px; min-width:80px; text-align:center; }
    .metric small { display:block; color:#7289a0; font-size:.68rem; margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; }
    .metric b { font-size:.95rem; }
    .dd-badges { display:grid; gap:8px; }
    .badge-row { display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; font-size:.77rem; color:#4d6986; }
    .pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-size:.7rem; font-weight:900; letter-spacing:.03em; }
    .pill.verified { background:#eaf8ee; color:#14905c; }
    .pill.reported { background:#fff3dc; color:#c67d00; }
    .pill.observed { background:#edf5ff; color:#1d70ef; }
    .pill.risk { background:#fff2db; color:#c97d00; }
    .footnote { color:#8092a9; font-size:.72rem; font-style:italic; margin-top:10px; }

    .products { padding:8px 0 12px; }
    .product-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .product-card { background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:22px; box-shadow:var(--shadow-sm); min-height:100%; }
    .product-card.vm { background:linear-gradient(180deg, #fbfdff, #f4f9ff); border-color:#c9def4; }
    .product-card.dd { background:linear-gradient(180deg, #fbfefc, #f4fcf7); border-color:#ccebd7; }
    .product-head { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
    .product-copy .eyebrow { margin-bottom:10px; }
    .product-copy p.desc { color:#5a7492; font-size:1.02rem; margin-bottom:16px; max-width:none; }
    .bullet-list { display:grid; gap:10px; margin:16px 0 18px; }
    .bullet { display:flex; gap:10px; align-items:flex-start; color:#4d6783; }
    .bullet .check { width:22px; height:22px; font-size:.8rem; flex:0 0 auto; margin-top:1px; }

    .mini-screenshot { background:#fff; border:1px solid #dfeaf4; border-radius:18px; padding:14px; box-shadow:var(--shadow-sm); margin-top:2px; max-width:100%; }
    .mini-screenshot .window-body { grid-template-columns:82px 1fr; min-height:230px; padding:10px 0 0; gap:12px; }
    .product-card .mini-screenshot { width:100%; }
    .product-card.vm .mini-screenshot { max-width:440px; }
    .product-card.dd .mini-screenshot { max-width:520px; }
    .product-card .mini-screenshot .table-card { overflow:hidden; }
    .product-card .mini-screenshot .footnote { margin-top:8px; }
    .product-card.dd .mini-screenshot { justify-self:end; }
    .mini-screenshot .window-bar { padding:0 0 10px; }
    .mini-screenshot .window-brand img { width:22px; height:22px; }


    .how { padding:8px 0 14px; }
    .how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .how-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
    .step-num { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#eef5ff; color:var(--blue); font-weight:900; margin-bottom:14px; }
    .how-card p { color:var(--muted); }

    .why { padding:6px 0 12px; }
    .center-eyebrow { text-align:center; }
    .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .why-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
    .icon-box { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; font-size:1.55rem; font-weight:900; }
    .icon-blue { background:#eef6ff; color:var(--blue); }
    .icon-green { background:#eefbf4; color:var(--green); }

    .chooser { padding:6px 0 34px; }
    .chooser-box { background:#fff; border:1px solid var(--line); border-radius:24px; padding:18px 20px; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:1.2fr auto auto auto; gap:16px; align-items:center; }
    .chooser-title { padding-right:10px; }
    .chooser-title h2 { font-size:clamp(2rem, 3.2vw, 3rem); margin-bottom:6px; }
    .chooser-title p { color:#7086a0; font-size:.95rem; }
    .choice-btn { min-width:280px; justify-content:flex-start; padding:14px 18px; border-radius:16px; color:#fff; font-weight:800; box-shadow:none; }
    .choice-btn .choice-icon { width:36px; height:36px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:1.1rem; }
    .choice-label { display:flex; flex-direction:column; line-height:1.2; }
    .choice-label small { opacity:.9; font-size:.88rem; font-weight:700; }
    .or { color:#88a0b8; font-weight:900; }
    .small-note { color:#7f95ad; font-style:italic; transform:rotate(-5deg); justify-self:end; }

    footer { border-top:1px solid rgba(215,230,243,.95); background:rgba(255,255,255,.65); }
    .footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; color:#70839d; font-size:.92rem; flex-wrap:wrap; }
    .footer-brand { display:flex; align-items:center; gap:12px; font-weight:800; }
    .footer-brand img { width:150px; }
    .footer-links { display:flex; gap:20px; flex-wrap:wrap; }

    @media (max-width: 1180px) {
      .hero-grid, .product-grid, .product-head, .chooser-box { grid-template-columns:1fr; }
      .hero-art { min-height:380px; }
      .why-grid, .how-grid { grid-template-columns:repeat(2,1fr); }
      .choice-btn { min-width:unset; width:100%; }
      .or, .small-note { justify-self:start; }
    }
    @media (max-width: 900px) {
      .links { display:none; }
      .nav { padding:12px 0; min-height:auto; flex-wrap:wrap; }
      .actions { width:100%; }
      .actions .btn { flex:1; }
      .window-body { grid-template-columns:1fr; }
      .menu-list { grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width: 720px) {
      .container { width:min(var(--max), calc(100% - 22px)); }
      .trust-row { gap:14px; }
      .product-grid, .why-grid, .how-grid { grid-template-columns:1fr; }
      .mini-window.vm-top, .mini-window.dd-top { position:relative; left:auto; right:auto; top:auto; width:100%; transform:none; margin-bottom:14px; }
      .stack { min-height:unset; }
      .shape, .scribble { display:none; }
    }


    /* ===== Hero preview layering fix ===== */
    .hero { position:relative; z-index:1; }
    .hero-grid { position:relative; z-index:1; }
    .hero-copy { position:relative; z-index:3; }
    .hero-art { position:relative; z-index:1; }
    .hero-art .shape,
    .hero-art .scribble,
    .hero-art .stack,
    .hero-art .mini-window { z-index:1; }

    .products {
      position:relative;
      z-index:8;
    }
    .product-grid {
      position:relative;
      z-index:8;
    }
    .product-card {
      position:relative;
      z-index:9;
      isolation:isolate;
    }

    /* Opaque card surfaces ensure the hero previews disappear cleanly behind them. */
    .product-card.vm {
      background:linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
    }
    .product-card.dd {
      background:linear-gradient(180deg, #fbfefc 0%, #f4fcf7 100%);
    }
    /* ===== End hero preview layering fix ===== */

  

    /* rev6 cleanup */
    .window-brand img { height:18px; width:auto; object-fit:contain; object-position:left center; }
    .hero-brand img, .mini-screenshot .window-brand img { height:18px; width:auto; object-fit:contain; }
    .hero-art { position:relative; min-height:420px; display:flex; align-items:center; }
    .hero-board {
      position:relative; width:100%; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.96));
      border:1px solid var(--line); border-radius:28px; padding:24px; box-shadow:var(--shadow);
    }
    .hero-board:before {
      content:""; position:absolute; inset:auto auto -20px -18px; width:180px; height:180px; border-radius:28px;
      background:linear-gradient(135deg, rgba(27,112,241,.10), rgba(24,179,104,.10)); z-index:0;
    }
    .hero-board-top, .hero-board-footer, .route-grid { position:relative; z-index:1; }
    .hero-board-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
    .hero-board-note { color:#7d8ea5; font-size:.92rem; font-style:italic; }
    .route-grid { display:grid; grid-template-columns:1fr; gap:14px; }
    .route-card { border-radius:20px; padding:18px; border:1px solid; }
    .route-card.vmroute { background:linear-gradient(180deg,#fbfdff,#f5f9ff); border-color:#cfe1f6; }
    .route-card.ddroute { background:linear-gradient(180deg,#fbfefc,#f4fbf7); border-color:#d4eadc; }
    .route-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:10px; }
    .route-eyebrow { text-transform:uppercase; letter-spacing:.14em; color:#6884a0; font-size:.68rem; font-weight:800; margin-bottom:6px; }
    .route-card h3 { font-size:1.5rem; letter-spacing:-.04em; margin:0; }
    .route-card p { color:#5d7895; margin:0 0 12px; }
    .route-pill { display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; font-size:.72rem; font-weight:900; white-space:nowrap; }
    .route-pill-blue { background:#ebf4ff; color:var(--blue); }
    .route-pill-green { background:#eefbf4; color:var(--green); }
    .route-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .route-metric { background:#fff; border:1px solid #e7eef5; border-radius:14px; padding:10px 12px; }
    .route-metric small { display:block; color:#7e93aa; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
    .route-metric b { font-size:.9rem; }
    .hero-board-footer { display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; color:#567390; font-weight:700; font-size:.88rem; }
    .hero-board-footer span:before { content:"✓"; color:var(--green); margin-right:8px; }

    .product-card .mini-screenshot { width:100%; max-width:none; }
    .product-card.vm .mini-screenshot, .product-card.dd .mini-screenshot { max-width:none; justify-self:stretch; }
    .product-card.vm .mini-screenshot .window-body { min-height:190px; }
    .product-card.dd .mini-screenshot .table-card { max-width:none; }

    @media (max-width: 1180px) {
      .hero-board-top, .route-head { flex-direction:column; align-items:flex-start; }
    }
    @media (max-width: 720px) {
      .route-metrics { grid-template-columns:1fr; }
      .hero-board { padding:18px; }
    }
    /* end rev6 cleanup */


    /* rev7 final cleanup */
    .hero-grid { grid-template-columns:1fr; }
    .hero { padding:48px 0 26px; }
    .hero-copy { max-width:1100px; }
    .hero-copy h1 { margin-bottom:22px; }
    .hero-copy .lead { max-width:900px; margin-bottom:26px; }
    .slogan { margin-bottom:22px; }
    .trust-row { margin-top:0; gap:24px; }

    .product-card.vm .mini-screenshot { margin-top:8px; }
    .product-card.vm .mini-screenshot .table-head { padding-bottom:8px; }
    .vm-mini-table th:last-child,
    .vm-mini-table td:last-child,
    .risk-col-head,
    .risk-col { text-align:center; width:64px; }
    .vm-mini-table th:first-child,
    .vm-mini-table td:first-child { width:28px; }
    .vm-mini-table th:nth-child(2),
    .vm-mini-table td:nth-child(2) { width:auto; }
    .vm-mini-table .risk-dot { margin-left:auto; margin-right:auto; }
    /* end rev7 */

/* rev8 balance + alignment */
.hero-grid {
  grid-template-columns:minmax(0,1.13fr) minmax(340px,.87fr);
  gap:42px;
  align-items:center;
}
.hero-copy {
  max-width:none;
}
.hero-copy h1 {
  max-width:780px;
}
.hero-copy .lead {
  max-width:780px;
}
.hero-path-panel {
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.98));
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  box-shadow:var(--shadow);
}
.path-panel-kicker {
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#66829f;
  font-size:.72rem;
  font-weight:900;
  margin-bottom:12px;
}
.path-choice {
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:14px;
  align-items:center;
  border:1px solid;
  border-radius:18px;
  padding:16px;
  margin-top:12px;
  transition:.2s ease;
}
.path-choice:hover {
  transform:translateY(-1px);
}
.path-choice-vm {
  background:linear-gradient(180deg,#fbfdff,#f2f8ff);
  border-color:#c9def4;
}
.path-choice-dd {
  background:linear-gradient(180deg,#fbfefc,#f2fbf6);
  border-color:#ccebd7;
}
.path-choice-icon {
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:.78rem;
  background:#fff;
  border:1px solid var(--line);
  color:#52718f;
}
.path-choice-vm .path-choice-icon { color:var(--blue); }
.path-choice-dd .path-choice-icon { color:var(--green); }
.path-choice-copy strong {
  display:block;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:3px;
}
.path-choice-copy span {
  display:block;
  color:#627c98;
  font-size:.86rem;
  line-height:1.45;
}
.path-arrow {
  font-size:1.2rem;
  font-weight:900;
  color:#7690aa;
}
.path-panel-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e8eff6;
  color:#7890a8;
  font-size:.8rem;
  font-weight:700;
}

/* Keep both product descriptions/CTAs aligned before the preview panels */
.product-copy {
  display:flex;
  flex-direction:column;
  min-height:350px;
}
.product-copy .bullet-list {
  flex:1;
}
.product-copy .btn {
  align-self:flex-start;
}

/* Give both preview tiles comparable visual weight */
.product-card .mini-screenshot {
  min-height:305px;
}
.product-card.vm .mini-screenshot,
.product-card.dd .mini-screenshot {
  display:flex;
  flex-direction:column;
}
.product-card.vm .mini-screenshot .window-body {
  flex:1;
}

/* Risk header centered directly over VM risk values */
.vm-mini-table .risk-col-head,
.vm-mini-table .risk-col,
.vm-mini-table th:last-child,
.vm-mini-table td:last-child {
  text-align:center !important;
  width:64px;
}

@media (max-width:1180px) {
  .hero-grid {
    grid-template-columns:1fr;
  }
  .hero-path-panel {
    max-width:760px;
  }
}
@media (max-width:720px) {
  .product-copy { min-height:0; }
  .product-card .mini-screenshot { min-height:0; }
  .path-choice {
    grid-template-columns:42px 1fr;
  }
  .path-arrow { display:none; }
  .path-panel-footer {
    flex-direction:column;
  }
}
/* end rev8 */

/* Inline style="" replacements - see header comment #1. Named for what
 * they hold, not where they came from, so a future edit doesn't have to
 * cross-reference the mockup to know what each one is for. */
.chooser-eyebrow { margin-bottom: 8px; }
.dd-report { padding: 6px 0 0; }
.dd-report-title { font-weight: 900; font-size: 1.2rem; letter-spacing: -.03em; }
.dd-report-company { font-size: .85rem; margin-bottom: 10px; }
.dd-report-summary { padding: 12px; }
.dd-report-summary-title { font-weight: 900; margin-bottom: 8px; }
.dd-report-summary-text { font-size: .77rem; color: #607a96; }
.lander-page[data-theme="dark"] .dd-report-summary-text { color: #a9bfd4; }


/* ============================================================
   DARK MODE — merged from evulnable_unified_landing_team_brief_rev8_dark.html
   ============================================================ */

.lander-page[data-theme="dark"] {
  color-scheme: dark;
  --bg:#07111f;
  --bg-2:#0a1626;
  --panel:#0d1b2d;
  --ink:#edf5ff;
  --muted:#9fb3ca;
  --line:#263b55;
  --blue:#4d9cff;
  --blue-2:#1e8fff;
  --green:#37d58c;
  --green-2:#19b96d;
  --green-soft:rgba(55,213,140,.12);
  --blue-soft:rgba(77,156,255,.12);
  --shadow:0 22px 55px rgba(0,0,0,.38);
  --shadow-sm:0 12px 32px rgba(0,0,0,.28);
}

.lander-page[data-theme="dark"] {
  color:var(--ink);
  background:
    radial-gradient(circle at 0% 9%, rgba(77,156,255,.16), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(55,213,140,.11), transparent 28%),
    linear-gradient(180deg,#07111f 0%,#091525 55%,#08111e 100%);
}

.lander-page[data-theme="dark"] header {
  background:rgba(7,17,31,.88);
  border-bottom:1px solid rgba(38,59,85,.95);
  box-shadow:0 8px 26px rgba(0,0,0,.18);
}

.lander-page[data-theme="dark"] .links,
.lander-page[data-theme="dark"] .footer,
.lander-page[data-theme="dark"] .footer-links,
.lander-page[data-theme="dark"] .muted,
.lander-page[data-theme="dark"] .eyebrow,
.lander-page[data-theme="dark"] .product-copy p.desc,
.lander-page[data-theme="dark"] .bullet,
.lander-page[data-theme="dark"] .how-card p,
.lander-page[data-theme="dark"] .chooser-title p,
.lander-page[data-theme="dark"] .path-panel-kicker,
.lander-page[data-theme="dark"] .path-choice-copy span,
.lander-page[data-theme="dark"] .path-panel-footer,
.lander-page[data-theme="dark"] .footnote,
.lander-page[data-theme="dark"] .window-sub,
.lander-page[data-theme="dark"] .table th,
.lander-page[data-theme="dark"] .badge-row,
.lander-page[data-theme="dark"] .metric small {
  color:var(--muted);
}

.lander-page[data-theme="dark"] h1,
.lander-page[data-theme="dark"] h2,
.lander-page[data-theme="dark"] h3,
.lander-page[data-theme="dark"] .path-choice-copy strong,
.lander-page[data-theme="dark"] .table-head,
.lander-page[data-theme="dark"] .metric b,
.lander-page[data-theme="dark"] .window-brand,
.lander-page[data-theme="dark"] .product-card strong,
.lander-page[data-theme="dark"] .how-card strong,
.lander-page[data-theme="dark"] .why-card strong {
  color:var(--ink);
}

.lander-page[data-theme="dark"] .btn.secondary {
  background:#0d1b2d;
  border-color:#355a83;
  color:#dcecff;
}

.lander-page[data-theme="dark"] .btn.primary {
  box-shadow:0 14px 34px rgba(77,156,255,.24);
}

.lander-page[data-theme="dark"] .btn.green {
  box-shadow:0 14px 34px rgba(55,213,140,.20);
}

.lander-page[data-theme="dark"] .hero-path-panel {
  background:linear-gradient(180deg,#0d1b2d,#0a1727);
  border-color:#2a425f;
  box-shadow:var(--shadow);
}

.lander-page[data-theme="dark"] .path-choice-vm {
  background:linear-gradient(180deg,rgba(28,58,94,.94),rgba(13,30,50,.98));
  border-color:#37699c;
}

.lander-page[data-theme="dark"] .path-choice-dd {
  background:linear-gradient(180deg,rgba(19,65,48,.92),rgba(10,34,29,.98));
  border-color:#347b62;
}

.lander-page[data-theme="dark"] .path-choice-icon {
  background:#0a1727;
  border-color:#304862;
  color:#cfe2f7;
}

.lander-page[data-theme="dark"] .path-choice-vm .path-choice-icon { color:#78b9ff; }

.lander-page[data-theme="dark"] .path-choice-dd .path-choice-icon { color:#6ce6aa; }

.lander-page[data-theme="dark"] .path-arrow { color:#9ab2ca; }

.lander-page[data-theme="dark"] .path-panel-footer { border-top-color:#243b56; }

.lander-page[data-theme="dark"] .product-card {
  border-color:#29425e;
  box-shadow:var(--shadow-sm);
}

.lander-page[data-theme="dark"] .product-card.vm {
  background:linear-gradient(180deg,#10253f 0%,#0c1c30 62%,#091725 100%);
  border-color:#315d8b;
}

.lander-page[data-theme="dark"] .product-card.dd {
  background:linear-gradient(180deg,#103329 0%,#0c251f 62%,#091b18 100%);
  border-color:#36765f;
}

.lander-page[data-theme="dark"] .product-card.vm .eyebrow { color:#7ebcff; }

.lander-page[data-theme="dark"] .product-card.dd .eyebrow { color:#72e4ac; }

.lander-page[data-theme="dark"] .check {
  background:rgba(55,213,140,.13);
  color:#6ce6aa;
}

.lander-page[data-theme="dark"] .mini-screenshot {
  background:linear-gradient(180deg,#0d1b2d,#0a1726);
  border-color:#2b4563;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

.lander-page[data-theme="dark"] .product-card.vm .mini-screenshot { border-color:#345f88; }

.lander-page[data-theme="dark"] .product-card.dd .mini-screenshot { border-color:#3a735e; }

.lander-page[data-theme="dark"] .window-bar {
  border-bottom-color:#263d57;
}

.lander-page[data-theme="dark"] .menu-pill { color:#a9bfd5; }

.lander-page[data-theme="dark"] .menu-pill.active {
  background:rgba(77,156,255,.15);
  color:#8bc5ff;
}

.lander-page[data-theme="dark"] .table-card {
  background:#0a1727;
  border-color:#29425d;
}

.lander-page[data-theme="dark"] .table th,
.lander-page[data-theme="dark"] .table td {
  border-top-color:#223750;
}

.lander-page[data-theme="dark"] .table td { color:#d9e7f5; }

.lander-page[data-theme="dark"] .table td.blue,
.lander-page[data-theme="dark"] .blue { color:#6db3ff; }

.lander-page[data-theme="dark"] .green { color:#4de09a; }

.lander-page[data-theme="dark"] .table-head span:last-child { color:#7abaff; }

.lander-page[data-theme="dark"] .quote-box {
  background:#101f32;
  border-color:#29415c;
  color:#aabed3;
}

.lander-page[data-theme="dark"] .metric {
  background:#0e1c2d;
  border-color:#2a405b;
}

.lander-page[data-theme="dark"] .metric b { color:#eef6ff; }

.lander-page[data-theme="dark"] .dd-badges { color:#bfd0e0; }

.lander-page[data-theme="dark"] .badge-row { color:#b9ccdf; }

.lander-page[data-theme="dark"] .pill.verified {
  background:rgba(55,213,140,.14);
  color:#6ee7b7;
}

.lander-page[data-theme="dark"] .pill.reported {
  background:rgba(251,191,36,.14);
  color:#ffd169;
}

.lander-page[data-theme="dark"] .pill.observed {
  background:rgba(77,156,255,.15);
  color:#8bc5ff;
}

.lander-page[data-theme="dark"] .pill.risk {
  background:rgba(251,191,36,.14);
  color:#ffd169;
}

.lander-page[data-theme="dark"] .how-card {
  background:linear-gradient(180deg,#101f32,#0b1829);
  border-color:#2a435f;
  box-shadow:var(--shadow-sm);
}

.lander-page[data-theme="dark"] .step-num {
  background:rgba(77,156,255,.15);
  color:#82c1ff;
}

.lander-page[data-theme="dark"] .why-card {
  background:linear-gradient(180deg,#101f32,#0b1829);
  border-color:#2a435f;
  box-shadow:var(--shadow-sm);
}

.lander-page[data-theme="dark"] .why-card:nth-child(2) {
  background:linear-gradient(180deg,#132338,#0c192a);
}

.lander-page[data-theme="dark"] .why-card:nth-child(3) {
  background:linear-gradient(180deg,#102c2a,#0a1d1d);
  border-color:#315c55;
}

.lander-page[data-theme="dark"] .why-card:nth-child(4) {
  background:linear-gradient(180deg,#14213a,#0c182a);
}

.lander-page[data-theme="dark"] .icon-blue {
  background:rgba(77,156,255,.14);
  color:#7dbdff;
}

.lander-page[data-theme="dark"] .icon-green {
  background:rgba(55,213,140,.14);
  color:#6ee7b7;
}

.lander-page[data-theme="dark"] .chooser-box {
  background:linear-gradient(180deg,#0f1e31,#0a1727);
  border-color:#2b435e;
  box-shadow:var(--shadow-sm);
}

.lander-page[data-theme="dark"] .choice-btn .choice-icon {
  background:rgba(255,255,255,.10);
}

.lander-page[data-theme="dark"] .or { color:#8fa7be; }

.lander-page[data-theme="dark"] .small-note { color:#9eb4ca; }

.lander-page[data-theme="dark"] footer {
  background:#07111f;
  border-top-color:#263b55;
}

.lander-page[data-theme="dark"] .footer-brand,
.lander-page[data-theme="dark"] .footer-links a { color:#b7c9db; }

.lander-page[data-theme="dark"] .brand img,
.lander-page[data-theme="dark"] .footer-brand img,
.lander-page[data-theme="dark"] .window-brand img {
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.04));
}

.lander-page[data-theme="dark"] .hero-path-panel,
.lander-page[data-theme="dark"] .product-card,
.lander-page[data-theme="dark"] .mini-screenshot,
.lander-page[data-theme="dark"] .how-card,
.lander-page[data-theme="dark"] .why-card,
.lander-page[data-theme="dark"] .chooser-box {
  box-shadow:0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
}

@media (max-width:720px) {
.lander-page[data-theme="dark"] header { background:rgba(7,17,31,.96); }
}

.lander-page[data-theme="dark"] .hero-copy p.lead {
  color:#bed0e3 !important;
}

.lander-page[data-theme="dark"] .trust-item {
  color:#c9d9ea !important;
}

.lander-page[data-theme="dark"] .trust-item .check {
  color:#72e8ae;
  background:rgba(55,213,140,.16);
}

/* Light/dark switch - not in either mockup (both were static single-theme
 * exports), added so the two supplied designs are actually reachable from
 * one page. Same mechanism as preview.css's .pv-theme-toggle: a text glyph
 * swapped by data-theme, no script beyond flipping the attribute. */
.pv-theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.pv-theme-toggle:hover { border-color: var(--blue); }
.pv-theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pv-theme-toggle-mark { font-size: 1rem; line-height: 1; }
.pv-theme-toggle-mark:before { content: "\1F319"; }
.lander-page[data-theme="dark"] .pv-theme-toggle-mark:before { content: "\2600"; }
.lander-page[data-theme="dark"] .pv-theme-toggle {
  border-color: #355a83;
  background: #0d1b2d;
}
