/* ── Page frame uses app.css tokens — no hardcoded colors ── */
  body.home-body { background:#fff; color:var(--ink); margin:0; line-height:1.6; }

  /* ── Top nav ───────────────────────────────────────────── */
  /* Outer carries the full-width bottom border; inner constrains content. */
  .home-nav {
    border-bottom:1.5px solid var(--rule);
  }
  .home-nav-inner {
    max-width:1200px; margin:0 auto;
    padding:22px 36px; display:flex; justify-content:space-between; align-items:center;
  }
  .home-nav .brand {
    font-family:"Playfair Display",serif; font-weight:700; font-size:24px;
    color:var(--ink); text-decoration:none; letter-spacing:-0.4px;
  }
  .home-nav .brand span { color:var(--sky); }
  .home-nav-actions { display:flex; gap:24px; align-items:center; }
  .home-nav a.nav-link {
    color:var(--slate); text-decoration:none; font-size:13px; font-weight:500;
  }
  .home-nav a.nav-link:hover { color:var(--ink); }

  /* ── Hero ──────────────────────────────────────────────── */
  .hero {
    max-width:980px; margin:0 auto;
    padding:80px 36px 64px; text-align:center;
  }
  .hero h1 {
    font-family:"Playfair Display",serif; font-weight:700;
    font-size:56px; line-height:1.1; color:var(--ink);
    letter-spacing:-1px; margin:0 0 22px;
  }
  .hero h1 .accent { color:var(--sky); font-style:italic; }
  .hero .lede {
    font-family:"DM Sans",sans-serif; font-weight:300;
    font-size:19px; color:var(--body); line-height:1.55;
    max-width:680px; margin:0 auto 32px;
  }
  .hero .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .hero .cta-row a { padding:14px 30px; font-size:13px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; }
  .hero .cta-primary { background:var(--sky); color:#fff; }
  .hero .cta-secondary { color:var(--slate); border:1.5px solid var(--rule); background:#fff; }
  .hero .cta-secondary:hover { border-color:var(--sky); color:var(--sky); }
  .hero .trial-note {
    font-family:"DM Sans",sans-serif; font-size:12px; color:var(--slate);
    margin-top:18px; letter-spacing:0.04em;
  }

  /* ── Mission strip (matches summary HTML) ───────────────── */
  .mission {
    background:var(--ink); color:#fff;
    padding:24px 36px;
  }
  .mission-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; gap:36px;
  }
  .mission-label {
    font-family:"Playfair Display",serif; font-size:11px;
    color:var(--sky); letter-spacing:0.18em; text-transform:uppercase;
    white-space:nowrap; flex-shrink:0;
  }
  .mission-text {
    font-family:"DM Sans",sans-serif; font-weight:300;
    font-size:15px; line-height:1.55; color:#e8f0f8;
  }
  .mission-text strong { color:#fff; font-weight:500; }

  /* ── Section header pattern ─────────────────────────────── */
  .section { max-width:1200px; margin:0 auto; padding:80px 36px; }
  /* Inner content constraint — used inside full-width sections (steps,
     trust) so their colored backgrounds reach the viewport edge while
     content stays aligned to the 1200px grid. Mirrors .mission/.mission-inner. */
  .section-inner { max-width:1200px; margin:0 auto; }
  .section-eyebrow {
    font-family:"Playfair Display",serif; font-size:11px;
    color:var(--slate); letter-spacing:0.18em; text-transform:uppercase;
    text-align:center; margin-bottom:8px;
  }
  .section-title {
    font-family:"Playfair Display",serif; font-weight:700;
    font-size:36px; color:var(--ink); text-align:center;
    margin:0 0 14px; letter-spacing:-0.5px;
  }
  .section-sub {
    font-family:"DM Sans",sans-serif; font-weight:300;
    font-size:16px; color:var(--body); text-align:center;
    max-width:620px; margin:0 auto 56px; line-height:1.55;
  }

  /* ── Feature grid (mirrors marketing summary feature cards) ─ */
  .feature-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
  }
  .feature {
    background:#fff; border:1.5px solid var(--rule);
    padding:24px 26px; position:relative;
  }
  .feature::before {
    content:""; position:absolute; top:0; left:0;
    width:3px; height:100%; background:var(--sky);
  }
  .feature-num {
    font-family:"Playfair Display",serif; font-size:10px;
    color:var(--sky); letter-spacing:0.12em; text-transform:uppercase;
    margin-bottom:6px;
  }
  .feature-title {
    font-family:"Playfair Display",serif; font-weight:600;
    font-size:18px; color:var(--ink); margin:0 0 10px; line-height:1.25;
  }
  .feature-desc {
    font-family:"DM Sans",sans-serif; font-size:14px;
    color:var(--body); line-height:1.55; margin:0;
  }

  /* ── How it works ──────────────────────────────────────── */
  .steps-section { background:var(--frost); padding:80px 36px; }
  .steps {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0;
    border:1.5px solid var(--rule); background:#fff;
  }
  .step {
    padding:28px 24px;
    border-right:1px dashed var(--rule);
  }
  .step:last-child { border-right:0; }
  .step-num {
    width:28px; height:28px; background:var(--ink); color:#fff;
    font-family:"Playfair Display",serif; font-weight:600; font-size:12px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .step-title {
    font-family:"Playfair Display",serif; font-weight:600;
    font-size:15px; color:var(--ink); margin:0 0 8px;
  }
  .step-desc {
    font-family:"DM Sans",sans-serif; font-size:13.5px;
    color:var(--body); line-height:1.55;
  }

  /* ── Trust block ───────────────────────────────────────── */
  .trust-section {
    background:var(--ink); color:#cfdfee;
    padding:80px 36px;
  }
  .trust-section .section-eyebrow { color:var(--sky); }
  .trust-section .section-title { color:#fff; }
  .trust-list {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px 36px; max-width:980px; margin:0 auto;
    list-style:none; padding:0;
  }
  .trust-list li {
    font-family:"DM Sans",sans-serif; font-size:14px; line-height:1.6;
    padding-left:24px; position:relative; color:#cfdfee;
  }
  .trust-list li::before {
    content:"✓"; position:absolute; left:0; top:0;
    color:var(--gold); font-weight:600;
  }
  .trust-list li strong { color:#fff; font-weight:500; }

  /* ── Final CTA ─────────────────────────────────────────── */
  .closing { text-align:center; padding:80px 36px; }
  .closing h2 {
    font-family:"Playfair Display",serif; font-weight:700;
    font-size:32px; color:var(--ink); margin:0 0 14px;
    letter-spacing:-0.5px;
  }
  .closing p {
    font-family:"DM Sans",sans-serif; font-weight:300;
    font-size:16px; color:var(--body); margin:0 0 28px;
  }
  .closing a {
    display:inline-block; background:var(--sky); color:#fff;
    padding:16px 40px; font-size:13px; font-weight:500;
    letter-spacing:0.06em; text-transform:uppercase;
    text-decoration:none;
  }

  /* ── Footer ────────────────────────────────────────────── */
  .home-foot {
    border-top:2px solid var(--ink);
    padding:24px 36px;
  }
  .home-foot-inner {
    max-width:1200px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    font-family:"DM Sans",sans-serif; font-size:13px; color:var(--slate);
  }
  .home-foot-inner strong {
    font-family:"Playfair Display",serif; font-weight:600; color:var(--ink); font-size:14px;
  }
  .home-foot a { color:var(--sky); text-decoration:none; margin-left:18px; font-weight:500; }
  .home-foot a:hover { text-decoration:underline; }

  /* ── Responsive ────────────────────────────────────────── */
  @media (max-width:720px) {
    .hero { padding:48px 24px 36px; }
    .hero h1 { font-size:38px; letter-spacing:-0.5px; }
    .hero .lede { font-size:16px; }
    .section { padding:48px 24px; }
    .steps-section,
    .trust-section { padding:48px 24px; }
    .section-title { font-size:28px; }
    .mission-inner { flex-direction:column; align-items:flex-start; gap:10px; }
    .home-nav-inner { padding:18px 20px; }
    .step { border-right:0; border-bottom:1px dashed var(--rule); }
    .step:last-child { border-bottom:0; }
  }