:root{
    --orange:#1E3A5F;--orange-hot:#16304F;--coral:#3E6494;--peach:#D8C3A5;
    --glow:rgba(30,58,95,.22);
    --ink:#252525;--slate:#44505F;--muted:#7A828E;--line:#E7E3DB;
    --bg:#F8F6F2;--indigo:#6B8F71;--indigo-light:#EDF3EE;
    --green:#6B8F71;
    --gold:#E8A81E;--gold-deep:#C6851A;--gold-light:#FBF0D6;
    --paper:#FCFBF9;--tint:rgba(240,236,228,.60);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html{background:var(--paper,#FCFBF9)}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:transparent;line-height:1.6;-webkit-font-smoothing:antialiased}

  /* ═══════════════════════════════════════════════
     SITE SURFACE
     One square field, fixed behind every page, so the
     whole site reads as a single drafting surface
     rather than a stack of flat white blocks. Sections
     tint that surface instead of painting over it.
     ═══════════════════════════════════════════════ */
  .sitebg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
    background:var(--paper,#FCFBF9);contain:strict}
  .sitebg>span{position:absolute;display:block}
  .sb-grid{inset:-2px;background-image:
      linear-gradient(to right, rgba(30,58,95,.075) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(30,58,95,.075) 1px, transparent 1px);
    background-size:74px 74px;
    animation:ambGrid 64s linear infinite}
  /* The heavier square every eighth line: what makes it read as drafting paper
     rather than graph paper, and it costs one more gradient pair. */
  .sb-grid2{inset:-2px;background-image:
      linear-gradient(to right, rgba(30,58,95,.10) 2px, transparent 2px),
      linear-gradient(to bottom, rgba(30,58,95,.10) 2px, transparent 2px);
    background-size:592px 592px;
    animation:ambGrid2 128s linear infinite}
  @keyframes ambGrid2{from{transform:translate3d(0,0,0)}to{transform:translate3d(592px,592px,0)}}
  /* Colour, so the paper is warm rather than grey. Static: this one never moves. */
  .sb-wash{inset:0;background:
      radial-gradient(1000px 560px at 6% 2%, rgba(216,195,165,.22), transparent 62%),
      radial-gradient(900px 520px at 96% 26%, rgba(107,143,113,.10), transparent 62%),
      radial-gradient(1100px 620px at 50% 100%, rgba(30,58,95,.06), transparent 60%)}

  /* Sections tint the surface. Translucent on purpose — the squares run through. */
  .section.tint{background:rgba(240,236,228,.60)}
  .section.clear{background:transparent}

  @media(max-width:820px){
    .sitebg>.sb-grid{animation:none;background-size:56px 56px}
    .sitebg>.sb-grid2{display:none}
  }
  @media (prefers-reduced-motion: reduce){
    .sitebg>.sb-grid,.sitebg>.sb-grid2{animation:none !important}
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 22px}
  h1,h2,h3{letter-spacing:-.5px;line-height:1.18}

  /* nav */
  nav{position:sticky;top:0;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(233,237,244,.8);z-index:50}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px;position:relative}
  nav .navlinks{display:flex;align-items:center;flex-wrap:nowrap;gap:22px;min-width:0}
  nav .logo{flex-shrink:0}
  .logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:21px;letter-spacing:-.5px;color:var(--orange);text-decoration:none}
  .logo-img{height:34px;width:auto;display:block}
  .logo span{color:var(--gold-deep)}
  .blm{width:28px;height:28px;flex-shrink:0;display:block;object-fit:contain}
  nav a{color:var(--slate);text-decoration:none;font-size:14px;font-weight:600;margin-left:0;white-space:nowrap;transition:color .15s}
  nav a:hover{color:var(--ink)}
  nav a.navlogin{margin-left:0;padding:9px 20px;border:1.5px solid var(--line);border-radius:999px;color:#1E3A5F;font-weight:700;white-space:nowrap;transition:border-color .15s, background .15s}
  nav a.navlogin:hover{border-color:#1E3A5F;background:#F8F6F2;color:#1E3A5F}
  nav a.cta{background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff;padding:10px 22px;border-radius:999px;margin-left:0;flex-shrink:0;white-space:nowrap;box-shadow:0 4px 16px var(--glow);transition:transform .15s, box-shadow .15s}
  nav a.cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--glow);color:#fff}
  @media(max-width:680px){
    nav .navlinks a:not(.cta):not(.navlogin){display:none}
    nav .wrap{height:60px;padding-left:14px;padding-right:14px;gap:8px}
    nav .navlinks{display:flex;align-items:center;gap:8px;flex-shrink:0}
    .logo-img{height:28px}
    nav a.navlogin{margin-left:0;padding:8px 14px;font-size:13px}
    nav a.cta{margin-left:0;padding:8px 16px;font-size:13px}
  }
  @media(max-width:400px){
    .logo-img{height:24px}
    nav a.navlogin{padding:7px 12px;font-size:12.5px}
    nav a.cta{padding:7px 13px;font-size:12.5px}
  }

  /* hero */
  .hero{position:relative;padding:96px 0 80px;text-align:center;overflow:hidden;
    background:
      radial-gradient(760px 380px at 12% -8%, rgba(216,195,165,.35), transparent 62%),
      radial-gradient(760px 380px at 88% -8%, rgba(107,143,113,.14), transparent 62%),
      radial-gradient(1000px 500px at 50% 118%, rgba(30,58,95,.07), transparent 55%),
      linear-gradient(180deg,rgba(255,255,255,.62), rgba(244,241,235,.34));}
  .slogan{font-size:clamp(20px,3.4vw,30px);font-weight:800;letter-spacing:-.5px;color:var(--orange);margin-bottom:18px}
  .slogan span{color:var(--muted);font-weight:700}
  .kicker{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:#fff;color:var(--orange);font-weight:700;font-size:13px;padding:8px 18px;border-radius:999px;margin-bottom:26px;border:1px solid rgba(30,58,95,.14);box-shadow:0 4px 16px rgba(30,58,95,.10);letter-spacing:.1px}
  .kicker span{color:var(--gold-deep)}
  .kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
  @media(max-width:420px){.kicker{font-size:11.5px;padding:7px 14px;gap:6px}}
  .hero h1{font-size:clamp(38px,6.6vw,72px);font-weight:800;max-width:960px;margin:0 auto;letter-spacing:-2px;line-height:1.08}
  .h1-a{color:var(--ink)}
  .h1-b{color:var(--orange)}
  .sub1{font-size:clamp(17px,2.4vw,23px);color:var(--muted);margin-top:30px}
  .sub2{font-size:clamp(17px,2.4vw,23px);color:var(--ink);font-weight:700;margin-top:4px}
  nav a.signin{margin-left:24px}
  .hero h1 em{font-style:normal;color:var(--orange)}
  .hero p{font-size:19px;color:var(--muted);max-width:620px;margin:22px auto 0}
  .hero-btns{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-block;border:0;border-radius:999px;padding:17px 34px;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;font-family:inherit;transition:transform .15s, box-shadow .15s}
  .btn:hover{transform:translateY(-2px)}
  .btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff;box-shadow:0 10px 30px var(--glow)}
  .btn.primary:hover{box-shadow:0 14px 38px var(--glow)}
  .btn.secondary{background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(12,18,32,.25)}
  .hero-note{font-size:13px;color:var(--muted);margin-top:16px}
  .hero-stats{display:flex;gap:40px;justify-content:center;align-items:flex-start;margin:44px auto 0;flex-wrap:wrap;max-width:620px}
  .hstat{text-align:center;flex:0 1 165px}
  .hstat .v{font-size:25px;font-weight:800;color:var(--orange)}
  .hstat .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}

  /* product mockups */
  .mockzone{display:grid;grid-template-columns:1.2fr .9fr;gap:22px;align-items:start;max-width:1010px;margin:56px auto 0;padding:0 8px;text-align:left}
  .mock-cap{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 8px 6px}
  .fp-hero{background:var(--orange);padding:18px 20px;color:#fff}
  .window{background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(30,58,95,.18), 0 4px 12px rgba(30,58,95,.06);border:1px solid var(--line);overflow:hidden;text-align:left}
  .winbar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
  .winbar i{width:10px;height:10px;border-radius:50%;background:#D9D3C7}
  .winbody{padding:22px 24px}
  .mk-greet{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
  .mk-sub{font-size:12px;color:var(--muted);margin-top:2px}
  .mk-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
  .mk-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .mk-num{font-size:24px;font-weight:800;color:var(--orange);line-height:1}
  .mk-lab{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-top:5px}
  .mk-row{display:flex;gap:9px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;font-size:12.5px;color:var(--slate)}
  .mk-n{width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .mk-pill{margin-left:auto;background:#EDE7DC;color:var(--orange);font-size:9.5px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap}
  .fp-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--peach)}
  .fp-name{font-size:16px;font-weight:800;margin-top:3px}
  .fp-pct{font-size:30px;font-weight:800;color:var(--peach);letter-spacing:-1.5px;margin-top:8px;line-height:1}
  .fp-line{font-size:11px;color:rgba(255,255,255,.75);margin-top:6px}
  .fp-track{height:6px;background:rgba(255,255,255,.18);border-radius:99px;margin-top:10px;overflow:hidden}
  .fp-fill{height:100%;width:65%;background:var(--peach);border-radius:99px}
  @media(max-width:760px){
    .mockzone{grid-template-columns:1fr;margin-top:40px}
    .mk-cards{grid-template-columns:1fr 1fr}
    .mk-cards .mk-card:last-child{display:none}
  }

  /* ── premium homeowner portal preview ── */
  .hp-photo{position:relative;height:146px;overflow:hidden;background:#E7DCC9}
  .hp-photo .scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
  .hp-photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 46%,rgba(18,11,3,.58))}
  .hp-photo .cam{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.42);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
  .hp-photo .cap{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff}
  .hp-photo .cap .n{font-size:15px;font-weight:800;letter-spacing:-.3px}
  .hp-photo .cap .s{font-size:10.5px;opacity:.85;font-weight:600}
  .hp-body{padding:16px 18px}
  .hp-stage{display:flex;gap:10px;margin-bottom:12px}
  .hp-stat{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
  .hp-stat .v{font-size:16px;font-weight:800;color:var(--orange);line-height:1}
  .hp-stat .l{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:4px}
  .hp-lab{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:12px 0 7px}
  .hp-tl{display:flex;flex-direction:column;gap:6px}
  .hp-t{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate)}
  .hp-t .dot{width:15px;height:15px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800}
  .hp-t.done .dot{background:var(--green);color:#fff}
  .hp-t.now .dot{background:var(--orange);color:#fff}
  .hp-t.now{font-weight:700;color:var(--ink)}
  .hp-t.todo .dot{background:#fff;border:2px solid var(--line);color:var(--muted)}
  .hp-sel{display:flex;align-items:center;font-size:12px;color:var(--slate);padding:5px 0}
  .hp-sel .tag{margin-left:auto;font-size:9.5px;font-weight:800;border-radius:999px;padding:3px 9px}
  .tag-ok{background:var(--indigo-light);color:var(--green)}
  .tag-need{background:#FBEEDA;color:#A9762C}
  .hp-upd{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-top:6px}
  .hp-upd .cam{font-size:10.5px;font-weight:800;color:var(--orange)}
  .hp-upd .txt{font-size:11.5px;color:var(--slate);line-height:1.5;margin-top:4px}

  /* ── premium contractor dashboard preview ── */
  .dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
  .dash-c{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
  .dash-c .v{font-size:22px;font-weight:800;color:var(--orange);line-height:1}
  .dash-c .l{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:5px}
  .dash-proj{border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin-top:12px;background:#fff}
  .dash-proj .pn{font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:7px}
  .dash-proj .health{width:9px;height:9px;border-radius:50%;background:var(--red,#C0564B)}
  .dp-rows{margin-top:9px;display:flex;flex-direction:column;gap:5px}
  .dp-rows>div{display:flex;font-size:11.5px;color:var(--slate)}
  .dp-rows .k{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;flex:0 0 108px;line-height:1.7}
  .dp-warn{color:#A9762C;font-weight:700}
  .dp-btns{display:flex;gap:7px;margin-top:12px}
  .dp-btns span{flex:1;text-align:center;font-size:11px;font-weight:800;border-radius:9px;padding:8px}
  .dp-voice{background:var(--orange);color:#fff}
  .dp-photo{background:#EDE7DC;color:var(--orange)}
  :root{--red:#C0564B}

  /* ── homeowner update card (voice demo) ── */
  .uc{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.28);color:var(--ink);text-align:left}
  .uc-head{background:var(--orange);color:#fff;padding:13px 16px}
  .uc-head .n{font-size:14px;font-weight:800;letter-spacing:-.3px}
  .uc-head .d{font-size:10.5px;opacity:.82;font-weight:600;margin-top:1px}
  .uc-photos{display:flex;gap:6px;padding:12px 15px 4px}
  .uc-ph{flex:1;height:66px;border-radius:9px;overflow:hidden;background:#E7DCC9}
  .uc-ph svg{display:block;width:100%;height:100%}
  .uc-body{padding:6px 15px 15px}
  .uc-lab{font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin:11px 0 5px}
  .uc-li{display:flex;gap:8px;font-size:12.5px;color:var(--slate);padding:2px 0;line-height:1.5}
  .uc-status{display:inline-flex;align-items:center;gap:6px;background:var(--indigo-light);color:var(--green);font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 12px;margin-top:4px}
  .uc-msg{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:12px;color:var(--slate);line-height:1.55;margin-top:11px}
  .uc-auto{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
  .uc-auto div{font-size:10.5px;color:var(--green);font-weight:700}

  /* ── live timeline portal (section) ── */
  .tlp{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 4px 12px rgba(30,58,95,.05),0 26px 60px rgba(30,58,95,.11)}
  .tlp-hero{background:var(--orange);color:#fff;padding:22px 26px}
  .tlp-hero .n{font-size:19px;font-weight:800;letter-spacing:-.4px}
  .tlp-hero .p{font-size:34px;font-weight:800;color:var(--peach);letter-spacing:-1.5px;margin-top:6px;line-height:1}
  .tlp-hero .s{font-size:12px;color:rgba(255,255,255,.8);margin-top:4px}
  .tlp-hero .track{height:6px;background:rgba(255,255,255,.18);border-radius:99px;margin-top:12px;overflow:hidden}
  .tlp-hero .fill{height:100%;width:65%;background:var(--peach);border-radius:99px}
  .tlp-body{padding:22px 26px}
  .tlp-row{display:flex;gap:13px;padding:9px 0}
  .tlp-row .dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
  .tlp-row.done .dot{background:var(--green);color:#fff}
  .tlp-row.now .dot{background:var(--orange);color:#fff;box-shadow:0 0 0 4px #EDE7DC}
  .tlp-row.next .dot{background:#fff;border:2px solid var(--orange);color:var(--orange)}
  .tlp-row.todo .dot{background:#fff;border:2px solid var(--line);color:var(--muted)}
  .tlp-row .nm{font-size:14.5px;font-weight:700;color:var(--ink)}
  .tlp-row.todo .nm{font-weight:600;color:var(--slate)}
  .tlp-row .meta{font-size:11.5px;color:var(--muted);margin-top:1px}
  .tlp-row .meta .ph{color:var(--orange);font-weight:700}
  .tlp-upd{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px}
  .tlp-upd .h{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--orange)}
  .tlp-upd .t{font-size:13px;color:var(--slate);line-height:1.55;margin-top:5px}
  .tlp-q{max-width:560px;margin:26px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
  .tlp-qc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--slate)}
  .tlp-qc b{color:var(--ink);display:block;font-size:13px;margin-bottom:2px}

  /* ── selection hub (section) ── */
  .selh{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto}
  @media(max-width:640px){.selh{grid-template-columns:1fr}}
  .selh-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.07)}
  .selh-card.attn{border-color:rgba(217,154,61,.4);background:linear-gradient(160deg,#fff 72%,#FBEEDA)}
  .selh-h{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:7px}
  .selh-row{display:flex;align-items:center;font-size:14px;color:var(--slate);padding:7px 0;border-bottom:1px solid var(--line)}
  .selh-row:last-child{border-bottom:0}
  .selh-row .tag{margin-left:auto;font-size:10px;font-weight:800;border-radius:999px;padding:3px 10px}
  .selh-sub{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
  .selh-sub:first-of-type{margin-top:0}

  /* ── contract / documents (section) ── */
  .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto}
  @media(max-width:720px){.doc-grid{grid-template-columns:1fr}}
  .doc-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 30px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.07)}
  .doc-card .num{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--coral));color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .doc-card h3{font-size:17px;font-weight:800;margin-bottom:6px}
  .doc-card p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px}
  .doc-chips{display:flex;flex-wrap:wrap;gap:7px}
  .doc-chip{font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--slate)}
  .doc-chip.ok{background:var(--indigo-light);border-color:rgba(107,143,113,.25);color:var(--green)}

  /* demo */
  .demo{padding:80px 0;background:
      radial-gradient(700px 340px at 85% 0%, rgba(216,195,165,.14), transparent 60%),
      radial-gradient(700px 340px at 10% 100%, rgba(216,195,165,.12), transparent 60%),
      linear-gradient(140deg,#14283F,#1E3A5F 90%);color:#fff}
  .demo h2{text-align:center;font-size:clamp(26px,3.8vw,36px);font-weight:700;margin-bottom:10px}
  .demo .sub{text-align:center;color:#A8B4C4;margin-bottom:46px;font-size:16px}
  .demo-grid{display:grid;grid-template-columns:1fr 64px 1fr;gap:20px;align-items:center;max-width:920px;margin:0 auto}
  @media(max-width:780px){.demo-grid{grid-template-columns:1fr;gap:14px}.demo-arrow{transform:rotate(90deg)}}
  .demo-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:26px;backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.3)}
  .demo-card .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#A8B4C4;margin-bottom:14px}
  .voice-bubble{background:rgba(0,0,0,.38);border-radius:16px;padding:18px;font-style:italic;color:#d5dce8;font-size:15px;position:relative;border:1px solid rgba(255,255,255,.06)}
  .voice-bubble::before{content:'🎙️';position:absolute;top:-15px;left:16px;font-size:22px}
  .demo-arrow{text-align:center;font-size:38px;background:linear-gradient(90deg,var(--coral),var(--peach));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900}
  .update-line{display:flex;gap:11px;padding:6px 0;font-size:14.5px}
  .demo .timer{text-align:center;margin-top:34px;font-size:15px;color:#A8B4C4}
  .demo .timer b{color:var(--coral)}

  /* sections */
  .section{padding:80px 0}
  .section h2{font-size:clamp(26px,3.8vw,36px);font-weight:700;text-align:center;margin-bottom:12px;color:var(--ink)}
  .section .sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 50px;font-size:17px}
  .eyebrow{display:block;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--orange-hot);margin-bottom:12px}

  .pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .pain{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;font-size:15px;box-shadow:0 2px 4px rgba(12,18,32,.03),0 12px 28px rgba(12,18,32,.05);transition:transform .2s, box-shadow .2s}
  .pain:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(12,18,32,.05),0 22px 44px rgba(12,18,32,.09)}
  .pain .q{font-weight:800;margin-bottom:5px}
  .pain .a{color:var(--muted);font-size:13.5px}
  .pain .a b{color:var(--green)}
  .pain-lead{font-size:18px;color:var(--slate);text-align:center;font-weight:600;margin-bottom:6px}
  .pain-close{text-align:center;font-size:clamp(20px,2.6vw,24px);font-weight:800;color:var(--orange);margin-top:38px;letter-spacing:-.4px}

  /* before / after */
  .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:840px;margin:0 auto}
  @media(max-width:640px){.ba-grid{grid-template-columns:1fr}}
  .ba-card{border-radius:22px;padding:28px 30px;border:1px solid var(--line);background:#fff;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.06)}
  .ba-card.before{background:linear-gradient(160deg,#fff 68%,#FBECEA);border-color:rgba(192,86,75,.28)}
  .ba-card.after{background:linear-gradient(160deg,#fff 66%,var(--indigo-light));border-color:rgba(107,143,113,.34)}
  .ba-h{font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
  .ba-card.before .ba-h{color:var(--red)}
  .ba-card.after .ba-h{color:var(--green)}
  .ba-li{display:flex;gap:11px;font-size:15px;color:var(--slate);padding:9px 0;border-bottom:1px solid var(--line);line-height:1.45;align-items:flex-start}
  .ba-li:last-child{border-bottom:0}
  .ba-li .mk{flex-shrink:0;font-weight:800;font-size:15px}
  .ba-card.before .mk{color:var(--red)}
  .ba-card.after .mk{color:var(--green)}

  /* works with your tools */
  .works-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:14px;align-items:center;max-width:820px;margin:0 auto}
  @media(max-width:680px){.works-grid{grid-template-columns:1fr;gap:12px}}
  .works-card{border:1px solid var(--line);border-radius:22px;padding:28px 30px;background:#fff;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.06)}
  .works-card.you{background:var(--bg)}
  .works-card.bl{background:linear-gradient(160deg,#fff 64%,var(--gold-light));border-color:rgba(200,133,26,.32)}
  .works-h{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
  .works-card.bl .works-h{color:var(--gold-deep)}
  .works-li{display:flex;gap:9px;font-size:14.5px;color:var(--slate);padding:6px 0}
  .works-li .c{font-weight:800;flex-shrink:0}
  .works-card.you .c{color:var(--muted)}
  .works-card.bl .c{color:var(--green)}
  .works-plus{width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--orange);margin:0 auto;box-shadow:0 6px 16px rgba(30,58,95,.1)}
  @media(max-width:680px){.works-plus{width:44px;height:44px;font-size:20px}}
  .works-foot{text-align:center;font-size:clamp(17px,2.2vw,20px);font-weight:800;color:var(--ink);max-width:660px;margin:36px auto 0;letter-spacing:-.3px}

  /* hero phone (what the homeowner receives) */
  .phone{max-width:390px;margin:0 auto;background:#fff;border-radius:34px;border:11px solid #14283F;box-shadow:0 40px 90px rgba(30,58,95,.3),0 8px 20px rgba(30,58,95,.12);overflow:hidden}
  .phone-hd{background:var(--orange);color:#fff;padding:20px 20px 18px;position:relative}
  .phone-hd .lab{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--peach)}
  .phone-hd .ttl{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:4px}
  .phone-hd .wk{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:2px}
  .phone-bd{padding:16px 18px 20px}
  .phone-lab{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:14px 0 7px}
  .phone-lab:first-child{margin-top:0}
  .phone-li{display:flex;gap:9px;font-size:13.5px;color:var(--slate);padding:3px 0;line-height:1.45}
  .phone-li .c{color:var(--green);font-weight:800;flex-shrink:0}
  .phone-li .a{color:var(--orange);font-weight:800;flex-shrink:0}
  .phone-photos{display:flex;gap:7px;margin-top:6px}
  .phone-ph{flex:1;height:58px;border-radius:9px;overflow:hidden;position:relative}
  .phone-ph svg{display:block;width:100%;height:100%}
  .phone-ph .pl{position:absolute;left:6px;bottom:5px;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

  /* hero flow: contractor voice → AI → homeowner */
  .flow{max-width:400px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
  .flow-step{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .flow-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 4px 12px rgba(30,58,95,.05),0 22px 50px rgba(30,58,95,.12);overflow:hidden;text-align:left}
  .rec-top{background:linear-gradient(140deg,#14283F,var(--orange));color:#fff;padding:18px 20px}
  .rec-top .lab{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--peach)}
  .rec-row{display:flex;align-items:center;gap:13px;margin-top:12px}
  .rec-mic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
  .rec-wave{flex:1;display:flex;align-items:center;gap:3px;height:34px}
  .rec-wave i{flex:1;background:var(--peach);border-radius:2px;opacity:.9}
  .rec-quote{padding:15px 20px 6px;font-size:14px;color:var(--slate);font-style:italic;line-height:1.55}
  .rec-meta{padding:2px 20px 16px;font-size:11.5px;font-weight:800;color:var(--gold-deep);display:flex;align-items:center;gap:6px}
  .flow-arrow{display:flex;flex-direction:column;align-items:center;padding:12px 0 10px}
  .flow-arrow .ar{font-size:20px;color:var(--gold-deep);line-height:.7}
  .flow-arrow .lb{font-size:12.5px;font-weight:800;color:var(--orange);margin-top:6px;text-align:center}
  .flow-msg{max-width:560px;margin:34px auto 0;text-align:center}
  .flow-msg .big{font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--orange);letter-spacing:-.6px;line-height:1.15}
  .flow-msg .small{font-size:16px;color:var(--slate);font-weight:600;margin-top:6px}

  /* embedded full demo */
  .demo-embed{max-width:660px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 6px 16px rgba(30,58,95,.06),0 30px 70px rgba(30,58,95,.16);overflow:hidden}
  .demo-embed iframe{display:block;width:100%;height:600px;border:0}
  @media(max-width:640px){.demo-embed{border-radius:22px}.demo-embed iframe{height:620px}}

  .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
  .feat{border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff;transition:transform .2s, box-shadow .2s;position:relative;overflow:hidden}
  .feat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--coral));opacity:0;transition:opacity .2s}
  .feat:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(12,18,32,.05),0 26px 52px rgba(12,18,32,.11)}
  .feat:hover::before{opacity:1}
  .feat .ico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:25px;background:linear-gradient(135deg,#F3EDE2,#E8DCC8);box-shadow:inset 0 0 0 1px rgba(30,58,95,.10)}
  .feat h3{font-size:16.5px;font-weight:800;margin:14px 0 6px}
  .feat p{font-size:14px;color:var(--muted)}

  /* gap */
  .gap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
  .gap-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 12px 28px rgba(30,58,95,.05)}
  .gap-card .gap-ico{font-size:30px;margin-bottom:14px}
  .gap-card h3{font-size:17px;font-weight:800;margin-bottom:8px;color:var(--ink)}
  .gap-card p{font-size:14px;color:var(--muted);line-height:1.65}
  .gap-hero{background:var(--orange);border-color:var(--orange)}
  .gap-hero h3{color:#fff}
  .gap-hero p{color:rgba(255,255,255,.82)}

  /* compare */
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:22px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.07)}
  .cmp{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;background:#fff;border-radius:22px;overflow:hidden;font-size:13.5px}
  .cmp td, .cmp th{vertical-align:top}
  .cmp th{background:var(--bg);padding:16px 18px;text-align:left;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--slate);border-bottom:2px solid var(--line)}
  .cmp th.cmp-us{background:var(--orange);color:#fff}
  .cmp td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
  .cmp td:first-child{font-weight:700;color:var(--ink)}
  .cmp td.cmp-us{background:rgba(30,58,95,.045);color:var(--ink);font-weight:700}
  /* mobile: stack the comparison into per-feature cards (no sideways scrolling) */
  @media(max-width:640px){
    #compare .cmp-wrap{overflow:visible;box-shadow:none;border-radius:0}
    #compare .cmp{min-width:0;width:100%;display:block;background:transparent;font-size:14.5px}
    #compare .cmp tbody{display:block;width:100%}
    #compare .cmp tr{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 18px rgba(30,58,95,.06);margin-bottom:12px;overflow:hidden}
    #compare .cmp tr:first-child{display:none}
    #compare .cmp td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--line);padding:11px 16px;text-align:right}
    #compare .cmp tr td:last-child{border-bottom:0}
    #compare .cmp td:first-child{display:block;text-align:left;font-weight:800;color:#fff;background:var(--orange);font-size:15px}
    #compare .cmp td:not(:first-child)::before{content:attr(data-col);color:var(--muted);font-weight:700;font-size:13px;text-align:left}
    #compare .cmp td:nth-child(2){background:rgba(30,58,95,.05);color:var(--navy);font-weight:800}
    #compare .cmp td:nth-child(2)::before{content:'JobsiteLoop';color:var(--navy)}
    #compare .cmp td:nth-child(3)::before{content:'Buildertrend'}
    #compare .cmp td:nth-child(4)::before{content:'JobTread'}
    #compare .cmp td:nth-child(5)::before{content:'What you do now'}
  }
  .cmp tr:last-child td{border-bottom:0}

  /* pricing */
  .pricing{background:linear-gradient(180deg,rgba(240,236,228,.62),rgba(255,255,255,.34))}
  .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:940px;margin:0 auto;align-items:start}
  .plan{background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:32px;text-align:center;position:relative;transition:transform .2s, box-shadow .2s}
  .plan:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(12,18,32,.10)}
  .plan.popular{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--orange),var(--coral)) border-box;box-shadow:0 20px 50px rgba(30,58,95,.20);transform:scale(1.03)}
  .plan.popular:hover{transform:scale(1.03) translateY(-4px)}
  .plan .pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff;font-size:11.5px;font-weight:800;padding:5px 16px;border-radius:999px;letter-spacing:.5px;box-shadow:0 4px 14px var(--glow)}
  .plan h3{font-size:17px;font-weight:800}
  .plan .price{font-size:42px;font-weight:800;margin:14px 0 2px;letter-spacing:-1px;color:var(--orange)}
  .plan .price small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
  .plan .for{color:var(--muted);font-size:13.5px;margin-bottom:20px}
  .plan ul{list-style:none;text-align:left;font-size:14px;margin-bottom:24px}
  .plan li{padding:6px 0 6px 28px;position:relative}
  .plan li::before{content:'✓';position:absolute;left:2px;color:var(--green);font-weight:900}
  .bill-toggle{display:flex;justify-content:center;gap:6px;background:#F1EDE6;border-radius:999px;padding:5px;max-width:420px;margin:0 auto 28px}
  .bill-toggle .bt{flex:1;border:0;background:transparent;border-radius:999px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--slate);cursor:pointer;font-family:inherit}
  .bill-toggle .bt.on{background:#fff;color:#1E3A5F;box-shadow:0 2px 10px rgba(30,58,95,.14)}
  .bill-toggle .bt-save{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:800;color:var(--gold-deep)}
  .plan .alt-price{font-size:13px;color:var(--muted);margin-bottom:10px}
  .compare{text-align:center;margin-top:30px;font-size:14px;color:var(--muted)}
  .compare b{color:var(--ink)}

  /* signup */
  .signup{position:relative;background:
      radial-gradient(600px 300px at 80% 0%, rgba(216,195,165,.20), transparent 60%),
      linear-gradient(135deg,#2A4A73,var(--orange) 45%,var(--orange-hot));color:#fff;text-align:center;overflow:hidden}
  .signup h2{color:#fff}
  .signup .sub{color:#D8C3A5}
  /* founder section — live sample of the homeowner portal */
  .founder-portal{max-width:460px;margin:34px auto 0;text-align:left;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(30,58,95,.18);border:1px solid var(--line);background:#fff}
  .fp-head{background:linear-gradient(135deg,#2A4A73,#16304F);color:#fff;padding:22px}
  .fp-ey{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:#A8B4C4}
  .fp-ttl{font-size:22px;font-weight:800;margin-top:6px;letter-spacing:-.3px}
  .fp-addr{font-size:12.5px;color:#A8B4C4;margin-top:2px}
  .fp-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .fp-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px 12px}
  .fp-stat .v{font-size:15px;font-weight:800}
  .fp-stat .l{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#A8B4C4;margin-top:4px}
  .fp-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:15px}
  .fp-bar span{display:block;height:100%;background:linear-gradient(90deg,#8B7BD8,#C6A15B)}
  .fp-latest{font-size:12.5px;color:#D8C3A5;margin-top:11px}
  .fp-tabs{display:flex;gap:7px;padding:14px;flex-wrap:wrap;background:var(--bg);border-bottom:1px solid var(--line)}
  .fp-tabs span{font-size:12px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
  .fp-tabs span.on{background:#1E3A5F;color:#fff;border-color:#1E3A5F;font-weight:700}
  .fp-card{padding:18px}
  .fp-card-h{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.8px;color:#7A828E;margin-bottom:12px}
  .fp-li{font-size:13.5px;color:var(--ink);margin:8px 0;line-height:1.45}
  .fp-li i{font-style:normal}
  .fp-react{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid #EDE7DC;flex-wrap:wrap}
  .fp-react .q{font-size:11.5px;color:#7A828E}
  .fp-react .pill{font-size:12px;font-weight:700;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
  .fp-react .pill.gold{color:#C6851A}

  /* ── animations ── */
  @keyframes recdot{0%,100%{opacity:1}50%{opacity:.25}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes sparkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
  @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  @keyframes popstar{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}

  /* ── before / after JobsiteLoop graphic ── */
  .baf-grid{display:grid;grid-template-columns:1fr 64px 1fr;gap:16px;align-items:center;max-width:900px;margin:0 auto}
  @media(max-width:760px){.baf-grid{grid-template-columns:1fr;gap:20px}.baf-vs{transform:none;margin:0 auto}}
  .baf-side{border-radius:24px;padding:24px;box-shadow:0 20px 50px rgba(30,58,95,.10)}
  .baf-side.bad{background:linear-gradient(160deg,#fff 60%,#FBECEA);border:1px solid rgba(192,86,75,.22)}
  .baf-side.good{background:linear-gradient(160deg,#fff 58%,var(--indigo-light));border:1px solid rgba(107,143,113,.3)}
  .baf-tag{font-size:14px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
  .baf-side.bad .baf-tag{color:var(--red)}
  .baf-side.good .baf-tag{color:var(--green)}
  .msg-thread{display:flex;flex-direction:column;gap:8px}
  .msg{max-width:86%;font-size:13.5px;padding:9px 13px;border-radius:16px;line-height:1.35;position:relative}
  .msg.them{align-self:flex-start;background:#ECEAE4;color:#33302B;border-bottom-left-radius:5px}
  .msg.you{align-self:flex-end;background:#3E6494;color:#fff;border-bottom-right-radius:5px}
  .msg-overwhelm{text-align:center;font-size:12.5px;color:var(--red);font-weight:700;margin-top:12px}
  .baf-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:9px;box-shadow:0 2px 6px rgba(30,58,95,.04)}
  .baf-row:last-child{margin-bottom:0}
  .baf-row .ck{width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
  .baf-row .lab{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
  .baf-happy{display:flex;align-items:center;gap:11px;background:var(--indigo-light);border:1px solid rgba(107,143,113,.3);border-radius:13px;padding:12px 14px}
  .baf-happy .big{font-size:22px}
  .baf-happy .lab{flex:1;font-size:14px;font-weight:700;color:var(--green)}
  .baf-happy .pct{font-size:20px;font-weight:800;color:var(--green)}
  .baf-vs{width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 8px 20px var(--glow)}

  /* ── homeowner journey timeline ── */
  .journey{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
  .journey::before{content:'';position:absolute;top:34px;left:10%;right:10%;height:3px;background:linear-gradient(90deg,var(--peach),var(--coral),var(--green));border-radius:2px;z-index:0}
  @media(max-width:720px){.journey{grid-template-columns:1fr 1fr;gap:22px 10px}.journey::before{display:none}}
  .jstep{text-align:center;position:relative;z-index:1;padding:0 6px}
  .jstep .jdot{width:68px;height:68px;border-radius:50%;background:#fff;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;box-shadow:0 8px 22px rgba(30,58,95,.1)}
  .jstep:nth-child(1) .jdot{border-color:var(--peach)}.jstep:nth-child(2) .jdot{border-color:#D6A55E}.jstep:nth-child(3) .jdot{border-color:var(--coral)}.jstep:nth-child(4) .jdot{border-color:#8FBF97}.jstep:nth-child(5) .jdot{border-color:var(--green)}
  .jstep .jname{font-size:15px;font-weight:800;color:var(--ink)}
  .jstep .jsub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
  .jstep .jsub b{color:var(--green);font-weight:700}

  /* ── homeowner reaction visual ── */
  .react-visual{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:0;align-items:center}
  .notif{width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 14px 36px rgba(30,58,95,.12);text-align:left}
  .notif .app{width:40px;height:40px;border-radius:11px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  .notif .n-t{font-size:13px;font-weight:800;color:var(--ink)}
  .notif .n-s{font-size:12.5px;color:var(--muted);margin-top:1px}
  .notif .n-time{font-size:11px;color:var(--muted)}
  .react-arrow{font-size:24px;color:var(--gold-deep);padding:10px 0}
  .react-card{width:100%;background:linear-gradient(150deg,#fff 70%,var(--gold-light));border:1px solid rgba(200,133,26,.3);border-radius:18px;padding:20px 22px;text-align:center;box-shadow:0 14px 36px rgba(30,58,95,.1)}
  .react-card .stars{font-size:30px;letter-spacing:4px;color:var(--gold)}
  .react-card .stars span{display:inline-block;animation:popstar .5s ease both}
  .react-card .stars span:nth-child(2){animation-delay:.08s}.react-card .stars span:nth-child(3){animation-delay:.16s}.react-card .stars span:nth-child(4){animation-delay:.24s}.react-card .stars span:nth-child(5){animation-delay:.32s}
  .react-card .quote{font-size:17px;font-weight:700;color:var(--ink);margin-top:10px}
  .react-card .who{font-size:13px;color:var(--muted);margin-top:4px}

  .reveal-after{text-align:center;margin-top:38px;max-width:560px;margin-left:auto;margin-right:auto}
  .reveal-after .ra-h{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.2px}
  .reveal-after .ra-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin:18px 0}
  @media(max-width:600px){.reveal-after .ra-grid{grid-template-columns:1fr 1fr}}
  .reveal-after .ra-grid span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:10px 8px;font-size:13px;font-weight:600;color:#D8E2EE}
  .reveal-after .ra-stars{font-size:26px;letter-spacing:4px;color:var(--peach);margin-top:6px}
  .reveal-after .ra-lab{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#A8B4C4;margin-top:4px}

  /* ── 30-second magic upgrade ── */
  .magic-ai{text-align:center;padding:6px 0}
  .magic-ai .orb{width:64px;height:64px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--coral),var(--peach));display:flex;align-items:center;justify-content:center;font-size:30px;animation:sparkle 1.8s ease-in-out infinite;box-shadow:0 0 40px rgba(216,195,165,.6)}
  .magic-ai .lab{font-size:13px;font-weight:800;color:#A8B4C4;text-transform:uppercase;letter-spacing:1.4px;margin-top:12px;background:linear-gradient(90deg,#A8B4C4,#fff,#A8B4C4);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2.4s linear infinite}

  .tstar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:960px;margin:0 auto}
  .tstar{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.06);text-align:left}
  .tstar-stars{color:var(--gold);letter-spacing:2px;font-size:17px}
  .tstar p{font-size:15px;color:var(--slate);line-height:1.6;margin:12px 0 14px;font-weight:500}
  .tstar-who{font-size:13px;color:var(--muted)}
  .tstar-who b{color:var(--ink)}

  .try-mic-zone{text-align:center;margin-bottom:20px}
  .try-mic{width:96px;height:96px;border-radius:50%;border:0;background:linear-gradient(150deg,var(--coral),var(--orange) 60%,var(--orange-hot));color:#fff;font-size:38px;cursor:pointer;box-shadow:0 14px 34px rgba(30,58,95,.28), inset 0 2px 6px rgba(255,255,255,.25);transition:transform .15s}
  .try-mic:hover{transform:scale(1.04)}
  .try-mic:active{transform:scale(.94)}
  .try-mic.recording{animation:trymicpulse 1.4s infinite;background:linear-gradient(150deg,#D07A6F,#C0564B 60%,#A8453A)}
  @keyframes trymicpulse{0%{box-shadow:0 0 0 0 rgba(192,86,75,.4)}70%{box-shadow:0 0 0 24px rgba(192,86,75,0)}100%{box-shadow:0 0 0 0 rgba(192,86,75,0)}}
  .try-mic-hint{font-size:15px;color:var(--slate);font-weight:700;margin-top:16px}
  .try-sample{display:inline-block;margin-top:10px;background:none;border:0;color:var(--coral);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
  .try-sample:hover{text-decoration:underline}
  .try-transcript{max-width:560px;margin:20px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:16px;color:var(--ink);line-height:1.5;text-align:left;min-height:56px;box-shadow:0 6px 18px rgba(30,58,95,.06)}
  .try-transcript::before{content:'🎙 ';opacity:.6}
  .try-transcript .caret{display:inline-block;width:2px;height:18px;background:var(--coral);vertical-align:-3px;margin-left:1px;animation:recdot .8s steps(1) infinite}
  .try-creating{max-width:560px;margin:22px auto 0;text-align:center;padding:22px}
  .try-creating .orb{width:58px;height:58px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--coral),var(--peach));display:flex;align-items:center;justify-content:center;font-size:28px;animation:sparkle 1.6s ease-in-out infinite;box-shadow:0 0 36px rgba(216,195,165,.6)}
  .try-creating .lab{font-size:14px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:1.4px;margin-top:14px}
  /* homeowner update card reveal */
  @keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .tho{max-width:420px;margin:24px auto 0;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(30,58,95,.22);border:1px solid var(--line);text-align:left;animation:fadeup .6s cubic-bezier(.22,1,.36,1) both}
  .tho-head{background:var(--orange);color:#fff;padding:20px 22px}
  .tho-head .lab{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--peach)}
  .tho-head .ttl{font-size:20px;font-weight:800;margin-top:3px}
  .tho-head .wk{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:2px}
  .tho-body{padding:16px 22px 20px}
  .tho-lab{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
  .tho-lab:first-child{margin-top:0}
  .tho-li{font-size:15px;color:var(--slate);padding:3px 0;line-height:1.45;opacity:0;animation:fadeup .45s ease both}
  .tho-li .c{color:var(--green);font-weight:800}.tho-li .a{color:var(--orange);font-weight:800}.tho-li .w{color:#A9762C;font-weight:800}
  .tho-foot{background:var(--bg);text-align:center;padding:16px}
  .tho-foot .stars{font-size:24px;letter-spacing:4px;color:var(--gold)}
  .tho-foot .stars span{display:inline-block;animation:popstar .5s ease both}
  .tho-foot .stars span:nth-child(2){animation-delay:.1s}.tho-foot .stars span:nth-child(3){animation-delay:.2s}.tho-foot .stars span:nth-child(4){animation-delay:.3s}.tho-foot .stars span:nth-child(5){animation-delay:.4s}
  .tho-foot .lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--orange-hot);margin-top:4px}
  .try-recap{max-width:420px;margin:16px auto 0;text-align:center;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.5}
  .try-recap b{color:var(--orange)}
  /* five feature categories */
  .fcat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1000px;margin:0 auto}
  .fcat{flex:0 1 300px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 12px 30px rgba(30,58,95,.06);transition:transform .2s, box-shadow .2s}
  @media(max-width:560px){.fcat{flex:1 1 100%}}
  .fcat:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(12,18,32,.06),0 26px 52px rgba(12,18,32,.1)}
  .fcat .i{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,#F3EDE2,#E8DCC8);box-shadow:inset 0 0 0 1px rgba(30,58,95,.08)}
  .fcat h3{font-size:18px;font-weight:800;color:var(--ink);margin:14px 0 7px;letter-spacing:-.3px}
  .fcat p{font-size:14.5px;color:var(--muted);line-height:1.55}
  .fcat .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:800;color:var(--orange)}
  /* included checklist */
  .incl{max-width:820px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 32px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.06)}
  .incl-h{font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange-hot);text-align:center;margin-bottom:20px}
  .incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
  @media(max-width:600px){.incl-grid{grid-template-columns:1fr}}
  .incl-grid div{font-size:15px;color:var(--slate);font-weight:500;display:flex;gap:10px;align-items:center}
  .incl-grid div::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0}
  .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
  @media(max-width:760px){.ben-grid{grid-template-columns:1fr}}
  .ben-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:0 2px 4px rgba(37,37,37,.03),0 14px 34px rgba(30,58,95,.06);transition:transform .2s, box-shadow .2s}
  .ben-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(12,18,32,.06),0 28px 56px rgba(12,18,32,.12)}
  .ben-ico{font-size:38px}
  .ben-card h3{font-size:20px;font-weight:800;color:var(--ink);margin:14px 0 8px;letter-spacing:-.3px}
  .ben-card p{font-size:15px;color:var(--muted);line-height:1.6}
  .ben-more{display:inline-block;margin-top:16px;font-size:14px;font-weight:800;color:var(--orange)}
  .try-wrap{max-width:620px;margin:0 auto}
  /* feature flow */
  .fflow{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
  .fflow-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 26px;text-align:center;box-shadow:0 8px 24px rgba(30,58,95,.07);width:100%}
  .fflow-ico{font-size:34px}
  .fflow-t{font-size:16px;font-weight:800;color:var(--ink);margin-top:6px}
  .fflow-arrow{font-size:22px;color:var(--gold-deep);padding:9px 0}
  .fflow-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:740px;margin:36px auto 0}
  .fflow-chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;color:var(--slate)}
  /* product showcase (what homeowners see) */
  .showcase{background:linear-gradient(150deg,#14283F,#274870 120%);color:#fff}
  .showcase .eyebrow{color:var(--peach)}
  .showcase h2{color:#fff}
  .showcase .sub{color:rgba(255,255,255,.78)}
  .showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:920px;margin:38px auto 0}
  @media(max-width:760px){.showcase-grid{grid-template-columns:1fr;gap:28px}}
  .showcase-list{display:flex;flex-direction:column;gap:13px;text-align:left}
  .showcase-list .sl{display:flex;gap:13px;align-items:center;font-size:16px;font-weight:600;color:#EAF1F8}
  .showcase-list .sl .i{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  /* subtle scroll reveal */
  .pre-reveal{opacity:0;transform:translateY(18px)}
  .pre-reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
  .try-wrap textarea{width:100%;border:1.5px solid var(--line);border-radius:16px;padding:16px;font-size:16px;font-family:inherit;resize:vertical;color:var(--ink)}
  .try-wrap textarea:focus{outline:0;border-color:var(--orange)}
  .try-wrap>.btn{margin-top:14px;width:100%}
  .try-loading{text-align:center;color:var(--muted);font-size:15px;padding:24px}
  .try-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(30,58,95,.12);margin-top:22px;overflow:hidden;text-align:left}
  .try-card-h{background:var(--orange);color:#fff;font-size:16px;font-weight:800;padding:16px 20px}
  .try-card .tl-line{display:flex;gap:10px;padding:7px 20px;font-size:15px;color:var(--slate);line-height:1.5}
  .try-card .tl-line span:first-child{color:var(--green);font-weight:800}
  .try-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:12px 20px 2px}
  .try-cta{text-align:center;margin-top:20px}
  .try-cta b{display:block;font-size:18px;color:var(--ink);margin-bottom:14px}
  footer{padding:38px 0;text-align:center;color:var(--muted);font-size:13px;background:transparent}

  /* --- old way vs new way (chase graphic) --- */
  .chase-sec{background:var(--tint)}
  .msg-ch{display:block;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.72;margin-bottom:4px}
  .msg.you .msg-ch{color:rgba(255,255,255,.85)}
  .msg{max-width:92%}
  .baf-side.bad .msg-thread{gap:9px}
  .baf-note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
  .baf-side.good .baf-happy .lab{line-height:1.35}
  .baf-side .baf-foot{margin-top:14px;text-align:center;font-size:12.5px;font-weight:700}
  .baf-side.good .baf-foot{color:var(--green)}

  /* ═══════════════════════════════════════════════
     MULTI PRODUCT: umbrella landing + property management
     Added Aug 26 2026. Reuses every token above.
     ═══════════════════════════════════════════════ */
  :root{
    --sev-ok:#6B8F71; --sev-ok-bg:#EDF3EE;
    --sev-note:#3E6494; --sev-note-bg:#E9EEF5;
    --sev-rec:#B9821F; --sev-rec-bg:#F9F1E3;
    --sev-req:#C0564B; --sev-req-bg:#F6EBE9;
  }

  /* nav product switcher */
  .navswitch{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:0;vertical-align:middle}
  .navswitch a{margin-left:0;padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
  .navswitch a.on{background:#fff;color:var(--orange);box-shadow:0 2px 8px rgba(30,58,95,.10)}
  .navswitch a:hover{color:var(--ink)}
  @media(max-width:900px){.navswitch{display:none}}

  /* umbrella: the two product paths */
  .pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:12px;text-align:left}
  @media(max-width:860px){.pathgrid{grid-template-columns:1fr}}
  .path{position:relative;display:block;text-decoration:none;color:inherit;background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:34px 30px 28px;box-shadow:0 2px 12px rgba(30,58,95,.05);transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
  .path::before{content:'';position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--orange),var(--coral))}
  .path.pm::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
  .path:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(30,58,95,.15);border-color:var(--orange)}
  .path.pm:hover{border-color:var(--gold-deep)}
  .path-ico{font-size:32px;line-height:1}
  .path-for{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:18px}
  .path h3{font-size:25px;font-weight:800;color:var(--ink);margin-top:5px;letter-spacing:-.6px}
  .path .lede{font-size:15.5px;color:var(--muted);margin-top:11px;line-height:1.6}
  .path ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  .path li{font-size:14.5px;color:var(--slate);padding-left:25px;position:relative;line-height:1.5}
  .path li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:800}
  .path-go{display:inline-block;margin-top:24px;font-size:15px;font-weight:800;color:var(--orange)}
  .path.pm .path-go{color:var(--gold-deep)}
  .path-tag{position:absolute;top:22px;right:24px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--gold-light);color:var(--gold-deep);padding:5px 12px;border-radius:999px}

  /* shared proof band on the umbrella page */
  .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  @media(max-width:820px){.proof-grid{grid-template-columns:1fr}}
  .proof-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:26px 24px;text-align:left}
  .proof-card .i{font-size:26px}
  .proof-card h3{font-size:17.5px;font-weight:800;margin-top:12px;color:var(--ink)}
  .proof-card p{font-size:14.5px;color:var(--muted);margin-top:9px;line-height:1.6}

  /* finding types */
  .ftype-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;text-align:left}
  @media(max-width:920px){.ftype-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.ftype-grid{grid-template-columns:1fr}}
  .ftype{background:#fff;border:1.5px solid var(--line);border-top-width:5px;border-radius:18px;padding:22px 20px;display:flex;flex-direction:column}
  .ftype.ok{border-top-color:var(--sev-ok)}
  .ftype.note{border-top-color:var(--sev-note)}
  .ftype.rec{border-top-color:var(--sev-rec)}
  .ftype.req{border-top-color:var(--sev-req)}
  .ftype .lab{font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
  .ftype.ok .lab{color:var(--sev-ok)}
  .ftype.note .lab{color:var(--sev-note)}
  .ftype.rec .lab{color:var(--sev-rec)}
  .ftype.req .lab{color:var(--sev-req)}
  .ftype h3{font-size:17px;font-weight:800;margin-top:9px;color:var(--ink);letter-spacing:-.3px}
  .ftype p{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.55}
  .ftype .out{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--slate)}

  /* the smoke and CO submit gate */
  .gate{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:26px 26px 24px;box-shadow:0 22px 52px rgba(30,58,95,.13);max-width:430px;width:100%;text-align:left}
  .gate-ey{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--sev-req)}
  .gate h4{font-size:20px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.5px}
  .gate .addr{font-size:13px;color:var(--muted);margin-top:3px}
  .dchecks{margin-top:18px}
  .dcheck{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid #F2EEE7;font-size:14px}
  .dcheck:first-child{border-top:0}
  .dcheck .ph{width:28px;height:28px;border-radius:8px;background:var(--bg);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
  .dcheck .loc{font-weight:700;color:var(--ink);line-height:1.25}
  .dcheck .kind{font-size:10.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:700}
  .dcheck .st{margin-left:auto;font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
  .st.ok{background:var(--sev-ok-bg);color:#4B7B52}
  .st.bad{background:var(--sev-req-bg);color:var(--sev-req)}
  .st.open{background:#F1EDE5;color:#8A9099}
  .gate-block{margin-top:17px;background:var(--sev-req-bg);border:1px solid #E0B0A9;border-radius:14px;padding:13px 15px;font-size:13px;color:#A8483E;font-weight:600;line-height:1.5}
  .gate-btn{margin-top:12px;width:100%;padding:15px;border:0;border-radius:14px;background:#EFEAE1;color:#A2A8B0;font-weight:800;font-size:15px;font-family:inherit;cursor:not-allowed}

  /* the compliance record */
  .crec{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:26px 26px 22px;box-shadow:0 22px 52px rgba(30,58,95,.13);text-align:left;max-width:470px;width:100%}
  .crec-ey{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-deep)}
  .crec h4{font-size:20px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.5px}
  .crec .addr{font-size:13px;color:var(--muted);margin-top:3px}
  .crec-rows{margin-top:18px}
  .crec-row{display:flex;gap:13px;padding:12px 0;border-top:1px solid #F2EEE7;font-size:13.5px;align-items:flex-start}
  .crec-row:first-child{border-top:0}
  .crec-when{font-size:11.5px;color:var(--muted);min-width:76px;padding-top:2px;font-weight:600}
  .crec-what{color:var(--slate);line-height:1.5}
  .crec-what b{color:var(--ink);font-weight:700}
  .crec-row.hot{background:#FCF6F5;border-radius:12px;margin:2px -13px;padding:12px 13px;border-top-color:transparent}
  .crec-row.hot .crec-what b{color:var(--sev-req)}

  /* the inspection spine */
  .spine{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:0;margin-top:36px}
  .spine-s{flex:1 1 160px;min-width:160px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px 16px;text-align:center}
  .spine-n{font-size:10.5px;font-weight:800;color:var(--gold-deep);letter-spacing:1.3px}
  .spine-s h4{font-size:15.5px;font-weight:800;margin-top:7px;color:var(--ink);letter-spacing:-.3px}
  .spine-s p{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
  .spine-arrow{display:flex;align-items:center;color:#D7D0C4;font-size:19px;font-weight:800;padding:0 9px}
  @media(max-width:760px){.spine{flex-direction:column}.spine-arrow{transform:rotate(90deg);padding:6px 0;width:100%;justify-content:center}}

  /* two up layout used on the PM page */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:34px;text-align:left}
  @media(max-width:860px){.duo{grid-template-columns:1fr;gap:30px}}
  .duo-copy h3{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
  .duo-copy p{font-size:15.5px;color:var(--muted);margin-top:12px;line-height:1.65}
  .duo-rules{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
  .duo-rules li{font-size:14.5px;color:var(--slate);padding-left:28px;position:relative;line-height:1.55}
  .duo-rules li::before{content:'→';position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:800}
  .duo-rules b{color:var(--ink);font-weight:800}
  .duo-visual{display:flex;justify-content:center}

  /* ═══════════════════════════════════════════════
     INTERACTIVE UMBRELLA HERO
     One page, one control, two truths. The audience toggle
     cross-fades every morphing block instead of forking the page.
     ═══════════════════════════════════════════════ */

  /* audience toggle with a sliding indicator */
  .seg{position:relative;display:inline-flex;background:#fff;border:1px solid rgba(30,58,95,.14);border-radius:999px;padding:5px;box-shadow:0 8px 26px rgba(30,58,95,.11)}
  .seg-ind{position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-hot));box-shadow:0 4px 16px var(--glow);transition:transform .44s cubic-bezier(.22,1,.36,1),width .44s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .35s ease;will-change:transform,width}
  .seg[data-mode="p"] .seg-ind{background:linear-gradient(135deg,var(--gold-deep),var(--gold));box-shadow:0 4px 16px rgba(232,168,30,.38)}
  .seg button{position:relative;z-index:1;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:800;padding:13px 28px;border-radius:999px;cursor:pointer;color:var(--slate);transition:color .3s ease;white-space:nowrap;letter-spacing:-.2px}
  .seg button:hover{color:var(--ink)}
  .seg button.on,.seg button.on:hover{color:#fff}
  .seg-wrap{display:flex;justify-content:center;margin-bottom:30px}
  @media(max-width:540px){.seg button{font-size:13px;padding:11px 15px}}

  /* cross-fade container: both variants share one grid cell, so height never jumps */
  .morph{display:grid}
  .morph>[data-mode]{grid-area:1/1;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .34s ease,transform .5s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
  .morph[data-mode="c"]>[data-mode="c"],.morph[data-mode="p"]>[data-mode="p"]{opacity:1;transform:none;pointer-events:auto}

  /* gold CTA for property manager mode */
  .btn.gold{background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:#fff;box-shadow:0 10px 30px rgba(232,168,30,.34)}
  .btn.line{background:#fff;color:var(--orange);border:1.5px solid var(--line);box-shadow:0 4px 14px rgba(30,58,95,.06)}
  .btn.line:hover{border-color:var(--orange)}

  /* the three step storyboard */
  .flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;text-align:left}
  @media(max-width:940px){.flow3{grid-template-columns:1fr;gap:14px}}
  .f3-card{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:24px 22px;height:100%;box-shadow:0 2px 12px rgba(30,58,95,.05);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .55s ease;will-change:transform}
  .f3.lit .f3-card{transform:translateY(-7px);box-shadow:0 24px 50px rgba(30,58,95,.13);border-color:rgba(30,58,95,.22)}
  .f3-top{display:flex;align-items:center;gap:12px}
  .f3-n{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--bg);color:var(--muted);border:1.5px solid var(--line);flex-shrink:0;transition:background .5s ease,color .5s ease,border-color .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .f3.lit .f3-n{background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff;border-color:transparent;transform:scale(1.08)}
  .flow3[data-mode="p"] .f3.lit .f3-n{background:linear-gradient(135deg,var(--gold-deep),var(--gold))}
  .f3-step{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
  .f3-card h3{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.4px;margin-top:14px}
  .f3-card p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:8px}

  /* the small mocks that live inside each step */
  .mini{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#FBFAF7;padding:13px 14px}
  .mini-lab{font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
  .mini-li{display:flex;gap:8px;font-size:12.5px;color:var(--slate);padding:4px 0;align-items:flex-start;line-height:1.45}
  .mini-li i{font-style:normal;flex-shrink:0;font-weight:800}
  .mini-quote{font-size:13px;color:var(--slate);line-height:1.55;margin-top:4px}
  .mini-wave{display:flex;align-items:flex-end;gap:3px;height:24px;margin-top:10px}
  .mini-wave span{width:3px;height:100%;border-radius:2px;background:var(--orange);opacity:.32;transform:scaleY(.35);transform-origin:center;transition:opacity .4s ease}
  .f3.lit .mini-wave span{animation:mwv 1.15s ease-in-out infinite}
  @keyframes mwv{0%,100%{transform:scaleY(.3);opacity:.28}50%{transform:scaleY(1);opacity:.85}}
  .mini-receipt{display:flex;align-items:center;gap:10px;background:var(--indigo-light);border:1px solid rgba(107,143,113,.32);border-radius:13px;padding:12px 13px;margin-top:16px}
  .mini-receipt .eye{font-size:17px;flex-shrink:0}
  .mini-receipt .txt{font-size:12.5px;color:#4B7B52;font-weight:700;line-height:1.4}
  .mini-receipt .tick{margin-left:auto;color:#4B7B52;font-weight:800;font-size:15px}
  .mini-declined{background:var(--sev-req-bg);border-color:rgba(192,86,75,.32)}
  .mini-declined .txt,.mini-declined .tick{color:var(--sev-req)}

  /* deeper links row */
  .deeper{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;text-align:left}
  @media(max-width:760px){.deeper{grid-template-columns:1fr}}
  .deep{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
  .deep:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(30,58,95,.12);border-color:var(--orange)}
  .deep .ico{font-size:22px;flex-shrink:0}
  .deep .t{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
  .deep .s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
  .deep .go{margin-left:auto;color:var(--orange);font-weight:800;font-size:17px}

  /* respect a reduced motion preference everywhere on these pages */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  }

  /* ═══════════════════════════════════════════════
     PLATFORM v2: products dropdown, mobile nav,
     and the two mode 30 second demonstration.
     ═══════════════════════════════════════════════ */

  /* ── products dropdown ── */
  .navdrop{position:static;display:inline-block}
  .navdrop>button{background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--slate);cursor:pointer;padding:8px 0;margin-left:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
  .navdrop>button:hover,.navdrop>button[aria-expanded="true"]{color:var(--ink)}
  .navdrop>button .caret{font-size:10px;transition:transform .2s ease}
  .navdrop>button[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .navdrop-menu{position:absolute;top:calc(100% + 6px);left:0;width:420px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(30,58,95,.18);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
  .navdrop[data-open="1"] .navdrop-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
  .navdrop-item{display:flex;gap:13px;align-items:flex-start;min-width:0;padding:14px 15px;border-radius:13px;text-decoration:none;color:inherit;margin:0;transition:background .14s}
  .navdrop-item:hover,.navdrop-item:focus-visible{background:var(--bg)}
  .navdrop-item>span:last-child{min-width:0}
  .navdrop-item .ico{font-size:19px;line-height:1.2;flex-shrink:0;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line)}
  .navdrop-item.proj .ico{background:rgba(30,58,95,.08);border-color:rgba(30,58,95,.18)}
  .navdrop-item.insp .ico{background:var(--gold-light);border-color:rgba(198,133,26,.28)}
  .navdrop-item .t{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.2px;line-height:1.3}
  .navdrop-item .aud{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .navdrop-item.insp .aud{color:var(--gold-deep)}
  .navdrop-item .d{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}

  /* ── mobile navigation ── */
  .navburger{display:none;background:none;border:1.5px solid var(--line);border-radius:11px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;margin-left:10px}
  .navburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  .navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobnav{display:none;position:fixed;inset:64px 0 0;background:#fff;z-index:55;overflow-y:auto;padding:20px 22px 60px;flex-direction:column;gap:6px}
  .mobnav[data-open="1"]{display:flex}
  .mobnav a{display:block;padding:15px 4px;font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .mobnav .mn-lab{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);padding:20px 4px 6px;border:0}
  .mobnav .mn-prod{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:8px}
  .mobnav .mn-prod .t{display:block;font-size:15px;font-weight:800}
  .mobnav .mn-prod .d{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.45}
  .mobnav .mn-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
  .mobnav .mn-cta a{text-align:center;border:0;border-radius:999px;padding:15px;font-size:16px}
  .mobnav .mn-cta .p{background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff}
  .mobnav .mn-cta .s{border:1.5px solid var(--line);color:var(--ink)}
  /* The band just above the burger is where the nav gets tight. Tighten it there
     rather than letting anything wrap. */
  @media(max-width:1040px){
    nav .navlinks{gap:15px}
    nav a{font-size:13.5px}
    nav a.cta{padding:9px 17px}
    nav a.navlogin{padding:8px 15px}
  }
  @media(max-width:900px){
    .navburger{display:flex}
    nav .navlinks a:not(.cta),nav .navlinks .navswitch{display:none}
    nav .navlinks{gap:10px}
  }

  /* ── the demonstration ── */
  .demo2{background:#fff;border:1.5px solid var(--line);border-radius:26px;box-shadow:0 24px 60px rgba(30,58,95,.11);overflow:hidden;text-align:left;max-width:820px;margin:34px auto 0}
  .demo2-tabs{display:flex;gap:6px;padding:10px 10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
  .demo2-tabs button{flex:1;border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:800;color:var(--muted);padding:14px 12px;border-radius:12px 12px 0 0;cursor:pointer;transition:background .2s,color .2s;position:relative;letter-spacing:-.2px}
  .demo2-tabs button:hover{color:var(--ink)}
  .demo2-tabs button.on{background:#fff;color:var(--orange)}
  .demo2-tabs button.on::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--coral))}
  .demo2[data-mode="finding"] .demo2-tabs button.on{color:var(--gold-deep)}
  .demo2[data-mode="finding"] .demo2-tabs button.on::after{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
  .demo2-panel{padding:28px 26px 30px}
  @media(max-width:560px){.demo2-panel{padding:22px 16px 24px}.demo2-tabs button{font-size:13px;padding:13px 6px}}
  .demo2-h{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.5px;margin:0}
  .demo2-p{font-size:14.5px;color:var(--muted);margin:8px 0 0;line-height:1.6;max-width:56ch}
  .demo2-rec{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 4px}
  .demo2-mic{width:76px;height:76px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--orange),var(--orange-hot));color:#fff;font-size:29px;cursor:pointer;box-shadow:0 10px 30px var(--glow);transition:transform .15s,box-shadow .2s,background .3s;display:grid;place-items:center}
  .demo2-mic:hover{transform:translateY(-2px)}
  .demo2[data-mode="finding"] .demo2-mic{background:linear-gradient(135deg,var(--gold-deep),var(--gold));box-shadow:0 10px 30px rgba(232,168,30,.34)}
  .demo2-mic.recording{background:linear-gradient(135deg,var(--red,#C0564B),#A8483E);animation:d2pulse 1.5s ease-in-out infinite}
  @keyframes d2pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,86,75,.42)}50%{box-shadow:0 0 0 16px rgba(192,86,75,0)}}
  .demo2-state{font-size:13.5px;color:var(--muted);font-weight:600;text-align:center;min-height:20px}
  .demo2-state b{color:var(--ink);font-variant-numeric:tabular-nums}
  .demo2-sample{background:none;border:0;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--orange);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 10px;border-radius:8px}
  .demo2[data-mode="finding"] .demo2-sample{color:var(--gold-deep)}
  .demo2-tx{margin-top:18px}
  .demo2-txlab{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  .demo2-tx textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:15px;font-family:inherit;line-height:1.55;color:var(--ink);resize:vertical;background:var(--bg2,#FBFAF7)}
  .demo2-tx textarea:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(30,58,95,.1)}
  .demo2-txacts{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
  .demo2-txacts .btn{padding:12px 20px;font-size:14px}
  .demo2-err{margin-top:14px;background:var(--sev-req-bg);border:1px solid rgba(192,86,75,.34);color:#A8483E;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.5}
  .demo2-out{margin-top:20px}

  /* processing */
  .d2-proc{padding:8px 0}
  .d2-proc-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:14px}
  .d2-proc-bar span{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--orange),var(--coral));border-radius:3px;animation:d2bar 1.1s ease-in-out infinite}
  @keyframes d2bar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
  .d2-proc-s{font-size:13.5px;color:var(--muted);padding:4px 0;opacity:0;animation:d2fade .4s ease forwards}
  @keyframes d2fade{to{opacity:1}}

  /* result card */
  .reveal{opacity:0;animation:d2rise .5s cubic-bezier(.22,1,.36,1) forwards}
  @keyframes d2rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .d2-card{border:1.5px solid var(--line);border-radius:18px;padding:20px 20px 22px;background:var(--bg2,#FBFAF7);border-top-width:4px;border-top-color:var(--orange)}
  .d2-card-insp{border-top-color:var(--gold-deep)}
  .d2-card-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
  .d2-kind{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--orange)}
  .d2-card-insp .d2-kind{color:var(--gold-deep)}
  .d2-when{margin-left:auto;font-size:11.5px;color:var(--muted)}
  .d2-lab{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
  .d2-lab:first-of-type{margin-top:0}
  .d2-li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--slate);padding:4px 0;line-height:1.5}
  .d2-li i{font-style:normal;font-weight:800;flex-shrink:0}
  .d2-li i.ok{color:var(--green)} .d2-li i.nx{color:var(--muted)} .d2-li i.wr{color:var(--gold-deep)}
  .d2-li i.note{color:var(--sev-note)} .d2-li i.rec{color:var(--sev-rec)} .d2-li i.req{color:var(--sev-req)}
  .d2-msg{font-size:14.5px;color:var(--slate);line-height:1.65;margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
  .d2-sev{padding:2px 0}
  .d2-pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.4px;padding:5px 13px;border-radius:999px;text-transform:uppercase}
  .d2-pill.ok{background:var(--sev-ok-bg);color:var(--sev-ok)}
  .d2-pill.note{background:var(--sev-note-bg);color:var(--sev-note)}
  .d2-pill.rec{background:var(--sev-rec-bg);color:var(--sev-rec)}
  .d2-pill.req{background:var(--sev-req-bg);color:var(--sev-req)}
  .d2-est{font-size:21px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .d2-kicker{font-size:15px;color:var(--ink);font-weight:700;text-align:center;margin:18px auto 0;max-width:52ch;line-height:1.55}
  .d2-receipt{display:flex;align-items:center;gap:12px;background:var(--indigo-light);border:1px solid rgba(107,143,113,.34);border-radius:14px;padding:14px 16px;margin-top:14px}
  .d2-eye{font-size:19px;flex-shrink:0}
  .d2-rtxt{font-size:13.5px;color:#4B7B52;line-height:1.5}
  .d2-rtxt b{color:#3D6B44}
  .d2-tick{margin-left:auto;color:#4B7B52;font-weight:800;font-size:17px}
  .d2-owner{margin-top:14px;border:1.5px solid var(--sev-req);border-radius:16px;padding:16px 18px;background:var(--sev-req-bg)}
  .d2-owner-h{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--sev-req)}
  .d2-owner-b{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
  .d2-owner-b .btn{padding:12px 20px;font-size:14px}
  .d2-owner-n{font-size:13px;color:var(--slate);margin:13px 0 0;line-height:1.55}
  .d2-decided{font-size:13.5px;font-weight:700;padding:11px 14px;border-radius:11px;line-height:1.5}
  .d2-decided.yes{background:var(--indigo-light);color:#3D6B44}
  .d2-decided.no{background:#fff;color:var(--sev-req);border:1px solid rgba(192,86,75,.3)}
  .d2-time{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0;counter-reset:t}
  .d2-time li{position:relative;padding:9px 0 9px 26px;font-size:13.5px;color:var(--slate);opacity:0;animation:d2fade .4s ease forwards}
  .d2-time li span{position:absolute;left:5px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-light)}
  .d2-time li::before{content:'';position:absolute;left:9px;top:24px;bottom:-2px;width:1px;background:var(--line)}
  .d2-time li:last-child::before{display:none}
  .d2-cta{margin-top:20px;text-align:center}

  /* hero: the two products shown as real product output, not stock art */
  .heroduo{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:52px auto 0;text-align:left}
  @media(max-width:720px){.heroduo{grid-template-columns:1fr;max-width:420px}}
  .hd-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px 18px 14px;box-shadow:0 12px 34px rgba(30,58,95,.09)}
  .hd-h{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
  .hd-kind{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
  .hd-kind.proj{color:var(--orange)} .hd-kind.insp{color:var(--gold-deep)}
  .hd-when{margin-left:auto;font-size:10.5px;color:var(--muted)}
  .hd-li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--slate);padding:4px 0;line-height:1.45}
  .hd-li i{font-style:normal;font-weight:800;flex-shrink:0}
  .hd-li i.ok{color:var(--green)} .hd-li i.nx{color:var(--muted)} .hd-li i.wr{color:var(--gold-deep)}
  .hd-li i.rec{color:var(--sev-rec)} .hd-li i.req{color:var(--sev-req)}
  .hd-foot{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;display:flex;gap:7px;align-items:center}
  .hd-foot.ok{color:#4B7B52} .hd-foot.req{color:var(--sev-req)}

  .tag-planned{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--line);color:var(--muted);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:7px}
  .legalnote{max-width:78ch;margin:0 auto;font-size:13.5px;line-height:1.65;color:var(--muted);background:var(--bg2,#FBFAF7);border:1px solid var(--line);border-radius:16px;padding:20px 24px;text-align:left}
  .legalnote b{color:var(--ink)}
  .crosslink{display:flex;align-items:center;gap:15px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px 24px;text-align:left;flex-wrap:wrap}
  .crosslink .ico{font-size:24px;flex-shrink:0}
  .crosslink>span:nth-child(2){flex:1;min-width:240px;font-size:14.5px;color:var(--muted);line-height:1.55}
  .crosslink b{color:var(--ink)}
  .crosslink a{font-size:14px;font-weight:800;color:var(--orange);text-decoration:none;white-space:nowrap}

  /* ═══════════════════════════════════════════════
     AMBIENT BACKGROUND
     Three things at once, all barely there: a precision
     grid for structure, three very large colour fields
     drifting on desynchronised timers, and a grain
     overlay that kills gradient banding.

     What keeps it from looking cheap: the shapes are far
     larger than the viewport, so you read a slow shift in
     colour rather than objects moving across a screen.
     Nothing is above 8% opacity. Nothing loops in under
     half a minute. Only transform and opacity animate, so
     it stays on the compositor and costs no layout.
     ═══════════════════════════════════════════════ */
  .ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
    contain:strict;                       /* isolate it from the rest of the page's layout work */
    background:transparent}               /* the squares come from .sitebg, one layer down */
  .ambient>span{position:absolute;display:block;will-change:transform}

  /* Structure. Faded at the edges so it never reads as a hard table. */
  .amb-grid{inset:-2px;background-image:
      linear-gradient(to right, rgba(30,58,95,.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(30,58,95,.055) 1px, transparent 1px);
    background-size:74px 74px;
    -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%, #000 30%, transparent 78%);
    mask-image:radial-gradient(ellipse 78% 68% at 50% 42%, #000 30%, transparent 78%);
    animation:ambGrid 64s linear infinite}
  @keyframes ambGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(74px,74px,0)}}

  /* Colour fields. Radial gradients rather than blurred divs: same softness, none of the cost. */
  .amb-orb{border-radius:50%;opacity:.75}
  .amb-orb.a{width:78vw;height:78vw;min-width:760px;min-height:760px;top:-34%;left:-18%;
    background:radial-gradient(circle at 50% 50%, rgba(30,58,95,.10) 0%, rgba(30,58,95,.05) 34%, transparent 68%);
    animation:ambA 38s ease-in-out infinite alternate}
  .amb-orb.b{width:70vw;height:70vw;min-width:680px;min-height:680px;top:-22%;right:-20%;
    background:radial-gradient(circle at 50% 50%, rgba(216,195,165,.30) 0%, rgba(232,168,30,.09) 36%, transparent 70%);
    animation:ambB 47s ease-in-out infinite alternate}
  .amb-orb.c{width:64vw;height:64vw;min-width:600px;min-height:600px;bottom:-38%;left:26%;
    background:radial-gradient(circle at 50% 50%, rgba(107,143,113,.16) 0%, rgba(107,143,113,.05) 40%, transparent 72%);
    animation:ambC 59s ease-in-out infinite alternate}
  /* Deliberately unequal durations and distances, so the three never resynchronise into a
     visible loop. That repeat is what makes cheap background motion feel cheap. */
  @keyframes ambA{from{transform:translate3d(0,0,0) scale(1)}      to{transform:translate3d(7vw,5vh,0) scale(1.10)}}
  @keyframes ambB{from{transform:translate3d(0,0,0) scale(1.06)}   to{transform:translate3d(-6vw,7vh,0) scale(1)}}
  @keyframes ambC{from{transform:translate3d(0,0,0) scale(1)}      to{transform:translate3d(-8vw,-5vh,0) scale(1.12)}}

  /* One slow pass of light. Wide and weak: it should register as the room brightening. */
  .amb-sweep{top:-60%;left:-40%;width:46%;height:220%;transform:rotate(14deg);
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.62) 55%, transparent 100%);
    animation:ambSweep 26s cubic-bezier(.55,0,.45,1) infinite}
  @keyframes ambSweep{
    0%{transform:translate3d(-40%,0,0) rotate(14deg);opacity:0}
    12%{opacity:1}
    72%{opacity:1}
    100%{transform:translate3d(300%,0,0) rotate(14deg);opacity:0}}

  /* Grain. Removes the banding you otherwise get across large soft gradients, and reads as
     print texture rather than as an effect. Static on purpose: animated grain is nausea. */
  .amb-grain{inset:0;opacity:.030;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px}

  /* A phone renders this at a fraction of the size for a fraction of the payoff, and it is the
     device most likely to be on a battery. Keep the colour, drop the moving parts. */
  @media(max-width:820px){
    .ambient>.amb-sweep{display:none}
    .ambient>.amb-grid{animation:none;background-size:56px 56px}
    .ambient>.amb-orb.a,.ambient>.amb-orb.b,.ambient>.amb-orb.c{animation:none}
  }
  /* Anyone who has asked for less motion gets a still image of the same composition. */
  @media (prefers-reduced-motion: reduce){
    .ambient>.amb-grid,.ambient>.amb-orb,.ambient>.amb-sweep{animation:none !important}
    .ambient>.amb-sweep{opacity:0}
  }

  /* ═══════════════════════════════════════════════
     SPLIT CHOOSER
     The two answers ARE the page. A centred card
     cluster leaves a wide monitor mostly empty; two
     full-bleed panes never do, at any width.
     Hovering one grows it and settles the other back.
     ═══════════════════════════════════════════════ */
  .ch-promise{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--muted);background:rgba(255,255,255,.72);border:1px solid rgba(30,58,95,.09);
    padding:8px 16px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .ch-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
  .ch-q{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--ink);
    margin-top:15px;text-wrap:balance}
  .ch-lede{font-size:15.5px;color:var(--muted);max-width:52ch;margin:11px auto 0;line-height:1.55}
  .ch-both{font-size:13.5px;color:var(--muted)}
  .ch-scroll{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted);
    text-decoration:none;padding:9px 18px;border-radius:999px;border:1px solid transparent;transition:all .22s ease}
  .ch-scroll svg{width:15px;height:15px;flex-shrink:0;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .ch-scroll:hover{color:var(--ink);border-color:rgba(30,58,95,.12);background:rgba(255,255,255,.75)}
  .ch-scroll:hover svg{transform:translateY(3px)}
  .ch-arrow{width:17px;height:17px;flex-shrink:0;transition:transform .34s cubic-bezier(.22,1,.36,1)}

  .split{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 64px);overflow:hidden}
  .split-head{position:relative;z-index:2;text-align:center;padding:clamp(22px,3.6vh,44px) 22px clamp(16px,2.4vh,28px)}
  .split-foot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;
    padding:clamp(14px,2vh,22px) 22px clamp(16px,2.4vh,26px)}

  .split-panes{position:relative;z-index:1;flex:1;display:flex;min-height:min(50vh,440px)}

  .pane{position:relative;display:flex;flex:1 1 0;min-width:0;text-decoration:none;color:inherit;overflow:hidden;
    transition:flex-grow .55s cubic-bezier(.22,1,.36,1), background-color .45s ease;
    border-top:1px solid rgba(30,58,95,.09)}
  .pane+.pane{border-left:1px solid rgba(30,58,95,.09)}
  .pane-a{background:rgba(30,58,95,.022)}
  .pane-b{background:rgba(216,195,165,.10)}
  /* Small on purpose. A dramatic expansion is a gimmick; this reads as the page responding. */
  .split-panes:hover .pane{flex-grow:.9}
  .pane:hover,.pane:focus-visible,.pane:focus-within{flex-grow:1.22}
  .pane-a:hover,.pane-a:focus-within{background:rgba(30,58,95,.045)}
  .pane-b:hover,.pane-b:focus-within{background:rgba(216,195,165,.20)}
  .pane:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}

  /* A hairline that fills along the top edge of whichever side you are on. */
  .pane::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--orange),var(--coral));transition:transform .55s cubic-bezier(.22,1,.36,1);z-index:3}
  .pane-b::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
  .pane:hover::before,.pane:focus-within::before{transform:scaleX(1)}

  /* Content sits toward the seam so the two halves read as one composition, even at 2600px. */
  .pane-inner{display:flex;align-items:center;gap:clamp(18px,2.2vw,40px);width:100%;
    max-width:clamp(560px,46vw,760px);padding:clamp(24px,4vh,48px) clamp(22px,2.6vw,48px)}
  .pane-a .pane-inner{margin-left:auto;flex-direction:row-reverse}
  .pane-b .pane-inner{margin-right:auto}
  .pane-copy{display:block;flex:1 1 300px;min-width:0}

  .pane-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
    background:rgba(30,58,95,.06);color:var(--orange);border:1px solid rgba(30,58,95,.09);
    transition:background .38s ease,color .38s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .pane-ico svg{width:22px;height:22px;display:block}
  .pane-b .pane-ico{background:rgba(198,133,26,.10);color:var(--gold-deep);border-color:rgba(198,133,26,.16)}
  .pane:hover .pane-ico,.pane:focus-within .pane-ico{background:var(--orange);color:#fff;border-color:transparent;transform:translateY(-3px)}
  .pane-b:hover .pane-ico,.pane-b:focus-within .pane-ico{background:var(--gold-deep);color:#fff}

  .pane-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:20px}
  .pane-t{display:block;font-size:clamp(26px,2.4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.06;color:var(--ink);margin-top:10px}
  .pane-d{display:block;font-size:clamp(14.5px,1.02vw,16.5px);color:var(--muted);line-height:1.62;margin-top:15px}
  .pane-go{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--orange);margin-top:22px}
  .pane-b .pane-go{color:var(--gold-deep)}
  .pane:hover .ch-arrow,.pane:focus-within .ch-arrow{transform:translateX(5px)}

  /* ── the product artifact ──
     What each product actually hands the owner. Sits low and quiet, rises when you lean in. */
  .pane-art{display:block;flex:0 1 clamp(240px,19vw,320px);min-width:0;opacity:.5;
    transform:translateY(16px) scale(.97);
    transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}
  .pane:hover .pane-art,.pane:focus-within .pane-art{opacity:1;transform:none}
  .art-card{display:block;background:#fff;border:1px solid rgba(30,58,95,.10);border-radius:16px;padding:15px 16px 13px;
    box-shadow:0 1px 2px rgba(30,58,95,.04), 0 18px 40px -24px rgba(30,58,95,.4);
    transition:box-shadow .5s ease}
  .pane:hover .art-card{box-shadow:0 1px 2px rgba(30,58,95,.05), 0 30px 56px -26px rgba(30,58,95,.44)}
  .art-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
  .art-h b{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
  .pane-b .art-h b{color:var(--gold-deep)}
  .art-h i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--muted)}
  .art-li{display:block;position:relative;padding-left:18px;font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:6px}
  .art-li::before{position:absolute;left:0;top:0;font-weight:800;font-size:11px}
  .art-li.ok::before{content:'✓';color:var(--green)}
  .art-li.next::before{content:'→';color:var(--muted)}
  .art-li.warn::before{content:'⚠';color:var(--gold-deep)}
  .art-sev{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--red,#C0564B);border:1px solid var(--red,#C0564B);border-radius:999px;padding:3px 9px}
  .art-title{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.35}
  .art-est{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
  .art-acts{display:flex;gap:6px;margin-top:11px}
  .art-acts i{font-style:normal;font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px}
  .art-acts .yes{background:var(--orange);color:#fff}
  .art-acts .no{background:#fff;color:var(--slate);border:1px solid rgba(30,58,95,.14)}
  .art-foot{display:block;margin-top:11px;padding-top:9px;border-top:1px solid rgba(30,58,95,.07);
    font-size:11px;font-weight:700}
  .art-foot.ok{color:#4B7B52}
  .art-foot.req{color:var(--red,#C0564B)}

  /* Below this the artifact crowds the words, so it steps aside first. */
  @media(max-width:1180px) and (min-width:901px){
    .pane-art{display:none}
    .pane-inner{max-width:440px}
  }

  /* ── narrow: stack the panes, keep the artifacts visible rather than hidden ── */
  /* On a phone the whole point is that you can SEE there are two choices without scrolling.
     The artifact is the first thing to go, then the padding. */
  @media(max-width:620px){
    .pane-art{display:none}
    .pane-inner{padding:18px 20px 20px !important;gap:0 !important}
    .pane-ico{width:34px;height:34px;border-radius:10px}
    .pane-ico svg{width:17px;height:17px}
    .pane-kicker{margin-top:12px;font-size:9.5px}
    .pane-t{margin-top:5px;line-height:1.1}
    .pane-d{font-size:13.5px;margin-top:8px;line-height:1.5}
    .pane-go{margin-top:12px;font-size:13.5px}
    .split-head{padding:16px 18px 14px}
    .split-foot{padding:14px 18px 20px;gap:7px}
    .ch-promise{font-size:11px;padding:6px 12px}
    .ch-q{font-size:clamp(24px,6.6vw,30px);margin-top:11px}
    .ch-lede{font-size:13.5px;margin-top:8px}
    .ch-both{font-size:12px}
    .ch-scroll{font-size:12.5px;padding:7px 14px}
  }

  @media(max-width:900px){
    .split{min-height:0}
    .split-panes{flex-direction:column;min-height:0}
    .pane{flex:none}
    .pane+.pane{border-left:0;border-top:1px solid rgba(30,58,95,.09)}
    .split-panes:hover .pane,.pane:hover,.pane:focus-within{flex-grow:1}
    .pane-inner{flex-direction:column !important;align-items:flex-start;justify-content:flex-start;
      gap:20px;padding:26px 22px 28px;max-width:none;margin:0}
    .pane-copy{max-width:none}
    .pane-art{flex:none;width:100%;max-width:340px;opacity:1;transform:none}
    .pane-t{font-size:clamp(24px,6.4vw,30px)}
    .split-head{padding:22px 18px 18px}
    .split-foot{padding:20px 18px 26px}
  }
  @media (prefers-reduced-motion: reduce){
    .split-panes:hover .pane,.pane:hover,.pane:focus-within,.pane:focus-visible{flex-grow:1}
    .pane-art{opacity:1;transform:none}
  }

  @media print{.sitebg{display:none}}